/* Site vitrine d'Un avis RETRO — « Le Registre », seconde édition.
   Un rapport imprimé qui prend vie : papier, encre marine, serif éditoriale (Newsreader),
   chapitres numérotés, filets, tampon « données fictives » sur chaque exemple.
   Tout est local : polices hébergées ici, aucun appel extérieur, aucun cookie.
   Contrastes calculés : encre 15,9:1, secondaire 8,6:1, discret 5,6:1 sur papier ; accent 7,3:1. */
@import url("fonts.css");

:root {
  --paper: #f4f1ea;
  --paper-2: #ece7dc;
  --sheet: #fffdf8;
  --ink: #121a2c;
  --ink-2: #39435a;
  --muted: #5c6475;
  --line: #ddd6c7;
  --line-strong: #c7bea9;
  --accent: #1f45c4;
  --accent-soft: #e6ebfb;
  --night: #0f1626;
  --night-2: #18213a;
  --night-ink: #e8ebf2;
  --night-muted: #a7b0c4;
  --pro: #067647;
  --pro-soft: #ebf8f0;
  --det: #b42318;
  --det-soft: #fdf1ef;
  --pas: #94570a;
  --pas-soft: #fdf6e7;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --shadow-sheet: 0 1px 0 rgb(18 26 44 / 0.04), 0 24px 48px -24px rgb(18 26 44 / 0.35), 0 2px 6px rgb(18 26 44 / 0.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
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;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Grain de papier (pur CSS, aucune image). */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.35;
  background-image: radial-gradient(rgb(18 26 44 / 0.05) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
}
body > * { position: relative; z-index: 1; }

/* Fond d'encre. Une couche fixe par chapitre, sous le grain et sous la page : un grand lavis posé (--a),
   deux lavis qui dérivent (--b, --c) et le numéro du chapitre en filigrane. site.js règle --o de 0 à 1 au
   défilement : entre deux chapitres, les deux couches se mélangent. Teintes faibles : les contrastes du texte tiennent. */
.inkbg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ink { position: absolute; inset: 0; opacity: var(--o, 0); background: radial-gradient(90vmax 70vmax at var(--pa), var(--a), transparent 65%); }
.ink:not(.off) { will-change: opacity; }
.ink.off { visibility: hidden; }
.ink::before, .ink::after { content: ""; position: absolute; width: 72vmax; height: 72vmax; border-radius: 50%; }
.ink::before { left: var(--xb); top: var(--yb); background: radial-gradient(closest-side, var(--b), transparent 72%); }
.ink::after { left: var(--xc); top: var(--yc); background: radial-gradient(closest-side, var(--c), transparent 72%); }
.ink b { position: absolute; right: 3vw; bottom: 4vh; font: 400 min(46vw, 62vh)/0.8 var(--serif); letter-spacing: -0.06em; color: var(--ink); opacity: 0.045; font-variant-numeric: lining-nums; transform: translateY(calc((1 - var(--o, 0)) * 48px)); }
/* Les teintes de chaque chapitre : bleu d'encre, puis les couleurs des notes (rouge, ambre, vert) quand le sujet s'y prête. */
.ink[data-for=".hero"]      { --a: rgb(31 69 196 / 0.09);  --pa: 80% 18%; --b: rgb(148 87 10 / 0.06);  --xb: -34vmax; --yb: 46vh;  --c: rgb(31 69 196 / 0.05);  --xc: 30vw;  --yc: 58vh; }
.ink[data-for="#produit"]   { --a: rgb(180 35 24 / 0.08);  --pa: 12% 60%; --b: rgb(31 69 196 / 0.11);  --xb: 48vw;   --yb: -26vmax; --c: rgb(148 87 10 / 0.05); --xc: 20vw;  --yc: 60vh; }
.ink[data-for="#demo"]      { --a: rgb(148 87 10 / 0.09);  --pa: 50% 85%; --b: rgb(180 35 24 / 0.1);   --xb: -30vmax; --yb: 10vh;  --c: rgb(6 118 71 / 0.11);   --xc: 58vw;  --yc: 4vh; }
.ink[data-for="#fonctions"] { --a: rgb(255 253 248 / 0.9); --pa: 70% 50%; --b: rgb(31 69 196 / 0.13);  --xb: -20vmax; --yb: -30vmax; --c: rgb(31 69 196 / 0.07); --xc: 52vw;  --yc: 40vh; }
.ink[data-for="#parcours"]  { --a: rgb(148 87 10 / 0.1);   --pa: 20% 30%; --b: rgb(31 69 196 / 0.09);  --xb: 46vw;   --yb: 30vh;  --c: rgb(6 118 71 / 0.06);   --xc: 10vw;  --yc: 70vh; }
.ink[data-for="#recontact"] { --a: rgb(6 118 71 / 0.1);    --pa: 82% 40%; --b: rgb(31 69 196 / 0.1);   --xb: -24vmax; --yb: 36vh;  --c: rgb(6 118 71 / 0.05);   --xc: 34vw;  --yc: -24vmax; }
.ink[data-for="#fiabilite"] { --a: rgb(15 22 38 / 0.22);   --pa: 50% 50%; --b: rgb(31 69 196 / 0.2);   --xb: 40vw;   --yb: -20vmax; --c: rgb(15 22 38 / 0.16); --xc: -20vmax; --yc: 40vh; }
.ink[data-for="#questions"] { --a: rgb(31 69 196 / 0.07);  --pa: 15% 20%; --b: rgb(236 231 220 / 0.9); --xb: 44vw;   --yb: 20vh;  --c: rgb(148 87 10 / 0.04);  --xc: 10vw;  --yc: 60vh; }
.ink[data-for="#contact"]   { --a: rgb(31 69 196 / 0.13);  --pa: 50% 55%; --b: rgb(6 118 71 / 0.06);   --xb: -26vmax; --yb: 50vh;  --c: rgb(180 35 24 / 0.05);  --xc: 56vw;  --yc: -10vmax; }
@media (max-width: 760px) { .ink b { right: 2vw; bottom: 2vh; font-size: 40vw; } }
::selection { background: var(--accent); color: var(--sheet); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; margin: 0; }
h1 em, h2 em { font-style: italic; color: var(--accent); }
p, li { text-wrap: pretty; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* Grands écrans : la page s'élargit un peu pour que le titre garde ses deux lignes. */
@media (min-width: 1800px) { :root { --wrap: 1360px; } }
.eyebrow, .chapter-no small, .site-foot h3 { font: 600 0.74rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--sheet); padding: 10px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Tampon « données fictives » : chaque exemple du site le porte, comme un bon à tirer. */
.stamp {
  position: absolute; z-index: 3; display: inline-block; padding: 6px 10px 5px; border: 1.5px solid var(--det);
  border-radius: 3px; color: var(--det); background: color-mix(in oklab, var(--sheet) 80%, transparent);
  font: 700 0.62rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  transform: rotate(5deg);
}

/* ------------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 0.95rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color 150ms var(--ease), background-size 260ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease), transform 150ms var(--ease);
}
.btn:active { transform: scale(0.96); }
/* L'encre monte dans le bouton au survol, au lieu de changer de couleur d'un coup. */
.btn-ink { background: var(--ink) linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 0 no-repeat; color: var(--sheet); }
.btn-ink:hover { background-size: 100% 100%; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--sheet); }
.btn .arrow { transition: transform 150ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------ en-tête + fil de lecture */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.site-head.scrolled { border-bottom-color: var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 28px; min-height: 74px; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand-mark { font: 600 1.5rem/1 var(--serif); letter-spacing: -0.02em; white-space: nowrap; }
.brand-mark em { font-style: italic; color: var(--accent); }
.brand-sub { font-size: 0.78rem; color: var(--muted); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { font-size: 0.93rem; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 200ms var(--ease), color 150ms; }
.nav a:hover { color: var(--ink); background-size: 100% 1.5px; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; }
@media (max-width: 960px) {
  .nav { display: none; }
  .head-actions { margin-left: auto; }
  .menu-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 0.95rem var(--sans); box-shadow: inset 0 0 0 1.5px var(--line-strong); cursor: pointer; }
  .site-head.open .nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .site-head.open .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
}
@media (max-width: 480px) {
  .site-head .wrap { gap: 10px; }
  .brand-sub { display: none; }
  .brand-mark { font-size: 1.22rem; }
  .head-actions { gap: 6px; }
  .head-actions .btn { min-height: 40px; padding: 0 12px; font-size: 0.86rem; }
  .head-actions .btn .arrow { display: none; }
  .menu-toggle { min-height: 40px; padding: 0 11px; font-size: 0.86rem; }
}
@media (max-width: 359px) {
  .brand-mark { font-size: 1.1rem; }
  .head-actions .btn, .menu-toggle { padding: 0 10px; }
}
/* Téléphone à l'horizontale : l'en-tête collant ne doit pas manger l'écran. */
@media (max-height: 520px) and (orientation: landscape) {
  .site-head .wrap { min-height: 58px; }
  .site-head.open .nav { max-height: calc(100vh - 58px); overflow-y: auto; }
}

/* Rail des chapitres (très grands écrans) : repère de lecture, en plus du menu. */
.rail { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; }
@media (min-width: 1360px) { .rail { display: block; } }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rail a { display: flex; align-items: center; gap: 8px; padding: 4px 6px; text-decoration: none; color: var(--muted); font: 600 0.68rem/1 var(--sans); letter-spacing: 0.08em; border-radius: 6px; }
.rail a::before { content: ""; width: 14px; height: 1.5px; background: currentColor; transition: width 200ms var(--ease); }
.rail a:hover { color: var(--ink); }
.rail a.on { color: var(--accent); }
.rail a.on::before { width: 26px; }
.rail .nm { opacity: 0; transform: translateX(-4px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.rail a:hover .nm, .rail a:focus-visible .nm, .rail a.on .nm { opacity: 1; transform: none; }
/* Sous 1500 px, le nom du chapitre chevaucherait le texte : seuls les numéros restent. */
@media (max-width: 1499px) { .rail .nm { display: none; } }

/* ------------------------------------------------------------------ hero */
.hero { padding: clamp(44px, 7vw, 100px) 0 clamp(44px, 6vw, 84px); overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-top: 12px; font-size: clamp(2.7rem, 5.6vw, 4.8rem); letter-spacing: -0.03em; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }
.hero .lede { margin-top: 26px; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-2); max-width: 33em; }
.hero .ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero .proof { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 0.86rem; color: var(--muted); }
.hero .proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero .proof span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; } }

/* La feuille de rapport : l'image du produit, en HTML, données fictives animées. */
.sheet-stage { position: relative; perspective: 1600px; margin-bottom: 116px; }
.sheet-stage::before { content: ""; position: absolute; inset: 8% -6% -8% 10%; background: var(--night); border-radius: 18px; transform: rotate(3deg); }
/* La feuille suit légèrement la souris (site.js pose --tx / --ty) ; le bloc sombre reste posé. */
.tilt { position: relative; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transform-style: preserve-3d; transition: transform 500ms var(--ease); }
.tilt.moving { will-change: transform; }
.sheet { position: relative; background: var(--sheet); border-radius: 14px; padding: clamp(18px, 2.6vw, 30px); box-shadow: var(--shadow-sheet); transform: rotate(-1.4deg); font-size: 0.86rem; }
.sheet .stamp { top: -13px; right: 18px; }
.sheet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 2px solid var(--accent); padding-bottom: 14px; }
.sheet-top h2 { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; }
.sheet-top .sub { margin-top: 4px; color: var(--muted); font-size: 0.8rem; }
.sheet-logo { font: 600 0.9rem var(--sans); letter-spacing: 0.08em; text-align: right; }
.sheet-logo span { display: block; font-weight: 400; letter-spacing: 0; color: var(--muted); font-size: 0.74rem; }
.ptabs { display: flex; gap: 6px; margin-top: 12px; }
.ptabs button {
  min-height: 30px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font: 600 0.76rem var(--sans); color: var(--ink-2);
  transition: background-color 120ms var(--ease), color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.ptabs button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.ptabs button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); box-shadow: none; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.kpi { background: var(--paper); border-radius: 8px; padding: 12px 12px 10px; border-top: 3px solid var(--accent); }
.kpi.pro { border-top-color: var(--pro); }
.kpi.det { border-top-color: var(--det); }
.kpi b { display: block; font: 600 clamp(1.3rem, 2.4vw, 1.75rem)/1.1 var(--serif); margin-top: 4px; font-variant-numeric: lining-nums tabular-nums; }
.kpi.pro b { color: var(--pro); }
.kpi.det b { color: var(--det); }
.kpi small { color: var(--muted); font-size: 0.72rem; }
.chart { margin-top: 16px; }
.chart .cap { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--muted); margin-bottom: 6px; }
.chart svg { width: 100%; height: auto; }
.retain { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--paper); border-radius: 0 8px 8px 0; }
.retain strong { font-family: var(--serif); font-size: 0.98rem; }
.retain ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); }
.retain li { margin: 2px 0; }
.comment-card { position: absolute; left: -34px; bottom: -136px; width: min(300px, 70%); background: var(--sheet); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-sheet); transform: rotate(1.6deg); font-size: 0.84rem; }
.comment-card .meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.72rem; }
.live { position: relative; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--det); vertical-align: 1px; }
.live::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--det); opacity: 0; }
.comment-card .score { font-weight: 600; color: var(--det); background: var(--det-soft); padding: 0 6px; border-radius: 4px; }
.comment-card p { margin-top: 6px; font-family: var(--serif); font-size: 1rem; line-height: 1.35; }
.comment-card .act { margin-top: 8px; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 0.76rem; color: var(--accent); }
@media (max-width: 980px) { .sheet-stage { margin: 24px 0 48px; } .sheet-stage::before { inset: 6% -3% -5% 8%; } .comment-card { position: relative; left: auto; bottom: auto; margin: 22px 0 0 auto; } }
@media (max-width: 520px) { .ptabs { flex-wrap: wrap; } .kpis { grid-template-columns: 1fr 1fr; } .kpis .kpi:last-child { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ défilé de commentaires (fictifs) */
.ticker { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 18px 0 22px; overflow: hidden; }
.ticker .label { display: block; text-align: center; margin-bottom: 16px; }
.ticker-track { display: flex; gap: 14px; width: max-content; padding-right: 14px; }
.tcard { flex: 0 0 auto; display: flex; align-items: baseline; gap: 12px; max-width: 440px; background: var(--sheet); border-radius: 10px; padding: 12px 18px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow 150ms var(--ease), transform 200ms var(--ease); }
/* Des fiches posées à la main : chacune penche un peu. */
.tcard:nth-child(odd) { transform: rotate(-0.7deg); }
.tcard:nth-child(even) { transform: rotate(0.6deg); }
.tcard:hover { transform: none; box-shadow: 0 0 0 1px var(--ink); }
.tcard q { font-family: var(--serif); font-size: 1.02rem; quotes: "«\00a0" "\00a0»"; }
.tcard .note { flex: 0 0 auto; font: 600 0.78rem/1.5 var(--sans); padding: 0 7px; border-radius: 4px; }
.tcard .note.pro { color: var(--pro); background: var(--pro-soft); }
.tcard .note.pas { color: var(--pas); background: var(--pas-soft); }
.tcard .note.det { color: var(--det); background: var(--det-soft); }
@media (prefers-reduced-motion: no-preference) {
  .js .ticker-track { animation: ticker 52s linear infinite; }
  .js .ticker:hover .ticker-track, .js .ticker:focus-within .ticker-track { animation-play-state: paused; }
  @keyframes ticker { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) { .ticker { overflow-x: auto; } }

/* ------------------------------------------------------------------ chapitres */
/* Le filet de tête de chapitre est un pseudo-élément : il se trace quand le chapitre arrive (site.js pose .seen). */
.chapter { position: relative; padding: clamp(64px, 9vw, 128px) 0; }
.chapter::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left center; }
.chapter-head { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr); gap: clamp(20px, 4vw, 56px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.chapter-no { font: 400 clamp(4rem, 10vw, 8.5rem)/0.8 var(--serif); color: var(--line-strong); letter-spacing: -0.04em; font-variant-numeric: lining-nums; }
.chapter-no small { display: block; margin-top: 18px; line-height: 1; }
.chapter h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -0.025em; }
.chapter .intro { margin-top: 16px; color: var(--ink-2); font-size: 1.08rem; max-width: 40em; }
@media (max-width: 760px) { .chapter-head { grid-template-columns: 1fr; } .chapter-no { font-size: 4.2rem; } }

/* 01 — pourquoi : trois convictions, puis avant / avec. */
.claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin-bottom: clamp(36px, 5vw, 56px); }
.claims p { font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.3; padding-top: 16px; background: linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 2px no-repeat; }
.claims p em { font-style: italic; color: var(--accent); }
@media (max-width: 760px) { .claims { grid-template-columns: 1fr; } }
.versus { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.versus > div { padding: clamp(24px, 3.4vw, 44px); }
.versus .before { background: var(--paper-2); }
.versus .after { background: var(--sheet); }
.versus h3 { font-size: 1.5rem; margin-bottom: 18px; }
.versus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.versus li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); }
.versus li::before { font-weight: 600; }
.versus .before li::before { content: "—"; color: var(--muted); }
.versus .after li::before { content: "→"; color: var(--accent); }
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; } }

