/* ════════════════════════════════════════════════════════════════════
   FLIRTING LAB - site vitrine (waitlist)
   Identity: Afterglow. Structure ref: postava.app.
   ════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree-italic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --rose: #FF3D71;
  --corail: #FF5F45;
  --ambre: #FFB25A;
  --ok: #46D6A8;
  --canvas: #0F0A0C;
  --card: #1D1216;
  --card-deep: #181014;
  --ink-hi: #FFF4EC;
  --ink-mid: #C9B8BE;
  --ink-low: #8F7E85;
  --hairline: rgba(255, 244, 236, 0.10);
  /* Fraunces : serif editorial variable (opsz 9..144, wght 100..900). L'axe
     optique suit la taille tout seul (font-optical-sizing est auto par defaut),
     donc les gros titres gagnent du contraste et les petits restent solides. */
  --display: 'Fraunces', serif;
  --sans: 'Figtree', system-ui, sans-serif;
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.8rem + 4vw, 5rem);
  --step-5: clamp(3rem, 2rem + 5.5vw, 6.2rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  /* Largeur d'un iPhone de la galerie. Bornee aussi par la hauteur dispo : sur
     une fenetre courte, une carte a 290px passerait sous la barre de nav (le
     ratio de l'ecran est 860/1869 = 0.46 ; 12rem couvrent la barre de nav,
     la legende et un peu d'air). */
  --card-w: min(clamp(220px, 20vw, 290px), calc((100svh - 12rem) * 0.46));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-punch: cubic-bezier(0.7, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--canvas);
  color: var(--ink-hi);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--rose); color: var(--canvas); }

h1, h2, h3, .display {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ── film grain ─────────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: -100px;
  z-index: 60;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain-shift 0.9s steps(3) infinite; }
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-40px, 25px); }
  66% { transform: translate(30px, -35px); }
  100% { transform: translate(0, 0); }
}

/* ── shared bits ────────────────────────────────────────────────── */
.kicker {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambre);
  display: flex;
  align-items: center;
  gap: 0.85em;
}
.kicker::before {
  content: "";
  width: 2.2em;
  height: 1px;
  background: linear-gradient(90deg, var(--corail), transparent);
  flex: none;
}

.wrap { max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }

