/* Les polices partent de l'hébergeur de fichiers (Cloudflare, volume non compté) ; le site les donne s'il ne répond 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;
}

/*
  Un seul accent (orange) sur toute la page.
  Rayons : cartes 16px, médias 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: #0d0d0f;
  --surface: #151518;
  --line: #27272c;
  --text: #f2f2ef;
  --muted: #a3a3ab;
  --accent: #ff5a1f;
  --on-accent: #140a05;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* 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%; }
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: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 99px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease), opacity 0.25s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.97); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; filter: 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); }
.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; }
@media (max-width: 359px) {
  .lang { margin-left: 8px; }
  .lang a + a::before { margin-inline: 4px; }
}
/* Le menu du téléphone (☰), sur toutes les pages depuis le 21 octobre 2026 (Arthur), comme sur l'accueil (accueil.css,
   menu.js) : sur ordinateur, son panneau se fond dans la ligne de l'en-tête ; sur téléphone, le logo, les langues et
   le bouton ☰, et le menu s'ouvre en grands liens sous l'en-tête, avec « Comment ça marche » en orange. */
.nav-panel { display: contents; }
.nav-how, .nav-toggle { display: none; }
@media (max-width: 767px) {
  header.nav { position: relative; z-index: 30; }
  .nav .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; }
  .is-open .nav-toggle i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .is-open .nav-toggle i:nth-child(2) { opacity: 0; }
  .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-block: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 96%, 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; }
  .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); }
}

/* ---------- Page d'affiliation ---------- */
.aff-hero { padding-block: clamp(28px, 6vw, 88px) 0; }
.aff-hero h1 { max-width: 15ch; }
.aff-boost { display: inline-block; margin-bottom: 18px; padding: 6px 14px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.92rem; font-weight: 600; line-height: 1.4; }
.aff-boost[hidden] { display: none; }
.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: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 16px; 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.04em; text-transform: uppercase; }
/* Connecté : le lien à partager, les chiffres, puis ce que le solde permet. */
.aff-link { padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 16px; }
.aff-url { margin-block: 8px 16px; font-size: clamp(1.1rem, 4.8vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; 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: 16px; 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: 52px; }
.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; }
/* Sous l'espace : les deux façons de toucher ses gains, puis les règles. */
.aff-ways { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); margin-top: clamp(28px, 4vw, 48px); }
.aff-ways h3 { color: var(--accent); font-family: var(--mono); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
.aff-ways p { max-width: 40ch; margin-top: 12px; color: var(--muted); font-size: 1.05rem; }
.aff-rules { max-width: 70ch; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.aff-rules li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.5; }
.aff-last { padding-bottom: clamp(56px, 8vw, 112px); }
@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%; }
}

