/* =========================================================================
   NOVA POTENTIEL · feuille unique, page d'accueil et page article
   Transposition fidèle de la maquette Figma « Hole » : mêmes sections, même
   géométrie, mêmes effets de verre. Le contenu et les couleurs changent.
   Sections 01 à 08 : index.html. Section 09 : article.html, qui réutilise
   tout le vocabulaire des composants ci-dessous.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Le texte courant est en Urbanist (voir --f-text). Les titres sont sur la pile
   --f-title : Helvetica Neue si la machine du visiteur l'a, Switzer sinon (voir
   tokens.css). Leur graisse passe par --fw-title et --fw-title-sm, jamais par un
   700 ou un 800 en dur : la pile de repli n'a que du 400 et du 500, et le
   navigateur en synthétiserait un faux gras. */
h1, h2, h3, h4, h5, h6 { font-family: var(--f-title); font-weight: var(--fw-title); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--jade-deep); outline-offset: 3px; border-radius: 4px; }

.shell {
  width: 100%;
  max-width: calc(var(--grid-max) + var(--grid-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: 12px 20px; z-index: 200; border-radius: var(--r-chip); }
.skip:focus { left: 16px; top: 16px; }

/* =========================================================================
   COMPOSANTS REPRIS DE LA MAQUETTE
   ========================================================================= */

/* --- Badge / chip pilule (×11 dans la maquette) --------------------------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 var(--s-4);
  border-radius: var(--r-chip);
  font-size: var(--t-body); font-weight: 700;
  background: var(--ink); color: var(--paper);
  white-space: nowrap;
}
.badge--up { text-transform: uppercase; letter-spacing: .02em; }
.badge--accent { background: var(--jade); color: var(--ink); }
.badge--ghost { background: var(--surface); color: var(--ink); font-weight: 500; }
.badge--glass { background: rgba(255,255,255,.14); color: var(--on-night); border: 1px solid rgba(255,255,255,.28); font-weight: 500; }

/* Sur fond nuit la pastille noire disparaîtrait : elle s'inverse. */
.latest .badge { background: var(--paper); color: var(--ink); }
.latest .badge--ghost { background: rgba(255,255,255,.12); color: var(--on-night); }

/* --- Chip horaire : icône + valeur (×4) ----------------------------------- */
.tchip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: 24px; padding: 0 var(--s-2);
  border-radius: var(--r-chip);
  background: var(--surface); color: var(--ink);
  font-size: var(--t-body); font-weight: 500; white-space: nowrap;
}
.tchip svg { width: 16px; height: 16px; }
.entry__facts .tchip { background: rgba(255,255,255,.12); color: var(--on-night); }

/* --- Bouton pilule (×4) : chausson 6px + pastille ronde 44px -------------- */
.pill {
  /* Couleur qui se propage au survol = celle du fond de la pastille, et
     couleur que prennent texte + flèche une fois le bouton rempli. Chaque
     variante réécrit ce couple, le reste de l'animation est mutualisé. */
  --pill-spread:    var(--jade);
  --pill-spread-fg: var(--ink);
  --pill-disc:      var(--ctl-btn);   /* diamètre du disque qui se propage */
  position: relative;
  isolation: isolate;   /* pour que le disque en z-index -1 reste dans le bouton */
  overflow: hidden;     /* il déborde très largement : on le coupe au rayon 40 */
  display: inline-flex; align-items: center;
  padding: var(--ctl-btn-pad);
  border-radius: var(--r-pill);
  background: var(--card);
  border: 0; cursor: pointer;
  font-family: inherit;
  transition: transform .18s ease;
}
.pill span {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--ctl-btn); padding: 0 var(--s-3);
  font-size: var(--t-body); font-weight: 700; line-height: 1.2;
  color: var(--ink); white-space: nowrap;
}
.pill i {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ctl-btn); height: var(--ctl-btn);
  border-radius: var(--r-round);
  background: var(--jade); color: var(--ink);
  flex-shrink: 0;
}
.pill i svg { width: 22px; height: 22px; transform: rotate(45deg); }
.pill:hover { transform: translateY(-1px); }

/* Survol : le fond de la pastille se propage à tout le bouton -------------- */
/* Le disque est calé exactement sous la pastille (même diamètre, même centre)
   donc invisible au repos ; il grandit ensuite jusqu'à noyer la pilule.
   Mutualisé avec .urlpill : seuls le diamètre du disque et le couple de
   couleurs changent d'un composant à l'autre, via les variables ci-dessus. */
.pill::before, .urlpill::before {
  content: ''; position: absolute; z-index: -1;
  top: 50%; right: var(--ctl-btn-pad);
  width: var(--pill-disc); height: var(--pill-disc);
  border-radius: var(--r-round);
  background: var(--pill-spread);
  transform: translateY(-50%) scale(1);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
/* ×16 → rayon 352px, de quoi couvrir la plus large des pilules depuis son
   coin droit (la plus longue fait ~300px, diagonale ~275px). */
.pill:hover::before,    .pill:focus-visible::before,
.urlpill:hover::before, .urlpill:focus-visible::before { transform: translateY(-50%) scale(16); }

/* Le texte attend que la couleur soit passée sous lui avant de basculer.
   Pour .urlpill tout est déclaré ici et nulle part ailleurs : sa règle de
   base, plus bas dans le fichier, écraserait la propriété transition. */
.pill span, .pill i { transition: color .28s ease .08s; }
.urlpill, .urlpill i { transition: color .28s ease .08s, transform .18s ease; }
.pill:hover span,  .pill:focus-visible span,
.pill:hover i,     .pill:focus-visible i,
.urlpill:hover,    .urlpill:focus-visible,
.urlpill:hover i,  .urlpill:focus-visible i { color: var(--pill-spread-fg); }
.urlpill:hover, .urlpill:focus-visible { transform: translateY(-1px); }

/* Le tracé du sprite pointe déjà en ↗ : au repos on le couche à 45° (donc
   vers la droite), au survol il revient à 0° et retrouve le haut-droite. */
.pill i svg, .urlpill svg { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.pill:hover i svg,  .pill:focus-visible i svg,
.urlpill:hover svg, .urlpill:focus-visible svg { transform: rotate(0deg); }

/* Bouton de la barre de nav : le chausson passe au blanc franc depuis que la
   barre est en verre. Le gris --surface s'y lisait comme une rustine posée
   dessus, alors qu'il n'était là que pour ne pas disparaître sur l'ancienne
   pilule blanche. Seul élément opaque de la barre, donc le point d'appui de
   l'action. La pastille garde le vert de la marque. */
.pill--ink { background: var(--card); --pill-spread: var(--jade); --pill-spread-fg: var(--ink); }
.pill--ink i { background: var(--jade); color: var(--ink); }

/* Variante verre : bordure 1.5px + flou 20px, comme le Figma.
   La pastille reste couleur par défaut (bouton « Get Started ») ; le
   modificateur --hollow la vide (bouton secondaire du hero, pilule d'URL). */
.pill--glass {
  background: linear-gradient(107deg, var(--glass-from) 0%, var(--glass-to) 100%);
  backdrop-filter: blur(var(--blur-md));
  border: 1.5px solid var(--glass-edge);
}
.pill--glass span { color: #fff; }
/* Pastille vidée : c'est le disque de propagation, calé dessous, qui la
   colore au repos. Il passe au vert, la flèche bascule donc en encre :
   blanche sur ce vert elle ne tiendrait pas (1,9:1). */
.pill--hollow { --pill-spread: var(--jade); --pill-spread-fg: var(--ink); }
.pill--hollow i { background: transparent; color: var(--ink); }

/* --- Lien souligné + point (×3) ------------------------------------------- */
.dotlink {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-body); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  color: var(--ink);
}
.dotlink::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--jade-deep); }
.dotlink--night { color: var(--on-night); }
.dotlink--night::after { background: var(--jade); }

