/* =============================================================================
   JOURNAL D'UN PROGRESSISTE — SYSTÈME DE DESIGN 2027
   -----------------------------------------------------------------------------
   Extrait littéralement des maquettes autonomes :
     G:\Mon Drive\dev\jdp-presidentielle-2027\maquettes\
       00-systeme-de-design.html          (jetons, échelle, grille, composants, états)
       01-accueil-A-edition-du-matin.html (édition du matin, duo, bandeau de série)
       03-fiche-illustree.html            (billet de campagne en quatre écrans)
       04-article.html                    (article long, sommaire, essentiel, sources)
       05-thematique.html                 (en-tête de rubrique, compteurs)

   Les cinq maquettes partagent un socle IDENTIQUE (lignes 4→241 de chaque
   fichier, vérifié par diff : aucune divergence hors <title>). Ce socle est
   reproduit ici sections 1 à 12. Les sections 13 à 18 sont les additions
   propres à chaque gabarit.

   POLICES : aucune police distante. Le système repose sur trois piles
   système (voir §1.3). Le thème Ghost actuel charge Playfair Display + Inter
   + JetBrains Mono depuis Google Fonts : ce chargement devient inutile.

   AUCUNE VALEUR N'A ÉTÉ INVENTÉE. Les seuls ajouts de l'extraction sont les
   commentaires et le regroupement en sections numérotées.
   ============================================================================= */


/* =============================================================================
   §1 — JETONS  (37 variables globales + 12 variables de famille = 39 jetons
                 distincts au sens du système : 37 globaux, plus le couple
                 --f / --f-c redéfini par chacune des six familles)
   ============================================================================= */

:root{
  /* ---- 1.1 papier et encre : la matière du journal ---------------------- */
  --pap:#FBFAF7;      /* le papier, fond de page */
  --pap2:#F3F0E8;     /* papier creusé : sections, plaques d'image */
  --pap3:#E9E4D8;     /* papier appuyé : jauges vides, séparateurs pleins */
  --blanc:#FFFFFF;    /* la carte, posée sur le papier */
  --filet:#E3DED2;    /* filet de 1 px */
  --filet2:#CDC5B4;   /* filet appuyé, survol */
  --encre:#16130F;    /* titres, chiffres */
  --encre2:#4B453B;   /* texte courant secondaire */
  --gris:#847C6F;     /* métadonnées */

  /* ---- 1.2 deux accents, pas davantage --------------------------------- */
  --vert:#0F5C4A;     /* la maison : liens, actions, présence */
  --vert-c:#E2EEE8;   /* le vert, clair : fonds, halo de focus */
  --vert-f:#0A4335;   /* le vert, foncé : survol des boutons pleins */
  --brique:#BF4326;   /* la série 2027 : le compte à rebours, l'échéance */
  --brique-c:#FAE6E0; /* la brique, claire */

  /* ---- 1.3 typographie : trois piles système, aucune police distante ---- */
  --s:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --n:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;

  /* ---- 1.4 échelle typographique : onze crans, aucune valeur hors échelle
       t0 étiquettes et sur-titres     t6 titre de pied de page
       t1 métadonnées, légendes        t7 titre de une repliée
       t2 navigation, interface        t8 chapitre de document
       t3 texte d'accompagnement       t9 titre de une
       t4 texte courant (= body)       t10 le grand chiffre
       t5 titre de carte                                                    */
  --t0:11.5px; --t1:12.5px; --t2:13.5px; --t3:15px;  --t4:17px;
  --t5:19px;   --t6:22px;   --t7:27px;   --t8:33px;  --t9:42px;  --t10:54px;

  /* ---- 1.5 grille ------------------------------------------------------ */
  --max:1240px;       /* largeur maximale de la colonne de page */
  --marge:24px;       /* marge latérale */
  --gut:26px;         /* gouttière entre colonnes */

  /* ---- 1.6 formes, ombres, transition ---------------------------------- */
  --r1:4px;           /* rayon serré : étiquettes, champs */
  --r2:10px;          /* rayon moyen : blocs, encarts */
  --r3:16px;          /* rayon large : cartes, plaques d'image */
  --o1:0 1px 2px rgba(22,19,15,.045);                                    /* posé */
  --o2:0 2px 4px rgba(22,19,15,.05),0 14px 30px -16px rgba(22,19,15,.20);/* levé */
  --tr:.17s cubic-bezier(.32,.72,.3,1);
}

/* Sur téléphone la grille se resserre : c'est la seule variable qui change. */
@media (max-width:680px){ :root{ --marge:16px; --gut:16px; } }


/* =============================================================================
   §2 — RÉINITIALISATION ET BASE
   ============================================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--pap);color:var(--encre);font-family:var(--s);
     font-size:var(--t4);line-height:1.62;overflow-x:hidden;
     -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}

/* utilitaires */
.r{font-family:var(--r)}                                  /* passer en romain */
.n{font-variant-numeric:tabular-nums lining-nums}         /* chiffres alignés */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--marge)}
.est-cache{display:none!important}                        /* masquage par le JS */


/* =============================================================================
   §3 — ACCESSIBILITÉ : un anneau de focus visible, identique partout
   ============================================================================= */

:focus-visible{outline:2px solid var(--vert);outline-offset:2px;border-radius:var(--r1)}
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--pap);
      padding:10px 16px;z-index:200;border-radius:0 0 var(--r1) 0}
.saut:focus{left:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* =============================================================================
   §4 — BARRE DE TÊTE (en-tête collant)
   Hauteur 60 px sur grand écran, 54 px sous 900 px : ces deux valeurs servent
   d'origine à tous les `top:` collants du site (§10, §14, §15).
   ============================================================================= */

.bar{position:sticky;top:0;z-index:60;background:rgba(251,250,247,.90);
     backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--filet)}
.bar .in{display:flex;align-items:center;gap:22px;height:60px;
         max-width:var(--max);margin:0 auto;padding:0 var(--marge)}

/* marque */
.marque{font-size:var(--t4);font-weight:700;letter-spacing:-.021em;white-space:nowrap;flex:none}
.marque b{color:var(--vert);font-weight:700}

/* navigation de rubriques */
.nav{display:flex;gap:19px;font-size:var(--t2);color:var(--encre2)}
.nav a{padding:4px 0;border-bottom:1.5px solid transparent;transition:var(--tr)}
.nav a:hover{color:var(--vert);border-bottom-color:var(--vert)}
.nav a[aria-current]{color:var(--encre);font-weight:600;border-bottom-color:var(--encre)}
.pousse{flex:1}

/* recherche : champ pilule qui s'élargit au focus */
.ch{position:relative;flex:none}
.ch input{width:184px;border:1px solid var(--filet);background:var(--blanc);border-radius:99px;
          padding:7px 13px 7px 32px;font-size:var(--t2);transition:var(--tr)}
.ch input:focus{outline:0;width:246px;border-color:var(--vert);box-shadow:0 0 0 3px var(--vert-c)}
.ch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
        width:14px;height:14px;stroke:var(--gris);fill:none;stroke-width:2;pointer-events:none}

/* bouton d'abonnement */
.sabo{background:var(--encre);color:var(--pap);padding:8px 15px;border-radius:99px;
      font-size:var(--t2);font-weight:600;transition:var(--tr);flex:none}
.sabo:hover{background:var(--vert);transform:translateY(-1px)}

/* Sur téléphone la navigation disparaît mais la recherche reste : avec 228 fiches
   à venir, chercher est le geste principal, pas un geste de grand écran. */
@media (max-width:900px){
  .nav{display:none}.bar .in{height:54px;gap:10px}
  .pousse{display:none}.ch{flex:1;min-width:0}
  .ch input{width:100%}.ch input:focus{width:100%}
  .marque{font-size:var(--t2)}
}
@media (max-width:400px){.sabo{display:none}}


/* =============================================================================
   §5 — TITRE DE SECTION (le filet qui traverse) et MÉTADONNÉES
   ============================================================================= */

.sh{display:flex;align-items:baseline;gap:13px;margin:0 0 17px;flex-wrap:wrap}
.sh h2{font-size:var(--t2);text-transform:uppercase;letter-spacing:.1em;font-weight:700;
       flex:0 1 auto;min-width:0}
.sh .fil{flex:1 1 30px;height:1px;background:var(--filet)}
.sh .cpt{font-size:var(--t2);color:var(--gris);flex:0 0 auto}
.sh .cpt b{color:var(--encre);font-weight:600}

/* sous-titre de lot : romain, filet gras dessous */
.sst{font-family:var(--r);font-size:var(--t6);font-weight:700;letter-spacing:-.02em;
     margin:30px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--encre)}
.sst:first-child{margin-top:2px}

/* barre de jour dans le fil */
.jour{display:flex;align-items:center;gap:14px;padding:24px 0 6px;font-size:var(--t1);
      text-transform:uppercase;letter-spacing:.11em;color:var(--gris);font-weight:700}
.jour::after{content:"";flex:1;height:1px;background:var(--filet)}

