/* Parlando — website styles. Plain CSS, no build step.
   From the home page mockup validated by the human on 2026-11-13 (../docs/design/charte-v1/Site.dc.html,
   SiteMobile.dc.html, and ../docs/design/README.md "Site : accueil proposé"):
   app screens in drawn iPhones, very short huge headlines, full-width sections alternating dark and light,
   one teal accent (#0F766E on light, #2DD4BF on dark), red only for recording,
   wordmark "Parlando" in Instrument Sans only; everything else in the system font. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("fonts/InstrumentSans-Variable.ttf") format("truetype");
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1c1c1e;
  --text-2: #3c3c43;        /* 10.8:1 on white, 9.9:1 on --gray-bg */
  --line: #d1d1d6;
  --accent: #0f766e;        /* 5.5:1 on white, 5.0:1 on --gray-bg; white on it: 5.5:1 */
  --accent-hover: #115e59;
  --on-accent: #ffffff;
  --gray-bg: #f5f5f7;
  --code-bg: #ffffff;
  /* Dark bands (the alternating full-width sections) */
  --ink-bg: #000000;
  --ink-2-bg: #0b0d0e;
  --ink-text: #ffffff;
  --ink-text-2: #b6b6bd;    /* 10:1 on black, 9.4:1 on #0b0d0e */
  --teal: #2dd4bf;          /* heard word, on dark only */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-brand: "Instrument Sans", var(--font);
  --max: 1200px;
  --gutter: 24px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #f5f5f7;
    --text-2: #a8a8b0;      /* 8.6:1 on black, 7.6:1 on --gray-bg */
    --line: rgba(235, 235, 245, 0.2);
    --accent: #2dd4bf;      /* 11:1 on black; #04211e on it: 9.6:1 */
    --accent-hover: #5eead4;
    --on-accent: #04211e;
    --gray-bg: #0e0f10;
    --code-bg: #1c1c1e;
    --ink-bg: #161618;      /* keeps the light/dark alternation visible on a black page */
    --ink-2-bg: #1c1c1e;
    --ink-text-2: #b6b6bd;  /* 8.7:1 on #161618, 8.1:1 on #1c1c1e */
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, svg { max-width: 100%; }

[id] { scroll-margin-top: 24px; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--bg);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 10px;
  z-index: 20;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

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

/* ---------- Brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { color: var(--text); }
.app-icon { display: block; flex: none; }
.wordmark {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ---------- Header ---------- */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}
.site-nav { display: flex; gap: 4px 24px; flex-wrap: wrap; font-size: 15px; }
.site-nav a { color: var(--text); text-decoration: none; padding: 10px 0; }
.site-nav a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Home: sections ----------
   Every section is at least one screen tall, content centered vertically.
   Each section has a tone (light, gray, ink, ink2). Without JavaScript the section paints its own background;
   with site.js the page background cross-fades between tones as you scroll (see Motion). */
.home .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.home .site-header .wrap { padding-top: 22px; }
.home .site-header a.brand { color: var(--ink-text); }
.home .site-nav a { color: var(--ink-text-2); }
.home .site-nav a:hover { color: var(--ink-text); }

.tone {
  --tbg: var(--bg); --fg: var(--text); --fg2: var(--text-2); --acc: var(--accent);
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px var(--gutter);
  background: var(--tbg);
  color: var(--fg);
}
.tone-gray { --tbg: var(--gray-bg); }
.tone-ink { --tbg: var(--ink-bg); --fg: var(--ink-text); --fg2: var(--ink-text-2); --acc: var(--teal); }
.tone-ink2 { --tbg: var(--ink-2-bg); --fg: var(--ink-text); --fg2: var(--ink-text-2); --acc: var(--teal); }

.headline {
  margin: 0;
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.say {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--fg2);
  max-width: 32ch;
}
.split {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 96px;
}
.split.rev { flex-direction: row-reverse; }
.copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.phone-slot { flex: none; display: flex; align-items: center; justify-content: center; }

