/* ══════════════════════════════════════════════════════════════════
   DOAKEN — COMPOSITION D'ARTICLE
   Référence : la page d'accueil et les pages /fonctionnalites/.
   Principe : un article n'est pas une colonne, c'est une SUITE DE BANDES
   pleine largeur. Le fond alterne, chaque chapitre s'annonce, l'appareil
   (encadrés, chiffres, preuves) sort du fil de lecture et vit dans la marge.
   Aucune marge morte : la bande occupe toute la largeur, comme sur l'accueil.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --art-lecture: 760px;     /* colonne de lecture — ~68 signes */
  --art-appareil: 320px;    /* colonne d'appareil, à droite */
  --art-gouttiere: 56px;
  --art-bord: 48px;         /* respiration latérale — celle de l'accueil */
  --art-bord-g: 48px;       /* bord GAUCHE : s'élargit pour loger le rail */
  --art-sol-clair: #F6F9FC;
  --art-sol-bleu: #EAF1F8;
  --art-sol-nuit: #001A3D;
  --art-trait: #DCE6F2;
}

/* ─────────── LE FIL ─────────── */

.art { display: block; width: 100%; }

/* Une bande = un chapitre. Pleine largeur, fond propre.
   TROIS registres, pas quatre : le #F6F9FC d'origine était à 1,057 de contraste
   contre le blanc — invisible. Un fond qu'on ne voit pas n'est pas un registre. */
