/* Pulse — site public. Tokens alignés sur DESIGN.md et src/index.css de l'application. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  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 600;
  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;
}

:root {
  color-scheme: light dark;
  --bg: #F2F5F3;
  --card: #FFFFFF;
  --sunk: #E9EEEB;
  --fg: #131A17;
  --fg-muted: #47524D;
  --fg-soft: #66716B;
  --border: #DDE4E0;
  --accent: #4A5DC7;
  --accent-ink: #3A4AA8;
  --pfg: #FFFFFF;
  --success: #0D6B4F;
  --attention: #8A5D00;
  --danger: #B03A2E;
  --bezel: #131A17;
  --shadow: 0 1px 2px rgba(19, 26, 23, 0.08), 0 28px 56px -32px rgba(19, 26, 23, 0.45);
  --shadow-bar: 0 1px 2px rgba(19, 26, 23, 0.06), 0 12px 32px -16px rgba(19, 26, 23, 0.35);
  --accent-soft: #E7EAF9;
  --radius: 12px;
  --radius-lg: 20px;
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gutter: 16px;
  --max: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1512;
    --card: #171F1B;
    --sunk: #131A16;
    --fg: #E9F0EC;
    --fg-muted: #A3AFA9;
    --fg-soft: #8E9A94;
    --border: #26302B;
    --accent: #9CAAFF;
    --accent-ink: #B6C0FF;
    --pfg: #131A17;
    --success: #5DD3A8;
    --attention: #E8B96A;
    --danger: #F0897C;
    --bezel: #060907;
    --shadow: none;
    --shadow-bar: none;
    --accent-soft: #2F3844;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: 92px;
  font-family: var(--font);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--fg);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-size: 17px; line-height: 1.6; background: var(--bg); color: var(--fg); overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--fg); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
/* .keep : un groupe de mots (une phrase, une proposition) qu'un titre ne coupe pas ; trop large pour la ligne,
   il se replie en bloc. text-wrap: pretty évite un mot seul en dernière ligne de paragraphe (ignoré par les
   navigateurs qui ne le connaissent pas). */
.keep { display: inline-block; }
p, li, dd { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.muted { color: var(--fg-muted); }
.soft { color: var(--fg-soft); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); }
.sprite { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; left: 16px; top: -48px; padding: 10px 14px; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); z-index: 50; text-decoration: none; }
.skip:focus { top: 12px; }

/* Navigation : pilule sombre dans les deux thèmes (encre du texte en clair, carte en sombre), courbe Pulse
   dessinée à l'arrivée puis trois battements du point (moins de 5 s, rien en mouvement réduit), section en
   cours sur une pastille d'accent qui glisse sous son lien (JS ; statique sans script), bouton « Voir la démo ». */
