/* Site VoiceForever — design system v2.
   Couleurs, espacements et rayons : tokens.css, généré depuis VoiceDesignTokens.swift.
   Aucune couleur en dur ici. Trois ancres, comme dans l'app :
   - le serif (New York) n'habille que ce qui est dit ;
   - le cuivre est l'unique accent ;
   - l'onde est la signature.
   Pas de dégradé, pas d'ombre : la hiérarchie vient de la typographie, de l'espace
   et des vraies captures de l'app, posées dans un cadre d'iPad. */

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-spoken: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
  --font-tech: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 38rem;
  --page: 76rem;
  --gap-section: clamp(4.5rem, 3rem + 7vw, 9rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-primary);
  font: 400 1.125rem/1.6 var(--font-ui);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xs); }

.skip {
  position: absolute; left: var(--space-md); top: -100px;
  background: var(--accent); color: var(--on-accent);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none; z-index: 3;
}
.skip:focus { top: var(--space-md); }

/* MARK: - En-tête : collant, translucide comme une barre d'iPadOS */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--separator) 70%, transparent);
}
/* Le filet n'apparaît qu'une fois la page défilée. */
@supports (animation-timeline: scroll()) {
  .site-header { animation: header-settle linear both; animation-timeline: scroll(root); animation-range: 0 96px; }
  @keyframes header-settle {
    from { border-bottom-color: transparent; background-color: color-mix(in srgb, var(--canvas) 0%, transparent); }
    to { border-bottom-color: color-mix(in srgb, var(--separator) 70%, transparent); background-color: color-mix(in srgb, var(--canvas) 82%, transparent); }
  }
}
.header-inner, main, .site-footer {
  max-width: calc(var(--page) + 2 * var(--space-screenMargin));
  margin: 0 auto;
  padding-inline: var(--space-screenMargin);
}
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-sm);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  color: var(--text-primary); text-decoration: none;
  font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em;
}
.mark-well { fill: var(--surface); stroke: var(--separator); }
.mark-played { fill: var(--accent); }
.mark-rest { fill: var(--waveform-rest); }
.site-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs) var(--space-lg); margin-left: auto; font-size: 0.98rem; }
.site-header nav a { color: var(--text-secondary); text-decoration: none; padding-block: var(--space-xs); }
.site-header nav a:hover { color: var(--text-primary); }
.site-header nav a[aria-current="page"] { color: var(--text-primary); font-weight: 600; }
.header-tools { display: flex; align-items: center; gap: var(--space-xs); }

/* Sélecteur de langue : un vrai menu, drapeau en tête. */
.lang-menu { position: relative; }
.lang-menu summary {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 var(--space-sm) 0 var(--space-sm);
  border: 1px solid var(--separator); border-radius: 999px;
  color: var(--text-primary); font-size: 0.95rem; font-weight: 500;
  cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { border-color: var(--border); background: var(--surface); }
.flag {
  flex: none; width: 21px; height: 14px; border-radius: 3px; overflow: hidden;
  outline: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent); outline-offset: -1px;
}
.chevron { width: 12px; height: 12px; fill: none; stroke: var(--text-secondary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.25s cubic-bezier(0.2, 0, 0, 1); }
.lang-menu[open] .chevron { rotate: 180deg; }
.lang-menu ul {
  position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: 20;
  min-width: 12.5rem; margin: 0; padding: 6px; list-style: none;
  background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-md);
  transform-origin: top right;
}
.lang-menu li a {
  display: flex; align-items: center; gap: var(--space-sm);
  min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-sm);
  color: var(--text-primary); text-decoration: none; font-size: 1rem;
}
.lang-menu li a:hover { background: var(--well); }
.lang-menu li a[aria-current] { font-weight: 600; }
.check { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Clair ou sombre : le soleil et la lune échangent leur place. */
.theme-toggle {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--separator); border-radius: 50%;
  cursor: pointer; transition: border-color 0.2s, background-color 0.2s;
}
.theme-toggle:hover { border-color: var(--border); background: var(--surface); }
.theme-toggle[hidden] { display: none; }
.theme-toggle svg {
  grid-area: 1 / 1; width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: rotate 0.5s cubic-bezier(0.2, 0, 0, 1), scale 0.5s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s;
}
.theme-toggle .icon-sun { opacity: 0; rotate: -90deg; scale: 0.4; }
.theme-toggle[aria-pressed="true"] .icon-sun { opacity: 1; rotate: 0deg; scale: 1; }
.theme-toggle[aria-pressed="true"] .icon-moon { opacity: 0; rotate: 90deg; scale: 0.4; }

/* Le nouveau mode s'ouvre en cercle depuis le bouton (site.js). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--reveal-x, 100%) var(--reveal-y, 0)); }
  to { clip-path: circle(var(--reveal-r, 150vmax) at var(--reveal-x, 100%) var(--reveal-y, 0)); }
}

@media (prefers-reduced-motion: no-preference) {
  .lang-menu[open] ul { animation: menu-in 0.2s cubic-bezier(0.2, 0, 0, 1); }
  @keyframes menu-in { from { opacity: 0; scale: 0.96; translate: 0 -4px; } }
}

/* MARK: - Typographie */

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.6rem + 4.2vw, 4.75rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700;
}
h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.15rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 650; }
h3 { font-size: 1.2rem; line-height: 1.35; letter-spacing: -0.01em; }
p { margin: 0; }
p + p { margin-top: var(--space-md); }
.lede { font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.45rem); line-height: 1.5; color: var(--text-secondary); }
.meta, .support-text { color: var(--text-secondary); }
.tech { font-family: var(--font-tech); font-size: 0.85em; color: var(--text-tertiary); }
a.tech { color: var(--accent-text); }

/* Ce qui est dit, et seulement ce qui est dit. */
.spoken { font-family: var(--font-spoken); font-weight: 400; letter-spacing: -0.01em; }


/* MARK: - Sections */

main { padding-bottom: var(--space-xxxl); }
.section { padding-top: var(--gap-section); }
.section > h2 { max-width: 46rem; }
.section-intro { max-width: var(--measure); margin-top: var(--space-md); color: var(--text-secondary); }
.split {
  display: grid; gap: var(--space-xl) var(--space-xxl);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
}
.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose { max-width: var(--measure); padding-top: clamp(var(--space-xl), 5vw, var(--space-xxxl)); }
.prose h2 { margin-top: var(--space-xxl); margin-bottom: var(--space-sm); font-size: 1.4rem; }
.prose h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem); }
.prose h1 + .meta { margin-top: var(--space-sm); }
.prose .lede { margin-top: var(--space-lg); }

