/* =============================================================================
   blog-article.css
   CSS extrait tel quel des blocs <style> de blog/article.php.
   Les blocs sont concatenes DANS LEUR ORDRE D'APPARITION : a specificite
   egale c'est la derniere regle qui gagne, l'ordre ne doit jamais changer.
   Rien n'a ete reecrit, dedoublonne ni reordonne.
   ============================================================================= */

/* ===== bloc 1, ex-ligne 347 de blog/article.php ===== */

        body { font-family: 'Poppins', sans-serif; }

        /* ══════════════════════════════════════════════════════════════
           PALETTE DE LA PAGE ARTICLE — définie ICI, volontairement.

           Les composants éditoriaux (signature, sommaire, sources, auteur)
           dépendaient de theme-theorie.css pour leur version claire. Si ce
           fichier .css n'est pas déployé, son cache-buster (?v=filemtime)
           ne change pas non plus : le navigateur garde l'ancienne version
           et les règles claires n'existent jamais → texte pâle sur fond
           pâle. En déclarant la palette dans le <style> de la page, elle
           voyage avec le .php et ne peut plus se désynchroniser.

           Contrastes vérifiés sur #ffffff (AA = 4.5:1 minimum).
           ══════════════════════════════════════════════════════════════ */
        :root {
            --bl-text:    #ffffff;  /* titres, noms                     */
            --bl-body:    #d8dfe7;  /* texte courant des composants     */
            --bl-muted:   #8fa3b8;  /* métadonnées, libellés discrets   */
            --bl-faint:   #7f93a8;  /* mentions secondaires             */
            --bl-accent:  #8cc63f;  /* vert de marque                   */
            --bl-accent2: #a5d95f;  /* vert clair (états actifs)        */
            --bl-surface: rgba(255,255,255,0.03);
            --bl-panel:   rgba(255,255,255,0.025);
            --bl-line:    rgba(255,255,255,0.08);
        }
        html[data-theme="light"] {
            --bl-text:    #112a45;  /* 14.6:1 */
            --bl-body:    #33465c;  /*  8.4:1 */
            --bl-muted:   #51647a;  /*  6.1:1 */
            --bl-faint:   #5d7286;  /*  5.0:1 */
            --bl-accent:  #4e7d1f;  /*  5.4:1 — le #8cc63f tombe à 2.05:1 sur blanc */
            --bl-accent2: #3d6318;  /*  7.4:1 */
            --bl-surface: #f5f8fc;
            --bl-panel:   #ffffff;
            --bl-line:    rgba(16,42,69,0.12);
        }

        .glass-card {
            background: rgba(30, 58, 87, 0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .glass-card:hover {
            background: rgba(30, 58, 87, 0.8);
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(140, 198, 63, 0.2);
        }

        /* ── Surface de lecture éditoriale : plate, stable, AUCUN effet hover ──
           Le corps d'un article se lit, il ne se survole pas comme une carte. */
        .article-panel {
            background: var(--bl-panel);
            border: 1px solid var(--bl-line);
            border-radius: 1.25rem;
            box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
        }
        /* Pastille catégorie type média officiel */
        .article-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--bl-accent);
            background: rgba(140, 198, 63, 0.12);
            border: 1px solid rgba(140, 198, 63, 0.3);
            padding: 0.35rem 0.85rem;
            border-radius: 9999px;
            text-decoration: none;
            transition: background 0.2s ease;
        }
        .article-eyebrow:hover { background: rgba(140, 198, 63, 0.2); }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fadeInUp 0.6s ease-out;
        }

        .article-content {
            line-height: 1.85;
            font-size: 1.0625rem;
            letter-spacing: 0.003em;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }
        /* Paragraphe d'introduction (chapô) mis en valeur, comme dans la presse */
        .article-content > p:first-of-type {
            font-size: 1.2rem;
            line-height: 1.7;
            color: var(--ac-head) !important;
            font-weight: 400;
        }
        /* Sidebar : layout block sur desktop (stretch dans la grid → sticky marche),
           flex avec ordre custom sur mobile (Sommaire tout en bas). */
        @media (max-width: 1023px) {
            .sidebar-mobile-reorder {
                display: flex;
                flex-direction: column;
                gap: 2rem;
            }
            .sidebar-mobile-reorder > * {
                margin-top: 0 !important;
            }
            /* Le sommaire sert à s'orienter AVANT de lire : il était en order:99,
               c'est-à-dire tout en bas de page, là où il ne servait plus à rien. */
            .sidebar-mobile-reorder > #article-toc-wrapper {
                order: -1;
            }
        }

        /* CTA sticky desktop — solution robuste, indépendante de Tailwind */
        @media (min-width: 1024px) {
            .sidebar-mobile-reorder {
                align-self: stretch;
            }
            #cta-sticky-block {
                position: -webkit-sticky;
                position: sticky;
                top: 8rem;
            }
        }

        /* Tables : pleine largeur et propres sur desktop.
           (l'ancienne règle display:block + width:max-content s'appliquait partout et tronquait l'en-tête) */
        /* ── MOBILE : contenu et tableaux optimisés (tiennent dans l'écran, rien de coupé) ── */
        @media (max-width: 640px) {
            /* Typo plus compacte et aérée juste ce qu'il faut */
            .article-content { font-size: 0.95rem; line-height: 1.65; letter-spacing: 0; }
            .article-content > p:first-of-type { font-size: 1.05rem; line-height: 1.6; }
            .article-content p, .article-content ul, .article-content ol { margin-bottom: 0.9rem; }
            .article-content ul, .article-content ol { padding-left: 1.2rem; }
            .article-content h2 { font-size: 1.3rem; margin-top: 1.8rem; margin-bottom: 0.7rem; padding-bottom: 0.4rem; }
            .article-content h3 { font-size: 1.1rem; margin-top: 1.3rem; }

            /* Les tableaux → cartes empilées sont traités PLUS BAS, après les
               règles de tableau desktop. Ils étaient ici, mais une media query
               n'ajoute aucune spécificité : les règles desktop, écrites après,
               les écrasaient toutes (notamment `display: table`, qui reformait
               les colonnes et faisait déborder le texte hors de l'écran). */
        }
        /* Wrapper overflow-x: auto autour des tables (déjà présent dans certains articles) */
        .article-content > div[style*="overflow-x"] {
            margin-left: -1rem;
            margin-right: -1rem;
            padding-left: 1rem;
            padding-right: 1rem;
        }
        /* Images jamais plus larges que le conteneur */
        .article-content img {
            max-width: 100%;
            height: auto;
        }
        /* Bloc CTA / dégradés en pleine largeur sur mobile */
        @media (max-width: 640px) {
            .article-content > div[style*="gradient"],
            .article-content > div[style*="linear-gradient"] {
                margin-left: -0.5rem !important;
                margin-right: -0.5rem !important;
                padding: 1.25rem !important;
            }
        }
        /* ── Couleurs du corps d'article : pilotées par variables ──
           Cette règle balaie TOUT le contenu (y compris span/div/td/[style]),
           parce que les articles arrivent de la base avec des styles inline
           arbitraires qu'il faut neutraliser.
           Elle portait un gris en dur (#d1d5db) : sur le fond blanc du mode
           clair, ça donnait 1.47:1 de contraste — illisible. Le mode clair ne
           rattrapait que p/li/h3/strong, donc tout le reste restait gris pâle.
           On garde la même spécificité (donc aucune régression en sombre) et
           on ne change que la VALEUR selon le thème. */
        .article-content {
            --ac-text:   #d1d5db;  /* texte courant */
            --ac-head:   #ffffff;  /* titres */
            --ac-quote:  #9ca3af;  /* citations */
            --ac-code:   #8cc63f;  /* <code> */
            --ac-info:   #93c5fd;  /* strong des encadrés bleus */
            --ac-danger: #fca5a5;  /* strong des encadrés rouges */
        }
        /* Valeurs alignées sur les tokens du thème (--pp-text / --pp-text-muted) :
           theme-theorie.css force déjà p/li/td/th en #112a45 avec une spécificité
           supérieure. Utiliser une autre nuance ici donnerait des <span> d'un gris
           légèrement différent de leur propre paragraphe. */
        html[data-theme="light"] .article-content {
            --ac-text:   #112a45;  /* = --pp-text        · 14.6:1 sur blanc */
            --ac-head:   #0f2b46;  /* titres             · 13.9:1 */
            --ac-quote:  #51647a;  /* = --pp-text-muted  ·  6.1:1 */
            /* Ces 3 couleurs étaient posées par une RÈGLE CSS, pas par un style
               inline : les rattrapages [style*="color:#93c5fd"] du thème ne les
               atteignaient donc jamais. D'où du bleu/rouge/vert pâle sur fond pâle. */
            --ac-code:   #3d6318;  /* vert foncé lisible sur le fond vert pâle du code */
            --ac-info:   #1d4ed8;  /* = titre .callout-info du thème */
            --ac-danger: #b91c1c;  /* = titre .callout-danger du thème */
        }
        .article-content,
        .article-content *,
        .article-content *::before,
        .article-content *::after,
        .article-content p,
        .article-content span,
        .article-content div,
        .article-content li,
        .article-content td,
        .article-content th,
        .article-content blockquote,
        .article-content [style],
        .article-content [style] * {
            color: var(--ac-text) !important;
            background-color: transparent !important;
        }
        .article-content h1,
        .article-content h2,
        .article-content h3,
        .article-content h4,
        .article-content h5,
        .article-content h6 {
            color: var(--ac-head) !important;
        }
        .article-content h2 {
            font-size: 1.75rem;
            font-weight: 700;
            margin-top: 2.75rem;
            margin-bottom: 1.1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.09);
            letter-spacing: -0.01em;
            scroll-margin-top: 6rem;
        }
        .article-content h3 {
            font-size: 1.4rem;
            font-weight: 600;
            margin-top: 2rem;
            margin-bottom: 0.75rem;
        }
        .article-content p {
            margin-bottom: 1.25rem;
        }
        .article-content ul, .article-content ol {
            margin-bottom: 1.25rem;
            padding-left: 1.5rem;
        }
        .article-content li {
            margin-bottom: 0.5rem;
        }
        /* Forcer fond sombre sur tout */
        .article-content div,
        .article-content section,
        .article-content article {
            background: transparent !important;
        }
        .article-content a {
            color: #8cc63f;
            text-decoration: underline;
        }
        .article-content a:hover {
            color: #7ab62f;
        }
        .article-content img {
            max-width: 100%;
            height: auto;
            border-radius: 0.75rem;
            margin: 1.5rem 0;
        }
        .article-content blockquote {
            border-left: 4px solid #8cc63f !important;
            padding-left: 1.5rem !important;
            margin: 1.5rem 0 !important;
            font-style: italic !important;
            background-color: rgba(140, 198, 63, 0.08) !important;
            padding: 1rem 1.5rem !important;
            border-radius: 0 0.5rem 0.5rem 0 !important;
        }
        .article-content blockquote,
        .article-content blockquote * {
            color: var(--ac-quote) !important;
        }
        .article-content code {
            background: rgba(140, 198, 63, 0.1);
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.9em;
            color: var(--ac-code);
        }
        .article-content pre {
            background: #0a1929;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin: 1.5rem 0;
        }
        /* ══════════════════════════════════════════════════════════════
           TABLEAUX — présentation de données, pas décor.

           Le fond était en dur (rgba(15,43,70,.55) = marine) sans aucun
           rattrapage en mode clair : le tableau restait un bloc sombre
           posé au milieu d'une page blanche. Tout passe en variables.

           Parti pris éditorial (type rapport officiel plutôt que tableur) :
           pas de quadrillage vertical, un seul filet horizontal, l'en-tête
           tient par sa typo — pas par une bande de couleur.
           ══════════════════════════════════════════════════════════════ */
        .article-content {
            --tb-surface: rgba(15, 43, 70, 0.55);
            --tb-border:  rgba(255,255,255,0.09);
            --tb-line:    rgba(255,255,255,0.06);
            --tb-head-bg: rgba(140, 198, 63, 0.14);
            --tb-head-tx: #eaf3da;
            --tb-zebra:   rgba(255,255,255,0.022);
            --tb-hover:   rgba(140,198,63,0.06);
            --tb-shadow:  0 12px 30px rgba(0,0,0,0.20);
        }
        html[data-theme="light"] .article-content {
            --tb-surface: #ffffff;
            --tb-border:  rgba(16,42,69,0.14);
            --tb-line:    rgba(16,42,69,0.09);
            --tb-head-bg: #f2f8e9;              /* vert très pâle, lisible */
            --tb-head-tx: #3d6318;              /* 7.4:1 sur le vert pâle */
            --tb-zebra:   rgba(16,42,69,0.028);
            --tb-hover:   rgba(140,198,63,0.10);
            --tb-shadow:  0 6px 20px rgba(16,42,69,0.07);
        }
        .article-content table {
            width: 100%;
            margin: 2rem 0;
            border-collapse: separate !important;
            border-spacing: 0;
            background-color: var(--tb-surface) !important;
            border: 1px solid var(--tb-border);
            border-radius: 14px;
            overflow: hidden;
            font-size: 0.95rem;
            box-shadow: var(--tb-shadow);
            /* Chiffres alignés en colonne : indispensable pour comparer des
               prix ou des délais d'un coup d'œil. */
            font-variant-numeric: tabular-nums;
        }
        /* En-tête : la typo porte la hiérarchie, pas la couleur */
        .article-content thead tr,
        .article-content tr[style*="background"] {
            background-color: var(--tb-head-bg) !important;
        }
        .article-content th {
            background-color: var(--tb-head-bg) !important;
            color: var(--tb-head-tx) !important;
            font-weight: 700;
            font-size: 0.72rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 0.85rem 1.15rem !important;
            border: none !important;
            border-bottom: 1px solid rgba(140,198,63,0.30) !important;
            text-align: left;
        }
        /* Cellules : pas de quadrillage, juste un fin séparateur horizontal */
        .article-content td {
            padding: 0.85rem 1.15rem !important;
            border: none !important;
            border-bottom: 1px solid var(--tb-line) !important;
            background-color: transparent !important;
            vertical-align: middle;
            line-height: 1.55;
        }
        /* Première colonne = libellé de ligne : c'est le point d'entrée du regard */
        .article-content td:first-child {
            color: var(--ac-head) !important;
            font-weight: 600;
        }
        /* Zebra très discret + survol + dernière ligne sans bordure */
        .article-content tbody tr:nth-child(even) td {
            background-color: var(--tb-zebra) !important;
        }
        .article-content tbody tr {
            transition: background-color .15s ease;
        }
        .article-content tbody tr:hover td {
            background-color: var(--tb-hover) !important;
        }
        .article-content tbody tr:last-child td {
            border-bottom: none !important;
        }
        /* Un tableau trop large ne doit jamais élargir la page : il défile seul.
           (les articles arrivent de la base, on ne maîtrise pas le nb de colonnes)
           `display: table` est volontairement enfermé dans le breakpoint desktop :
           hors media query, il écrasait la mise en cartes du mobile. */
        @media (min-width: 641px) {
            .article-content table { display: table; }
            .article-content > table { max-width: 100%; }
        }

        /* ══════════════════════════════════════════════════════════════
           MOBILE — TABLEAUX EN CARTES EMPILÉES
           Placé APRÈS les règles de tableau desktop : à spécificité égale,
           c'est la dernière déclaration qui gagne, et une media query
           n'ajoute pas de spécificité. Ce bloc doit donc rester en dernier.

           Les articles viennent de la base : on ne maîtrise ni le nombre de
           colonnes, ni les styles inline (min-width, width=, nowrap…) que
           l'éditeur a pu laisser. D'où les !important et les min-width:0,
           sans lesquels une seule largeur inline suffit à faire déborder
           toute la page.
           ══════════════════════════════════════════════════════════════ */
        @media (max-width: 640px) {
            /* Le conteneur à défilement horizontal n'a plus de raison d'être
               en mode cartes : il ne ferait que masquer du contenu. */
            .article-content div[style*="overflow-x"],
            .article-content div[style*="overflow: auto"] {
                overflow-x: visible !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            .article-content table,
            .article-content tbody,
            .article-content tr,
            .article-content td,
            .article-content th {
                display: block !important;
                width: 100% !important;
                min-width: 0 !important;      /* neutralise un min-width inline */
                max-width: 100% !important;
                box-sizing: border-box !important;
                white-space: normal !important;
            }
            .article-content table {
                margin: 1.5rem 0 !important;
                border: none !important;
                background: transparent !important;
                background-color: transparent !important;
                box-shadow: none !important;
                border-radius: 0 !important;
                font-size: 0.95rem;
            }
            /* Les en-têtes sont repris par la 1re cellule de chaque carte */
            .article-content thead { display: none !important; }
            .article-content colgroup, .article-content col { display: none !important; }

            .article-content tbody tr {
                margin-bottom: 0.9rem !important;
                background: var(--tb-surface) !important;
                background-color: var(--tb-surface) !important;
                border: 1px solid var(--tb-border) !important;
                border-left: 3px solid var(--ac-code) !important;
                border-radius: 12px !important;
                overflow: hidden !important;
            }
            .article-content tbody tr:nth-child(even) td,
            .article-content tbody tr:hover td {
                background-color: transparent !important;  /* zebra + hover : sans objet en cartes */
            }
            .article-content td {
                border: none !important;
                border-bottom: 1px solid var(--tb-line) !important;
                padding: 0.55rem 0.95rem !important;
                font-size: 0.9rem;
                background: transparent !important;
                vertical-align: top !important;
                /* Un mot trop long (URL, référence légale) casse au lieu de déborder */
                overflow-wrap: anywhere;
                word-break: break-word;
            }
            .article-content tbody tr td:last-child { border-bottom: none !important; }
            .article-content td:first-child {
                color: var(--ac-head) !important;
                font-weight: 700 !important;
                font-size: 0.98rem;
                padding-top: 0.8rem !important;
            }
        }
        /* Couleurs sémantiques voulues par l'auteur (chiffres-clés, alertes) —
           on les rétablit par-dessus la règle qui force tout en gris. */
        .article-content [style*="color:#f59e0b"],
        .article-content [style*="color: #f59e0b"] { color:#f59e0b !important; }
        .article-content [style*="color:#ef4444"],
        .article-content [style*="color: #ef4444"] { color:#ef4444 !important; }
        .article-content [style*="color:#8cc63f"],
        .article-content [style*="color: #8cc63f"] { color:#8cc63f !important; }
        .article-content [style*="color:#3b82f6"],
        .article-content [style*="color: #3b82f6"] { color:#3b82f6 !important; }
        /* RESET tous les backgrounds inline */
        .article-content [style*="background"] {
            background: rgba(140, 198, 63, 0.12) !important;
        }
        .article-content div[style],
        .article-content p[style],
        .article-content span[style] {
            background: transparent !important;
            color: var(--ac-text) !important;
        }
        /* Info boxes avec style inline */
        .article-content div[style*="padding"] {
            background: rgba(140, 198, 63, 0.12) !important;
            border: 1px solid rgba(140, 198, 63, 0.3) !important;
            border-left: 4px solid #8cc63f !important;
            border-radius: 0.75rem !important;
            padding: 1.25rem !important;
            margin: 1.5rem 0 !important;
        }
        .article-content div[style*="padding"] * {
            color: var(--ac-text) !important;
        }
        .article-content div[style*="padding"] strong {
            color: #8cc63f !important;
        }
        /* ── Encadrés colorés : rendre à chaque boîte sa couleur d'intention ──
           (sinon la règle générique ci-dessus les aplatit toutes en vert) */
        /* Boîtes panneau sombre (fond marine) — garder un fond sombre, pas vert */
        .article-content div[style*="rgba(15, 43, 70"] {
            background: rgba(15, 43, 70, 0.6) !important;
            border: 1px solid rgba(140,198,63,0.25) !important;
            border-left: 4px solid #8cc63f !important;
        }
        /* Alerte / coût (rouge) */
        .article-content div[style*="rgba(239,68,68"] {
            background: rgba(239,68,68,0.08) !important;
            border: 1px solid rgba(239,68,68,0.28) !important;
            border-left: 4px solid #ef4444 !important;
        }
        .article-content div[style*="rgba(239,68,68"] strong { color:var(--ac-danger) !important; }
        /* Encadré « pour t'entraîner » (bleu) — placé après le marine pour gagner */
        .article-content div[style*="rgba(59,130,246"] {
            background: rgba(15, 43, 70, 0.6) !important;
            border: 1px solid rgba(59,130,246,0.30) !important;
            border-left: 4px solid #3b82f6 !important;
        }
        .article-content div[style*="rgba(59,130,246"] strong { color:var(--ac-info) !important; }
        /* CTA en dégradé vert (cible unique : rgba(122,182,47) → n'affecte rien d'autre) */
        .article-content div[style*="rgba(122,182,47"] {
            background: linear-gradient(135deg, rgba(140,198,63,0.18), rgba(122,182,47,0.06)) !important;
            border: 1px solid rgba(140,198,63,0.40) !important;
            border-left: 1px solid rgba(140,198,63,0.40) !important;
            border-radius: 14px !important;
        }
        /* ── MODE CLAIR : les deux encadrés ci-dessus avaient un fond MARINE en dur
              (rgba(15,43,70,.6)). Sur la page blanche du mode clair, ça posait un
              bloc gris-bleu opaque au milieu du texte, avec du texte sombre dessus.
              On ne change que la VALEUR du fond : la couleur d'intention (bordure
              gauche verte ou bleue) et la structure restent identiques. */
        html[data-theme="light"] .article-content div[style*="rgba(15, 43, 70"] {
            background: #f3f7fb !important;                      /* bleu-gris très pâle */
            border: 1px solid rgba(140,198,63,0.35) !important;
            border-left: 4px solid #8cc63f !important;
        }
        html[data-theme="light"] .article-content div[style*="rgba(59,130,246"] {
            background: #eef4ff !important;                      /* bleu très pâle */
            border: 1px solid rgba(59,130,246,0.35) !important;
            border-left: 4px solid #3b82f6 !important;
        }
        /* Le vert de marque (#8cc63f) ne tient pas sur fond pâle : 2.1:1.
           On bascule sur le vert foncé déjà utilisé par le thème (--ac-code, 7:1). */
        html[data-theme="light"] .article-content div[style*="rgba(15, 43, 70"] strong {
            color: #3d6318 !important;
        }
        /* Boutons CTA verts pleins (au lieu du vert pâle délavé + texte gris) */
        .article-content a[style*="background:#8cc63f"],
        .article-content a[style*="background: #8cc63f"] {
            background: #8cc63f !important;
            color: #0f2b46 !important;
            border-radius: 9999px !important;
            font-weight: 800 !important;
            text-decoration: none !important;
            box-shadow: 0 6px 18px rgba(140,198,63,0.35);
        }
        .article-content a[style*="background:#8cc63f"]:hover,
        .article-content a[style*="background: #8cc63f"]:hover {
            background: #7ab62f !important;
            transform: translateY(-2px);
        }
        /* Fix pour les strong/bold dans le contenu */
        .article-content strong, .article-content b {
            color: white;
            font-weight: 600;
        }
        .article-content .lead {
            font-size: 1.2em;
            color: var(--ac-quote) !important;
            margin-bottom: 2rem;
        }
        /* Info box - encadres d'information */
        .article-content .info-box {
            background-color: rgba(140, 198, 63, 0.15) !important;
            border: 1px solid rgba(140, 198, 63, 0.3) !important;
            border-left: 4px solid #8cc63f !important;
            border-radius: 0.75rem !important;
            padding: 1.25rem !important;
            margin: 1.5rem 0 !important;
        }
        .article-content .info-box,
        .article-content .info-box * {
            color: var(--ac-text) !important;
        }
        .article-content .info-box strong {
            color: #8cc63f !important;
        }
        .article-content .info-box.warning {
            background-color: rgba(251, 191, 36, 0.1) !important;
            border-color: rgba(251, 191, 36, 0.3) !important;
            border-left-color: #fbbf24 !important;
        }
        .article-content .info-box.warning strong {
            color: #fbbf24 !important;
        }
        /* Bouton CTA */
        .article-content .cta-button {
            display: inline-block;
            background: linear-gradient(135deg, #8cc63f 0%, #6ba32e 100%);
            color: white !important;
            padding: 1rem 2rem;
            border-radius: 9999px;
            font-weight: 700;
            text-decoration: none !important;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(140, 198, 63, 0.4);
        }
        .article-content .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(140, 198, 63, 0.5);
        }
        /* Alignement texte */
        .article-content .text-center {
            text-align: center;
            margin-top: 2rem;
        }
        /* Small text */
        .article-content small {
            color: #6b7280;
            font-size: 0.875em;
        }

        /* ── Système d'encadrés PROPRE (classes, plus fiable que le style inline) ──
           Utilisation : <div class="callout callout-warning"><span class="callout-title">Titre</span> texte…</div> */
        .article-content .callout {
            background: rgba(140,198,63,0.10);
            border: 1px solid rgba(140,198,63,0.28);
            border-left: 4px solid #8cc63f;
            border-radius: 12px;
            padding: 1.1rem 1.35rem;
            margin: 1.75rem 0;
        }
        .article-content .callout,
        .article-content .callout * { color: var(--ac-text) !important; }
        .article-content .callout strong { color: #ffffff !important; }
        .article-content .callout .callout-title {
            display: block; font-weight: 700; color: #ffffff !important; margin-bottom: 0.35rem;
        }
        .article-content .callout-warning { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.30); border-left-color: #fbbf24; }
        .article-content .callout-danger  { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.28);  border-left-color: #ef4444; }
        .article-content .callout-info    { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.30); border-left-color: #3b82f6; }
        .article-content .callout-success { background: rgba(140,198,63,0.10); border-color: rgba(140,198,63,0.30); border-left-color: #8cc63f; }

        /* ══════════════════════════════════════════════════════════════
           ENCART RESSOURCES (sidebar)
           Volontairement discret : bordure fine, pas de bouton plein ni
           d'ombre colorée. Il informe, il ne vend pas.
           ══════════════════════════════════════════════════════════════ */
        .ax-aside {
            background: var(--bl-surface);
            border: 1px solid var(--bl-line);
            border-radius: 14px;
            padding: 1.15rem 1.25rem;
        }
        .ax-label {
            font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
            color: var(--bl-muted); margin: 0 0 1rem;
            padding-bottom: .65rem; border-bottom: 1px solid var(--bl-line);
        }
        .ax-item { padding: .1rem 0 1rem; }
        .ax-item + .ax-item { border-top: 1px solid var(--bl-line); padding-top: 1rem; }
        .ax-item h3 {
            font-size: .95rem; font-weight: 700; color: var(--bl-text);
            margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem;
        }
        .ax-item p { font-size: .84rem; line-height: 1.55; color: var(--bl-muted); margin: 0 0 .6rem; }
        .ax-free {
            font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
            color: var(--bl-accent); background: rgba(140,198,63,.14);
            border: 1px solid rgba(140,198,63,.3);
            padding: .12rem .45rem; border-radius: 9999px;
        }
        /* Bouton d'achat : vert plein, sans dégradé ni ombre colorée */
        .ax-buy {
            display: block; width: 100%; text-align: center;
            background: #8cc63f; color: #0f2b46;
            font-weight: 800; font-size: .92rem;
            padding: .8rem 1rem; border-radius: 10px;
            text-decoration: none; transition: background .18s ease;
        }
        .ax-buy:hover { background: #7ab62f; color: #0f2b46; }
        html[data-theme="light"] .ax-buy { background: #4e7d1f; color: #ffffff; }
        html[data-theme="light"] .ax-buy:hover { background: #3d6318; color: #ffffff; }
        .ax-price {
            margin: .55rem 0 0 !important; text-align: center;
            font-size: .74rem; color: var(--bl-faint);
        }
        .ax-price strong { color: var(--bl-muted); font-weight: 700; }

        .ax-link {
            display: inline-flex; align-items: center; gap: .4rem;
            font-size: .84rem; font-weight: 600; color: var(--bl-accent); text-decoration: none;
        }
        .ax-link i { font-size: .68rem; transition: transform .18s ease; }
        .ax-link:hover { color: var(--bl-accent2); }
        .ax-link:hover i { transform: translateX(3px); }
        /* Transparence : on dit qui édite et qui vend */
        .ax-note {
            margin: .4rem 0 0; padding-top: .85rem;
            border-top: 1px solid var(--bl-line);
            font-size: .74rem; line-height: 1.5; color: var(--bl-faint);
        }
        .ax-note a { color: var(--bl-muted); text-decoration: underline; }
        .ax-note a:hover { color: var(--bl-accent); }

        /* ══════════════════════════════════════════════════════════════
           SOMMAIRE — repère de lecture, pas un menu déroulant.
           Plus de hauteur max ni de scroll interne : une boîte qui scrolle
           dans une page qui scrolle, c'est illisible.
           ══════════════════════════════════════════════════════════════ */
        .toc-box {
            background: var(--bl-surface);
            border: 1px solid var(--bl-line);
            border-radius: 14px;
            padding: 1.1rem 1.25rem;
        }
        .toc-box.hidden { display: none; }
        .toc-title {
            display: flex; align-items: center; gap: .5rem;
            font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
            color: var(--bl-muted); margin: 0 0 .85rem;
            padding-bottom: .7rem; border-bottom: 1px solid var(--bl-line);
        }
        .toc-title i { color: var(--bl-accent); }
        .toc-links { display: flex; flex-direction: column; counter-reset: toc; }
        /* Filet vertical continu + marqueur actif qui glisse dessus */
        .toc-link {
            position: relative;
            display: block;
            padding: .42rem 0 .42rem 1.4rem;
            color: var(--bl-muted); font-size: .85rem; line-height: 1.45;
            text-decoration: none;
            border-left: 2px solid var(--bl-line);
            transition: color .18s ease, border-color .18s ease;
        }
        .toc-link::before {
            counter-increment: toc;
            content: counter(toc);
            position: absolute; left: .55rem; top: .48rem;
            font-size: .66rem; font-weight: 700; color: var(--bl-faint);
            font-variant-numeric: tabular-nums;
            transition: color .18s ease;
        }
        .toc-link:hover { color: var(--bl-body); border-left-color: rgba(140,198,63,.45); }
        .toc-link.active {
            color: var(--bl-accent2); font-weight: 600;
            border-left-color: var(--bl-accent);
        }
        .toc-link.active::before { color: var(--bl-accent); }

        /* ══════════════════════════════════════════════════════════════
           SIGNATURE ÉDITORIALE (byline)
           Un lecteur doit savoir en 2 secondes : qui écrit, quand, vérifié
           quand, sur combien de sources. C'est ça qui crée la confiance.
           ══════════════════════════════════════════════════════════════ */
        .byline {
            display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
            padding: 1.1rem 0 1.4rem;
            border-top: 1px solid var(--bl-line);
            border-bottom: 1px solid var(--bl-line);
            margin-top: 1.75rem;
        }
        .byline-id { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
        /* Avatar : initiales, jamais un pictogramme. Un auteur est une personne. */
        .byline-avatar {
            width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #8cc63f, #6ba32e);
            color: #0f2b46; font-weight: 800; font-size: 0.95rem; letter-spacing: .02em;
        }
        .byline-id-text { min-width: 0; }
        .byline-name { font-size: 0.95rem; line-height: 1.3; margin: 0; }
        .byline-by { color: var(--bl-muted); font-weight: 400; margin-right: .3rem; }
        .byline-name a { color: var(--bl-text); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(140,198,63,.45); }
        .byline-name a:hover { color: var(--bl-accent); }
        .byline-role { color: var(--bl-muted); font-size: 0.8rem; margin: .15rem 0 0; }

        .byline-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
        .byline-chip {
            display: inline-flex; align-items: center; gap: .4rem;
            font-size: .76rem; color: var(--bl-muted);
            background: var(--bl-surface);
            border: 1px solid var(--bl-line);
            padding: .32rem .7rem; border-radius: 9999px;
            text-decoration: none; white-space: nowrap;
        }
        .byline-chip i { font-size: .72rem; opacity: .85; }
        /* Vérifié + sources : les deux signaux de fiabilité → seuls éléments colorés */
        .byline-chip-verified { color: var(--bl-accent); background: rgba(140,198,63,.1); border-color: rgba(140,198,63,.28); }
        .byline-chip-verified i { opacity: 1; }
        .byline-chip-src { color: var(--bl-accent); background: rgba(140,198,63,.1); border-color: rgba(140,198,63,.28); font-weight: 600; }
        .byline-chip-src:hover { background: rgba(140,198,63,.2); color: var(--bl-accent2); }

        .byline-share { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
        .byline-share-label { color: var(--bl-muted); font-size: .78rem; margin-right: .2rem; }
        /* Partage monochrome : un article de référence n'est pas un mur de logos criards */
        .share-btn {
            width: 34px; height: 34px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--bl-surface);
            border: 1px solid var(--bl-line);
            color: var(--bl-muted); font-size: .82rem; cursor: pointer;
            transition: background .2s ease, color .2s ease, border-color .2s ease;
        }
        .share-btn:hover { background: rgba(140,198,63,.16); border-color: rgba(140,198,63,.4); color: var(--bl-accent); }
        @media (max-width: 640px) {
            .byline-share { margin-left: 0; width: 100%; }
            .byline-share-label { display: none; }
        }

        /* ══════════════════════════════════════════════════════════════
           BIBLIOGRAPHIE — ce qui transforme un blog en source citable
           ══════════════════════════════════════════════════════════════ */
        .src-block {
            margin-top: 3rem; padding-top: 2rem;
            border-top: 2px solid rgba(140,198,63,.3);
            scroll-margin-top: 6rem;
        }
        .src-head { margin-bottom: 1.5rem; }
        .src-title {
            display: flex; align-items: center; gap: .6rem;
            font-size: 1.35rem; font-weight: 800; color: var(--bl-text); margin: 0 0 .5rem;
        }
        .src-title i { color: var(--bl-accent); font-size: 1.05rem; }
        .src-count {
            font-size: .72rem; font-weight: 800; color: #0f2b46;
            background: #8cc63f; border-radius: 9999px;
            min-width: 22px; height: 22px; padding: 0 .45rem;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .src-intro { color: var(--bl-muted); font-size: .9rem; line-height: 1.65; margin: 0; max-width: 42rem; }

        .src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: none; }
        .src-item {
            display: flex; gap: .85rem; align-items: flex-start;
            background: var(--bl-surface);
            border: 1px solid var(--bl-line);
            border-radius: 12px; padding: .9rem 1.05rem;
            scroll-margin-top: 6rem;
        }
        /* Numéro : c'est lui qui donne l'allure « référence académique » */
        .src-num {
            flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(140,198,63,.15); border: 1px solid rgba(140,198,63,.3);
            color: var(--bl-accent); font-size: .74rem; font-weight: 800;
            font-variant-numeric: tabular-nums;
        }
        .src-body { min-width: 0; flex: 1; }
        .src-label { display: block; color: var(--bl-body); font-size: .9rem; line-height: 1.6; }
        .src-link {
            display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem;
            font-size: .78rem; font-weight: 600; color: var(--bl-accent); text-decoration: none;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        }
        .src-link i { font-size: .68rem; }
        .src-link:hover { color: var(--bl-accent2); text-decoration: underline; }
        .src-offline { display: inline-block; margin-top: .35rem; font-size: .76rem; color: var(--bl-faint); font-style: italic; }
        .src-foot {
            margin: 1.35rem 0 0; padding-top: 1rem;
            border-top: 1px solid var(--bl-line);
            color: var(--bl-muted); font-size: .82rem; line-height: 1.7;
        }
        .src-foot i { color: var(--bl-accent); margin-right: .4rem; }
        .src-foot a { color: var(--bl-accent); text-decoration: underline; }

        /* ══════════════════════════════════════════════════════════════
           ENCADRÉ AUTEUR
           ══════════════════════════════════════════════════════════════ */
        .author-box { margin-top: 2rem; border-radius: 1.25rem; padding: 1.5rem; }
        .author-box-inner { display: flex; gap: 1.1rem; align-items: flex-start; }
        .author-avatar {
            width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #8cc63f, #6ba32e);
            color: #0f2b46; font-weight: 800; font-size: 1.15rem;
        }
        .author-box-body { min-width: 0; }
        .author-kicker { color: var(--bl-muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .3rem; }
        .author-name { color: var(--bl-text); font-size: 1.25rem; font-weight: 800; margin: 0 0 .2rem; }
        .author-role { color: var(--bl-accent); font-size: .85rem; font-weight: 600; margin: 0 0 .8rem; }
        .author-bio { color: var(--bl-body); font-size: .92rem; line-height: 1.75; margin: 0 0 1.1rem; max-width: 40rem; }
        .author-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
        .author-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
            font-weight: 600; padding: 0.6rem 1.05rem; border-radius: 9999px;
            text-decoration: none !important; transition: all 0.2s ease; font-size: 0.85rem;
        }
        .author-btn-ghost { background: var(--bl-surface); color: var(--bl-text) !important; border: 1px solid var(--bl-line); }
        .author-btn-ghost:hover { background: rgba(140,198,63,.16); border-color: rgba(140,198,63,.4); }
        .author-btn-primary { background: #8cc63f; color: #0f2b46 !important; }
        .author-btn-primary:hover { background: #7ab62f; }
        @media (min-width: 640px) {
            .author-box { padding: 2rem; }
            .author-avatar { width: 64px; height: 64px; font-size: 1.35rem; }
        }
        @media (max-width: 480px) {
            .author-actions { flex-direction: column; }
            .author-actions .author-btn { width: 100%; }
        }

        /* ── Articles similaires : carrousel horizontal ─────────────────
           CSS maison (build Tailwind purgée). Piste avec scroll-snap +
           fleches qui defilent d'une "page". Images avec fallback icone. */
        .rel-wrap { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2.5rem; }
        .rel-head {
            display: flex; align-items: flex-end; justify-content: space-between;
            gap: 1rem; margin-bottom: 1.5rem;
        }
        .rel-title {
            font-size: 1.6rem; font-weight: 800; color: #fff;
            margin: 0 0 .35rem; letter-spacing: -.01em;
        }
        .rel-sub { font-size: .95rem; color: #94a3b8; margin: 0; }
        .rel-nav { display: flex; gap: .6rem; flex-shrink: 0; }
        .rel-arrow {
            width: 42px; height: 42px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: rgba(30,58,87,0.6);
            border: 1px solid rgba(255,255,255,0.12);
            color: #fff; cursor: pointer; font-size: .85rem;
            transition: background .2s ease, border-color .2s ease, opacity .2s ease;
        }
        .rel-arrow:hover { background: rgba(140,198,63,0.18); border-color: rgba(140,198,63,0.5); color: #8cc63f; }
        .rel-arrow.is-off { opacity: .35; pointer-events: none; }

        .rel-track {
            display: flex; gap: 18px;
            overflow-x: auto; scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            padding-bottom: .5rem; /* place pour l'ombre au survol */
            -ms-overflow-style: none; scrollbar-width: none;
        }
        .rel-track::-webkit-scrollbar { display: none; }

        .rel-card {
            flex: 0 0 300px; max-width: 300px;
            scroll-snap-align: start;
            display: flex; flex-direction: column;
            background: rgba(30,58,87,0.4);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 14px; overflow: hidden;
            text-decoration: none;
            transition: border-color .2s ease, transform .2s ease;
        }
        .rel-card:hover { border-color: rgba(140,198,63,0.45); transform: translateY(-3px); }

        /* Media : l'icone est en fond, l'image par-dessus. Si l'image manque
           ou casse (onerror), l'icone reste visible. Plus de trou blanc. */
        .rel-media {
            position: relative; display: block;
            width: 100%; aspect-ratio: 16 / 9;
            background: #1e3a57; overflow: hidden;
        }
        .rel-media-ico {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,0.22); font-size: 1.9rem;
        }
        .rel-img {
            position: absolute; inset: 0;
            width: 100%; height: 100%; object-fit: cover;
            display: block;
        }
        .rel-body { padding: 1rem 1.15rem 1.15rem; }
        .rel-h {
            font-size: 1rem; font-weight: 700; color: #fff;
            line-height: 1.4; margin: 0 0 .6rem;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color .2s ease;
        }
        .rel-card:hover .rel-h { color: #8cc63f; }
        .rel-date {
            display: inline-flex; align-items: center; gap: .4rem;
            font-size: .82rem; color: #94a3b8;
        }
        .rel-date i { color: #8cc63f; font-size: .78rem; }

        @media (max-width: 600px) {
            .rel-title { font-size: 1.4rem; }
            .rel-card { flex-basis: 78%; max-width: 78%; } /* 1 carte + aperçu de la suivante */
            .rel-nav { display: none; } /* on scrolle au doigt sur mobile */
        }

        /* ══════════════════════════════════════════════════════════════
           COMMENTAIRES
           Tout passe par les variables --bl-* déjà définies plus haut :
           elles basculent seules entre thème clair et sombre.
           ══════════════════════════════════════════════════════════════ */
        .cmt-block { margin-top: 2.5rem; scroll-margin-top: 6rem; }
        .cmt-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
        .cmt-title { font-size: 1.35rem; font-weight: 800; color: var(--bl-text); margin: 0; }
        .cmt-count {
            font-size: .8rem; font-weight: 700; color: var(--bl-accent);
            background: rgba(140,198,63,.14); border-radius: 99px; padding: 2px 10px;
        }
        .cmt-rule { font-size: .8rem; color: var(--bl-faint); margin: 0 0 1.4rem; line-height: 1.6; }

        /* Bandeau de retour après envoi */
        .cmt-flash {
            display: flex; align-items: flex-start; gap: .6rem;
            padding: .85rem 1rem; border-radius: .8rem; font-size: .88rem;
            line-height: 1.5; margin-bottom: 1.3rem; border: 1px solid transparent;
        }
        .cmt-flash.ok    { background: rgba(140,198,63,.12); border-color: rgba(140,198,63,.35); color: var(--bl-accent); }
        .cmt-flash.info  { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.30); color: var(--bl-body); }
        .cmt-flash.error { background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.32);  color: #dc2626; }

        /* Formulaire */
        .cmt-form { background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 1rem; padding: 1.1rem; margin-bottom: 2rem; }
        .cmt-form-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; font-size: .85rem; color: var(--bl-muted); }
        .cmt-textarea {
            width: 100%; min-height: 110px; resize: vertical;
            background: var(--bl-panel); color: var(--bl-text);
            border: 1px solid var(--bl-line); border-radius: .7rem;
            padding: .8rem .9rem; font-family: inherit; font-size: .92rem; line-height: 1.6;
        }
        .cmt-textarea:focus { outline: none; border-color: var(--bl-accent); }
        .cmt-textarea::placeholder { color: var(--bl-faint); }
        .cmt-form-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .7rem; flex-wrap: wrap; }
        .cmt-counter { font-size: .75rem; color: var(--bl-faint); }
        .cmt-counter.over { color: #dc2626; font-weight: 700; }
        .cmt-submit {
            display: inline-flex; align-items: center; gap: .5rem;
            background: var(--bl-accent); color: #fff; border: 0; cursor: pointer;
            font-weight: 700; font-size: .88rem; padding: .6rem 1.2rem; border-radius: .7rem;
            transition: filter .15s ease;
        }
        .cmt-submit:hover { filter: brightness(1.08); }
        .cmt-submit:disabled { opacity: .5; cursor: not-allowed; }
        /* Pot de miel : hors écran, pas display:none — certains robots ignorent
           les champs masqués mais remplissent ceux qui sont simplement décalés. */
        .cmt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

        /* Invitation à se connecter */
        .cmt-login {
            background: var(--bl-surface); border: 1px dashed var(--bl-line);
            border-radius: 1rem; padding: 1.4rem; text-align: center; margin-bottom: 2rem;
        }
        .cmt-login p { color: var(--bl-body); font-size: .92rem; margin: 0 0 .9rem; }
        .cmt-login-btn {
            display: inline-flex; align-items: center; gap: .5rem;
            background: var(--bl-accent); color: #fff; font-weight: 700; font-size: .88rem;
            padding: .6rem 1.3rem; border-radius: .7rem; text-decoration: none;
        }

        /* Liste */
        .cmt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
        .cmt-item { background: var(--bl-panel); border: 1px solid var(--bl-line); border-radius: 1rem; padding: 1rem 1.1rem; }
        .cmt-item.pinned { border-color: rgba(140,198,63,.45); }
        .cmt-top { display: flex; align-items: center; gap: .65rem; margin-bottom: .55rem; flex-wrap: wrap; }
        .cmt-avatar {
            width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
            background: var(--bl-accent); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-weight: 800; font-size: .82rem;
        }
        .cmt-author { font-weight: 700; color: var(--bl-text); font-size: .9rem; }
        .cmt-date { font-size: .76rem; color: var(--bl-faint); }
        .cmt-badge { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 99px; }
        .cmt-badge.wait { background: rgba(251,191,36,.16); color: #b45309; }
        .cmt-badge.pin  { background: rgba(140,198,63,.16); color: var(--bl-accent); }
        .cmt-body { color: var(--bl-body); font-size: .92rem; line-height: 1.65; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
        .cmt-actions { margin-top: .6rem; }
        .cmt-reply-btn {
            background: none; border: 0; cursor: pointer; padding: 0;
            font-size: .78rem; font-weight: 700; color: var(--bl-accent); font-family: inherit;
        }
        .cmt-reply-btn:hover { text-decoration: underline; }
        .cmt-replies { list-style: none; margin: .9rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--bl-line); display: flex; flex-direction: column; gap: .8rem; }
        .cmt-empty { color: var(--bl-faint); font-size: .9rem; text-align: center; padding: 1.6rem 0; }

        /* Réponse officielle : une VRAIE réponse dans le fil, identifiée par son
           avatar et son badge — pas un pavé vert plaqué sous le commentaire.
           Un simple filet vert à gauche suffit à la distinguer. */
        .cmt-official { border-left: 3px solid var(--bl-accent); background: var(--bl-surface); }
        .cmt-badge.team { background: rgba(140,198,63,.16); color: var(--bl-accent); }

        /* Modération en ligne (admin) */
        .cmt-actions { display: flex; align-items: center; gap: .9rem; margin-top: .6rem; }
        .cmt-mod { position: relative; margin-left: auto; }
        .cmt-mod-btn {
            background: none; border: 0; cursor: pointer; padding: .2rem .45rem;
            color: var(--bl-faint); border-radius: .4rem; font-size: .9rem; line-height: 1;
        }
        .cmt-mod-btn:hover { color: var(--bl-text); background: var(--bl-surface); }
        .cmt-mod-menu {
            position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
            min-width: 210px; padding: .3rem;
            background: var(--bl-panel); border: 1px solid var(--bl-line);
            border-radius: .6rem; box-shadow: 0 12px 30px rgba(0,0,0,.22);
            display: flex; flex-direction: column;
        }
        /* L'attribut HTML `hidden` ne masque que via `[hidden]{display:none}` de
           la feuille du navigateur. Toute déclaration `display` de la page — ici
           le `display:flex` ci-dessus — l'emporte sur elle, et le menu restait
           donc ouvert en permanence. Il faut ré-affirmer le masquage. */
        .cmt-mod-menu[hidden] { display: none; }
        .cmt-mod-item {
            display: flex; align-items: center; gap: .55rem;
            background: none; border: 0; cursor: pointer; font-family: inherit;
            font-size: .82rem; text-align: left; padding: .5rem .6rem;
            border-radius: .45rem; color: var(--bl-body);
        }
        .cmt-mod-item:hover { background: var(--bl-surface); color: var(--bl-text); }
        .cmt-mod-item.ok { color: var(--bl-accent); }
        .cmt-mod-item.danger { color: #dc2626; }
        .cmt-mod-item i { width: 14px; text-align: center; }
        .cmt-answer-form { margin-top: .8rem; }

        @media (max-width: 640px) {
            .cmt-item { padding: .85rem .9rem; }
            .cmt-replies { padding-left: .7rem; }
        }