/* ═══════════════════════════════════════════════════════════════
   AYN Thor — démonstration non officielle
   DA : noir profond, un seul accent violet, aucune carte, aucune
   ombre portée. Les éléments flottent dans le noir. Mobile d'abord.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --black:  #050505;
  --white:  #F5F5F5;
  --grey:   #9A9A9A;
  --violet: #7C5CFF;

  /* Zone courante. Écrasée par .zone-* puis, au scroll, par app.js qui
     y injecte la couleur réellement échantillonnée sur les frames. */
  --zone-bg:  var(--black);
  --zone-fg:  var(--white);
  --zone-dim: var(--grey);

  --font-display: 'Geist', -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

.zone-dark   { --zone-bg:#050505; --zone-fg:#F5F5F5; --zone-dim:#9A9A9A; }
.zone-studio {
  --zone-bg:#7C858F; --zone-fg:#0B0E11; --zone-dim:#2E353C;
  /* Le violet d'accent vire à l'illisible sur ce gris : on l'assombrit
     sans changer de teinte, la page ne garde qu'un seul accent. */
  --violet:#2E14A8;
}
/* §5 traverse le clair vers le noir : elle ne fige aucune couleur et hérite
   de :root, que le moteur met à jour d'après la luminance de chaque frame. */
.zone-shift  { }

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

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

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Le fond suit la couleur échantillonnée sur les frames. Pas de transition :
     la couleur est déjà quantifiée côté moteur, et animer chaque palier
     revenait à repeindre la page en continu pendant tout le défilement. */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ── Typographie ──────────────────────────────────────────── */

.t-display {
  margin: 0;
  font-size: clamp(2.6rem, 8.6vw, 6.2rem);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.042em;
  color: var(--zone-fg);
}

.t-h2 {
  margin: 0;
  font-size: clamp(2.1rem, 6.6vw, 4.75rem);
  font-weight: 650;
  line-height: .97;
  letter-spacing: -.035em;
  color: var(--zone-fg);
}

.t-label {
  display: block;
  margin-bottom: 1.4em;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--violet);
}

.t-lede {
  margin: 1.4rem 0 0;
  font-size: clamp(1.02rem, 2.1vw, 1.3rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--zone-dim);
  max-width: 30ch;
}

.t-body {
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.45vw, 1.14rem);
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: -.005em;
  color: var(--zone-fg);
  max-width: 38ch;
}
.t-body--dim { color: var(--zone-dim); font-weight: 400; }

.t-kicker {
  margin: 1.6rem 0 0;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--violet);
}

.t-fineprint {
  margin: 1.6rem 0 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.6;
  color: var(--zone-dim);
  max-width: 46ch;
}
.fineprint--center { margin-inline: auto; text-align: center; }

/* ── Boutons : aplat violet ou texte souligné, jamais de carte ── */

.btn {
  display: inline-block;
  font-size: .93rem;
  font-weight: 550;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s var(--ease), background-color .25s var(--ease),
              opacity .25s var(--ease);
}

.btn--solid {
  padding: .82em 1.5em;
  border-radius: 100px;
  background: var(--violet);
  color: #fff;
}
.btn--solid:hover { background: #6B47FF; }

.btn--ghost {
  padding: .82em 0;
  color: var(--zone-fg);
  background: none;
  box-shadow: inset 0 -1px 0 currentColor;
  border-radius: 0;
}
.btn--ghost:hover { color: var(--violet); }

.btn--lg { font-size: 1.05rem; padding: .95em 2em; }

.btn--block {
  display: block;
  text-align: center;
  margin-top: 1.6rem;
}
.btn--block.btn--ghost { box-shadow: inset 0 -1px 0 rgba(245,245,245,.28); }
.btn--block.btn--ghost:hover { box-shadow: inset 0 -1px 0 var(--violet); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.8rem;
  align-items: center;
  margin-top: 2.4rem;
}

/* ── Navigation ───────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad);
  background: color-mix(in srgb, var(--zone-bg) 62%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: var(--zone-fg);
  /* Le flou d'arrière-plan est refait dès que la couleur de fond change,
     c'est-à-dire en continu pendant une séquence. Sur mobile il coûte plus
     qu'il n'apporte : on le remplace par un aplat opaque. */
  transition: background-color .45s linear, color .45s linear,
              transform .4s var(--ease);
}
.nav__logo {
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.02em;
  text-decoration: none;
}

