/* ============================================================
   LES 24 ANS DE JEAN. Hollywood Glamour
   Palette : noir profond, cramoisi, or champagne
   ============================================================ */

:root {
  --noir: #0a0508;
  --noir-2: #140a0e;
  --noir-3: #1d0f14;
  --cramoisi: #a3122a;
  --cramoisi-vif: #d4173a;
  --or: #e3b04b;
  --or-clair: #f5d78e;
  --or-pale: #fbeecb;
  --ivoire: #f7ecd9;
  --ivoire-60: rgba(247, 236, 217, 0.6);
  --ivoire-35: rgba(247, 236, 217, 0.35);
  --sw-jaune: #ffe81f;
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Jost", sans-serif;
  --font-sw: "Anton", sans-serif;
  --font-jp: "Rowdies", cursive;
  --font-bttf: "Archivo Black", sans-serif;
  --font-marquee: "Bungee Shade", cursive;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; font-size: clamp(16px, 15px + 0.25vw, 19px); overflow-x: hidden; }

body {
  background: var(--noir);
  color: var(--ivoire);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: var(--cramoisi); color: var(--or-pale); }

/* ---------- Grain de pellicule global ---------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 3%); }
  50% { transform: translate(3%, -2%); }
  75% { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}

/* ---------- Typographie utilitaire ---------- */
.kicker {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--or);
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
.kicker::before, .kicker::after {
  content: "";
  display: block;
  width: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or));
}
.kicker::after { background: linear-gradient(90deg, var(--or), transparent); }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 7.5vw, 5.6rem);
  letter-spacing: 0.03em;
  line-height: 1.16;
  margin: 1.1rem 0 0;
  text-transform: uppercase;
  background: linear-gradient(175deg, var(--or-pale) 20%, var(--or) 55%, #b98428 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Les révélations au scroll sont pilotées par GSAP (voir main.js).
   Sans JS, tout le contenu reste visible par défaut. */

/* ============================================================
   HERO
   ============================================================ */
/* Barre de progression du scroll */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, #b98428, var(--or), var(--or-clair));
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  box-shadow: 0 0 12px rgba(227, 176, 75, 0.7);
}

/* Le hero est épinglé par GSAP ScrollTrigger : on scrolle « à travers » lui */
.hero-wrap { position: relative; }
.hero {
  position: relative;
  height: 100svh; /* repli pour les navigateurs sans support de dvh */
  height: 100dvh; /* suit la vraie hauteur visible quand la barre d'adresse mobile se rétracte au scroll */
  min-height: 620px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  will-change: transform;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  animation: hero-zoom 2.6s var(--ease-out) forwards;
}
@keyframes hero-zoom { to { transform: scale(1.02); } }
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,5,8,0.72) 0%, rgba(10,5,8,0.25) 26%, rgba(10,5,8,0.3) 55%, rgba(10,5,8,0.85) 100%),
    radial-gradient(ellipse 66% 50% at 50% 46%, rgba(10, 5, 8, 0.55), transparent 74%),
    radial-gradient(ellipse 90% 70% at 50% 42%, transparent 30%, rgba(10, 5, 8, 0.75) 100%);
}
/* Barres cinémascope : présentes au départ, se referment en fin de zoom */
/* Générique façon bas d'affiche */
.hero__credits {
  position: absolute;
  bottom: 8.1vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: min(760px, 76vw);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.4vw, 0.8rem);
  letter-spacing: 0.2em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--ivoire-35);
  opacity: 0;
  animation: fade-up 1.2s var(--ease-out) 2.3s forwards;
}
.hero__credits strong { color: var(--or); font-weight: 400; }

