/* ═══════════════════════════════════════════════════════════════════════════
   STARVIN — L'AFFICHE
   Six écrans pleins. Aucune carte, aucune pastille, aucun pictogramme, aucune
   maquette d'application. Le texte fait tout ; la photo est à fond perdu ;
   l'ambre est un APLAT, pas un accent.
   Geste unique — LE COUPERET : une barre ambre balaie, le texte est derrière.
   Jamais de fondu : le site tranche, comme le produit.
   Couleurs : jetons relevés sur trystarvin.com le 2026-08-26. Rien d'autre.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --display: 'Big Shoulders Display', 'Trebuchet MS', sans-serif;
  --texte:   'Golos Text', 'Segoe UI', sans-serif;
  --etiquette: 'Overpass Mono', ui-monospace, monospace;

  --ambre:       #E89B3C;
  --ambre-clair: #F0934A;
  --ambre-terre: #A8500B;
  --encre:       #15160A;
  --noir:        #0A0A0D;
  --noir-chaud:  #0F0C09;
  --creme:       #F3EDE1;
  --creme-vif:   #FFFDF7;
  --filet-clair: #E4E2DC;
  --gris:        #5D616A;
  --gris-clair:  #9A9DA5;
  --vert:        #46D784;

  --coup: cubic-bezier(.76, 0, .24, 1);
  --marge: clamp(20px, 6vw, 92px);
  --large: 1320px;
}

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

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

/* Le geste que le produit revendique : on ne PARCOURT pas, on arrive sur un écran.
   « proximity » sous 900 px, où une affiche peut dépasser la hauteur du viewport. */
html, body { scroll-snap-type: y proximity; }
@media (min-width: 900px) and (min-height: 620px) {
  html, body { scroll-snap-type: y mandatory; }
}
.affiche { scroll-snap-align: start; scroll-snap-stop: normal; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--creme-vif);
  font-family: var(--texte);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
ol { margin: 0; padding: 0; list-style: none; }
dl, dd, dt, p, figure { margin: 0; }

.saut {
  position: absolute; left: -9999px; top: 0; z-index: 9;
  background: var(--encre); color: var(--ambre);
  padding: 14px 22px; font-weight: 600;
}
.saut:focus { left: 0; }

.cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── l'affiche : un écran plein, une seule colonne, marges franches ────── */

.affiche {
  position: relative;
  min-height: 100svh;
  padding: var(--marge);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
}

.affiche--ambre { background: var(--ambre); color: var(--encre); }
.affiche--creme { background: var(--creme); color: var(--encre); }
.affiche--noire { background: var(--noir); color: var(--creme-vif); }

.affiche--photo { justify-content: flex-end; }
.affiche--photo .fond {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.05);
}
.affiche--photo::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(10, 10, 13, .34);
}
/* Bloc plein : la lisibilité ne se négocie pas avec une photo. */
.affiche--photo .dessus {
  position: relative;
  display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px);
  max-width: min(100%, 68ch);
  background: var(--noir);
  padding: clamp(24px, 3.4vw, 52px);
  box-shadow: 16px 16px 0 var(--ambre);
}
.affiche--photo .dire { color: var(--creme-vif); }
.affiche--photo .glose { color: var(--creme-vif); opacity: .78; font-size: clamp(.95rem, 1.1vw, 1.05rem); }

/* ── typographie : le cri, et rien qui lui dispute la place ───────────── */

.cri {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.6rem, 13vw, 11rem);
  line-height: .82;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.cri--deux { font-size: clamp(2.6rem, 7.4vw, 6rem); line-height: .88; }

.marque {
  font-family: var(--etiquette); font-weight: 600;
  font-size: clamp(.9rem, 1.1vw, 1.05rem);
  letter-spacing: .32em; text-transform: uppercase;
}

.numero {
  font-family: var(--etiquette); font-weight: 600;
  font-size: clamp(.82rem, 1vw, .95rem);
  letter-spacing: .24em;
  color: var(--ambre);
}
.affiche--ambre .numero { color: var(--encre); opacity: .55; }
.affiche--creme .numero { color: var(--ambre-terre); }

.dire {
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 1.34;
  max-width: 30ch;
  font-weight: 500;
}

.glose {
  color: var(--gris-clair);
  font-size: clamp(.92rem, 1.05vw, 1.02rem);
  line-height: 1.5;
  max-width: 46ch;
}
.affiche--ambre .glose { color: var(--encre); opacity: .72; }
.affiche--creme .glose { color: var(--gris); }
.glose--fine { font-size: .82rem; }

/* ── le pied de la première affiche ───────────────────────────────────── */

