: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-direction: column;
            flex: 1 1 100%;
            order: 5;
            min-width: 0;
            position: relative;
        }
        .header-search-row {
            display: flex;
            width: 100%;
            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;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .header-search-glyph-send { display: none; }
        .header-search.has-query .header-search-glyph-search { display: none; }
        .header-search.has-query .header-search-glyph-send { display: block; }
        .header-search-palette {
            position: absolute;
            top: calc(100% + 0.35rem);
            left: 0;
            right: 0;
            z-index: 45;
            border: 1px solid var(--color-card-border);
            border-radius: 0.75rem;
            background: var(--color-card-bg);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
            overflow: hidden;
            animation: site-footer-in 0.35s ease both;
        }
        .header-search-palette[hidden] { display: none; }
        .header-search-palette-list {
            list-style: none;
            margin: 0;
            padding: 0.25rem;
            max-height: min(22rem, 70vh);
            overflow-y: auto;
        }
        .header-search-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            width: 100%;
            padding: 0.5rem 0.65rem;
            border: 0;
            border-radius: 0.5rem;
            background: transparent;
            color: var(--color-text-primary);
            font: inherit;
            text-align: left;
            cursor: pointer;
        }
        .header-search-option:hover,
        .header-search-option.is-active {
            background: var(--color-choice-hover);
            color: var(--color-text-title);
        }
        .header-search-option-main {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            min-width: 0;
        }
        .header-search-option-icon {
            width: 1.25rem;
            text-align: center;
            flex-shrink: 0;
            opacity: 0.8;
        }
        .header-search-option-label {
            font-size: 0.8125rem;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .header-search-option-desc {
            font-size: 0.7rem;
            color: var(--color-text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .header-search-option-end {
            font-size: 0.7rem;
            color: var(--color-text-muted);
            flex-shrink: 0;
        }
        .header-search-palette-hint {
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
            margin: 0;
            padding: 0.45rem 0.85rem;
            border-top: 1px solid var(--color-card-inner-border);
            font-size: 0.7rem;
            color: var(--color-text-muted);
        }
        .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;
                flex-direction: column;
                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; }

        /* Terme du lexique : même bleu, mais souligné en pointillé : une définition,
           pas une navigation. C'est un bouton neutralisé qui vit au fil du texte. */
        .gloss {
            background: none; border: 0; padding: 0; margin: 0;
            font: inherit; color: var(--color-link); cursor: help;
            text-decoration: underline dotted;
            text-underline-offset: 3px;
            text-decoration-thickness: 1px;
        }
        .gloss:hover, .gloss:focus-visible { text-decoration-style: solid; }
        /* Le même bleu pour la vedette d'une entrée sur l'écran Lexique. */
        .lex-term { color: var(--color-link); }

        /* 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; }

        /* Infobulle de survol (appel de note et wikilien), façon Wikipédia : un seul
           nœud pour toute l'application, créé par app.js et repositionné à la demande.
           Absolue dans la page (pas fixed) : elle suit le défilement, ancrée au mot.
           Souris et clavier seulement ; app.js ne l'active jamais sur écran tactile. */
        .az-tip {
            position: absolute;
            z-index: 46; /* au-dessus de la palette (45), sous les modales (50) */
            max-width: min(22rem, calc(100vw - 1.5rem));
            padding: 0.7rem 0.9rem;
            border: 1px solid var(--color-card-border);
            border-radius: 0.75rem;
            background: var(--color-card-bg);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
            font-size: 0.8rem;
            line-height: 1.55;
            color: var(--color-text-secondary);
            animation: azea-modal-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        .az-tip[hidden] { display: none; }
        .az-tip a { color: var(--color-link); text-decoration: none; }
        .az-tip a:hover, .az-tip a:focus-visible { text-decoration: underline; }
        .az-tip-head { display: flex; align-items: center; gap: 0.5rem; }
        .az-tip-icon { font-size: 1.3rem; line-height: 1; }
        .az-tip a.az-tip-title { font-weight: 800; color: var(--color-text-title); }
        .az-tip-summary {
            margin: 0.35rem 0 0;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .az-tip-meta { margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--color-text-muted); }
        /* Définition du lexique : jamais tronquée, contrairement au résumé d'article
           (la carte épinglée est la seule lecture de la définition sur tactile). */
        .az-tip-def { margin: 0.35rem 0 0; }
        .az-tip .az-tip-title { font-weight: 800; color: var(--color-text-title); }
        .az-tip-lang {
            font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.04em; color: var(--color-text-muted);
            border: 1px solid var(--color-card-border); border-radius: 999px;
            padding: 0.05rem 0.45rem; vertical-align: middle;
        }

        /* 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;
        }

        /* Pied de page en colonnes : halo en tête, coins arrondis, apparition en cascade.
           Les utilitaires Tailwind 4xl / muted-foreground n'existent pas dans la feuille
           précompilée : tout le dessin vit ici, branché sur les jetons de thème. */
        .site-footer {
            position: relative;
            width: 100%;
            margin-top: 2rem;
            padding: 3rem 1.5rem 2.5rem;
            border-top: 1px solid var(--color-header-border);
            border-radius: 2rem 2rem 0 0;
            background-color: var(--color-header);
            background-image: radial-gradient(35% 128px at 50% 0%, rgba(255, 255, 255, 0.08), transparent);
        }
        .theme-lycee .site-footer {
            background-image: radial-gradient(35% 128px at 50% 0%, rgba(15, 23, 42, 0.06), transparent);
            overflow: hidden;
        }
        @media (min-width: 768px) {
            .site-footer { border-radius: 3rem 3rem 0 0; padding-top: 3.5rem; padding-bottom: 3rem; }
        }
        .site-footer-glow {
            position: absolute;
            top: 0; left: 50%;
            width: 33%; height: 1px;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            background: var(--color-text-title);
            opacity: 0.22;
            filter: blur(4px);
            pointer-events: none;
        }
        .site-footer-inner {
            max-width: 72rem;
            margin: 0 auto;
            display: grid;
            gap: 2rem;
        }
        @media (min-width: 1280px) {
            .site-footer-inner { grid-template-columns: 1fr 2fr; gap: 2rem; }
        }
        .site-footer-brand {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
        }
        .site-footer-mark {
            width: 2.5rem; height: 2.5rem;
            border-radius: 0.75rem;
            border: 1px solid var(--color-card-inner-border);
            background: var(--color-card-inner-bg);
            display: flex; align-items: center; justify-content: center;
        }
        .site-footer-tree { width: 1.75rem; height: 1.75rem; display: block; }
        .site-footer-copy {
            margin-top: 0.5rem;
            font-size: 0.875rem;
            color: var(--color-text-muted);
        }
        .site-footer-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        @media (min-width: 768px) {
            .site-footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }
        @media (min-width: 1280px) {
            .site-footer-cols { margin-top: 0; }
        }
        .site-footer-col {
            animation: site-footer-in 0.8s ease both;
            animation-delay: calc(var(--d, 0) * 1s);
        }
        .site-footer-heading {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--color-text-title);
            margin: 0 0 1rem;
        }
        .site-footer-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: var(--color-text-muted);
        }
        .site-footer-link {
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            color: inherit;
            cursor: pointer;
            text-align: left;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            transition: color 0.3s ease;
        }
        .site-footer-link:hover,
        .site-footer-link:focus-visible {
            color: var(--color-text-title);
        }
        @keyframes site-footer-in {
            from { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
            to { opacity: 1; transform: none; filter: blur(0); }
        }

        /* ===== AGRANDISSEMENT D'UNE PHOTO ===== */
        /* Le bouton doit se faire oublier : il porte le clavier et le focus, pas une apparence.
           Le curseur « zoom-in » est le seul signe qu'il y a quelque chose à ouvrir. */
        .media-zoom {
            display: block;
            width: 100%;
            padding: 0;
            border: 0;
            background: none;
            cursor: zoom-in;
            line-height: 0;
        }
        .media-zoom:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 3px;
            border-radius: 0.75rem;
        }
        .media-lightbox {
            width: min(96vw, 1400px);
            max-width: 96vw;
            max-height: 94vh;
            padding: 0;
            border: 0;
            border-radius: 1rem;
            background: var(--color-card-bg);
            color: var(--color-text-primary);
            overflow: hidden;
        }
        .media-lightbox::backdrop { background: rgba(2, 6, 23, 0.82); }
        .media-lightbox img {
            display: block;
            width: 100%;
            height: auto;
            /* La photo ne dépasse jamais l'écran : sur un téléphone en paysage, une image
               verticale de 1600 px sortirait du cadre et deviendrait inatteignable. */
            max-height: 82vh;
            object-fit: contain;
            background: var(--color-card-inner-bg);
        }
        .lightbox-caption {
            margin: 0;
            padding: 0.75rem 1rem;
            font-size: 0.75rem;
            line-height: 1.5;
            text-align: center;
            font-style: italic;
            color: var(--color-text-muted);
        }
        .lightbox-close {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            z-index: 1;
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 999px;
            border: 1px solid var(--color-card-border);
            background: var(--color-card-bg);
            color: var(--color-text-primary);
            font-size: 0.9rem;
            line-height: 1;
            cursor: pointer;
        }
        .lightbox-close:hover { background: var(--color-choice-hover); }
        /* ===== IMPRESSION =====
           Pour Britannica, imprimer est une arrière-pensée destinée à un lecteur de bureau
           connecté. Pour une classe togolaise avec un seul ordinateur et un photocopieur,
           l'impression est un canal de diffusion, au même rang que l'APK et la clé USB.
           Sans ces règles, un article sortait avec l'en-tête collant, le ruban de rubriques,
           le tiroir et un fond sombre : illisible, et coûteux en encre qui se paie. */
        @media print {
            /* Papier blanc, encre noire. Les trois thèmes se valent une fois imprimés, et un
               aplat sombre sur A4 vide une cartouche pour rien. On repasse par les jetons
               existants plutôt que de réécrire chaque règle : tout ce qui porte une classe
               theme-* suit sans rien savoir de l'impression. */
            :root, body.theme-lycee, body.theme-noir {
                --color-bg-pagne: #ffffff;
                --color-pagne-grain-1: transparent;
                --color-pagne-grain-2: transparent;
                --color-pagne-gradient: transparent;
                --color-header: #ffffff;
                --color-header-border: #cbd5e1;
                --color-card-bg: #ffffff;
                --color-card-bg-gradient-start: #ffffff;
                --color-card-bg-gradient-end: #ffffff;
                --color-card-border: #cbd5e1;
                --color-card-inner-bg: #ffffff;
                --color-card-inner-border: #cbd5e1;
                --color-text-title: #000000;
                --color-text-primary: #111111;
                --color-text-secondary: #222222;
                --color-text-muted: #444444;
                --color-accent: #000000;
                --color-link: #000000;
                --color-divider-opacity: 1;
            }
            body { background: #ffffff !important; color: #111111; }
            .bg-pagne-grain { background-image: none !important; }

            /* Le mobilier de l'écran ne sert à rien sur une feuille, et les boutons y
               impriment des cadres vides. */
            body > header, nav.nav-strip, #reading-progress, .pagne-border-top, #skip-link,
            #explorer-drawer, #az-tip, #quiz-modal, #cite-modal, #media-lightbox, #article-toc, #article-quiz,
            #article-audio, #article-actions, #article-related, #article-tags, #article-pager,
            #article-bookmark-btn,
            #article-back-btn, .site-footer,
            /* « Lu ✓ » est l'état d'un lecteur, pas une propriété de l'article : sur une
               photocopie qui circule, il parlerait de quelqu'un d'autre. */
            #article-read-chip,
            /* Ornement : une ligne de points pleins coûte de l'encre et ne dit rien. */
            .togolese-divider,
            /* Les retours « ^1 ^2 ^3 » ramènent au point de citation : un geste d'écran, sans
               objet sur une feuille. Les numéros d'appel, eux, restent : ils font le lien
               entre la phrase et sa référence, y compris sur papier. */
            .ref-back,
            /* « Touchez une étape » : une consigne d'écran. La légende porte aussi le détail
               affiché au clic, que le papier ne verra jamais. */
            .diagram-detail { display: none !important; }

            /* La bague de focus est un repère d'écran. showScreen donne le focus au h1 à
               l'ouverture d'un article, ce qui imprimait un cadre autour du titre. */
            *:focus, *:focus-visible { outline: none !important; box-shadow: none !important; }

            /* Un bloc replié est un trou sur le papier : l'encadré « En bref » s'imprime
               ouvert, quel que soit son état à l'écran. */
            details.rail-box > summary { display: none !important; }
            details.rail-box > *:not(summary) {
                display: block !important;
                content-visibility: visible !important;
            }

            /* LA règle qui compte. Un article imprimé dont les références ne peuvent pas être
               suivies est invérifiable, ce qu'interdit COPYRIGHT.md §4 : la note promet une
               garantie que le papier ne tient plus. Seules les adresses externes sont
               dépliées ; un wikilien pointe vers #id, inutile hors de l'écran. */
            #article-sources a[href^="http"]::after,
            .derived-notice a[href^="http"]::after {
                content: " (" attr(href) ")";
                font-size: 0.85em;
                word-break: break-all;
            }

            /* Rien ne se coupe au milieu d'une idée. */
            figure, blockquote, .derived-notice, .ref-list > li,
            #article-factbox dl > div { break-inside: avoid; }
            h1, h2, h3 { break-after: avoid; }

            /* Les rails redeviennent du flux : une colonne collante n'a pas de sens sur A4. */
            #article-toc, #article-factbox, #article-center {
                position: static !important;
                max-height: none !important;
                overflow: visible !important;
            }

            /* Ce que l'écran donne autrement : l'adresse, la date, la licence. */
            #article-print-footer { display: block !important; }
        }

        /* ===== RECIRCULATION : ÉTIQUETTES ET PAGINATION ===== */
        /* Une puce d'étiquette n'apparaît que si elle mène quelque part (voir TAG_MIN_ARTICLES
           dans app.js) : elle a donc le droit de ressembler à un lien, sans mentir. */
        .tag-chip {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            padding: 0.3rem 0.65rem;
            border-radius: 999px;
            border: 1px solid var(--color-card-inner-border);
            background: var(--color-card-inner-bg);
            color: var(--color-text-secondary);
            cursor: pointer;
            transition: color 0.2s ease, border-color 0.2s ease;
        }
        .tag-chip:hover, .tag-chip:focus-visible {
            color: var(--color-link);
            border-color: var(--color-link);
        }
        .pager-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            margin-top: 1.25rem;
        }
        .pager-link {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            padding: 0.7rem 0.9rem;
            border: 1px solid var(--color-card-inner-border);
            border-radius: 0.75rem;
            background: var(--color-card-inner-bg);
            cursor: pointer;
            text-align: left;
            min-width: 0;
        }
        /* « Suivant » se lit à droite : la flèche du texte suit celle du geste. */
        .pager-next { text-align: right; align-items: flex-end; }
        .pager-link:hover, .pager-link:focus-visible { border-color: var(--color-link); }
        .pager-sens {
            font-size: 0.62rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--color-text-muted);
        }
        .pager-titre {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--color-text-primary);
            /* Un titre long ne doit pas pousser la colonne voisine hors de la grille. */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

        /* ===== EXTRAIT DE RECHERCHE ===== */
        /* Le passage où le terme a été trouvé, pour que le lecteur voie POURQUOI l'article
           remonte, au lieu d'ouvrir chaque carte pour le découvrir. */
        .search-excerpt {
            margin: 0.15rem 0 0;
            font-size: 0.7rem;
            line-height: 1.6;
            color: var(--color-text-muted);
            /* Trois lignes suffisent : au-delà, la carte devient un article. */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        /* Le surlignage passe par la couleur et la graisse, pas par un aplat jaune : sur les
           trois thèmes, un fond clair imposé deviendrait illisible dans deux d'entre eux. */
        .search-excerpt mark {
            background: none;
            color: var(--color-accent);
            font-weight: 800;
        }

        /* Une photo n'est jamais affichée plus large qu'elle n'est. --media-nat-w porte la
           largeur native, lue dans le registre par buildMediaFigure ; sans elle, la règle
           retombe sur 100 % et rien ne change. L'image se centre alors dans la carte au lieu
           d'être étirée : mieux vaut un peu plus étroit et net que pleine largeur et flou. */
        .media-zoom img,
        #article-hero img {
            display: block;
            max-width: min(100%, var(--media-nat-w, 100%));
            margin-inline: auto;
        }

        /* ===== Assistant de lecture =====
           Classes écrites à la main, comme .header-search-palette : la feuille Tailwind purgée n'a
           ni bottom-*, ni right-*, ni max-h-*, et la reconstruire pour quelques propriétés
           remuerait une feuille épinglée par SRI sans nécessité. Toutes les couleurs passent par
           les variables de thème : le composant suit cauri, lycée et noir sans règle dédiée. */
        /* Le bouton est le logo d'Azea, rond, en bas à droite comme les assistants des grands sites.
           Son nom accessible reste un texte, masqué visuellement : un bouton réduit à une image
           serait muet pour un lecteur d'écran. */
        .assistant-launcher {
            position: fixed;
            right: 1rem;
            bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
            z-index: 45;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3.5rem;
            height: 3.5rem;
            padding: 0;
            border: 1px solid var(--color-card-border);
            border-radius: 9999px;
            background: var(--color-card-bg);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .assistant-launcher-logo { display: block; width: 2.25rem; height: 2.25rem; }
        .assistant-launcher:hover { transform: scale(1.06); }
        /* Panneau ouvert : un anneau à la couleur d'accent signale que le logo le refermera. */
        .assistant-launcher[aria-expanded="true"] {
            box-shadow: 0 0 0 3px var(--color-accent), 0 12px 32px rgba(0, 0, 0, 0.28);
        }
        /* theme.css se charge APRÈS Tailwind : à spécificité égale, le display ci-dessus battrait
           .hidden, et le bouton apparaîtrait sur l'APK comme sur la clé USB. */
        .assistant-launcher.hidden { display: none; }
        .assistant-launcher:hover { background: var(--color-choice-hover); }
        .assistant-launcher:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
        /* Panneau NON modal, ancré en bas à droite au-dessus du bouton, comme les assistants des
           grands sites : aucun voile ni flou, la page reste visible et utilisable derrière. Il
           passe au-dessus de l'en-tête collant (z-index 40) et sous les vraies modales (50). */
        .assistant-panel {
            position: fixed;
            right: 1rem;
            bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
            z-index: 45;
            display: flex;
            flex-direction: column;
            width: min(24rem, calc(100vw - 2rem));
            max-height: min(38rem, calc(100vh - 7.75rem));
            max-height: min(38rem, calc(100dvh - 7.75rem));
        }
        /* Même piège que pour le bouton : theme.css passe après Tailwind et battrait .hidden. */
        .assistant-panel.hidden { display: none; }
        .assistant-box {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
        }
        /* Sur téléphone, le panneau prend la largeur mais laisse au moins le quart haut de la page
           visible ; il se referme quand le lecteur change d'écran (showScreen). */
        @media (max-width: 639px) {
            .assistant-panel {
                left: 0.5rem;
                right: 0.5rem;
                width: auto;
                bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
                max-height: min(75vh, calc(100vh - 6.5rem));
                max-height: min(75dvh, calc(100dvh - 6.5rem));
            }
        }
        .assistant-intro { margin-top: 0.25rem; }
        .assistant-suggestions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            padding: 0.9rem 1.25rem 0;
        }
        .assistant-suggestions:empty,
        .assistant-suggestions[hidden] { display: none; }
        .assistant-chip {
            border: 1px solid var(--color-card-inner-border);
            border-radius: 9999px;
            background: var(--color-choice-bg);
            color: var(--color-text-secondary);
            font: inherit;
            font-size: 0.75rem;
            line-height: 1.3;
            padding: 0.35rem 0.7rem;
            text-align: left;
            cursor: pointer;
        }
        .assistant-chip:hover:not(:disabled) { background: var(--color-choice-hover); color: var(--color-text-title); }
        .assistant-chip:disabled { opacity: 0.5; cursor: not-allowed; }
        .assistant-transcript {
            flex: 1 1 auto;
            min-height: 4rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            padding: 0.9rem 1.25rem;
        }
        .assistant-transcript:empty { min-height: 0; padding: 0; }
        .assistant-bubble {
            border: 1px solid var(--color-card-inner-border);
            border-radius: 0.75rem;
            background: var(--color-card-inner-bg);
            color: var(--color-text-primary);
            font-size: 0.875rem;
            line-height: 1.6;
            padding: 0.6rem 0.8rem;
            overflow-wrap: anywhere;
        }
        .assistant-bubble-user {
            align-self: flex-end;
            max-width: 85%;
            border-color: transparent;
            background: var(--color-primary-soft);
            color: var(--color-text-title);
        }
        .assistant-bubble-note { color: var(--color-text-secondary); }
        .assistant-cite {
            font-size: 0.75em;
            font-weight: 700;
            vertical-align: super;
            line-height: 0;
            margin-left: 0.1em;
        }
        .assistant-sources-title {
            margin: 0.6rem 0 0.2rem;
            padding-top: 0.5rem;
            border-top: 1px solid var(--color-card-inner-border);
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--color-text-muted);
        }
        .assistant-sources { margin: 0; padding: 0; list-style: none; font-size: 0.8rem; }
        .assistant-sources li + li { margin-top: 0.2rem; }
        .assistant-source-date { color: var(--color-text-muted); }
        .assistant-search-cta { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
        .assistant-footer { padding: 0 1rem 1rem; }
        .assistant-footer p + p { margin-top: 0.15rem; }
        .assistant-visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        #assistant-input:disabled,
        #assistant-send-btn:disabled { opacity: 0.55; cursor: not-allowed; }
        @media print {
            .assistant-launcher,
            #assistant-panel { display: none !important; }
        }