.grad-text {
  background: linear-gradient(100deg, var(--ambre) 0%, var(--corail) 45%, var(--rose) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* scroll reveals */
.rv { opacity: 0; transform: translateY(28px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── nav ────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;
}
.nav.scrolled {
  background: rgba(15, 10, 12, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
}
.wordmark .dot { color: var(--rose); }

/* ── buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  border-radius: 9999px;
  padding: 0.8em 1.6em;
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  letter-spacing: 0.01em;
  border: none;
  position: relative;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
  will-change: transform;
}
.btn-primary {
  color: #2A0812;
  background: linear-gradient(100deg, var(--ambre), var(--corail) 55%, var(--rose));
  box-shadow: 0 0 0 1px rgba(255, 178, 90, 0.25), 0 8px 30px -8px rgba(255, 61, 113, 0.55);
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(255, 178, 90, 0.4), 0 12px 40px -8px rgba(255, 61, 113, 0.8); }
.btn-ghost {
  color: var(--ink-hi);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 244, 236, 0.35); }

/* ── iPhone mockup (real titanium device), holds a screenshot ──────
   The screenshots already bake in the status bar + dynamic-island pill
   (same as the Postava reference), so the frame draws NO island of its
   own: just titanium rails, a black bezel, and side buttons. One
   component, reused by the hero and the How-it-works gallery. */
.iphone {
  position: relative;
  padding: clamp(8px, 0.8vw, 11px);
  border-radius: clamp(2.3rem, 3.1vw, 2.9rem);
  background: linear-gradient(135deg,
    #35353a 0%, #131315 24%, #2c2c30 46%, #0d0d0f 62%,
    #26262a 82%, #131315 100%);
  box-shadow:
    0 42px 90px -32px rgba(0, 0, 0, 0.95),
    0 0 130px -44px rgba(255, 61, 113, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 1px rgba(255, 255, 255, 0.14),
    inset 0 -1.5px 3px rgba(0, 0, 0, 0.6);
}
.iphone-screen {
  position: relative;
  border-radius: clamp(1.7rem, 2.4vw, 2.25rem);
  overflow: hidden;
  background: #000;
  aspect-ratio: 860 / 1869;
  box-shadow: 0 0 0 2px #050506, inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.iphone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* black-titanium side buttons: action + volume rocker (left), power (right) */
.iphone .k {
  position: absolute;
  width: clamp(2.5px, 0.22vw, 3.4px);
  background: linear-gradient(90deg, #131315, #34343a 60%, #46464c);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.iphone .k.l { left: -2.5px; border-radius: 3px 0 0 3px; background: linear-gradient(270deg, #131315, #34343a 60%, #46464c); }
.iphone .k.r { right: -2.5px; border-radius: 0 3px 3px 0; }
.iphone .k-action { top: 19.5%; height: 4%; }
.iphone .k-vup { top: 27%; height: 6.6%; }
.iphone .k-vdn { top: 35.4%; height: 6.6%; }
.iphone .k-pow { top: 24.5%; height: 11.5%; }

/* ── hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(6rem, 12vh, 8rem) 0 clamp(2.5rem, 6vh, 4rem);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
  opacity: 0.22;
  filter: saturate(1.15) sepia(0.1);
  transform: scale(1.06);
  will-change: transform;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--canvas) 12%, rgba(15,10,12,0.55) 55%, rgba(15,10,12,0.75) 100%),
    linear-gradient(180deg, rgba(15,10,12,0.6) 0%, transparent 35%, var(--canvas) 97%);
}
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 60% at 78% 40%, rgba(255, 95, 69, 0.22) 0%, rgba(255, 61, 113, 0.08) 45%, transparent 70%);
  animation: breathe 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } }

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}
.hero-copy { max-width: 33rem; }
.hero .kicker { margin-bottom: 1.3rem; }
.hero h1 {
  font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.4rem);
  letter-spacing: -0.015em;
}
/* the recognition line: the failure the reader already knows, before any
   mention of the product. Carries more weight than the mechanics below it. */
.hero-hook {
  margin-top: 1.4rem;
  max-width: 30ch;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1.35;
  text-wrap: balance;
  letter-spacing: -0.005em;
  color: var(--ink-hi);
  font-weight: 550;
}
.hero-sub {
  margin-top: 1.1rem;
  max-width: 40ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-mid);
  font-weight: 450;
}
.hero-sub strong { color: var(--ink-hi); font-weight: 650; }
.hero-visual { justify-self: center; width: 100%; max-width: 26rem; }

/* ── hero: the full replay screen in a real iPhone, framed on its top
   (the impulse curve). The device peeks in from above and fades out
   below the fold, the whole screen is real, we just crop to its top. */
.hero-phone {
  position: relative;
  height: min(74svh, 700px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
.hero-phone .iphone {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 12px);
}
@media (prefers-reduced-motion: reduce) {
  .hero-phone { height: auto; -webkit-mask-image: none; mask-image: none; }
  .hero-phone .iphone { position: static; transform: none; width: 100%; }
}

/* ── waitlist form ──────────────────────────────────────────────── */
.wl { margin-top: 2.2rem; }
.hero .wl { max-width: 30rem; }
.waitlist {
  display: flex;
  gap: 0.6rem;
  position: relative;
  flex-wrap: wrap;
}
.waitlist input {
  flex: 1 1 13rem;
  min-width: 0;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink-hi);
  background: rgba(255, 244, 236, 0.05);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 0.8em 1.4em;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}
/* piège à robots : jamais vu ni atteint par un humain, rempli par les scripts */
.waitlist .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.waitlist input::placeholder { color: var(--ink-low); }
.waitlist input:focus { border-color: rgba(255, 178, 90, 0.55); background: rgba(255, 244, 236, 0.08); }
.waitlist input[aria-invalid="true"] { border-color: var(--rose); }
.waitlist[hidden] { display: none; }
.wl-note {
  margin-top: 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-low);
}
.wl-done {
  margin-top: 1.4rem;
  font-size: var(--step-1);
  color: var(--ok);
  font-weight: 600;
}
.wl-error {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--rose);
  font-weight: 600;
}
.wl-error[hidden], .wl-done[hidden] { display: none; }

/* ── section scaffolding ────────────────────────────────────────── */
section { position: relative; }
.section-head { padding-top: clamp(5rem, 13vh, 9rem); margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.section-head h2 { font-size: var(--step-4); max-width: 15ch; margin-top: 1.1rem; }
.section-head .lede {
  margin-top: 1.3rem;
  color: var(--ink-mid);
  max-width: 50ch;
  font-size: var(--step-1);
  line-height: 1.5;
  font-weight: 450;
}

/* ── how it works: three numbered steps + a phone (Postava-style) ── */
.how-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  padding-top: clamp(4.5rem, 12vh, 8rem);
}
.how-copy { max-width: 34rem; }
.how-copy h2 { font-size: var(--step-3); max-width: 16ch; margin-top: 1.1rem; letter-spacing: -0.015em; line-height: 1.08; }
.how-steps { list-style: none; margin: 2.2rem 0 0; display: grid; gap: 1.5rem; }
.how-steps li { display: flex; gap: 1.1rem; align-items: flex-start; }
.how-steps .n {
  flex: none;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  display: grid; place-items: center;
  /* chiffres en sans : les numerales serif de Fraunces rapetissent dans la
     pastille et flottent. C'est de l'UI, pas du titrage. */
  font-family: var(--sans); font-weight: 800; font-size: 1.05rem; color: #2A0812;
  background: linear-gradient(135deg, var(--ambre), var(--rose));
  box-shadow: 0 6px 18px -8px rgba(255, 61, 113, 0.7);
}
.how-steps b { display: block; font-size: var(--step-1); font-weight: 700; color: var(--ink-hi); }
.how-steps p { color: var(--ink-mid); margin-top: 0.35rem; font-size: var(--step-0); line-height: 1.5; max-width: 36ch; }
.how-phone { justify-self: center; width: 100%; max-width: 300px; }
@media (max-width: 860px) {
  .how-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vh, 3.5rem); padding-top: clamp(3.5rem, 9vh, 6rem); }
  .how-copy { max-width: none; }
  /* meme bornage par la hauteur que le hero et la galerie : a 250px de large le
     device fait 543px de haut, il ne rentrait pas sous la barre de nav d'un
     iPhone court. */
  .how-phone { max-width: min(250px, calc((100svh - 6rem) * 0.46)); }
}

/* ── the app: horizontal pan of real screens (Postava-style) ───────
   Vertical scroll drives the row of iPhones to the right. It pins while
   panning, then releases cleanly at the end, and the scroll never sticks.
   ~3.5 phones visible at rest. Captions carry the narrative. */
.pan-wrap { position: relative; }
.pan-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 5rem; /* la barre de nav est fixe : sans ca elle mange le haut des telephones */
}
.pan-track {
  display: flex;
  /* L'ecart est derive, pas choisi : il est calcule pour qu'a l'arrivee sur la
     section le bord droit du viewport coupe le 4e telephone en son milieu, soit
     3 ecrans entiers + un demi (veto Thomas 2026-07-25). Le 4e commence a
     gutter + 3 x (carte + gap) ; on veut gutter + 3 x (carte + gap) + carte / 2
     = 100vw, d'ou gap = (100vw - gutter - 3,5 x carte) / 3. */
  gap: clamp(2.2rem, calc((100vw - var(--gutter) - 3.5 * var(--card-w)) / 3), 16rem);
  padding-inline: var(--gutter);
  align-items: flex-start;
  will-change: transform;
}
.demo-card {
  flex: none;
  width: var(--card-w);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.demo-card .iphone { width: 100%; }
.demo-cap {
  margin-top: 1.2rem;
  font-family: var(--display);
  font-weight: 650;
  font-size: var(--step-0);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-hi);
  text-align: center;
  max-width: 20ch;
  text-wrap: balance; /* evite le mot orphelin sur la derniere ligne */
}
/* mobile: native swipe carousel, no pinning / no JS pan */
@media (max-width: 900px) {
  .pan-wrap { height: auto !important; }
  .pan-sticky {
    position: static;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 0.5rem; /* annule aussi le padding-top de nav du desktop */
  }
  .pan-sticky::-webkit-scrollbar { display: none; }
  .pan-track { transform: none !important; gap: 1.4rem; }
  /* La largeur est bornee par la hauteur dispo, pas seulement par celle de
     l'ecran : sinon sur un iPhone court (SE : ~555px de viewport une fois la
     barre Safari deduite) le telephone depasse en haut ET en bas, et on ne
     voit plus un device mais un rectangle coupe aux deux bouts. 0.46 = 860/1869
     (le ratio de l'ecran) ; les 11rem reservent la barre de nav fixe (jusqu'a
     75px a 320px de large), la legende jusqu'a trois lignes et le padding du
     rail. Mesure a 320x460, le cas le plus serre : 41px de marge restante. */
  .demo-card { width: min(66%, calc((100svh - 11rem) * 0.46)); scroll-snap-align: center; }
  .demo-cap { font-size: var(--step-0); }
}
@media (max-width: 560px) { .demo-card { width: min(76%, calc((100svh - 11rem) * 0.46)); } }
/* reduced-motion: no pinning, plain horizontal scroll */
.pan-wrap.no-pin { height: auto !important; }
.pan-wrap.no-pin .pan-sticky { position: static; height: auto; overflow-x: auto; scrollbar-width: none; padding-block: 1rem; }
.pan-wrap.no-pin .pan-sticky::-webkit-scrollbar { display: none; }
.pan-wrap.no-pin .pan-track { transform: none !important; }

/* ── interlude ──────────────────────────────────────────────────── */
.interlude {
  position: relative;
  height: clamp(22rem, 62vh, 34rem);
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-top: clamp(4rem, 10vh, 7rem);
}
.interlude img {
  position: absolute;
  inset: 0;
  width: 100%; height: 120%;
  top: -10%;
  object-fit: cover;
  filter: sepia(0.14) saturate(1.15);
  will-change: transform;
}
.interlude::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--canvas) 0%, rgba(15,10,12,0.28) 32%, rgba(15,10,12,0.4) 68%, var(--canvas) 100%);
}
.interlude blockquote {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.12;
  text-align: center;
  max-width: 20ch;
  padding-inline: var(--gutter);
  text-shadow: 0 4px 40px rgba(15, 10, 12, 0.8);
}
.interlude blockquote small {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ambre);
  margin-top: 1.2rem;
}

