/* ============================================================================
   VIVIANE : la mise en page des deux articles (V1 et V2).

   La grammaire est celle de CARBONE et d'ARGUS (barre opaque au-dessus du
   héros, titre au rayon, texte centré à 19 px sur colonne courte, exergues
   alternées, lecture rapide, bloc d'essai, encart d'avis), reprise ici une
   fois pour les deux articles plutôt que copiée dans chacun.

   Les couleurs ne sont PAS ici : chaque article pose ses jetons (--ink,
   --teal, --mint, --gold, --acc-rgb, --halo1..3, --reflet) dans son <head>.
   La V1 est en violet nuit, la V2 en cyan-violet. La feuille commune
   assets/article.css n'est pas touchée : la repeindre repeindrait tous les
   articles du cabinet.
   ========================================================================== */
@font-face{font-family:'Jost';font-style:normal;font-weight:200 500;font-display:swap;
  src:url(../../assets/fonts/Jost-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:200 500;font-display:swap;
  src:url(../../assets/fonts/Jost-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── LE HÉROS ET SA BARRE ─────────────────────────────────────────────
   Même défaut que sur l'article CARBONE, et pour la même raison : le héros
   est une capture de l'outil, donc il porte SA propre barre de titre. Ici
   « ‹ MERLIN, LE CABINET » tombait sur « LE DERNIER OPÉRA » et le logo Darkvalley
   recouvrait l'horloge et le compteur d'alarmes.
   Un voile en dégradé n'y suffit pas : il atténue les deux au lieu d'en
   supprimer une. On sort la barre du recouvrement : le héros devient une
   colonne, la barre y prend sa place en premier, opaque, et l'image commence
   dessous. Plus aucune superposition possible, et rien à mesurer. */
.hero{display:flex;flex-direction:column}

.topbar{position:static;padding:12px calc(28px + var(--sar,0px)) 12px calc(28px + var(--sal,0px));
  background:var(--ink);border-bottom:1px solid rgba(236,238,241,.09)}
/* Le voile ne sert plus qu'à asseoir le bas de l'image sous le titre : le
   haut n'a plus rien à assombrir. */
.hero::after{inset:auto 0 0 0;height:42%;
  background:linear-gradient(to top,rgba(10,11,12,.62),rgba(10,11,12,0))}
.credit{bottom:12px}

/* Les halos de la feuille commune sont verts : on les remplace. */
html,body{background-image:
  radial-gradient(1100px 600px at 85% 12%, var(--halo1), transparent 60%),
  radial-gradient(900px 700px at 8% 55%, var(--halo2), transparent 65%),
  radial-gradient(1200px 800px at 60% 100%, var(--halo3), transparent 60%)}
/* Ceinture et bretelles : sans height:auto, l'attribut HTML height d'une image
   s'applique comme hint de présentation et écrase un width:100%. La règle est
   déjà dans la feuille commune, mais celle-ci arrive avec le HTML et ne peut
   pas venir d'un cache antérieur au correctif. */
img{height:auto}

.avis{display:flex;gap:14px;align-items:flex-start;margin:34px 0 0;padding:18px 22px;
  border:1px solid rgba(var(--acc-rgb),.30);background:rgba(var(--acc-rgb),.06);border-radius:16px;max-width:980px}
.avis .p{flex:0 0 9px;width:9px;height:9px;border-radius:999px;background:var(--gold);margin-top:7px}
.avis p{margin:0;color:var(--txt2);font-size:15px}
.avis b{color:#fff;font-weight:500}

/* Un lecteur ne fait pas défiler deux mille mots pour trouver le bouton : il le
   cherche tout de suite, puis quand il est convaincu, puis à la fin. */
.essai{margin:40px auto 0;padding:34px 32px;max-width:760px;text-align:center;
  border:1px solid rgba(var(--acc-rgb),.34);border-radius:22px;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.10),rgba(var(--acc-rgb),.03));
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 22px 60px rgba(0,0,0,.45)}
.essai h3{margin:0 0 10px;font-weight:400;font-size:27px;color:#fff;letter-spacing:-.01em}
.essai p{margin:0 auto;font-size:15px;color:var(--txt2);max-width:56ch}
.essai .rangee{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.essai .cta{margin:0;padding:17px 32px;font-size:12.5px;background:var(--mint);border-color:var(--mint);color:var(--ink)}
.essai .cta:hover{background:#fff;border-color:#fff;color:var(--ink)}
.essai .cta .arw{background:var(--ink);color:var(--mint)}
.essai .code{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt3)}
.essai .code::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--teal)}
.essai .demande{display:inline-block;margin-top:18px;font-size:13px;color:var(--txt3);
  border-bottom:1px solid var(--line)}
.essai .demande:hover{color:var(--mint)}

/* ═══════════════════════════════════════════════════════════════════════
   RYTHME DE LECTURE, repris de l'article CARBONE. Le système entier, pas
   seulement ses variations : j'avais porté l'alternance sans porter la base,
   ce qui laissait une section sur deux au corps par défaut de la feuille
   commune, soit 16 px contre 19.
   ═══════════════════════════════════════════════════════════════════════ */

/* L'AXE. Le texte est CENTRÉ, ce qui est la décision de fond de ces articles
   et non un détail. Tout en découle. */
article .sec > p,
article .sec > .pull{margin-left:auto;margin-right:auto;text-align:center}
article .sec > h2{max-width:20ch;text-wrap:balance}

/* ⚠️ Un texte centré demande une ligne plus courte qu'un texte au fer à
   gauche : le début de chaque ligne se déplace, et l'œil doit le rechercher.
   Là où 76 caractères passent à gauche, on descend à 64. On compense en
   agrandissant le corps plutôt qu'en rétrécissant encore la colonne : le
   texte reste ample, la ligne reste courte. 19 px et 525 px. */
article .sec > p:not(.lede){max-width:525px;font-size:19px;line-height:1.62}
article p.lede{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}
article .sec > .pull{max-width:760px;border-left:0;padding-left:0;padding-right:0}

/* 1. L'air. La marge haute du titre ferait double emploi avec celle de la
      section : on la remet à zéro, une seule règle gouverne l'écart. */
article .sec + .sec{margin-top:clamp(80px,9.5vw,150px)}
article .sec > h2{margin-top:0;margin-bottom:28px}
article .sec > *:last-child{margin-bottom:0}
article{padding-bottom:64px}
.titleblock{padding-top:104px}
.titleblock h1{font-size:clamp(23px,3.2vw,36px);font-weight:300;line-height:1.3;
  letter-spacing:-.008em;max-width:none;margin-bottom:36px;color:var(--txt);
  text-align:center;margin-left:auto;margin-right:auto}
.titleblock h1 .l{display:block}
.titleblock h1 .l + .l{margin-top:.22em}
/* ⚠️ Le sur-titre est `display:inline-flex` : une boîte de niveau ligne ignore
   `margin:auto`. Il faut la passer en `flex` pour qu'elle se centre. */
.titleblock .kicker{display:flex;width:fit-content;margin-left:auto;margin-right:auto;
  justify-content:center}
.titleblock .sub{text-align:center;margin-left:auto;margin-right:auto;max-width:640px}

/* Le soulignage au rayon : un trait qui se tire de gauche à droite, précédé
   d'une tête lumineuse. Les deux partagent durée ET courbe, donc la tête reste
   exactement sur le front du trait au lieu de le doubler. */
.ray{position:relative;display:inline-block;padding-bottom:.14em}
.ray::after,.ray::before{content:"";position:absolute;bottom:0;pointer-events:none}
.ray::after{left:0;right:0;height:2px;border-radius:2px;transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(var(--acc-rgb),0),var(--teal) 14%,#fff 52%,var(--teal) 86%,rgba(var(--acc-rgb),0));
  box-shadow:0 0 10px rgba(255,255,255,.45),0 0 26px rgba(var(--acc-rgb),.30)}
.ray::before{left:0;margin-left:-5px;bottom:-4px;width:10px;height:10px;border-radius:50%;
  background:#fff;opacity:0;
  box-shadow:0 0 12px 3px rgba(255,255,255,.65),0 0 34px 9px rgba(var(--acc-rgb),.38)}
.ray.on::after{animation:rayon-trait 1.15s cubic-bezier(.19,.78,.28,1) .45s forwards}
.ray.on::before{animation:rayon-tete  1.15s cubic-bezier(.19,.78,.28,1) .45s forwards}
@keyframes rayon-trait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rayon-tete{0%{opacity:0;left:0}9%{opacity:1}86%{opacity:1}100%{opacity:0;left:100%}}
@media(prefers-reduced-motion:reduce){
  .ray.on::after{animation:none;transform:scaleX(1)}
  .ray::before{display:none}
}

/* Les titres de section suivent l'axe du texte. */
article .sec > h2{text-align:center;margin-left:auto;margin-right:auto}
article figure.shotfig figcaption{text-align:center}

/* ── ce qui RESTE au fer à gauche ─────────────────────────────────────
   Tout ce qui est dense ou tabulaire. Centrer une liste de six points ou une
   ligne d'état ne la rend pas élégante, ça la rend illisible. */
.pts,.pts *,.facts,.facts *,.legal,.legal *,
.etats,.etats *,.tuile figcaption,.jrow,.jrow *{text-align:left}

/* Une section sur le lot porte un fond : le contraste de SURFACE est la
   variation la plus lisible, et la seule qui ne touche ni à l'alignement ni
   à la largeur. */
article .sec.deep{background:var(--deep);border-radius:30px;
  padding:clamp(42px,5vw,68px) clamp(24px,4vw,56px)}
@media(max-width:720px){ article .sec.deep{border-radius:20px;padding:32px 22px} }

/* 2. La largeur alterne. Une section sur deux tient une colonne un peu plus
      large et un titre un cran plus serré : assez pour donner un relief de
      lecture, trop peu pour se voir comme une irrégularité. */
article .sec:nth-of-type(even) > p:not(.lede){max-width:600px;font-size:19.5px}
article .sec:nth-of-type(even) > h2{max-width:17ch}

/* 4. L'exergue quitte l'axe, et alterne de bord. Un exergue est FAIT pour
      rompre l'axe : c'est le seul endroit du texte où le décalage se lit comme
      une intention et non comme un défaut de réglage. */
@media(min-width:1040px){
  /* Le décalage n'existe que si le script a pu poser le bord : sans lui,
     l'exergue reste centré, ce qui est un état correct et non un accident. */
  article .sec > .pull.pull-g,
  article .sec > .pull.pull-d{max-width:600px;text-align:left;
    font-size:clamp(21px,2.1vw,27px);line-height:1.34;font-style:normal;
    border-left:2px solid var(--teal);padding:6px 0 6px 30px;margin:58px 0}
  article .sec > .pull.pull-g{margin-left:0;margin-right:auto}
  article .sec > .pull.pull-d{margin-left:auto;margin-right:0;border-left:0;
    border-right:2px solid var(--teal);padding:6px 30px 6px 0;text-align:right}
}

/* 3. Les figures alternent d'échelle. Deux captures de suite au même cadre se
      lisent comme une seule. */
article figure.shotfig{margin:46px auto 0}
article .sec:nth-of-type(even) figure.shotfig{max-width:840px}

/* Les blocs qui portent leur propre mise en page gardent leur axe : centrés
   dans la colonne, mais leur contenu reste au fer à gauche, sans quoi une
   légende de tuile ou une ligne d'état deviendrait illisible. */
article .sec > .demo,
article .sec > .tuiles,
article .sec > .goals,
article .sec > .cite,
article .sec > .etats{margin-left:auto;margin-right:auto}
article .sec > .note{margin-left:auto;margin-right:auto;max-width:600px;text-align:left}
.demo, .demo *{text-align:left}
.demo .note{text-align:center}
.etats{margin-left:auto;margin-right:auto}

/* ── Tuiles d'interface ──────────────────────────────────────────────────
   Une capture pleine largeur dit « voici l'écran ». Une tuile dit « voici
   ce morceau-là, et voilà pourquoi il existe ». */
.tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;
  max-width:1104px;margin:46px auto 0}
.tuile{margin:0;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--lsoft);border-radius:18px;overflow:hidden}
.tuile.large{grid-column:1 / -1}
/* ⚠️ `height:auto` obligatoire : sans lui, l'attribut HTML height écrase le
   rapport dès que la largeur change, et la capture se retrouve étirée. */