/* ligne de métadonnées : date · durée · nombre de sources, séparés par un point */
.meta{font-size:var(--t1);color:var(--gris);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.meta i{font-style:normal;width:3px;height:3px;border-radius:50%;background:var(--filet2);flex:none}


/* =============================================================================
   §6 — ÉTIQUETTE DE RUBRIQUE ET LES SIX FAMILLES CHROMATIQUES
   Chaque famille redéfinit --f (teinte) et --f-c (teinte claire). Tout
   composant placé dans un conteneur .f-* hérite de ces deux jetons : c'est le
   seul mécanisme de coloration par rubrique du système.
   ============================================================================= */

.et{display:inline-block;font-size:var(--t0);text-transform:uppercase;letter-spacing:.075em;
    font-weight:700;padding:3.5px 8px;border-radius:var(--r1);white-space:nowrap;
    background:var(--f-c);color:var(--f)}
.et.pleine{background:var(--f);color:#fff}

.f-terre  {--f:#8A5525;--f-c:#F2E9DE}
.f-feuille{--f:#2E6B3E;--f-c:#E4EEE4}
.f-ardoise{--f:#3A5B78;--f-c:#E4EAF0}
.f-grenat {--f:#98304E;--f-c:#F6E4E9}
.f-ocre   {--f:#8E6C10;--f-c:#F4EDDA}
.f-prune  {--f:#584878;--f-c:#EBE7F2}


/* =============================================================================
   §7 — GRILLE DE TUILES
   Trois colonnes, deux sous 1000 px, une sous 640 px. Aucun autre point de
   rupture n'existe pour la grille.
   ============================================================================= */

.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
@media (max-width:1000px){.grille{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grille{grid-template-columns:1fr}}


/* =============================================================================
   §8 — LES TROIS CARTES DU SYSTÈME
   .k  carte-article  : image en plaque + titre + chapeau + méta
   .kf carte-billet   : le chiffre tient la place de l'image, filet brique à gauche
   .kl carte-liste    : le fil compact, sans image
   ============================================================================= */

/* ---- 8.1 carte-article ---------------------------------------------------- */
.k{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r3);
   overflow:hidden;display:flex;flex-direction:column;transition:var(--tr);
   box-shadow:var(--o1);position:relative}
.k:hover{transform:translateY(-3px);box-shadow:var(--o2);border-color:var(--filet2)}
.k:active{transform:translateY(-1px)}
/* La plaque : les illustrations du site sont carrées et 8 sur 24 ont un fond
   très clair qui se dissoudrait dans le papier. La plaque tintée et le filet
   intérieur leur redonnent un bord, sans toucher à l'image. */
.k .pl{aspect-ratio:4/3;background:var(--pap2);overflow:hidden;position:relative;flex:none}
.k .pl::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(22,19,15,.055);
              border-radius:inherit;pointer-events:none}
.k .pl img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.32,.72,.3,1)}
.k:hover .pl img{transform:scale(1.035)}
.k .bd{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.k h3{font-family:var(--r);font-size:var(--t5);line-height:1.27;letter-spacing:-.012em;font-weight:700}
.k:hover h3{color:var(--vert)}
.k p{font-size:var(--t2);color:var(--encre2);line-height:1.48}
.k .meta{margin-top:auto;padding-top:3px}

/* ---- 8.2 carte-billet : le chiffre tient la place de l'image --------------- */
.kf{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r3);
    overflow:hidden;display:flex;flex-direction:column;transition:var(--tr);
    box-shadow:var(--o1);position:relative}
.kf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brique)}
.kf:hover{transform:translateY(-3px);box-shadow:var(--o2);border-color:var(--filet2)}
.kf .pl{aspect-ratio:4/3;background:var(--pap2);display:flex;flex-direction:column;
        justify-content:center;padding:18px 20px;border-bottom:1px solid var(--filet);flex:none}
.kf .num{font-family:var(--r);font-size:var(--t10);line-height:.92;letter-spacing:-.04em;
         font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.kf .num em{font-style:normal;font-size:.36em;letter-spacing:-.01em;color:var(--encre2);margin-left:.22em}
.kf .th{font-family:var(--r);font-size:clamp(22px,2.4vw,32px);line-height:1.12;
        letter-spacing:-.02em;font-weight:700}
.kf .sans{font-size:var(--t6);line-height:1.2;color:var(--encre2);font-style:italic}
.kf .vignb{margin:-18px -20px 0;aspect-ratio:16/10;overflow:hidden}
.kf .vignb img{width:100%;height:100%;object-fit:cover}
.kf .lg{font-size:var(--t1);color:var(--encre2);line-height:1.42;margin-top:9px}
.kf .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.kf h3{font-family:var(--r);font-size:var(--t5);line-height:1.27;letter-spacing:-.012em;font-weight:700}
.kf:hover h3{color:var(--vert)}
.kf .rg{font-size:var(--t0);text-transform:uppercase;letter-spacing:.09em;
        color:var(--brique);font-weight:700}
.kf .meta{margin-top:auto;padding-top:3px}

/* ---- 8.3 carte-liste : le fil compact, sans image -------------------------- */
.kl{display:grid;grid-template-columns:74px 1fr;gap:0 15px;padding:15px 0;
    border-bottom:1px solid var(--filet);transition:var(--tr);align-items:start}
.kl:hover{background:var(--pap2)}
.kl .vg{font-size:var(--t1);color:var(--gris);text-align:right;padding-top:2px;line-height:1.35}
.kl .vg b{display:block;color:var(--brique);font-weight:700;font-size:var(--t0);
          text-transform:uppercase;letter-spacing:.07em}
.kl h4{font-family:var(--r);font-size:var(--t4);line-height:1.32;font-weight:700}
.kl:hover h4{color:var(--vert)}
.kl .ss{font-size:var(--t1);color:var(--encre2);margin-top:3px;line-height:1.42}
.kl .ct{color:var(--brique);font-weight:700;font-variant-numeric:tabular-nums}


/* =============================================================================
   §9 — LA UNE (grand article mis en avant, image à gauche)
   Deux variantes du même objet : .une (accueil, système) et .grosse (rubrique).
   ============================================================================= */

.une{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center}
.une .pl{aspect-ratio:4/3;border-radius:var(--r3);overflow:hidden;background:var(--pap2);
         box-shadow:var(--o2);position:relative}
.une .pl::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(22,19,15,.07);
                border-radius:inherit}
.une .pl img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.32,.72,.3,1)}
.une:hover .pl img{transform:scale(1.025)}
.une h2{font-family:var(--r);font-size:var(--t9);line-height:1.1;letter-spacing:-.026em;
        margin:11px 0 11px;font-weight:700}
.une:hover h2{color:var(--vert)}
.une p{color:var(--encre2);font-size:var(--t3);line-height:1.55;margin-bottom:13px}
@media (max-width:900px){.une{grid-template-columns:1fr;gap:16px}.une h2{font-size:var(--t7)}}

/* variante « rubrique » : mêmes règles, titre légèrement plus petit */
.grosse{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center;margin:30px 0 6px}
.grosse .pl{aspect-ratio:4/3;border-radius:var(--r3);overflow:hidden;background:var(--pap2);
            box-shadow:var(--o2);position:relative}
.grosse .pl::after{content:"";position:absolute;inset:0;border-radius:inherit;
                   box-shadow:inset 0 0 0 1px rgba(22,19,15,.08)}
.grosse .pl img{width:100%;height:100%;object-fit:cover;
                transition:transform .5s cubic-bezier(.32,.72,.3,1)}
.grosse:hover .pl img{transform:scale(1.025)}
.grosse h2{font-family:var(--r);font-size:clamp(26px,3.8vw,40px);line-height:1.1;
           letter-spacing:-.024em;margin:11px 0;font-weight:700}
.grosse:hover h2{color:var(--vert)}
.grosse p{color:var(--encre2);font-size:var(--t3);line-height:1.55;margin-bottom:12px}
@media (max-width:900px){.grosse{grid-template-columns:1fr;gap:16px}}


/* =============================================================================
   §10 — BARRE DE FILTRES (pastilles) — collante sous la barre de tête
   ============================================================================= */

.fbar{position:sticky;top:60px;z-index:50;background:var(--pap);
      border-bottom:1px solid var(--filet)}
.frow{display:flex;gap:7px;overflow-x:auto;padding:10px var(--marge);scrollbar-width:none;
      max-width:var(--max);margin:0 auto}
.frow::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--filet);background:var(--blanc);color:var(--encre2);
      padding:6px 13px;border-radius:99px;font-size:var(--t2);transition:var(--tr);white-space:nowrap}
.chip:hover{border-color:var(--vert);color:var(--vert)}
.chip[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--pap);font-weight:600}
.chip .q{opacity:.55;margin-left:5px;font-variant-numeric:tabular-nums}
.sep{flex:0 0 auto;width:1px;background:var(--filet);margin:2px 5px}
@media (max-width:900px){.fbar{top:54px}}


/* =============================================================================
   §11 — ÉTAT VIDE ET ENCART D'AVERTISSEMENT
   Dire l'absence, ne pas la cacher.
   ============================================================================= */

.vide{border:1px dashed var(--filet2);border-radius:var(--r3);padding:36px 24px;
      text-align:center;color:var(--gris);font-size:var(--t3);background:var(--pap2)}