/* ---------- Écran de chargement (avant le "3-2-1") ---------- */
.preloader {
  position: fixed; inset: 0;
  z-index: 10010; /* au-dessus du clap-overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  background: var(--noir);
  transition: opacity 0.5s ease, visibility 0.5s;
}
body.preload-done .preloader { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__reel {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(227, 176, 75, 0.22);
  border-top-color: var(--or);
  animation: preloader-spin 0.9s linear infinite;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }
.preloader__label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ivoire-60);
}

/* ---------- Clap de cinéma à l'ouverture ---------- */
.clap-overlay {
  position: fixed; inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, #1a0d12, #050304 80%);
  transition: opacity 0.7s ease, visibility 0.7s;
}
body.clap-done .clap-overlay { opacity: 0; visibility: hidden; pointer-events: none; }

/* Compte à rebours façon amorce de bobine (film leader) */
.leader {
  position: relative;
  width: min(400px, 76vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: leader-in 0.4s var(--ease-out) both;
}
@keyframes leader-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.leader__cross::before, .leader__cross::after {
  content: "";
  position: fixed;
  background: rgba(247, 236, 217, 0.09);
}
.leader__cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.leader__cross::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.leader__ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(227, 176, 75, 0.55);
}
.leader__ring--outer { inset: 0; }
.leader__ring--inner { inset: 9%; border-color: rgba(227, 176, 75, 0.3); border-width: 1px; }
.leader__sweep {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: conic-gradient(rgba(247, 236, 217, 0.09) 0 180deg, transparent 180deg);
  animation: leader-spin 0.55s linear infinite;
}
@keyframes leader-spin { to { transform: rotate(360deg); } }
.leader__num {
  /* Centrage absolu plutôt que grid : ".leader__cross" est aussi un item
     de la grille (position statique), ce qui décalait le chiffre du
     centre réel du cercle au lieu de l'y superposer. */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(9rem, 26vw, 14rem);
  line-height: 1;
  color: var(--or-pale);
  text-shadow: 0 0 40px rgba(227, 176, 75, 0.35);
}
.leader__label {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ivoire-35);
}
.leader__label,
.clap-overlay { flex-direction: column; }
.clap-overlay { display: flex; align-items: center; justify-content: center; }
.clap-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 46%, #fff8e6, rgba(255, 248, 230, 0) 68%);
  opacity: 0;
  animation: clap-flash 0.5s ease-out 1.62s;
}
@keyframes clap-flash {
  0% { opacity: 0; }
  18% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* ---------- Projecteurs animés du hero ---------- */
.hero__beams {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
}
.hero__beams::before, .hero__beams::after {
  content: "";
  position: absolute;
  bottom: -12%;
  width: 130px; height: 130%;
  background: linear-gradient(180deg, rgba(255, 244, 214, 0) 0%, rgba(255, 244, 214, 0.16) 45%, rgba(255, 244, 214, 0.02) 100%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  transform-origin: 50% 100%;
}
.hero__beams::before {
  left: 16%;
  animation: beam-sweep-a 8.5s ease-in-out infinite alternate;
}
.hero__beams::after {
  right: 16%;
  animation: beam-sweep-b 9.5s ease-in-out infinite alternate;
}
@keyframes beam-sweep-a {
  from { transform: rotate(-24deg); }
  to   { transform: rotate(18deg); }
}
@keyframes beam-sweep-b {
  from { transform: rotate(22deg); }
  to   { transform: rotate(-16deg); }
}

/* ---------- Bouton musique + curseur de volume ---------- */
.sound-widget {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sound-toggle {
  height: 52px;
  padding: 0 1.2rem 0 1rem;
  border-radius: 26px;
  border: 1px solid rgba(227, 176, 75, 0.5);
  background: rgba(10, 5, 8, 0.82);
  backdrop-filter: blur(8px);
  color: var(--or);
  font-size: 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s, transform 0.2s, opacity 0.3s;
}
/* Curseur de volume : le conteneur gère l'apparition (largeur/opacité) —
   l'input natif garde une taille fixe, plus fiable selon les navigateurs. */
.sound-volume-wrap {
  box-sizing: border-box;
  width: 0;
  height: 42px;
  padding: 0;
  border-radius: 21px;
  border: 1px solid rgba(227, 176, 75, 0.5);
  background: rgba(10, 5, 8, 0.82);
  backdrop-filter: blur(8px);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  transition: width 0.35s var(--ease-out), padding 0.35s var(--ease-out), opacity 0.25s;
}
.sound-widget.vol-open .sound-volume-wrap {
  width: 110px;
  padding: 0 0.9rem;
  opacity: 1;
  pointer-events: auto;
}
.sound-volume {
  width: 100%;
  height: 42px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.sound-volume::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(227, 176, 75, 0.28);
  border-radius: 2px;
}
.sound-volume::-moz-range-track {
  height: 3px;
  background: rgba(227, 176, 75, 0.28);
  border-radius: 2px;
}
.sound-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--or-pale);
  box-shadow: 0 0 8px rgba(227, 176, 75, 0.6);
  cursor: pointer;
}
.sound-volume::-moz-range-thumb {
  width: 14px; height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--or-pale);
  box-shadow: 0 0 8px rgba(227, 176, 75, 0.6);
  cursor: pointer;
}
.sound-widget.no-file .sound-volume-wrap { display: none; }
.sound-toggle__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivoire-60);
}
.sound-toggle.is-on .sound-toggle__label { color: var(--or-pale); }
.sound-toggle.no-file { opacity: 0.45; }
.sound-toggle:hover { transform: scale(1.06); border-color: var(--or); }
.sound-toggle .sound-toggle__ico { position: relative; }
/* Éteint : note barrée */
.sound-toggle:not(.is-on) .sound-toggle__ico::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px; top: 50%;
  height: 2px;
  background: var(--cramoisi-vif);
  transform: rotate(-40deg);
}
.sound-toggle.is-on {
  color: var(--or-pale);
  border-color: var(--or);
  box-shadow: 0 0 22px rgba(227, 176, 75, 0.45);
}
/* Invitation discrète quand la section spatiale démarre sans le son */
.sound-toggle.attention { animation: sound-pulse 1.4s ease-out infinite; }
@keyframes sound-pulse {
  0% { box-shadow: 0 0 0 0 rgba(227, 176, 75, 0.55); }
  100% { box-shadow: 0 0 0 20px rgba(227, 176, 75, 0); }
}