/* ── method (anonymous coach) ───────────────────────────────────── */
.method { text-align: center; }
.method-inner { max-width: 44rem; margin-inline: auto; }
.method .kicker { justify-content: center; }
.method h2 { font-size: var(--step-4); max-width: 18ch; margin: 1.2rem auto 0; }
.method p {
  margin: 1.5rem auto 0;
  color: var(--ink-mid);
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: 1.55;
  font-weight: 450;
}
.method p strong { color: var(--ink-hi); font-weight: 650; }
.method-slot {
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  max-width: 30rem;
  border-radius: 1.4rem;
  padding: 1.5rem 1.6rem;
  background: linear-gradient(180deg, rgba(255,244,236,0.045), rgba(255,244,236,0.01));
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-align: left;
}
.method-slot .avatar {
  flex: none;
  width: 3.1rem; height: 3.1rem;
  border-radius: 9999px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,178,90,0.5), transparent 60%),
    linear-gradient(135deg, var(--corail), var(--rose));
  filter: blur(1px);
  box-shadow: inset 0 0 0 1px rgba(255,244,236,0.15);
}
.method-slot b { display: block; font-weight: 650; color: var(--ink-hi); font-size: var(--step-0); }
.method-slot span { font-size: var(--step--1); color: var(--ink-low); }

