/* ============================================================
   MonGerant · site de présentation
   Règle de design : un écran = un message.
   ============================================================ */

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

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --paper: #ffffff;
  --ink: #1d1d1f;
  --accent: #111111;
  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --gap: clamp(24px, 4vw, 48px);
  --radius: 22px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Pas de scroll-behavior global : le défilement qui suit la voix règle la
   position à chaque image, et une animation du navigateur par-dessus entre en
   conflit avec elle. Les ancres sont adoucies en JavaScript à la place. */
html { -webkit-text-size-adjust: 100%; }

button, a, .player-piste { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font);
  background: #000;
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

/* ─────────── Icônes dessinées ───────────
   Trait unique, grille 24, aucune icône décorative de banque d'images.
   La taille se règle par font-size sur le parent. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1em; height: 1em; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--accent);
}
.chap.dark .ico, .chap.void .ico { color: #fff; }
.ico-solid { fill: currentColor; stroke: none; }

/* ─────────── Barre de progression ─────────── */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: rgba(128,128,128,.18);
}
.progress span {
  display: block; height: 100%; width: 0;
  background: currentColor; color: #fff;
  transition: width .1s linear, background-color .5s var(--ease);
}

/* ─────────── Barre haute ─────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: rgba(0,0,0,.55);
  transition: background .5s var(--ease), color .5s var(--ease);
  color: #fff;
}
.topbar.on-light { background: rgba(255,255,255,.72); color: #1d1d1f; }
.topbar-in {
  max-width: var(--max); margin: 0 auto; padding: 12px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.logo { height: clamp(22px, 2.6vw, 27px); width: auto; display: block; }
.logo-light { display: none; }
.topbar.on-light .logo-dark { display: none; }
.topbar.on-light .logo-light { display: block; }
/* ─────────── Choix de la langue ─────────── */
.langues {
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid currentColor;
}
.langue {
  padding: 5px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: inherit; text-decoration: none; opacity: .5;
  transition: opacity .2s, background-color .2s;
}
.langue:hover { opacity: .85; }
.langue.actif { opacity: 1; background: rgba(255,255,255,.18); }
.topbar.on-light .langue.actif { background: rgba(0,0,0,.09); }

/* ─────────── Le lecteur, toujours visible ───────────
   La voix porte toute la presentation : on doit pouvoir l'arreter et la
   reprendre a tout moment, sans jamais chercher le bouton. */
.player {
  position: fixed; left: 50%; z-index: 60;
  /* la barre de gestes des iPhone mange le bas de l'ecran */
  bottom: calc(clamp(14px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 11px;
  width: min(470px, calc(100vw - 24px));
  padding: 9px 18px 9px 10px;
  border-radius: 999px; color: #fff;
  background: rgba(18,18,20,.84);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.85);
}
.player-btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: #fff; color: #000; cursor: pointer;
  display: grid; place-items: center;
  transition: transform .18s var(--ease);
}
.player-btn:hover { transform: scale(1.07); }
.player-btn:active { transform: scale(.94); }
.player-btn svg { width: 21px; height: 21px; fill: currentColor; }
.ico-pause { display: none; }
.player[data-etat="lecture"] .ico-play { display: none; }
.player[data-etat="lecture"] .ico-pause { display: block; }

/* Revenir en arrière : le geste le plus demandé après la pause. */
.player-recul {
  flex: 0 0 auto; position: relative;
  width: 36px; height: 36px; padding: 0;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  display: grid; place-items: center; opacity: .75;
  transition: opacity .2s, transform .18s var(--ease);
}
.player-recul:hover { opacity: 1; }
.player-recul:active { transform: scale(.9) rotate(-25deg); }
.player-recul svg { width: 24px; height: 24px; fill: currentColor; }
.player-recul-n {
  position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%);
  font-size: 9px; font-weight: 700; letter-spacing: -.02em;
}

.player-corps { flex: 1 1 auto; min-width: 0; }
.player-titre {
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* La barre est cliquable sur toute sa longueur. La zone tactile deborde
   largement du trait, sinon elle est inatteignable au doigt. */
.player-piste {
  position: relative; margin-top: 5px;
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.22);
  cursor: pointer;
}
.player-piste::before {
  content: ""; position: absolute; inset: -11px 0;   /* zone tactile de 25 px */
}
.player-piste:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.player-piste span {
  display: block; height: 100%; width: 0; background: #fff;
  border-radius: 2px; transition: width .25s linear;
}
.player-tete {
  position: absolute; top: 50%; left: 0; width: 10px; height: 10px;
  margin: -5px 0 0 -5px; border-radius: 50%; background: #fff;
  opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .2s, transform .2s var(--ease);
}
.player-piste:hover .player-tete,
.player-piste:focus-visible .player-tete { opacity: 1; transform: scale(1); }
.player-tps {
  flex: 0 0 auto; font-size: 13px; opacity: .5;
  font-variant-numeric: tabular-nums;
}