/* ---------- Canvas confettis ---------- */
.confetti-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 9990;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  will-change: transform, opacity;
}
.hero__presente {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--or-clair);
  opacity: 0;
  animation: fade-up 1.2s var(--ease-out) 0.9s forwards;
}
/* Titre massif façon affiche de blockbuster */
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(5rem, 19vw, 17rem);
  line-height: 0.82;
  margin: 1.6rem 0 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.hero__title .line { display: block; overflow: hidden; padding: 0.04em 0; }
.hero__title .line span {
  display: inline-block;
  transform: translateY(112%);
  animation: line-up 1.1s var(--ease-out) forwards;
  color: var(--or-clair);
  text-shadow:
    0 4px 2px rgba(0, 0, 0, 0.75),
    0 16px 44px rgba(0, 0, 0, 0.65);
}
.hero__title .line:nth-child(1) span { animation-delay: 1.12s; }
.hero__title .line:nth-child(2) span { animation-delay: 1.34s; }
@keyframes line-up { to { transform: translateY(0); } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__tagline {
  font-size: clamp(0.85rem, 1.9vw, 1.15rem);
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ivoire);
  opacity: 0;
  animation: fade-up 1.2s var(--ease-out) 1.8s forwards;
}
.hero__tagline em {
  font-style: normal;
  color: var(--or-clair);
  font-weight: 500;
}

.hero__scrollcue {
  position: absolute;
  right: 2rem;
  bottom: 8.4vh;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ivoire-60);
  text-decoration: none;
  opacity: 0;
  animation: fade-up 1s var(--ease-out) 2.6s forwards;
}
/* Quand GSAP gère le hero, il pilote lui-même l'apparition et la
   disparition au scroll de .hero__credits/.hero__scrollcue (voir main.js).
   La version CSS ferait doublon — pire, un ScrollTrigger.refresh() (déclenché
   par le chargement des photos en arrière-plan) redémarre l'animation native
   à zéro, ce qui pouvait laisser le texte invisible après un retour en haut
   de page pendant que les photos chargeaient encore. */
.hero.js-managed .hero__credits,
.hero.js-managed .hero__scrollcue,
.hero.js-managed .hero__presente,
.hero.js-managed .hero__tagline,
.hero.js-managed .hero__title .line span {
  animation: none;
}
.hero__scrollcue .wheel {
  width: 1px; height: 52px;
  background: linear-gradient(180deg, var(--or), transparent);
  position: relative;
  overflow: hidden;
}
@media (max-width: 860px) {
  .hero__scrollcue { display: none; }
  .hero__credits { font-size: 0.56rem; width: 82vw; }
}
.hero__scrollcue .wheel::after {
  content: "";
  position: absolute; top: -20px; left: 0;
  width: 1px; height: 20px;
  background: var(--or-pale);
  animation: drip 1.8s ease-in-out infinite;
}
@keyframes drip { to { top: 62px; } }

/* ============================================================
   BANDEAU DÉFILANT
   ============================================================ */