/* 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: #131316;
}
.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-empty { padding: 8px; color: #8b8b93; font-size: 0.9rem; text-align: center; }

/* Titres de page */
h1 {
  font-size: clamp(2.2rem, 3.9vw, 3.15rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.lead { max-width: 44ch; margin-block: 24px 32px; color: var(--muted); font-size: 1.15rem; }

/* Héro de l'accueil : un grand titre, puis la pellicule des vidéos, bord à bord */
.hero { padding-block: clamp(20px, 4vw, 56px) clamp(8px, 2vw, 24px); overflow: hidden; }
.eyebrow { margin-bottom: 20px; color: var(--muted); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }
/* Le titre est coupé en trois morceaux, chacun derrière son cache : une ligne, puis deux morceaux côte à côte
   sur grand écran ; trois lignes sur téléphone. */
.hero h1 { font-size: clamp(2.6rem, 6.6vw, 5.4rem); letter-spacing: -0.055em; line-height: 0.98; text-wrap: initial; }
.hero h1 .line { display: inline-block; overflow: hidden; padding-bottom: 0.08em; vertical-align: top; }
.hero h1 .line:first-child { display: block; }
.hero h1 .line > span { display: block; }
.hero .lead { max-width: 46ch; margin-block: clamp(20px, 2.4vw, 32px) clamp(24px, 2.6vw, 36px); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.reel { margin-top: clamp(32px, 4vw, 56px); }
.reel-track { display: flex; gap: 14px; width: max-content; }
.reel-item { flex: none; display: block; overflow: hidden; height: clamp(230px, 44vh, 470px); aspect-ratio: 16 / 9; border-radius: 16px; background: #131316; }
.reel-item.is-vertical { aspect-ratio: 9 / 16; }
.reel-item video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.reel-item:hover video { transform: scale(1.04); }

/* Preuve, juste sous le bouton du héro : trois faits sur une ligne (ils passent à la ligne sur téléphone).
   Le point orange signale le compteur vivant. */
.proof { display: flex; flex-wrap: wrap; gap: 6px clamp(20px, 3vw, 40px); margin-top: clamp(22px, 2.4vw, 30px); color: var(--muted); font-size: 0.98rem; }
.proof p { margin: 0; }
.proof b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.proof span { font: inherit; }
/* Les vues, en grand : une ligne à elle seule entre la pellicule 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(44px, 6vw, 88px) 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; }
.proof-live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }

/* Sections */
.section { padding-block: clamp(72px, 10vw, 144px) 0; scroll-margin-top: 48px; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.3rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.section-sub { max-width: 52ch; margin-top: 14px; color: var(--muted); font-size: clamp(1.02rem, 1.35vw, 1.15rem); }
.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 mur : une carte par pack, sa vidéo en boucle, aucun prix.
   Téléphone : les vidéos horizontales prennent la largeur, les deux verticales se tiennent 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, 4vw, 56px); }
.tile { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.tile-media { flex: 1; display: block; min-height: 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: #131316; }
.is-vertical .tile-media { aspect-ratio: 9 / 16; }
.tile-media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.tile:hover video { transform: scale(1.03); }
.tile:active .tile-media { transform: scale(0.985); }
.tile-media { transition: transform 0.3s var(--ease); }
.tile-text strong { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; }
.tile-text span { display: block; margin-top: 4px; 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. 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 { display: inline-block; margin-top: 10px; 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; }
  /* Deux cartes voisines : la ligne « Créer cette vidéo » se pose au bas de chacune, à la même hauteur. */
  .tile-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
  .tile-go { margin-top: auto; padding-top: 10px; }
}
@media (max-width: 767px) {
  .wall { gap: 24px 10px; }
  .tile { gap: 9px; }
  .tile-media { border-radius: 12px; }
  .tile-text strong { font-size: 1rem; line-height: 1.2; }
  .tile-text span { margin-top: 3px; font-size: 0.84rem; line-height: 1.4; }
  .tile-go { font-size: 0.9rem; }
}

/* Ce qu'on reçoit : le prompt, et le kit offert */
.gift { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gift li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.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; }
.gift em, .get-head 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; }

/* Ce qu'on reçoit : deux panneaux côte à côte. À gauche le début du vrai prompt, la suite voilée ;
   à droite les fichiers du kit, offerts. */
.gets { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.get { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.get-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.get-head h3 { font-size: 1.05rem; }
.get-head code { color: var(--muted); }
.get code, .prompt { font-family: var(--mono); font-size: 0.86rem; }
.get-foot { margin-top: auto; padding: 16px 22px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.prompt { position: relative; display: grid; gap: 14px; padding: 22px 22px 0; line-height: 1.65; }
.prompt-title { color: var(--accent); }
.prompt-rest { display: grid; gap: 12px; padding-bottom: 26px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.prompt-rest i { height: 0.7em; border-radius: 99px; background: var(--line); }
.prompt-rest i:nth-child(1) { width: 96%; }
.prompt-rest i:nth-child(2) { width: 88%; }
.prompt-rest i:nth-child(3) { width: 93%; }
.prompt-rest i:nth-child(4) { width: 61%; }
.prompt-rest i:nth-child(5) { width: 82%; }
.files ul { margin: 0; padding: 10px 0; list-style: none; }
.files li { display: grid; grid-template-columns: minmax(0, 10.5rem) 1fr; align-items: baseline; gap: 2px 16px; padding: 11px 22px; }
.files li + li { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.files code { overflow-wrap: anywhere; }
.files li span { color: var(--muted); font-size: 0.95rem; }

/* Le prix d'une agence face à un prompt : deux colonnes nues, deux très grands mots */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(32px, 5vw, 72px); }
.calc h3 { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
.calc-figure { margin-block: 14px 20px; font-size: clamp(3.2rem, 9vw, 7.4rem); font-weight: 650; letter-spacing: -0.06em; line-height: 0.92; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-them .calc-figure { color: var(--muted); }
.calc-us .calc-figure { color: var(--accent); }
.calc p:not(.calc-figure) { max-width: 40ch; color: var(--muted); }
.calc .calc-source { margin-top: 14px; font-size: 0.85rem; }
.calc-source a { color: inherit; text-underline-offset: 3px; }

/* Trois gestes : trois lignes numérotées, dont le trait se trace à l'arrivée */
.how { counter-reset: how; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.how li { position: relative; counter-increment: how; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; gap: 6px 24px; padding-block: clamp(22px, 2.6vw, 34px); }
.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-family: var(--mono); font-size: 0.95rem; }
.how strong { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.how p { color: var(--muted); }

/* Fin de page : une dernière invitation, en grand */
.closing { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px 40px; padding-block: clamp(88px, 12vw, 176px) clamp(48px, 7vw, 96px); }
.closing h2 { font-size: clamp(2.3rem, 7vw, 5.6rem); letter-spacing: -0.055em; line-height: 0.96; }

/* Page des lots (/lots) */
.lots-page { padding-block: clamp(24px, 5vw, 64px); }
.lots-page .lead { max-width: 52ch; margin-block: 20px 8px; }

/* Lots */
/* 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: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.2s;
}
.lot-size input, .pick input { position: absolute; opacity: 0; pointer-events: none; }
.lot-size-name { font-size: 1.1rem; font-weight: 600; }
.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) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.lot-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.pick {
  position: relative;
  display: block;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.2s, opacity 0.2s;
}
.pick-name { display: block; padding: 10px 4px 4px; font-size: 0.95rem; font-weight: 500; line-height: 1.3; }
.pick-gift { display: block; padding: 0 4px 4px; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.pick .media-empty { font-size: 0.75rem; }
.pick:has(:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Coche du pack sélectionné */
.pick:has(:checked)::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 6px var(--accent), inset 0 0 0 22px var(--on-accent);
}
.pick:has(:disabled:not(:checked)) { opacity: 0.45; cursor: default; }

.lot-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.lot-summary p { margin-right: auto; color: var(--muted); }

/* Page de remerciement */
.thanks { padding-block: clamp(48px, 12vh, 140px); }
.thanks .lead { max-width: 52ch; }
/* ---------- 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; }
.thanks.has-next h1::before { content: "✓"; display: grid; flex: none; place-items: center; width: 1.5em; height: 1.5em; 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; }
/* 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: 16px; 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; }
/* Le minuteur des offres (page « Merci » et offre de rattrapage) : une pastille du temps qui reste, chiffres fixes,
   le sablier qui se retourne. */
.next-clock, .rescue-clock { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-family: var(--mono); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.5; text-transform: none; white-space: nowrap; }
.next-clock { margin-left: 8px; vertical-align: top; }
.rescue-clock { padding-block: 4px; background: var(--accent); box-shadow: none; color: var(--on-accent); font-size: 0.9rem; }
.next-clock span, .rescue-clock span { display: inline-block; animation: sablier 3s var(--ease) infinite; }
@keyframes sablier { 0%, 70% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .next-clock span, .rescue-clock span { animation: none; } }
.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(13 13 15 / 0.78); color: #f2f2ef; 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; }
/* Le prix et le bouton viennent juste sous le titre : sur un téléphone, ils tiennent sur le premier écran. Le détail
   (vignettes, ce qu'on reçoit) suit, séparé d'un filet. */
.next-buy { margin-top: 12px; }
.next h2 b { color: var(--accent); font-weight: inherit; white-space: nowrap; }
.next-price.is-small { align-items: center; gap: 4px 8px; color: var(--muted); font-size: 0.98rem; }
.next-price.is-small s { font-size: inherit; }
.next-price.is-small em { margin-left: 4px; }
/* Ce que tous les prompts lui reviennent avec l'offre, au lieu de leur prix pris d'un coup : une phrase qui coule. */
.next-deal { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.45; }
.next-deal b { color: var(--text); font-weight: 650; white-space: nowrap; }
.next-deal s { white-space: nowrap; }
.next-buy ~ .next-strip, .next-buy ~ .next-media, .next-buy + .next-points { margin-top: 20px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.next-note { max-width: 560px; margin-top: 4px; color: var(--muted); font-size: 0.88rem; line-height: 1.45; text-align: center; }
.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 */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 40px;
  padding-block: 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

/* Message "vente bientôt ouverte" */
.sheet {
  width: min(440px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  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 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.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 second choix, à qui avait quitté tous les prompts : « ou seulement », puis le prompt de la page. */
.rescue .rescue-or { margin: 14px 0 8px; color: var(--muted); font-size: 0.9rem; 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: 16px; 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(8 8 10 / 0); transition: background-color 0.35s, overlay 0.35s allow-discrete, display 0.35s allow-discrete; }
.sheet[open]::backdrop { background: rgb(8 8 10 / 0.74); }
@starting-style {
  .sheet[open] { opacity: 0; transform: translateY(14px) scale(0.985); }
  .sheet[open]::backdrop { background: rgb(8 8 10 / 0); }
}

/* La page de paiement Mavena (buy.js, `caisse` dans products.js) : une fenêtre posée au centre de la page, le site
   flouté derrière (sur téléphone, un panneau qui monte du bas). En tête, ce qu'on paie et son prix, et la croix qui
   la referme ; puis le formulaire de Stripe, qui passe sur une colonne dans cette largeur. */
.caisse { width: min(560px, calc(100% - 32px)); max-width: none; height: auto; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--text); box-shadow: 0 40px 120px -40px rgb(0 0 0 / 0.9); opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 0.3s var(--ease), transform 0.5s var(--ease), overlay 0.5s allow-discrete, display 0.5s allow-discrete; }
.caisse[open] { opacity: 1; transform: none; }
.caisse::backdrop { background: rgb(6 6 8 / 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@starting-style {
  .caisse[open] { opacity: 0; transform: translateY(24px) scale(0.98); }
}
.caisse-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.caisse-title { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.caisse-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; transition: border-color 0.2s; }
.caisse-close:hover { border-color: var(--muted); }
.caisse-safe { display: flex; align-items: center; gap: 7px; margin: 14px 20px 0; color: var(--muted); font-size: 0.8rem; }
.caisse-safe svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.caisse-body { position: relative; min-height: 420px; padding: 4px 0 20px; }
.caisse-wait { position: absolute; top: 72px; left: 0; right: 0; margin: 0; color: var(--muted); text-align: center; }
.caisse-form:not(:empty) + .caisse-wait { display: none; }
@media (max-width: 767px) {
  .caisse { width: 100%; max-height: 94dvh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 20px 20px 0 0; transform: translateY(40px); }
  @starting-style {
    .caisse[open] { opacity: 0; transform: translateY(40px); }
  }
}

/* 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: 20px; background: #131316; }
.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.04em; text-transform: uppercase; }
.flow-panel h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -0.045em; line-height: 1.04; }
.flow-panel[data-kind="offre"] h1 { font-size: clamp(1.55rem, 2.4vw, 2.05rem); letter-spacing: -0.035em; line-height: 1.14; }
.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: 64px; font-size: 1.08rem; }
/* « Pas de souci : voici comment ça marche », après un « non » : les quatre étapes en rangées numérotées. */
.flow-how { margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0; list-style: none; counter-reset: how; border-top: 1px solid var(--line); }
.flow-how li { display: grid; grid-template-columns: 2.4rem 1fr; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent); counter-increment: how; }
.flow-how li::before { content: "0" counter(how); grid-row: span 2; color: var(--accent); font-family: var(--mono); font-size: 0.85rem; line-height: 1.6; }
.flow-how b { font-weight: 600; }
.flow-how span { color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.flow-how-more { margin-top: 14px; text-align: center; }
.flow-how-more a { color: var(--text); text-underline-offset: 3px; }
/* Les questions du téléphone et les quatre étapes : avant la fiche, sans la vidéo du haut (elle est sous la question). */
.flow:has(.flow-panel[data-layout="ask"]) .flow-media { display: none; }
.flow:has(.flow-panel[data-layout="ask"]) { padding-top: clamp(24px, 6vh, 64px); }
/* Sous les questions du téléphone : la vidéo d'exemple, pour garder sous les yeux ce qu'on va fabriquer. */
.flow-ask-media { position: relative; margin: 28px 0 0; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.flow-ask-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.flow-ask-media figcaption { position: absolute; bottom: 10px; left: 10px; padding: 5px 11px; border-radius: 99px; background: rgb(11 10 9 / 0.62); color: var(--muted); font-family: var(--mono); font-size: 0.7rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.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, à la manière d'une fiche de
   magasin d'applications. Tout en haut, ce qu'on achète ; juste au-dessus du bouton, les trois offres et leurs prix,
   visibles sans défiler. Des filets plutôt que des boîtes. La barre du haut et la vidéo du parcours n'y sont pas. */
.flow-page:has(.flow-panel[data-layout="listing"]) .flow-bar { display: none; }
.flow:has(.flow-panel[data-layout="listing"]) { display: block; padding-top: 14px; }
.flow:has(.flow-panel[data-layout="listing"]) .flow-media { display: none; }
.flow-panel[data-layout="listing"] { margin-inline: auto; }
.listing-head { display: flex; align-items: center; gap: 14px; }
.listing-icon { flex: none; width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
.listing-title { flex: 1; min-width: 0; }
.flow-panel[data-kind="offre"][data-layout="listing"] h1 { font-size: 1.25rem; letter-spacing: -0.025em; line-height: 1.15; }
.listing-title p { margin-top: 3px; color: var(--muted); font-size: 0.85rem; }
.listing-head .flow-close { flex: none; }
.listing-what { margin-top: 12px; font-size: 0.95rem; line-height: 1.45; }
.listing-preview { position: relative; overflow: hidden; aspect-ratio: 2 / 1; margin-top: 14px; border-radius: 16px; background: #131316; }
.listing-preview video { display: block; width: 100%; height: 100%; object-fit: cover; }
.listing-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 99px; background: rgb(13 13 15 / 0.8); color: #f2f2ef; font-family: var(--mono); font-size: 0.69rem; letter-spacing: 0.02em; }
/* 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.05em; line-height: 1.4; text-transform: uppercase; }
.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.19rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.26; }
/* Les trois offres, côte à côte : le nom, le prix, la remise */
.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: 64px; padding: 6px 4px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); text-align: center; cursor: pointer; transition: box-shadow 0.2s, background-color 0.2s; }
.listing-offers label:has(input:checked) { background: var(--surface); 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: 0.97rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.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 son titre */
.listing-block { margin-top: 32px; }
.listing-block h2 { margin-bottom: 10px; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.listing-block > p { font-size: 0.94rem; line-height: 1.45; }
.listing-included { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.listing-included li { display: grid; grid-template-columns: 8px 1fr; gap: 2px 12px; }
.listing-included li::before { content: ""; grid-row: span 2; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.listing-included strong { font-weight: 600; line-height: 1.3; }
.listing-included span { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
/* 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: 132px; overflow: hidden; color: var(--muted); font-size: 0.78rem; line-height: 1.35; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; scroll-snap-align: start; }
.listing-videos img { display: block; width: 132px; height: 74px; margin-bottom: 6px; border-radius: 10px; background: #131316; object-fit: cover; }
.listing-videos [aria-current] { color: var(--text); }
/* 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: 12px 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-weight: 600; line-height: 1.3; }
.listing-row span { grid-column: 1; color: var(--muted); font-size: 0.84rem; 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; transition: background-color 0.2s, color 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: 11px 0; border-top: 1px solid var(--line); font-size: 0.91rem; line-height: 1.4; }
.listing-info dt { color: var(--muted); }
.listing-info dd { margin: 0; text-align: right; }
.flow-panel[data-layout="listing"] .flow-proof { margin-top: 28px; }
/* 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, la vidéo se fait plus basse 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) {
  .listing-preview { aspect-ratio: 5 / 2; }
  .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; }
/* « Un prompt personnalisé écrit pour ton projet » tient sur deux lignes : elles se partagent le texte, sans mot seul. */
.offer-more .offer-text strong, #offer-more.listing-row strong { text-wrap: balance; }
.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: 16px; 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.04em; text-transform: uppercase; }
.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-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: flex-start; min-height: 54px; padding: 10px 22px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-weight: 500; white-space: normal; text-align: left; transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.btn-choice:hover { filter: none; box-shadow: inset 0 0 0 1px var(--accent); }
.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: 16px; cursor: pointer; transition: border-color 0.2s; }
/* input:checked, et pas :checked tout court : les options choisies des listes du lot de trois sont aussi « checked » */
.offer:has(input:checked) { border-color: var(--accent); 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.2rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.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: 8px; padding-top: 10px; border-top: 1px solid var(--line); 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'un pack (app.js) : sa vidéo, ce qu'on reçoit, le bouton */
.fiche { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; }
.fiche .tour-close { background: rgb(13 13 15 / 0.62); color: #f2f2ef; }
.fiche-media { position: relative; aspect-ratio: 16 / 9; background: #0d0d0f; }
.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; }
.btn-over { position: absolute; left: 50%; bottom: 14px; min-height: 40px; padding: 0 18px; background: rgb(13 13 15 / 0.78); color: #f2f2ef; font-size: 0.9rem; font-weight: 500; translate: -50% 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fiche-body { display: grid; gap: 16px; padding: 24px 28px 28px; }
.fiche h2 { font-size: 1.5rem; }
.fiche .fiche-pitch { margin: -8px 0 0; }
.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) */
.porte body > :not(.gate) { display: none; }
.gate { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; }
.gate-card { width: min(440px, 100%); padding: 32px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; }
.gate-card h1 { margin-top: 28px; font-size: 1.7rem; letter-spacing: -0.035em; line-height: 1.15; }
.gate-lead { margin-top: 14px; color: var(--muted); }
.gate-how { margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); }
.gate-how b { color: var(--text); font-weight: 600; white-space: nowrap; }
.gate-or { margin-top: 24px; color: var(--muted); font-size: 0.95rem; }
.gate-link { margin-top: 6px; font-weight: 500; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.gate-card .btn { width: 100%; margin-top: 16px; }
.gate-status { min-height: 1.6em; margin-top: 12px; color: var(--muted); font-size: 0.95rem; }

/* Liens de texte */
.footer a, .legal a, .sheet a { color: inherit; text-underline-offset: 3px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--text); text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer p { flex-basis: 100%; }
/* Les moyens de paiement acceptés : quatre marques d'une seule couleur, puis « Paiement sécurisé par Stripe » */
.footer-pay { 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 */
.legal { max-width: 74ch; padding-block: clamp(24px, 5vw, 64px); }
.legal h2 { margin-top: 48px; font-size: 1.4rem; letter-spacing: -0.025em; line-height: 1.25; }
.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-date { color: var(--muted); }
/* Le guide pas à pas (/guide, fabriqué par scripts/guide.mjs) : un mode d'emploi. En tête, le titre et le chapeau ;
   dessous, le sommaire à gauche qui reste en vue (repris de la refonte locale du 12 octobre 2026) et les étapes,
   chacune avec son numéro, ses gestes numérotés séparés d'un filet. Sur téléphone, pas de sommaire. */
.guide { max-width: none; }
.guide .btn { color: var(--on-accent); }
.guide a:not(.btn) { color: inherit; text-underline-offset: 3px; }
.guide code { padding: 1px 6px; border-radius: 6px; background: var(--surface); font-family: var(--mono); font-size: 0.9em; }
.guide-head { max-width: 74ch; padding-bottom: clamp(32px, 5vw, 56px); }
.guide .eyebrow { margin-bottom: 14px; }
.guide h1 { max-width: 15ch; font-size: clamp(2.2rem, 5.6vw, 4rem); letter-spacing: -0.05em; line-height: 1; text-wrap: balance; }
.guide .guide-lead { max-width: 54ch; margin-top: clamp(18px, 2.2vw, 26px); color: var(--muted); font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; }
.guide-cols { display: grid; grid-template-columns: minmax(190px, 260px) 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-body h2 { margin-top: 0; font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -0.04em; line-height: 1.1; }
.guide-body 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-body h2 i { display: none; }
.guide-body h2 b { display: block; font-weight: inherit; }
.guide-body h2 b::first-letter { text-transform: uppercase; }
.guide-body p { margin-block: 16px 0; }
.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; margin: 0; padding: 13px 0 13px 2.4rem; line-height: 1.6; }
.guide .guide-body li + li { 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 .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: 767px) {
  .guide-cols { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { display: none; }
}

/* « Comment ça marche » (/comment-ca-marche, fabriquée par scripts/guide.mjs) : un vrai guide (Arthur, 21 octobre
   2026). En tête le titre et ce qu'il faut ; puis quatre étapes, chacune avec ses gestes et une image de l'écran, côte
   à côte sur ordinateur (l'image change de côté d'une étape à l'autre), en cartes l'une sous l'autre sur téléphone ;
   pour finir, le choix du prompt. */
.howto { --shot: color-mix(in srgb, var(--surface) 70%, var(--bg)); padding-block: clamp(28px, 5vw, 72px) clamp(56px, 8vw, 120px); }
.howto .eyebrow { margin-bottom: 16px; }
.howto h1 { max-width: 16ch; font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -0.055em; line-height: 0.98; text-wrap: balance; }
.howto-lead { max-width: 46ch; margin-top: clamp(16px, 2vw, 24px); color: var(--muted); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; }
.howto-needs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(24px, 3vw, 36px); }
.howto-needs > span { color: var(--muted); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; }
.howto-needs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.howto-needs li { padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 99px; font-size: 0.92rem; }
.howto-needs li::before { content: "✓"; margin-right: 8px; color: var(--accent); font-weight: 700; }
/* Les étapes. */
.howto-steps { margin: clamp(48px, 7vw, 96px) 0 0; padding: 0; list-style: none; }
.howto-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding-block: clamp(36px, 5vw, 72px); border-top: 1px solid var(--line); }
.howto-step:nth-child(even) .howto-text { order: 2; }
.howto-n { margin-bottom: 14px; color: var(--accent); font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; }
.howto-text h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -0.045em; line-height: 1.02; }
.howto-text ul { margin: clamp(18px, 2vw, 26px) 0 0; padding: 0; list-style: none; }
.howto-text li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent); color: var(--muted); line-height: 1.55; }
.howto-text li::before { content: ""; position: absolute; top: calc(12px + 0.6em); left: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.howto-text a { color: var(--text); text-underline-offset: 3px; }
/* L'image de l'écran : une fenêtre sombre, coins arrondis, une lueur orange derrière. */
.shot { position: relative; isolation: isolate; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: 20px; background: var(--shot); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.9); }
.shot::before { content: ""; position: absolute; z-index: -1; inset: 18% 10% -8%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 90 31 / 0.2), transparent); filter: blur(40px); pointer-events: none; }
.shot-app { padding: 0; overflow: hidden; }
.shot-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.shot-bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.shot-tabs { display: flex; gap: 4px; margin: 0 auto; padding: 3px; border-radius: 99px; background: var(--bg); }
.shot-tabs b { padding: 5px 16px; border-radius: 99px; color: var(--muted); font-size: 0.82rem; font-weight: 500; }
.shot-tabs .is-on { background: var(--surface); box-shadow: 0 0 0 1px var(--accent); color: var(--text); }
.shot-body { display: grid; gap: 12px; padding: clamp(18px, 2.4vw, 28px); }
.shot-folder { display: flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--mono); font-size: 0.85rem; }
.shot-icon { width: 18px; height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 80%, var(--bg)); }
.shot-line { height: 10px; border-radius: 99px; background: var(--line); }
.shot-line.is-short { width: 62%; }
.shot-input { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 14px 14px 14px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 0.9rem; }
.shot-send { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); }
.shot-kicker { color: var(--muted); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; }
.shot-name { margin-top: 18px; font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 650; letter-spacing: -0.04em; }
.shot-price { margin-top: 6px; color: var(--accent); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 650; letter-spacing: -0.05em; line-height: 1; }
.shot-price small { color: var(--muted); font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.shot-plan ul { margin: 22px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line); }
.shot-plan li::before { content: "✓"; margin-right: 10px; color: var(--accent); font-weight: 700; }
.shot-prompts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shot-prompts figure { position: relative; margin: 0; }
.shot-prompts img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; opacity: 0.55; }
.shot-prompts figcaption { margin-top: 8px; color: var(--muted); font-size: 0.82rem; line-height: 1.3; }
.shot-prompts .is-picked img { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.shot-prompts .is-picked figcaption { color: var(--text); }
.shot-prompts em { position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.72rem; font-style: normal; font-weight: 600; }
.shot-msg { margin-left: auto; max-width: 92%; padding: 14px 16px; border-radius: 16px 16px 4px 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 0.9rem; line-height: 1.5; }
.shot-prompt { color: var(--muted); font-family: var(--mono); font-size: 0.8rem; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.shot-msg p + p { margin-top: 8px; }
.shot-done { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.shot-done li { padding: 5px 12px; border-radius: 99px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); font-size: 0.82rem; }
.shot-done li::before { content: "✓"; margin-right: 7px; color: var(--accent); font-weight: 700; }
.shot-file { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); font-family: var(--mono); font-size: 0.85rem; }
.shot-file video { width: 104px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: var(--surface); }
/* Pour finir : le choix du prompt, en grand. */
.howto-close { padding-top: clamp(56px, 8vw, 112px); border-top: 1px solid var(--line); }
.howto-close h2 { max-width: 11ch; font-size: clamp(2.5rem, 7vw, 5.4rem); letter-spacing: -0.06em; line-height: 0.95; }
.howto-close > p:not(.howto-more) { max-width: 44ch; margin-top: 18px; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.howto .btn { min-height: 54px; margin-top: 28px; padding-inline: 28px; font-size: 1.05rem; }
.howto-more { margin-top: 18px; color: var(--muted); font-size: 0.92rem; }
.howto-more a { color: var(--text); text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .howto-head > * { animation: rise 0.9s var(--ease) calc(var(--k, 0) * 0.07s) both; }
  .howto-head > :nth-child(2) { --k: 1; }
  .howto-head > :nth-child(3) { --k: 2; }
  .howto-head > :nth-child(4) { --k: 3; }
}
@media (max-width: 860px) {
  /* Téléphone et tablette : une carte par étape, le texte puis l'image de l'écran. */
  .howto-step { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 18px; padding: 22px 18px 18px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--surface) 40%, var(--bg)); }
  .howto-step:nth-child(even) .howto-text { order: 0; }
  .howto-step .shot { margin-inline: -6px; }
  .howto-text h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .howto-text li { padding-block: 10px; font-size: 1rem; }
  .shot-prompts { gap: 8px; }
  .howto-close { margin-top: 56px; padding-top: 48px; }
  .howto .btn { width: 100%; }
  .howto-more { text-align: center; }
}

/* Encadré imposé par la loi sur les garanties */
.legal-box {
  margin-top: 20px;
  padding: 8px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  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'un pack : en-tête */
.product { padding-block: clamp(24px, 5vw, 64px) clamp(32px, 5vw, 56px); }
.product-media { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(32px, 5vw, 72px); }
.product-media .media { border-radius: 16px; }
/* Vidéo verticale (9:16) : sa hauteur tient dans l'écran, elle est centrée dans sa colonne */
.product-media .media-vertical { aspect-ratio: 9 / 16; width: min(100%, calc(min(78vh, 720px) * 9 / 16)); justify-self: center; }
.product-copy { max-width: 46rem; }
.crumb { display: inline-block; margin-bottom: 20px; color: var(--muted); font-size: 0.95rem; text-decoration: none; }
.crumb::before { content: "←"; margin-right: 8px; }
.crumb:hover { color: var(--text); }
.product .lead { max-width: 46ch; margin-block: 20px 28px; }
.product-buy { display: flex; align-items: center; gap: 20px; }
.product-note { margin-top: 16px; color: var(--muted); font-size: 0.95rem; }

/* Page d'un pack : 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-size: 0.9rem; }
.facts dd { margin: 4px 0 0; font-size: 1.08rem; font-weight: 500; line-height: 1.4; text-wrap: balance; }

/* Page d'un pack : le guide, un titre à gauche et son contenu à droite */
.guide-row { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 16px clamp(24px, 5vw, 72px); padding-block: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.guide-row h2 { font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.guide-row > div { max-width: 68ch; }
.guide-row p { color: var(--muted); }
.guide-row .guide-text { color: var(--text); font-size: 1.08rem; }
.guide-row a { color: var(--text); text-underline-offset: 3px; }

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

.timeline li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.timeline li:first-child { padding-top: 0; border-top: 0; }
.when { color: var(--muted); font-size: 0.95rem; 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: 20px; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

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

/* Page d'un pack : rappel de l'achat en bas */
.product-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-block: clamp(32px, 5vw, 56px) 8px; }
.product-end h2 { font-size: 1.6rem; }
.product-end p { margin-top: 6px; color: var(--muted); }

/* Mouvement.
   - Héro : le titre monte ligne par ligne derrière un cache, le reste suit, la pellicule glisse puis défile.
   - Au défilement : ce qui porte data-reveal apparaît (app.js pose .is-in), avec un léger décalage (--i).
   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 drift { to { transform: translateX(calc(-50% - 7px)); } }
@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; }
  .motion .hero .proof { transition-delay: 0.45s; }
  .reel { animation: rise 1.1s var(--ease) 0.36s both; }
  .reel-track { animation: drift 80s linear infinite; }
  .reel:hover .reel-track { animation-play-state: paused; }
  /* 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; }
  .reel { overflow-x: auto; }
}

/* Grain léger sur le fond sombre de l'accueil : un voile fixe, qui ne capte aucun clic */
.home::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) {
  .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; }
  /* Dès que le menu a plus d'un lien, il n'y a plus la place pour le bouton sur un téléphone : le menu suffit. */
  .nav-links:has(a + a) ~ .nav-cta { display: none; }
  .hero h1 { font-size: clamp(1.95rem, 8.7vw, 3.6rem); }
  .hero h1 .line { display: block; }
  .gets, .calc { grid-template-columns: 1fr; }
  .files li { grid-template-columns: 1fr; }
  .how li { grid-template-columns: 44px 1fr; }
  .how p { grid-column: 2; }
  /* 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-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: 6px; padding-top: 8px; font-size: 0.84rem; line-height: 1.45; }
  .offer-picks { margin-top: 8px; }
  .lot-sizes { grid-auto-flow: row; }
  .lot-summary { flex-wrap: wrap; }
  .lot-summary p { flex-basis: 100%; }
  .lot-summary .btn { margin-left: auto; }
  .product-media { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts > div, .facts > div + div { padding: 14px 0; border-left: 0; }
  .facts > div + div { border-top: 1px solid var(--line); }
  .guide-row { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 84px 1fr; gap: 12px; }
}
@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); }
}

/* ---------- La page projet (/projet) : on fait ta vidéo, ou on t'apprend à la faire ---------- */
/* Deux colonnes sur ordinateur : à gauche, la promesse et les vidéos du site ; à droite, le formulaire, dont les
   deux offres sont les premières cases. Une seule colonne sur téléphone : la promesse, le formulaire, puis les vidéos. */
.projet { padding-block: clamp(24px, 5vw, 64px) clamp(56px, 9vw, 120px); }
.projet-cols { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
.projet-eyebrow { color: var(--accent); font-family: var(--mono); font-size: 0.8rem; }
.projet h1 { margin-top: 12px; font-size: clamp(2.4rem, 5.6vw, 4.4rem); letter-spacing: -0.055em; line-height: 0.98; text-wrap: balance; }
.projet .lead { max-width: 40ch; margin-block: 20px 0; }
.projet-proof { margin-top: clamp(28px, 4vw, 48px); padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }
.projet-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.projet-strip a { display: block; color: inherit; text-decoration: none; }
.projet-strip img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; object-fit: cover; background: var(--line); transition: transform 0.4s var(--ease), opacity 0.4s; }
.projet-strip a:hover img { transform: scale(1.03); }
.projet-strip span { display: block; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }

.projet-form { display: grid; gap: 18px; }
.projet-offers { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.projet-offers legend, .projet-field > span { margin-bottom: 8px; padding: 0; color: var(--muted); font-family: var(--mono); font-size: 0.78rem; }
.projet-field em { font-style: normal; opacity: 0.7; }
.projet-offer { position: relative; display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, transform 0.25s var(--ease); }
.projet-offer:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.projet-offer:active { transform: scale(0.99); }
.projet-offer: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); }
.projet-offer:has(input:focus-visible), .projet-unsure:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.projet-offer input, .projet-unsure input { position: absolute; opacity: 0; pointer-events: none; }
.projet-offer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.projet-offer-head strong { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.projet-offer-head b { flex: none; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.projet-offer-text { max-width: 46ch; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.projet-unsure { position: relative; justify-self: start; padding: 6px 0; color: var(--muted); font-size: 0.95rem; cursor: pointer; }
.projet-unsure span { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.projet-unsure:has(input:checked) { color: var(--text); }
.projet-unsure:has(input:checked) span { text-decoration-color: var(--accent); }
.projet-unsure:has(input:checked) span::before { content: "✓ "; color: var(--accent); }
.projet-field { display: grid; }
.projet-field input, .projet-field textarea { width: 100%; min-width: 0; min-height: 52px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: var(--text); font: inherit; font-size: 1rem; line-height: 1.45; resize: vertical; transition: border-color 0.25s; }
.projet-field textarea { min-height: 140px; }
.projet-field input:focus-visible, .projet-field textarea:focus-visible { border-color: var(--accent); outline: none; }
.projet-field ::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.projet-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.projet-form .btn { justify-self: start; margin-top: 4px; }
.projet-form .btn:disabled { opacity: 0.6; cursor: progress; }
.projet-note { margin-top: -6px; color: var(--muted); font-size: 0.88rem; }
.projet-status:empty { display: none; }
.projet-status { color: var(--muted); font-size: 0.95rem; }
.projet-status.is-error { color: #ff8a65; }
.projet-done { display: grid; justify-items: start; gap: 14px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: 16px; animation: projet-in 0.6s var(--ease) both; }
.projet-done-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 1.3rem; font-weight: 800; }
.projet-done h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.04em; }
.projet-done p { max-width: 44ch; color: var(--muted); line-height: 1.5; }
.projet-done b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
@keyframes projet-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .projet-done { animation: none; } }
.projet-shown .projet-proof { margin-top: 0; }
@media (min-width: 900px) {
  .projet-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); grid-template-areas: "intro form" "shown form"; grid-template-rows: auto 1fr; }
  .projet-intro { grid-area: intro; }
  .projet-form { grid-area: form; }
  .projet-shown { grid-area: shown; }
}
@media (max-width: 599px) {
  .projet-form .btn { width: 100%; justify-self: stretch; }
  .projet-strip { grid-template-columns: repeat(2, 1fr); }
  .projet-strip li:nth-child(n + 5) { display: none; }
}

/* L'aperçu du prompt (groupe essayé du test « apercu1 », voir offre.js) : le début du prompt tel que l'acheteur le
   recevra, dans une feuille qui s'efface vers le bas, puis la liste de ses chapitres. Sur ordinateur, il prend place
   sous la vidéo ; sur la fiche du téléphone, sous « Ce que tu achètes ». Ses lignes entrent quand il passe à l'écran. */
.flow-side { display: grid; gap: 22px; align-content: center; min-width: 0; }
.flow-side:has(.flow-media.is-vertical) { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.flow-side .flow-media.is-vertical { height: min(54dvh, 480px); }
.apercu { display: grid; gap: 12px; }
.apercu-slot:empty { display: none; }
.listing-block .apercu { margin-top: 18px; }
.apercu-eyebrow { color: var(--muted); font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.apercu-title { margin-top: -6px; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.apercu-doc { max-height: 27em; overflow: hidden; padding: 16px 18px 0; border-radius: 16px; background: #131316; box-shadow: inset 0 0 0 1px var(--line); color: #c8c8cf; font-size: 0.84rem; line-height: 1.55; -webkit-mask-image: linear-gradient(#000 62%, transparent 97%); mask-image: linear-gradient(#000 62%, transparent 97%); }
.apercu-doc p { margin: 0 0 0.7em; }
.apercu-doc .apercu-h { margin-top: 0.2em; color: var(--text); font-weight: 600; }
.apercu-doc .apercu-h span { color: var(--accent); font-family: var(--mono); font-weight: 400; }
.apercu-doc .apercu-cut { color: var(--muted); font-family: var(--mono); }
.apercu-more { margin-top: -4px; color: var(--muted); font-size: 0.86rem; }
.apercu-sub { margin-top: 6px; font-size: 0.92rem; font-weight: 600; }
.apercu-chapters { columns: 2; column-gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: chapitre; font-size: 0.84rem; line-height: 1.35; }
.apercu-chapters li { counter-increment: chapitre; display: grid; grid-template-columns: 2em minmax(0, 1fr); break-inside: avoid; padding-block: 6px; border-top: 1px solid var(--line); }
.apercu-chapters li::before { content: counter(chapitre, decimal-leading-zero); padding-top: 0.12em; color: var(--accent); font-family: var(--mono); font-size: 0.74rem; }
.flow-side .flow-media:not(.is-vertical) { width: min(100%, calc(28dvh * 16 / 9)); }
.flow-side .apercu-doc { max-height: 18em; font-size: 0.8rem; }
/* Avec une vidéo verticale, l'aperçu tient à côté d'elle : la feuille est plus courte, les chapitres sur une colonne. */
.flow-side:has(.flow-media.is-vertical) .apercu-doc { max-height: 15em; }
.flow-side:has(.flow-media.is-vertical) .apercu-chapters { columns: 1; font-size: 0.78rem; }
.flow-side:has(.flow-media.is-vertical) .apercu-chapters li { padding-block: 3px; }
.flow-side:has(.flow-media.is-vertical) .apercu-chapters li span { white-space: normal; }
.flow-side .apercu-chapters { font-size: 0.8rem; }
.flow-side .apercu-chapters li { padding-block: 4px; }
.flow-side .apercu-chapters li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .apercu-doc p, .apercu-chapters li { opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .apercu.is-seen .apercu-doc p, .apercu.is-seen .apercu-chapters li { opacity: 1; transform: none; }
  .apercu.is-seen .apercu-chapters li { transition-delay: calc(240ms + var(--i, 0) * 45ms); }
}
@media (max-width: 767px) {
  /* Sans la fiche (page habituelle sur téléphone), l'aperçu ne s'intercale pas entre la vidéo et les offres. */
  .flow-side .apercu-slot { display: none; }
  .flow-side:has(.flow-media.is-vertical) { grid-template-columns: 1fr; }
  .flow-side .flow-media.is-vertical { height: auto; }
  .apercu-chapters { columns: 1; }
}

/* ---------- La page business (/business) : vendre des vidéos motion design aux entreprises ---------- */
.biz { padding-bottom: clamp(56px, 9vw, 120px); }
.biz-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding-top: clamp(24px, 5vw, 72px); }
.biz-eyebrow { color: var(--accent); font-family: var(--mono); font-size: 0.8rem; }
.biz h1 { margin-top: 12px; font-size: clamp(2.3rem, 4.8vw, 3.9rem); letter-spacing: -0.055em; line-height: 0.98; text-wrap: balance; }
.biz .lead { max-width: 46ch; margin-block: 20px 28px; }
.biz-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.biz-alt { color: var(--muted); text-underline-offset: 4px; }
.biz-alt:hover { color: var(--text); }
.biz-hero-media { margin: 0; }
.biz-hero-media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 14px; background: #131110; }
.biz-hero-media figcaption, .biz-voice figcaption { margin-top: 10px; color: var(--muted); font-family: var(--mono); font-size: 0.78rem; }
.biz-block { padding-top: clamp(64px, 9vw, 128px); }
.biz-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 14px clamp(32px, 6vw, 96px); margin-bottom: clamp(24px, 3.5vw, 44px); }
.biz-head p { max-width: 46ch; color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.55; }
.biz-head p b { color: var(--text); font-weight: 600; }
.biz-head a { color: var(--accent); text-underline-offset: 3px; }
.biz-block > h2 { margin-bottom: clamp(24px, 3.5vw, 44px); }
.biz-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.biz-steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.biz-steps b { color: var(--accent); font-family: var(--mono); font-size: 0.85rem; font-weight: 500; }
.biz-steps strong { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; }
.biz-steps span { color: var(--muted); line-height: 1.55; }
.biz-clients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.biz-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.biz-tile-media { display: block; margin-bottom: 10px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 12px; background: #0a0a0b; }
.biz-tile-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.biz-tile-media.is-vertical video { object-fit: contain; }
.biz-tile strong { font-weight: 600; line-height: 1.3; }
.biz-tile span:last-child { color: var(--muted); font-size: 0.9rem; }
.biz-buyer { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3.5vw, 56px); }
.biz-buyer figure { margin: 0; }
.biz-buyer-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 14px; background: #131110; }
.biz-buyer-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.biz-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); }
.biz-sound[aria-pressed="true"] { background: var(--accent); color: #111; }
.biz-voice { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.biz-play { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: #111; cursor: pointer; }
.biz-play video { display: block; width: 100%; height: auto; aspect-ratio: 1050 / 242; pointer-events: none; }
.biz-offer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 3.5vw, 44px); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 20px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 60%); }
.biz-offer-main { display: flex; flex-direction: column; align-items: flex-start; }
.biz-offer h2 { max-width: 16ch; margin-top: 10px; font-size: clamp(2rem, 3.2vw, 2.75rem); }
.biz-price { display: flex; align-items: baseline; gap: 12px; margin-top: 20px; }
.biz-price strong { font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.biz-price span { color: var(--muted); }
.biz-worth { margin-top: 8px; color: var(--muted); }
.biz-offer-main .btn { min-height: 56px; margin-top: 26px; }
.biz-offer-main .biz-small { margin-top: 12px; }
.biz-offer-side { padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / 0.025); }
.biz-side-title { margin-bottom: 18px; color: var(--muted); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.biz-list { display: grid; align-content: start; gap: 14px; margin: 0; padding: 0; list-style: none; }
.biz-list li { position: relative; padding-left: 34px; color: var(--muted); line-height: 1.45; }
.biz-list li::before { content: "✓"; position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 0.75rem; font-weight: 700; }
.biz-list b { color: var(--text); font-weight: 600; }
.biz-small { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.biz-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; }
.biz-form input { flex: 1 1 260px; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 16px; background: transparent; color: var(--text); font: inherit; font-size: 1rem; }
.biz-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.biz-form .btn { min-height: 52px; }
.biz-form .biz-small { flex-basis: 100%; margin-top: 4px; }
.biz [hidden] { display: none; }
@media (max-width: 860px) {
  .biz-hero, .biz-head, .biz-buyer, .biz-offer { grid-template-columns: 1fr; }
  .biz-offer-main .btn { width: 100%; min-height: 50px; justify-content: center; margin-top: 14px; }
  /* Sur téléphone, l'offre tient sur un écran : moins de marges, un titre et une liste plus serrés. */
  /* Sur téléphone, l'offre tient dans un peu plus d'un demi-écran : tout est resserré, et la liste de ce qu'on reçoit
     perd son encadré. */
  .biz-offer { gap: 14px; padding: 18px 16px; border-radius: 16px; }
  .biz-offer h2 { max-width: none; margin-top: 6px; font-size: 1.3rem; }
  .biz-price { gap: 8px; margin-top: 10px; }
  .biz-price strong { font-size: 2.1rem; }
  .biz-price span { font-size: 0.9rem; }
  .biz-worth { margin-top: 4px; font-size: 0.84rem; line-height: 1.4; }
  .biz-offer-main .biz-small { margin-top: 8px; }
  .biz-offer-side { padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .biz-side-title { display: none; }
  .biz-list { gap: 6px; font-size: 0.86rem; }
  .biz-list li { padding-left: 24px; line-height: 1.35; }
  .biz-list li::before { top: 1px; width: 16px; height: 16px; font-size: 0.6rem; }
  .biz-small { font-size: 0.74rem; }
  .biz-steps { grid-template-columns: 1fr; }
  .biz-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* La mention sous une vidéo d'exemple qui montre une vraie marque (`mention` dans products.js). */
.media-note { margin: 10px 0 0; color: var(--muted); font-size: 0.85rem; }

/* Parcours « revenus » (test « revenus1 », groupe E) : le kit pour vendre, pièce par pièce, en tête des offres. */
.sell { display: grid; gap: 16px; margin: 0 0 14px; padding: 20px 18px 18px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, var(--surface)), var(--surface) 70%); }
.sell-tag { margin: 0; color: var(--accent); font: 500 0.74rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.sell-title { margin: -6px 0 0; font-size: clamp(1.3rem, 5vw, 1.7rem); line-height: 1.12; letter-spacing: -0.03em; }
.sell-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sell-items li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sell-items li > span:nth-child(2) { display: grid; gap: 1px; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.sell-items b { color: var(--text); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; }
.sell-visual { display: grid; place-items: center; width: 52px; height: 52px; }
.sell-book { width: 36px; height: auto; border-radius: 4px; transform: rotate(-5deg); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line); }
.sell-mosaic { grid-template-columns: repeat(3, 1fr); align-content: center; gap: 2px; }
.sell-mosaic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.sell-files, .sell-check { border-radius: 12px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-size: 1rem; font-weight: 650; letter-spacing: -0.03em; }
.sell-check { width: 40px; height: 40px; justify-self: center; border-radius: 50%; font-size: 0.9rem; }
.sell-free { padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 0.72rem; font-style: normal; font-weight: 650; white-space: nowrap; }
.sell-apart { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.sell-go { width: 100%; }
.sell-after { margin: -4px 0 0; color: var(--muted); font-size: 0.82rem; text-align: center; }
.sell-after a { color: inherit; text-underline-offset: 3px; }
.sell-or { margin: 4px 0 10px; color: var(--muted); font: 500 0.74rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.flow-panel.is-kit .flow-pay { display: none; }
/* Test « panier1 », groupe E : le prompt personnalisé à ajouter, sous les offres (jamais coché d'avance). */
.bump { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 12px 0 0; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, transparent); cursor: pointer; }
.bump[hidden] { display: none; }
.bump input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.bump-text { display: grid; gap: 2px; }
.bump-text b { font-size: 0.95rem; font-weight: 600; }
.bump-text span { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.bump-price { display: grid; justify-items: end; gap: 1px; white-space: nowrap; }
.bump-price s { color: var(--muted); font-size: 0.78rem; }
.bump-price strong { color: var(--accent); font-size: 1rem; }
@media (max-width: 767px) {
  .bump { gap: 10px; padding: 12px 14px; }
  .bump-text b { font-size: 0.88rem; }
  .bump-text span { font-size: 0.76rem; }
}
/* Sur téléphone, le kit tient en un écran, bouton compris (demande d'Arthur du 26 octobre 2026). */
@media (max-width: 767px) {
  .sell { gap: 10px; padding: 14px 14px 12px; border-radius: 14px; }
  .sell-tag { font-size: 0.66rem; }
  .sell-title { margin-top: -4px; font-size: 1.12rem; }
  .sell-items { gap: 7px; }
  .sell-items li { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; }
  .sell-items li > span:nth-child(2) { gap: 0; font-size: 0.7rem; line-height: 1.3; }
  .sell-items b { font-size: 0.8rem; line-height: 1.25; }
  .sell-visual { width: 32px; height: 32px; }
  .sell-book { width: 22px; border-radius: 2px; }
  .sell-mosaic { gap: 1px; }
  .sell-mosaic img { border-radius: 2px; }
  .sell-files { border-radius: 8px; font-size: 0.72rem; }
  .sell-check { width: 24px; height: 24px; font-size: 0.7rem; }
  .sell-free { padding: 2px 7px; font-size: 0.64rem; }
  .sell-apart { font-size: 0.74rem; }
  .sell-go { min-height: 46px; font-size: 0.95rem; }
  .sell-after { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .sell-items li { animation: rise 0.7s var(--ease) both; animation-delay: calc(160ms + var(--k, 0) * 90ms); }
}