/* ============================================================================
   Atherys — site vitrine
   ----------------------------------------------------------------------------
   Les couleurs et les polices viennent de l'application, pas d'une palette
   inventée pour l'occasion : `docs/design-reference/tokens.jsx` fait foi. Toute
   dérive ici se voit immédiatement à l'écran, côte à côte avec l'app.

   Les polices sont AUTO-HÉBERGÉES (assets/fonts). Un site qui vend « tes
   données restent en Europe » ne peut pas envoyer l'adresse IP de ses
   visiteurs à Google Fonts à chaque chargement.

   Ordre du fichier : polices · tokens · base · primitives · en-tête · motion ·
   maquettes d'app · sections · pied de page · responsive · accessibilité.
   ========================================================================== */

/* ── 1. Polices ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 2. Tokens ──────────────────────────────────────────────────────────────
   Chaque token est déclaré deux fois : hex d'abord, oklch ensuite. Un
   navigateur qui ne connaît pas oklch garde le hex et la page reste juste au
   lieu de devenir incolore.

   ⚠️ LE SITE EST EN SOMBRE, UN POINT C'EST TOUT (décision user, 2026-09-11).
   Il n'y a plus de thème clair, plus de `prefers-color-scheme`, plus de bouton
   pour basculer, et plus rien à stocker dans le navigateur du visiteur. Ajouter
   un second jeu de tokens ici, c'est réintroduire un choix que personne n'a
   demandé — et le `color-scheme: dark` ci-dessous dit au navigateur de peindre
   ses propres surfaces (barres de défilement, champs) dans le même registre.
   ------------------------------------------------------------------------- */

:root {
  --bg: #0b0d11;              --bg: oklch(0.16 0.008 260);
  --bg-subtle: #101215;       --bg-subtle: oklch(0.18 0.008 260);
  --surface: #16181c;         --surface: oklch(0.21 0.008 260);
  --surface-2: #1e2124;       --surface-2: oklch(0.245 0.008 260);
  --surface-3: #282a2e;       --surface-3: oklch(0.285 0.008 260);
  --border: #27292d;          --border: oklch(0.28 0.008 260);
  --border-strong: #3b3d41;   --border-strong: oklch(0.36 0.008 260);
  --text: #f7f8fb;            --text: oklch(0.98 0.004 260);
  --text-mid: #b5b7bb;        --text-mid: oklch(0.78 0.006 260);
  --text-muted: #787a7f;      --text-muted: oklch(0.58 0.008 260);
  --text-faint: #4a4d52;      --text-faint: oklch(0.42 0.008 260);
  --accent: #e6e245;          --accent: oklch(0.89 0.17 108);
  --accent-ink: #1e1c00;      --accent-ink: oklch(0.22 0.06 108);
  --accent-subtle: #373500;   --accent-subtle: oklch(0.32 0.07 108);
  --ai-a: #e6e245;            --ai-a: oklch(0.89 0.17 108);
  --ai-b: #bea4ff;            --ai-b: oklch(0.78 0.14 295);
  --ai-c: #58e5ed;            --ai-c: oklch(0.85 0.12 200);
  --success: #67e18f;         --success: oklch(0.82 0.16 152);
  --warn: #ffab55;            --warn: oklch(0.82 0.15 60);
  --danger: #ff6f69;          --danger: oklch(0.72 0.18 25);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.32);
  --shadow-3: 0 2px 6px rgb(0 0 0 / 0.45), 0 30px 70px rgb(0 0 0 / 0.45);
  --glow: 0.24;              /* intensité du halo citrine du décor */

  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  --wrap: 1180px;
  --gutter: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 620ms;

  color-scheme: dark;
}

/* ── 3. Base ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* L'en-tête est fixe : une ancre doit s'arrêter sous lui. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 6.2vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 4.4vw, 2.85rem); letter-spacing: -0.032em; line-height: 1.1; }
h3 { font-size: clamp(1.12rem, 2.1vw, 1.32rem); letter-spacing: -0.02em; line-height: 1.25; }

p { margin: 0; }
a { color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 4. Primitives ──────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(76px, 11vw, 140px);
}
.section--tight { padding-block: clamp(56px, 7vw, 92px); }

.rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

.eyebrow {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 16px;
  height: 1.5px;
  background: var(--accent);
  flex: none;
}

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--text-mid);
  max-width: 56ch;
  line-height: 1.55;
}

.head {
  max-width: 44ch;
  margin-bottom: clamp(38px, 5vw, 62px);
}
.head .lede { margin-top: 18px; }
/* Un titre de section réduit à son libellé — « Ton suivi » (demande user,
   2026-09-16) : ce sont ses chapitres qui titrent. */
.head--bare { margin-bottom: clamp(30px, 4vw, 44px); }
.head--bare .eyebrow { margin-bottom: 0; }

.mono {
  font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--text-muted); }

/* Boutons ------------------------------------------------------------------
   Le citrine est rare : il ne sort que sur l'action principale. Au survol, le
   bouton se soulève de 2 px — rien de plus. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease),
    border-color 180ms var(--ease), opacity 180ms var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--accent { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn--accent:hover { background: color-mix(in oklab, var(--accent) 88%, white); }

.btn--ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text-muted); background: var(--surface); }

.btn--sm { padding: 9px 16px; font-size: 0.86rem; }

/* Badge de magasin ---------------------------------------------------------
   L'application n'est pas encore publiée : le badge dit « bientôt » plutôt que
   de promettre un lien qui n'existe pas. Les deux href à remplacer le jour de
   la publication sont marqués `data-store` (voir README). */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.store:hover { transform: translateY(-2px); border-color: var(--text-muted); }
.store svg { width: 24px; height: 24px; flex: none; fill: currentColor; }
.store b {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.store span {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* Cartes ------------------------------------------------------------------ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow-1);
  transition: border-color 240ms var(--ease), transform 240ms var(--ease);
}
.card:hover { border-color: var(--border-strong); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-mid); font-size: 0.97rem; }

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

/* Décor : halos citrine, seuls éléments qui bougent en parallaxe ---------- */

.decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.decor span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--glow);
  will-change: transform;
}

/* Les halos sont dans la feuille, pas dans des styles en ligne : sur un
   téléphone ils doivent RÉTRÉCIR, et on ne surcharge pas un style en ligne
   sans `!important`. */
.glow-1 { width: 620px; height: 620px; background: var(--accent); top: -260px; right: -120px; }
.glow-2 {
  width: 420px; height: 420px; background: var(--ai-b);
  top: 280px; left: -220px; opacity: calc(var(--glow) * 0.55);
}
.glow-3 {
  width: 520px; height: 520px; background: var(--ai-b);
  top: -120px; right: -160px; opacity: calc(var(--glow) * 0.6);
}
.glow-4 {
  width: 560px; height: 560px; background: var(--accent);
  top: -180px; left: 50%; margin-left: -280px;
  opacity: calc(var(--glow) * 0.72);
}
.section > .wrap, .section > .head { position: relative; z-index: 1; }

/* ── 5. En-tête ─────────────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: 14px;
  transition: background-color 260ms var(--ease), border-color 260ms var(--ease),
    backdrop-filter 260ms var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header[data-stuck='true'] {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}
.brand svg { width: 16px; height: 14px; fill: currentColor; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.nav a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--text-mid);
  white-space: nowrap;
  transition: color 180ms var(--ease);
}
.nav a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav + .header-actions { margin-left: 0; }

/* ── 6. Motion ──────────────────────────────────────────────────────────────
   Le geste de référence : opacité 0 → 1, translateY 20 px → 0, 620 ms,
   cubic-bezier(.16,1,.3,1), 70 ms de décalage entre voisins. Chaque élément
   n'entre QU'UNE FOIS — on ne rejoue rien en remontant.

   `.js` n'est posé sur <html> que si le script tourne : sans JavaScript, rien
   n'est masqué et la page reste entièrement lisible.
   ------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Ce que le script masque lui-même (la pastille « je retiens » attend la fin de
   la frappe). Posée en JS : sans script, elle reste visible. */