/* ─────────── La loupe ───────────
   Une capture de logiciel est illisible sur un telephone si on ne peut pas
   l'agrandir. Toutes les captures de la page s'ouvrent ici. */
.shot img { cursor: zoom-in; }

/* Le repere d'agrandissement. Toujours visible : au doigt, il n'y a pas de
   survol pour decouvrir qu'une image est cliquable. */
.shot { position: relative; }
.zoomer {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px 9px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); cursor: pointer;
  background: rgba(18,18,20,.72); color: #fff;
  font: inherit; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .18s var(--ease), background-color .2s;
}
.zoomer:hover { background: rgba(18,18,20,.9); transform: scale(1.04); }
.zoomer:active { transform: scale(.95); }
.zoomer svg { width: 17px; height: 17px; fill: currentColor; }
.shot figcaption + .zoomer, .zoomer { bottom: 14px; }
.shot:has(figcaption) .zoomer { bottom: 56px; }

.loupe {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s var(--ease);
  overscroll-behavior: contain;
}
.loupe[hidden] { display: none; }
.loupe.vue { opacity: 1; }

.loupe-scene {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.loupe-scene img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  transform-origin: center center;
  will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
.loupe-scene img.glisse { transition: transform .22s var(--ease); }
.loupe.zoome .loupe-scene img { cursor: grab; }
.loupe.zoome .loupe-scene img:active { cursor: grabbing; }

.loupe-fermer {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px;
  z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); cursor: pointer;
  background: rgba(30,30,32,.7); color: #fff;
  display: grid; place-items: center;
  transition: transform .18s var(--ease), background-color .2s;
}
.loupe-fermer:hover { background: rgba(60,60,64,.8); }
.loupe-fermer:active { transform: scale(.92); }
.loupe-fermer svg { width: 22px; height: 22px; fill: currentColor; }

.loupe-aide {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.45);
  text-align: center; padding: 0 20px;
  transition: opacity .3s var(--ease); pointer-events: none;
}
.loupe.zoome .loupe-aide { opacity: 0; }

/* Le reglage a la main : le pincement ne va pas de soi pour tout le monde,
   et a la souris il n'existe pas. Deux boutons reglent la question. */
.loupe-reglage {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 999px;
  background: rgba(30,30,32,.78);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.loupe-reglage button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .2s, transform .15s var(--ease);
}
.loupe-reglage button:hover { background: rgba(255,255,255,.14); }
.loupe-reglage button:active { transform: scale(.9); }
.loupe-reglage button:disabled { opacity: .3; cursor: default; }
.loupe-reglage button svg { width: 22px; height: 22px; fill: currentColor; }
.loupe-taux {
  min-width: 62px; text-align: center;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8);
  font-variant-numeric: tabular-nums;
}

/* ─────────── Revenir en haut ───────────
   Pose juste au-dessus du lecteur, a droite. Il n'apparait qu'une fois le
   premier ecran passe : avant, il n'aurait aucun sens. */
.haut {
  position: fixed; right: clamp(14px, 3vw, 28px);
  bottom: calc(clamp(14px, 3vw, 28px) + 74px + env(safe-area-inset-bottom, 0px));
  z-index: 59;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); cursor: pointer;
  background: rgba(18,18,20,.84); color: #fff;
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.85);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.haut[hidden] { display: none; }
.haut.vu { opacity: 1; transform: none; pointer-events: auto; }
.haut:hover { transform: translateY(-2px); }
.haut:active { transform: scale(.92); }
.haut svg { width: 22px; height: 22px; fill: currentColor; }

/* Tant que la voix n'a pas demarre, le bouton bat doucement.
   C'est le seul element anime de la page a ce moment : impossible a manquer. */
.player[data-etat="attente"] .player-btn,
.player[data-etat="bloque"] .player-btn { animation: battement 2.2s infinite; }
@keyframes battement {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  70% { box-shadow: 0 0 0 13px rgba(255,255,255,0); }
}