.nav {
  position: sticky; top: 0; z-index: 20; padding: 10px 0;
  --nav-bg: var(--fg); --nav-fg: var(--bg); --nav-muted: rgba(242, 245, 243, 0.74); --nav-hover: rgba(242, 245, 243, 0.1);
  --nav-border: rgba(242, 245, 243, 0.1); --nav-chip: var(--accent); --nav-chip-fg: var(--pfg);
  --nav-cta-bg: var(--bg); --nav-cta-fg: var(--fg); --nav-cta-hover: #FFFFFF;
  /* La pilule est sombre quel que soit le thème : la courbe prend la palette sombre du système (DESIGN.md). */
  --mark-blue: #9CAAFF; --mark-green: #5DD3A8; --mark-orange: #E8B96A;
}
@media (prefers-color-scheme: dark) {
  .nav {
    --nav-bg: var(--card); --nav-fg: var(--fg); --nav-muted: var(--fg-muted); --nav-hover: rgba(233, 240, 236, 0.08);
    --nav-border: var(--border); --nav-cta-bg: var(--accent); --nav-cta-fg: var(--pfg); --nav-cta-hover: var(--accent-ink);
  }
}
.nav .wrap { display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 7px 7px 7px 8px; border-radius: 999px; background: var(--nav-bg); color: var(--nav-fg); border: 1px solid var(--nav-border); box-shadow: var(--shadow-bar); }
.nav :focus-visible { outline-color: var(--mark-blue); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; padding: 0 12px 0 4px; border-radius: 999px; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 17px; }
.brand img { width: 30px; height: 30px; border-radius: 50%; }
.brand:hover { color: var(--fg); background: var(--sunk); }
.nav .brand { gap: 9px; padding: 0 12px 0 8px; color: var(--nav-fg); letter-spacing: -0.01em; }
.nav .brand:hover { color: var(--nav-fg); background: var(--nav-hover); }
.brand-mark { width: 40px; height: 22px; flex: none; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.brand-mark .m-blue { stroke: var(--mark-blue); }
.brand-mark .m-green { stroke: var(--mark-green); }
.brand-mark .m-orange { stroke: var(--mark-orange); }
.brand-mark .dot { fill: var(--nav-bg); stroke: var(--mark-blue); }
.brand-mark .halo { stroke: var(--mark-blue); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .brand-mark path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: nav-draw 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .brand-mark .m-green { animation-delay: 0.12s; }
  .brand-mark .m-peak { animation-delay: 0.24s; }
  .brand-mark .m-orange { animation-delay: 0.4s; }
  .brand-mark .m-end { animation-delay: 0.52s; }
  .brand-mark .dot { opacity: 0; animation: nav-dot 0.3s ease-out 0.5s forwards; }
  .brand-mark .halo { animation: nav-beat 1.4s ease-out 0.9s 3; }
}
@keyframes nav-draw { to { stroke-dashoffset: 0; } }
@keyframes nav-dot { to { opacity: 1; } }
@keyframes nav-beat { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.8); opacity: 0; } }
.nav-links { position: relative; display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--nav-muted); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease; }
.nav-links a:hover { color: var(--nav-fg); background: var(--nav-hover); }
.nav-links a:focus-visible { outline-offset: -3px; }
.nav-links a[aria-current] { color: var(--nav-chip-fg); }
.nav-links a[aria-current]:hover { background: transparent; }
html:not(.js) .nav-links a[aria-current] { background: var(--nav-chip); }
.nav-ink { position: absolute; top: 0; left: 0; width: 0; height: 44px; border-radius: 999px; background: var(--nav-chip); opacity: 0; pointer-events: none; }
.nav-ink.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .nav-ink { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease; }
}
.nav .nav-cta { flex: none; min-height: 44px; padding: 0 16px 0 13px; border-radius: 999px; background: var(--nav-cta-bg); color: var(--nav-cta-fg); font-size: 15px; }
.nav .nav-cta:hover { background: var(--nav-cta-hover); color: var(--nav-cta-fg); }
.nav .nav-cta .icon { width: 18px; height: 18px; }
@media (max-width: 639.98px) {
  .nav .nav-cta { width: 44px; padding: 0; }
  .nav .nav-cta .icon { width: 20px; height: 20px; }
  .nav .nav-cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 880px) {
  .nav .wrap { gap: 12px; }
  .nav-links { flex: 0 1 auto; margin-inline: auto; }
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--accent); color: var(--pfg); }
.btn-primary:hover { background: var(--accent-ink); color: var(--pfg); }
.btn-secondary { background: var(--card); color: var(--fg); border-color: var(--border); }
.btn-secondary:hover { background: var(--sunk); color: var(--fg); }
.btn-sm { min-height: 48px; padding: 0 16px; font-size: 15px; }
.btn-link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* Badges stores (état pré-lancement : non cliquables) */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 18px 8px 14px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--fg);
  text-decoration: none;
}
.store .icon { width: 26px; height: 26px; color: var(--fg-muted); }
.store span { display: block; line-height: 1.15; }
.store .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); }
.store .v { font-weight: 600; font-size: 16px; }
.store-soon { border-style: dashed; }
.store-soon .v { color: var(--fg-muted); }
a.store:hover { background: var(--sunk); color: var(--fg); }

