/* ============================================================
   StampyWallet — landing
   Palette tirée de l'image : zinc, laiton, papier crème, encre.
   Vert de marque #22c55e.
   ============================================================ */

:root{
  --paper:      #f6f2ea;
  --paper-2:    #efe9de;
  --ink:        #14110d;
  --ink-2:      #3a342c;
  --ink-3:      #6d6558;
  --line:       #ddd4c5;
  --brass:      #a8813c;
  --green:      #22c55e;
  --green-ink:  #15803d;
  --green-soft: #dcfce7;
  --night:      #14110d;
  --night-2:    #211c16;

  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 40px);
  --r: 14px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Noto Serif", "Times New Roman", serif;

  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.13rem, 1.05rem + .38vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.28rem + .85vw, 2rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.75vw, 3rem);
  --step-4:  clamp(2.3rem, 1.75rem + 2.5vw, 3.7rem);
}

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

/* `clip` et non `hidden` : `hidden` casse silencieusement position:sticky */
html{ overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; overflow-x:clip;
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}

img,svg,canvas,picture{ display:block; max-width:100% }
img{ height:auto }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.08;
          letter-spacing:-.015em; text-wrap:balance }
p{ margin:0 }
em{ font-style:italic; color:var(--ink-2) }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit }

.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-999px; top:0; z-index:200; background:var(--ink);
  color:var(--paper); padding:12px 18px; border-radius:0 0 8px 0 }
.skip:focus{ left:0 }

:where(a,button,input,summary):focus-visible{
  outline:2.5px solid var(--green-ink); outline-offset:3px; border-radius:6px }

/* Une seule colonne pour toute la page : en-tête, héros, sections, pied.
   Tout ce qui est aligné à gauche partage exactement ce bord. */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }
/* Les blocs plus étroits se bornent à l'intérieur du conteneur,
   ils ne se recentrent pas sur un conteneur plus petit : cela créerait
   un deuxième bord gauche. */
.measure{ max-width:62ch }

/* ── boutons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:.85em 1.5em;
  background:var(--ink); color:var(--paper);
  font:600 var(--step-0)/1.2 var(--sans); letter-spacing:-.01em;
  text-decoration:none; border:1.5px solid var(--ink); border-radius:999px;
  cursor:pointer; transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.btn:hover{ background:#000; transform:translateY(-1px); box-shadow:0 6px 18px -8px rgba(0,0,0,.5) }
.btn:active{ transform:translateY(0) }
.btn--sm{ min-height:42px; padding:.5em 1.1em; font-size:var(--step--1) }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn--ghost:hover{ background:var(--paper-2); border-color:var(--ink-3) }

/* ── en-tête ───────────────────────────────────────────────── */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding-block:12px;
  color:var(--paper);
  transition:background .3s ease, color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.site-head__in{ display:flex; align-items:center; gap:clamp(12px,3vw,32px) }
.site-head.is-solid{
  background:rgba(246,242,234,.88); backdrop-filter:blur(14px) saturate(1.3);
  color:var(--ink); border-bottom-color:var(--line);
}
.brand{ display:inline-flex; align-items:center; gap:.55em; text-decoration:none;
  font-weight:650; letter-spacing:-.02em; font-size:var(--step-0) }
.brand__mark{ width:26px; height:26px; flex:none }
.brand__name{ white-space:nowrap }
.site-nav{ margin-left:auto; display:none; gap:clamp(14px,2vw,26px); font-size:var(--step--1) }
.site-nav a{ text-decoration:none; opacity:.85 }
.site-nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px }
.site-head .btn{ margin-left:auto; background:transparent; border-color:currentColor; color:inherit }
.site-head .btn:hover{ background:currentColor; color:var(--paper) }
.site-head.is-solid .btn:hover{ color:var(--paper) }
.site-head.is-solid .btn{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
@media (min-width:820px){
  .site-nav{ display:flex }
  .site-head .btn{ margin-left:0 }
}

/* ============================================================
   HÉRO — piste de défilement + scène collante
   ============================================================ */
.hero{ position:relative; background:var(--night) }
.hero__runway{ height:300vh }
@media (max-width:640px){ .hero__runway{ height:275svh } }

.hero__stage{
  position:sticky; top:0;
  height:100svh; min-height:520px;
  overflow:clip;
  display:grid; grid-template-areas:"stack"; place-items:stretch;
}
.hero__stage > *{ grid-area:stack }

.hero__media{ position:relative; overflow:clip; background:var(--night) }
.hero__poster,.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; max-width:none;
}
.hero__canvas{ opacity:0; transition:opacity .45s ease }
.hero__canvas.is-live{ opacity:1 }