/* ─────────── Chapitres ─────────── */
.chap {
  position: relative;
  padding: clamp(90px, 14vh, 180px) 0 clamp(90px, 14vh, 180px);
  overflow: hidden;
}
.chap.light { background: var(--paper); color: var(--ink); }
.chap.dark  { background: #0b0b0d; color: #f5f5f7; }
.chap.void  { background: #000; color: #fff; }

/* Halo de la couleur du chapitre : la teinte enveloppe la section
   sans jamais devenir un aplat. C'est ce qui donne à chaque chapitre
   son atmosphère propre. */
.chap.dark:not(.hero)::before, .chap.void:not(.hero)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(65% 42% at 50% -4%, var(--accent), transparent 72%);
  opacity: .14;
}
.peak::before { opacity: .22; }

.wrap {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  margin-bottom: clamp(40px, 7vh, 96px);
}
.wrap:last-child { margin-bottom: 0; }
.wrap.center { text-align: center; }

/* ─────────── Typographie ─────────── */
.mega {
  font-size: clamp(38px, 8.6vw, 108px);
  line-height: 1.02; font-weight: 700; letter-spacing: -.035em;
}
.big {
  font-size: clamp(34px, 6.2vw, 76px);
  line-height: 1.06; font-weight: 700; letter-spacing: -.03em;
}
.dim { opacity: .42; }
.eyebrow {
  font-size: clamp(14px, 1.6vw, 19px); font-weight: 600;
  letter-spacing: .02em; color: var(--accent);
  margin-bottom: 14px;
}
.lede {
  font-size: clamp(18px, 2.3vw, 28px); line-height: 1.35;
  font-weight: 500; opacity: .7; margin-top: 22px;
  max-width: 22ch;
}
.wrap.center .lede, .hero-in .lede { margin-left: auto; margin-right: auto; }
.chap > .foot { position: relative; z-index: 1; }
.foot {
  margin-top: 28px; text-align: center;
  font-size: clamp(16px, 2vw, 22px); font-weight: 600; opacity: .55;
}
/* Une phrase de pied longue n'a pas a toucher les bords de l'ecran. */
.foot.mesure { max-width: 62ch; margin-left: auto; margin-right: auto; padding: 0 var(--pad); }
.big-foot {
  font-size: clamp(20px, 3vw, 34px); opacity: .85; font-weight: 600;
  letter-spacing: -.02em; max-width: 20ch; margin: 0 auto; padding: 0 var(--pad);
}
.mini { margin-top: 20px; font-size: 15px; opacity: .45; }

/* ─────────── Ouverture ─────────── */
.hero {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding-top: 90px;
}
.media-full { position: absolute; inset: 0; z-index: 0; }
.media-full img { width: 100%; height: 100%; object-fit: cover; }
.scrim {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.82) 62%, #000 100%);
}
.hero-in { position: relative; z-index: 1; padding: 0 var(--pad); }
.kicker {
  font-size: clamp(15px, 1.8vw, 20px); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; opacity: .55;
  margin-bottom: 22px;
}
.hero-logo { height: clamp(32px, 4.6vw, 46px); width: auto; margin: 0 auto 12px; }
.end-logo { height: clamp(30px, 4.2vw, 42px); width: auto; margin: 0 auto 12px; }
/* La signature de l'editeur : discrete, elle rassure celui qui arrivera
   ensuite sur ventegrid.com sans croire qu'il s'est trompe de site. */
.signature {
  font-size: clamp(12px, 1.3vw, 14px); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .38; margin-bottom: 28px;
}
.scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 40px; border: 2px solid rgba(255,255,255,.4);
  border-radius: 14px; z-index: 1;
}
.scroll-hint span {
  position: absolute; top: 8px; left: 50%; width: 3px; height: 7px;
  margin-left: -1.5px; border-radius: 2px; background: #fff;
  animation: drop 1.9s var(--ease) infinite;
}
@keyframes drop { 0% { top: 8px; opacity: 0 } 30% { opacity: 1 } 70% { top: 22px; opacity: 0 } 100% { opacity: 0 } }

/* ─────────── Douleurs (chapitre Avant) ─────────── */
.pains {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  text-align: center;
}
.pain .ico { font-size: clamp(38px, 5.6vw, 58px); margin: 0 auto; opacity: .55; stroke-width: 1.3; }
.pain p {
  margin-top: 16px; font-size: clamp(16px, 2vw, 22px);
  font-weight: 600; opacity: .6; letter-spacing: -.01em;
}

