@property --lit { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --iris { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Salle éteinte ---------- */
:root.noir { --velvet: #0a0407; --velvet-2: #140a0f; --seat: #2b1620; --dim: #a8958d; }
.noir .valance { filter: brightness(.55) drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.noir .beam { opacity: 1; filter: brightness(1.7); animation: none; }

/* ---------- Le rideau, relevé « à l'italienne » ---------- */
.curtain { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr; }
.curtain i {
  position: relative;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.04) 20%, rgba(255,160,160,.13) 38%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.42)) 0 0 / clamp(44px, 7vw, 92px) 100%, linear-gradient(transparent 70%, rgba(0,0,0,.45)), radial-gradient(ellipse 140% 70% at 50% 0, #a42637, #640f1d 65%, #3d0812);
  transform-origin: 0 0; animation: coups .95s ease-out .2s, gather-l 1.75s cubic-bezier(.62,0,.18,1) 1.25s forwards;
}
.curtain i + i { transform-origin: 100% 0; animation-name: coups, gather-r; }
/* Les trois coups : le rideau tressaute à chaque coup frappé derrière lui. */
@keyframes coups { 0%, 22%, 52%, 82%, 100% { transform: none; } 6%, 36%, 66% { transform: translateY(3px) scaleY(.994); } 12%, 42%, 72% { transform: translateY(-1px); } }
/* La poursuite éclaire le rideau fermé, puis s'éteint quand il s'ouvre. */
.curtain::after { content: ""; position: absolute; left: 50%; top: -15%; width: min(90vmin, 900px); height: 130%; transform: translateX(-50%); pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 50% 45% at 50% 42%, rgba(255,232,190,.32), rgba(255,220,160,.1) 55%, transparent 72%); mix-blend-mode: screen; animation: poursuite 2.9s ease forwards; }
@keyframes poursuite { 8% { opacity: 1; } 45% { opacity: 1; } 75%, 100% { opacity: 0; } }
.trois-coups { position: absolute; left: 0; right: 0; top: 58%; z-index: 1; display: flex; justify-content: center; gap: .6em; pointer-events: none;
  font: italic 400 clamp(1.4rem, 4vw, 2.2rem)/1 var(--serif); color: #ffd98a; text-shadow: 0 0 18px rgba(255,200,110,.7), 0 2px 4px rgba(0,0,0,.6); }
.trois-coups b { font-weight: 400; opacity: 0; animation: toc 1.4s ease forwards; }
.trois-coups b:nth-child(1) { animation-delay: .2s; } .trois-coups b:nth-child(2) { animation-delay: .5s; } .trois-coups b:nth-child(3) { animation-delay: .8s; }
@keyframes toc { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 12% { opacity: 1; transform: none; } 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
.curtain i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: repeating-linear-gradient(90deg, #e2b04e 0 3px, #8a5f1a 3px 5px); -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); }
.curtain i:first-child { box-shadow: inset -18px 0 30px rgba(0,0,0,.5); }
.curtain i + i { box-shadow: inset 18px 0 30px rgba(0,0,0,.5); }
@keyframes gather-l { 0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; } 12% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateX(1.2%) scaleX(1.01); } 70% { opacity: 1; } 100% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); transform: scaleX(.18); opacity: 0; } }
@keyframes gather-r { 0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; } 12% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateX(-1.2%) scaleX(1.01); } 70% { opacity: 1; } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); transform: scaleX(.18); opacity: 0; } }