/* --- En-tête de section : titre à gauche, contexte à droite ---------------- */
.head {
  display: grid;
  grid-template-columns: minmax(0, 581px) minmax(0, 443px);
  justify-content: space-between;
  gap: var(--s-10) var(--s-20);
  margin-bottom: var(--s-15);
}
.head h2 {
  font-size: var(--t-h2); font-weight: var(--fw-title);
  letter-spacing: 0; line-height: 1.2;
  margin: 0; color: var(--ink); text-wrap: balance;
}
/* Depuis le 16/08 cette colonne ne porte plus qu'un lien : les paragraphes qui
   présentaient chaque section ont été retirés. D'où les deux réglages ajoutés :
   flex-end pose le lien sur la dernière ligne du titre plutôt qu'en haut de la
   colonne, et flex-start lui rend sa largeur propre, sans quoi il s'étirerait
   sur les 443px de la colonne et offrirait une cible de clic démesurée. */
.head__aside { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--s-6); }
.head__aside p { margin: 0; color: var(--muted); font-size: var(--t-body); }
.head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 760px; margin-inline: auto; gap: var(--s-5); }
/* Largeur en em et non en ch : le ch vaut la largeur du zéro de la police
   courante, donc cette boîte rétrécissait à chaque changement de police et
   ajoutait une ligne. C'est ce qui a mis « Tout ce qu'il faut pour gagner en
   flexibilité » sur trois lignes le 15/08. En em, la boîte ne suit que le corps
   du titre. 13em à 48px font 624px : la plus longue des deux lignes en demande
   environ 560, ce qui laisse de la marge pour la vraie Helvetica Neue, dont les
   largeurs diffèrent un peu de celles du repli. */
.head--center h2 { max-width: 13em; }
.head--center p { color: var(--muted); margin: 0; }

@media (max-width: 899px) {
  .head { grid-template-columns: 1fr; gap: var(--s-6); }
}

.section { padding-block: var(--s-20); }

/* =========================================================================
   01 · NAVIGATION : pilule flottante, 80px, rayon 40, flou 50
   ========================================================================= */
/* La barre flotte, tous coins arrondis (retour au parti d'origine, demande du
   15/08 : l'encoche dans le bord haut n'a pas pris), et elle suit le défilement.
   Elle est sortie du hero pour ça : dans .hero__stage, qui est en overflow:
   hidden, un sticky n'aurait collé que dans les limites du bloc. Voir le
   commentaire au-dessus du <header> dans index.html.
   Trois valeurs à tenir ensemble depuis qu'elle est hors du hero :
   · height: 0 pour qu'elle ne pousse rien, sans quoi elle décalerait la photo
     de 80px vers le bas. Son contenu déborde et reste cliquable.
   · top: 32px, soit le retrait de 16px du bloc hero plus les 16px qui la
     séparaient de son bord haut. Au repos elle retombe donc exactement où elle
     était, et c'est aussi sa hauteur d'arrêt pendant le défilement.
   · padding-inline de 1vw + 16px : reproduit le retrait latéral que lui
     donnaient les 98 % du bloc hero, maintenant qu'elle n'est plus dedans. */
.topbar {
  position: sticky; top: var(--s-8); z-index: 50;
  height: 0;
  padding-inline: calc(1vw + var(--s-4));
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--ctl-nav-h);
  /* La barre ne court plus sur toute la largeur du hero (demande du 15/08) :
     son contenu mesure ~950px, 1060 laisse le jeu qu'il faut sans étirement.
     Au-delà elle reste centrée, en deçà elle reprend la largeur disponible. */
  width: 100%; max-width: 1060px; margin-inline: auto;
  padding-left: var(--s-6); padding-right: var(--s-3);
  border-radius: var(--r-pill);
  /* Verre et non blanc opaque (demande du 15/08) : le flou de 50 était déjà là,
     c'est le --card qui le rendait invisible. Le dégradé va de 42 % à 28 % de
     blanc, dans le sens du .pill--glass du hero, et le filet de 1,5px détache
     le bord quand la photo derrière est claire.
     ATTENTION : ces deux valeurs sont le plancher pour du texte encre. Sous une
     photo de hero sombre, le flou garde le verre gris moyen et l'encre passe
     encore ; si on descend plus bas, il faut basculer la barre en version nuit
     (texte blanc et assets/img/logo-nuit.png) plutôt que forcer l'encre. */
  background: linear-gradient(107deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.28) 100%);
  border: 1.5px solid var(--glass-edge);
  backdrop-filter: blur(var(--blur-2xl));
  /* Le verre reste le même sur toute la longueur du défilement (demande du
     15/08 : pas de bascule en blanc quand la barre se décolle du hero). Deux
     ombres, et aucun aplat, pour qu'elle garde sa transparence :
     · le liseré foncé à 6 % prend le relais du filet blanc sur les sections
       blanches, où celui-ci est par définition invisible ;
     · l'ombre douce la décolle du contenu qui défile dessous. */
  box-shadow:
    0 0 0 1px rgba(20, 20, 20, .06),
    0 10px 30px rgba(0, 0, 0, .10);
}

/* Réserve à gauche : elle fait contrepoids au bouton « Me contacter » posé à
   droite, sans quoi la navigation ne tomberait pas au milieu de la barre. */
.brand { display: flex; align-items: center; gap: var(--s-3); width: 150px; flex-shrink: 0; }
/* Le casque est plus haut que large : on cale la hauteur, la largeur suit.
   Le lettrage a été retiré de la barre (demande du 15/08) : la marque repose
   sur le seul casque, donc 52px dans une barre de 80px. */