.js-hidden { opacity: 0; transform: translate3d(0, 10px, 0); }
[data-type-after] { transition: opacity 480ms var(--ease), transform 480ms var(--ease); }

/* ── 7. Maquettes d'application ─────────────────────────────────────────────
   Le téléphone et son contenu sont dessinés, pas photographiés : ce sont les
   vrais tokens, les vraies formes et les vraies phrases de l'app.
   ------------------------------------------------------------------------- */

.phone {
  --screen: 288px;
  width: var(--screen);
  flex: none;
  aspect-ratio: 9 / 19.3;
  border-radius: 42px;
  padding: 7px;
  background: linear-gradient(160deg, var(--surface-3), var(--surface));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-3);
  position: relative;
}
.phone::after {
  /* Reflet très bas : le téléphone est un objet posé, pas un rendu 3D. */
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 41px;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.09), transparent 42%);
  pointer-events: none;
}
.phone__screen {
  height: 100%;
  border-radius: 35px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
}

.app {
  flex: 1;
  min-height: 0;
  padding: 12px 13px 0;
  font-size: 12px;
  line-height: 1.42;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}
/* Pile de scènes : sur téléphone une seule scène, empilée normalement ; sur
   grand écran les quatre se superposent (voir § scènes épinglées). */
.pane-stack { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.app__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px 3px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text);
}
.app__status i {
  display: inline-block;
  width: 15px;
  height: 8px;
  border: 1.2px solid var(--text-muted);
  border-radius: 2.5px;
  position: relative;
}
.app__status i::after {
  content: '';
  position: absolute;
  inset: 1.4px;
  right: 4px;
  background: var(--text);
  border-radius: 1px;
}
.app__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.app__hello { font-size: 15px; font-weight: 600; letter-spacing: -0.03em; }
.app__date {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.app__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mid);
  flex: none;
}

.acard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 11px 12px;
}
.acard--flat { background: transparent; }
.acard__label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.acard__title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }
.acard__sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.acard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Le mot du coach : la seule zone où le dégradé IA a le droit de sortir. */
.acoach {
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 11px 12px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.acoach::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2.5px;
  background: linear-gradient(180deg, var(--ai-a), var(--ai-b), var(--ai-c));
}
.acoach p { font-size: 11.5px; color: var(--text-mid); line-height: 1.45; }
.acoach strong { color: var(--text); font-weight: 500; }

.abar {
  height: 5px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.abar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
}

.amacros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 9px; }
.amacro span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 5px;
}
.amacro b { font-size: 11px; font-weight: 500; display: block; margin-bottom: 4px; }
.amacro .abar > i { background: var(--ai-a); }
.amacro:nth-child(2) .abar > i { background: var(--ai-b); }
.amacro:nth-child(3) .abar > i { background: var(--warn); }

.achip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-mid);
  white-space: nowrap;
}
.achip--on { background: var(--accent-subtle); border-color: transparent; color: var(--accent); }

.aexo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.aexo:first-of-type { border-top: 0; }
.aexo__i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  flex: none;
}
.aexo__i svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.aexo b { font-size: 11.5px; font-weight: 500; display: block; letter-spacing: -0.01em; }
.aexo span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--text-muted);
}
.aexo__meta { margin-left: auto; text-align: right; }

/* Barre d'onglets en verre, flottante — comme dans l'app. */
.atabs {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 46px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 12px;
  box-shadow: var(--shadow-2);
}
.atabs svg { width: 17px; height: 17px; stroke: var(--text-faint); fill: none; stroke-width: 1.7; }
.atabs .on svg { stroke: var(--accent); }
.atabs .coach {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
}
.atabs .coach svg { stroke: var(--accent-ink); width: 16px; height: 16px; }

/* ── 8. Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-top: clamp(112px, 15vh, 168px);
  padding-bottom: clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
/* « Il te dit quoi faire. » passe à la ligne d'un bloc, jamais coupé en deux
   (« …chiffres. Il / te dit… » sur téléphone). */
.hero__em { display: inline-block; }
.hero .lede { max-width: 48ch; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
/* Les trois pastilles « Hébergé en France · Aucune publicité · Rien n'est
   revendu » qui suivaient les boutons ont été retirées (demande user,
   2026-09-15) : la section Confidentialité le dit, en entier. */

/* ── 10. Sections épinglées ─────────────────────────────────────────────────
   Deux moments dans toute la page, pas cinq. La scène reste fixe pendant que
   son contenu progresse ; sous 900 px, tout se remet à plat et se lit
   normalement (une scène collée sur un téléphone, c'est une page qui coince).
   ------------------------------------------------------------------------- */

.pin__stage { position: relative; }
.pin__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 78px);
  align-items: center;
}

.steps { display: grid; gap: 14px; }
.step {
  border-left: 2px solid var(--border);
  padding: 3px 0 3px 20px;
  transition: border-color 420ms var(--ease), opacity 420ms var(--ease);
}
.step h3 { margin-bottom: 6px; font-size: 1.16rem; }
.step p { color: var(--text-mid); font-size: 0.97rem; max-width: 46ch; }
.step__n {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  display: block;
  margin-bottom: 4px;
  transition: color 420ms var(--ease);
}

@media (min-width: 900px) {
  .pin__track { position: relative; }
  .pin__stage {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-block: 60px;
  }
  /* `.is-in` d'abord (l'étape est entrée mais reste en retrait), `.is-active`
     ensuite : l'ordre des deux règles fait l'arbitrage, pas un !important. */
  .js .pin .step.is-in { opacity: 0.34; }
  .js .pin .step.is-active { opacity: 1; border-left-color: var(--accent); }
  .js .pin .step.is-active .step__n { color: var(--accent); }
  /* Sans JavaScript, aucune étape n'est éteinte : tout se lit. */
  .js .pin .pane-stack { position: relative; flex: 1; min-height: 0; }
  .js .pin .pane { position: absolute; inset: 0; opacity: 0; transition: opacity 420ms var(--ease); }
  .js .pin .pane.is-active { opacity: 1; }
  .pin .pane .app { height: 100%; }
}

/* Sans script, les quatre états du même écran ne peuvent pas se relayer : on
   n'en montre qu'un, au lieu de les empiler ou d'en masquer trois à l'opacité
   (du contenu invisible est du contenu perdu). */
html:not(.js) .pin .pane + .pane { display: none; }

/* ── 11. Ce que dit ton corps ───────────────────────────────────────────── */

.body-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 620px);
  justify-content: space-between;
  gap: clamp(32px, 5vw, 78px);
  align-items: start;
}
.body-grid__visual { position: sticky; top: 108px; }
.body-blocks { display: grid; gap: clamp(28px, 5vw, 54px); }
.body-block h3 { margin-bottom: 8px; }
.body-block p { color: var(--text-mid); max-width: 46ch; font-size: 0.98rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.stat {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 16px 14px;
}
.stat b {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  display: block;
  line-height: 1;
}
.stat u {
  text-decoration: none;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.8em;
  color: var(--text-muted);
  margin-left: 2px;
}
.stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Silhouette : chaque groupe se colore à son entrée, une seule fois.
   Dans un cadre, avec sa légende à côté : posée nue au milieu d'une colonne de
   texte, elle ressemblait à un décor, pas à un écran de l'application. */
.muscle-scale {
  height: 7px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--fresh-1), var(--fresh-2), var(--fresh-3), var(--fresh-4));
}
.muscle-scale__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── 12. Manger sans compter ────────────────────────────────────────────── */

.list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; }
.list li svg { width: 19px; height: 19px; stroke: var(--accent); fill: none; stroke-width: 1.6; margin-top: 3px; }
.list b { display: block; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 3px; }
.list p { color: var(--text-mid); font-size: 0.96rem; max-width: 52ch; }

/* ── 13. Le coach — la conversation, le moment de voix ──────────────────────
   La mise en page de la section (deux rangées en quinconce) est au bloc G,
   avec l'écran de séance. Ici : la conversation elle-même. */