/* ─────────── Images ─────────── */
.shot { position: relative; }
.shot img {
  width: 100%; border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.55);
}
.chap.dark .shot img, .chap.void .shot img {
  box-shadow: 0 30px 90px -25px rgba(0,0,0,.9);
}
.shot.float img {
  box-shadow: none; border-radius: 0;
  /* Le plan du dévoilement doit tenir dans un écran : la phrase dit
     « sur un seul écran », l'image ne peut pas demander de faire défiler. */
  max-height: 82vh; width: auto; margin: 0 auto;
}
.shot.wide { max-width: 100%; }
.shot figcaption {
  margin-top: 16px; font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 600; opacity: .55; text-align: center;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.duo {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(12px, 2vw, 28px); align-items: center;
}
.arrowline { position: relative; width: clamp(40px, 7vw, 90px); height: 2px; background: currentColor; opacity: .28; }
.arrowline::after {
  content: ""; position: absolute; right: -1px; top: -5px;
  border: 6px solid transparent; border-left-color: currentColor;
}
.arrowline span {
  position: absolute; top: -3px; left: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
  animation: travel 2.4s var(--ease) infinite;
}
@keyframes travel { 0% { left: 0; opacity: 0 } 15% { opacity: 1 } 85% { opacity: 1 } 100% { left: 100%; opacity: 0 } }

/* ─────────── Compteurs ─────────── */
.counter-line { margin-top: 8px; }
.counter {
  display: block;
  font-size: clamp(64px, 14vw, 168px); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.counter-cap { display: block; margin-top: 12px; font-size: clamp(15px, 1.8vw, 20px); font-weight: 600; opacity: .5; }
.huge-number .counter { font-size: clamp(40px, 9vw, 118px); }
.huge-caption { margin-top: 18px; font-size: clamp(16px, 2vw, 24px); font-weight: 600; opacity: .55; max-width: 26ch; margin-left: auto; margin-right: auto; }

/* ─────────── Grilles ─────────── */
.grid6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 2.4vw, 30px); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 30px); }

.tile {
  text-align: center; padding: clamp(18px, 2.4vw, 28px) 10px;
  border-radius: 18px; background: rgba(128,128,128,.1);
}
.tile .ico { font-size: clamp(26px, 3.4vw, 38px); margin: 0 auto; }
.tile p { margin-top: 14px; font-size: clamp(13px, 1.5vw, 16px); font-weight: 600; opacity: .75; }

.card {
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius);
  background: rgba(128,128,128,.09);
  border: 1px solid rgba(128,128,128,.14);
}
.card .ico { font-size: clamp(26px, 3vw, 34px); margin-bottom: 18px; }
.card h3 {
  font-size: clamp(18px, 2.1vw, 24px); font-weight: 700;
  letter-spacing: -.02em; color: var(--accent);
}
.chap.dark .card h3, .chap.void .card h3 { color: #fff; }
.card p { margin-top: 10px; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.45; opacity: .6; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chips li {
  padding: 11px 22px; border-radius: 999px;
  border: 1px solid rgba(128,128,128,.32);
  font-size: clamp(14px, 1.6vw, 17px); font-weight: 600; opacity: .78;
}

/* ─────────── Parcours de l'article ─────────── */
.journey {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; text-align: center; padding: 30px 0;
}
.j-line {
  position: absolute; left: 10%; right: 10%; top: 50px; height: 2px;
  background: rgba(255,255,255,.16); z-index: 0;
}
.j-line span {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--accent); transition: width 2.2s var(--ease) .3s;
}
.journey.in .j-line span { width: 100%; }
.j-step { position: relative; z-index: 1; }
.j-dot {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: #2a2a2a; margin: 0 auto 22px;
  border: 2px solid #000; transition: background .4s var(--ease);
}
.journey.in .j-step:nth-child(1) .j-dot { background: var(--accent); transition-delay: .4s; }
.journey.in .j-step:nth-child(2) .j-dot { background: var(--accent); transition-delay: .8s; }
.journey.in .j-step:nth-child(3) .j-dot { background: var(--accent); transition-delay: 1.2s; }
.journey.in .j-step:nth-child(4) .j-dot { background: var(--accent); transition-delay: 1.6s; }
.journey.in .j-step:nth-child(5) .j-dot { background: var(--accent); transition-delay: 2s; }
.j-step .ico { font-size: clamp(24px, 3.4vw, 36px); margin: 0 auto; }
.j-step p { margin-top: 12px; font-size: clamp(13px, 1.6vw, 17px); font-weight: 600; opacity: .65; }

.peak { background: #000; }

/* ─────────── Le monde : villes, heures, monnaies ─────────── */
.world { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 28px); }
.w-city {
  text-align: center; padding: clamp(22px, 2.6vw, 34px) 10px;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,.14);
}
.w-h {
  font-size: clamp(30px, 4.6vw, 52px); font-weight: 700;
  letter-spacing: -.03em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.w-n { margin-top: 8px; font-size: clamp(15px, 1.8vw, 20px); font-weight: 600; }
.w-c { margin-top: 6px; font-size: clamp(12px, 1.4vw, 15px); font-weight: 600; opacity: .45; letter-spacing: .1em; }

/* ─────────── Comparaison avec l'existant ─────────── */
.mid {
  font-size: clamp(24px, 3.4vw, 40px); font-weight: 700;
  letter-spacing: -.025em;
}
.compare { max-width: 940px; }
.cmp-head, .cmp-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid rgba(128,128,128,.22);
}
.cmp-head {
  border-top: 0; padding-bottom: 10px;
  font-size: clamp(12px, 1.4vw, 14px); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.cmp-head .cmp-a { opacity: .38; }
.cmp-head .cmp-b { color: var(--accent); opacity: 1; }
.cmp-row .cmp-a {
  font-size: clamp(14px, 1.7vw, 18px); opacity: .38;
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.cmp-row .cmp-b {
  font-size: clamp(15px, 1.9vw, 21px); font-weight: 600;
  letter-spacing: -.015em;
}

/* ─────────── Le mur : tout le reste, façon fiche technique ───────────
   Dense, sobre, sans image. Il arrive après que l'envie est créée,
   et il prouve la profondeur sans casser le récit. */
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3.4vw, 52px); }
.wall-g h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(14px, 1.6vw, 17px); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding-bottom: 12px; border-bottom: 1px solid rgba(128,128,128,.25);
}
.wall-g h3 .ico { font-size: 20px; flex: 0 0 auto; }
.wall-g ul { margin-top: 6px; }
.wall-g li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(128,128,128,.12);
}
.wall-g li:last-child { border-bottom: 0; }
.wall-g li b {
  display: block;
  font-size: clamp(14px, 1.5vw, 16px); font-weight: 600;
  letter-spacing: -.01em; opacity: .92;
}
.wall-g li span {
  display: block; margin-top: 3px;
  font-size: clamp(13px, 1.4vw, 14.5px); line-height: 1.4;
  opacity: .45;
}