/* lisibilité du texte par-dessus l'image */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,17,13,.70) 0%, rgba(20,17,13,.30) 22%, rgba(20,17,13,0) 46%),
    linear-gradient(0deg,  rgba(20,17,13,.90) 0%, rgba(20,17,13,.74) 20%,
                           rgba(20,17,13,.40) 40%, rgba(20,17,13,0) 62%);
}
@media (min-width:900px){
  .hero__scrim{
    background:
      linear-gradient(105deg, rgba(20,17,13,.86) 0%, rgba(20,17,13,.62) 34%, rgba(20,17,13,.06) 62%),
      linear-gradient(0deg, rgba(20,17,13,.5) 0%, rgba(20,17,13,0) 34%);
  }
}

/* ── les dix tampons ──────────────────────────────────────── */
.stampfield{
  position:absolute; transform-origin:50% 50%;
  will-change:transform; pointer-events:none;
}
.stampfield svg{ width:100%; height:100%; overflow:visible }
.stamp{ transform-box:fill-box; transform-origin:center }

/* ── copie du héro ────────────────────────────────────────── */
/* La copie du héros s'aligne sur la même colonne que les sections :
   .hero__copy tient la mise en page verticale, .hero__copy-in porte le .wrap. */
.hero__copy{
  position:relative; z-index:3;
  display:flex; align-items:flex-end;
  padding-block:0 clamp(38px,9vh,84px);
  color:var(--paper);
  pointer-events:none;
}
.hero__copy-in{ display:grid; grid-template-areas:"stack" }
.hero__copy-in > *{ grid-area:stack; align-self:end }
/* en rem, pas en ch : `ch` se résout sur la fonte du bloc, pas du titre */
.hero__panel{ max-width:32rem; will-change:opacity, transform }
.hero__panel--1{ pointer-events:auto }
.hero__panel--2,.hero__panel--3{ opacity:0; pointer-events:none }

@media (min-width:900px){
  .hero__panel{ max-width:34rem }
  .hero__panel--2,.hero__panel--3{ max-width:26rem }
}

.hero h1{ font-size:var(--step-4); letter-spacing:-.028em; margin-bottom:.5em;
  max-width:15ch }
