/* ==========================================================================
   DM4PROS · Charte V5 « néon clair »
   Couleurs autorisées : #03001E (encre), blanc, dégradé néon 135°.
   Mise en page de base = version statique (sans JS / reduced motion).
   La surcouche html.motion ajoute les pins et les états animés.
   ========================================================================== */

/* Repli aux métriques de Poppins : pas de saut de mise en page pendant le chargement. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  font-weight: 100 500;
  size-adjust: 112%;
  ascent-override: 93.5%;
  descent-override: 31.2%;
  line-gap-override: 8.9%;
}
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
  font-weight: 600 900;
  size-adjust: 108%;
  ascent-override: 97%;
  descent-override: 32.4%;
  line-gap-override: 9.2%;
}

:root {
  --ink: #03001E;
  --white: #FFFFFF;
  --paper: #FCFBFF;
  --neon: linear-gradient(135deg, #ec38bc 0%, #a18cff 50%, #78ffd6 100%);

  --ink-a06: rgba(3, 0, 30, .06);
  --ink-a10: rgba(3, 0, 30, .10);
  --ink-a12: rgba(3, 0, 30, .12);

  --shadow-1: 0 1px 2px rgba(3, 0, 30, .06), 0 6px 18px rgba(3, 0, 30, .10);
  --shadow-2: 0 2px 4px rgba(3, 0, 30, .06), 0 14px 36px rgba(3, 0, 30, .12);
  --shadow-3: 0 4px 10px rgba(3, 0, 30, .08), 0 28px 70px rgba(3, 0, 30, .18);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --font: "Poppins", "Poppins Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4.2vw, 64px);
  --maxw: 1280px;
  --nav-h: 76px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  --mx: 0;
  --my: 0;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
  background: var(--paper);
}

html:not(.motion) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.motion) { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

main { overflow-x: clip; }
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease-out);
}
.skip:focus-visible { transform: none; outline-color: var(--white); }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.i {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Typographie ---------- */

.display {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.display--xl {
  font-size: clamp(1.9rem, .85rem + 4.9vw, 5.6rem);
  letter-spacing: -.04em;
  line-height: .99;
}
.display--lg { font-size: clamp(1.8rem, .95rem + 3.5vw, 4.15rem); }
.display--md { font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); letter-spacing: -.03em; }

.overline {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.6;
  max-width: 44ch;
  text-wrap: pretty;
}

.body {
  font-size: clamp(1.0625rem, 1.02rem + .18vw, 1.1875rem);
  line-height: 1.6;
  max-width: 60ch;
  text-wrap: pretty;
}
.body--strong { font-weight: 600; }