/* ─────────── Échelle ─────────── */
.scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); text-align: center; }
.sc {
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2vw, 28px);
  border-radius: var(--radius); border: 1px solid rgba(128,128,128,.18);
}
.sc .ico { font-size: clamp(36px, 4.6vw, 52px); margin: 0 auto; }
.sc h3 { margin-top: 16px; font-size: clamp(19px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.sc-n {
  margin-top: 6px; font-size: clamp(26px, 4vw, 44px); font-weight: 700;
  letter-spacing: -.03em; color: var(--accent);
}
.sc p:last-child { margin-top: 12px; font-size: clamp(14px, 1.6vw, 17px); opacity: .55; line-height: 1.45; }

/* ─────────── Les trois façons de l'avoir ─────────── */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 32px); }
.way {
  position: relative; text-align: center;
  padding: clamp(30px, 3.4vw, 46px) clamp(20px, 2.2vw, 30px) clamp(26px, 3vw, 36px);
  border-radius: var(--radius);
  border: 1px solid rgba(128,128,128,.2);
  display: flex; flex-direction: column;
}
.way.best { border-color: var(--accent); }
.way .badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.way > .ico { font-size: clamp(38px, 4.6vw, 54px); margin: 0 auto; }
.way h3 {
  margin-top: 18px; font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 700; letter-spacing: -.02em;
}
.way > p { margin-top: 12px; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.5; opacity: .55; }
.dl {
  margin: 26px auto 0; display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: clamp(15px, 1.7vw, 17px); font-weight: 700;
  padding: 13px 28px; border-radius: 999px;
  transition: transform .2s var(--ease), opacity .2s;
}
.dl:hover { transform: scale(1.05); }
.dl:active { transform: scale(.97); }
.dl .ico { font-size: 19px; color: currentColor; stroke-width: 1.8; }
.chap.dark .dl .ico { color: currentColor; }
.dl-meta {
  margin-top: 14px; font-size: 13px; font-weight: 600;
  opacity: .4; letter-spacing: .02em;
}

/* ─────────── Le prix ─────────── */
/* Un prix se lit, il ne se déchiffre pas. Le chiffre est donc plus gros que
   tout le reste de la carte, et l'unité juste dessous, en petit : l'œil prend
   le montant d'abord, la précision ensuite. */
.haut-marge { margin-top: clamp(30px, 6vh, 70px); }

/* L'essai gratuit. C'est la seule chose de la section qui soit peinte en
   plein : avant de lire un seul montant, on doit voir qu'on ne paie rien. */