.tuile img{display:block;width:100%;height:auto;border-bottom:1px solid var(--lsoft)}
.tuile figcaption{padding:20px 22px 22px;text-align:left}
.tuile .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);margin-bottom:9px}
.tuile b{display:block;font-weight:500;font-size:17px;line-height:1.3;color:var(--txt);
  margin-bottom:8px}
.tuile .d{display:block;font-size:14.5px;line-height:1.58;color:var(--txt3)}
@media(max-width:820px){
  .tuiles{grid-template-columns:1fr;gap:20px}
  .tuile.large{grid-column:auto}
}
/* La grille de « ce que ça change », comme sur CARBONE : deux colonnes
   centrées plutôt que la largeur pleine de la feuille commune. */
.goals{grid-template-columns:repeat(2,1fr);max-width:840px;margin-left:auto;margin-right:auto}
@media(max-width:720px){ .goals{grid-template-columns:1fr} }

/* ── MAQUETTES JOUABLES ───────────────────────────────────────────────────
   Comme sur l'article CARBONE : un morceau d'interface reproduit à l'identique
   dans la page, et qui répond. Une capture montre l'écran ; une maquette fait
   comprendre le mécanisme, ce qu'aucun paragraphe ne remplace. */
.demo{margin:34px auto 0;max-width:760px;padding:26px 28px;border-radius:20px;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.06),rgba(var(--acc-rgb),.02));
  border:1px solid rgba(var(--acc-rgb),.20)}