.kicker {
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: clamp(12px, 2vh, 22px);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.link .i { width: 1em; height: 1em; transition: transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link:hover .i { transform: translate(2px, -2px); }
}

/* Boîte d'accent : texte blanc sur encre (état final, statique). */
.nobr { white-space: nowrap; }

.hl {
  position: relative;
  display: inline-block;
  padding: .02em .18em .13em;
  margin: 0 .02em;
  border-radius: .16em;
  background: var(--ink);
  color: var(--white);
  white-space: nowrap;
  line-height: inherit;
}
.body .hl {
  padding: .06em .38em .1em;
  border-radius: var(--r-sm);
  font-weight: 600;
}

/* ---------- Motifs ---------- */

.dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(3, 0, 30, .11) 1.35px, transparent 1.9px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(38% 42% at 84% 22%, #000 25%, transparent 72%), radial-gradient(34% 36% at 10% 86%, #000 20%, transparent 72%);
  mask-image: radial-gradient(38% 42% at 84% 22%, #000 25%, transparent 72%), radial-gradient(34% 36% at 10% 86%, #000 20%, transparent 72%);
}
.dots--neon { background-image: radial-gradient(circle, rgba(3, 0, 30, .10) 1.35px, transparent 1.9px); }

.blob {
  position: absolute;
  display: block;
  border-radius: var(--r-pill);
  background: var(--ink);
  opacity: .05;
}

.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* La bulle : pilule encre + logo DM4PROS blanc en capitales. */
.bulle {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h);
  padding: 0 calc(var(--h) * .44);
  border-radius: var(--r-pill);
  background: var(--ink);
  box-shadow: 0 calc(var(--h) * .08) calc(var(--h) * .3) rgba(3, 0, 30, .22);
}
.bulle img {
  height: calc(var(--h) * .34);
  width: auto;
}
.bulle--nav { --h: 46px; }
.bulle--sm { --h: 44px; }
.bulle--hero { --h: clamp(62px, 6.4vw, 108px); }
.bulle--turn { --h: clamp(70px, 8vw, 122px); }
.bulle--close { --h: clamp(64px, 7vw, 112px); }

/* Boutons pill */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background-color .16s, color .16s;
}
.btn--ink {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(3, 0, 30, .22);
}
.btn--line {
  background: transparent;
  color: var(--ink);
}
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.btn:active { transform: translateY(1px) scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(3, 0, 30, .28); }
  .btn--line:hover { background: var(--ink); color: var(--white); }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
}
.pill--line { border: 2px solid var(--ink); }
.pill .i { width: 1em; height: 1em; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cta-row--center { justify-content: center; }

/* Chips de veille : texte encre sur blanc */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .62em;
  padding: .5em .95em .5em .5em;
  border: 1px solid var(--ink-a10);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.chip b {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  padding: .42em .72em;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-size: .8em;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chip b .i { width: 1.05em; height: 1.05em; }

/* Réaction souris : propriété translate indépendante du transform de scroll. */
@media (hover: hover) and (pointer: fine) {
  html.motion .m-front,
  html.motion .m-mid,
  html.motion .m-back { transition: translate .7s var(--ease-out); }
  html.motion .m-front { translate: calc(var(--mx) * 18px) calc(var(--my) * 12px); }
  html.motion .m-mid { translate: calc(var(--mx) * 9px) calc(var(--my) * 6px); }
  html.motion .m-back { translate: calc(var(--mx) * 4px) calc(var(--my) * 3px); }
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px var(--gutter);
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.nav > * { pointer-events: auto; }
.nav.is-quiet { opacity: 0; transform: translateY(-10px); }
.nav.is-quiet > * { pointer-events: none; }

.nav__home {
  margin-right: auto;
  transition: opacity .25s var(--ease-out);
  border-radius: var(--r-pill);
  text-decoration: none;
}
.nav__home.is-off { opacity: 0; pointer-events: none; }
.nav__links {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow-1);
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s, color .16s;
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { background: var(--ink); color: var(--white); }
}
html.motion .nav { --dock: 0; }
.nav__cta { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .16s; }
.nav__cta.is-hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; }
/* Le clavier ramène toujours la nav à l'écran. */
.nav:focus-within,
.nav__cta.is-hidden:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.nav:focus-within > * { pointer-events: auto; }
.nav__home:focus-visible .bulle--nav { opacity: 1 !important; }

/* ---------- Acte 1 · Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--nav-h) + 28px) 0 72px;
  overflow: hidden;
  background: var(--paper);
}
.hero__bg { inset: -10% 0 -70%; }
.hero__bg .dots {
  -webkit-mask-image: radial-gradient(44% 40% at 78% 34%, #000 30%, transparent 74%), radial-gradient(30% 30% at 6% 92%, #000 20%, transparent 72%);
  mask-image: radial-gradient(44% 40% at 78% 34%, #000 30%, transparent 74%), radial-gradient(30% 30% at 6% 92%, #000 20%, transparent 72%);
}
.hero__shapes { inset: -10% 0 -40%; }
.blob--h1 { width: 62vw; height: 19vw; right: -18vw; top: 16%; transform: rotate(-18deg); }
.blob--h2 { width: 34vw; height: 11vw; right: 14vw; top: 64%; transform: rotate(-18deg); opacity: .04; }

.hero__content { position: relative; z-index: 2; }
.bulle--hero { margin-bottom: clamp(22px, 3.4vh, 36px); transform-origin: 0 0; }
.hero h1 { max-width: 13.5ch; margin-bottom: clamp(18px, 3vh, 28px); }
.hero .lead { margin-bottom: clamp(26px, 4vh, 40px); }

.hero__front { z-index: 3; }
.hchip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r));
}
.hchip .chip { font-size: 15.5px; }

/* ---------- Actes 2 + 3 · Douleur et Bascule ---------- */

.storm {
  position: relative;
  background: var(--paper);
}
.storm__stage { position: relative; }
.storm__bg { position: absolute; inset: 0; }
.storm__shapes { position: absolute; inset: 0; pointer-events: none; }
.blob--s1 { width: 48vw; height: 15vw; left: -14vw; top: 10%; transform: rotate(-18deg); }
.blob--s2 { width: 40vw; height: 12vw; right: -12vw; bottom: 8%; transform: rotate(-18deg); opacity: .04; }

.pain {
  position: relative;
  z-index: 2;
  padding-top: clamp(96px, 16vh, 160px);
  padding-bottom: 40px;
}
.pain h2 { max-width: 12.5ch; margin-bottom: clamp(20px, 3.4vh, 32px); }
.pain__p { max-width: 50ch; }
.pain__p + .pain__p { margin-top: 14px; }

.chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 16px var(--gutter) 96px;
}
.chips:empty { display: none; }