.voice { position: relative; overflow: hidden; }
.ai-rule {
  height: 3px;
  width: 190px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ai-a), var(--ai-b), var(--ai-c));
  margin-bottom: 24px;
}
.chat { display: grid; gap: 10px; }
.bubble {
  border-radius: 16px;
  padding: 10px 13px;
  font-size: 12px;
  line-height: 1.45;
  max-width: 86%;
}
.bubble--me {
  margin-left: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-right-radius: 6px;
  color: var(--text);
}
.bubble--coach {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
  color: var(--text-mid);
  position: relative;
}
.bubble--coach::before {
  content: '';
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 2.5px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--ai-a), var(--ai-b), var(--ai-c));
}
.caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  vertical-align: -2px;
  margin-left: 1px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
/* Le champ de saisie : une conversation sans endroit où répondre ne ressemble
   pas à une conversation. Il dégage aussi le bas de l'écran, au-dessus de la
   barre d'onglets flottante. */
.acompose {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 62px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
}
.acompose span { flex: 1; font-size: 11.5px; color: var(--text-faint); }
.acompose i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}
.acompose svg { width: 13px; height: 13px; stroke: var(--accent-ink); fill: none; stroke-width: 2.2; }

.memo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 10px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.memo svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ── 14. Bilan de la semaine ────────────────────────────────────────────── */

.review__line {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
  font-size: 0.94rem;
  color: var(--text-mid);
}
.review__line:first-of-type { border-top: 0; }
.review__line svg { width: 16px; height: 16px; flex: none; margin-top: 3px; stroke-width: 1.8; fill: none; }
.review__line b { color: var(--text); font-weight: 500; }

/* ── 15. Confidentialité — la section qui ne s'anime pas ────────────────── */

.trust { background: var(--bg-subtle); border-block: 1px solid var(--border); }
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px 34px;
  margin-top: 40px;
}
.trust__item h3 { font-size: 1.02rem; margin-bottom: 7px; }
.trust__item p { color: var(--text-mid); font-size: 0.94rem; }
.trust__item svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 1.6;
  margin-bottom: 12px;
}

/* ── 16. Questions fréquentes ───────────────────────────────────────────── */

.faq { max-width: 820px; }
.faq details {
  border-top: 1px solid var(--border);
  padding: 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-size: 1.03rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  transition: color 180ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-right: 1.6px solid var(--text-muted);
  border-bottom: 1.6px solid var(--text-muted);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform 240ms var(--ease), border-color 240ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--accent); }
.faq__body { overflow: hidden; }
.faq__body p {
  padding-bottom: 24px;
  color: var(--text-mid);
  max-width: 62ch;
  font-size: 0.98rem;
}
.js .faq details[open] .faq__body { animation: open 240ms var(--ease); }
@keyframes open { from { opacity: 0; transform: translate3d(0, -6px, 0); } }

/* ── 17. Fin + pied de page ─────────────────────────────────────────────── */

.end { text-align: center; }
.end .stores { justify-content: center; }
.end h2 { max-width: 16ch; margin-inline: auto; }
.end .lede { margin: 20px auto 34px; }

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 54px 44px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
}
.site-footer a {
  color: var(--text-mid);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 180ms var(--ease);
}
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.site-footer__legal {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-faint);
  line-height: 1.5;
}
.site-footer__legal p { max-width: 62ch; }

/* ── 9 bis. Les pièces animées ─────────────────────────────────────────────
   Quatre moments de la page ne montrent pas un téléphone posé mais le
   mécanisme lui-même, en mouvement : les signaux qui convergent vers un
   verdict, l'assiette qui se décompose, la courbe des charges qui se trace,
   la semaine qui se dessine. (La frise de la journée a existé ici ; la section
   a été retirée le 2026-09-15 à la demande du user.)

   RÈGLE TENUE PARTOUT ICI : rien n'est masqué sans le préfixe `.js`. Les
   enfants attendent le `.is-in` de leur PARENT (posé par l'observateur sur le
   conteneur `.reveal`), et leur cascade est écrite en `transition-delay` — pas
   une ligne de JavaScript de plus.

   Deux exceptions assumées à « transform et opacity seulement » : le tracé des
   fils et de l'anneau se fait en `stroke-dashoffset`, et la couleur des muscles
   en `fill`. Ce sont des animations d'ENTRÉE, jouées une fois, hors défilement,
   sur des éléments qui ne provoquent pas de recalcul de mise en page — la règle
   visait le défilement continu, pas ça.
   ------------------------------------------------------------------------- */

/* ═══ B · Le faisceau : six signaux, un verdict ════════════════════════════ */

.hub {
  position: relative;
  margin-bottom: clamp(56px, 8vw, 96px);
  padding-top: 8px;
  /* Une couleur par signal (demande user, 2026-09-15) : les six sont allumés,
     pastille, fil et impulsion de la même teinte. Violet et cyan sont les
     teintes IA de l'application (aiB, aiC des tokens), vert et orange ses
     couleurs sémantiques ; la charge garde la citrine, c'est elle que la
     décision cite. */
  --sig-1: #b4a1f2;  --sig-1: oklch(0.78 0.14 295);  /* sommeil */
  --sig-2: #f47c8c;  --sig-2: oklch(0.74 0.17 15);   /* cœur au repos */
  --sig-3: #7edbe9;  --sig-3: oklch(0.85 0.12 200);  /* respiration */
  --sig-4: #f8a054;  --sig-4: oklch(0.8 0.15 55);    /* température */
  --sig-5: #67e18f;  --sig-5: oklch(0.82 0.16 152);  /* séances */
  --sig-6: var(--accent);                            /* charge */
}
.signal:nth-child(1), .hub__wires path:nth-child(1), .pulse:nth-child(1) { --sig: var(--sig-1); }
.signal:nth-child(2), .hub__wires path:nth-child(2), .pulse:nth-child(2) { --sig: var(--sig-2); }
.signal:nth-child(3), .hub__wires path:nth-child(3), .pulse:nth-child(3) { --sig: var(--sig-3); }
.signal:nth-child(4), .hub__wires path:nth-child(4), .pulse:nth-child(4) { --sig: var(--sig-4); }
.signal:nth-child(5), .hub__wires path:nth-child(5), .pulse:nth-child(5) { --sig: var(--sig-5); }
.signal:nth-child(6), .hub__wires path:nth-child(6), .pulse:nth-child(6) { --sig: var(--sig-6); }

.hub__signals { position: relative; height: 74px; }
.signal {
  position: absolute;
  left: var(--x);
  top: 0;
  width: 150px;
  margin-left: -75px;
  text-align: center;
}
.signal__name {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.signal__val {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}
.signal__dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sig);
  box-shadow: 0 0 14px color-mix(in srgb, var(--sig) 70%, transparent);
  margin: 12px auto 0;
}
.signal--on .signal__name { color: var(--text); }
.signal--on .signal__val { color: var(--text-mid); }

.hub__wires { display: block; width: 100%; height: clamp(150px, 19vw, 230px); }
.hub__wires path {
  fill: none;
  stroke: var(--sig);
  stroke-opacity: 0.7;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.hub__wires .wire--on { stroke-opacity: 1; stroke-width: 1.5; }
.js .hub__wires path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1000ms var(--ease);
  transition-delay: calc(220ms + var(--i) * 90ms);
}
.js .hub.is-in .hub__wires path { stroke-dashoffset: 0; }