.brand__mark { height: 52px; width: auto; flex-shrink: 0; display: block; }

.nav { display: flex; align-items: center; gap: var(--s-3); }
.nav a { padding: 10px var(--s-4); font-size: var(--t-body); color: var(--ink); border-radius: var(--r-chip); transition: background .18s ease; }
/* Survol en lavis de blanc, pas en --surface : sur une barre de verre, un aplat
   gris opaque se lirait comme une rustine. */
.nav a:hover { background: rgba(255,255,255,.55); }
.nav a[aria-current] { font-weight: 700; }

.topbar__end { display: flex; align-items: center; gap: var(--s-4); justify-content: flex-end; }
.burger { display: none; }

@media (max-width: 1199px) {
  .nav { display: none; }
  .burger {
    display: inline-flex; align-items: center; gap: var(--s-2);
    /* Blanc franc comme le bouton contact, même raison : sur le verre, le gris
       --surface faisait rustine. */
    background: var(--card); border: 0; border-radius: var(--r-pill);
    padding: 11px var(--s-5); font-family: inherit; font-size: 15px; font-weight: 700;
    color: var(--ink); cursor: pointer;
  }
  .brand { width: auto; }
  /* Sans les rubriques, la barre n'a plus que le casque et deux boutons :
     1060px la laisserait creuse au milieu. */
  .topbar__inner { max-width: 760px; }
}
@media (max-width: 767px) {
  .topbar__inner { padding-left: var(--s-4); padding-right: var(--s-2); min-height: var(--ctl-nav-h); }
  .brand__mark { height: 40px; }
  /* Sur téléphone il ne reste que la marque et le menu : le bouton contact
     faisait déborder la pilule. */
  .topbar__end .pill { display: none; }
}

/* =========================================================================
   02 · HERO : bloc inséré à 98 %, bords arrondis, texte à même la photo
   ========================================================================= */
.hero { padding-top: var(--s-4); }

.hero__stage {
  position: relative;
  width: 98%;
  margin-inline: auto;
  min-height: 700px;
  border-radius: 32px;
  overflow: hidden;
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }

/* Le texte est posé à même la photo : c'est l'image qu'on assombrit, par un
   dégradé montant, et non un panneau derrière le texte. */
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,.12) 78%),
    var(--veil);
}

/* Le bloc fait 98 % : son bord gauche est donc à 1vw du bord de fenêtre.
   On retranche ce 1vw à la gouttière de la grille pour que le titre du hero
   s'aligne exactement sur les titres des sections en dessous. */
.hero__copy {
  position: relative; z-index: 3;
  margin-block: var(--s-10);
  margin-left: calc(var(--grid-gutter) - 1vw);
  margin-right: var(--s-10);
  max-width: 780px;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-6);
}

.hero h1 {
  /* Bas de casse depuis le 15/08, les capitales sont abandonnées.
     Le hero ne porte plus un slogan de deux mots mais le titre du dernier
     article, qui compte une cinquantaine de signes : c'est donc le corps des
     titres d'article, --t-h1-art, qui s'applique, et non --t-h1 (72px), où il
     demandait trois lignes dans une colonne de 780.
     --t-h1-art est passé à 48px le 18/08, puis ce titre a pris son propre cran,
     --t-h1-une, le 19/08 : voir le jeton pour le pourquoi. */
  font-size: var(--t-h1-une); font-weight: var(--fw-title);
  line-height: 1.1; letter-spacing: -.01em;
  color: #fff; margin: 0; text-wrap: balance;
}

/* Ligne de contexte au-dessus du titre : pastille de rubrique, puis date et
   durée de lecture. Elle remplace le chapô .hero__lead, qui présentait le
   site. Le texte reste blanc franc et non --muted-dark : sur photo, un gris
   perd trop vite son contraste selon la zone où il tombe. */
.hero__kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--t-body); color: #fff; margin: 0;
}
/* Le point ne sépare que deux informations voisines, jamais la pastille de la
   première : d'où le sélecteur sur deux .hero__meta qui se suivent. Il est
   collé à gauche de son span et l'écart de la grille flex le double à droite,
   ce qui l'équilibre entre les deux mots. */
.hero__meta + .hero__meta::before { content: '·'; margin-right: var(--s-3); }

@media (max-width: 1199px) {
  .hero__stage { min-height: 560px; border-radius: 24px; }
  .hero__copy { margin-block: var(--s-8); margin-right: var(--s-8); }
}
@media (max-width: 767px) {
  .hero__stage { min-height: 500px; border-radius: 20px; }
  .hero__copy { margin-block: var(--s-6); margin-right: var(--s-5); gap: var(--s-5); }
}

/* =========================================================================
   03 · LA DÉMARCHE : deux cartes (section « About Us »)
   HORS SERVICE depuis le 15/08 : la section qui utilisait ces règles a été
   remplacée par les grilles de rubrique (section 10). Tout ce bloc est donc
   inerte, .urlpill compris, qui ne servait qu'à ses cartes. Conservé parce que
   le balisage l'est aussi, dans _refs/section-demarche-retiree-2026-08-15.html :
   les deux se remettent ensemble. À supprimer si la décision se confirme.
   ========================================================================= */

/* En-tête propre à cette section : 603 | 127 | 550 = 1280, aligné au centre.
   Le chapô déborde vers la gauche (415 → 550) pour tenir sur 3 lignes : à
   415px il en prenait 4, et le seuil des 3 lignes est à 434px. 550 laisse
   45px de marge sous la ligne la plus longue (505px), de quoi encaisser les
   écarts de rendu d'un navigateur à l'autre sans repasser à 4. */
.head--about { grid-template-columns: minmax(0, 603px) minmax(0, 550px); align-items: center; margin-bottom: var(--s-10); }

/* Deux colonnes égales : 628 + 24 + 628 = 1280.
   Gauche une carte de 586, droite deux cartes de 281 (281+24+281 = 586). */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: stretch; }
.about__col { display: flex; flex-direction: column; gap: var(--grid-gap); }

.stack { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--night-2); display: flex; }
.stack > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.stack::before { content: ''; position: absolute; inset: 0; background: var(--veil); z-index: 1; }