/* 02 — démonstration : choisir une note, voir ce que l'outil fait dans la minute. */
.demo-panel { position: relative; background: var(--sheet); border-radius: 18px; box-shadow: var(--shadow-sheet); padding: clamp(24px, 4vw, 52px); }
.demo-panel .stamp { top: -13px; right: 26px; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 64px); }
.demo-q { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; font-weight: 500; }
.demo-sub { margin-top: 10px; color: var(--muted); font-size: 0.92rem; }
.scale { margin-top: 22px; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; max-width: 480px; }
.scale button {
  aspect-ratio: 1; min-width: 0; border: 0; border-radius: 9px; cursor: pointer; padding: 0;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font: 600 0.95rem var(--sans); color: var(--ink);
  transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease), transform 120ms var(--ease), color 120ms var(--ease);
}
.scale button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.scale button:active { transform: scale(0.96); }
.scale button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); box-shadow: none; }
@media (max-width: 520px) {
  .scale { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .scale button { aspect-ratio: auto; min-height: 44px; font-size: 1rem; }
}
.scale-legend { margin-top: 8px; max-width: 480px; display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--muted); }
.demo-out { border-left: 1.5px solid var(--line); padding-left: clamp(20px, 3vw, 40px); }
.demo-out .verdict { display: inline-flex; align-items: center; gap: 8px; font: 600 0.78rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
.demo-out .verdict.det { color: var(--det); background: var(--det-soft); }
.demo-out .verdict.pas { color: var(--pas); background: var(--pas-soft); }
.demo-out .verdict.pro { color: var(--pro); background: var(--pro-soft); }
.demo-out h3 { margin-top: 14px; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.demo-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.demo-steps li { position: relative; padding: 0 0 18px 30px; color: var(--ink-2); }
.demo-steps li::before { content: ""; position: absolute; left: 7px; top: 9px; bottom: -2px; width: 1.5px; background: var(--line-strong); }
.demo-steps li:last-child { padding-bottom: 0; }
.demo-steps li:last-child::before { display: none; }
.demo-steps li::after { content: ""; position: absolute; left: 2px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--accent); }
.demo-steps b { color: var(--ink); font-weight: 600; }
.demo-steps small { display: block; color: var(--muted); font-size: 0.8rem; }
.demo-note { margin-top: 16px; font-size: 0.8rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .demo-steps.animate li { opacity: 0; transform: translateY(8px); animation: rise 500ms var(--ease) forwards; }
  .js .demo-steps.animate li:nth-child(1) { animation-delay: 100ms; }
  .js .demo-steps.animate li:nth-child(2) { animation-delay: 600ms; }
  .js .demo-steps.animate li:nth-child(3) { animation-delay: 1150ms; }
}
@media (max-width: 860px) { .demo-grid { grid-template-columns: 1fr; } .demo-out { border-left: 0; padding-left: 0; border-top: 1.5px solid var(--line); padding-top: 24px; } }

/* 03 — visite guidée : six briques à gauche, la vitrine à droite. */
.tour { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.ttabs { display: grid; gap: 6px; }
.ttabs button {
  position: relative; overflow: hidden;
  display: grid; gap: 4px; text-align: left; padding: 16px 18px; border: 0; border-radius: 12px; cursor: pointer;
  background: transparent; box-shadow: inset 2px 0 0 var(--line);
  transition: background-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
/* Compte à rebours de l'avance automatique : un trait qui se remplit sous la brique affichée. */
.ttabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.ttabs button:hover { background: var(--paper-2); }
.ttabs button[aria-selected="true"] { background: var(--sheet); box-shadow: inset 2px 0 0 var(--accent), 0 0 0 1px var(--line); }
.ttabs .k { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ttabs button[aria-selected="true"] .k { color: var(--accent); }
.ttabs .t { font: 500 1.08rem/1.3 var(--serif); color: var(--ink); }
.tpane { position: relative; background: var(--sheet); border-radius: 16px; box-shadow: var(--shadow-sheet); padding: clamp(22px, 3.4vw, 44px); min-height: 380px; }
.tpane .stamp { top: -13px; right: 22px; }
.tdesc { color: var(--ink-2); max-width: 38em; }
.vis { margin-top: 24px; }
.vis-note { margin-top: 18px; font-size: 0.86rem; color: var(--muted); border-left: 2px solid var(--line-strong); padding-left: 10px; }
/* Questionnaire : la question et ses choix. */
.vq-q { font-family: var(--serif); font-size: 1.25rem; }
.vq-options { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.opt { padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 0.9rem; font-weight: 500; }
.opt.pick { background: var(--ink); color: var(--sheet); box-shadow: none; }
/* Rappels : trois lignes de suivi. */
.vrows { display: grid; gap: 8px; }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--paper); }
.vrow .who { font-size: 0.78rem; color: var(--muted); }
.vrow .what { font-weight: 500; grid-row: 2; }
.vrow .badge { grid-row: 1 / 3; align-self: center; font: 600 0.78rem/1.6 var(--sans); padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.badge.pro { color: var(--pro); background: var(--pro-soft); }
.badge.det { color: var(--det); background: var(--det-soft); }
.badge.pas { color: var(--pas); background: var(--pas-soft); }
/* Commentaires : barres de thèmes. */
.tbars { display: grid; gap: 12px; }
.tbar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 0.9rem; }
.tbar .track { height: 14px; border-radius: 7px; background: var(--paper); overflow: hidden; }
.tbar i { display: block; height: 100%; width: 100%; border-radius: 7px; background: var(--accent); transform: scaleX(var(--p)); transform-origin: left center; }
.tbar b { text-align: right; font-weight: 600; }
/* Emails : l'entonnoir. */
.funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fstep { padding: 14px 12px; border-radius: 10px; background: var(--paper); text-align: center; }
.fstep b { display: block; font: 600 clamp(1.2rem, 2vw, 1.6rem)/1.1 var(--serif); }
.fstep span { font-size: 0.78rem; color: var(--muted); }
/* Entrée en scène de la vitrine à chaque changement de brique. */
@media (prefers-reduced-motion: no-preference) {
  .js .tpanel.on .vis > * { opacity: 0; transform: translateY(10px); animation: rise 550ms var(--ease) forwards; }
  .js .tpanel.on .vis > *:nth-child(2) { animation-delay: 140ms; }
  .js .tpanel.on .vis > *:nth-child(3) { animation-delay: 280ms; }
  .js .tpanel.on .tbar i { transform: scaleX(0); transition: transform 800ms var(--ease); }
  .js .tpanel.on.grow .tbar i { transform: scaleX(var(--p)); }
  .js .tpanel.on .tbar:nth-child(2) i { transition-delay: 90ms; }
  .js .tpanel.on .tbar:nth-child(3) i { transition-delay: 180ms; }
  .js .tpanel.on .tbar:nth-child(4) i { transition-delay: 270ms; }
  .js .tpanel.on .tbar:nth-child(5) i { transition-delay: 360ms; }
  .js .tpanel.on .fstep { opacity: 0; transform: translateY(10px); animation: rise 500ms var(--ease) forwards; }
  .js .tpanel.on .fstep:nth-child(2) { animation-delay: 150ms; }
  .js .tpanel.on .fstep:nth-child(3) { animation-delay: 300ms; }
  .js .tpanel.on .fstep:nth-child(4) { animation-delay: 450ms; }
}
@media (max-width: 860px) {
  .tour { grid-template-columns: 1fr; }
  .ttabs { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; padding-bottom: 8px; }
  .ttabs button { box-shadow: inset 0 -2px 0 var(--line); border-radius: 12px 12px 0 0; }
  .ttabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent), 0 0 0 1px var(--line); }
}
/* Sans JavaScript : les six briques s'affichent les unes sous les autres, barres pleines. */
html:not(.js) .ttabs { display: none; }
html:not(.js) .tpanel[hidden] { display: block; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }

/* 04 — parcours : ligne du temps. */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: step; position: relative; }
.journey::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px); transform-origin: left center; }
.step { position: relative; padding-right: 24px; counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); font: 600 0.9rem var(--sans); position: relative; }
.step.on::before { background: var(--accent); color: var(--sheet); box-shadow: none; }
.step h3 { margin-top: 22px; font-size: 1.3rem; }
.step p { margin-top: 8px; color: var(--ink-2); font-size: 0.96rem; }
.step .when { display: inline-block; margin-top: 12px; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 860px) { .journey { grid-template-columns: 1fr; gap: 30px; } .journey::before { left: 22px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; background: repeating-linear-gradient(180deg, var(--ink) 0 8px, transparent 8px 14px); transform-origin: center top; } .step { padding-left: 70px; padding-right: 0; } .step::before { position: absolute; left: 0; top: 0; } .step h3 { margin-top: 8px; } }