.pied-affiche {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(16px, 3vw, 44px);
  margin-top: clamp(10px, 2vw, 26px);
}
.mener {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  letter-spacing: .01em;
  color: var(--encre); text-decoration: none;
  border-bottom: 4px solid var(--encre);
  padding-bottom: 3px;
  display: inline-flex; align-items: baseline; gap: 12px;
}
.fleche { display: inline-block; animation: appel 2.6s ease-in-out infinite; }
@keyframes appel {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(9px); }
}

/* ── 02 · les cinq envies, en lignes typographiques ───────────────────── */

.envies { margin-top: clamp(10px, 2vw, 26px); max-width: var(--large); }
.envies li {
  display: grid; grid-template-columns: 1fr; align-items: baseline;
  gap: 2px clamp(18px, 3vw, 44px);
  padding: clamp(14px, 1.8vw, 22px) 0;
  border-top: 1px solid var(--filet-clair);
}
@media (min-width: 720px) { .envies li { grid-template-columns: minmax(6ch, 34%) 1fr; } }
.envies li:last-child { border-bottom: 1px solid var(--filet-clair); }
.envies b {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  line-height: .9; letter-spacing: -.01em;
}
.envies i {
  font-style: normal; color: var(--gris);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  align-self: center;
}

/* ── 03 · les quatre marches ──────────────────────────────────────────── */

.marches { counter-reset: marche; max-width: 62ch; }
.marches li {
  counter-increment: marche;
  display: flex; align-items: baseline; gap: 16px;
  padding: 11px 0;
  border-top: 1px solid rgba(232, 155, 60, .42);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
}
.marches li::before {
  content: counter(marche, decimal-leading-zero);
  font-family: var(--etiquette); font-weight: 600;
  color: var(--ambre); letter-spacing: .1em; font-size: .84rem;
}

/* ── 04 · le relevé du passeport, posé comme un générique ─────────────── */

.affiche--deux-colonnes { display: grid; align-content: center; }
.affiche--deux-colonnes > div { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px); }

.releve { margin-top: clamp(14px, 2vw, 26px); max-width: 56ch; }
.releve > div {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 12px 0;
  border-top: 1px solid rgba(21, 22, 10, .22);
}
.releve dt {
  font-family: var(--etiquette);
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .78;
}
.releve dd {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1;
  display: flex; align-items: baseline; gap: 12px;
}
.releve dd span {
  font-family: var(--texte); font-weight: 400; font-size: .8rem;
  letter-spacing: 0; opacity: .66;
}

.planche { overflow: hidden; box-shadow: 18px 18px 0 var(--encre); }
.planche img { width: 100%; }

/* ── 06 · l'inscription ───────────────────────────────────────────────── */

.formulaire { display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(10px, 2vw, 24px); }
.formulaire input {
  flex: 1 1 260px; max-width: 380px;
  background: transparent; color: var(--creme-vif);
  border: 2px solid var(--gris);
  border-right: 0;
  padding: 17px 20px;
}
.formulaire input::placeholder { color: var(--gris-clair); }
.formulaire button {
  font-family: var(--display); font-weight: 800;
  font-size: 1.22rem; letter-spacing: .04em;
  background: var(--ambre); color: var(--encre);
  border: 2px solid var(--ambre);
  padding: 15px 30px; cursor: pointer;
  box-shadow: 7px 7px 0 var(--ambre-terre);
}
.reponse { min-height: 1.4em; color: var(--vert); font-weight: 600; font-size: .95rem; }

.ourlet {
  margin-top: auto; padding-top: clamp(28px, 5vw, 60px);
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
  color: var(--gris-clair); font-size: .86rem;
}
.ourlet span:first-child {
  font-family: var(--etiquette); font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--creme-vif); font-size: .84rem;
}
.ourlet a { color: var(--gris-clair); text-decoration: none; border-bottom: 1px solid transparent; }

/* ═══ LE COUPERET ═════════════════════════════════════════════════════════
   Une barre ambre traverse le bloc de gauche à droite, puis se retire par la
   droite ; le texte est découvert derrière elle. L'état initial est conditionné
   à .has-js (le h1 reste peint sans JS — garde L12) et repose sur clip-path,
   que l'outil de capture sait neutraliser. ═════════════════════════════════ */

.has-js [data-reveal] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .62s var(--coup) .06s;
}
.has-js [data-reveal].is-in { clip-path: inset(0 0 0 0); }