/* Grande carte : contenu centré dans les deux axes */
.about__a { aspect-ratio: 628 / 586; align-items: center; justify-content: center; }
.about__a .inner {
  position: relative; z-index: 2;
  padding: var(--s-8);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-10);
  text-align: center; max-width: 453px;
}
.about__a .txt { display: flex; flex-direction: column; gap: var(--s-4); }
.about__a h3 { font-size: var(--t-h2); font-weight: var(--fw-title); color: #fff; margin: 0; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
.about__a p { margin: 0; color: #fff; font-size: var(--t-body); }

/* Cartes de droite : titre puis pilule, ancrés en bas à gauche */
.about__b { aspect-ratio: 628 / 281; align-items: flex-end; }
.about__b .inner {
  position: relative; z-index: 2;
  padding: 0 29px 34px;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5);
}
.about__b h3 { font-size: var(--t-h2); font-weight: var(--fw-title); color: #fff; margin: 0; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }

.urlpill {
  /* Pastille vide comme .pill--hollow : c'est le disque posé dessous qui la
     colore, en vert comme partout ailleurs. Disque de 34px, à la taille de
     sa flèche. */
  --pill-spread:    var(--jade);
  --pill-spread-fg: var(--ink);
  --pill-disc:      34px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--ctl-btn-pad) var(--ctl-btn-pad) var(--ctl-btn-pad) var(--s-5);
  border-radius: var(--r-pill);
  background: linear-gradient(117deg, var(--glass-from) 0%, var(--glass-to) 100%);
  backdrop-filter: blur(var(--blur-md));
  border: 1.5px solid var(--glass-edge);
  color: #fff; font-size: var(--t-body);
}
/* Le texte reste blanc (il court sur la photo), mais la flèche est sur le
   vert : en blanc elle tomberait à 1,9:1, elle passe donc en encre. */
.urlpill i { width: 34px; height: 34px; border-radius: var(--r-round); display: grid; place-items: center; color: var(--ink); }
.urlpill svg { width: 20px; height: 20px; transform: rotate(45deg); }

@media (max-width: 899px) {
  /* Déclaré après la media query de .head et à spécificité égale, ce
     sélecteur la remporterait : il faut le neutraliser explicitement. */
  .head--about { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .about__a { aspect-ratio: 4 / 3; }
  .about__b { aspect-ratio: 16 / 8; }
  .about__b .inner { padding: 0 var(--s-5) var(--s-5); }
}

/* =========================================================================
   04 · LES 4 RUBRIQUES : carrousel à défilement, cartes 355
   ========================================================================= */
.rail {
  list-style: none; margin: 0; padding-left: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 355px;
  gap: var(--grid-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* Barre de défilement masquée : elle traversait toute la largeur de la
     page. Le rail défile toujours (molette, doigt, clavier) et la carte
     coupée au bord droit reste l'indice qu'il y a une suite. */
  scrollbar-width: none;        /* Firefox                */
  -ms-overflow-style: none;     /* anciens Edge / IE      */
}
.rail::-webkit-scrollbar { display: none; }   /* Chrome, Safari, Edge */
.rail > * { scroll-snap-align: start; }
/* Débord contrôlé : le rail sort de la gouttière comme dans la maquette */
.rail-wrap { margin-inline: calc(var(--grid-gutter) * -1); padding-inline: var(--grid-gutter); }

/* La carte entière mène à la catégorie : le lien du titre s'étend dessus. */
.rubric { position: relative; }
.rubric__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.rubric__media { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 355 / 340; background: var(--night-2); }
.rubric__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.rubric__media::after { content: ''; position: absolute; inset: 0; background: var(--veil); }
.rubric__go {
  position: absolute; top: var(--s-5); right: var(--s-5); z-index: 2;
  width: var(--ctl-btn); height: var(--ctl-btn); border-radius: var(--r-round);
  display: grid; place-items: center;
  background: rgba(255,255,255,.22); color: #fff;
  backdrop-filter: blur(var(--blur-md));
}
.rubric__go svg { width: 22px; height: 22px; transform: rotate(45deg); }
/* Pas de propagation ici : le bouton EST déjà le disque. On garde le reste
   du vocabulaire : passage au doré en fondu, et flèche qui pointe en ↗. */
.rubric__go { transition: background .3s ease, color .3s ease; }
.rubric__go svg { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.rubric:hover .rubric__go svg { transform: rotate(0deg); }
.rubric:first-child .rubric__go, .rubric:hover .rubric__go { background: var(--jade); color: var(--ink); }
.rubric__chips { position: absolute; left: var(--s-5); bottom: var(--s-5); z-index: 2; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.rubric h3 { font-size: var(--t-h3); font-weight: var(--fw-title-sm); color: var(--ink); margin: var(--s-5) 0 var(--s-2); letter-spacing: 0; line-height: 1.3; }
.rubric p { margin: 0; font-size: var(--t-body); color: var(--muted); }

/* =========================================================================
   04 · MOUVEMENT RÉDUIT
   ========================================================================= */
/* Le bandeau de mots-clés défilant qui occupait cette section a été retiré le
   16/08 à la demande du client, avec ses deux bandes inclinées, sa piste
   animée et l'animation marquee. Le jeton --t-marquee de tokens.css ne sert
   plus qu'à lui : il part avec, si rien ne le reprend. */
@media (prefers-reduced-motion: reduce) {
  /* On supprime le mouvement, pas l'effet : plus de disque qui s'étale ni de
     décollement, mais le bouton se remplit toujours en fondu et la flèche
     pointe bien en haut à droite. Le survol reste donc lisible. */
  .pill::before, .urlpill::before { display: none; }
  .pill, .urlpill { transition: background-color .2s ease, color .2s ease; }
  .pill:hover,    .pill:focus-visible,
  .urlpill:hover, .urlpill:focus-visible { transform: none; background: var(--pill-spread); }
  .pill i svg, .urlpill svg, .rubric__go svg { transition: none; }
}

/* =========================================================================
   05 · BENTO : 522 | 355 | 355, cartes rayon 24, voile de verre flou 30
   HORS SERVICE depuis le 18/08 : la section « Les articles qui comptent pour
   commencer » a été retirée de l'accueil, plus rien n'appelle ces règles.
   Conservées parce que le balisage l'est aussi, dans
   _refs/section-bento-retiree-2026-08-18.html : les deux se remettent ensemble.
   Le client avait validé cette section le 16/08, d'où la prudence.
   ========================================================================= */
.bento {
  display: grid;
  grid-template-columns: var(--bento-lead) var(--bento-side) var(--bento-side);
  grid-template-rows: 420px 400px;
  gap: var(--grid-gap);
}
.bento > .tile--lead { grid-column: 1; grid-row: 1 / 3; }
.bento > .tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.bento > .tile:nth-child(3) { grid-column: 3; grid-row: 1; }
.bento > .tile--wide { grid-column: 2 / 4; grid-row: 2; }

.tile { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--night-2); display: flex; align-items: flex-end; }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); transition: transform .55s cubic-bezier(.2,.6,.2,1); }
.tile::before { content: ''; position: absolute; inset: 0; background: var(--veil); z-index: 1; }
.tile:hover > img { transform: scale(1.035); }

/* Le voile de texte : dégradé blanc 30 %→5 % + flou 30, exactement comme
   la section « Facilities » de la maquette. */
.tile__cap {
  position: relative; z-index: 2; width: 100%;
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
  background: linear-gradient(139deg, var(--glass-from) 15%, var(--glass-to) 83%);
  backdrop-filter: blur(var(--blur-lg));
}
.tile__cap h3 { font-size: var(--t-h3); font-weight: var(--fw-title-sm); color: #fff; margin: 0; letter-spacing: 0; line-height: 1.3; text-wrap: balance; }
.tile__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }

/* Repère de lecture, et non un lien : .tile__link couvre déjà toute la carte.
   Deux liens vers la même cible feraient doublon au clavier comme au lecteur
   d'écran. Même vocabulaire visuel que .dotlink. */
.tile__more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-body); font-weight: 700; color: #fff;
  text-decoration: underline; text-underline-offset: 3px;
}
.tile__more::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--jade); transition: transform .25s ease;
}
.tile:hover .tile__more::after { transform: scale(1.6); }