.turn {
  position: relative;
  background: var(--neon);
  padding: clamp(96px, 16vh, 160px) 0;
}
.turn__bulle,
.turn__iris { display: none; }

.promise {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.promise h2 { max-width: 16ch; margin-bottom: clamp(18px, 3vh, 30px); }
.promise .body { max-width: 52ch; margin-bottom: clamp(20px, 3.2vh, 30px); }

.topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
}
.topics li {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Acte 4 · Formats (rail) ---------- */

.formats { position: relative; background: var(--paper); }
.formats__stage { position: relative; }

.rail { position: relative; }
.rail__lead { display: none; }
.rail__sheet {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(48px, 6vw, 88px);
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(96px, 14vh, 140px) var(--gutter) clamp(72px, 12vh, 120px);
  background: var(--paper);
}
.rail__shape { display: none; }
.rail__intro { grid-column: 1 / -1; max-width: 760px; }
.rail__intro h2 { margin-bottom: clamp(16px, 3vh, 26px); max-width: 12ch; }

.fmt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.tag-title {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .12em .5em .16em;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--white);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.fmt__tagline {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2.1rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  max-width: 16ch;
  text-wrap: balance;
}
.fmt .body { max-width: 44ch; }
.fmt__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fmt__label {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.checks { list-style: none; display: grid; gap: 10px; }
.checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.checks .i {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  stroke-width: 3;
}

.guests { list-style: none; display: grid; gap: 12px; width: 100%; }
.guests li {
  display: grid;
  gap: 2px;
  padding: 12px 0 12px 16px;
  border-left: 1px solid var(--ink);
  line-height: 1.35;
}
.guests strong { font-weight: 700; }
.guests span { font-size: 15px; }

.fmt--focus {
  padding: clamp(26px, 3vw, 40px);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-2);
}
.fmt--daily { justify-content: center; }
.fmt__medal {
  display: grid;
  place-items: center;
  width: clamp(88px, 9vw, 132px);
  height: clamp(88px, 9vw, 132px);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.fmt__medal .i { width: 44%; height: 44%; }

.fmt__badge {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(64px, 6.4vw, 92px);
  height: clamp(64px, 6.4vw, 92px);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.fmt__badge .i { width: 42%; height: 42%; }
.fmt--debrief .fmt__badge { top: clamp(-96px, -7vw, -70px); right: 8%; }
.fmt--focus .fmt__badge,
.fmt--chiffre .fmt__badge {
  top: clamp(-40px, -2.6vw, -28px);
  right: clamp(-34px, -2.2vw, -20px);
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
}

.fmt--chiffre {
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-3);
}
.fmt--chiffre .overline { margin-bottom: 0; }
.fmt__big {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  max-width: 9ch;
}
.chiffre__rythm {
  display: grid;
  gap: 2px;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
}
.fmt--chiffre ::selection { background: var(--white); color: var(--ink); }
.fmt--chiffre :focus-visible { outline-color: var(--white); }

/* ---------- Acte 5 · Hôtes ---------- */

.hosts {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(110px, 16vh, 180px) 0 clamp(96px, 14vh, 160px);
  background: var(--neon);
}
.hosts__bg { inset: -30% 0; }
.hosts__shapes { inset: -20% 0; }
.blob--o1 { width: 52vw; height: 16vw; left: -18vw; top: 8%; transform: rotate(-18deg); opacity: .06; }
.blob--o2 { width: 36vw; height: 11vw; right: -10vw; bottom: 10%; transform: rotate(-18deg); opacity: .05; }

.hosts__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.hosts__copy h2 { margin-bottom: clamp(20px, 3.2vh, 30px); max-width: 15ch; }
.hosts__copy .body + .body { margin-top: 16px; }
.proof { line-height: 1.95; }

.duo {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vw, 36px);
  padding-top: clamp(90px, 12vw, 170px);
}
.host--vincent { margin-top: clamp(48px, 8vw, 120px); }

.host__frame {
  position: relative;
  aspect-ratio: 1 / .94;
  margin-bottom: 18px;
}
.host__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  background-image: radial-gradient(circle, rgba(3, 0, 30, .12) 1.35px, transparent 1.9px);
  background-size: 18px 18px;
}
.host__clip {
  position: absolute;
  inset: -70% 0 0 0;
  overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.host__photo {
  position: absolute;
  left: 50%;
  bottom: -7%;
  width: 124%;
  margin-left: -62%;
}
.host--vincent .host__photo { width: 112%; margin-left: -56%; }
.host__photo img {
  width: 100%;
  height: auto;
  filter: grayscale(1);
}
.host__plate {
  position: absolute;
  left: -10px;
  bottom: 18px;
  z-index: 2;
}
.host__name {
  display: inline-block;
  padding: .28em .62em .32em;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--white);
  font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  box-shadow: var(--shadow-2);
}
.host__role { font-size: 15.5px; line-height: 1.5; font-weight: 500; max-width: 34ch; }
.host .link { margin-top: 4px; font-size: 15px; }