/* Téléphone */
.phone {
  position: relative;
  width: min(100%, 280px); margin-inline: auto; aspect-ratio: 1178 / 2556;
  padding: 10px; border-radius: 44px; background: var(--bezel); box-shadow: var(--shadow);
}
.phone > * { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; background: #000; }
.phone-sm { width: min(100%, 240px); padding: 8px; border-radius: 36px; }
.phone-sm > * { border-radius: 28px; }

/* Hero : texte centré, puis le film pleine largeur */
.hero { padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 72px); }
.hero .wrap { display: grid; gap: clamp(36px, 5vw, 52px); }
.hero-copy { max-width: 800px; margin-inline: auto; text-align: center; }
/* Titre descriptif (deux propositions) : plus petit qu'un slogan pour tenir en trois lignes au plus. */
.hero h1 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.02; letter-spacing: -0.035em; margin-top: 18px; }
.hero .lead { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.45; color: var(--fg-muted); margin: 22px auto 0; max-width: 48ch; text-wrap: balance; }
/* Avant la sortie, l'action possible est de voir la démonstration ; les badges stores disent la suite. */
.hero .actions, .cta .actions { display: grid; justify-items: center; gap: 16px; }
.hero .actions { margin-top: 32px; }
.cta .actions { margin-top: 32px; }
.hero .stores { justify-content: center; }
/* Repères du hero : une ligne discrète, séparée par des points médians */
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin-top: 18px; color: var(--fg-soft); font-size: 15px; }
.trust li { list-style: none; display: inline-flex; align-items: center; }
.trust li + li::before { content: '·'; margin: 0 10px; opacity: 0.6; }
@media (max-width: 479.98px) {
  .trust { flex-direction: column; align-items: center; gap: 4px; }
  .trust li + li::before { content: none; }
}

/* Film du hero : 4:5 sur téléphone, 16:9 dès 640 px (même seuil dans site.js), clair ou sombre.
   Le film porte son propre fond (jetons --bg) ; la carte montre une affiche tant que rien n'est lu :
   l'image de départ sous la lecture automatique, la journée posée quand le film ne démarre pas
   (mouvement réduit, ou lecture automatique refusée : classe is-still posée par site.js).
   Chemins absolus : une url() dans une propriété personnalisée ne se résout pas partout pareil. */
.hero-film {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  --hero-first: url('/assets/img/hero-tall-light.webp');
  --hero-still: url('/assets/img/hero-tall-light-still.webp');
  background: var(--bg) var(--hero-first) center / cover no-repeat;
}
.hero-film video { width: 100%; height: 100%; object-fit: cover; }
/* Tant que rien n'a été lu (classe retirée par site.js au premier « playing »), la vidéo reste
   invisible : certains navigateurs décodent la première image malgré preload="none", ce qui
   couvrirait l'affiche. Sans script, l'affiche reste seule. */
.hero-film.is-idle video { visibility: hidden; }
.hero-film.is-still { background-image: var(--hero-still); }
@media (prefers-reduced-motion: reduce) { .hero-film { background-image: var(--hero-still); } }
@media (prefers-color-scheme: dark) {
  .hero-film { --hero-first: url('/assets/img/hero-tall-dark.webp'); --hero-still: url('/assets/img/hero-tall-dark-still.webp'); }
}
@media (min-width: 640px) {
  .hero-film { aspect-ratio: 16 / 9; --hero-first: url('/assets/img/hero-wide-light.webp'); --hero-still: url('/assets/img/hero-wide-light-still.webp'); }
}
@media (min-width: 640px) and (prefers-color-scheme: dark) {
  .hero-film { --hero-first: url('/assets/img/hero-wide-dark.webp'); --hero-still: url('/assets/img/hero-wide-dark-still.webp'); }
}
/* Grand bouton lecture posé sur l'affiche tant que le film ne joue pas : disque translucide (l'image
   reste visible dessous), triangle plein. Un clic n'importe où sur la carte lance le film ou le met en
   pause. Le petit bouton pause sous la carte n'apparaît que pendant la lecture (WCAG 2.2.2), à place
   réservée pour que rien ne saute au démarrage. Sans script : ni disque, ni petit bouton. */