.nav__links {
  display: none;
  gap: 2rem;
  font-size: .85rem;
  font-weight: 450;
}
.nav__links a {
  text-decoration: none;
  opacity: .72;
  transition: opacity .2s, color .2s;
}
.nav__links a:hover { opacity: 1; color: var(--violet); }

.btn--nav {
  padding: .55em 1.15em;
  border-radius: 100px;
  background: var(--violet);
  color: #fff;
  font-size: .82rem;
}
.btn--nav:hover { background: #6B47FF; }

@media (min-width: 860px) {
  .nav__links { display: flex; }
}

@media (max-width: 859px) {
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--zone-bg) 92%, transparent);
  }
}

/* ── Chargement ───────────────────────────────────────────── */

#loader {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding-bottom: 2.5rem;
  pointer-events: none;
  transition: opacity .6s var(--ease);
}
#loader.is-done { opacity: 0; }
.loader__bar {
  width: min(200px, 42vw);
  height: 1px;
  background: rgba(245,245,245,.16);
  overflow: hidden;
}
.loader__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--violet);
  transition: width .3s linear;
}

/* ── Raccord entre deux zones de couleur ──────────────────────
   Remplace l'ancienne brume animée. Un simple dégradé posé à cheval
   sur la frontière : il défile avec la page pendant que le canvas
   reste fixe, ce qui le fait balayer la couture. Aucun coût par
   image, contrairement aux deux couches en mix-blend-mode qui
   étaient recomposées en permanence.                             */

.zone-fade {
  display: none;
}

/* ── Scènes pilotées au scroll ────────────────────────────── */

.scene {
  position: relative;
  height: calc(var(--scene-vh, 3) * 100svh);
}

.scene__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.scene__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* LCP : la première frame s'affiche en <img> tout de suite, le canvas prend
   le relais dès que le premier lot de frames est décodé (10 frames, pas 120). */
.scene__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: scale(.86);
  transform-origin: center bottom;
  transition: opacity .45s var(--ease);
}
.scene--hero .scene__canvas { opacity: 0; transition: opacity .45s var(--ease); }
.scene--hero.is-ready .scene__canvas { opacity: 1; }
.scene--hero.is-ready .scene__poster { opacity: 0; }

.scene__copy,
.still__copy {
  position: absolute;
  z-index: 3;
  color: var(--zone-fg);
}

/* Mobile d'abord : le texte se pose en bas, sur un dégradé de la couleur
   de zone — pas une carte, juste un fondu qui garantit la lisibilité. */
.scene__copy {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6rem var(--pad) clamp(3rem, 12svh, 6rem);
  background: linear-gradient(to top,
    var(--zone-bg) 0%,
    color-mix(in srgb, var(--zone-bg) 96%, transparent) 38%,
    color-mix(in srgb, var(--zone-bg) 72%, transparent) 68%,
    transparent 100%);
}
.scene__copy .t-lede,
.scene__copy .t-body { max-width: 34ch; }

.copy--center { text-align: left; }

/* Mobile : hero et CTA passent le texte en haut, le produit occupe le bas. */
.scene--hero .scene__copy,
.scene--cta  .scene__copy {
  top: 0;
  bottom: auto;
  padding: clamp(6rem, 16svh, 9rem) var(--pad) 5rem;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--zone-bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--zone-bg) 70%, transparent) 55%,
    transparent 100%);
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  z-index: 4;
  width: 1px;
  height: 42px;
  overflow: hidden;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--zone-fg) 18%, transparent);
  transition: opacity .5s var(--ease);
}
.scroll-hint span {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--violet);
  animation: hint 2.1s var(--ease) infinite;
}
@keyframes hint {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}
.scroll-hint.is-gone { opacity: 0; }

