/* Un avis RETRO — page récit. Mêmes polices et mêmes encres que le site, mise en scène nouvelle :
   on suit un prospect fictif du devis à la signature, chaque étape montre l'outil qui agit. */
@import url("/accueil/assets/fonts.css");

:root {
  --paper: #f4f1ea;
  --paper-2: #ebe6db;
  --sheet: #fffdf8;
  --ink: #121a2c;
  --ink-2: #3a4256;
  --muted: #646b7d;
  --line: #d9d3c5;
  --accent: #1f45c4;
  --accent-2: #4c6fff;
  --accent-soft: #e9eeff;
  --night: #0e1424;
  --night-2: #18213a;
  --night-ink: #e8ebf2;
  --night-muted: #a7b0c4;
  --pro: #067647;
  --pro-2: #2fb37a;
  --pro-soft: #e3f5ea;
  --det: #c4321f;
  --det-soft: #fdeeea;
  --pas: #94570a;
  --pas-2: #e0a84a;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --shadow: 0 1px 0 rgb(18 26 44 / 0.04), 0 30px 60px -30px rgb(8 12 24 / 0.55), 0 2px 8px rgb(18 26 44 / 0.08);
  --top-h: 60px;
}
@property --gx { syntax: "<percentage>"; inherits: true; initial-value: 70%; }
@property --gy { syntax: "<percentage>"; inherits: true; initial-value: 20%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.04; text-wrap: balance; }
p { text-wrap: pretty; }
em { font-style: italic; }
a { color: inherit; }
button, a, summary { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--sheet); padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.micro { font: 600 0.68rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.kicker { font: 600 0.76rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.kicker.light { color: #a9bbff; }
.big { margin-top: 14px; font-size: clamp(2.3rem, 5.4vw, 4.6rem); letter-spacing: -0.03em; max-width: 15em; }
.big em { color: var(--accent); }

/* ------------------------------------------------------------------ curseur (souris précise seulement) */
.cursor { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .cursor { display: block; position: fixed; z-index: 999; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease); }
  .js .cursor.show { opacity: 1; }
  .cursor-ring { display: block; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid var(--accent-2); opacity: 0.8; transition: transform 300ms var(--spring), background-color 300ms var(--ease), border-color 300ms var(--ease); }
  .cursor.hot .cursor-ring { transform: scale(1.7); background: rgb(76 111 255 / 0.12); }
  .cursor.down .cursor-ring { transform: scale(0.8); }
  .cursor-txt { position: absolute; left: 0; top: 0; translate: -50% -50%; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity 200ms var(--ease); }
  .cursor.view .cursor-ring { transform: scale(2.3); background: var(--accent); border-color: var(--accent); opacity: 0.96; }
  .cursor.view .cursor-txt { opacity: 1; }
}

/* ------------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 0.95rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease), transform 150ms var(--ease);
}
.btn:active { transform: scale(0.96); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 10px 30px -10px rgb(31 69 196 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.18); }
.btn-accent:hover { background: #2a52d8; }
.btn-ghost { color: currentColor; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, currentColor 40%, transparent); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-light { min-height: 40px; padding: 0 18px; font-size: 0.88rem; background: var(--sheet); color: var(--ink); }
.btn-light:hover { background: #fff; }

/* ------------------------------------------------------------------ barre du haut : flottante, verre */
.top {
  position: fixed; z-index: 50; top: 12px; left: 50%; translate: -50% 0;
  width: min(calc(100% - 24px), 1180px); height: var(--top-h);
  display: flex; align-items: center; gap: 22px; padding: 0 10px 0 22px; border-radius: 999px;
  color: var(--night-ink);
  background: rgb(14 20 36 / 0.55); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 12px 30px -18px rgb(0 0 0 / 0.6);
  transition: background-color 400ms var(--ease), color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.top.light { color: var(--ink); background: rgb(255 253 248 / 0.72); box-shadow: inset 0 0 0 1px rgb(18 26 44 / 0.08), 0 12px 30px -20px rgb(18 26 44 / 0.35); }
.top.light .btn-light { background: var(--ink); color: var(--sheet); }
.menu-btn { display: none; }
.top.menu-open { color: var(--night-ink); background: rgb(14 20 36 / 0.55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.top.menu-open .brand em { color: var(--accent-2); }
.top.menu-open .btn-light { background: var(--sheet); color: var(--ink); }
.brand { font: 600 1.25rem/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.brand em { color: var(--accent-2); }
.top.light .brand em { color: var(--accent); }
.top-nav { display: flex; gap: 22px; margin-left: auto; transition: opacity 300ms var(--ease); }
.top-nav a { font-size: 0.9rem; font-weight: 500; text-decoration: none; opacity: 0.8; padding: 8px 0; }
.top-nav a:hover { opacity: 1; }
.top-progress { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent-2); transform: scaleX(var(--p, 0)); transform-origin: left center; opacity: 0.9; }
.hud { position: absolute; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 8px; font: 500 0.82rem/1 var(--sans); white-space: nowrap; opacity: 0; transition: opacity 300ms var(--ease); font-variant-numeric: tabular-nums; }
.top.in-story .hud { opacity: 1; }
.top.in-story .top-nav { opacity: 0; pointer-events: none; }
.hud-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgb(31 69 196 / 0.18); }
.hud-who { font-weight: 600; }
.hud-sep { opacity: 0.4; }
.hud-when { display: inline-block; min-width: 9em; }
@media (max-width: 860px) {
  .top { gap: 12px; padding-left: 18px; }
  .top-nav { display: none; }
  .hud { position: static; translate: none; margin-left: auto; font-size: 0.74rem; }
  .top:not(.in-story) .hud { display: none; }
  .hud-who, .hud-sep { display: none; }
  .hud-when { min-width: 0; }
  .top:not(.in-story) .btn-light { margin-left: auto; }
  .top .btn-light { flex: none; min-height: 36px; padding: 0 12px; font-size: 0.8rem; }
  .menu-btn { position: relative; display: block; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.1); color: inherit; cursor: pointer; }
  .top.light .menu-btn { background: rgb(18 26 44 / 0.08); }
  /* Deux traits centrés ; ouverts, ils se croisent en X. */
  .menu-btn i { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--spring); }
  .menu-btn i:first-child { transform: translateY(-3.5px); }
  .menu-btn i:last-child { transform: translateY(3.5px); }
  .menu-btn[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
}
/* Menu plein écran (téléphone) : les liens en très grand, numérotés. */
.menu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; gap: 28px; padding: calc(var(--top-h) + 40px) var(--gutter) 32px; background: rgb(14 20 36 / 0.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--night-ink); overflow: auto; }
.menu[hidden] { display: none; }
.menu-nav { display: grid; }
.menu-nav a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 400 clamp(1.7rem, 7.5vw, 2.6rem)/1.05 var(--serif); letter-spacing: -0.02em; color: #fff; text-decoration: none; }
.menu-nav a small { font: 600 0.7rem var(--sans); letter-spacing: 0.14em; color: #a9bbff; }
.menu-login { align-self: flex-start; }
.menu-foot { margin-top: auto; font-size: 0.78rem; color: var(--night-muted); }
.menu + * { position: relative; }
@media (max-width: 420px) { .top .brand { font-size: 1.05rem; } .top .btn-light { flex: none; padding: 0 12px; font-size: 0.8rem; } .top.in-story .btn-light { display: none; } }
/* Très petits téléphones : l'heure du récit laisse la place au bouton. */
@media (max-width: 360px) { .top { gap: 8px; padding-left: 14px; } .top .brand { font-size: 0.98rem; } .top .btn-light { padding: 0 10px; font-size: 0.76rem; min-height: 36px; } .hud { display: none; } }

/* Retour en haut : un anneau qui se remplit au défilement. */
.totop { position: fixed; z-index: 40; right: 18px; bottom: 18px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), rgb(18 26 44 / 0.12) 0) border-box; padding: 2px; opacity: 0; translate: 0 16px; transition: opacity 300ms var(--ease), translate 300ms var(--ease); }
.totop::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--sheet); }
.totop svg { position: relative; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.totop.show { opacity: 1; translate: 0 0; }
.totop.hide { opacity: 0; pointer-events: none; }
@media (max-width: 860px) { .totop { right: 12px; bottom: 12px; } }

/* ------------------------------------------------------------------ ouverture : la nuit, des prospects, un nom */
.opening {
  position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden;
  padding: calc(var(--top-h) + 60px) var(--gutter) 90px;
  background: var(--night);
  color: var(--night-ink);
}
/* Deux lavis de lumière qui respirent lentement derrière la constellation (transform seulement : pas de calcul lourd). */
.blob { position: absolute; z-index: 0; width: 70vmax; height: 70vmax; border-radius: 50%; pointer-events: none; will-change: transform; }
.b1 { left: 40%; top: -30%; background: radial-gradient(closest-side, rgb(29 43 88 / 0.95), transparent 72%); }
.b2 { left: -30%; top: 40%; background: radial-gradient(closest-side, rgb(31 69 196 / 0.32), transparent 72%); }
.field { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 72% 46%; }
/* Profondeur : la couche arrière bouge peu avec la souris, la couche avant davantage (translate est indépendant du zoom de Motion). */
.field-back { translate: calc(var(--px, 0) * -7px) calc(var(--py, 0) * -7px); transition: translate 700ms var(--ease); }
.field-front { translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 16px); transition: translate 500ms var(--ease); }
.field-back circle { fill: #6f85c4; }
.field .pupil { fill: var(--night); }
.ch { display: inline-block; }
.wd { display: inline-block; white-space: nowrap; }
.field circle { fill: #8fa3d9; }
.field .dim { opacity: 0.18; }
.field .camille { fill: #fff; }
.field .ring { fill: none; stroke: var(--accent-2); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.field .tagline { fill: var(--night-ink); font: 600 15px var(--sans); letter-spacing: 0.04em; }
.field .link { stroke: rgb(143 163 217 / 0.25); stroke-width: 1; }
.opening-in { position: relative; max-width: 1180px; width: 100%; margin: 0 auto; }
.opening .kicker { color: #a9bbff; }
.headline { margin-top: 22px; font-size: clamp(3rem, 8.6vw, 8.4rem); font-weight: 400; letter-spacing: -0.035em; line-height: 0.96; }
.hl { display: block; }
.hl-em em { color: #a9bbff; }
.js .hl { overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hl-in { display: inline-block; }
.lede { margin-top: 30px; max-width: 36em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--night-muted); }
.ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.ctas.center { justify-content: center; }
.facts { list-style: none; padding: 0; margin: 48px 0 0; display: flex; flex-wrap: wrap; gap: 10px 40px; }
.facts li { display: grid; gap: 2px; font-size: 0.86rem; color: var(--night-muted); padding-left: 14px; border-left: 1.5px solid rgb(169 187 255 / 0.4); }
.facts b { font: 500 1.6rem/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; }
.fiction { position: absolute; right: var(--gutter); bottom: 28px; font: 500 0.74rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); opacity: 0.7; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; width: 24px; height: 38px; margin-left: -12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgb(232 235 242 / 0.4); }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--night-ink); }
@media (max-width: 640px) { .fiction { position: static; margin-top: 30px; } .scroll-cue { display: none; } .facts { gap: 14px 24px; } }

/* ------------------------------------------------------------------ le récit */
.story { position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 64px); max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.steps { grid-column: 1; grid-row: 1; padding: 12vh 0 30vh; }
.stage-col { grid-column: 2; grid-row: 1; }
.step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; max-width: 30em; transition: opacity 500ms var(--ease); }
.step, .step-body { display: flex; flex-direction: column; gap: 16px; }
.step { position: relative; isolation: isolate; }
/* Fond de chaque étape : le numéro du chapitre en grand, juste au-dessus de la date, sur un papier réglé qui s'efface. */
.when { position: relative; }
.when::before { content: var(--n); position: absolute; z-index: -1; left: -0.05em; bottom: calc(100% - 0.14em); font: 600 clamp(9rem, 15vw, 15rem)/1.05 var(--serif); letter-spacing: -0.06em; padding-top: 0.08em; margin-bottom: -0.2em; color: transparent; background: linear-gradient(180deg, rgb(31 69 196 / 0.16), rgb(31 69 196 / 0.02) 85%); -webkit-background-clip: text; background-clip: text; opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease); pointer-events: none; }
.step::after { content: ""; position: absolute; z-index: -2; inset: 8% -12% 8% -18%; background: repeating-linear-gradient(180deg, transparent 0 33px, rgb(18 26 44 / 0.06) 33px 34px); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); opacity: 0; transition: opacity 900ms var(--ease); pointer-events: none; }
.step.on .when::before, html:not(.js) .when::before { opacity: 1; transform: none; }
.step.on::after, html:not(.js) .step::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .when::before { transform: none; transition: opacity 300ms linear; } }
@media (max-width: 900px) { .when::before { font-size: clamp(6rem, 28vw, 9rem); } .step::after { inset: 4% 0; } }
.js .step { opacity: 0.25; }
.js .step.on { opacity: 1; }
.story[data-variant="det"] [data-v="pro"], .story[data-variant="pro"] [data-v="det"] { display: none; }
.when { font: 600 0.82rem/1 var(--sans); letter-spacing: 0.06em; color: var(--accent); font-variant-numeric: tabular-nums; }
.step h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); letter-spacing: -0.03em; }
.step p:not(.when):not(.tool) { font-size: 1.08rem; color: var(--ink-2); }
.tool { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); font: 600 0.88rem/1.2 var(--sans); }
.tool span { padding: 5px 9px; border-radius: 999px; background: var(--ink); color: var(--sheet); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }

.stage {
  position: sticky; top: calc(var(--top-h) + 30px); height: calc(100svh - var(--top-h) - 60px); min-height: 500px;
  margin: 12vh 0; border-radius: 32px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(600px 400px at var(--gx, 70%) var(--gy, 20%), rgb(76 111 255 / 0.28), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 40px 100%,
    var(--night);
  box-shadow: var(--shadow), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  color: var(--ink);
  transition: --gx 900ms var(--ease), --gy 900ms var(--ease);
}
.stage[data-step="1"] { --gx: 20%; --gy: 30%; }
.stage[data-step="2"] { --gx: 80%; --gy: 20%; }
.stage[data-step="3"] { --gx: 50%; --gy: 80%; }
.stage[data-step="4"] { --gx: 85%; --gy: 15%; }
.stage[data-step="5"] { --gx: 30%; --gy: 70%; }
.stage[data-step="6"] { --gx: 70%; --gy: 60%; }
.stage[data-step="7"] { --gx: 50%; --gy: 20%; }
.stage[data-step="8"] { --gx: 50%; --gy: 50%; }
.stage .stamp { position: absolute; z-index: 5; top: 18px; right: 20px; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #ff9b8a; padding: 6px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgb(255 155 138 / 0.6); }

/* Le choix de la note : deux boutons, une pastille qui glisse. */
.variant { position: absolute; z-index: 6; top: 14px; left: 18px; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); isolation: isolate; }
.variant-label { padding: 0 10px 0 8px; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); }
.variant button { position: relative; min-width: 56px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--night-ink); font: 600 1rem/1 var(--serif); cursor: pointer; transition: color 300ms var(--ease); }
.variant button small { font: 500 0.7rem var(--sans); color: var(--night-muted); margin-left: 1px; }
.variant button[aria-pressed="true"] { color: #fff; }
.variant button[aria-pressed="true"] small { color: rgb(255 255 255 / 0.75); }
.variant-pill { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: var(--pl, 0px); width: var(--pw, 56px); border-radius: 999px; background: var(--det); transition: left 450ms var(--spring), width 450ms var(--spring), background-color 400ms var(--ease); }
.story[data-variant="pro"] .variant-pill { background: var(--pro); }
.variant-hint { position: absolute; left: 0; top: calc(100% + 12px); padding: 9px 12px; border-radius: 10px; background: #fff; color: var(--ink); font: 600 0.74rem/1.2 var(--sans); white-space: nowrap; box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.7); }
.variant-hint::before { content: ""; position: absolute; left: 30px; top: -5px; width: 10px; height: 10px; background: #fff; rotate: 45deg; }
.variant-hint[hidden] { display: none; }
@media (max-width: 900px) { .variant-hint { font-size: 0.66rem; } }

.rail { position: absolute; z-index: 5; left: 22px; top: 50%; translate: 0 -50%; list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.rail li { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.18); transition: background-color 300ms var(--ease), transform 300ms var(--spring); }
.rail li.done { background: var(--accent-2); }
.rail li.on { background: #fff; transform: scale(1.5); }
.rail-fill { position: absolute; left: 3px; top: 4px; bottom: 4px; width: 2px; z-index: -1; background: linear-gradient(var(--accent-2), var(--accent-2)) 0 0 / 100% calc(var(--rp, 0) * 100%) no-repeat, rgb(255 255 255 / 0.08); }

/* La frise du temps, en bas de la scène : le repère saute d'une étape à l'autre. */
.tl { position: absolute; z-index: 5; left: 64px; right: 28px; bottom: 22px; height: 28px; }
.tl-line { position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: rgb(255 255 255 / 0.14); }
.tl-tick { position: absolute; left: calc(var(--t) / 7 * 100%); top: 3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: rgb(255 255 255 / 0.22); }
.tl-tick b { position: absolute; top: 12px; left: 50%; translate: -50% 0; font: 500 0.64rem/1 var(--sans); letter-spacing: 0.04em; color: var(--night-muted); white-space: nowrap; }
.tl-tick:first-of-type b { translate: 0 0; left: -3px; }
.tl-tick:last-of-type b { translate: -100% 0; left: 10px; }
.tl-mark { position: absolute; top: 0; left: calc(var(--tp, 0) * 100%); width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(76 111 255 / 0.35); transition: left 700ms var(--spring); }

/* Scènes : toutes empilées, une seule allumée. Sans JavaScript, la première reste visible. */
.scene { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; padding: 64px 48px 56px 64px; opacity: 0; visibility: hidden; transform: scale(0.985); filter: blur(10px); transition: opacity 750ms var(--ease), transform 750ms var(--ease), filter 750ms var(--ease), visibility 0s linear 750ms; }
.scene.on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity 750ms var(--ease), transform 750ms var(--ease), filter 750ms var(--ease), visibility 0s; }
@media (max-width: 900px) { .scene { filter: none; } }
html:not(.js) .s1 { opacity: 1; visibility: visible; }
.devis, .queue, .mail, .phone, .fiche, .toast, .board .col, .themes, .report, .signed, .chip { background: var(--sheet); border-radius: 18px; box-shadow: var(--shadow); }

/* 1 · devis → liste */
.s1 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "src . queue" "devis flow queue" "day . dedup"; gap: 22px 4px; padding: 56px 32px 72px 56px; }
.s1 > .s1-src { grid-area: src; } .s1 > .devis { grid-area: devis; } .s1 > .flow { grid-area: flow; } .s1 > .queue { grid-area: queue; } .s1 > .s1-day { grid-area: day; } .s1 > .s1-dedup { grid-area: dedup; }
.devis { padding: 20px 22px; width: 100%; max-width: 250px; justify-self: end; }
/* D'où vient le devis, le bilan de l'import et le doublon évité : verre sombre pour le contexte, papier pour ce qui compte. */
.s1-src, .s1-day { width: 100%; max-width: 250px; justify-self: end; padding: 14px 16px; border-radius: 16px; color: #e8ecf7; background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); backdrop-filter: blur(6px); }
.s1-src .micro, .s1-day .micro { color: var(--night-muted); }
.src-row { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 7px 10px; border-radius: 9px; color: #b9c6ff; }
.src-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.74rem/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: #fff; }
.src-row em { font: 600 0.58rem/1 var(--sans); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); }
.src-row.on { background: rgb(76 111 255 / 0.2); box-shadow: inset 0 0 0 1px rgb(120 150 255 / 0.45); }
.src-or { margin: 5px 0 -3px 10px; font-size: 0.66rem; color: var(--night-muted); }
.ic-file { flex: none; width: 10px; height: 13px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px currentColor; }
.ic-code { flex: none; font: 600 0.62rem/1 ui-monospace, Menlo, monospace; }
.ic-code::before { content: "</>"; }
.s1-day dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.s1-day dl div { display: flex; flex-direction: column; gap: 5px; }
.s1-day dd { order: -1; font: 600 1.55rem/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; }
.s1-day dt { font-size: 0.64rem; line-height: 1.25; color: var(--night-muted); }
.s1-dedup { display: flex; gap: 10px; align-items: flex-start; width: 100%; max-width: 290px; justify-self: start; padding: 12px 14px; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); font-size: 0.76rem; line-height: 1.4; }
.s1-dedup i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e3f4ea; color: var(--pro); font: 700 0.72rem/1 var(--sans); font-style: normal; }
.s1-dedup i::before { content: "✓"; }
.s1-dedup b { display: block; font-size: 0.8rem; color: var(--ink); }
.s1-dedup span { color: var(--muted); }
.s1 .flow { margin: 0 -16px; transform: scale(0.74); }
.devis-no { margin-top: 6px; font: 600 1.3rem/1.2 var(--serif); }
.devis dl, .fiche dl { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.86rem; }
.devis dt, .fiche dt { color: var(--muted); }
.devis dd, .fiche dd { font-weight: 500; }
.flow { position: relative; width: 120px; height: 60px; }
.flow svg { width: 100%; height: 100%; overflow: visible; }
.flow-path { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 1.5; stroke-dasharray: 0.04 0.03; }
.paper { position: absolute; left: 0; top: 0; width: 16px; height: 20px; border-radius: 3px; background: var(--sheet); box-shadow: 0 0 0 1.5px var(--accent), 0 6px 14px -4px rgb(0 0 0 / 0.5); offset-path: path("M4 30 C 40 30, 40 30, 60 30 S 80 30, 116 30"); offset-rotate: 0deg; offset-distance: 0%; opacity: 0; }
.queue { padding: 18px; width: 100%; max-width: 290px; justify-self: start; }
.queue ul { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 6px; }
.queue li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--paper); font-size: 0.82rem; }
.queue li span { color: var(--muted); }
.queue li.new { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.queue-n { margin-top: 10px; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.queue-n span { font-weight: 600; color: var(--ink); }
.queue-n em { font-style: normal; color: var(--pro); }

/* 2 · email + suivi */
.mail { position: relative; width: min(420px, 100%); padding: 0 24px 24px; overflow: hidden; }
.mail-bar { display: flex; gap: 6px; margin: 0 -24px 18px; padding: 12px 16px; background: var(--paper-2); }
.mail-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cbc3b2; }
.mail-subj { margin-top: 6px; font: 600 1.3rem/1.2 var(--serif); }
.mail-txt { margin-top: 10px; font-size: 0.92rem; color: var(--ink-2); }
.mail-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 18px; border-radius: 999px; background: var(--ink); color: var(--sheet); font: 600 0.86rem var(--sans); }
.mail-cta.light { background: var(--accent-soft); color: var(--accent); }
.stars { display: inline-flex; gap: 2px; }
.stars b { width: 12px; height: 12px; background: var(--pas-2); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0.35; }
.trail { list-style: none; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.trail li { display: grid; gap: 2px; padding: 10px 14px 10px 36px; border-radius: 12px; position: relative; background: rgb(255 255 255 / 0.08); color: var(--night-ink); font-size: 0.8rem; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.trail li::before { content: "✓"; position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--pro); color: #fff; font-size: 0.66rem; }
.trail li span { color: var(--night-muted); font-variant-numeric: tabular-nums; }
.relance, .rule, .reco { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--night-muted); }
.relance i, .rule i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pas-2); }
.rule i { background: var(--pro-2); }