/* ---------- Acte 6 · Épisodes ---------- */

.episodes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(110px, 16vh, 170px) 0 clamp(96px, 14vh, 150px);
  background: var(--paper);
}
.episodes__bg { inset: -30% 0; }
.episodes__shapes { inset: -20% 0; }
.blob--e1 { width: 46vw; height: 14vw; right: -16vw; top: 12%; transform: rotate(-18deg); }
.blob--e2 { width: 30vw; height: 9vw; left: -8vw; bottom: 16%; transform: rotate(-18deg); opacity: .04; }
.episodes__inner { position: relative; z-index: 1; }

.episodes__head { max-width: 900px; }
.episodes__head h2 { margin-bottom: clamp(16px, 3vh, 26px); max-width: 13ch; }

.fan {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  margin: clamp(48px, 8vh, 80px) 0 clamp(56px, 9vh, 90px);
}
.ep {
  position: relative;
  margin: 0 -10px;
  transform: rotate(var(--rot, 0deg)) translateY(var(--lift, 0px));
  transition: transform .25s var(--ease-out);
}
.ep:nth-child(1) { --rot: -3.5deg; --lift: 22px; z-index: 1; }
.ep:nth-child(2) { --rot: -1.2deg; --lift: 4px; z-index: 2; }
.ep:nth-child(3) { --rot: 1.2deg; --lift: 4px; z-index: 3; }
.ep:nth-child(4) { --rot: 3.5deg; --lift: 22px; z-index: 4; }

.ep article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 330px;
  padding: 24px;
  border: 1px solid var(--ink-a12);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-2);
}
.ep:nth-child(1) article { background: var(--ink); color: var(--white); border-color: var(--ink); box-shadow: var(--shadow-3); }
.ep:nth-child(3) article { border: 2px solid var(--ink); }