/* MARK: - Cadre d'iPad : les vraies captures, dans un boîtier sobre */

.ipad {
  background: var(--scrim);
  border: 1px solid var(--separator);
  border-radius: clamp(18px, 2.4vw, 34px);
  padding: clamp(7px, 1.1vw, 14px);
}
.ipad img { width: 100%; border-radius: clamp(10px, 1.4vw, 20px); }

/* MARK: - Héros : du regard, on écrit ; l'iPad le dit */

.hero { padding-top: clamp(var(--space-xl), 4vw, 4rem); }
.hero-head {
  display: grid; gap: var(--space-lg) clamp(var(--space-xl), 5vw, 5rem);
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end;
}
.hero h1 { font-size: clamp(3rem, 1.2rem + 5.4vw, 6rem); line-height: 0.98; letter-spacing: -0.045em; }
.hero h1 .line { display: inline-block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; vertical-align: top; }
.hero h1 .line > span { display: inline-block; }
.hero .lede { color: var(--text-primary); font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-lg); }
.soon { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-secondary); font-size: 1rem; font-weight: 500; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ochre); }

/* La scène. À gauche, le tableau de Parler : le regard se pose sur un mot,
   l'anneau cuivre en fait le tour, le mot rejoint la phrase, puis Parler.
   À droite, la phrase dite, en serif, et l'onde qui se lit sous l'ensemble. */
.stage {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-xl) clamp(var(--space-xl), 5vw, 5rem);
  margin: clamp(var(--space-xl), 3vw, var(--space-xxl)) 0 0;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-lg), 3vw, var(--space-xxl)) clamp(var(--space-lg), 4vw, 3.5rem);
}
.stage-label {
  display: flex; align-items: center; gap: var(--space-xs);
  color: var(--accent-text); font-size: 0.95rem; font-weight: 600;
}
.stage-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stage-label-write { color: var(--text-tertiary); }

.draft-field {
  display: flex; align-items: center;
  min-height: 3.4rem; margin-top: var(--space-sm); padding: 0 var(--space-md);
  background: var(--well); border-radius: var(--radius-md);
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
}
.drafts { display: grid; min-width: 0; }
.drafts > * { grid-area: 1 / 1; }
.draft { white-space: nowrap; }
.draft > span { display: inline-block; vertical-align: bottom; white-space: pre; overflow: hidden; }
.draft::after {
  content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px;
  vertical-align: -0.18em; background: var(--accent);
}
.draft-b { visibility: hidden; }

.board {
  --board-gap: var(--space-xs);
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--board-gap);
  margin-top: var(--space-sm);
}
.key {
  position: relative; overflow: hidden;
  height: clamp(3.4rem, 2.6rem + 2vw, 4.4rem);
  background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-md);
  font-size: clamp(0.8rem, 0.68rem + 0.45vw, 1.08rem); line-height: 1.12; text-align: center;
}
.reel { display: flex; flex-direction: column; height: 600%; }
.reel > span { flex: 1; display: grid; place-items: center; padding: 0 4px; }
.key-speak {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--accent); border-color: transparent; color: var(--on-accent);
  font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.98rem); font-weight: 600;
}
.key-speak svg { width: 20px; height: 20px; fill: currentColor; }
.focus {
  position: absolute; top: 0; left: 0; height: 100%;
  width: calc((100% - 4 * var(--board-gap)) / 5);
  translate: calc((100% + var(--board-gap)) * 4) 0;
  pointer-events: none;
}
.focus-flash { position: absolute; inset: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 24%, transparent); opacity: 0; }
.focus .ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); overflow: visible; }
.focus .ring path { stroke-dashoffset: 0; stroke-width: 3.5; }
.gaze-dot {
  /* Sous le mot, pour ne jamais le masquer. */
  position: absolute; left: 50%; bottom: 9px; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.saids { display: grid; margin-top: var(--space-sm); }
.saids > * { grid-area: 1 / 1; }
.said { font-size: clamp(2rem, 1rem + 3.2vw, 3.9rem); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.said-b { visibility: hidden; }

.stage-wave { grid-column: 1 / -1; width: 100%; height: clamp(56px, 6vw, 88px); }
.stage-wave-narrow { display: none; }
.stage-progress { transform-box: fill-box; transform-origin: left center; transform: scaleX(0.62); }

.wave { width: 100%; height: clamp(32px, 4vw, 48px); }
.wave-rest { fill: var(--waveform-rest); }
.wave-played { fill: var(--accent); }
.wave-progress { transform-box: fill-box; transform-origin: left center; }

/* Captures : la version sombre dans le site sombre, la claire en mode clair.
   L'image masquée, différée, n'est pas téléchargée. */
.shot-light { display: none; }
:root[data-theme="light"] .shot-light { display: block; }
:root[data-theme="light"] .shot-dark { display: none; }

/* Les touches sont de vrais boutons : inertes pendant la démonstration,
   jouables dès que la personne prend la main (site.js). */
.board .key { appearance: none; margin: 0; padding: 0; color: var(--text-primary); font-size: clamp(0.8rem, 0.68rem + 0.45vw, 1.08rem); cursor: default; }
.board .key-speak { color: var(--on-accent); font-family: inherit; font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.98rem); font-weight: 600; }

.stage-bar {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg);
  margin-top: calc(-1 * var(--space-sm)); padding-top: var(--space-md);
  border-top: 1px solid var(--separator);
}
.stage-bar[hidden] { display: none; }
.stage-hint { color: var(--text-secondary); font-size: 0.98rem; }
.stage-toggle {
  appearance: none; min-height: 44px; padding: 0 var(--space-md);
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--text-primary); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.stage-toggle:hover { background: var(--surface-raised); border-color: var(--text-tertiary); }

/* À vous : le pointeur tient lieu de regard. Les animations de la
   démonstration s'arrêtent ; l'anneau suit la touche visée. */
