@keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeIn 0.6s ease-out forwards;
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        /* Mode TikTok - Vue Matières */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            position: fixed;
            overflow: hidden;
        }

        /* Main Scroll Container */
        .scroll-container {
            width: 100%;
            height: 100dvh;
            overflow-y: scroll;
            overflow-x: hidden;
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding-top: 0; /* Pas de padding, le dashboard gère son propre espace */
        }

        main {
            padding: 0 !important;
        }

        main>.container {
            max-width: 100% !important;
            padding: 0 !important;
        }

        section[id]:not(#dashboard):not(#login):not(#paywall):not(#hub) {
            display: none !important;
        }

        /* Scroll pour login et paywall */
        #login, #paywall {
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            overscroll-behavior: contain;
        }

        #dashboard {
            display: flex !important;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 100dvh;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            padding: 20px;
            padding-top: 80px; /* Espace pour la navbar fixe */
            padding-bottom: max(40px, env(safe-area-inset-bottom));
            margin: 0;
            background: linear-gradient(to bottom, #ffffff, #f3f4f6);
            z-index: 20;
            position: relative;
            overflow: hidden;
            will-change: transform;
            contain: layout style paint;
        }

        /* Container pour les matières */
        #mobile-subjects-view {
            display: flex !important;
            flex-direction: column;
            gap: 0;
        }

        #mobile-subjects-view.hidden {
            display: none !important;
        }


        /* Header avec position relative */
        header .container {
            position: relative !important;
        }

        /* Carte matière en plein écran avec carousel horizontal */
        .subject-card {
            scroll-snap-align: start;
            scroll-snap-stop: always;
            width: 100%;
            height: 100dvh;
            display: flex !important;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding-top: 70px !important; 
            padding-bottom: 60px !important;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--card-color-1), var(--card-color-2)) !important;
            will-change: transform;
            contain: layout style paint;
        }

        .subject-card-content {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0;
            z-index: 10;
            height: 100%;
            max-height: 100%;
        }

        /* Carousel horizontal des fiches */
        .subject-carousel {
            width: 100%;
            flex: 1;
            min-height: 0;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 0 2rem;
            margin: 0 !important;
            overscroll-behavior-x: contain;
            overscroll-behavior-y: contain;
            touch-action: auto;
        }

        .subject-carousel::-webkit-scrollbar {
            display: none;
        }

        .carousel-slide {
            /* LA SOLUTION: Hauteur relative à l'espace disponible */
            height: 85% !important; 
            max-height: 600px; /* Max pour pas être géant sur grand écran */
            aspect-ratio: 1 / 1.618 !important; /* Le ratio détermine la largeur */
            width: auto;
            min-width: 0;
            
            scroll-snap-align: center;
            scroll-snap-stop: normal;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0;
            position: relative;
            flex-shrink: 0;
            perspective: 1000px;
            /* Marge de sécurité pour les animations verticales */
            margin: 20px 0; 
        }

        .carousel-slide:active .carousel-slide-content {
            transform: scale(0.98) translateY(-3px);
            transition: transform 0.1s;
        }

        .carousel-slide-content {
            max-width: 100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(145deg,
                    rgba(255, 255, 255, 0.95) 0%,
                    rgba(255, 255, 255, 0.9) 50%,
                    rgba(250, 250, 250, 0.95) 100%);
            /* backdrop-filter: blur(20px); - DÉSACTIVÉ PERF */
            border-radius: 32px;
            padding: 2rem; /* Padding ajusté pour le carré */
            border: 4px solid rgba(255, 255, 255, 1);
            box-shadow: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between; /* Distribution équilibrée */
            min-height: 0; /* Pas de min-height pour le carré */
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            transform-style: preserve-3d;
        }

        /* --- EFFETS GAMIFICATION TCG (TRADING CARD GAME) --- */

        /* 1. Effet Holographique (Shiny) pour Score Excellent (>80%) */
        .carousel-slide.legendary .carousel-slide-content {
            border: 4px solid #FCD34D !important; /* Bordure Or */
            box-shadow: none !important;
        }

        .carousel-slide.legendary .carousel-slide-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: -150%;
            width: 300%;
            height: 100%;
            background: linear-gradient(115deg,
                transparent 30%,
                rgba(255, 255, 255, 0.4) 45%,
                rgba(255, 255, 255, 0.6) 50%,
                rgba(255, 255, 255, 0.4) 55%,
                transparent 70%);
            transform: skewX(-20deg);
            /* animation: holoShine 6s cubic-bezier(0.4, 0, 0.2, 1) infinite; */
            pointer-events: none;
            z-index: 10;
            opacity: 0;
        }

        @keyframes holoShine {
            0%, 50% { left: -150%; opacity: 0; }
            51% { opacity: 1; }
            100% { left: 150%; opacity: 1; }
        }

        /* 2. Effet de Respiration (Idle) pour rendre les cartes vivantes - DÉSACTIVÉ pour perf */
        .carousel-slide:not(.unvisited) .carousel-slide-content {
            /* animation: cardBreath 6s ease-in-out infinite; */
        }

        @keyframes cardBreath {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-5px) scale(1.01); }
        }

        /* 3. Ruban de "Maître" (100% Score) */
        .mastery-ribbon {
            position: absolute;
            top: -10px;
            right: 1rem;
            background: linear-gradient(135deg, #EF4444, #B91C1C);
            color: white;
            font-size: 1.5rem;
            width: 40px;
            height: 50px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 8px;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
            z-index: 20;
            filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));
            animation: dropIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .mastery-ribbon span {
            filter: drop-shadow(0 2px 0 rgba(0,0,0,0.2));
        }

        @keyframes dropIn {
            from { transform: translateY(-100px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        /* Format Golden Ratio pour Desktop */
        @media (min-width: 769px) {
            .carousel-slide {
                /* On garde la logique fluide définie plus haut */
                /* height: 85% du container parent */
            }

            .carousel-slide-content {
                height: 100% !important;
                padding: 2.5rem 2rem !important;
            }
        }

                /* Ajustements Responsive pour Mobile (Effet Zoom-out & Carré) */
                @media (max-width: 768px) {
                    .subject-card {
                        padding-top: 50px !important; /* More compact top */
                        padding-bottom: 30px !important;
                        overflow-y: hidden !important;
                    }
        
                    .subject-card-content {
                        justify-content: center !important;
                    }
        
                    .subject-carousel {
                        padding: 0 1rem !important;
                        gap: 0.8rem !important;
                    }
        
                    .carousel-slide {
                        height: auto !important;
                        width: 85vw !important; /* Slightly wider to use horizontal space */
                        aspect-ratio: 9/13 !important;
                        max-height: 58vh !important; /* Aggressive height limit for small screens */
                        margin: 0 !important;
                    }
        
                    .carousel-slide-content {
                        padding: 1rem 0.8rem !important; /* Compact internal padding */
                        border-radius: 20px !important;
                        gap: 0.4rem !important;
                    }
        
                    .carousel-slide-emoji {
                        width: 50px !important;
                        height: 50px !important;
                        font-size: 2.2rem !important;
                        margin-bottom: 0.2rem !important;
                    }
        
                    .carousel-slide-title {
                        font-size: 1.1rem !important;
                        margin-bottom: 0.1rem !important;
                        line-height: 1.1 !important;
                    }
        
                    .subject-card-title {
                        font-size: 1.1rem !important;
                        margin-bottom: 0.1rem !important;
                    }
                    
                    .subject-card-emoji {
                        font-size: 2.2rem !important;
                    }
        
                    .subject-card-button {
                        font-size: 1rem !important;
                        padding: 0.6rem 1.2rem !important;
                        border-radius: 12px !important;
                    }
        
                    .card-description-box {
                        padding: 0.4rem !important;
                        font-size: 0.7rem !important;
                        border-radius: 12px !important;
                        margin: 0.2rem 0 !important;
                    }
                    
                    .card-badge-container {
                        margin: 0.2rem 0 !important;
                        gap: 0.2rem !important;
                    }
                    
                    .card-pill {
                        padding: 0.15rem 0.4rem !important;
                        font-size: 0.6rem !important;
                        border-radius: 6px !important;
                    }
                }
        /* Retro Font Styles */
        .retro-font { font-family: 'VT323', monospace; }
        .pixel-border { 
            box-shadow: 
                -4px 0 0 0 #e5e7eb,
                4px 0 0 0 #e5e7eb,
                0 -4px 0 0 #e5e7eb,
                0 4px 0 0 #e5e7eb;
            margin: 4px;
        }
        .retro-btn:active { transform: translateY(4px); }

        /* Effet shimmer de gamification premium - DÉSACTIVÉ pour perf */
        .carousel-slide-content::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(120deg,
                    transparent 20%,
                    rgba(255, 255, 255, 0.6) 40%,
                    rgba(255, 255, 255, 0.8) 50%,
                    rgba(255, 255, 255, 0.6) 60%,
                    transparent 80%);
            /* animation: shimmer 4s ease-in-out infinite; */
            pointer-events: none;
            opacity: 0;
        }

        @keyframes shimmer {
            0% {
                transform: translateX(-150%) translateY(-150%) rotate(45deg);
            }

            100% {
                transform: translateX(150%) translateY(150%) rotate(45deg);
            }
        }


        /* Style pour les fiches non visitées - Carte mystère */
        .carousel-slide.unvisited {
            cursor: pointer;
        }

        .carousel-slide.unvisited .carousel-slide-content {
            background: linear-gradient(145deg,
                    #374151 0%,
                    #1f2937 50%,
                    #111827 100%) !important;
            backdrop-filter: none !important;
            border: 4px solid #4b5563 !important;
            box-shadow: none !important;
            position: relative !important;
            overflow: hidden !important;
        }

        .carousel-slide.unvisited .carousel-slide-content::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(45deg,
                    transparent,
                    transparent 10px,
                    rgba(255, 255, 255, 0.03) 10px,
                    rgba(255, 255, 255, 0.03) 20px);
            pointer-events: none;
        }

        .carousel-slide.unvisited .carousel-slide-emoji,
        .carousel-slide.unvisited .carousel-slide-title,
        .carousel-slide.unvisited .carousel-slide-description {
            opacity: 0 !important;
            visibility: hidden !important;
        }

        .carousel-slide.unvisited .subject-card-button {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        /* SUPER BOUTON D'ACTION */
        .subject-card-button {
            margin-top: auto;
            flex-shrink: 0 !important; /* IMPORTANT: Ne pas rétrécir le bouton */
            min-height: 50px !important; /* Hauteur minimum garantie */
            width: 100%;
            padding: 1.25rem 2rem !important;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
            color: white !important;
            font-family: 'Poppins', sans-serif !important;
            font-size: 1.1rem !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
            border-radius: 18px !important;
            border: 3px solid rgba(255, 255, 255, 0.4) !important;
            box-shadow:
                0 10px 30px rgba(139, 92, 246, 0.5),
                0 5px 15px rgba(0, 0, 0, 0.2),
                inset 0 2px 4px rgba(255, 255, 255, 0.4),
                inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
            cursor: pointer !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            position: relative !important;
            overflow: hidden !important;
            text-decoration: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.75rem !important;
            pointer-events: none !important;
        }

        .subject-card-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.4),
                    transparent);
            transition: left 0.5s;
        }

        .subject-card-button:hover {
            /* Suppression de l'animation de mouvement - bouton fixe */
            box-shadow:
                0 15px 40px rgba(139, 92, 246, 0.7),
                0 8px 20px rgba(0, 0, 0, 0.3),
                inset 0 3px 6px rgba(255, 255, 255, 0.5),
                inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important;
            border-color: rgba(255, 255, 255, 0.7) !important;
        }

        .subject-card-button:hover::before {
            left: 100%;
        }

        .subject-card-button::after {
            content: '→';
            font-size: 1.3rem;
            font-weight: 900;
            /* Animation arrowBounce supprimée - flèche fixe */
        }

        /* Animation arrowBounce supprimée */

        .carousel-slide.unvisited .carousel-slide-stats {
            opacity: 0 !important;
            visibility: hidden !important;
        }

        /* Point d'interrogation pour fiches non visitées - Style mystère */
        .carousel-slide.unvisited::before {
            content: '?';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12rem;
            font-weight: 900;
            background: linear-gradient(135deg, #9ca3af, #d1d5db, #f3f4f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            z-index: 10;
            pointer-events: none;
            filter: drop-shadow(0 10px 40px rgba(255, 255, 255, 0.2));
            font-family: 'Poppins', sans-serif;
            /* animation: pulseQuestion 2s ease-in-out infinite; - DÉSACTIVÉ PERF */
        }

        .carousel-slide.unvisited::after {
            content: none;
        }

        @keyframes lockFloat {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-5px);
            }
        }

        @keyframes pulseQuestion {

            0%,
            100% {
                transform: translate(-50%, -50%) scale(1) rotate(-5deg);
                opacity: 0.9;
            }

            50% {
                transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
                opacity: 1;
            }
        }

        /* Animation de révélation dopamine */
        @keyframes revealCard {
            0% {
                transform: scale(1);
            }

            25% {
                transform: scale(1.05) rotate(-2deg);
            }

            50% {
                transform: scale(1.1) rotate(2deg);
            }

            75% {
                transform: scale(1.05) rotate(-1deg);
            }

            100% {
                transform: scale(1) rotate(0deg);
            }
        }

        .carousel-slide.revealing {
            animation: revealCard 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Couleurs pastel pour les cartes visitées (100% opaque, pas de transparence) */
        .carousel-slide.visited-green .carousel-slide-content {
            background: linear-gradient(135deg, #BBF7D0, #86EFAC) !important;
            border: 3px solid #34D399 !important;
            box-shadow: none !important;
        }

        .carousel-slide.visited-blue .carousel-slide-content {
            background: linear-gradient(135deg, #BFDBFE, #93C5FD) !important;
            border: 3px solid #3B82F6 !important;
            box-shadow: none !important;
        }

        .carousel-slide.visited-red .carousel-slide-content {
            background: linear-gradient(135deg, #FECACA, #FCA5A5) !important;
            border: 3px solid #EF4444 !important;
            box-shadow: none !important;
        }

        .carousel-slide.visited-yellow .carousel-slide-content {
            background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
            border: 3px solid #F59E0B !important;
            box-shadow: none !important;
        }

        .carousel-slide.visited-lavender .carousel-slide-content {
            background: linear-gradient(135deg, #E9D5FF, #D8B4FE) !important;
            border: 3px solid #A855F7 !important;
            box-shadow: none !important;
        }

        .carousel-slide.visited-pink .carousel-slide-content {
            background: linear-gradient(135deg, #FBCFE8, #F9A8D4) !important;
            border: 3px solid #EC4899 !important;
            box-shadow: none !important;
        }

        .carousel-slide.visited-orange .carousel-slide-content {
            background: linear-gradient(135deg, #FED7AA, #FDBA74) !important;
            border: 3px solid #F97316 !important;
            box-shadow: none !important;
        }

        /* Texte visible sur les cartes visitées */
        .carousel-slide.visited-green .carousel-slide-title,
        .carousel-slide.visited-green .carousel-slide-description,
        .carousel-slide.visited-blue .carousel-slide-title,
        .carousel-slide.visited-blue .carousel-slide-description,
        .carousel-slide.visited-red .carousel-slide-title,
        .carousel-slide.visited-red .carousel-slide-description,
        .carousel-slide.visited-yellow .carousel-slide-title,
        .carousel-slide.visited-yellow .carousel-slide-description,
        .carousel-slide.visited-lavender .carousel-slide-title,
        .carousel-slide.visited-lavender .carousel-slide-description,
        .carousel-slide.visited-pink .carousel-slide-title,
        .carousel-slide.visited-pink .carousel-slide-description,
        .carousel-slide.visited-orange .carousel-slide-title,
        .carousel-slide.visited-orange .carousel-slide-description {
            opacity: 1 !important;
            visibility: visible !important;
            color: #1F2937 !important;
        }

        .carousel-slide.visited-green .carousel-slide-emoji,
        .carousel-slide.visited-blue .carousel-slide-emoji,
        .carousel-slide.visited-red .carousel-slide-emoji,
        .carousel-slide.visited-yellow .carousel-slide-emoji,
        .carousel-slide.visited-lavender .carousel-slide-emoji,
        .carousel-slide.visited-pink .carousel-slide-emoji,
        .carousel-slide.visited-orange .carousel-slide-emoji {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .carousel-slide.visited-green .subject-card-button,
        .carousel-slide.visited-blue .subject-card-button,
        .carousel-slide.visited-red .subject-card-button,
        .carousel-slide.visited-yellow .subject-card-button,
        .carousel-slide.visited-lavender .subject-card-button,
        .carousel-slide.visited-pink .subject-card-button,
        .carousel-slide.visited-orange .subject-card-button {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .carousel-slide.visited-green .carousel-slide-stats,
        .carousel-slide.visited-blue .carousel-slide-stats,
        .carousel-slide.visited-red .carousel-slide-stats,
        .carousel-slide.visited-yellow .carousel-slide-stats,
        .carousel-slide.visited-lavender .carousel-slide-stats,
        .carousel-slide.visited-pink .carousel-slide-stats,
        .carousel-slide.visited-orange .carousel-slide-stats {
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Badge de note sur les fiches visitées - Déplacé à GAUCHE */
        .carousel-slide-badge {
            position: absolute;
            top: 1.5rem;
            left: 1.5rem;
            /* GAUCHE */
            right: auto;
            /* Pas droite */
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            font-weight: 900;
            font-size: 1.1rem;
            padding: 1rem 1.25rem;
            border-radius: 20px;
            box-shadow:
                0 15px 40px rgba(16, 185, 129, 0.6),
                0 5px 15px rgba(0, 0, 0, 0.3),
                inset 0 2px 4px rgba(255, 255, 255, 0.5),
                inset 0 -2px 4px rgba(0, 0, 0, 0.2);
            font-family: 'Poppins', sans-serif;
            z-index: 20;
            display: none;
            animation: badgeBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border: 3px solid rgba(255, 255, 255, 0.6);
            transform-style: preserve-3d;
        }

        /* Compteur de Streak (Vues) - HAUT DROITE */
        .streak-counter {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: rgba(255, 255, 255, 0.9);
            color: #1F2937;
            font-weight: 900;
            font-size: 1.6rem;
            padding: 0.4rem 1rem;
            border-radius: 18px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            z-index: 20;
            font-family: 'Poppins', sans-serif;
            border: 2px solid rgba(255, 255, 255, 0.8);
            /* backdrop-filter: blur(8px); - DÉSACTIVÉ PERF */
            display: flex;
            align-items: baseline;
            gap: 0.2rem;
            transform: rotate(3deg);
            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .streak-counter .x-label {
            font-size: 1rem;
            color: #6B7280;
            font-weight: 800;
            text-transform: lowercase;
        }

        .carousel-slide-badge::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            background: linear-gradient(45deg,
                    #10b981,
                    #34d399,
                    #6ee7b7,
                    #34d399,
                    #10b981);
            border-radius: 20px;
            z-index: -1;
            opacity: 0;
            /* animation: badgeGlow 2s ease-in-out infinite; - DÉSACTIVÉ PERF */
            background-size: 200% 200%;
        }

        @keyframes badgeGlow {

            0%,
            100% {
                opacity: 0.5;
                background-position: 0% 50%;
            }

            50% {
                opacity: 0.8;
                background-position: 100% 50%;
            }
        }

        @keyframes badgeBounceIn {
            0% {
                opacity: 0;
                transform: scale(0) rotate(-45deg);
            }

            60% {
                opacity: 1;
                transform: scale(1.2) rotate(5deg);
            }

            100% {
                transform: scale(1) rotate(0deg);
            }
        }

        .carousel-slide.has-score .carousel-slide-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.15rem;
            padding: 0.6rem 0.9rem;
        }

        .carousel-slide.has-score .carousel-slide-badge:hover {
            transform: scale(1.15) rotate(5deg);
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6);
            transition: all 0.3s ease;
        }

        /* Barre de progression dans le badge */
        .badge-progress-bar {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            overflow: hidden;
            margin-top: 0.4rem;
        }

        .badge-progress-fill {
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            animation: progressFill 1s ease-out;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
        }

        @keyframes progressFill {
            from {
                width: 0 !important;
            }
        }

        /* Étoile pour excellent score */
        .badge-star {
            position: absolute;
            top: -8px;
            left: -8px;
            font-size: 1.5rem;
            /* animation: starTwinkle 1s ease-in-out infinite; - DÉSACTIVÉ PERF */
        }

        @keyframes starTwinkle {

            0%,
            100% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }

            50% {
                transform: scale(1.2) rotate(10deg);
                opacity: 0.8;
            }
        }

        /* Animations spéciales selon le score */
        .badge-excellent {
            animation: badgeBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        @keyframes badgePulse {

            0%,
            100% {
                box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
            }

            50% {
                box-shadow: 0 8px 25px rgba(16, 185, 129, 0.7);
            }
        }

        .badge-needs-work {
            animation: badgeBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), badgeShake 0.5s ease-in-out 1s;
        }

        @keyframes badgeShake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            75% {
                transform: translateX(5px);
            }
        }

        /* Animation de scintillement pour les flammes - DÉSACTIVÉE */

        /* --- BADGE FLAMME "HOT" (Moins de 1 min) --- */
        /* Conteneur pour les badges en haut à droite */
        .card-header-badges {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 20;
            pointer-events: none;
        }

        .hot-streak-badge {
            position: relative;
            /* Changé de absolute à relative */
            width: 40px;
            height: 40px;
            filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Compteur de Streak (x 5) */
        .view-streak-badge {
            background: rgba(255, 255, 255, 0.95);
            padding: 0.4rem 0.8rem;
            border-radius: 14px;
            font-weight: 900;
            font-size: 1.1rem;
            color: #374151;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 3px solid rgba(255, 255, 255, 0.8);
            font-family: 'Poppins', sans-serif;
            display: flex;
            align-items: center;
            gap: 2px;
            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            /* backdrop-filter: blur(4px); - DÉSACTIVÉ PERF */
        }

        .view-streak-badge .multiplier {
            color: #8B5CF6;
            /* Violet pour le 'x' */
            font-size: 0.9rem;
            margin-right: 2px;
            opacity: 0.8;
        }

        /* Animation SVG flamme - DÉSACTIVÉE */

        @keyframes popIn {
            from {
                transform: scale(0);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Animation Level Up Pokémon */
        @keyframes levelUpPop {
            0% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
            }

            20% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 1;
            }

            40% {
                transform: translate(-50%, -50%) scale(0.95);
            }

            60% {
                transform: translate(-50%, -50%) scale(1.05);
            }

            80% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }

            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }

        /* Badge de niveau sur les sections */
        .section-level-badge {
            display: inline-block;
            margin-left: 0.75rem;
            padding: 0.35rem 0.85rem;
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: white;
            font-size: 0.9rem;
            font-weight: 700;
            border-radius: 0.5rem;
            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
            /* animation: pulseGlow 2s ease-in-out infinite; - DÉSACTIVÉ PERF */
            transition: all 0.3s ease;
            cursor: help;
        }

        .section-level-badge:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 16px rgba(251, 191, 36, 0.6);
        }

        @keyframes pulseGlow {

            0%,
            100% {
                box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
            }

            50% {
                box-shadow: 0 4px 20px rgba(251, 191, 36, 0.7);
            }
        }

        .carousel-slide-emoji {
            width: 110px;
            height: 110px;
            font-size: 4.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem auto;
            /* Centré */
            filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15));
            /* Animation floatEmoji supprimée pour un style fixe */
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            /* Fond et bordure supprimés - juste l'emoji */
            background: none;
            padding: 0;
            border-radius: 0;
            border: none;
            box-shadow: none;
            position: relative;
        }

        .carousel-slide-emoji::before {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 38px;
            background: linear-gradient(45deg, #ff6b9d, #c084fc, #60a5fa);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s;
        }

        @keyframes rotateBorder {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes emojiFloat {

            0%,
            100% {
                transform: translateY(0px) rotate(-3deg) scale(1);
            }

            50% {
                transform: translateY(-12px) rotate(3deg) scale(1.05);
            }
        }

        .carousel-slide-emoji:hover {
            transform: scale(1.2) rotate(10deg);
            filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.35));
            border-color: rgba(255, 255, 255, 1);
        }

        .carousel-slide-emoji:hover::before {
            opacity: 0.6;
        }

        .carousel-slide-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.85rem;
            font-weight: 900;
            background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.75rem;
            line-height: 1.2;
            text-align: center;
            animation: titleSlideIn 0.7s ease-out;
            letter-spacing: -0.5px;
            position: relative;
            padding: 0.5rem 0;
        }

        .carousel-slide-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
            border-radius: 2px;
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.5);
        }

        @keyframes titleSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .carousel-slide-description {
            display: none;
        }

        /* --- NOUVEAU DESIGN CARTE À COLLECTIONNER --- */
        .card-content-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start; /* Changed from space-between */
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 2;
            overflow: hidden; /* Prevent content overflow */
            gap: 0.5rem; /* Consistent spacing */
        }

        /* Conteneur des badges (Pills) */
        .card-badge-container {
            display: flex;
            gap: 0.6rem;
            margin: 0.5rem 0 1.2rem 0;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
        }

        .card-pill {
            background: rgba(255, 255, 255, 0.85);
            padding: 0.4rem 0.8rem;
            border-radius: 12px;
            font-size: 0.85rem;
            font-weight: 700;
            color: #4B5563;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            gap: 0.4rem;
            border: 1px solid rgba(255, 255, 255, 0.6);
            /* backdrop-filter: blur(4px); - DÉSACTIVÉ PERF */
            transition: transform 0.2s;
        }

        .card-pill:hover {
            transform: translateY(-2px);
            background: white;
        }

        .card-pill.score-excellent {
            background: #ECFDF5;
            color: #059669;
            border-color: #A7F3D0;
            box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
        }

        .card-pill.score-good {
            background: #FFFBEB;
            color: #D97706;
            border-color: #FDE68A;
        }

        .card-pill.score-bad {
            background: #FEF2F2;
            color: #DC2626;
            border-color: #FECACA;
        }

        .card-pill.visits {
            background: #EFF6FF;
            color: #2563EB;
            border-color: #BFDBFE;
        }

        /* Boite de description */
        .card-description-box {
            background: rgba(255, 255, 255, 0.5);
            padding: 1.25rem;
            border-radius: 20px;
            font-size: 0.95rem;
            line-height: 1.5;
            color: #374151;
            text-align: center;
            width: 100%;
            border: 2px solid rgba(255, 255, 255, 0.6);
            /* backdrop-filter: blur(8px); - DÉSACTIVÉ PERF */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            flex: 1; /* Take remaining space */
            min-height: 0; /* Allow shrinking */
            overflow: hidden; /* Hide overflow text */
        }

        .description-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #6B7280;
            font-weight: 800;
            margin-bottom: 0.25rem;
        }

        /* ==================== LEADERBOARD STYLES ==================== */

        /* Mini leaderboard sur les cartes */
        .card-leaderboard-box {
            background: rgba(255, 255, 255, 0.5);
            padding: 1rem;
            border-radius: 20px;
            font-size: 0.95rem;
            line-height: 1.5;
            color: #374151;
            text-align: center;
            width: 100%;
            border: 2px solid rgba(255, 255, 255, 0.6);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .card-leaderboard-box:hover {
            background: rgba(255, 255, 255, 0.7);
            border-color: rgba(147, 51, 234, 0.3);
            transform: scale(1.02);
        }

        .card-leaderboard-box:active {
            transform: scale(0.98);
        }

        .leaderboard-mini {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .leaderboard-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.4rem 0.6rem;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 10px;
            font-size: 0.85rem;
        }

        .leaderboard-row.is-me {
            background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(236, 72, 153, 0.15));
            border: 1px solid rgba(147, 51, 234, 0.3);
        }

        .lb-medal {
            font-size: 1rem;
            width: 24px;
        }

        .lb-name {
            flex: 1;
            text-align: left;
            margin-left: 0.3rem;
            font-weight: 600;
            color: #4B5563;
            font-family: 'VT323', monospace;
            font-size: 1rem;
            letter-spacing: 0.5px;
        }

        .lb-score {
            font-weight: 700;
            color: #7C3AED;
            font-size: 0.85rem;
        }

        .lb-time {
            font-size: 0.7rem;
            color: #9CA3AF;
            font-weight: 500;
            margin-left: 0.25rem;
        }

        .lb-flag {
            font-size: 0.9rem;
            margin-right: 0.15rem;
        }

        .leaderboard-empty {
            font-size: 0.8rem;
            color: #9CA3AF;
            font-style: italic;
            padding: 0.5rem;
        }

        /* ==================== LEADERBOARD MODAL ==================== */

        .leaderboard-modal {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .leaderboard-modal.active {
            display: flex;
        }

        .leaderboard-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }

        .leaderboard-modal-content {
            position: relative;
            background: white;
            border-radius: 24px;
            width: 90%;
            max-width: 400px;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
            animation: modalSlideUp 0.3s ease;
            border: 3px solid #EC4899;
        }

        @keyframes modalSlideUp {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .leaderboard-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            background: linear-gradient(135deg, #EC4899, #F472B6);
            color: white;
        }

        .leaderboard-modal-header h3 {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 700;
        }

        .leaderboard-modal-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .leaderboard-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .leaderboard-modal-body {
            padding: 1rem;
            max-height: 60vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .leaderboard-modal-row {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            background: #F9FAFB;
            border-radius: 12px;
            gap: 0.75rem;
            transition: all 0.2s ease;
        }

        .leaderboard-modal-row:hover {
            background: #F3F4F6;
        }

        .leaderboard-modal-row.is-me {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(244, 114, 182, 0.15));
            border: 2px solid rgba(236, 72, 153, 0.4);
        }

        .lbm-rank {
            font-size: 1.2rem;
            width: 36px;
            text-align: center;
            font-weight: 700;
            color: #6B7280;
        }

        .lbm-name {
            flex: 1;
            font-weight: 600;
            color: #374151;
            font-family: 'VT323', monospace;
            font-size: 1.1rem;
            letter-spacing: 0.5px;
        }

        .lbm-score {
            font-weight: 700;
            color: #7C3AED;
            font-size: 1rem;
        }

        .lbm-time {
            font-size: 0.8rem;
            color: #6B7280;
            font-weight: 500;
        }

        .lbm-percent {
            font-size: 0.75rem;
            color: #9CA3AF;
            background: #E5E7EB;
            padding: 0.2rem 0.5rem;
            border-radius: 6px;
        }

        .lbm-flag {
            font-size: 1.1rem;
            margin-right: 0.25rem;
        }

        .leaderboard-loading {
            text-align: center;
            padding: 2rem;
            color: #9CA3AF;
        }

        .leaderboard-empty-modal {
            text-align: center;
            padding: 2rem;
            color: #6B7280;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        /* ==================== END LEADERBOARD STYLES ==================== */

        /* ==================== PSEUDO MODAL STYLES ==================== */

        .pseudo-modal {
            position: fixed;
            inset: 0;
            z-index: 10001;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .pseudo-modal.active {
            display: flex;
        }

        .pseudo-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(6px);
        }

        .pseudo-modal-content {
            position: relative;
            background: white;
            border-radius: 24px;
            width: 90%;
            max-width: 420px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
            animation: modalSlideUp 0.3s ease;
        }

        .pseudo-modal-header {
            padding: 1.5rem;
            background: linear-gradient(135deg, #7C3AED, #EC4899);
            color: white;
            text-align: center;
        }

        .pseudo-modal-header h3 {
            margin: 0;
            font-size: 1.4rem;
            font-weight: 700;
        }

        .pseudo-modal-body {
            padding: 1.5rem;
        }

        .pseudo-modal-subtitle {
            text-align: center;
            color: #6B7280;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .pseudo-breadcrumb {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            margin-bottom: 0.75rem;
            flex-wrap: wrap;
        }

        .pseudo-crumb {
            background: none;
            border: none;
            color: #7C3AED;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
            transition: all 0.15s ease;
        }

        .pseudo-crumb:hover {
            background: #EDE9FE;
        }

        .pseudo-crumb-sep {
            color: #D1D5DB;
            font-size: 0.8rem;
        }

        .pseudo-crumb-current {
            font-size: 0.8rem;
            font-weight: 600;
            color: #4B5563;
        }

        .pseudo-selected-display {
            text-align: center;
            padding: 0.875rem;
            margin-bottom: 1rem;
            background: #F9FAFB;
            border: 2px dashed #E5E7EB;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            color: #9CA3AF;
            transition: all 0.2s ease;
        }

        .pseudo-selected-display.has-selection {
            background: linear-gradient(135deg, #EDE9FE, #FCE7F3);
            border: 2px solid #7C3AED;
            color: #7C3AED;
            font-size: 1.2rem;
        }

        .pseudo-nav-grid {
            margin-bottom: 1rem;
            max-height: 280px;
            overflow-y: auto;
        }

        /* Catégories (3 gros boutons) */
        .pseudo-nav-grid.pseudo-categories {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .pseudo-category-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 1.25rem;
            background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
            border: 2px solid #E5E7EB;
            border-radius: 16px;
            font-size: 1.1rem;
            font-weight: 600;
            color: #374151;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .pseudo-category-btn:hover {
            border-color: #7C3AED;
            background: linear-gradient(135deg, #EDE9FE, #FCE7F3);
            transform: scale(1.02);
        }

        .pseudo-cat-icon {
            font-size: 1.5rem;
        }

        /* Franchises (grille scrollable) */
        .pseudo-nav-grid.pseudo-franchises {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem;
        }

        .pseudo-franchise-btn {
            padding: 0.75rem 0.5rem;
            background: #F9FAFB;
            border: 1px solid #E5E7EB;
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: 500;
            color: #4B5563;
            cursor: pointer;
            transition: all 0.15s ease;
            text-align: center;
        }

        .pseudo-franchise-btn:hover {
            background: #EDE9FE;
            border-color: #7C3AED;
            color: #7C3AED;
        }

        /* Personnages (grille plus dense) */
        .pseudo-nav-grid.pseudo-characters {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.4rem;
        }

        .pseudo-character-btn {
            padding: 0.6rem 0.4rem;
            background: #F9FAFB;
            border: 1px solid #E5E7EB;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 500;
            color: #4B5563;
            cursor: pointer;
            transition: all 0.15s ease;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pseudo-character-btn:hover {
            background: #EDE9FE;
            border-color: #7C3AED;
            color: #7C3AED;
        }

        .pseudo-character-btn.selected {
            background: linear-gradient(135deg, #7C3AED, #EC4899);
            border-color: #7C3AED;
            color: white;
            transform: scale(1.05);
        }

        /* Pays (grille avec drapeaux) */
        .pseudo-nav-grid.pseudo-countries {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem;
        }

        .pseudo-country-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 0.75rem;
            background: #F9FAFB;
            border: 1px solid #E5E7EB;
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: 500;
            color: #4B5563;
            cursor: pointer;
            transition: all 0.15s ease;
            text-align: left;
        }

        .pseudo-country-btn:hover {
            background: #EDE9FE;
            border-color: #7C3AED;
            color: #7C3AED;
        }

        .pseudo-country-btn.selected {
            background: linear-gradient(135deg, #7C3AED, #EC4899);
            border-color: #7C3AED;
            color: white;
            transform: scale(1.02);
        }

        .pseudo-country-flag {
            font-size: 1.2rem;
        }

        .pseudo-save-btn {
            width: 100%;
            padding: 1rem;
            background: linear-gradient(135deg, #7C3AED, #EC4899);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .pseudo-save-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
        }

        .pseudo-save-btn:active {
            transform: translateY(0);
        }

        .pseudo-save-btn:disabled {
            background: #E5E7EB;
            color: #9CA3AF;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* ==================== END PSEUDO MODAL STYLES ==================== */

        /* Masquer les éléments non visités */
        .carousel-slide.unvisited .card-content-wrapper {
            opacity: 0;
            visibility: hidden;
        }

        /* Indicateurs de carousel (dots) */
        .carousel-dots {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
            margin-top: 1.5rem;
            padding: 0.5rem;
        }

        .carousel-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            transition: all 0.3s ease;
        }

        .carousel-dot.active {
            width: 24px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.95);
        }

        /* Emoji de section avec flip 3D - STYLE ÉPURÉ */
        .subject-card-emoji-container {
            perspective: 1000px;
            margin: 0 auto 0.5rem auto;
            cursor: pointer;
            display: inline-block;
        }

        .subject-card-emoji-flipper {
            position: relative;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .subject-card-emoji-container.flipped .subject-card-emoji-flipper {
            transform: rotateY(180deg);
        }

        .subject-card-emoji-front,
        .subject-card-emoji-back {
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .subject-card-emoji-front {
            /* Pas de background, pas de border - juste l'emoji */
        }

        .subject-card-emoji {
            font-size: 3rem !important;
            filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
            /* Animation floatEmoji supprimée pour un style plus épuré */
        }

        .subject-card-emoji-back {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) rotateY(180deg);
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            border: 3px solid #fff;
            border-radius: 50%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            padding: 1.2rem;
            min-width: 85px;
            min-height: 85px;
        }

        .subject-card-emoji-container.flipped .subject-card-emoji-back {
            transform: translateX(-50%) rotateY(0deg);
        }

        .emoji-level-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
            font-family: 'Poppins', sans-serif;
        }

        .emoji-level-number {
            font-size: 2rem;
            font-weight: 900;
            line-height: 1;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .emoji-level-label {
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            opacity: 0.9;
            margin-top: 0.25rem;
        }

        .subject-card-title {
            font-family: 'Poppins', sans-serif !important;
            font-size: 2rem !important;
            font-weight: 900 !important;
            color: white !important;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 0.5rem !important;
            text-transform: uppercase;
            letter-spacing: 1px;
        }


        .subject-card-button {
            font-family: 'Poppins', sans-serif !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.75rem !important;
            color: white !important;
            font-weight: 700 !important;
            font-size: 2.2rem !important;
            /* Style fixe sans animation */
            background: linear-gradient(135deg,
                    rgba(255, 107, 157, 0.95),
                    rgba(255, 143, 179, 0.9)) !important;
            padding: 1.1rem 1.3rem !important;
            border-radius: 18px !important;
            border: none !important;
            /* backdrop-filter: blur(12px) !important; - DÉSACTIVÉ PERF */
            text-transform: none !important;
            letter-spacing: 0.3px !important;
            box-shadow:
                0 12px 35px rgba(255, 107, 157, 0.4),
                0 5px 18px rgba(0, 0, 0, 0.12),
                inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
            pointer-events: auto;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.15)) !important;
            text-decoration: none !important;
        }

        /* Effet shine supprimé - bouton fixe propre */
        .subject-card-button::before {
            display: none !important;
        }

        /* Animation flottante emoji ramen 🍜 - DÉSACTIVÉE */
        .subject-card-button {
            /* animation: floatRamen 3.5s ease-in-out infinite !important; */
            transform: none !important;
        }

        @keyframes floatRamen {

            0%,
            100% {
                transform: translateY(0) scale(1);
            }

            50% {
                transform: translateY(-10px) scale(1.08);
            }
        }

        /* Effet brillant sur le bouton - DÉSACTIVÉ */
        .subject-card-button::before {
            display: none !important;
            /* content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: -100% !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.25),
                    transparent) !important;
            animation: shineBtn 3s ease-in-out infinite !important; */
        }

        @keyframes shineBtn {
            0% {
                left: -100%;
            }

            50%,
            100% {
                left: 200%;
            }
        }



        /* --- NAVBAR AMÉLIORÉE --- */
        .nav-glass {
            background: rgba(255, 255, 255, 0.85);
            /* backdrop-filter: blur(12px); - DÉSACTIVÉ PERF */
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
        }

        .nav-dropdown {
            visibility: hidden;
            opacity: 0;
            transform: translateY(-10px) scale(0.95);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        .group:hover .nav-dropdown {
            visibility: visible;
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .score-pill-container {
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 99px;
            padding: 3px 12px 3px 3px;
            transition: all 0.3s ease;
        }

        .score-pill-container:hover {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            transform: translateY(-1px);
        }

        .nav-subject-item {
            transition: all 0.2s;
        }

        .nav-subject-item:hover {
            transform: translateX(4px);
            background-color: rgba(243, 244, 246, 0.8);
        }

        /* Header compact avec auto-hide (override) */
        header {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        header.header-hidden {
            transform: translateY(-100%);
        }

        /* Français - Blueberry & Lavande */
        #francais a[href="francais/figures-style.html"] {
            --card-color-1: #A5B4FC;
            --card-color-2: #818CF8;
        }

        #francais a[href="francais/analyse-litteraire.html"] {
            --card-color-1: #E5DDD5;
            --card-color-2: #D4C5B9;
        }

        #francais a[href="francais/amour-grec.html"] {
            --card-color-1: #93C5FD;
            --card-color-2: #60A5FA;
        }

        #francais a[href="francais/dissertation.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        #francais a[href="francais/orthographe.html"] {
            --card-color-1: #A78BFA;
            --card-color-2: #8B5CF6;
        }

        #francais a[href="francais/courantsliterairaes.html"] {
            --card-color-1: #DDD5D0;
            --card-color-2: #C9BEB4;
        }

        #francais a[href="francais/rhetorique.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        /* Maths - Citron & Pêche */
        #maths a[href="maths/identites-remarquables.html"] {
            --card-color-1: #FEF3C7;
            --card-color-2: #FDE68A;
        }

        #maths a[href="maths/fonctions.html"] {
            --card-color-1: #E5DDD5;
            --card-color-2: #D4C5B9;
        }

        #maths a[href="maths/derivees.html"] {
            --card-color-1: #FED7AA;
            --card-color-2: #FDBA74;
        }

        #maths a[href="maths/algebre-lineaire.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        #maths a[href="maths/probabilites.html"] {
            --card-color-1: #FBBF24;
            --card-color-2: #F59E0B;
        }

        #maths a[href="maths/combinatoire.html"] {
            --card-color-1: #DDD5D0;
            --card-color-2: #C9BEB4;
        }

        #maths a[href="maths/trigonometrie.html"] {
            --card-color-1: #FDE68A;
            --card-color-2: #FCD34D;
        }

        /* Anglais - Myrtille & Bleu ciel */
        #anglais a[href="langues/anglais-vocabulaire.html"] {
            --card-color-1: #DBEAFE;
            --card-color-2: #BFDBFE;
        }

        #anglais a[href="langues/anglais-temps.html"] {
            --card-color-1: #E8E3E0;
            --card-color-2: #DDD5D0;
        }

        #anglais a[href="langues/anglais-irreguliers.html"] {
            --card-color-1: #93C5FD;
            --card-color-2: #60A5FA;
        }

        /* Allemand - Kiwi & Menthe */
        #allemand a[href="langues/allemand-articles.html"] {
            --card-color-1: #BBF7D0;
            --card-color-2: #86EFAC;
        }

        #allemand a[href="langues/allemand-vocabulaire.html"] {
            --card-color-1: #E8E3E0;
            --card-color-2: #DDD5D0;
        }

        /* Japonais - Sakura & Framboise */
        #japonais a[href="langues/japonais-hiragana.html"] {
            --card-color-1: #FBCFE8;
            --card-color-2: #F9A8D4;
        }

        #japonais a[href="langues/japonais-particules.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        #japonais a[href="langues/japonais-verbes.html"] {
            --card-color-1: #F472B6;
            --card-color-2: #EC4899;
        }

        /* Coréen - Lagon & Turquoise */
        #coreen a[href="langues/coreen-hangul.html"] {
            --card-color-1: #99F6E4;
            --card-color-2: #5EEAD4;
        }

        #coreen a[href="langues/coreen-particules.html"] {
            --card-color-1: #E5DDD5;
            --card-color-2: #D4C5B9;
        }

        #coreen a[href="langues/coreen-phrases.html"] {
            --card-color-1: #A5F3FC;
            --card-color-2: #67E8F9;
        }

        /* Histoire - Cerise & Fraise */
        #histoire a[href="antropologie.html"] {
            --card-color-1: #FECACA;
            --card-color-2: #FCA5A5;
        }

        /* Physique - Océan & Aqua */
        #physique a[href="physique/couleurs-lumiere.html"] {
            --card-color-1: #A5F3FC;
            --card-color-2: #67E8F9;
        }

        #physique a[href="physique/ondes-radio.html"] {
            --card-color-1: #E5DDD5;
            --card-color-2: #D4C5B9;
        }

        #physique a[href="physique/optique.html"] {
            --card-color-1: #93C5FD;
            --card-color-2: #60A5FA;
        }

        #physique a[href="physique/mecanique.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        #physique a[href="physique/electricite.html"] {
            --card-color-1: #99F6E4;
            --card-color-2: #5EEAD4;
        }

        #physique a[href="physique/thermodynamique.html"] {
            --card-color-1: #DDD5D0;
            --card-color-2: #C9BEB4;
        }

        #physique a[href="physique/quantique.html"] {
            --card-color-1: #7DD3FC;
            --card-color-2: #38BDF8;
        }

        /* Biologie - Pomme & Lime */
        #biologie a[href="biologie/adn.html"] {
            --card-color-1: #BBF7D0;
            --card-color-2: #86EFAC;
        }

        #biologie a[href="biologie/evolution-darwin.html"] {
            --card-color-1: #E8E3E0;
            --card-color-2: #DDD5D0;
        }

        #biologie a[href="biologie/virus-vivant.html"] {
            --card-color-1: #D9F99D;
            --card-color-2: #BEF264;
        }

        #biologie a[href="biologie/biologie-cellulaire.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        #biologie a[href="biologie/physiologie-effort.html"] {
            --card-color-1: #A7F3D0;
            --card-color-2: #6EE7B7;
        }

        /* Art - Abricot & Mangue */
        #art a[href="art/nombre-or.html"] {
            --card-color-1: #FED7AA;
            --card-color-2: #FDBA74;
        }

        #art a[href="art/david.html"] {
            --card-color-1: #E5DDD5;
            --card-color-2: #D4C5B9;
        }

        #art a[href="art/beaute.html"] {
            --card-color-1: #FECACA;
            --card-color-2: #FCA5A5;
        }

        #art a[href="art/photo-technique.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        #art a[href="art/composition-couleur.html"] {
            --card-color-1: #FDE68A;
            --card-color-2: #FCD34D;
        }

        #art a[href="art/storytelling-visuel.html"] {
            --card-color-1: #DDD5D0;
            --card-color-2: #C9BEB4;
        }

        /* Informatique - Raisin & Lilas */
        #informatique a[href="informatique/ordinateur.html"] {
            --card-color-1: #C4B5FD;
            --card-color-2: #A78BFA;
        }

        #informatique a[href="informatique/programmation.html"] {
            --card-color-1: #E5DDD5;
            --card-color-2: #D4C5B9;
        }

        #informatique a[href="informatique/web.html"] {
            --card-color-1: #A5F3FC;
            --card-color-2: #67E8F9;
        }

        #informatique a[href="informatique/java-maven-junit.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        #informatique a[href="informatique/java-jdbc-jpa.html"] {
            --card-color-1: #A78BFA;
            --card-color-2: #8B5CF6;
        }

        #informatique a[href="informatique/design-patterns.html"] {
            --card-color-1: #DDD5D0;
            --card-color-2: #C9BEB4;
        }

        #informatique a[href="informatique/graphes-recursivite.html"] {
            --card-color-1: #93C5FD;
            --card-color-2: #60A5FA;
        }

        #informatique a[href="informatique/js-bases.html"] {
            --card-color-1: #E8E3E0;
            --card-color-2: #DDD5D0;
        }

        #informatique a[href="informatique/dom-fetch.html"] {
            --card-color-1: #D8B4FE;
            --card-color-2: #C084FC;
        }

        #informatique a[href="informatique/react.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        #informatique a[href="informatique/http-rest.html"] {
            --card-color-1: #99F6E4;
            --card-color-2: #5EEAD4;
        }

        #informatique a[href="informatique/rest-api-postman.html"] {
            --card-color-1: #E5DDD5;
            --card-color-2: #D4C5B9;
        }

        #informatique a[href="informatique/reseaux.html"] {
            --card-color-1: #A5B4FC;
            --card-color-2: #818CF8;
        }

        #informatique a[href="informatique/sql-pratique.html"] {
            --card-color-1: #DDD5D0;
            --card-color-2: #C9BEB4;
        }

        #informatique a[href="informatique/nosql-redis.html"] {
            --card-color-1: #7DD3FC;
            --card-color-2: #38BDF8;
        }

        #informatique a[href="informatique/supabase.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        #informatique a[href="informatique/solid-clean-code.html"] {
            --card-color-1: #C084FC;
            --card-color-2: #A855F7;
        }

        #informatique a[href="informatique/uml.html"] {
            --card-color-1: #E8E3E0;
            --card-color-2: #DDD5D0;
        }

        #informatique a[href="informatique/tdd-cicd.html"] {
            --card-color-1: #BFDBFE;
            --card-color-2: #93C5FD;
        }

        #informatique a[href="informatique/git-pro.html"] {
            --card-color-1: #E5DDD5;
            --card-color-2: #D4C5B9;
        }

        #informatique a[href="informatique/owasp.html"] {
            --card-color-1: #9F7AEA;
            --card-color-2: #805AD5;
        }

        #informatique a[href="informatique/cryptographie.html"] {
            --card-color-1: #DDD5D0;
            --card-color-2: #C9BEB4;
        }

        #informatique .card-hover {
            --card-color-1: #C4B5FD;
            --card-color-2: #A78BFA;
        }

        /* Business - Prune & Orchidée */
        #business a[href="business/marketing.html"] {
            --card-color-1: #E9D5FF;
            --card-color-2: #D8B4FE;
        }

        #business a[href="business/gestion-projet.html"] {
            --card-color-1: #E5DDD5;
            --card-color-2: #D4C5B9;
        }

        #business a[href="business/finance.html"] {
            --card-color-1: #C084FC;
            --card-color-2: #A855F7;
        }

        #business a[href="business/entrepreneuriat-lean.html"] {
            --card-color-1: #F0EBE8;
            --card-color-2: #E8E3E0;
        }

        #business a[href="business/droit-suisse.html"] {
            --card-color-1: #FAE8FF;
            --card-color-2: #F5D0FE;
        }

        /* Apprentissage - Mandarine & Papaye */
        #apprentissage a[href="apprentissage/repetition-espacee.html"] {
            --card-color-1: #FED7AA;
            --card-color-2: #FDBA74;
        }

        #apprentissage a[href="apprentissage/focus-methodes.html"] {
            --card-color-1: #E5DDD5;
            --card-color-2: #D4C5B9;
        }

        #apprentissage a[href="apprentissage/prise-notes.html"] {
            --card-color-1: #FFEDD5;
            --card-color-2: #FED7AA;
        }

        /* Couleurs par défaut pastel pour les cartes non spécifiées */
        #francais .card-hover {
            --card-color-1: #A5B4FC;
            --card-color-2: #818CF8;
        }

        #maths .card-hover {
            --card-color-1: #FEF3C7;
            --card-color-2: #FDE68A;
        }

        #anglais .card-hover {
            --card-color-1: #BFDBFE;
            --card-color-2: #93C5FD;
        }

        #allemand .card-hover {
            --card-color-1: #BBF7D0;
            --card-color-2: #86EFAC;
        }

        #japonais .card-hover {
            --card-color-1: #FBCFE8;
            --card-color-2: #F9A8D4;
        }

        #coreen .card-hover {
            --card-color-1: #99F6E4;
            --card-color-2: #5EEAD4;
        }

        #histoire .card-hover {
            --card-color-1: #FECACA;
            --card-color-2: #FCA5A5;
        }

        #physique .card-hover {
            --card-color-1: #A5F3FC;
            --card-color-2: #67E8F9;
        }

        #biologie .card-hover {
            --card-color-1: #BBF7D0;
            --card-color-2: #86EFAC;
        }

        #art .card-hover {
            --card-color-1: #FED7AA;
            --card-color-2: #FDBA74;
        }

        #business .card-hover {
            --card-color-1: #E9D5FF;
            --card-color-2: #D8B4FE;
        }

        #apprentissage .card-hover {
            --card-color-1: #FED7AA;
            --card-color-2: #FDBA74;
        }

        /* --- RESPONSIVE MOBILE (DÉZOOM VISUEL) --- */
        @media (max-width: 768px) {

            /* Réduire la largeur pour voir le bord des autres cartes */
            .carousel-slide {
                min-width: 82vw !important;
                width: 82vw !important;
            }

            /* Contenu plus compact */
            .carousel-slide-content {
                padding: 1.25rem 1rem !important;
                min-height: 360px !important;
                /* Moins haut */
                border-radius: 24px !important;
            }

            /* Emoji plus petit */
            .carousel-slide-emoji {
                width: 75px !important;
                height: 75px !important;
                font-size: 3rem !important;
                margin-bottom: 0.5rem !important;
                border-radius: 22px !important;
                border-width: 2px !important;
            }

            .carousel-slide-emoji::before {
                border-radius: 24px !important;
                inset: -2px !important;
            }

            /* Titre réduit */
            .carousel-slide-title {
                font-size: 1.3rem !important;
                margin-bottom: 0.5rem !important;
                line-height: 1.2 !important;
            }

            /* Badges (Pills) plus petits */
            .card-pill {
                padding: 0.25rem 0.5rem !important;
                font-size: 0.7rem !important;
                border-radius: 8px !important;
                gap: 0.3rem !important;
            }

            .card-badge-container {
                gap: 0.3rem !important;
                margin: 0.25rem 0 0.75rem 0 !important;
            }

            /* Description box plus petite */
            .card-description-box {
                padding: 0.75rem !important;
                font-size: 0.8rem !important;
                border-radius: 14px !important;
                line-height: 1.35 !important;
                gap: 0.25rem !important;
            }

            .description-label {
                font-size: 0.6rem !important;
                margin-bottom: 0.1rem !important;
            }

            /* Bouton plus compact */
            .subject-card-button {
                padding: 0.8rem 1.2rem !important;
                font-size: 0.9rem !important;
                border-radius: 12px !important;
                margin-top: auto !important;
                gap: 0.5rem !important;
                flex-shrink: 0 !important;
                min-height: 44px !important;
            }

            /* Ajustement badge Hot Streak */
            .hot-streak-badge {
                width: 28px !important;
                height: 28px !important;
                top: 10px !important;
                right: 10px !important;
            }
        }

        /* Dashboard card styles supprimés - plus de flip */
    </style>