.essai {
  display: inline-block; text-align: center; max-width: 560px;
  padding: clamp(26px, 3vw, 38px) clamp(28px, 3.6vw, 48px);
  border-radius: var(--radius);
  background: var(--accent); color: #fff;
}
.essai-badge {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.essai-duree {
  margin-top: 14px; font-size: clamp(40px, 5.6vw, 66px);
  font-weight: 800; letter-spacing: -.04em; line-height: 1;
}
.essai-quoi {
  margin-top: 14px; font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.5; opacity: .82;
}

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); align-items: stretch; }
.plan {
  position: relative;
  text-align: center; display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 38px) clamp(16px, 1.8vw, 26px) clamp(24px, 2.6vw, 32px);
  border: 1px solid rgba(128,128,128,.2); border-radius: var(--radius);
  background: transparent;
}
/* La formule mise en avant. Elle est peinte, pas seulement encadree : sur une
   ligne de quatre cartes blanches, c'est la couleur qui decide ou l'oeil se
   pose, bien avant que le montant soit lu. */
.plan.best {
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--accent) 60%, transparent);
}
.plan.best .plan-prix strong { font-size: clamp(32px, 4.2vw, 48px); }
.plan .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.plan > .ico { font-size: clamp(34px, 4vw, 46px); margin: 0 auto; }
.plan h3 {
  margin-top: 16px; font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700; letter-spacing: -.02em;
}
.plan > p { margin-top: 9px; font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; opacity: .5; }
/* Plus précis que « .plan > p » et « .serv p », sinon le prix hériterait de
   leur opacité et resterait collé au texte au lieu de descendre au bas de la
   carte. C'est le montant : il ne doit ni pâlir ni flotter. */