.stage.is-live .focus,
.stage.is-live .focus .ring path,
.stage.is-live .focus-flash,
.stage.is-live .stage-progress,
.stage.is-live .stage-label-write,
.stage.is-live .stage-label-say,
.stage.is-live .key-speak { animation: none; }
.stage.is-live .key { cursor: pointer; }
.stage.is-live .key-word { display: grid; place-items: center; height: 100%; padding: 0 4px; }
.stage.is-live .key:disabled { cursor: default; }
.stage.is-live .key:disabled .key-word { opacity: 0.35; }
.stage.is-live .key:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.stage.is-live .focus { translate: calc((100% + var(--board-gap)) * var(--i, 0)) 0; }
.stage.is-live .gaze-dot { display: none; }
/* Là où « regarde » le pointeur : un anneau pâle, que la fixation remplit. */
.stage.is-live .focus::before {
  content: ""; position: absolute; inset: -3px; border-radius: calc(var(--radius-md) + 3px);
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); opacity: 0; transition: opacity 0.2s;
}
.stage.is-live .board:hover .focus::before { opacity: 1; }
.stage.is-live .focus .ring path { stroke-dashoffset: 100; transition: stroke-dashoffset 0.2s ease-out; }
.stage.is-live.is-dwelling .focus .ring path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s linear; }
.stage.is-live.is-complete .key-speak { outline: 2px solid var(--accent); outline-offset: 3px; }
.stage.is-live .stage-label-write { color: var(--accent-text); }
.stage.is-live .stage-label-say { color: var(--text-tertiary); }
.stage.is-live.is-speaking .stage-label-write { color: var(--text-tertiary); }
.stage.is-live.is-speaking .stage-label-say { color: var(--accent-text); }
.stage.is-live .stage-progress { transform: scaleX(0); }
.stage.is-live.is-speaking .stage-progress { transform: scaleX(1); }
/* Honnêteté : la voix entendue sur le site n'est pas fabriquée par l'app. */
.voice-note { margin-top: var(--space-sm); color: var(--text-tertiary); font-size: 0.85rem; }
.stage .voice-note { display: none; }
.stage.is-live .voice-note { display: block; }
.said-live:empty::before { content: attr(data-empty); color: var(--text-tertiary); font-size: 0.5em; letter-spacing: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Une seule entrée orchestrée : le titre monte ligne à ligne, puis la scène. */
  .hero h1 .line > span { animation: rise 0.95s cubic-bezier(0.2, 0.7, 0, 1) both; }
  .hero h1 .line + .line > span, .hero h1 .line:last-child > span { animation-delay: 0.09s; }
  .hero-side { animation: fade-in 0.8s 0.3s cubic-bezier(0.2, 0.7, 0, 1) both; }
  .stage { animation: stage-in 1s 0.4s cubic-bezier(0.2, 0.7, 0, 1) both; }
  @keyframes rise { from { translate: 0 105%; } }
  @keyframes fade-in { from { opacity: 0; translate: 0 12px; } }
  @keyframes stage-in { from { opacity: 0; translate: 0 32px; } }

  /* La démonstration : deux phrases, 21 s, tout est calé sur la même horloge. */
  .draft-b, .said-b { visibility: visible; }
  .stage .focus { animation: gaze-move 21s infinite both; }
  .stage .focus .ring path { animation: gaze-ring 21s infinite both; }
  .focus-flash { animation: gaze-select 21s infinite both; }
  .gaze-dot { animation: gaze-jitter 0.9s ease-in-out infinite; }
  .reel { animation: board-reel 21s infinite both; }
  .draft-a { animation: draft-a-on 21s infinite both; }
  .draft-b { animation: draft-b-on 21s infinite both; }
  .draft-a > span:nth-child(1) { animation: word-a1 21s infinite both; }
  .draft-a > span:nth-child(2) { animation: word-a2 21s infinite both; }
  .draft-a > span:nth-child(3) { animation: word-a3 21s infinite both; }
  .draft-b > span:nth-child(1) { animation: word-b1 21s infinite both; }
  .draft-b > span:nth-child(2) { animation: word-b2 21s infinite both; }
  .draft-b > span:nth-child(3) { animation: word-b3 21s infinite both; }
  .draft::after { animation: caret 1s steps(1) infinite; }
  .said-a { animation: said-a 21s infinite both; }
  .said-b { animation: said-b 21s infinite both; }
  .stage .stage-progress { animation: stage-play 21s infinite both; }
  .stage-label-write { animation: label-write 21s infinite both; }
  .stage-label-say { animation: label-say 21s infinite both; }
  .key-speak { animation: speak-press 21s infinite both; }

  @keyframes draft-a-on { 0%, 49.04% { visibility: visible; } 49.05%, 100% { visibility: hidden; } }
  @keyframes draft-b-on { 0%, 49.04% { visibility: hidden; } 49.05%, 100% { visibility: visible; } }
  @keyframes caret { 0% { opacity: 1; } 50% { opacity: 0; } }
  @keyframes gaze-jitter {
    0%, 100% { translate: 0 0; }
    25% { translate: 1.5px -1px; }
    50% { translate: -1px 1.5px; }
    75% { translate: -1.5px -0.5px; }
  }
  @keyframes gaze-move {
    0% { translate: calc((100% + var(--board-gap)) * 4) 0; }
    0.95% { translate: calc((100% + var(--board-gap)) * 4) 0; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    2.86% { translate: calc((100% + var(--board-gap)) * 0) 0; }
    8.57% { translate: calc((100% + var(--board-gap)) * 0) 0; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    10.48% { translate: calc((100% + var(--board-gap)) * 2) 0; }
    16.19% { translate: calc((100% + var(--board-gap)) * 2) 0; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    18.1% { translate: calc((100% + var(--board-gap)) * 1) 0; }
    23.81% { translate: calc((100% + var(--board-gap)) * 1) 0; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    25.71% { translate: calc((100% + var(--board-gap)) * 4) 0; }
    50.95% { translate: calc((100% + var(--board-gap)) * 4) 0; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    52.86% { translate: calc((100% + var(--board-gap)) * 1) 0; }
    58.57% { translate: calc((100% + var(--board-gap)) * 1) 0; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    60.48% { translate: calc((100% + var(--board-gap)) * 3) 0; }
    66.19% { translate: calc((100% + var(--board-gap)) * 3) 0; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    68.1% { translate: calc((100% + var(--board-gap)) * 0) 0; }
    73.81% { translate: calc((100% + var(--board-gap)) * 0) 0; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    75.71% { translate: calc((100% + var(--board-gap)) * 4) 0; }
    100% { translate: calc((100% + var(--board-gap)) * 4) 0; }
  }
  @keyframes gaze-ring {
    0% { stroke-dashoffset: 100; }
    2.86% { stroke-dashoffset: 100; animation-timing-function: linear; }
    7.62% { stroke-dashoffset: 0; }
    8.81% { stroke-dashoffset: 0; animation-timing-function: steps(1, end); }
    9.05% { stroke-dashoffset: 100; }
    10.48% { stroke-dashoffset: 100; animation-timing-function: linear; }
    15.24% { stroke-dashoffset: 0; }
    16.43% { stroke-dashoffset: 0; animation-timing-function: steps(1, end); }
    16.67% { stroke-dashoffset: 100; }
    18.1% { stroke-dashoffset: 100; animation-timing-function: linear; }
    22.86% { stroke-dashoffset: 0; }
    24.05% { stroke-dashoffset: 0; animation-timing-function: steps(1, end); }
    24.29% { stroke-dashoffset: 100; }
    25.71% { stroke-dashoffset: 100; animation-timing-function: linear; }
    30.48% { stroke-dashoffset: 0; }
    31.67% { stroke-dashoffset: 0; animation-timing-function: steps(1, end); }
    31.9% { stroke-dashoffset: 100; }
    52.86% { stroke-dashoffset: 100; animation-timing-function: linear; }
    57.62% { stroke-dashoffset: 0; }
    58.81% { stroke-dashoffset: 0; animation-timing-function: steps(1, end); }
    59.05% { stroke-dashoffset: 100; }
    60.48% { stroke-dashoffset: 100; animation-timing-function: linear; }
    65.24% { stroke-dashoffset: 0; }
    66.43% { stroke-dashoffset: 0; animation-timing-function: steps(1, end); }
    66.67% { stroke-dashoffset: 100; }
    68.1% { stroke-dashoffset: 100; animation-timing-function: linear; }
    72.86% { stroke-dashoffset: 0; }
    74.05% { stroke-dashoffset: 0; animation-timing-function: steps(1, end); }
    74.29% { stroke-dashoffset: 100; }
    75.71% { stroke-dashoffset: 100; animation-timing-function: linear; }
    80.48% { stroke-dashoffset: 0; }
    81.67% { stroke-dashoffset: 0; animation-timing-function: steps(1, end); }
    81.9% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 100; }
  }
  @keyframes gaze-select {
    0% { opacity: 0; }
    7.62% { opacity: 0; }
    7.9% { opacity: 1; }
    10% { opacity: 0; }
    15.24% { opacity: 0; }
    15.52% { opacity: 1; }
    17.62% { opacity: 0; }
    22.86% { opacity: 0; }
    23.14% { opacity: 1; }
    25.24% { opacity: 0; }
    30.48% { opacity: 0; }
    30.76% { opacity: 1; }
    32.86% { opacity: 0; }
    57.62% { opacity: 0; }
    57.9% { opacity: 1; }
    60% { opacity: 0; }
    65.24% { opacity: 0; }
    65.52% { opacity: 1; }
    67.62% { opacity: 0; }
    72.86% { opacity: 0; }
    73.14% { opacity: 1; }
    75.24% { opacity: 0; }
    80.48% { opacity: 0; }
    80.76% { opacity: 1; }
    82.86% { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes board-reel {
    0% { translate: 0 calc(-100% / 6 * 0); }
    8.1% { translate: 0 calc(-100% / 6 * 0); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    9.52% { translate: 0 calc(-100% / 6 * 1); }
    15.71% { translate: 0 calc(-100% / 6 * 1); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    17.14% { translate: 0 calc(-100% / 6 * 2); }
    47.62% { translate: 0 calc(-100% / 6 * 2); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    49.05% { translate: 0 calc(-100% / 6 * 3); }
    58.1% { translate: 0 calc(-100% / 6 * 3); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    59.52% { translate: 0 calc(-100% / 6 * 4); }
    65.71% { translate: 0 calc(-100% / 6 * 4); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    67.14% { translate: 0 calc(-100% / 6 * 5); }
    98.1% { translate: 0 calc(-100% / 6 * 5); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    99.52% { translate: 0 calc(-100% / 6 * 0); }
    100% { translate: 0 calc(-100% / 6 * 0); }
  }
  @keyframes word-a1 {
    0% { max-width: 0; opacity: 1; }
    7.62% { max-width: 0; opacity: 1; animation-timing-function: ease-out; }
    9.05% { max-width: 9em; opacity: 1; }
    47.14% { max-width: 9em; opacity: 1; }
    49.05% { max-width: 9em; opacity: 0; animation-timing-function: steps(1, end); }
    49.29% { max-width: 0; opacity: 0; }
    100% { max-width: 0; opacity: 0; }
  }
  @keyframes word-a2 {
    0% { max-width: 0; opacity: 1; }
    15.24% { max-width: 0; opacity: 1; animation-timing-function: ease-out; }
    16.67% { max-width: 9em; opacity: 1; }
    47.14% { max-width: 9em; opacity: 1; }
    49.05% { max-width: 9em; opacity: 0; animation-timing-function: steps(1, end); }
    49.29% { max-width: 0; opacity: 0; }
    100% { max-width: 0; opacity: 0; }
  }
  @keyframes word-a3 {
    0% { max-width: 0; opacity: 1; }
    22.86% { max-width: 0; opacity: 1; animation-timing-function: ease-out; }
    24.29% { max-width: 9em; opacity: 1; }
    47.14% { max-width: 9em; opacity: 1; }
    49.05% { max-width: 9em; opacity: 0; animation-timing-function: steps(1, end); }
    49.29% { max-width: 0; opacity: 0; }
    100% { max-width: 0; opacity: 0; }
  }
  @keyframes word-b1 {
    0% { max-width: 0; opacity: 1; }
    57.62% { max-width: 0; opacity: 1; animation-timing-function: ease-out; }
    59.05% { max-width: 9em; opacity: 1; }
    97.14% { max-width: 9em; opacity: 1; }
    99.05% { max-width: 9em; opacity: 0; animation-timing-function: steps(1, end); }
    99.29% { max-width: 0; opacity: 0; }
    100% { max-width: 0; opacity: 0; }
  }
  @keyframes word-b2 {
    0% { max-width: 0; opacity: 1; }
    65.24% { max-width: 0; opacity: 1; animation-timing-function: ease-out; }
    66.67% { max-width: 9em; opacity: 1; }
    97.14% { max-width: 9em; opacity: 1; }
    99.05% { max-width: 9em; opacity: 0; animation-timing-function: steps(1, end); }
    99.29% { max-width: 0; opacity: 0; }
    100% { max-width: 0; opacity: 0; }
  }
  @keyframes word-b3 {
    0% { max-width: 0; opacity: 1; }
    72.86% { max-width: 0; opacity: 1; animation-timing-function: ease-out; }
    74.29% { max-width: 9em; opacity: 1; }
    97.14% { max-width: 9em; opacity: 1; }
    99.05% { max-width: 9em; opacity: 0; animation-timing-function: steps(1, end); }
    99.29% { max-width: 0; opacity: 0; }
    100% { max-width: 0; opacity: 0; }
  }
  @keyframes said-a {
    0% { opacity: 0; translate: 0 0.25em; }
    30.95% { opacity: 0; translate: 0 0.25em; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
    33.33% { opacity: 1; translate: 0 0; }
    47.14% { opacity: 1; translate: 0 0; }
    49.05% { opacity: 0; translate: 0 0; }
    100% { opacity: 0; translate: 0 0; }
  }
  @keyframes said-b {
    0% { opacity: 0; translate: 0 0.25em; }
    80.95% { opacity: 0; translate: 0 0.25em; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
    83.33% { opacity: 1; translate: 0 0; }
    97.14% { opacity: 1; translate: 0 0; }
    99.05% { opacity: 0; translate: 0 0; }
    100% { opacity: 0; translate: 0 0; }
  }
  @keyframes stage-play {
    0% { transform: scaleX(0); }
    31.43% { transform: scaleX(0); animation-timing-function: linear; }
    45.71% { transform: scaleX(1); }
    49.05% { transform: scaleX(1); animation-timing-function: steps(1, end); }
    49.29% { transform: scaleX(0); }
    81.43% { transform: scaleX(0); animation-timing-function: linear; }
    95.71% { transform: scaleX(1); }
    99.05% { transform: scaleX(1); animation-timing-function: steps(1, end); }
    99.29% { transform: scaleX(0); }
    100% { transform: scaleX(0); }
  }
  @keyframes label-write {
    0% { color: var(--accent-text); }
    30.48% { color: var(--accent-text); }
    31.9% { color: var(--text-tertiary); }
    49.52% { color: var(--text-tertiary); }
    50.95% { color: var(--accent-text); }
    80.48% { color: var(--accent-text); }
    81.9% { color: var(--text-tertiary); }
    98.1% { color: var(--text-tertiary); }
    99.52% { color: var(--accent-text); }
    100% { color: var(--accent-text); }
  }
  @keyframes label-say {
    0% { color: var(--text-tertiary); }
    30.48% { color: var(--text-tertiary); }
    31.9% { color: var(--accent-text); }
    48.57% { color: var(--accent-text); }
    50% { color: var(--text-tertiary); }
    80.48% { color: var(--text-tertiary); }
    81.9% { color: var(--accent-text); }
    97.62% { color: var(--accent-text); }
    99.05% { color: var(--text-tertiary); }
    100% { color: var(--text-tertiary); }
  }
  @keyframes speak-press {
    0% { scale: 1; }
    30.24% { scale: 1; }
    30.71% { scale: 0.94; }
    32.14% { scale: 1; }
    80.24% { scale: 1; }
    80.71% { scale: 0.94; }
    82.14% { scale: 1; }
    100% { scale: 1; }
  }

}

/* MARK: - Promesses */

.promises {
  list-style: none; margin: clamp(var(--space-xxl), 6vw, 6rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg);
}
.promises li { border-top: 1px solid var(--border); padding-top: var(--space-md); display: grid; gap: var(--space-xxs); }
.promises strong { font-weight: 600; font-size: 1.05rem; }
.promises span { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.45; }

/* MARK: - Pour qui : deux façons de commencer */

.audience-head { max-width: 54rem; }
.starts {
  display: grid; gap: var(--space-lg); margin-top: var(--space-xxl);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.start {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-xl);
  padding: clamp(var(--space-lg), 3vw, var(--space-xxl));
}
.start-gone { background: var(--accent-wash); border-color: transparent; view-timeline: --clip block; }
.start h3 { margin-top: var(--space-xl); font-family: var(--font-display); font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.12; letter-spacing: -0.025em; }
.start p { margin-top: var(--space-sm); color: var(--text-secondary); }
.start p strong { color: var(--text-primary); font-weight: 600; }
.start .fine { margin-top: auto; padding-top: var(--space-lg); font-size: 0.95rem; }

.start-visual {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-xs) var(--space-md);
  height: clamp(9rem, 7rem + 4vw, 11rem);
  padding: var(--space-md) var(--space-lg);
  background: var(--well); border-radius: var(--radius-lg);
  font-size: 0.9rem; font-weight: 600;
}
.start-gone .start-visual { background: var(--surface); }
.rec-state { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--lamp); }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lamp); }
.rec-time, .clip-meta span + span { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.live-wave { grid-column: 1 / -1; grid-row: 2 / 4; width: 100%; height: 100%; fill: var(--lamp); }
.clip-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--text-secondary); }
.clip-wave { grid-column: 1 / -1; width: 100%; height: 100%; overflow: visible; }
.clip-frame { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 2.5; }
.clip-kept { grid-column: 1 / -1; color: var(--accent-text); }
/* Le cadre se fait glisser (site.js) : il quitte alors l'animation de défilement. */
.clip-wave { cursor: grab; touch-action: pan-y; }
.clip-wave:active { cursor: grabbing; }
.clip.is-dragged .clip-frame, .clip.is-dragged .clip-window { animation: none; }
.clip.is-dragged .clip-kept { animation: none; opacity: 1; }
.clip-kept { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  .rec-dot { animation: rec-pulse 1.4s ease-in-out infinite; }
  .live-wave rect { transform-box: fill-box; transform-origin: center; animation: live 1.1s ease-in-out infinite alternate; }
  .live-wave rect:nth-child(3n + 1) { animation-duration: 0.8s; animation-delay: -0.4s; }
  .live-wave rect:nth-child(3n + 2) { animation-duration: 1.35s; animation-delay: -0.9s; }
  .live-wave rect:nth-child(5n) { animation-duration: 0.65s; animation-delay: -0.2s; }
  @keyframes rec-pulse { 50% { opacity: 0.25; } }
  @keyframes live { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
}
/* Le cadre cuivre glisse jusqu'au passage retenu quand la carte arrive à l'écran. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .clip-frame, .clip-window { animation: clip-find cubic-bezier(0.3, 0, 0.2, 1) both; animation-timeline: --clip; animation-range: entry 50% cover 55%; }
    .clip-kept { animation: fade-in linear both; animation-timeline: --clip; animation-range: cover 45% cover 55%; }
    @keyframes clip-find { from { transform: translateX(-330px); } to { transform: none; } }
  }
}

/* MARK: - Comment ça marche : une frise dans le temps */

.timeline {
  position: relative;
  list-style: none; margin: var(--space-xxl) 0 0; padding: 0;
  display: grid; gap: 0 clamp(var(--space-lg), 3vw, var(--space-xxl));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.timeline::before { content: ""; position: absolute; inset: 0 0 auto; border-top: 1px solid var(--border); }
.timeline li {
  position: relative;
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-xs);
  padding-top: var(--space-lg);
}
.timeline li::before {
  content: ""; position: absolute; top: -6px; left: 0;
  width: 11px; height: 11px; border-radius: 50%; background: var(--accent);
}
.timeline li > * { margin: 0; }
.when { color: var(--accent-text); font-weight: 600; font-size: 0.95rem; }
.timeline h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem); letter-spacing: -0.02em; }
.timeline li > p:not(.when) { color: var(--text-secondary); max-width: 30rem; }
.timeline .ipad { align-self: end; margin-top: var(--space-lg); }

/* La frise se trace au fil du défilement, les étapes s'allument une à une. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .timeline { view-timeline: --frise block; }
    .timeline::before { transform-origin: left center; animation: track-draw linear both; animation-timeline: --frise; animation-range: entry 20% cover 45%; }
    .timeline li::before { animation: dot-on cubic-bezier(0.3, 0, 0.2, 1.4) both; animation-timeline: --frise; }
    .timeline li:nth-child(1)::before { animation-range: entry 15% entry 30%; }
    .timeline li:nth-child(2)::before { animation-range: cover 28% cover 33%; }
    .timeline li:nth-child(3)::before { animation-range: cover 40% cover 45%; }
    .timeline .ipad { animation: shot-rise cubic-bezier(0.2, 0.7, 0, 1) both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .timeline li:nth-child(2) .ipad { animation-range: entry 10% entry 90%; }
    .timeline li:nth-child(3) .ipad { animation-range: entry 20% entry 100%; }
    @keyframes track-draw { from { scale: 0 1; } }
    @keyframes dot-on { from { scale: 0; } }
    @keyframes shot-rise { from { opacity: 0; translate: 0 56px; scale: 0.97; } }
  }
}

/* MARK: - Regard */

.gaze {
  display: grid; gap: var(--space-xxl) clamp(var(--space-xl), 5vw, 5rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
}
.beta {
  display: inline-block; vertical-align: 0.1em; margin-left: var(--space-xs);
  padding: 1px 10px; border-radius: 999px;
  background: var(--ochre-wash); color: var(--ochre);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0;
}
h2 .beta { vertical-align: 0.35em; }
.checks { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.checks li { position: relative; padding-left: 1.9rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.3em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid var(--accent);
}
.fine { margin-top: var(--space-lg); color: var(--text-tertiary); font-size: 0.95rem; }

.gaze-shot { margin: 0; }
/* max-width: none, sinon la règle générale des svg rogne la largeur et décale l'anneau. */
.ring { max-width: none; }
.ring path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100 100; }

/* Essayez : le pointeur (ou le doigt) tient lieu de regard. L'anneau se ferme
   en 1,2 s, puis la phrase est choisie. On s'en va : tout se défait aussitôt. */
.try {
  position: relative;
  width: min(30rem, 86%);
  margin: calc(-1 * clamp(2.5rem, 6vw, 5rem)) calc(-1 * clamp(0.5rem, 2vw, 2rem)) 0 auto;
  background: var(--surface-raised); border: 1px solid var(--separator); border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.try-label { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.45; }
.try-label strong { color: var(--text-primary); font-weight: 600; }
.try-touch { display: none; }
@media (hover: none) { .try-hover { display: none; } .try-touch { display: inline; } }
.try-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-sm); }
.try-key {
  --dwell: 1.2s;
  position: relative; min-height: 4.75rem; padding: 0 var(--space-xs);
  font: inherit; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); line-height: 1.15;
  color: var(--text-primary); background: var(--surface);
  border: 1px solid var(--separator); border-radius: var(--radius-md);
  cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color 0.15s, color 0.15s, scale 0.15s;
}
.try-key .ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.try-key .ring path { stroke-dashoffset: 100; transition: stroke-dashoffset 0.25s ease-out; }
.try-key:hover .ring path, .try-key:active .ring path, .try-key:focus-visible .ring path {
  stroke-dashoffset: 0; transition: stroke-dashoffset var(--dwell) linear;
}
.try-key:hover, .try-key:active, .try-key:focus-visible {
  background-color: var(--accent); color: var(--on-accent);
  transition: background-color 0.2s var(--dwell), color 0.2s var(--dwell);
}

/* MARK: - Ce qui compte : les messages, puis le reste en colonnes */

.keepsakes {
  display: grid; gap: var(--space-xxl) clamp(var(--space-xl), 5vw, 5rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
}
.messages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.messages li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md);
  background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm);
}
.messages li::before {
  content: "\25B6\FE0E"; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; padding-left: 2px;
  background: var(--accent); color: var(--on-accent); font-size: 0.8rem;
}
.messages .spoken { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.25; }
.mini-wave { width: clamp(4rem, 9vw, 7rem); height: 28px; fill: var(--accent); }
.extras {
  grid-column: 1 / -1;
  display: grid; gap: var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr));
}
.extras article { border-top: 1px solid var(--border); padding-top: var(--space-md); }
.extras p { margin-top: var(--space-xs); color: var(--text-secondary); }

/* MARK: - Confidentialité : un iPad fermé, une seule porte, que vous ouvrez */

.privacy {
  display: grid; gap: var(--space-xxl) clamp(var(--space-xl), 5vw, 5rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
}
.more { margin-top: var(--space-lg); }
.vault { display: grid; justify-items: center; }
.vault-device {
  width: 100%;
  background: var(--surface);
  border: clamp(8px, 1vw, 13px) solid var(--scrim); border-radius: clamp(24px, 2.8vw, 38px);
  padding: clamp(var(--space-lg), 3vw, var(--space-xxl));
}
.vault-title { display: flex; align-items: center; gap: var(--space-xs); color: var(--patina); font-weight: 600; }
.vault-title svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.vault-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0 0; }
.vault-items div { background: var(--patina-wash); border-radius: var(--radius-md); padding: var(--space-md); }
.vault-items dt { font-weight: 600; }
.vault-items dd { margin: 2px 0 0; color: var(--patina); font-size: 0.95rem; font-weight: 500; }
.vault-exit { position: relative; max-width: 24rem; padding-top: var(--space-xxl); color: var(--text-secondary); text-align: center; }
.vault-exit strong { color: var(--text-primary); font-weight: 600; }
.vault-exit::before {
  content: ""; position: absolute; top: 0; left: 50%;
  height: calc(var(--space-xxl) - var(--space-xs));
  border-left: 2px dashed var(--border);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vault-items div { animation: shot-rise cubic-bezier(0.2, 0.7, 0, 1) both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .vault-items div:nth-child(2n) { animation-range: entry 10% entry 80%; }
    .vault-exit::before { transform-origin: top; animation: track-down linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; }
    @keyframes track-down { from { scale: 1 0; } }
  }
}

/* MARK: - En pratique */

.specs { margin: var(--space-xxl) 0 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.specs div { border-top: 2px solid var(--accent); padding-top: var(--space-md); }
.specs dt { font-weight: 600; font-size: 1.1rem; }
.specs dd { margin: var(--space-xs) 0 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.5; }

/* MARK: - Questions et clôture */

.questions { display: grid; gap: var(--space-xl) clamp(var(--space-xl), 5vw, 5rem); grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
.questions .faq { margin-top: 0; max-width: none; }

.closing-band {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-xl);
  padding: clamp(var(--space-xxl), 6vw, 6rem) clamp(var(--space-lg), 5vw, var(--space-xxxl));
}
.closing-band h2 { max-width: 34rem; }
.closing-band > p { margin-top: var(--space-md); max-width: 36rem; color: var(--text-secondary); }
.closing-band .button { margin-top: var(--space-xl); }
.closing-address { margin-top: var(--space-sm); color: var(--text-secondary); font-size: 1rem; overflow-wrap: anywhere; }
.closing-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-lg); font-size: 1rem; }
.closing-band .closing-links { margin-top: var(--space-lg); }
.closing-band { view-timeline: --closing block; }
.closing-wave { width: 100%; margin-top: clamp(var(--space-xl), 5vw, var(--space-xxxl)); }
/* L'onde de clôture se lit pendant qu'on arrive en bas de la page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .closing-wave .stage-progress { animation: closing-play linear both; animation-timeline: --closing; animation-range: entry 40% cover 70%; }
    @keyframes closing-play { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

.paths { display: grid; gap: var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-xl); }
/* MARK: - Cartes et boutons */

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--text-primary); text-decoration: none;
}
a.card:hover { border-color: var(--border); text-decoration: none; }
.card p { margin-top: var(--space-xs); color: var(--text-secondary); }
.card .go { display: inline-block; margin-top: var(--space-md); color: var(--accent-text); font-weight: 600; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--space-lg);
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-md);
  font-weight: 600; text-decoration: none; text-align: center;
}
.button:hover { text-decoration: none; }

.contact {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg);
  margin-top: var(--space-xl);
  background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-xl);
}
.contact .address { font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.contact p.support-text { margin-top: var(--space-xxs); font-size: 1rem; }

.note {
  background: var(--well); border-radius: var(--radius-lg);
  padding: var(--space-lg); margin-top: var(--space-xxl);
}
.note h2, .prose .note h2 { margin: 0 0 var(--space-xs); font-size: 1.15rem; }
.note p { color: var(--text-secondary); }

/* MARK: - Rapport : ce qui part, et quand */

.report-steps { margin: var(--space-lg) 0 0; padding-left: 1.4rem; max-width: var(--measure); }
.report-steps li + li { margin-top: var(--space-xs); }
.contents { display: grid; gap: var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-xl); }
.contents section { border-top: 1px solid var(--border); padding-top: var(--space-md); }
.contents ul { margin: var(--space-sm) 0 0; padding-left: 1.1rem; color: var(--text-secondary); }
.contents li + li { margin-top: var(--space-xxs); }
.contents + .section-intro { margin-top: var(--space-xl); }