/* 05 — recontact : l'email et ses trois réponses, que l'on peut essayer. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-top: 14px; }
.split .points { display: grid; gap: 22px; margin-top: 32px; }
.split .points div { padding-left: 18px; border-left: 2px solid var(--accent); }
.split .points h3 { font-size: 1.25rem; }
.split .points p { margin-top: 6px; color: var(--ink-2); }
.mail { position: relative; max-width: 560px; margin: 0 auto; width: 100%; background: var(--sheet); border-radius: 14px; box-shadow: var(--shadow-sheet); }
.mail .stamp { top: -13px; right: 18px; }
.mail-bar { display: flex; gap: 6px; padding: 12px 16px; background: var(--paper-2); border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.mail-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.mail-body { padding: clamp(22px, 4vw, 36px); }
.mail-body .from { font-size: 0.8rem; color: var(--muted); }
.mail-body h3 { margin-top: 10px; font-size: 1.45rem; }
.mail-body .q { margin-top: 18px; font-weight: 600; }
.choices { margin-top: 12px; display: grid; gap: 8px; }
.choice {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  padding: 12px 16px; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font: 500 1rem var(--sans); color: var(--ink);
  transition: box-shadow 150ms var(--ease), background-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
}
.choice:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.choice:active { transform: scale(0.96); }
.choice.primary { background: var(--ink) linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 0 no-repeat; color: var(--sheet); box-shadow: none; transition: background-size 260ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease); }
.choice.primary:hover { background-size: 100% 100%; }
.choice small { font-weight: 400; opacity: 0.75; font-size: 0.8rem; text-align: right; }
/* La réponse choisie est cochée ; les autres s'effacent un peu. */
.choice.chosen { box-shadow: inset 0 0 0 1.5px var(--accent); }
.choice.chosen::after { content: "✓"; flex: 0 0 auto; font-weight: 700; color: var(--pro); }
.choice.primary.chosen::after { color: #8fe3b4; }
.choices:has(.chosen) .choice:not(.chosen) { opacity: 0.65; }
.mail-toast { margin-top: 14px; min-height: 1.5em; font-size: 0.86rem; color: var(--pro); font-weight: 500; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* 06 — fiabilité : bande sombre + « comment ce chiffre est calculé ». */
.night { background: var(--night); color: var(--night-ink); isolation: isolate; overflow: hidden; }
.night::before { display: none; }
/* Lavis d'encre bleue qui dérive lentement derrière le texte. */
.night::after { content: ""; position: absolute; z-index: -1; left: 50%; top: -30%; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(closest-side, rgb(31 69 196 / 0.28), transparent 72%); pointer-events: none; }
.night .chapter-no { color: #2e3a5c; }
.night .chapter-no small, .night .eyebrow { color: var(--night-muted); }
.night h2 em { color: #9fb4ff; }
.night .intro { color: var(--night-muted); }
.proofs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--night-2); border-radius: 14px; overflow: hidden; }
.proofs > div { background: var(--night); padding: clamp(22px, 3vw, 36px); }
.proofs .big { font: 500 clamp(2.4rem, 4.6vw, 3.6rem)/1 var(--serif); color: #fff; letter-spacing: -0.03em; }
.proofs h3 { margin-top: 16px; font-size: 1.2rem; color: #fff; }
.proofs p { margin-top: 8px; color: var(--night-muted); font-size: 0.95rem; }
.calc { margin-top: 32px; border-radius: 12px; background: var(--night-2); overflow: hidden; }
.calc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 22px; font: 600 0.95rem var(--sans); color: #fff; }
.calc summary::-webkit-details-marker { display: none; }
@media (max-width: 520px) {
  .calc summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 16px 18px; }
  .calc summary::after { grid-column: 2; grid-row: 1 / span 2; }
}
.calc summary:focus-visible { outline-offset: -3px; }
.calc summary .tag { font: 600 0.72rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #9fb4ff; }
.calc summary::after { content: "+"; margin-left: auto; font: 400 1.5rem/1 var(--sans); color: #9fb4ff; transition: transform 200ms var(--ease); }
.calc[open] summary::after { transform: rotate(45deg); }
.calc dl { margin: 0; padding: 4px 22px 20px; display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; font-size: 0.93rem; }
.calc dt { color: var(--night-muted); }
.calc dd { margin: 0; color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .proofs { grid-template-columns: 1fr; } .calc dl { grid-template-columns: 1fr; gap: 2px; } .calc dt { margin-top: 10px; } }

/* 08 — questions. */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font: 500 1.25rem/1.3 var(--serif); transition: color 150ms var(--ease); }
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.6rem/1 var(--sans); color: var(--accent); transition: transform 200ms var(--ease); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 44em; }

/* Appel final. */
.closing { padding: clamp(80px, 11vw, 150px) 0; text-align: center; }
.closing .folio { font-family: var(--serif); color: var(--line-strong); letter-spacing: 0.6em; text-indent: 0.6em; margin-bottom: 28px; }
.closing .folio span { display: inline-block; }
.closing h2 { font-size: clamp(2.2rem, 5.6vw, 4.6rem); letter-spacing: -0.03em; max-width: 15em; margin: 0 auto; }
.closing p { margin: 20px auto 0; color: var(--ink-2); max-width: 36em; }
.closing .ctas { margin-top: 32px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ pied de page */
.site-foot { background: var(--night); color: var(--night-muted); padding: 56px 0 36px; font-size: 0.92rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-foot .brand-mark { color: #fff; }
.site-foot h3 { line-height: 1; color: #fff; margin-bottom: 14px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-foot a { color: var(--night-muted); text-decoration: none; }
@media (pointer: coarse) {
  .site-foot ul { gap: 0; }
  .site-foot li a { display: inline-block; padding: 7px 0; }
  .ptabs button { min-height: 40px; padding: 0 16px; }
  .brand { padding: 10px 0; }
  .scale button { min-height: 44px; }
}
.site-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; } }

/* ------------------------------------------------------------------ pages légales */
.legal { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 110px); }
.legal .wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.legal aside { position: sticky; top: 96px; font-size: 0.9rem; }
.legal aside ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.legal aside a { display: block; padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--ink-2); }
.legal aside a:hover { background: var(--paper-2); }
.legal aside a[aria-current="page"] { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.legal article { background: var(--sheet); border-radius: 14px; padding: clamp(24px, 4vw, 56px); box-shadow: 0 0 0 1px var(--line); max-width: 820px; }
.legal h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.legal .updated { margin-top: 10px; color: var(--muted); font-size: 0.9rem; }
.legal h2 { margin-top: 44px; font-size: 1.6rem; }
.legal h3 { margin-top: 26px; font: 600 1rem/1.3 var(--sans); }
.legal p, .legal li { color: var(--ink-2); }
.legal p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.legal table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 0.93rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.legal th { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.legal .table-wrap { overflow-x: auto; }
.legal a { color: var(--accent); text-underline-offset: 3px; }
/* Mention à compléter avant la mise en ligne : visible exprès. */
.todo { background: #fff3cd; color: #6b4a00; padding: 0 5px; border-radius: 4px; font-weight: 600; }
.notice { margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: 0.95rem; }
@media (max-width: 860px) { .legal .wrap { grid-template-columns: minmax(0, 1fr); } .legal aside { position: static; } }

/* ------------------------------------------------------------------ mouvement
   Le fil conducteur : un rapport imprimé qui prend vie. L'encre souligne, les tampons claquent,
   les filets se tracent, la feuille suit la main. Tout s'éteint avec « réduire les animations ». */
.hero h1 em.inked { position: relative; display: inline-block; }
.ink-under { position: absolute; left: -2%; bottom: 0.05em; width: 104%; height: 0.24em; overflow: visible; }
.ink-under path { fill: none; stroke: var(--accent); stroke-width: 3px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise 700ms var(--ease) forwards; }
  .rise.d1 { animation-delay: 80ms; } .rise.d2 { animation-delay: 180ms; } .rise.d3 { animation-delay: 300ms; } .rise.d4 { animation-delay: 420ms; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @keyframes pop { 0% { opacity: 0; transform: scale(0.8); } 65% { transform: scale(1.05); } 100% { opacity: 1; transform: none; } }

  /* Hero : les lignes se lèvent, puis un trait d'encre souligne « action ». */
  .hero h1 .line > span { transform: translateY(112%); animation: lift 900ms var(--ease) forwards; }
  .hero h1 .line:nth-child(2) > span { animation-delay: 110ms; }
  .hero h1 .line:nth-child(3) > span { animation-delay: 220ms; }
  @keyframes lift { to { transform: none; } }
  .ink-under path { stroke-dashoffset: 1; animation: ink 750ms var(--ease) 1000ms forwards; }
  @keyframes ink { to { stroke-dashoffset: 0; } }
  @keyframes wash { from { transform: translate(-6%, -4%); } to { transform: translate(6%, 8%); } }

  /* Les lavis du fond dérivent, chacun à son rythme. */
  .ink::before { animation: ink-b 30s ease-in-out infinite alternate; }
  .ink::after { animation: ink-c 41s ease-in-out infinite alternate; }
  @keyframes ink-b { from { transform: translate(-6%, -4%); } to { transform: translate(7%, 9%) scale(1.08); } }
  @keyframes ink-c { from { transform: translate(5%, 7%) scale(1.06); } to { transform: translate(-8%, -5%); } }

  /* La feuille se pose, le tampon claque, la remarque arrive et clignote deux fois. */
  .sheet { animation: settle 1100ms var(--ease) 350ms both; }
  @keyframes settle { from { opacity: 0; transform: rotate(-5deg) translateY(30px); } to { opacity: 1; transform: rotate(-1.4deg); } }
  .sheet .stamp { animation: stamp 520ms cubic-bezier(0.2, 0.9, 0.3, 1.25) 1450ms both; }
  @keyframes stamp { 0% { opacity: 0; transform: rotate(-9deg) scale(1.9); } 55% { opacity: 1; transform: rotate(6deg) scale(0.94); } 100% { opacity: 1; transform: rotate(5deg) scale(1); } }
  .comment-card { animation: rise 700ms var(--ease) 1300ms both; }
  .live::after { animation: ring 1700ms var(--ease) 2100ms 3; }
  @keyframes ring { 0% { opacity: 0.9; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2.3); } }

  /* Chaque exemple reçoit son tampon en arrivant à l'écran. */
  .js .reveal:not(.in) .stamp { opacity: 0; }
  .js .reveal.in .stamp { animation: stamp 520ms cubic-bezier(0.2, 0.9, 0.3, 1.25) 400ms both; }

  /* Apparition des blocs. « kids » : le bloc reste en place, ce sont ses enfants qui entrent, l'un après l'autre. */
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.kids { opacity: 1; transform: none; transition: none; }

  /* Filet de chapitre tracé de gauche à droite ; numéro imprimé comme au rouleau ; titre puis intro. */
  .js .chapter::before { transform: scaleX(0); transition: transform 1200ms var(--ease); }
  .js .chapter.seen::before { transform: none; }
  .chapter-no { transition: clip-path 900ms var(--ease); }
  .js .chapter-head.reveal:not(.in) .chapter-no { clip-path: inset(0 100% 0 0); }
  .js .chapter-head.reveal > div > * { opacity: 0; transform: translateY(14px); transition: opacity 650ms var(--ease), transform 650ms var(--ease); }
  .js .chapter-head.reveal > div > :nth-child(2) { transition-delay: 160ms; }
  .js .chapter-head.reveal.in > div > * { opacity: 1; transform: none; }

  /* 01 : les trois convictions, leur trait d'encre en premier. */
  .js .claims.reveal p { opacity: 0; transform: translateY(10px); background-size: 0 2px; transition: opacity 600ms var(--ease), transform 600ms var(--ease), background-size 900ms var(--ease); }
  .js .claims.reveal p:nth-child(2) { transition-delay: 130ms; }
  .js .claims.reveal p:nth-child(3) { transition-delay: 260ms; }
  .js .claims.reveal.in p { opacity: 1; transform: none; background-size: 100% 2px; }
  .js .versus.reveal li { opacity: 0; transform: translateX(-10px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  .js .versus.reveal .before li { transform: none; }
  .js .versus.reveal li:nth-child(2) { transition-delay: 90ms; }
  .js .versus.reveal li:nth-child(3) { transition-delay: 180ms; }
  .js .versus.reveal li:nth-child(4) { transition-delay: 270ms; }
  .js .versus.reveal .after li:nth-child(1) { transition-delay: 220ms; }
  .js .versus.reveal .after li:nth-child(2) { transition-delay: 310ms; }
  .js .versus.reveal .after li:nth-child(3) { transition-delay: 400ms; }
  .js .versus.reveal .after li:nth-child(4) { transition-delay: 490ms; }
  .js .versus.reveal.in li { opacity: 1; transform: none; }

  /* 02 et 03 : chaque étape « sonne » quand elle apparaît ; la note choisie rebondit ; le verdict change. */
  .js .demo-steps.animate li::after { animation: ping 900ms var(--ease) both; animation-delay: inherit; }
  @keyframes ping { 0% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 0 rgb(31 69 196 / 0.45); } 100% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 12px rgb(31 69 196 / 0); } }
  .js .scale button[aria-pressed="true"] { animation: bump 320ms var(--ease); }
  @keyframes bump { 50% { transform: scale(1.14); } }
  .js .verdict.swap { animation: pop 400ms var(--ease); }
  .js .tour[data-autoplay] .ttabs button[aria-selected="true"]::after { animation: fill 5000ms linear forwards; }
  @keyframes fill { to { transform: none; } }

  /* 04 : la ligne du temps se trace, chaque étape s'allume quand la ligne l'atteint. */
  .js .journey.reveal::before { transform: scaleX(0); transition: transform 1500ms var(--ease) 100ms; }
  .js .journey.reveal.in::before { transform: none; }
  .js .journey.reveal.in .step { opacity: 0; animation: rise 600ms var(--ease) forwards; }
  .js .journey.reveal.in .step:nth-child(1) { animation-delay: 100ms; }
  .js .journey.reveal.in .step:nth-child(2) { animation-delay: 400ms; }
  .js .journey.reveal.in .step:nth-child(3) { animation-delay: 700ms; }
  .js .journey.reveal.in .step:nth-child(4) { animation-delay: 1000ms; }
  .js .journey.reveal.in .step::before { animation: pop 450ms var(--ease) both; animation-delay: inherit; }
  @media (max-width: 860px) { .js .journey.reveal::before { transform: scaleY(0); } }

  /* 05 : l'argumentaire entre en trois temps ; le message de confirmation se lève. */
  .js .split > .reveal > * { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .js .split > .reveal > :nth-child(2) { transition-delay: 110ms; }
  .js .split > .reveal > :nth-child(3) { transition-delay: 220ms; }
  .js .split > .reveal.in > * { opacity: 1; transform: none; }
  .js .choice.chosen::after { animation: pop 300ms var(--ease); }
  .js .mail-toast { opacity: 0; transform: translateY(4px); transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
  .js .mail-toast.show { opacity: 1; transform: none; }

  /* 06 : les trois signes apparaissent comme des glyphes (petits, flous, puis nets) ; le lavis dérive. */
  .js .proofs.reveal > div { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .js .proofs.reveal > div:nth-child(2) { transition-delay: 120ms; }
  .js .proofs.reveal > div:nth-child(3) { transition-delay: 240ms; }
  .js .proofs.reveal.in > div { opacity: 1; transform: none; }
  .js .proofs.reveal .big { opacity: 0; transform: scale(0.25); filter: blur(4px); transition: opacity 500ms var(--ease), transform 500ms var(--ease), filter 500ms var(--ease); }
  .js .proofs.reveal > div:nth-child(1) .big { transition-delay: 200ms; }
  .js .proofs.reveal > div:nth-child(2) .big { transition-delay: 320ms; }
  .js .proofs.reveal > div:nth-child(3) .big { transition-delay: 440ms; }
  .js .proofs.reveal.in .big { opacity: 1; transform: none; filter: none; }
  .night::after { animation: wash 28s ease-in-out infinite alternate; }

  /* 07 et appel final : la réponse se déplie ; les trois étoiles scintillent tour à tour. */
  .faq details[open] p { animation: rise 320ms var(--ease) both; }
  .js .closing .reveal > * { opacity: 0; transform: translateY(14px); transition: opacity 650ms var(--ease), transform 650ms var(--ease); }
  .js .closing .reveal > :nth-child(2) { transition-delay: 100ms; }
  .js .closing .reveal > :nth-child(3) { transition-delay: 220ms; }
  .js .closing .reveal > :nth-child(4) { transition-delay: 340ms; }
  .js .closing .reveal.in > * { opacity: 1; transform: none; }
  .closing .folio span { animation: twinkle 2600ms ease-in-out infinite alternate; }
  .closing .folio span:nth-child(2) { animation-delay: 600ms; }
  .closing .folio span:nth-child(3) { animation-delay: 1200ms; }
  @keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }

  /* Profondeur au défilement, quand le navigateur sait animer sur la position de la page. */
  @supports (animation-timeline: view()) {
    .sheet-stage { animation: sink linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes sink { to { translate: 0 -48px; } }
    @media (min-width: 1100px) {
      .chapter-no { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
      @keyframes drift { from { translate: 0 36px; } to { translate: 0 -16px; } }
    }
  }
}
/* ------------------------------------------------------------------ gestes Motion (motion-fx.js) */
/* Onglets à pastille : le repère glisse, l'onglet choisi garde seulement sa couleur de texte. */
.slides { position: relative; isolation: isolate; }
.slide-pill { position: absolute; z-index: -1; pointer-events: none; }
.ptabs .slide-pill { border-radius: 999px; background: var(--ink); }
.ptabs.slides button[aria-pressed="true"] { background: transparent; }
.ttabs .slide-pill { z-index: 2; border-radius: 2px; background: var(--accent); }
.ttabs.slides button[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--line), 0 0 0 1px var(--line); }
@media (max-width: 860px) { .ttabs.slides button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--line), 0 0 0 1px var(--line); } }
/* Boutons aimantés : translate est indépendant de transform, l'effet d'appui (scale) reste intact. */
.hero .ctas .btn, .closing .btn-ink { translate: var(--mx, 0px) var(--my, 0px); }
/* Cartes à halo : la lumière suit le pointeur, seulement au survol. */
.spot { position: relative; isolation: isolate; }
.spot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease); background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), rgb(31 69 196 / 0.09), transparent 70%); }
.night .spot::after { background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), rgb(120 150 255 / 0.14), transparent 70%); }
.spot:hover::after { opacity: 1; }
button, a, summary { touch-action: manipulation; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .progress { display: none; } }

@media print { .site-head, .site-foot, .rail, .legal aside { display: none; } body { background: #fff; } body::before { display: none; } .legal article { box-shadow: none; } }

/* Sans JavaScript : le défilé devient une simple rangée que l'on fait glisser. */
html:not(.js) .ticker { overflow-x: auto; }
.tset { display: flex; gap: 14px; }