.hero-film { --play-bg: rgba(19, 26, 23, 0.62); --play-bg-hover: rgba(19, 26, 23, 0.8); --play-fg: #FFFFFF; --play-ring: rgba(255, 255, 255, 0.4); --play-halo: rgba(255, 255, 255, 0.16); }
@media (prefers-color-scheme: dark) {
  .hero-film { --play-bg: rgba(233, 240, 236, 0.8); --play-bg-hover: rgba(233, 240, 236, 0.95); --play-fg: #131A17; --play-ring: rgba(15, 21, 18, 0.35); --play-halo: rgba(233, 240, 236, 0.16); }
}
.hero-play {
  position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--play-ring);
  background: var(--play-bg); color: var(--play-fg); box-shadow: 0 0 0 10px var(--play-halo); cursor: pointer; font: inherit;
  transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease, visibility 0s linear 0s;
}
.hero-play .icon { width: 40px; height: 40px; margin-left: 6px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.hero-play:hover { background: var(--play-bg-hover); }
.hero-play:focus-visible { outline: 3px solid var(--play-fg); outline-offset: 4px; }
.hero-film.is-playing { cursor: pointer; }
.hero-film.is-playing .hero-play { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, 0.25s; }
html:not(.js) .hero-play { display: none; }
@media (max-width: 639.98px) {
  .hero-play { width: 76px; height: 76px; box-shadow: 0 0 0 8px var(--play-halo); }
  .hero-play .icon { width: 32px; height: 32px; margin-left: 4px; }
}
.hero-controls { display: flex; justify-content: flex-end; margin: 12px 0 0; min-height: 48px; visibility: hidden; }
.hero-film.is-playing + .hero-controls { visibility: visible; }
html:not(.js) .hero-controls { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sections */
.section { padding: clamp(56px, 9vw, 112px) 0; }
.section-alt { background: var(--card); border-block: 1px solid var(--border); }
/* L'en-tête laisse au titre la largeur d'une proposition entière à 50 px (« Plus pour aller plus loin. ») ;
   le paragraphe garde sa mesure de lecture. */
.section-head { max-width: 54ch; }
.section-head h2 { font-size: clamp(30px, 4.6vw, 50px); margin-top: 14px; letter-spacing: -0.03em; }
.section-head p { margin-top: 18px; max-width: 40ch; font-size: clamp(17px, 1.6vw, 19px); color: var(--fg-muted); }
.section-head p + p { margin-top: 12px; }

/* Rail d'énergie */
.rail { margin-top: 44px; background: var(--sunk); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(16px, 3vw, 32px); }
.section-alt .rail { background: var(--bg); }
.rail svg { width: 100%; height: auto; color: var(--fg); }
.rail .hi { fill: var(--accent); }
.rail .hi-low { fill-opacity: 0.55; }
.rail .tick { stroke: var(--fg-soft); stroke-width: 2; }
.rail .base { stroke: var(--border); stroke-width: 2; }
.rail-hours { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; font-family: var(--mono); font-size: 13px; color: var(--fg-soft); }
.rail-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; font-size: 15px; color: var(--fg-muted); }
.rail-legend li { list-style: none; display: flex; align-items: center; gap: 10px; }
.rail-legend .dot { width: 10px; height: 18px; border-radius: 3px; background: var(--accent); flex: none; }
.rail-legend .dot-low { height: 10px; opacity: 0.55; background: var(--fg); }
.rail-legend strong { color: var(--fg); }

/* Étapes */
.steps { display: grid; gap: 48px; margin-top: 52px; }
.step { display: grid; gap: 22px; align-content: start; }
.step .phone { width: min(100%, 250px); margin-inline: 0; }
.step-num { font-family: var(--mono); color: var(--accent-ink); font-size: 14px; letter-spacing: 0.08em; }
.step h3 { font-size: 23px; margin-top: 8px; }
.step p { color: var(--fg-muted); margin-top: 10px; font-size: 16px; }
.quote { margin-top: 14px; font-family: var(--mono); font-size: 14px; line-height: 1.5; background: var(--sunk); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; color: var(--fg); }
.section-alt .quote { background: var(--bg); }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 36px; } }