.marquee {
  position: relative;
  padding: 1.05rem 0;
  margin: -2.4rem 0;
  background: linear-gradient(90deg, #6d0a1a, var(--cramoisi) 30%, #6d0a1a 70%, #4a0611);
  border-top: 1px solid rgba(227, 176, 75, 0.55);
  border-bottom: 1px solid rgba(227, 176, 75, 0.55);
  overflow: hidden;
  transform: rotate(-1.2deg) scale(1.02);
  z-index: 3;
}
.marquee__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--or-pale);
  white-space: nowrap;
}
.marquee__track span::after {
  content: "★";
  margin-left: 3.5rem;
  color: var(--or);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   SECTIONS COMMUNES
   ============================================================ */
.section {
  position: relative;
  padding: clamp(5rem, 11vw, 9rem) 1.5rem;
}
.section__inner {
  max-width: min(1500px, 94vw);
  margin: 0 auto;
}
.section__head {
  text-align: center;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.section__lead {
  max-width: 1200px;
  margin: 1.6rem auto 0;
  color: var(--ivoire-60);
  font-size: 1.2rem;
  font-weight: 300;
}
.section__lead strong { color: var(--or-clair); font-weight: 500; }

/* ============================================================
   THÈME. DUOS
   ============================================================ */
.theme {
  background:
    linear-gradient(180deg, var(--noir) 0%, rgba(10, 5, 8, 0) 16%),
    radial-gradient(ellipse 60% 45% at 18% 8%, rgba(163, 18, 42, 0.22), transparent 65%),
    radial-gradient(ellipse 55% 40% at 85% 90%, rgba(227, 176, 75, 0.08), transparent 60%),
    var(--noir-2);
  padding-top: clamp(7rem, 13vw, 11rem);
}
.theme__rule {
  max-width: 1200px;
  margin: 0 auto 3.5rem;
  padding: 1.8rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(227, 176, 75, 0.3);
  background: linear-gradient(135deg, rgba(227,176,75,0.07), rgba(163,18,42,0.09));
  position: relative;
}
.theme__rule::before, .theme__rule::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--or);
}
.theme__rule::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.theme__rule::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.theme__rule p { color: var(--ivoire); font-size: 1.02rem; }
.theme__rule p strong { color: var(--or-clair); font-weight: 600; }

/* ---------- LE CASTING : pellicule 35mm horizontale ---------- */
.casting {
  overflow: hidden;
  width: 100vw;
  margin: 1.5rem 0 4rem calc(50% - 50vw);
}
.casting__strip {
  display: flex;
  align-items: stretch;
  gap: 0.8rem;
  width: 100%;
  padding: 36px 0;
  background: #0c0609;
  border-top: 1px solid rgba(227, 176, 75, 0.22);
  border-bottom: 1px solid rgba(227, 176, 75, 0.22);
  position: relative;
}
/* Perforations de pellicule : deux bandes continues, au-dessus et en dessous
   des photogrammes (jamais dans les interstices) */
.casting__strip::before, .casting__strip::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 16px;
  background: repeating-linear-gradient(90deg,
    transparent 0 14px, rgba(247, 236, 217, 0.15) 14px 32px, transparent 32px 46px);
  pointer-events: none;
}
.casting__strip::before { top: 17px; }
.casting__strip::after  { bottom: 17px; }
.casting__cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #1a0c11, #10070a 75%);
  border: 1px solid rgba(247, 236, 217, 0.1);
  padding: 8px 8px 1.4rem;
  transition: border-color 0.4s, transform 0.4s var(--ease-out);
}
/* Bouts de pellicule "1" et "5" tronqués aux deux extrémités : suggère que
   la bande continue et boucle, sans avoir de vrai défilement. */
.casting__cell--ghost {
  flex: 0 0 30px;
  width: 30px;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
}
.casting__cell--ghost .casting__univers,
.casting__cell--ghost .casting__noms,
.casting__cell--ghost .casting__note {
  display: none;
}
@media (max-width: 700px) {
  /* Vrai carrousel défilant au doigt sur mobile (contrairement au reste du
     site, ce scroll horizontal-là est volontaire). */
  .casting { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .casting__strip { width: max-content; padding: 36px 1rem; }
  .casting__cell { flex: 0 0 auto; width: min(220px, 60vw); }
  .casting__cell--ghost { display: none; }
}
.casting__cell:hover {
  border-color: rgba(227, 176, 75, 0.55);
  transform: translateY(-6px);
}
.casting__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #2a1218, #150a0e 75%);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.casting__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.casting__photo img[data-missing] { display: none; }
.casting__ph {
  text-align: center;
  padding: 1rem;
  color: var(--ivoire-35);
  font-size: 0.85rem;
}
.casting__ph .ph-ico { font-size: 1.7rem; display: block; margin-bottom: 0.5rem; }
.casting__ph .ph-file {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.22rem 0.6rem;
  border: 1px dashed rgba(227, 176, 75, 0.4);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--or);
}
.casting__univers {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cramoisi-vif);
  padding: 0 0.6rem;
}
.casting__noms {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--or-pale);
  margin: 0.35rem 0 0.35rem;
  padding: 0 0.6rem;
  line-height: 1.05;
}
.casting__note {
  font-size: 0.85rem;
  color: var(--ivoire-60);
  padding: 0 0.6rem;
  min-height: 3.2em;
}
.duos__footnote {
  text-align: center;
  margin-top: 2.6rem;
  color: var(--ivoire-60);
  font-size: 0.95rem;
}
.duos__footnote strong { color: var(--or-clair); font-weight: 500; }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline-section {
  background:
    radial-gradient(ellipse 70% 50% at 80% 12%, rgba(163, 18, 42, 0.16), transparent 60%),
    var(--noir);
}