.chap {
  position: relative;
  width: 100%;
  padding: 34px var(--art-bord) 76px var(--art-bord-g);
  --sol: #FFFFFF;              /* le sol de la bande, relu par le filet de cote */
  --filet: #D6E2EF;
  background: var(--sol);
}
.chap--bleu { --sol: var(--art-sol-bleu); --filet: #C3D6E9; }
.chap--nuit { --sol: var(--art-sol-nuit); --filet: rgba(255,255,255,.22); color: #E6EDF7; }
/* sur fond nuit, les titres passent en blanc — sélecteurs assez forts pour
   battre .chap-head h2 et .chap-corps h3, sinon le titre disparaît dans le fond */
.chap--nuit .chap-head h2,
.chap--nuit .chap-corps h3,
.chap--nuit h2, .chap--nuit h3, .chap--nuit strong { color: #FFFFFF; }
.chap--nuit .chap-eyebrow { color: #7FB3E0; }
.chap--nuit .preuve-duo p { margin-bottom: 18px; }

/* ─────────── LE FILET DE COTE ───────────
   Un trait de 1 px qui traverse d'un bord de l'écran à l'autre, portant le
   numéro et l'étiquette à gauche, le rang du chapitre à droite. Le trait
   s'interrompt sous les libellés — comme une ligne de cote sur un plan.
   C'est le premier élément de l'article qui touche vraiment les deux bords :
   c'est lui qui donne un sens à la pleine largeur. */

.chap-cote {
  position: relative;
  margin: 0 calc(var(--art-bord) * -1) 44px calc(var(--art-bord-g) * -1);
  padding: 0 var(--art-bord) 0 var(--art-bord-g);
  height: 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.chap-cote::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--filet);
}
.cote-g, .cote-d {
  position: relative;
  background: var(--sol);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: #7A8CA6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cote-g { padding-right: 20px; }
.cote-d { padding-left: 20px; }
.cote-g b {
  color: #C2470F; font-weight: 700; margin-right: 10px; letter-spacing: .06em;
}
.chap--bleu .cote-g b { color: #B8420E; }
.chap--nuit .cote-g, .chap--nuit .cote-d { color: #7F9BBB; }
.chap--nuit .cote-g b { color: #FF8A5C; }

/* ─────────── L'OUVERTURE DE CHAPITRE ─────────── */

.chap-head {
  max-width: calc(var(--art-lecture) + var(--art-gouttiere) + var(--art-appareil));
  margin: 0 auto 36px;
}
.chap-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C2470F;
  margin-bottom: 8px;
}
.chap-head h2 {
  font-family: var(--font-display, 'Sentient', serif);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #001A3D;
  text-wrap: balance;
  margin: 0;
  border: 0; padding: 0;
}
.chap-chapo {
  margin-top: 14px;
  font-size: 19px;
  line-height: 1.6;
  color: #4A5A7A;
  max-width: 62ch;
}
.chap--nuit .chap-chapo { color: #A9C4E0; }

/* ─────────── LE CORPS : lecture + appareil ─────────── */

.chap-corps {
  max-width: calc(var(--art-lecture) + var(--art-gouttiere) + var(--art-appareil));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, var(--art-lecture)) var(--art-appareil);
  column-gap: var(--art-gouttiere);
  align-items: start;
}
/* tout ce qui n'est pas marqué « appareil » reste dans la colonne de lecture */
.chap-corps > * { grid-column: 1; }
.chap-corps > .apparat { grid-column: 2; }

/* ─── GRAND ÉCRAN : la LECTURE se centre, l'appareil vit dans la marge ───
   Avec deux colonnes seulement, c'est le bloc « lecture + appareil » qui est
   centré : le texte se retrouvait décalé de 188 px vers la gauche, et un grand
   vide s'ouvrait à droite. Une marge fantôme à gauche, symétrique de la marge
   d'appareil, remet la colonne de lecture au centre de la page.
   Tout ce qui est large part du même bord gauche et s'étend vers la droite :
   une seule trame, pas deux alignements concurrents. */
@media (min-width: 1460px) {
  .chap-corps {
    max-width: none;
    grid-template-columns:
      minmax(0, calc(var(--art-gouttiere) + var(--art-appareil)))
      var(--art-lecture)
      minmax(0, calc(var(--art-gouttiere) + var(--art-appareil)));
    column-gap: 0;
    justify-content: center;
  }
  .chap-corps > * { grid-column: 2; }
  .chap-corps > .apparat { grid-column: 3; padding-left: var(--art-gouttiere); }
  .chap-corps > .large,
  .chap-corps > .grille--large { grid-column: 2 / 4; }

  /* les blocs qui vivent hors du corps s'alignent sur la même trame */
  .chap-head, .art-sommaire-plie {
    max-width: var(--art-lecture);
    margin-left: auto; margin-right: auto;
  }
  .preuve-duo, .sortie-offre, .sortie-grid, .chap-pleine {
    max-width: none;
    margin-left: calc(50% - var(--art-lecture) / 2);
    margin-right: 0;
    width: calc(50% + var(--art-lecture) / 2);
  }
}

.chap-corps p {
  font-size: 17.5px;
  line-height: 1.72;
  color: #2C3E5C;
  margin: 0 0 20px;
}
.chap--nuit .chap-corps p { color: #C3D5E8; }
.chap-corps h3 {
  font-family: var(--font-display, 'Sentient', serif);
  font-size: 22px;
  line-height: 1.3;
  color: #001A3D;
  margin: 34px 0 14px;
  letter-spacing: -.01em;
}
.chap-corps a { color: #003D7A; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.chap-corps a:hover { color: #FF6B35; }
.chap--nuit .chap-corps a { color: #8FC2EC; }

/* ─────────── L'APPAREIL (colonne de droite) ─────────── */

/* La note de marge s'ancre en HAUT du passage qu'elle commente.
   Elle n'occupe QUE la première rangée : si elle réservait toute la colonne
   de droite, aucun objet pleine largeur ne pourrait plus se placer et un vide
   s'ouvrait à gauche. Une note par chapitre, pas davantage. */
.apparat {
  align-self: start;
  border-left: 2px solid #FF6B35;
  padding: 2px 0 2px 18px;
}
/* Pas de rangée imposée : la note se place là où le DOM la met, donc à côté
   du passage qu elle commente. C est la position dans le texte qui décide. */
.chap-corps > .apparat { align-self: start; }
.apparat-titre {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: #C2470F; margin-bottom: 8px;
}
.apparat p { font-size: 15px !important; line-height: 1.62 !important; color: #4A5A7A !important; margin: 0 0 12px !important; }
.apparat--vigilance { border-left-color: #A3300A; }
.apparat--vigilance .apparat-titre { color: #A3300A; }
.apparat--reperе, .apparat--repere { border-left-color: #003D7A; }
.apparat--repere .apparat-titre { color: #003D7A; }
.chap--nuit .apparat p { color: #A9C4E0 !important; }

/* le chiffre isolé, dans la marge */
.apparat-chiffre {
  display: block;
  font-family: var(--font-display, 'Sentient', serif);
  font-size: 40px; line-height: 1; font-weight: 700;
  color: #001A3D; margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.chap--nuit .apparat-chiffre { color: #FFFFFF; }

/* ─────────── LES LISTES DEVIENNENT DES OBJETS ─────────── */

/* grille de notions — remplace une liste à puces de définitions.
   C'est un <ul> : la sémantique de liste est ce que lisent les moteurs IA et
   les lecteurs d'écran. On enlève la puce, pas la nature. */
.grille, .profils { list-style: none; margin-left: 0; padding-left: 0; }
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 14px;
  margin: 6px 0 26px;
}
/* une échelle de notation se lit en UNE rangée : 0 → 5 */
.grille--echelle { grid-template-columns: repeat(6, 1fr); gap: 10px; }
.grille--echelle .grille-item { padding: 14px; }
@media (max-width: 1100px) { .grille--echelle { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .grille--echelle { grid-template-columns: repeat(2, 1fr); } }
.grille-item {
  background: #FFFFFF;
  border: 1px solid var(--art-trait);
  border-radius: 12px;
  padding: 16px 18px;
}
.chap--clair .grille-item, .chap--bleu .grille-item { background: #FFFFFF; }
.chap--nuit .grille-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.grille-item b {
  display: block; font-size: 15px; color: #001A3D; margin-bottom: 5px; font-weight: 650;
}
.chap--nuit .grille-item b { color: #FFFFFF; }
.grille-item span { display: block; font-size: 14px; line-height: 1.55; color: #5A6B85; }
.chap--nuit .grille-item span { color: #A9C4E0; }

/* ─── LES TROIS LARGEURS, déclarées une fois pour toutes ───
   .lecture (défaut)  : la colonne de texte
   .large             : traverse la colonne ET la marge d'appareil
   .chap-pleine       : enfant direct de la bande, toute la largeur utile      */
.chap-corps > .large,
.chap-corps > .grille--large { grid-column: 1 / -1; }
.chap-pleine {
  max-width: 100%;
  margin: 0 auto 30px;
}

/* pondérations — des barres, pas des pourcentages en liste */
/* pas de largeur bâtarde : la série de barres épouse sa colonne de grille */
.ponder { display: grid; gap: 10px; margin: 6px 0 26px; }
.ponder-ligne { display: grid; grid-template-columns: 200px 1fr 48px; align-items: center; gap: 14px; }
.ponder-nom { font-size: 15px; color: #2C3E5C; }
.ponder-piste { height: 10px; border-radius: 99px; background: #DCE6F2; overflow: hidden; }
.chap--nuit .ponder-piste { background: rgba(255,255,255,.12); }
.ponder-part { display: block; height: 100%; border-radius: 99px; background: #003D7A; }
.ponder-ligne[data-ton="accent"] .ponder-part { background: #FF6B35; }
.ponder-ligne[data-ton="doux"]   .ponder-part { background: #5DA4D4; }
.ponder-val { font-size: 14px; font-weight: 650; color: #001A3D; text-align: right; font-variant-numeric: tabular-nums; }
.chap--nuit .ponder-nom, .chap--nuit .ponder-val { color: #E6EDF7; }

/* jeu de trois profils de marché côte à côte */
.profils { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 6px 0 28px; }
.profil { background: #FFFFFF; border: 1px solid var(--art-trait); border-radius: 14px; padding: 20px; }
.profil-nom { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #003D7A; margin-bottom: 14px; }
/* dans une carte de profil, la barre passe SOUS le libellé, sur deux rangs.
   Les positions sont EXPLICITES : sans ça, la valeur tombe sur un 3e rang. */
.profil .ponder { gap: 14px; }
.profil .ponder-ligne { grid-template-columns: 1fr auto; row-gap: 6px; }
.profil .ponder-nom  { grid-row: 1; grid-column: 1; font-size: 14.5px; }
.profil .ponder-val  { grid-row: 1; grid-column: 2; }
.profil .ponder-piste{ grid-row: 2; grid-column: 1 / -1; height: 8px; }

/* la formule, posée comme une formule */
.formule {
  background: #001A3D; color: #FFFFFF;
  border-radius: 14px; padding: 22px 26px;
  margin: 6px 0 24px;
  font-family: var(--font-body, 'Geist', sans-serif);
}
.chap--nuit .formule { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.formule-label { display: block; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: #7FB3E0; margin-bottom: 10px; }
.formule-corps { font-size: 19px; line-height: 1.5; font-weight: 500; }
.formule-corps em { color: #FF9A6B; font-style: normal; }

/* un calcul chiffré, en colonnes alignées */
.calcul { width: 100%; border-collapse: collapse; margin: 6px 0 26px; font-variant-numeric: tabular-nums; }
.calcul th, .calcul td { text-align: left; padding: 11px 14px; font-size: 15px; border-bottom: 1px solid var(--art-trait); }
.calcul th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #5A6B85; font-weight: 650; }
.calcul td:last-child, .calcul th:last-child { text-align: right; font-weight: 650; color: #001A3D; }
.calcul tr[data-gagnant] td { background: rgba(255,107,53,.07); }
.calcul tr[data-gagnant] td:last-child { color: #C2410C; }
.chap--nuit .calcul th, .chap--nuit .calcul td { border-bottom-color: rgba(255,255,255,.13); color: #C3D5E8; }
.chap--nuit .calcul td:last-child { color: #FFFFFF; }

/* liste de contrôle — ce qu'on vérifie, pas une puce ronde */
/* Le texte de la puce reste du TEXTE : pas de grille sur le <li>, sinon chaque
   <strong> devient une case et les mots s'empilent. La marque est en absolu. */
.controle { list-style: none; margin: 6px 0 26px; padding: 0; }
.controle li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
  font-size: 16.5px; line-height: 1.62; color: #2C3E5C;
}
.controle li::before {
  content: ''; position: absolute; left: 0; top: 5px;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid #FF6B35;
  background: linear-gradient(135deg, transparent 47%, #FF6B35 47%, #FF6B35 53%, transparent 53%);
}
.controle--interdit li::before { border-color: #A3300A; background: none; }
.controle li strong { color: #001A3D; font-weight: 650; }
.chap--nuit .controle li strong { color: #FFFFFF; }
.chap--nuit .controle li { color: #C3D5E8; }

/* ─────────── LE SOMMAIRE ───────────
   Le rail flottant a été retiré : posé en `fixed` sur une composition qui
   traverse d'un bord à l'autre, il n'avait aucune place réservée et passait
   PAR-DESSUS le filet de cote, le titre et l'image de couverture. Il redisait
   par ailleurs ce que le filet affiche déjà en bout de ligne (« 04 / 08 ») et
   ce que la barre de progression donne en haut. Le sommaire de l'ouverture,
   cliquable, suffit. */
.art-sommaire-plie { margin: 0 auto; }

/* ─────────── LE MOMENT DE PREUVE (bande nuit) ─────────── */

.preuve-duo {
  max-width: calc(var(--art-lecture) + var(--art-gouttiere) + var(--art-appareil));
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
/* PAS de fenêtre Mac à trois pastilles : la doctrine visuelle l'interdit
   nommément (§12). Ce qu'on montre, c'est le GESTE du produit — un document
   illisible dont sortent des étiquettes lisibles. */
.preuve-ecran {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px; padding: 20px;
}
.preuve-ecran-titre {
  display: block; font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: #7FB3E0; margin-bottom: 16px;
}
.preuve-ligne { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14.5px; color: #C3D5E8; }
.preuve-ligne:last-child { border-bottom: 0; }
.preuve-ligne b { color: #FFFFFF; font-variant-numeric: tabular-nums; font-weight: 650; }
.preuve-source { display: block; margin-top: 14px; font-size: 12px; color: #7F97B5; }

/* ─────────── CLÔTURE ─────────── */

.chap--sortie { background: #FFFFFF; }
.sortie-grid {
  max-width: calc(var(--art-lecture) + var(--art-gouttiere) + var(--art-appareil));
  margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}

/* ─────────── LARGEURS INTERMÉDIAIRES ─────────── */

/* En dessous du seuil où l appareil tient en marge, on ne garde PAS un bloc
   décentré : la note repasse dans le fil et la lecture reste centrée. */
@media (max-width: 1459px) {
  .chap-corps { grid-template-columns: minmax(0, 1fr); }
  .chap-corps > .apparat { grid-column: 1; position: static; margin: 4px 0 26px; }
  .chap-head, .chap-corps, .preuve-duo, .sortie-grid, .art-sommaire-plie { max-width: 780px; }
  .preuve-duo, .sortie-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 760px) {
  :root { --art-bord: 20px; }
  .chap { padding: 48px var(--art-bord); }
  .chap-head { grid-template-columns: 1fr; row-gap: 6px; margin-bottom: 26px; }
  .chap-n { font-size: 34px; }
  .ponder-ligne { grid-template-columns: 1fr auto; row-gap: 6px; }
  .ponder-nom   { grid-row: 1; grid-column: 1; }
  .ponder-val   { grid-row: 1; grid-column: 2; }
  .ponder-piste { grid-row: 2; grid-column: 1 / -1; }
  .grille { grid-template-columns: 1fr; }
  .calcul { display: block; overflow-x: auto; }
  .formule-corps { font-size: 16.5px; }
}

/* sur le sol bleu, l'étiquette a besoin d'un cran de plus pour rester lisible */
.chap--bleu .chap-eyebrow, .chap--bleu .apparat-titre { color: #B8420E; }

/* ─────────── LA FAQ, VISIBLE ───────────
   Le schéma FAQPage existait dans le code sans AUCUNE contrepartie sur la page :
   Google peut ignorer un balisage qui ne reflète pas du contenu visible, et les
   moteurs IA n'avaient rien à extraire. Les questions vivent maintenant à l'écran,
   mot pour mot identiques au balisage. */
.faq-liste { list-style: none; margin: 0; padding: 0; max-width: 100%; }
.faq-item { border-top: 1px solid var(--filet); padding: 22px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--filet); }
.faq-item h3 {
  font-family: var(--font-display, 'Sentient', serif);
  font-size: 20px; line-height: 1.32; color: #001A3D;
  margin: 0 0 10px; letter-spacing: -.01em;
}
.faq-item p { font-size: 16.5px; line-height: 1.68; color: #4A5A7A; margin: 0; max-width: 74ch; }

/* ─────────── LE PARAGRAPHE-RÉPONSE ───────────
   Format qu'extraient les moteurs génératifs : une réponse autonome de 40 à 80
   mots, en tête, sans titre. Discret à l'œil, décisif pour la citation. */
.reponse-directe {
  border-left: 3px solid #C2470F;
  background: #F4F8FC;
  padding: 20px 24px;
  border-radius: 0 10px 10px 0;
  margin: 0 0 28px;
}
.reponse-directe p {
  font-size: 17px !important; line-height: 1.65 !important;
  color: #22364F !important; margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   LES SORTIES
   La feuille de composition ne contenait AUCUN composant d'appel à
   l'action : elle savait afficher de l'information, pas demander quelque
   chose au lecteur. Mesuré : 956 clics pour 6 clics de bouton et 0 demande.
   Quatre sorties, chacune à un moment où le lecteur a une raison de bouger.
   ══════════════════════════════════════════════════════════════════ */

.bouton {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 10px;
  font-size: 15px; font-weight: 600;
  text-decoration: none !important;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bouton--plein { background: #FF6B35; color: #FFFFFF !important; }
.bouton--plein:hover { background: #E85A26; color: #FFFFFF !important; }
.bouton--ligne { background: transparent; border-color: #003D7A; color: #003D7A !important; }
.bouton--ligne:hover { background: #003D7A; color: #FFFFFF !important; }
.chap--nuit .bouton--ligne { border-color: rgba(255,255,255,.5); color: #FFFFFF !important; }
.chap--nuit .bouton--ligne:hover { background: rgba(255,255,255,.12); }
.bouton--discret {
  padding: 9px 0; border: 0; border-bottom: 1.5px solid #C2470F; border-radius: 0;
  color: #C2470F !important; font-size: 14px;
}
.bouton--discret:hover { color: #A3300A !important; border-bottom-color: #A3300A; }

/* La sortie n° 1 : dans la marge, discrète, au moment du calcul */
.apparat .bouton { margin-top: 4px; }

/* La sortie n° 4 : le bloc de fin. Le lecteur qui a tout lu est le plus
   qualifié de la session — jusqu'ici on ne lui proposait QUE de lire un
   autre article. */
.sortie-offre {
  background: #001A3D;
  border-radius: 18px;
  padding: 40px 44px;
  margin: 0 auto 44px;
  max-width: calc(var(--art-lecture) + var(--art-gouttiere) + var(--art-appareil));
}
.sortie-offre h3 {
  font-family: var(--font-display, 'Sentient', serif);
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18;
  color: #FFFFFF; margin: 0 0 12px; letter-spacing: -.015em;
  text-wrap: balance;
}
.sortie-offre p { font-size: 17px; line-height: 1.62; color: #A9C4E0; margin: 0 0 26px; max-width: 60ch; }
.sortie-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* La capture d'email : on branche la machinerie déjà en ligne (/api/lead-magnet) */
.capture { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.capture input[type="email"] {
  flex: 1 1 260px; min-width: 0;
  padding: 13px 16px; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.07); color: #FFFFFF;
  font-family: inherit; font-size: 15px;
}
.capture input[type="email"]::placeholder { color: #7F9BBB; }
.capture input[type="email"]:focus { outline: 2px solid #FF6B35; outline-offset: 1px; border-color: transparent; }
.capture-note { flex: 1 1 100%; font-size: 13.5px; color: #7F9BBB; margin: 4px 0 0; }
.capture-note[data-etat="ok"] { color: #7FD6A8; }
.capture-note[data-etat="ko"] { color: #FF9E7A; }

@media (max-width: 760px) {
  .sortie-offre { padding: 30px 22px; border-radius: 14px; }
  .sortie-actions { flex-direction: column; align-items: stretch; }
  .sortie-actions .bouton { text-align: center; }
}

/* le bloc d'offre est sur fond nuit sans porter .chap--nuit :
   ses boutons secondaires doivent passer en blanc, sinon bleu sur bleu */
.sortie-offre .bouton--ligne { border-color: rgba(255,255,255,.55); color: #FFFFFF !important; }
.sortie-offre .bouton--ligne:hover { background: rgba(255,255,255,.14); border-color: #FFFFFF; }

/* ══════════════════════════════════════════════════════════════════
   LES OBJETS DU MÉTIER
   Un bon média économique n'illustre pas : il diagramme. Ces objets sont
   dessinés en HTML/CSS, ils ne pèsent rien, et ils viennent du sujet.
   ══════════════════════════════════════════════════════════════════ */

/* ─── LE DOCUMENT MUET ───
   Le texte n'est pas écrit : ce sont des barres. On voit qu'il y a un document,
   on ne lit rien. Ce qui se voit, c'est le rapport entre le volume à lire et
   le seul endroit qui décide du marché. */
.doc-muet {
  display: flex; align-items: flex-start; gap: clamp(5px, .9vw, 11px);
  margin: 8px 0 0; padding: 0; list-style: none;
}
.doc-page {
  flex: 1 1 0; min-width: 0;
  aspect-ratio: 210 / 297;
  background: #FFFFFF;
  border-radius: 2px;
  box-shadow: 0 8px 22px rgba(0, 26, 61, .10);
  padding: clamp(5px, .8vw, 10px);
  display: flex; flex-direction: column; gap: clamp(3px, .45vw, 5px);
  position: relative;
}
.doc-ligne { height: clamp(2px, .35vw, 4px); border-radius: 2px; background: #E4EAF2; }
.doc-ligne:nth-child(3n)   { width: 72%; }
.doc-ligne:nth-child(5n)   { width: 88%; }
.doc-ligne:nth-child(7n)   { width: 60%; }
.doc-ligne.saut            { background: none; height: clamp(4px, .7vw, 8px); }
.doc-ligne.retenue         { background: #FF6B35; }
.doc-page--retenue         { box-shadow: 0 12px 30px rgba(255, 107, 53, .26); }

/* la légende recopie la grille du document : l'accolade tombe pile sous la
   page retenue, et le texte part de là — pas du bord gauche. */
.doc-legende {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(5px, .9vw, 11px);
  font-size: 15px; color: #4A5A7A;
}
.doc-accolade {
  grid-column: 7; grid-row: 1;
  height: 14px;
  border: 1.5px solid #FF6B35; border-top: 0;
  border-radius: 0 0 6px 6px;
}
.doc-legende p { grid-column: 7 / -1; grid-row: 2; margin: 10px 0 0 !important; }
.doc-legende b { color: #001A3D; font-weight: 650; }
.chap--nuit .doc-page { background: rgba(255,255,255,.9); }
.chap--nuit .doc-legende { color: #A9C4E0; }
.chap--nuit .doc-legende b { color: #FFFFFF; }

/* ─── L'ESCALIER DE NOTATION ───
   Une échelle qui monte dessinée en cases égales dit le contraire de son fond.
   Ici la hauteur porte l'information, et le 0 est un creux, pas une marche. */
.escalier {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; align-items: end;
  margin: 10px 0 0; padding: 0; list-style: none;
  min-height: 210px;
}
.marche { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.marche-bloc {
  border-radius: 8px 8px 0 0;
  background: #C7D6E6;
  padding: 12px 12px 10px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
}
.marche[data-n="0"] .marche-bloc {
  background: none;
  border: 1.5px dashed #A3300A; border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.marche[data-n="3"] .marche-bloc { background: #5DA4D4; }
.marche[data-n="4"] .marche-bloc { background: #003D7A; }
.marche[data-n="5"] .marche-bloc { background: #001A3D; box-shadow: inset 0 4px 0 #FF6B35; }
.marche-n {
  font-family: var(--font-display, 'Sentient', serif);
  font-size: 26px; line-height: 1; font-weight: 700; color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.marche[data-n="0"] .marche-n, .marche[data-n="1"] .marche-n, .marche[data-n="2"] .marche-n { color: #40536F; }
.marche[data-n="0"] .marche-n { color: #A3300A; }
.marche-nom { font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.88); font-weight: 600; }
.marche[data-n="0"] .marche-nom, .marche[data-n="1"] .marche-nom, .marche[data-n="2"] .marche-nom { color: #40536F; }
.marche[data-n="0"] .marche-nom { color: #A3300A; }
.marche-pied {
  border-top: 1.5px solid #001A3D;
  padding-top: 8px; margin-top: 0;
  font-size: 12.5px; line-height: 1.35; color: #5A6B85;
}
.escalier-legendes {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-top: 10px; font-size: 13px; color: #5A6B85;
}
.escalier-legendes span { grid-column: span 2; }
.escalier-legendes span:first-child { color: #A3300A; grid-column: span 1; }

@media (max-width: 700px) {
  .escalier { grid-template-columns: repeat(3, 1fr); min-height: 0; }
  .escalier-legendes { display: none; }
  .marche-bloc { min-height: 92px; }
}

/* ─── LE SIMULATEUR DE NOTE ───
   Le seul endroit de l'article où le lecteur entre SES chiffres. Aucun chiffre
   de marché écrit en dur : tout part de sa saisie. Sans JavaScript, le tableau
   statique reste lisible et juste — le widget ne fait que le remplacer. */
.simu {
  background: #001A3D;
  border-radius: 18px;
  padding: 32px 34px;
  margin: 10px 0 8px;
  color: #E6EDF7;
}
.simu-titre {
  font-family: var(--font-display, 'Sentient', serif);
  font-size: 23px; line-height: 1.25; color: #FFFFFF;
  margin: 0 0 6px; letter-spacing: -.01em;
}
.simu-sous { font-size: 15px; color: #A9C4E0; margin: 0 0 24px; }
.simu-reglages { display: grid; gap: 20px; margin-bottom: 26px; }
.simu-champ label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14.5px; color: #C3D5E8; margin-bottom: 8px; gap: 16px;
}
.simu-champ label b {
  color: #FFFFFF; font-size: 16px; font-weight: 650;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.simu-champ input[type="range"] {
  width: 100%; height: 6px; border-radius: 99px; appearance: none;
  background: rgba(255,255,255,.18); cursor: pointer;
}
.simu-champ input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #FF6B35; border: 3px solid #001A3D; cursor: grab;
}
.simu-champ input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #FF6B35; border: 3px solid #001A3D; cursor: grab;
}
.simu-champ input[type="range"]:focus-visible { outline: 2px solid #FF6B35; outline-offset: 6px; }

.simu-resultat {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center;
  border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px;
}
.simu-camp { text-align: center; }
.simu-camp span { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #7F9BBB; margin-bottom: 8px; }
.simu-camp b {
  display: block;
  font-family: var(--font-display, 'Sentient', serif);
  font-size: clamp(34px, 4.4vw, 52px); line-height: 1; font-weight: 700;
  color: #FFFFFF; font-variant-numeric: tabular-nums;
}
.simu-camp small { display: block; font-size: 13px; color: #7F9BBB; margin-top: 6px; }
.simu-camp[data-gagnant="oui"] b { color: #6FD79E; }
.simu-camp[data-gagnant="non"] b { color: #FFFFFF; }
.simu-vs { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #5C7899; text-align: center; }
.simu-verdict {
  grid-column: 1 / -1;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 17px; line-height: 1.55; color: #FFFFFF;
}
.simu-verdict[data-issue="rattrapable"] { color: #8FE3B6; }
.simu-verdict[data-issue="perdu"] { color: #FFAE8E; }
.simu-pied { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.simu-pied .bouton--ligne { border-color: rgba(255,255,255,.55); color: #FFFFFF !important; }
.simu-pied .bouton--ligne:hover { background: rgba(255,255,255,.14); }

@media (max-width: 700px) {
  .simu { padding: 24px 20px; border-radius: 14px; }
  .simu-resultat { grid-template-columns: 1fr; gap: 18px; }
  .simu-vs { display: none; }
}

/* .chap-corps p impose sa couleur aux paragraphes du simulateur : on la reprend
   avec un sélecteur au moins aussi fort, sinon le titre disparaît dans le fond. */
.simu .simu-titre { color: #FFFFFF; }
.simu .simu-sous { color: #A9C4E0; }
.simu .simu-verdict { color: #FFFFFF; }
.simu .simu-verdict[data-issue="rattrapable"] { color: #8FE3B6; }
.simu .simu-verdict[data-issue="perdu"] { color: #FFAE8E; }
.simu .simu-verdict[data-issue="serre"] { color: #FFD9A0; }

/* ─── Contraste : ce qui a été mesuré trop faible ───
   Le filet de cote et la marche 3 passaient sous le seuil de lisibilité. */
.cote-g, .cote-d { color: #5B6E8A; }
.chap--nuit .cote-g, .chap--nuit .cote-d { color: #93AECB; }
.marche[data-n="3"] .marche-bloc { background: #2F79B0; }

/* ─── La trame l'emporte sur les règles génériques de largeur ───
   Déclaré en fin de feuille pour battre le « 1 / -1 » posé plus haut : un objet
   large part du bord gauche de la LECTURE et s'étend dans la marge d'appareil.
   Sinon il repart du bord de la bande et casse l'alignement de toute la page. */
@media (min-width: 1460px) {
  .chap-corps > .large,
  .chap-corps > .grille--large { grid-column: 2 / 4; }
  .chap-corps > .apparat { grid-column: 3; }
}

/* Les blocs larges qui vivent HORS du corps s'alignaient au centre (x=234)
   pendant que les objets « large » du corps s'alignaient sur la lecture (x=420) :
   deux trames concurrentes dans la même page. Une seule désormais — tout part du
   bord gauche de la lecture et s'étend dans la marge d'appareil.
   Déclaré en fin de feuille : le raccourci « margin: 0 auto » posé plus haut
   l'emportait sinon sur le margin-left du bloc média. */
@media (min-width: 1460px) {
  .preuve-duo, .sortie-offre, .sortie-grid, .chap-pleine {
    max-width: none;
    margin-left: calc(50% - var(--art-lecture) / 2);
    margin-right: 0;
    width: calc(50% + var(--art-lecture) / 2);
  }
}

/* ─── Deux corrections de trame, mesurées ───
   1. Sur la bande sombre, une feuille mobile repeint les paragraphes en bleu
      nuit (#1A2433) : le texte devenait invisible sur son propre fond. On le
      reprend pour TOUTE la bande, pas seulement pour son corps. */
.chap--nuit p, .chap--nuit li, .chap--nuit td, .chap--nuit span { color: #C3D5E8; }
.chap--nuit .chap-head h2, .chap--nuit h2, .chap--nuit h3,
.chap--nuit strong, .chap--nuit b { color: #FFFFFF; }
.chap--nuit .apparat p { color: #A9C4E0 !important; }
.chap--nuit .cote-g, .chap--nuit .cote-d { color: #93AECB; }
.chap--nuit .cote-g b { color: #FF8A5C; }

/* 2. Sous le seuil de la marge d'appareil, les blocs larges gardaient toute la
      bande pendant que le texte était à 780 : deux bords au lieu d'un. */
@media (max-width: 1459px) {
  .chap-pleine, .sortie-offre, .preuve-duo, .sortie-grid {
    max-width: 780px;
    margin-left: auto; margin-right: auto;
    width: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LE RAIL DE CHAPITRES — avec sa place réservée
   Première version : posé en flottant sur une composition pleine largeur,
   il recouvrait le filet de cote, les titres et l'image de couverture.
   Retiré, il déséquilibrait la page dans l'autre sens : marge gauche vide,
   notes à droite, toute l'encre décalée à droite.
   Bonne réponse : il garde sa colonne. Le bord gauche de la bande s'élargit
   pour la loger, donc plus rien ne passe dessous. Rail — lecture — notes.
   ══════════════════════════════════════════════════════════════════ */

.art-rail {
  position: fixed;
  left: 24px; top: 50%; transform: translateY(-50%);
  width: 200px; z-index: 40;
  display: none;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.art-rail.au-travail { opacity: 1; pointer-events: auto; }
.art-rail-titre {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: #8A9AB5; margin-bottom: 12px;
}
.art-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; counter-reset: r; }
.art-rail a {
  display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: baseline;
  padding: 6px 10px; border-radius: 8px;
  font-size: 13px; line-height: 1.32; color: #6B7C99; text-decoration: none;
  border-left: 2px solid transparent;
}
.art-rail a::before {
  counter-increment: r; content: counter(r, decimal-leading-zero);
  font-size: 10.5px; color: #A9B8CC; font-variant-numeric: tabular-nums;
}
.art-rail a:hover { background: rgba(0,26,61,.05); color: #001A3D; }
.art-rail a.actif {
  color: #001A3D; font-weight: 600;
  border-left-color: #C2470F; background: rgba(194,71,15,.08);
}
.art-rail a.actif::before { color: #C2470F; }

/* Le rail n'apparaît QUE quand sa colonne existe vraiment.
   1460 = 272 (rail + gouttières) + 760 (lecture) + 376 (notes) + 48 (bord droit). */
@media (min-width: 1460px) {
  :root { --art-bord-g: 272px; }
  .art-rail { display: block; }
  .art-sommaire-plie { display: none; }
  .chap-corps { justify-content: center; }
}

/* Quand le rail occupe sa colonne, le filet de cote démarre APRÈS elle :
   sinon le trait court sous le rail et c'est exactement le chevauchement
   qu'on cherchait à supprimer. */
@media (min-width: 1460px) {
  .chap-cote::before { left: var(--art-bord-g); }
}

/* Le rail est flottant : les bandes défilent derrière lui. Quand c'est la bande
   sombre qui passe, son texte gris disparaît dans le fond — il s'inverse. */
.art-rail.sur-fond-sombre .art-rail-titre { color: #7F9BBB; }
.art-rail.sur-fond-sombre a { color: #A9C4E0; }
.art-rail.sur-fond-sombre a:hover { background: rgba(255,255,255,.10); color: #FFFFFF; }
.art-rail.sur-fond-sombre a::before { color: #6F88A8; }
.art-rail.sur-fond-sombre a.actif {
  color: #FFFFFF; border-left-color: #FF8A5C; background: rgba(255,255,255,.12);
}
.art-rail.sur-fond-sombre a.actif::before { color: #FF8A5C; }

/* Le rail chevauche forcément la frontière entre deux bandes à un moment : la
   moitié haute sur un fond, la moitié basse sur l'autre. Inverser ses couleurs
   selon le fond ne règle donc rien — une moitié reste illisible.
   Il porte son propre fond : lisible partout, quelle que soit la bande. */
.art-rail {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(0, 26, 61, .08);
  border-radius: 14px;
  padding: 16px 12px 14px;
  box-shadow: 0 6px 24px rgba(0, 26, 61, .06);
}
/* l'inversion n'a plus lieu d'être */
.art-rail.sur-fond-sombre .art-rail-titre { color: #8A9AB5; }
.art-rail.sur-fond-sombre a { color: #6B7C99; }
.art-rail.sur-fond-sombre a::before { color: #A9B8CC; }
.art-rail.sur-fond-sombre a.actif {
  color: #001A3D; border-left-color: #C2470F; background: rgba(194,71,15,.08);
}
.art-rail.sur-fond-sombre a.actif::before { color: #C2470F; }

/* Le rail porte maintenant son propre fond clair : son texte doit être assez
   sombre pour rester lisible dessus (mesuré : 2,85 et 4,23 avant correction). */
.art-rail .art-rail-titre, .art-rail.sur-fond-sombre .art-rail-titre { color: #64748F; }
.art-rail a, .art-rail.sur-fond-sombre a { color: #4E5E7A; }
.art-rail a::before, .art-rail.sur-fond-sombre a::before { color: #7C8CA6; }

/* ══════════════════════════════════════════════════════════════════
   LE TEXTE AU CENTRE DE LA PAGE — le rail se débrouille dans la marge
   Réserver une colonne au rail poussait toute la composition vers la droite :
   le texte n'était plus au centre de l'écran. On revient à des bords
   symétriques ; le rail se cale dans la marge gauche, à la même distance du
   texte que les notes le sont de l'autre côté. Il est opaque : le filet de
   cote passe derrière lui sans se voir.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1460px) {
  :root { --art-bord-g: var(--art-bord); }      /* bords symétriques, à nouveau */
  .chap-cote::before { left: 0; }                /* le filet retraverse d'un bord à l'autre */
  .art-rail {
    /* 380 = demi-colonne de lecture · 56 = gouttière · 200 = largeur du rail */
    left: calc(50% - 380px - 56px - 200px);
    width: 200px;
    background: rgba(255, 255, 255, .94);
  }
}

/* L'étiquette du filet de cote démarrait au bord de la bande, donc sous le
   rail. Elle s'aligne sur le bord gauche de la lecture — comme tout le reste. */
@media (min-width: 1460px) {
  /* le pourcentage se calcule sur la bande, mais le filet déborde de son bord :
     on rajoute ce débord pour tomber pile sur le bord gauche du texte. */
  .chap-cote { padding-left: calc(50% - var(--art-lecture) / 2 + var(--art-bord)); }
}

/* Sans rail, la colonne de lecture est centrée à 780 : l'étiquette du filet
   doit s'aligner dessus aussi, sinon elle reste seule au bord de la bande. */
@media (min-width: 1024px) and (max-width: 1459px) {
  .chap-cote { padding-left: calc(50% - 390px + var(--art-bord)); }
}

/* ══════════════════════════════════════════════════════════════════
   UN SEUL AXE. TOUT EST CENTRÉ.
   Les notes en marge de droite et le menu flottant à gauche créaient deux
   déséquilibres : de l'encre à droite, un vide à gauche, et un panneau qui
   flottait au milieu de ce vide. Peu importe où on mesurait la colonne de
   lecture — la PAGE, elle, n'était pas centrée.
   Un seul axe désormais : la lecture au centre, les notes dans le fil, les
   objets larges centrés eux aussi. Rien ne flotte, rien ne s'étire d'un côté.
   Ce bloc est en fin de feuille : il annule tout ce qui précède.
   ══════════════════════════════════════════════════════════════════ */

.art-rail { display: none !important; }

:root { --art-bord-g: var(--art-bord); }

/* le corps du chapitre tient la largeur MAXIMALE de la page ; c'est le texte
   qui se resserre au centre, pas le conteneur qui se décale. */
.chap-corps {
  display: block;
  max-width: 1132px;
  margin-left: auto; margin-right: auto;
}
.chap-head, .art-sommaire-plie, .preuve-duo, .sortie-offre, .sortie-grid,
.chap-pleine, .simu {
  max-width: 1132px;
  width: auto;
  margin-left: auto; margin-right: auto;
  transform: none;
}
.chap-cote { padding-left: var(--art-bord); padding-right: var(--art-bord); }

/* la colonne de LECTURE : centrée dans ce conteneur */
.chap-head > h2, .chap-head > .chap-chapo,
.chap-corps > p, .chap-corps > h3, .chap-corps > .controle,
.chap-corps > .apparat, .chap-corps > .reponse-directe,
.chap-corps > .formule, .chap-corps > table {
  max-width: var(--art-lecture);
  margin-left: auto; margin-right: auto;
}
.chap-corps > table { display: table; }

/* La note vit dans le fil, elle ne sort plus dans la marge.
   MAIS son texte doit tomber sur le MÊME bord gauche que le corps de l'article.
   Avant : filet + 20 px de retrait poussaient ses lignes 22 px à droite du
   reste — sans fond pour justifier ce décrochement, l'œil ne lit pas « encadré »,
   il lit « mal aligné ». Le filet passe donc en marge, suspendu, et le texte
   reprend la colonne de lecture. */
.chap-corps > .apparat {
  position: relative;
  margin-top: 6px; margin-bottom: 28px;
  padding: 16px 0;
  border-left: 0;
}
.chap-corps > .apparat::before {
  content: ''; position: absolute; left: -22px; top: 0; bottom: 0;
  width: 2px; background: #FF6B35;
}
.chap-corps > .apparat--vigilance::before { background: #A3300A; }
.chap-corps > .apparat--repere::before { background: #003D7A; }

/* les objets qui ont besoin d'air occupent toute la largeur du conteneur */
.chap-corps > .large, .chap-corps > .grille, .chap-corps > .grille--large,
.chap-corps > .profils, .chap-corps > .escalier, .chap-corps > .ponder,
.chap-corps > .faq-liste, .chap-corps > .doc-muet {
  max-width: 100%; width: auto; margin-left: 0; margin-right: 0; transform: none;
}

/* un tableau se dimensionne sur son contenu et se colle à gauche : on lui
   impose la largeur de sa colonne pour qu'il reste sur l'axe. */
.chap-corps > table.calcul { width: 100%; }

/* ─── LA BALANCE, DESSINÉE ───
   Dix images générées, jamais au-dessus de 6/10 : le modèle ne tient pas une
   palette fermée et une géométrie d'ombres en même temps, et chaque consigne
   rejoue toute l'image. Dessinée ici, les couleurs sont exactes, la géométrie
   est maîtrisée, le poids est nul. « Le dessin d'abord, l'image en dernier. » */
.balance { margin: 10px 0 4px; }
.balance svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.balance-legende {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 10px; max-width: 560px; margin-left: auto; margin-right: auto;
}
.balance-cote { text-align: center; }
.balance-cote b {
  display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: #001A3D; margin-bottom: 4px;
}
.balance-cote span { display: block; font-size: 14.5px; line-height: 1.5; color: #5A6B85; }
.chap--nuit .balance-cote b { color: #FFFFFF; }
.chap--nuit .balance-cote span { color: #A9C4E0; }
@media (max-width: 560px) {
  .balance-legende { grid-template-columns: 1fr; gap: 12px; }
}

/* ─── LA FRISE DE VALIDITÉ ───
   Un tableau de durées ne se lit pas : on compare des mots. Une frise se lit
   d'un coup, parce que la longueur EST la durée. Celle qui arrive à échéance
   ressort. C'est exactement ce que la base documentaire surveille. */
.frise { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 12px; }
.frise-ligne { display: grid; grid-template-columns: 210px 1fr 96px; gap: 16px; align-items: center; }
.frise-nom { font-size: 15.5px; color: #2C3E5C; }
.chap--nuit .frise-nom { color: #C3D5E8; }
.frise-piste {
  position: relative; height: 26px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, #E7EEF6 0 1px, transparent 1px 100%) , #F3F7FB;
  background-size: calc(100% / 12) 100%, 100%;
  border: 1px solid var(--art-trait);
}
.frise-barre {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  border-radius: 4px; background: #003D7A;
}
.frise-ligne[data-etat="court"] .frise-barre { background: #C2470F; }
.frise-ligne[data-etat="long"] .frise-barre { background: #5DA4D4; }
.frise-duree {
  font-size: 14px; font-weight: 650; color: #001A3D;
  font-variant-numeric: tabular-nums; text-align: right;
}
.chap--nuit .frise-duree { color: #FFFFFF; }
.frise-echelle {
  display: grid; grid-template-columns: 210px 1fr 96px; gap: 16px;
  margin-top: 4px; font-size: 12px; color: #7A8CA6;
}
.frise-echelle span:nth-child(2) {
  display: flex; justify-content: space-between;
}
@media (max-width: 700px) {
  .frise-ligne, .frise-echelle { grid-template-columns: 1fr 64px; }
  .frise-piste { grid-column: 1 / -1; }
  .frise-echelle span:first-child { display: none; }
}

/* ─── LES JALONS ───
   Trois temps d'un dossier, dont un qui bascule. Un paragraphe ne montre pas
   qu'il y a un AVANT et un APRÈS ; trois blocs numérotés, si. */
.jalons { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 14px; counter-reset: j; }
.jalon {
  display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start;
  padding: 20px 22px; background: #FFFFFF;
  border: 1px solid var(--art-trait); border-left: 3px solid #003D7A; border-radius: 12px;
}
.jalon[data-etat="bascule"] { border-left-color: #C2470F; }
.jalon[data-etat="risque"] { border-left-color: #A3300A; background: #FDF7F4; }
.jalon-quand {
  font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: #5B6E8A; padding-top: 3px;
}
.jalon[data-etat="bascule"] .jalon-quand { color: #C2470F; }
.jalon[data-etat="risque"] .jalon-quand { color: #A3300A; }
.jalon b {
  display: block; font-family: var(--font-display, 'Sentient', serif);
  font-size: 19px; line-height: 1.25; color: #001A3D; margin-bottom: 6px; letter-spacing: -.01em;
}
.jalon > span:last-child { display: block; font-size: 15.5px; line-height: 1.6; color: #5A6B85; }
@media (max-width: 700px) {
  .jalon { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
}

/* Placement EXPLICITE : sans ça, le troisième élément retombe dans la première
   colonne et la description passe sous l'étiquette au lieu d'être à côté.
   C'est la même erreur que sur les barres de pondération : une grille place ses
   enfants dans l'ordre, pas selon l'intention. */
.jalon-quand { grid-column: 1; grid-row: 1 / span 2; }
.jalon > b { grid-column: 2; grid-row: 1; }
.jalon > span:last-child { grid-column: 2; grid-row: 2; }
@media (max-width: 700px) {
  .jalon-quand, .jalon > b, .jalon > span:last-child { grid-column: 1; grid-row: auto; }
}

/* ─────────── UN SEUL BORD DE TEXTE DANS LA COLONNE DE LECTURE ───────────
   Verdict Rodolphe, 19-08 : « à chaque fois il y a des paragraphes décalés à
   gauche et d'autres à droite, ce n'est pas propre. » Mesuré sur un article
   ordinaire : le corps tombait à 253 px, mais les 35 lignes de liste de
   contrôle à 285 — leur case cochée occupait la colonne et repoussait le texte
   de 32 px. Un lecteur ne voit pas une puce : il voit deux bords de texte.
   La case passe donc EN MARGE, suspendue, et la ligne reprend exactement le
   bord des paragraphes. Réservé aux écrans où la marge existe : sous 1024 px
   la colonne touche les bords, la case doit rester dans le texte. */
@media (min-width: 1024px) {
  .chap-corps > .controle li { padding-left: 0; }
  .chap-corps > .controle li::before { left: -32px; }
}

/* ─────────── LES LISTES RESTENT DANS LA COLONNE DE LECTURE ───────────
   LE défaut que Rodolphe voyait sans pouvoir le nommer, le 19-08 : « des
   paragraphes décalés à gauche et d'autres à droite ». Mesuré : les listes
   numérotées d'un article ordinaire partaient à 67 px quand le paragraphe
   juste au-dessus était à 253. Elles n'étaient tout simplement pas dans la
   règle qui ramène p, h3, tableaux et notes dans la colonne de lecture — donc
   elles s'étalaient sur toute la largeur du corps. Un lecteur ne voit pas
   « une liste » : il voit le texte qui saute d'un bord à l'autre.
   Les numéros pendent dans la marge, comme les cases de contrôle : une seule
   verticale de texte du début à la fin de l'article. */
.chap-corps > ol,
.chap-corps > ul:not(.grille):not(.grille--large):not(.faq-liste):not(.controle):not(.profils):not(.escalier) {
  max-width: var(--art-lecture);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .chap-corps > ol,
  .chap-corps > ul:not(.grille):not(.grille--large):not(.faq-liste):not(.controle):not(.profils):not(.escalier) {
    padding-left: 0;
  }
}

/* Sur téléphone, la marge n'existe pas : la case ne peut pas pendre dehors.
   Mesuré à 390 px : le texte des listes de contrôle s'enfonçait de 54 px quand
   les listes numérotées se contentaient de 26 — quatre bords de texte sur un
   écran de poche. On ramène les deux familles au même retrait, et la case
   rétrécit avec lui. Deux bords : le texte, et les listes. */
@media (max-width: 1023px) {
  .chap-corps > .controle li { padding-left: 26px; }
  .chap-corps > .controle li::before { width: 14px; height: 14px; top: 4px; border-radius: 4px; }
}
/* La liste elle-même portait encore 22 px de retrait sur téléphone, qui
   s'ajoutaient à celui de ses lignes : le retrait doit vivre à UN seul endroit. */
@media (max-width: 1023px) {
  .chap-corps > .controle { padding-left: 0; }
}