/* MeshMess — landing bêta.
   Sous-marque SURVEY : même fond, même typographie et mêmes tokens d'identité.
   Le cyan reste un accent produit, jamais une nouvelle marque indépendante. */

:root {
  --survey-mint: #6cffe0;
  --survey-cyan: #00d4ff;
  --survey-deep: #060a0f;
  --survey-bg-dark: #0b1219;
  --survey-panel-dark: #111a24;
  --survey-hair-dark: #1f2a33;
  --survey-ink-dark: #f2f4f7;
  --survey-soft-dark: #7a8694;
  --bg: var(--survey-deep);
  --bg-raise: var(--survey-bg-dark);
  --surface: var(--survey-panel-dark);
  --ink: var(--survey-ink-dark);
  --ink-soft: var(--survey-soft-dark);
  --ink-faint: #566372;
  --line: var(--survey-hair-dark);
  --cyan: var(--survey-cyan);
  --teal: var(--survey-mint);
  --ok: #34d17a;
  --warn: #f0b429;
  --grad: linear-gradient(135deg, var(--cyan), var(--teal));
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --text: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --space-section-compact: clamp(4rem, 2.8rem + 3vw, 6.5rem);
  --measure: 40rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Compatibilité des illustrations inline historiques : le SVG reste animé,
   mais ses anciens hexadécimaux ne peuvent plus dévier de la charte SURVEY. */
svg [fill="#00d9ff"] { fill: var(--survey-cyan) !important; }
svg [fill="#1effe1"] { fill: var(--survey-mint) !important; }
svg [stroke="#00d9ff"] { stroke: var(--survey-cyan) !important; }
svg [stroke="#1effe1"] { stroke: var(--survey-mint) !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 9rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--text);
  line-height: 1.65;
  overflow-x: clip;
  background:
    radial-gradient(60rem 34rem at 78% -6rem, rgba(0, 217, 255, .07), transparent 60%),
    radial-gradient(46rem 30rem at 12% 32rem, rgba(30, 255, 225, .04), transparent 65%),
    var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* grain — l'atmosphère qui casse l'aplat numérique */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
a { color: inherit; }
::selection { background: var(--cyan); color: var(--bg); }
.mono { font-family: var(--mono); }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; }
h2 {
  font-size: clamp(1.7rem, 1.25rem + 2.2vw, 2.8rem);
  font-weight: 750;
  max-width: 24ch;
  text-wrap: balance;
}
.kicker {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 1.4rem;
  display: flex; align-items: center; gap: .8rem;
}
.kicker::before {
  content: ""; width: 2.2rem; height: 1px; flex: none;
  background: var(--grad);
}
.section-lead {
  margin-top: 1.4rem; max-width: var(--measure); color: var(--ink-soft);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px;
}

/* ── splash ───────────────────────────────────────
   Porté du SplashScreen.swift de l'app iOS. Absent tant que le script
   d'amorce n'a pas posé data-splash : sans JS, il n'existe pas. */
.splash { display: none; }
:root[data-splash] .splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  padding: clamp(1.5rem, 5vw, 3rem);
}
:root[data-splash] body { overflow: hidden; }
.splash.is-leaving {
  opacity: 0; transition: opacity 280ms var(--ease); pointer-events: none;
}
.splash-mesh { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .65; }

.splash-camera {
  position: relative;
  transform: scale(1.16);
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.splash.is-settled .splash-camera { transform: scale(1); }
.splash-brand { display: flex; flex-direction: column; align-items: center; }

.splash-mark-wrap { position: relative; display: grid; place-items: center; }
.splash-mark {
  width: clamp(5rem, 16vw, 8rem); height: clamp(5rem, 16vw, 8rem);
  opacity: 0;
  /* l'entrée : le logo se tourne face à nous en grandissant, avec rebond */
  transform: scale(.32) rotateY(48deg) rotate(-10deg);
  transition: opacity 360ms var(--ease), transform 560ms cubic-bezier(.34, 1.56, .64, 1);
  filter: drop-shadow(0 0 26px rgba(0, 217, 255, .45));
}
.splash.is-marked .splash-mark { opacity: 1; transform: none; }
/* le halo d'impact : flash rapide, extinction lente */
.splash-bloom {
  position: absolute; width: 26rem; height: 26rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(29, 250, 255, .55), rgba(0, 217, 255, .18), transparent 72%);
  opacity: 0; pointer-events: none;
  transition: opacity 360ms ease-in;
}
.splash.is-bloom .splash-bloom { opacity: 1; transition-duration: 220ms; transition-timing-function: ease-out; }

.splash-wordmark {
  position: relative; overflow: hidden;
  margin-top: 1.4rem;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem); font-weight: 800; letter-spacing: -.01em;
  color: var(--ink);
  opacity: 0; transform: translateY(12px); filter: blur(10px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease), filter 420ms var(--ease);
}
.splash-wordmark span { color: var(--cyan); }
.splash.is-worded .splash-wordmark { opacity: 1; transform: none; filter: none; }
/* le balayage lumineux, une seule fois, après que les lettres sont nettes */
.splash-shimmer {
  position: absolute; top: 0; bottom: 0; width: 4.5rem; left: -6rem;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  pointer-events: none;
}
.splash.is-shimmer .splash-shimmer {
  transform: translateX(20rem); transition: transform 620ms ease-in-out;
}
.splash-tagline {
  margin-top: .5rem; font-family: var(--mono);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0; transition: opacity 500ms var(--ease);
}
.splash.is-tagged .splash-tagline { opacity: 1; }