.hub__core { text-align: center; margin-top: -10px; position: relative; }
.core {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto;
}
.core::before {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%);
  opacity: 0;
  transition: opacity 900ms var(--ease) 800ms;
}
.js .hub.is-in .core::before { opacity: 1; }
.core__ring { width: 100%; height: 100%; }
.js .core__arc {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1100ms var(--ease) 850ms;
}
.js .hub.is-in .core__arc { stroke-dashoffset: 22; }
.core__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  line-height: 1;
}
.core__num b {
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.04em;
  display: block;
}
.core__num span {
  display: block;
  margin-top: 7px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.core__verdict {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-top: 18px;
}
.core__normale {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.hub__out {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 9px 18px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.js .hub__out {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 700ms var(--ease) 1500ms, transform 700ms var(--ease) 1500ms;
}
.js .hub.is-in .hub__out { opacity: 1; transform: none; }

/* ═══ B bis · Le faisceau, vivant (2026-09-15) ═════════════════════════════
   Le faisceau n'entrait en scène qu'une fois, puis se figeait. Il vit
   désormais en continu, en trois mouvements — tous en `transform` et
   `opacity`, et tous coupés sous `prefers-reduced-motion` :

   1. chaque pastille de signal ÉMET : un anneau part d'elle et s'efface, à
      tour de rôle — c'est le signal qui arrive de la montre ;
   2. des impulsions DESCENDENT les fils jusqu'à l'anneau (posées et déplacées
      par le script, un point SVG dans ce SVG étiré serait une ellipse, et la
      couche qui les porte couvre exactement le SVG) ; chacune a la couleur de
      son signal, celle de la charge est plus grosse ;
   3. le halo de l'anneau RESPIRE, et l'anneau tressaille à chaque impulsion
      reçue.

   Sous 860 px les six fils n'ont plus la place : un seul fil vertical, en CSS,
   porte trois impulsions vers l'anneau. */

.signal__dot { position: relative; }
.signal__dot::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--sig);
  opacity: 0;
  transform: scale(1);
}
.js .hub.is-in .signal__dot::after {
  animation: signal-ping 3s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  animation-delay: calc(1.4s + var(--i, 0) * 0.5s);
}
.signal:nth-child(1) { --i: 0; }
.signal:nth-child(2) { --i: 1; }
.signal:nth-child(3) { --i: 2; }
.signal:nth-child(4) { --i: 3; }
.signal:nth-child(5) { --i: 4; }
.signal:nth-child(6) { --i: 5; }
@keyframes signal-ping {
  0%   { opacity: 0.9; transform: scale(1); }
  45%  { opacity: 0; transform: scale(3.2); }
  100% { opacity: 0; transform: scale(3.2); }
}

.hub__beam { position: relative; }
.hub__pulses { position: absolute; inset: 0; pointer-events: none; }
.pulse {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--sig);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sig) 80%, transparent);
  opacity: 0;
  will-change: transform, opacity;
}
.pulse--on {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--sig) 90%, transparent);
}

.js .hub.is-in .core::before { animation: core-breathe 4.2s ease-in-out 1.9s infinite; }
@keyframes core-breathe {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.09); }
}
.core { transition: transform 260ms var(--ease); }
.core.is-hit { transform: scale(1.035); transition-duration: 120ms; }

/* Le fil du téléphone : un trait vertical entre la grille des signaux et
   l'anneau, trois impulsions qui le descendent en décalé. */
.hub__flow { display: none; }
@media (max-width: 860px) {
  .hub__flow {
    display: block;
    position: relative;
    width: 2px;
    height: 64px;
    margin: -18px auto 8px;
    border-radius: 1px;
    background: linear-gradient(180deg, transparent, var(--border-strong) 25%, var(--border-strong) 75%, transparent);
    /* Pas de rognage : les points (6 px) débordent du trait (2 px), ce sont
       les images-clés (opacité 0 aux deux bouts) qui les cachent hors du trait. */
  }
  .hub__flow i {
    position: absolute;
    left: -2px;
    top: -8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 80%, transparent);
    opacity: 0;
  }
  .js .hub.is-in .hub__flow i { animation: flow-drop 2.7s linear infinite; }
  .hub__flow i:nth-child(2) { animation-delay: 0.9s !important; background: var(--sig-3); box-shadow: 0 0 10px color-mix(in srgb, var(--sig-3) 80%, transparent); }
  .hub__flow i:nth-child(3) { animation-delay: 1.8s !important; background: var(--sig-1); box-shadow: 0 0 10px color-mix(in srgb, var(--sig-1) 80%, transparent); }
  @keyframes flow-drop {
    0%   { opacity: 0; transform: translate3d(0, 0, 0); }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(0, 72px, 0); }
  }
}

/* ═══ C · Les silhouettes — le corps, animé (2026-09-15) ═══════════════════
   Le dessin de l'application, repris tel quel : `react-native-body-highlighter`
   (MIT, © 2022 ELABBASSI Hicham). Chaque tracé porte son groupe (`data-g`) et
   son palier de fraîcheur (`data-m`, 1 à 4) ; tête, mains, pieds restent
   neutres.

   Trois mouvements, dans l'ordre où on les voit :
   1. À l'entrée, la couleur DESCEND du haut vers le bas — chaque tracé attend
      selon sa hauteur (`--y`, posé par le script depuis sa boîte), pendant
      qu'une bande de lumière balaie la figure. Le balayage repasse ensuite
      toutes les neuf secondes, à peine visible : la figure est vivante, elle
      ne clignote pas.
   2. Les deux groupes les plus chargés RESPIRENT (une lente variation de
      luminosité) : ce sont eux qui décident de la séance du soir.
   3. Au survol (ou au toucher), un groupe s'allume sur les deux vues, les
      autres se retirent, et la ligne au-dessus dit son état.

   Les quatre couleurs sont celles de l'application (`recoveryPalette`, thème
   sombre) : vert = prêt, jaune = presque, orange = chargé, rouge = laisse-le
   tranquille. Sémantiques, pas décoratives — la citrine n'y entre pas. */

:root {
  --fresh-1: #66dc93;  --fresh-1: oklch(0.8 0.15 152);
  --fresh-2: #e0cd52;  --fresh-2: oklch(0.85 0.13 100);
  --fresh-3: #f39c4a;  --fresh-3: oklch(0.78 0.15 55);
  --fresh-4: #ee6152;  --fresh-4: oklch(0.68 0.19 25);
}

.bodies { position: relative; }
.bodies__hint {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  min-height: 22px;
  margin-bottom: 12px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: opacity 240ms var(--ease);
}
.bodies__hint b { color: var(--text); font-weight: 500; }
.bodies__hint .pct { color: var(--accent); }
.bodies__figures {
  position: relative;
  display: flex;
  gap: clamp(8px, 1.4vw, 18px);
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  border-radius: 24px;
}
.body {
  width: clamp(150px, 17vw, 232px);
  height: auto;
  flex: none;
  position: relative;
}
.body path {
  fill: var(--surface-2);
  stroke: var(--bg);
  stroke-width: 3;
  stroke-linejoin: round;
}
.body path[data-m] { cursor: pointer; }
.js .body path {
  transition:
    fill 700ms var(--ease) calc(var(--y, 0) * 900ms),
    opacity 320ms var(--ease),
    stroke 320ms var(--ease);
}
.bodies.is-in [data-m='1'] { fill: var(--fresh-1); }
.bodies.is-in [data-m='2'] { fill: var(--fresh-2); }
.bodies.is-in [data-m='3'] { fill: var(--fresh-3); }
.bodies.is-in [data-m='4'] { fill: var(--fresh-4); }

/* Le survol : le groupe s'allume sur les deux vues, les autres se retirent. */
.bodies.is-dim .body path[data-m] { opacity: 0.45; }
.bodies.is-dim .body path.is-hot { opacity: 1; stroke: var(--text); }

/* La bande de lumière qui balaie la figure : à l'entrée, puis toutes les neuf
   secondes, en `transform` et `opacity` seulement. */
.bodies__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--text) 9%, transparent) 50%, transparent);
  opacity: 0;
  transform: translate3d(0, -110%, 0);
  pointer-events: none;
  z-index: 1;
}
.js .bodies.is-in .bodies__scan { animation: body-scan 9s linear 200ms infinite; }
@keyframes body-scan {
  0%   { opacity: 0; transform: translate3d(0, -110%, 0); }
  3%   { opacity: 1; }
  15%  { opacity: 1; transform: translate3d(0, 340%, 0); }
  17%  { opacity: 0; }
  100% { opacity: 0; transform: translate3d(0, 340%, 0); }
}

/* Les deux groupes les plus chargés respirent. `filter` plutôt qu'`opacity` :
   l'opacité sert déjà au retrait des autres groupes au survol, et une animation
   qui la tiendrait l'emporterait sur ce retrait. Quatre tracés au plus, sur une
   figure de 230 px : le coût est nul. Troisième exception assumée à « transform
   et opacité seulement », avec le fil tracé et la couleur des muscles. */