.demo .tt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt3);margin-bottom:18px;display:flex;
  align-items:center;gap:10px}
.demo .tt::after{content:"";flex:1;height:1px;background:var(--lsoft)}
.demo .note{margin:18px 0 0;font-size:13px;color:var(--txt3);line-height:1.55;
  border:0;padding:0}
/* ⚠️ Déclarée APRÈS la règle ci-dessus, sans quoi son `max-width` la
   neutraliserait : à spécificité égale, c'est l'ordre qui tranche. */
.demo .note{max-width:600px;margin-left:auto;margin-right:auto;text-align:center}
.demo .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--txt3);margin:0 0 9px}
.demo .cap.suite{margin-top:22px}
.demo .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;flex-wrap:wrap}
.demo .seg button{min-height:48px;padding:11px 22px;font-size:14.5px;
  color:var(--txt2);background:none;border:0;border-right:1px solid var(--line);
  cursor:pointer;transition:background .15s,color .15s;font-family:inherit}
.demo .seg button:last-child{border-right:0}
.demo .seg button:hover{background:rgba(236,238,241,.05);color:var(--txt)}
.demo .seg button[aria-pressed="true"]{font-weight:600;background:rgba(var(--acc-rgb),.14);
  color:var(--mint)}

/* ── Encart détaché ──────────────────────────────────────────────────────
   Une phrase qui vaut d'être sortie du fil sans monter jusqu'à la citation.
   Le filet à gauche suffit à la détacher : pas de fond, pas de cadre, rien
   qui interrompe la lecture. */