.splash-boot {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(1.5rem, 5vh, 3rem);
  width: min(30rem, calc(100% - 3rem));
  opacity: 0; transition: opacity 400ms var(--ease);
}
.splash.is-booting .splash-boot { opacity: 1; }
.splash-steps { list-style: none; display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.splash-steps li {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .82rem; opacity: .35;
  transition: opacity 220ms var(--ease);
}
.splash-steps li.is-done { opacity: 1; }
.splash-dot {
  width: .5rem; height: .5rem; border-radius: 50%; flex: none;
  border: 1px solid var(--ink-faint);
  animation: chip-pulse 1.6s ease-in-out infinite;
}
.is-done .splash-dot { border-color: transparent; animation: none; }
.splash-title { color: var(--ink); font-weight: 500; }
.splash-detail {
  margin-left: auto; text-align: right;
  font-family: var(--mono); font-size: .68rem;
}
.splash-bar {
  height: 4px; border-radius: 999px; background: var(--surface); overflow: hidden;
}
.splash-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--grad);
  transition: width 350ms var(--ease);
}
.splash-claim {
  margin-top: .6rem; font-size: .68rem; color: var(--ink-faint);
}
.splash-skip {
  position: absolute; top: clamp(1rem, 3vh, 1.6rem); right: clamp(1rem, 3vw, 1.6rem);
  font: inherit; font-size: .78rem; cursor: pointer;
  background: transparent; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: .35rem .9rem;
  transition: color 160ms, border-color 160ms;
}
.splash-skip:hover { color: var(--ink); border-color: var(--ink-soft); }

/* Sur petit écran, les libellés passaient sur deux lignes et le journal
   perdait son alignement en colonnes. */
@media (max-width: 30rem) {
  .splash-steps { gap: .5rem; }
  .splash-steps li { font-size: .74rem; gap: .45rem; }
  .splash-detail { font-size: .6rem; }
  .splash-claim { font-size: .62rem; }
}

/* Mouvement réduit : le MÊME état final, atteint par de simples fondus.
   Pas la même animation ralentie. */
@media (prefers-reduced-motion: reduce) {
  .splash-camera { transform: none; transition: none; }
  .splash-mark { transform: none; transition: opacity 260ms linear; }
  .splash-wordmark { transform: none; filter: none; transition: opacity 260ms linear; }
  .splash-bloom, .splash-shimmer { display: none; }
  .splash-dot { animation: none; }
}

/* ── masthead ─────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
}
/* pas de flex-wrap : la barre doit rester sur UNE ligne, ce sont la chip
   puis la nav qui disparaissent quand la place manque (voir plus bas). */
.masthead .wrap { display: flex; align-items: center; gap: .9rem; }
.wordmark {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem;
  font-weight: 800; letter-spacing: .04em; font-size: 1.05rem;
  text-decoration: none; white-space: nowrap; flex: none;
}
.wordmark .mark { width: 1.75rem; height: 1.75rem; flex: none; }
.wordmark small { font-weight: 400; color: var(--ink-faint); font-size: .85rem; letter-spacing: .02em; }
.wordmark small b { color: var(--teal); font-weight: 700; letter-spacing: .08em; }
.topnav { margin-left: auto; display: flex; gap: .35rem; flex: none; }
.topnav a {
  min-height: 2.75rem; padding: .45rem .65rem;
  display: inline-flex; align-items: center;
  text-decoration: none; font-size: .86rem; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color 160ms, border-color 160ms, background 160ms; white-space: nowrap;
}
.topnav a:hover { color: var(--cyan); background: rgba(0, 217, 255, .035); }
.topnav a[aria-current="location"] { color: var(--ink); border-bottom-color: var(--cyan); }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem;
  color: var(--ink-soft); white-space: nowrap; flex: none;
}
.chip-dot {
  width: .42rem; height: .42rem; border-radius: 50%; background: var(--teal);
  animation: chip-pulse 2.4s ease-in-out infinite;
}
@keyframes chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.btn-mini {
  padding: .5rem 1rem; font-size: .85rem; border-radius: .4rem;
  white-space: nowrap; flex: none;
}