.ep__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 14px;
  font-weight: 500;
}
.ep__fmt {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
}
.ep:nth-child(1) .ep__fmt { background: var(--white); color: var(--ink); }
.ep__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.ep__title a { text-decoration: none; }
.ep__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}
.ep__title a:focus-visible { outline: none; }
.ep__title a:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 4px; }
.ep__cta {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.ep__cta .i { width: 1em; height: 1em; }
@media (hover: hover) and (pointer: fine) {
  .ep:hover { --lift: -10px; z-index: 6; }
}
.ep:focus-within { z-index: 6; }

.player { max-width: 980px; margin: 0 auto clamp(32px, 6vh, 56px); }
.player__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-weight: 600;
}
.player__frame {
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-3);
}
.player__frame iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* ---------- Interlude · Newsletter ---------- */

.newsletter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(110px, 16vh, 170px) 0;
  background: var(--neon);
}
.newsletter__bg { inset: -30% 0; }
.newsletter__shapes { inset: -20% 0; }
.blob--n1 { width: 44vw; height: 14vw; left: -12vw; bottom: 6%; transform: rotate(-18deg); opacity: .06; }
.newsletter__inner { position: relative; z-index: 1; }
.newsletter__copy { max-width: 760px; }
.newsletter__copy h2 { margin-bottom: clamp(16px, 3vh, 26px); max-width: 13ch; }
.newsletter__copy .body { margin-bottom: clamp(26px, 4vh, 36px); max-width: 46ch; }
.newsletter__front { z-index: 2; }
.newsletter__mail {
  position: absolute;
  right: clamp(-40px, 4vw, 90px);
  top: 50%;
  width: clamp(150px, 26vw, 380px);
  height: clamp(150px, 26vw, 380px);
  margin-top: calc(clamp(150px, 26vw, 380px) / -2);
  color: var(--ink);
  transform: rotate(-10deg);
}

/* ---------- Interlude · FAQ ---------- */

.faq {
  position: relative;
  padding: clamp(96px, 14vh, 150px) 0 clamp(80px, 12vh, 120px);
  background: var(--paper);
}
.faq__inner { max-width: calc(900px + 2 * var(--gutter)); }
.faq h2 { margin-bottom: clamp(24px, 4vh, 40px); }
.faq__list { border-top: 1px solid var(--ink-a12); }
.faq details { border-bottom: 1px solid var(--ink-a12); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.faq summary .i {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  transition: transform .2s var(--ease-out);
}
.faq details[open] summary .i { transform: rotate(180deg); }
.faq details p { padding: 0 0 22px; max-width: 64ch; }
.faq details a { font-weight: 600; text-underline-offset: 4px; }

/* ---------- Acte 7 · Clôture ---------- */

.close { position: relative; background: var(--neon); }
.close__stage {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(110px, 16vh, 150px) 0 28px;
  overflow: hidden;
}
.close__bg { display: none; }
.close__neon { display: none; }
.close__shapes { position: absolute; inset: 0; pointer-events: none; }
.blob--c1 { width: 50vw; height: 15vw; left: -16vw; top: 14%; transform: rotate(-18deg); opacity: .06; }
.blob--c2 { width: 40vw; height: 12vw; right: -14vw; bottom: 14%; transform: rotate(-18deg); opacity: .05; }

.close__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.close__slot { margin-bottom: clamp(22px, 3.6vh, 36px); }
.bulle--close { transform-origin: 0 0; }
.close h2 { max-width: 13ch; margin-bottom: clamp(16px, 2.8vh, 26px); }
.close .body { max-width: 46ch; margin-bottom: clamp(22px, 3.6vh, 34px); }

.platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
}
.platforms .btn .i { width: 1em; height: 1em; }
.close__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  margin-top: clamp(14px, 2.4vh, 22px);
  font-weight: 500;
}