/* ============================================================
   TIMELINE INTERSTELLAR
   Voyage spatial : tes photos flottent et défilent vers la caméra
   au rythme du scroll ; la souris permet de "regarder autour".
   ============================================================ */
.timeline {
  position: relative;
}

/* Année géante en fond, change à chaque époque traversée */
.tl-space__year {
  display: none;
}
.timeline.tl-3d {
  height: 100vh;
  height: 100svh; /* repli pour les navigateurs sans support de dvh */
  height: 100dvh; /* suit la vraie hauteur visible quand la barre d'adresse mobile se rétracte au scroll */
  min-height: 640px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  perspective: 1150px;
  overflow: hidden;
}
.timeline.tl-3d .tl-space__year {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(10rem, 36vw, 32rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(227, 176, 75, 0.16);
  pointer-events: none;
  z-index: 0;
}

/* Légende centrale (acte + description), mise à jour par époque */
.tl-caption {
  display: none;
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  width: min(560px, 84vw);
  pointer-events: none;
}
.timeline.tl-3d .tl-caption { display: block; }
.tl-caption__chapitre {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--cramoisi-vif);
  margin-bottom: 0.6rem;
}
.tl-caption__desc {
  color: var(--ivoire-60);
  font-size: 1rem;
}

/* Caméra : conteneur qui reçoit le décalage de parallax souris */
.tl-space-camera {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform;
}

/* ---------- Chaque photo flottante ---------- */
.tl-photo {
  position: absolute;
  top: 50%; left: 50%;
  width: min(240px, 56vw);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  visibility: hidden;
}
.tl-photo__frame {
  background: linear-gradient(170deg, #1c0d13, #120709);
  border: 1px solid rgba(227, 176, 75, 0.4);
  outline: 1px solid rgba(227, 176, 75, 0.15);
  outline-offset: 5px;
  padding: 9px 9px 0;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.9);
}
.tl-photo__inner {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #2a1218, #150a0e 75%);
  display: grid;
  place-items: center;
}
.tl-photo__inner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Placeholder : dossier d'année vide ou PHP indisponible (ex. en local) */
.tl-photo--placeholder .tl-photo__inner {
  text-align: center;
  padding: 1rem;
  color: var(--ivoire-35);
}
.tl-photo--placeholder .ph-ico {
  font-size: 1.9rem;
  display: block;
  margin-bottom: 0.6rem;
  color: rgba(227, 176, 75, 0.45);
}
.tl-photo--placeholder .ph-file {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.25rem 0.7rem;
  border: 1px dashed rgba(227, 176, 75, 0.4);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--or);
}

/* ---------- Repli accessible : sans GSAP ou motion réduit ----------
   Simple grille au fil de l'eau, chaque photo garde son année. */
.timeline.tl-flat {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1rem;
}
.timeline.tl-flat .tl-space__year,
.timeline.tl-flat .tl-caption { display: none; }
.timeline.tl-flat .tl-space-camera {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}
/* Chaque époque garde son titre + sa description façon récit de film,
   comme sur grand écran — juste sans le zoom/épinglage 3D. */
.tl-flat__group { text-align: center; }
.tl-flat__roman {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10vw, 3.6rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(227, 176, 75, 0.4);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.tl-flat__chapitre {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--cramoisi-vif);
  margin-bottom: 0.6rem;
}
.tl-flat__desc {
  color: var(--ivoire-60);
  font-size: 1rem;
  max-width: 480px;
  margin: 0 auto 1.6rem;
}
.tl-flat__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
}
.timeline.tl-flat .tl-photo {
  position: static;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  width: 200px;
}
/* Le bouton du mur est normalement positionné en absolu par rapport à la
   section 3D plein écran — en mode simple (plus haut, empilé), il doit
   suivre le flux normal du document, sous les photos par époque. */