/* MARK: - Questions fréquentes */

.faq { margin-top: var(--space-lg); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--separator); }
.faq details:first-child { border-top: 1px solid var(--separator); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-md); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font-weight: 400; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details > p, .faq details > ul { padding-bottom: var(--space-md); color: var(--text-secondary); }
.faq details > p + p { margin-top: 0; }

/* MARK: - Chercheurs */

.video-slot {
  margin: var(--space-xl) 0 0;
}
.video-slot video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); background: var(--well); }
/* Tant que la vidéo n'est pas là : la capture du regard, à taille raisonnable. */
.video-slot .ipad { max-width: 52rem; }
.video-slot figcaption { margin-top: var(--space-sm); color: var(--text-secondary); font-size: 1rem; }

.device {
  margin-top: var(--space-xl);
  border: 1.5px solid var(--border); border-radius: var(--radius-xl);
  padding: var(--space-lg);
}
.device-label { font-weight: 600; color: var(--text-secondary); font-size: 0.95rem; }
.lanes { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.lane {
  display: grid; gap: var(--space-xs) var(--space-md); align-items: center;
  grid-template-columns: 9rem minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
}
.lane h3 { font-size: 1rem; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.flow li { background: var(--well); border-radius: var(--radius-sm); padding: 2px var(--space-sm); font-size: 0.95rem; }
.flow li + li::before { content: "→"; color: var(--text-tertiary); margin-right: var(--space-xs); margin-left: calc(-1 * var(--space-xxs)); }
.flow li + li { background: none; padding-left: 0; }
.flow li + li span { background: var(--well); border-radius: var(--radius-sm); padding: 2px var(--space-sm); }
.boundary { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-md); }
.boundary p { font-size: 1rem; color: var(--text-secondary); padding-left: var(--space-md); border-left: 3px solid var(--accent); }
.boundary strong { color: var(--text-primary); }

.table-scroll { overflow-x: auto; margin-top: var(--space-lg); }
.models { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: 1rem; }
.models th, .models td { text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--separator); vertical-align: top; }
.models thead th { color: var(--text-secondary); font-weight: 600; font-size: 0.9rem; border-bottom-color: var(--border); }
.models tbody th { font-weight: 600; }
.models .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.measures { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-xl); }
.measures section { background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-lg); padding: var(--space-lg); }
.measures ul { margin: var(--space-sm) 0 0; padding-left: 1.1rem; color: var(--text-secondary); }
.measures li + li { margin-top: var(--space-xxs); }
.reports { margin-top: var(--space-xl); max-width: 46rem; }
.reports div { padding-block: var(--space-md); border-bottom: 1px solid var(--separator); }
.reports div:first-child { border-top: 1px solid var(--separator); }
.reports dt { font-weight: 600; }
.reports dd { margin: var(--space-xxs) 0 0; color: var(--text-secondary); }
.status { display: inline-block; margin-left: var(--space-xs); padding: 0 8px; border-radius: 999px; background: var(--ochre-wash); color: var(--ochre); font-size: 0.85rem; font-weight: 600; }