/* ── faq ────────────────────────────────────────────────────────── */
.faq-list { max-width: 46rem; border-top: 1px solid var(--hairline); }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0.2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
  transition: color 0.25s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--corail); }
.faq-list summary i {
  flex: none;
  position: relative;
  width: 0.85rem; height: 0.85rem;
  align-self: center;
}
.faq-list summary i::before,
.faq-list summary i::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1.5px;
  background: var(--ambre);
  transition: transform 0.35s var(--ease-out);
}
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i::after { transform: rotate(0deg); }
.faq-list details > p {
  padding: 0 2.6rem 1.5rem 0.2rem;
  color: var(--ink-mid);
  max-width: 62ch;
  font-size: var(--step-0);
  line-height: 1.65;
}

/* ── final CTA ──────────────────────────────────────────────────── */
.cta {
  position: relative;
  padding: clamp(6rem, 16vh, 11rem) var(--gutter);
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 50% 115%, rgba(255, 95, 69, 0.3) 0%, rgba(255, 61, 113, 0.12) 45%, transparent 75%);
  pointer-events: none;
}
.cta h2 { font-size: var(--step-5); max-width: 14ch; margin-inline: auto; position: relative; }
.cta p {
  color: var(--ink-mid);
  max-width: 42ch;
  margin: 1.5rem auto 0;
  font-size: var(--step-1);
  position: relative;
}
.cta .wl { max-width: 31rem; margin-inline: auto; position: relative; }
.cta .waitlist { justify-content: center; }
.cta .wl-done, .cta .wl-error, .cta .wl-note { text-align: center; }
.cta .soon {
  margin-top: 1.5rem;
  font-size: var(--step--1);
  color: var(--ink-low);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
}