.timeline.tl-flat .tl-album-btn {
  position: static;
  transform: none;
  display: flex;
  margin: 1rem auto 0;
  width: fit-content;
}

/* ---------- Bouton « Visiter l'album photo » ---------- */
.tl-album-btn {
  position: absolute;
  left: 50%; bottom: 2.5%;
  transform: translateX(-50%) translateY(14px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.3rem;
  border-radius: 0;
  border: 1px solid rgba(227, 176, 75, 0.6);
  background: linear-gradient(120deg, #8e0e22, var(--cramoisi-vif) 50%, #8e0e22);
  background-size: 200% 100%;
  color: var(--or-pale);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), background-position 0.6s, box-shadow 0.4s;
}
.tl-album-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.tl-album-btn:hover {
  background-position: 100% 0;
  box-shadow: 0 0 34px rgba(212, 23, 58, 0.45);
}

/* ---------- Mur de photos : tableau de liège, navigation en cliquer-glisser ---------- */
.photo-wall {
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: #6b4a30;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.photo-wall.is-open { opacity: 1; visibility: visible; }
.photo-wall__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}
/* Vignette cinématique par-dessus le liège, sans ajouter de markup */
.photo-wall__viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 45%, rgba(10, 5, 8, 0.6) 100%);
}
.photo-wall__canvas {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
  cursor: grab;
}
.photo-wall__canvas.is-dragging { cursor: grabbing; }
.photo-wall__tile {
  position: absolute;
  top: 0; left: 0;
  background-color: #b98a52; /* repli si la photo de liège ne charge pas */
  background-repeat: repeat;
}
.photo-wall__strings {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  pointer-events: none;
}
.photo-wall__string {
  fill: none;
  stroke: #9b1c1c;
  stroke-width: 2;
  opacity: 0.55;
}
.photo-wall__cell {
  position: absolute;
  width: min(190px, 22vw);
  background: linear-gradient(170deg, #1c0d13, #120709);
  border: 1px solid rgba(227, 176, 75, 0.4);
  padding: 8px;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.85);
  user-select: none;
}
.photo-wall__cell::before {
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  width: 14px; height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff7a6b, #7c1414 75%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  z-index: 2;
}
.photo-wall__cell-inner {
  position: relative;
  min-height: 60px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #2a1218, #150a0e 75%);
}
.photo-wall__cell-inner img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
.photo-wall__close {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  z-index: 2;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(227, 176, 75, 0.5);
  background: rgba(10, 5, 8, 0.82);
  color: var(--or-pale);
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 0.3s, transform 0.2s;
}
.photo-wall__close:hover { border-color: var(--or); transform: scale(1.08); }
.photo-wall__hint {
  position: absolute;
  bottom: 1.6rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivoire-35);
  pointer-events: none;
}
@media (max-width: 720px) {
  .photo-wall__cell { width: min(150px, 40vw); }
  .tl-album-btn { font-size: 0.85rem; padding: 0.85rem 1.4rem; }
}

/* ============================================================
   INFOS & RSVP
   ============================================================ */
.rsvp-section {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 11vw, 9rem) 1.5rem;
}
.rsvp-section__video {
  position: absolute; inset: 0;
  z-index: 0;
}
.rsvp-section__video video,
.rsvp-section__video img.video-fallback {
  width: 100%; height: 100%;
  object-fit: cover;
}
.rsvp-section__video::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--noir) 0%, rgba(10,5,8,0.68) 18%, rgba(10,5,8,0.78) 82%, var(--noir) 100%);
}
.rsvp-section .section__inner { position: relative; z-index: 1; }

.infos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-bottom: 6rem;
}
/* 5 cartes en grille à 2 colonnes : la dernière (nombre impair) est
   centrée sur sa propre ligne plutôt que de s'étirer sur toute la largeur. */