/* ── hero ─────────────────────────────────────── */
.hero { padding: var(--space-section) 0 calc(var(--space-section) * .7); overflow: hidden; }
.hero-grid {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}
h1 {
  font-size: clamp(2.2rem, 1.1rem + 5vw, 4.6rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.02;
  max-width: 15ch; text-wrap: balance;
}
h1 .turn {
  display: block;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead {
  margin-top: 1.8rem; max-width: var(--measure); color: var(--ink-soft);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
}
.lead strong { color: var(--ink); font-weight: 600; }
.cta-row { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 1rem;
  padding: .9rem 1.7rem; border-radius: .45rem; border: 1px solid transparent;
  background: var(--grad); color: #04231c; cursor: pointer;
  font-family: var(--sans);
  transition: transform 160ms var(--ease), opacity 160ms;
}
.btn:hover {
  transform: translateY(-2px); opacity: .95;
  box-shadow: 0 10px 34px rgba(0, 217, 255, .28);
}
.btn:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(0, 217, 255, .2); }
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--line); font-weight: 500;
}
.btn-ghost:hover { border-color: var(--cyan); box-shadow: 0 10px 34px rgba(0, 217, 255, .12); }
.hero-note { margin-top: 2rem; font-size: .74rem; letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; }

.hero-art {
  position: relative; isolation: isolate;
  filter: drop-shadow(0 18px 42px rgba(0, 217, 255, .08));
}
.hero-art::before {
  content: ""; position: absolute; inset: 14% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 217, 255, .1), transparent 68%);
  opacity: .75;
}
.hero-art svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Le mouvement raconte le maillage : un paquet arrive au relai local, puis
   trois signaux repartent vers les pairs. Aucun mouvement purement décoratif. */
.packet, .route-packet, .mode-packet, .verification-packet, .flow-dot, .store-dot {
  filter: drop-shadow(0 0 7px rgba(30, 255, 225, .9));
}
.route-packet { opacity: .9; }
.home-orbit { opacity: .55; }
.home-orbit-b { animation: none; opacity: .38; }
.home-status circle { opacity: .65; }
@keyframes relay-led { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }

/* Les nœuds restent calmes : les paquets portent seuls le récit du trajet. */
.n-core { fill: var(--bg-raise); stroke: var(--cyan); stroke-width: 2; }
.n-pulse {
  fill: none; stroke: var(--cyan); stroke-width: 1.5;
  transform-origin: center; transform-box: fill-box;
  transform: scale(1.35); opacity: .14;
}
.mesh-labels text { font-family: var(--mono); }

/* Posé seulement par app.js : sans JS, les scènes restent complètes et
   statiques. Avec JS, les boucles CSS sont suspendues hors écran ; SMIL est
   suspendu en parallèle par le contrôleur. */
.motion-managed:not(.motion-active) * { animation-play-state: paused !important; }

/* ── révélation au scroll ─────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(26px) scale(.985); }
.revealed {
  opacity: 1; transform: none;
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .n-pulse, .c-star circle, .waves path, .env, .env-tag, .payload-lines,
  .sign-word, .chip-dot, .t-dot, .home-orbit, .home-status circle,
  .relay-status, .relay-led, .relation-halo, .phone-status, .port, .box-store,
  .hero-art::before, .app-art::before {
    animation: none !important;
  }
  .motion-packet { display: none; }
  .env, .env-tag, .payload-lines, .relation-link, .relation-key,
  .constellation-path, .receipt-check { opacity: 1 !important; transform: none !important; }
  .story img, .story:hover img {
    transform: none !important; filter: saturate(.68) contrast(1.08) brightness(.92);
    transition: none !important;
  }
  .message-peek { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── le problème ──────────────────────────────── */