@media (max-width: 1023px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 420px 380px 340px; }
  .bento > .tile--lead { grid-column: 1 / 3; grid-row: 1; }
  .bento > .tile:nth-child(2) { grid-column: 1; grid-row: 2; }
  .bento > .tile:nth-child(3) { grid-column: 2; grid-row: 2; }
  .bento > .tile--wide { grid-column: 1 / 3; grid-row: 3; }
}
@media (max-width: 599px) {
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .bento > .tile { grid-column: 1 !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
  .bento > .tile--lead { aspect-ratio: 3 / 4; }
}

/* =========================================================================
   06 · DERNIERS ARTICLES : section nuit, lignes date | visuel | contenu
   HORS SERVICE depuis le 18/08 : la section « Ce qui vient de paraître » a été
   retirée de l'accueil, plus rien n'appelle ces règles, .fact, .tchip et
   .dotlink--night comprises, qui ne servaient qu'à ses lignes.
   Conservées parce que le balisage l'est aussi, dans
   _refs/section-derniers-articles-retiree-2026-08-18.html.
   ========================================================================= */
.latest { background: var(--night); color: var(--on-night); padding-block: var(--s-20); }
.latest .head--center h2 { color: var(--on-night); }
.latest .head--center p { color: var(--muted-dark); }

.entry { display: grid; grid-template-columns: 240px 334px minmax(0, 1fr); gap: var(--s-10); align-items: start; padding-block: var(--s-10); }
.entry + .entry { border-top: 1px solid rgba(255,255,255,.10); }
.entry__when { display: flex; flex-direction: column; gap: var(--s-5); align-items: flex-start; }
.entry__loc { display: flex; gap: var(--s-3); color: var(--muted-dark); font-size: var(--t-body); line-height: 1.3; }
.entry__loc svg { width: 20px; height: 20px; flex-shrink: 0; }
.entry__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 334 / 245; background: var(--night-2); }
.entry__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.entry__body { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.entry__body h3 { font-size: var(--t-h3); font-weight: var(--fw-title-sm); color: var(--on-night); margin: 0; letter-spacing: 0; line-height: 1.3; text-wrap: balance; }
.entry__body p { margin: 0; color: var(--muted-dark); font-size: var(--t-body); max-width: 52ch; }
.entry__facts { display: flex; align-items: flex-end; gap: var(--s-8); }
/* Couple étiquette / valeur empilé, « Par Alexei ». Repris du panneau du
   hero, qui a été retiré. Portait l'heure de parution jusqu'au 16/08 : sur un
   blog, la signature dit davantage que l'heure de publication. */
.fact { display: flex; flex-direction: column; gap: var(--s-1); line-height: 1.2; }
.fact b { font-size: var(--t-body); font-weight: 700; }
.fact span { font-size: var(--t-body); }
.entry__facts .fact b { color: var(--on-night); }
.entry__facts .fact span { color: var(--muted-dark); }
.latest__all { display: flex; justify-content: flex-end; padding-top: var(--s-8); }

@media (max-width: 1023px) {
  .entry { grid-template-columns: 1fr; gap: var(--s-6); }
  .entry__media { aspect-ratio: 16 / 9; }
  .entry__when { flex-direction: row; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
}

/* =========================================================================
   07 · AVIS + LETTRE
   ========================================================================= */
.voices { padding-block: var(--s-20); }
.voices__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); margin-bottom: var(--s-10); }
.voices__head .badges { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); }
.voices__head h2 { font-size: var(--t-h2); font-weight: var(--fw-title); letter-spacing: 0; line-height: 1.2; margin: 0; color: var(--ink); }
.voices__nav { display: flex; gap: var(--s-2); }
.voices__nav button { width: var(--ctl-btn); height: var(--ctl-btn); border-radius: var(--r-round); border: 0; cursor: pointer; background: var(--surface); color: var(--ink); display: grid; place-items: center; }
.voices__nav button:last-child { background: var(--ink); color: var(--card); }
.voices__nav svg { width: 20px; height: 20px; }

.quote { display: grid; grid-template-columns: 333px minmax(0, 1fr) 182px; gap: var(--s-10); align-items: center; }
.quote__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 1 / 1; background: var(--surface); }
.quote__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.quote__media--side { aspect-ratio: 182 / 218; }
.quote blockquote { margin: 0; }
.quote__mark { font-family: var(--f-display); font-size: 56px; line-height: .5; color: var(--ink); display: block; margin-bottom: var(--s-6); }
.quote p { font-size: 28px; line-height: 1.35; color: var(--ink); margin: 0 0 var(--s-8); letter-spacing: -.01em; text-wrap: balance; }
.quote__by { display: flex; align-items: center; gap: var(--s-3); }
.quote__by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: var(--img-filter); }
.quote__by b { display: block; font-size: var(--t-body); font-weight: 700; color: var(--ink); }
.quote__by span { font-size: var(--t-body); color: var(--muted); }

@media (max-width: 1023px) {
  .quote { grid-template-columns: 1fr; gap: var(--s-6); }
  .quote__media--side { display: none; }
  .quote p { font-size: 22px; }
}

/* =========================================================================
   08 · PIED DE PAGE : wordmark géant, filet, mentions
   ========================================================================= */
/* Fond nuit. Il se suffit désormais à lui-même : « Derniers articles », qui
   partageait ce fond juste au-dessus et formait avec lui un seul bloc sombre,
   est remonté en tête de page le 16/08. */