.info-card:last-child {
  grid-column: 1 / -1;
  max-width: calc(50% - 0.55rem);
  margin: 0 auto;
}
@media (max-width: 700px) {
  .infos-grid { grid-template-columns: 1fr; }
  .info-card:last-child { max-width: none; margin: 0; }
}
.info-card {
  padding: 2.3rem 2rem;
  background: rgba(10, 5, 8, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(227, 176, 75, 0.28);
  transition: border-color 0.4s, transform 0.4s var(--ease-out);
}
.info-card:hover { border-color: rgba(227, 176, 75, 0.65); transform: translateY(-4px); }
.info-card__ico { font-size: 2rem; display: block; margin-bottom: 1rem; }
.info-card__label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.6rem;
}
.info-card__value {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ivoire);
  line-height: 1.25;
  overflow-wrap: anywhere; /* évite qu'une adresse mail sans espaces déborde de la carte */
}
.info-card__value a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(227,176,75,0.5); }
.info-card__value a:hover { color: var(--or-clair); }
.info-card__note { font-size: 0.98rem; color: var(--ivoire-60); margin-top: 0.7rem; }
.info-card__note a { color: var(--or-clair); text-decoration: none; border-bottom: 1px solid rgba(227,176,75,0.5); }
.info-card__note a:hover { color: var(--or-pale); }
.placeholder-chip {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px dashed rgba(227, 176, 75, 0.5);
  color: var(--or-clair);
  font-size: 0.82em;
  letter-spacing: 0.06em;
}

/* ---------- Formulaire ---------- */
.rsvp-form {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: rgba(10, 5, 8, 0.8);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(227, 176, 75, 0.35);
  position: relative;
}
.rsvp-form::before {
  content: "LA LISTE";
  position: absolute;
  top: -0.85rem; left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 1.2rem;
  background: var(--cramoisi);
  color: var(--or-pale);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.6rem;
}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 1rem 1.1rem;
  background: rgba(247, 236, 217, 0.045);
  border: 1px solid rgba(247, 236, 217, 0.18);
  color: var(--ivoire);
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 300;
  transition: border-color 0.3s, background 0.3s;
  border-radius: 0;
  -webkit-appearance: none;
}
.field select option { background: var(--noir-2); color: var(--ivoire); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--or);
  background: rgba(227, 176, 75, 0.07);
}
.field textarea { resize: vertical; min-height: 90px; }

.presence-toggle { display: flex; gap: 0.8rem; }
.presence-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.presence-toggle label {
  flex: 1;
  margin: 0;
  padding: 0.9rem 0.5rem;
  text-align: center;
  border: 1px solid rgba(247, 236, 217, 0.18);
  cursor: pointer;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--ivoire-60);
  transition: all 0.3s;
  user-select: none;
}
.presence-toggle input:checked + label {
  border-color: var(--or);
  background: linear-gradient(160deg, rgba(227,176,75,0.16), rgba(163,18,42,0.2));
  color: var(--or-pale);
}
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.btn-submit {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 1.1rem;
  background: linear-gradient(120deg, #8e0e22, var(--cramoisi-vif) 50%, #8e0e22);
  background-size: 200% 100%;
  border: 1px solid rgba(227, 176, 75, 0.6);
  color: var(--or-pale);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-position 0.6s, box-shadow 0.4s, transform 0.2s;
}
.btn-submit:hover {
  background-position: 100% 0;
  box-shadow: 0 0 34px rgba(212, 23, 58, 0.45);
  transform: translateY(-2px);
}
.btn-submit:active { transform: translateY(0); }
.btn-submit[disabled] { opacity: 0.55; cursor: wait; }
.btn-submit__short { display: none; }

.form-status {
  margin-top: 1.2rem;
  text-align: center;
  font-size: 0.95rem;
  min-height: 1.4em;
}
.form-status.ok  { color: var(--or-clair); }
.form-status.err { color: #ff8095; }

.form-confirm-photo {
  max-width: 220px;
  max-height: 0;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), max-height 0.6s var(--ease-out), margin 0.6s var(--ease-out);
}
.form-confirm-photo.is-visible {
  max-height: 400px;
  margin: 1.4rem auto 0;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.form-confirm-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(227, 176, 75, 0.45);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.85);
}
.form-confirm-photo p {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--or-clair);
}