.problem { border-block: 1px solid var(--line); background: var(--bg-raise); }
.problem .wrap { padding-block: calc(var(--space-section) * .8); }
.problem-grid {
  margin-top: 2.6rem; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.p-card {
  background: var(--surface); padding: 1.8rem 1.6rem;
  transition: background 240ms var(--ease);
}
.p-card:hover { background: color-mix(in srgb, var(--cyan) 4%, var(--surface)); }
.p-card svg {
  width: 2.6rem; height: 2.6rem; color: var(--cyan); margin-bottom: 1rem;
  transition: transform 240ms var(--ease);
}
.p-card:hover svg { transform: translateY(-3px); }
.p-card h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.p-card p { color: var(--ink-soft); font-size: .95rem; }
/* stagger de révélation */
.p-card:nth-child(2) { transition-delay: 90ms; }
.p-card:nth-child(3) { transition-delay: 180ms; }

/* ── les vies derrière les messages ─────────────── */
.human-stories .wrap { padding-block: var(--space-section); }
.stories-head {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: end;
}
.stories-head .section-lead { margin-top: 0; }
.story-mosaic {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: repeat(2, minmax(19rem, 1fr)); gap: 1rem;
}
.story-mosaic::before {
  content: ""; position: absolute; inset: -2rem 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(32rem 20rem at 30% 46%, rgba(0, 217, 255, .07), transparent 72%),
    radial-gradient(24rem 16rem at 82% 55%, rgba(30, 255, 225, .045), transparent 74%);
}
.story {
  position: relative; min-height: 19rem; overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, var(--line)); border-radius: .24rem;
  background: var(--surface); box-shadow: inset 0 0 0 1px rgba(4, 7, 12, .42);
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.story:hover {
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--line));
  box-shadow: inset 0 0 0 1px rgba(4, 7, 12, .28), 0 20px 60px rgba(0, 0, 0, .2);
}
.story::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 1.25rem 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left top / 1px 1.25rem no-repeat,
    linear-gradient(var(--teal), var(--teal)) right top / 1.25rem 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) right top / 1px 1.25rem no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom / 1.25rem 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom / 1px 1.25rem no-repeat,
    linear-gradient(var(--teal), var(--teal)) right bottom / 1.25rem 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) right bottom / 1px 1.25rem no-repeat,
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(0, 217, 255, .028) 5px 6px);
  opacity: .66;
}
.story::after {
  content: attr(data-frame-label); position: absolute; z-index: 5; top: .85rem; left: .9rem;
  color: rgba(234, 242, 247, .72); font-family: var(--mono); font-size: .56rem;
  line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  padding: .42rem .55rem; border: 1px solid rgba(0, 217, 255, .24);
  background: rgba(4, 12, 20, .78); backdrop-filter: blur(8px);
}
.story-family { grid-row: 1 / span 2; }
.story img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.68) contrast(1.08) brightness(.92); transform: scale(1.012);
  transition: transform 700ms var(--ease), filter 420ms var(--ease);
}
.story:hover img { transform: scale(1.025); filter: saturate(.78) contrast(1.08) brightness(.94); }
.story-family img { object-position: 53% center; }
.story-work img { object-position: 52% center; }
.story-close img { object-position: center 42%; }
.story-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, .12), transparent 36%, rgba(30, 255, 225, .035) 72%, transparent),
    linear-gradient(180deg, rgba(4, 7, 12, .12) 24%, rgba(4, 7, 12, .88) 100%),
    linear-gradient(90deg, rgba(4, 7, 12, .38), transparent 54%);
}
.story-caption { position: absolute; z-index: 2; left: clamp(1.2rem, 3vw, 2rem); bottom: clamp(1.2rem, 3vw, 2rem); max-width: 23rem; }
.story-caption h3 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.85rem); text-wrap: balance; }
.story-caption > p:last-child { margin-top: .5rem; color: rgba(234, 242, 247, .76); font-size: 1rem; }
.story-audience {
  color: var(--teal); text-transform: uppercase; letter-spacing: .13em;
  font-size: .66rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem;
}
.story-audience::before { content: ""; width: 1.15rem; height: 1px; background: var(--grad); }
.message-peek {
  position: absolute; z-index: 3; top: clamp(1rem, 2vw, 1.5rem); right: clamp(1rem, 2vw, 1.5rem);
  width: min(18rem, calc(100% - 2rem)); padding: .9rem 1rem;
  border: 1px solid rgba(0, 217, 255, .36); border-radius: .18rem;
  background:
    linear-gradient(145deg, rgba(0, 217, 255, .055), transparent 42%),
    rgba(4, 12, 20, .91); color: var(--ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(10px) saturate(.8);
  transform: none; opacity: 1;
}
.message-peek::before {
  content: ""; position: absolute; left: 54%; bottom: -2.35rem;
  width: 1px; height: 2.35rem; pointer-events: none;
  background: linear-gradient(var(--cyan), rgba(0, 217, 255, .12));
}
.message-peek::after {
  content: ""; position: absolute; left: calc(54% - 3px); bottom: -2.55rem;
  width: 7px; height: 7px; border: 1px solid var(--cyan); border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 12px rgba(0, 217, 255, .65);
}
.story-work .message-peek::before { left: 72%; }
.story-work .message-peek::after { left: calc(72% - 3px); }
.story-close .message-peek::before { left: 42%; }
.story-close .message-peek::after { left: calc(42% - 3px); }
.human-stories[data-reveal]:not(.revealed) .message-peek { opacity: 0; transform: translateY(-10px) scale(.97); }
.human-stories.revealed .message-peek { transition: opacity 620ms var(--ease) 360ms, transform 620ms var(--ease) 360ms; }
.story-work .message-peek, .story-close .message-peek { width: min(16rem, calc(100% - 2rem)); }
.message-person { display: flex; align-items: center; gap: .55rem; font-size: .78rem; }
.message-person b { font-weight: 650; }
.message-avatar {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  color: #04231c; background: var(--grad); font-size: .68rem; font-weight: 800;
}
.message-mode {
  margin-left: auto; color: var(--ok); font-family: var(--mono); font-size: .58rem;
  text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: .32rem;
}
.message-mode::before { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: var(--ok); }
.message-peek > p {
  margin: .75rem 0 .5rem; padding: .65rem .75rem; border: 1px solid rgba(0,217,255,.24);
  border-radius: .16rem;
  background: linear-gradient(110deg, rgba(0, 217, 255, .11), rgba(30, 255, 225, .035));
  font-size: .82rem; line-height: 1.4;
}
.message-receipt { display: block; text-align: right; color: var(--ok); font-family: var(--mono); font-size: .56rem; }

/* ── comment ça marche ────────────────────────── */
.how .wrap { padding-block: var(--space-section-compact); }
.steps { list-style: none; margin-top: 3rem; display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); }
.step {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}
.step:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.step:nth-child(even) .step-art { order: 2; }
.step-art {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 217, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 255, .025) 1px, transparent 1px),
    linear-gradient(160deg, color-mix(in srgb, var(--cyan) 5%, var(--bg-raise)), var(--bg-raise) 55%);
  background-size: 24px 24px, 24px 24px, auto;
  border: 1px solid var(--line); border-radius: .8rem;
  padding: clamp(1rem, 2vw, 1.8rem);
  box-shadow: inset 0 0 38px rgba(0, 217, 255, .025);
  transition: border-color 240ms var(--ease), transform 240ms var(--ease);
}
.step:hover .step-art {
  border-color: color-mix(in srgb, var(--cyan) 35%, var(--line));
  transform: translateY(-2px);
}
/* repères d'angle, façon viseur d'instrument */
.step-art::before, .step-art::after {
  content: ""; position: absolute; width: .9rem; height: .9rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
}
.step-art::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: .8rem; }
.step-art::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: .8rem; }
.step-art svg { width: 100%; height: auto; display: block; }
.step-n {
  display: inline-block; font-size: .78rem; letter-spacing: .14em;
  color: var(--cyan); border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .65rem; margin-bottom: .9rem;
}
.step-copy h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem); margin-bottom: .8rem; }
.step-copy p { color: var(--ink-soft); max-width: var(--measure); }
.step-copy strong { color: var(--ink); font-weight: 600; }