.foot { background: var(--night); color: var(--on-night); padding-block: var(--s-20) var(--s-10); }
/* Posé au-dessus du wordmark géant : en dessous de ~100px il flotte. */
.foot__mark { height: clamp(64px, 7vw, 104px); width: auto; display: block; margin-bottom: var(--s-5); }
.foot__word {
  /* « NOVA POTENTIEL » ≈ 8,4 em en Inter 800 capitales (ls −.03em) :
     152px est le plus grand corps qui tienne dans les 1280 du conteneur.
     Lettrage, donc Inter comme les titres, pas la police de texte. */
  font-family: var(--f-sans);
  font-size: clamp(38px, 10.5vw, 152px); font-weight: 800;
  line-height: .82; letter-spacing: -.03em; text-transform: uppercase;
  color: #fff; margin: 0 0 var(--s-8); user-select: none;
  text-wrap: nowrap;
}
.foot__rule { border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); }
.foot__links { display: flex; gap: var(--s-8); flex-wrap: wrap; font-size: var(--t-body); color: var(--on-night); }
.foot__links a:hover { color: var(--jade); }
.foot__copy { font-size: var(--t-body); color: var(--muted-dark); }
.foot__social { display: flex; gap: var(--s-2); }
.foot__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.10); color: var(--on-night); transition: background .18s ease, color .18s ease; }
.foot__social a:hover { background: var(--jade); color: var(--ink); }
.foot__social svg { width: 17px; height: 17px; fill: currentColor; }

/* Sur téléphone le pied se lit dans l'autre sens : ce qui sert d'abord, les
   rubriques puis les réseaux, la signature ensuite, la mention légale pour
   finir. Le balisage ne bouge pas, c'est le desktop qui le commande, où le
   lettrage géant ouvre le bloc.
   `display: contents` sur .foot__rule fait remonter ses trois enfants au rang
   des deux autres : sans ça le lettrage ne pourrait pas se glisser entre les
   réseaux et la mention légale, `order` ne réarrangeant qu'entre frères. La
   boîte de .foot__rule s'en va avec, son filet compris : le filet est redonné à
   .foot__copy, qui ferme désormais le bloc.
   Les sélecteurs sont préfixés de .foot pour passer devant la remise à zéro des
   marges de blocs.css, qui est en (0,1,0) et vient après cette feuille. */
@media (max-width: 767px) {
  .foot .shell { display: flex; flex-direction: column; align-items: flex-start; }
  .foot .foot__rule { display: contents; }

  /* En liste, une rubrique par ligne : à deux colonnes elles se lisaient en Z,
     et la quatrième restait seule sur sa rangée. */
  .foot .foot__links { order: 1; flex-direction: column; gap: var(--s-4); }
  .foot .foot__social { order: 2; margin-block-start: var(--s-10); }
  .foot .foot__mark { order: 3; margin-block-start: var(--s-12); }
  .foot .foot__word { order: 4; margin-block-end: 0; }
  .foot .foot__copy {
    order: 5; align-self: stretch;
    margin-block-start: var(--s-8); padding-top: var(--s-6);
    border-top: 1px solid rgba(255,255,255,.14);
  }
}

/* =========================================================================
   09 · PAGE ARTICLE : structure du nœud Figma 16:97
   ========================================================================= */
/* Trois blocs, dans l'ordre de la maquette : en-tête (fil d'Ariane, titre,
   méta, visuel 1200x460), corps scindé (sommaire 280 | texte 800, gouttière
   48), puis les articles similaires en trois cartes.
   Repris tel quel : la structure, les largeurs, les gouttières.
   Remplacé : couleurs et polices, qui suivent les jetons du site et non les
   hex de la maquette, exactement comme pour la home. Le Figma est en
   Instrument Serif et en #22c55e, le site en Inter et en --jade. La police
   serif est chargée (voir fonts.css) : la repasser sur les titres d'article
   ne coûterait qu'une déclaration si le choix se discute. */

/* La barre de nav est hors flux (height: 0 dans la section 01) : toute page
   qui ne commence pas par une photo doit réserver sa bande elle-même, sinon
   le fil d'Ariane passe dessous. Retrait de la barre + sa hauteur + 40 de
   respiration, donc ça suit aussi la barre de 64 du téléphone. */
.post__intro {
  padding-top: calc(var(--s-8) + var(--ctl-nav-h) + var(--s-10));
  display: flex; flex-direction: column; gap: var(--s-8);
}

/* --- Fil d'Ariane --------------------------------------------------------- */
.crumbs { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); color: var(--muted); }
.crumbs svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted-dark); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Seul maillon en couleur, et en --jade-deep : le vert vif tombe à 1,9:1 sur
   blanc, il est réservé aux aplats. */
.crumbs__here { color: var(--jade-deep); font-weight: 700; }

/* --- Titre et chapô ------------------------------------------------------- */
.post__title { display: flex; flex-direction: column; gap: var(--s-5); max-width: 1000px; }
/* Pas de capitales, contrairement au h1 du hero de la home : un titre
   d'article se lit, il ne s'affiche pas. On garde la graisse et le serrage
   des h2 du site. */
.post h1 { font-size: var(--t-h1-art); font-weight: var(--fw-title); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 0; text-wrap: balance; }
.post__lead { font-size: var(--t-lead); line-height: 1.6; color: var(--muted); margin: 0; max-width: 68ch; }

/* --- Ligne de méta : auteur à gauche, faits à droite ---------------------- */
/* Aligné en pied et non centré (demande du 15/08) : la date et la durée
   tombent ainsi sur la ligne du rôle de l'auteur, et non entre ses deux
   lignes. Les deux textes sont au même corps et au même interligne, donc
   caler les bas des boîtes fait coïncider les lignes de base. */
.post__meta { display: flex; align-items: flex-end; gap: var(--s-12); flex-wrap: wrap; }
/* Même géométrie que .quote__by de la home : rond de 40, nom, rôle. */
.byline { display: flex; align-items: center; gap: var(--s-3); }
.byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: var(--img-filter); }
.byline b { display: block; font-size: var(--t-body); font-weight: 700; color: var(--ink); line-height: 1.3; }
.byline span { font-size: var(--t-body); color: var(--muted); }
.post__facts { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
/* Sans fond, contrairement à .tchip : sur le blanc de l'en-tête, des pastilles
   grises alourdiraient la ligne de méta. */
.mchip { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); color: var(--muted); }
.mchip svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Visuel de tête ------------------------------------------------------- */
/* min-height: 0 pour la même raison que .rcard__media plus bas : c'est un
   élément flexible, sa hauteur minimale automatique suivrait la photo. */
.post__media { border-radius: var(--r-card); overflow: hidden; background: var(--surface); aspect-ratio: 1200 / 460; min-height: 0; }
.post__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }

/* --- Corps scindé --------------------------------------------------------- */
/* 280 | 48 | 800, et le reste de la largeur laissé libre à droite comme dans
   la maquette : le corps y est calé à 800 et non étiré, au-delà la ligne
   dépasse la longueur confortable de lecture. */
.post__split {
  display: grid; grid-template-columns: 280px minmax(0, 800px);
  gap: var(--s-10) var(--s-12);
  padding-top: var(--s-15); padding-bottom: var(--s-20);
  align-items: start;
}

/* --- Sommaire ------------------------------------------------------------- */
.toc {
  /* Collé sous la barre de nav : son retrait, sa hauteur, puis 24. */
  position: sticky; top: calc(var(--s-8) + var(--ctl-nav-h) + var(--s-6));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-inner); padding: var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-6);
}
.toc__t { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.toc__list a { display: flex; align-items: flex-start; gap: var(--s-3); font-size: 15px; line-height: 1.35; color: var(--muted); }
.toc__list a:hover { color: var(--ink); }
.toc__n {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--r-round);
  display: grid; place-items: center;
  background: var(--card); color: var(--muted);
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* L'étape marquée suit la lecture (demande du 15/08) : le script en pied
   d'article.html pose .is-here sur l'étape en cours. Aucun sélecteur CSS ne
   sait dire « la section que le lecteur regarde », d'où le script. */
.toc__n { transition: background .2s ease, color .2s ease; }
.toc__list li.is-here a { color: var(--ink); font-weight: 700; }
.toc__list li.is-here .toc__n { background: var(--jade); color: var(--ink); }
/* Repli sans JavaScript : à défaut d'étape marquée, la première l'est, comme
   dans la maquette. Le :not(:has()) évite d'avoir deux étapes marquées à la
   fois dès que le script prend la main. */
.toc__list:not(:has(.is-here)) > li:first-child a { color: var(--ink); font-weight: 700; }
.toc__list:not(:has(.is-here)) > li:first-child .toc__n { background: var(--jade); color: var(--ink); }
.toc__rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* --- Partage -------------------------------------------------------------- */
.share { display: flex; flex-direction: column; gap: var(--s-3); }
.share__t { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.share__row { display: flex; gap: var(--s-2); }
.share__row a {
  width: 36px; height: 36px; border-radius: var(--r-round);
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  transition: background .18s ease, border-color .18s ease;
}
.share__row a:hover { background: var(--jade); border-color: var(--jade); }
/* Les glyphes pleins (Facebook, courriel) prennent la couleur du texte ; les
   tracés en trait portent leur propre fill: none, qu'un fill hérité ne
   surcharge pas. La même règle sert donc aux deux. */
.share__row svg { width: 16px; height: 16px; fill: currentColor; }

/* --- Corps de texte ------------------------------------------------------- */
.prose { display: flex; flex-direction: column; gap: var(--s-10); }
/* scroll-margin-top est la contrepartie du sommaire : sans elle, un clic sur
   une entrée amène le titre visé pile sous la barre de nav collée, qui le
   masque. Même hauteur d'arrêt que .toc. */
.prose section {
  display: flex; flex-direction: column; gap: var(--s-4);
  scroll-margin-top: calc(var(--s-8) + var(--ctl-nav-h) + var(--s-6));
}
.prose h2 { font-size: var(--t-h2-art); font-weight: var(--fw-title); letter-spacing: 0; line-height: 1.25; color: var(--ink); margin: 0; }
/* Deux écarts assumés avec le reste du site, tous deux pour la lecture longue,
   seul endroit où l'on enchaîne plusieurs paragraphes : interligne à 1,7 au
   lieu de 1,5, et texte en --ink au lieu de --muted. La maquette met un gris
   foncé à 8,6:1 là où --muted tombe à 5,3:1, trop clair pour un article
   entier ; --ink est le cran le plus proche dont dispose le site. */
.prose p { margin: 0; font-size: var(--t-body); line-height: 1.7; color: var(--ink); }
.prose__list { list-style: none; margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.prose__list li { position: relative; padding-left: var(--s-5); font-size: var(--t-body); line-height: 1.6; color: var(--ink); }
/* Puce de 8px reprise de la maquette, en --jade-deep comme le point de
   .dotlink : sur blanc, le vert vif ne tient pas. */
.prose__list li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--jade-deep);
}

/* --- Tableau de comparaison ---------------------------------------------- */
/* Le rayon de la maquette est 12, hors échelle du site : on prend le cran le
   plus proche, --r-inner. overflow: hidden pour que les coins rognent la
   ligne d'en-tête sombre. */
.cmp-wrap { border: 1px solid var(--line); border-radius: var(--r-inner); overflow: hidden; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; text-align: left; }
.cmp th, .cmp td { padding: var(--s-4); vertical-align: top; line-height: 1.5; }
.cmp thead th { background: var(--ink); color: var(--paper); font-weight: 700; }
.cmp tbody th { width: 200px; color: var(--ink); font-weight: 700; }
.cmp tbody td { color: var(--ink); }
.cmp tbody tr { border-bottom: 1px solid var(--line); }
.cmp tbody tr:last-child { border-bottom: 0; }
/* Une ligne sur deux en creux, comme dans la maquette. */
.cmp tbody tr:nth-child(even) { background: var(--surface); }

/* --- Encadré conseil ----------------------------------------------------- */
/* La maquette le pose sur un lavis vert. Ici la couleur reste réservée à ce
   qui se clique (voir l'en-tête de tokens.css) : le fond est --surface, et ce
   sont le rail de 4px et la pastille qui portent le vert. */
.callout {
  display: flex; align-items: flex-start; gap: var(--s-4);
  background: var(--surface);
  border-left: 4px solid var(--jade);
  border-radius: var(--r-inner);
  padding: var(--s-6);
}
.callout__mark {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-round);
  display: grid; place-items: center;
  background: var(--jade); color: var(--ink);
}
.callout__mark svg { width: 18px; height: 18px; }
.callout__body { display: flex; flex-direction: column; gap: var(--s-2); }
.callout__body b { font-size: var(--t-body); font-weight: 700; color: var(--ink); }
.callout__body p { margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--ink); }

/* --- Articles similaires ------------------------------------------------- */
/* Mêmes déclarations que .head h2, les titres de section de la home, interligne
   et équilibrage des lignes compris : depuis « Ces articles pourraient vous
   intéresser », le titre se replie sur les largeurs moyennes. */