/* MARK: - Page introuvable */

.lost { padding-top: var(--space-xxxl); max-width: var(--measure); }
.lost .lede { margin: var(--space-md) 0 var(--space-lg); }

/* MARK: - Pied de page */

.site-footer {
  padding-block: 0 var(--space-xxxl);
  color: var(--text-secondary); font-size: 0.95rem;
}
.site-footer::before { content: ""; display: block; border-top: 1px solid var(--separator); margin-bottom: var(--space-xl); }
.site-footer > * { max-width: var(--page); }
/* Don à l'ARSLA : un bloc posé, sous le même cadre que le reste du pied de page. */
.donate {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl); padding: var(--space-lg);
  border: 1px solid var(--separator); border-radius: var(--radius-lg);
  background: var(--surface);
}
.arsla-logo { width: 84px; height: auto; display: block; }
:root:not([data-theme="light"]) .arsla-ink { fill: var(--text-primary); }
.donate-text p { margin: 0; color: var(--text-primary); max-width: 62ch; }
.donate-text .donate-note { margin-top: var(--space-xxs); color: var(--text-tertiary); font-size: 0.88rem; }
.donate-button {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-md);
  border: 1.5px solid var(--text-primary); border-radius: var(--radius-md);
  color: var(--text-primary); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.donate-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.2s; }