/* 3 · le téléphone */
.phone { position: relative; width: min(330px, 100%); padding: 30px 22px 24px; border-radius: 34px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 9px #1d2540, 0 0 0 10px rgb(255 255 255 / 0.1); }
.phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 70px; height: 6px; margin-left: -35px; border-radius: 4px; background: #1d2540; }
.phone .q { font: 500 1.08rem/1.25 var(--serif); }
.phone .q.small { margin-top: 14px; font-size: 0.95rem; }
.nps { margin-top: 12px; display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; }
.nps i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: var(--paper); font: 600 0.7rem var(--sans); font-style: normal; box-shadow: inset 0 0 0 1px var(--line); }
.typed { margin-top: 12px; min-height: 4.2em; padding: 10px 12px; border-radius: 10px; background: var(--paper); font: 400 0.84rem/1.4 var(--serif); color: var(--ink-2); }
.typed::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--accent); opacity: 0; }
.opts { margin-top: 8px; display: grid; gap: 6px; }
.opt { padding: 8px 12px; border-radius: 10px; font-size: 0.78rem; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.finger { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: rgb(76 111 255 / 0.25); box-shadow: inset 0 0 0 2px rgb(76 111 255 / 0.7); opacity: 0; pointer-events: none; translate: var(--fx, 200px) var(--fy, 300px); }
.thanks { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; background: var(--sheet); opacity: 0; visibility: hidden; }
.thanks b { font: 500 1.5rem var(--serif); }
.thanks span { font-size: 0.84rem; color: var(--muted); }
.check { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: var(--pro-soft); }
.check svg { width: 28px; height: 28px; fill: none; stroke: var(--pro); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* 4 · alerte (4/10) · remerciement (9/10) */
.toast { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; width: min(360px, 100%); padding: 14px 18px; border-radius: 16px; }
.toast b { font-size: 0.9rem; }
.toast span { grid-column: 2; font-size: 0.8rem; color: var(--det); font-weight: 500; }
.live { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--det); box-shadow: 0 0 0 0 rgb(196 50 31 / 0.5); }
.fiche { width: min(420px, 100%); padding: 22px 24px; }
.fiche-name { margin-top: 6px; display: flex; align-items: center; gap: 10px; font: 600 1.35rem var(--serif); }
.tag { font: 600 0.72rem var(--sans); padding: 3px 8px; border-radius: 6px; }
.tag.det { color: var(--det); background: var(--det-soft); }
.fiche dd { font-weight: 400; }

/* 5 · tableau des rappels (4/10) · points forts (9/10) */
.board { position: relative; width: min(560px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.board .col { position: relative; padding: 12px; min-height: 230px; display: grid; align-content: start; gap: 8px; background: rgb(255 253 248 / 0.94); }
.slot { height: 74px; border-radius: 10px; background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(18 26 44 / 0.03) 6px 12px); box-shadow: inset 0 0 0 1.5px var(--paper-2); }
.board .card { padding: 9px 10px; border-radius: 10px; background: var(--paper); font-size: 0.74rem; color: var(--muted); }
.card.mover { position: absolute; left: 0; top: 0; width: 150px; height: 74px; display: grid; align-content: center; gap: 1px; background: var(--sheet); color: var(--ink); font-size: 0.8rem; box-shadow: 0 0 0 1.5px var(--accent), 0 14px 26px -12px rgb(31 69 196 / 0.6); }
.card.mover span { color: var(--det); font-weight: 500; }
.card.mover em { font-style: normal; color: var(--muted); font-size: 0.72rem; }
.card.mover.ok span { color: var(--pro); }
.delay { display: flex; align-items: baseline; gap: 12px; color: var(--night-muted); font-size: 0.84rem; }
.delay b { font: 600 2rem/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; }

/* 6 · thèmes (4/10) · rapport du lundi (9/10) */
.chip { position: relative; z-index: 2; padding: 12px 16px; max-width: 340px; font: 400 0.92rem/1.35 var(--serif); color: var(--ink-2); }
.themes { width: min(440px, 100%); padding: 20px 22px; display: grid; gap: 12px; }
.th { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 12px; font-size: 0.86rem; }
.th i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--accent) 0, var(--accent) 100%) 0 0 / calc(var(--w) * 100%) 100% no-repeat, var(--paper-2); transform-origin: left; }
.th.hot span { font-weight: 600; color: var(--accent); }
.story[data-variant="pro"] .th.hot span { color: var(--pro); }
.story[data-variant="pro"] .th i { background-image: linear-gradient(90deg, var(--pro) 0, var(--pro) 100%); }
.week { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 8px; }
.week li { display: grid; grid-template-columns: 2.2em 6em 1fr; align-items: center; gap: 8px; font-size: 0.84rem; }
.week b { font: 600 1.2rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.week span { color: var(--muted); }
.bar { height: 10px; border-radius: 5px; background: var(--paper-2); position: relative; overflow: hidden; }
.bar::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 100%); border-radius: 5px; background: var(--accent); transform-origin: left; }
.bar.pro::after { background: var(--pro); } .bar.pas::after { background: var(--pas-2); } .bar.det::after { background: var(--det); }
.mail-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font: 400 0.84rem/1.4 var(--serif); color: var(--ink-2); }

/* 7 · rapport */
.report { width: min(520px, 100%); padding: 22px 24px; }
.report-top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--accent); }
.report-title { margin-top: 4px; font: 600 1.15rem/1.2 var(--serif); }
.logo { font: 600 0.78rem var(--sans); letter-spacing: 0.08em; text-align: right; }
.logo span { display: block; font-weight: 400; letter-spacing: 0; color: var(--muted); font-size: 0.68rem; }
.kpis { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { padding: 10px; border-radius: 8px; background: var(--paper); border-top: 3px solid var(--accent); }
.kpi.pro { border-top-color: var(--pro); } .kpi.det { border-top-color: var(--det); }
.kpi small { display: block; color: var(--muted); font-size: 0.68rem; }
.kpi b { font: 600 1.45rem/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.kpi em { display: block; margin-top: 4px; font: 500 0.64rem var(--sans); font-style: normal; color: var(--muted); letter-spacing: 0.02em; }
.kpi.pro b { color: var(--pro); } .kpi.det b { color: var(--det); }
.chart { display: block; width: 100%; height: 100px; margin-top: 14px; overflow: visible; }
.chart polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart .ly { stroke: #9aa0ad; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.chart .ln { stroke: var(--accent); stroke-width: 2.5; }
.chart .pt { fill: var(--accent); }
.how { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: var(--paper); font-size: 0.74rem; color: var(--ink-2); }
.how b { display: block; font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* 8 · signature */
.signed { position: relative; width: min(400px, 100%); padding: 40px 30px 28px; text-align: center; }
.seal { position: absolute; top: -18px; left: 50%; translate: -50% 0; padding: 8px 18px; border-radius: 8px; font: 600 0.9rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--pro); background: var(--pro-soft); box-shadow: inset 0 0 0 2px var(--pro); rotate: -4deg; }
.signed-name { font: 500 2.2rem/1.1 var(--serif); }
.signed-sub { margin-top: 6px; font-size: 0.86rem; color: var(--muted); }
.signed-kpi { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.signed-kpi small { display: block; color: var(--muted); font-size: 0.74rem; }
.signed-kpi b { font: 600 2.6rem/1 var(--serif); color: var(--pro); font-variant-numeric: tabular-nums; }
.reco { justify-content: center; margin-top: 14px; color: var(--pro); font-weight: 500; }
.reco i { width: 8px; height: 8px; border-radius: 50%; background: var(--pro); }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--pro-2); opacity: 0; rotate: calc(var(--i) * 30deg); }
.burst i:nth-child(1) { --i: 0; } .burst i:nth-child(2) { --i: 1; } .burst i:nth-child(3) { --i: 2; } .burst i:nth-child(4) { --i: 3; } .burst i:nth-child(5) { --i: 4; } .burst i:nth-child(6) { --i: 5; } .burst i:nth-child(7) { --i: 6; } .burst i:nth-child(8) { --i: 7; } .burst i:nth-child(9) { --i: 8; } .burst i:nth-child(10) { --i: 9; } .burst i:nth-child(11) { --i: 10; } .burst i:nth-child(12) { --i: 11; }
.burst i:nth-child(odd) { background: var(--accent-2); }

/* ------------------------------------------------------------------ mouvements des scènes */
@media (prefers-reduced-motion: no-preference) {
  .scene.on .devis { animation: in-left 700ms var(--spring) both; }
  .scene.on .flow-path { stroke-dashoffset: 0; animation: dash 2400ms linear infinite; }
  .scene.on .paper { animation: travel 1300ms var(--ease) 700ms both; }
  .scene.on .queue { animation: in-right 700ms var(--spring) 150ms both; }
  .scene.on .queue li.new { animation: drop 650ms var(--spring) 1900ms both; }
  .s1.on .s1-src { animation: in-left 700ms var(--spring) both; }
  .s1.on .devis { animation-delay: 120ms; }
  .s1.on .src-row.on { animation: src-pulse 1400ms ease-out 500ms 2; }
  .s1.on .s1-day { animation: rise 700ms var(--spring) 450ms both; }
  .s1.on .s1-dedup { animation: drop 650ms var(--spring) 2500ms both; }

  .scene.on .mail { animation: rise 700ms var(--spring) both; }
  .scene.on .trail li { animation: pop 500ms var(--spring) both; }
  .scene.on .trail li:nth-child(1) { animation-delay: 700ms; }
  .scene.on .trail li:nth-child(2) { animation-delay: 1300ms; }
  .scene.on .trail li:nth-child(3) { animation-delay: 1900ms; }
  .scene.on .relance { animation: rise 500ms var(--ease) 2600ms both; }

  .scene.on .phone { animation: rise 800ms var(--spring) both; }
  .scene.on .finger { animation: tap 1400ms var(--ease) 600ms both; }
  .scene.on .nps .pick { animation: picked 300ms var(--spring) 1500ms both; }
  .scene.on .typed::after { animation: caret 700ms steps(1) 1700ms 8; }
  .scene.on .opts { animation: rise 500ms var(--ease) 3400ms both; }
  .scene.on .opt.chosen { animation: chosen 400ms var(--spring) 4100ms both; }
  .scene.on .thanks { animation: thanks 600ms var(--ease) 5300ms both; }
  .scene.on .check svg path { animation: draw 600ms var(--ease) 5800ms both; }

  .scene.on .toast { animation: drop 700ms var(--spring) both; }
  .scene.on .live { animation: ping 1200ms ease-out 700ms 3; }
  .scene.on .fiche { animation: rise 700ms var(--spring) 450ms both; }
  .scene.on .mail-merci { animation: rise 700ms var(--spring) both; }
  .scene.on .stars b { animation: star 400ms var(--spring) both; }
  .scene.on .stars b:nth-child(1) { animation-delay: 900ms; } .scene.on .stars b:nth-child(2) { animation-delay: 1000ms; } .scene.on .stars b:nth-child(3) { animation-delay: 1100ms; } .scene.on .stars b:nth-child(4) { animation-delay: 1200ms; } .scene.on .stars b:nth-child(5) { animation-delay: 1300ms; }
  .scene.on .rule { animation: rise 500ms var(--ease) 1600ms both; }

  .scene.on .board .col { animation: rise 600ms var(--spring) both; }
  .scene.on .board .col:nth-child(2) { animation-delay: 90ms; }
  .scene.on .board .col:nth-child(3) { animation-delay: 180ms; }
  .scene.on .delay { animation: rise 600ms var(--ease) 2600ms both; }

  .scene.on .chip { animation: chip-fly 1500ms var(--ease) 300ms both; }
  .scene.on .themes { animation: rise 700ms var(--spring) both; }
  .scene.on .th i { animation: grow 1000ms var(--ease) 300ms both; }
  .scene.on .th.hot i { animation: grow 1000ms var(--ease) 300ms both, hot 600ms var(--spring) 1700ms both; }
  .scene.on .mail-lundi { animation: rise 700ms var(--spring) both; }
  .scene.on .bar::after { animation: grow 900ms var(--ease) 500ms both; }
  .scene.on .week li:nth-child(2) .bar::after { animation-delay: 650ms; }
  .scene.on .week li:nth-child(3) .bar::after { animation-delay: 800ms; }
  .scene.on .mail-foot { animation: rise 500ms var(--ease) 1500ms both; }

  .scene.on .report { animation: rise 700ms var(--spring) both; }
  .scene.on .report-top { animation: rise 500ms var(--ease) 250ms both; }
  .scene.on .kpi { animation: rise 550ms var(--spring) both; }
  .scene.on .kpi:nth-child(1) { animation-delay: 500ms; } .scene.on .kpi:nth-child(2) { animation-delay: 640ms; } .scene.on .kpi:nth-child(3) { animation-delay: 780ms; }
  .scene.on .chart .ln { stroke-dasharray: 1; animation: draw 1600ms var(--ease) 900ms both; }
  .scene.on .chart .pt { animation: pop 500ms var(--spring) 2000ms both; }
  .scene.on .kpi em { animation: rise 400ms var(--ease) both; }
  .scene.on .kpi:nth-child(1) em { animation-delay: 1900ms; } .scene.on .kpi:nth-child(2) em { animation-delay: 2050ms; } .scene.on .kpi:nth-child(3) em { animation-delay: 2200ms; }
  .scene.on .how { animation: rise 500ms var(--ease) 2300ms both; }

  .scene.on .signed { animation: rise 800ms var(--spring) both; }
  .scene.on .seal { animation: stamp 600ms cubic-bezier(0.2, 0.9, 0.3, 1.3) 500ms both; }
  .scene.on .burst i { animation: burst 1100ms var(--ease) 600ms both; }
  .scene.on .reco { animation: rise 500ms var(--ease) 1400ms both; }

  .scroll-cue i { animation: cue 1800ms var(--ease) infinite; }
  .b1 { animation: breathe1 26s ease-in-out infinite alternate; }
  .b2 { animation: breathe2 34s ease-in-out infinite alternate; }
  .manifesto::before { animation: rays 30s ease-in-out infinite alternate; }
  @keyframes breathe1 { to { transform: translate3d(-14%, 16%, 0) scale(1.18); } }
  @keyframes breathe2 { to { transform: translate3d(20%, -14%, 0) scale(0.88); } }
  @keyframes rays { from { transform: translate3d(-5%, -3%, 0) rotate(0deg); } to { transform: translate3d(5%, 3%, 0) rotate(2deg); } }
  .field .twinkle { animation: twinkle 3s ease-in-out infinite alternate; }
  .field .ring { animation: ring 2400ms ease-out infinite; }
  .field .ring.r2 { animation-delay: 1200ms; }

  @keyframes in-left { from { opacity: 0; transform: translateX(-40px) rotate(-3deg); } }
  @keyframes in-right { from { opacity: 0; transform: translateX(40px) rotate(3deg); } }
  @keyframes rise { from { opacity: 0; transform: translateY(36px) scale(0.97); } }
  @keyframes drop { from { opacity: 0; transform: translateY(-30px) scale(0.95); } }
  @keyframes pop { from { opacity: 0; transform: scale(0.6); } }
  @keyframes src-pulse { from { box-shadow: inset 0 0 0 1px rgb(120 150 255 / 0.45), 0 0 0 0 rgb(76 111 255 / 0.55); } to { box-shadow: inset 0 0 0 1px rgb(120 150 255 / 0.45), 0 0 0 10px rgb(76 111 255 / 0); } }
  @keyframes dash { to { stroke-dashoffset: -0.14; } }
  @keyframes travel { 0% { opacity: 0; offset-distance: 0%; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
  @keyframes tap { 0% { opacity: 0; translate: 240px 360px; } 60% { opacity: 1; translate: var(--fx) var(--fy); scale: 1; } 72% { scale: 0.75; } 85% { scale: 1; opacity: 1; } 100% { opacity: 0; translate: var(--fx) var(--fy); } }
  @keyframes picked { to { background: var(--pk, var(--det)); color: #fff; box-shadow: none; transform: scale(1.12); } }
  @keyframes chosen { to { background: var(--ink); color: var(--sheet); box-shadow: none; } }
  @keyframes caret { 0% { opacity: 1; } 50% { opacity: 0; } }
  @keyframes thanks { from { opacity: 0; visibility: hidden; transform: translateY(100%); } to { opacity: 1; visibility: visible; transform: none; } }
  @keyframes ping { to { box-shadow: 0 0 0 14px rgb(196 50 31 / 0); } }
  @keyframes star { from { opacity: 0.35; transform: scale(0.6); } to { opacity: 1; transform: none; } }
  @keyframes chip-fly { 0% { opacity: 0; transform: translateY(-20px); } 20% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translateY(120px) scale(0.6); } 100% { opacity: 0; transform: translateY(150px) scale(0.3); } }
  @keyframes grow { from { transform: scaleX(0); } }
  @keyframes hot { to { background-size: calc((var(--w) + 0.03) * 100%) 100%; } }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes stamp { from { opacity: 0; transform: scale(1.9); } }
  @keyframes burst { 0% { opacity: 0; transform: translateY(0) scale(0.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-150px) scale(1); } }
  @keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
  @keyframes twinkle { from { opacity: 0.12; } to { opacity: 0.55; } }
  @keyframes ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
}
/* Sans animation, chaque scène montre son état final. */
@media (prefers-reduced-motion: reduce) {
  .nps .pick { background: var(--pk, var(--det)); color: #fff; }
  .opt.chosen { background: var(--ink); color: var(--sheet); }
  .stars b { opacity: 1; }
  .check svg path { stroke-dashoffset: 0; }
  .paper, .burst { display: none; }
  html { scroll-behavior: auto; }
}
.story[data-variant="pro"] { --pk: var(--pro); }

/* ------------------------------------------------------------------ mur de verbatims : deux rangées en sens inverse */
.wall { padding: 40px 0 46px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.wall-label { text-align: center; margin-bottom: 8px; }
.wall-row { display: flex; overflow: hidden; margin-top: 12px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wall-track { display: flex; width: max-content; will-change: transform; }
.wall-set { display: flex; gap: 12px; padding-right: 12px; flex: none; }
.vb { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 12px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); font: 400 0.98rem/1.3 var(--serif); white-space: nowrap; }
.vb q { quotes: "«\00a0" "\00a0»"; }
.vb .note { font: 600 0.72rem/1 var(--sans); padding: 5px 7px; border-radius: 6px; }
.note.pro { color: var(--pro); background: var(--pro-soft); } .note.pas { color: var(--pas); background: #fdf6e7; } .note.det { color: var(--det); background: var(--det-soft); }
@media (prefers-reduced-motion: no-preference) {
  .js .wall-track { animation: wall 70s linear infinite; }
  .js .rev .wall-track { animation-direction: reverse; }
  .wall-row:hover .wall-track { animation-play-state: paused; }
  @keyframes wall { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) { .wall-row { overflow-x: auto; -webkit-mask: none; mask: none; } }

/* ------------------------------------------------------------------ Camille parmi les 418 */
.sum { padding: clamp(90px, 12vw, 160px) 0; }
.sum-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.sum-txt > p:not(.kicker) { margin-top: 20px; color: var(--ink-2); font-size: 1.08rem; max-width: 30em; }
.legend { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.legend li { display: grid; gap: 2px; min-width: 0; padding-left: 14px; border-left: 3px solid var(--line); font-size: 0.86rem; color: var(--muted); }
.legend b { font: 500 1.9rem/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.legend .pro { border-color: var(--pro-2); } .legend .pas { border-color: var(--pas-2); } .legend .det { border-color: var(--det); } .legend .rec { border-color: var(--accent); }
.dots { display: grid; grid-template-columns: repeat(22, 1fr); gap: 7px; padding: 28px; border-radius: 28px; background: var(--sheet); box-shadow: var(--shadow); }
.dots i { aspect-ratio: 1; border-radius: 50%; background: var(--paper-2); transform: scale(0.6); transition: background-color 500ms var(--ease), transform 500ms var(--spring); }
.dots i.lit { transform: none; }
.dots i.lit.pro { background: var(--pro-2); } .dots i.lit.pas { background: var(--pas-2); } .dots i.lit.det { background: var(--det); }
.dots i.me { position: relative; }
.dots i.me::after { content: "Camille"; position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--sheet); font: 600 0.62rem/1 var(--sans); letter-spacing: 0.06em; white-space: nowrap; opacity: 0; transition: opacity 400ms var(--ease) 1800ms; }
.dots i.me.lit::after { opacity: 1; }
.dots i.me.lit { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5px var(--ink); }
@media (max-width: 860px) { .sum-grid { grid-template-columns: minmax(0, 1fr); } .dots { grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 5px; padding: 18px; } }

/* ------------------------------------------------------------------ outils en mosaïque */
.tools { padding: clamp(90px, 12vw, 160px) 0; }
.bento { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 260px;
  padding: 26px; border-radius: 24px; background: var(--sheet); text-decoration: none;
  box-shadow: 0 0 0 1px var(--line); transition: transform 400ms var(--spring), box-shadow 300ms var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 26px 50px -30px rgb(18 26 44 / 0.45); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 300ms var(--ease); background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%), rgb(31 69 196 / 0.1), transparent 70%); }
.tile:hover::after { opacity: 1; }
.t-wide { grid-column: span 2; }
.t-dark { background: var(--night); color: var(--night-ink); box-shadow: none; }
.t-dark p { color: var(--night-muted) !important; }
.t-dark::after { background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%), rgb(120 150 255 / 0.18), transparent 70%); }
.tile .n { font: 400 0.9rem var(--serif); color: var(--muted); }
.tile h3 { font-size: 1.8rem; letter-spacing: -0.02em; }
.tile p { color: var(--ink-2); font-size: 0.96rem; max-width: 30em; }
.tile-art { margin-top: auto; display: flex; align-items: flex-end; gap: 6px; height: 54px; }
.art-q i { flex: 1; max-width: 34px; border-radius: 8px; background: var(--paper-2); height: 100%; transition: background-color 300ms var(--ease), transform 400ms var(--spring); }
.tile:hover .art-q i:nth-child(2) { background: var(--accent); transform: translateY(-6px); }
.art-a i { width: 14px; height: 14px; border-radius: 50%; background: var(--det); box-shadow: 0 0 0 6px var(--det-soft); }
.tile:hover .art-a i { animation: ping 1200ms ease-out infinite; }
.art-r { gap: 10px; }
.art-r i { flex: 1; height: 100%; border-radius: 10px; background: var(--paper-2); position: relative; }
.art-r i:nth-child(1)::after { content: ""; position: absolute; inset: 8px; border-radius: 6px; background: var(--accent); transition: transform 600ms var(--spring); }
.tile:hover .art-r i:nth-child(1)::after { transform: translateX(calc(200% + 36px)); }
.art-e i { flex: 1; height: 8px; border-radius: 4px; background: var(--paper-2); align-self: center; transition: background-color 300ms var(--ease); }
.tile:hover .art-e i { background: var(--pro); }
.tile:hover .art-e i:nth-child(2) { transition-delay: 150ms; }
.tile:hover .art-e i:nth-child(3) { transition-delay: 300ms; }
.art-c { flex-direction: column; align-items: stretch; gap: 6px; height: auto; }
.art-c i { height: 8px; border-radius: 4px; background: var(--accent); transform-origin: left; transition: transform 500ms var(--spring); }
.art-c i:nth-child(1) { transform: scaleX(0.8); } .art-c i:nth-child(2) { transform: scaleX(0.55); } .art-c i:nth-child(3) { transform: scaleX(0.3); }
.tile:hover .art-c i:nth-child(2) { transform: scaleX(0.7); }
.art-s { gap: 4px; align-items: center; }
.art-s b { width: 18px; height: 18px; background: var(--pas-2); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0.3; transition: opacity 300ms var(--ease), transform 400ms var(--spring); }
.tile:hover .art-s b { opacity: 1; transform: scale(1.15); }
.tile:hover .art-s b:nth-child(2) { transition-delay: 60ms; } .tile:hover .art-s b:nth-child(3) { transition-delay: 120ms; } .tile:hover .art-s b:nth-child(4) { transition-delay: 180ms; } .tile:hover .art-s b:nth-child(5) { transition-delay: 240ms; }
.art-chart { height: 70px; }
.art-chart svg { width: 100%; height: 100%; overflow: visible; }
.art-chart polyline { fill: none; stroke: var(--accent-2); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tile:hover .art-chart polyline { animation: draw 1200ms var(--ease); }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .t-wide { grid-column: auto; } .tile { min-height: 0; } }

/* ------------------------------------------------------------------ une journée : bandeau horizontal épinglé */
.day { position: relative; background: var(--paper-2); }
.day-pin { display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 4vw, 48px); padding: clamp(70px, 9vw, 110px) 0; overflow: hidden; }
.day-head .big { max-width: 14em; }
.day-track { display: flex; gap: 18px; padding: 0 var(--gutter); will-change: transform; }
.day-card { position: relative; flex: 0 0 min(400px, 78vw); display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px; background: var(--sheet); box-shadow: var(--shadow); }
.day-time { font: 600 0.82rem/1 var(--sans); letter-spacing: 0.08em; color: var(--accent); font-variant-numeric: tabular-nums; }
.day-card h3 { font-size: 1.55rem; letter-spacing: -0.02em; }
.day-card p:not(.day-time) { font-size: 0.94rem; color: var(--ink-2); }
.day-art { margin-top: auto; padding-top: 18px; display: grid; place-items: center; min-height: 90px; }
.mini-mail { width: 150px; padding: 14px; border-radius: 10px; background: var(--paper); display: grid; gap: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.mini-mail i { height: 7px; border-radius: 4px; background: var(--line); }
.mini-mail i:first-child { width: 60%; background: var(--ink); }
.mini-toast { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.78rem; }
.mini-toast b { font-size: 0.82rem; } .mini-toast span { grid-column: 2; color: var(--det); font-weight: 500; }
.mini-board { position: relative; display: flex; gap: 6px; }
.mini-board i { width: 50px; height: 60px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.mini-board b { position: absolute; left: 6px; top: 8px; width: 38px; height: 16px; border-radius: 5px; background: var(--accent); transition: transform 900ms var(--spring), background-color 400ms var(--ease); }
.day-card:hover .mini-board b, .day-card.seen .mini-board b { transform: translateX(112px); background: var(--pro); }
.mini-count { display: flex; align-items: baseline; gap: 8px; font: 500 3rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.mini-count small { font: 500 0.8rem var(--sans); color: var(--muted); }
.mini-bars { display: grid; gap: 7px; width: 170px; }
.mini-bars i { height: 10px; border-radius: 5px; background: linear-gradient(var(--accent), var(--accent)) 0 0 / calc(var(--w) * 100%) 100% no-repeat, var(--paper); transform-origin: left; }
.mini-check { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--pro-soft); }
.mini-check svg { width: 30px; height: 30px; fill: none; stroke: var(--pro); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  .day-card.seen .mini-bars i { animation: grow 900ms var(--ease) both; }
  .day-card.seen .mini-check svg path { animation: draw 700ms var(--ease) 200ms both; }
  .day-card.seen .mini-toast .live { animation: ping 1200ms ease-out 2; }
}
/* Grand écran, mouvement autorisé : la section s'épingle et le bandeau glisse avec le défilement. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .day { height: 320vh; }
  .js .day-pin { position: sticky; top: 0; height: 100svh; padding: 0; }
}
/* Sinon, un bandeau qui se fait glisser au doigt. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .day-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; }
  .day-track::-webkit-scrollbar { display: none; }
  .day-card { scroll-snap-align: start; }
}

/* ------------------------------------------------------------------ manifeste : les mots s'encrent au défilement */
.manifesto { position: relative; overflow: hidden; isolation: isolate; padding: clamp(100px, 13vw, 170px) 0; background: var(--night); color: var(--night-ink); }
/* Des rais de lumière flous qui dérivent, et un grain par-dessus : la lumière de Raycast, aux couleurs de l'encre. */
.manifesto::before { content: ""; position: absolute; inset: -30% -15%; z-index: -1; pointer-events: none; will-change: transform; background: repeating-linear-gradient(116deg, transparent 0 160px, rgb(76 111 255 / 0.16) 160px 330px, transparent 330px 560px), repeating-linear-gradient(116deg, transparent 0 90px, rgb(196 50 31 / 0.05) 90px 150px, transparent 150px 300px); filter: blur(46px); }
.manifesto::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; }
.manif { margin-top: 18px; max-width: 22em; font: 400 clamp(1.7rem, 3.6vw, 3.2rem)/1.22 var(--serif); letter-spacing: -0.015em; text-wrap: pretty; }
.manif .w { color: rgb(232 235 242 / 0.22); transition: color 300ms var(--ease); }
.manif .w.on { color: var(--night-ink); }
.manif .w.key { font-style: italic; }
.manif .w.key.on { color: #a9bbff; }
.trust-row { margin-top: clamp(50px, 7vw, 90px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: 24px; overflow: hidden; background: rgb(255 255 255 / 0.08); }
.trust-row > div { padding: clamp(24px, 3vw, 36px); background: var(--night); }
.glyph { font: 400 3rem/1 var(--serif); color: #fff; }
.trust-row h3 { margin-top: 16px; font-size: 1.3rem; }
.trust-row p:not(.glyph) { margin-top: 8px; color: var(--night-muted); font-size: 0.95rem; }
@media (max-width: 800px) { .trust-row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ questions */
.faq { padding: clamp(90px, 12vw, 150px) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.faq .big { position: sticky; top: 110px; margin-top: 0; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 500 1.2rem/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font: 400 1.3rem/1 var(--sans); color: var(--accent); transition: transform 300ms var(--spring), background-color 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--sheet); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 0 22px; max-width: 40em; color: var(--ink-2); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq .big { position: static; } }

/* ------------------------------------------------------------------ finale : la constellation s'allume */
.finale { position: relative; padding: clamp(120px, 16vw, 220px) 0; text-align: center; overflow: hidden; background: var(--night); color: var(--night-ink); }
.field-end { opacity: 0.9; }
.field-end .tagline { fill: #2fb37a; }
.finale-in { position: relative; }
.giant { font-size: clamp(3rem, 9vw, 8.6rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.95; }
.giant span { display: block; }
.giant em { color: #a9bbff; }
.finale p { margin: 26px auto 0; max-width: 34em; color: var(--night-muted); font-size: 1.1rem; }
.finale .btn-ghost { color: var(--night-ink); }

/* ------------------------------------------------------------------ pied */
.foot { padding: 70px 0 34px; background: #0a0f1c; color: var(--night-muted); font-size: 0.92rem; }
.foot .brand { color: var(--night-ink); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-txt { margin-top: 12px; max-width: 26em; }
.foot h3 { font: 600 0.74rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--night-ink); margin-bottom: 12px; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.foot li a { display: inline-block; padding: 6px 0; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--night-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.82rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ récit sur téléphone et tablette :
   la scène reste en haut de l'écran, le texte de l'étape passe dessous. */
@media (max-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 12px; }
  /* La scène colle en haut de l'écran et se libère quand la colonne des étapes se termine (elle ne recouvre jamais la suite). */
  .stage-col { grid-column: 1; grid-row: 1; position: relative; z-index: 2; pointer-events: none; }
  .stage { position: sticky; top: calc(var(--top-h) + 20px); margin: 0; height: min(52svh, 480px); min-height: 380px; border-radius: 24px; pointer-events: auto; }
  .steps { grid-column: 1; grid-row: 1; padding: calc(min(52svh, 480px) + 24px) 8px calc(min(52svh, 480px) + 40px); }
  .step { min-height: 70svh; justify-content: flex-start; padding-top: 4svh; }
  .step, .step-body { gap: 12px; }
  .step h2 { font-size: clamp(2rem, 8vw, 2.8rem); }
  .step p:not(.when):not(.tool) { font-size: 1rem; }
  .stage .stamp { top: auto; bottom: 10px; right: 12px; font-size: 0.54rem; padding: 4px 6px; }
  .variant { top: 10px; left: 10px; padding: 3px; }
  .variant-label { display: none; }
  .variant button { min-width: 48px; min-height: 32px; font-size: 0.9rem; }
  .scene { padding: 56px 16px 44px 40px; gap: 12px; }
  .rail { left: 14px; gap: 12px; }
  .tl { left: 36px; right: 14px; bottom: 34px; height: 22px; }
  .tl-tick b { font-size: 0.58rem; }
  .tl-tick[style*="--t: 6"] b { display: none; }
  .s4 .fiche { padding: 14px 16px; }
  .s4 .fiche dl { font-size: 0.8rem; gap: 4px 10px; }
  .s4 .fiche dl > :nth-child(1), .s4 .fiche dl > :nth-child(2) { display: none; }
  .s4 .toast { padding: 10px 14px; }
  .s1 .flow, .s1 .devis { display: none; }
  .queue { justify-self: center; max-width: 300px; }
  .phone { transform: scale(0.7); transform-origin: center; margin: -80px 0; }
  .relance, .rule { font-size: 0.72rem; }
  .board { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .board .col { min-height: 170px; padding: 8px; }
  .slot { height: 64px; }
  .card.mover { height: 64px; font-size: 0.7rem; padding: 6px 8px; }
  .card.mover em { display: none; }
  .ghost { display: none; }
  .th { grid-template-columns: 7.5em 1fr; font-size: 0.78rem; }
  .mail-lundi .week { display: none; }
  .report { padding: 16px; }
  .kpi b { font-size: 1.15rem; }
  .kpi em { display: none; }
  .chart { height: 70px; }
  .how { display: none; }
}
/* Scène étroite sur ordinateur (1024 px) : le libellé du sélecteur disparaît pour laisser le tampon. */
@media (min-width: 901px) and (max-width: 1240px) { .variant-label { display: none; } .stage .stamp { font-size: 0.56rem; } }
html:not(.js) .stage-col { height: auto; position: static; }
html:not(.js) .day-track { overflow-x: auto; }
html:not(.js) .variant-pill { display: none; }
html:not(.js) .variant button[aria-pressed="true"] { background: var(--det); }
@media (max-width: 900px) { html:not(.js) .steps { padding-top: 20px; } }
body.leaving > * { opacity: 0; transition: opacity 280ms var(--ease); }
@media print { .top, .stage-col, .totop, .cursor { display: none; } .js .step { opacity: 1; } }

/* ------------------------------------------------------------------ téléphone et tablette (jusqu'à 900 px) :
   chaque scène dans son cadre sous son étape (recit.js les y déplace), sélecteur de note flottant en bas. */
.story-bar { display: none; }
@media (max-width: 900px) {
  .js .stage-col { display: none; }
  .js .steps { padding: 24px 4px 60px; }
  .js .step { min-height: 0; padding: 56px 0 8px; opacity: 1; }
  .js .step h2 { font-size: clamp(2rem, 8.5vw, 2.8rem); }
  .mini-stage {
    position: relative; overflow: hidden; isolation: isolate; margin-top: 10px; border-radius: 24px;
    background: radial-gradient(420px 300px at 70% 15%, rgb(76 111 255 / 0.28), transparent 70%), linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 100% 32px, linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 32px 100%, var(--night);
    box-shadow: var(--shadow), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  }
  .mini-stage .scene { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; filter: none; padding: 26px 16px; min-height: 0; gap: 14px; }
  /* Avant son tour, une scène reste vide : elle s'anime quand on arrive dessus, puis garde son état. */
  .mini-stage .scene:not(.played) > * { opacity: 0; }
  .mini-stage .s1 .devis, .mini-stage .s1 .flow { display: none; }
  .mini-stage .phone { transform: none; margin: 0; width: min(330px, 100%); }
  .mini-stage .s4 .fiche dl > :nth-child(1), .mini-stage .s4 .fiche dl > :nth-child(2) { display: revert; }
  .mini-stage .board .col { min-height: 150px; }
  .mini-stage .mail-lundi .week { display: grid; }
  .mini-stage .report .how { display: block; }
  .mini-stage .kpi em { display: block; }
  .mini-stage .chart { height: 80px; }

  /* Le choix de la note, sous le pouce, pendant la lecture du récit. */
  .js .story-bar { display: flex; justify-content: center; position: fixed; z-index: 40; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); pointer-events: none; opacity: 0; translate: 0 20px; transition: opacity 300ms var(--ease), translate 300ms var(--spring); }
  .js .story.reading .story-bar { opacity: 1; translate: 0 0; }
  .js .story.reading .story-bar.tuck { opacity: 0; translate: 0 24px; }
  .story.reading .story-bar.tuck .variant { pointer-events: none; }
  .story.reading .story-bar .variant { pointer-events: auto; }
  .story-bar .variant { position: relative; top: auto; left: auto; background: rgb(14 20 36 / 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 34px -12px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
  .story-bar .variant-label { display: inline; }
  .story-bar .variant button { min-width: 58px; min-height: 44px; font-size: 1.05rem; }
  .story-bar .variant-pill { top: 4px; bottom: 4px; }
  .story-bar .variant-hint { top: auto; bottom: calc(100% + 12px); left: 50%; translate: -50% 0; }
  .story-bar .variant-hint::before { top: auto; bottom: -5px; left: calc(50% - 5px); }
}
@media (max-width: 360px) { .story-bar .variant-label { display: none; } .mini-stage .scene { padding: 22px 10px; } .board { gap: 4px; } }
/* Zones tactiles d'au moins 40 px sur écran tactile. */
@media (pointer: coarse) {
  .top .btn-light { min-height: 40px; }
  .brand { display: inline-block; padding: 13px 0; }
  .top-nav a { padding: 12px 0; }
  .variant button { min-height: 40px; }
}
/* Téléphone à l'horizontale : la barre du haut se fait plus fine pour laisser l'écran au contenu. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --top-h: 48px; }
  .top { top: 6px; }
  .opening { min-height: auto; padding-top: calc(var(--top-h) + 40px); }
  .js .story-bar { bottom: 8px; }
  .story-bar .variant button { min-height: 40px; }
}
/* Petits écrans (iPhone SE, Android compacts) : les cartes des scènes se resserrent au lieu de déborder. */
@media (max-width: 900px) {
  .mini-stage .micro { letter-spacing: 0.08em; }
  .mini-stage .delay { flex-wrap: wrap; justify-content: center; text-align: center; gap: 4px 12px; }
}
@media (max-width: 420px) {
  .mini-stage .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .mini-stage .board .col { padding: 7px 6px; min-height: 130px; }
  .mini-stage .board .micro { font-size: 0.54rem; letter-spacing: 0.04em; }
  .mini-stage .card.mover { font-size: 0.66rem; padding: 5px 6px; }
  .mini-stage .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-stage .kpis .kpi:last-child { grid-column: 1 / -1; }
  .mini-stage .report-top .logo { display: none; }
  .mini-stage .report { padding: 16px 14px; }
}
/* Scène étroite sur grand écran (tablette à l'horizontale, Galaxy Fold ouvert, 901–1100 px) :
   la scène s'adapte à sa propre largeur, pas à celle de l'écran. */
.stage { container-type: inline-size; }
@container (max-width: 640px) {
  .s1 .devis, .s1 .flow { display: none; }
  .s1 .queue { justify-self: center; }
  .board { gap: 6px; }
  .board .col { padding: 8px; }
  .board .micro { font-size: 0.58rem; letter-spacing: 0.05em; }
  .card.mover { font-size: 0.7rem; padding: 6px 8px; }
  .card.mover em { display: none; }
}

/* Scène 1 à une colonne (téléphone, tablette, scène étroite) : d'où vient le devis, la liste, le doublon évité. */
@media (max-width: 900px) {
  .s1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "src" "queue" "dedup"; }
  .s1 .s1-day { display: none; }
  .s1 .s1-src, .s1 .s1-dedup { justify-self: center; max-width: 300px; }
}
@container (max-width: 640px) {
  .s1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "src" "queue" "dedup"; }
  .s1 .s1-day { display: none; }
  .s1 .s1-src, .s1 .s1-dedup { justify-self: center; max-width: 300px; }
}
@media (min-width: 901px) and (min-height: 1000px) { .s1 { row-gap: 34px; } }