/* ---------- Liste des inscrits ---------- */
.guest-list {
  max-width: 560px;
  margin: 2rem auto 0;
  text-align: center;
}
.guest-list__toggle {
  background: none;
  border: 1px solid rgba(227, 176, 75, 0.5);
  color: var(--or-clair);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
.guest-list__toggle:hover {
  border-color: var(--or);
  color: var(--or-pale);
  background-color: rgba(227, 176, 75, 0.08);
}
.guest-list__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  padding: 0 1.6rem;
  background: rgba(10, 5, 8, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid transparent;
  text-align: left;
  transition: max-height 0.5s var(--ease-out), opacity 0.4s, margin-top 0.4s, padding 0.4s, border-color 0.4s;
}
.guest-list__panel.is-open {
  max-height: 600px;
  overflow-y: auto;
  opacity: 1;
  margin-top: 1.4rem;
  padding: 1.6rem;
  border-color: rgba(227, 176, 75, 0.28);
}
.guest-list__status {
  color: var(--ivoire-60);
  font-size: 0.95rem;
  text-align: center;
}
/* Façon liste d'invités officielle / feuille de plateau : chaque nom
   numéroté, séparé par un fin trait doré. */
.guest-list__names {
  list-style: none;
  counter-reset: guest-count;
}
.guest-list__names li {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(227, 176, 75, 0.16);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: var(--or-pale);
  text-transform: uppercase;
}
.guest-list__names li:last-child { border-bottom: none; }
.guest-list__names li::before {
  counter-increment: guest-count;
  content: counter(guest-count, decimal-leading-zero);
  flex: 0 0 auto;
  min-width: 1.8em;
  text-align: right;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--cramoisi-vif);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
  border-top: 1px solid rgba(227, 176, 75, 0.18);
  background: var(--noir-2);
}
.footer__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--or);
  letter-spacing: 0.25em;
  font-size: 0.95rem;
}
.footer__credits {
  margin-top: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivoire-35);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .timeline.tl-3d .tl-photo { width: min(190px, 62vw); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   TITRES DE SECTION. typos cultes du cinéma
   ============================================================ */
.section-title.title-sw {
  font-family: var(--font-sw);
  font-weight: 400;
  letter-spacing: 0.03em;
  background: none;
  -webkit-text-fill-color: var(--sw-jaune);
  color: var(--sw-jaune);
  text-shadow: 0 0 30px rgba(255, 232, 31, 0.35), 0 3px 0 rgba(0, 0, 0, 0.85);
  text-transform: uppercase;
}
.section-title.title-jp {
  font-family: var(--font-jp);
  font-weight: 700;
  background: none;
  -webkit-text-fill-color: #f3e6c8;
  color: #f3e6c8;
  text-shadow: 3px 3px 0 #7c0c1e, 6px 6px 0 rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}
/* NB : pas de background-clip:text ici. le titre est découpé en lettres
   par SplitText et le clip rendrait chaque lettre invisible. */
.section-title.title-bttf {
  font-family: var(--font-bttf);
  font-style: italic;
  display: block;
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.18;
  background: none;
  color: #ffa02e;
  -webkit-text-fill-color: #ffa02e;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.85),
    0 0 26px rgba(255, 122, 26, 0.35);
  text-transform: uppercase;
}

/* ============================================================
   COMPTE À REBOURS J-XX
   ============================================================ */
.countdown {
  text-align: center;
  margin: 0 auto 3.5rem;
  max-width: 640px;
  padding: 1.8rem 1.5rem 1.6rem;
  background: rgba(10, 5, 8, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(227, 176, 75, 0.3);
}
.countdown__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.1rem;
}
.countdown__grid {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 3vw, 1.8rem);
}
.countdown__cell { min-width: 64px; }
.countdown__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1;
  color: var(--or-pale);
  text-shadow: 0 0 22px rgba(227, 176, 75, 0.35);
  font-variant-numeric: tabular-nums;
}
.countdown__unit {
  margin-top: 0.4rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ivoire-35);
}
.countdown__note { margin-top: 1rem; font-size: 0.85rem; color: var(--ivoire-60); }
.countdown.is-live .countdown__note { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  html { scroll-behavior: auto; font-size: clamp(16px, 15px + 0.25vw, 19px); overflow-x: hidden; }
  .hero-wrap { height: auto; }
  .hero { position: relative; }
}

/* ============================================================
   RESPONSIVE (retouches mobile)
   ============================================================ */
@media (max-width: 1023px) {
  /* Pas de sauts de ligne forcés : le texte s'enroule tout seul */
  br { display: none; }

  /* La phrase sous le clap d'ouverture prend trop de place en mobile */
  .leader__label { display: none; }

  /* Bouton + légende Interstellar remontés pour ne pas croiser le
     bouton son (bas droite), surtout quand son curseur de volume déplie. */
  .tl-caption { bottom: 30%; }
  .tl-album-btn { bottom: 18%; }

  .sound-toggle { height: 44px; font-size: 1.1rem; padding: 0 1rem 0 0.85rem; }
  .sound-volume-wrap { height: 36px; }
  .sound-widget.vol-open .sound-volume-wrap { width: 84px; }

  /* CTA plus court pour tenir sur une ligne */
  .btn-submit { font-size: 1rem; letter-spacing: 0.15em; padding: 0.9rem; }
  .btn-submit__full { display: none; }
  .btn-submit__short { display: inline; }
}