.hero h1 em{ color:#fff; font-style:italic }
.hero .lede{ font-size:var(--step-1); line-height:1.45; color:rgba(246,242,234,.86);
  max-width:38ch; text-wrap:pretty }
.hero__cta{ margin-top:1.6em; display:flex; flex-wrap:wrap; align-items:center; gap:14px }
.hero__cta .btn{ background:var(--green); border-color:var(--green); color:#06280f }
.hero__cta .btn:hover{ background:#2ee06b; border-color:#2ee06b }
.hero__note{ font-size:var(--step--1); color:rgba(246,242,234,.62) }
.hero__beat{ font-family:var(--serif); font-size:var(--step-3); line-height:1.12;
  letter-spacing:-.022em; color:var(--paper) }
.hero__beat em{ color:var(--green); font-style:italic }

.hero__hint{
  position:absolute; z-index:4; left:50%; bottom:18px; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(246,242,234,.6); transition:opacity .4s ease;
}
.hero__hint svg{ animation:nudge 2.1s ease-in-out infinite }
@keyframes nudge{ 0%,100%{ transform:translateY(-2px) } 50%{ transform:translateY(3px) } }
.hero__hint.is-gone{ opacity:0 }

/* ============================================================
   BANDEAU DE PREUVE
   ============================================================ */
.strip{ background:var(--ink); color:var(--paper); position:relative; z-index:2 }
.strip__list{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(22px,4vw,34px) var(--pad);
  display:grid; gap:18px clamp(20px,4vw,50px);
}
@media (min-width:760px){ .strip__list{ grid-template-columns:repeat(3,1fr) } }
.strip__list li{ display:flex; flex-direction:column; gap:2px; position:relative; padding-left:22px }
.strip__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  border-radius:50%; background:var(--green);
}
.strip__list strong{ font-weight:650; letter-spacing:-.01em }
.strip__list span{ font-size:var(--step--1); color:rgba(246,242,234,.62) }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:clamp(64px,11vw,132px) 0; position:relative; z-index:2 }
.section--tight{ padding-top:clamp(40px,7vw,80px) }
.section--dark{ background:var(--night); color:var(--paper) }

.eyebrow{
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:1em; font-weight:600;
}
.section--dark .eyebrow{ color:var(--green) }
.h2{ font-size:var(--step-3); max-width:19ch; margin-bottom:.5em }
.lede{ font-size:var(--step-1); color:var(--ink-2); max-width:52ch; line-height:1.5; text-wrap:pretty }
.section--dark .lede{ color:rgba(246,242,234,.72) }
.lede--wide{ max-width:56ch }
.micro{ margin-top:2.2em; font-size:var(--step--1); color:var(--ink-3) }
.section--dark .micro{ color:rgba(246,242,234,.5) }

/* ── étapes ───────────────────────────────────────────────── */
.steps{ margin-top:clamp(40px,7vw,72px); display:grid; gap:clamp(40px,6vw,56px) }
@media (min-width:860px){
  .steps{ grid-template-columns:repeat(3,1fr);
          column-gap:clamp(28px,3vw,40px); row-gap:clamp(40px,6vw,56px) }
}
.step{ display:flex; flex-direction:column; gap:.55em }
/* repli sans subgrid : au minimum les images se calent en bas,
   donc en haut aussi puisqu'elles ont la même largeur et le même ratio */
.step__fig{ margin-top:auto }

/* Chaque ligne (numéro, titre, texte, image) partage sa hauteur
   entre les trois colonnes : plus rien ne flotte. */
@supports (grid-template-rows: subgrid){
  @media (min-width:860px){
    .steps{ grid-template-rows:auto auto auto auto; row-gap:0 }
    .step{ display:grid; grid-row:span 4; grid-template-rows:subgrid;
           row-gap:0; gap:0 }
    .step__num{ margin-bottom:1em }
    .step h3{ margin-bottom:.4em }
    .step p{ margin-bottom:1.2em }
    .step__fig{ margin:0 }
  }
}
.step__num{
  display:grid; place-items:center; width:34px; height:34px; margin-bottom:.3em;
  border-radius:50%; border:1.5px solid var(--ink); font:600 .95rem/1 var(--sans);
}
.step h3{ font-size:var(--step-2); letter-spacing:-.02em }
.step p{ color:var(--ink-2); max-width:44ch }
.step__fig{ margin:.8em 0 0; border-radius:var(--r); overflow:hidden;
  background:var(--paper-2); border:1px solid var(--line); aspect-ratio:4/3 }
.step__fig img{ width:100%; height:100%; object-fit:cover }

/* ── statistiques ─────────────────────────────────────────── */
.stats{ margin-top:clamp(36px,6vw,60px); display:grid; gap:14px }
@media (min-width:720px){ .stats{ grid-template-columns:repeat(3,1fr) } }
.stat{
  padding:clamp(22px,3vw,32px);
  border:1px solid rgba(246,242,234,.16); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(246,242,234,.06), rgba(246,242,234,.02));
  display:flex; flex-direction:column; gap:.15em;
}
.stat__val{ font-family:var(--serif); font-size:clamp(2.6rem,7vw,3.6rem); line-height:1;
  letter-spacing:-.03em; color:var(--paper); font-variant-numeric:tabular-nums }