/* ── Raccords de zone ─────────────────────────────────────────
   Les rendus portent un dégradé vertical marqué. Chaque section
   reprend donc exactement la couleur de bord de la précédente, de
   sorte que la zone studio se lise comme un seul fond continu.
   §2 canvas bas #9EA5AE → §3 → §3b → §4 canvas haut #7F8993.
   Valeurs mesurées sur les frames, pas choisies à l'œil.          */

#nostalgie {
  background: linear-gradient(180deg, #9EA5AE 0%, #8D97A1 52%, #A0A8B0 100%);
}
#emulateurs {
  background: linear-gradient(180deg, #A0A8B0 0%, #909AA4 48%, #7F8993 100%);
}
/* §6 se termine sur un sol légèrement éclairé : on le ramène au noir. */
#versions {
  background: linear-gradient(180deg, #1B1B1A 0%, var(--black) 22%);
}

/* ── Sections à image fixe ────────────────────────────────── */

.still {
  position: relative;
  min-height: 100svh;
  padding: clamp(5rem, 14svh, 9rem) var(--pad);
  background: var(--zone-bg);
  color: var(--zone-fg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
}
.still__img {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}
.still__img--wide { max-width: 780px; }
.still__copy { position: static; }

/* ── Marquee des systèmes émulés ──────────────────────────── */

.marquee {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(var(--pad) * -1);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; flex-shrink: 0; }
.marquee__set b {
  display: block;
  padding: .5em 1.15em;
  margin-right: .6rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--zone-fg) 9%, transparent);
  color: var(--zone-fg);
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Sections classiques ──────────────────────────────────── */

.section {
  position: relative;
  padding: clamp(6rem, 18svh, 12rem) var(--pad);
  background: var(--zone-bg);
  color: var(--zone-fg);
}
.section__head { margin-bottom: clamp(3rem, 8svh, 5.5rem); }

.pitch {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 2.1;
  color: var(--zone-dim);
  max-width: 44ch;
}
.pitch b { color: var(--zone-fg); font-weight: 600; }

/* ── Offre unique ─────────────────────────────────────────
   Une seule configuration mise en avant : plus de tableau
   comparatif, plus d'arbitrage demandé au visiteur.        */

.offer {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

.offer__flag {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--violet);
}

.offer__name {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 2.8rem);
  font-weight: 650;
  letter-spacing: -.03em;
}

.offer__specs {
  margin: 2.4rem 0 0;
  text-align: left;
}
.offer__specs > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .72rem 0;
  font-size: .92rem;
  border-top: 1px solid rgba(245,245,245,.09);
}
.offer__specs > div:last-child { border-bottom: 1px solid rgba(245,245,245,.09); }
.offer__specs dt { margin: 0; color: var(--zone-dim); }
.offer__specs dd { margin: 0; text-align: right; font-weight: 500; }

.offer__price {
  margin: 2.4rem 0 0;
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -.04em;
}

.offer__note {
  margin: .9rem auto 0;
  max-width: 34ch;
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.6;
  color: var(--zone-dim);
}

/* ── Réassurance ──────────────────────────────────────────
   Ce que le visiteur cherche des yeux juste avant de payer :
   livraison, garantie, retour, paiement. Placé sous le bouton,
   pas dans les mentions légales.                            */

.assur {
  display: grid;
  gap: 1.6rem 2rem;
  margin: 3rem 0 0;
  padding: 2.2rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(245,245,245,.09);
  text-align: left;
}
.assur li { display: flex; flex-direction: column; gap: .3rem; }
.assur b {
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.assur span {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--zone-dim);
}
@media (min-width: 620px) { .assur { grid-template-columns: 1fr 1fr; } }

/* ── Dans la boîte ────────────────────────────────────────── */

.box__shot {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto clamp(2.5rem, 7svh, 4.5rem);
}

.box {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 1100px;
  margin-inline: auto;
}
@media (min-width: 820px) { .box { grid-template-columns: 1fr 1fr; } }