.related h2 {
  font-size: var(--t-h2); font-weight: var(--fw-title);
  letter-spacing: 0; line-height: 1.2;
  color: var(--ink); margin: 0 0 var(--s-10); text-wrap: balance;
}
.rcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
/* Même grammaire que les cartes de rubrique de la home (demande du 15/08) :
   photo arrondie, titre et texte posés dessous à même le fond de page, sans
   panneau gris. Trois éléments retirés au passage : la pastille de rubrique sur
   la photo, la flèche que portent les cartes de rubrique, et le repère « Lire
   l'article ». Le titre reste le seul lien, et il couvre toute la carte. */
/* Colonne flexible, et repère de lecture poussé en pied par sa marge
   automatique (voir plus bas) : c'est ce qui aligne les « Lire l'article » d'une
   même rangée quelle que soit la longueur des titres et des chapôs. Les cartes
   d'une rangée de grille s'étirent à la hauteur de la plus haute, la marge
   automatique absorbe donc la différence. Sans ça, chaque repère flottait à la
   hauteur où finissait son propre texte. */
.rcard { position: relative; display: flex; flex-direction: column; }
/* Indispensable dès que la ligne au-dessus fixe un display : l'attribut hidden
   ne repose que sur la feuille du navigateur, et n'importe quelle déclaration
   d'auteur passe devant. Constaté le 15/08 avec le filtre des articles
   populaires, qui changeait d'état sans rien masquer. Le filtre a disparu le
   18/08 avec le passage aux quatre sections de rubrique ; la règle reste, elle
   garde son sens pour toute carte qu'un script viendrait masquer. */
.rcard[hidden] { display: none; }
.rcard__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
/* min-height: 0 est indispensable, pas décoratif : en tant qu'élément flexible,
   ce bloc reçoit une hauteur minimale automatique calculée sur la taille
   naturelle de la photo qu'il contient. Sans ce zéro, une photo plus haute que
   large étire son cadre et les trois cartes de la rangée n'ont plus la même
   hauteur de visuel. Constaté le 15/08 avec ment-2.jpg (700x620), qui poussait
   son cadre à 363px au lieu des 278 du rapport 384/260. */
/* Déclaration alignée sur .rubric__media de la home, à la propriété près : même
   rayon, même rognage, même fond d'attente, même traitement de la photo. Le
   rayon et le overflow étaient portés par le panneau de la carte : en retirant
   le panneau le 15/08, la photo s'est retrouvée à angles droits. */
.rcard__media { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 384 / 260; min-height: 0; background: var(--night-2); }
.rcard__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
/* Le dégradé qui portait la pastille a sauté avec elle. Reste le calque de
   voile commun à .rubric__media, .tile et .stack : --veil est transparent
   aujourd'hui, redonner une valeur au jeton le rétablit partout d'un coup. */
.rcard__media::after { content: ''; position: absolute; inset: 0; background: var(--veil); }
/* Mêmes marges que .rubric h3 sur la home : 20 au-dessus, 8 en dessous. */
.rcard h3 { font-size: var(--t-h3); font-weight: var(--fw-title-sm); letter-spacing: 0; line-height: 1.3; color: var(--ink); margin: var(--s-5) 0 var(--s-2); text-wrap: balance; }
/* La marge basse du chapô est l'écart minimal avant le repère de lecture : elle
   ne peut pas vivre sur le repère lui-même, dont la marge haute est occupée par
   le auto qui l'envoie en pied. */
.rcard p { margin: 0 0 var(--s-4); font-size: var(--t-body); color: var(--muted); }
/* Repère de lecture, et non un second lien : .rcard__link couvre déjà toute la
   carte, deux liens vers la même cible feraient doublon au clavier comme au
   lecteur d'écran. Même composant et même mot que le .tile__more du bento, donc
   même point qui grossit au survol. C'est lui qui dit que la carte se clique,
   la flèche des cartes de rubrique ayant été retirée. */
.rcard .dotlink { margin-top: auto; }
.rcard .dotlink::after { transition: transform .25s ease; }
.rcard:hover .dotlink::after { transform: scale(1.6); }

@media (max-width: 1023px) {
  /* Le sommaire passe au-dessus du texte et cesse d'être collé : sur une seule
     colonne, il resterait accroché en haut pendant toute la lecture. */
  .post__split { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .post__media { aspect-ratio: 16 / 9; }
  .rcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .post__meta { gap: var(--s-5); }
  .post__facts { gap: var(--s-4); }
  .rcards { grid-template-columns: minmax(0, 1fr); }
  /* Le tableau défile dans son cadre plutôt que de pousser la page en
     largeur : cinq lignes sur trois colonnes ne tiennent pas sous 560. */
  .cmp-wrap { overflow-x: auto; }
  .cmp { min-width: 560px; }
}

/* =========================================================================
   10 · GRILLES DE RUBRIQUE : quatre cartes, puis l'accès aux archives
   ========================================================================= */
/* Quatre sections identiques depuis le 18/08, une par sujet du blog, à la place
   de « Les articles les plus lus » et de ses onglets de filtrage. Les règles
   .pop__tabs, .ptab et .pop__vide n'ont plus d'objet et ont été retirées ; elles
   sont archivées avec le balisage dans
   _refs/section-populaires-onglets-retiree-2026-08-18.html.
   Les cartes ne sont pas un nouveau composant : ce sont les .rcard de la
   section 09, à l'identique. */

/* Quatre colonnes pour quatre cartes, soit une rangée pleine par rubrique.
   Déclaré après la section 09 : à spécificité égale, ce sont ces règles qui
   l'emportent sur celles de .rcards. */
.rcards--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Lien de fin de section. Même geste que .latest__all : posé à droite, à
   l'aplomb de la dernière carte de la grille. L'écart au-dessus est plus large
   que celui des cartes entre elles, pour que le lien se lise comme la fermeture
   de la section et non comme une cinquième carte. */
.section__all { display: flex; justify-content: flex-end; padding-top: var(--s-10); }

@media (max-width: 1199px) { .rcards--quad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .rcards--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sur téléphone la grille tombe à une colonne : le lien de fin n'a plus de
   dernière carte à droite dont il tiendrait l'aplomb, et il se retrouvait seul
   contre le bord opposé au titre de la section. Il passe donc du même côté que
   le titre, où toute la colonne est déjà alignée. */
@media (max-width: 767px)  {
  .rcards--quad { grid-template-columns: minmax(0, 1fr); }
  /* Passer le lien à gauche ne suffit pas à l'aligner : son libellé est en
     retrait du bord du bouton, des 6px de padding de la pilule plus les 12px
     du span qui porte le texte. Le bloc est donc tiré de ces 18px, et c'est le
     mot qui tombe à l'aplomb du titre, pas la boîte invisible autour. */
  .section__all {
    justify-content: flex-start;
    margin-inline-start: calc(-1 * (var(--ctl-btn-pad) + var(--s-3)));
  }
}