.stat__lab{ font-weight:600; letter-spacing:-.01em }
.stat__sub{ font-size:var(--step--1); color:rgba(246,242,234,.55) }
.stat--alert .stat__val{ color:var(--green) }

/* ── notification ─────────────────────────────────────────── */
.wrap--split{ display:grid; gap:clamp(40px,7vw,80px); align-items:center }
@media (min-width:900px){
  /* haut aligné sur le haut : centrer deux colonnes de hauteurs
     différentes fait flotter la maquette sans repère */
  .wrap--split{ grid-template-columns:1fr 1fr; align-items:start }
  /* et calée sur le bord droit du conteneur, pas centrée dans sa colonne */
  .split__media .lock{ margin-inline:auto 0 }
}
.ticks{ margin-top:1.6em; display:grid; gap:.7em }
.ticks li{ position:relative; padding-left:30px; color:var(--ink-2) }
.ticks li::before{
  content:""; position:absolute; left:2px; top:.42em; width:15px; height:9px;
  border-left:2.2px solid var(--green); border-bottom:2.2px solid var(--green);
  transform:rotate(-45deg); border-radius:1px;
}

.lock{
  background:linear-gradient(165deg,#221c15,#100d0a 60%);
  border-radius:26px; padding:clamp(24px,4vw,34px) clamp(18px,3vw,24px) clamp(34px,6vw,48px);
  color:var(--paper); box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  border:1px solid rgba(246,242,234,.1); max-width:400px; margin-inline:auto; width:100%;
}
.lock__time{ text-align:center; margin-bottom:clamp(22px,4vw,34px); line-height:1.15 }
.lock__time span:first-child{ display:block; font-size:clamp(3rem,10vw,3.8rem); font-weight:250;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.lock__date{ font-size:var(--step--1); color:rgba(246,242,234,.55) }
.lock__notif{
  display:flex; gap:12px; padding:14px;
  background:rgba(246,242,234,.12); border:1px solid rgba(246,242,234,.1);
  border-radius:16px; backdrop-filter:blur(8px);
}
.lock__icon{ width:30px; height:30px; flex:none; padding:5px; border-radius:8px;
  background:var(--paper); color:var(--ink) }
.lock__body{ min-width:0 }
.lock__app{ font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
  color:rgba(246,242,234,.6); margin-bottom:.25em }
.lock__app span{ text-transform:none; letter-spacing:0 }
.lock__title{ font-weight:650; letter-spacing:-.01em }
.lock__text{ font-size:var(--step--1); color:rgba(246,242,234,.72); line-height:1.45 }

/* ── tarifs ───────────────────────────────────────────────── */
.plans{ margin-top:clamp(36px,6vw,60px); display:grid; gap:18px; align-items:stretch }
@media (min-width:840px){ .plans{ grid-template-columns:1fr 1.08fr; gap:24px } }
.plan{
  position:relative;
  padding:clamp(30px,4vw,38px) clamp(26px,4vw,38px) clamp(26px,4vw,38px);
  border:1px solid var(--line); border-radius:20px;
  background:#fffdf9; display:flex; flex-direction:column; gap:.35em;
}
.plan--pro{ border-color:var(--ink); box-shadow:0 24px 50px -34px rgba(20,17,13,.5) }
/* le badge est sorti du flux : sinon il décale toute la colonne Pro
   d'une cinquantaine de pixels par rapport à la colonne Gratuit */
.plan__flag{
  position:absolute; top:0; left:50%; translate:-50% -50%;
  white-space:nowrap; max-width:calc(100% - 2rem); margin:0;
  background:var(--green-soft); color:var(--green-ink); border:1px solid #a7e9bf;
  font-size:.74rem; font-weight:650; letter-spacing:.01em;
  padding:.45em .9em; border-radius:999px;
}
@media (max-width:400px){ .plan__flag{ font-size:.68rem; white-space:normal; text-align:center } }
.plan__name{ font-size:var(--step-2) }
.plan__price{ display:flex; align-items:baseline; gap:.4em; margin:.1em 0 .3em }
.plan__price strong{ font-family:var(--serif); font-size:clamp(2.6rem,8vw,3.4rem);
  font-weight:600; letter-spacing:-.035em; line-height:1 }
.plan__price span{ color:var(--ink-3); font-size:var(--step--1) }
.plan__for{ color:var(--ink-3); font-size:var(--step--1); margin-bottom:.4em }
.plan__name{ margin-bottom:.1em }
.plan__year{ color:var(--ink-2); font-size:var(--step--1); margin-bottom:.15em }
.plan__was{ color:var(--ink-3); font-size:var(--step--1); line-height:1.5;
  padding-bottom:1.3em; border-bottom:1px solid var(--line) }
.ticks--sm li{ font-size:var(--step--1) }
.plan .ticks{ margin-top:.8em; margin-bottom:1.8em; flex:1 }
/* un seul plan : la carte de prix n'a plus de liste pour pousser le bouton
   en bas, c'est la marge automatique qui aligne les deux colonnes */
.plan .btn{ width:100%; margin-top:auto }
/* la colonne « tout est compris » est secondaire : même grille, moins de poids */
.plan--incl{ background:transparent; border-style:dashed }
.plan__note{ margin-top:auto; font-size:var(--step--1); color:var(--ink-3); line-height:1.5 }
/* la question qui vient juste après « pas de version gratuite » :
   ce qu'il se passe si on arrête de payer. Elle mérite sa place. */
.safety{
  margin-top:clamp(22px,3vw,34px); max-width:52rem;
  padding:1.05em 1.3em; border:1px solid #a7e9bf; border-radius:14px;
  background:var(--green-soft); color:var(--green-ink);
  font-size:var(--step--1); line-height:1.55;
}
.plan__lock{ margin-top:1.1em; display:flex; align-items:center; gap:10px;
  font-size:var(--step--1); color:var(--ink-3) }
.plan__lock strong{ color:var(--ink) }
.plan__dots{ display:flex; gap:3px; flex:none }
.plan__dots i{ width:6px; height:6px; border-radius:50%; background:var(--line) }
.plan__dots i.on{ background:var(--green) }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{ margin-top:clamp(28px,5vw,44px); border-top:1px solid var(--line);
      max-width:52rem }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; padding:1.15em 40px 1.15em 0; position:relative;
  font-weight:600; font-size:var(--step-1); letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  translate:0 -70%; rotate:45deg; transition:rotate .22s ease;
}
.faq details[open] summary::after{ rotate:225deg; translate:0 -20% }
.faq details p{ padding:0 0 1.4em; color:var(--ink-2); max-width:62ch }

/* ── CTA final ────────────────────────────────────────────── */
.final{
  background:var(--night); color:var(--paper); text-align:center;
  padding:clamp(72px,12vw,140px) 0 clamp(64px,10vw,120px); position:relative; z-index:2;
}
.final__ring{ width:clamp(56px,11vw,76px); height:auto; margin:0 auto 1.4em; color:var(--paper) }
.final__slot{ transition:fill .5s ease }
.final__ring.is-full .final__slot{ fill:var(--green) }
.final__title{ font-size:var(--step-3); margin-bottom:.45em }
.final .lede{ color:rgba(246,242,234,.72); margin-inline:auto }
.final .micro{ color:rgba(246,242,234,.45) }

.final__in{ max-width:44rem; margin-inline:auto }
.signup{ margin:clamp(28px,5vw,40px) auto 0; max-width:520px }
.signup__row{ display:grid; gap:10px }
@media (min-width:560px){ .signup__row{ grid-template-columns:1fr auto } }
.signup input{
  min-height:54px; padding:.8em 1.15em; width:100%;
  background:rgba(246,242,234,.07); color:var(--paper);
  border:1.5px solid rgba(246,242,234,.22); border-radius:999px;
  font:inherit; font-size:var(--step-0);
}
.signup input::placeholder{ color:rgba(246,242,234,.42) }
.signup input:focus{ border-color:var(--green); background:rgba(246,242,234,.1) }
.signup .btn{ background:var(--green); border-color:var(--green); color:#06280f; white-space:nowrap }
.signup .btn:hover{ background:#2ee06b; border-color:#2ee06b }
.signup__msg{ min-height:1.4em; margin-top:.9em; font-size:var(--step--1); color:var(--green) }
.signup__msg[data-err]{ color:#fca5a5 }

/* ── pied ─────────────────────────────────────────────────── */
.site-foot{ background:var(--night); color:rgba(246,242,234,.6);
  border-top:1px solid rgba(246,242,234,.12); padding:clamp(34px,6vw,54px) 0;
  position:relative; z-index:2 }
.wrap--foot{ display:flex; flex-direction:column; gap:18px }
.brand--foot{ color:var(--paper) }
.foot-nav{ display:flex; flex-wrap:wrap; gap:10px 22px; font-size:var(--step--1) }
.foot-nav a{ text-decoration:none }
.foot-nav a:hover{ color:var(--paper); text-decoration:underline; text-underline-offset:4px }
.foot-legal{ font-size:var(--step--1); color:rgba(246,242,234,.4) }
/* sélecteur de langue : construit par tools/i18n.js, absent du HTML tant
   qu'il n'y a qu'une langue prête. Chaque langue est écrite dans sa langue. */
.lang{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:var(--step--1) }
.lang a{ text-decoration:none; color:rgba(246,242,234,.55) }
.lang a:hover{ color:var(--paper); text-decoration:underline; text-underline-offset:4px }
.lang a[aria-current]{ color:var(--paper) }
@media (min-width:820px){
  .wrap--foot{ flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap }
  .foot-legal{ width:100% }
}

/* ── anneau de progression (la page est une carte) ────────── */
/* en bas à droite : le haut est déjà pris par l'en-tête fixe */
.progress{
  position:fixed; z-index:55; bottom:18px; right:var(--pad);
  width:34px; height:34px; color:var(--ink);
  opacity:0; transform:scale(.7); pointer-events:none;
  transition:opacity .4s ease, transform .4s ease, color .3s ease;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.progress.is-on{ opacity:1; transform:scale(1) }
.progress.on-dark{ color:var(--paper) }
.progress circle{ transition:fill-opacity .35s ease, stroke .35s ease, fill .35s ease }
@media (max-width:520px){ .progress{ bottom:14px; width:28px; height:28px } }

/* ── révélations à l'entrée ───────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease }
.reveal.in{ opacity:1; transform:none }

/* ============================================================
   REPLI — mouvement réduit
   Aucun scrub, aucune translation : les états finaux, directement.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  /* on empile : l'image d'abord, la copie ensuite sur fond plein.
     Plus aucune superposition, tout reste lisible. */
  .hero__runway{ height:auto }
  .hero__stage{ position:relative; height:auto; min-height:0;
                display:block; overflow:visible }
  .hero__stage > *{ grid-area:auto }
  .hero__media{ position:relative; height:min(54svh,430px) }
  .hero__copy{ position:relative; display:block; background:var(--night);
    padding-block:clamp(30px,7vw,54px) clamp(38px,8vw,66px) }
  .hero__copy-in > *{ align-self:auto }
  .hero__scrim{ background:linear-gradient(0deg,
    rgba(20,17,13,.55) 0%, rgba(20,17,13,0) 50%) }
  .hero__panel{ max-width:36rem }
  .hero__panel--2,.hero__panel--3{ display:none }
  .hero__hint{ display:none }
  .hero__canvas{ display:none }
  .stampfield{ transition:none!important }
  .reveal{ opacity:1; transform:none; transition:none }
  .hero__hint svg{ animation:none }
  .btn{ transition:none }
  .progress{ display:none }
}