/* Version « Cabaret » : club des années 80, boule à facettes, néons, enseigne à ampoules.
   Idées reprises de composants 21st.dev (retro grid,
   flip board, border beam, scratch to reveal, confettis), réécrites en CSS/JS natif. */
@property --rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --nuit: #07030f;
  --nuit-2: #140a24;
  --violet: #2a0f4a;
  --magenta: #ff3d8b;
  --rose: #ff7ac6;
  --orange: #ff9a2e;
  --or: #f5c04a;
  --or-clair: #ffe395;
  --or-fonce: #b8862b;
  --creme: #f7e8c8;
  --velours: #7a1430;
  --velours-2: #4a0a1c;
  --velours-clair: #b3213f;
  --velours-ombre: #2a0410;
  --cyan: #59f3ff;
  --lavande: #a45bff;
  --texte: #f7e8c8;
  --texte-doux: #c9b6dc;
  --gouttiere: 16px;
  --f-neon: 'Monoton', 'Bebas Neue', Impact, sans-serif;
  --f-script: 'Mr Dafoe', 'Brush Script MT', cursive;
  --f-titre: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --f-texte: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-vhs: 'VT323', 'Courier New', monospace;
  --bruit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: 19px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
body.en-salle { overflow: hidden; }
a { color: var(--cyan); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ---------- Écran d'accueil : club, boule à facettes, piste de danse ---------- */
.hero {
  --piste: 24svh;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* en haut : la place de la boule ; en bas : la piste de danse reste dégagée */
  padding: calc(84px + env(safe-area-inset-top)) var(--gouttiere) calc(var(--piste) + 10px);
  overflow: hidden;
}
.scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(ellipse 75% 38% at 50% 36%, rgba(164, 91, 255, .3), transparent 70%),
    radial-gradient(ellipse 110% 26% at 50% 80%, rgba(255, 61, 139, .32), transparent 70%),
    linear-gradient(180deg, #06020d 0%, #170828 50%, #34104b 100%);
}

/* Reflets de la boule : des paillettes qui tournent lentement sur les murs */
.paillettes {
  position: absolute;
  left: 50%;
  top: 46px;
  width: 200vmax;
  height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  background-image:
    radial-gradient(2.5px 2.5px at 12% 22%, #fff 50%, transparent),
    radial-gradient(2px 2px at 38% 8%, #ffd6f0 50%, transparent),
    radial-gradient(3px 3px at 64% 34%, #fff 50%, transparent),
    radial-gradient(2px 2px at 86% 14%, #bff8ff 50%, transparent),
    radial-gradient(2.5px 2.5px at 24% 66%, #fff1b8 50%, transparent),
    radial-gradient(2px 2px at 52% 82%, #fff 50%, transparent),
    radial-gradient(3px 3px at 78% 58%, #ffd6f0 50%, transparent),
    radial-gradient(2px 2px at 6% 90%, #bff8ff 50%, transparent);
  background-size: 230px 230px;
  animation: tourne 70s linear infinite, scintille 2.6s ease-in-out infinite alternate;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes scintille { from { opacity: .4; } to { opacity: .9; } }

/* Projecteurs qui balaient la salle depuis le bord de la piste */
.faisceau {
  position: absolute;
  bottom: var(--piste);
  width: 34vmax;
  height: 95vmax;
  margin-left: -17vmax;
  transform-origin: 50% 100%;
  clip-path: polygon(48% 100%, 52% 100%, 100% 0, 0 0);
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: .8;
}
.faisceau-g {
  left: 8%;
  background: linear-gradient(0deg, rgba(255, 61, 139, .55), rgba(255, 61, 139, .1) 55%, transparent 85%);
  animation: balaie-g 7s ease-in-out infinite alternate;
}
.faisceau-d {
  left: 92%;
  background: linear-gradient(0deg, rgba(89, 243, 255, .45), rgba(89, 243, 255, .08) 55%, transparent 85%);
  animation: balaie-d 8.5s ease-in-out -3s infinite alternate;
}
@keyframes balaie-g { from { transform: rotate(-40deg); } to { transform: rotate(16deg); } }
@keyframes balaie-d { from { transform: rotate(40deg); } to { transform: rotate(-16deg); } }

/* La boule à facettes, suspendue au plafond */
.boule {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.boule-fil { width: 2px; height: calc(10px + env(safe-area-inset-top)); background: #9d8bbd; }
.boule-sphere {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, rgba(255, 255, 255, .95) 0 5%, transparent 20%),
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(10, 4, 24, .6) 78%),
    repeating-linear-gradient(90deg, #ece6fb 0 5px, #5d4f80 5px 6px),
    repeating-linear-gradient(0deg, #f6f2ff 0 5px, #43375e 5px 6px);
  background-blend-mode: normal, normal, multiply, normal;
  box-shadow: 0 0 26px rgba(255, 255, 255, .35), 0 0 70px rgba(164, 91, 255, .55);
  animation: facettes 2.4s linear infinite;
}
@keyframes facettes { to { background-position: 0 0, 0 0, 30px 0, 0 0; } }

/* Piste de danse en perspective, les dalles s'allument au hasard */
.piste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--piste);
  overflow: hidden;
  perspective: 420px;
  perspective-origin: 50% 0;
  background: #0b0516;
  border-top: 2px solid rgba(255, 122, 198, .85);
  box-shadow: 0 -4px 30px rgba(255, 61, 139, .55);
}
.dalles {
  position: absolute;
  left: -30%;
  right: -30%;
  top: 0;
  height: 260%;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(var(--cols, 14), 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  transform-origin: 50% 0;
  transform: rotateX(66deg);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 55%, transparent 90%);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 55%, transparent 90%);
}
.dalles i {
  border-radius: 3px;
  background: radial-gradient(circle, rgba(255, 255, 255, .45), transparent 65%), var(--c);
  opacity: .12;
  animation: dalle var(--t) steps(1) var(--d) infinite;
}
@keyframes dalle { 0% { opacity: .85; } 30% { opacity: .12; } }

/* Néon du haut, qui grésille de temps en temps */
.neon-sur {
  margin: 0 0 14px;
  font-family: var(--f-titre);
  font-size: clamp(17px, 4.6vw, 22px);
  letter-spacing: .26em;
  color: #d8fdff;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--cyan), 0 0 22px var(--cyan);
  animation: gresille 5s infinite;
}
@keyframes gresille {
  0%, 61%, 64%, 67%, 100% { opacity: 1; }
  62%, 66% { opacity: .35; }
}

/* L'enseigne à ampoules (comme la v1), en relief : elle se balance toute seule,
   suit la souris sur ordinateur et l'inclinaison du téléphone sur Android. */
.marquise-zone { width: min(100%, 560px); perspective: 900px; animation: flotte 6s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-6px); } }
.marquise {
  position: relative;
  padding: 30px 16px 24px;
  border-radius: 22px;
  border: 3px solid var(--or);
  background: linear-gradient(180deg, rgba(44, 18, 67, .94), rgba(21, 9, 36, .96));
  box-shadow:
    0 0 0 6px #1a0c28,
    0 0 0 8px var(--or-fonce),
    0 0 70px rgba(255, 61, 139, .45),
    inset 0 0 50px rgba(0, 0, 0, .65);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .3s ease-out;
}
.marquise:not(.pilote) { animation: balance 9s ease-in-out infinite; }
@keyframes balance {
  0%, 100% { --rx: 7deg; --ry: -9deg; }
  50% { --rx: -4deg; --ry: 9deg; }
}
.ampoules { position: absolute; inset: 0; pointer-events: none; }
.ampoules i {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe6, var(--or) 60%, var(--or-fonce));
  box-shadow: 0 0 8px 2px rgba(255, 214, 120, .75);
  animation: ampoule 1.1s steps(1) infinite;
}
.ampoules i.b { animation-delay: -.55s; }
@keyframes ampoule {
  0% { opacity: 1; }
  50% { opacity: .22; box-shadow: none; }
}

.logo { margin: 0; line-height: .8; font-weight: 400; transform: translateZ(46px); }
/* Lettres chromées, avec un reflet qui passe de temps en temps */
.logo-chrome {
  display: block;
  font-family: var(--f-titre);
  font-size: clamp(64px, 19vw, 132px);
  letter-spacing: .03em;
  transform: skewX(-8deg);
  color: transparent;
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) no-repeat,
    linear-gradient(180deg, #fff 0%, #dcefff 26%, #8fb4ff 46%, #1b0d3a 50%, #5a2a8a 55%, #ff9de2 74%, #fff 100%);
  background-size: 250% 100%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .55);
  filter: drop-shadow(0 4px 0 #3d1660) drop-shadow(0 0 22px rgba(89, 243, 255, .35));
  animation: reflet-chrome 5s ease-in-out infinite;
}
@keyframes reflet-chrome {
  0%, 55% { background-position: 100% 0, 0 0; }
  100% { background-position: 0% 0, 0 0; }
}
.logo-script {
  display: block;
  margin-top: -.38em;
  font-family: var(--f-script);
  font-size: clamp(58px, 18vw, 112px);
  line-height: 1;
  color: #fff;
  transform: rotate(-7deg);
  text-shadow: 0 0 4px #fff, 0 0 12px var(--magenta), 0 0 28px var(--magenta), 0 0 56px var(--magenta);
  animation: neon 6s infinite;
}
@keyframes neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .45; }
}
.marquise-sous {
  margin: 12px 0 0;
  font-family: var(--f-titre);
  font-size: clamp(14px, 3.8vw, 18px);
  letter-spacing: .14em;
  color: var(--texte-doux);
  transform: translateZ(22px);
}

.hero-bas { padding-top: 26px; }
.hero-prive {
  margin: 0;
  font-family: var(--f-titre);
  font-size: clamp(17px, 4.6vw, 22px);
  letter-spacing: .2em;
  color: #fff;
  text-shadow: 0 2px 10px #000;
}
.hero-titre {
  margin: 4px 0 0;
  font-family: var(--f-titre);
  font-size: clamp(34px, 10vw, 60px);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--creme);
  text-shadow: 0 3px 14px #000;
}
/* « XXX » façon enseigne de club : un néon rouge dont les lettres s'allument à la suite */
.xxx-neon {
  display: inline-flex;
  gap: .05em;
  margin: 0 .06em;
  padding: .04em .16em 0;
  border: 2px solid rgba(255, 70, 100, .95);
  border-radius: 8px;
  color: #ffe3e7;
  box-shadow: 0 0 10px rgba(255, 40, 70, .85), inset 0 0 10px rgba(255, 40, 70, .6);
}
.xxx-neon span {
  text-shadow: 0 0 4px #fff, 0 0 10px #ff2a4d, 0 0 24px #ff2a4d;
  animation: chenillard 1.8s steps(1) infinite;
}
.xxx-neon span:nth-child(2) { animation-delay: .3s; }
.xxx-neon span:nth-child(3) { animation-delay: .6s; }
@keyframes chenillard {
  0% { opacity: 1; }
  60% { opacity: .2; text-shadow: none; }
}
.hero-claudia {
  display: block;
  margin-top: -.02em;
  font-family: var(--f-script);
  font-size: clamp(76px, 24vw, 140px);
  line-height: .95;
  letter-spacing: 0;
  color: #fff4d6;
  transform: rotate(-5deg);
  text-shadow: 0 0 4px #fff, 0 0 14px var(--or), 0 0 34px var(--orange), 0 0 64px var(--magenta);
  animation: neon 8s -3s infinite;
}
.hero-suite {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: 44px;
  margin: 0 auto;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 10px var(--magenta), 0 0 22px var(--magenta);
  animation: rebond 1.6s ease-in-out infinite;
}
@keyframes rebond { 50% { transform: translateY(5px); } }

/* ---------- Bandeau défilant, collé de travers comme sur la v1 ---------- */
.bandeau-zone { position: relative; z-index: 1; margin-top: -16px; padding: 10px 0; overflow: hidden; }
.bandeau {
  width: 106%;
  margin-left: -3%;
  background: linear-gradient(90deg, #b3125a, var(--magenta), #b3125a);
  border-block: 2px solid var(--or);
  transform: rotate(-1.6deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 30px rgba(255, 61, 139, .4);
}
.bandeau-piste {
  display: flex;
  width: max-content;
  animation: defile 36s linear infinite;
}
.bandeau-piste span {
  padding: 7px 1.2em 5px 0;
  white-space: nowrap;
  font-family: var(--f-titre);
  font-size: 20px;
  letter-spacing: .12em;
  color: var(--creme);
}
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Titres de section ---------- */
.sur-titre {
  margin: 0;
  text-align: center;
  font-family: var(--f-vhs);
  font-size: 22px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cyan);
}
.titre-neon {
  margin: 4px 0 6px;
  text-align: center;
  font-family: var(--f-neon);
  font-weight: 400;
  font-size: clamp(42px, 12vw, 76px);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--magenta), 0 0 30px var(--magenta);
}

/* ---------- À l'affiche : les films l'un sous l'autre, affiches à la taille de la v1 ---------- */
.programme { max-width: 1280px; margin: 0 auto; padding: 56px var(--gouttiere) 36px; }
.films { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; margin-top: 34px; }
@media (min-width: 640px) { .films { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; } }
@media (min-width: 1140px) {
  .films { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .films .fiche-titre { font-size: 40px; }
  .films .fiche-accroche { font-size: 26px; }
}

.film { position: relative; display: flex; flex-direction: column; gap: 14px; }

/* Étiquette rouge collée de travers sur l'affiche, comme sur la v1 */
.film-badge {
  position: absolute;
  z-index: 2;
  top: -12px;
  left: -6px;
  max-width: 85%;
  padding: 6px 12px 4px;
  border: 2px solid var(--or);
  border-radius: 4px;
  background: #d7262e;
  color: var(--creme);
  font-family: var(--f-titre);
  font-size: 16px;
  letter-spacing: .06em;
  transform: rotate(-5deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}
.film-affiche {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 26px rgba(255, 61, 139, .28), 0 22px 44px rgba(0, 0, 0, .6);
}
.film-affiche img {
  display: block;
  width: 100%;
  height: auto; /* sinon l'attribut height="1200" écrase l'aspect-ratio */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .5s ease;
}
@media (hover: hover) { .film-affiche:hover img { transform: scale(1.04); } }

.fiche {
  flex: 1;
  padding: 20px 18px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(42, 15, 74, .75), rgba(12, 6, 24, .9));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 1px rgba(255, 61, 139, .15) inset, 0 24px 50px rgba(0, 0, 0, .45);
}
.fiche-titre {
  margin: 0 0 2px;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: clamp(36px, 10vw, 50px);
  line-height: .95;
  letter-spacing: .02em;
  background: linear-gradient(180deg, var(--or-clair), var(--orange) 55%, var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fiche-meta { margin: 0; font-family: var(--f-vhs); font-size: 20px; color: var(--cyan); }
.fiche-accroche { margin: 10px 0 0; font-family: var(--f-script); font-size: 30px; line-height: 1.1; color: var(--rose); }
.fiche-casting { margin: 8px 0 0; color: var(--texte-doux); }
.fiche-casting b { color: var(--creme); }
.seances { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.seances li {
  padding: 4px 12px;
  border: 1px solid rgba(89, 243, 255, .5);
  border-radius: 8px;
  font-family: var(--f-vhs);
  font-size: 22px;
  line-height: 1.1;
  color: #fff;
}
.seances li:last-child { border-color: rgba(245, 192, 74, .6); color: var(--or-clair); }
.avis { margin: 14px 0 0; padding-left: 12px; border-left: 3px solid var(--magenta); font-style: italic; }
.avis cite { display: block; margin-top: 2px; font-style: normal; font-size: 16px; color: var(--texte-doux); }
.fiche .btn-brillant { margin-top: 16px; width: 100%; }

/* ---------- Boutons ---------- */
.btn-brillant {
  position: relative;
  overflow: hidden;
  min-height: 54px;
  padding: 12px 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--magenta), var(--orange));
  color: #fff;
  font-family: var(--f-titre);
  font-size: 24px;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(255, 61, 139, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.btn-brillant::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: reflet 3.2s ease-in-out infinite;
}
@keyframes reflet { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.btn-brillant:active { transform: scale(.98); }
.btn-brillant:disabled { opacity: .7; cursor: wait; }
/* Bouton doré du ticket (celui de la v1) */
.btn-or {
  display: block;
  width: 100%;
  padding: 13px 22px 10px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--or-clair), var(--or) 45%, var(--or-fonce));
  color: #2a1200;
  font-family: var(--f-titre);
  font-size: 23px;
  letter-spacing: .1em;
  cursor: pointer;
  box-shadow: 0 4px 0 #7a5513, 0 12px 26px rgba(245, 192, 74, .25);
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.btn-or:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a5513, 0 6px 14px rgba(245, 192, 74, .2); }
.btn-or:disabled { filter: grayscale(.6) brightness(.8); cursor: wait; }
@media (hover: hover) { .btn-or:hover { filter: brightness(1.08); } }
.btn-discret {
  padding: 8px 16px;
  border: 1px solid rgba(245, 192, 74, .55);
  border-radius: 999px;
  background: transparent;
  color: var(--or-clair);
  font-family: var(--f-titre);
  font-size: 18px;
  letter-spacing: .08em;
  cursor: pointer;
}

/* ---------- Entracte : le quiz, le ticket doré de la v1 sur une scène de cabaret ---------- */
/* Le fond, c'est le rideau de scène fermé ; devant : deux pans retenus par des embrasses,
   le lambrequin à franges en haut, les planches et la rampe de lumières en bas. */
.entracte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 48px;
  padding: 96px 28px 92px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .65), transparent 24%, transparent 70%, rgba(0, 0, 0, .5)),
    repeating-linear-gradient(90deg, var(--velours-ombre) 0, var(--velours-2) 9px, var(--velours) 19px, var(--velours-clair) 25px, var(--velours) 31px, var(--velours-2) 42px, var(--velours-ombre) 52px);
}
.scene-cabaret { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Le projecteur de poursuite qui se promène sur le rideau */
.poursuite {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(130vw, 900px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 180, .34), rgba(255, 170, 120, .12) 60%, transparent);
  mix-blend-mode: screen;
  animation: poursuite 9s ease-in-out infinite alternate;
}
@keyframes poursuite { from { transform: translateX(-9%); } to { transform: translateX(9%); } }

/* Les pans du rideau, en velours plus clair, qui ondulent un peu */
.rideau {
  position: absolute;
  top: 0;
  bottom: 40px;
  width: clamp(58px, 19vw, 280px);
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, .7));
}
.rideau-g { left: 0; }
.rideau-d { right: 0; }
.rideau::before {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  animation: ondule 7s ease-in-out infinite alternate;
}
.rideau-g::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 40%, rgba(255, 190, 190, .14) 80%, rgba(0, 0, 0, .4)),
    repeating-linear-gradient(90deg, var(--velours-ombre) 0, var(--velours) 8px, var(--velours-clair) 14px, #e0506a 17px, var(--velours) 22px, var(--velours-2) 31px, var(--velours-ombre) 36px);
  clip-path: polygon(0 0, 100% 0, 94.5% 10%, 85% 20%, 74% 30%, 61% 40%, 46% 50%, 34% 58%, 43% 66%, 49.5% 76%, 56% 88%, 62% 100%, 0 100%);
}
.rideau-d::before {
  background:
    linear-gradient(270deg, rgba(0, 0, 0, .55), transparent 40%, rgba(255, 190, 190, .14) 80%, rgba(0, 0, 0, .4)),
    repeating-linear-gradient(270deg, var(--velours-ombre) 0, var(--velours) 8px, var(--velours-clair) 14px, #e0506a 17px, var(--velours) 22px, var(--velours-2) 31px, var(--velours-ombre) 36px);
  clip-path: polygon(100% 0, 0 0, 5.5% 10%, 15% 20%, 26% 30%, 39% 40%, 54% 50%, 66% 58%, 57% 66%, 50.5% 76%, 44% 88%, 38% 100%, 100% 100%);
  animation-delay: -3.5s;
}
@keyframes ondule { from { transform: skewX(.9deg); } to { transform: skewX(-.9deg); } }

/* Embrasse : la cordelette dorée qui retient le pan, et son pompon */
.embrasse {
  position: absolute;
  top: calc(58% - 7px);
  width: 46%;
  height: 12px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(60deg, rgba(90, 50, 0, .35) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--or-clair), var(--or) 55%, var(--or-fonce));
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
}
.rideau-g .embrasse { left: 0; }
.rideau-d .embrasse { right: 0; }
.embrasse::before, .embrasse::after { content: ''; position: absolute; }
.embrasse::before {
  top: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--or) 45%, var(--or-fonce));
}
.embrasse::after {
  top: 12px;
  width: 18px;
  height: 38px;
  background:
    repeating-linear-gradient(90deg, rgba(90, 50, 0, .35) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, var(--or-fonce), var(--or-clair) 50%, var(--or-fonce));
  clip-path: polygon(32% 0, 68% 0, 68% 22%, 100% 100%, 0 100%, 32% 22%);
  transform-origin: 50% 0;
  animation: pompon 3.6s ease-in-out infinite alternate;
}
.rideau-g .embrasse::before, .rideau-g .embrasse::after { right: -6px; }
.rideau-d .embrasse::before, .rideau-d .embrasse::after { left: -6px; }
@keyframes pompon { from { transform: rotate(5deg); } to { transform: rotate(-5deg); } }