/* Le relai local répond, puis les trois enveloppes se ferment de l'intérieur
   vers l'extérieur. Les entrées sont brèves ; seule l'activité reste en boucle. */
.relay-status { animation: status-settle 520ms var(--ease) both; }
.relay-led { animation: relay-led 1.25s ease-in-out infinite; animation-delay: var(--d, 0s); }
.env, .env-tag, .payload-lines {
  transform-origin: center; transform-box: fill-box;
  opacity: 1; transform: none;
}
.step[data-reveal]:not(.revealed) .env,
.step[data-reveal]:not(.revealed) .env-tag,
.step[data-reveal]:not(.revealed) .payload-lines {
  opacity: .16; transform: scale(.92);
}
.step.revealed .payload-lines { animation: layer-settle 480ms var(--ease) 90ms both; }
.step.revealed .env-1, .step.revealed .env-tag-1 { animation: layer-settle 520ms var(--ease) 220ms both; }
.step.revealed .env-2, .step.revealed .env-tag-2 { animation: layer-settle 520ms var(--ease) 420ms both; }
.step.revealed .env-3, .step.revealed .env-tag-3 { animation: layer-settle 520ms var(--ease) 620ms both; }
@keyframes status-settle { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes layer-settle { from { opacity: .16; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.waves path {
  transform-origin: left center; transform-box: fill-box;
  animation: wave 2.8s ease-in-out infinite;
}
@keyframes wave { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
.step-art text, .ritual-art text { font-family: var(--mono); }

/* Une clé par relation : les quatre branches se révèlent séparément, au lieu
   de faire pulser tout le dessin comme un bloc indifférencié. */
.relation-halo {
  transform-origin: center; transform-box: fill-box;
  opacity: .5;
}
.relation-link, .relation-key {
  opacity: 1; transform-origin: center; transform-box: fill-box;
}
.step[data-reveal]:not(.revealed) .relation-link { opacity: .16; transform: scaleX(.25); }
.step[data-reveal]:not(.revealed) .relation-key { opacity: .16; transform: translateY(5px) scale(.96); }
.step.revealed .relation-link {
  opacity: .85; transform: none;
  transition: opacity 440ms var(--ease) var(--d), transform 440ms var(--ease) var(--d);
}
.step.revealed .relation-key {
  opacity: 1; transform: none;
  transition: opacity 480ms var(--ease) calc(var(--d) + .18s), transform 480ms var(--ease) calc(var(--d) + .18s);
}
.mode-packet-compat { opacity: .7; }
.mode-packet-sovereign { opacity: 1; }

/* ── rituel ───────────────────────────────────── */
.ritual { border-block: 1px solid var(--line); background: var(--bg-raise); }
.ritual .wrap { padding-block: var(--space-section-compact); }
.ritual-grid {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}
.ritual-list { list-style: none; margin-top: 1.6rem; display: grid; gap: 1rem; }
.ritual-list li {
  padding-left: 1.4rem; position: relative; color: var(--ink-soft); max-width: var(--measure);
}
.ritual-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--grad);
}
.ritual-list strong { color: var(--ink); }
.ritual-art {
  position: relative; max-width: 28rem; margin-inline: auto;
  filter: drop-shadow(0 14px 34px rgba(0, 217, 255, .08));
}
.ritual-art::before {
  content: ""; position: absolute; inset: -8% -7%; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 1.5rem 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left top / 1px 1.5rem no-repeat,
    linear-gradient(var(--teal), var(--teal)) right bottom / 1.5rem 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) right bottom / 1px 1.5rem no-repeat,
    linear-gradient(rgba(0, 217, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 255, .035) 1px, transparent 1px),
    radial-gradient(closest-side, rgba(0, 217, 255, .11), transparent 74%);
  background-size: 1.5rem 1px, 1px 1.5rem, 1.5rem 1px, 1px 1.5rem, 24px 24px, 24px 24px, auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  opacity: .78;
}
.ritual-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.constellation-path {
  transform-origin: left center; transform-box: fill-box;
  opacity: .8; transform: none;
}
.ritual[data-reveal]:not(.revealed) .constellation-path { opacity: .2; transform: scaleX(.12); }
.ritual.revealed .constellation-path {
  opacity: .8; transform: none;
  transition: opacity 640ms var(--ease) 120ms, transform 640ms var(--ease) 120ms;
}
.c-star circle { opacity: .88; }
.sign-word { opacity: 1; transform: none; transform-box: fill-box; }
.ritual[data-reveal]:not(.revealed) .sign-word { opacity: .35; transform: translateY(5px); }
.ritual.revealed .sign-word {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--ease) var(--d), transform 520ms var(--ease) var(--d);
}