/* Fonctions : une rangée par écran, capture et bénéfice côte à côte */
.feature-rows { display: grid; gap: 48px; margin-top: 52px; }
.feature-row { display: grid; gap: 22px; align-items: center; }
.feature-row .phone-sm { width: min(100%, 200px); margin-inline: 0; }
.feature-row h3 { font-size: clamp(21px, 2.4vw, 25px); margin-top: 10px; }
.feature-row h3 + p { color: var(--fg-muted); margin-top: 10px; font-size: 16px; max-width: 44ch; }
@media (min-width: 720px) { .feature-row { grid-template-columns: 200px 1fr; gap: 32px; } }
@media (min-width: 1040px) { .feature-rows { grid-template-columns: 1fr 1fr; gap: 64px 48px; } }

/* Film */
.film-head { margin-top: 64px; max-width: 54ch; }
.film-head h3 { font-size: clamp(22px, 2.6vw, 28px); }
.film-head p { margin-top: 10px; color: var(--fg-muted); font-size: 17px; max-width: 46ch; }
.film { margin-top: 28px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: #000; aspect-ratio: 16 / 9; }
.film video { width: 100%; height: 100%; }

/* Honnêteté */
.honest { display: grid; gap: 12px; margin-top: 44px; }
.honest li { list-style: none; display: flex; gap: 14px; padding: 20px 22px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.honest .icon { width: 22px; height: 22px; color: var(--success); margin-top: 3px; }
.honest strong { display: block; font-weight: 600; }
.honest span { color: var(--fg-muted); font-size: 15.5px; }
@media (min-width: 720px) { .honest { grid-template-columns: repeat(3, 1fr); } }

/* Tarifs */
.plans { display: grid; gap: 20px; margin-top: 44px; }
.plan { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 22px; align-content: start; }
.plan-plus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan h3 { font-size: 22px; }
.plan .price { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 16px; font-weight: 400; color: var(--fg-muted); letter-spacing: 0; }
.plan .alt { margin-top: 8px; color: var(--fg-muted); font-size: 15px; }
.plan ul { display: grid; gap: 10px; }
.plan li { list-style: none; display: flex; gap: 10px; color: var(--fg-muted); font-size: 15.5px; }
.plan li .icon { width: 20px; height: 20px; color: var(--success); margin-top: 3px; }
.plan .note { font-size: 14px; color: var(--fg-soft); }
.plan .chip { justify-self: start; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 10px; }
.section-alt .plan { background: var(--bg); }
@media (min-width: 800px) { .plans { grid-template-columns: 1fr 1fr; } }

/* FAQ */
.faq { margin-top: 40px; border-top: 1px solid var(--border); max-width: 76ch; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 18px; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 20px; height: 20px; color: var(--fg-soft); transition: transform 0.2s ease; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .a { padding: 0 0 22px; color: var(--fg-muted); }
.faq .a p + p { margin-top: 10px; }

/* Appel final */
.cta { padding: clamp(64px, 10vw, 128px) 0; text-align: center; }
.cta h2 { font-size: clamp(32px, 5.4vw, 60px); letter-spacing: -0.03em; }
.cta .cta-text { margin: 18px auto 0; max-width: 46ch; color: var(--fg-muted); font-size: 18px; }
.cta .stores { justify-content: center; margin-top: 32px; }

/* Pied de page */
.footer { border-top: 1px solid var(--border); padding: 40px 0 48px; color: var(--fg-soft); font-size: 14px; }
.footer .wrap { display: grid; gap: 24px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer a { color: var(--fg-muted); text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; }
.footer a:hover { color: var(--fg); text-decoration: underline; }
.footer .brand { font-size: 16px; }
.footer p { margin-top: 8px; max-width: 48ch; }
@media (min-width: 720px) { .footer .wrap { grid-template-columns: 1fr auto; align-items: start; } }

/* Pages de texte (conditions, confidentialité, CGV, mentions) */
.doc { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.doc article { max-width: 74ch; }
.doc h1 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.03em; margin-top: 12px; }
.doc .lead { margin-top: 18px; font-size: 18px; color: var(--fg-muted); }
.doc .meta { font-family: var(--mono); font-size: 13px; color: var(--fg-soft); margin-top: 14px; }
.doc h2 { font-size: 24px; margin-top: 44px; }
.doc h3 { font-size: 19px; margin-top: 26px; }
.doc p, .doc li { color: var(--fg-muted); margin-top: 12px; }
.doc li { margin-top: 6px; }
.doc ul, .doc ol { padding-left: 22px; margin-top: 8px; }
.doc .note { margin-top: 26px; border-left: 3px solid var(--accent); background: var(--sunk); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; color: var(--fg); }
.doc .note p { color: var(--fg); margin-top: 0; }
.doc dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin-top: 16px; }
.doc dt { font-weight: 600; color: var(--fg); }
.doc dd { margin: 0; color: var(--fg-muted); }
.doc table { border-collapse: collapse; width: 100%; margin-top: 16px; font-size: 15.5px; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--fg-muted); }
.doc th { color: var(--fg); font-weight: 600; }
.doc .form { margin-top: 16px; padding: 18px 20px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--card); }
.doc .form p { margin-top: 8px; }
.doc .form p:first-child { margin-top: 0; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--fg-muted); text-decoration: none; font-size: 14.5px; }
.legal-nav a:hover { background: var(--sunk); color: var(--fg); }
.legal-nav a[aria-current="page"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
@media (max-width: 560px) {
  .doc dl { grid-template-columns: 1fr; gap: 2px; }
  .doc dt { margin-top: 12px; }
}

/* Support */
.cards { display: grid; gap: 16px; margin-top: 44px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; display: grid; gap: 10px; align-content: start; }
.card h2 { font-size: 21px; }
.card p, .card li { color: var(--fg-muted); font-size: 15.5px; }
.card ul { padding-left: 20px; }
.card .btn { justify-self: start; margin-top: 8px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }

/* Mouvement. Rien de ce bloc ne joue en mouvement réduit (réglage système « Réduire les animations ») :
   la page est alors immobile et entièrement visible. Même courbe de décélération que la pilule du menu. */
@media (prefers-reduced-motion: no-preference) {
  /* Arrivée : la pilule descend ; titre, texte, boutons, repères puis la carte du film montent l'un après l'autre */
  .nav .wrap { animation: nav-drop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > * { animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.24s; }
  .hero-stage { animation: hero-rise-card 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
  /* Défilement (JS) : un bloc .reveal monte quand il entre dans la vue */
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal.d2 { transition-delay: 0.1s; }
  .js .reveal.d3 { transition-delay: 0.2s; }
  /* Conteneurs cadencés (data-stagger) : le conteneur reste en place, ses enfants arrivent l'un après
     l'autre ; les délais sont posés par site.js (data-stagger-step, en ms) */
  .js .reveal[data-stagger] { opacity: 1; transform: none; transition: none; }
  .js .faq[data-stagger] details { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .faq.is-visible details { opacity: 1; transform: none; }
  /* Courbe d'énergie : les 96 barres montent du socle, de 0 h à 24 h, puis la légende apparaît */
  .js .rail[data-stagger] rect { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .rail.is-visible rect { transform: none; }
  .js .rail[data-stagger] .rail-legend li { opacity: 0; transition: opacity 0.5s ease 1.2s; }
  .js .rail[data-stagger] .rail-legend li + li { transition-delay: 1.35s; }
  .js .rail.is-visible .rail-legend li { opacity: 1; }
  /* Pressions et survol du grand bouton lecture */
  .btn:active, .store:active { transform: scale(0.98); }
  .hero-play:hover { transform: scale(1.05); }
  .hero-play:active { transform: scale(0.97); }
  .hero-film.is-playing .hero-play { transform: scale(0.92); }
}
@keyframes nav-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-rise-card { from { opacity: 0; transform: translateY(20px) scale(0.985); } to { opacity: 1; transform: none; } }

@media print {
  .nav, .footer nav, .stores, .film, .phone, .hero-stage { display: none; }
  body { background: #fff; color: #000; }
}

/* Compléments */
.steps { list-style: none; padding: 0; }

/* Légende du rail : la tâche du creux reprend la teinte atténuée de ses barres */
.rail-legend .dot.dot-low { background: var(--accent); opacity: 0.55; }

/* Nom de l'offre dans le titre de la carte Plus */
.plan h3 .chip { display: block; width: max-content; margin-bottom: 10px; }