/* ── footer ─────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--hairline);
  padding: 2.5rem var(--gutter) 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--ink-low);
}
footer .cols { display: flex; gap: 2rem; flex-wrap: wrap; }
footer a { color: var(--ink-mid); text-decoration: none; }
footer a:hover { color: var(--ink-hi); }
footer .colophon { flex-basis: 100%; max-width: 52ch; line-height: 1.7; }
footer .colophon b { color: var(--ink-mid); font-weight: 600; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vh, 4rem); }
  .hero-copy { max-width: none; }
  /* Mobile : le telephone en ENTIER, pas le haut de l'ecran estompe. Le cadrage
     du desktop marche parce que le device continue sous la ligne de flottaison ;
     sur mobile il est isole au milieu d'une colonne, donc le fondu ne se lit pas
     comme une continuation mais comme un ecran tronque suivi d'un vide. Meme
     bornage par la hauteur que les cartes de la galerie. */
  .hero-visual { max-width: min(300px, calc((100svh - 7rem) * 0.46)); }
  .hero-phone { height: auto; -webkit-mask-image: none; mask-image: none; }
  .hero-phone .iphone { position: static; transform: none; width: 100%; }
  .hero-bg img { object-position: 70% 30%; }
}

/* ── hero video slot ─────────────────────────────────────────────── */
.hero-media { position: relative; }
.hero-media .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-media:has(.hero-video) .hero-poster { display: none; }
/* le bouton vit dans .hero-phone (le cadre recadré), pas dans l'écran : le bas de
   l'écran est coupé et fondu par le hero, il y serait invisible */
.hero-sound {
  position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); z-index: 2;
  padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 244, 236, 0.35);
  background: rgba(20, 8, 12, 0.55); color: var(--ink-hi); font: 600 0.85rem/1 var(--sans);
  backdrop-filter: blur(6px); cursor: pointer;
}
.hero-sound[aria-pressed="true"] { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-video { display: none; }
  .hero-media:has(.hero-video) .hero-poster { display: block; }
  .hero-sound { display: none; }
}

/* ── second feature ──────────────────────────────────────────────── */
.second { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.second .section-head { padding-top: clamp(3rem, 8vh, 5.5rem); margin-bottom: clamp(1.75rem, 4vh, 2.5rem); }
.second-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); max-width: 42rem; margin: 0 auto; }
.second-shots .demo-card { width: auto; }
.second-shots .iphone { width: 100%; }
.second-lines { list-style: none; display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin: 2.25rem 0 0; padding: 0; color: var(--ink-mid); font-size: var(--step-0); }
.second-lines li::before { content: '·'; margin-right: 0.6rem; color: var(--rose); }
@media (max-width: 900px) {
  .second-shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: 0 var(--gutter) 1rem; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); max-width: none; scrollbar-width: none; }
  .second-shots::-webkit-scrollbar { display: none; }
  .second-shots .demo-card { flex: 0 0 62vw; scroll-snap-align: center; }
  .second-lines { flex-direction: column; align-items: center; gap: 0.75rem; }
}