.vide b{display:block;color:var(--encre);font-size:var(--t5);font-family:var(--r);margin-bottom:6px}

.att{border:1px dashed var(--filet2);border-radius:var(--r2);background:var(--pap2);
     padding:15px 18px;font-size:var(--t2);color:var(--encre2);margin-top:14px}
.att b{color:var(--encre)}


/* =============================================================================
   §12 — PIED DE PAGE, FORMULAIRE D'ABONNEMENT, MENTION DE MESURE
   Le pied est sur papier creusé (--pap2), pas sur fond sombre.
   ============================================================================= */

.pied{border-top:1px solid var(--filet);margin-top:64px;background:var(--pap2)}
.pied .in{max-width:var(--max);margin:0 auto;padding:38px var(--marge) 46px;
          display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;
          font-size:var(--t2);color:var(--encre2)}
.pied h4{font-size:var(--t0);text-transform:uppercase;letter-spacing:.1em;
         color:var(--gris);margin-bottom:11px;font-weight:700}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.pied a:hover{color:var(--vert)}
.pied .mq{font-family:var(--r);font-size:var(--t6);font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.pied .mq b{color:var(--vert)}

/* le formulaire d'abonnement : une carte blanche dans le pied */
.lettre{border:1px solid var(--filet);background:var(--blanc);border-radius:var(--r2);padding:15px 16px}
.lettre form{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.lettre input{flex:1;min-width:150px;border:1px solid var(--filet);background:var(--pap);
              border-radius:var(--r1);padding:9px 11px;font-size:var(--t2)}
.lettre button{background:var(--vert);color:#fff;border-radius:var(--r1);padding:9px 15px;
               font-size:var(--t2);font-weight:700;transition:var(--tr)}
.lettre button:hover{background:var(--vert-f)}

/* bandeau bas : la mesure du corpus */
.mesure{border-top:1px solid var(--filet);font-size:var(--t1);color:var(--gris);line-height:1.7}
.mesure .in{max-width:var(--max);margin:0 auto;padding:16px var(--marge) 30px}
.mesure b{color:var(--encre);font-variant-numeric:tabular-nums;font-weight:700}

@media (max-width:820px){.pied .in{grid-template-columns:1fr;gap:24px}}


/* =============================================================================
   §13 — BOUTON « VOIR PLUS » / PAGINATION
   Le système ne connaît qu'un bouton de progression dans le fil : une pilule
   centrée. C'est lui qui portera la pagination Ghost.
   ============================================================================= */

.plus{display:block;margin:26px auto 0;border:1px solid var(--filet);background:var(--blanc);
      border-radius:99px;padding:11px 24px;font-size:var(--t2);font-weight:600;
      color:var(--encre2);transition:var(--tr)}
.plus:hover{border-color:var(--vert);color:var(--vert);box-shadow:var(--o1)}

/* variante sombre, empruntée à .ouvrir (fin de billet) */
.ouvrir{font-family:var(--s);font-size:var(--t2);font-weight:600;padding:8px 15px;
        border:1px solid var(--encre);border-radius:99px;background:transparent;transition:var(--tr)}
.ouvrir:hover{background:var(--encre);color:var(--pap)}


/* =============================================================================
   §14 — ACCUEIL : L'ÉDITION DU MATIN (maquette 01)
   La page est datée. Deux têtes à parité : le billet de campagne du jour et
   l'article du jour. Ni l'une ni l'autre n'est l'invitée de l'autre.
   ============================================================================= */

.edition{background:linear-gradient(180deg,var(--pap2),var(--pap));border-bottom:1px solid var(--filet)}
.edition .in{max-width:var(--max);margin:0 auto;padding:22px var(--marge) 30px}

/* la ligne de date, avec le compteur J−n */
.dateline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;
          font-size:var(--t1);text-transform:uppercase;letter-spacing:.11em;color:var(--gris);font-weight:700}
.dateline b{background:var(--encre);color:var(--pap);padding:4px 10px;border-radius:99px;letter-spacing:.07em}
.dateline .j{color:var(--brique);font-variant-numeric:tabular-nums}

/* les deux têtes à parité */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:stretch}
.tete{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r3);
      box-shadow:var(--o1);overflow:hidden;display:flex;flex-direction:column;transition:var(--tr)}
.tete:hover{box-shadow:var(--o2);border-color:var(--filet2);transform:translateY(-2px)}
.tete .ent{display:flex;justify-content:space-between;align-items:center;gap:10px;
           padding:9px 17px;font-size:var(--t0);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.tete.f .ent{background:var(--brique);color:#fff}   /* .f = fiche / billet de campagne */
.tete.a .ent{background:var(--encre);color:var(--pap)} /* .a = article */
.tete .co{padding:20px 22px 22px;display:flex;flex-direction:column;gap:11px;flex:1}
.tete .gros{font-family:var(--r);font-size:clamp(54px,7.4vw,92px);line-height:.9;
            letter-spacing:-.042em;font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.tete .gros em{font-style:normal;font-size:.3em;color:var(--encre2);margin-left:.2em;letter-spacing:-.01em}
.tete h2{font-family:var(--r);font-size:var(--t7);line-height:1.14;letter-spacing:-.022em;font-weight:700}
.tete:hover h2{color:var(--vert)}
.tete .src{font-size:var(--t1);color:var(--encre2);line-height:1.5}
.tete .src b{color:var(--encre);font-weight:700}
/* Ce que la fiche met en jeu. Sans ce paragraphe, la carte de gauche laissait
   250 px de blanc sous son titre pendant que celle de droite portait son
   chapeau : la parité annoncée était vraie en largeur et fausse à l'œil. */
.tete .enjeu{font-size:var(--t3);line-height:1.5;color:var(--encre2);max-width:46ch}
.tete .temps{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.tete .temps span{font-size:var(--t1);background:var(--pap2);color:var(--encre2);
                  padding:5px 10px;border-radius:99px;border:1px solid var(--filet)}
.tete .vign{aspect-ratio:16/10;background:var(--pap2);overflow:hidden;flex:none;position:relative}
.tete .vign img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.32,.72,.3,1)}
.tete:hover .vign img{transform:scale(1.03)}

@media (max-width:900px){.duo{grid-template-columns:1fr}}
@media (max-width:640px){.edition .in{padding:16px var(--marge) 22px}.tete .co{padding:16px 17px 18px}}


/* =============================================================================
   §15 — LE BANDEAU DE SÉRIE PRÉSIDENTIELLE ET SA JAUGE DE 228 JOURS
   La jauge est le seul endroit du site où l'on voit 228 jours d'un coup.
   ============================================================================= */

.serie{border:1px solid var(--filet);border-radius:var(--r3);background:var(--blanc);
       box-shadow:var(--o1);overflow:hidden}
.serie .hd{background:var(--encre);color:var(--pap);padding:12px 18px;display:flex;
           justify-content:space-between;align-items:center;gap:12px}
.serie .hd b{font-size:var(--t1);text-transform:uppercase;letter-spacing:.1em}
.serie .hd .j{font-size:var(--t2);color:#F0B9A8;font-variant-numeric:tabular-nums;font-weight:700}
.serie .co{padding:16px 18px}
.serie .lg{font-size:var(--t1);color:var(--gris);line-height:1.5}
.serie .lg b{color:var(--encre);font-weight:700}

/* la jauge : un trait par jour, vert = publié, brique = aujourd'hui */
.jauge{display:flex;gap:1.5px;flex-wrap:wrap;margin:4px 0 10px}
.jauge i{width:5px;height:13px;border-radius:1.5px;background:var(--pap3);display:block;flex:none}
.jauge i.f{background:var(--vert)}
.jauge i.a{background:var(--brique)}

/* variante « en ligne dans le fil » : en-tête sur papier, pas sur encre */
.serieligne{margin-top:var(--gut)}
.serieligne .serie .hd{background:transparent;color:var(--encre);border-bottom:1px solid var(--filet)}
.serieligne .serie .hd .j{color:var(--brique)}


/* =============================================================================
   §16 — EN-TÊTE DE THÉMATIQUE (maquette 05)
   Le bandeau prend la teinte de la famille : fond --f-c, trait bas --f.
   ============================================================================= */

.entete{background:var(--f-c);border-bottom:1px solid var(--filet);position:relative;overflow:hidden}
.entete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--f)}
.entete .in{max-width:var(--max);margin:0 auto;padding:34px var(--marge) 30px;position:relative}
.entete .sur{font-size:var(--t1);text-transform:uppercase;letter-spacing:.13em;font-weight:700;
             color:var(--f);margin-bottom:11px}
.entete h1{font-family:var(--r);font-size:clamp(30px,5vw,50px);line-height:1.08;
           letter-spacing:-.026em;max-width:22ch;font-weight:700}
.entete p{color:var(--encre2);font-size:var(--t3);max-width:64ch;margin-top:12px;line-height:1.55}

/* compteurs de rubrique : n articles, n billets, part du corpus */
.compteurs{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px;padding-top:17px;
           border-top:1px solid rgba(22,19,15,.10)}
.compteurs div{font-size:var(--t1);color:var(--encre2);text-transform:uppercase;
               letter-spacing:.09em;font-weight:700}
.compteurs b{display:block;font-family:var(--r);font-size:var(--t8);color:var(--encre);
             letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-transform:none;
             line-height:1.1}
.compteurs .br b{color:var(--brique)}

/* rubriques sœurs de la même famille */
.soeurs{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px;align-items:center}
.soeurs .lb{font-size:var(--t1);color:var(--gris);text-transform:uppercase;
            letter-spacing:.1em;font-weight:700}
.soeurs a{font-size:var(--t2);border:1px solid rgba(22,19,15,.14);background:rgba(255,255,255,.62);
          border-radius:99px;padding:5px 12px;color:var(--encre2);transition:var(--tr)}
.soeurs a:hover{border-color:var(--f);color:var(--f);background:#fff}


/* =============================================================================
   §17 — ARTICLE (maquette 04)
   Le corps d'article bascule en romain (--r) à 19,5 px. Colonne de texte
   bornée à 62 ch, sommaire collant à droite sur 300 px.
   ============================================================================= */

/* jauge de progression de lecture, 3 px en haut de fenêtre */
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--vert);z-index:80;
      transition:width .08s linear}