.plan .plan-prix, .opt .opt-prix, .serv .serv-prix, .pack .pack-prix {
  margin-top: auto; padding-top: 22px; display: block; opacity: 1;
}
.plan-prix strong, .opt-prix strong, .serv-prix strong, .pack-prix strong {
  display: block; color: var(--accent);
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-prix span, .opt-prix span, .serv-prix span, .pack-prix span {
  display: block; margin-top: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; opacity: .45;
}
/* Le meme montant, ramene a la journee. C'est la ligne qui desamorce le prix. */
.plan .plan-jour {
  margin-top: 10px; font-size: 12.5px; font-weight: 600;
  color: var(--accent); opacity: .72; line-height: 1.4;
}

/* Le paiement à l'année. Encadré fort, pas peint : l'essai gratuit reste le
   seul aplat de la section, sinon les deux se disputent l'œil. */
.annee {
  position: relative; display: inline-block; text-align: center; max-width: 620px;
  padding: clamp(30px, 3.4vw, 44px) clamp(26px, 3.4vw, 46px) clamp(26px, 3vw, 36px);
  border: 2px solid var(--accent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: 0 22px 54px -26px color-mix(in srgb, var(--accent) 65%, transparent);
}
.annee .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  padding: 5px 15px; border-radius: 999px; white-space: nowrap;
}
.annee > .ico { font-size: clamp(30px, 3.6vw, 40px); margin: 0 auto; }
.annee-titre {
  margin-top: 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; opacity: .5;
}
.annee-gros {
  margin-top: 10px; color: var(--accent);
  font-size: clamp(32px, 4.4vw, 50px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.05;
}
.annee-quoi { margin-top: 10px; font-size: clamp(15px, 1.8vw, 19px); font-weight: 600; opacity: .6; }
.annee-plus {
  margin: clamp(20px, 2.4vw, 28px) auto 0; padding: 0; list-style: none;
  display: grid; gap: 11px; text-align: left; max-width: 420px;
}
.annee-plus li { display: flex; align-items: flex-start; gap: 11px; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.45; }
.annee-plus .ico { font-size: 19px; flex: none; margin-top: 1px; stroke-width: 2.2; }
.annee-ex {
  margin-top: clamp(20px, 2.4vw, 26px); padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  font-size: clamp(13px, 1.5vw, 15.5px); line-height: 1.5; opacity: .62;
}
.annee-ex strong { color: var(--accent); font-weight: 800; opacity: 1; }

/* La précision qui change le calcul : elle se voit, sans crier. */
.note {
  display: inline-flex; align-items: center; gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(24px, 3.4vh, 38px);
  text-align: left; max-width: 680px;
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.6vw, 30px);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-size: clamp(14px, 1.6vw, 17px); line-height: 1.55;
}
.note > .ico { font-size: clamp(26px, 3vw, 34px); flex: none; }
.note strong { font-weight: 700; }

/* Les options : une ligne chacune, l'icône, le texte, le prix au bout. */
.opts { display: grid; gap: clamp(14px, 1.8vw, 20px); max-width: 940px; }
.opt {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(16px, 2.2vw, 28px);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
  border: 1px solid rgba(128,128,128,.2); border-radius: var(--radius);
}
.opt > .ico { font-size: clamp(30px, 3.4vw, 38px); }
.opt h4 { font-size: clamp(16px, 1.9vw, 20px); font-weight: 700; letter-spacing: -.02em; }
.opt p { margin-top: 6px; font-size: clamp(13px, 1.5vw, 16px); line-height: 1.5; opacity: .5; }
.opt .opt-prix { margin-top: 0; padding-top: 0; text-align: right; }
.opt-prix strong { font-size: clamp(22px, 2.6vw, 30px); }

/* La mise en route : trois cartes, comme les trois façons de l'avoir. */
.servs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
.serv {
  display: flex; flex-direction: column; text-align: center;
  padding: clamp(26px, 3vw, 38px) clamp(18px, 2vw, 28px) clamp(24px, 2.6vw, 32px);
  border: 1px solid rgba(128,128,128,.2); border-radius: var(--radius);
}
.serv > .ico { font-size: clamp(32px, 3.8vw, 44px); margin: 0 auto; }
.serv h4 { margin-top: 16px; font-size: clamp(17px, 2vw, 22px); font-weight: 700; letter-spacing: -.02em; }
.serv p { margin-top: 10px; font-size: clamp(13px, 1.5vw, 16px); line-height: 1.55; opacity: .5; }
.serv-prix strong { font-size: clamp(24px, 3vw, 34px); }

/* Le pack : la seule carte pleine de la section. C'est celle qu'on veut. */
.pack {
  display: inline-block; text-align: center; max-width: 520px;
  padding: clamp(28px, 3.2vw, 40px) clamp(26px, 3.4vw, 44px);
  border: 2px solid var(--accent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.pack > .ico { font-size: clamp(32px, 3.8vw, 42px); margin: 0 auto; }
.pack-nom {
  margin-top: 14px; font-size: clamp(19px, 2.3vw, 25px);
  font-weight: 700; letter-spacing: -.02em;
}
.pack-quoi { margin-top: 10px; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.5; opacity: .55; }
.pack .pack-prix { margin-top: 0; padding-top: 18px; }
.pack-avant {
  margin-top: 8px; font-size: 14px; font-weight: 600;
  opacity: .4; text-decoration: line-through;
}

/* ─────────── Fin ─────────── */
.end { min-height: 92svh; display: flex; align-items: center; }
.cta {
  display: inline-block; margin-top: 34px;
  background: #fff; color: #000; text-decoration: none;
  font-size: clamp(17px, 2vw, 21px); font-weight: 600;
  padding: 17px 46px; border-radius: 999px;
  transition: transform .2s var(--ease);
}
.cta:hover { transform: scale(1.05); }

/* L'adresse de contact. Elle vient apres le bouton, sans lui disputer la
   place : contour plutot que plein. Mais elle se lit en entier, en grand,
   avec son enveloppe, pour que la reconnaisse aussi celui qui ne lit pas. */
.ecrire {
  margin-top: 40px; font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; opacity: .4;
}
.contact {
  display: inline-flex; align-items: center; gap: 13px;
  margin-top: 14px; padding: 15px 32px;
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  color: #fff; text-decoration: none;
  font-size: clamp(16px, 1.9vw, 20px); font-weight: 600;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .2s var(--ease);
}
.contact .ico { font-size: 21px; color: currentColor; stroke-width: 1.6; }
.contact:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.62);
  transform: scale(1.04);
}

.foot-bar {
  background: #000; color: rgba(255,255,255,.35);
  text-align: center; font-size: 13px;
  /* de la place sous le pied de page pour que le lecteur ne recouvre rien */
  padding: 34px 20px clamp(88px, 12vw, 110px);
}
.foot-logo { height: 24px; width: auto; margin: 0 auto 14px; opacity: .55; }
.foot-bar p + p { margin-top: 6px; }
.foot-quoi { max-width: 52ch; margin-left: auto; margin-right: auto; line-height: 1.5; }
/* Un lien de pied de page fait seize pixels de haut : trois fois trop petit
   pour un pouce. On le rembourre pour atteindre quarante-quatre, et on redonne
   le soulignement juste sous le texte, la ou il etait. */
.foot-bar a {
  position: relative; display: inline-block; padding: 15px 6px;
  color: inherit; text-decoration: none;
}
.foot-bar a::before {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 13px;
  border-bottom: 1px solid currentColor;
}
.foot-bar a:hover { color: rgba(255,255,255,.7); }
/* Les cinq liens juridiques tiennent sur une ligne sur un ecran large, et se
   replient tout seuls sur un telephone. Ils gardent le rembourrage de 44 px
   des autres liens du pied de page : un texte de treize pixels ne se touche
   pas au pouce. */
.foot-juridique {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 12px; margin-top: 2px;
}

/* ─────────── Apparition au défilement ─────────── */
.rv {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .12s; }
.rv.d2 { transition-delay: .24s; }
.rv.d3 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .scroll-hint span, .arrowline span { animation: none; }
  .player-btn { animation: none !important; }
}