.js .bodies.is-in [data-m='4'],
.js .bodies.is-in [data-m='3'] { animation: muscle-breathe 3400ms ease-in-out 1600ms infinite; }
@keyframes muscle-breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.24); }
}

.bodies__legend { margin-top: 24px; max-width: 330px; margin-inline: auto; }
.bodies__legend p {
  margin-top: 16px;
  font-size: 0.93rem;
  color: var(--text-mid);
  line-height: 1.5;
}
.bodies__note {
  display: block;
  margin-top: 10px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ═══ C bis · L'écran Accueil, dessiné à l'identique ═══════════════════════
   Le téléphone du premier écran montre l'écran Accueil tel qu'il est dans
   l'application (capture du 2026-09-15). Il est DESSINÉ, pas collé : la
   capture était trop petite pour un écran Retina, et l'application et le site
   ont la même police, Geist — le dessin est net à toute taille et le prénom
   est celui du site. Toutes les cotes sont celles de la capture (380 px de
   large), exprimées en `--u` = un pixel de la capture rapporté à la largeur
   réelle de l'écran ; le dessin suit donc `--screen` à chaque point de
   rupture. Les couleurs sont les tokens ; les trois qui n'en sont pas (bleu du
   sommeil, orange de la charge, violet du coach) sont relevées sur la capture. */

.home {
  /* Largeur de l'écran = cadre moins 7 px de marge et 1 px de bord de chaque côté. */
  --u: calc((var(--screen) - 16px) / 380);
  /* Les deux teintes que l'écran Accueil pose lui-même (DashboardScreen) :
     sommeil et charge. */
  --home-blue: #6f9fe6;    --home-blue: oklch(0.72 0.12 260);
  --home-orange: #e3774f;  --home-orange: oklch(0.7 0.15 40);
  --home-violet: #b4a1f2;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  padding: 0 calc(20 * var(--u));
  background: var(--bg);
  color: var(--text);
  line-height: 1.2;
}
.home__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(50 * var(--u));
  padding: calc(14 * var(--u)) calc(8 * var(--u)) 0;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(14 * var(--u));
  font-weight: 600;
}
.home__status i {
  display: inline-block;
  width: calc(21 * var(--u));
  height: calc(11 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--text-muted);
  border-radius: calc(3.5 * var(--u));
  position: relative;
}
.home__status i::after {
  content: '';
  position: absolute;
  inset: calc(2 * var(--u));
  right: calc(5 * var(--u));
  background: var(--text);
  border-radius: calc(1.5 * var(--u));
}
.home__bar { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(34 * var(--u)); margin-top: calc(23 * var(--u)); }
.home__brand {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-right: auto;
  font-size: calc(17 * var(--u));
  font-weight: 600;
  letter-spacing: -0.02em;
}
.home__brand svg { width: calc(20 * var(--u)); height: calc(17 * var(--u)); fill: currentColor; }
.home__bell {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(10 * var(--u));
  border: calc(1 * var(--u)) solid var(--border);
  background: var(--bg-subtle);
  display: grid;
  place-items: center;
}
.home__bell svg, .home__streak svg, .tile svg, .home__tabs svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home__bell svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.home__me {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: calc(13 * var(--u));
  font-weight: 600;
}
.home__date, .home__coach, .home__kicker {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(10.5 * var(--u));
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* La date est un « label » de l'application (Geist Medium 11 pt, capitales),
   seul le nom du coach est en mono. */
.home__date { margin-top: calc(20 * var(--u)); font-family: 'Geist', system-ui, sans-serif; font-size: calc(9.7 * var(--u)); letter-spacing: calc(0.7 * var(--u)); }
.home__hello { margin-top: calc(5.3 * var(--u)); font-size: calc(26.5 * var(--u)); font-weight: 600; letter-spacing: calc(-0.88 * var(--u)); line-height: calc(28.3 * var(--u)); }
.home__quote {
  margin-top: calc(14 * var(--u));
  padding-left: calc(12 * var(--u));
  border-width: 0 0 0 calc(2 * var(--u));
  border-style: solid;
  border-image: linear-gradient(180deg, var(--accent), var(--home-violet)) 1;
}
.home__coach { display: block; font-size: calc(10 * var(--u)); letter-spacing: 0.12em; }
/* Corps « body » de l'application : Geist Medium 14 pt, interlettrage −0,2,
   sur un écran de 430 pt — la capture (380 px) est à l'échelle 0,884. */
.home__quote p { margin: calc(4 * var(--u)) 0 0; font-size: calc(12.4 * var(--u)); font-weight: 500; letter-spacing: calc(-0.18 * var(--u)); line-height: calc(17.7 * var(--u)); color: var(--text-mid); }
.home__streak { margin-top: calc(14 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(12.4 * var(--u)); font-weight: 500; letter-spacing: calc(-0.18 * var(--u)); color: var(--text-mid); }
.home__streak svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: var(--accent); }

.home__card { margin-top: calc(15 * var(--u)); background: var(--surface); border-radius: calc(20 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); }
/* « Tes constantes du jour » est un libellé « label » de l'application : Geist
   Medium 11 pt en capitales, pas la mono. */
.home__kicker { font-family: 'Geist', system-ui, sans-serif; font-size: calc(9.7 * var(--u)); letter-spacing: calc(0.7 * var(--u)); }
.home__rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(12 * var(--u)); }
.ring { display: grid; justify-items: center; position: relative; }
/* Anneau de l'application : 90 pt, trait de 8 ; le chiffre en mono medium 19 pt. */
.ring svg { width: calc(79.6 * var(--u)); height: calc(79.6 * var(--u)); transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--surface-3); stroke-width: 8; }
.ring__arc { fill: none; stroke: var(--c); stroke-width: 8; stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.ring b {
  position: absolute;
  top: calc(39.8 * var(--u));
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: calc(16.8 * var(--u));
  font-weight: 500;
  letter-spacing: calc(-0.44 * var(--u));
  white-space: nowrap;
}
.ring b i, .tile b i { font-style: normal; font-size: calc(9.7 * var(--u)); font-weight: 500; letter-spacing: 0; color: var(--text-muted); margin-left: calc(1 * var(--u)); }
.ring span { margin-top: calc(7.1 * var(--u)); font-size: calc(10.6 * var(--u)); font-weight: 500; letter-spacing: calc(-0.18 * var(--u)); color: var(--text-muted); }
/* À l'arrivée, les arcs se tracent — comme dans l'application. */
.js .home .ring__arc { stroke-dasharray: 0 100; transition: stroke-dasharray 1100ms var(--ease) 700ms; }
.js .is-in .home .ring__arc { stroke-dasharray: var(--p) 100; }

.home__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8.8 * var(--u)); margin-top: calc(14.1 * var(--u)); }
.tile {
  background: var(--surface-2);
  border: calc(1 * var(--u)) solid var(--border);
  border-radius: calc(14 * var(--u));
  padding: calc(9.7 * var(--u));
  display: grid;
  gap: 0;
}
/* Tuile de l'application : icône 15 pt, valeur en mono medium 16 pt, unité en
   Geist Medium 11 pt, libellé « body » 10 pt. */
.tile svg { width: calc(13.3 * var(--u)); height: calc(13.3 * var(--u)); stroke-width: 1.8; margin-bottom: calc(7.1 * var(--u)); }
.tile b { font-family: 'Geist Mono', ui-monospace, monospace; font-size: calc(14.1 * var(--u)); font-weight: 500; letter-spacing: calc(-0.27 * var(--u)); white-space: nowrap; color: var(--text); }
.tile b i { font-family: 'Geist', system-ui, sans-serif; margin-left: calc(3.5 * var(--u)); }
.tile span { margin-top: calc(1.8 * var(--u)); font-size: calc(8.8 * var(--u)); font-weight: 500; color: var(--text-muted); }
.home__advice { margin: calc(10 * var(--u)) 0 0; font-size: calc(12.4 * var(--u)); font-weight: 500; letter-spacing: calc(-0.18 * var(--u)); line-height: calc(16.8 * var(--u)); color: var(--text-mid); }