.has-js [data-reveal]::after {
  content: ""; position: absolute; inset: -2px -6px;
  background: var(--ambre); transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
.affiche--ambre .has-js [data-reveal]::after,
.has-js .affiche--ambre [data-reveal]::after { background: var(--encre); }
.has-js [data-reveal] { position: relative; }
.has-js [data-reveal].is-in::after { animation: couperet .68s var(--coup) forwards; }

@keyframes couperet {
  0%   { transform: scaleX(0); transform-origin: left center; }
  47%  { transform: scaleX(1); transform-origin: left center; }
  48%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

/* Le cri n'attend RIEN : jamais masqué, jamais conditionné à une animation.
   (Première version : il était découpé puis découvert — il ne s'est pas peint du tout.) */

/* La photo entre par une montée courte, jamais par un fondu. */
.has-js .affiche--photo .fond { transform: scale(1.06); transition: transform 1.5s var(--coup); }
.has-js .affiche--photo.vue .fond { transform: scale(1); }

/* ═══ SURVOL ══════════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .mener:hover { background: var(--encre); color: var(--ambre); border-bottom-color: var(--encre); }
  .mener:hover .fleche { animation-play-state: paused; transform: translateY(11px); }
  .envies li:hover { background: var(--ambre); }
  .envies li:hover i { color: var(--encre); }
  .marches li:hover::before { color: var(--creme-vif); }
  .ourlet a:hover { color: var(--ambre); border-bottom-color: var(--ambre); }
  .formulaire button:hover { background: var(--encre); color: var(--ambre); border-color: var(--encre); }
  .formulaire input:hover { border-color: var(--ambre); }
  .releve > div:hover { background: var(--encre); color: var(--ambre); }
  .releve > div:hover dt { opacity: 1; }
  .planche:hover img { transform: scale(1.03); }
}

.envies li { transition: background-color .28s var(--coup), padding-left .32s var(--coup); }
.envies i { transition: color .28s var(--coup); }
.envies li:hover, .envies li:active { padding-left: clamp(10px, 1.6vw, 22px); }
.envies li:active { background: var(--ambre); }
.envies li:active i { color: var(--encre); }
.mener { padding-inline: 6px; transition: background-color .24s var(--coup), color .24s var(--coup), border-color .24s var(--coup); }
.releve > div { transition: background-color .24s var(--coup), color .24s var(--coup), padding-inline .24s var(--coup); }
.releve > div:hover, .releve > div:active { padding-inline: 10px; }
.mener:active { background: var(--encre); color: var(--ambre); border-bottom-color: var(--encre); }
.releve > div:active { background: var(--encre); color: var(--ambre); }
.formulaire button { transition: background-color .24s var(--coup), color .24s var(--coup), border-color .24s var(--coup), box-shadow .24s var(--coup); }
.formulaire button:hover, .formulaire button:active { box-shadow: 0 0 0 var(--ambre-terre); }
.formulaire button:active { background: var(--encre); color: var(--ambre); }
.formulaire input { transition: border-color .25s ease; }
.ourlet a { transition: color .25s ease, border-color .25s ease; }
.ourlet a:active { color: var(--ambre); border-bottom-color: var(--ambre); }
.planche img { transition: transform .7s var(--coup); }
.planche:active img { transform: scale(1.02); }
.releve dt { transition: opacity .25s ease; }
.marches li::before { transition: color .25s ease; }

:focus-visible { outline: 3px solid var(--ambre); outline-offset: 3px; }
.affiche--ambre :focus-visible { outline-color: var(--encre); }
.envies li:focus-visible { background: var(--ambre); }

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
  .affiche--deux-colonnes {
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(36px, 5vw, 82px);
    align-items: center;
  }
  .envies li { gap: clamp(24px, 5vw, 76px); }
  .envies b { min-width: 7ch; }
}

@media (max-width: 560px) {
  .affiche { min-height: auto; padding-block: clamp(64px, 16vw, 96px); }
  .affiche--photo { min-height: 100svh; }
  .formulaire input { border-right: 2px solid var(--gris); }
  .formulaire button { width: 100%; }
}

/* ── mouvement réduit ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .has-js [data-reveal], .has-js .cri { clip-path: none; }
  .has-js [data-reveal]::after { display: none; }
  .has-js .affiche--photo .fond { transform: none; }
}

/* Cadence : les lignes d'une liste ne se découvrent pas toutes en même temps. */
.has-js .envies li:nth-child(2),  .has-js .marches li:nth-child(2) { transition-delay: .07s; }
.has-js .envies li:nth-child(3),  .has-js .marches li:nth-child(3) { transition-delay: .14s; }
.has-js .envies li:nth-child(4),  .has-js .marches li:nth-child(4) { transition-delay: .21s; }
.has-js .envies li:nth-child(5) { transition-delay: .28s; }
.has-js .envies li:nth-child(2).is-in::after,  .has-js .marches li:nth-child(2).is-in::after { animation-delay: .07s; }
.has-js .envies li:nth-child(3).is-in::after,  .has-js .marches li:nth-child(3).is-in::after { animation-delay: .14s; }
.has-js .envies li:nth-child(4).is-in::after,  .has-js .marches li:nth-child(4).is-in::after { animation-delay: .21s; }
.has-js .envies li:nth-child(5).is-in::after { animation-delay: .28s; }