/* ============================================================
   Spoiler Club — landing V4 (repart de 0, direction NEUVE)
   « Pop print / affiche sérigraphiée » : flat graphique, bords
   encre épais, ombres DURES décalées, aplats or/encre/coral, typo
   géante. Le spoiler = caviardage plein (barre d'encre qui glisse),
   pas de flou, pas de marquee de posters, pas de carte inclinée.
   Palette resserrée (encre + or + coral) = zéro bariolé.
   Charte respectée : or FILL + encre dessus, coral accent, rouge = logo.
   ============================================================ */

:root {
  --font-display:"Gabarito","Fredoka",system-ui,sans-serif;
  --font-body:"Lexend","Figtree",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;

  --radius:14px; --radius-sm:9px; --radius-full:999px;

  --ease-out:cubic-bezier(.2,.9,.3,1);
  --ease-spring:cubic-bezier(.34,1.25,.64,1);   /* pop léger, sans bounce daté */
  --dur-fast:150ms; --dur-base:280ms; --dur-slow:520ms;
  --section:88px;              /* rythme vertical des sections */

  /* Palette resserrée (tokenisée) */
  --paper:#F5F3EC;             /* base claire (papier) */
  --field:#FFFFFF;             /* fond des champs */
  --ink:#15141B;               /* encre (bords, texte, blocs sombres) */
  --ink-soft:#242230;
  --ink-3:#3A2A08;             /* texte secondaire sur or */
  --cream:#F6EFDD;             /* texte sur encre */
  --muted:#575360;             /* secondaire sur papier (AA) */
  --muted-ink:#B9B2A2;         /* secondaire sur encre (AA) */
  --gold:#FFC233; --on-gold:#241A02;
  --coral:#FB5F38;
  --danger:#C81E42; --focus:#8A5A0E;

  --bd:2px solid var(--ink);
  --sh:5px 5px 0 var(--ink);
  --sh-sm:3px 3px 0 var(--ink);

  --z-sticky:100;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-weight:400; line-height:1.55; font-size:1rem;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img, svg { max-width:100%; height:auto; display:block; }
a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; text-decoration-color:var(--gold); }
a:hover { text-decoration-color:var(--coral); }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
h1,h2,h3 { font-family:var(--font-display); font-weight:800; line-height:.98; letter-spacing:-.035em; margin:0; text-wrap:balance; }
.mono { font-family:var(--font-mono); }
p { text-wrap:pretty; }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 26px; }
:where(#modes, #liste) { scroll-margin-top:82px; }

/* ---------- Nav ---------- */
.nav { position:sticky; top:0; z-index:var(--z-sticky); background:var(--paper); border-bottom:var(--bd); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; height:66px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.brand img { width:32px; height:32px; border-radius:7px; }
.nav-links { display:flex; gap:8px; align-items:center; }
.nav-links a { color:var(--ink); font-size:.9rem; font-weight:500; text-decoration:none; padding:9px 13px; border-radius:var(--radius-full); }
.nav-links a:hover { background:var(--ink); color:var(--cream); }

/* ---------- Boutons (aplat + ombre dure, press tactile) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em;
  padding:13px 24px; border-radius:var(--radius-full); border:var(--bd); cursor:pointer;
  text-decoration:none; background:var(--paper); color:var(--ink); box-shadow:var(--sh-sm);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.btn:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); text-decoration:none; }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn-primary { background:var(--gold); color:var(--on-gold); }
.btn-ink { background:var(--ink); color:var(--cream); }
.btn-lg { font-size:1.1rem; padding:15px 28px; }

/* ---------- Reveal (état final visible par défaut) ---------- */
.reveal { opacity:1; }
.js .reveal { opacity:0; transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease-out) var(--rd,0ms), transform var(--dur-slow) var(--ease-out) var(--rd,0ms); }
.js .reveal.is-in { opacity:1; transform:none; }

/* ============================================================
   1) HERO — type géante + affiche & commentaire (style image #4) + mur dérivant
   ============================================================ */
.hero { position:relative; overflow:hidden; border-bottom:var(--bd); padding:64px 0 72px; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.tagpill { display:inline-block; font-family:var(--font-mono); font-size:.78rem;
  border:var(--bd); border-radius:var(--radius-full); padding:6px 14px; background:var(--paper); }
.hero h1 { font-size:clamp(3rem,8.4vw,6rem); margin:22px 0 18px; }
/* Surlignage or qui se trace sur « spoiler » (coup de marqueur à l'entrée) */
.hero h1 .hl { color:var(--ink); border-radius:5px; padding:0 .08em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background-image:linear-gradient(var(--gold),var(--gold)); background-repeat:no-repeat;
  background-position:0 center; background-size:100% 100%; }
.js .hero h1 .hl { background-size:0% 100%; }
.js .hero h1.is-in .hl { animation:hl-loop 5.5s var(--ease-out) .6s infinite; }
@keyframes hl-loop { 0% { background-size:0% 100%; } 16%,80% { background-size:100% 100%; } 100% { background-size:0% 100%; } }
.hero .lede { font-size:clamp(1.08rem,2.1vw,1.32rem); color:var(--ink); max-width:44ch; margin:0 0 28px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-note { margin:22px 0 0; font-size:.86rem; color:var(--muted); }

.stars { color:var(--coral); letter-spacing:1px; }

/* Fond : mur d'affiches qui dérive (ambiance ciné en boucle, façon V2) */
.hero-bg { position:absolute; top:-10%; bottom:-10%; right:-3%; width:56%; z-index:0; display:flex; gap:14px; pointer-events:none; opacity:.5;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 32%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 32%, #000 88%, transparent); }
.hero-col { flex:1 1 0; display:flex; flex-direction:column; gap:14px; min-width:0; }
.hero-col.c0 { animation:h-up 42s linear infinite; }
.hero-col.c1 { animation:h-down 52s linear infinite; margin-top:-70px; }
.hero-col.c2 { animation:h-up 46s linear infinite; margin-top:-30px; }
@keyframes h-up   { from { transform:translateY(0); }    to { transform:translateY(-50%); } }
@keyframes h-down { from { transform:translateY(-50%); } to { transform:translateY(0); } }
.hero-bg .pw { width:100%; box-shadow:none; }
.hero-bg .pw:hover { transform:none; }
.hero .wrap { position:relative; z-index:1; }

/* Affiche « à l'affiche » inclinée + puce commentaire flouté (style image #4, en flat V4) */
.hero-art { position:relative; min-height:380px; }
.feat { position:relative; width:min(80%,300px); margin-left:auto; transform:rotate(3deg); transition:transform var(--dur-base) var(--ease-out); }
.hero-art:hover .feat { transform:rotate(1.5deg) translateY(-4px); }
.feat .pw { width:100%; }
.feat .pw:hover { transform:none; }
.feat-tag { position:absolute; top:-12px; left:16px; z-index:3; font-family:var(--font-mono); font-size:.72rem;
  background:var(--gold); color:var(--on-gold); border:var(--bd); border-radius:var(--radius-full); padding:4px 11px; box-shadow:var(--sh-sm); }
.cmt { position:absolute; left:-5%; bottom:5%; z-index:4; width:min(78%,266px);
  background:var(--paper); border:var(--bd); border-radius:var(--radius-sm); box-shadow:var(--sh); padding:13px 15px;
  transform:rotate(-4deg); transition:transform var(--dur-fast) var(--ease-out); }
.cmt:hover { transform:rotate(-2deg) translateY(-3px); }
.cmt-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cmt-av { width:24px; height:24px; flex:0 0 auto; border-radius:50%; background:var(--gold); color:var(--on-gold);
  font-family:var(--font-display); font-weight:800; font-size:.72rem; display:inline-flex; align-items:center; justify-content:center; }
.cmt-name { font-family:var(--font-display); font-weight:700; font-size:.84rem; }
.cmt-ep { margin-left:auto; font-family:var(--font-mono); font-size:.68rem; color:var(--muted); }
.cmt-text { margin:0; font-size:.85rem; color:var(--ink); filter:blur(5px); user-select:none; transition:filter var(--dur-base) var(--ease-out); }
.cmt:hover .cmt-text { filter:none; }
.cmt-lock { margin:8px 0 0; font-family:var(--font-mono); font-size:.68rem; color:var(--muted); }

/* ============================================================
   2) TICKER — bandeau texte défilant (encre), séparateurs étoile
   ============================================================ */
.ticker { background:var(--ink); color:var(--cream); border-bottom:var(--bd); overflow:hidden; padding:12px 0; }
.ticker-track { display:flex; width:max-content; animation:tick 34s linear infinite; }
.ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-item { display:inline-flex; align-items:center; gap:16px; padding:0 20px; white-space:nowrap;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; }
.ticker-item .st { color:var(--coral); }
.ticker-item .cd { font-family:var(--font-mono); font-weight:500; font-size:.82rem; color:var(--gold); }
@keyframes tick { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ============================================================
   3) MODES — bande encre, 3 blocs distincts (Cash/Balisé/Bunker)
   ============================================================ */
.modes { background:var(--ink); color:var(--cream); border-bottom:var(--bd); padding:var(--section) 0; }
.modes h2 { font-size:clamp(1.9rem,4.6vw,3rem); color:var(--cream); max-width:16ch; }
.modes .sub { color:var(--muted-ink); margin:14px 0 40px; max-width:50ch; font-size:1.06rem; }
.mode-row { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mode { --msh:var(--gold); position:relative; border:2px solid var(--cream); border-radius:var(--radius);
  padding:24px; min-height:236px; display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  box-shadow:6px 6px 0 var(--msh);
  transition:transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring); }
.mode:hover { transform:rotate(0deg) translateY(-6px); box-shadow:11px 11px 0 var(--msh); }
.mode-emblem { width:54px; height:54px; flex:0 0 auto; border:var(--bd); border-radius:var(--radius-full);
  display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--sh-sm);
  transition:transform var(--dur-base) var(--ease-spring); }
.mode:hover .mode-emblem { transform:rotate(-9deg) scale(1.08); }
.mode-emblem svg { width:27px; height:27px; }
.mode-body { margin-top:auto; }
.mode h3 { font-size:1.55rem; }
.mode p { margin:8px 0 0; font-size:.95rem; }
.mode-meter { display:flex; align-items:center; gap:7px; }
.mode-meter span { width:22px; height:10px; border:2px solid currentColor; border-radius:3px; opacity:.55; }
.mode-meter span.on { background:currentColor; opacity:1; }
/* Cash : direct (le moins à couvert) */
.mode.cash { --msh:var(--coral); background:var(--gold); color:var(--on-gold); border-color:var(--ink); transform:rotate(-1.5deg); }
.mode.cash p { color:var(--ink-3); }
.mode.cash .mode-emblem { background:var(--ink); color:var(--cream); border-color:var(--ink); }
/* Balisé : prudent */
.mode.balise { --msh:var(--gold); background:transparent; color:var(--cream); transform:rotate(1deg); }
.mode.balise .mode-emblem { background:var(--gold); color:var(--on-gold); }
/* Bunker : verrouillé (le plus à couvert) */
.mode.bunker { --msh:#F6EFDD; background:var(--ink-soft); color:var(--cream); border-color:var(--gold); transform:rotate(-1deg); }
.mode.bunker .mode-emblem { background:var(--coral); color:#2A0E06; border-color:var(--ink); }

/* ============================================================
   4) MUR D'AFFICHES — posters sérigraphiés qui défilent (2 rangées)
   ============================================================ */
.watch { padding:var(--section) 0 22px; border-bottom:var(--bd); overflow:hidden; }
.watch-head { padding:0 26px; max-width:1180px; margin:0 auto 30px; }
.watch h2 { font-size:clamp(1.9rem,4.6vw,3rem); max-width:20ch; }
.watch-head p { color:var(--muted); margin:12px 0 0; max-width:48ch; }
.pwall { display:flex; flex-direction:column; gap:20px; padding-bottom:30px; }
.pwall-row { display:flex; width:max-content; gap:20px; }
.pwall-row.r0 { animation:pw-left 46s linear infinite; }
.pwall-row.r1 { animation:pw-right 58s linear infinite; }
.pwall:hover .pwall-row { animation-play-state:paused; }
@keyframes pw-left  { from { transform:translateX(0); }    to { transform:translateX(-50%); } }
@keyframes pw-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }

.pw { position:relative; flex:0 0 auto; width:168px; aspect-ratio:2/3; border:var(--bd); border-radius:var(--radius-sm);
  box-shadow:var(--sh); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:13px;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.pw:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); }
.pw::before { content:""; position:absolute; inset:0; z-index:0; opacity:.5; /* trame sérigraphie (halftone) */
  background-image:radial-gradient(currentColor 1.4px, transparent 1.6px); background-size:11px 11px; color:inherit; mix-blend-mode:multiply; }
.pw > * { position:relative; z-index:1; }
.pw .cd { font-family:var(--font-mono); font-size:.72rem; align-self:flex-start; padding:3px 8px;
  border-radius:var(--radius-full); border:2px solid currentColor; }
.pw .pw-t { font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:.94; letter-spacing:-.02em; }
.pw .stars { font-size:.88rem; color:var(--coral); }
/* Tons sérigraphie : chauds/marque, disciplinés (pas d'arc-en-ciel) */
.pw.t-ink   { background:var(--ink);     color:var(--cream); }
.pw.t-ink::before   { color:#000; opacity:.4; }
.pw.t-gold  { background:var(--gold);    color:var(--on-gold); }
.pw.t-paper { background:var(--paper);   color:var(--ink); }
.pw.t-tan   { background:#EBD6A0;        color:var(--ink-3); }
.pw.t-terra { background:#CF7043;        color:#241105; }
.pw.t-plum  { background:#3E2F1E;        color:var(--cream); }   /* brun espresso (chaud, non-rouge) */

/* Vraie affiche TMDB, traitée « sérigraphie » (désaturée + chaude + trame + scrim encre) */
.pw.has-img { color:var(--cream); }
.pw.has-img .pw-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:grayscale(.5) contrast(1.08) sepia(.24) brightness(.94); }
.pw.has-img::before { z-index:1; opacity:.32; color:#EAD9B0; }                 /* trame halftone sur la photo */
.pw.has-img::after  { content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(20,12,2,.12) 0%, rgba(20,12,2,.74) 100%); } /* scrim bas pour lisibilité */
.pw.has-img .cd, .pw.has-img .stars { z-index:3; }
.pw.has-img .cd { background:rgba(20,12,2,.45); }

/* ============================================================
   5) MIGRATION — bande OR pleine (le gros aplat)
   ============================================================ */
.promo { background:var(--gold); color:var(--on-gold); border-bottom:var(--bd); padding:var(--section) 0; }
.promo-in { display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between; }
.promo h2 { font-size:clamp(1.9rem,4.4vw,3.1rem); max-width:16ch; color:var(--on-gold); }
.promo p { margin:12px 0 0; color:var(--ink-3); max-width:38ch; }

/* ============================================================
   6) WAITLIST
   ============================================================ */
.join { padding:var(--section) 0; text-align:center; }
.join h2 { font-size:clamp(2.1rem,5.4vw,3.4rem); max-width:15ch; margin:0 auto 14px; }
.join .sub { color:var(--muted); max-width:46ch; margin:0 auto 30px; font-size:1.06rem; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.waitlist { max-width:540px; margin:0 auto; text-align:left; }
.waitlist-label { display:block; font-family:var(--font-display); font-weight:700; font-size:.94rem; margin:0 0 8px 2px; }
.waitlist-row { display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; }
.waitlist input[type="email"] { flex:1 1 260px; min-width:0; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--field); border:var(--bd); border-radius:var(--radius-full); padding:14px 20px; min-height:54px; }
.waitlist input[type="email"]::placeholder { color:var(--muted); }
.waitlist input[type="email"]:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.waitlist input[type="email"]:user-invalid { box-shadow:0 0 0 3px rgba(200,30,66,.35); }
.waitlist .btn { flex:0 0 auto; min-height:54px; position:relative; }
.waitlist .btn:disabled { cursor:progress; }
.waitlist .btn:disabled .btn-label { visibility:hidden; }
.waitlist .btn:disabled::after { content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--on-gold); border-right-color:transparent; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.waitlist-status { min-height:1.3em; margin:16px 2px 0; font-size:.95rem; font-weight:600; }
.waitlist-status[data-kind="success"]::before { content:"✓"; margin-right:.4em; }
.waitlist-status[data-kind="error"] { color:var(--danger); }
.waitlist-fine { color:var(--muted); font-size:.82rem; margin:10px 2px 0; }

/* ---------- Pied de page ---------- */
footer { background:var(--ink); color:var(--cream); border-top:var(--bd); padding:52px 0; }
footer a { color:var(--cream); text-decoration-color:var(--gold); }
.foot { display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start; }
.foot .brand { color:var(--cream); }
.foot p { color:var(--muted-ink); font-size:.85rem; margin:8px 0 0; max-width:34ch; }
.foot-links { display:flex; flex-direction:column; gap:8px; }
.foot-links a { font-size:.9rem; }
.attrib { color:#8B8576; font-size:.75rem; margin-top:24px; }
.attrib a { color:var(--muted-ink); }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  :root { --section:64px; }
  .hero-grid { grid-template-columns:1fr; gap:34px; }
  .hero-bg { display:none; }
  .hero-art { min-height:340px; }
  .mode-row { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .nav-links a { padding:6px 9px; font-size:.82rem; }
  .hero { padding:44px 0 52px; }
  .promo-in { flex-direction:column; align-items:flex-start; }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
  .js .reveal { opacity:1 !important; transform:none !important; }
  .ticker-track, .pwall-row, .hero-col { animation:none !important; }
  .hero h1 .hl { background-size:100% 100% !important; animation:none !important; }
  .btn:hover, .pw:hover { transform:none !important; }
  .hero-art:hover .feat { transform:rotate(3deg) !important; }
  .cmt:hover { transform:rotate(-4deg) !important; }
  .mode, .mode:hover { transform:none !important; }
  .mode:hover .mode-emblem { transform:none !important; }
  .waitlist .btn:disabled .btn-label { visibility:visible !important; }
  .waitlist .btn:disabled::after { display:none !important; }
}