.home__session {
  position: relative;
  margin: calc(10 * var(--u)) calc(-12 * var(--u)) 0;
  height: calc(230 * var(--u));
  border-radius: calc(20 * var(--u));
  overflow: hidden;
  background: var(--surface);
}
.home__session img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.home__session::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Le voile de l'application : 0,38 en haut, 0,06 à 40 %, 0,86 en bas. */
  background: linear-gradient(180deg, rgb(0 0 0 / 0.38), rgb(0 0 0 / 0.06) 40%, rgb(0 0 0 / 0.86) 100%);
}
.home__session-top {
  position: absolute;
  top: calc(12 * var(--u));
  left: calc(12 * var(--u));
  right: calc(12 * var(--u));
  display: flex;
  justify-content: space-between;
  font-size: calc(9.7 * var(--u));
  font-weight: 600;
  letter-spacing: calc(1.06 * var(--u));
  text-transform: uppercase;
  color: #fff;
}
.home__session-top span + span { font-family: 'Geist Mono', ui-monospace, monospace; font-size: calc(11.5 * var(--u)); font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 0.92; }
/* Le titre s'arrête là où l'écran s'arrête, comme sur la capture : la
   deuxième ligne du nom passe sous la barre d'onglets, « 5 exercices » est
   coupé par le bord. */
.home__session-title { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(8 * var(--u)); }
.home__session-title b { display: block; font-size: calc(22 * var(--u)); font-weight: 600; letter-spacing: -0.025em; line-height: calc(26 * var(--u)); }
.home__session-title span { display: block; margin-top: calc(3 * var(--u)); font-size: calc(12 * var(--u)); color: var(--text-mid); }

.home__tabs {
  position: absolute;
  left: calc(22 * var(--u));
  bottom: calc(36 * var(--u));
  width: calc(280 * var(--u));
  height: calc(55 * var(--u));
  border-radius: calc(28 * var(--u));
  background: rgb(39 39 41 / 0.92);
  -webkit-backdrop-filter: blur(calc(12 * var(--u)));
  backdrop-filter: blur(calc(12 * var(--u)));
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 calc(8 * var(--u));
}
.home__tabs span { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(12 * var(--u)); display: grid; place-items: center; color: var(--text-mid); }
.home__tabs span.on { background: #36373b; color: var(--text); }
.home__tabs svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); stroke-width: 1.6; }
.home__enzo {
  position: absolute;
  right: calc(17 * var(--u));
  bottom: calc(39 * var(--u));
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  border-radius: 50%;
  background: rgb(39 39 41 / 0.92);
  display: grid;
  place-items: center;
}
.home__enzo b {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 50%;
  background: linear-gradient(135deg, var(--home-violet), var(--accent));
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: calc(15 * var(--u));
  font-weight: 600;
}
.home__homebar {
  position: absolute;
  left: 50%;
  bottom: calc(12 * var(--u));
  width: calc(140 * var(--u));
  height: calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgb(255 255 255 / 0.9);
  transform: translateX(-50%);
}

/* ═══ D · Le scan de l'assiette ════════════════════════════════════════════ */

.scan {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow-2);
  margin-bottom: clamp(44px, 6vw, 76px);
}

.scan__frame {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--bg-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.scan__corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid var(--accent);
}
.scan__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.scan__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 7px 0 0; }
.scan__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 7px; }
.scan__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }

.plate { width: 76%; height: auto; }
.plate [data-n] { fill: var(--surface-3); }
.js .plate [data-n] { transition: fill 650ms var(--ease); }
.js .scan.is-in .plate [data-n='1'] { fill: color-mix(in oklab, var(--ai-a) 62%, var(--surface-3)); transition-delay: 950ms; }
.js .scan.is-in .plate [data-n='2'] { fill: color-mix(in oklab, var(--ai-b) 62%, var(--surface-3)); transition-delay: 1210ms; }
.js .scan.is-in .plate [data-n='3'] { fill: color-mix(in oklab, var(--success) 58%, var(--surface-3)); transition-delay: 1470ms; }

.scan__beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 44%, var(--accent) 50%, transparent 56%);
  opacity: 0;
  pointer-events: none;
}
.js .scan.is-in .scan__beam { animation: sweep 1500ms var(--ease) 200ms 1 both; }
@keyframes sweep {
  0% { transform: translate3d(0, -100%, 0); opacity: 0; }
  12% { opacity: 0.85; }
  88% { opacity: 0.85; }
  100% { transform: translate3d(0, 100%, 0); opacity: 0; }
}

.scan__caption {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.scan__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.scan__line {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.scan__line b { display: block; font-size: 0.98rem; font-weight: 500; letter-spacing: -0.01em; }
.scan__line span { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
.scan__line i { margin-left: auto; font-style: normal; font-size: 0.92rem; color: var(--text-mid); }
.scan__line > div { min-width: 0; }
.scan__pin {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--ai-a);
}
.scan__line:nth-of-type(2) .scan__pin { background: var(--ai-b); }
.scan__line:nth-of-type(3) .scan__pin { background: var(--success); }

.js .scan__line {
  opacity: 0;
  transform: translate3d(14px, 0, 0);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  transition-delay: calc(700ms + var(--n) * 260ms);
}
.js .scan.is-in .scan__line { opacity: 1; transform: none; }

.scan__total { margin-top: 20px; }
.scan__rest {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.scan__rest > span { font-size: 0.93rem; color: var(--text-mid); }
.scan__rest b { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; color: var(--accent); }
.scan__macros { margin-top: 0; }
.scan__macros .amacro span { font-size: 9.5px; }
.scan__macros .amacro b { font-size: 12.5px; }
.scan__macros .abar { height: 6px; }
.scan__macros .abar > i { width: 100%; transform-origin: left center; }
.js .scan__macros .abar > i {
  transform: scaleX(0);
  transition: transform 900ms var(--ease) 1500ms;
}
.js .scan.is-in .scan__macros .abar > i { transform: scaleX(var(--w)); }

.js .scan__total {
  opacity: 0;
  transition: opacity 700ms var(--ease) 1500ms;
}
.js .scan.is-in .scan__total { opacity: 1; }

.list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 42px; }

/* ═══ E · La semaine ═══════════════════════════════════════════════════════ */

.week {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.week__chart {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-1);
}
.week__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
}
.week__range { font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }
.week__done { font-size: 0.92rem; color: var(--text-mid); }
.week__done b { color: var(--accent); font-size: 1.05rem; }

.week__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  height: 176px;
}
.wday {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}
.wbar {
  width: 100%;
  max-width: 46px;
  height: var(--h);
  border-radius: 8px;
  background: var(--surface-3);
  transform-origin: bottom center;
}
.js .wbar { transform: scaleY(0); transition: transform 700ms var(--ease); }
.js .week.is-in .wbar { transform: scaleY(1); }
.week__days .wday:nth-child(1) .wbar { transition-delay: 200ms; }
.week__days .wday:nth-child(2) .wbar { transition-delay: 280ms; }
.week__days .wday:nth-child(3) .wbar { transition-delay: 360ms; }
.week__days .wday:nth-child(4) .wbar { transition-delay: 440ms; }
.week__days .wday:nth-child(5) .wbar { transition-delay: 520ms; }
.week__days .wday:nth-child(6) .wbar { transition-delay: 600ms; }
.week__days .wday:nth-child(7) .wbar { transition-delay: 680ms; }
.wday--on .wbar { background: var(--accent); }
.wday b {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mid);
}
.wday i {
  font-style: normal;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.wday--on i { color: var(--accent); }
.week__axis {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.week__read h3 { margin-bottom: 18px; }
.js .week .review__line {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  transition-delay: calc(500ms + var(--n) * 150ms);
}
.js .week.is-in .review__line { opacity: 1; transform: none; }
.review__line--next {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

/* ═══ G · Le coach : la conversation, puis la séance (2026-09-15 → 16) ═════
   En haut, le titre de la section avec la conversation à sa droite. En
   dessous, une rangée : l'écran de séance à gauche, et à droite une étiquette
   de chapitre, un titre de rang h3 et son texte. Les mêmes étiquettes et
   titres servent aux deux chapitres de la section « Ton suivi ». Sous 900 px,
   le texte passe au-dessus des téléphones (§ 18). */

.coach__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(64px, 9vw, 120px);
}
.coach__top .head { margin-bottom: 0; }

.chapter__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chapter__label::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--border-strong);
  flex: none;
}
.chapter__title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.chapter { max-width: 52ch; margin-bottom: clamp(30px, 4vw, 44px); }
.chapter__lede {
  margin-top: 14px;
  color: var(--text-mid);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 52ch;
}
/* Le second chapitre d'une section : un filet sur toute la largeur, et de
   l'air au-dessus. */