/* ---------- L'iris, entre deux pages ---------- */
.iris { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; background: #050304;
  -webkit-mask: radial-gradient(circle at var(--ix, 50%) var(--iy, 50%), transparent var(--iris), #000 calc(var(--iris) + 8px));
          mask: radial-gradient(circle at var(--ix, 50%) var(--iy, 50%), transparent var(--iris), #000 calc(var(--iris) + 8px)); }
.iris.closing { visibility: visible; pointer-events: auto; animation: iris-close .55s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes iris-close { from { --iris: 150vmax; } to { --iris: 0px; } }
.iris-in .iris { visibility: visible; animation: iris-open .75s cubic-bezier(.3,0,.2,1) .05s forwards; }
@keyframes iris-open { from { --iris: 0px; } 99% { visibility: visible; } to { --iris: 150vmax; visibility: hidden; } }

/* ---------- Le foyer : plan des salles, interrupteur, son ---------- */
.foyer { position: relative; z-index: 5; max-width: var(--foyer-w, 1180px); margin: 0 auto 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
/* La bande du foyer laisse passer les clics (la cabine du projectionniste est dessous) ; seuls ses boutons les prennent. */
.foyer { pointer-events: none; }
.foyer > * { pointer-events: auto; }
.salles { display: flex; gap: 10px; flex-wrap: wrap; }
.salle { position: relative; display: grid; padding: 6px 22px 7px; border-radius: 7px; text-decoration: none; line-height: 1.1; color: #3a2410;
  background: linear-gradient(160deg, #f6dc98, #c9973f 42%, #f2d283 62%, #b4822f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.45);
  opacity: .6; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
.salle::before, .salle::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2c4, #7a5418); box-shadow: 0 1px 1px rgba(0,0,0,.4); }
.salle::before { left: 8px; } .salle::after { right: 8px; }
.salle b { font: 400 1.1rem/1 var(--display); letter-spacing: .1em; }
.salle span { font: 700 .74rem var(--body); }
.salle:hover { opacity: .95; transform: translateY(-2px); }
.salle[aria-current] { opacity: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.45), 0 0 22px rgba(255,207,107,.4); }
.regie { display: flex; gap: 8px; }
.regie button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 9px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(255,207,107,.22); background: rgba(28,14,21,.72); color: var(--dim); font: 700 .8rem var(--body); transition: color .2s ease, border-color .2s ease; }
.regie button:hover, .regie button[aria-pressed="true"] { color: var(--cream); border-color: rgba(255,207,107,.6); }
.levier { position: relative; width: 16px; height: 24px; border-radius: 3px; background: linear-gradient(#f5ead8, #cdbca5); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.levier::after { content: ""; position: absolute; left: 5px; top: 3px; width: 6px; height: 9px; border-radius: 2px; background: #3a2410; transition: transform .15s cubic-bezier(.22,1,.36,1); }
[aria-pressed="true"] .levier::after { transform: translateY(9px); }
.regie svg { width: 18px; height: 18px; }
.regie .ondes { transition: opacity .2s ease; }
.regie [aria-pressed="false"] .ondes { opacity: .2; }
/* Écran moyen : plaques compactes (sans sous-titre) pour laisser la cabine du projectionniste au centre. */
@media (max-width: 1240px) { .salle { padding: 5px 16px 6px; } .salle span { display: none; } .salle.hall-lien { padding-inline: 14px; } }
@media (max-width: 520px) { .salle { padding: 5px 18px 6px; } .salle span { font-size: .68rem; } .regie .txt { display: none; } .regie button { padding: 7px 10px; } }

/* ---------- Draperies sur les côtés (grands écrans) ----------
   Comme un vrai tissu : le haut, tenu par la tringle, gonfle à peine ; le bas, libre sous
   l'embrasse, se balance et revient comme un pendule. Le bas déborde hors de l'écran (76 px,
   deux plis) pour qu'aucun vide n'apparaisse au bord quand il se balance. */
.draperie { position: fixed; top: 0; bottom: 0; z-index: 0; pointer-events: none; width: clamp(0px, calc((100vw - 1260px) / 2), 150px);
  --sens: 1; transform-origin: 50% 0; animation: souffle-g 9s ease-in-out infinite; }
.draperie.g { left: 0; }
.draperie.d { right: 0; --sens: -1; animation-name: souffle-d; animation-delay: -4.5s; }
@keyframes souffle-g { 50% { transform: skewX(.6deg); } }
@keyframes souffle-d { 50% { transform: skewX(-.6deg); } }
.draperie i { position: absolute; top: 0; bottom: 0; left: 0; right: 0; will-change: transform;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.04) 20%, rgba(255,160,160,.13) 38%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.42)) 0 0 / 38px 100%, linear-gradient(transparent 72%, rgba(0,0,0,.5)), linear-gradient(#8e1f2f, #5a0e1a 65%, #34070f); }
.draperie .haut { transform: scaleX(var(--gonfle, 1)); }
.draperie .bas { transform: skewX(var(--balance, 0deg)); }
.draperie.g .haut { transform-origin: 0 0; clip-path: polygon(0 0, 100% 0, 96% 28%, 40% 60.6%, 0 60.6%); }
.draperie.g .bas { left: -76px; transform-origin: calc(76px + (100% - 76px) * .2) 60%;
  clip-path: polygon(0 60%, calc(76px + (100% - 76px) * .4) 60%, calc(76px + (100% - 76px) * .8) 100%, 0 100%); }
.draperie.d .haut { transform-origin: 100% 0; clip-path: polygon(0 0, 100% 0, 100% 60.6%, 60% 60.6%, 4% 28%); }
.draperie.d .bas { right: -76px; transform-origin: calc((100% - 76px) * .8) 60%;
  clip-path: polygon(calc((100% - 76px) * .6) 60%, 100% 60%, 100% 100%, calc((100% - 76px) * .2) 100%); }
.draperie::after { content: ""; position: absolute; z-index: 1; top: calc(60% - 6px); width: 42%; height: 12px; border-radius: 6px;
  background: repeating-linear-gradient(60deg, #e2b04e 0 4px, #8a5f1a 4px 7px); box-shadow: 0 3px 6px rgba(0,0,0,.45); }
.draperie.g::after { left: 0; } .draperie.d::after { right: 0; }
.noir .draperie { filter: brightness(.6); }
/* Le bas en bandes : chaque bande suit celle du dessus avec un temps de retard, comme une vague
   qui descend dans le tissu. Le dégradé est calé sur toute la hauteur pour rester continu. */
.draperie.tranches .bas { display: none; }
.draperie .tranche { top: auto; bottom: auto; transform-origin: 0 0; will-change: transform;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.04) 20%, rgba(255,160,160,.13) 38%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.42)) 0 0 / 38px 100%, linear-gradient(transparent 72%, rgba(0,0,0,.5)) 0 var(--py, 0) / 100% var(--ph, 100%) no-repeat,
    linear-gradient(#8e1f2f, #5a0e1a 65%, #34070f) 0 var(--py, 0) / 100% var(--ph, 100%) no-repeat; }
.draperie.g .tranche { left: -76px; right: 0; }
.draperie.d .tranche { right: -76px; left: 0; }
/* Le gland doré pendu à l'embrasse se balance avec un temps de retard. */
.draperie .gland { position: absolute; z-index: 2; top: calc(60% + 4px); bottom: auto; right: auto; clip-path: none; width: 14px; height: 52px; margin-left: -7px; transform-origin: 50% 0; will-change: transform;
  background: linear-gradient(#e2b04e, #e2b04e) 50% 0 / 2px 16px no-repeat, radial-gradient(circle at 50% 30%, #f6dc98 0 4px, #c9973f 5px 6px, transparent 6.5px) 50% 12px / 14px 14px no-repeat,
    repeating-linear-gradient(90deg, #e2b04e 0 2px, #8a5f1a 2px 3px) 50% 100% / 12px 31px no-repeat; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.draperie.g .gland { left: 36%; } .draperie.d .gland { left: 64%; }

/* ---------- L'enseigne : ampoules qui s'allument une à une, néon qui chauffe ---------- */
.marquee {
  --b: 14px;
  position: relative; padding: 22px clamp(20px, 5vw, 56px) 18px; border-radius: 14px;
  background: linear-gradient(#2a1520, #1b0d14);
  box-shadow: 0 0 0 3px #4a2a36, 0 18px 60px rgba(0,0,0,.55);
  animation: lit .7s steps(16) 1.9s backwards;
}
@keyframes lit { from { --lit: 0%; } to { --lit: 100%; } }
.marquee::before, .marquee::after { content: ""; position: absolute; inset: 7px; border-radius: 9px; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, #000 var(--lit), transparent var(--lit)); mask: linear-gradient(90deg, #000 var(--lit), transparent var(--lit)); }
.marquee::before {
  background:
    radial-gradient(circle, var(--bulb) 2.6px, transparent 3.4px) 0 0 / var(--b) var(--b) repeat-x,
    radial-gradient(circle, var(--bulb) 2.6px, transparent 3.4px) 0 100% / var(--b) var(--b) repeat-x,
    radial-gradient(circle, var(--bulb) 2.6px, transparent 3.4px) 0 0 / var(--b) var(--b) repeat-y,
    radial-gradient(circle, var(--bulb) 2.6px, transparent 3.4px) 100% 0 / var(--b) var(--b) repeat-y;
  filter: drop-shadow(0 0 4px var(--bulb));
}
.marquee::after { background: 
    radial-gradient(circle, #fff3cf 2.6px, transparent 3.4px) 7px 0 / var(--b) var(--b) repeat-x,
    radial-gradient(circle, #fff3cf 2.6px, transparent 3.4px) 7px 100% / var(--b) var(--b) repeat-x,
    radial-gradient(circle, #fff3cf 2.6px, transparent 3.4px) 0 7px / var(--b) var(--b) repeat-y,
    radial-gradient(circle, #fff3cf 2.6px, transparent 3.4px) 100% 7px / var(--b) var(--b) repeat-y; filter: drop-shadow(0 0 6px rgba(255,220,140,1)); animation: chase .9s steps(1) infinite; }
@keyframes chase { 0% { opacity: 1; } 50% { opacity: .15; } }
.marquee small { display: block; font: 700 .78rem var(--body); letter-spacing: .35em; text-transform: uppercase; color: var(--bulb); }
.marquee h1 {
  margin: 4px 0 0; font: 400 clamp(2.8rem, 9vw, 5.6rem)/.9 var(--display); letter-spacing: .03em;
  color: #fff6e6; text-shadow: 0 0 18px rgba(255,207,107,.45), 0 0 2px #fff;
  animation: warm 1s 2.15s backwards, flicker 7s 3.4s infinite;
}
@keyframes warm {
  0% { opacity: .12; text-shadow: none; } 18% { opacity: .9; } 24% { opacity: .2; }
  40% { opacity: 1; text-shadow: 0 0 30px rgba(255,207,107,.9), 0 0 2px #fff; } 46% { opacity: .45; } 100% { opacity: 1; }
}
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }
/* Lettres qu'on décroche d'un clic : elles pendent à leur clou, puis se raccrochent. */
.marquee .mot { white-space: nowrap; }
.marquee .lettre { display: inline-block; transform-origin: 14% 8%; cursor: pointer; }
.marquee .lettre.decroche { animation: swing 2.8s cubic-bezier(.3,0,.3,1) forwards; }
.marquee .lettre.raccroche { animation: rehang .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes swing { 0% { transform: none; } 12% { transform: rotate(80deg); } 26% { transform: rotate(46deg); } 40% { transform: rotate(68deg); } 54% { transform: rotate(53deg); } 68% { transform: rotate(62deg); } 100% { transform: rotate(58deg); } }
@keyframes rehang { from { transform: rotate(58deg); } }
/* Les ampoules, posées une à une (script) : espacement régulier, une ampoule pile dans chaque coin.
   Elles s'allument dans l'ordre du tour de l'enseigne, puis clignotent une sur deux.
   Sans script, les ampoules dessinées en fond (::before / ::after) restent en place. */
.marquee.ampoules-js::before, .marquee.ampoules-js::after { display: none; }
.ampoules { position: absolute; inset: 0; pointer-events: none; }
/* Les ampoules ne s'animent pas une par une (trop coûteux) : une couche d'ampoules allumées en couleur,
   et deux couches d'ampoules vives (une sur deux) qui clignotent en alternance par leur opacité. */
.ampoules i { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--bulb); box-shadow: 0 0 4px var(--bulb); }
.ampoules .base i { animation: allume .01s linear calc(1.9s + var(--k) * .7s / var(--n)) backwards; }
@keyframes allume { from { opacity: 0; } }
.ampoules .vives { position: absolute; inset: 0; opacity: 0; will-change: opacity; animation: clignote .9s steps(1) 2.65s infinite; }
.ampoules .vives.b { animation-delay: 3.1s; }
.ampoules .vives i { background: #fff3cf; box-shadow: 0 0 7px 1px rgba(255,220,140,.95); }
@keyframes clignote { 0% { opacity: 1; } 50% { opacity: 0; } }
[data-saison="noel"] .ampoules .base i.pair { --bulb: #ff6b6b; }
.vu .ampoules .base i { animation: none; }
.vu .ampoules .vives { animation-delay: 0s; }
.vu .ampoules .vives.b { animation-delay: -.45s; }
/* L'ampoule fatiguée (et réparable). */
.ampoules .base i.grillee { pointer-events: auto; cursor: pointer; background: #4e3420; box-shadow: inset 0 0 2px #000; animation: grille 9s steps(1) 3s infinite; }
.ampoules .base i.grillee::after { content: ""; position: absolute; inset: -9px; }
@keyframes grille { 0%, 70% { background: #4e3420; box-shadow: inset 0 0 2px #000; } 71%, 73.5% { background: var(--bulb); box-shadow: 0 0 6px var(--bulb); } 72%, 75% { background: #4e3420; box-shadow: inset 0 0 2px #000; } }
.ampoules i.reparee { cursor: default; }

/* ---------- Le faisceau du projecteur et sa poussière ---------- */
.beam { position: absolute; left: 50%; top: -110px; width: min(1100px, 100vw); height: 560px; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: conic-gradient(from 0deg at 50% 0, transparent 158deg, rgba(255,230,180,.09) 170deg, rgba(255,232,190,.17) 180deg, rgba(255,230,180,.09) 190deg, transparent 202deg);
  -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent);
  animation: hum 5s ease-in-out infinite; }
.beam canvas { width: 100%; height: 100%; display: block;
  -webkit-mask: conic-gradient(from 0deg at 50% 0, transparent 160deg, #000 172deg 188deg, transparent 200deg); mask: conic-gradient(from 0deg at 50% 0, transparent 160deg, #000 172deg 188deg, transparent 200deg); }
@keyframes hum { 50% { opacity: .82; } 53% { opacity: 1; } 56% { opacity: .9; } }

/* ---------- La lampe de l'ouvreuse (souris seulement) ---------- */
/* Un disque de lumière de taille fixe, déplacé par transform (rien à recalculer ailleurs dans la page). */
.torch { position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .7s ease; will-change: transform;
  background: radial-gradient(circle 300px at 50% 50%, rgba(255,206,140,.17), rgba(255,206,140,.06) 45%, transparent 72%); }
.torch i { position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,180,170,.1) 0 2px, transparent 2px 13px, rgba(0,0,0,.28) 13px 17px, transparent 17px 23px);
  -webkit-mask: radial-gradient(circle 240px at 50% 50%, #000, transparent 72%); mask: radial-gradient(circle 240px at 50% 50%, #000, transparent 72%); }
.torch.on { opacity: 1; }
/* Messages gravés dans le velours : on ne les lit qu'à la lumière de la lampe. */
.secret { position: absolute; z-index: -1; width: 16ch; pointer-events: none; text-align: center; transform: rotate(var(--r, -5deg));
  font: italic 400 1.3rem/1.25 var(--serif); color: rgba(255,226,180,.8); text-shadow: 0 0 10px rgba(255,190,110,.4);
  -webkit-mask: radial-gradient(circle 110px at var(--sx, -999px) var(--sy, -999px), #000 25%, transparent 75%);
          mask: radial-gradient(circle 110px at var(--sx, -999px) var(--sy, -999px), #000 25%, transparent 75%); }
.noir .secret { color: rgba(255,236,200,.95); }
@media not all and (hover: hover) { .secret { display: none; } }
@media (max-width: 1099px) { .secret { display: none; } }
.noir .torch { background: radial-gradient(circle 230px at 50% 50%, rgba(255,226,170,.3), rgba(255,226,170,.08) 50%, transparent 74%); }

/* ---------- Les fauteuils et leurs spectateurs ---------- */
.seats { max-width: 1180px; margin: 26px auto 0; height: 170px; position: relative; opacity: .9;
  background:
    radial-gradient(ellipse 22px 26px at 26px 30px, #3b1220 0 20px, transparent 21px) 0 50px / 56px 60px repeat-x,
    radial-gradient(ellipse 26px 14px at 28px 52px, #2a0c17 0 13px, transparent 14px) 0 50px / 56px 60px repeat-x,
    radial-gradient(ellipse 22px 26px at 26px 30px, #2a0b17 0 20px, transparent 21px) 28px 108px / 56px 60px repeat-x,
    radial-gradient(ellipse 26px 14px at 28px 52px, #1d0710 0 13px, transparent 14px) 28px 108px / 56px 60px repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
/* Les spectateurs, vus de dos derrière leur fauteuil ; le liseré du haut, c'est la lumière de l'écran.
   Dérangés, ils se retournent : on voit leurs yeux (et ils ne sont pas contents). */
.tete { position: absolute; top: 18px; width: 36px; height: 46px; transform-origin: 50% 100%; cursor: pointer; animation: hoche 7s ease-in-out var(--d) infinite; }
.tete svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 -1px 0 rgba(255,196,150,.5)); }
.tete .visage { display: none; }
.tete.chut .visage { display: inline; }
.tete.chut .arriere { display: none; }
/* Le dossier du premier rang passe devant les épaules. */
.seats::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 22px 26px at 26px 30px, #3b1220 0 20px, transparent 21px) 0 50px / 56px 60px repeat-x; }
[data-theme="drivein"] .seats::after, [data-theme="drivein"] .dossiers2 { display: none; }
/* Second rang : ses spectateurs passent devant le premier rang, son dossier devant leurs épaules. */
.tete.r2 { z-index: 2; }
.seats .dossiers2 { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 22px 26px at 26px 30px, #2a0b17 0 20px, transparent 21px) 28px 108px / 56px 60px repeat-x; }
@keyframes hoche { 0%, 78%, 100% { transform: none; } 83% { transform: rotate(-7deg); } 90% { transform: rotate(5deg); } }
/* Chacun vit la séance à sa façon : il rit, chuchote à son voisin, sursaute, ou respire tranquillement. */
.tete.rit { animation: rit 8s ease-in-out var(--d) infinite; }
@keyframes rit { 0%, 70%, 88%, 100% { transform: none; } 72%, 76%, 80%, 84% { transform: translateY(-2px) rotate(-1deg); } 74%, 78%, 82%, 86% { transform: translateY(0) rotate(1deg); } }
.tete.chuchote { animation: chuchote 11s ease-in-out var(--d) infinite; }
@keyframes chuchote { 0%, 58%, 100% { transform: none; } 63%, 80% { transform: rotate(var(--penche, -12deg)) translateX(var(--vers, -3px)); } 85% { transform: none; } }
.tete.sursaute { animation: sursaute 13s ease-out var(--d) infinite; }
@keyframes sursaute { 0%, 86%, 100% { transform: none; } 87% { transform: translateY(-8px) scale(1.05); } 89% { transform: translateY(-2px); } 92% { transform: none; } }
.tete.respire { animation: respire 4.5s ease-in-out var(--d) infinite alternate; }
@keyframes respire { to { transform: translateY(-1px) scaleY(1.015); } }
/* Le pot de pop-corn monte à la bouche de temps en temps. */
.tete .cornet-g { transform-box: view-box; transform-origin: 31px 30px; animation: mange 6s ease-in-out var(--d) infinite; }
@keyframes mange { 0%, 64%, 100% { transform: none; } 72%, 82% { transform: translate(-6px, -9px) rotate(-14deg); } }
/* Les bras se lèvent pendant les applaudissements. */
.tete .bras { display: none; }
.seats.bravo .tete .bras { display: inline; }
.seats.bravo .tete .bras path, .seats.bravo .tete .bras circle { transform-box: view-box; animation: agite .22s ease-in-out infinite alternate; }
.seats.bravo .tete .bras .g { transform-origin: 6px 33px; }
.seats.bravo .tete .bras .d { transform-origin: 30px 33px; animation-direction: alternate-reverse; }
@keyframes agite { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
/* Un spectateur dérangé se retourne et râle (une réplique différente à chaque fois). */
.tete.chut { animation: retourne .5s ease both; }
@keyframes retourne { 30% { transform: translateY(-6px) rotate(-8deg); } 100% { transform: none; } }
.tete.chut::before { content: attr(data-dit); position: absolute; bottom: calc(100% + 2px); left: 50%; padding: 2px 8px; border-radius: 8px; white-space: nowrap;
  background: var(--cream); color: var(--ink); font: 800 .72rem var(--body); transform: translateX(-50%); animation: bulle 1.8s ease forwards; }
@keyframes bulle { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.6); } 12%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; } }
.seats.bravo .tete { animation: bravo .26s ease-in-out calc(var(--d) / 20) 6 alternate; }
.seats.bravo .tete .cornet-g { animation: none; }
@keyframes bravo { to { transform: translateY(-9px); } }

/* ---------- Les secrets de la salle ---------- */
.regie #trophees { color: var(--bulb); }
.regie #trophees svg { width: 17px; height: 17px; }
.regie #trophees.gagne { animation: gagne .7s cubic-bezier(.22,1,.36,1); }
.regie #trophees.complet { color: var(--ink); background: var(--bulb); border-color: var(--bulb); box-shadow: 0 0 18px rgba(255,207,107,.55); }
@keyframes gagne { 40% { transform: scale(1.25) rotate(-6deg); } }
.trophees { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: min(340px, calc(100vw - 32px)); padding: 16px; border-radius: 16px;
  border: 1px solid rgba(255,207,107,.3); background: rgba(28,14,21,.97); box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: rise .25s ease both; }
.trophees h2 { margin: 0 0 4px; font: 400 1.6rem/1 var(--display); letter-spacing: .04em; color: var(--bulb); }
.trophees ul { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 7px; }
.trophees li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: .9rem; color: var(--cream); }
.trophees li::before { content: "✓"; color: var(--green, #5fd39a); font-weight: 800; }
.trophees li.cache { color: var(--dim); font-style: italic; }
.trophees li.cache::before { content: "?"; color: var(--dim); }
.trophees p { margin: 0; font-size: .85rem; color: var(--dim); }
.trophees .barre { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 8px; }
.trophees .barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--bulb), #ff9b3d); transform-origin: 0 50%; transition: transform .5s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Le générique de fin ---------- */
.generique { max-width: 520px; height: 168px; margin: 22px auto 0; overflow: hidden; text-align: center;
  -webkit-mask: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask: linear-gradient(transparent, #000 28%, #000 72%, transparent); }
.generique .defile { animation: defile 34s linear infinite; }
.generique:hover .defile { animation-play-state: paused; }
@keyframes defile { to { transform: translateY(-50%); } }
.generique dl { margin: 0; padding: 0 0 34px; display: grid; gap: 4px; }
.generique dt { font: italic 400 1rem var(--serif); color: var(--dim); margin-top: 14px; }
.generique dd { margin: 0; font: 400 1.45rem/1 var(--display); letter-spacing: .06em; color: var(--cream); }
.generique dd small { display: block; max-width: 40ch; margin: 6px auto 0; font: 400 .8rem/1.4 var(--body); letter-spacing: 0; color: var(--dim); }

/* ---------- Pop-corn, messages ---------- */
.kernel { position: fixed; z-index: 80; width: 15px; height: 13px; pointer-events: none;
  background:
    radial-gradient(circle at 30% 38%, #fffaf0 0 3.6px, transparent 4.2px),
    radial-gradient(circle at 68% 32%, #fff3dc 0 4px, transparent 4.6px),
    radial-gradient(circle at 52% 70%, #ffe8b4 0 4.4px, transparent 5px),
    radial-gradient(circle at 48% 58%, #e9b04f 0 1.6px, transparent 2.2px);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.toast { position: fixed; left: 50%; top: calc(18px + env(safe-area-inset-top)); z-index: 85; transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 12px; background: var(--cream); color: var(--ink); font: 800 .95rem var(--body); text-align: center;
  max-width: calc(100vw - 32px); box-shadow: 0 12px 30px rgba(0,0,0,.5); transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Les erreurs : un encadré rouge bien visible, le même partout ---------- */
/* Fond sombre plein : lisible aussi bien sur le velours que dans un cadre blanc (QR code). */
.alerte { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #e5413a;
  background: #3b1216; color: #ffe1d8; font: 600 .95rem/1.45 "Figtree", system-ui, sans-serif; text-align: left; box-shadow: 0 0 0 3px rgba(229,65,58,.15); }
.alerte::before { content: "!"; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  background: #e5413a; color: #fff; font: 800 .85rem/1 "Figtree", system-ui, sans-serif; }
.alerte:empty { display: none; }
.toast.erreur { background: #3b1216; color: #ffe1d8; border: 1.5px solid #e5413a; }

/* ---------- Le décor de saison (le même que la rangée « Spécial ») ---------- */
.saison { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.saison i { position: absolute; left: var(--x); font-style: normal; }
[data-saison="halloween"] .marquee { --bulb: #ff9b3d; }
/* Les toiles d'araignée, dans les coins hauts ; elles ondulent un peu, comme dans un courant d'air. */
/* Les toiles d'araignée, dans les coins hauts. Comme les rideaux, elles ondulent quand on fait défiler
   (--vent, posé par le script), et respirent un peu au repos. */
/* Les toiles sont accrochées en haut de la page (pas à l'écran) : elles partent avec le lambrequin quand on défile. */
.toiles { display: none; }
[data-saison="halloween"] .toiles { display: block; position: absolute; top: 0; left: 0; right: 0; height: 300px; z-index: 45; pointer-events: none; }
[data-saison="halloween"] .toiles::before, [data-saison="halloween"] .toiles::after { content: ""; position: absolute; top: 0; width: 240px; height: 240px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='rgba(240,232,220,.42)' stroke-linecap='round'%3E%3Cpath d='M0 0L227.9 8.0' stroke-width='1.05'/%3E%3Cpath d='M0 0L222.2 51.3' stroke-width='1.05'/%3E%3Cpath d='M0 0L206.6 96.4' stroke-width='1.05'/%3E%3Cpath d='M0 0L151.7 114.3' stroke-width='1.05'/%3E%3Cpath d='M0 0L149.6 172.1' stroke-width='1.05'/%3E%3Cpath d='M0 0L110.5 199.4' stroke-width='1.05'/%3E%3Cpath d='M0 0L66.7 218.0' stroke-width='1.05'/%3E%3Cpath d='M0 0L19.9 227.1' stroke-width='1.05'/%3E%3Cpath d='M150 0Q178 30 214 80M0 150Q30 176 78 214' stroke-width='.8'/%3E%3Cpath d='M16.0 0.6Q13.8 1.8 16.1 3.7M16.1 3.7Q13.6 4.7 15.4 7.2M15.4 7.2Q12.1 7.3 12.8 9.6M12.8 9.6Q10.2 9.5 10.8 12.4M10.8 12.4Q8.2 11.8 8.2 14.8M8.2 14.8Q5.5 13.0 4.7 15.3M4.7 15.3Q2.7 13.7 1.4 16.4' stroke-width='0.90'/%3E%3Cpath d='M30.9 1.1Q26.7 3.5 31.0 7.2M31.0 7.2Q25.1 8.7 27.2 12.7M27.2 12.7Q22.4 13.5 24.7 18.6M24.7 18.6Q19.7 18.4 20.9 24.0M20.9 24.0Q15.2 21.8 14.5 26.2M14.5 26.2Q10.2 24.1 9.0 29.5M9.0 29.5Q5.1 26.5 2.8 31.7' stroke-width='0.85'/%3E%3Cpath d='M48.7 1.7Q40.4 5.3 44.8 10.3M44.8 10.3Q38.0 13.1 42.9 20.0M42.9 20.0Q35.4 21.3 38.9 29.3M38.9 29.3Q29.8 27.8 30.2 34.7M30.2 34.7Q23.0 32.9 23.0 41.4M23.0 41.4Q16.2 38.1 14.3 46.6M14.3 46.6Q7.8 40.0 4.0 45.8' stroke-width='0.81'/%3E%3Cpath d='M63.0 2.2Q54.5 7.2 63.2 14.6M63.2 14.6Q53.5 18.4 60.5 28.2M60.5 28.2Q47.8 28.7 50.3 37.9M50.3 37.9Q40.2 37.5 42.6 49.0M42.6 49.0Q32.5 46.4 32.4 58.4M32.4 58.4Q21.8 51.4 18.4 60.2M18.4 60.2Q10.5 54.0 5.7 64.6' stroke-width='0.77'/%3E%3Cpath d='M84.4 2.9Q73.1 9.6 84.7 19.6M84.7 19.6Q68.7 23.6 74.3 34.7M74.3 34.7Q61.4 36.9 67.5 50.8M67.5 50.8Q53.9 50.3 57.0 65.6M57.0 65.6Q41.7 59.5 39.8 71.7M39.8 71.7Q28.0 65.9 24.7 80.8M24.7 80.8Q14.1 72.3 7.6 86.6' stroke-width='0.72'/%3E%3Cpath d='M109.1 3.8Q90.5 11.9 100.4 23.2M100.4 23.2Q85.0 29.3 96.2 44.8M96.2 44.8Q79.3 47.7 87.2 65.7M87.2 65.7Q66.7 62.2 67.6 77.7M67.6 77.7Q51.6 73.6 51.4 92.8M51.4 92.8Q36.2 85.2 31.9 104.4M31.9 104.4Q17.4 89.6 9.0 102.6' stroke-width='0.68'/%3E%3Cpath d='M125.9 4.4Q109.0 14.4 126.5 29.2M126.5 29.2Q107.1 36.9 121.0 56.4M121.0 56.4Q95.7 57.5 100.6 75.8M100.6 75.8Q80.4 75.0 85.1 97.9M85.1 97.9Q64.9 92.8 64.8 116.8M64.8 116.8Q43.6 102.7 36.8 120.5M36.8 120.5Q21.0 108.0 11.3 129.3' stroke-width='0.63'/%3E%3Cpath d='M155.4 5.4Q134.5 17.7 156.0 36.0M156.0 36.0Q126.5 43.5 136.9 63.8M136.9 63.8Q113.0 67.9 124.2 93.6M124.2 93.6Q99.2 92.5 105.0 120.8M105.0 120.8Q76.7 109.6 73.2 132.1M73.2 132.1Q51.5 121.3 45.5 148.7M45.5 148.7Q25.9 133.2 14.0 159.5' stroke-width='0.58'/%3E%3Cpath d='M188.6 6.6Q156.3 20.6 173.4 40.0M173.4 40.0Q146.9 50.6 166.2 77.5M166.2 77.5Q137.1 82.4 150.7 113.6M150.7 113.6Q115.3 107.5 116.8 134.3M88.9 160.4Q62.5 147.3 55.2 180.4M55.2 180.4Q30.1 154.8 15.5 177.3' stroke-width='0.54'/%3E%3Cpath d='M205.9 7.2Q178.3 23.5 206.7 47.7M206.7 47.7Q175.0 60.3 197.9 92.3M197.9 92.3Q156.4 94.0 164.5 124.0M164.5 124.0Q131.5 122.6 139.2 160.1M105.9 191.0Q71.3 168.0 60.2 197.0M60.2 197.0Q34.3 176.5 18.5 211.4' stroke-width='0.50'/%3E%3Cpath d='M150 112q6 22 -2 40' stroke-width='.6'/%3E%3C/g%3E%3Cg fill='rgba(255,250,240,.75)'%3E%3Ccircle cx='16.0' cy='0.6' r='1.6'/%3E%3Ccircle cx='14.5' cy='26.2' r='1.6'/%3E%3Ccircle cx='42.6' cy='49.0' r='1.6'/%3E%3Ccircle cx='87.2' cy='65.7' r='1.6'/%3E%3Ccircle cx='136.9' cy='63.8' r='1.6'/%3E%3Ccircle cx='206.7' cy='47.7' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 0 2px rgba(255,240,220,.18)); animation: toile 7s ease-in-out infinite;
  transform: scaleX(var(--sx, 1)) skew(calc(var(--vent, 0) * 1deg), calc(var(--vent, 0) * .7deg)) scaleY(calc(1 + var(--vent-abs, 0) * .012)); }
[data-saison="halloween"] .toiles::before { left: 0; transform-origin: 0 0; }
[data-saison="halloween"] .toiles::after { right: 0; transform-origin: 100% 0; translate: -240px 0; --sx: -1; animation-delay: -3.5s; }
@keyframes toile { 50% { scale: 1.012 1.02; } }
@media (max-width: 760px) { [data-saison="halloween"] .toiles::before, [data-saison="halloween"] .toiles::after { width: 130px; height: 130px; opacity: .7; } [data-saison="halloween"] .toiles::after { translate: -130px 0; } }
/* L'araignée : elle descend au bout de son fil, puis remonte ; un clic la fait fuir. */
.toiles .araignee { position: absolute; top: 18px; right: 96px; width: 22px; height: 230px; pointer-events: none; transform-origin: 50% 0; rotate: calc(var(--vent, 0) * -2.2deg); }
.araignee .fil { position: absolute; left: 50%; top: 0; width: 1px; height: 200px; margin-left: -.5px; background: rgba(240,232,220,.45); transform-origin: 50% 0; transform: scaleY(0); animation: fil 14s ease-in-out infinite; }
.araignee .bete { position: absolute; left: -3px; top: -10px; width: 28px; height: 28px; filter: drop-shadow(0 0 4px rgba(255,155,61,.45)); pointer-events: auto; cursor: pointer; animation: bete 14s ease-in-out infinite; }
.araignee .bete svg { display: block; width: 100%; height: 100%; overflow: visible; animation: gigote .6s ease-in-out infinite alternate; }
@keyframes fil { 0%, 8% { transform: scaleY(0); } 30%, 62% { transform: scaleY(1); } 80%, 100% { transform: scaleY(0); } }
@keyframes bete { 0%, 8% { transform: translateY(0); } 30%, 62% { transform: translateY(200px); } 80%, 100% { transform: translateY(0); } }
@keyframes gigote { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
/* Elle fuit depuis là où elle est, rapetisse et disparaît dans la toile, puis revient plus tard. */
.araignee .bete { transition: opacity .8s ease; }
.araignee.fuit .fil { animation: fuit-fil 1.1s ease-in forwards; }
.araignee.fuit .bete { animation: fuit-bete 1.1s ease-in forwards; }
.araignee.cachee .fil, .araignee.cachee .bete { animation: none; }
.araignee.cachee .bete { opacity: 0; pointer-events: none; }
@keyframes fuit-fil { from { transform: scaleY(var(--fil-depart, 1)); } to { transform: scaleY(0); } }
@keyframes fuit-bete { from { transform: translateY(var(--depart, 200px)); opacity: 1; } 80% { opacity: 1; } to { transform: translateY(-14px) scale(.35); opacity: 0; } }
@media (max-width: 760px) { .toiles .araignee { right: 40px; } }
.saison .chauve-souris { top: 0; left: 0; width: 40px; height: 18px; filter: drop-shadow(0 0 5px rgba(255,140,60,.55)); scale: var(--s, 1); animation: vol var(--t) linear var(--d) infinite backwards; }
.chauve-souris svg { display: block; width: 100%; height: 100%; animation: flap .16s ease-in-out infinite alternate; }
/* On peut les attraper : zone de clic agrandie, puis elles se débattent et partent en fumée. */
.saison .chauve-souris { pointer-events: auto; cursor: crosshair; padding: 12px; margin: -12px; box-sizing: content-box; touch-action: manipulation; }
.saison .chauve-souris.prise { animation: none; }
.chauve-souris.prise svg { animation: debat .06s linear infinite alternate; }
@keyframes debat { from { transform: scaleY(1) rotate(-14deg); } to { transform: scaleY(.3) rotate(14deg); } }
.saison .chauve-souris.essaim { pointer-events: none; animation: essaim 2.6s cubic-bezier(.4,.1,.6,.9) both; }
@keyframes essaim { from { translate: -80px var(--y0); } to { translate: 110vw var(--y1); } }
.saison .fumee { width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: radial-gradient(circle, rgba(185,140,225,.6), rgba(120,80,165,.25) 45%, transparent 70%); animation: fumee .8s ease-out forwards; }
@keyframes fumee { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.saison.orage { animation: orage 1.4s steps(1); }
@keyframes orage { 0%, 22%, 48%, 100% { background-color: transparent; } 8%, 34% { background-color: rgba(220,230,255,.16); } }
@keyframes flap { to { transform: scaleY(.3); } }
@keyframes vol { 0% { translate: -60px 24vh; } 9% { translate: 22vw 13vh; } 18% { translate: 48vw 22vh; } 27% { translate: 76vw 9vh; } 36%, 100% { translate: 110vw 16vh; } }
/* ---------- Fêtes : une guirlande en haut de la page et un passant dans le ciel ---------- */
.guirlande { position: absolute; top: 0; left: 0; width: 100%; height: 120px; z-index: 44; pointer-events: none; }
.guirlande svg { display: block; width: 100%; height: 100%; overflow: visible; }
.guirlande .scint { animation: scint 1.8s ease-in-out infinite; }
@keyframes scint { 50% { opacity: .35; } }
.guirlande .balance { transform-box: fill-box; transform-origin: 50% 0; animation: fanion 3s ease-in-out infinite alternate; }
@keyframes fanion { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.passant { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 0; z-index: 46; padding: 0; border: 0; background: none; cursor: pointer; animation: survol 34s linear 7s infinite backwards; }
.passant svg { display: block; width: 100%; height: 100%; overflow: visible; }
.passant.traineau { width: 150px; height: 54px; }
.passant.traineau svg { animation: flotte 1.4s ease-in-out infinite alternate; }
.passant.cupidon { width: 56px; height: 50px; }
.passant.cupidon .ailes { transform-box: fill-box; transform-origin: 50% 100%; animation: flap .2s ease-in-out infinite alternate; }
.passant.lapin { width: 46px; height: 46px; }
.passant.lapin svg { animation: saut .45s ease-in-out infinite alternate; }
@keyframes saut { from { transform: translateY(6px) scaleY(.95); } to { transform: translateY(-10px) scaleY(1.04); } }
.passant.mouette { width: 60px; height: 26px; }
.passant.mouette svg { animation: flap .3s ease-in-out infinite alternate; }
.passant.touche { animation-play-state: paused; }
.eclat { position: fixed; z-index: 80; pointer-events: none; font: 400 1.2rem/1 var(--body); animation: eclat 1.1s ease-out forwards; }
@keyframes eclat { to { transform: translate(var(--ex), var(--ey)) scale(.6); opacity: 0; } }
.oeuf-tombe { position: fixed; z-index: 80; width: 14px; height: 18px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; pointer-events: none;
  background: repeating-linear-gradient(160deg, #ffd1e8 0 4px, #fff3b0 4px 8px, #c8f2ff 8px 12px); animation: tombe-oeuf 1.4s cubic-bezier(.5,0,.9,.5) forwards; }
@keyframes tombe-oeuf { to { transform: translateY(70vh) rotate(380deg); opacity: 0; } }
[data-saison="saint-valentin"] .marquee::after { background: 
    radial-gradient(circle, #ff8fb1 2.6px, transparent 3.4px) 7px 0 / var(--b) var(--b) repeat-x,
    radial-gradient(circle, #ff8fb1 2.6px, transparent 3.4px) 7px 100% / var(--b) var(--b) repeat-x,
    radial-gradient(circle, #ff8fb1 2.6px, transparent 3.4px) 0 7px / var(--b) var(--b) repeat-y,
    radial-gradient(circle, #ff8fb1 2.6px, transparent 3.4px) 100% 7px / var(--b) var(--b) repeat-y; filter: drop-shadow(0 0 6px rgba(255,120,170,.9)); }
[data-saison="paques"] .marquee::after { background: 
    radial-gradient(circle, #b8f0c8 2.6px, transparent 3.4px) 7px 0 / var(--b) var(--b) repeat-x,
    radial-gradient(circle, #b8f0c8 2.6px, transparent 3.4px) 7px 100% / var(--b) var(--b) repeat-x,
    radial-gradient(circle, #b8f0c8 2.6px, transparent 3.4px) 0 7px / var(--b) var(--b) repeat-y,
    radial-gradient(circle, #b8f0c8 2.6px, transparent 3.4px) 100% 7px / var(--b) var(--b) repeat-y; filter: drop-shadow(0 0 6px rgba(184,240,200,.9)); }
[data-saison="ete"] .marquee::after { background: 
    radial-gradient(circle, #ffb36b 2.6px, transparent 3.4px) 7px 0 / var(--b) var(--b) repeat-x,
    radial-gradient(circle, #ffb36b 2.6px, transparent 3.4px) 7px 100% / var(--b) var(--b) repeat-x,
    radial-gradient(circle, #ffb36b 2.6px, transparent 3.4px) 0 7px / var(--b) var(--b) repeat-y,
    radial-gradient(circle, #ffb36b 2.6px, transparent 3.4px) 100% 7px / var(--b) var(--b) repeat-y; filter: drop-shadow(0 0 6px rgba(255,179,107,.9)); }
@media (prefers-reduced-motion: reduce) { .guirlande *, .passant, .passant * { animation: none !important; } .passant { left: 72vw; } }
/* Sur écran tactile (téléphones, tablettes), la guirlande reste immobile : moins de calcul à chaque image. */
@media (hover: none) { .guirlande .scint, .guirlande .balance { animation: none; } }
[data-saison="noel"] .marquee { --bulb: #ffd76b; }
[data-saison="noel"] .marquee::after { background: 
    radial-gradient(circle, #ff6b6b 2.6px, transparent 3.4px) 7px 0 / var(--b) var(--b) repeat-x,
    radial-gradient(circle, #ff6b6b 2.6px, transparent 3.4px) 7px 100% / var(--b) var(--b) repeat-x,
    radial-gradient(circle, #ff6b6b 2.6px, transparent 3.4px) 0 7px / var(--b) var(--b) repeat-y,
    radial-gradient(circle, #ff6b6b 2.6px, transparent 3.4px) 100% 7px / var(--b) var(--b) repeat-y; filter: drop-shadow(0 0 6px rgba(255,90,90,.9)); }
[data-saison="noel"] .saison { opacity: .6; animation: neige 14s linear infinite;
  background-image: radial-gradient(circle at 10% 20%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 60% 70%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 80% 30%, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 35% 85%, #fff 0 1.2px, transparent 1.8px);
  background-size: 220px 220px, 160px 160px, 300px 300px, 190px 190px; }
@keyframes neige { to { background-position: 30px 220px, -20px 160px, 40px 300px, -10px 190px; } }
[data-saison="saint-valentin"] .marquee { --bulb: #ff8fb1; }
.coeur { bottom: -30px; color: #ff6f9a; font-size: calc(20px * var(--s)); opacity: .45; animation: monte var(--t) linear var(--d) infinite; }
@keyframes monte { 0% { transform: translate(0, 0) rotate(-10deg); } 50% { transform: translate(30px, -55vh) rotate(10deg); } 100% { transform: translate(-10px, -115vh) rotate(-10deg); } }
[data-saison="paques"] .marquee { --bulb: #ffe08a; }
.oeuf { top: -30px; width: calc(12px * var(--s)); height: calc(15px * var(--s)); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: hsl(var(--h) 75% 80%); opacity: .55; animation: tombe var(--t) linear var(--d) infinite; }
@keyframes tombe { to { transform: translate(40px, 112vh) rotate(260deg); } }
[data-saison="ete"] .marquee { --bulb: #ffe14d; }
.luciole { top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: #e9ff8a; box-shadow: 0 0 8px 2px rgba(220,255,120,.6); opacity: 0; animation: luciole var(--t) ease-in-out var(--d) infinite; }
@keyframes luciole { 0%, 100% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .9; } 50% { transform: translate(60px, -40px); opacity: .2; } 70% { opacity: .9; } 85% { transform: translate(-30px, 20px); opacity: 0; } }

/* ---------- Le curseur : une flèche dorée ; sur ce qui se clique, avec un grain de pop-corn ---------- */
@media (hover: hover) and (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M3 2v22l6-5.5 4.2 8.6 3.9-1.8-4.1-8.5H21z' fill='%23ffcf6b' stroke='%231b0d14' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M5 6v13' stroke='%23fff6d8' stroke-width='1.2' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") 3 2, auto; }
  a, button, summary, label, select, [role="button"], input[type="checkbox"], input[type="range"], .chip span, .nv-card, .nv-tile, .tete, .marquee .lettre, .ampoules .base i.grillee, .reel-btn, .salle, .seats, .cabine, .applaudir {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M3 2v22l6-5.5 4.2 8.6 3.9-1.8-4.1-8.5H21z' fill='%23ffcf6b' stroke='%231b0d14' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg stroke='%231b0d14' stroke-width='1.1' fill='%23fff3dc'%3E%3Ccircle cx='23' cy='23.5' r='3.6'/%3E%3Ccircle cx='27.6' cy='22.4' r='3.3'/%3E%3Ccircle cx='25.4' cy='27.6' r='3.4'/%3E%3C/g%3E%3Ccircle cx='25.2' cy='24.6' r='1.3' fill='%23e9b04f'/%3E%3C/svg%3E") 3 2, pointer !important; }
  input[type="text"], input[type="number"], textarea { cursor: text; }
  .nv-track.drag, .nv-track.drag .nv-card, .nv-track.drag .nv-tile { cursor: grabbing !important; }
  .saison .chauve-souris { cursor: crosshair !important; }
}

/* ---------- Les salles : chacune son époque, sa typo, ses couleurs, son décor ---------- */
@property --led { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.decor-salle { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
.salle-tag { display: none; }

/* === Film muet (années 1920) : sépia, cartons à double filet, pellicule qui défile sur les côtés === */
:root[data-theme="muet"] { filter: grayscale(1) sepia(.35) contrast(1.08); --velvet: #111; --velvet-2: #0c0c0c; --seat: #3a3a3a; --bulb: #efe7d6; --red: #efe7d6; --cream: #f2ecdf; --dim: #b8b0a2; }
[data-theme="muet"] body { background: radial-gradient(ellipse at 50% 25%, #2b2b2b, #0a0a0a 75%); }
[data-theme="muet"] .valance { display: none; }
[data-theme="muet"] .marquee { background: #000; border-radius: 0; box-shadow: 0 0 0 4px #000, 0 0 0 6px #efe7d6, 0 0 0 10px #000, 0 0 0 11px #efe7d6, 0 20px 60px rgba(0,0,0,.7); }
[data-theme="muet"] .ampoules, [data-theme="muet"] .marquee::before, [data-theme="muet"] .marquee::after { display: none; }
[data-theme="muet"] .marquee h1, [data-theme="muet"] .act h2 { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; color: #f2ecdf; text-shadow: none; }
[data-theme="muet"] .marquee small { font-family: var(--serif); font-style: italic; letter-spacing: .08em; text-transform: none; font-size: 1rem; }
[data-theme="muet"] .act { border-radius: 0; background: #0c0c0c; border: 3px double #efe7d6; }
[data-theme="muet"] .act::before { display: none; }
[data-theme="muet"] .toc, [data-theme="muet"] .nav { border-radius: 0; border: 3px double #efe7d6; background: #0c0c0c; }
[data-theme="muet"] .act h2 { display: inline-block; justify-self: start; padding: 6px 16px 4px; border: 3px double #efe7d6; font-size: 2.2rem; }
[data-theme="muet"] .act .label, [data-theme="muet"] .act header > span:first-child:not(.num) { background: none; color: #efe7d6; border-bottom: 1px solid #efe7d6; border-radius: 0; transform: none; font-family: var(--serif); font-style: italic; letter-spacing: .04em; text-transform: none; font-size: .95rem; }
[data-theme="muet"] .draperie { width: clamp(0px, calc((100vw - 1180px) / 2), 74px); animation: none; transform: none; }
[data-theme="muet"] .draperie i.bas, [data-theme="muet"] .draperie .tranche, [data-theme="muet"] .draperie .gland, [data-theme="muet"] .draperie::after { display: none; }
[data-theme="muet"] .draperie i.haut { clip-path: none; transform: none; background-repeat: repeat-y, repeat-y, no-repeat;
  background-image: repeating-linear-gradient(transparent 0 10px, #d8d0c0 10px 22px, transparent 22px 32px), repeating-linear-gradient(transparent 0 10px, #d8d0c0 10px 22px, transparent 22px 32px), linear-gradient(90deg, #050505, #1a1a1a 50%, #050505);
  background-size: 12px 100%, 12px 100%, 100% 100%; background-position: 10px 0, calc(100% - 10px) 0, 0 0; animation: film-defile .45s linear infinite; }
@keyframes film-defile { to { background-position: 10px 32px, calc(100% - 10px) 32px, 0 0; } }
[data-theme="muet"] .seats { filter: brightness(.9); }
.muet-fx { position: fixed; inset: 0; z-index: 56; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55)), linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.2) 18% 18.12%, transparent 18.12% 63%, rgba(0,0,0,.35) 63% 63.2%, transparent 63.2%);
  animation: muet-flicker .12s steps(2) infinite, muet-rayures 1.4s steps(7) infinite; }
@keyframes muet-flicker { 50% { opacity: .82; } }
@keyframes muet-rayures { 0% { background-position: 0 0, 0 0; } 20% { background-position: 0 0, 27vw 0; } 40% { background-position: 0 0, -14vw 0; } 60% { background-position: 0 0, 41vw 0; } 80% { background-position: 0 0, -30vw 0; } }

/* === Art déco (années 1930) : bleu canard et or, typo Limelight, pans coupés, soleil de rayons === */
:root[data-theme="artdeco"] { --velvet: #0b1416; --velvet-2: #102024; --seat: #2b4a46; --red: #c9a227; --bulb: #e8c66a; --dim: #a9b8b2; --cream: #f3ead2; }
[data-theme="artdeco"] body { background: radial-gradient(circle at 50% 100%, transparent 0 22px, rgba(212,175,55,.13) 23px 25px, transparent 26px 34px, rgba(212,175,55,.08) 35px 36px, transparent 37px) 0 0 / 80px 40px, var(--velvet); }
[data-theme="artdeco"] .marquee h1, [data-theme="artdeco"] .act h2, [data-theme="artdeco"] .salle b { font-family: "Limelight", var(--display); letter-spacing: .05em; }
[data-theme="artdeco"] .marquee h1 { font-size: clamp(2rem, 5.6vw, 3.9rem); color: #f6dc98; text-shadow: 0 0 22px rgba(232,198,106,.45); }
[data-theme="artdeco"] .marquee { border-radius: 0; background: linear-gradient(#13282c, #0b1416);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  box-shadow: inset 0 0 0 3px #c9a227, inset 0 0 0 8px #0b1416, inset 0 0 0 9px #c9a227; }
[data-theme="artdeco"] .ampoules i { border-radius: 1px; transform: rotate(45deg); }
[data-theme="artdeco"] .toc, [data-theme="artdeco"] .nav { border-radius: 0; border: 1px solid rgba(201,162,39,.75); }
[data-theme="artdeco"] .act { border-radius: 0; border: 1px solid rgba(201,162,39,.75); box-shadow: inset 0 0 0 5px var(--velvet-2), inset 0 0 0 6px rgba(201,162,39,.35); }
[data-theme="artdeco"] .act::before { inset: 0; height: auto;
  background: linear-gradient(135deg, #c9a227 0 12px, transparent 12px) top left / 34px 34px no-repeat, linear-gradient(225deg, #c9a227 0 12px, transparent 12px) top right / 34px 34px no-repeat,
    linear-gradient(45deg, #c9a227 0 12px, transparent 12px) bottom left / 34px 34px no-repeat, linear-gradient(315deg, #c9a227 0 12px, transparent 12px) bottom right / 34px 34px no-repeat; }
[data-theme="artdeco"] .act .label, [data-theme="artdeco"] .act header > span:first-child:not(.num) { background: #c9a227; color: #0b1416; border-radius: 0; transform: none; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); padding-inline: 12px; }
[data-theme="artdeco"] .valance { height: 150px; filter: none; -webkit-mask: radial-gradient(ellipse 55% 100% at 50% 0, #000 30%, transparent 75%); mask: radial-gradient(ellipse 55% 100% at 50% 0, #000 30%, transparent 75%);
  background: repeating-conic-gradient(from 90deg at 50% 0, rgba(201,162,39,.38) 0 3deg, transparent 3deg 9deg); animation: soleil 6s ease-in-out infinite; }
[data-theme="artdeco"] .valance::after { display: none; }
@keyframes soleil { 50% { opacity: .55; } }
[data-theme="artdeco"] .curtain i, [data-theme="artdeco"] .draperie i:not(.gland) { filter: hue-rotate(150deg) saturate(.75); }
[data-theme="artdeco"] .seats { filter: hue-rotate(150deg) saturate(.6); }

/* === Drive-in (années 1950) : nuit étoilée, lune, enseigne en néon rose et cyan, voitures === */
:root[data-theme="drivein"] { --velvet: #0a0f1f; --velvet-2: #111a33; --seat: #263252; --dim: #a4adc4; --bulb: #5ff2e5; --red: #ff4fa0; --cream: #f6f1ff; }
[data-theme="drivein"] body { background: radial-gradient(1px 1px at 20px 30px, #fff, transparent) 0 0 / 120px 90px, radial-gradient(1.5px 1.5px at 70px 60px, rgba(255,255,255,.8), transparent) 0 0 / 170px 130px, radial-gradient(1px 1px at 110px 20px, rgba(255,255,255,.6), transparent) 0 0 / 90px 110px, linear-gradient(#060914, #142046 70%, #1d2b55) fixed; }
[data-theme="drivein"] .valance, [data-theme="drivein"] .draperie, [data-theme="drivein"] .tete, [data-theme="drivein"] .seats::after, [data-theme="drivein"] .dossiers2 { display: none; }
[data-theme="drivein"] .seats { background: linear-gradient(transparent 60%, rgba(10,14,30,.6)); -webkit-mask: none; mask: none; }
[data-theme="drivein"] .ampoules, [data-theme="drivein"] .marquee::before, [data-theme="drivein"] .marquee::after { display: none; }
[data-theme="drivein"] .marquee { border-radius: 26px; background: rgba(10,15,31,.85); box-shadow: 0 0 0 3px #5ff2e5, 0 0 18px rgba(95,242,229,.8), inset 0 0 18px rgba(95,242,229,.35), 0 20px 60px rgba(0,0,0,.6); }
[data-theme="drivein"] .marquee h1 { font-family: "Pacifico", cursive; text-transform: none; letter-spacing: 0; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1.25; color: #ffe6f4;
  text-shadow: 0 0 4px #fff, 0 0 12px #ff4fa0, 0 0 28px #ff4fa0, 0 0 48px rgba(255,79,160,.6); }
[data-theme="drivein"] .marquee small { color: #5ff2e5; text-shadow: 0 0 10px rgba(95,242,229,.9); }
[data-theme="drivein"] .act h2 { font-family: "Pacifico", cursive; text-transform: none; letter-spacing: 0; font-size: 1.9rem; line-height: 1.3; color: #fff; text-shadow: 0 0 14px rgba(255,79,160,.55); }
[data-theme="drivein"] .act { border-radius: 24px; border: 1px solid rgba(95,242,229,.35); box-shadow: 0 0 26px rgba(95,242,229,.08), inset 0 1px 0 rgba(255,255,255,.06); }
[data-theme="drivein"] .toc, [data-theme="drivein"] .nav { border-radius: 24px; border-color: rgba(95,242,229,.35); box-shadow: 0 0 22px rgba(95,242,229,.08); }
[data-theme="drivein"] .act::before { background: linear-gradient(90deg, transparent, #ff4fa0, #5ff2e5, transparent); opacity: .7; }
[data-theme="drivein"] .act .label, [data-theme="drivein"] .act header > span:first-child:not(.num) { background: #ff4fa0; color: #fff; border-radius: 99px; transform: none; box-shadow: 0 0 12px rgba(255,79,160,.7); }
[data-theme="drivein"] .decor-salle { display: block;
  background: radial-gradient(circle at 86% 13%, #fdf6d8 0 34px, rgba(253,246,216,.18) 36px, transparent 90px); }
[data-theme="drivein"] .decor-salle::after { content: ""; position: absolute; top: 9%; left: -10%; width: 140px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff); transform: rotate(-18deg); opacity: 0; animation: filante 9s linear 3s infinite; }
@keyframes filante { 0% { opacity: 0; transform: translate(0, 0) rotate(-18deg); } 3% { opacity: 1; } 12% { opacity: 0; transform: translate(60vw, 20vh) rotate(-18deg); } 100% { opacity: 0; transform: translate(60vw, 20vh) rotate(-18deg); } }

/* === IMAX (aujourd'hui) : noir et bleu électrique, typo Orbitron, verre, bande LED, écran géant === */
:root[data-theme="imax"] { --velvet: #04070d; --velvet-2: #0b1222; --seat: #1d2a40; --bulb: #8fd3ff; --red: #2f6bff; --dim: #93a4bf; --cream: #eaf4ff; }
[data-theme="imax"] body { background: repeating-linear-gradient(90deg, rgba(143,211,255,.025) 0 1px, transparent 1px 46px), var(--velvet); }
[data-theme="imax"] .valance, [data-theme="imax"] .draperie, [data-theme="imax"] .ampoules, [data-theme="imax"] .marquee::before, [data-theme="imax"] .marquee::after { display: none; }
[data-theme="imax"] .marquee h1, [data-theme="imax"] .act h2, [data-theme="imax"] .salle b { font-family: "Orbitron", var(--display); font-weight: 700; letter-spacing: .06em; }
[data-theme="imax"] .marquee h1 { font-size: clamp(2rem, 6.4vw, 4.2rem); color: #eaf4ff; text-shadow: 0 0 24px rgba(47,107,255,.65); }
[data-theme="imax"] .act h2 { font-size: 1.7rem; }
[data-theme="imax"] .marquee { border-radius: 18px; border: 2px solid transparent; animation: led 5s linear infinite;
  background: linear-gradient(#0b1424, #05080f) padding-box, conic-gradient(from var(--led), #2f6bff, #8fd3ff, transparent 30%, transparent 70%, #2f6bff) border-box;
  box-shadow: 0 0 40px rgba(47,107,255,.25), 0 20px 60px rgba(0,0,0,.6); }
@keyframes led { to { --led: 360deg; } }
[data-theme="imax"] .act { border-radius: 20px; border: 1px solid rgba(143,211,255,.22); background: linear-gradient(180deg, rgba(20,32,58,.85), rgba(8,13,24,.85)); }
[data-theme="imax"] .toc, [data-theme="imax"] .nav { border-radius: 20px; border-color: rgba(143,211,255,.22); background: linear-gradient(180deg, rgba(20,32,58,.85), rgba(8,13,24,.85)); }
[data-theme="imax"] .act::before { background: linear-gradient(90deg, transparent, #8fd3ff, transparent); }
[data-theme="imax"] .act .label, [data-theme="imax"] .act header > span:first-child:not(.num) { background: rgba(47,107,255,.2); color: #8fd3ff; border: 1px solid rgba(143,211,255,.5); border-radius: 6px; transform: none; font-family: "Orbitron", var(--body); letter-spacing: .12em; }
[data-theme="imax"] .decor-salle { display: block; background: radial-gradient(ellipse 75% 46px at 50% 0, rgba(143,211,255,.55), rgba(47,107,255,.18) 55%, transparent 75%); }
[data-theme="imax"] .decor-salle::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143,211,255,.6), transparent); animation: laser 8s linear infinite; }
@keyframes laser { from { transform: translateY(0); opacity: .9; } to { transform: translateY(100vh); opacity: 0; } }
[data-theme="imax"] .curtain i { filter: hue-rotate(200deg) saturate(.5) brightness(.7); }
[data-theme="imax"] .seats { filter: hue-rotate(210deg) saturate(.45) brightness(.9); }
/* ---------- Ce qui vit dans chaque salle ---------- */
.parking, .pianiste, .lustre, .soucoupe { display: none; }
/* Drive-in : des voitures des années 50, qui klaxonnent et allument leurs phares. */
[data-theme="drivein"] .parking { display: block; position: absolute; inset: 0; }
.voiture { position: absolute; width: 92px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%; animation: tangue 5s ease-in-out var(--d, 0s) infinite; }
.voiture svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes tangue { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-1.2deg); } 82% { transform: rotate(.8deg); } }
.voiture .phare { position: absolute; right: -2px; top: 22px; width: 6px; height: 5px; border-radius: 50%; background: #fff7c4; box-shadow: 0 0 6px 2px rgba(255,240,170,.5); }
.voiture .phare::after { content: ""; position: absolute; left: 4px; top: 50%; width: 120px; height: 46px; transform: translateY(-50%); opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,245,190,.55), transparent); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%); transition: opacity .15s ease; }
.voiture.flash .phare::after { opacity: 1; }
.voiture.flash { animation: klaxon .12s linear 4 alternate; }
@keyframes klaxon { to { transform: translateY(-2px) rotate(-1deg); } }
.voiture .bulle-v { position: absolute; left: 50%; bottom: calc(100% + 4px); padding: 2px 8px; border-radius: 8px; white-space: nowrap; background: var(--cream); color: var(--ink); font: 800 .7rem var(--body); opacity: 0; transform: translateX(-50%); pointer-events: none; }
.voiture.flash .bulle-v { animation: bulle 1.8s ease forwards; }
/* La soucoupe volante traverse le ciel ; un clic et elle allume son rayon. */
[data-theme="drivein"] .soucoupe { display: block; position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 0; z-index: 46; width: 74px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; animation: survol 32s linear 4s infinite; }
.soucoupe svg { display: block; width: 100%; height: 100%; overflow: visible; animation: flotte 1.6s ease-in-out infinite alternate; }
@keyframes flotte { to { transform: translateY(5px) rotate(4deg); } }
@keyframes survol { 0% { transform: translateX(-120px); } 40% { transform: translateX(45vw) translateY(4vh); } 50% { transform: translateX(55vw) translateY(-2vh); } 100% { transform: translateX(110vw) translateY(3vh); } }
.soucoupe .rayon { position: absolute; left: 50%; top: 30px; width: 120px; height: 220px; margin-left: -60px; opacity: 0; pointer-events: none;
  background: linear-gradient(rgba(170,255,210,.55), rgba(170,255,210,0)); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); transition: opacity .3s ease; }
.soucoupe.aspire .rayon { opacity: 1; }
.soucoupe.aspire { animation-play-state: paused; }
.soucoupe .feu { animation: feux .5s steps(1) infinite; }
.soucoupe .feu:nth-of-type(2) { animation-delay: -.25s; }
@keyframes feux { 50% { fill: #ff4fa0; } }
/* Film muet : un pianiste accompagne le film ; un clic, il joue un air. */
[data-theme="muet"] .pianiste { display: block; position: absolute; right: 0; top: 22px; z-index: 4; width: 128px; height: 120px; filter: drop-shadow(0 0 8px rgba(239,231,214,.25)); padding: 0; border: 0; background: none; cursor: pointer; }
.pianiste svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pianiste .main-g, .pianiste .main-d { transform-box: view-box; animation: joue .32s ease-in-out infinite alternate; }
.pianiste .main-g { transform-origin: 52px 50px; }
.pianiste .main-d { transform-origin: 66px 50px; animation-delay: -.16s; }
@keyframes joue { to { transform: translateY(-2.5px); } }
.pianiste .tete-pi { transform-box: view-box; transform-origin: 48px 40px; animation: balance-pi 2.4s ease-in-out infinite alternate; }
@keyframes balance-pi { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.pianiste.virtuose .main-g, .pianiste.virtuose .main-d { animation-duration: .12s; }
.note-volante { position: absolute; z-index: 5; font: 400 1.3rem/1 var(--serif); color: #efe7d6; pointer-events: none; animation: s-envole 1.6s ease-out forwards; }
@keyframes s-envole { to { transform: translate(var(--nx, 20px), -70px) rotate(var(--nr, 15deg)); opacity: 0; } }
/* Art déco : deux lustres qui se balancent ; un clic, ils scintillent. */
[data-theme="artdeco"] .lustre { display: block; position: absolute; top: 0; z-index: 4; width: 84px; height: 132px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transform-origin: 50% 0; animation: lustre 6s ease-in-out infinite alternate; }
[data-theme="artdeco"] .lustre.g { left: calc(50% - 470px); }
[data-theme="artdeco"] .lustre.d { left: calc(50% + 386px); animation-delay: -3s; }
.lustre svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(232,198,106,.35)); transition: filter .4s ease; }
@keyframes lustre { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.lustre .goutte { animation: cristal 2.6s ease-in-out infinite; }
.lustre .goutte:nth-of-type(2n) { animation-delay: -1.3s; }
@keyframes cristal { 50% { opacity: .45; } }
.lustre.brille svg { filter: drop-shadow(0 0 22px rgba(255,236,170,.95)) brightness(1.35); }
.lustre.brille { animation: lustre-secoue .5s ease-in-out 3 alternate; }
@keyframes lustre-secoue { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@media (max-width: 1100px) { [data-theme="artdeco"] .lustre { display: none; } }
/* IMAX : lunettes 3D sur le nez des spectateurs, et un léger relief rouge et cyan sur l'enseigne. */
.tete .l3d { display: none; }
[data-theme="imax"] .tete.chut .l3d { display: inline; }
[data-theme="imax"] .marquee h1 { animation: relief 5s ease-in-out infinite; }
@keyframes relief { 0%, 100% { text-shadow: -2px 0 rgba(255,40,80,.55), 2px 0 rgba(0,220,255,.55), 0 0 24px rgba(47,107,255,.65); } 50% { text-shadow: -5px 0 rgba(255,40,80,.5), 5px 0 rgba(0,220,255,.5), 0 0 30px rgba(47,107,255,.8); } }
@media (prefers-reduced-motion: reduce) { .voiture, .soucoupe, .soucoupe svg, .pianiste *, .lustre, .lustre *, [data-theme="imax"] .marquee h1 { animation: none !important; } [data-theme="drivein"] .soucoupe { left: 70vw; } }


/* ---------- L'heure de la séance ---------- */
:root[data-heure="minuit"]:not([data-theme]) { --velvet: #12080c; --velvet-2: #1b0e14; }
.heure-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(120deg, rgba(255,236,190,.06) 0 60px, transparent 60px 150px);
  -webkit-mask: radial-gradient(ellipse 70% 60% at 0 0, #000, transparent 70%); mask: radial-gradient(ellipse 70% 60% at 0 0, #000, transparent 70%); }

/* ---------- La cabine du projectionniste ---------- */
.cabine { position: absolute; left: 50%; top: -76px; z-index: 2; width: 78px; transform: translateX(-50%); }
.cabine .vitre { position: relative; height: 40px; border-radius: 5px; overflow: hidden;
  background: radial-gradient(ellipse 90% 100% at 50% 100%, rgba(255,214,150,.6), rgba(255,170,90,.12) 75%), #241210;
  box-shadow: 0 0 0 3px #4a2a36, 0 0 0 5px #1b0d14, 0 0 24px rgba(255,200,120,.25), inset 0 0 10px rgba(0,0,0,.6); }
/* Le projectionniste : casquette, lunettes, moustache, bretelles, derrière son projecteur à bobines. */
.cabine svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cabine svg * { transform-box: view-box; }
.cabine .bob { position: absolute; top: 3.5px; width: 15px; height: 15px; border-radius: 50%; will-change: transform; animation: tourne-bobine 2.4s linear infinite;
  background: radial-gradient(circle, #c98b2e 0 1.6px, transparent 2.1px), repeating-conic-gradient(#6b4a2c 0 7deg, transparent 7deg 45deg), #1a0e0c; box-shadow: inset 0 0 0 1.2px #6b4a2c; }
.cabine .bob.g { left: 38.5px; } .cabine .bob.d { left: 54.5px; }
@keyframes tourne-bobine { to { transform: rotate(360deg); } }
.cabine .tete-p { transform-origin: 18px 25px; transition: transform .8s ease; }
.cabine.dort .tete-p { transform: rotate(-16deg) translate(-1px, 2px); }
.cabine:not(.dort):not(.salut) .tete-p { animation: surveille 6s ease-in-out infinite; }
@keyframes surveille { 0%, 40%, 100% { transform: none; } 50%, 70% { transform: rotate(7deg) translateX(.6px); } 80% { transform: rotate(-3deg); } }
.cabine.dort .bob { animation-duration: 9s; }
.cabine .yeux-fermes { display: none; }
.cabine.dort .yeux-fermes { display: inline; }
.cabine .bras-p { transform-origin: 27px 31px; opacity: 0; }
.cabine.salut .bras-p { opacity: 1; animation: coucou .32s ease-in-out 6 alternate; }
@keyframes coucou { from { transform: rotate(-25deg); } to { transform: rotate(20deg); } }
.cabine .projo { position: absolute; left: 68px; top: 21.5px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #ffe2a8 60%, #b07a2a); box-shadow: 0 0 12px 4px rgba(255,220,150,.75); }
.cabine .bulle { position: absolute; left: 50%; top: calc(100% + 8px); padding: 3px 9px; border-radius: 8px; white-space: nowrap; background: var(--cream); color: var(--ink); font: 800 .72rem var(--body); opacity: 0; transform: translateX(-50%); pointer-events: none; }
.cabine.parle .bulle { animation: bulle 2.2s ease forwards; }
.cabine.dort.parle .bulle { animation-duration: 4s; }
@media (max-width: 760px) { .cabine { display: none; } }

/* ---------- Panne de courant ---------- */
.panne-fx { position: fixed; inset: 0; z-index: 76; pointer-events: none; background: rgba(2,1,2,.97); animation: panne-in .2s steps(2) both;
  -webkit-mask: radial-gradient(circle 170px at var(--tx, 50%) var(--ty, 50%), transparent 35%, #000 78%); mask: radial-gradient(circle 170px at var(--tx, 50%) var(--ty, 50%), transparent 35%, #000 78%); }
@keyframes panne-in { from { opacity: 0; } }
.panne-fx .exit { position: absolute; bottom: 24px; padding: 7px 14px 5px; border-radius: 6px; font: 400 1.4rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #eafff2; background: #1f9d5c; box-shadow: 0 0 26px rgba(60,220,140,.75); }
.panne-fx .exit.g { left: 24px; } .panne-fx .exit.d { right: 24px; }
.panne-fx.retour { animation: retour-courant 1.5s steps(1) forwards; }
@keyframes retour-courant { 0% { opacity: 1; } 15% { opacity: 0; } 25% { opacity: 1; } 40% { opacity: 0; } 50% { opacity: .8; } 65%, 100% { opacity: 0; } }

/* ---------- La pellicule qui brûle ---------- */
@property --r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.brule { position: fixed; inset: 0; z-index: 77; pointer-events: none; }
.brule i { position: absolute; inset: 0; animation: brule 3.2s cubic-bezier(.5,0,.9,.45) var(--dl) both;
  background: radial-gradient(circle at var(--bx) var(--by), #fffbe8 0 var(--r), #ffb347 calc(var(--r) + 3px), #7a2a00 calc(var(--r) + 10px), rgba(20,8,0,.88) calc(var(--r) + 16px), transparent calc(var(--r) + 46px)); }
@keyframes brule { from { --r: 0px; } to { --r: 120vmax; } }
.brule.repart { animation: repart .8s ease forwards; }
@keyframes repart { to { opacity: 0; } }

/* ---------- Ton fauteuil ---------- */
.seats { cursor: pointer; }
.tete.toi svg { filter: drop-shadow(0 -1px 0 rgba(255,207,107,.95)) drop-shadow(0 0 5px rgba(255,207,107,.55)); }
.tete.toi::after { content: "Toi"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font: 800 .62rem var(--body); letter-spacing: .08em; color: var(--bulb); }

/* ---------- L'applaudimètre ---------- */
.applaudimetre { display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; max-width: 520px; margin: 8px auto 0; }
.applaudir { font: 800 .9rem var(--body); padding: 9px 18px; border-radius: 99px; border: 1px solid rgba(255,207,107,.45); background: rgba(255,207,107,.08); color: var(--bulb); transition: transform .1s ease, box-shadow .3s ease; }
.applaudir:active { transform: scale(.92); }
.applaudimetre.chaud .applaudir { box-shadow: 0 0 20px rgba(255,207,107,.5); }
.jauge { width: 170px; height: 12px; border-radius: 6px; overflow: hidden; background: #0f080c; box-shadow: inset 0 0 0 1px var(--seat); }
.jauge i { display: block; height: 100%; clip-path: inset(0 100% 0 0); background: linear-gradient(90deg, #5fd39a, var(--bulb) 60%, #e5413a);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px); mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px); }
.record { flex-basis: 100%; margin: 0; text-align: center; font: italic 400 .95rem var(--serif); color: var(--dim); }

/* ---------- Séance rétro (code 1895) ---------- */
.retro { position: fixed; inset: 0; z-index: 89; display: grid; place-items: center; background: #0a0806; animation: panne-in .6s ease both; }
.retro .carton { grid-area: 1 / 1; max-width: calc(100vw - 48px); padding: 34px 46px; text-align: center; color: #efe6d6; border: 3px double #d8cfbf; outline: 1px solid #d8cfbf; outline-offset: 8px; font: italic 400 1.3rem/1.3 var(--serif); transition: opacity .8s ease; }
.retro .carton b { display: block; margin: 10px 0; font: 400 clamp(2rem, 6vw, 3.4rem)/1 var(--display); letter-spacing: .04em; }
.retro .carton p { margin: 0; }
.retro video { grid-area: 1 / 1; width: min(960px, 92vw); max-height: 78vh; opacity: 0; transition: opacity 1s ease; filter: sepia(.35) contrast(1.15) brightness(1.05); box-shadow: 0 0 80px rgba(255,230,180,.15); }
.retro.projette video { opacity: 1; }
.retro.projette .carton { opacity: 0; }
.retro .rayures { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.6)), linear-gradient(90deg, transparent 0 22%, rgba(255,255,255,.12) 22% 22.15%, transparent 22.15% 71%, rgba(0,0,0,.4) 71% 71.2%, transparent 71.2%); animation: muet-rayures 1.2s steps(6) infinite, muet-flicker .1s steps(2) infinite; }
.retro-fermer { position: absolute; bottom: 24px; left: 50%; z-index: 1; transform: translateX(-50%); padding: 9px 18px; border-radius: 99px; border: 1px solid #d8cfbf; background: transparent; color: #efe6d6; font: 800 .88rem var(--body); }
.retro.fin { animation: repart .6s ease forwards; }

/* ---------- Le panneau du foyer : onglets, billets, salles ---------- */
.onglets { display: flex; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 10px; background: rgba(0,0,0,.28); }
.onglets button { flex: 1; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--dim); font: 800 .8rem var(--body); }
.onglets button[aria-selected="true"] { background: var(--bulb); color: var(--ink); }
/* L'album : de vrais billets de cinéma (photo du film, titre, date, numéro, talon « Admis », encoches). */
.album { display: grid; gap: 8px; max-height: 300px; overflow: auto; margin: 10px 0; padding: 4px; scrollbar-width: thin; }
.mini-billet { display: grid; grid-template-columns: 92px minmax(0, 1fr) 34px; height: 64px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; text-align: left; color: var(--ink);
  background: var(--cream); background-image: repeating-linear-gradient(0deg, rgba(42,26,20,.035) 0 1px, transparent 1px 4px);
  -webkit-mask: radial-gradient(circle 7px at calc(100% - 34px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at calc(100% - 34px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 7px at calc(100% - 34px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at calc(100% - 34px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.mini-billet .photo { background: #2a1520 center / cover no-repeat; }
.mini-billet .infos { display: grid; align-content: center; gap: 3px; padding: 0 10px; min-width: 0; }
.mini-billet .infos b { font: 400 1.15rem/1 var(--display); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-billet .infos small { font: 700 .66rem/1.2 var(--type); color: #7a5a4c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-billet .talon { display: grid; place-items: center; border-left: 2px dashed rgba(42,26,20,.35); }
.mini-billet .talon span { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 .8rem/1 var(--display); letter-spacing: .12em; color: #c2352f; }
.salles-liste { display: grid; gap: 6px; margin: 10px 0 4px; }
@media (prefers-reduced-motion: reduce) { .muet-fx, .retro .rayures, .cabine .bras, .panne-fx, .draperie i, .valance, .marquee, .decor-salle::after { animation: none !important; } }

/* ---------- Salles : chaque salle a sa rangée à ajouter dans Nuvio ---------- */
.salle-carte { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--seat); background: rgba(255,255,255,.03); }
.salle-carte.ici { border-color: var(--bulb); background: rgba(255,207,107,.1); }
.salle-carte.ferme { opacity: .5; }
.salle-carte b { font: 800 .95rem var(--body); color: var(--cream); }
.salle-carte small { font-size: .8rem; color: var(--dim); line-height: 1.4; }
.salle-carte .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.salle-carte .actions button, .salle-carte .actions a { font: 800 .76rem var(--body); padding: 6px 10px; border-radius: 99px; border: 1px solid rgba(255,207,107,.45); background: transparent; color: var(--bulb); text-decoration: none; }
.salle-carte .actions .plein { background: var(--bulb); color: var(--ink); border-color: var(--bulb); }
.salle-carte .actions button:disabled { opacity: .6; cursor: default; }
.salles-liste { max-height: 360px; overflow: auto; scrollbar-width: thin; }

/* ---------- Billets : le film du jour et sa fiche ---------- */
.album button.mini-billet { padding: 0; border: 0; cursor: pointer; text-align: left; transition: transform .2s ease; }
.album button.mini-billet:hover, .album button.mini-billet:focus-visible { transform: translateX(3px) rotate(-.6deg); }
.billet-jour { position: fixed; z-index: 84; top: calc(164px + env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: min(340px, calc(100vw - 32px));
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; color: var(--ink);
  background: var(--cream); box-shadow: 0 18px 40px rgba(0,0,0,.55); animation: billet-arrive .6s cubic-bezier(.22,1,.36,1) both; }
.billet-jour.part { animation: billet-part .4s ease forwards; }
@keyframes billet-arrive { from { opacity: 0; transform: translateX(40px) rotate(4deg); } }
@keyframes billet-part { to { opacity: 0; transform: translateX(40px); } }
.billet-jour .vignette { width: 64px; aspect-ratio: 2 / 3; border-radius: 6px; background: #2a1520 center / cover no-repeat; }
.billet-jour p { margin: 0; font-size: .78rem; color: #7a5a4c; font-weight: 700; }
.billet-jour b { display: block; font: 400 1.25rem/1.05 var(--display); letter-spacing: .03em; margin: 2px 0 6px; }
.billet-jour .voir { font: 800 .8rem var(--body); padding: 6px 12px; border-radius: 99px; border: 0; background: var(--ink); color: var(--cream); }
.billet-jour .fermer { align-self: start; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(42,26,20,.1); color: var(--ink); font: 800 1rem/1 var(--body); }
.fiche-billet { position: fixed; inset: 0; z-index: 87; display: grid; place-items: center; padding: 16px; background: rgba(5,3,4,.82); animation: panne-in .25s ease both; }
.fiche-billet .boite { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 18px; background: var(--velvet-2); border: 1px solid rgba(255,207,107,.3); box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.fiche-billet .ecran { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; }
.fiche-billet .ecran::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, var(--velvet-2)); pointer-events: none; }
.fiche-billet .ecran.video::after { display: none; }
.fiche-billet iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fiche-billet .texte { display: grid; gap: 8px; padding: 4px 22px 22px; }
.fiche-billet h2 { margin: 0; font: 400 2.2rem/1 var(--display); letter-spacing: .03em; color: #fff6e6; }
.fiche-billet .meta { font: 700 .85rem var(--body); color: var(--bulb); }
.fiche-billet .desc { margin: 0; color: #d9c8be; line-height: 1.55; }
.fiche-billet .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fiche-billet .actions button, .fiche-billet .actions a { font: 800 .88rem var(--body); padding: 10px 16px; border-radius: 99px; border: 1px solid rgba(255,207,107,.45); background: transparent; color: var(--bulb); text-decoration: none; }
.fiche-billet .actions .principal { background: var(--bulb); color: var(--ink); border-color: var(--bulb); }
.fiche-billet .fermer { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font: 800 1.2rem/1 var(--body); }
.fiche-billet .talon { font: 700 .74rem var(--type); color: var(--dim); }

/* Hors de l'écran : animations en pause. */
.loin, .loin *, .loin::before, .loin::after { animation-play-state: paused !important; }
.vu .curtain { display: none; }
.vu .marquee { animation: none; }
.vu .marquee h1 { animation: flicker 7s infinite; }
@media (prefers-reduced-motion: reduce) {
  .curtain, .torch, .beam canvas, .iris, .saison i, .secret { display: none; }
  .marquee, .marquee::after, .marquee h1, .beam, .ampoules i, .tete, .tete *, .cabine *, .saison, .draperie { animation: none !important; }
  /* Fenêtres et billets apparaissent et partent sans glisser ni clignoter (ils sont retirés par minuterie). */
  .billet-jour, .billet-jour.part, .fiche-billet, .retro, .retro.fin, #trophees.gagne { animation: none !important; }
  .ampoules .vives { display: none; }
  .ampoules .base i.grillee { background: #4e3420; box-shadow: inset 0 0 2px #000; }
  .generique { height: auto; -webkit-mask: none; mask: none; }
  .generique .defile { animation: none; }
  .generique dl + dl { display: none; }
}
/* Les draperies n'ont de place qu'au-delà de 1260 px ; en dessous, leur bas qui déborde ferait glisser la page de côté. */
@media (max-width: 1260px) { .draperie { display: none; } }
/* Doigt : pas de zoom au double appui (on tape vite sur les flèches), et des plaques assez hautes pour le pouce. */
a, button, label, summary, input, select { touch-action: manipulation; }
@media (hover: none), (pointer: coarse) {
  .salle { min-height: 40px; align-content: center; }
  .regie button { min-height: 44px; min-width: 44px; justify-content: center; }
}