.box__title {
  margin: 0 0 1.6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--violet);
}
.box__list { margin: 0; padding: 0; list-style: none; }
.box__list li {
  padding: 1rem 0;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--zone-dim);
  border-top: 1px solid rgba(245,245,245,.09);
}
.box__list li:last-child { border-bottom: 1px solid rgba(245,245,245,.09); }
.box__list b { color: var(--zone-fg); font-weight: 600; }

/* ── Preuve : le fait, avant les citations ────────────────── */

.press-fact {
  max-width: 52ch;
  margin: clamp(2.5rem, 6svh, 3.5rem) 0 0;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.6;
  color: var(--zone-dim);
}
.press-fact b { color: var(--zone-fg); font-weight: 600; }

/* ── Avis clients ─────────────────────────────────────────── */

.reviews {
  display: grid;
  gap: 2.5rem;
  max-width: 1100px;
  margin: clamp(3rem, 8svh, 5rem) auto 0;
}
@media (min-width: 780px) { .reviews { grid-template-columns: 1fr 1fr; } }

.review { margin: 0; }
.review__note {
  display: block;
  margin-bottom: .8rem;
  font-size: .95rem;
  letter-spacing: .12em;
  color: var(--violet);
}
.review__texte {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--zone-fg);
}
.review__meta {
  margin-top: .9rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zone-dim);
}

.offer .btn { margin-top: 2rem; }

/* ── Barre d'achat collante ───────────────────────────────
   Entre le premier écran et la section d'offre, il n'existait
   aucune sortie vers la boutique : 17 écrans sans issue pour
   quelqu'un de décidé. Cette barre en donne une en permanence.
   Elle garde ses propres couleurs, indépendantes des zones,
   pour rester lisible aussi bien sur le noir que sur le studio. */

#buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem var(--pad);
  padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 8, 10, .82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--white);
  transform: translateY(115%);
  transition: transform .45s var(--ease);
  will-change: transform;
}
#buybar.is-on { transform: none; }

.buybar__id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.buybar__price { font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; }
.buybar__name {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: #9A9A9A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#buybar .btn { flex-shrink: 0; font-size: .88rem; padding: .7em 1.3em; }

@media (prefers-reduced-motion: reduce) {
  #buybar { transition: none; }
}

/* Image fixe de la section Versions */
.versions-shot {
  display: block;
  width: min(100%, 560px);
  margin: 0 auto clamp(3rem, 8svh, 5rem);
}
@media (min-width: 900px) { .versions-shot { width: min(46vw, 640px); } }

/* ── Presse ───────────────────────────────────────────────── */

.quotes {
  display: grid;
  gap: clamp(3rem, 7vw, 5rem);
  margin-top: clamp(3rem, 8svh, 5rem);
  max-width: 1240px;
}
.quotes blockquote { margin: 0; }
.quotes p {
  margin: 0;
  font-size: clamp(1.4rem, 3.1vw, 2.1rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.028em;
}
.quotes cite {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--zone-dim);
}
@media (min-width: 800px) { .quotes { grid-template-columns: 1fr 1fr; } }

/* ── FAQ ──────────────────────────────────────────────────── */

.faq { max-width: 780px; margin-top: clamp(3rem, 8svh, 5rem); }
.faq details { border-top: 1px solid rgba(245,245,245,.1); }
.faq details:last-child { border-bottom: 1px solid rgba(245,245,245,.1); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -.015em;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--violet);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--violet); }
.faq details p {
  margin: 0 0 1.7rem;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--zone-dim);
}

/* ── Tunnel d'achat simulé ────────────────────────────────────
   Overlay plein écran, mêmes couleurs et même typographie que la
   page. Il fige ses propres teintes plutôt que d'hériter des zones,
   pour rester identique quelle que soit la section derrière lui.  */

.tunnel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: #070708;
  color: var(--white);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.tunnel.is-open { opacity: 1; }
.tunnel[hidden] { display: none; }

