:root {
            /* Dark Theme Default: Cauri d'Or, near-black Saasfly look */
            --color-bg-pagne: #0a0a0c;
            --color-pagne-grain-1: rgba(252, 209, 22, 0.03);
            --color-pagne-grain-2: rgba(0, 106, 78, 0.025);
            --color-pagne-gradient: rgba(210, 16, 52, 0.008);

            --color-header: rgba(10, 10, 14, 0.72);
            --color-header-border: rgba(255, 255, 255, 0.08);

            --color-card-bg: #101016;
            --color-card-bg-gradient-start: #0f0f14;
            --color-card-bg-gradient-end: #15151c;
            --color-card-border: rgba(255, 255, 255, 0.08);
            --color-card-inner-bg: rgba(255, 255, 255, 0.04);
            --color-card-inner-border: rgba(255, 255, 255, 0.1);

            --color-text-title: #ffffff;
            --color-text-primary: #f1f5f9;
            --color-text-secondary: #cbd5e1;
            --color-text-muted: #94a3b8;

            --color-choice-bg: rgba(255, 255, 255, 0.04);
            --color-choice-hover: rgba(255, 255, 255, 0.08);
            --color-accent: #fcd116; /* Togo Yellow */
            --color-divider-opacity: 0.3;

            /* Structural (Saasfly-style) accents, buttons, links, glows */
            --color-primary: #3b82f6;
            --color-primary-hover: #2563eb;
            --color-primary-soft: rgba(99, 102, 241, 0.14);
            --color-hero-glow: rgba(99, 102, 241, 0.25);
            --color-link: #7db2ff;
            --color-right: #34d399;
            --color-wrong: #f87171;
        }

        /* Couleur de marque OuraGrove (fixe, indépendante du thème Azea) :
           mêmes valeurs que academy.ouragrove.io, ambre #f59e0b sur fond sombre,
           ambre foncé #b45309 sur fond clair pour le contraste. */
        .ouragrove-accent { color: #f59e0b; }
        .theme-lycee .ouragrove-accent { color: #b45309; }

        .theme-lycee {
            /* Thème clair */
            --color-bg-pagne: #faf9f5; /* clean soft warm cream */
            --color-pagne-grain-1: rgba(0, 106, 78, 0.05); /* togo green print motifs */
            --color-pagne-grain-2: rgba(210, 16, 52, 0.04); /* togo red print motifs */
            --color-pagne-gradient: rgba(252, 209, 22, 0.02); /* sunny yellow prints */
            
            --color-header: rgba(255, 255, 255, 0.94);
            --color-header-border: #e2e8f0;
            
            --color-card-bg: #ffffff;
            --color-card-bg-gradient-start: #ffffff;
            --color-card-bg-gradient-end: #f8fafc;
            --color-card-border: #e2e8f0;
            --color-card-inner-bg: #f1f5f9; /* soft slate classroom backup board */
            --color-card-inner-border: #cbd5e1;
            
            --color-text-title: #0f172a;
            --color-text-primary: #1e293b;
            --color-text-secondary: #334155;
            --color-text-muted: #57534e;
            
            --color-choice-bg: #ffffff;
            --color-choice-hover: #f1f5f9;
            --color-accent: #006a4e; /* Togo Green on light */
            --color-divider-opacity: 0.45;

            /* Structural (Saasfly-style) accents, buttons, links, glows */
            --color-primary: #2563eb;
            --color-primary-hover: #1d4ed8;
            --color-primary-soft: rgba(37, 99, 235, 0.09);
            --color-hero-glow: rgba(37, 99, 235, 0.12);
            --color-link: #0b5fd7;
            --color-right: #006a4e;
            --color-wrong: #d21034;
        }

        .theme-noir {
            /* OLED Black Theme: Nuit Étoilée, pure black for battery savings */
            --color-bg-pagne: #000000;
            --color-pagne-grain-1: rgba(252, 209, 22, 0.02);
            --color-pagne-grain-2: rgba(0, 106, 78, 0.015);
            --color-pagne-gradient: rgba(210, 16, 52, 0.005);

            --color-header: rgba(0, 0, 0, 0.85);
            --color-header-border: rgba(255, 255, 255, 0.06);

            --color-card-bg: #0a0a0a;
            --color-card-bg-gradient-start: #050505;
            --color-card-bg-gradient-end: #0c0c0c;
            --color-card-border: rgba(255, 255, 255, 0.06);
            --color-card-inner-bg: rgba(255, 255, 255, 0.03);
            --color-card-inner-border: rgba(255, 255, 255, 0.08);

            --color-text-title: #f0f0f0;
            --color-text-primary: #e2e8f0;
            --color-text-secondary: #a1a1aa;
            --color-text-muted: #71717a;

            --color-choice-bg: rgba(255, 255, 255, 0.03);
            --color-choice-hover: rgba(255, 255, 255, 0.06);
            --color-accent: #fcd116;
            --color-divider-opacity: 0.2;

            --color-primary: #6366f1;
            --color-primary-hover: #4f46e5;
            --color-primary-soft: rgba(99, 102, 241, 0.1);
            --color-hero-glow: rgba(99, 102, 241, 0.15);
            --color-link: #6ea8ff;
            --color-right: #34d399;
            --color-wrong: #f87171;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: var(--color-text-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Subtle traditional Togolese pagne pattern inside the background */
        .bg-pagne-grain {
            background-color: var(--color-bg-pagne);
            background-image: 
                radial-gradient(circle at 50% 50%, var(--color-pagne-grain-1) 2px, transparent 3px),
                radial-gradient(circle at 0 0, var(--color-pagne-grain-2) 1.5px, transparent 2px),
                linear-gradient(45deg, var(--color-pagne-gradient) 25%, transparent 25%, transparent 75%, var(--color-pagne-gradient) 75%);
            background-size: 32px 32px, 16px 16px, 64px 64px;
            transition: background-color 0.3s ease, background-image 0.3s ease;
        }

        /* Traditional Wax Print Colored Trims (Togo Flag Colors: Red, Yellow, Green) */
        .pagne-border-top {
            background: repeating-linear-gradient(
                90deg,
                #d21034, #d21034 20px,
                #fcd116 20px, #fcd116 40px,
                #006a4e 40px, #006a4e 60px
            );
            height: 5px;
            width: 100%;
        }

        /* Decorative braided traditional spacer with Cowries concept */
        .togolese-divider {
            height: 12px;
            background-image: radial-gradient(circle, var(--color-accent) 4px, transparent 5px);
            background-size: 24px 12px;
            opacity: var(--color-divider-opacity);
            transition: opacity 0.3s ease, background-image 0.3s ease;
        }

        /* Custom glow effects for interactive components */
        .hover-glow:hover {
            box-shadow: 0 0 18px var(--color-hero-glow);
            border-color: var(--color-primary);
            transform: translateY(-2px);
        }


        /* Dynamic Theme Adaptive Classes */
        .theme-card {
            background: linear-gradient(135deg, var(--color-card-bg-gradient-start), var(--color-card-bg-gradient-end));
            border-color: var(--color-card-border);
            transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }
        
        .theme-inner-card {
            background-color: var(--color-card-inner-bg);
            border-color: var(--color-card-inner-border);
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }

        .theme-choice-btn {
            background-color: var(--color-choice-bg);
            border-color: var(--color-card-inner-border);
            color: var(--color-text-primary);
            transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }
        .theme-choice-btn:hover {
            background-color: var(--color-choice-hover);
            border-color: var(--color-accent);
            color: var(--color-text-title);
        }

        .theme-header {
            background-color: var(--color-header);
            border-color: var(--color-header-border);
            transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }
        
        .theme-title {
            color: var(--color-text-title);
            transition: color 0.3s ease;
        }
        
        .theme-text {
            color: var(--color-text-primary);
            transition: color 0.3s ease;
        }
        
        .theme-text-sec {
            color: var(--color-text-secondary);
            transition: color 0.3s ease;
        }
        
        .theme-text-muted {
            color: var(--color-text-muted);
            transition: color 0.3s ease;
        }

        /* ============================================================
           UI refinement, theme-aware accent, chrome buttons, focus
           visibility, reduced motion, modal motion, reading comfort
           ============================================================ */

        /* Accent that follows the theme (yellow on dark, green on light):
           fixes the invisible togoYellow-on-cream problem in light mode. */
        .accent-text { color: var(--color-accent); }

        /* Header/chrome buttons follow the theme instead of hardcoded slate. */
        .btn-chrome {
            background-color: var(--color-card-inner-bg);
            color: var(--color-text-secondary);
            border-color: var(--color-card-inner-border);
            transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        .btn-chrome:hover {
            color: var(--color-text-title);
            border-color: var(--color-accent);
        }

        /* Always-visible keyboard focus ring (for keyboard users only). */
        :focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
            border-radius: 6px;
        }

        /* Lien d'evitement : invisible jusqu'au focus clavier, puis surgit sous l'en-tete. */
        .skip-link {
            position: fixed; left: 0.75rem; top: -4rem; z-index: 60;
            background: var(--color-card-bg); color: var(--color-text-title);
            border: 1px solid var(--color-card-border);
            padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 700; font-size: 0.85rem;
            transition: top 0.15s ease;
        }
        .skip-link:focus { top: 0.75rem; }

        /* Survol des boutons texte de l'en-tete et de la modale. */
        .hover-title:hover { color: var(--color-text-title); }

        /* Comfortable long-form reading with paragraph rhythm. */
        .reading { font-size: 1.0625rem; line-height: 1.75; }
        .reading > * + * { margin-top: 0.9em; }

        /* Prose d'article deboitee (facon encyclopedie) : un filet discret entre les
           sections remplace les boites — le texte se lit en continu. */
        #article-sections section + section {
            border-top: 1px solid var(--color-card-inner-border);
            padding-top: 1.5rem;
        }

        /* Sommaire : section active suivie au defilement. */
        #article-toc a.toc-active { color: var(--color-accent); font-weight: 700; }

        /* Rails lateraux (sommaire, En bref) en <details> : replies sur mobile pour que la
           prose arrive tout de suite, deplies par JS a partir de lg. */
        details.rail-box summary { cursor: pointer; list-style: none; }
        details.rail-box summary::-webkit-details-marker { display: none; }
        details.rail-box summary .rail-chevron { display: inline-block; transition: transform 0.2s ease; }
        details.rail-box[open] summary .rail-chevron { transform: rotate(90deg); }

        /* Filets de la modale quiz, aux couleurs du theme (remplace border-slate-700). */
        .theme-divide { border-color: var(--color-card-inner-border); }

        /* Reading-progress bar + breadcrumb/TOC accent hover. */
        #reading-progress { background: var(--color-accent); transition: width 0.12s linear; }
        #article-breadcrumb button:hover, #article-toc a:hover { color: var(--color-accent); }

        /* Real modal entrance animation (neutralised by reduced-motion below). */
        @keyframes azea-modal-in {
            from { opacity: 0; transform: translateY(10px) scale(0.985); }
            to   { opacity: 1; transform: none; }
        }
        .modal-in { animation: azea-modal-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }

        /* ============================================================
           Landing (Saasfly-style) components, hero, buttons, marquee,
           confetti, device frame. Structural accents use --color-primary.
           ============================================================ */

        /* Primary CTA: blue pill with a soft glow (Saasfly "Get Started"). */
        .btn-primary {
            background-color: var(--color-primary);
            color: #ffffff;
            border: 1px solid transparent;
            box-shadow: 0 0 24px var(--color-hero-glow);
            transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }
        .btn-primary:hover {
            background-color: var(--color-primary-hover);
            transform: translateY(-1px);
        }

        /* Secondary terminal-style pill ($ command). */
        .pill-terminal {
            background-color: var(--color-card-inner-bg);
            border: 1px solid var(--color-card-inner-border);
            color: var(--color-text-secondary);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            transition: border-color 0.2s ease, color 0.2s ease;
        }
        .pill-terminal:hover {
            border-color: var(--color-primary);
            color: var(--color-text-title);
        }

        /* Gradient word inside big headings (Saasfly "1 hour"). */
        .gradient-word {
            background: linear-gradient(90deg, #6366f1, #d946ef, #3b82f6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* Icon tile on feature cards, tinted with the structural accent. */
        .feature-tile {
            background-color: var(--color-primary-soft);
            border: 1px solid var(--color-card-inner-border);
        }

        /* Falling confetti bars behind the hero (pure CSS, GPU-only). */
        .hero-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
        .hero-confetti span {
            position: absolute;
            top: -12%;
            width: 3px;
            height: 14px;
            border-radius: 2px;
            opacity: 0;
            animation: confetti-fall 7s linear infinite;
        }
        @keyframes confetti-fall {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            8% { opacity: 0.85; }
            80% { opacity: 0.85; }
            100% { transform: translateY(70vh) rotate(300deg); opacity: 0; }
        }
        .hero-confetti span:nth-child(1)  { left: 6%;  background: #d21034; animation-delay: 0s;    animation-duration: 6.2s; }
        .hero-confetti span:nth-child(2)  { left: 14%; background: #3b82f6; animation-delay: 1.8s;  animation-duration: 7.6s; }
        .hero-confetti span:nth-child(3)  { left: 23%; background: #fcd116; animation-delay: 3.4s;  animation-duration: 6.8s; }
        .hero-confetti span:nth-child(4)  { left: 31%; background: #8b5cf6; animation-delay: 0.9s;  animation-duration: 8.1s; }
        .hero-confetti span:nth-child(5)  { left: 40%; background: #006a4e; animation-delay: 2.6s;  animation-duration: 7.2s; }
        .hero-confetti span:nth-child(6)  { left: 49%; background: #d946ef; animation-delay: 4.5s;  animation-duration: 6.5s; }
        .hero-confetti span:nth-child(7)  { left: 58%; background: #fcd116; animation-delay: 1.2s;  animation-duration: 7.9s; }
        .hero-confetti span:nth-child(8)  { left: 66%; background: #3b82f6; animation-delay: 3.9s;  animation-duration: 6.9s; }
        .hero-confetti span:nth-child(9)  { left: 74%; background: #d21034; animation-delay: 2.1s;  animation-duration: 7.4s; }
        .hero-confetti span:nth-child(10) { left: 82%; background: #006a4e; animation-delay: 5.2s;  animation-duration: 6.6s; }
        .hero-confetti span:nth-child(11) { left: 90%; background: #8b5cf6; animation-delay: 0.4s;  animation-duration: 7.7s; }
        .hero-confetti span:nth-child(12) { left: 96%; background: #d946ef; animation-delay: 3.0s;  animation-duration: 6.4s; }

        /* Infinite marquee rows (facts cards). Track content is duplicated in JS. */
        .marquee {
            overflow: hidden;
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        }
        .marquee-track {
            display: flex;
            gap: 1rem;
            width: max-content;
            will-change: transform;
            animation: marquee-l 55s linear infinite;
        }
        .marquee-track.marquee-reverse { animation-name: marquee-r; }
        @keyframes marquee-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @keyframes marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
        .marquee:hover .marquee-track { animation-play-state: paused; }

        /* Barres de défilement du marquee entièrement masquées : le contenu défile tout seul,
           et reste déplaçable au doigt / à la molette (mode reduced-motion) sans barre visible. */
        .marquee { scrollbar-width: none; -ms-overflow-style: none; }
        .marquee::-webkit-scrollbar { display: none; width: 0; height: 0; }

        /* Tablet-style device frame around the showcase preview. */
        .device-frame {
            border-radius: 2.2rem;
            padding: 12px;
            background: var(--color-card-bg);
            border: 1px solid var(--color-card-border);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 40px var(--color-hero-glow);
        }
        .theme-lycee .device-frame { box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12), 0 0 40px var(--color-hero-glow); }
        .device-screen { border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--color-card-inner-border); }


        /* Respect users who prefer reduced motion. */
        /* Jeu des mots : secousse brève sur une mauvaise association */
        @keyframes shake {
            10%, 90% { transform: translateX(-2px); }
            30%, 70% { transform: translateX(3px); }
            50% { transform: translateX(-3px); }
        }
        .shake { animation: shake 0.35s ease; }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.001ms;
                animation-iteration-count: 1;
                transition-duration: 0.001ms;
                scroll-behavior: auto;
            }
            /* Infinite loops would freeze at frame 0, hide/neutralise instead. */
            .hero-confetti { display: none; }
            .marquee-track { animation: none; }
            .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
        }

        /* ============================================================
           Peau « encyclopédie intégrale » : sérif d'imprimerie pour les
           titres et la prose, ruban de rubriques sombre, filets, listes.
           ============================================================ */

        .serif-display { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; letter-spacing: -0.01em; }

        /* Wordmark Azea : lettres aux couleurs du drapeau (vert, jaune, rouge, vert).
           En thème clair, le jaune porte une ombre fine pour rester lisible sur le crème. */
        .azea-wordmark { letter-spacing: -0.01em; }
        .theme-lycee .azea-wordmark .text-togoYellow { text-shadow: 0 0.5px 0 rgba(90, 70, 0, 0.35); }

        /* En-tête : une rangée sur téléphone (recherche = icône, comme un site mobile
           compact) ; le champ ne s'ouvre que sur tap. Bureau : barre au centre. */
        .header-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.35rem 0.6rem;
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
        }
        .header-brand { min-width: 0; }
        .header-tagline {
            display: block;
            font-size: clamp(0.5rem, 2.3vw, 0.5625rem);
            letter-spacing: 0.03em;
            line-height: 1.15;
            margin-top: 0.1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .header-lang-code {
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            opacity: 0.42;
        }
        .header-lang-code.is-on { opacity: 1; }
        .header-lang-sep {
            margin: 0 0.22rem;
            opacity: 0.4;
            font-weight: 700;
        }
        .header-search-toggle {
            display: none;
            width: 2.25rem;
            height: 2.25rem;
            padding: 0;
            border-radius: 999px;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .header-search-toggle .header-search-icon-close { display: none; }
        .header-search-toggle.is-open .header-search-icon-open { display: none; }
        .header-search-toggle.is-open .header-search-icon-close { display: block; }
        .header-search {
            display: flex;
            flex: 1 1 100%;
            order: 5;
            min-width: 0;
        }
        .header-search-input {
            padding: 0.32rem 0.7rem;
            font-size: 0.8125rem;
        }
        .header-search-submit {
            padding: 0.32rem 0.65rem;
            font-size: 0.9rem;
        }
        .header-tools {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-left: auto;
            flex-shrink: 0;
        }
        @media (max-width: 639px) {
            .header-toolbar { flex-wrap: nowrap; }
            .header-toolbar.header-search-open { flex-wrap: wrap; }
            .header-brand { flex: 1 1 auto; }
            .header-toolbar .azea-wordmark { font-size: 1.25rem; }
            .header-logo { width: 1.75rem; height: 1.75rem; }
            .header-tools .btn-chrome:not(.header-search-toggle) { padding: 0.35rem 0.5rem; }
            .header-search-toggle { display: inline-flex; }
            .header-search { display: none; }
            .header-toolbar.header-search-open .header-search { display: flex; }

            /* TITRES SUR TELEPHONE.
               Le francais fait des mots longs : a 30px, le titre de la une se brisait
               en 3 a 4 lignes de deux mots sur un ecran de 360px. Un cran plus bas rend
               20% de hauteur sans effacer la hierarchie avec les cartes de selection,
               qui restent a 18px. (Specificite 1-0-1 : passe devant text-3xl.) */
            #hub-lead h2 { font-size: 1.5rem; }

            /* L'en-tete d'article est une rangee flex : l'icone et l'etoile lui prenaient
               57% de la largeur, laissant HUIT caracteres par ligne au titre — une colonne
               de mots, pas un titre. On les laisse sur leur propre ligne et le texte prend
               toute la largeur : 6 lignes -> 3. C'est la largeur qui etait en cause, pas
               la taille de police. */
            #screen-article header { flex-wrap: wrap; }
            /* L'ordre DOM place le texte AVANT l'etoile : sans reordonnancement, le bloc
               a 100% renvoie l'etoile sur une troisieme ligne, orpheline. On la remonte
               a cote de l'icone, poussee a droite. */
            #screen-article header > #article-icon { order: 1; width: 3rem; height: 3rem; font-size: 1.75rem; }
            #screen-article header > #article-bookmark-btn {
                order: 2;
                margin-left: auto;
                /* 33x38 px auparavant : sous les 44 px recommandes pour une cible tactile. */
                min-width: 2.75rem;
                min-height: 2.75rem;
            }
            #screen-article header > .space-y-2 { order: 3; flex: 1 0 100%; }
        }
        @media (min-width: 640px) {
            .header-toolbar {
                gap: 1rem;
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
            }
            .header-search {
                display: flex;
                order: 0;
                flex: 1 1 auto;
                max-width: 36rem;
                margin-inline: auto;
            }
            .header-search-input {
                padding: 0.625rem 1.25rem;
                font-size: 0.875rem;
            }
            .header-search-submit {
                padding: 0.625rem 1.25rem;
                font-size: 1rem;
            }
            .header-tools { margin-left: 0; }
            .header-tagline {
                font-size: 0.5625rem;
                letter-spacing: 0.1em;
                overflow: visible;
                text-overflow: unset;
            }
        }

        /* Titres d'écran et de sections d'article en sérif. */
        #article-title, #browse-title, #discovery-title,
        #article-sections h2, #hub-lead h2, .hb-section-title { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; }

        /* La prose des articles passe en sérif, corps légèrement plus grand. */
        .reading { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-size: 1.125rem; line-height: 1.8; }

        /* Liens encyclopédiques : bleu du thème, soulignés au survol. */
        .hb-link { color: var(--color-link); }
        .hb-link:hover { text-decoration: underline; }
        #article-sources a { color: var(--color-link); }

        /* Ruban de rubriques : sombre dans les trois thèmes, signature de l'en-tête. */
        .nav-strip { background: #191b20; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .theme-noir .nav-strip { background: #0d0d0f; }
        .nav-strip button {
            color: #e8e8ea; font-size: 0.8rem; font-weight: 700; white-space: nowrap;
            padding: 0.55rem 0.8rem; border-bottom: 2px solid transparent;
        }
        .nav-strip button:hover { color: #ffffff; border-bottom-color: var(--color-accent); }
        .nav-strip { scrollbar-width: none; }
        .nav-strip div::-webkit-scrollbar { display: none; }

        /* Filets d'étage et titres de section du hub. */
        .hb-rule { height: 1px; background: var(--color-card-inner-border); }
        .hb-section-title { font-size: 1.35rem; font-weight: 700; color: var(--color-text-title); margin-bottom: 0.9rem; }

        /* Liste « Le saviez-vous ? » : rangées filetées, puce accent. */
        #hub-saviez > button { border-top: 1px solid var(--color-card-inner-border); }
        #hub-saviez > button:first-child { border-top: none; }

        /* Tiroir « Explorer » : glisse depuis la gauche (neutralise par reduced-motion). */
        @keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
        .drawer-panel { animation: drawer-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
        #explorer-nav button {
            width: 100%; text-align: left; display: flex; align-items: center; gap: 0.75rem;
            padding: 0.6rem 0.75rem; border-radius: 0.75rem; font-weight: 700; font-size: 0.9rem;
            color: var(--color-text-primary);
        }
        #explorer-nav button:hover { background: var(--color-choice-hover); color: var(--color-text-title); }
        #explorer-nav .explorer-count { margin-left: auto; font-size: 0.7rem; font-weight: 800; color: var(--color-text-muted); font-family: ui-monospace, monospace; }
        #explorer-nav .explorer-group { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); padding: 0.9rem 0.75rem 0.25rem; }

        /* Grand Quiz : verdict d'une réponse. Les utilitaires Tailwind équivalents
           perdraient face à .theme-choice-btn, chargée après eux — d'où ces règles,
           plus spécifiques, plutôt qu'un !important. */
        .theme-choice-btn.tq-right { border-color: var(--color-right); background-color: color-mix(in srgb, var(--color-right) 14%, transparent); }
        .theme-choice-btn.tq-wrong { border-color: var(--color-wrong); background-color: color-mix(in srgb, var(--color-wrong) 14%, transparent); }
        .tq-verdict-right { color: var(--color-right); }
        .tq-verdict-wrong { color: var(--color-wrong); }

        /* Grand Quiz : jauge de progression et de chronomètre. La même piste sert
           au rang (part de points vers le palier suivant) et à l'horloge. */
        .tq-track { height: 0.5rem; border-radius: 999px; background: var(--color-card-inner-border); overflow: hidden; }
        .tq-fill { height: 100%; border-radius: 999px; background: var(--color-accent); transition: width 0.2s linear; }
        .tq-clock-low { color: var(--color-wrong); }
        .tq-clock-low ~ .tq-track .tq-fill, .tq-track:has(~ .tq-clock-low) .tq-fill { background: var(--color-wrong); }
        .tq-badge {
            display: inline-flex; align-items: center; gap: 0.35rem;
            padding: 0.3rem 0.6rem; border-radius: 999px;
            font-size: 0.7rem; font-weight: 800;
            background: var(--color-choice-bg); color: var(--color-text-primary);
            border: 1px solid var(--color-card-inner-border);
        }
        .tq-badge-new { border-color: var(--color-accent); color: var(--color-text-title); }
        @media (prefers-reduced-motion: reduce) { .tq-fill { transition: none; } }

        /* ===== Citations façon Wikipédia ===== */

        /* Appel de note : discret dans la ligne, mais la zone cliquable reste
           atteignable au pouce — le corps du texte est lu sur téléphone. */
        .ref-mark { font-size: 0.72em; line-height: 0; white-space: nowrap; }
        .ref-mark a {
            color: var(--color-link); text-decoration: none; font-weight: 700;
            padding: 0.45em 0.25em; margin: -0.45em -0.05em;
        }
        .ref-mark a:hover, .ref-mark a:focus-visible { text-decoration: underline; }

        /* Wikilien : un lien vers un autre article d'Azea. Même bleu que les
           références, souligné au survol — jamais de cible externe dans la prose. */
        .wikilink { color: var(--color-link); text-decoration: none; }
        .wikilink:hover, .wikilink:focus-visible { text-decoration: underline; }

        /* Citation directe : le filet marque le passage comme n'étant pas de nous. */
        .reading blockquote {
            border-left: 3px solid var(--color-accent);
            padding: 0.15rem 0 0.15rem 1rem;
            margin-left: 0; font-style: italic; color: var(--color-text-secondary);
        }
        .reading blockquote cite,
        .reading cite {
            display: block; margin-top: 0.4rem;
            font-style: normal; font-size: 0.8em; font-weight: 700;
            color: var(--color-text-muted);
        }

        /* Liste de références : le retour « ^ » ramène au point cité. */
        .ref-list { list-style: decimal; padding-left: 1.35rem; }
        .ref-list > li + li { margin-top: 0.4rem; }
        .ref-list-plain { list-style: disc; }
        .ref-back { color: var(--color-link); font-weight: 900; text-decoration: none; margin-right: 0.25rem; }
        .ref-back:hover, .ref-back:focus-visible { text-decoration: underline; }
        .ref-title { text-decoration: none; }
        .ref-title:hover { text-decoration: underline; }

        /* Notice de dérivation CC BY-SA : elle précède les références, parce qu'elle
           n'est pas une source de plus mais une obligation de licence. */
        .derived-notice {
            border: 1px solid var(--color-card-inner-border);
            border-left: 3px solid var(--color-accent);
            background: var(--color-choice-bg);
            color: var(--color-text-secondary);
            border-radius: 0.5rem; padding: 0.7rem 0.9rem; margin-bottom: 0.85rem;
        }