.colophon {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2px;
  margin-top: 32px;
  padding: 0 var(--gutter);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.colophon a {
  display: inline-block;
  padding: 6px 0;
  font-weight: 600;
  text-underline-offset: 3px;
}

/* ---------- Choix de plateforme (popover) ---------- */

.picker {
  display: none;
  width: min(420px, calc(100vw - 32px));
  margin: auto;
  padding: 34px 24px 22px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  text-align: center;
}
.picker::backdrop { background: rgba(3, 0, 30, .5); }
.picker:popover-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.picker__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .picker__close:hover { background: var(--ink); color: var(--white); }
}
.picker__title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.platforms--stack { display: grid; grid-template-columns: 1fr; justify-content: stretch; width: 100%; gap: 10px; }
.platforms--stack .btn { width: 100%; justify-content: space-between; }
.picker__note { font-size: 14px; }
.picker__note a { font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }

/* ==========================================================================
   Surcouche animée (html.motion)
   ========================================================================== */

html.motion { scroll-behavior: auto; }

/* Titres montés ligne par ligne (masque + translateY) */
.ln { display: block; }
.ln__i { display: block; }
.is-split .ln__i { white-space: nowrap; }
html.motion [data-lines] .ln { clip-path: inset(-.22em -100vw -.2em -100vw); }
html.motion [data-lines] .ln__i {
  transform: translateY(calc((1 - var(--l, 0)) * 145%));
}
html.motion [data-lines="enter"].is-in .ln__i {
  --l: 1;
  transition: transform 1s var(--ease-out) calc(var(--i, 0) * 90ms);
}
.promise [data-lines] .ln,
.close [data-lines] .ln { text-align: center; }

/* Boîtes d'accent qui se déploient en largeur (transform only) */
html.motion .hl.is-live {
  background: transparent;
  color: currentColor;
}
.hl__m {
  position: absolute;
  inset: 0;
  padding: inherit;
  overflow: hidden;
  user-select: none;
  border-radius: inherit;
  pointer-events: none;
  transform: translateX(calc((var(--hl, 0) - 1) * 101%));
}
.hl__f {
  position: absolute;
  inset: 0;
  padding: inherit;
  border-radius: inherit;
  background: var(--ink);
  color: var(--white);
  white-space: nowrap;
  transform: translateX(calc((1 - var(--hl, 0)) * 101%));
}
.hl__f::before { content: attr(data-t); }
html.motion .hl[data-hl="enter"].is-in,
html.motion.is-ready .hl[data-hl="load"] { --hl: 1; }
html.motion .hl[data-hl="enter"].is-in .hl__m,
html.motion .hl[data-hl="enter"].is-in .hl__f { transition: transform .9s var(--ease-out) .45s; }
html.motion.is-ready .hl[data-hl="load"] .hl__m,
html.motion.is-ready .hl[data-hl="load"] .hl__f { transition: transform 1s var(--ease-out) .55s; }

/* Hero : entrée des premiers fragments */
html.motion .hchip .chip {
  opacity: 0;
  transform: translateY(16px) scale(.95);
}
html.motion.is-ready .hchip .chip {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out) calc(var(--d) * 90ms + 250ms), transform .9s var(--ease-out) calc(var(--d) * 90ms + 250ms);
}
html.motion .hero__bg,
html.motion .hero__shapes,
html.motion .hero__front { will-change: transform; }

/* Storm épinglé */
html.motion .storm {
  --pain: 170svh;
  --turn: 250svh;
}
html.motion .storm__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
html.motion .pain {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + 8px);
  padding-bottom: 24px;
}
html.motion .pain__p { opacity: 0; }
html.motion .chips {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
html.motion .chips--under { z-index: 1; }
html.motion .chips--over { z-index: 3; }
html.motion .chips .chip {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  backface-visibility: hidden;
}
.chip--d0 { font-size: 12.5px; box-shadow: 0 1px 2px rgba(3, 0, 30, .05), 0 4px 10px rgba(3, 0, 30, .07); }
.chip--d1 { font-size: 14px; }
.chip--d2 { font-size: 15.5px; box-shadow: var(--shadow-2); }

html.motion .turn {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 0;
  background: none;
  pointer-events: none;
}
html.motion .turn__bulle {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
}
html.motion .turn__bulle .bulle { transform: translate(-50%, -50%); }
html.motion .turn__iris,
html.motion .turn__neon { will-change: transform; }
html.motion .turn__iris {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--D, 200vmax);
  height: var(--D, 200vmax);
  margin: calc(var(--D, 200vmax) / -2) 0 0 calc(var(--D, 200vmax) / -2);
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0);
}
.turn__neon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--W, 100vw);
  height: var(--H, 100svh);
  margin: calc(var(--H, 100svh) / -2) 0 0 calc(var(--W, 100vw) / -2);
  background: var(--neon);
}
html.motion .promise {
  height: 100%;
  justify-content: center;
  padding-top: calc(var(--nav-h) - 12px);
  pointer-events: none;
}
html.motion .promise > * { pointer-events: auto; }
html.motion .kicker,
html.motion .promise__p { opacity: 0; }