/* Le bandeau ne bouge jamais, à toutes les étapes. */
.tunnel__warn {
  flex-shrink: 0;
  margin: 0;
  padding: .7rem 1rem;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

.tunnel__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tunnel__inner {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--pad) clamp(3rem, 8vh, 5rem);
}

.tunnel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.8rem, 5vh, 2.6rem);
}
.tunnel__head .t-label { margin: 0; }

.tunnel__brand {
  display: flex;
  flex-direction: column;
  gap: .22rem;
}
.tunnel__brand b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.tunnel__brand small {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A8A8A;
}

.tunnel__close {
  padding: .5em .9em;
  border: 0;
  border-radius: 100px;
  background: rgba(245,245,245,.09);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .8rem;
  cursor: pointer;
  transition: background-color .2s;
}
.tunnel__close:hover { background: rgba(245,245,245,.18); }

/* ── Fil des étapes ── */
.steps {
  display: flex;
  gap: .5rem;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  padding: 0;
  list-style: none;
  counter-reset: s;
}
/* `display: flex` l'emporterait sur l'attribut hidden. */
.steps[hidden] { display: none; }

.steps li {
  flex: 1;
  padding-top: .7rem;
  border-top: 2px solid rgba(245,245,245,.12);
  font-family: var(--font-mono);
  font-size: clamp(.54rem, 2.1vw, .64rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6E6E6E;
  white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.steps li::before { counter-increment: s; content: counter(s) " · "; }
.steps li.is-done { border-top-color: rgba(124,92,255,.45); color: #9A9A9A; }
.steps li.is-now  { border-top-color: var(--violet); color: var(--white); }
.steps li span { white-space: nowrap; }

/* ── Étapes ── */
.step__title {
  margin: 0 0 clamp(1.8rem, 4vh, 2.4rem);
  font-size: clamp(1.7rem, 4.6vw, 2.6rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.03em;
}

.pick { margin: 0 0 2.4rem; padding: 0; border: 0; }
.pick__legend {
  padding: 0;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet);
}
.pick__hint {
  margin: .9rem 0 0;
  font-size: .78rem;
  color: #8A8A8A;
}

.step__sub {
  margin: -1.4rem 0 2rem;
  font-size: .92rem;
  line-height: 1.55;
  color: #8A8A8A;
}

/* ── Aperçu du produit ──
   La console occupe le haut de l'étape et change avec le coloris.
   Tant qu'un coloris n'a pas de visuel, une grande pastille prend
   le relais : l'étape reste lisible, sans image trompeuse.        */

.preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0 0 2.4rem;
}
.preview img {
  width: 100%;
  max-width: 26rem;
  height: clamp(17rem, 42vh, 25rem);
  object-fit: contain;
  object-position: center;
  transition: opacity .28s var(--ease);
}
.preview.is-swapping img { opacity: 0; }
.preview img[hidden] { display: none; }

.preview__fallback {
  width: min(58vw, 13rem);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(245,245,245,.14);
}
.preview__fallback[hidden] { display: none; }

.preview__nom {
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8A8A8A;
}

.pick__list { display: grid; gap: 0; }
.opt {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem .2rem;
  border-top: 1px solid rgba(245,245,245,.09);
  cursor: pointer;
  transition: color .2s;
}
.pick__list .opt:last-child { border-bottom: 1px solid rgba(245,245,245,.09); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__mark {
  flex-shrink: 0;
  width: 15px; height: 15px;
  border: 1px solid rgba(245,245,245,.35);
  border-radius: 50%;
  transition: border-color .2s, box-shadow .2s;
}
.opt input:checked ~ .opt__mark {
  border-color: var(--violet);
  box-shadow: inset 0 0 0 4px var(--violet);
}
.opt input:focus-visible ~ .opt__mark { outline: 2px solid var(--violet); outline-offset: 3px; }
.opt__txt { flex: 1; }
.opt__nom { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em; }
.opt__det { display: block; margin-top: .2rem; font-size: .8rem; color: #8A8A8A; }
.opt__prix { font-size: 1rem; font-weight: 650; white-space: nowrap; }
.opt input:checked ~ .opt__txt .opt__nom { color: var(--violet); }

/* ── Choix du coloris ──
   Toutes les cases ont le même gabarit, qu'elles portent une photo du
   produit ou, faute de visuel, un aplat de la couleur. */

.swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 560px) { .swatches { grid-template-columns: repeat(4, 1fr); } }

.swatch { position: relative; cursor: pointer; text-align: center; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }

.swatch__dot {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  margin: 0 0 .55rem;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(245,245,245,.14);
  transition: box-shadow .2s;
}
.swatch input:checked ~ .swatch__dot {
  box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 3px rgba(124,92,255,.18);
}
.swatch input:focus-visible ~ .swatch__dot { outline: 2px solid var(--violet); outline-offset: 3px; }
.swatch__nom { font-size: .74rem; color: #9A9A9A; }
.swatch input:checked ~ .swatch__nom { color: var(--white); }
.swatch.is-off { opacity: .3; pointer-events: none; }

/* Vignette produit quand le coloris a son visuel. */
.swatch__shot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  padding: .35rem;
  margin-bottom: .55rem;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(245,245,245,.12);
  transition: box-shadow .2s, background-color .2s;
}
.swatch__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.swatch input:checked ~ .swatch__shot {
  box-shadow: inset 0 0 0 2px var(--violet);
  background: rgba(124,92,255,.08);
}
.swatch input:focus-visible ~ .swatch__shot { outline: 2px solid var(--violet); outline-offset: 3px; }

/* ── Champs ── */
.fields { display: grid; gap: 1.2rem; }
@media (min-width: 620px) {
  .fields { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: .45rem; }
.field > span {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A8A8A;
}
.field > span em { font-style: normal; opacity: .65; text-transform: none; letter-spacing: .04em; }
.field input {
  padding: .8rem 0;
  border: 0;
  border-bottom: 1px solid rgba(245,245,245,.16);
  background: none;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  border-radius: 0;
  transition: border-color .2s;
}
.field input:focus { outline: none; border-bottom-color: var(--violet); }
.field.is-bad input { border-bottom-color: #FF6B6B; }
.field.is-bad > span { color: #FF6B6B; }

/* ── Informations & livraison ── */
.checkout-heading {
  margin: 2.3rem 0 1.1rem;
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -.02em;
}

.checkout-product {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.2rem;
  padding: .75rem;
  border: 1px solid rgba(245,245,245,.1);
  border-radius: 16px;
  background: rgba(245,245,245,.035);
}
.checkout-product img {
  display: block;
  width: 5.5rem;
  height: 4.7rem;
  object-fit: contain;
  border-radius: 11px;
  background: #101012;
}
.checkout-product strong,
.checkout-product span { display: block; }
.checkout-product strong { font-size: .95rem; font-weight: 650; }
.checkout-product span { margin-top: .2rem; font-size: .78rem; color: #8A8A8A; }
.checkout-product > b { white-space: nowrap; font-size: .95rem; }

.shipping-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
}
.shipping-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  min-height: 5.4rem;
  padding: .85rem;
  border: 1px solid rgba(245,245,245,.12);
  border-radius: 14px;
  background: rgba(245,245,245,.025);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.shipping-choice:has(input:checked) {
  border-color: var(--violet);
  background: rgba(124,92,255,.09);
}
.shipping-choice input { position: absolute; opacity: 0; pointer-events: none; }
.shipping-choice__mark {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(245,245,245,.38);
  border-radius: 50%;
  transition: border-color .2s, box-shadow .2s;
}
.shipping-choice input:checked ~ .shipping-choice__mark {
  border-color: var(--violet);
  box-shadow: inset 0 0 0 4px var(--violet);
}
.shipping-choice input:focus-visible ~ .shipping-choice__mark { outline: 2px solid var(--violet); outline-offset: 3px; }
.shipping-choice b,
.shipping-choice small { display: block; }
.shipping-choice b { font-size: .9rem; font-weight: 650; }
.shipping-choice small { margin-top: .2rem; font-size: .74rem; line-height: 1.35; color: #8A8A8A; }
.shipping-choice__logo {
  display: block;
  width: auto;
  max-width: 5.2rem;
  height: 1.75rem;
  object-fit: contain;
  object-position: right center;
  filter: saturate(.92);
}
.shipping-choice__logo--ups { height: 2rem; }
.shipping-choice__logo--mondial { max-width: 5.6rem; }

.relay-picker {
  margin-top: .9rem;
  padding: 1rem;
  border: 1px solid rgba(245,245,245,.1);
  border-radius: 16px;
  background: rgba(245,245,245,.025);
}
.relay-picker[hidden] { display: none; }
.relay-picker__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.relay-picker__head b,
.relay-picker__head small { display: block; }
.relay-picker__head b { font-size: .92rem; font-weight: 650; }
.relay-picker__head small { margin-top: .25rem; font-size: .75rem; line-height: 1.45; color: #8A8A8A; }
.relay-picker__head button {
  flex-shrink: 0;
  padding: .55rem .75rem;
  border: 1px solid rgba(245,245,245,.16);
  border-radius: 100px;
  background: transparent;
  color: var(--white);
  font: 600 .72rem var(--font-display);
  cursor: pointer;
}
.relay-picker__head button:hover { border-color: var(--violet); color: var(--violet); }
.relay-picker__head button:disabled { opacity: .5; cursor: wait; }

.relay-status {
  margin: .9rem 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: #8A8A8A;
}
.relay-status.is-error { color: #FF8A8A; }

.relay-results { display: grid; gap: .65rem; margin-top: .85rem; }
.relay-results:empty { display: none; }
.relay-result {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .78rem;
  border: 1px solid rgba(245,245,245,.1);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.relay-result:has(input:checked) { border-color: var(--violet); background: rgba(124,92,255,.08); }
.relay-result input { accent-color: var(--violet); width: 16px; height: 16px; margin: 0; }
.relay-result b,
.relay-result small { display: block; }
.relay-result b { font-size: .84rem; font-weight: 650; }
.relay-result small { margin-top: .2rem; font-size: .74rem; line-height: 1.4; color: #8A8A8A; }
.relay-result__distance { color: var(--violet); font-size: .72rem; white-space: nowrap; }

/* Le widget officiel effectue la recherche ; notre liste reprend ses données
   pour conserver le design AYN Thor. */
.mr-widget-engine {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 620px;
  height: 620px;
  overflow: hidden;
  pointer-events: none;
}

@media (max-width: 620px) {
  .checkout-product { grid-template-columns: 4.8rem 1fr; }
  .checkout-product img { width: 4.8rem; height: 4.3rem; }
  .checkout-product > b { grid-column: 2; }
  .shipping-choices { grid-template-columns: 1fr; }
  .shipping-choice__logo { max-width: 6rem; height: 1.9rem; }
  .shipping-choice__logo--ups { height: 2.15rem; }
  .relay-result { grid-template-columns: auto 1fr; }
  .relay-result__distance { grid-column: 2; }
}

/* ── Récapitulatif ── */
.recap { margin: 0; }
.recap > div {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .85rem 0;
  border-top: 1px solid rgba(245,245,245,.09);
  font-size: .95rem;
}
.recap > div:last-child { border-bottom: 1px solid rgba(245,245,245,.09); }
.recap dt { margin: 0; color: #8A8A8A; }
.recap dd { margin: 0; text-align: right; font-weight: 500; }
.recap .recap__tot { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.recap .recap__tot dt { color: var(--white); }

/* ── Pied d'étape ── */
.step__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: clamp(2rem, 5vh, 3rem);
}
.step__foot--done { justify-content: flex-start; }
.step__total { margin: 0; display: flex; align-items: baseline; gap: .8rem; }
.step__total span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8A8A8A;
}
.step__total b { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; }

.step__note {
  margin: 1.6rem 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: #8A8A8A;
}
.step__note a { color: var(--violet); }

/* ── Confirmation ── */
.done__num {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 1.8rem 0;
  border-top: 1px solid rgba(245,245,245,.09);
  border-bottom: 1px solid rgba(245,245,245,.09);
}
.done__num span {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8A8A8A;
}
.done__num b {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 4.5vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--violet);
}

@media (prefers-reduced-motion: reduce) {
  .tunnel { transition: none; }
  .swatch input:checked ~ .swatch__dot { transform: none; }
}

/* ── Pied de page ─────────────────────────────────────────── */

.footer {
  padding: clamp(4rem, 10svh, 6rem) var(--pad) clamp(3rem, 7svh, 4.5rem);
  background: var(--black);
  color: #6E6E6E;
  font-size: .78rem;
  line-height: 1.75;
}
.footer p { margin: 0 0 1rem; max-width: 74ch; }
.footer__lead { color: var(--grey); }
.footer a { color: var(--violet); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ── Révélations au scroll : opacité + 20 px, discrètes ───── */

/* Les blocs pilotés en opacité par le moteur (hero, CTA) ne passent pas par
   les révélations : les deux mécanismes se disputeraient la même propriété. */
[data-fade-copy="true"] .scene__copy[data-reveal] { opacity: 1; }

/* La bascule clair/sombre de §5 ne doit pas claquer. */
.t-display, .t-h2, .t-body, .t-lede, .t-label, .t-kicker, .t-fineprint,
.btn--ghost, .scene__copy {
  transition: color .4s linear;
}

/* Pas de will-change ici : la règle vise des dizaines d'éléments, et
   chacun deviendrait une couche de composition permanente. Le navigateur
   promeut de lui-même le temps de la transition. */
[data-reveal] {
  opacity: 0;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal="up"]    { transform: translateY(20px); }
[data-reveal="left"]  { transform: translateX(-20px); }
[data-reveal="right"] { transform: translateX(20px); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* Décalage en cascade : label -> titre -> texte -> bouton */
[data-reveal] > * { transition-delay: 0ms; }
[data-reveal].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal].is-in > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal].is-in > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal].is-in > *:nth-child(4) { transition-delay: 210ms; }

/* ── Desktop : texte dans les zones latérales, produit au centre ── */

@media (min-width: 900px) {
  .scene__copy {
    top: 50%;
    bottom: auto;
    right: auto;
    width: min(38vw, 560px);
    padding: 0;
    background: none;
    translate: 0 -50%;
  }
  .copy--left   { left: var(--pad); }
  .copy--right  { left: auto; right: var(--pad); text-align: right; }
  .copy--right .t-body,
  .copy--right .t-lede,
  .copy--right .t-fineprint { margin-left: auto; }

  .copy--center {
    left: 50%;
    width: min(72vw, 900px);
    text-align: center;
    translate: -50% -50%;
  }

  /* Hero et CTA : titre en haut, produit dessous, débordant du bas
     du cadre. Le dégradé de lisibilité mobile n'a plus lieu d'être. */
  .scene--hero .scene__copy,
  .scene--cta  .scene__copy {
    background: none;
    padding: 0;
  }
  .scene--hero .copy--center,
  .scene--cta  .copy--center {
    top: clamp(5.5rem, 12svh, 8.5rem);
    width: min(88vw, 1120px);
    translate: -50% 0;
  }
  .copy--center .t-lede,
  .copy--center .t-fineprint { margin-inline: auto; }
  .copy--center .btn-row { justify-content: center; }

  .still {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .still__copy { max-width: 34rem; }
  .still--emul { grid-template-columns: 1fr 1.15fr; }
  .still--emul .marquee,
  .still .t-fineprint.fineprint--center { grid-column: 1 / -1; }
  .marquee { margin-left: calc(var(--pad) * -1); }
}

/* ── Accessibilité : mouvement réduit ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; transform: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__set:nth-child(2) { display: none; }
  .marquee__track { flex-wrap: wrap; width: 100%; gap: .5rem; }
  .scroll-hint { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  body, .nav { transition: none; }
  .scene { height: 100svh; }
}