.note{max-width:640px;margin:30px 0 0;padding:2px 0 2px 22px;
  border-left:2px solid rgba(var(--acc-rgb),.42);
  font-size:15.5px;line-height:1.62;color:var(--txt2)}
.note b{color:var(--txt);font-weight:500}
article .sec:nth-of-type(even) > .note{margin-left:auto;margin-right:auto}

/* ── Citation attribuée ──────────────────────────────────────────────── */
/* Alignée sur la colonne de texte, pas centrée dans la page : dans une section
   à largeur réduite, une citation centrée sur le `wrap` débordait de plus de
   deux cents pixels à droite du paragraphe qu'elle prolonge. */
.cite{margin:44px 0 40px;max-width:640px;text-align:center}
.cite blockquote{margin:0;font-size:clamp(21px,2.5vw,31px);line-height:1.32;font-weight:300;
  color:var(--txt);letter-spacing:-.012em}
.cite figcaption{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt3)}

/* Le tableau des quatre états : c'est le cœur de l'argument, il mérite mieux
   qu'une liste à puces. */
.etats{width:100%;border-collapse:collapse;margin:26px 0 0;max-width:900px;font-size:15px}
.etats th{text-align:left;font-weight:400;color:var(--txt3);font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:0 16px 10px 0;
  border-bottom:1px solid var(--line)}
.etats td{padding:13px 16px 13px 0;border-bottom:1px solid var(--lsoft);color:var(--txt2);vertical-align:top}
.etats td:first-child{color:var(--txt);white-space:nowrap}
/* ── LECTURE RAPIDE : la couche keynote ─────────────────────────────── */
.lect-choix{margin-top:26px;text-align:center}
.btn-rapide{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  padding:13px 22px;border-radius:999px;border:1px solid rgba(236,238,241,.22);
  background:linear-gradient(135deg,rgba(236,238,241,.10),rgba(236,238,241,.03));
  color:var(--txt);font-size:15px;font-weight:600;letter-spacing:.01em;
  transition:border-color .2s,background .2s,transform .2s}
.btn-rapide:hover{border-color:rgba(236,238,241,.45);background:rgba(236,238,241,.12);transform:translateY(-1px)}
.btn-rapide .ic{width:16px;height:16px;flex:0 0 16px}
.btn-rapide .det{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt3);border-left:1px solid rgba(236,238,241,.2);padding-left:12px}
.retour-long{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;display:none;
  align-items:center;gap:8px;cursor:pointer;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(236,238,241,.22);background:rgba(12,13,15,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--txt2);font-size:13.5px;transition:border-color .2s,color .2s}
.retour-long:hover{border-color:rgba(236,238,241,.45);color:var(--txt)}
body.rapide .retour-long{display:inline-flex}
#rapide{display:none}
body.rapide article, body.rapide .lect-choix{display:none}
body.rapide #rapide{display:block}
.kr{min-height:82vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:9vh 24px;gap:22px}
.kr-k{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--txt3)}
.kr-t{font-size:clamp(40px,7vw,92px);line-height:1.04;letter-spacing:-.025em;font-weight:750;
  background:linear-gradient(180deg,var(--txt),var(--txt2));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--txt)}
.kr-plein .kr-t{font-size:clamp(52px,9vw,120px)}
/* Les fragments en em portent l'or du produit, avec un reflet qui traverse :
   c'est la signature des titres de l'article technique, elle ne doit pas
   disparaître dans la version courte. Le dégradé est plus LARGE que le texte
   et c'est sa position qui bouge : animer la position coûte moins cher que de
   redessiner le dégradé, et le texte ne bouge pas d'un pixel. */
.kr-t em{font-style:italic;
  background:linear-gradient(105deg,var(--gold) 20%,var(--mint) 38%,var(--reflet) 50%,var(--mint) 62%,var(--gold) 80%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
  animation:kr-reflet 5.5s ease-in-out infinite}
@keyframes kr-reflet{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){ .kr-t em{animation:none;background-position:50% 0} }
.kr-s{font-size:clamp(17px,1.6vw,22px);color:var(--txt2);max-width:640px;line-height:1.5}
.kr-p{font-size:clamp(14.5px,1.15vw,17px);color:var(--txt3);max-width:600px;line-height:1.65;margin-top:-6px}
.kr img{max-width:min(1040px,92vw);height:auto;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.5);margin-top:16px}
.kr img.petite{max-width:min(760px,90vw)}
.kr-btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.kr-go{margin:0;padding:17px 32px;font-size:12.5px;background:var(--mint);
  border:1px solid var(--mint);color:var(--ink);display:inline-flex;align-items:center;gap:10px;
  border-radius:999px;text-decoration:none;font-family:var(--mono);letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;transition:transform .2s,background .2s}
.kr-go:hover{background:#fff;border-color:#fff}
.kr-go .arw{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:var(--mint);font-size:12px}
.kr-code{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt3)}
.kr-go:hover{transform:translateY(-1px)}
.kr-long{cursor:pointer;padding:15px 26px;border-radius:999px;border:1px solid rgba(236,238,241,.25);
  background:none;color:var(--txt2);font-size:15px;transition:border-color .2s,color .2s}
.kr-long:hover{border-color:rgba(236,238,241,.5);color:var(--txt)}


/* ═══ CE QUE VIVIANE AJOUTE ═══════════════════════════════════════════════ */

/* Le héros est une présence au centre de l'image, avec sa ligne de prophétie
   au tiers bas : un cadrage calé en haut couperait la ligne. */
.hero img{object-position:center 60%}

/* Le nom en capitales fines espacées, comme sur l'écran de la voyante : c'est
   la seule marque de VIVIANE, elle n'a pas de sigle. */
.marque-titre{display:flex;align-items:baseline;justify-content:center;gap:.6em;margin-bottom:38px}
.marque-titre span{font-family:'Jost',var(--sans);font-weight:300;font-size:clamp(28px,4.4vw,50px);
  letter-spacing:.42em;margin-right:-.42em;line-height:1;color:var(--txt);
  text-shadow:0 0 .55em rgba(var(--acc-rgb),.45),0 0 1.8em rgba(var(--acc-rgb),.22)}
.marque-titre small{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--teal);
  border:1px solid rgba(var(--acc-rgb),.45);border-radius:999px;padding:4px 10px}

/* Un tableau ne vit jamais nu sous la colonne : sur téléphone il défile au
   lieu de perdre ses colonnes de droite (même règle que CARBONE). */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:980px;margin:26px auto 0}
.scrollx .etats{margin:0;min-width:640px}
.etats .p{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:9px;vertical-align:0}
.etats .p.veille{background:#8b86f0}.etats .p.ecoute{background:#35E0FF}
.etats .p.reflexion{background:#E36BE0}.etats .p.reponse{background:#FFC08A}
.etats td b{color:var(--txt);font-weight:500}
.etats tr.go td{background:rgba(var(--acc-rgb),.08)}
.etats td.num{font-family:var(--mono);font-size:13px;white-space:nowrap}

/* Le code : l'API de la séance, telle qu'un régisseur la branche. */
pre.code{max-width:760px;margin:30px auto 0;padding:20px 24px;border-radius:16px;overflow-x:auto;
  background:var(--card);border:1px solid var(--lsoft);text-align:left;
  font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--txt2)}
pre.code .c{color:var(--txt3)}
pre.code .k{color:var(--mint)}

/* Les dessins de la pièce : trait clair sur fond nuit, à lire de près. */
figure.dessin{max-width:920px;margin:46px auto 0}
figure.dessin img{width:100%;border-radius:18px;border:1px solid var(--line)}
figure.dessin figcaption{margin-top:12px;font-size:14px;color:var(--txt3);text-align:center}
.duo{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;max-width:1104px;margin:46px auto 0;align-items:start}
.duo figure{margin:0}
.duo img{width:100%;border-radius:18px;border:1px solid var(--line)}
.duo figcaption{margin-top:12px;font-size:14px;color:var(--txt3);text-align:center}
@media(max-width:820px){ .duo{grid-template-columns:1fr} }

/* Les quatre états, en tuiles : un regard par état, sans légende sur l'image. */
.tuiles.etats4{grid-template-columns:repeat(2,minmax(0,1fr))}
.tuile .chiffres{display:block;margin-top:10px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--txt3)}

footer{padding:40px 0 64px;border-top:1px solid var(--lsoft)}
footer p{font-size:14px;color:var(--txt3);text-align:center;margin:0 auto 8px;max-width:760px}
footer a{color:var(--txt2);border-bottom:1px solid var(--line)}
footer a:hover{color:var(--mint)}

/* Sur téléphone, le recadrage du héros coupait la ligne de prophétie sur les
   côtés : l'image garde son rapport 16:9 entier. */
@media(max-width:720px){ .hero img{height:auto;object-fit:contain} }

/* La conduite se lit de près : elle prend toute la largeur utile. */
figure.dessin.large{max-width:1104px}

/* Un paragraphe qui suit un tableau, des tuiles ou un dessin reprend son air :
   collé au bloc, il se lisait comme sa légende. */
article .sec > .scrollx + p,article .sec > .tuiles + p,article .sec > .duo + p,
article .sec > figure + p,article .sec > .scrollx + .note,article .sec > pre + .note{margin-top:38px}