/* Formats : la section se superpose au décor épinglé de la Bascule,
   la feuille blanche en pilule glisse par-dessus la promesse. */
html.motion .storm {
  z-index: 1;
  height: calc(100svh + var(--pain) + var(--turn) + var(--rail, 0px));
}
html.motion .formats {
  z-index: 2;
  background: transparent;
}
html.motion .formats__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
html.motion .rail {
  display: flex;
  align-items: stretch;
  width: max-content;
  height: 100%;
  will-change: transform;
}
html.motion .rail__lead {
  display: block;
  flex: 0 0 100vw;
}
html.motion .rail__sheet {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5.6vw, 96px);
  max-width: none;
  margin: 0;
  padding: calc(var(--nav-h) + 8px) clamp(40px, 6vw, 110px) 32px clamp(110px, 13vw, 220px);
  border-radius: 50svh 0 0 50svh;
  box-shadow: -30px 0 80px rgba(3, 0, 30, .18);
}
html.motion .rail__shape { display: block; }
.blob--r1 { width: 46vw; height: 14vw; left: 30vw; top: 4%; transform: rotate(-18deg); }
.blob--r2 { width: 40vw; height: 12vw; left: 120vw; bottom: 4%; transform: rotate(-18deg); opacity: .04; }
html.motion .rail__intro { flex: 0 0 clamp(300px, 31vw, 480px); }
html.motion .fmt--debrief { flex: 0 0 clamp(300px, 34vw, 520px); }
html.motion .fmt--focus { flex: 0 0 clamp(300px, 37vw, 580px); }
html.motion .fmt--daily { flex: 0 0 clamp(280px, 27vw, 420px); }
html.motion .fmt--chiffre { flex: 0 0 clamp(290px, 31vw, 480px); }

/* Épisodes : état initial de l'éventail */
html.motion .fan .ep { opacity: 0; }
html.motion .fan.is-set .ep { transition: none; }

/* Newsletter / hôtes : couches de parallaxe */
html.motion .host__photo,
html.motion .newsletter__mail { will-change: transform; }