.chapter--next {
  max-width: none;
  margin-top: clamp(64px, 9vw, 112px);
  padding-top: clamp(44px, 6vw, 64px);
  border-top: 1px solid var(--border);
}
.chapter--next > * { max-width: 52ch; }

.duo { display: grid; gap: clamp(64px, 9vw, 120px); }
.duo__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(32px, 5vw, 78px);
  align-items: center;
}
.duo__text .chapter__title { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.duo__text > p { color: var(--text-mid); font-size: 1rem; max-width: 46ch; }
.duo__text .chapter__title + p { margin-top: 16px; }
.duo__text .list { margin-top: 26px; }

/* L'écran de séance de l'application (`ActiveSessionScreen`), dessiné : la
   barre du haut (retour, « Séance en cours », le chrono), le nom de la
   séance, la carte de l'exercice en cours — sa note de surcharge sous le
   filet dégradé du coach, les deux cadrans charge / répétitions, « Valider la
   série » —, le dock du coach, la liste du jour. Le chrono est avancé par le
   script ; la pastille « Record battu » arrive après l'écran, puis le coach
   écrit sa ligne dans le dock. */
.live {
  gap: 10px;
  /* Ce qui passe sous la barre d'onglets flottante s'efface, comme derrière
     son verre dans l'application : pas une ligne de texte coupée au bord. */
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 94%);
}
.live__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live__card .acard__label > span:first-child { white-space: nowrap; }
.live__card .live__pr { padding: 3px 7px; font-size: 9px; letter-spacing: 0.02em; }
.live__back {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.live__back svg { width: 14px; height: 14px; stroke: var(--text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.live__label, .live__name, .dial__label, .dock__name {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.live__clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 9px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}
.live__clock i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.live__name { margin-top: -2px; }
.live__exo { font-size: 15px; font-weight: 600; letter-spacing: -0.03em; margin-top: 6px; }
.live__meta { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; margin-top: 3px; }
.live__note {
  margin-top: 10px;
  padding-left: 10px;
  border-width: 0 0 0 2px;
  border-style: solid;
  border-image: linear-gradient(180deg, var(--ai-a), var(--ai-b)) 1;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
}
.live__pr svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.js .live__pr {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 360ms var(--ease) 1000ms, transform 520ms var(--ease) 1000ms;
}
.js .is-in .live__pr { opacity: 1; transform: none; }

.dial { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.dial + .dial { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.dial__label { flex: 1; min-width: 0; }
.dial__btn {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.dial__btn svg { width: 12px; height: 12px; stroke: var(--text-mid); fill: none; stroke-width: 2; stroke-linecap: round; }
.dial__value { width: 62px; text-align: center; line-height: 1; }
.dial__value b { display: block; font-size: 21px; font-weight: 500; letter-spacing: -0.05em; }
.dial__value small { display: block; margin-top: 3px; font-size: 9px; color: var(--text-muted); }
.live__go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 9px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.live__go svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Le dock du coach : présent en permanence, jamais dans le chemin. */
.dock {
  display: grid;
  grid-template-columns: 2px minmax(0, 1fr) auto;
  gap: 0 10px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.dock::before {
  content: '';
  grid-area: 1 / 1 / span 2 / 2;
  align-self: stretch;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--ai-a), var(--ai-b));
}
.dock__name { grid-area: 1 / 2; }
.dock p {
  grid-area: 2 / 2;
  margin-top: 4px;
  min-height: 32px;   /* deux lignes : la boîte ne saute pas quand le texte s'écrit */
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-mid);
}
.dock__chat {
  grid-area: 1 / 3 / span 2 / 4;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--accent-subtle);
  display: grid;
  place-items: center;
}
.dock__chat svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linejoin: round; }

.live__row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--border); }
.acard__label + .live__row { border-top: 0; }
.live__n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-mid);
}
.live__n svg { width: 11px; height: 11px; stroke: var(--text-mid); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.live__row.is-current .live__n { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.live__row.is-done { opacity: 0.45; }
.live__row > div { flex: 1; min-width: 0; }
.live__row b { display: block; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live__row span { display: block; margin-top: 1px; font-size: 9.5px; color: var(--text-muted); }
.live__row > i { font-style: normal; font-size: 10px; color: var(--text-muted); flex: none; }

/* ═══ H · Les charges : la courbe d'un exercice (2026-09-15) ═══════════════
   La fiche « Mes charges » de l'application, en mécanisme : huit séances d'un
   exercice, la ligne se trace, les points arrivent dans son sillage avec les
   répétitions de la série la plus lourde, les deux paliers de charge se
   signalent, le record est cerclé — puis les trois cases de la fiche (record,
   dernière, trente jours) et la décision pour la prochaine séance.

   Le tracé est un SVG étiré sur la boîte (`preserveAspectRatio="none"`) et
   les points sont en HTML aux mêmes coordonnées, en pourcentage : la ligne
   suit à toute largeur, le texte garde sa taille (même principe que les fils
   du faisceau). Quatrième exception assumée à « transform et opacity » : le
   tracé se fait en `stroke-dashoffset`, une fois, à l'entrée. */

.lift {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow-2);
  margin-bottom: clamp(44px, 6vw, 76px);
}
.lift__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
.lift__exo { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.lift__sub { display: block; margin-top: 3px; font-size: 0.82rem; color: var(--text-muted); }
.lift__delta { text-align: right; flex: none; }
.lift__delta b { display: block; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--accent); }
.lift__delta span {
  display: block;
  margin-top: 5px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lift__plot { position: relative; height: 190px; margin: 0 14px 0 42px; }
.lift__grid { position: absolute; left: 0; right: 0; top: var(--y); height: 1px; background: var(--border); }
.lift__grid i {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-muted);
}
.lift__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lift__line path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.js .lift__line path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1600ms var(--ease) 250ms;
}
.js .lift.is-in .lift__line path { stroke-dashoffset: 0; }

.pt { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.pt i {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface);
}
.pt b {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.pt--record i {
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px var(--surface), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}
.pt--record i::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  transform: scale(1);
}
.pt--record b { top: 13px; }
.pt--record em {
  position: absolute;
  bottom: 13px;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.js .pt {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 360ms var(--ease), transform 520ms var(--ease);
  transition-delay: calc(300ms + var(--i) * 200ms);
}
.js .lift.is-in .pt { opacity: 1; transform: none; }
/* Le record cerclé émet deux anneaux quand la ligne l'atteint — la même
   image-clé que les pastilles du faisceau. */
.js .lift.is-in .pt--record i::after { animation: signal-ping 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) 2000ms 2; }

/* « +2,5 kg » : posé sur le nouveau palier, juste à gauche du premier point
   qui l'atteint — là où il n'y a rien d'autre. */
.lift__step {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(calc(-100% - 12px), -50%);
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--accent-subtle);
  color: var(--accent);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.js .lift__step {
  opacity: 0;
  transform: translate(calc(-100% - 4px), -50%);
  transition: opacity 420ms var(--ease), transform 520ms var(--ease);
  transition-delay: calc(420ms + var(--i) * 200ms);
}
.js .lift.is-in .lift__step { opacity: 1; transform: translate(calc(-100% - 12px), -50%); }

.lift__axis {
  display: flex;
  justify-content: space-between;
  margin: 24px 14px 0 42px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.lift__legend {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.5;
}

.lift__cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  overflow: hidden;
}
.lift__cell { padding: 14px 12px; border-left: 1px solid var(--border); min-width: 0; }
.lift__cell:first-child { border-left: 0; }
.lift__cell span {
  display: block;
  margin-bottom: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lift__cell b { display: block; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.lift__cell b i {
  font-style: normal;
  font-family: Geist, system-ui, sans-serif;
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-left: 3px;
}
.lift__cell small { display: block; margin-top: 7px; font-size: 0.74rem; color: var(--text-muted); line-height: 1.3; }
.lift__cell--up b { color: var(--success); }
.lift__cell:nth-child(1) { --n: 0; }
.lift__cell:nth-child(2) { --n: 1; }
.lift__cell:nth-child(3) { --n: 2; }
.js .lift__cell {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: calc(1500ms + var(--n) * 140ms);
}
.js .lift.is-in .lift__cell { opacity: 1; transform: none; }

.lift__next {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.lift__next span {
  display: block;
  margin-bottom: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.lift__next p { font-size: 0.95rem; line-height: 1.5; color: var(--text); }
.js .lift__next {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 700ms var(--ease) 2050ms, transform 700ms var(--ease) 2050ms;
}
.js .lift.is-in .lift__next { opacity: 1; transform: none; }

/* ═══ F · Ces pièces sur un écran étroit ═══════════════════════════════════
   Le faisceau perd ses fils (six colonnes sur 390 px, ce n'est plus un
   faisceau, c'est un tas), le scan, la courbe des charges et la semaine
   passent sur une colonne. */

@media (max-width: 960px) {
  .scan { grid-template-columns: minmax(0, 1fr); }
  .scan__frame { max-width: 380px; margin-inline: auto; width: 100%; }
  .lift { grid-template-columns: minmax(0, 1fr); }
  .week { grid-template-columns: minmax(0, 1fr); }
  .week .week__chart { order: -1; }
}

@media (max-width: 860px) {
  .hub__wires { display: none; }
  /* Et les impulsions du bureau avec : posées hors champ, elles élargiraient
     la page (un élément déplacé compte dans le défilement, même invisible). */
  .hub__pulses { display: none; }
  .hub__signals {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    margin-bottom: 34px;
  }
  /* La pastille passe À GAUCHE du nom : empilée dessous, six signaux
     prenaient 800 px de haut pour ne rien dire de plus. */
  .signal {
    position: static;
    width: auto;
    margin: 0;
    text-align: left;
    padding-left: 12px;
    border-left: 2px solid var(--sig);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 9px;
    align-items: center;
  }
  .signal__dot { margin: 0; grid-row: 1 / span 2; }
  .signal__name { grid-column: 2; }
  .signal__val { grid-column: 2; margin-top: 2px; }
  .hub__core { margin-top: 0; }
}

@media (max-width: 700px) {
  .list--2 { grid-template-columns: minmax(0, 1fr); }
  /* La courbe des charges : moins haute, ses cases plus serrées, l'écart
     sous le nom de l'exercice plutôt qu'à sa droite. */
  .lift__plot { height: 150px; margin-left: 38px; }
  .lift__axis { margin-left: 38px; }
  .lift__head { flex-direction: column; gap: 12px; }
  .lift__delta { text-align: left; }
  .lift__cell { padding: 12px 9px; }
  .lift__cell b { font-size: 1.1rem; }
  .lift__cell small { font-size: 0.68rem; }
  .week__days { height: 140px; gap: 5px; }
  .wday i { display: none; }
  .week__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .core { width: 116px; height: 116px; }
  .core__num b { font-size: 36px; }
  .hub__out { font-size: 10.5px; padding: 8px 14px; text-align: left; }
  .scan__line i { font-size: 0.86rem; }
}

@media (max-width: 430px) {
  .hub__signals { gap: 14px 10px; }
  .bodies { gap: 6px; }
}

/* ── 18. Responsive ─────────────────────────────────────────────────────────
   Deux ruptures franches : la tablette perd la deuxième colonne, le téléphone
   remonte le visuel sous le texte et rend les scènes épinglées linéaires.
   ------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .phone { --screen: 262px; }
  /* Les deux téléphones du coach gardent leur taille : à 262 px, le dock de
     la séance — le point de la scène — passait sous la barre d'onglets. */
  .coach__top .phone, .duo__row .phone { --screen: min(288px, 82vw); }
  /* Six entrées dans la navigation : un peu moins d'air entre elles avant que
     la tablette ne la masque. */
  .nav { gap: 20px; }
  .body-grid__visual { top: 96px; }
}

@media (max-width: 900px) {
  .hero__grid,
  .pin__grid,
  .body-grid,
  .coach__top,
  .duo__row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .hero__grid > .phone,
  .pin__grid > .panes,
  .coach__top > .phone { justify-self: center; }
  /* Le texte d'abord, le téléphone dessous — pour la rangée de la séance. */
  .duo__row > .phone { order: 2; justify-self: center; }
  .body-grid__visual { position: static; justify-self: center; }
  .pin__stage { padding-block: 0; }
  .pin__track { min-height: 0 !important; }
  .panes { position: static; }
  .pane { position: static; opacity: 1; }
  .pane + .pane { display: none; } /* une seule scène sur téléphone : la première */
  .steps { gap: 26px; }
}

@media (max-width: 700px) {
  /* Un halo de 620 px sur un écran de 390 px, ce n'est plus un halo : c'est un
     fond olive derrière le titre, et le titre devient illisible. */
  :root { --glow: 0.13; }
  .decor span { width: 320px; height: 320px; filter: blur(74px); }
  .glow-1 { top: -160px; right: -90px; }
  .glow-4 { margin-left: -160px; }

  :root { --gutter: 18px; }
  body { font-size: 16px; }
  .nav { display: none; }
  .stats { grid-template-columns: 1fr; }
  .stat { display: flex; align-items: baseline; gap: 12px; }
  .stat span { margin-top: 0; }
  .site-footer__top { flex-direction: column; }
  .hero__cta { width: 100%; }
  .stores { width: 100%; }
  .store { flex: 1 1 auto; }
  .section { padding-block: 68px; }
}

@media (max-width: 420px) {
  .phone { --screen: min(272px, 82vw); }
  .btn { width: 100%; }
  .hero__cta .btn { flex: 1 1 100%; }
}

/* ── 19. Accessibilité ──────────────────────────────────────────────────────
   `prefers-reduced-motion` ne dégrade pas l'expérience : il la rend statique
   et entièrement lisible. Ce n'est pas une option de confort.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .home .ring__arc { stroke-dasharray: var(--p) 100; transition: none; }
  /* `.is-in` compris : sans lui, les trois étapes inactives de la scène
     épinglée restaient à 34 % d'opacité — donc illisibles — pour quelqu'un qui
     a justement demandé une page statique. */
  .js .pin .step, .js .pin .step.is-in { opacity: 1; }
  .js .pin .pane { opacity: 1; position: static; }
  .js .pin .pane + .pane { display: none; }
  .body path { transition: none; }
  .js .hub.is-in .signal__dot::after,
  .js .hub.is-in .core::before,
  .js .hub.is-in .hub__flow i { animation: none; }
  .hub__pulses { display: none; }
  .js .bodies.is-in .bodies__scan,
  .js .bodies.is-in [data-m='4'],
  .js .bodies.is-in [data-m='3'] { animation: none; }
  /* L'écran de séance et la courbe des charges, entièrement dessinés d'emblée. */
  .js .live__pr, .js .pt, .js .lift__cell, .js .lift__next { opacity: 1; transform: none; transition: none; }
  .js .lift__step { opacity: 1; transform: translate(calc(-100% - 12px), -50%); transition: none; }
  .js .lift__line path { stroke-dashoffset: 0; transition: none; }
  .js .lift.is-in .pt--record i::after { animation: none; }
  .caret { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .decor, .phone, .atabs { display: none !important; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -160%);
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 18px;
  border-radius: var(--r-full);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 200ms var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }