/* Echoes V1 · niveau supérieur (prototype à valider par Adam, 17/09/2026). Références complètes : docs/gauntlet/refero/*-DESIGN.md.
   Verrou : OFF+BRAND (base) ; Pika (alternance papier et nuit) ; Microsoft AI (chapitre = page tournée) ; cord.com (encre = voix, une seule lumière vive pour l’actif) ; Vivid+Co et DNCO (l’échelle porte la hiérarchie, graisse 400).
   Référence principale : OFF+BRAND (typographie architecturale sur papier chaud, une seule couleur vive : l’objet signature).
   Emprunts : Vivid+Co (chapitres « nuit » où le prisme est la seule lumière) ; Worth (murs alternés, actions soulignées, flèche comme repère).
   Essence V1 conservée : papier #fff8ea, encre #1f415a, prisme cyan et menthe, rose réservé au bouton principal, Archivo, logo, images ATELIER 09.
   Règles de rôle : rose = action principale seulement ; cyan = progression et repères du prisme ; menthe = surfaces de détail ; aucune ombre. */
:root {
  --n-paper:#fff8ea; --n-ink:#1f415a; --n-cyan:#48b9ce; --n-mint:#b7e2de; --n-pink:#efb8c4;
  --n-line:rgba(31,65,90,.18); --n-line-ink:rgba(255,248,234,.2);
  --n-gutter:clamp(20px,4.4vw,80px);
  --n-ease:cubic-bezier(.22,1,.36,1);
}
.v3-page {background:var(--n-ink);color:var(--n-ink);font-family:var(--v2-font,Archivo,Arial,sans-serif);margin:0}
.v3-page main {display:block}
.v3-page img {max-width:100%;display:block}

/* Chapitres plein écran empilés : le suivant glisse par-dessus le précédent (effet de passage d’écran). */
.v3-chapter {position:sticky;top:0;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(88px,11vh,132px) var(--n-gutter) clamp(56px,8vh,96px);background:var(--n-paper);color:var(--n-ink);
  border-radius:var(--n-radius,0px) var(--n-radius,0px) 0 0;overflow:clip;isolation:isolate}
.v3-chapter[data-theme=ink] {background:var(--n-ink);color:var(--n-paper)}
.v3-chapter>.v3-inner {transform:translate3d(0,var(--n-lift,0),0) scale(var(--n-scale,1));transform-origin:50% 0;will-change:transform;filter:blur(var(--n-blur,0px))}
.v3-chapter::after {content:'';position:absolute;inset:0;background:#0d1b26;opacity:var(--n-dim,0);pointer-events:none;z-index:5}
.v3-chapter {box-shadow:0 -26px 64px rgba(13,27,38,.10)}

/* Typographie : l’autorité vient de l’échelle et de l’espace, pas du nombre de mots. */
.v3-label {font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0 0 20px;opacity:.78}
.v3-display {font-size:clamp(44px,5.6vw,80px);line-height:.94;letter-spacing:-.045em;font-weight:400;margin:0;max-width:14ch;text-wrap:balance}
.v3-cover {font-size:clamp(38px,3.9vw,56px);line-height:.98;letter-spacing:-.04em;font-weight:400;margin:0;max-width:18ch;text-wrap:balance}
.v3-lead {font-size:clamp(18px,1.4vw,20px);line-height:1.5;margin:24px 0 0;max-width:46ch;text-wrap:pretty}
.v3-head {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px 64px;align-items:end;margin-bottom:clamp(32px,5vh,56px)}
.v3-head .v3-lead {margin:0}
@media(max-width:860px) {.v3-head {grid-template-columns:1fr}}

/* Actions : un bouton principal rose sur la nuit, encre sur le papier ; le reste en liens soulignés. */
.v3-button {display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:56px;padding:0 24px;border-radius:2px;
  background:var(--n-pink);color:var(--n-ink);font-size:14px;font-weight:500;text-decoration:none;transition:transform 180ms var(--n-ease)}
.v3-chapter[data-theme=paper] .v3-button {background:var(--n-ink);color:var(--n-paper)}
.v3-button:hover {transform:translateY(-2px)}
.v3-link {display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:500;color:inherit;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* Hero */
.v3-hero {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px 64px;align-items:center}
.v3-hero .v3-actions {margin-top:36px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.v3-hero figure {margin:0;position:relative}
.v3-hero figure img {width:100%;aspect-ratio:1584/992;object-fit:cover}
.v3-hero figcaption {font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:14px;opacity:.72}
.v3-formats {position:absolute;right:16px;top:16px;display:flex;gap:6px}
.v3-formats span {font-size:12px;padding:6px 9px;background:rgba(31,65,90,.72);color:var(--n-paper)}
@media(max-width:860px) {.v3-hero {grid-template-columns:1fr}}

/* Carrousel : glisser au doigt, flèches et compteur ; une idée par carte, le détail à la demande. */
.v3-carousel {--n-card:min(78vw,440px);position:relative}
.v3-carousel-bar {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.v3-count {font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.06em;margin:0}
.v3-arrows {display:flex;gap:10px}
.v3-arrows button {width:48px;height:48px;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font-size:18px;cursor:pointer;transition:background 180ms var(--n-ease),color 180ms var(--n-ease)}
.v3-arrows button:hover:not(:disabled) {background:currentColor}
.v3-arrows button:hover:not(:disabled) span {color:var(--n-paper)}
.v3-chapter[data-theme=ink] .v3-arrows button:hover:not(:disabled) span {color:var(--n-ink)}
.v3-arrows button:disabled {opacity:.3;cursor:default}
.v3-track {display:grid;grid-auto-flow:column;grid-auto-columns:var(--n-card);gap:20px;list-style:none;margin:0 calc(-1*var(--n-gutter));padding:0 var(--n-gutter) 6px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--n-gutter);scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.v3-track::-webkit-scrollbar {display:none}
.v3-track.is-dragging {cursor:grabbing;scroll-snap-type:none}
.v3-track:focus-visible {outline:3px solid var(--n-cyan);outline-offset:4px}
.v3-slide {scroll-snap-align:start;display:flex;flex-direction:column;min-width:0}
.v3-progress {height:2px;background:var(--n-line);margin-top:26px;position:relative;overflow:hidden}
.v3-chapter[data-theme=ink] .v3-progress {background:var(--n-line-ink)}
.v3-progress span {position:absolute;inset:0 auto 0 0;width:var(--n-progress,25%);background:var(--n-cyan);transition:width 260ms var(--n-ease)}

/* Carte média */
.v3-media {margin:0 0 20px;overflow:hidden;background:rgba(31,65,90,.08)}
.v3-media img {width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 600ms var(--n-ease)}
.v3-slide:hover .v3-media img {transform:scale(1.03)}
.v3-slide h3 {font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.025em;font-weight:500;margin:0 0 10px;text-wrap:balance}
.v3-slide p {margin:0;font-size:16px;line-height:1.5;text-wrap:pretty}
.v3-slide .v3-kicker {font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0 0 12px;opacity:.72}

/* Carte typographique (cas, modèles, étapes) */
.v3-card {border-top:1px solid currentColor;padding-top:22px;display:flex;flex-direction:column;height:100%}
.v3-card .v3-num {font-size:clamp(48px,5vw,72px);line-height:1;letter-spacing:-.05em;font-weight:500;margin:0 0 28px;color:var(--n-cyan)}
.v3-chapter[data-theme=paper] .v3-card .v3-num {color:var(--n-ink);opacity:.9}
.v3-chips {display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.v3-chips li {font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border:1px solid currentColor;border-radius:999px;opacity:.85}

/* Détails à la demande (divulgation progressive) */
.v3-details {margin-top:auto;padding-top:18px}
.v3-details>summary {list-style:none;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.v3-details>summary::-webkit-details-marker {display:none}
.v3-details>summary span {font-size:20px;text-decoration:none;display:inline-block;transition:transform 220ms var(--n-ease)}
.v3-details[open]>summary span {transform:rotate(45deg)}
.v3-details>div {padding-top:10px}
.v3-details>div p+p,.v3-details>div p+.v3-kicker {margin-top:12px}

/* Étapes : trois colonnes sur ordinateur, carrousel sur mobile */
@media(min-width:861px) {.v3-carousel[data-desktop=grid] .v3-track {grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin:0;padding:0;cursor:auto}
  .v3-carousel[data-desktop=grid] .v3-carousel-bar,.v3-carousel[data-desktop=grid] .v3-progress {display:none}}

.v3-note {font-size:14px;line-height:1.5;opacity:.72;margin:18px 0 0}
.v3-cta {text-align:center;align-items:center}
.v3-cta .v3-display {max-width:16ch;margin-inline:auto}
.v3-cta .v3-lead {margin-inline:auto}
.v3-cta .v3-button {margin-top:40px}

/* Pied de page : dernier mur, au-dessus de la pile */
.v3-page .v2-footer {position:relative;z-index:2}

@media(max-width:860px) {
  .v3-chapter {padding-top:96px}
  .v3-carousel {--n-card:82vw}
}
/* Mouvement réduit : pas d’empilement ni de profondeur, le contenu se lit à plat. */
@media(prefers-reduced-motion:reduce) {
  .v3-chapter {position:relative;border-radius:0}
  .v3-chapter>.v3-inner {transform:none}
  .v3-chapter::after {display:none}
  .v3-media img,.v3-button,.v3-progress span {transition:none}
}
.v3-skip {position:absolute;left:-9999px;top:8px;z-index:100;background:var(--n-paper);color:var(--n-ink);padding:10px 14px}
.v3-skip:focus {left:8px}

/* ── Courage (demande d’Adam) : murs de couleur pleins, échelle typographique assumée, images à fond perdu ── */
/* Les quatre couleurs Echoes deviennent des murs : crème, encre, cyan, menthe ; le rose ferme la page sur l’action. */
.v3-chapter[data-theme=cyan] {background:var(--n-cyan);color:var(--n-ink)}
.v3-chapter[data-theme=mint] {background:var(--n-mint);color:var(--n-ink)}
.v3-chapter[data-theme=pink] {background:var(--n-pink);color:var(--n-ink)}
.v3-chapter[data-theme=cyan] .v3-button,.v3-chapter[data-theme=mint] .v3-button,.v3-chapter[data-theme=pink] .v3-button {background:var(--n-ink);color:var(--n-paper)}
.v3-chapter[data-theme=cyan] .v3-progress span,.v3-chapter[data-theme=mint] .v3-progress span,.v3-chapter[data-theme=pink] .v3-progress span {background:var(--n-ink)}
.v3-chapter[data-theme=cyan] .v3-card .v3-num,.v3-chapter[data-theme=mint] .v3-card .v3-num,.v3-chapter[data-theme=pink] .v3-card .v3-num {color:var(--n-ink)}
.v3-chapter[data-theme=cyan] .v3-progress,.v3-chapter[data-theme=mint] .v3-progress,.v3-chapter[data-theme=pink] .v3-progress {background:rgba(31,65,90,.25)}
/* L’échelle porte la hiérarchie (Vivid+Co, DNCO) : le titre devient l’image de la page. */
.v3-display:not(#_) {font-size:clamp(52px,7.4vw,112px);line-height:.9;letter-spacing:-.05em;max-width:13ch}
.v3-cover:not(#_) {font-size:clamp(44px,6.2vw,96px);line-height:.92;letter-spacing:-.048em;max-width:16ch}
@media(min-width:861px) {.v3-head:not(#_) {grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);align-items:end}}
.v3-label:not(#_) {font-size:12px;letter-spacing:.2em;opacity:1}
.v3-card .v3-num:not(#_) {font-size:clamp(64px,7vw,104px);margin-bottom:24px}
/* Images à fond perdu : le visuel touche le bord de l’écran, comme une double page. */
@media(min-width:861px) {.v3-hero:not(#_) {grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 56px}}
.v3-hero figure:not(#_) {margin-right:calc(-1*var(--n-gutter))}
.v3-hero figure img:not(#_) {aspect-ratio:4/5;height:min(72svh,760px);object-fit:cover}
@media(max-width:860px) {.v3-hero figure:not(#_) {margin-inline:calc(-1*var(--n-gutter))}.v3-hero figure img:not(#_) {height:auto;aspect-ratio:4/3}}
.v3-media:not(#_) {background:transparent}
.v3-media img:not(#_) {aspect-ratio:3/4}
/* Apparition de chapitre : les lignes montent une fois, à l’entrée, pour marquer le changement d’écran. */
.v3-chapter .v3-inner>* {--d:0ms}
.v3-chapter[data-enter] .v3-inner>*,.v3-chapter[data-enter] .v3-head>* {opacity:0;transform:translateY(26px)}
.v3-chapter[data-enter=in] .v3-inner>*,.v3-chapter[data-enter=in] .v3-head>* {opacity:1;transform:none;transition:opacity 620ms var(--n-ease) var(--d),transform 620ms var(--n-ease) var(--d)}
@media(prefers-reduced-motion:reduce) {.v3-chapter[data-enter] .v3-inner>*,.v3-chapter[data-enter] .v3-head>* {opacity:1;transform:none}}

/* Mobile : l’échelle reste forte mais lisible ; une seule colonne, pas de mot isolé. */
@media(max-width:620px) {
  .v3-display:not(#_) {font-size:40px;line-height:.98;letter-spacing:-.04em;max-width:none}
  .v3-cover:not(#_) {font-size:34px;line-height:1.02;letter-spacing:-.035em;max-width:none}
  .v3-card .v3-num:not(#_) {font-size:56px;margin-bottom:16px}
  .v3-head:not(#_) {grid-template-columns:1fr}
  .v3-lead:not(#_) {max-width:none}
}
@media(min-width:621px) and (max-width:860px) {
  .v3-display:not(#_) {font-size:clamp(46px,7vw,64px)}
  .v3-cover:not(#_) {font-size:clamp(40px,6vw,56px)}
}

/* ── Un chapitre = un écran, quelle que soit la hauteur (demande d’Adam) ──
   Tout est dimensionné en hauteur d’écran (svh) plutôt qu’en pixels fixes : sur un portable comme sur un grand écran,
   le chapitre tient sans défilement interne. Plus de compteurs ni de numéros décoratifs. */
.v3-chapter:not(#_) {padding-block:clamp(84px,10svh,124px) clamp(40px,6svh,88px);gap:0}
.v3-display:not(#_) {font-size:min(7.4vw,9.4svh,112px);line-height:.92}
.v3-cover:not(#_) {font-size:min(6vw,7.4svh,88px);line-height:.96}
.v3-lead:not(#_) {font-size:clamp(15px,2.05svh,19px);line-height:1.45;max-width:44ch}
.v3-head:not(#_) {margin-bottom:clamp(18px,3.2svh,44px);gap:16px 56px}
.v3-label:not(#_) {margin-bottom:clamp(10px,1.8svh,20px)}
.v3-note:not(#_) {margin-top:clamp(10px,1.6svh,18px);font-size:13px}
.v3-carousel-bar:not(#_) {margin-bottom:clamp(12px,2svh,20px);justify-content:flex-end}
.v3-progress:not(#_) {margin-top:clamp(14px,2.4svh,26px)}
.v3-arrows button:not(#_) {width:44px;height:44px}
/* Cartes : l’image et le texte se règlent sur la hauteur disponible. */
.v3-media:not(#_) {margin-bottom:clamp(12px,2svh,20px)}
.v3-media img:not(#_) {aspect-ratio:auto;height:min(30svh,320px)}
.v3-slide h3:not(#_) {font-size:clamp(17px,2.5svh,26px);margin-bottom:clamp(6px,1svh,10px)}
.v3-slide p:not(#_) {font-size:clamp(14px,1.85svh,16px);line-height:1.45}
.v3-kicker:not(#_) {margin-bottom:clamp(6px,1.1svh,12px)}
.v3-card:not(#_) {padding-top:clamp(14px,2.2svh,22px)}
.v3-chips:not(#_) {margin-top:clamp(8px,1.4svh,16px);gap:6px}
.v3-chips li:not(#_) {padding:5px 9px;font-size:11px}
.v3-details:not(#_) {padding-top:clamp(10px,1.6svh,18px)}
.v3-details>summary:not(#_) {min-height:40px;font-size:13px}
.v3-hero figure img:not(#_) {height:min(56svh,600px)}
.v3-hero .v3-actions:not(#_) {margin-top:clamp(18px,3svh,36px)}
.v3-button:not(#_) {min-height:clamp(46px,6svh,56px)}
@media(max-width:860px) {
  .v3-hero figure img:not(#_) {height:min(32svh,300px)}
  .v3-media img:not(#_) {height:min(26svh,260px)}
  .v3-chapter:not(#_) {padding-block:clamp(76px,11svh,104px) clamp(28px,5svh,56px)}
}
/* Le chapitre à images demande un peu plus de place : on la reprend sur l’image et les marges, pas sur le texte. */
.v3-chapter:has(.v3-media):not(#_) {padding-block:clamp(76px,9svh,112px) clamp(28px,4svh,64px)}
.v3-chapter:has(.v3-media) .v3-head:not(#_) {margin-bottom:clamp(12px,2.2svh,28px)}
.v3-chapter:has(.v3-media) .v3-media img:not(#_) {height:min(25svh,272px)}
.v3-chapter:has(.v3-media) .v3-note:not(#_) {margin-top:clamp(8px,1.2svh,14px);font-size:12px}
/* Écrans d’ordinateur peu hauts (portables 720–820 px) : on resserre encore l’image et les marges. */
@media(min-width:861px) and (max-height:860px) {
  .v3-chapter:has(.v3-media):not(#_) {padding-block:clamp(70px,8.4svh,96px) clamp(22px,3svh,44px)}
  .v3-chapter:has(.v3-media) .v3-media img:not(#_) {height:min(21svh,220px)}
  .v3-chapter:has(.v3-media) .v3-media:not(#_) {margin-bottom:10px}
  .v3-chapter:has(.v3-media) .v3-slide h3:not(#_) {font-size:clamp(16px,2.2svh,22px)}
  .v3-chapter:has(.v3-media) .v3-details>summary:not(#_) {min-height:34px}
  .v3-chapter:has(.v3-media) .v3-progress:not(#_) {margin-top:12px}
}

/* ── Chapitre horizontal : le défilement vertical devient un parcours latéral, puis redevient vertical ──
   Le chapitre reste collé le temps du parcours ; les cartes avancent, la barre indique où l’on en est. */
.v3-rail {position:relative;background:var(--n-paper);color:var(--n-ink)}
.v3-rail[data-theme=ink] {background:var(--n-ink);color:var(--n-paper)}
.v3-rail[data-theme=cyan] {background:var(--n-cyan);color:var(--n-ink)}
.v3-rail[data-theme=mint] {background:var(--n-mint);color:var(--n-ink)}
.v3-rail-stage {position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3svh,34px);overflow:clip;padding-block:clamp(84px,10svh,120px) clamp(28px,4svh,64px)}
.v3-rail-head {padding-inline:var(--n-gutter);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:14px 56px;align-items:end}
@media(max-width:860px) {.v3-rail-head {grid-template-columns:1fr}}
.v3-rail-track {display:flex;gap:clamp(16px,2.4vw,34px);padding-inline:var(--n-gutter);will-change:transform;transform:translate3d(var(--n-x,0px),0,0)}
.v3-rail-item {flex:0 0 min(74vw,430px);display:flex;flex-direction:column}
.v3-rail-item .v3-media img {height:min(34svh,360px)}
@media(min-width:861px) and (max-height:860px) {.v3-rail-item .v3-media img {height:min(27svh,260px)}}
.v3-rail-progress {margin-inline:var(--n-gutter);height:2px;background:currentColor;opacity:.25;position:relative}
.v3-rail-progress span {position:absolute;inset:0 auto 0 0;width:var(--n-progress,0%);background:currentColor;opacity:1}
.v3-rail-hint {padding-inline:var(--n-gutter);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;gap:10px;align-items:center;opacity:.8}
.v3-rail-hint i {display:block;width:26px;height:1px;background:currentColor;transform-origin:left;animation:v3-hint 2.4s var(--n-ease) infinite}
@keyframes v3-hint {0%,100%{transform:scaleX(.4)}50%{transform:scaleX(1)}}
/* Révélation des images à l’entrée : le cadre s’ouvre, l’image s’installe. */
.v3-media {clip-path:inset(var(--n-clip,0%) 0 0 0);transition:clip-path 900ms var(--n-ease)}
.v3-chapter[data-enter=out] .v3-media,.v3-rail[data-enter=out] .v3-media {--n-clip:100%}
@media(prefers-reduced-motion:reduce) {
  .v3-rail-stage {position:relative;height:auto}
  .v3-rail-track {flex-wrap:wrap;transform:none}
  .v3-rail-item {flex:1 1 280px}
  .v3-rail-hint i {animation:none}
  .v3-media {clip-path:none;transition:none}
}

/* Accueil : film d’ouverture plein cadre, trio de formats, énoncé de réassurance. */
.v3-film:not(#_) {padding:0}
.v3-film .v3-inner {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(84px,10svh,124px) var(--n-gutter) clamp(40px,6svh,88px)}
.v3-film-video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.v3-film .v3-display {position:relative;z-index:1}
.v3-film-control {position:absolute;right:var(--n-gutter);bottom:clamp(40px,6svh,88px);width:48px;height:48px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;font-size:13px;cursor:pointer}
.v3-trio {display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px)}
.v3-trio .v3-media {margin:0}
.v3-trio .v3-media img:not(#_) {height:min(34svh,380px);width:100%;object-fit:cover}
@media(min-width:861px) and (max-height:860px) {.v3-trio .v3-media img:not(#_) {height:min(28svh,280px)}}
@media(max-width:860px) {.v3-trio {grid-template-columns:1fr 1fr}.v3-trio .v3-media:last-child {display:none}.v3-trio .v3-media img:not(#_) {height:min(26svh,240px)}}
.v3-statement {font-size:clamp(17px,2.4svh,22px);line-height:1.45;max-width:62ch;margin:clamp(12px,2svh,24px) 0 0}
.v3-rail-item .v3-card h3 a {color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ── Défilement précis : la page s’arrête sur chaque écran, et le parcours horizontal sur chaque carte ── */
html:has(.v3-page) {scroll-snap-type:y proximity}
.v3-chapter {scroll-snap-align:start;scroll-snap-stop:always}
.v3-rail-snap {position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
@media(prefers-reduced-motion:reduce) {html:has(.v3-page) {scroll-snap-type:none}}

/* ── Chapitre agents ───────────────────────────────────────────────────────────
   La scène Three.js de la V1 est reprise telle quelle. Le chapitre reste un mur
   d'encre ; la scène y pose une feuille crème, ce qui préserve à la fois
   l'alternance des couleurs et les couleurs propres de la scène. Elle doit tenir
   dans un écran à toutes les hauteurs, donc tout ce qui la compose est en svh. */
.v3-agent>.v3-inner:not(#_){display:grid;place-items:center;width:100%;padding:clamp(12px,2.6svh,34px) clamp(12px,2.6vw,34px);min-height:0}
.v3-agent .ea-agent:not(#_){width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(16px,3svh,32px) clamp(18px,2.6vw,40px) clamp(12px,2.2svh,24px);overflow:hidden;box-shadow:0 22px 60px rgba(13,27,38,.22)}
.v3-agent .ea-heading h2:not(#_){margin-top:clamp(6px,1.4svh,14px)}
.v3-agent .ea-theatre:not(#_){margin-top:clamp(10px,2.2svh,26px);min-height:0;flex:1 1 auto;grid-template-rows:auto minmax(150px,1fr)}
.v3-agent .ea-agent:not(#_){height:100%}
.v3-agent .ea-visual:not(#_){min-height:0;display:flex;flex-direction:column;gap:6px}
.v3-agent .ea-evidence:not(#_){min-height:0}
.v3-agent .ea-scene:not(#_){height:auto;flex:1 1 auto;min-height:150px}
.v3-agent .ea-foot:not(#_){margin-top:clamp(8px,1.6svh,18px);padding-top:clamp(8px,1.4svh,16px)}
.v3-agent .v3-note:not(#_){margin:clamp(8px,1.6svh,18px) 0 0;text-align:center;max-width:62ch}
@media (max-width:860px){
  .v3-agent .ea-theatre:not(#_){grid-template-areas:'tabs controls' 'scene scene' 'copy copy';grid-template-columns:1fr auto;grid-template-rows:auto minmax(104px,1fr) auto;row-gap:clamp(5px,1.1svh,11px);column-gap:10px;align-items:stretch}
  .v3-agent .ea-states:not(#_){align-items:center}
  .v3-agent .ea-playback:not(#_){margin:0;min-height:44px}
  .v3-agent .ea-agent-caption:not(#_){min-height:20px;padding:0;font-size:11px}
  .v3-agent .ea-sheet-label:not(#_){font-size:11px}
  .v3-agent .ea-message:not(#_){font-size:19px;line-height:1.2}
  .v3-agent .ea-support:not(#_){font-size:12px;line-height:1.35}
  .v3-agent>.v3-inner:not(#_){padding:clamp(8px,1.4svh,16px) 14px}
  .v3-agent .ea-agent:not(#_){padding:clamp(10px,1.8svh,18px) 16px clamp(8px,1.4svh,14px)}
  .v3-agent .ea-eyebrow:not(#_){font-size:12px}
  .v3-agent .ea-heading h2:not(#_){font-size:clamp(26px,7.4vw,34px);margin-top:5px}
  .v3-agent .ea-intro:not(#_){font-size:15px;margin-top:5px}
  .v3-agent .ea-scene:not(#_){min-height:104px}
  .v3-agent .ea-foot:not(#_){flex-direction:column;align-items:flex-start;gap:4px;font-size:12px}
  .v3-agent .v3-note:not(#_){font-size:13px;margin-top:8px}
}
/* Écrans courts (iPhone SE, barre d'URL déployée) : la scène garde la main, le texte se resserre. */
@media (max-width:860px) and (max-height:800px){
  .v3-agent .ea-scene:not(#_){min-height:86px}
  .v3-agent .ea-heading h2:not(#_){font-size:clamp(23px,6.4vw,29px)}
  .v3-agent .ea-intro:not(#_){font-size:14px}
  .v3-agent .ea-message:not(#_){font-size:17px}
  .v3-agent .ea-support:not(#_){font-size:11px}
  .v3-agent .v3-note:not(#_){font-size:12px;margin-top:6px}
}
/* agent-sep9.css masque le retour à la ligne du titre hors mobile ; la V1 le rétablit dans
   v2-home.css, que le pilote ne charge pas. Même rendu que la V1, deux lignes. */
.v3-agent .ea-heading h2 br{display:block}
/* Écrans bas en bureau (1366×700, fenêtre réduite) : le titre suit la hauteur, pas seulement la largeur. */
@media (min-width:861px) and (max-height:790px){
  .v3-agent .ea-heading h2:not(#_){font-size:clamp(30px,6.4svh,46px);margin-top:8px}
  .v3-agent .ea-intro:not(#_){font-size:15px;margin-top:8px!important}
  .v3-agent .ea-agent:not(#_){padding-block:14px 10px}
  .v3-agent .ea-theatre:not(#_){margin-top:12px}
  .v3-agent .ea-scene:not(#_){min-height:118px}
  .v3-agent>.v3-inner:not(#_){padding-block:10px}
  .v3-agent .v3-note:not(#_){margin-top:8px;font-size:13px}
}
/* Mobile : l'en-tête tenait sur deux colonnes qui se cassaient, la commande de lecture touchait
   les onglets, et le pied se répartissait mal. Une ligne par information. */
@media (max-width:860px){
  .v3-agent .ea-eyebrow:not(#_){display:block;line-height:1.5}
  .v3-agent .ea-eyebrow span:not(#_){display:block}
  .v3-agent .ea-theatre:not(#_){column-gap:14px}
  .v3-agent .ea-play:not(#_){font-size:12px;min-height:40px;padding-inline:14px;gap:8px}
  .v3-agent .ea-reset:not(#_){width:40px;height:40px;flex:0 0 40px}
  .v3-agent .ea-states button:not(#_){font-size:12px;min-height:40px}
  .v3-agent .ea-foot:not(#_){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px}
  .v3-agent .ea-foot>p:not(#_){font-size:10.5px;line-height:1.35}
  .v3-agent .ea-details:not(#_){font-size:12px}
}

/* ── Schéma : la liaison se trace au défilement ────────────────────────────────
   Le message « un brief devient tous les formats » est porté par le tracé et par
   l'arrivée des formats, plus par une phrase. Sans mouvement, tout est déjà en place. */
.v3-flow{position:relative;height:1px;margin:0 0 clamp(12px,2vh,22px);background:rgba(31,65,90,.2)}
.v3-flow>span{position:absolute;top:-1px;left:0;height:3px;width:100%;background:var(--n-cyan);transform-origin:left}
.v3-step .v3-chips>li{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.v3-flow>span{width:100%!important}}
/* Le chapitre de la scène est borné à l'écran : c'est la scène qui absorbe la différence,
   jamais le texte. Sans cette borne, le chapitre pousse au-delà de la fenêtre sur les pages
   où l'en-tête de la scène occupe deux lignes de plus. */
.v3-agent:not(#_){height:100svh}
.v3-agent>.v3-inner:not(#_){height:100%;min-height:0;overflow:hidden;padding-block:clamp(10px,2svh,26px)}
.v3-agent .ea-agent:not(#_){min-height:0}
.v3-agent .ea-evidence:not(#_){overflow:hidden}
/* Ligne de clôture d'un parcours : même gouttière que le titre, et lisible. */
.v3-rail-stage>.v3-note:not(#_){padding-inline:var(--n-gutter);opacity:.82;margin-top:clamp(8px,1.4svh,16px)}
/* Le nombre de colonnes suit le nombre d'étapes : quatre étapes tiennent sur une ligne,
   sinon la dernière se retrouve seule sous les trois autres. */
@media(min-width:861px){
  .v3-carousel[data-desktop=grid][data-cols="4"] .v3-track:not(#_){grid-template-columns:repeat(4,minmax(0,1fr))}
  .v3-carousel[data-desktop=grid][data-cols="2"] .v3-track:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Listes de répartition (qui fait quoi) et lignes d'étiquettes reprises telles quelles. */
.v3-liste{list-style:none;margin:clamp(10px,1.6svh,18px) 0 0;padding:0;display:grid;gap:clamp(6px,1svh,10px)}
.v3-liste li{position:relative;padding-left:18px;font-size:15px;line-height:1.45}
.v3-liste li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:currentColor;opacity:.55}
.v3-tags{opacity:.7;margin-top:clamp(8px,1.2svh,14px)}
@media(max-width:860px){.v3-liste li{font-size:14px}}

/* Chiffres clés : la valeur porte l'écran, la légende l'explique. */
.v3-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(18px,3vw,44px) clamp(20px,3vw,48px);margin:clamp(16px,3svh,36px) 0 0}
.v3-stat dt{display:grid;gap:4px}
.v3-stat-valeur{display:block;font-size:clamp(38px,5.4svh,68px);line-height:1;letter-spacing:-.04em;font-weight:500}
.v3-stat-label{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.v3-stat dd{margin:10px 0 0;font-size:14px;line-height:1.45;max-width:26ch}
@media(max-width:860px){
  .v3-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2.4svh,22px) 18px}
  .v3-stat-valeur{font-size:clamp(28px,7vw,40px)}
  .v3-stat dd{font-size:12.5px;margin-top:6px}
}

/* ── Contact ───────────────────────────────────────────────────────────────────
   Le balisage du formulaire est celui de la V1, identifiants compris, pour que
   scripts/contact.js fonctionne sans modification. Seule la présentation est ici. */
.v3-formulaire:not(#_){height:auto;min-height:100svh}
.v3-form-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(22px,3vw,56px);margin-top:clamp(16px,3svh,34px);align-items:start}
.v3-form-aside h3{font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.03em;font-weight:500;margin:0 0 12px}
.v3-form-aside .v3-note{margin-top:10px}
#contact-form{display:grid;gap:clamp(12px,1.8svh,18px)}
#contact-form .eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.72;margin:0}
#contact-form .form-required-note{font-size:13px;opacity:.72;margin:0}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:13px;font-weight:500}
.field .optional{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-left:6px}
.field input,.field select,.field textarea{font:inherit;font-size:15px;color:inherit;background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:9px 2px;min-height:44px;width:100%}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field select{appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 13px) 55%,calc(100% - 8px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--n-cyan);outline-offset:3px}
.field-error{color:#8C2929;font-size:12px;line-height:1.5}
.v3-chapter[data-theme=ink] .field-error{color:#F2B8B8}
.consent-label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:13px;line-height:1.5}
.consent-label input{margin-top:2px;width:18px;height:18px;accent-color:var(--n-ink)}
.consent-label a{text-decoration:underline;text-underline-offset:3px}
.honey{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-submit-row{margin-top:clamp(4px,1svh,10px)}
#contact-form .button{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:12px 22px;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;background:var(--n-ink);color:var(--n-paper)}
#contact-form .button:disabled{opacity:.55;cursor:default}
.form-status{padding:20px;background:rgba(255,248,234,.9);border-left:3px solid var(--n-cyan);font-size:14px;line-height:1.6;color:var(--n-ink);scroll-margin-top:50px}
.form-status[data-state="error"]{border-color:#8C2929}
.form-status strong{display:block;font-size:19px;line-height:1.3;font-weight:500;margin-bottom:8px}
.form-status a{text-decoration:underline}

/* Implantations : deux adresses, une carte à la demande. */
.v3-implantations:not(#_){height:auto;min-height:100svh}
.v3-implantations .locations-heading h2{font-size:clamp(34px,5.2svh,60px);line-height:1.04;letter-spacing:-.04em;font-weight:500;margin:6px 0 12px}
.v3-implantations .eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.72;margin:0}
.v3-implantations article{display:grid;gap:8px;align-content:start}
.v3-implantations h3{font-size:clamp(20px,2.2vw,26px);font-weight:500;margin:0}
.v3-implantations .location-role{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.72;margin:0}
.v3-implantations address{font-style:normal;font-size:15px;line-height:1.55}
.v3-implantations address a{text-decoration:underline;text-underline-offset:3px}
.v3-implantations .location-dot{display:none}
.v3-implantations .text-link{background:none;border:0;padding:0;font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;justify-self:start}
.v3-implantations .map-consent-note{font-size:13px;opacity:.78;margin-top:clamp(10px,1.6svh,18px)}
.v3-implantations iframe{width:100%;border:0;aspect-ratio:16/9;margin-top:10px}
.v3-implantations a{color:inherit}
.v3-implantations .locations-grid{display:grid;gap:clamp(18px,3svh,34px);margin-top:clamp(14px,2.4svh,28px)}
.v3-implantations .location-top{display:flex;align-items:baseline;gap:12px}
@media(min-width:861px){
  .v3-implantations .locations-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
}
@media(max-width:860px){
  .v3-form-grid{grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.6svh,26px)}
  .form-row{grid-template-columns:minmax(0,1fr)}
}

/* ── Mouvement ─────────────────────────────────────────────────────────────────
   Les lignes d'un titre se lèvent derrière un masque ; les cartes d'un parcours
   prennent de la profondeur ; le champ d'échos se glisse derrière le premier écran.
   Sans JavaScript et en mouvement réduit, tout est déjà à sa place. */
.v3-ligne{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
/* Seule la doublure fabriquée par le découpage devient un bloc. Viser « .v3-ligne>span »
   attrapait aussi les <span> écrits dans la source : sur Contact, « Parlons de<br><span>votre
   projet.</span> » voyait son span passer en bloc, et le <br> qui le précédait ouvrait une
   ligne vide entière — 200 px de vide entre les deux lignes du titre, mesurés le 18/09. */
.v3-ligne>.v3-leve{display:block;will-change:transform}
.v3-rail-item{--n-profondeur:1}
.v3-rail-item .v3-card{transform:scale(calc(.975 + .025 * var(--n-profondeur)));transform-origin:50% 40%;transition:transform .25s linear}
.v3-echo-toile{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.v3-chapter[data-echo]{position:sticky;isolation:isolate}
.v3-chapter[data-echo]>.v3-inner{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .v3-ligne,.v3-ligne>.v3-leve{transform:none!important;opacity:1!important}
  .v3-rail-item .v3-card{transform:none}
}

/* Parcours horizontal : deux cartes et demie à l'écran. La demi-carte est volontaire — elle dit
   qu'il y a une suite — alors qu'une carte coupée au hasard par le bord passe pour un défaut
   d'alignement. La largeur se déduit de la gouttière, elle n'est donc jamais approximative. */
@media (min-width:861px){
  .v3-rail-track:not(#_){--n-ecart:clamp(16px,2.4vw,34px);gap:var(--n-ecart)}
  .v3-rail-item:not(#_){flex:0 0 calc((100% - 2 * var(--n-ecart)) / 2.5)}
}
/* La demi-carte s'éteint dans le mur au lieu d'être tranchée par le bord de la fenêtre :
   la coupure devient une intention, et non un défaut de gouttière. */
.v3-rail{--n-mur:var(--n-paper)}
.v3-rail[data-theme=ink]{--n-mur:var(--n-ink)}
.v3-rail[data-theme=cyan]{--n-mur:var(--n-cyan)}
.v3-rail[data-theme=mint]{--n-mur:var(--n-mint)}
@media (min-width:861px){
  .v3-rail-stage::after{content:'';position:absolute;top:0;bottom:0;right:0;width:var(--n-gutter);
    background:linear-gradient(90deg,rgba(0,0,0,0),var(--n-mur) 78%);pointer-events:none;z-index:2}
}
/* Signature de l'accueil : les lettres de « Friction » se rangent, « to flow » glisse. */
.v3-lettre,.v3-glisse{display:inline-block;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.v3-lettre,.v3-glisse{transform:none!important;opacity:1!important}}
/* La scène d'un parcours horizontal doit inclure ses marges internes dans sa hauteur :
   sans cela elle dépasse l'écran de la valeur des marges, le contenu se décale vers le bas
   et les cartes sont coupées en bas. */
.v3-rail-stage:not(#_){box-sizing:border-box}
/* Le passage d'écran s'applique aussi aux parcours horizontaux : c'est leur scène qui recule
   et s'assombrit, pas la section qui l'enveloppe. Sans cela la continuité se cassait à chaque rail. */
.v3-rail>.v3-rail-stage{transform:translate3d(0,var(--n-lift,0),0) scale(var(--n-scale,1));transform-origin:50% 0;will-change:transform;filter:blur(var(--n-blur,0px))}
.v3-rail-stage::before{content:'';position:absolute;inset:0;background:#0d1b26;opacity:var(--n-dim,0);pointer-events:none;z-index:5}
.v3-rail{border-radius:var(--n-radius,0px) var(--n-radius,0px) 0 0;overflow:clip;box-shadow:0 -26px 64px rgba(13,27,38,.10)}
@media (prefers-reduced-motion:reduce){
  .v3-rail>.v3-rail-stage{transform:none;filter:none}
  .v3-rail-stage::before{opacity:0}
}
/* Le voile qui fait reculer un écran est calibré par mur : sur l'encre il creuse la profondeur,
   sur le crème, le cyan ou la menthe il salissait la couleur. La charte prime sur l'effet. */
.v3-chapter,.v3-rail{--n-voile:.45}
.v3-chapter[data-theme=ink],.v3-rail[data-theme=ink]{--n-voile:1}
.v3-chapter::after{opacity:calc(var(--n-dim,0) * var(--n-voile))}
.v3-rail-stage::before{opacity:calc(var(--n-dim,0) * var(--n-voile))}

/* Un dépliant ouvert dans une carte ne doit jamais sortir de l'écran : le chapitre tient sa
   hauteur, donc c'est le contenu déplié qui prend son propre défilement, borné et contenu.
   Sans cela, un texte du cahier des charges devenait tout simplement inatteignable. */
.v3-rail .v3-details[open]>div,
.v3-track .v3-details[open]>div{max-height:min(40svh,320px);overflow:auto;overscroll-behavior:contain;
  padding-right:8px;scrollbar-width:thin;scrollbar-color:currentColor transparent}
.v3-rail .v3-details[open]>div::-webkit-scrollbar,
.v3-track .v3-details[open]>div::-webkit-scrollbar{width:3px}
.v3-rail .v3-details[open]>div::-webkit-scrollbar-thumb,
.v3-track .v3-details[open]>div::-webkit-scrollbar-thumb{background:currentColor;opacity:.4}

/* ── Corrections issues du gauntlet ────────────────────────────────────────────
   Chaque règle répond à un constat vérifié par contre-expertise. */

/* Le titre de clôture se composait sur trois lignes dont une d'un seul mot. */
.v3-cta .v3-display:not(#_){max-width:18ch}

/* Une cible tactile ne descend pas sous 44 px, et elle occupe toute la largeur
   de la carte : viser un mot souligné de 34 px de haut était une faute. */
.v3-details>summary:not(#_){min-height:44px;width:100%;display:flex;align-items:center;
  /* La cible occupe toute la largeur de la carte, mais l'intitulé et son signe restent
     côte à côte : séparés aux deux bouts, ils ne se lisaient plus comme un même bouton. */
  justify-content:flex-start;gap:12px}

/* Les rangées d'étiquettes s'alignent d'une carte à l'autre même quand un titre
   tient sur une ligne et le voisin sur deux. */
.v3-rail-item .v3-card h3:not(#_){min-height:2lh}
@supports not (height:1lh){.v3-rail-item .v3-card h3:not(#_){min-height:calc(2 * 1.15em)}}

/* La parallaxe déplaçait l'image dans un cadre de sa taille exacte : une bande vide
   apparaissait en haut. L'image est légèrement agrandie pour que le cadre reste couvert. */
.v3-media img,.v3-trio img{scale:1.09}

/* Le lien d'évitement doit emmener le focus, pas seulement le défilement. */
main:focus{outline:none}

/* L'accrochage au défilement prenait le premier chapitre comme premier point d'arrêt et passait
   par-dessus l'en-tête dès le chargement : la navigation n'était jamais visible. Le haut de la
   page devient un point d'arrêt à part entière, et l'en-tête reste au-dessus des murs de couleur. */
.v3-page .v2-header{scroll-snap-align:start;scroll-snap-stop:always;position:sticky;top:0;z-index:80}
.v3-page .v2-header::before{content:'';position:absolute;inset:0;background:var(--n-paper);z-index:-1}

/* ── Derniers correctifs du gauntlet ───────────────────────────────────────────

   1. L'échelle mobile était écrasée. Les blocs d'écran étroits sont écrits plus haut dans le
      fichier que la règle générale des grands titres, de même spécificité : c'est donc la règle
      générale qui gagnait, et un titre tombait à 29 px sur téléphone au lieu des 40 prévus.
      On rétablit les paliers ici, après tout le reste. */
@media (max-width:620px){
  /* 36 px et non 40 : à 40 le premier écran de Visual IA dépassait de 29 px sur un 390×844. */
  .v3-display:not(#_){font-size:36px;line-height:1;letter-spacing:-.035em;max-width:none}
  .v3-cover:not(#_){font-size:29px;line-height:1.05;letter-spacing:-.03em;max-width:none}
  .v3-slide h3:not(#_),.v3-rail-item .v3-card h3:not(#_){font-size:20px;line-height:1.2}
}
@media (min-width:621px) and (max-width:860px){
  .v3-display:not(#_){font-size:clamp(46px,7vw,64px);line-height:.96}
  .v3-cover:not(#_){font-size:clamp(38px,5.6vw,52px);line-height:1}
}

/* 2. La gouttière voyage avec la translation : au milieu d'un parcours, le texte d'une carte
      touchait le bord gauche de la fenêtre. Les deux bords s'éteignent maintenant dans le mur. */
@media (min-width:861px){
  .v3-rail-stage::before{content:'';position:absolute;top:0;bottom:0;left:0;width:var(--n-gutter);
    background:linear-gradient(270deg,rgba(0,0,0,0),var(--n-mur) 78%);pointer-events:none;z-index:2}
}

/* 3. L'en-tête d'un parcours se posait à une hauteur différente selon la longueur des cartes.
      Trois rangées : en-tête calé en haut, piste au milieu, clôture en bas. Le même composant
      se lit désormais à la même place d'une page à l'autre. */
.v3-rail-stage:not(#_){display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  /* Sans colonne déclarée, la grille prend la largeur intrinsèque de son contenu : le titre
     cessait de se renvoyer à la ligne et débordait de l'écran sur téléphone. */
  grid-template-columns:minmax(0,1fr);align-content:stretch}
.v3-rail-stage>.v3-rail-track:not(#_){align-self:center}

/* 4. Reste de contraste : les pastilles et la ligne d'amorce mangeaient la réserve sur le cyan. */
.v3-chips li:not(#_){opacity:1}
.v3-rail-hint:not(#_){opacity:1}

/* 5. Le chapitre de la scène cessait de grandir quand le visiteur agrandit le texte, et le bas
      de la démonstration était coupé sans moyen d'y accéder. Il garde sa hauteur d'écran comme
      minimum, et accepte de croître si la lecture l'exige. */
.v3-agent:not(#_){height:auto;min-height:100svh}
.v3-agent>.v3-inner:not(#_){height:auto;min-height:100%;overflow:visible}

/* 6. Les grands titres ne sont plus laissés à l'algorithme du navigateur : les lignes
      s'équilibrent au lieu de laisser un mot seul. */
.v3-display:not(#_),.v3-cover:not(#_),.v3-card h3:not(#_){text-wrap:balance}
/* Le plancher de la scène était plus haut que la place réellement disponible : le chapitre
   dépassait de quelques dizaines de pixels, que la hauteur figée masquait en les rognant.
   On abaisse le plancher pour que le contenu tienne vraiment, au lieu d'être coupé. */
.v3-agent .ea-scene:not(#_){min-height:112px}
.v3-agent>.v3-inner:not(#_){min-height:100svh;box-sizing:border-box}
/* Correction de la correction : borner la hauteur du chapitre est nécessaire pour que la scène
   sache quelle place elle peut prendre. On la borne donc de nouveau, mais l'intérieur devient
   défilable : au zoom texte, rien n'est coupé, on peut atteindre le bas de la démonstration. */
.v3-agent:not(#_){height:100svh;min-height:100svh}
.v3-agent>.v3-inner:not(#_){height:100%;min-height:0;overflow:clip}

/* Correction du 18/09, signalée par Adam : « le scroll bug à ce niveau ». C'était moi.
   `overflow:auto` faisait du panneau une zone de défilement à part, et `overscroll-behavior:
   contain` empêchait la molette de repasser la main à la page : curseur sur la démonstration,
   la page s'arrêtait de défiler. La scène tient dans son écran — le contrôleur « rien de
   coupé » le vérifie à quatre formats —, elle n'a donc pas besoin de défiler pour elle-même. */
/* Premier écran de Visual IA sur téléphone : l'image du hero poussait le chapitre 19 px trop
   bas une fois l'échelle typographique rétablie. Elle cède ces pixels, le texte les garde. */
@media (max-width:620px){
  .v3-hero figure img:not(#_){max-height:min(27svh,232px);object-fit:cover;width:100%}
}
/* Les deux fondus de bord valent aussi sur téléphone : c'est là que la carte coupée par le bord
   se voit le plus, l'écran étant à peine plus large qu'une carte. */
.v3-rail-stage::after,.v3-rail-stage::before{content:'';position:absolute;top:0;bottom:0;width:var(--n-gutter);pointer-events:none;z-index:2}
.v3-rail-stage::after{right:0;background:linear-gradient(90deg,rgba(0,0,0,0),var(--n-mur) 78%)}
.v3-rail-stage::before{left:0;background:linear-gradient(270deg,rgba(0,0,0,0),var(--n-mur) 78%)}
/* Le voile de recul reste porté par la scène elle-même, pas par ses bords. */
/* `position:sticky` positionne déjà : la règle `position:relative` écrite ici pour les fondus
   de bord écrasait la scène collante de TOUS les parcours du site. La scène défilait alors avec
   la page et la hauteur de course du parcours devenait un mur de couleur vide. Mesuré le 18/09 :
   position calculée « relative », cinq écrans à 0 % d'occupation sur l'accueil. */

/* 4. L'en-tête est collante et occupe le haut du flux. Le premier bloc, lui, commence sous elle :
      en lui laissant 100svh, son bas tombait sous la ligne de flottaison — et c'est là que vit le
      titre du film. Mesuré : « From friction to flow » coupé en deux au chargement. */
.v3-page main>:first-child.v3-chapter:not(#_){min-height:calc(100svh - var(--n-entete,94px))}
.v3-page main>:first-child.v3-rail>.v3-rail-stage:not(#_){height:calc(100svh - var(--n-entete,94px))}

/* 5. La piste d'un parcours était centrée dans la scène : les cartes gardaient leur hauteur
      naturelle — deux lignes de texte — au milieu d'un écran entier, et les deux tiers du mur
      restaient nus. Mesuré le 18/09 sur l'accueil : 29 % d'occupation, cinq écrans de suite.
      La piste occupe maintenant toute la rangée et chaque carte devient une colonne : intitulé
      en haut, réponse dessous, dépliant posé en bas.

   Première tentative, écartée après mesure : étirer les cartes sur toute la rangée. Le vide ne
   disparaissait pas, il se déplaçait au milieu de chaque carte et laissait le lien « Le périmètre »
   orphelin tout en bas. Ce qu'il fallait changer, c'est à qui revient le mou : à l'énoncé, pas à
   la piste. La rangée de tête prend la place libre et son contenu s'y centre ; la bande de cartes
   se pose juste au-dessus de la clôture. La respiration se lit alors comme une intention. */
/* La rangée de tête ne descend jamais sous son contenu : centré dans une rangée trop courte,
   l'en-tête sortait par le haut et se faisait couper. Mesuré le 18/09 : « NOTRE OFFRE » à 35 px
   au-dessus du bord sur un téléphone, « Ce que nous produisons » à 31 px sur un écran de 700 px. */
.v3-rail-stage:not(#_){grid-template-rows:minmax(min-content,1fr) auto auto}
.v3-rail-stage>.v3-rail-head:not(#_){align-self:center}
.v3-rail-stage>.v3-rail-track:not(#_){align-self:auto}
.v3-mot-signe{display:inline-block;white-space:nowrap}

/* 6. Ampleur : la voix d'un chapitre suit la place qu'il a. Un énoncé court prend un grand
      corps et se déploie du haut vers le bas de son écran — intitulé et titre en haut,
      paragraphe posé en bas — au lieu de flotter en bande au milieu d'un mur vide.
      Rien n'est ajouté au texte : c'est sa taille et sa répartition qui changent.
      Mesuré le 18/09 : À propos « Echoes, depuis 2018. » occupait 22 % de son écran. */
.v3-chapter[data-ampleur] .v3-display:not(#_){font-size:min(8.6vw,12svh,148px)}
.v3-chapter[data-ampleur] .v3-cover:not(#_){font-size:min(7.4vw,10.4svh,128px)}
.v3-chapter[data-ampleur=moyenne] .v3-display:not(#_){font-size:min(8vw,10.6svh,126px)}
.v3-chapter[data-ampleur=moyenne] .v3-cover:not(#_){font-size:min(6.8vw,9svh,108px)}
.v3-chapter[data-ampleur] .v3-lead:not(#_){font-size:clamp(17px,2.4svh,22px)}

/* Déploiement vertical : réservé aux chapitres qui portent un en-tête à deux colonnes et dont
   la composition n'est pas centrée par nature (la clôture et les chiffres gardent la leur).
   (.v3-inner est un bloc : sans en faire une colonne souple, ni le déploiement ni l'ancrage
   bas n'avaient prise, et le contenu restait collé en haut. Mesuré, corrigé, remesuré.) */
.v3-chapter[data-ampleur=grande]:not(.v3-cta):not(.v3-chiffres)>.v3-inner:not(#_){display:flex;flex-direction:column;justify-content:space-between;flex:1 1 auto}
.v3-chapter[data-ampleur=grande]:not(.v3-cta):not(.v3-chiffres) .v3-head:not(#_){flex:1 1 auto;align-items:stretch;margin-bottom:0}
.v3-chapter[data-ampleur=grande]:not(.v3-cta):not(.v3-chiffres) .v3-head>div:not(#_){align-self:start}
.v3-chapter[data-ampleur=grande]:not(.v3-cta):not(.v3-chiffres) .v3-head>.v3-lead:not(#_){align-self:end}
@media (max-width:860px){
  /* Sur téléphone, un chapitre n'est plus collant et n'a plus d'écran de référence :
     l'ampleur ne veut plus rien dire, et un très grand corps y déborderait. */
  .v3-chapter[data-ampleur] .v3-display:not(#_),
  .v3-chapter[data-ampleur=moyenne] .v3-display:not(#_){font-size:36px;line-height:1}
  .v3-chapter[data-ampleur] .v3-cover:not(#_),
  .v3-chapter[data-ampleur=moyenne] .v3-cover:not(#_){font-size:29px;line-height:1.05}
  .v3-chapter[data-ampleur] .v3-lead:not(#_){font-size:16px}
  .v3-chapter[data-ampleur=grande] .v3-head:not(#_){flex:0 1 auto}
}

/* 7. Une image dans un chapitre déployé prend la place qui reste, au lieu de garder une hauteur
      fixe et de laisser un trou entre le titre et elle. Mesuré le 18/09 sur Références : 400 px
      de bleu nu entre « ATELIER 09 » et la bande d'images. Aucune hauteur devinée : l'image
      occupe l'espace libre, donc elle ne peut pas déborder. */
.v3-chapter[data-ampleur=grande]>.v3-inner>.v3-media:not(#_){flex:1 1 auto;min-height:0;display:flex;margin-block:clamp(16px,3svh,36px)}
.v3-chapter[data-ampleur=grande]>.v3-inner>.v3-media>a:not(#_){display:flex;width:100%;min-height:0}
.v3-chapter[data-ampleur=grande]>.v3-inner>.v3-media img:not(#_){height:100%;width:100%;object-fit:cover;min-height:0}
@media (max-width:860px){
  .v3-chapter[data-ampleur=grande]>.v3-inner>.v3-media:not(#_){flex:0 1 auto}
  .v3-chapter[data-ampleur=grande]>.v3-inner>.v3-media img:not(#_){height:min(26svh,240px)}
}

/* 8. Écrans courts : en-tête, images et ligne de clôture d'un parcours ne tiennent plus ensemble
      dans 100svh. Ce qui cède, dans cet ordre : les marges de la scène, puis la hauteur des
      images des cartes. Le texte, lui, ne cède pas. Mesuré le 18/09 : la clôture de Visual IA
      passait 62 px sous le bord à 1366×700, celle de Marque blanche 82 px sur un téléphone. */
@media (max-height:900px){
  .v3-rail-stage:not(#_){padding-block:clamp(60px,7.4svh,94px) clamp(18px,2.6svh,40px);gap:clamp(10px,1.8svh,22px)}
  .v3-rail-head:not(#_){gap:10px 40px}
}
@media (min-width:861px) and (max-height:860px){
  .v3-rail-item .v3-media img:not(#_){height:min(21svh,206px)}
}
@media (max-width:860px){
  .v3-rail-stage:not(#_){padding-block:clamp(56px,7svh,88px) clamp(14px,2.2svh,32px)}
  .v3-rail-item .v3-media img:not(#_){height:min(19svh,176px)}
}

/* Une colonne souple étire ses enfants sur toute la largeur : le bouton d'un chapitre déployé
   traversait l'écran. Un lien garde sa largeur propre ; les textes gardent la leur. */
.v3-chapter[data-ampleur=grande]>.v3-inner>a:not(#_){align-self:flex-start}

/* 9. Hero : le titre traversait le prisme et « friction » devenait illisible. Le film reste plein
      cadre — consigne du 15/09 — mais son point de mire glisse vers le haut et la droite pour
      dégager le bas de l'écran, et un voile crème monte du bas. Ce voile n'est pas un pansement :
      il garantit la lisibilité du titre quelle que soit la vidéo qu'Isabelle y mettra. */
.v3-film .v3-inner:not(#_){padding-bottom:clamp(88px,11svh,148px)}
.v3-film-video:not(#_){object-position:18% 44%;transform:scale(1.08);transform-origin:82% 44%}
.v3-film .v3-inner::before{content:'';position:absolute;inset:auto 0 0 0;height:52%;z-index:0;pointer-events:none;
  background:linear-gradient(to top,var(--n-paper) 4%,rgba(255,248,234,.86) 34%,rgba(255,248,234,.42) 62%,rgba(255,248,234,0) 100%)}
.v3-film .v3-display:not(#_){max-width:min(11ch,46%);position:relative;z-index:1}
.v3-film .v3-film-control{z-index:2}

/* 10. « Un même univers. Plusieurs formats. » — les trois images étaient forcées dans le même
       cadre par object-fit:cover. Cela rognait le titre de la déclinaison carrée et, surtout,
       cela contredisait la phrase : on annonçait plusieurs formats en n'en montrant qu'un.
       Chacune reprend sa proportion native (paysage 1,6 · carré 1 · portrait 0,56), toutes à la
       même hauteur, calées sur la même ligne de pied. La largeur de l'écran fixe la hauteur,
       donc rien n'est rogné et l'écran est plein. */
@media (min-width:861px){
  .v3-chapter:has(.v3-trio)>.v3-inner:not(#_){display:flex;flex-direction:column;flex:1 1 auto}
  /* base 0 et non auto : avec `auto`, la hauteur du trio venait de son contenu, le `height:100%`
     des images se résolvait sur `auto`, elles reprenaient leur taille native et le chapitre
     passait de 1050 à 2073 px. Mesuré, puis corrigé. */
  /* La hauteur de la rangée vient de sa largeur, via la somme des rapports des trois images
     écrite par le générateur : ainsi elle est aussi grande que possible sans jamais déborder
     latéralement. `.16` couvre les deux intervalles. */
  .v3-trio:not(#_){display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,26px);
    flex:0 0 auto;width:100%;aspect-ratio:calc(var(--n-trio,3.16) + .16);max-height:100%;min-height:0}
  /* `.v3-chapter:has(.v3-media) .v3-media img` pesait plus lourd que `.v3-trio .v3-media img`
     — :has() prend la spécificité de son argument — et rendait la hauteur à 262 px. Mesuré. */
  .v3-chapter:has(.v3-trio) .v3-trio .v3-media:not(#_){height:100%;min-height:0;margin:0;display:flex;align-items:flex-end}
  .v3-chapter:has(.v3-trio) .v3-trio .v3-media img:not(#_){height:100%;width:auto;max-width:none;object-fit:contain;scale:1}
}

/* Quand un chapitre déployé contient une image ou un trio, la place libre revient à l'image,
   pas aux intervalles : sinon le déploiement écarte les blocs et laisse un trou au milieu.
   Un seul propriétaire de la place libre par chapitre. */
.v3-chapter[data-ampleur=grande]:has(>.v3-inner>.v3-media)>.v3-inner:not(#_){justify-content:flex-start}
.v3-chapter:has(.v3-trio)>.v3-inner:not(#_){justify-content:center}
.v3-chapter[data-ampleur=grande]>.v3-inner>.v3-trio:not(#_){margin-block:clamp(14px,2.6svh,32px)}

/* 11. Les quatre cas d'usage de la V1, replacés dans un chapitre. Le composant apporte sa propre
       hauteur d'écran et ses propres marges : dans un chapitre qui en a déjà, cela faisait
       1600 px pour 900 disponibles. On lui retire ce qui appartient au chapitre, on resserre
       ses respirations, et on ne touche pas à un seul de ses mots. */
/* Pas de chaîne flex ici : un conteneur flex peut comprimer son enfant sous son contenu, et
   c'est ce qui faisait sortir la ligne du bas de 70 px sans que rien ne grandisse. Un bloc,
   lui, grandit toujours avec ce qu'il contient. */
.v3-cas>.v3-inner:not(#_){display:block;height:auto;flex:0 0 auto}
/* Ce chapitre a le droit de dépasser un écran, comme le formulaire de Contact. Le forcer à
   100svh ne le faisait pas tenir : il le rognait — bouton « Examiner le dossier » à 273 px sous
   le bord, mesuré. Entre couper une action et laisser défiler un écran et demi, on laisse
   défiler. Le resserrage ci-dessus reste : il réduit le dépassement sans toucher aux textes. */
/* Le chapitre lui-même cesse d'être une colonne flexible centrée : c'est la dernière pièce qui
   pouvait contraindre la hauteur de son contenu. En bloc, il fait exactement la hauteur de ce
   qu'il porte, jamais moins. */
.v3-cas:not(#_){display:block;height:auto;min-height:100svh}
.v3-cas .ai-demo:not(#_){min-height:0;padding:0;background:transparent;overflow:visible;display:block}
.v3-cas .ai-wrap:not(#_){display:block}
.v3-cas .ai-wrap>*:not(#_){margin-block:clamp(8px,1.6svh,18px) 0}
.v3-cas .ai-demo-marker:not(#_){display:none}
.v3-cas .ai-case-picker:not(#_){margin:0;padding-top:0}
.v3-cas .ai-case-heading:not(#_){margin:0}
.v3-cas .ai-case-heading h2:not(#_){font-size:min(3.4vw,4.6svh,52px);line-height:1.02;margin:0}
.v3-cas .ai-case-heading p:not(#_){margin:clamp(4px,.9svh,10px) 0 0;font-size:clamp(14px,1.8svh,17px)}
.v3-cas .ai-workflow:not(#_){flex:1 1 auto;min-height:0;margin:0}
.v3-cas .ai-panel:not(#_){height:100%;min-height:0}
@media (max-width:860px){
  .v3-cas>.v3-inner:not(#_){overflow:visible}
  .v3-cas .ai-case-heading h2:not(#_){font-size:28px}
}

/* Resserrage du composant dans un chapitre : les respirations suivent la hauteur d'écran
   disponible (svh), pas une valeur fixe pensée pour une page qui défile librement.
   Aucun texte retiré, aucune taille de texte de lecture sous 13 px. */
/* `min-height:0` + `flex-shrink:1` laissait la piste se comprimer sous son contenu : la ligne
   d'honnêteté du bas sortait de 70 px sans que rien ne grandisse. Elle ne rétrécit plus. */
.v3-cas .ai-workflow:not(#_){min-height:auto}

.v3-cas .ai-evidence:not(#_),.v3-cas .ai-output:not(#_){padding:clamp(14px,2.4svh,28px) clamp(16px,1.8vw,30px);min-height:0}
.v3-cas .ai-pane-caption:not(#_){margin-bottom:clamp(8px,1.6svh,18px)}
.v3-cas .ai-desk h3:not(#_){font-size:min(2.1vw,3.4svh,32px);line-height:1.14}
.v3-cas .ai-file-list:not(#_){margin:clamp(10px,2svh,22px) 0 4px}
.v3-cas .ai-file-list li:not(#_){padding:clamp(6px,1.2svh,13px) 0}
.v3-cas .ai-evidence-note:not(#_){margin-top:clamp(8px,1.4svh,14px)}
.v3-cas .ai-output-symbol:not(#_){font-size:clamp(24px,4svh,40px);margin-bottom:clamp(10px,2svh,22px)}
.v3-cas .ai-case-button:not(#_){min-height:clamp(46px,6svh,62px);padding-block:clamp(6px,1.2svh,12px)}

@media (max-width:860px){
  /* La ligne d'honnêteté du bas (« exemples préparés, calculs dans votre navigateur ») doit
     rester lisible : elle passait 70 px sous le bord sur un téléphone. */
  .v3-cas:not(#_){padding-bottom:clamp(56px,9svh,96px)}
}

/* 12. Scènes Three.js des écrans 2, 6 et 7 (v3-offres3d.js). Une toile par écran, derrière le
       texte ; chaque scène occupe l'emplacement réservé en tête de sa carte. Le texte reste au-
       dessus, net, et la toile ne capte jamais le pointeur. */
.v3-scene3d{height:clamp(140px,25svh,300px);margin:0 0 clamp(10px,1.8svh,20px)}
.v3-offres3d{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}
.v3-rail-stage>.v3-rail-head,.v3-rail-stage>.v3-rail-track,.v3-rail-stage>.v3-rail-progress,.v3-rail-stage>.v3-note{position:relative;z-index:1}
.v3-cta{isolation:isolate}
.v3-cta>.v3-inner{position:relative;z-index:1}
.v3-cta .v3-button{will-change:transform}
@media (max-width:860px){.v3-scene3d{height:clamp(120px,22svh,200px)}}

/* 13. Écran 4 — « on dirait un écran dans un écran » (Adam, 18/09). Une carte crème posée sur
       un mur encre, avec ses marges : c'est la définition d'une maquette d'écran. La recherche
       (Linear, Stripe, Granola) dit l'inverse : la démo n'est pas un objet posé sur la page,
       c'est un état de la page. Le panneau est entièrement piloté par ses variables ; on
       inverse encre et papier, on retire le fond et les marges, et la démo devient le chapitre.
       Aucune règle de la scène n'est réécrite : seules ses couleurs de départ changent. */
.v3-agent .ea-agent:not(#_){
  --ea-ink:#fff8ea; --ea-paper:#1f415a; --ea-teal:#48b9ce; --ea-light:#2b5470;
  --ea-muted:color-mix(in srgb,#fff8ea 74%,#1f415a); --ea-rule:color-mix(in srgb,#fff8ea 22%,#1f415a);
  width:100%; max-width:none; background:transparent; box-shadow:none; border:0; border-radius:0;
}
.v3-agent>.v3-inner:not(#_){padding:0}

/* Miroir généré : mêmes règles pour le réglage « Réduire les animations ». */
html.reduce-motion .v3-chapter{position:relative;border-radius:0}html.reduce-motion .v3-chapter>.v3-inner{transform:none}html.reduce-motion .v3-chapter::after{display:none}html.reduce-motion .v3-media img,html.reduce-motion .v3-button,html.reduce-motion .v3-progress span{transition:none}
html.reduce-motion .v3-chapter[data-enter] .v3-inner>*,html.reduce-motion .v3-chapter[data-enter] .v3-head>*{opacity:1;transform:none}html.reduce-motion .v3-rail-stage{position:relative;height:auto}html.reduce-motion .v3-rail-track{flex-wrap:wrap;transform:none}html.reduce-motion .v3-rail-item{flex:1 1 280px}html.reduce-motion .v3-rail-hint i{animation:none}html.reduce-motion .v3-media{clip-path:none;transition:none}
html.reduce-motion:has(.v3-page){scroll-snap-type:none}html.reduce-motion .v3-flow>span{width:100%!important}html.reduce-motion .v3-ligne,html.reduce-motion .v3-ligne>.v3-leve{transform:none!important;opacity:1!important}html.reduce-motion .v3-rail-item .v3-card{transform:none}
html.reduce-motion .v3-lettre,html.reduce-motion .v3-glisse{transform:none!important;opacity:1!important}html.reduce-motion .v3-rail>.v3-rail-stage{transform:none;filter:none}html.reduce-motion .v3-rail-stage::before{opacity:0}