/* ── l'app en situation ───────────────────────── */
.app-live .wrap { padding-block: var(--space-section-compact); }
.app-grid {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}
.app-art { max-width: 21rem; margin-inline: auto; position: relative; }
.app-art::before {
  content: ""; position: absolute; inset: -4% -28%; z-index: 0;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 1.5rem 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left top / 1px 1.5rem no-repeat,
    linear-gradient(var(--teal), var(--teal)) right bottom / 1.5rem 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) right bottom / 1px 1.5rem no-repeat,
    linear-gradient(rgba(0, 217, 255, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 255, .038) 1px, transparent 1px),
    radial-gradient(closest-side, rgba(0, 217, 255, .14), transparent 74%);
  background-size: 1.5rem 1px, 1px 1.5rem, 1.5rem 1px, 1px 1.5rem, 24px 24px, 24px 24px, auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: .86;
  pointer-events: none;
}
.keyvisual-field::after {
  content: attr(data-frame-label); position: absolute; z-index: 2; top: -.8rem; left: 0;
  color: var(--cyan); font-family: var(--mono); font-size: .56rem;
  letter-spacing: .12em; line-height: 1; text-transform: uppercase;
}
.keyvisual-field::after { padding-left: 1.45rem; }
.keyvisual-field::after,
.keyvisual-field svg { pointer-events: none; }
.keyvisual-field svg { position: relative; z-index: 1; }
.app-art svg { width: 100%; height: auto; display: block; }
.app-art text { font-family: var(--sans); }
.app-art .mono-label { font-family: var(--mono); }
.t-dot {
  animation: t-blink 1.2s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes t-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.phone-status { animation: relay-led 2s ease-in-out infinite; }
.receipt-check { opacity: 1; transform: none; transform-origin: center; transform-box: fill-box; }
.app-live[data-reveal]:not(.revealed) .receipt-check { opacity: 0; transform: scale(.55); }
.revealed .receipt-check {
  opacity: 1; transform: none;
  transition: opacity 360ms var(--ease) 980ms, transform 460ms cubic-bezier(.34, 1.56, .64, 1) 980ms;
}
/* les bulles se posent l'une après l'autre à la révélation */
.b-in, .b-out, .b-gone, .b-in2, .typing { opacity: 1; transform: none; }
.app-live[data-reveal]:not(.revealed) .b-in,
.app-live[data-reveal]:not(.revealed) .b-out,
.app-live[data-reveal]:not(.revealed) .b-gone,
.app-live[data-reveal]:not(.revealed) .b-in2,
.app-live[data-reveal]:not(.revealed) .typing { opacity: 0; transform: translateY(8px); }
.revealed .b-in { transition: opacity 500ms var(--ease) 200ms, transform 500ms var(--ease) 200ms; }
.revealed .b-out { transition: opacity 500ms var(--ease) 600ms, transform 500ms var(--ease) 600ms; }
.revealed .b-gone { transition: opacity 500ms var(--ease) 1000ms, transform 500ms var(--ease) 1000ms; }
.revealed .b-in2 { transition: opacity 500ms var(--ease) 1400ms, transform 500ms var(--ease) 1400ms; }
.revealed .typing { transition: opacity 500ms var(--ease) 1800ms, transform 500ms var(--ease) 1800ms; }
.revealed .b-in, .revealed .b-out, .revealed .b-gone, .revealed .b-in2, .revealed .typing {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .b-in, .b-out, .b-gone, .b-in2, .typing { opacity: 1; transform: none; }
}

/* ── la box SURVEY ────────────────────────────── */
.box .wrap { padding-block: var(--space-section-compact); }
.box-grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
}
.box-art { position: relative; isolation: isolate; max-width: 34rem; margin-inline: auto; }
.box-art::before {
  content: ""; position: absolute; inset: 3% -2%; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 1.5rem 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left top / 1px 1.5rem no-repeat,
    linear-gradient(var(--teal), var(--teal)) right bottom / 1.5rem 1px no-repeat,
    linear-gradient(var(--teal), var(--teal)) right bottom / 1px 1.5rem no-repeat,
    linear-gradient(rgba(0, 217, 255, .034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 255, .034) 1px, transparent 1px),
    radial-gradient(circle at 55% 45%, rgba(0, 217, 255, .08), transparent 64%);
  background-size: 1.5rem 1px, 1px 1.5rem, 1.5rem 1px, 1px 1.5rem, 24px 24px, 24px 24px, auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  opacity: .8;
}
.box-art::after { top: .5rem; left: auto; right: 0; padding: 0 1.45rem 0 0; }
.box-art svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.box-art text { font-family: var(--mono); }
.box .cta-row { margin-top: 2.2rem; }
.flow-dot, .store-dot { filter: drop-shadow(0 0 6px rgba(30, 255, 225, .8)); }
.flow-line, .store-route { opacity: .78; }
.port { animation: port-activity 2.4s ease-in-out infinite; }
.port-2 { animation-delay: .18s; }
.port-3 { animation-delay: .36s; }
.port-4 { animation-delay: .54s; }
.box-store { opacity: .9; }
@keyframes port-activity { 0%, 65%, 100% { opacity: .45; } 24% { opacity: 1; } }