/* ─────────── Emplacement d'image manquante ─────────── */
.ph {
  width: 100%; aspect-ratio: 16 / 10;
  border: 2px dashed rgba(128,128,128,.45); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  background: rgba(128,128,128,.06);
}
.ph b {
  font-size: clamp(16px, 2.2vw, 24px); letter-spacing: .06em;
  color: var(--accent); font-weight: 700;
}
.chap.dark .ph b, .chap.void .ph b { color: #fff; }
.ph span { font-size: clamp(13px, 1.6vw, 16px); opacity: .55; max-width: 34ch; line-height: 1.4; }

/* ─────────── Téléphone et tablette ─────────── */
@media (max-width: 900px) {
  .grid6 { grid-template-columns: repeat(3, 1fr); }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .pains { grid-template-columns: repeat(2, 1fr); }
  .world { grid-template-columns: repeat(2, 1fr); }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .scale { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .servs { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .arrowline { width: 2px; height: 46px; margin: 0 auto; }
  .arrowline::after { right: -5px; top: auto; bottom: -1px; border-left-color: transparent; border-top-color: currentColor; }
  .arrowline span { top: 0; left: -3px; animation-name: travelY; }
  @keyframes travelY { 0% { top: 0; opacity: 0 } 15% { opacity: 1 } 85% { opacity: 1 } 100% { top: 100%; opacity: 0 } }
  .lede { max-width: none; }
}

/* ─────────── Le pouce ───────────
   Une cible de moins de 44 px n'est pas atteignable au pouce, et Google la
   compte comme un defaut. Plutot que de grossir les elements et defaire le
   dessin, on elargit la zone sensible autour d'eux : rien ne bouge a l'oeil,
   tout devient touchable. */
.brand, .langue { position: relative; }
.brand::after, .langue::after {
  content: ''; position: absolute; left: -6px; right: -6px;
  top: 50%; transform: translateY(-50%); height: 44px;
}

@media (max-width: 380px) {
  .player-tps { display: none; }
  /* Quatre pastilles cote a cote ne tiennent plus : on passe a une colonne,
     et on autorise la coupure des mots longs, sinon la page deborde. */
  .grid4, .pains, .world, .wall { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* Le lecteur se resserre, mais les cibles tactiles grandissent :
     un bouton de moins de 44 px est inatteignable au pouce. */
  .player { gap: 8px; padding: 8px 14px 8px 8px; width: calc(100vw - 16px); }
  .player-btn { width: 46px; height: 46px; }
  .player-recul { width: 44px; height: 44px; }
  .player-recul svg { width: 26px; height: 26px; }
  .player-titre { font-size: 13px; }
  .player-piste::before { inset: -13px 0; }
  .haut { width: 46px; height: 46px; right: 12px; }

  .grid6 { grid-template-columns: repeat(2, 1fr); }
  .wall { grid-template-columns: 1fr; }
  .cmp-head, .cmp-row { grid-template-columns: 1fr; gap: 6px; }
  .journey { grid-template-columns: repeat(5, 1fr); gap: 2px; }
  .j-step .pic { font-size: 22px; }
  .j-step p { font-size: 11px; }
  .j-line { top: 42px; }
  .chips li { padding: 9px 16px; }

  /* Le bouton de zoom devient une vraie cible, et les cartes acceptent de
     couper un mot trop long plutot que de pousser la page hors de l'ecran. */
  .zoomer { min-height: 44px; padding: 10px 16px 10px 13px; }
  .card, .tile, .pain, .plan, .serv, .way { min-width: 0; overflow-wrap: break-word; }
  .player-recul-n { font-size: 10px; }

  /* Le prix passe en une colonne, et l'option repasse sur deux lignes :
     le montant sous le texte, jamais serré contre lui. */
  .plans { grid-template-columns: 1fr; }
  .opt { grid-template-columns: auto 1fr; gap: 14px; }
  .opt-prix { grid-column: 1 / -1; text-align: left; padding-top: 14px; }

  /* l'adresse ne doit jamais se couper : on resserre le cadre, pas le texte */
  .contact { padding: 14px 22px; gap: 10px; font-size: 15px; max-width: 100%; }
  .contact .ico { font-size: 19px; }
}