/*
  La feuille de styles de l'ACCUEIL seulement (index.html et en/index.html), depuis le 13 octobre 2026.
  C'est celle de la refonte « salle de projection » : Arthur n'a sorti que son accueil, le reste du site garde
  styles.css. Les deux feuilles se ressemblent beaucoup ; une règle changée ici ne change que l'accueil.
  L'écran montré dans le navigateur de TikTok, lui, garde styles.css (entree.js remplace la feuille) : il ne change pas.
*/
@font-face {
  font-family: "Geist";
  src: url("https://mavena-medias.pages.dev/assets/fonts/geist.woff2") format("woff2"), url("assets/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("https://mavena-medias.pages.dev/assets/fonts/geist-mono.woff2") format("woff2"), url("assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/*
  Refonte du 12 octobre 2026 : le site se regarde comme une salle de projection. L'image d'abord, en grand ;
  le texte en légende ; les détails techniques en chasse fixe, comme des repères de montage.
  Un seul accent (orange). Une seule famille de gris, chauds comme la lumière des vidéos.
  Rayons : médias et cadres 14px, petits éléments 10px, boutons en pilule.
*/
:root {
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #0b0a09;
  --surface: #141210;
  --line: #2a2622;
  --text: #f4f1ea;
  --muted: #a69f95;
  --accent: #ff5a1f;
  --on-accent: #160a04;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 64px;
}
/* Le site est noir pour tout le monde (décision d'Arthur du 12 octobre 2026). Jusque-là, un appareil réglé en mode
   clair recevait une version claire ; elle est retirée, et les pages l'annoncent (meta « color-scheme » : dark). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a, button, label, select { touch-action: manipulation; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
button { font: inherit; color: inherit; }
:focus-visible, .lot-size:has(:focus-visible), .pick:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* Bouton */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 99px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease), opacity 0.25s, box-shadow 0.35s var(--ease);
}
.btn:hover { filter: brightness(1.08); box-shadow: 0 10px 34px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn:active { transform: scale(0.97); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; filter: none; box-shadow: none; cursor: default; }
.btn-soon { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.btn-soon:hover { filter: none; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn-quiet { min-height: 40px; padding: 0 18px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-weight: 500; }
.btn-quiet:hover { filter: none; box-shadow: inset 0 0 0 1px var(--muted); }
.btn-arrow::after { content: "→"; margin-left: 10px; transition: transform 0.35s var(--ease); }
.btn-arrow:hover::after { transform: translateX(4px); }

/* En-tête */
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.logo-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }

/* En-tête de l'accueil : il reste en haut de l'écran et prend un fond flouté dès qu'on a quitté le haut de page */
.top-mark { position: absolute; top: 0; left: 0; width: 1px; height: 120px; pointer-events: none; }
.nav-bar { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid transparent; transition: background-color 0.4s, border-color 0.4s; }
.nav-bar .nav { height: 64px; }
/* Le bouton de l'en-tête n'existe pas en haut de page (le grand bouton est juste dessous) : il se glisse à
   droite du menu une fois le haut de page quitté, et le menu lui fait de la place en douceur. */
.nav-bar .nav-cta { max-width: 0; min-width: 0; margin-left: 0; padding-inline: 0; overflow: hidden; opacity: 0; pointer-events: none; box-shadow: none; white-space: nowrap; transition: max-width 0.5s var(--ease), margin-left 0.5s var(--ease), padding 0.5s var(--ease), opacity 0.3s, box-shadow 0.3s; }
.nav-bar.is-stuck { border-color: var(--line); background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nav-bar.is-stuck .nav-cta { max-width: 220px; margin-left: clamp(14px, 3vw, 28px); padding-inline: 18px; opacity: 1; pointer-events: auto; box-shadow: inset 0 0 0 1px var(--line); }
.nav-bar.is-stuck .nav-cta:hover { box-shadow: inset 0 0 0 1px var(--muted); }
/* Le menu : quelques liens sur une ligne, à droite du logo, sur téléphone comme sur ordinateur. */
.nav-links { display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); margin-left: auto; }
.nav-links a { position: relative; padding: 10px 0; color: var(--muted); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: color 0.25s; }
.nav-links a::after { content: ""; position: absolute; right: 0; bottom: 5px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* Le sélecteur de langue, à côté du logo : « FR · EN », la langue en cours en clair. Le menu garde sa place, à droite. */
.lang { display: flex; align-items: center; margin-left: clamp(10px, 2vw, 18px); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; }
.lang a { padding: 10px 0; color: var(--muted); text-decoration: none; transition: color 0.25s; }
.lang a + a::before { content: "·"; margin-inline: 6px; color: var(--muted); }
.lang a:hover, .lang a[aria-current="true"] { color: var(--text); }
.lang a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* Le menu du téléphone (maquette d'Arthur du 21 octobre 2026) : sur ordinateur, son panneau se fond dans la ligne de
   l'en-tête comme avant ; le bouton ☰ et la ligne « Comment ça marche » n'apparaissent que sur téléphone. */
.nav-panel { display: contents; }
.nav-how, .nav-toggle { display: none; }
@media (max-width: 359px) {
  .lang { margin-left: 8px; }
  .lang a + a::before { margin-inline: 4px; }
}

/* ---------- Page d'affiliation ----------
   Le chiffre d'abord : la part reversée, en très grand. À côté (dessous sur téléphone), la phrase et le champ où
   laisser son adresse. Connecté, le chiffre laisse la place à l'espace de l'affilié. */
.aff-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; padding-block: clamp(28px, 6vw, 88px) 0; }
.aff-hero > * { grid-column: 1; }
.aff-hero h1 { max-width: 13ch; font-size: clamp(2.3rem, 5vw, 4.4rem); letter-spacing: -0.055em; line-height: 0.96; }
.aff-figure { grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: end; margin-right: -0.04em; color: var(--accent); font-size: clamp(7rem, 21vw, 19rem); font-weight: 600; letter-spacing: -0.075em; line-height: 0.8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aff-hero:has(.aff-link) .aff-figure { display: none; }
.aff-hero:has(.aff-link) { grid-template-columns: minmax(0, 1fr); }
.aff-space { max-width: 600px; }
.aff-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.aff-form input, .aff-pick select { min-width: 0; min-height: 54px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: var(--text); font: inherit; font-size: 1rem; }
.aff-form input:focus-visible, .aff-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.aff-note { margin-top: 12px; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.aff-message:empty { display: none; }
.aff-message { color: var(--text); }
.aff-label { color: var(--muted); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.01em;  }
/* Connecté : le lien à partager, les chiffres, puis ce que le solde permet. */
.aff-link { padding: 20px 22px 22px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.aff-url { margin-block: 8px 18px; font-size: clamp(1.3rem, 5.4vw, 2rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.15; overflow-wrap: anywhere; }
.aff-figures { margin-top: 22px; }
.aff-link .aff-pick { margin-top: 0; }
.aff-transfer { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); }
.aff-use, .aff-journal { margin-top: 28px; }
.aff-use .btn { margin-top: 10px; }
.aff-pick { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 10px; }
.aff-pick .btn { margin-top: 0; min-height: 54px; }
.aff-journal ul { margin: 10px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.aff-journal li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }
.aff-journal b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aff-out { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Sur grand écran, l'espace de l'affilié connecté tient sur deux colonnes : son lien et ses chiffres à gauche, ce
   que son solde permet et ses derniers mouvements à droite. */
@media (min-width: 1024px) {
  .aff-space:has(.aff-link) { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); align-items: start; column-gap: clamp(48px, 6vw, 96px); max-width: none; }
  .aff-space:has(.aff-link) > * { grid-column: 1; }
  .aff-space:has(.aff-link) > .aff-use { grid-column: 2; grid-row: 1; margin-top: 0; }
  .aff-space:has(.aff-link) > .aff-journal { grid-column: 2; grid-row: 2 / span 3; }
  .aff-space:has(.aff-link) > .aff-journal ~ .aff-note, .aff-space:has(.aff-link) > .aff-use ~ .aff-note:last-child { grid-column: 2; }
}
/* Sous l'espace : les deux façons de toucher ses gains, côte à côte de part et d'autre d'un filet ; puis les
   règles, numérotées. */
.aff-ways { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(32px, 4.4vw, 64px); border-top: 1px solid var(--line); }
.aff-ways > div { padding-top: clamp(22px, 3vw, 40px); }
.aff-ways > div + div { padding-left: clamp(24px, 5vw, 72px); border-left: 1px solid var(--line); }
.aff-ways h3 { font-size: clamp(1.6rem, 3.6vw, 2.8rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.aff-ways > div:first-child h3 { color: var(--accent); }
.aff-ways p { max-width: 40ch; margin-top: 16px; color: var(--muted); font-size: 1.05rem; }
.aff-rules { max-width: 76ch; margin: clamp(32px, 4.4vw, 64px) 0 0; padding: 0; list-style: none; counter-reset: regle; border-top: 1px solid var(--line); }
.aff-rules li { position: relative; padding: 16px 0 16px 3rem; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.5; counter-increment: regle; }
.aff-rules li::before { content: "0" counter(regle); position: absolute; top: 16px; left: 0; color: var(--accent); font-family: var(--mono); font-size: 0.8rem; line-height: 1.9; font-variant-numeric: tabular-nums; }
.aff-last { padding-bottom: clamp(56px, 8vw, 112px); }
@media (max-width: 899px) {
  /* Le chiffre passe au-dessus de la phrase, moins grand : le champ et le bouton restent dans le premier écran. */
  .aff-hero { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .aff-hero .eyebrow { margin-bottom: 12px; }
  .aff-figure { grid-column: 1; grid-row: auto; justify-self: start; margin: 4px 0 14px -0.05em; font-size: clamp(5rem, 28vw, 11rem); }
  .aff-hero h1 { font-size: clamp(1.9rem, 8.4vw, 3rem); }
  .aff-hero .lead { margin-block: 12px 18px; font-size: 1.02rem; line-height: 1.5; }
}
@media (max-width: 767px) {
  .aff-form, .aff-pick, .aff-ways { grid-template-columns: 1fr; }
  .aff-form .btn, .aff-pick .btn, .aff-link .btn { width: 100%; }
  .aff-ways > div + div { margin-top: 28px; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
}

/* Emplacement média 16:9 : vidéo, miniature, ou attente */
.media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #131110;
}
.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-empty { padding: 8px; color: #8f887e; font-size: 0.9rem; text-align: center; }

/* Titres de page */
h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  text-wrap: balance;
}
.lead { max-width: 44ch; margin-block: 24px 32px; color: var(--muted); font-size: 1.15rem; }
/* Les repères en chasse fixe : petits, en bas de casse, jamais criés. */
.eyebrow { margin-bottom: 18px; color: var(--muted); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.01em; }
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }

/* Héro de l'accueil : l'écran. Les extraits passent l'un après l'autre, plein cadre ; l'en-tête se pose dessus.
   Sur ordinateur, le titre s'écrit sur l'image, en bas à gauche, et la barre de lecture tient le coin opposé.
   Sur téléphone, l'écran prend le haut, le titre et le bouton viennent juste dessous : tout tient sans défiler. */
.hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(100vh, 960px); min-height: min(100svh, 960px); margin-top: calc(-1 * var(--nav-h)); padding-block: calc(var(--nav-h) + 48px) clamp(28px, 3.4vw, 44px); overflow: hidden; }
.stage { position: absolute; inset: 0; background: #0f0d0c; }
.stage-slide { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; transition: opacity 0.9s var(--ease); }
.stage-slide.is-on { z-index: 1; opacity: 1; pointer-events: auto; }
.stage-video, .stage-back { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sur grand écran, l'image est décalée vers la droite : son sujet, au centre du cadre, se tient à côté du titre et
   non dessous. Le voile de gauche couvre le bord laissé libre. */
.stage-slide:not(.is-vertical) .stage-video { left: 15%; }
/* Une vidéo verticale ne remplit pas un écran large : elle se tient debout à droite, sur sa propre image, floue. */
.stage-back { filter: blur(44px) brightness(0.5) saturate(1.15); transform: scale(1.2); }
.stage-slide.is-vertical .stage-video { inset: calc(var(--nav-h) + 20px) 11% auto auto; width: auto; height: calc(100% - var(--nav-h) - 132px); aspect-ratio: 9 / 16; border-radius: 14px; box-shadow: 0 40px 120px -30px rgb(0 0 0 / 0.8); }
/* Trois voiles : sous le texte à gauche, vers la suite de la page en bas, sous l'en-tête en haut. */
.stage::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--bg) 0%, rgb(11 10 9 / 0.82) 15%, rgb(11 10 9 / 0.18) 48%, rgb(11 10 9 / 0) 66%), linear-gradient(to right, var(--bg) 0%, var(--bg) 15%, rgb(11 10 9 / 0.9) 30%, rgb(11 10 9 / 0.6) 46%, rgb(11 10 9 / 0.2) 58%, rgb(11 10 9 / 0) 70%), linear-gradient(to bottom, rgb(11 10 9 / 0.62), rgb(11 10 9 / 0) 20%); }
/* La barre de lecture : le numéro et le nom de la vidéo qui passe, son format, et un repère par vidéo. */
.stage-now { position: absolute; z-index: 3; right: 0; bottom: clamp(28px, 3.4vw, 44px); left: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.stage-bar { width: min(380px, 34vw); }
.stage-label { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 0.8rem; line-height: 1.3; }
.stage-label b { color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
.stage-kind { display: none; }
.stage-label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ce qu'on fait de la vidéo qui passe : sans cette ligne, rien ne dit qu'on peut la toucher. Toute l'image y mène. */
.stage-go { color: var(--accent); font-family: var(--sans); font-size: 0.86rem; font-style: normal; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.stage-go::after { content: "→"; display: inline-block; margin-left: 7px; transition: transform 0.35s var(--ease); }
.stage:hover .stage-go::after { transform: translateX(4px); }
.stage-ticks { display: flex; gap: 4px; margin-top: 4px; pointer-events: auto; }
.stage-tick { flex: 1; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.stage-tick i { display: block; height: 2px; overflow: hidden; border-radius: 2px; background: rgb(244 241 234 / 0.24); transition: background-color 0.3s, height 0.3s var(--ease); }
.stage-tick i::after { content: ""; display: block; height: 100%; background: var(--text); transform: scaleX(var(--k, 0)); transform-origin: left; }
.stage-tick.is-done i::after { transform: none; }
.stage-tick:hover i { height: 4px; background: rgb(244 241 234 / 0.4); }
.stage-tick:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; border-radius: 4px; }
.hero-copy { position: relative; z-index: 3; pointer-events: none; }
/* Sur ordinateur, le titre et la phrase s'écrivent sur l'écran : leurs blocs prennent toute la largeur et
   arrêtaient le clic sur la vidéo qui passe derrière. Seul le bouton reçoit le clic ; le reste le laisse passer. */
.hero-copy > .btn { pointer-events: auto; }
/* Les deux portes (Arthur, 21 octobre 2026) : le bouton « Choisir mon prompt », et à côté « Comment ça marche ? »
   (/comment-ca-marche), en lien, pour qui n'a jamais utilisé Claude. L'espace entre eux laisse passer le clic. */
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero-ctas a { pointer-events: auto; }
.hero-how { color: var(--text); font-size: 1rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 5px; transition: text-decoration-color 0.25s; }
.hero-how:hover { text-decoration-color: currentColor; }
/* La question au-dessus des deux portes : discrète, elle donne leur sens aux deux réponses. */
.hero-ask { flex-basis: 100%; margin: 0; color: color-mix(in srgb, var(--text) 78%, transparent); font-size: 0.98rem; font-weight: 500; }
/* La fin du titre, en orange : ce qu'on obtient. */
.hero h1 .h1-accent { color: var(--accent); }
/* Le titre tient en trois lignes, chacune derrière son cache : elles montent l'une après l'autre. */
.hero h1 { font-size: clamp(2.6rem, 5.3vw, 5rem); font-weight: 600; letter-spacing: -0.055em; line-height: 0.96; text-wrap: initial; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.09em; }
.hero h1 .line > span { display: block; }
.hero .lead { max-width: 42ch; margin-block: clamp(18px, 2vw, 26px) clamp(22px, 2.4vw, 32px); color: color-mix(in srgb, var(--text) 78%, transparent); font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.5; }
.hero .btn { min-height: 54px; padding-inline: 28px; font-size: 1.05rem; }

/* Preuve, sous le bouton du héro : trois faits. Sur ordinateur, une ligne, au pied de l'écran ; sur téléphone,
   trois rangées séparées d'un filet, le nombre devant. Le point orange signale le compteur vivant. */
.proof { display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 2vw, 28px); max-width: calc(100% - min(380px, 34vw) - 32px); margin-top: clamp(28px, 3.2vw, 44px); color: var(--muted); font-size: 0.92rem; }
.proof p { margin: 0; }
.proof b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.proof span { font: inherit; }
.proof-live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
/* Les vues, en grand : une ligne à elle seule entre l'écran du haut et « Choisis ta vidéo ». Le chiffre a le poids du
   titre de la page ; ce qu'il compte est écrit à côté, en petit (dessous sur un téléphone). */
.views { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px clamp(14px, 1.6vw, 24px); margin-block: clamp(56px, 8vw, 120px) 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.views b { color: var(--text); font-size: clamp(3.4rem, 10.5vw, 8.5rem); font-weight: 600; letter-spacing: -0.055em; line-height: 0.95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.views span { font: inherit; }
.views b span { letter-spacing: inherit; }
.views + .section { padding-top: clamp(56px, 7vw, 104px); }
/* Le prompt « Vidéo sur mesure », mis en avant sous le mur : une seule carte, le texte à gauche, l'extrait à droite
   (l'un sous l'autre sur un téléphone). Toute la carte est le lien. */
/* La vidéo d'un acheteur et son message vocal : la vidéo en grand, le vocal à côté, tel qu'il est arrivé. */
#acheteur { padding-top: clamp(56px, 7vw, 104px); }
.buyer { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3.5vw, 56px); margin-top: clamp(28px, 4vw, 48px); }
.buyer figure { margin: 0; }
.buyer-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 14px; background: #131110; }
.buyer-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.buyer-sound { position: absolute; right: 12px; bottom: 12px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 99px; background: rgb(13 13 15 / 0.72); color: var(--text); font: inherit; font-size: 0.86rem; font-weight: 500; cursor: pointer; backdrop-filter: blur(6px); }
.buyer-sound[aria-pressed="true"] { background: var(--accent); color: #111; }
.buyer-voice { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.buyer-voice figcaption { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; }
.buyer-play { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: #111; cursor: pointer; transition: transform 0.3s var(--ease); }
.buyer-play:hover { transform: translateY(-2px); }
.buyer-play video { display: block; width: 100%; height: auto; aspect-ratio: 1050 / 242; pointer-events: none; }
.buyer-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.buyer-link::after { content: " →"; transition: margin 0.3s var(--ease); }
.buyer-link:hover::after { margin-left: 4px; }
@media (max-width: 760px) {
  .buyer { grid-template-columns: 1fr; }
}
#sur-mesure { padding-top: clamp(56px, 7vw, 104px); }
.custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color 0.3s; }
.custom:hover, .custom:focus-visible { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.custom-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.custom-eyebrow { color: var(--accent); font-family: var(--mono); font-size: 0.8rem; }
.custom-text strong { font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.custom-sub { max-width: 44ch; color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.5; }
.custom .btn { margin-top: 10px; }
.custom:hover .btn-arrow::after { transform: translateX(4px); }
.custom-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 12px; background: #131110; }
.custom-media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.custom:hover .custom-media video { transform: scale(1.03); }
@media (max-width: 767px) {
  .custom { grid-template-columns: 1fr; }
  .custom .btn { width: 100%; }
}

/* Un projet ? : sous la carte sur mesure, pour qui veut qu'on fasse sa vidéo ou apprendre à la faire. Pas une carte de
   plus : un filet, le titre à gauche, à droite deux lignes qui mènent à la page projet (/projet) et un bouton discret,
   pour ne pas faire concurrence au prompt juste au-dessus. */
#projet { padding-top: clamp(56px, 7vw, 104px); }
.ask { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 24px clamp(32px, 6vw, 96px); padding-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--line); }
.ask-eyebrow { color: var(--accent); font-family: var(--mono); font-size: 0.8rem; }
.ask-head h2 { max-width: 15ch; margin-top: 14px; font-size: clamp(1.9rem, 3.8vw, 3.2rem); letter-spacing: -0.045em; line-height: 1.02; }
.ask-sub { max-width: 44ch; color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.5; }
.ask-ways { margin: 22px 0 24px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ask-ways a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.ask-ways a::after { content: "→"; grid-row: 1 / span 2; grid-column: 2; color: var(--muted); transition: transform 0.35s var(--ease), color 0.25s; }
.ask-ways strong { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; transition: color 0.25s; }
.ask-ways span { color: var(--muted); font-size: 0.95rem; }
.ask-ways a:hover::after, .ask-ways a:focus-visible::after { color: var(--accent); transform: translateX(4px); }
.ask-ways a:hover strong, .ask-ways a:focus-visible strong { color: var(--accent); }
.ask .btn:hover.btn-arrow::after { transform: translateX(4px); }
@media (max-width: 767px) {
  .ask { grid-template-columns: 1fr; }
  .ask .btn { width: 100%; }
}

/* Sections : un grand titre à gauche, sa phrase à droite, posée sur la même ligne de pied. */
.section { padding-block: clamp(80px, 11vw, 168px) 0; scroll-margin-top: 48px; }
h2 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; text-wrap: balance; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.section-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 16px clamp(32px, 6vw, 96px); }
.section-sub { max-width: 44ch; color: var(--muted); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.5; }
.price { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.price s { margin-left: 6px; color: var(--muted); font-size: 0.9rem; font-weight: 400; }

/* Le programme : une carte par vidéo, numérotée, son extrait en boucle, aucun prix.
   Téléphone : deux par rangée, les deux verticales côte à côte.
   Grand écran : quatre colonnes, les verticales sur deux rangées. */
.wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 12px; margin-top: clamp(32px, 4.4vw, 64px); }
.tile { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.tile-media { position: relative; flex: 1; display: block; min-height: 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: #131110; transition: transform 0.3s var(--ease); }
.is-vertical .tile-media { aspect-ratio: 9 / 16; }
.tile-media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.tile:hover video { transform: scale(1.035); }
.tile:active .tile-media { transform: scale(0.985); }
.tile-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; }
.tile-n { color: var(--accent); font-family: var(--mono); font-size: 0.8rem; font-style: normal; font-variant-numeric: tabular-nums; }
.tile-text strong { display: block; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.tile-text > span { grid-column: 2; display: block; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
/* Ce qu'on fait d'une vidéo, écrit sous chacune : sans cette ligne, des extraits qui tournent tout seuls se regardent
   et rien ne dit qu'on peut les ouvrir (elle remplace la pastille « Voir » du survol, qui disait le contraire). La
   flèche avance au survol ; quand on arrive par « Choisir ma vidéo », les lignes s'animent l'une après l'autre
   (app.js pose `is-called` sur le mur). */
.tile-go { grid-column: 2; justify-self: start; display: inline-block; margin-top: 8px; color: var(--accent); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.tile-go::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform 0.35s var(--ease); }
.tile:hover .tile-go::after, .tile:focus-visible .tile-go::after { transform: translateX(4px); }
.wall.is-called .tile-go { animation: tile-call 0.9s var(--ease) both; animation-delay: calc(var(--k, 0) * 70ms + 500ms); }
@keyframes tile-call { 0% { transform: none; filter: none; } 40% { transform: translateX(8px); filter: brightness(1.35); } 100% { transform: none; filter: none; } }
/* Sous 1024 px, les vidéos vont deux par deux. Si leur nombre est impair, la dernière prend toute la largeur.
   Le court-métrage prend la sienne au milieu du mur ; « Vidéo sur mesure », la dernière, garde donc toute la ligne. */
@media (max-width: 1023px) {
  .tile:last-child:nth-child(odd), .tile-court-metrage, .tile-demo-3d { grid-column: 1 / -1; }
  /* Deux vidéos voisines gardent la même hauteur, et leurs titres partent de la même ligne, quelle que soit la
     longueur du texte de l'une ou de l'autre. */
  .tile-media { flex: none; }
}
@media (max-width: 767px) {
  /* Sur téléphone, le mur est fait d'affiches : chaque vidéo remplit sa carte (plus haute que large, deux par
     rangée), son numéro et son nom s'écrivent sur l'image, au pied. La phrase qui la décrit attend dans la fenêtre
     qui s'ouvre au toucher : ici, l'image d'abord. Les deux cartes qui prennent toute la largeur gardent le format
     d'un écran. */
  .wall { gap: 10px; }
  .tile { position: relative; gap: 0; }
  .tile-media, .is-vertical .tile-media { aspect-ratio: 4 / 5; border-radius: 12px; }
  .tile:last-child:nth-child(odd) .tile-media, .tile-court-metrage .tile-media, .tile-demo-3d .tile-media { aspect-ratio: 16 / 9; }
  .tile-media::before { content: ""; position: absolute; z-index: 1; inset: 45% 0 0; background: linear-gradient(rgb(11 10 9 / 0), rgb(11 10 9 / 0.88)); pointer-events: none; }
  /* Le numéro se pose dans le coin du haut, sur une pastille sombre : il reste lisible quelle que soit l'image. */
  .tile-text { display: block; }
  .tile-n { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 3px 8px; border-radius: 99px; background: rgb(11 10 9 / 0.6); color: var(--text); font-size: 0.68rem; line-height: 1.4; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  /* Sous l'affiche, la ligne « Créer cette vidéo » (`--go` : la place qu'elle prend). Le nom reste au pied de
     l'image : il se pose donc au-dessus de cette ligne, pas au pied de la carte. */
  .tile { --go: calc(9px + 0.9rem * 1.25); }
  .tile-text strong { position: absolute; z-index: 2; right: 12px; bottom: calc(11px + var(--go)); left: 12px; font-size: 1rem; line-height: 1.15; text-wrap: balance; }
  .tile-text > span { display: none; }
  .tile-go { display: block; margin-top: 9px; font-size: 0.9rem; line-height: 1.25; }
  .wall { row-gap: 18px; }
}

/* Ce qu'on reçoit (fenêtre d'une vidéo, page d'une vidéo) : des rangées séparées d'un filet, pas des boîtes. */
.gift { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.gift li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.gift strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 600; }
.gift span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.gift em { padding: 2px 10px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.78rem; font-style: normal; font-weight: 600; white-space: nowrap; }

/* Trois gestes : trois lignes, un grand chiffre fin devant chacune, un trait qui se trace à l'arrivée */
.how { counter-reset: how; margin: clamp(32px, 4.4vw, 64px) 0 0; padding: 0; list-style: none; }
.how li { position: relative; counter-increment: how; display: grid; grid-template-columns: clamp(72px, 12vw, 176px) minmax(0, 1fr) minmax(0, 1.1fr); align-items: baseline; gap: 6px 24px; padding-block: clamp(24px, 3vw, 40px); }
.how li::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); transform-origin: left; }
.how li::before { content: "0" counter(how); color: var(--accent); font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 300; letter-spacing: -0.05em; line-height: 0.8; font-variant-numeric: tabular-nums; }
.how strong { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; }
.how p { color: var(--muted); }
/* Sous les trois gestes : « Comment ça marche » (/comment-ca-marche). */
.how-more { margin-top: clamp(28px, 3.4vw, 44px); }

/* Fin de page : une dernière invitation, en très grand */
.closing { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px 40px; padding-block: clamp(96px, 13vw, 200px) clamp(56px, 8vw, 120px); }
.closing h2 { max-width: 11ch; font-size: clamp(2.6rem, 8.4vw, 7rem); letter-spacing: -0.06em; line-height: 0.92; }
.closing .btn { min-height: 54px; padding-inline: 28px; font-size: 1.05rem; }

/* Page de sélection (/lots) : combien de prompts, puis lesquels. Les tailles sont deux grandes cases ; les vidéos,
   des images sans boîte, cerclées d'orange une fois choisies ; le prix et le bouton restent en bas de l'écran. */
.lots-page { padding-block: clamp(24px, 5vw, 64px) 0; }
.lots-page .lead { max-width: 52ch; margin-block: 20px 8px; }

/* Autant de colonnes que de tailles proposées (deux ou trois, selon le groupe du test) */
.lot-sizes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; margin-top: 32px; }
.lot-size {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 20px 24px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: box-shadow 0.25s, background-color 0.25s;
}
.lot-size:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.lot-size input, .pick input { position: absolute; opacity: 0; pointer-events: none; }
.lot-size-name { font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; }
.lot-size-note { color: var(--muted); font-size: 0.9rem; }
.lot-size:has(:disabled) { opacity: 0.45; cursor: default; }
.pick-soon { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.lot-size:has(:checked) { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); }

.lot-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 14px; margin-top: 28px; }
.pick { position: relative; display: block; cursor: pointer; transition: opacity 0.2s; }
.pick .media { border-radius: 10px; transition: box-shadow 0.25s, transform 0.4s var(--ease); }
.pick:hover:not(:has(:disabled)) .media { transform: scale(1.015); }
.pick-name { display: block; padding: 12px 0 2px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.pick-gift { display: block; color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.pick .media-empty { font-size: 0.75rem; }
.pick:has(:checked) .media { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
/* Coche de la vidéo choisie, dans le coin de son image */
.pick:has(:checked)::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 700;
}
.pick:has(:disabled:not(:checked)) { opacity: 0.4; cursor: default; }

/* Le prix et le bouton restent collés en bas de l'écran pendant qu'on choisit */
.lot-summary {
  position: sticky;
  z-index: 2;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 12px -6px 0;
  padding: 36px 6px 18px;
  background: linear-gradient(transparent, var(--bg) 34%);
}
.lot-summary p { margin-right: auto; color: var(--muted); }
.lot-summary .btn { min-height: 54px; padding-inline: 28px; font-size: 1.05rem; }
@media (max-width: 1023px) { .lot-picks { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } }

/* Page de remerciement : une grande confirmation. La coche se pose, le titre suit. (La même classe sert aussi au
   message « cette vidéo n'existe pas » des pages de vidéos : la coche n'y est pas, elle ne vaut que pour `main`.) */
.thanks { padding-block: clamp(48px, 12vh, 140px); }
.thanks h1 { font-size: clamp(2.5rem, 8vw, 5.6rem); letter-spacing: -0.055em; line-height: 0.96; }
.thanks .lead { max-width: 46ch; margin-block: clamp(20px, 2.4vw, 32px) clamp(28px, 3vw, 40px); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; }
main.thanks > h1::before { content: "✓"; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: clamp(22px, 3vw, 36px); border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 1.5rem; font-weight: 700; letter-spacing: 0; line-height: 1; }
.thanks > .btn { min-height: 54px; padding-inline: 28px; font-size: 1.05rem; }
/* ---------- La page « Merci » avec une offre : le remerciement se fait court, l'offre prend la place ---------- */
.thanks.has-next { padding-block: clamp(12px, 3vh, 40px) clamp(40px, 8vh, 96px); }
.thanks.has-next h1 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.45rem, 5.2vw, 2rem); letter-spacing: -0.03em; line-height: 1.1; }
.thanks.has-next h1::before { content: "✓"; display: grid; flex: none; place-items: center; width: 1.5em; height: 1.5em; margin-bottom: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 0.6em; font-weight: 700; }
.thanks.is-later h1::before { content: none; }
.thanks.has-next .lead { max-width: 60ch; margin-block: 10px 0; font-size: 1rem; line-height: 1.5; }
/* Sur grand écran, le remerciement tient la colonne de gauche et l'offre celle de droite, au lieu de laisser la
   moitié de l'écran vide. */
@media (min-width: 960px) {
  main.thanks.has-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: start; column-gap: clamp(40px, 6vw, 96px); padding-top: clamp(32px, 8vh, 96px); }
  main.thanks.has-next > h1 { grid-column: 1; grid-row: 1; display: block; font-size: clamp(2.4rem, 4.6vw, 4rem); letter-spacing: -0.055em; line-height: 0.96; }
  main.thanks.has-next > h1::before { width: 56px; height: 56px; margin-bottom: 28px; font-size: 1.5rem; }
  main.thanks.has-next > .lead { grid-column: 1; grid-row: 2; max-width: 40ch; margin-top: 24px; font-size: 1.15rem; }
  main.thanks.has-next > .next { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  main.thanks.has-next > .next-no { grid-column: 2; grid-row: 4; }
}
/* L'offre : une seule, dans un cadre. Son nom et son prix se lisent en quelques secondes. */
.next { max-width: 560px; margin-top: 24px; padding: 20px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.next[hidden] { display: none; }
.next-flag { display: inline-block; padding: 3px 11px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.78rem; font-weight: 600; line-height: 1.5; }
.next h2 { margin-top: 14px; font-size: clamp(1.45rem, 5.4vw, 2rem); letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; }
.next-media { position: relative; margin: 16px 0 0; }
.next-media img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; object-fit: cover; background: var(--line); }
.next-media figcaption { position: absolute; bottom: 10px; left: 10px; padding: 3px 10px; border-radius: 99px; background: rgb(11 10 9 / 0.78); color: #f4f1ea; font-size: 0.78rem; font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.next-strip { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.next-strip li { min-width: 0; }
.next-strip img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; object-fit: cover; background: var(--line); }
.next-strip span { display: block; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 0.76rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.next-points { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.next-points li { position: relative; padding-left: 26px; line-height: 1.4; }
.next-points li::before { content: "✓"; position: absolute; top: 0; left: 0; color: var(--accent); font-weight: 700; }
.next-buy { margin-top: 18px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.next-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.next-price strong { font-size: clamp(1.9rem, 7.5vw, 2.4rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.next-price s { color: var(--muted); font-size: 1.05rem; }
.next-price em { padding: 2px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-size: 0.85rem; font-style: normal; font-weight: 600; white-space: nowrap; }
.next .btn { width: 100%; margin-top: 14px; }
.next .flow-wallet { text-align: center; }
.next-status { margin-top: 10px; color: var(--muted); font-size: 0.92rem; text-align: center; }
.next-status:empty { display: none; }
/* Le refus : toujours visible, sans faire concurrence au bouton. */
.next-no { display: block; max-width: 560px; margin-top: 16px; padding: 10px 0; color: var(--muted); font-size: 0.95rem; text-align: center; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.next-no:hover { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .next { animation: next-in 0.6s var(--ease) both; }
  .next-strip li, .next-points li { animation: next-in 0.5s var(--ease) both; animation-delay: calc(0.15s + var(--i, 0) * 0.05s); }
  .next-points li:nth-child(2) { --i: 1; }
  .next-points li:nth-child(3) { --i: 2; }
  @keyframes next-in { from { opacity: 0; transform: translateY(14px); } }
}

/* Pied de page : le logo et les liens, les moyens de paiement, la mention ; et tout en bas le nom de la maison,
   très grand, coupé par le bord de l'écran. */
.footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: 40px;
  padding-block: 36px 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9rem;
}
.footer::after { content: "Mavena"; flex-basis: 100%; margin: clamp(20px, 4vw, 56px) 0 -0.17em -0.04em; color: #151311; font-size: clamp(5.4rem, 24.5vw, 21rem); font-weight: 650; letter-spacing: -0.07em; line-height: 0.8; white-space: nowrap; pointer-events: none; user-select: none; }

/* Message "vente bientôt ouverte" */
.sheet {
  width: min(440px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
}
.sheet h2 { font-size: 1.5rem; }
.sheet p { margin-block: 12px 24px; color: var(--muted); }

/* L'offre de rattrapage (buy.js) : le prix proposé en grand, le prix quitté barré à côté, un seul bouton plein. */
.rescue .rescue-top { margin: 0 0 14px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.01em;  }
.rescue h2 { font-size: 1.15rem; font-weight: 500; line-height: 1.3; color: var(--muted); outline: none; }
.rescue h2 span { display: block; margin-bottom: 4px; }
.rescue h2 strong { color: var(--text); font-size: 3rem; font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.rescue h2 s { margin-left: 8px; font-size: 1.15rem; }
.rescue #rattrapage-text { margin-block: 14px 22px; }
.rescue .btn { width: 100%; min-height: 52px; }
.rescue .rescue-end { margin: 6px 0 0; text-align: center; }
/* Le guide par e-mail, proposé après « Non merci » : une question, un champ, un bouton, et ce qui suivra en petit. */
.rescue .rescue-ask { color: var(--text); font-size: 1.45rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.2; }
.rescue #rattrapage-dit { margin-block: 12px 18px; }
.rescue input[type="email"] { display: block; width: 100%; min-height: 52px; margin-bottom: 10px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: var(--text); font: inherit; font-size: 1rem; }
.rescue input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rescue .rescue-small { margin: 12px 0 0; color: var(--muted); font-size: 0.84rem; line-height: 1.45; }
.rescue [hidden], .rescue input[hidden] { display: none; }
.rescue-no { min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.92rem; cursor: pointer; }
.rescue-no:hover { color: var(--text); }

/* Toutes les fenêtres : elles arrivent en fondu, le fond se voile. Les navigateurs qui ne connaissent pas
   @starting-style les affichent d'un coup. */
.sheet { opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 0.3s var(--ease), transform 0.45s var(--ease), overlay 0.45s allow-discrete, display 0.45s allow-discrete; }
.sheet[open] { opacity: 1; transform: none; }
.sheet::backdrop { background: rgb(6 5 4 / 0); transition: background-color 0.35s, overlay 0.35s allow-discrete, display 0.35s allow-discrete; }
.sheet[open]::backdrop { background: rgb(6 5 4 / 0.74); }
@starting-style {
  .sheet[open] { opacity: 0; transform: translateY(14px) scale(0.985); }
  .sheet[open]::backdrop { background: rgb(6 5 4 / 0); }
}

/* Page d'offre (/pack/<id>/telecharger, offre.js) : une page entière. La vidéo du pack tourne d'un côté,
   les étapes se suivent de l'autre : les deux questions, puis le choix de l'offre. */
.flow-page { display: flex; flex-direction: column; min-height: 100dvh; }
.flow-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; }
.flow-steps { display: flex; gap: 6px; margin: 0; }
.flow-steps[hidden] { display: none; }
.flow-steps i { width: 44px; height: 4px; border-radius: 99px; background: var(--line); transition: background-color 0.5s; }
.flow-steps .is-on { background: var(--accent); }
.flow-close { grid-column: 3; justify-self: end; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 1.5rem; line-height: 1; text-decoration: none; transition: color 0.2s, box-shadow 0.2s; }
.flow-close:hover { box-shadow: inset 0 0 0 1px var(--muted); color: var(--text); }
.flow { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(32px, 6vw, 96px); padding-block: clamp(16px, 3vw, 40px) clamp(32px, 6vw, 72px); }
.flow-media { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: #131110; }
.flow-media.is-vertical { justify-self: center; height: min(74dvh, 680px); aspect-ratio: 9 / 16; }
.flow-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.flow-panel { max-width: 520px; }
.flow-count { margin-bottom: 14px; color: var(--muted); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.01em;  }
.flow-panel h1 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.05em; line-height: 1; }
.flow-panel[data-kind="offre"] h1 { font-size: clamp(1.6rem, 2.5vw, 2.15rem); letter-spacing: -0.04em; line-height: 1.12; }
.flow-lead { margin-block: 16px 28px; color: var(--muted); }
.flow-choices { display: grid; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
.flow-choices .btn { width: 100%; min-height: 68px; font-size: 1.12rem; }
.flow-block { margin-top: 20px; }
/* Le bouton de paiement reste en bas de l'écran, quelle que soit la hauteur des offres au-dessus. */
.flow-pay { position: sticky; z-index: 2; bottom: 0; padding-block: 14px 12px; background: linear-gradient(transparent, var(--bg) 26%); }
.flow-pay .btn { width: 100%; min-height: 56px; font-size: 1.05rem; }
.flow-note { margin-top: 10px; color: var(--muted); font-size: 0.9rem; text-align: center; }
/* Sous le bouton, sur les appareils Apple : le paiement en un geste est possible */
.flow-wallet { margin-top: 10px; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; text-align: center; }
.flow-wallet + .flow-note { margin-top: 2px; }
/* Le bouton Apple Pay ou Google Pay, sous le bouton d'achat (offre.js). Là où Apple Pay est attendu, sa place est
   tenue dès l'affichage par une pastille blanche à sa taille (`is-kept`) : le bouton s'y dessine sans rien déplacer.
   Ailleurs, il attend à sa taille réelle, invisible et hors du texte, et prend sa place d'un coup quand l'appareil a
   répondu. Aucun effet d'apparition. Quand l'offre change, il s'estompe le temps que le suivant soit prêt. */
.flow-express { display: grid; grid-template-rows: 0fr; }
.flow-express.is-on, .flow-express.is-kept { grid-template-rows: 1fr; }
.flow-express.is-kept .flow-express-slot { border-radius: 28px; background: #fff; }
.flow-express-fold { min-height: 0; overflow: hidden; }
.flow-express-slot { height: 55px; margin-top: 10px; transition: opacity 0.25s; }
.flow-express-btn { position: absolute; left: 0; right: 0; bottom: 0; height: 55px; visibility: hidden; pointer-events: none; }
.flow-express-btn.is-live { position: static; visibility: visible; pointer-events: auto; }
.flow-express.is-wait .flow-express-slot { opacity: 0.35; pointer-events: none; }
.flow-express:is(.is-on, .is-kept) + .flow-wallet { display: none; }
.flow-express:is(.is-on, .is-kept) + .flow-wallet + .flow-note { margin-top: 10px; }
.flow-terms { display: none; }
.flow-express.is-on ~ .flow-note .flow-terms { display: inline; }
.flow-express.is-kept ~ .flow-note .flow-terms { display: inline; }
/* La raison du prix du moment (products.js, promo) : une étiquette au-dessus des offres */
.flow-reason { display: inline-block; padding: 5px 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-size: 0.85rem; font-weight: 500; line-height: 1.35; }
.lots-page .flow-reason { margin-top: 16px; }
/* Sur téléphone : la sortie discrète « Je continue sur mon ordinateur », sous le bouton de paiement */
.flow-later { display: block; width: 100%; min-height: 40px; margin-top: 2px; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.9rem; text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 4px; cursor: pointer; }
/* Le petit formulaire qui s'ouvre dessous : l'adresse e-mail, et le bouton qui envoie le lien */
.flow-later-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.flow-later[hidden], .flow-later-form[hidden] { display: none; }
/* Sur téléphone, le lien « Je continue sur mon ordinateur » et son formulaire suivent la barre de paiement, dans le
   fil de la page : seuls le bouton et sa phrase restent collés en bas de l'écran. */
.flow-after { margin-top: 2px; }
.flow-after:empty { display: none; }
.flow-later-form input { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 1rem; }
.flow-later-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.flow-later-form .btn { min-height: 44px; padding-inline: 16px; font-size: 0.95rem; }
.flow-later-hint { grid-column: 1 / -1; color: var(--muted); font-size: 0.8rem; text-align: center; }
.flow-later-status { margin-top: 6px; }
.flow-later-status:empty { display: none; }
.flow-note a { color: inherit; text-underline-offset: 3px; }
.flow-proof { color: var(--muted); font-size: 0.95rem; text-align: center; }
.flow-proof:empty { display: none; }
.flow-proof span { display: block; margin-top: 2px; }
.flow-proof::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }

/* Page d'offre, fiche produit (téléphone, offre.js) : toute l'offre en une seule page. Tout en haut, l'écran : la
   vidéo bord à bord, et sur elle le nom de la vidéo, la mention « vidéo d'exemple » et la croix. Dessous, ce qu'on
   achète en une phrase, quelques chiffres, puis les trois offres et leurs prix, visibles sans défiler, juste
   au-dessus du bouton. Des filets plutôt que des boîtes. La barre du haut et la vidéo du parcours n'y sont pas.
   (L'ordre des éléments dans la page ne change pas : seule leur place à l'écran est donnée ici.) */
.flow-page:has(.flow-panel[data-layout="listing"]) .flow-bar { display: none; }
.flow:has(.flow-panel[data-layout="listing"]) { display: block; padding-top: 0; }
.flow:has(.flow-panel[data-layout="listing"]) .flow-media { display: none; }
/* La hauteur de l'écran : une part de la hauteur de l'appareil, bornée pour que les offres restent au-dessus du bouton. */
.flow-panel[data-layout="listing"] { --screen: clamp(190px, 40vh, 280px); --gutter: clamp(16px, 4vw, 40px); position: relative; margin-inline: auto; padding-top: calc(var(--screen) + 14px); }
@supports (height: 1svh) { .flow-panel[data-layout="listing"] { --screen: clamp(190px, 40svh, 280px); } }
.listing-preview { position: absolute; top: 0; right: calc(-1 * var(--gutter)); left: calc(-1 * var(--gutter)); height: var(--screen); overflow: hidden; background: #131110; }
.listing-preview video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Deux voiles sur l'image : sous le nom en bas, sous la mention et la croix en haut. */
.listing-preview::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--bg) 0%, rgb(11 10 9 / 0.7) 22%, rgb(11 10 9 / 0) 54%), linear-gradient(to bottom, rgb(11 10 9 / 0.42), rgb(11 10 9 / 0) 24%); }
.listing-tag { position: absolute; z-index: 1; top: 16px; left: var(--gutter); padding: 4px 10px; border-radius: 99px; background: rgb(11 10 9 / 0.55); color: var(--text); font-family: var(--mono); font-size: 0.69rem; letter-spacing: 0.01em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.listing-head { position: absolute; z-index: 1; top: 0; right: 0; left: 0; display: flex; align-items: flex-end; height: var(--screen); padding-bottom: 12px; pointer-events: none; }
.listing-icon { display: none; }
.listing-title { flex: 1; min-width: 0; }
.flow-panel[data-kind="offre"][data-layout="listing"] h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); letter-spacing: -0.05em; line-height: 1; }
.listing-title p { margin-top: 7px; color: color-mix(in srgb, var(--text) 72%, transparent); font-family: var(--mono); font-size: 0.72rem; }
.listing-head .flow-close { position: absolute; top: 10px; right: 0; background: rgb(11 10 9 / 0.55); box-shadow: none; color: var(--text); pointer-events: auto; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.listing-what { font-size: 0.98rem; line-height: 1.45; }
/* Quelques chiffres, sur une ligne : le mot, le nombre, ce qu'il compte */
.listing-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 14px 0 0; padding-block: 12px; border-block: 1px solid var(--line); text-align: center; }
.listing-facts div + div { border-left: 1px solid var(--line); }
.listing-facts dt { color: var(--muted); font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.01em; line-height: 1.4; }
.listing-facts dd { margin: 2px 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.3; }
.listing-facts dd b { display: block; color: var(--text); font-size: 1.22rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.24; font-variant-numeric: tabular-nums; }
/* Les trois offres, côte à côte : le nom, le prix, la remise. Celle qui est choisie s'allume. */
.listing-offers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 14px 0 0; padding: 0; border: 0; }
.listing-offers label { display: grid; align-content: center; justify-items: center; min-height: 68px; padding: 6px 4px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); text-align: center; cursor: pointer; transition: box-shadow 0.25s, background-color 0.25s; }
.listing-offers label:has(input:checked) { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.listing-offers label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.listing-offers span { font-size: 0.81rem; font-weight: 500; line-height: 1.3; }
.listing-offers strong { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.listing-offers small { color: var(--muted); font-size: 0.72rem; line-height: 1.3; }
.listing-offers small b { color: var(--accent); font-weight: 600; }
.listing-hint { min-height: 1.35em; margin-top: 8px; color: var(--muted); font-size: 0.81rem; line-height: 1.35; text-align: center; }
.listing-link { margin: -12px -4px; padding: 12px 4px; border: 0; background: none; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* La suite de la page : des parties courtes, chacune sous un grand titre */
.listing-block { margin-top: 48px; }
.listing-block h2 { margin-bottom: 14px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1.1; }
.listing-block > p { color: color-mix(in srgb, var(--text) 84%, transparent); font-size: 1rem; line-height: 1.5; }
/* Ce qui est compris : des rangées numérotées, séparées d'un filet */
.listing-included { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: compris; border-top: 1px solid var(--line); }
.listing-included li { display: grid; grid-template-columns: 2.3rem 1fr; gap: 2px 0; padding: 14px 0; border-bottom: 1px solid var(--line); counter-increment: compris; }
.listing-included li::before { content: "0" counter(compris); grid-row: span 2; color: var(--accent); font-family: var(--mono); font-size: 0.78rem; line-height: 1.75; font-variant-numeric: tabular-nums; }
.listing-included strong { font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.listing-included span { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
/* Les vidéos du site, à faire défiler du doigt ; elles vont jusqu'au bord droit de l'écran */
.listing-videos { display: flex; gap: 10px; margin-right: calc(-1 * clamp(16px, 4vw, 40px)); padding-right: clamp(16px, 4vw, 40px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.listing-videos::-webkit-scrollbar { display: none; }
.listing-videos > * { flex: none; width: 176px; overflow: hidden; color: var(--muted); font-size: 0.84rem; line-height: 1.35; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; scroll-snap-align: start; }
.listing-videos img { display: block; width: 176px; height: 99px; margin-bottom: 8px; border-radius: 10px; background: #131110; object-fit: cover; }
.listing-videos [aria-current] { color: var(--text); }
.listing-videos [aria-current] img { box-shadow: inset 0 0 0 2px var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
/* Le détail des offres : une ligne par offre, son prix dans une pastille, pleine quand l'offre est choisie */
.listing-rows { display: grid; border-bottom: 1px solid var(--line); }
.listing-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 12px; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.listing-row strong { grid-column: 1; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.listing-row span { grid-column: 1; color: var(--muted); font-size: 0.86rem; line-height: 1.4; }
.listing-row em { grid-column: 2; grid-row: 1 / span 3; min-width: 78px; padding: 7px 14px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--muted); font-size: 0.94rem; font-style: normal; font-weight: 600; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.listing-row[aria-pressed="true"] em { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.listing-row em.is-from { min-width: 0; padding-inline: 0; box-shadow: none; color: var(--muted); font-size: 0.84rem; font-weight: 400; }
.listing-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.listing-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 12px; }
.listing-info { margin: 0; border-bottom: 1px solid var(--line); }
.listing-info div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.92rem; line-height: 1.4; }
.listing-info dt { color: var(--muted); font-family: var(--mono); font-size: 0.78rem; line-height: 1.7; }
.listing-info dd { margin: 0; text-align: right; }
.flow-panel[data-layout="listing"] .flow-proof { margin-top: 32px; }
/* La barre du bas de la fiche : le bouton d'achat et, s'il existe, le bouton Apple Pay ou Google Pay à sa droite.
   À deux, le bouton d'achat dit la même chose en plus court. */
.listing-pay { margin-top: 20px; }
.listing-buttons { display: flex; }
.listing-buttons .btn { flex: 1; min-width: 0; min-height: 55px; }
.listing-buttons .btn { padding-inline: 12px; }
.listing-pay .flow-express { display: block; flex: none; width: 0; overflow: hidden; }
.listing-pay .flow-express:is(.is-on, .is-kept) { width: clamp(132px, 40%, 160px); margin-left: 8px; }
.listing-pay .flow-express-fold { overflow: visible; }
.listing-pay .flow-express-slot { margin-top: 0; }
.listing-pay:has(.flow-express:is(.is-on, .is-kept)) .flow-terms { display: inline; }
.listing-pay:has(.flow-express:is(.is-on, .is-kept)) .listing-wallet { display: none; }
.listing-go-short { display: none; }
.listing-pay:has(.flow-express:is(.is-on, .is-kept)) .listing-go-long { display: none; }
.listing-pay:has(.flow-express:is(.is-on, .is-kept)) .listing-go-short { display: inline; }
/* Sur un petit téléphone, l'écran se fait plus bas et les chiffres laissent leur place : les trois offres et leurs
   prix restent visibles sans défiler. (Ce que disent les chiffres est repris plus bas, dans « Compris dans le prix ».) */
@media (max-height: 620px) {
  .flow-panel[data-layout="listing"] { --screen: clamp(160px, 34vh, 200px); }
  .listing-facts { display: none; }
}

/* Page d'offre, version « valeur » (un groupe du test) : le titre dit ce qu'on va pouvoir faire, trois chiffres
   disent ce que contient le prompt, l'offre se choisit sur une ligne, puis viennent les chapitres et de quoi
   juger le prix. Peu de boîtes : des filets et de la hiérarchie. */
.flow-panel[data-layout="valeur"] h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -0.04em; line-height: 1.05; }
.value-lead { margin-top: 12px; max-width: 46ch; color: var(--muted); font-size: 1.02rem; line-height: 1.45; }
.value-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 0; border-block: 1px solid var(--line); }
.value-facts div { padding: 14px 0 13px; }
.value-facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.value-facts dt { font-size: clamp(1.55rem, 2.4vw, 1.95rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.value-facts dd { margin: 7px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.25; }
.tiers { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 8px; }
/* L'offre avec prompt personnalisé : une case sur toute la largeur, sous les autres, son prix à droite. */
.tier.tier-wide { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 0; padding-block: 13px; }
/* La ligne qui ouvre les offres sur mesure : un bouton discret, avec un « + » et le prix de départ. */
.tier-more, .offer-more { width: 100%; background: none; color: inherit; font: inherit; text-align: left; }
.tier-more .tier-name { color: var(--text); }
.tier-more .tier-name::before { content: "+"; margin-right: 8px; color: var(--accent); font-weight: 500; }
/* Sur une carte, le « + » prend la place du rond à cocher des autres offres : les textes restent alignés. */
.offer-plus { width: 18px; color: var(--accent); font-size: 1.3rem; font-weight: 500; line-height: 1; text-align: center; }
.tier-from, .offer-more-from { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.tier-more:hover, .offer-more:hover { border-color: var(--muted); }
.tier-more:focus-visible, .offer-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tier { position: relative; display: grid; align-content: start; gap: 3px; min-height: 68px; padding: 12px 12px 11px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.tier input { position: absolute; opacity: 0; pointer-events: none; }
.tier:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tier:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tier-name { color: var(--muted); font-size: 0.85rem; line-height: 1.2; }
.tier:has(input:checked) .tier-name { color: var(--text); }
.tier-price { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; }
.tier-save { position: absolute; top: -9px; right: 10px; padding: 1px 8px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.72rem; font-weight: 600; line-height: 1.5; }
.tier-detail { margin-top: 10px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.tier-detail p + p, .tier-picks + p { margin-top: 8px; }
.tier-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.value-block { margin-top: 30px; }
.value-block h2 { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.01em;  }
.value-block p { margin-top: 10px; color: var(--muted); line-height: 1.5; }
.value-block p strong { color: var(--text); font-weight: 600; white-space: nowrap; }
.chapters { margin: 10px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.chapters li { padding: 11px 0; border-bottom: 1px solid var(--line); line-height: 1.3; }
.chapters li:last-child { color: var(--muted); }
/* Sur grand écran, la page « valeur » est plus haute que l'écran : la vidéo reste en vue pendant qu'on la lit. */
@media (min-width: 768px) {
  .flow:has(.flow-panel[data-kind="offre"]) { align-items: start; }
  .flow:has(.flow-panel[data-kind="offre"]) .flow-media { position: sticky; top: clamp(24px, 12dvh, 120px); }
  .flow-media { box-shadow: 0 50px 120px -50px color-mix(in srgb, var(--accent) 34%, transparent); }
  .flow:has(.flow-panel[data-layout="valeur"]) { align-items: start; }
  .flow:has(.flow-panel[data-layout="valeur"]) .flow-media { position: sticky; top: clamp(24px, 12dvh, 120px); }
}

/* Choix proposés sur la page d'offre : réponses aux questions, puis « ce pack » ou « tous les packs » */
.tour-close { position: absolute; z-index: 1; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.tour-close:hover { color: var(--text); }
.btn-choice { justify-content: space-between; gap: 16px; min-height: 54px; padding: 10px 24px; border-radius: 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-weight: 500; letter-spacing: -0.015em; white-space: normal; text-align: left; transition: transform 0.25s var(--ease), box-shadow 0.25s, background-color 0.25s; }
.btn-choice::after { content: "→"; color: var(--muted); transition: transform 0.35s var(--ease), color 0.25s; }
.btn-choice:hover { filter: none; background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.btn-choice:hover::after { color: var(--accent); transform: translateX(4px); }
.offers { display: grid; gap: 10px; }
.offer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
/* input:checked, et pas :checked tout court : les options choisies des listes du lot de trois sont aussi « checked » */
.offer:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
.offer:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Une offre ramenée à l'écran (choisie, ou atteinte au clavier) s'arrête au-dessus de la barre de paiement, dont la
   hauteur est donnée par la page (offre.js). */
.offer { scroll-margin-block: 12px calc(var(--pay-h, 150px) + 12px); }
.offer input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.offer-text strong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; line-height: 1.3; }
.offer-text span { display: block; color: var(--muted); font-size: 0.9rem; }
.offer-text i { padding: 2px 9px; border-radius: 99px; background: var(--text); color: var(--bg); font-size: 0.72rem; font-style: normal; font-weight: 600; white-space: nowrap; }
/* Le prix d'une offre (groupe B du test) : le montant, la somme des packs pris un par un, le prix par pack */
.offer-price { text-align: right; white-space: nowrap; }
.offer-price strong { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.offer-price s { margin-right: 4px; color: var(--muted); font-size: 0.85rem; }
.offer-price small { display: block; color: var(--muted); font-size: 0.8rem; }
.offer-price small b, .price b { color: var(--accent); font-weight: 600; }
.price b { margin-left: 6px; font-size: 0.85rem; }
/* Sous l'offre : les kits offerts, et pour le lot de trois le choix des deux autres packs */
.offer-bonus { grid-column: 2 / -1; margin-top: 6px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.offer-bonus em { display: inline-block; margin-right: 6px; padding: 0 10px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.75rem; font-style: normal; font-weight: 600; }
.offer-picks { grid-column: 2 / -1; display: none; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.offer:has(input:checked) .offer-picks { display: grid; }
.offer-picks-label { grid-column: 1 / -1; color: var(--muted); font-size: 0.85rem; }
.offer-pick { min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.9rem; }

/* Fenêtre d'une vidéo (app.js) : son extrait, ce qu'on reçoit, le bouton */
.fiche { width: min(580px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; }
.fiche .tour-close { background: rgb(11 10 9 / 0.62); color: var(--text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fiche-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg); }
.fiche-media.is-vertical { aspect-ratio: 1; }
.fiche-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fiche-media.is-vertical video { object-fit: contain; }
/* L'extrait d'une vidéo verticale remplit le cadre, sans bandes sur les côtés ; la vidéo entière, elle, se voit en entier. */
.fiche-media.is-vertical video[loop] { object-fit: cover; }
.fiche h2 { outline: none; }
.btn-over { position: absolute; left: 50%; bottom: 14px; min-height: 40px; padding: 0 18px; background: rgb(11 10 9 / 0.78); color: var(--text); font-size: 0.9rem; font-weight: 500; translate: -50% 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-over:hover { box-shadow: none; }
.fiche-body { display: grid; gap: 18px; padding: 26px 28px 28px; }
.fiche h2 { font-size: clamp(1.7rem, 5vw, 2.1rem); letter-spacing: -0.04em; }
.fiche .fiche-pitch { margin: -8px 0 0; }
.fiche .btn { min-height: 54px; font-size: 1.05rem; }
.fiche .more { justify-self: center; margin: 0; }

/* Navigateur intégré de TikTok : la page « ouvre ce lien dans ton navigateur » remplace la boutique (entree.js).
   Ses textes et leur ordre sont ceux qu'Arthur a remis le 11 octobre 2026 ; seule la présentation est d'ici : plus
   de boîte, tout à gauche, le geste à faire mis en avant entre deux filets, le bouton au pied de l'écran. */
.porte body > :not(.gate) { display: none; }
.gate { display: grid; min-height: 100vh; min-height: 100svh; padding: 22px clamp(18px, 5vw, 40px) calc(22px + env(safe-area-inset-bottom, 0px)); }
.gate-card { display: flex; flex-direction: column; width: min(460px, 100%); margin-inline: auto; }
.gate-card h1 { margin-top: clamp(40px, 9vh, 96px); font-size: clamp(2.1rem, 10vw, 3rem); letter-spacing: -0.055em; line-height: 0.98; }
.gate-lead { margin-top: 16px; color: var(--muted); font-size: 1.05rem; line-height: 1.5; }
.gate-how { margin-top: 28px; padding-block: 20px; border-block: 1px solid var(--line); font-size: 1.18rem; letter-spacing: -0.015em; line-height: 1.45; }
.gate-how b { color: var(--accent); font-weight: 600; white-space: nowrap; }
.gate-or { margin-top: auto; padding-top: 32px; color: var(--muted); font-size: 0.92rem; }
.gate-link { margin-top: 6px; font-family: var(--mono); font-size: 0.95rem; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.gate-card .btn { width: 100%; min-height: 56px; margin-top: 16px; font-size: 1.05rem; }
.gate-status { min-height: 1.6em; margin-top: 12px; color: var(--muted); font-size: 0.92rem; }
.gate-status:empty { min-height: 0; margin-top: 0; }
@media (max-height: 700px) {
  .gate { padding-block: 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .gate-card h1 { margin-top: clamp(18px, 5vh, 40px); font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .gate-lead { margin-top: 12px; font-size: 1rem; }
  .gate-how { margin-top: 18px; padding-block: 15px; font-size: 1.08rem; }
  .gate-or { padding-top: 18px; }
  .gate-card .btn { min-height: 52px; margin-top: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .gate-card > * { animation: rise 0.8s var(--ease) both; }
  .gate-card > :nth-child(2) { animation-delay: 0.06s; }
  .gate-card > :nth-child(3) { animation-delay: 0.12s; }
  .gate-card > :nth-child(4) { animation-delay: 0.18s; }
  .gate-card > :nth-child(n + 5) { animation-delay: 0.26s; }
}

/* Liens de texte */
.footer a, .legal a, .sheet a { color: inherit; text-underline-offset: 3px; }
.footer a { text-decoration: none; transition: color 0.25s; }
.footer a:hover { color: var(--text); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-right: auto; }
.footer > p { flex-basis: 100%; }
/* Les moyens de paiement acceptés : quatre marques d'une seule couleur, puis « Paiement sécurisé par Stripe » */
.footer .footer-pay { flex-basis: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.footer-pay-marks { display: flex; align-items: center; gap: 16px; }
.footer-pay svg { width: 34px; height: 34px; fill: currentColor; }

/* Pages légales : des pages de lecture. Sur grand écran, le titre tient la colonne de gauche et reste en vue ; le
   texte se lit à droite, sur une largeur de livre. Aucun mot du texte n'est touché ici. */
.legal { max-width: 74ch; padding-block: clamp(24px, 5vw, 72px); }
.legal h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); letter-spacing: -0.05em; line-height: 0.98; }
.legal h2 { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); font-size: clamp(1.3rem, 2vw, 1.55rem); letter-spacing: -0.03em; line-height: 1.2; }
.legal h3 { margin-top: 24px; font-size: 1.05rem; }
.legal p, .legal ul, .legal ol { margin-block: 12px 0; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li + li { margin-top: 6px; }
.legal li::marker { color: var(--muted); }
.legal-date { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; }
.legal h1 + .legal-date { margin-top: 18px; }
@media (min-width: 1024px) {
  .legal:not(.guide) { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 68ch); column-gap: clamp(40px, 6vw, 96px); max-width: none; }
  .legal:not(.guide) > * { grid-column: 2; }
  .legal:not(.guide) > h1 { position: sticky; top: 40px; grid-column: 1; grid-row: 1 / span 400; align-self: start; max-width: 9ch; }
  .legal:not(.guide) > h1 + .legal-date { grid-row: 1; margin-top: 10px; }
  .legal:not(.guide) > .legal-date + h2 { margin-top: 28px; }
}

/* Le guide pas à pas (/guide, page fabriquée par scripts/guide.mjs) : un mode d'emploi. En tête, le titre en très
   grand et le chapeau. Dessous, sur grand écran : le sommaire à gauche, qui reste en vue, et les parties à droite ;
   chaque étape porte son numéro au-dessus de son titre, et ses gestes sont comptés un par un. */
.guide { max-width: none; }
.guide-head { padding-bottom: clamp(32px, 5vw, 64px); }
.guide .eyebrow { margin-bottom: 16px; }
.guide h1 { max-width: 15ch; font-size: clamp(2.4rem, 6.4vw, 5rem); letter-spacing: -0.055em; line-height: 0.96; }
.guide .guide-lead { max-width: 52ch; margin-top: clamp(20px, 2.4vw, 32px); color: var(--muted); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; }
.guide-cols { display: grid; grid-template-columns: minmax(200px, 290px) minmax(0, 68ch); align-items: start; gap: clamp(32px, 6vw, 96px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.guide-toc { position: sticky; top: 28px; }
.guide .guide-toc ol { margin: 0; padding: 0; list-style: none; }
.guide .guide-toc li + li { margin-top: 0; }
.guide .guide-toc a { display: grid; grid-template-columns: 2.1rem 1fr; padding: 7px 0; color: var(--muted); font-size: 0.92rem; line-height: 1.4; text-decoration: none; transition: color 0.25s; }
.guide .guide-toc a:hover { color: var(--text); }
.guide-toc i { color: var(--accent); font-family: var(--mono); font-size: 0.75rem; font-style: normal; line-height: 1.75; }
.guide .guide-toc a:not(:has(i)) { grid-template-columns: 1fr; padding-left: 2.1rem; }
.guide-part { scroll-margin-top: 24px; }
.guide-part + .guide-part { margin-top: clamp(36px, 5vw, 60px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.guide h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -0.04em; line-height: 1.1; }
/* « Étape 3 : ouvrir… » : le numéro passe au-dessus du titre, en repère ; le signe qui les séparait n'a plus lieu d'être. */
.guide h2 span { display: block; margin-bottom: 10px; color: var(--accent); font-family: var(--mono); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.4; }
.guide h2 i { display: none; }
.guide h2 b { display: block; font-weight: inherit; }
.guide h2 b::first-letter { text-transform: uppercase; }
.guide-body p { margin-block: 16px 0; }
.guide li { line-height: 1.6; }
/* Les gestes d'une étape : comptés, séparés d'un filet. Les listes à puces portent le point orange du site. */
.guide .guide-body ol, .guide .guide-body ul { margin-top: 18px; padding: 0; list-style: none; }
.guide .guide-body ol { counter-reset: geste; }
.guide .guide-body li { position: relative; padding: 13px 0 13px 2.4rem; }
.guide .guide-body li + li { margin-top: 0; border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent); }
.guide .guide-body ol > li { counter-increment: geste; }
.guide .guide-body ol > li::before { content: counter(geste); position: absolute; top: 13px; left: 0.1rem; color: var(--muted); font-family: var(--mono); font-size: 0.8rem; line-height: 2; font-variant-numeric: tabular-nums; }
.guide .guide-body ul > li::before { content: ""; position: absolute; top: calc(13px + 0.62em); left: 0.35rem; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.guide code { padding: 1px 6px; border-radius: 6px; background: var(--surface); font-family: var(--mono); font-size: 0.9em; }
.guide a:not(.btn) { color: inherit; text-underline-offset: 3px; }
.guide .guide-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 1023px) {
  /* Sur téléphone, le guide se lit d'une traite : pas de sommaire. */
  .guide-cols { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { display: none; }
}
/* Encadré imposé par la loi sur les garanties */
.legal-box {
  margin-top: 20px;
  padding: 8px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  font-size: 0.95rem;
}

/* Lien discret vers le guide d'un pack */
.more { align-self: flex-start; color: var(--text); font-size: 0.95rem; font-weight: 500; text-underline-offset: 4px; text-decoration-color: var(--muted); }
.more:hover { text-decoration-color: currentColor; }

/* Page d'une vidéo (/pack/<id>, pack.js) : la vidéo d'abord, en grand, avec sous elle ses temps forts, qui
   suivent la lecture et se cliquent ; le nom, la phrase et le bouton à côté (dessous sur téléphone). */
.film { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4.4vw, 72px); width: min(1480px, 100%); padding-block: clamp(12px, 2.4vw, 32px) clamp(40px, 6vw, 80px); }
.film-screen { position: relative; min-width: 0; }
.film-screen .media { border-radius: 14px; background: #131110; box-shadow: 0 50px 120px -50px color-mix(in srgb, var(--accent) 34%, transparent); }
/* Vidéo verticale (9:16) : sa hauteur tient dans l'écran, elle est centrée dans sa colonne */
.film.is-vertical { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); width: min(1240px, 100%); }
.film.is-vertical .film-screen { display: grid; justify-items: center; }
.film .media-vertical { aspect-ratio: 9 / 16; width: min(100%, calc(min(74vh, 700px) * 9 / 16)); }
.film.is-vertical .cues { width: min(100%, calc(min(74vh, 700px) * 9 / 16)); }
/* Les temps forts : une barre par moment de la vidéo, large comme sa durée. Elle se remplit pendant la lecture. */
.cues { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.cues li { min-width: 0; }
.cue { display: block; width: 100%; padding: 6px 0 0; border: 0; background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: color 0.25s; }
.cue i { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: var(--line); }
.cue i::after { content: ""; display: block; height: 100%; background: var(--accent); transform: scaleX(var(--k, 0)); transform-origin: left; }
.cue span { display: block; margin-top: 8px; overflow: hidden; font-family: var(--mono); font-size: 0.72rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.cue:hover, .cue.is-on { color: var(--text); }
.cue:hover i { background: color-mix(in srgb, var(--muted) 45%, var(--line)); }
.cue:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* Sous une vidéo verticale, les barres sont trop courtes pour porter chacune son nom : seul le temps fort en cours dit le sien. */
.film.is-vertical .cues { position: relative; padding-bottom: 26px; }
.film.is-vertical .cue span { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; transition: opacity 0.3s; }
.film.is-vertical .cue.is-on span { opacity: 1; }
.product-copy { max-width: 34rem; }
.crumb { display: inline-block; margin-bottom: 22px; color: var(--muted); font-size: 0.95rem; text-decoration: none; transition: color 0.25s; }
.crumb::before { content: "←"; display: inline-block; margin-right: 8px; transition: transform 0.35s var(--ease); }
.crumb:hover { color: var(--text); }
.crumb:hover::before { transform: translateX(-3px); }
.film h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -0.055em; line-height: 0.96; }
.film .lead { max-width: 40ch; margin-block: 20px 28px; }
.product-buy { display: flex; align-items: center; gap: 20px; }
.film .product-buy .btn { min-height: 54px; padding-inline: 28px; font-size: 1.05rem; }
.product-note { max-width: 44ch; margin-top: 16px; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }

/* Page d'une vidéo : les trois repères */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-block: 1px solid var(--line); }
.facts > div { padding: 20px 24px 22px 0; }
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts dt { color: var(--muted); font-family: var(--mono); font-size: 0.78rem; }
.facts dd { margin: 6px 0 0; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; text-wrap: balance; }

/* Page d'une vidéo : le guide, un titre à gauche et son contenu à droite */
.guide-row { display: grid; grid-template-columns: minmax(200px, 340px) 1fr; gap: 16px clamp(24px, 5vw, 72px); padding-block: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
/* (Le titre d'une rangée ne reprend ni le filet ni les marges des titres du guide pas à pas, qui porte la même classe.) */
.guide-row h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.04em; line-height: 1.1; text-wrap: balance; }
.guide-row > div { max-width: 68ch; }
.guide-row p { color: var(--muted); }
.guide-row .guide-text { color: var(--text); font-size: clamp(1.08rem, 1.5vw, 1.3rem); letter-spacing: -0.01em; line-height: 1.5; }
.guide-row a { color: var(--text); text-underline-offset: 3px; }
.guide-row .gift { border-top: 0; }
.guide-row .gift li:first-child { padding-top: 0; }

.timeline, .steps { margin: 0; padding: 0; list-style: none; }

.timeline li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding-block: 16px; border-top: 1px solid var(--line); }
.timeline li:first-child { padding-top: 0; border-top: 0; }
.when { color: var(--accent); font-family: var(--mono); font-size: 0.82rem; line-height: 1.9; font-variant-numeric: tabular-nums; white-space: nowrap; }

.steps { counter-reset: step; }
.steps li { position: relative; padding-left: 48px; counter-increment: step; }
.steps li + li { margin-top: 22px; }
.steps li::before { content: "0" counter(step); position: absolute; left: 0; top: 0; color: var(--accent); font-family: var(--mono); font-size: 0.82rem; line-height: 1.9; font-variant-numeric: tabular-nums; }

.product-end a { color: var(--text); text-underline-offset: 3px; }

/* Page d'une vidéo : rappel de l'achat en bas, en grand */
.product-end { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; padding-block: clamp(64px, 9vw, 128px) clamp(24px, 4vw, 56px); }
.product-end h2 { font-size: clamp(2.2rem, 6vw, 4.6rem); letter-spacing: -0.055em; line-height: 0.96; }
.product-end p { margin-top: 14px; color: var(--muted); }
.product-end .btn { min-height: 54px; padding-inline: 28px; font-size: 1.05rem; }

/* Mouvement.
   - Héro : l'écran se pose, le titre monte ligne par ligne derrière un cache, le reste suit ; puis les extraits
     s'enchaînent en fondu, et le repère de celui qui passe se remplit (app.js).
   - Au défilement : ce qui porte data-reveal apparaît (app.js pose .is-in), avec un léger décalage (--i).
   - Page d'une vidéo : la vidéo arrive, le texte suit ; les temps forts se remplissent pendant la lecture (pack.js).
   La classe « motion » est posée par entree.js ; sans elle, ou si l'appareil demande moins d'animations, tout est là d'emblée. */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes unmask { from { transform: translateY(105%); } }
@keyframes settle { from { opacity: 0; transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .proof-live::before { animation: proof-live 2.4s ease-out infinite; }
}
@keyframes proof-live { 0% { box-shadow: 0 0 0 0 rgb(255 90 31 / 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgb(255 90 31 / 0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .line > span { animation: unmask 1s var(--ease) both; }
  .hero h1 .line:nth-child(2) > span { animation-delay: 0.09s; }
  .hero h1 .line:nth-child(3) > span { animation-delay: 0.16s; }
  .hero .eyebrow { animation: rise 0.9s var(--ease) both; }
  .hero .lead { animation: rise 0.9s var(--ease) 0.2s both; }
  .hero .btn { animation: rise 0.9s var(--ease) 0.28s both; }
  .hero-how { animation: rise 0.9s var(--ease) 0.36s both; }
  /* Les preuves du héro apparaissent sans glisser : décalées vers le bas, elles sortaient de la zone qui déclenche
     leur apparition sur les écrans peu hauts, et restaient cachées. */
  .motion .hero .proof { transform: none; transition-delay: 0.45s; }
  .stage-slide, .stage-now { animation: settle 1.6s var(--ease) both; }
  .stage-now { animation-name: rise; animation-delay: 0.5s; }
  .film-screen { animation: settle 1.2s var(--ease) both; }
  .film .product-copy > * { animation: rise 0.9s var(--ease) both; animation-delay: calc(0.12s + var(--i, 0) * 70ms); }
  .footer::after { transition: color 1.2s var(--ease); }
  .footer:hover::after { color: #1c1916; }
  /* Page d'offre : la vidéo arrive, puis chaque élément de l'étape monte à son tour ; rejoué à chaque étape */
  .flow-media { animation: rise 1s var(--ease) both; }
  .flow-panel.is-in > * { animation: rise 0.75s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
  .flow-panel.is-in > h1 { animation-delay: 50ms; }
  .flow-choices .btn { animation: rise 0.75s var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 80ms); }
  .motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .motion [data-reveal].is-in { opacity: 1; transform: none; }
  .motion .how li::after { transform: scaleX(0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .motion .how li.is-in::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }

}

/* Grain léger sur le fond sombre, sur toutes les pages : un voile fixe, qui ne capte aucun clic */
body::before { content: ""; position: fixed; z-index: 30; inset: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Grand écran : le mur passe sur quatre colonnes, chaque carte à sa place */
@media (min-width: 1024px) {
  .wall { grid-template-columns: repeat(4, 1fr); gap: 36px 16px; }
  .tile-demo { grid-area: 1 / 1 / 2 / 3; }
  .tile-pub { grid-area: 1 / 3 / 3 / 4; }
  .tile-accroches { grid-area: 1 / 4 / 3 / 5; }
  .tile-lancement { grid-area: 2 / 1 / 3 / 2; }
  .tile-explication { grid-area: 2 / 2 / 3 / 3; }
  /* Le court-métrage : une bande large comme un écran de cinéma, entre les six vidéos du haut et les deux du bas. */
  .tile-court-metrage { grid-area: 3 / 1 / 4 / 5; }
  .tile-court-metrage .tile-media { aspect-ratio: 3 / 1; }
  .tile-preuve { grid-area: 4 / 1 / 5 / 3; }
  .tile-demo-3d { grid-area: 4 / 3 / 5 / 5; }
  /* En bas, comme en haut : le trajet de A à B, puis la vitrine et le dialogue ; à côté, les deux verticales (la carte
     qui s'allume, la pub en boucle) sur les deux rangées. « Vidéo sur mesure », pour toute autre vidéo, ferme le mur
     au centre. */
  .tile-trajet-3d { grid-area: 5 / 1 / 6 / 3; }
  .tile-vitrine-3d { grid-area: 6 / 1 / 7 / 2; }
  .tile-dialogue-3d { grid-area: 6 / 2 / 7 / 3; }
  .tile-carte-allumee { grid-area: 5 / 3 / 7 / 4; }
  .tile-pub-boucle { grid-area: 5 / 4 / 7 / 5; }
  .tile-video { grid-area: 7 / 2 / 8 / 4; }
}
@media (max-width: 767px) {
  :root { --nav-h: 56px; }
  .nav-bar .nav { height: 56px; }
  .nav-bar .nav-cta { min-height: 36px; font-size: 0.85rem; }
  .nav-bar.is-stuck .nav-cta { margin-left: 14px; padding-inline: 13px; }
  /* Le menu se range derrière le bouton ☰ : en ligne, le logo, les langues et le bouton, rien d'autre. Ouvert, un
     panneau sous l'en-tête, en grands liens, avec « Comment ça marche » en orange. */
  .nav-bar .nav-cta { display: none; }
  .lang { margin-left: auto; margin-right: 6px; font-size: 0.8rem; }
  .nav-toggle { display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
  .nav-toggle i { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease), opacity 0.2s; }
  .nav-bar.is-open .nav-toggle i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-bar.is-open .nav-toggle i:nth-child(2) { opacity: 0; }
  .nav-bar.is-open .nav-toggle i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-panel { display: block; position: absolute; top: 100%; right: 0; left: 0; padding: 4px clamp(16px, 4vw, 40px) 22px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s, transform 0.4s var(--ease), visibility 0s 0.4s; }
  .nav-bar.is-open .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-panel .nav-links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav-panel .nav-links a, .nav-how { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
  .nav-panel .nav-links a::after { display: none; }
  .nav-how { border-bottom: 0; color: var(--accent); }
  /* Héro : d'abord ce qu'est Mavena (l'étiquette, le titre, la phrase), puis une vidéo d'exemple dans une carte, puis
     le bouton et la preuve. L'écran venait en premier, bord à bord, et prenait la moitié du téléphone avec le nom et le
     bouton d'une seule vidéo : on se croyait sur la page d'un produit (Arthur, 18 octobre 2026). Le bloc du texte
     s'ouvre (display: contents) pour que la carte se glisse entre la phrase et le bouton. */
  .hero { display: flex; flex-direction: column; min-height: 0; padding: calc(var(--nav-h) + 6px) clamp(16px, 4vw, 40px) 8px; }
  /* Le haut de page s'arrête un peu avant le bas de l'écran : le début de la suite (les vues, en grand) dépasse
     juste, pour inviter à faire défiler (Arthur, 18 octobre 2026). Sur un petit téléphone, le contenu est plus haut
     que l'écran : la règle ne joue pas. */
  .hero { justify-content: flex-start; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); }
  .views { margin-top: 10px; }
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 1; }
  .hero h1 { order: 2; }
  .hero .lead { order: 3; }
  .stage { order: 4; }
  .hero .btn { order: 5; }
  .hero .hero-ctas { order: 5; }
  .hero .proof { order: 7; }
  /* L'étiquette : une pastille, comme une marque de catégorie. */
  .hero .eyebrow { align-self: flex-start; margin-bottom: 10px; padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 99px; background: rgb(244 241 234 / 0.035); color: color-mix(in srgb, var(--text) 82%, transparent); font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0; }
  .hero .eyebrow::before { margin-right: 9px; }
  /* Un titre plus grand, une phrase plus lisible et de l'air entre eux (maquette d'Arthur du 21 octobre 2026), mais
     resserrés pour que le bouton et « Comment ça marche ? » tiennent au-dessus de la barre d'adresse de Safari sur un
     iPhone 14 Pro (environ 660 points visibles), à la demande d'Arthur le même soir. */
  .hero h1 { font-size: clamp(2.2rem, 9.4vw, 3.9rem); line-height: 0.98; }
  .hero .lead { margin-block: 14px 16px; font-size: 1.03rem; line-height: 1.45; }
  /* Une lueur orange, à droite, comme celle des vidéos. */
  .hero::before { content: ""; position: absolute; z-index: -1; top: 30%; right: -30%; width: 80%; height: 50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 90 31 / 0.22), transparent); filter: blur(40px); pointer-events: none; }
  /* La carte : une vidéo d'exemple aux coins arrondis, cernée d'un filet, avec sa légende en pastille. */
  .stage { position: relative; inset: auto; height: auto; aspect-ratio: 2.2 / 1; overflow: hidden; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 34px 70px -34px rgb(0 0 0 / 0.9); }
  .stage-back { display: none; }
  .stage-slide:not(.is-vertical) .stage-video, .stage-slide.is-vertical .stage-video { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .stage::after { background: linear-gradient(to top, rgb(11 10 9 / 0.7) 0%, rgb(11 10 9 / 0) 34%); }
  .stage-now { right: auto; bottom: 12px; left: 12px; width: auto; margin: 0; padding: 0; justify-content: flex-start; }
  .stage-bar { width: auto; }
  .stage-label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: rgb(11 10 9 / 0.6); font-size: 0.7rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .stage-label span { flex: none; }
  /* La légende : « Exemple · Démo d'application ». Ce sont des exemples qui défilent, pas un produit à acheter. Ni
     numéro, ni bouton, ni repères de lecture (un trait par vidéo, retirés à la demande d'Arthur). */
  .stage-label b, .stage-go, .stage-ticks { display: none; }
  .stage-kind { display: inline; color: var(--muted); font-style: normal; }
  .stage-kind::after { content: "·"; margin-left: 7px; }
  .hero .btn { width: 100%; margin-top: 18px; }
  .hero .hero-ctas { flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; }
  .hero-ask { flex-basis: auto; font-size: 0.95rem; text-align: center; }
  .hero .hero-ctas .btn { order: 0; margin-top: 0; }
  /* La preuve : le nombre d'acheteurs, centré sous le bouton, en une ligne ; le point orange bat doucement, le nombre
     monte en direct (le nombre de fichiers offerts est retiré, à la demande d'Arthur). */
  .proof { display: block; max-width: none; margin-top: 22px; color: var(--muted); font-size: 0.95rem; line-height: 1.35; text-align: center; }
  .proof p { display: inline-flex; align-items: center; gap: 10px; }
  .proof-live::before { content: ""; flex: none; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--accent); }
  .proof b { font-size: 1rem; letter-spacing: -0.01em; }
  .section-head { grid-template-columns: 1fr; }
  .how li { grid-template-columns: 56px 1fr; }
  .how li::before { font-size: 1.9rem; }
  .how p { grid-column: 2; }
  .closing .btn { width: 100%; }
  /* Pied de page : tout se range sur une colonne. */
  .footer-links { flex-basis: 100%; }
  /* Les fenêtres deviennent des feuilles qui montent du bas de l'écran */
  .sheet { width: 100%; max-width: none; margin: auto 0 0; border-width: 1px 0 0; border-radius: 20px 20px 0 0; transform: translateY(40px); }
  .fiche { max-height: 92dvh; }
  .fiche-media.is-vertical { aspect-ratio: 5 / 4; }
  .fiche-media.is-vertical:has(video[controls]) { aspect-ratio: 4 / 5; }
  .fiche-body { padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
  /* Page d'offre : la vidéo en haut, les étapes dessous, le bouton de paiement toujours en bas de l'écran */
  .flow { grid-template-columns: 1fr; align-items: start; gap: 24px; padding-top: 4px; }
  .flow-media.is-vertical { height: auto; width: 100%; aspect-ratio: 1; }
  /* À l'étape de l'offre, la vidéo se réduit à un bandeau : les offres doivent se voir sans faire défiler. */
  .flow-media { transition: aspect-ratio 0.6s var(--ease); }
  .flow:has(.flow-panel[data-kind="offre"]) .flow-media { aspect-ratio: 5 / 2; }
  .flow-panel[data-kind="offre"] h1 { font-size: 1.35rem; }
  .flow-panel[data-layout="valeur"] h1 { font-size: 1.75rem; }
  /* Version « valeur » : la vidéo un peu plus basse, pour que les prix restent au-dessus du bouton */
  .flow:has(.flow-panel[data-layout="valeur"]) .flow-media { aspect-ratio: 3 / 1; }
  .value-lead { font-size: 0.98rem; }
  .tier { padding-inline: 10px; }
  .flow-panel[data-kind="offre"] .flow-count { margin-bottom: 8px; }
  .flow-steps i { width: 28px; }
  .flow-pay { margin-inline: -16px; padding: 12px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .flow-pay .flow-note { margin-top: 8px; font-size: 0.84rem; line-height: 1.4; }
  /* Les cartes d'offres, plus serrées : le nom, une ligne, le prix ; le cadeau tient en une ou deux lignes. */
  .offers { gap: 8px; }
  .offer { gap: 2px 12px; padding: 12px 14px; }
  .offer-text span { font-size: 0.86rem; line-height: 1.4; }
  .offer-bonus { margin-top: 4px; font-size: 0.84rem; line-height: 1.45; }
  .offer-picks { margin-top: 8px; }
  .lot-sizes { gap: 8px; margin-top: 24px; }
  .lot-size { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 14px 16px; }
  .lot-size-name { font-size: 1.08rem; }
  .lot-size .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 1.15rem; }
  .lot-size .price s, .lot-size .price b { margin-left: 0; white-space: nowrap; }
  .lots-page .lead { margin-top: 14px; font-size: 1.05rem; }
  .lot-summary { flex-wrap: wrap; gap: 6px 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .lot-summary p { flex-basis: 100%; font-size: 0.9rem; }
  .lot-summary .btn { flex: 1; min-width: 0; margin-left: auto; padding-inline: 14px; }
  /* Page d'une vidéo : la vidéo en haut, bord à bord ; sous elle, seul le temps fort en cours dit son nom. */
  .film, .film.is-vertical { grid-template-columns: 1fr; gap: 22px; padding-top: 0; }
  .film-screen { margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); }
  .film-screen .media { border-radius: 0; }
  .film .media-vertical { width: min(100%, calc(42svh * 9 / 16)); border-radius: 14px; }
  .film.is-vertical .cues { width: 100%; }
  .cues, .film.is-vertical .cues { position: relative; margin-top: 10px; padding: 0 clamp(16px, 4vw, 40px) 26px; }
  .cue span, .film.is-vertical .cue span { position: absolute; left: clamp(16px, 4vw, 40px); right: clamp(16px, 4vw, 40px); bottom: 0; margin: 0; opacity: 0; transition: opacity 0.3s; }
  .cue.is-on span { opacity: 1; }
  .cue i { height: 4px; }
  .cue span, .film.is-vertical .cue span { color: var(--text); font-size: 0.78rem; }
  /* Le retour aux vidéos est dans l'en-tête : ici, le nom et le bouton doivent tenir dans le premier écran. */
  .film .crumb { display: none; }
  /* Sur un écran étroit, le nom tient sur une ligne et la phrase prend moins de place : le bouton reste en vue. */
  .film h1 { font-size: clamp(1.9rem, 9.6vw, 2.4rem); }
  .film .lead { margin-block: 14px 22px; font-size: 1.05rem; line-height: 1.5; }
  .film .product-buy .btn, .product-end .btn { width: 100%; }
  .product-end .product-buy { flex-basis: 100%; }
  /* Le format et la durée côte à côte, « idéal pour » dessous sur toute la largeur. */
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div, .facts > div + div { padding: 14px 0; }
  .facts > div:nth-child(2) { padding-left: 16px; }
  .facts > div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .guide-row { gap: 14px; padding-block: 34px; }
  .guide-row .gift li:last-child { padding-bottom: 0; border-bottom: 0; }
  .timeline li:last-child { padding-bottom: 0; }
  .guide-row { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 767px) {
  @starting-style { .sheet[open] { opacity: 0; transform: translateY(40px); } }
}

/* La page « On fait ta vidéo pour toi » (/video-faite) : l'offre dans son cadre (celui de la page « Merci »), le
   déroulé à côté sur grand écran, puis les vidéos du site parmi lesquelles choisir son style. */
.made { padding-block: clamp(24px, 5vw, 64px); }
.made .lead { max-width: 54ch; margin-block: 20px 0; }
.made-cols { display: grid; gap: clamp(28px, 5vw, 56px); align-items: start; margin-top: clamp(24px, 4vw, 40px); }
.made-offer { margin-top: 0; }
.made h2 { letter-spacing: -0.03em; }
.made-how h2, .made-styles h2 { font-size: clamp(1.2rem, 3.6vw, 1.5rem); }
.made-steps { display: grid; gap: 20px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: made; }
.made-steps li { position: relative; padding-left: 44px; counter-increment: made; }
.made-steps li::before { content: counter(made); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.made-steps strong { font-weight: 600; }
.made-steps p { margin-top: 4px; color: var(--muted); line-height: 1.5; }
.made-styles { margin-top: clamp(40px, 7vw, 80px); }
.made-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.made-strip a { display: block; color: inherit; text-decoration: none; }
.made-strip img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; object-fit: cover; background: var(--line); transition: transform 0.4s var(--ease); }
.made-strip a:hover img { transform: scale(1.02); }
.made-strip span { display: block; margin-top: 8px; color: var(--muted); font-size: 0.9rem; }
@media (min-width: 860px) {
  .made-cols { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
  .made-strip { grid-template-columns: repeat(4, 1fr); }
}