/* ── honnêteté ────────────────────────────────── */
.honest .wrap { padding-block: var(--space-section); }
.honest-grid {
  margin-top: 2.6rem; display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.h-col {
  border: 1px solid var(--line); border-radius: .8rem; padding: 1.8rem 1.6rem;
  background: linear-gradient(175deg, color-mix(in srgb, var(--ink) 3%, var(--surface)), var(--surface) 40%);
  transition: border-color 240ms var(--ease);
}
.h-col:hover { border-color: color-mix(in srgb, var(--ink-soft) 40%, var(--line)); }
.honest-grid .h-no { transition-delay: 120ms; }
.h-yes { border-top: 3px solid var(--ok); }
.h-no { border-top: 3px solid var(--warn); }
.h-col h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.dot { width: .65rem; height: .65rem; border-radius: 50%; flex: none; }
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.h-col ul { list-style: none; display: grid; gap: .9rem; }
.h-col li {
  color: var(--ink-soft); font-size: .95rem; padding-left: 1.2rem; position: relative;
}
.h-col li::before { content: "—"; position: absolute; left: 0; color: var(--ink-faint); }
.h-col em { font-style: normal; color: var(--ink); font-weight: 600; }
.honest-close {
  margin-top: 2.6rem; max-width: var(--measure);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: var(--ink-soft);
  padding-left: 1.4rem; border-left: 3px solid;
  border-image: var(--grad) 1;
}
.honest-close strong { color: var(--ink); }

/* ── téléchargements ──────────────────────────── */
.downloads { border-block: 1px solid var(--line); background: var(--bg-raise); }
.downloads .wrap { padding-block: var(--space-section); }
.downloads-head {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end;
}
.downloads-head .section-lead { margin-top: 0; }
.download-honesty {
  margin-top: 1rem; max-width: 44rem; color: var(--ink-faint);
  font-size: 1rem; line-height: 1.6; letter-spacing: .02em;
}
.download-groups { margin-top: clamp(2.6rem, 5vw, 4.2rem); border-top: 1px solid var(--line); }
.download-group {
  display: grid; grid-template-columns: minmax(8rem, 2fr) minmax(0, 10fr);
  gap: clamp(1.2rem, 3vw, 3rem); padding-block: 1.25rem; border-bottom: 1px solid var(--line);
}
.download-group > h3 {
  padding-top: 1rem; color: var(--ink-soft); font-family: var(--mono);
  font-size: .72rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
}
.download-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.download-item {
  min-width: 0; padding: clamp(1.2rem, 2.4vw, 1.7rem); background: var(--surface);
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem 1.1rem;
  align-items: start; transition: background 220ms var(--ease);
}
.download-item:hover { background: color-mix(in srgb, var(--cyan) 4%, var(--surface)); }
.download-live {
  background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 8%, var(--surface)), var(--surface) 58%);
  box-shadow: inset 3px 0 0 var(--ok);
}
.download-upcoming .download-icon { opacity: .78; }
.download-upcoming .download-copy p { color: color-mix(in srgb, var(--ink-soft) 78%, var(--bg)); }
.download-icon { width: 3rem; height: 3rem; color: var(--cyan); grid-row: 1 / span 2; }
.download-copy { min-width: 0; }
.download-copy h4 { margin-top: .2rem; font-size: 1.05rem; line-height: 1.25; }
.download-copy p { margin-top: .45rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.download-state {
  color: var(--warn); font-family: var(--mono); font-size: .58rem;
  letter-spacing: .09em; text-transform: uppercase;
}
.download-live .download-state { color: var(--ok); }
.download-action {
  grid-column: 2; justify-self: start; display: inline-flex; gap: .5rem; align-items: center;
  color: var(--ink); text-decoration-color: var(--cyan); text-underline-offset: .28rem;
  min-height: 2.8125rem; padding-block: .55rem;
  font-size: .8rem; font-weight: 650;
}
.download-action span { color: var(--cyan); transition: transform 180ms var(--ease); }
.download-action:hover span { transform: translate(.18rem, .18rem); }
.download-action-live {
  padding: .62rem .9rem; min-height: 2.8125rem; border-radius: .38rem;
  background: var(--grad); color: #04231c; text-decoration: none;
}
.download-action-live span { color: #04231c; }

/* ── bêta ─────────────────────────────────────── */
.signup .wrap {
  padding-block: var(--space-section);
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: start;
}
.signup .sub { margin-top: 1.2rem; color: var(--ink-soft); max-width: var(--measure); }
.signup .sub strong { color: var(--ink); }
#beta-form {
  display: grid; gap: 1.2rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, var(--line));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--cyan) 5%, var(--surface)), var(--surface) 45%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.field { display: grid; gap: .45rem; }
