@font-face {
            font-family: 'Inter';
            src: url('/fonts/inter/inter-variable.woff2') format('woff2-variations'),
                 url('/fonts/inter/inter-variable.woff2') format('woff2');
            font-weight: 100 900;
            font-style: normal;
            font-display: swap;
        }

/* ═══ MOBILE : supprime le ZOOM au double-tap (garde le pinch-to-zoom) ═══
   touch-action: manipulation désactive le double-tap-to-zoom et le délai de
   300 ms sur toute la page, sans bloquer le défilement ni le pinch. Appliqué
   à html/body (cascade des gestes tactiles qui y démarrent). */
html { touch-action: manipulation; }
body { touch-action: manipulation; }

/* ═══════════════════════════════════════════════════════════════
           PALETTE — refonte mai 2026 (light only, dark mode retiré) :
             · A1 : fond #fff pur → #fafafb cassé → moins de fatigue oculaire.
                    Les cartes gardent #fff pur → elles ressortent.
             · A4 : bordures #e5e7eb → #d1d5db, plus contrastées.
             · A6 : accent bleu link #2563eb → #1e3a8a sur les CTA forts.
        ═══════════════════════════════════════════════════════════════ */
        :root {
            color-scheme: light;
            --bg-page: #fafafb;
            --bg-card: #ffffff;
            --bg-subtle: #f8fafc;        /* fonds doux (sous-cartes, lignes alt.) */
            --bg-subtle-2: #f1f5f9;
            --text-main: #0f172a;
            --text-muted: #475569;
            --text-faint: #94a3b8;       /* légendes, labels secondaires */
            --border-color: #d1d5db;
            --border-soft: #e2e8f0;
            --brand-line: rgba(15,23,42,0.20);  /* contours « marque » slate (ex-#0f172a en opacité) */
            --shadow: rgba(15,23,42,0.06);
            --blue-link: #1e3a8a;        /* accent fort — CTA, liens primaires */
            --blue-link-soft: #2563eb;   /* accent secondaire / liens corps */
            --y-dark: #0f172a;           /* accent structurel slate (bordures/boutons forts) */
            --accent-strong: #0f172a;    /* fond d'accent slate FONCÉ + texte blanc (CTA, bandeaux) */
            --up: #16a34a;
            --up-bg: #dcfce7;
            --down: #dc2626;
            --down-bg: #fee2e2;
            --gold: #b78908;             /* doré du logo (€) — micro-accents de marque uniquement */
            --c1: #ef4444; --c2: #f87171; --c3: #fbbf24;
            --c4: #a3e635; --c5: #4ade80; --c6: #10b981;
        }
        /* ═══ DARK MODE ═══════════════════════════════════════════════════
           Activé par html[data-theme="dark"] (choix utilisateur) ou par la
           préférence système si aucun choix n'a été fait (html[data-theme="auto"]
           + media query plus bas). MÊMES RÔLES, valeurs adaptées au fond sombre.
           Le bleu d'IDENTITÉ est conservé (même famille), simplement éclairci pour
           rester lisible sur fond sombre (un #1e3a8a sur du noir serait illisible).
           Vert/rouge avivés pour rester nets sur sombre. ═══ */
        html[data-theme="dark"] {
            color-scheme: dark;
            --bg-page: #0b1120;          /* slate très sombre (cohérent avec la marque #0f172a) */
            --bg-card: #141c2e;          /* carte surélevée */
            --bg-subtle: #1a2336;
            --bg-subtle-2: #212c45;
            --text-main: #e8edf6;
            --text-muted: #a7b4ca;
            --text-faint: #7e8da6;
            --border-color: rgba(148,163,184,0.26);
            --border-soft: rgba(148,163,184,0.15);
            --brand-line: rgba(148,163,184,0.28);
            --shadow: rgba(0,0,0,0.45);
            --blue-link: #7aa2f7;        /* même bleu d'identité, éclairci pour le contraste */
            --blue-link-soft: #93c5fd;
            --y-dark: #cbd5e1;           /* accent structurel → clair sur fond sombre */
            --accent-strong: #243049;    /* bandeau d'accent : slate clair-foncé gardant le texte blanc lisible */
            --up: #34d399;
            --up-bg: rgba(52,211,153,0.16);
            --down: #f87171;
            --down-bg: rgba(248,113,113,0.18);
            --gold: #e3b341;             /* doré éclairci pour le contraste sur sombre */
        }
        @media (prefers-color-scheme: dark) {
            html[data-theme="auto"] {
                color-scheme: dark;
                --bg-page: #0b1120; --bg-card: #141c2e; --bg-subtle: #1a2336; --bg-subtle-2: #212c45;
                --text-main: #e8edf6; --text-muted: #a7b4ca; --text-faint: #7e8da6;
                --border-color: rgba(148,163,184,0.26); --border-soft: rgba(148,163,184,0.15);
                --brand-line: rgba(148,163,184,0.28); --shadow: rgba(0,0,0,0.45);
                --blue-link: #7aa2f7; --blue-link-soft: #93c5fd; --y-dark: #cbd5e1; --accent-strong: #243049;
                --up: #34d399; --up-bg: rgba(52,211,153,0.16); --down: #f87171; --down-bg: rgba(248,113,113,0.18);
                --gold: #e3b341;
            }
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        /* overflow-x: clip (et non hidden) — sinon position:sticky du header est cassée */
        html, body { width: 100%; max-width: 100%; overflow-x: clip; }
        /* Garde-fou média GLOBAL : aucune image / canvas (graphiques) / iframe ne
           doit dépasser son conteneur → cause fréquente de débordement horizontal
           sur smartphone (que le `clip` ci-dessus masquait en coupant à droite). */
        img, video, canvas, iframe { max-width: 100%; }
        /* Conteneur principal : contient TOUT débordement horizontal du contenu
           de page. Posé sur <main> (qui n'est PAS l'ancêtre du header sticky) →
           le header reste sticky partout. `clip` préserve les position:sticky
           internes (ex. en-tête de tableau du screener) ; repli `hidden` pour
           les navigateurs SANS support de `clip` (Safari iOS < 16), où le
           `overflow-x: clip` global ci-dessus était ignoré → débordement visible. */
        /* ⚠ CLÉ : body est `display:flex` (colonne) → <main> est un flex item
           dont le `min-width: auto` par défaut l'EMPÊCHE de rétrécir sous la
           largeur intrinsèque de son contenu (grille/tableau large) → main
           devient plus large que le viewport et déborde « jusqu'à un certain
           point » de réduction. `min-width: 0` lève ce blocage ; overflow-x
           contient ensuite les enfants trop larges. */
        /* ⚠ CAUSE RACINE du débordement mobile : les wrappers <main> ont
           `margin: 0 auto`. Des marges horizontales `auto` sur un FLEX ITEM
           (main est enfant de body en display:flex) DÉSACTIVENT l'étirement
           → main se dimensionne sur son CONTENU (max-content, plafonné par son
           max-width) au lieu du conteneur → il dépasse sur écran étroit.
           `width: 100%` lui redonne une largeur définie = conteneur (et son
           max-width continue de le borner/centrer sur grand écran). */
        main { min-width: 0; width: 100%; overflow-x: clip; }
        @supports not (overflow: clip) { main { overflow-x: hidden; } }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background-color: var(--bg-page); color: var(--text-main); display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; }

        /* ═══════════════════════════════════════════════════════════════
           TYPOGRAPHIE DESKTOP — Inter (variable) sur PC uniquement.
           Sur smartphone, le stack système rend déjà mieux (San Francisco
           sur iOS, Roboto sur Android) → on ne touche pas mobile.
           Inter offre un dessin moderne aligné sur les standards finance
           (FT, Bloomberg, Stripe…) avec un rendu net à toute taille.
        ═══════════════════════════════════════════════════════════════ */
        @media (min-width: 768px) {
            body {
                font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
                font-feature-settings: 'cv11', 'ss01', 'ss03';
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                text-rendering: optimizeLegibility;
                letter-spacing: -0.01em;
            }
            /* Override RADICAL — tous les descendants du wrapper et du header passent en Inter,
               SAUF les éléments à vocation monospace (chiffres tabulaires : .pal-price, .pal-pct,
               .as-divhist-amount, .si-price, .in-text-val, code, pre, kbd). */
            .wrapper, .wrapper *,
            header, header *,
            footer, footer *,
            main, main *,
            input, button, select, textarea, label {
                font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
            }
            /* Réimposer le monospace là où c'est requis (chiffres, tickers, prix, % var.) */
            .pal-price, .pal-pct,
            .si-price, .si-pct, .si-pre,
            .pal-all-link .pal-all-tk,
            .as-divhist-amount, .as-pct-html, .as-change-html,
            .num-up, .num-down, .num-flat,
            .in-text-val, .ticker-symbol,
            .senti-score,
            code, pre, kbd, samp,
            [class*="-amount"], [class*="-rank"] {
                font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace !important;
            }
            /* Tracking serré + ligatures pour les gros titres → rendu pro Inter */
            h1, h2, h3,
            .article-title, .bj-title, .palh-h1, .pal-h1, .ap-h1, .as-h2,
            .palh-card-title, .pm-title, .news-ws-title,
            .news-section-title {
                letter-spacing: -0.022em;
                font-feature-settings: 'cv11', 'ss01', 'liga', 'kern';
            }
        }

        /* ─── Anti-zoom global ─────────────────────────────────────────
              1. `touch-action: manipulation` sur html → bloque le double-tap zoom et
                 les gestures parasites. Pinch-zoom à 2 doigts préservé (a11y).
              2. Sur mobile (< 768px), tous les inputs/textareas/selects sont forcés
                 à `font-size: 16px` → iOS Safari ne zoome plus au focus. Desktop
                 garde ses tailles design (pas de zoom auto au focus sur PC).
        ───────────────────────────────────────────────────────────── */
        /* iOS Safari : `touch-action: manipulation` doit être posé à la fois sur
           html/body ET sur chaque élément interactif. Sinon le double-tap zoom
           persiste sur les liens/boutons même si html le porte. */
        /* Anti double-tap zoom GLOBAL : `touch-action` n'est PAS hérité → on le
           pose sur TOUS les éléments pour qu'aucun double-tap ne zoome sur un
           bloc. Le pinch-zoom (accessibilité) et le scroll restent permis
           (`manipulation`), et la SÉLECTION de texte n'est pas affectée (elle
           dépend de `user-select`, pas de `touch-action`). Les surcharges
           spécifiques (ex. graphiques `.native-chart` en `pan-y`) restent
           prioritaires par spécificité. */
        * { touch-action: manipulation; }
        html, body { touch-action: manipulation; }
        a, button, summary,
        [role="button"], [role="tab"], [role="menuitem"],
        input, select, textarea, label {
            -webkit-tap-highlight-color: rgba(15, 23, 42, 0.05);
            touch-action: manipulation;
        }
        @media (max-width: 767.98px) {
            input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
            textarea, select {
                font-size: 16px !important;
            }
        }

        /* ─── HEADER (sélecteur strict : seulement le <header> racine, pas les <header> internes des pages) ─── */
        body > header {
            background: var(--bg-card);
            padding: 14px 0;   /* −10% de hauteur (16→14) */
            border-bottom: 1px solid rgba(15, 23, 42, 0.2);
            position: sticky; top: 0;
            z-index: 10010;
            transition: padding 0.22s ease, box-shadow 0.22s ease, background .25s, border-color .25s;
        }
        body > header.scrolled {
            padding: 11.6px 0;   /* shrink au scroll réduit de 20% (delta 3→2.4) */
            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
        }
        body > header .header-container {
            display: flex; justify-content: center; align-items: center;
            width: 100%; max-width: 1400px; margin: 0 auto;
            padding: 0 15px; position: relative;
        }
        body > header .logo-img {
            height: 16px; width: auto; display: block; max-width: 100%;   /* −10% (18→16) */
            transition: height 0.22s ease;
        }
        body > header.scrolled .logo-img { height: 14.4px; }   /* shrink scroll −20% (delta 2→1.6) */

        /* ─── HAMBURGER ICON ─── */
        body > header .menu-toggle {
            cursor: pointer; width: 32px; height: 32px;
            color: var(--y-dark);   /* bleu identité #0f172a (icône, via currentColor du SVG) */
            position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
            background: transparent; border: none; padding: 0;
            transition: width 0.22s ease, height 0.22s ease;
            /* Empêche le double-tap zoom sur smartphone */
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        body > header .menu-toggle svg { width: 100%; height: 100%; display: block; pointer-events: none; }
        body > header.scrolled .menu-toggle { width: 29.6px; height: 29.6px; }   /* shrink scroll −20% (delta 3→2.4) */

        /* ─── BOUTON THÈME (clair/sombre) — DANS le menu de navigation ────
           Placé dans la nav (plus dans le header) : aligné verticalement sur le
           1er lien (« Le Terminal »), collé tout à droite. Petit rond encadré ;
           lune en TRAIT (non remplie). Une SEULE icône visible à la fois (lune
           en clair, soleil en sombre). Toutes les règles d'affichage des icônes
           partagent le préfixe `body > header .theme-toggle` → spécificité
           homogène (sinon la règle de base réaffiche l'icône masquée). */
        body > header .theme-toggle {
            cursor: pointer; width: 30px; height: 30px;
            background: var(--bg-card); color: var(--text-main);
            border: 1.5px solid var(--border-color); border-radius: 50%;   /* rond d'encadrement */
            padding: 0;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
            -webkit-appearance: none; appearance: none; outline: none;
            touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
        }
        body > header .theme-toggle:active { transform: scale(0.9); }
        body > header .theme-toggle:focus,
        body > header .theme-toggle:focus-visible { outline: none; box-shadow: none; }
        @media (hover: hover) {
            body > header .theme-toggle:hover { background: var(--bg-subtle); border-color: var(--brand-line); }
        }
        /* Icônes : masquées par défaut, on n'affiche QUE celle du thème courant.
           Lune/soleil PETITS dans le rond (≈ 16px). */
        body > header .theme-toggle .th-i { display: none; align-items: center; justify-content: center; }
        body > header .theme-toggle .th-i svg { width: 16px; height: 16px; display: block; }
        body > header .theme-toggle .th-i-light { display: inline-flex; }
        html[data-theme="dark"] body > header .theme-toggle .th-i-light { display: none; }
        html[data-theme="dark"] body > header .theme-toggle .th-i-dark  { display: inline-flex; }
        @media (prefers-color-scheme: dark) {
            html[data-theme="auto"] body > header .theme-toggle .th-i-light { display: none; }
            html[data-theme="auto"] body > header .theme-toggle .th-i-dark  { display: inline-flex; }
        }
        /* Position dans le menu déroulant (mobile) : sur la 1re ligne de lien,
           tout à droite. La nav (position:absolute) ancre l'absolu. */
        body > header .main-nav .theme-toggle {
            position: absolute; right: 14px; top: 13px; z-index: 2;
        }
        /* PC : la nav est horizontale → bouton calé à droite, centré vertical
           (la nav passe en position:relative dans son bloc @media dédié). */
        @media (min-width: 1024px) {
            /* PC : la lune est REMONTÉE au niveau horizontal du LOGO (1re ligne),
               coin droit, pour ne plus chevaucher les liens du menu (2e ligne).
               La nav passe en position:static (cf. bloc nav PC) → le bouton absolu
               s'ancre sur .header-container (relative). top négatif = centrage sur
               la ligne du logo (header padding 14 + logo 16 ⇒ centre à -7px). */
            body > header .main-nav .theme-toggle { right: 15px; top: -7px; transform: none; }
            body > header .main-nav .theme-toggle:active { transform: scale(0.9); }
        }

        /* ─── POP-UP « MARCHÉ FERMÉ » (férié, 1×/jour/navigateur) ─── */
        .mkc-popup {
            position: fixed; inset: 0; z-index: 12500;
            background: rgba(15, 23, 42, 0.5);
            display: flex; align-items: center; justify-content: center;
            padding: 20px;
        }
        .mkc-popup[hidden] { display: none; }
        .mkc-card {
            max-width: 430px; width: 100%;
            background: var(--bg-card); border: 1px solid var(--border-soft);
            border-top: 4px double var(--y-dark);
            border-radius: 10px; padding: 22px 24px 20px;
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.35);
        }
        .mkc-eyebrow { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold, #b78908); margin-bottom: 6px; }
        .mkc-title { font-size: 19px; font-weight: 800; color: var(--text-main); letter-spacing: -0.3px; margin-bottom: 12px; }
        .mkc-line { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0 0 8px; }
        .mkc-line strong { color: var(--text-main); }
        .mkc-flag { margin-right: 4px; }
        .mkc-note { font-size: 12px; line-height: 1.5; color: var(--text-faint); margin: 10px 0 16px; }
        .mkc-btn {
            display: block; width: 100%; padding: 11px;
            background: var(--accent-strong); color: #fff; border: 0; border-radius: 6px;
            font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .3px; cursor: pointer;
        }

        /* ─── LOGO EN DARK MODE : contour des LETTRES ──────────────────────
           Le bleu nuit du « BOURS » se fondait dans le fond sombre. Le
           drop-shadow suit l'ALPHA du PNG → halo clair autour de chaque
           lettre (pas de cadre autour de l'image). Doublé à 1px pour un
           contour net mais léger. */
        html[data-theme="dark"] body > header .logo-img {
            /* 4 ombres décalées SANS flou = trait net 1px autour des lettres.
               Couleur = le DORÉ DU LOGO (#d8b848) : il révèle le « BOURS » bleu
               marine (duo marine/or = l identité du logo) et se fond dans le
               « €UR » déjà doré — zéro artefact, contrairement au blanc. */
            filter: drop-shadow(1px 0 0 rgba(216, 184, 72, 0.65))
                    drop-shadow(-1px 0 0 rgba(216, 184, 72, 0.65))
                    drop-shadow(0 1px 0 rgba(216, 184, 72, 0.65))
                    drop-shadow(0 -1px 0 rgba(216, 184, 72, 0.65));
        }
        @media (prefers-color-scheme: dark) {
            html[data-theme="auto"] body > header .logo-img {
                filter: drop-shadow(1px 0 0 rgba(216, 184, 72, 0.65))
                        drop-shadow(-1px 0 0 rgba(216, 184, 72, 0.65))
                        drop-shadow(0 1px 0 rgba(216, 184, 72, 0.65))
                        drop-shadow(0 -1px 0 rgba(216, 184, 72, 0.65));
            }
        }

        /* ─── RECHERCHE GLOBALE (loupe header + overlay) ─── */
        body > header .hdr-search-btn {
            cursor: pointer; width: 30px; height: 30px;
            position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
            background: transparent; border: 1px solid var(--border-soft); border-radius: 50%;
            color: var(--text-muted); padding: 5px;
            transition: color .15s, border-color .15s;
            touch-action: manipulation; -webkit-tap-highlight-color: transparent;
        }
        body > header .hdr-search-btn:hover { color: var(--text-main); border-color: var(--text-main); }
        body > header .hdr-search-btn svg { width: 100%; height: 100%; display: block; pointer-events: none; }
        @media (min-width: 1024px) {
            /* PC : header en colonne (logo puis nav) → loupe ancrée au niveau du
               logo, symétrique du bouton thème (à droite). */
            /* Alignée sur le bouton thème (niveau logo), AU-DESSUS de la nav
               2e ligne qui la recouvrait (z-index 2, comme .theme-toggle). */
            body > header .hdr-search-btn { top: -7px; transform: none; z-index: 2; }
        }
        .hdr-search-overlay {
            position: fixed; inset: 0; z-index: 12000;
            background: rgba(15, 23, 42, 0.55);
            -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
            padding: 9vh 16px 16px;
        }
        .hdr-search-overlay[hidden] { display: none; }
        .hdr-search-panel {
            max-width: 560px; margin: 0 auto;
            background: var(--bg-card); border: 1px solid var(--border-soft);
            border-radius: 12px; overflow: hidden;
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.35);
        }
        .hdr-search-row { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--border-soft); }
        .hdr-search-row svg { width: 18px; height: 18px; color: var(--text-faint); flex-shrink: 0; }
        .hdr-search-row input {
            flex: 1; min-width: 0; border: none; outline: none; background: transparent;
            font: inherit; font-size: 16px; color: var(--text-main);   /* 16px = pas de zoom iOS */
        }
        .hdr-search-row button {
            background: transparent; border: none; cursor: pointer;
            font-size: 15px; color: var(--text-faint); padding: 4px 6px;
        }
        .hdr-search-row button:hover { color: var(--text-main); }
        .hdr-search-results { max-height: 46vh; overflow-y: auto; }
        .hdr-search-item {
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 11px 16px; text-decoration: none;
            border-bottom: 1px solid var(--bg-subtle-2);
        }
        .hdr-search-item:hover, .hdr-search-item:focus { background: var(--bg-subtle); }
        .hdr-search-item .hs-name { font-size: 14px; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .hdr-search-item .hs-sym  { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; font-weight: 700; color: var(--blue-link-soft); flex-shrink: 0; }
        .hdr-search-empty { padding: 18px 16px; font-size: 13px; color: var(--text-faint); }
        .hdr-search-hint { padding: 8px 16px; font-size: 10.5px; color: var(--text-faint); border-top: 1px solid var(--bg-subtle-2); }
        @media (max-width: 640px) {
            .hdr-search-overlay { padding-top: 4vh; }
            .hdr-search-hint { display: none; }
        }

        /* ─── PANNEAU NAV : minimaliste ─── */
        body > header .main-nav {
            display: none;
            position: absolute; top: 100%; left: 0; right: 0;
            /* Le menu est positionné par rapport à .header-container, mais le <header>
               a un padding-bas (16px) + bordure (1px) EN DEHORS du container. On
               compense pour que le menu s'ouvre PILE au bas du header (16 + 1 = 17).
               Au scroll le padding passe à 12px → 13. */
            margin-top: 15px;   /* = padding-bas header (14) + bordure (1) → menu collé au header */
            background: var(--bg-card);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            z-index: 10005;
            padding: 8px 0;
            flex-direction: column;
            /* 100vh ignore la barre d'URL mobile → le bas du menu était coupé.
               100dvh suit le viewport RÉEL ; repli conservateur pour les vieux
               navigateurs, et marge basse + safe-area pour que le dernier item
               soit toujours atteignable. */
            /* HEIGHT (et non max-height) : le menu remplit TOUT l'écran sous le
               header — plus de fond de site visible en bas (demande user). */
            height: calc(100vh - 56px);
            height: calc(100dvh - 56px);
            overflow-y: auto;
            padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        }
        body > header .main-nav.active { display: flex; }

        /* ── MENU OUVERT (mobile) : verrou « body figé » + panneau plein écran ──
           · body.nav-open : figé en position:fixed à sa position de scroll
             (posée en inline top:-Ypx par le JS) → AUCUN défilement du fond,
             même inertiel. width:100% car un body fixé ne s'étire plus seul.
           · le header est re-fixé en haut (le fixed du body annule son sticky).
           · le menu est ancré de sous le header (--mnav-top, mesuré par le JS)
             jusqu'à bottom:0 → couverture TOTALE de l'écran, aucun calcul de
             hauteur, aucune marge possible en bas. */
        @media (max-width: 1023px) {
            body.nav-open {
                position: fixed;
                left: 0; right: 0; width: 100%;
                overflow: hidden;
            }
            body.nav-open > header {
                position: fixed;
                top: 0; left: 0; right: 0;
                z-index: 10006;
            }
            body > header .main-nav.active {
                position: fixed;
                top: var(--mnav-top, 58px);
                left: 0; right: 0; bottom: 0;
                height: auto;
                max-height: none;
                margin-top: 0;
            }
        }
        /* Header minimisé au scroll (padding 16→12) → on réduit le décalage d'autant
           pour que le menu reste collé au bas du header. */
        body > header.scrolled .main-nav { margin-top: 12.6px; }   /* = padding-bas scrollé (11.6) + bordure (1) */

        /* (Watchlist du menu supprimée — juillet 2026.) */

        body > header .main-nav a {
            text-decoration: none;
            color: var(--text-main);
            font-weight: 700;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 12px 20px;
            transition: color 0.2s, background 0.12s;
        }
        body > header .main-nav a:hover {
            color: var(--blue-link);
            background: var(--border-soft);
        }
        /* Sous-libellés (burger mobile) : une ligne grise sous chaque entrée —
           les intitulés « Radar » / « Screener » ne parlent pas aux débutants. */
        body > header .main-nav a small {
            display: block; font-size: 10.5px; font-weight: 600;
            text-transform: none; letter-spacing: 0.2px;
            color: var(--text-faint); margin-top: 2px;
        }
        /* Intitulés de groupe (Marchés / Outils / Le site) — burger uniquement */
        body > header .main-nav .mnav-group {
            display: block; padding: 14px 20px 4px;
            font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
            text-transform: uppercase; color: var(--gold, #b78908);
        }
        body > header .main-nav .mnav-group:first-of-type { padding-top: 6px; }
        /* Lien VIP (Terminal d'achat) : pastille dorée à côté du libellé. */
        body > header .main-nav a.nav-vip .nav-vip-pill {
            display: inline-block; margin-left: 6px; vertical-align: 1px;
            font-size: 8.5px; font-weight: 900; letter-spacing: 1px;
            background: var(--gold, #b78908); color: #fff;
            padding: 1px 5px; border-radius: 3px; text-transform: uppercase;
        }
        @media (min-width: 1024px) {
            /* Desktop : nav horizontale inchangée — pas de groupes ni sous-libellés */
            body > header .main-nav a small { display: none; }
            body > header .main-nav .mnav-group { display: none; }
        }

        /* ─── PC ≥ 1024px : nav permanente sous le header, pas de hamburger,
              pas de réduction au scroll. Mobile/tablette gardent le burger.
              Le header reste sticky (position d'origine) mais sa taille est
              figée — la classe .scrolled est neutralisée visuellement. */
        @media (min-width: 1024px) {
            /* Scroll SANS effet sur PC : on aligne l'état .scrolled sur l'état de
               base desktop (14px / logo 16px / nav 12px) → le header ne bouge plus.
               (Avant : 16px/18px = anciennes valeurs pré −10% → le header GRANDISSAIT.) */
            body > header.scrolled         { padding: 14px 0; box-shadow: none; transition: none; }
            body > header.scrolled .logo-img { height: 16px; transition: none; }
            body > header.scrolled .main-nav { margin-top: 12px; }
            body > header .menu-toggle     { display: none; }

            /* Logo centré + nav centrée DESSOUS : on bascule le header-container
               en colonne pour empiler logo (row 1) puis nav (row 2). Les deux
               restent centrés horizontalement via align-items: center. */
            body > header .header-container {
                flex-direction: column;
                align-items: center;
                padding-bottom: 0;
                gap: 0;
            }
            body > header .logo-img { margin: 0 auto; }

            /* Nav : pleine largeur SOUS le logo, contenus centrés. Le ::before
               étend la bordure haute jusqu'aux bords de l'écran indépendamment
               de la largeur du header-container (qui est borné par max-width). */
            body > header .main-nav {
                display: flex !important;
                position: static;   /* la lune s'ancre sur .header-container (niveau logo) */
                flex-direction: row;
                flex-wrap: wrap;    /* filet : si ça ne tient pas, 2e ligne — jamais d'items rognés hors écran */
                justify-content: center;
                align-items: center;
                gap: 4px;
                width: 100%;
                padding: 10px 0 6px;
                margin-top: 12px;
                border-top: 1px solid var(--border-soft);
                border-bottom: 1px solid var(--border-color);
                background: var(--bg-card);
                box-shadow: none;
                /* La règle de base pose height:100dvh (panneau plein écran mobile) :
                   sans reset ici, la nav horizontale PC fait toute la hauteur du
                   viewport → seul le menu est visible. */
                height: auto;
                max-height: none;
                overflow: visible;
            }
        }
        /* PC : les 13 entrées doivent tenir sur UNE seule ligne. Le conteneur est
           borné à 1400px, mais entre 1024 et ~1400px la nav débordait sur 2 lignes.
           Dimensionnement GRADUÉ (gap + padding + typo resserrés d'autant plus que
           l'écran est étroit) pour rester sur une ligne du laptop 1024 au grand
           écran. flex-wrap:wrap est conservé comme FILET (jamais d'item rogné hors
           écran) mais le sizing est calibré pour ne jamais le déclencher sur PC. */
        /* Taille calibrée EMPIRIQUEMENT sur le rendu réel (nav utile ≈ 1370px au
           conteneur max 1400) : à 12,5px/padding 14/letter-spacing 0,5 les 13 items
           font 1476px → 2 lignes. À 11,5px/padding 9/ls 0,2/gap 3 ils font ~1263px
           → 1 ligne avec marge. Les libellés sont en MAJUSCULES (donc plus larges) :
           c'est ce qui imposait de descendre à 11,5px. Une SEULE règle ≥1024 (pas de
           2e bloc ≥1024 en dessous qui réécraserait le sizing). */
        @media (min-width: 1024px) {
            body > header .main-nav { gap: 3px; }
            body > header .main-nav a {
                white-space: nowrap;
                padding: 8px 9px;
                border-radius: 4px;
                font-size: 11.5px;
                letter-spacing: 0.2px;
            }
        }
        /* Laptops plus étroits (1024-1400) : le conteneur rétrécit avec le viewport
           → on resserre encore d'un cran pour rester sur une ligne. */
        @media (min-width: 1024px) and (max-width: 1400px) {
            body > header .main-nav { gap: 2px; }
            body > header .main-nav a { padding: 7px 7px; font-size: 11px; letter-spacing: 0; }
        }

        .font-journal { font-family: 'Playfair Display', Georgia, serif; }

        .btn-outline { display: inline-block; padding: 10px 20px; border: 1px solid var(--y-dark); color: var(--y-dark); text-decoration: none; font-weight: bold; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; text-align: center; cursor: pointer; background: transparent; font-family: inherit; border-radius: 0; }
        .btn-outline:hover { background: var(--y-dark); color: var(--bg-page); }

        /* Badges in-text */
        .badge-stock { background-color: var(--bg-subtle-2); color: var(--text-main); padding: 2px 8px; border-radius: 12px; font-weight: 800; font-size: 0.9em; white-space: nowrap; border: 1px solid var(--border-soft); }
        .data-up   { background-color: var(--up-bg);   color: var(--up);   padding: 2px 8px; border-radius: 12px; font-weight: 800; font-size: 0.9em; white-space: nowrap; }
        .data-down { background-color: var(--down-bg); color: var(--down); padding: 2px 8px; border-radius: 12px; font-weight: 800; font-size: 0.9em; white-space: nowrap; }

        /* ─── BADGE COURS (façon Yahoo) : ticker + variation journalière ───
           Présent sur les cartes news (index) et en tête d'article. Le % est
           rempli côté client par bourseur.js (data-badge-sym → /index.php?api_yf).
           Aucune valeur tant que le % n'est pas chargé (point « · »). */
        .bdg { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800;
            padding: 1px 5px; border-radius: 3px; background: transparent; border: 1px solid var(--border-soft);
            color: var(--text-muted); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap;
            vertical-align: middle; line-height: 1.45; transition: border-color .15s; }
        .bdg .bdg-tk { color: var(--text-main); letter-spacing: .2px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
        .bdg .bdg-pct { font-weight: 800; }   /* seul le % se colore (vert/rouge) */
        .bdg.bdg-up   .bdg-pct { color: var(--up); }
        .bdg.bdg-down .bdg-pct { color: var(--down); }
        .bdg.bdg-flat .bdg-pct { color: var(--text-muted); }
        .bdg.bdg-na   { opacity: .55; }
        a.bdg:hover { border-color: var(--brand-line); }

        /* ─── Variante « Yahoo Finance » du badge cours ─────────────────────
           Source unique partagée par l'index ET les articles (DRY). Cadre global
           nom+%, police YahooSans (repli Helvetica), nom = raccourci BLEU en
           majuscules, variation aux couleurs EXACTES Yahoo, le % sans cadre. */
        .bdg-yf { font-family: "YahooSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-variant-numeric: tabular-nums; font-weight: 600; gap: 5px;
            border: 1px solid var(--border-soft); border-radius: 4px; padding: 2px 7px; background: transparent; }
        .bdg-yf .bdg-tk  { font-family: inherit; text-transform: uppercase; color: var(--blue-link-soft);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 220px; }
        .bdg-yf .bdg-pct { font-family: inherit; padding: 0; background: none; border-radius: 0; }
        .bdg-yf.bdg-up   .bdg-pct { color: #037b66; }
        .bdg-yf.bdg-down .bdg-pct { color: #d42c21; }
        .bdg-yf.bdg-flat .bdg-pct { color: var(--text-muted); }
        html[data-theme="dark"] .bdg-yf.bdg-up   .bdg-pct { color: #0bac90; }
        html[data-theme="dark"] .bdg-yf.bdg-down .bdg-pct { color: #ed5062; }
        @media (prefers-color-scheme: dark) {
            html[data-theme="auto"] .bdg-yf.bdg-up   .bdg-pct { color: #0bac90; }
            html[data-theme="auto"] .bdg-yf.bdg-down .bdg-pct { color: #ed5062; }
        }