/* Lambrequin : la bande de velours festonnée du haut, bordée d'or, avec ses franges */
.lambrequin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6));
}
.lambrequin::before, .lambrequin::after {
  content: '';
  position: absolute;
  inset: 0;
}
.lambrequin::before {
  background: repeating-linear-gradient(90deg, var(--or-clair) 0 1.5px, var(--or-fonce) 1.5px 3px);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 40px no-repeat, radial-gradient(32px 40px at 50% 0, #000 98%, transparent) 0 40px / 64px 40px round no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 100% 40px no-repeat, radial-gradient(32px 40px at 50% 0, #000 98%, transparent) 0 40px / 64px 40px round no-repeat;
}
.lambrequin::after {
  background:
    linear-gradient(180deg, var(--or-clair) 0 3px, var(--or) 3px 6px, var(--or-fonce) 6px 8px, transparent 8px 33px, var(--or) 33px 36px, transparent 36px),
    radial-gradient(32px 26px at 50% 0, transparent 55%, rgba(0, 0, 0, .4) 98%) 0 40px / 64px 26px round no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 50%),
    repeating-linear-gradient(90deg, var(--velours-2) 0, var(--velours) 8px, var(--velours-clair) 12px, var(--velours) 18px, var(--velours-2) 24px);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 40px no-repeat, radial-gradient(32px 26px at 50% 0, #000 98%, transparent) 0 40px / 64px 26px round no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 100% 40px no-repeat, radial-gradient(32px 26px at 50% 0, #000 98%, transparent) 0 40px / 64px 26px round no-repeat;
}

/* Les planches de la scène, avec la rampe de lumières au bord */
.planches {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, #6b3d17, #3d200b 45%, #1c0e04);
  box-shadow: 0 -2px 0 var(--or-fonce);
}
.planches::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 130px;
  background: linear-gradient(0deg, rgba(255, 190, 100, .32), transparent);
  mix-blend-mode: screen;
}
.planches::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 14px;
  background: radial-gradient(circle, #fffbe6 0 2.5px, #ffd36b 4px, rgba(255, 180, 60, .45) 6px, transparent 8px) 50% 50% / 30px 14px round no-repeat;
  animation: rampe 2.4s steps(1) infinite;
}
@keyframes rampe { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }

/* Le ticket doré de la v1 */
.ticket {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  padding: 30px 22px 28px;
  border: 2px solid var(--or);
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0, #2e1544, #120818 75%);
  text-align: center;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, .35), 0 30px 60px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 61, 139, .25);
}
.ticket::before, .ticket::after { position: absolute; font-size: 22px; color: var(--or); opacity: .8; }
.ticket::before { content: '♠ ♥'; top: 12px; left: 16px; }
.ticket::after { content: '♦ ♣'; bottom: 12px; right: 16px; }

.entracte-sur {
  margin: 0;
  font-family: var(--f-vhs);
  font-size: 22px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.ticket .entracte-sur { font-family: var(--f-titre); font-size: 18px; letter-spacing: .32em; text-transform: none; color: var(--or); }
.qlture { margin: 8px 0 6px; font-weight: 400; line-height: .9; }
.qlture-petit {
  display: block;
  font-family: var(--f-titre);
  font-size: clamp(24px, 7vw, 32px);
  letter-spacing: .3em;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(89, 243, 255, .8), 0 0 22px rgba(89, 243, 255, .4);
}
.qlture-grand {
  display: block;
  padding: 0 .1em .12em;
  font-family: var(--f-script);
  font-size: clamp(60px, 20vw, 124px);
  white-space: nowrap;
  color: #ffd6ea;
  text-shadow: 0 0 3px #fff, 0 0 12px var(--magenta), 0 0 28px var(--magenta), 0 0 64px rgba(255, 61, 139, .8);
  transform: rotate(-5deg);
  animation: neon 5s infinite;
}
.qlture-q {
  display: inline-block;
  margin-right: .02em;
  font-family: var(--f-neon);
  font-size: .78em;
  vertical-align: .04em;
  color: var(--or-clair);
  text-shadow: 0 0 4px rgba(255, 240, 200, .95), 0 0 16px rgba(245, 192, 74, .85), 0 0 40px rgba(255, 61, 139, .75);
  transform: rotate(5deg);
}
.regles { margin: 10px 0 8px; font-size: 21px; font-weight: 600; }
.regles-liste { display: inline-block; margin: 0 0 22px; padding: 0; list-style: none; text-align: left; color: var(--texte-doux); }
.regles-liste li { position: relative; padding-left: 1.4em; }
.regles-liste li::before { content: '★'; position: absolute; left: 0; color: var(--or); }

.depart { display: grid; gap: 12px; }
.depart label { font-family: var(--f-titre); font-size: 20px; letter-spacing: .14em; color: var(--or); }
.depart input {
  width: 100%;
  padding: 12px 14px 9px;
  border: 2px solid var(--or);
  border-radius: 12px;
  background: var(--creme);
  color: var(--nuit);
  font-family: var(--f-titre);
  font-size: 26px;
  letter-spacing: .05em;
  text-align: center;
}
.depart input::placeholder { color: #a38f7a; }
.depart input:focus { outline: none; box-shadow: 0 0 0 3px rgba(245, 192, 74, .45), 0 0 22px rgba(255, 61, 139, .35); }
.erreur { min-height: 1.4em; margin: 0; color: #ff9db5; }

.deja { display: grid; gap: 4px; justify-items: center; }
.deja p { margin: 0; }
.deja-ticket {
  margin: 8px 0;
  padding: 10px 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--or-fonce), var(--or-clair) 45%, var(--or) 60%, var(--or-fonce));
  color: #2a1600;
  font-family: var(--f-neon);
  font-size: 54px;
  line-height: 1.1;
  box-shadow: 0 0 26px rgba(245, 192, 74, .45);
}

/* ---------- Pied de page ---------- */
.pied { padding: 28px var(--gouttiere) calc(36px + env(safe-area-inset-bottom)); text-align: center; border-top: 1px solid rgba(255, 255, 255, .08); }
.pied p { margin: 4px 0; font-family: var(--f-titre); font-size: 20px; letter-spacing: .1em; }
.pied .pied-doux { font-family: var(--f-texte); font-size: 16px; letter-spacing: 0; color: var(--texte-doux); }

/* ---------- Salle : le quiz, façon télé cathodique ---------- */
.salle {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) var(--gouttiere) max(14px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: radial-gradient(ellipse 120% 70% at 50% 30%, #2a0f4a, var(--nuit) 70%);
}
.salle-osd {
  width: min(100%, 520px);
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-vhs);
  font-size: 26px;
  line-height: 1;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .8);
}
#chrono { color: #ffc46b; }
.bande { width: min(100%, 520px); height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.bande-avance {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 12px var(--magenta);
  transition: width .3s;
}
.tele {
  position: relative;
  flex: none;
  margin: 6px 0 0;
  height: min(54dvh, calc(100dvh - 330px), 520px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 24px;
  background: #000;
  box-shadow: 0 0 0 6px #1b1424, 0 0 0 8px #3a2d4a, 0 22px 50px rgba(0, 0, 0, .7), 0 0 60px rgba(255, 61, 139, .25);
}
.tele img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.tele::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .6) 100%);
}
.neige { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: #777 var(--bruit); background-size: 160px; }
.neige.active { animation: neige .34s steps(4); }
@keyframes neige {
  0% { opacity: 1; background-position: 0 0; }
  25% { background-position: 40px 70px; }
  50% { opacity: .9; background-position: -60px 20px; }
  75% { background-position: 30px -50px; }
  100% { opacity: 0; background-position: 0 30px; }
}
.tele-chaine {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 1;
  font-family: var(--f-vhs);
  font-size: 26px;
  color: #7dff7a;
  text-shadow: 0 0 8px #7dff7a;
}
.cadre-vide { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; padding: 20px; }
.cadre-vide-q { font-family: var(--f-neon); font-size: 96px; color: var(--magenta); }
.cadre-vide-txt { color: var(--texte-doux); }
.question {
  margin: 4px 0 0;
  font-family: var(--f-script);
  font-size: 42px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 18px var(--magenta);
}
.choix {
  width: min(100%, 520px);
  margin-bottom: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.choix button {
  min-height: 62px;
  padding: 8px 10px;
  border: 1.5px solid rgba(89, 243, 255, .55);
  border-radius: 14px;
  background: rgba(12, 6, 24, .75);
  color: #fff;
  font-family: var(--f-titre);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: inset 0 0 14px rgba(89, 243, 255, .12), 0 0 12px rgba(89, 243, 255, .14);
  transition: transform .1s, background .15s, box-shadow .15s;
}
.choix button:active { transform: scale(.97); }
.choix button.choisi { background: var(--magenta); border-color: #fff; box-shadow: 0 0 26px var(--magenta); }
.choix button:disabled:not(.choisi) { opacity: .45; }
@media (hover: hover) {
  .choix button:hover:not(:disabled) { background: rgba(89, 243, 255, .14); }
}

/* ---------- Clap de fin : ticket à gratter ---------- */
.salle-fin { justify-content: center; }
.fin-carte {
  width: min(100%, 430px);
  margin-block: auto;
  padding: 22px 18px 20px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, #1d0d33, #0c0618);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 0 50px rgba(255, 61, 139, .2);
}
.fin-carte .entracte-sur { margin-bottom: 4px; }
.fin-titre { margin: 0; font-family: var(--f-titre); font-size: 36px; line-height: 1.05; letter-spacing: .03em; }
.fin-consigne { margin: 4px 0 0; color: var(--texte-doux); }
.grattage {
  position: relative;
  margin: 14px 0 0;
  min-height: 230px;
  padding: 18px 14px;
  overflow: hidden;
  border-radius: 16px;
  border: 2px dashed rgba(245, 192, 74, .65);
  background: radial-gradient(circle at 50% 30%, #3a1458, #140a24);
  display: grid;
  place-content: center;
}
.grattage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  transition: opacity .6s;
}
.grattage.revele canvas { opacity: 0; pointer-events: none; }
.fin-score {
  margin: 0;
  font-family: var(--f-neon);
  font-size: clamp(60px, 19vw, 84px);
  line-height: 1;
  color: var(--or-clair);
  text-shadow: 0 0 10px var(--or), 0 0 28px var(--orange);
}
.fin-score small { font-size: .45em; color: var(--creme); }
.fin-temps { margin: 6px 0 0; font-family: var(--f-vhs); font-size: 24px; color: var(--cyan); }
.fin-verdict { margin: 12px 0 0; font-family: var(--f-script); font-size: 28px; line-height: 1.1; color: var(--rose); }
.fin-suite { margin: 12px 0 0; color: var(--texte-doux); }
.fin-actions { display: grid; gap: 10px; margin-top: 16px; }

.confettis { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Affiche en grand, message ---------- */
/* Plein écran : la boîte couvre tout l'écran (iPhone) ; ailleurs, la scène passe
   en vrai plein écran. Toucher n'importe où referme. */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(7, 3, 15, .97); }
.lightbox-scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: rgba(7, 3, 15, .97);
  cursor: zoom-out;
}
.lightbox-scene:fullscreen { width: 100vw; height: 100vh; }
.lightbox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(255, 61, 139, .3));
}
.lightbox-fermer {
  position: absolute;
  z-index: 1;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 80;
  width: min(92vw, 440px);
  padding: 12px 16px;
  border: 1px solid rgba(89, 243, 255, .6);
  border-radius: 14px;
  background: rgba(7, 3, 15, .94);
  box-shadow: 0 0 24px rgba(89, 243, 255, .3);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Téléphone tourné en paysage ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  .hero { --piste: 18svh; padding-top: max(12px, env(safe-area-inset-top)); }
  .boule { left: auto; right: 7%; transform: none; }
  .boule-sphere { width: 44px; height: 44px; }
  .neon-sur { margin-bottom: 8px; font-size: 16px; }
  .marquise-zone { width: min(100%, 460px); }
  .marquise { padding: 16px 14px 14px; }
  .logo-chrome { font-size: 15svh; }
  .logo-script { font-size: 12svh; }
  .marquise-sous { display: none; }
  .hero-bas { padding-top: 10px; }
  .hero-prive { font-size: 16px; }
  .hero-titre { font-size: 8svh; }
  .hero-claudia { font-size: 15svh; }
  .hero-suite { display: none; }

  /* Films : affiche à gauche (elle tient dans la hauteur de l'écran), fiche à droite */
  .films { grid-template-columns: 1fr; max-width: 980px; margin: 28px auto 0; }
  .film { flex-direction: row; gap: 22px; align-items: flex-start; }
  .film-affiche { flex: none; width: min(44vw, calc((100vh - 70px) * .75)); width: min(44vw, calc((100dvh - 70px) * .75)); }

  .salle:not(.salle-fin) {
    display: grid;
    grid-template-columns: auto minmax(0, 500px);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: "tele ." "tele osd" "tele bande" "tele question" "tele choix" "tele .";
    justify-content: center;
    align-items: center;
    column-gap: 26px;
    row-gap: 8px;
  }
  .tele { grid-area: tele; margin: 0; height: calc(100dvh - 28px); }
  .salle-osd { grid-area: osd; margin: 0; }
  .bande { grid-area: bande; }
  .question { grid-area: question; margin: 0; text-align: center; font-size: 34px; }
  .choix { grid-area: choix; margin: 0; }
  .choix button { min-height: 52px; font-size: 20px; }
}

@media (max-width: 380px) {
  :root { --gouttiere: 12px; }
  .choix button { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}