/* ---------- Hero ---------- */
.hero { padding-top: 104px; }
.hero h1 {
  margin: 0;
  font-size: clamp(2.875rem, 6.4vw, 5.75rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.hero h1 .l { display: block; }
.hero h1 .t { display: block; color: var(--teal); white-space: nowrap; }
.hero-sub {
  margin: 0;
  font-size: clamp(19px, 2vw, 1.6rem);
  line-height: 1.35;
  color: var(--fg2);
  max-width: 30ch;
}
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.get-note { font-size: 15px; color: var(--fg2); }

/* Spot for Apple's official "Download on the App Store" badge.
   Replace the whole <a class="store-badge"> content with the badge SVG from
   https://developer.apple.com/app-store/marketing/guidelines/ (do not redraw it). */
.store-badge {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 28px;
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.store-badge:hover { color: #000000; background: #e8e8ed; }

/* ---------- Section 3: the text follows the voice (a drawing, not a screen) ---------- */
.voice .inner, .local .inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
}
.big-prompt {
  --step-gap: 10px;
  font-size: clamp(22px, 4.7vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  height: calc(4 * 1.15em + 3 * var(--step-gap));
  overflow: hidden;
}
.track { display: flex; flex-direction: column; gap: var(--step-gap); }
.pl { margin: 0; white-space: nowrap; color: rgba(255, 255, 255, 0.5); }
.pl.read { color: rgba(255, 255, 255, 0.28); }
.pl.cur { color: #ffffff; }
.pl.next { color: rgba(255, 255, 255, 0.7); }
.w.h { color: var(--teal); }
.wave-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wave { width: 320px; max-width: 100%; overflow: hidden; flex: none; }
.wave svg { display: block; max-width: none; }
.wave rect { fill: rgba(255, 255, 255, 0.28); transform-box: fill-box; transform-origin: center; }
.wave rect.on { fill: var(--teal); }
.voice .say { max-width: 34ch; }

/* ---------- Section 4: big caption ---------- */
.big-cap {
  align-self: flex-start;
  margin: 0;
  padding: 10px 16px;
  border-radius: 12px;
  background: #1c1c1e;
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.big-cap .w.h { color: var(--teal); }

/* ---------- Section 5: the same video, captioned in French then English ---------- */
.cards { display: flex; gap: 20px; align-items: center; }
.vid {
  width: 150px; height: 266px; flex: none;
  border-radius: 16px;
  background: #2c3134;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.vid img.person { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%; }
.vid .cap {
  position: relative;
  display: grid;
  margin: 0 8px 28px;
}
.vid .cap span {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: end;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.6);
  padding: 3px 6px;
  border-radius: 5px;
  text-align: center;
}
.vid .cap .alt { visibility: hidden; }

/* ---------- Section 6: .srt excerpt ---------- */
.srt {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--code-bg);
  border: 0.5px solid var(--line);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}
.srt b { font-weight: 400; color: var(--text); }

/* ---------- Section 7: everything stays on the iPhone ---------- */
.facts {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.facts li { display: flex; flex-direction: column; gap: 14px; }
.facts svg { width: 56px; height: 56px; flex: none; fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.facts p { margin: 0; font-size: clamp(30px, 3.4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.local .lead { margin: 0; font-size: clamp(19px, 2vw, 1.6rem); line-height: 1.4; color: var(--fg2); max-width: 48ch; }

/* ---------- Price ---------- */
.price-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.price-inner p { margin: 0; }
.price-lead { font-size: clamp(19px, 2vw, 1.6rem); color: var(--fg2); }
.price-amount {
  font-size: clamp(92px, 14.5vw, 13rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-once { margin: 0; font-size: clamp(44px, 5.6vw, 5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.price-life { font-size: clamp(28px, 3.4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--accent); }
.price-fine { font-size: clamp(16px, 1.4vw, 1.2rem); line-height: 1.45; color: var(--fg2); max-width: 40ch; }
.price-local { font-size: 15px; color: var(--fg2); }
.cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 28px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
}
.cta:hover { background: var(--accent-hover); color: var(--on-accent); }

/* ---------- Story: sections 4 to 6 (pinned iPhone on wide screens, see Motion) ---------- */
.story-stage { display: none; }

/* ---------- CSS-built iPhone. --s scales the 390x844 app screen. ---------- */
.phone {
  --s: 0.72;
  --bezel: 12px;
  flex: none;
  position: relative;
  width: calc(390px * var(--s) + 2 * var(--bezel));
  height: calc(844px * var(--s) + 2 * var(--bezel));
  padding: var(--bezel);
  border-radius: calc(55px * var(--s) + var(--bezel));
  background: #0e0e10;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.22), inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
  margin: 0;
}
@media (min-width: 400px) { .phone { --s: 0.8; } }
.phone .screen {
  position: relative;
  width: calc(390px * var(--s));
  height: calc(844px * var(--s));
  border-radius: calc(55px * var(--s));
  overflow: hidden;
  background: #ffffff;
}
.phone .screen > img,
.phone .screen > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Live HTML recreations of the app screens (until real captures exist).
   Laid out at 390x844 points, then scaled. Light look, like screenshots; the prompter is always dark. ---------- */
.app {
  position: absolute;
  top: 0; left: 0;
  width: 390px; height: 844px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  overflow: hidden;
  background: #ffffff;
  color: #1c1c1e;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.2;
  text-align: left;
}
.app p { margin: 0; }
.app .abs { position: absolute; }
.app .sec { color: #6c6c70; }
.app .island {
  position: absolute; z-index: 3;
  top: 11px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 36px; border-radius: 18px; background: #000;
}
.app .layer { position: absolute; inset: 0; }
.app .glass {
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(242, 242, 247, 0.9);
}
.app .btn {
  display: flex; align-items: center; justify-content: center;
  border-radius: 26px; height: 52px;
  background: #0f766e; color: #ffffff; font-weight: 600;
}
.app .btn2 {
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px; height: 44px;
  background: #f2f2f7; color: #0f766e; font-size: 16px; font-weight: 600;
}
.app .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.app .label { font-size: 13px; color: #6c6c70; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.app .navbar { top: 58px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; }
.app .back {
  height: 44px; padding: 0 14px 0 10px; border-radius: 22px;
  display: flex; align-items: center; gap: 4px; color: #0f766e;
}
.app .navbar strong { font-weight: 600; }
.app .thumb {
  border-radius: 14px; background: #2c3134;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.app .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%; }
.app .thumb p {
  position: relative; font-weight: 700; color: #ffffff;
  background: rgba(0, 0, 0, 0.55); text-align: center;
}
.app .thumb .h { color: #2dd4bf; }

/* Prompter on the camera (dark) */
.app.prompter { background: #1a1d1f; color: #ffffff; }
/* Camera preview: a real photo under the prompter box, faded into the dark top so the edge does not show. */
.app .cam { left: 0; right: 0; top: 236px; bottom: 0; overflow: hidden; }
.app .cam img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
}
.app .pbox { left: 12px; right: 12px; top: 58px; border-radius: 24px; background: rgba(0, 0, 0, 0.62); padding: 18px 20px 20px; }
.app .pwin { --step-gap: 6px; height: calc(4 * 29px + 3 * 6px); overflow: hidden; }
.app .pwin .pl { font-size: 22px; line-height: 29px; font-weight: 600; color: rgba(255, 255, 255, 0.75); }
.app .pwin .pl.read { color: rgba(255, 255, 255, 0.35); }
.app .pwin .pl.cur { color: #ffffff; }
.app .pwin .w.h { color: #2dd4bf; }
.app .ctrl { top: 300px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; }
.app .round-btn {
  width: 44px; height: 44px; border-radius: 22px;
  border: 0.5px solid rgba(255, 255, 255, 0.18); background: rgba(40, 40, 40, 0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: #ffffff;
}
.app .chrono {
  height: 32px; padding: 0 14px; border-radius: 16px;
  background: rgba(40, 40, 40, 0.55); border: 0.5px solid rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.app .rec-dot { width: 8px; height: 8px; border-radius: 4px; background: #ff3b30; }
.app .bottom { left: 0; right: 0; bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.app .mode {
  height: 36px; padding: 0 6px; border-radius: 18px;
  background: rgba(40, 40, 40, 0.55); border: 0.5px solid rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; gap: 4px;
}
.app .mode span { height: 28px; padding: 0 12px; border-radius: 14px; display: flex; align-items: center; font-size: 13px; font-weight: 500; }
.app .mode .on { background: #2dd4bf; color: #04211e; font-weight: 600; }
.app .row3 { width: 100%; display: flex; align-items: center; justify-content: space-around; }
.app .rec {
  width: 80px; height: 80px; border-radius: 40px; border: 4px solid #ffffff;
  display: flex; align-items: center; justify-content: center;
}
.app .rec i { width: 30px; height: 30px; border-radius: 7px; background: #ff3b30; }

/* Scripts list */
.app .s-head { top: 62px; left: 20px; right: 20px; display: flex; flex-direction: column; gap: 6px; }
.app .s-head .plus { align-self: flex-end; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; }
.app .s-head h3 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.app .s-list { top: 168px; left: 20px; right: 20px; margin: 0; padding: 0; list-style: none; }
.app .s-list li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 0.5px solid #d1d1d6; }
.app .s-list .txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.app .s-list .txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .s-list .t1 { font-weight: 600; }
.app .s-list .t2 { font-size: 15px; color: #6c6c70; }
.app .s-list .t3 { font-size: 13px; color: #6c6c70; }
.app .film {
  flex: none; height: 36px; padding: 0 16px; border-radius: 18px;
  background: #0f766e; color: #ffffff; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.app .tabbar {
  left: 20px; right: 20px; bottom: 30px; height: 62px; border-radius: 31px;
  background: rgba(249, 249, 249, 0.86);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center;
}
.app .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: #6c6c70; }
.app .tab.on { color: #0f766e; font-weight: 600; }
.app .tab svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app.scripts .to-prompter { display: none; background: #1a1d1f; color: #ffffff; }

/* Captions ready */
.app .c-top { top: 116px; left: 20px; right: 20px; display: flex; gap: 16px; align-items: flex-start; }
.app .c-top .thumb { flex: 0 0 132px; height: 234px; }
.app .c-top .thumb p { margin: 0 6px 22px; font-size: 12px; padding: 3px 6px; border-radius: 5px; }
.app .c-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.app .c-info strong { font-weight: 600; }
.app .c-info span { font-size: 15px; color: #6c6c70; }
.app .lines { top: 368px; left: 20px; right: 20px; }
.app .lines ul { margin: 0; padding: 0; list-style: none; }
.app .lines li { display: flex; gap: 14px; padding: 11px 0; border-bottom: 0.5px solid #d1d1d6; font-size: 16px; }
.app .lines li span:first-child { flex: 0 0 44px; font-size: 15px; color: #6c6c70; font-variant-numeric: tabular-nums; }
.app .c-actions { left: 20px; right: 20px; bottom: 36px; display: flex; flex-direction: column; gap: 10px; }
.app .c-actions .note { font-size: 13px; color: #6c6c70; text-align: center; }

/* Translate */
.app .t-intro { top: 120px; left: 20px; right: 20px; font-size: 15px; line-height: 1.3; color: #6c6c70; }
.app .langs { top: 178px; left: 20px; right: 20px; }
.app .langs ul { margin: 0; padding: 0; list-style: none; }
.app .langs li { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 0.5px solid #d1d1d6; }
.app .langs .st { font-size: 15px; color: #6c6c70; display: grid; justify-items: end; }
.app .langs .st > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; }
.app .langs .ok { color: #0f766e; }
.app .langs .st .before { visibility: hidden; }
.app .preview { top: 470px; left: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; }
.app .preview div { display: flex; gap: 14px; padding: 6px 0; font-size: 16px; }
.app .preview div span:first-child { width: 40px; font-size: 15px; color: #6c6c70; }
.app .t-btn { left: 20px; right: 20px; bottom: 36px; }

/* Export: in progress, then done */
.app .e-center { left: 20px; right: 20px; top: 0; bottom: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.app .e-center .thumb { width: 180px; height: 320px; border-radius: 18px; }
.app .e-center .thumb p { margin: 0 8px 36px; font-size: 14px; padding: 3px 7px; border-radius: 6px; }
.app .e-center .big { font-size: 20px; font-weight: 600; }
.app .e-center .sm { font-size: 15px; color: #6c6c70; text-align: center; font-variant-numeric: tabular-nums; }
.app .done-row { display: flex; align-items: center; gap: 8px; }
.app .bar { width: 240px; height: 6px; border-radius: 3px; background: #e5e5ea; overflow: hidden; }
.app .bar i { display: block; width: 100%; height: 6px; border-radius: 3px; background: #0f766e; transform-origin: 0 50%; transform: scaleX(0.38); }
.app .e-actions { left: 20px; right: 20px; bottom: 36px; display: flex; flex-direction: column; gap: 10px; }
.app .cancel { left: 0; right: 0; bottom: 44px; text-align: center; color: #ff3b30; }
.app.export .exp-a { visibility: hidden; }

/* ---------- Footer ---------- */
.site-footer { border-top: 0.5px solid var(--line); background: var(--bg); }
.site-footer .wrap {
  padding-top: 32px;
  padding-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-2);
}
.site-footer .brand { gap: 8px; }
.site-footer .wordmark { font-size: 20px; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer nav a { color: var(--accent); display: inline-block; padding: 10px 0; }
.site-footer nav a:hover { color: var(--accent-hover); }
.site-footer p { margin: 0; }
.site-footer .fine { flex-basis: 100%; font-size: 13px; }

/* ---------- Text pages (help, legal) ---------- */
.page { padding: clamp(48px, 9vw, 104px) 0 clamp(64px, 10vw, 128px); }
.page .wrap { max-width: calc(680px + 2 * var(--gutter)); }
.page h1 {
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.page .updated { color: var(--text-2); margin: 0 0 40px; font-size: 15px; }
.page .lead {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 48px;
}
.page h2 { font-size: 1.45rem; line-height: 1.25; letter-spacing: -0.01em; margin: 48px 0 12px; }
.page p, .page li { line-height: 1.65; }
.page ul { padding-left: 1.2em; }
.page li + li { margin-top: 6px; }
.page li::marker { color: var(--text-2); }
.page address { font-style: normal; }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 18px 44px 18px 0;
  font-size: 1.1rem;
  font-weight: 600;
  list-style: none;
  position: relative;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  translate: 0 -70%;
  rotate: 45deg;
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 -20%; }
.faq details p { margin: 0 0 20px; color: var(--text-2); }

/* ---------- 404 ---------- */
.notfound {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}
.notfound .wordmark { font-size: clamp(48px, 14vw, 88px); }
.notfound h1 { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; margin: 24px 0 8px; }
.notfound p { margin: 4px 0; color: var(--text-2); }

/* ---------- Medium widths: stack text above the iPhone ---------- */
@media (max-width: 959px) {
  .split, .split.rev { flex-direction: column; align-items: stretch; gap: 40px; }
  .desk-only { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .facts li { flex-direction: row; align-items: center; }
  .facts svg { width: 36px; height: 36px; }
  .voice .inner, .local .inner { gap: 32px; }
  .wave { width: 160px; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  :root { --gutter: 20px; }
  .home .site-header .wrap { padding-top: 14px; padding-bottom: 14px; }
  .home .site-header .app-icon { width: 28px; height: 28px; }
  .home .site-header .wordmark { font-size: 22px; }
  .site-nav { gap: 4px 16px; }
  .hero h1 .l { display: inline; }
  .get .store-badge { min-height: 48px; }
  .site-footer .wrap { padding-top: 28px; padding-bottom: 40px; }
}
@media (max-width: 374px) {
  /* Keep "C'est sous-titré." on one line without a sideways scroll on the narrowest phones. */
  .hero h1 { font-size: 12vw; }
}
@media (min-width: 960px) and (max-height: 820px) {
  .phone { --s: 0.7; }
}

/* ---------- Home on phones and small tablets (below 960 px): one screen per swipe ----------
   Each section (and each story step) is exactly one screen tall and is a mandatory snap point,
   so a swipe moves one page, like a vertical video feed. The text keeps its natural height and the
   iPhone shrinks to the room that is left (container query units). The footer snaps at the end.
   Wide screens are not affected. Pure CSS: it also works without JavaScript. */
@media (max-width: 959px) {
  html:has(body.home) { scroll-snap-type: y mandatory; }
  .home .tone {
    height: 100vh;
    height: 100svh;
    min-height: min-content;   /* never clip: on a very short screen the page grows instead */
    padding: 56px 20px 40px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .home .hero { padding-top: 72px; padding-bottom: 32px; }
  .home .site-footer { scroll-snap-align: end; }

  /* Pages with an iPhone: text first in size, the iPhone fills the rest. */
  .home .split {
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 28px;
  }
  .home .hero .split { gap: 24px; }
  .home .copy { flex: none; gap: 16px; }
  .home .phone-slot {
    flex: 1 1 0;
    min-height: 160px;
    container-type: size;
  }
  .home .phone-slot .phone { --bezel: 8px; --s: 0.5; }
  @media (max-height: 700px) {
    .home .phone-slot .phone { --s: 0.4; }
  }
  @supports (width: calc(1px * tan(atan2(1px, 1px)))) {
    .home .phone-slot .phone {
      --s: min(0.6, tan(atan2(100cqh - 2 * var(--bezel), 844px)), tan(atan2(100cqw - 2 * var(--bezel), 390px)));
    }
    .home .hero .phone-slot .phone {
      --s: min(0.5, tan(atan2(100cqh - 2 * var(--bezel), 844px)), tan(atan2(100cqw - 2 * var(--bezel), 390px)));
    }
  }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  /* Softer: the page still settles on a screen when it stops near one, but never forces it. */
  html:has(body.home) { scroll-snap-type: y proximity; }
  .home .tone { scroll-snap-stop: normal; }
}

/* ---------- Motion ----------
   Hidden or "before" states only apply under html.js, which site.js adds only when the visitor
   has not asked for reduced motion. Without JavaScript, or with reduced motion, every element is
   visible in its final state and nothing moves. Only opacity, transform, color and SVG stroke offsets animate. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Page background cross-fades between section tones (body[data-tone] is set by site.js). */
  .js body.home {
    --fg: var(--text); --fg2: var(--text-2); --acc: var(--accent);
    transition: background-color 0.9s var(--ease), color 0.9s var(--ease);
  }
  .js body.home[data-tone="ink"] { background: var(--ink-bg); color: var(--ink-text); --fg: var(--ink-text); --fg2: var(--ink-text-2); --acc: var(--teal); }
  .js body.home[data-tone="ink2"] { background: var(--ink-2-bg); color: var(--ink-text); --fg: var(--ink-text); --fg2: var(--ink-text-2); --acc: var(--teal); }
  .js body.home[data-tone="gray"] { background: var(--gray-bg); }
  .js .tone { background: transparent; color: inherit; --fg: inherit; --fg2: inherit; --acc: inherit; }
  .js .say, .js .hero-sub, .js .get-note, .js .lead, .js .price-lead, .js .price-fine, .js .price-local, .js .srt {
    transition: color 0.9s var(--ease);
  }

  /* Gentle reveals */
  .js .reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .js .reveal.in { opacity: 1; transform: none; }

  /* Hero iPhone rises and fades in, then keeps a very slow idle float. */
  .js .float-in.reveal { transform: translate3d(0, 56px, 0) scale(0.98); transition-duration: 1.1s; }
  .js .float-in.reveal.in { transform: none; }
  .js .phone.idle { animation: idle 8s ease-in-out 1.6s infinite; }
  @keyframes idle {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
  }

  /* Prompter: the red dot blinks; the lines scroll (site.js moves .track and the teal word). */
  .js .app.play .rec-dot { animation: blink 1.2s steps(1, end) infinite; }
  @keyframes blink { 50% { opacity: 0.2; } }
  .js .track { transition: transform 0.6s var(--ease); }
  .js .pl { transition: color 0.5s var(--ease); }
  .js .w { transition: color 0.18s linear; }

  /* Section 3: the voice wave breathes while the text moves. */
  .js .voice.play .wave rect { animation: wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); }
  @keyframes wave { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }
  .js .wave rect { transition: fill 0.3s linear; }

  /* Scripts: rows arrive one by one, the first "Film" button is pressed, the screen switches to the prompter. */
  .js .app.scripts .s-list li { opacity: 0; transform: translate3d(0, 18px, 0); }
  .js .app.scripts.play .s-list li {
    opacity: 1; transform: none;
    transition: opacity 0.5s var(--ease) calc(var(--i) * 0.18s + 0.3s), transform 0.5s var(--ease) calc(var(--i) * 0.18s + 0.3s);
  }
  .js .app.scripts.play .s-list li:first-child .film { animation: press 0.5s var(--ease) 1.7s both; }
  @keyframes press {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.45); }
    40% { transform: scale(0.9); }
    100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(15, 118, 110, 0); }
  }
  .js .app.scripts .to-prompter { display: block; opacity: 0; transform: scale(1.04); z-index: 4; }
  .js .app.scripts.play .to-prompter { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) 2.2s, transform 0.6s var(--ease) 2.2s; }

  /* Captions: the timed lines appear one by one. */
  .js .app.captions .lines li { opacity: 0; transform: translate3d(-12px, 0, 0); }
  .js .app.captions.play .lines li {
    opacity: 1; transform: none;
    transition: opacity 0.45s var(--ease) calc(var(--i) * 0.28s + 0.3s), transform 0.45s var(--ease) calc(var(--i) * 0.28s + 0.3s);
  }

  /* Translate: "English" gets selected, then the English preview appears. */
  .js .app.translate .langs .st .before { visibility: visible; }
  .js .app.translate .langs .st .after { opacity: 0; }
  .js .app.translate.play .langs .st .before { opacity: 0; transition: opacity 0.3s var(--ease) 0.8s; }
  .js .app.translate.play .langs .st .after { opacity: 1; transition: opacity 0.3s var(--ease) 0.85s; }
  .js .app.translate .preview div { opacity: 0; transform: translate3d(0, 10px, 0); }
  .js .app.translate.play .preview div {
    opacity: 1; transform: none;
    transition: opacity 0.5s var(--ease) calc(var(--i) * 0.25s + 1.3s), transform 0.5s var(--ease) calc(var(--i) * 0.25s + 1.3s);
  }
  /* The second video card switches its caption from French to English, in a slow loop. */
  .js .cards .vid.loop .cap .alt { visibility: visible; }
  .js .cards.play .vid.loop .cap .fr-cap { animation: capA 8s ease-in-out infinite; }
  .js .cards.play .vid.loop .cap .en-cap { animation: capB 8s ease-in-out infinite; }
  .js .cards:not(.play) .vid.loop .cap .fr-cap { opacity: 0; }
  @keyframes capA { 0%, 15% { opacity: 1; } 25%, 85% { opacity: 0; } 95%, 100% { opacity: 1; } }
  @keyframes capB { 0%, 15% { opacity: 0; } 25%, 85% { opacity: 1; } 95%, 100% { opacity: 0; } }

  /* Export: the progress bar fills, the screen fades to "Video in Photos", the check mark draws. */
  .js .app.export .exp-a { visibility: visible; }
  .js .app.export .exp-b { opacity: 0; }
  .js .app.export .bar i { transform: scaleX(0.04); }
  .js .app.export.play .bar i { transform: scaleX(1); transition: transform 2s cubic-bezier(0.4, 0, 0.6, 1) 0.3s; }
  .js .app.export.play .exp-a { opacity: 0; transition: opacity 0.6s var(--ease) 2.6s; }
  .js .app.export.play .exp-b { opacity: 1; transition: opacity 0.6s var(--ease) 2.6s; }
  .js .app.export .check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .app.export.play .check path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s var(--ease) 3.1s; }

  /* Section 7: the three words appear one after another, each icon draws itself. */
  .js .facts .draw * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .facts .reveal.in .draw * { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) calc(var(--d, 0s) + 0.2s); }

  /* Price: the amount scales in while it counts up, then "once." and "For life, no subscription." follow. */
  .js .price .price-amount { opacity: 0; transform: scale(0.88); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
  .js .price.in .price-amount { opacity: 1; transform: none; }
  .js .price .then { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.7s var(--ease) var(--d), transform 0.7s var(--ease) var(--d); }
  .js .price.in .then { opacity: 1; transform: none; }

  /* Story: on wide screens one iPhone stays pinned while sections 4 to 6 scroll past;
     its screen cross-fades Captions -> Translate -> Export. */
  @media (min-width: 960px) {
    .js .story {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 96px;
      max-width: calc(var(--max) + 2 * var(--gutter));
      margin: 0 auto;
      padding: 0 var(--gutter);
    }
    .js .story-steps { grid-column: 1; grid-row: 1; }
    .js .story-stage {
      display: flex;
      align-items: center;
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
    }
    .js .step { padding-left: 0; padding-right: 0; }
    .js .step .phone-slot { display: none; }
    .js .stage-phone .app.scr { opacity: 0; transition: opacity 0.7s var(--ease); }
    .js .stage-phone .app.scr.on { opacity: 1; }
  }
}