.art{font-family:var(--r);font-size:19.5px;line-height:1.66}

/* ---- 17.1 chapeau d'article ---------------------------------------------- */
.chap{max-width:var(--max);margin:0 auto;padding:30px var(--marge) 0}
.fila{font-family:var(--s);font-size:var(--t1);color:var(--gris);display:flex;gap:8px;
      align-items:center;flex-wrap:wrap;margin-bottom:16px}   /* fil d'Ariane */
.fila a:hover{color:var(--vert)}
.fila i{font-style:normal;color:var(--filet2)}
.art h1{font-family:var(--r);font-size:clamp(31px,5.6vw,56px);line-height:1.07;
        letter-spacing:-.024em;max-width:24ch;font-weight:700;margin-bottom:16px}
.art .chapo{font-size:clamp(18px,2.3vw,22px);color:var(--encre2);max-width:60ch;line-height:1.5}
.sig{font-family:var(--s);font-size:var(--t2);color:var(--gris);display:flex;gap:11px;
     align-items:center;flex-wrap:wrap;margin-top:20px;padding-top:15px;
     border-top:1px solid var(--filet)}                        /* signature */
.sig b{color:var(--encre);font-weight:700}
.sig i{font-style:normal;width:3px;height:3px;border-radius:50%;background:var(--filet2)}

/* ---- 17.2 grande image ---------------------------------------------------- */
/* L'illustration d'un article est carrée à la source ; en tête d'article on la
   présente en 16/9 recadré, et en entier dans les cartes. */
.grande{max-width:var(--max);margin:26px auto 0;padding:0 var(--marge)}
.grande figure{margin:0}
.grande .pl{aspect-ratio:16/9;border-radius:var(--r3);overflow:hidden;background:var(--pap2);
            box-shadow:var(--o2);position:relative}
.grande .pl::after{content:"";position:absolute;inset:0;border-radius:inherit;
                   box-shadow:inset 0 0 0 1px rgba(22,19,15,.09)}
.grande .pl img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
.grande figcaption{font-family:var(--s);font-size:var(--t1);color:var(--gris);margin-top:9px;
                   max-width:74ch}

/* ---- 17.3 corps : texte + flanc ------------------------------------------- */
.corps{max-width:var(--max);margin:0 auto;padding:0 var(--marge) 20px;
       display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 54px;align-items:start}
.texte{grid-column:1;padding-top:34px}
.texte h2{font-family:var(--r);font-size:clamp(22px,3vw,29px);line-height:1.2;
          letter-spacing:-.018em;font-weight:700;margin:38px 0 14px;max-width:34ch;
          scroll-margin-top:78px}
.texte p{margin-bottom:1.04em;max-width:62ch}
.texte h2+p{margin-top:0}
/* le paragraphe-clé : filet brique à gauche, gras, légèrement plus grand */
.texte p.cle{font-size:1.1em;border-left:3px solid var(--brique);padding-left:18px;
             color:var(--encre);font-weight:700}

/* ---- 17.4 encart « L'essentiel » ------------------------------------------ */
.ess{border:1px solid var(--filet);border-left:3px solid var(--vert);
     border-radius:0 var(--r2) var(--r2) 0;background:var(--blanc);padding:19px 22px;
     margin-bottom:30px;max-width:62ch}
.ess .t{font-family:var(--s);font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;
        color:var(--vert);font-weight:700;margin-bottom:11px}
.ess ol{font-family:var(--s);font-size:var(--t3);line-height:1.5;padding-left:19px;color:var(--encre2)}
.ess li{margin-bottom:8px}
.ess li::marker{color:var(--vert);font-weight:700}

/* ---- 17.5 sources --------------------------------------------------------- */
.srcs{font-family:var(--s);font-size:var(--t1);color:var(--gris);line-height:1.65;
      border-top:1px solid var(--filet);padding-top:16px;margin-top:34px;max-width:66ch}
.srcs .t{letter-spacing:.13em;text-transform:uppercase;font-weight:700;
         color:var(--encre);margin-bottom:9px}
.srcs ol{padding-left:19px}
.srcs li{margin-bottom:7px}
.srcs a{color:var(--vert);word-break:break-all}

/* ---- 17.6 flanc : sommaire collant ---------------------------------------- */
.flanc{grid-column:2;position:sticky;top:78px;align-self:start;padding-top:34px;font-family:var(--s)}
.flanc .bl{border:1px solid var(--filet);border-radius:var(--r2);background:var(--blanc);
           padding:14px 15px;margin-bottom:14px}
.flanc .t{font-size:var(--t0);letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
          font-weight:700;margin-bottom:10px}
.flanc ol{list-style:none;font-size:var(--t2)}
.flanc ol a{display:block;padding:6px 0 6px 12px;border-left:2px solid var(--filet);
            color:var(--gris);transition:var(--tr);line-height:1.35}
.flanc ol a:hover{color:var(--encre);border-left-color:var(--vert)}
.flanc ol a.on{color:var(--encre);border-left-color:var(--vert);font-weight:600}

/* ---- 17.7 suite : articles liés ------------------------------------------- */
.suite{max-width:var(--max);margin:0 auto;padding:34px var(--marge) 0;border-top:2px solid var(--encre)}

@media (max-width:1000px){.corps{grid-template-columns:1fr}.flanc{display:none}}
@media (max-width:560px){.art{font-size:18.5px}.grande .pl{aspect-ratio:4/3}}


/* =============================================================================
   §18 — BILLET DE CAMPAGNE ILLUSTRÉ (maquette 03)
   Le billet en quatre écrans : ouverture plein écran, lecture au rail, fin,
   panneau de navigation dans les 228.
   ============================================================================= */

.fiche{font-family:var(--r);font-size:19.5px;line-height:1.64}

/* ---- 18.1 écran 1 : le chiffre à gauche, l'illustration à droite ---------- */
.ouv{min-height:calc(100svh - 60px);display:grid;align-content:center;
     max-width:var(--max);margin:0 auto;padding:34px var(--marge) 30px;
     grid-template-columns:minmax(0,1fr) 356px;gap:0 52px;align-items:center}
.ouvT{grid-column:1}
.etiq{font-family:var(--s);font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;
      display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:var(--gris);font-weight:700}