.donate-button:hover { background: var(--text-primary); color: var(--canvas); text-decoration: none; }
.donate-button:hover svg { translate: 2px -2px; }
.not-medical { color: var(--text-primary); font-weight: 500; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-md); }
.footer-links a { color: var(--text-secondary); }
.legal { margin-top: var(--space-md); color: var(--text-tertiary); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* MARK: - Transparence réduite, contraste élevé : surfaces pleines, contours francs */

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--border); }
  .card, .contact, .lane, .measures section, .stage, .messages li, .try, .start, .key, .closing-band, .ipad { border: 1.5px solid var(--border); }
  .lang-menu summary, .theme-toggle, .lang-menu ul { border-color: var(--border); }
}

/* MARK: - Tablette portrait, petits écrans */

@media (max-width: 960px) {
  .promises, .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
}
@media (max-width: 820px) {
  .split, .hero-head, .stage, .starts, .timeline, .gaze, .keepsakes, .extras, .privacy, .questions, .contents, .measures, .boundary, .paths { grid-template-columns: minmax(0, 1fr); }
  .timeline { row-gap: var(--space-xxl); }
  .timeline::before { display: none; }
  .timeline li { grid-row: auto; grid-template-rows: none; border-top: 1px solid var(--border); }
  .timeline .ipad { margin-top: var(--space-md); }
  .try { width: auto; margin: var(--space-sm) 0 0; }
  .header-tools { order: 2; margin-left: auto; }
  .site-header nav { order: 3; width: 100%; margin-left: 0; }
  .lane { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  :root { --space-screenMargin: 16px; }
  .site-header { position: static; }
  body { font-size: 1.0625rem; }
  .site-header nav { column-gap: var(--space-md); font-size: 0.92rem; }
  .promises, .specs { grid-template-columns: minmax(0, 1fr); }
  .vault-items { grid-template-columns: minmax(0, 1fr); }
  .key { height: 3.3rem; font-size: 0.78rem; }
  /* Touches trop petites : l'anneau suffit à montrer le regard. */
  .gaze-dot { display: none; }
  /* Le drapeau suffit sur téléphone ; le nom reste dans l'étiquette accessible. */
  .lang-menu summary > span { display: none; }
  .board { --board-gap: 6px; }
  .messages li { grid-template-columns: auto minmax(0, 1fr); }
  .stage-wave-wide { display: none; }
  .stage-wave-narrow { display: block; }
  .messages .mini-wave { display: none; }
  .contact { padding: var(--space-lg); }
  .contact .button, .closing-band .button { width: 100%; }
  .donate { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); }
  .donate-button { justify-content: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .stage.is-live .focus { transition: translate 0.24s cubic-bezier(0.2, 0.7, 0, 1); }
  .stage.is-live .key-word, .stage.is-live .word-in { animation: word-pop 0.28s cubic-bezier(0.2, 0.7, 0, 1) both; }
  .stage.is-live .word-in { display: inline-block; white-space: pre; }
  .stage.is-live.is-chosen .focus-flash { animation: chosen-flash 0.5s ease-out both; }
  .stage.is-live.is-speaking .stage-progress { animation: live-play var(--say, 3s) linear both; }
  .stage.is-live.is-speaking .said-live { animation: word-pop 0.4s cubic-bezier(0.2, 0.7, 0, 1) both; }
  .stage.is-live.is-empty .key-speak { animation: nudge 0.36s ease-in-out; }
  @keyframes word-pop { from { opacity: 0; translate: 0 6px; } }
  @keyframes chosen-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes live-play { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes nudge { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
}