/* Clôture épinglée */
html.motion .close { --span: 120svh; height: calc(100svh + var(--span)); background: var(--paper); }
html.motion .close__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  padding: calc(var(--nav-h) - 8px) 0 16px;
  background: var(--paper);
}
html.motion .close__bg { display: block; position: absolute; inset: 0; }
html.motion .close__neon {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 24svh);
  border-radius: 50% 50% 0 0 / 24svh 24svh 0 0;
  background: var(--neon);
  transform: translateY(100%);
}
html.motion .close__neon .dots { top: 24svh; }
html.motion .close__shapes { opacity: 0; }
html.motion .close__p { opacity: 0; }
html.motion .colophon { margin-top: 12px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .fan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .ep:nth-child(1) { --rot: -2.5deg; --lift: 0px; }
  .ep:nth-child(2) { --rot: 2deg; --lift: 16px; }
  .ep:nth-child(3) { --rot: -2deg; --lift: 0px; }
  .ep:nth-child(4) { --rot: 2.5deg; --lift: 16px; }
  .hosts__inner { grid-template-columns: 1fr; }
  .hosts__copy { max-width: 720px; }
  .duo { max-width: 720px; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
}

@media (max-width: 760px) {
  :root { --nav-h: 68px; }
  body { font-size: 17px; }
  .nav { padding: 12px var(--gutter); }
  .bulle--nav { --h: 44px; }
  .btn { padding: 0 22px; }

  /* Tête du hero mobile : « Abonnez-vous » centré dans la nav, bulle centrée dessous.
     --dock (0 → 1) renvoie le bouton à droite quand la bulle rejoint la nav. */
  .nav__cta { translate: calc((50% - 50vw + var(--gutter)) * (1 - var(--dock, 1))) 0; }
  .bulle--hero { display: flex; width: max-content; margin-inline: auto; }

  .hero { align-items: start; padding-top: calc(var(--nav-h) + 18px); padding-bottom: 150px; }
  .hero h1 { max-width: none; }
  .cta-row .btn { width: 100%; }
  .blob--h1 { width: 110vw; height: 32vw; right: -50vw; top: 58%; }
  .blob--h2 { display: none; }
  .hchip .chip { font-size: 13px; }
  .hchip:nth-child(1) { --x: 70% !important; --y: 86% !important; }
  .hchip:nth-child(2) { --x: 24% !important; --y: 93% !important; }
  .hchip:nth-child(3) { display: none; }
  .hchip:nth-child(4) { display: none; }
  .hchip:nth-child(5) { --x: 86% !important; --y: 96% !important; }
  .hchip:nth-child(6) { display: none; }

  html.motion .storm { --pain: 120svh; --turn: 180svh; }
  .chip--d0 { font-size: 11.5px; }
  .chip--d1 { font-size: 12.5px; }
  .chip--d2 { font-size: 13.5px; }

  html.motion .rail__sheet {
    gap: 28px;
    padding: calc(var(--nav-h) + 4px) 20px 20px 72px;
    border-radius: 42svh 0 0 42svh;
  }
  html.motion .rail__intro,
  html.motion .fmt--debrief,
  html.motion .fmt--focus,
  html.motion .fmt--daily,
  html.motion .fmt--chiffre { flex: 0 0 min(84vw, 380px); }
  .fmt { gap: 12px; }
  .fmt .body { font-size: 16px; line-height: 1.55; }
  .checks { gap: 8px; }
  .checks li { font-size: 15.5px; }
  .guests li { padding: 8px 0 8px 14px; }
  .guests span { font-size: 14px; }
  .fmt--focus { padding: 22px; }
  .fmt--debrief .fmt__badge { top: -64px; right: 4%; }

  .duo { gap: 14px; padding-top: 80px; }
  .host--vincent { margin-top: 56px; }
  .host__plate { left: -6px; bottom: 12px; }
  .host__role { font-size: 14.5px; }

  .fan { grid-template-columns: 1fr; gap: 18px; max-width: 520px; margin-inline: auto; }
  .ep { margin: 0; }
  .ep:nth-child(n) { --lift: 0px; }
  .ep:nth-child(odd) { --rot: -1.2deg; }
  .ep:nth-child(even) { --rot: 1.2deg; }
  .ep article { min-height: 0; padding: 20px; }
  .player__frame iframe { height: 440px; }

  .newsletter__mail {
    top: auto;
    bottom: -30px;
    right: -34px;
    width: 150px;
    height: 150px;
    margin-top: 0;
  }
  .newsletter__copy { padding-bottom: 90px; }

  html.motion .close { --span: 100svh; }
  .platforms { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 420px; }
  .platforms .btn { width: 100%; padding: 0 14px; font-size: 15px; }
  .platforms--stack { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .display--xl { font-size: 1.95rem; }
  .display--lg { font-size: 1.8rem; }
  .hero h1 { font-size: 1.9rem; }
}

@media (max-height: 700px) and (max-width: 760px) {
  .fmt .body { font-size: 15px; }
  .fmt__tagline { font-size: 1.2rem; }
  .close .body { margin-bottom: 16px; }
}

/* Mouvement réduit : pas de pin, pas de parallaxe, contenu intégralement lisible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 0; transition: opacity .5s ease !important; }
  .reveal.is-in { opacity: 1; }
}