.etiq .dom{background:var(--f);color:#fff;padding:4px 11px;border-radius:99px;letter-spacing:.08em}
.ouv .n{font-family:var(--r);font-size:clamp(78px,13.5vw,166px);line-height:.88;font-weight:700;
        letter-spacing:-.046em;margin:20px 0 16px;font-variant-numeric:lining-nums tabular-nums}
.ouv .n em{font-style:normal;font-size:.23em;letter-spacing:-.01em;color:var(--encre2);margin-left:.4em}
.ouv .leg{font-family:var(--s);font-size:14px;color:var(--encre2);max-width:44ch;
          line-height:1.55;margin-bottom:24px}
.ouv .leg b{color:var(--encre);font-weight:700}
.ouv h1{font-family:var(--r);font-size:clamp(29px,5.4vw,54px);line-height:1.08;
        letter-spacing:-.02em;max-width:18ch;margin-bottom:15px;font-weight:700}
.ouv .angle{color:var(--encre2);max-width:52ch;font-size:clamp(17px,2.1vw,20px);margin-bottom:26px}
.cue{font-family:var(--s);font-size:var(--t2);color:var(--gris);display:flex;gap:15px;
     align-items:center;flex-wrap:wrap;border-top:1px solid var(--filet);padding-top:15px}
.cue b{color:var(--encre);font-weight:700}
.cue .fl{font-size:19px;line-height:1;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---- 18.2 l'illustration : même format carré que celles des articles ------ */
.illu{grid-column:2;font-family:var(--s)}
.illu figure{margin:0}
.illu .pl{aspect-ratio:1/1;border-radius:var(--r3);overflow:hidden;background:var(--pap2);
          box-shadow:var(--o2);position:relative}
.illu .pl::after{content:"";position:absolute;inset:0;border-radius:inherit;
                 box-shadow:inset 0 0 0 1px rgba(22,19,15,.09)}
.illu .pl img{width:100%;height:100%;object-fit:cover}
.illu figcaption{font-size:var(--t0);color:var(--gris);line-height:1.5;margin-top:9px}

/* aperçu du plan et compteur J−n sous l'illustration */
.apercu{font-family:var(--s);margin-top:20px;border-top:1px solid var(--filet);padding-top:14px}
.apercu .t{font-size:var(--t0);letter-spacing:.13em;text-transform:uppercase;color:var(--gris);
           margin-bottom:9px;font-weight:700}
.apercu ol{list-style:none;font-size:14px}
.apercu li{display:flex;gap:11px;align-items:baseline;padding:5px 0}
.apercu li b{font-size:10.5px;color:#fff;background:var(--vert);width:19px;height:19px;
             border-radius:99px;display:grid;place-items:center;flex:none;font-variant-numeric:tabular-nums}
.apercu .cpt{border-top:1px solid var(--filet);padding-top:12px;margin-top:10px;
             font-size:var(--t1);color:var(--gris)}
.apercu .cpt b{display:block;font-size:25px;color:var(--brique);letter-spacing:-.02em;
               font-variant-numeric:tabular-nums;line-height:1.15;font-family:var(--r)}

/* ---- 18.3 lecture : rail numéroté à gauche, flux à droite ----------------- */
.lecture{max-width:var(--max);margin:0 auto;padding:0 var(--marge) 40px;
         display:grid;grid-template-columns:236px minmax(0,1fr);gap:0 54px}
.rail{grid-column:1;position:sticky;top:78px;align-self:start;font-family:var(--s);padding-top:42px}
.rail ol{list-style:none;margin-bottom:20px}
.rail li a{display:flex;gap:11px;align-items:baseline;color:var(--gris);font-size:var(--t2);
           padding:7px 0 7px 14px;border-left:2px solid var(--filet);margin-left:2px;transition:var(--tr)}
.rail li a b{font-variant-numeric:tabular-nums;font-size:var(--t0)}
.rail li a:hover{color:var(--encre2)}
.rail li.on a{color:var(--encre);border-left-color:var(--vert);font-weight:600}
.rail .reste{font-size:var(--t1);color:var(--gris);border-top:1px solid var(--filet);padding-top:13px}
.rail .reste b{display:block;font-size:23px;color:var(--encre);letter-spacing:-.02em;
               font-variant-numeric:tabular-nums;font-family:var(--r)}
.flux{grid-column:2}

/* les temps de la démonstration : une section numérotée par pastille */
.temps{border-top:1px solid var(--filet);padding:42px 0 6px;scroll-margin-top:72px}
.temps .rub{font-family:var(--s);font-size:var(--t1);letter-spacing:.15em;text-transform:uppercase;
            color:var(--vert);font-weight:700;margin-bottom:14px;display:flex;gap:11px;align-items:center}
.temps .rub i{font-style:normal;width:23px;height:23px;border-radius:99px;background:var(--vert);
              color:#fff;display:grid;place-items:center;font-size:var(--t0);letter-spacing:0}
.temps p{margin-bottom:1.02em;max-width:62ch}
.temps p.cle{font-size:1.09em;border-left:3px solid var(--brique);padding-left:18px}
.temps p.inter{font-family:var(--s);font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;
               color:var(--gris);font-weight:700;margin:26px 0 12px}   /* intertitre */
.notes{font-family:var(--s);font-size:var(--t1);color:var(--gris);border-top:1px solid var(--filet);
        padding-top:14px;margin-top:26px;line-height:1.7;max-width:66ch}
.notes b{color:var(--encre)}

/* ---- 18.4 fin de billet et annonce du lendemain --------------------------- */
.fin{border-top:2px solid var(--encre);margin-top:26px;padding-top:32px}
.fin .bravo{font-family:var(--s);font-size:var(--t2);letter-spacing:.11em;text-transform:uppercase;
            color:var(--gris);font-weight:700}
.fin .bravo b{color:var(--vert)}
.fin h2{font-family:var(--r);font-size:clamp(24px,3.6vw,32px);line-height:1.2;margin:8px 0 20px;
        max-width:24ch;font-weight:700}
.demain{border:2px solid var(--encre);border-radius:var(--r2);padding:19px 21px;background:var(--pap2)}
.demain .lab{font-family:var(--s);font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;
             color:var(--brique);font-weight:700}
.demain .t{font-family:var(--r);font-size:clamp(20px,3vw,26px);line-height:1.22;margin:7px 0 5px;font-weight:700}
.demain .m{font-family:var(--s);font-size:var(--t2);color:var(--gris)}

/* ---- 18.5 étapes sur téléphone -------------------------------------------- */
.step{position:fixed;top:54px;left:0;right:0;z-index:49;background:rgba(251,250,247,.94);
      backdrop-filter:blur(10px);border-bottom:1px solid var(--filet);font-family:var(--s);
      font-size:var(--t0);letter-spacing:.07em;text-transform:uppercase;opacity:0;
      pointer-events:none;transition:opacity .2s;display:none}
.step.vu{opacity:1;pointer-events:auto}
.step ol{display:flex;list-style:none;max-width:var(--max);margin:0 auto}
.step li{flex:1;text-align:center;padding:8px 2px 7px;color:var(--gris);border-bottom:2px solid transparent}
.step li.on{color:var(--vert);border-bottom-color:var(--vert);font-weight:700}

/* ---- 18.6 panneau latéral de navigation dans les 228 billets -------------- */
.voile{position:fixed;inset:0;background:rgba(22,19,15,.45);opacity:0;pointer-events:none;
       transition:opacity .22s;z-index:90}
.voile.on{opacity:1;pointer-events:auto}
.pan{position:fixed;top:0;right:0;bottom:0;width:min(470px,93vw);background:var(--pap);z-index:91;
     transform:translateX(101%);transition:transform .26s cubic-bezier(.3,.7,.3,1);
     display:flex;flex-direction:column;box-shadow:-14px 0 40px rgba(22,19,15,.16);font-family:var(--s)}
.pan.on{transform:none}
.pan .hd{padding:14px 18px;border-bottom:1px solid var(--filet);display:flex;
         justify-content:space-between;align-items:center;gap:12px}
.pan .hd b{font-size:var(--t3)}
.pan .hd small{display:block;color:var(--gris);font-size:var(--t1);font-weight:400}
.pan .hd button{font-size:24px;line-height:1;padding:2px 6px}
.pan .rech{padding:10px 18px;border-bottom:1px solid var(--filet)}
.pan .rech input{width:100%;border:1px solid var(--filet);background:var(--blanc);border-radius:99px;
                 padding:8px 14px;font-size:var(--t2)}
.pan .rech input:focus{outline:0;border-color:var(--vert);box-shadow:0 0 0 3px var(--vert-c)}
.pan .co{overflow-y:auto;padding:0 18px 28px}
.pan .rien{padding:30px 0;color:var(--gris);font-size:var(--t2);text-align:center}

/* une ligne du panneau */
.af{border-bottom:1px solid var(--filet);padding:13px 0;display:grid;
    grid-template-columns:30px 1fr;gap:0 12px;transition:var(--tr)}
.af:hover{background:var(--pap2)}
.af .nn{font-size:var(--t1);color:var(--gris);text-align:right;padding-top:3px}
.af .dd{font-size:var(--t0);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);display:block}
.af .dd b{color:var(--vert)}
.af .tt{font-family:var(--r);font-size:16.5px;line-height:1.3;display:block;margin:3px 0;font-weight:700}
.af .kk{font-size:var(--t1);color:var(--encre2);display:block}

@media (max-width:1000px){
  .ouv{grid-template-columns:1fr;gap:24px;align-content:start;padding-top:26px;min-height:0}
  .ouvT,.illu{grid-column:1}
  /* Sur téléphone l'illustration passe AVANT le chiffre : elle fait la vignette
     d'entrée, et le chiffre garde le plein écran juste en dessous. */
  .illu{order:-1;display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:start;
        margin-top:4px}
  .illu .pl{border-radius:var(--r2)}
  .illu figcaption{margin-top:0}
  .illu .apercu{grid-column:1/-1;margin-top:6px}
  .lecture{grid-template-columns:1fr}
  .rail{display:none}.flux{grid-column:1}
  .step{display:block}
}
@media (max-width:560px){.fiche{font-size:18.5px}.illu{grid-template-columns:96px 1fr}}


/* =============================================================================
   §19 — BLOCS DE DOCUMENTATION (maquette 00 seulement)
   Ces composants servent à présenter le système, pas à publier un journal.
   Ils ne sont PAS à greffer sur le thème Ghost. Conservés ici pour que le
   fichier reste une copie fidèle et vérifiable de la maquette 00.
   ============================================================================= */

.doc{max-width:1080px;margin:0 auto;padding:0 var(--marge)}
.hero{border-bottom:1px solid var(--filet);background:var(--pap2)}
.hero .in{max-width:1080px;margin:0 auto;padding:40px var(--marge) 34px}
.hero h1{font-family:var(--r);font-size:clamp(30px,4.4vw,44px);line-height:1.1;
         letter-spacing:-.026em;max-width:26ch;font-weight:700}
.hero p{color:var(--encre2);font-size:var(--t3);max-width:70ch;margin-top:12px}
.ch2{font-family:var(--r);font-size:var(--t8);letter-spacing:-.022em;font-weight:700;
     margin:52px 0 6px;padding-bottom:10px;border-bottom:2px solid var(--encre)}
.ch2 span{font-family:var(--s);font-size:var(--t2);color:var(--gris);font-weight:400;
          letter-spacing:0;display:block;margin-top:6px}
.ch3{font-size:var(--t2);text-transform:uppercase;letter-spacing:.1em;font-weight:700;
     color:var(--gris);margin:30px 0 12px}
.pr{font-size:var(--t3);color:var(--encre2);max-width:74ch;margin:12px 0 4px}
/* Un tableau de cinq colonnes ne tient pas sur 390 px : il défile dans son
   propre cadre, et c'est le cadre qui borne la page. */
.tbl{overflow-x:auto;margin:10px 0;border-radius:var(--r1)}
table{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--t2)}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--filet);vertical-align:middle}
th{font-size:var(--t0);text-transform:uppercase;letter-spacing:.09em;color:var(--gris)}
td code{font-family:var(--n);font-size:var(--t1)}
.pastille{display:inline-block;width:15px;height:15px;border-radius:4px;margin-right:9px;
          vertical-align:-3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.jug{font-size:var(--t0);font-weight:700;padding:2.5px 8px;border-radius:99px}
.jug.ok{background:var(--vert-c);color:var(--vert-f)}
.jug.ko{background:var(--brique-c);color:#8E2E15}
.fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.fam{border:1px solid var(--filet);border-radius:var(--r2);padding:11px 12px;background:var(--blanc);
     display:grid;grid-template-columns:22px 22px 1fr;gap:4px 9px;align-items:center}
.fam .bl{width:22px;height:36px;border-radius:4px;grid-row:span 2}
.fam b{font-size:var(--t3);text-transform:capitalize}
.fam code{font-family:var(--n);font-size:10.5px;color:var(--gris);grid-column:3}
.fam .rt{grid-column:1/-1;font-size:var(--t0);color:var(--f);font-weight:700}
.fam .ru{grid-column:1/-1;font-size:var(--t0);color:var(--gris);line-height:1.45}
.ec{display:grid;grid-template-columns:78px 62px 168px 1fr;gap:12px;align-items:baseline;
    padding:7px 0;border-bottom:1px solid var(--filet)}
.ec code{font-family:var(--n);font-size:var(--t1)}
.ec .px{font-size:var(--t1);color:var(--gris)}
.ec .ro{font-size:var(--t1);color:var(--gris)}
.ec .dm{font-family:var(--r);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.gr{border:1px dashed var(--filet2);border-radius:var(--r2);background:var(--pap2);padding:14px;
    display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}
.gr i{height:52px;background:var(--vert-c);border:1px solid #BBD8CC;border-radius:3px;display:block}
.gr i.t{grid-column:span 4;background:var(--blanc);border-color:var(--filet)}
.cadre{border:1px solid var(--filet);border-radius:var(--r3);background:var(--pap2);
       padding:18px;margin:12px 0 4px}
.cadre .lab{font-size:var(--t0);text-transform:uppercase;letter-spacing:.09em;color:var(--gris);
            font-weight:700;margin-bottom:11px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.etats{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.etat{border:1px solid var(--filet);border-radius:var(--r2);background:var(--blanc);padding:12px}
.etat .t{font-size:var(--t0);text-transform:uppercase;letter-spacing:.09em;color:var(--gris);
         font-weight:700;margin-bottom:9px}
.etat .d{font-size:var(--t1);color:var(--encre2);margin-top:9px;line-height:1.5}
/* les mêmes composants, figés dans chaque état : on montre, on ne décrit pas */
.demo-k{border:1px solid var(--filet);border-radius:var(--r2);padding:11px 13px;background:var(--blanc);
        font-family:var(--r);font-size:var(--t4);font-weight:700;box-shadow:var(--o1);transition:var(--tr)}
.demo-k.sur{transform:translateY(-3px);box-shadow:var(--o2);border-color:var(--filet2);color:var(--vert)}
.demo-k.act{transform:translateY(-1px);box-shadow:var(--o1)}
.demo-k.foc{outline:2px solid var(--vert);outline-offset:2px}
.regle{border-left:3px solid var(--vert);background:var(--vert-c);border-radius:0 var(--r2) var(--r2) 0;
       padding:14px 18px;margin:14px 0;font-size:var(--t3);color:#123F34}
.regle b{font-weight:700}
.non{border-left-color:var(--brique);background:var(--brique-c);color:#7C2A12}
@media (max-width:820px){.deux,.trois{grid-template-columns:1fr}
 .gr{grid-template-columns:repeat(4,1fr)}.gr i.t{grid-column:span 2}
 .ec{grid-template-columns:70px 56px 1fr;}.ec .ro{display:none}}

/* ============================ FIN DU SYSTÈME ============================== */


/* =============================================================================
   §20 — GREFFE : le thème de production parle au système 2027
   -----------------------------------------------------------------------------
   Les gabarits gardent leurs classes (.article-card, .card-image, .bd…) :
   on ne touche pas à leur HTML, on leur donne le style du système. Ajouté le
   28/08/2026 pour la bascule du 1er septembre.
   ============================================================================= */

/* ---- 20.1 neutralisation des six règles fausses du thème -------------------
   `.category-badge[data-category*="ia"]` capturait aussi logistique-transport
   et democratie-gouvernance. On remet l'étiquette à plat avant de la
   repeindre par famille. */
.category-badge[data-category] {
  background: var(--f-c, var(--pap2));
  color: var(--f, var(--encre2));
}

/* ---- 20.2 les familles, portées par l'étiquette et héritées par la carte -- */
.category-badge { --f: var(--encre2); --f-c: var(--pap2) }

.category-badge[data-category="economie-developpement"],
.article-card:has(.category-badge[data-category="economie-developpement"]),
.category-badge[data-category="innovation-sociale"],
.article-card:has(.category-badge[data-category="innovation-sociale"])
                                                    { --f:#8A5525; --f-c:#F2E9DE }

.category-badge[data-category="environnement-biodiversite"],
.category-badge[data-category="energie-climat"],
.article-card:has(.category-badge[data-category="environnement-biodiversite"]),
.article-card:has(.category-badge[data-category="energie-climat"])
                                                    { --f:#2E6B3E; --f-c:#E4EEE4 }

.category-badge[data-category="logistique-transport"],
.category-badge[data-category="science-technologie"],
.category-badge[data-category="ia-travail"],
.article-card:has(.category-badge[data-category="logistique-transport"]),
.article-card:has(.category-badge[data-category="science-technologie"]),
.article-card:has(.category-badge[data-category="ia-travail"])
                                                    { --f:#3A5B78; --f-c:#E4EAF0 }

.category-badge[data-category="sante-mondiale"],
.article-card:has(.category-badge[data-category="sante-mondiale"])
                                                    { --f:#98304E; --f-c:#F6E4E9 }

.category-badge[data-category="education-mobilite-sociale"],
.category-badge[data-category="culture-idees"],
.category-badge[data-category="sport"],
.category-badge[data-category="demographie-societe"],
.article-card:has(.category-badge[data-category="education-mobilite-sociale"]),
.article-card:has(.category-badge[data-category="culture-idees"]),
.article-card:has(.category-badge[data-category="sport"]),
.article-card:has(.category-badge[data-category="demographie-societe"])
                                                    { --f:#8E6C10; --f-c:#F4EDDA }

.category-badge[data-category="democratie-gouvernance"],
.category-badge[data-category="lectures"],
.article-card:has(.category-badge[data-category="democratie-gouvernance"]),
.article-card:has(.category-badge[data-category="lectures"])
                                                    { --f:#584878; --f-c:#EBE7F2 }

/* ---- 20.3 réponse aux !important du thème ---------------------------------
   Quatre déclarations en !important (pied de page, accent rose) battent
   toute règle normale : on leur répond dans leur langue. Les autres
   !important du thème sont des `display:none` voulus (Portal Ghost, blocs
   d'auteur) et sont laissés en place. */
.footer-link { color: var(--gris) !important }
.footer-link:hover { color: var(--vert) !important }

/* ---- 20.4 la lettre : une seule définition, celle du système -------------- */
.newsletter-cta,
.newsletter-cta-inner {
  background: var(--pap2);
  background-image: none;
  color: var(--encre);
  border: 1px solid var(--filet);
  border-radius: 0;
}
.newsletter-cta-btn {
  background: var(--vert);
  color: var(--blanc);
  border: 0;
  border-radius: 0;
  font-family: var(--s);
  letter-spacing: .04em;
  padding: 12px 20px;
  cursor: pointer;
}
.newsletter-cta-btn:hover { background: var(--encre) }
.newsletter-cta input[type="text"],
.newsletter-cta input[type="email"] {
  padding: 11px 14px;
  border: 1px solid var(--filet2);
  border-radius: 0;
  font-size: 15px;
  font-family: var(--s);
  background: var(--blanc);
  color: var(--encre);
}
.newsletter-cta input[type="text"] { width: 140px }
.newsletter-cta input[type="email"] { flex: 1 }

/* ---- 20.5 le message d état vide des pages de rubrique -------------------- */
#no-articles-msg {
  text-align: center;
  padding: 2rem;
  color: var(--gris);
  font-family: var(--s);
}

/* ---- 20.6 accueil « édition du matin » : les familles portées par data-cat --
   Les cartes de la homepage 2027 (.tete, .kf, .k, .kl, .jour) n'ont pas
   d'étiquette .category-badge : elles déclarent leur rubrique en data-cat.
   Même table de correspondance rubrique → famille qu'en 20.2. Ajouté le
   01/09/2026 pour le portage de la maquette 01. */
[data-cat] { --f: var(--encre2); --f-c: var(--pap2) }

[data-cat="economie-developpement"],
[data-cat="innovation-sociale"]     { --f:#8A5525; --f-c:#F2E9DE }

[data-cat="environnement-biodiversite"],
[data-cat="energie-climat"]         { --f:#2E6B3E; --f-c:#E4EEE4 }

[data-cat="logistique-transport"],
[data-cat="science-technologie"],
[data-cat="ia-travail"]             { --f:#3A5B78; --f-c:#E4EAF0 }

[data-cat="sante-mondiale"]         { --f:#98304E; --f-c:#F6E4E9 }

[data-cat="education-mobilite-sociale"],
[data-cat="culture-idees"],
[data-cat="sport"],
[data-cat="demographie-societe"]    { --f:#8E6C10; --f-c:#F4EDDA }

[data-cat="democratie-gouvernance"],
[data-cat="lectures"],
[data-cat="presidentielle-2027"]    { --f:#584878; --f-c:#EBE7F2 }


/* =============================================================================
   §21 — MOBILE « DEUX TEMPS »
   Direction arbitrée par l'éditeur le 01/09/2026, après trois maquettes.

   Le constat qui l'a motivée : sous 760 px, le site n'était pas conçu, il était
   rétréci. L'échelle typographique était figée en pixels — le titre de une
   valait 42 px sur un écran de 390 comme sur un écran de 1440, alors que les
   titres du journal font 53 à 91 caractères. Les treize points de rupture
   existants ne faisaient qu'une chose : replier les grilles sur une colonne.
   Rien n'était pensé pour le pouce.

   RÈGLE DE CETTE SECTION : tout est sous `@media (max-width:760px)`, sauf trois
   déclarations de neutralisation ci-dessous. Le bureau ne bouge pas.
   ============================================================================= */

/* Neutralisation au-dessus de 760 px : les objets mobiles n'existent pas, et
   l'enveloppe des têtes est transparente pour que la grille `.duo` garde ses
   deux cartes comme enfants directs. */
.dt-seg{display:none}
.dt-billets{display:none}
.barre-mob{display:none}
.dt-tete{display:contents}
.dt-tete > .tete{height:100%}   /* filet si display:contents n'est pas honoré */

@media (max-width:760px){

  /* ---- 21.1 l'échelle respire au lieu d'être figée ---------------------- */
  /* Onze crans, mais trois seulement changent : ceux des titres, les seuls qui
     cassaient. Un titre de 88 caractères doit tenir en trois lignes. */
  :root{
    --marge:18px;   /* 24 px mangeaient 12 % d'un écran de 390 */
    --gut:16px;
    --t7:clamp(22px,6.0vw,27px);
    --t8:clamp(25px,6.8vw,31px);
    --t9:clamp(27px,7.4vw,33px);
  }

  /* ---- 21.2 les deux volets -------------------------------------------- */
  /* `display:contents` aplatit l'édition : les deux têtes deviennent des blocs
     de premier rang, sans rien déplacer dans le document. Le bureau ne voit
     pas cette règle. */
  .dt{display:flex;flex-direction:column}
  .edition{background:none;border-bottom:0;display:contents}
  .edition > .in{display:contents}
  .duo{display:contents}
  .dt-tete{display:block;margin:0 var(--marge)}
  .dateline{margin:14px var(--marge) 12px}

  /* Un seul volet visible à la fois. Le sélecteur porte l'état sur `.dt`. */
  .dt[data-volet="campagne"] [data-dt="j"],
  .dt[data-volet="journal"]  [data-dt="c"]{display:none}
  .dt-fil-billets{display:none}   /* la copie du bureau, dans le fil */
  .dt-billets{display:block;margin-top:18px}
  .dt-vide{padding:0 var(--marge);font-size:var(--t3);line-height:1.55;
           color:var(--encre2)}

  /* ---- 21.3 le sélecteur ------------------------------------------------ */
  /* Collé sous l'en-tête (54 px sur mobile, cf. §10). Deux moitiés strictement
     égales : c'est la promesse de la direction, elle doit se voir. */
  .dt-seg{display:grid;grid-template-columns:1fr 1fr;position:sticky;top:54px;
          z-index:55;margin:10px var(--marge) 0;padding:4px;border-radius:12px;
          background:var(--pap2);border:1px solid var(--filet)}
  .dt-glis{position:absolute;top:4px;left:4px;width:calc(50% - 4px);
           height:calc(100% - 8px);background:var(--blanc);border-radius:9px;
           box-shadow:var(--o1),0 6px 14px -8px rgba(22,19,15,.22);
           transition:transform .26s cubic-bezier(.32,.72,.3,1)}
  .dt[data-volet="journal"] .dt-glis{transform:translateX(100%)}
  .dt-tab{position:relative;z-index:2;min-height:44px;border:0;background:none;
          display:flex;align-items:center;justify-content:center;gap:7px;
          white-space:nowrap;cursor:pointer;color:var(--gris);
          font-family:var(--s);font-size:var(--t3);font-weight:600;
          letter-spacing:-.012em}
  .dt-tab[aria-selected="true"]{color:var(--encre)}
  .dt-pt{width:6px;height:6px;border-radius:50%;background:var(--brique)}
  .dt-pt-j{background:var(--vert)}
  .dt-cpt{font-family:var(--n);font-size:var(--t0);color:var(--gris);
          font-variant-numeric:tabular-nums}

  /* La barre de filtres se cale sous l'en-tête ET sous le sélecteur. */
  .fbar{top:calc(54px + 62px)}

  /* ---- 21.4 les têtes, à l'échelle du pouce ----------------------------- */
  .tete{border-radius:var(--r2)}
  .tete .vign{aspect-ratio:16/9}
  .tete .co{padding:15px 16px 17px;gap:9px}
  .tete h2{font-size:var(--t8);line-height:1.16}
  .tete .ent{padding:8px 14px}
  .serieligne{margin-top:16px}

  /* ---- 21.5 cibles tactiles -------------------------------------------- */
  /* 44 px est le minimum d'une cible au doigt. Les pastilles de filtre et les
     liens de section passaient sous 20 px. On les remonte sans décaler la
     ligne, par des marges négatives. */
  .chip{min-height:40px;padding:0 14px;display:inline-flex;align-items:center}
  .frow{padding:8px var(--marge);gap:8px}
  .kl{padding:14px 0}
  .kl h4{font-size:var(--t4);line-height:1.3}
  .sh h2{font-size:var(--t6)}

  /* ---- 21.6 la barre d'onglets du bas ----------------------------------- */
  /* La navigation principale descend dans la zone du pouce. Marge de sécurité
     des écrans à encoche comprise. */
  .barre-mob{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;
             left:0;right:0;bottom:0;z-index:90;
             background:rgba(251,250,247,.94);
             -webkit-backdrop-filter:saturate(150%) blur(14px);
             backdrop-filter:saturate(150%) blur(14px);
             border-top:1px solid var(--filet);
             padding-bottom:env(safe-area-inset-bottom,0px)}
  .barre-mob a{display:flex;flex-direction:column;align-items:center;
               justify-content:center;gap:4px;min-height:54px;color:var(--gris);
               font-family:var(--s);font-size:var(--t0);font-weight:600;
               text-decoration:none}
  .barre-mob a[aria-current]{color:var(--vert)}
  .barre-mob svg{width:22px;height:22px;stroke-width:1.8;fill:none;
                 stroke:currentColor}
  /* le pied de page ne doit pas finir sous la barre */
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}

  /* ---- 21.7 le mouvement, une fois, pas trois -------------------------- */
  .tete:hover{transform:none;box-shadow:var(--o1)}
  .tete:hover .vign img{transform:none}

  /* ---- 21.8 quarante-quatre pixels, partout où l'on touche ------------- */
  /* Mesuré sur la page servie à 390 px : vingt liens sous 44 px, tous
     antérieurs à cette refonte. En dessous de 44 px on vise et on rate.
     Les liens en ligne prennent leur hauteur par marges négatives, pour que
     la ligne de texte reste où elle est. */
  .jdp-header .site-logo{min-height:44px;display:inline-flex;align-items:center}
  .lang-switcher .lang-link{min-height:44px;min-width:40px;display:inline-flex;
                            align-items:center;justify-content:center;padding:0 7px}
  .mobile-menu-toggle{min-width:44px;min-height:44px;display:inline-flex;
                      align-items:center;justify-content:center}
  .serie .lg a{display:inline-flex;align-items:center;min-height:44px;
               margin:-14px 0;padding:0 2px}
  .footer-col ul li a,
  .footer-link{display:inline-flex;align-items:center;min-height:44px}
  .footer-col ul li{line-height:1}

  /* Les filtres du fil : 40 px au bureau, 44 px sous le pouce. */
  .fbar .chip{min-height:44px}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .dt-glis{transition:none}
}


/* =============================================================================
   §22 — GREFFE : pages de post et de thématique (maquettes 03, 04, 05)
   -----------------------------------------------------------------------------
   Les gabarits post.hbs et tag.hbs portent désormais les classes du système
   (.art, .fiche, .entete, .grille…). Cette section règle ce que les §16 à 18
   ne couvrent pas : le contenu Ghost dans le corps (.texte/.flux), les blocs
   « L'essentiel » et « Sources » sans toucher aux articles publiés, la ligne
   d'outils (partage + lecture audio) reprise du thème hérité, la fin de
   billet et la pagination. Ajouté le 01/09/2026.
   ============================================================================= */

/* ---- 22.1 le contenu Ghost dans le corps ----------------------------------
   `.article-body` est conservé sur le conteneur du corps (la lecture audio
   de main.js le cherche) : on neutralise ici ce que le thème hérité y
   appliquait, pour que .texte et .flux commandent. */
.article-body{font:inherit;color:inherit}
.texte a,.flux a{color:var(--vert);text-decoration:underline;
                 text-underline-offset:3px;text-decoration-color:var(--filet2)}
.texte a:hover,.flux a:hover{text-decoration-color:var(--vert)}
.texte strong,.flux strong{font-weight:700}
.texte img,.flux img{border-radius:var(--r2)}
.texte figure,.flux figure{margin:26px 0}
.texte figcaption,.flux figcaption{font-family:var(--s);font-size:var(--t1);
    color:var(--gris);margin-top:9px;max-width:74ch}
.texte blockquote,.flux blockquote{border-left:3px solid var(--filet2);
    padding-left:18px;color:var(--encre2);font-style:italic;margin:0 0 1.04em;
    max-width:62ch}
.texte hr,.flux hr{border:0;border-top:1px solid var(--filet);margin:34px 0}
.texte ul,.texte ol,.flux ul,.flux ol{margin:0 0 1.04em;padding-left:22px;
    max-width:62ch}
.texte li,.flux li{margin-bottom:6px}
.kg-card{margin:26px 0}
.kg-image img,.kg-card img{width:100%}

/* ---- 22.2 « L'essentiel » et « Sources », sans toucher au contenu ---------
   Dans les articles publiés, ces deux blocs sont un h2 suivi d'une liste
   (ul pour l'essentiel, ol pour les sources) : le style se pose en CSS,
   comme le prévoit la note de direction §5. Le h2 devient l'étiquette du
   bloc ; sans JavaScript tout reste lisible. */
.texte h2:has(+ ul),.texte h2:has(+ ol){font-family:var(--s);
    font-size:var(--t1);letter-spacing:.13em;text-transform:uppercase;
    max-width:none}
.texte h2:has(+ ul){color:var(--vert);margin-bottom:11px}
.texte h2:has(+ ol){color:var(--encre);margin-bottom:9px}
.texte h2 + ul{border:1px solid var(--filet);border-left:3px solid var(--vert);
    border-radius:0 var(--r2) var(--r2) 0;background:var(--blanc);
    padding:19px 22px 19px 41px;margin-bottom:30px;font-family:var(--s);
    font-size:var(--t3);line-height:1.5;color:var(--encre2)}
.texte h2 + ul li{margin-bottom:8px}
.texte h2 + ul li::marker{color:var(--vert);font-weight:700}
.texte h2 + ol{font-family:var(--s);font-size:var(--t1);color:var(--gris);
    line-height:1.65;border-top:1px solid var(--filet);padding:16px 0 0 19px;
    margin-top:34px;max-width:66ch}
.texte h2 + ol li{margin-bottom:7px}
.texte h2 + ol a{color:var(--vert);word-break:break-all}

/* ---- 22.3 les h2 du flux (billet), avec ou sans le script ----------------
   Sans JavaScript, un h2 marque simplement une section. Le script y ajoute
   la pastille numérotée .numsec et l'ancre du rail. */
.flux h2{font-family:var(--r);font-size:clamp(22px,3vw,29px);line-height:1.2;
    letter-spacing:-.018em;font-weight:700;margin:42px 0 14px;max-width:34ch;
    padding-top:38px;border-top:1px solid var(--filet);scroll-margin-top:78px;
    display:flex;gap:11px;align-items:baseline;flex-wrap:wrap}
.flux h2:first-child{border-top:0;padding-top:0;margin-top:0}
.numsec{font-family:var(--s);font-style:normal;width:23px;height:23px;flex:none;
    border-radius:99px;background:var(--vert);color:#fff;display:inline-grid;
    place-items:center;font-size:var(--t0);letter-spacing:0;font-weight:700;
    transform:translateY(-2px)}
.flux p{margin-bottom:1.02em;max-width:62ch}

/* ---- 22.4 la ligne d'outils : partage + lecture audio ---------------------
   Même balisage que le thème hérité (les id et classes sont ceux de
   main.js), redressé dans le système : filets du journal, pilules, romain
   nulle part. */
.outils{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
    margin-top:20px;padding-top:15px;border-top:1px solid var(--filet);
    font-family:var(--s)}
.outils .share-bar{display:flex;align-items:center;gap:10px;padding:0;
    border:0;margin:0}
.outils .share-label{font-size:var(--t0);letter-spacing:.1em;color:var(--gris)}
.outils .share-buttons{display:flex;gap:6px}
.outils .share-btn{width:34px;height:34px;border-radius:99px;
    border:1px solid var(--filet);background:var(--blanc);color:var(--encre2);
    transition:var(--tr)}
.outils .share-btn:hover{background:var(--encre);border-color:var(--encre);
    color:var(--pap)}
.outils .share-btn svg{width:16px;height:16px}
.outils .tts-player{margin:0}
.outils .tts-inner{gap:9px;padding:6px 12px;background:var(--blanc);
    border:1px solid var(--filet);border-radius:99px}
.outils .tts-icon{font-size:13px}
.outils .tts-label{font-size:var(--t0);letter-spacing:.1em;color:var(--gris)}
.outils .tts-play-btn{width:28px;height:28px;border-color:var(--filet);
    background:var(--blanc);color:var(--encre)}
.outils .tts-play-btn:hover{background:var(--vert);color:#fff}
.outils .tts-play-btn svg{width:12px;height:12px}
.outils .tts-progress{width:64px;height:3px;background:var(--pap3);
    border-radius:2px}
.outils .tts-progress-bar{background:var(--vert)}
.outils .tts-time{font-family:var(--n);font-size:var(--t0);color:var(--gris);
    min-width:34px}
.outils .tts-lang{font-size:var(--t0);padding:3px 6px;border-color:var(--filet);
    border-radius:var(--r1);color:var(--encre2)}
@media (max-width:560px){.outils .tts-progress{width:40px}}

/* ---- 22.5 fin de billet : la colonne du texte, pas celle du rail --------- */
.fin-zone{padding-bottom:10px}
.fin-col{grid-column:2}
@media (max-width:1000px){.fin-col{grid-column:1}}
.fin .demain{display:block;color:inherit}
.fin a.demain:hover .t{color:var(--vert)}

/* ---- 22.6 le flanc d'article : la ligne série sous la jauge --------------- */
.flanc-serie{font-size:var(--t1);color:var(--gris);line-height:1.5;margin-top:10px}
.flanc-serie b{color:var(--brique);font-variant-numeric:tabular-nums}
.flanc-serie a{color:var(--vert)}

/* ---- 22.7 pagination des thématiques : les pilules du système ------------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:16px;
    margin:30px 0 6px;font-family:var(--s)}
.pagination-link{display:inline-block;border:1px solid var(--filet);
    background:var(--blanc);border-radius:99px;padding:9px 18px;
    font-size:var(--t2);font-weight:600;color:var(--encre2);transition:var(--tr)}
.pagination-link:hover{border-color:var(--vert);color:var(--vert)}
.pagination-info{font-size:var(--t1);color:var(--gris)}

/* ---- 22.8 la page de thématique ------------------------------------------- */
#corps .grille{margin-bottom:6px}
#tag-articles-grid .kf .et,#tag-articles-grid .k .et{align-self:flex-start}

/* ---- 22.9 ce qui disparaît -------------------------------------------------
   Le gabarit ne sert plus le bouton « Retour » ni la seconde barre de
   partage : le fil d'Ariane et la ligne d'outils tiennent lieu des deux.
   Le bloc #related-articles du thème hérité (jamais affiché, faute de clé
   d'API dans le DOM) est remplacé par la suite côté serveur. */