.field label { font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.field input, .field select {
  font: inherit; color: var(--ink);
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: .45rem;
  padding: .8rem 1rem; width: 100%;
  transition: border-color 160ms, box-shadow 160ms;
}
.field input:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 217, 255, .18);
}
.field input::placeholder { color: var(--ink-faint); }
.field select { appearance: none; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .82rem; color: var(--ink-faint); max-width: 34rem; }
.form-ok {
  border: 1px solid var(--ok); border-radius: .8rem; padding: 1.6rem;
  background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}
.form-fail b { color: var(--warn); }

/* ── footer ───────────────────────────────────── */
footer { position: relative; border-top: 1px solid var(--line); }
footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 217, 255, .5), transparent);
}
footer .wrap { padding-block: 2.5rem; display: grid; gap: 1rem; }
footer p { color: var(--ink-faint); font-size: .85rem; }
footer a { color: var(--ink-soft); }
.fm { font-family: var(--mono); letter-spacing: .02em; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.footer-nav a {
  min-height: 2.75rem; display: inline-flex; align-items: center;
  font-size: .85rem; text-decoration: none; color: var(--ink-soft);
  transition: color 160ms;
}
.footer-nav a:hover { color: var(--cyan); }

/* ── responsive ───────────────────────────────── */
/* La chip part avant la nav : c'est l'élément le moins utile des deux. */
@media (max-width: 78rem) {
  .chip { display: none; }
}

@media (max-width: 56rem) {
  section[id] { scroll-margin-top: 10rem; }
  .hero-grid, .ritual-grid, .signup .wrap, .app-grid, .box-grid,
  .stories-head, .downloads-head { grid-template-columns: 1fr; }
  .stories-head .section-lead, .downloads-head .section-lead { margin-top: 0; }
  .story-mosaic { grid-template-columns: 1fr; grid-template-rows: none; }
  .story, .story-family { grid-row: auto; min-height: clamp(23rem, 64vw, 31rem); }
  .download-group { grid-template-columns: 1fr; gap: .4rem; }
  .download-group > h3 { padding-top: .2rem; }
  .step { grid-template-columns: 1fr; }
  .step .step-copy { order: -1; }
  .step:nth-child(even) { grid-template-columns: 1fr; }
  .step:nth-child(even) .step-art { order: 0; }
  .hero-art { max-width: 26rem; margin-inline: auto; }
  .ritual-art { max-width: 22rem; }
  .app-art { max-width: 17rem; }
  .app-grid > div:last-child { order: -1; } /* le texte avant la maquette */
  .masthead { padding: .6rem 0 0; }
  .masthead .wrap { flex-wrap: wrap; gap: .45rem .8rem; }
  .topnav {
    display: flex; order: 3; width: 100%; margin: 0; gap: .15rem;
    overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line);
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a {
    min-height: 2.75rem; padding: .35rem .65rem;
    font-family: var(--mono); font-size: .66rem; letter-spacing: .04em;
  }
  .chip { display: none; }
  .btn-mini { margin-left: auto; }
  .wordmark small { display: none; }
}

@media (max-width: 36rem) {
  .story { min-height: 27rem; }
  .story::after { top: .9rem; left: 1rem; }
  .story-caption { right: 1rem; }
  .story-caption > p:last-child { display: none; }
  .message-peek, .story-work .message-peek, .story-close .message-peek {
    top: 2.4rem; width: calc(100% - 2rem);
  }
  .story-family .message-peek {
    top: 3.15rem; left: 1rem; right: auto; width: min(68%, 14.5rem);
  }
  .story-family .message-peek::before { left: 82%; }
  .story-family .message-peek::after { left: calc(82% - 3px); }
  .story-family img { object-position: 56% center; }
  .story-work img { object-position: 60% center; }
  .story-close img { object-position: 55% 42%; }
  .app-art::before { inset-inline: 0; }
  .box-art::before { inset-inline: 0; }
  .keyvisual-field::after { top: -.45rem; }
  .box-art::after { top: .55rem; }
  .download-pair { grid-template-columns: 1fr; }
  .download-item { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .download-icon { width: 2.6rem; height: 2.6rem; }
  .step-art { padding: .7rem; background-size: 18px 18px, 18px 18px, auto; }
  .step-art svg { min-height: 13.5rem; }
  .hero-art { width: min(27rem, 111%); margin-left: -5.5%; }
  .box-art { width: 108%; margin-left: -4%; }
}