/* Salle obscure : enseigne en haut, la bobine de réglages à gauche, l'écran et le billet à droite. */
:root {
  --velvet: #170c12;      /* fond : velours sombre */
  --velvet-2: #22121b;    /* panneaux */
  --velvet-3: #2f1925;    /* survols, cases */
  --seat: #3d2230;        /* traits */
  --cream: #f5ead8;       /* texte, papier du billet */
  --dim: #b9a59c;         /* texte secondaire */
  --bulb: #ffcf6b;        /* ampoules de l'enseigne */
  --red: #e5413a;         /* rideau, accent principal */
  --ink: #2a1a14;         /* encre du billet */
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { overflow-x: clip; }
body {
  background:
    radial-gradient(ellipse 80% 40% at 50% -5%, rgba(229,65,58,.22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 46px),
    var(--velvet);
  color: var(--cream); font: 16px/1.55 var(--body);
  padding-top: max(28px, env(safe-area-inset-top));
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
}
a { color: var(--bulb); }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--bulb); outline-offset: 3px; border-radius: 6px; }

/* ---------- Enseigne ---------- */
.marquee-wrap { position: relative; max-width: 1180px; margin: 0 auto 36px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.marquee-wrap p { margin: 0; max-width: 58ch; color: var(--dim); }
.marquee-wrap p b { color: var(--cream); }

/* ---------- Mise en page ---------- */
.layout { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; align-items: start; }
main { display: grid; gap: 22px; min-width: 0; }
.act { background: var(--velvet-2); border: 1px solid var(--seat); border-radius: 16px; padding: 22px; display: grid; gap: 14px; min-width: 0; }
.act header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.act h2 { margin: 0; font: 400 2rem/1 var(--display); letter-spacing: .03em; }
.act header span { font: 700 .74rem var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.act .sub { margin: -6px 0 0; color: var(--dim); font-size: .94rem; max-width: 62ch; }

input[type=text] {
  width: 100%; font: 400 1.7rem/1.1 var(--display); letter-spacing: .04em; padding: 12px 14px;
  color: #fff6e6; background: var(--velvet); border: 1px dashed var(--seat); border-radius: 10px;
}

/* La bobine : chaque rangée est une image de pellicule perforée. */
.reel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.frame {
  --perf: radial-gradient(circle at 50% 50%, var(--velvet) 3px, transparent 3.5px) 0 4px / 14px 14px repeat-y;
  position: relative; display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px 10px 0; border-radius: 6px; background: #0f080c; border: 1px solid #000;
  transition: transform .18s ease, background .18s ease;
}
.frame::before { content: ""; align-self: stretch; background: var(--perf), #24131c; border-radius: 6px 0 0 6px; margin: -10px 0; }
.frame.on { background: linear-gradient(90deg, #3a1a24, #26131c); border-color: #5a2e3c; }
.frame.flash { transform: translateX(6px); }
.frame .pos { font: 400 1.6rem/1 var(--display); color: var(--seat); min-width: 1.6ch; text-align: right; }
.frame.on .pos { color: var(--bulb); }
.frame label { cursor: pointer; min-width: 0; }
.frame b { font-weight: 800; }
.frame .kind { margin-left: 8px; font: 700 .68rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.frame small { display: block; color: var(--dim); font-size: .85rem; line-height: 1.35; }
.frame:not(.on) b, .frame:not(.on) small { opacity: .55; }
.frame > input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tools { display: flex; gap: 4px; align-items: center; }
.toggle { font: 800 .72rem var(--body); letter-spacing: .1em; text-transform: uppercase; border-radius: 99px; padding: 6px 10px; border: 1px solid var(--seat); background: transparent; color: var(--dim); cursor: pointer; white-space: nowrap; }
.frame.on .toggle { background: var(--red); border-color: var(--red); color: #fff; }
.arrow { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--seat); background: transparent; color: var(--cream); cursor: pointer; font-size: .95rem; }
.arrow:disabled { opacity: .25; cursor: default; }
.frame:focus-within { outline: 2px solid var(--bulb); outline-offset: 2px; }

/* Pastilles (plateformes, Découvrir, collections) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px;
  border: 1px solid var(--seat); background: var(--velvet); color: var(--dim); font-weight: 700; font-size: .92rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--dim)); box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.chip input:checked + span { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--bulb); outline-offset: 2px; }
.group { display: grid; gap: 8px; }
.group h3 { margin: 0; font: 700 .72rem var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.warn { margin: 0; color: var(--bulb); font-weight: 700; font-size: .9rem; }
.reset { justify-self: start; background: none; border: 0; padding: 0; color: var(--dim); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-size: .92rem; }
/* Programmation remise d'origine : « Annuler » pendant 10 secondes, en haut de l'écran (comme les messages). */
.annule { position: fixed; left: 50%; top: calc(18px + env(safe-area-inset-top)); z-index: 86; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100vw - 32px); padding: 8px 8px 8px 18px; border-radius: 12px; background: var(--cream); color: var(--ink); font: 800 .95rem var(--body); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.annule[hidden] { display: none; }
.annule button { flex: none; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 99px; background: var(--ink); color: var(--cream); font: 800 .9rem var(--body); cursor: pointer; }

/* ---------- L'écran : aperçu de l'accueil ---------- */
.steps-howto { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; }
.steps-howto li { counter-increment: st; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; color: #d9c8be; }
.steps-howto li::before { content: counter(st); font: 400 2.2rem/1 var(--display); color: var(--bulb); text-align: center; border: 1px dashed rgba(255,207,107,.4); border-radius: 10px; padding: 6px 0 2px; }
.steps-howto b { color: var(--cream); }
aside { position: sticky; top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
/* Trop haut pour la fenêtre : la colonne prend toute la hauteur, l'écran reste collé en haut (en entier)
   et le billet arrive en bas, à la fin du défilement. */
aside.long { position: relative; top: auto; align-self: stretch; grid-template-rows: minmax(0, 1fr) auto auto; }
aside.long .stage:not(.big) { position: sticky; top: var(--stage-top, 18px); }

/* ---------- Le billet ---------- */
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 74px; color: var(--ink); filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)); }
.ticket .main, .ticket .stub {
  background: var(--cream);
  background-image: repeating-linear-gradient(0deg, rgba(42,26,20,.035) 0 1px, transparent 1px 4px);
}
.ticket .main { border-radius: 12px 0 0 12px; padding: 18px 18px 16px; display: grid; gap: 10px; min-width: 0;
  -webkit-mask: radial-gradient(circle 11px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.ticket .stub { border-radius: 0 12px 12px 0; border-left: 2px dashed rgba(42,26,20,.35); display: grid; place-items: center;
  -webkit-mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 1.25rem/1 var(--display); letter-spacing: .12em; color: var(--red); white-space: nowrap; }
.t-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.t-head b { font: 400 1.7rem/1 var(--display); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.t-head span { font: 700 .78rem var(--type); white-space: nowrap; }
.t-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 .8rem var(--type); }
.t-meta b { font-weight: 700; }
.t-label { font: 700 .7rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: #7a5a4c; }
.t-url { font: 400 .76rem/1.45 var(--type); word-break: break-all; user-select: all; background: rgba(42,26,20,.07); border-radius: 6px; padding: 8px 10px; max-height: 6.2em; overflow: auto; }
.t-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Copie bloquée par le navigateur : le contenu des collections s'affiche, déjà sélectionné. */
.t-contenu { display: block; width: 100%; height: 6.2em; resize: none; border: 0; color: inherit; }
.t-contenu[hidden] { display: none; }
.btn { font: 800 .9rem var(--body); border-radius: 8px; padding: 11px 10px; cursor: pointer; text-align: center; text-decoration: none; border: 2px solid var(--ink); }
.btn.solid { background: var(--ink); color: var(--cream); }
.btn.solid:hover { background: var(--red); border-color: var(--red); }
.btn.line { background: transparent; color: var(--ink); }
.btn.full { grid-column: 1 / -1; }
.btn:disabled { opacity: .6; cursor: wait; }
/* Lien fixe : un encart pointillé dans le billet, sous le lien de l'addon. */
.fixe { display: grid; gap: 8px; padding: 10px 12px; border: 2px dashed rgba(42,26,20,.3); border-radius: 10px; }
.fixe p { margin: 0; font: 600 .82rem/1.45 var(--body); color: #4a2e24; }
.fixe p b { color: var(--ink); }
.fixe .etat { font-weight: 800; color: #2f6b3a; }
.fixe .t-btns { grid-template-columns: 1fr; }
/* Le lien pour modifier : discret, pour qu'on ne le prenne pas pour celui à coller dans Nuvio. */
.fixe .autre { font: 600 .76rem/1.45 var(--body); color: #7a5a4c; }
.fixe .discret { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* « Ta TV l'a reçu » : un voyant devant la phrase (vert : reçu ; ambre qui clignote : en attente ; éteint : pas encore). */
.fixe .recu { position: relative; padding: 7px 10px 7px 28px; border-radius: 8px; background: rgba(42,26,20,.06); font: 600 .8rem/1.45 var(--body); }
.fixe .recu::before { content: ""; position: absolute; left: 10px; top: .78em; width: 9px; height: 9px; border-radius: 50%; background: #a8968c; }
.fixe .recu small { display: block; font-weight: 600; color: #7a5a4c; }
.fixe .recu.ok { background: rgba(47,107,58,.12); }
.fixe .recu.ok b { color: #2f6b3a; }
.fixe .recu.ok::before { background: #3a9a4c; box-shadow: 0 0 0 3px rgba(58,154,76,.22); }
.fixe .recu.attente { background: rgba(217,140,30,.13); }
.fixe .recu.attente::before { background: #d98c1e; animation: voyant 1.4s ease-in-out infinite; }
@keyframes voyant { 50% { opacity: .3; } }

.howto { background: var(--velvet-2); border: 1px solid var(--seat); border-radius: 16px; padding: 16px 18px; font-size: .9rem; color: var(--dim); display: grid; gap: 8px; }
.howto b { color: var(--cream); }
.howto ol { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; }

/* Barre du bas sur téléphone */
.dock { display: none; }
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  aside { position: static; order: -1; }
  .tv { max-width: 520px; width: 100%; justify-self: center; }
  .dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 10px; align-items: center;
    padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(23,12,18,.94); backdrop-filter: blur(8px); border-top: 1px solid var(--seat); }
  .dock { transition: transform .25s cubic-bezier(.22,1,.36,1); }
  .dock.cache { transform: translateY(110%); }
  .dock-billet { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: 400 .85rem/1.35 var(--body); color: var(--dim); }
  .dock-billet b { color: var(--cream); }
  .dock-billet i { font-style: normal; color: var(--bulb); margin-left: 4px; }
  .dock .btn { border-color: var(--cream); background: var(--cream); color: var(--ink); flex: none; min-height: 46px; }
  /* Clavier ouvert : la barre du bas cacherait le champ qu'on remplit. */
  body:has(:is(input[type=text], input[type=password], input[type=number], input[type=search], select):focus) .dock { display: none; }
}
@media (max-width: 520px) {
  .frame { grid-template-columns: 22px auto minmax(0, 1fr); }
  .tools { grid-column: 2 / -1; }
  .ticket { grid-template-columns: minmax(0, 1fr) 54px; }
  .act { padding: 18px 16px; }
  .act h2 { font-size: 1.75rem; }
  .t-btns { grid-template-columns: minmax(0, 1fr); }
  .t-btns .btn { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* ---------- Ajouts : réglages avancés ---------- */
/* Sommaire : une bande de pellicule flottante, la section en cours s'allume. */
.nav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 15; justify-self: start; max-width: 100%;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 9px 10px;
  border-radius: 14px; border: 1px solid rgba(255,207,107,.22);
  background:
    radial-gradient(circle, rgba(0,0,0,.55) 2px, transparent 2.5px) 6px 2px / 12px 6px repeat-x,
    radial-gradient(circle, rgba(0,0,0,.55) 2px, transparent 2.5px) 6px calc(100% - 2px) / 12px 6px repeat-x,
    rgba(28,14,21,.82);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03); }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; text-decoration: none; color: var(--dim); font: 700 .8rem var(--body); letter-spacing: .02em; padding: 7px 10px; border-radius: 9px; transition: background .2s ease, color .2s ease; }
.nav a:hover { color: var(--cream); background: rgba(255,255,255,.05); }
.nav a.on { background: var(--bulb); color: var(--ink); box-shadow: 0 0 14px rgba(255,207,107,.45); }
.frame .orig { font-style: normal; color: var(--bulb); font-size: .78rem; margin-left: 6px; }
.frame .rename { display: none; gap: 6px; margin-top: 6px; }
.frame.editing .rename { display: flex; }
.rename input { flex: 1; min-width: 0; font: 600 .95rem var(--body); padding: 7px 10px; border-radius: 8px; border: 1px solid var(--bulb); background: var(--velvet); color: var(--cream); }
.mini { font: 700 .78rem var(--body); border-radius: 8px; padding: 6px 10px; border: 1px solid var(--seat); background: transparent; color: var(--cream); cursor: pointer; white-space: nowrap; }
.mini.ok { background: var(--bulb); border-color: var(--bulb); color: var(--ink); }
.mini.del { color: #ff9c95; }
.icon { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--seat); background: transparent; color: var(--cream); cursor: pointer; font-size: .9rem; }
.badge { display: inline-block; margin-left: 8px; font: 800 .62rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--bulb); border-radius: 4px; padding: 2px 5px; vertical-align: 2px; }
.add-row { justify-self: start; font: 800 .95rem var(--body); padding: 12px 18px; border-radius: 10px; border: 1px dashed var(--bulb); background: rgba(255,207,107,.06); color: var(--bulb); cursor: pointer; }
.add-row:disabled { opacity: .4; cursor: default; }

.builder { border: 1px solid var(--bulb); border-radius: 14px; padding: 18px; display: grid; gap: 16px; background: linear-gradient(180deg, #2a1720, #1d0f16); }
.builder h3 { margin: 0; font: 400 1.6rem/1 var(--display); letter-spacing: .03em; color: var(--bulb); }
.field { display: grid; gap: 8px; }
.ai-key { display: flex; gap: 8px; }
.ai-key input { flex: 1; min-width: 0; }
.ai-key button { flex: none; padding: 0 12px; border-radius: 8px; border: 1px solid var(--seat); background: var(--velvet); color: var(--cream); cursor: pointer; }
#ai-key-hint { color: var(--dim); min-height: 1.2em; }
#ai-key-hint.alerte { color: #ffe1d8; min-height: 0; }
/* Clé masquée sans champ « mot de passe » (Chrome proposerait de l'enregistrer). */
#ai-key.masque { -webkit-text-security: disc; text-security: disc; }
/* Espace hébergeur (copies auto-hébergées seulement). */
.hote-box { display: grid; gap: 12px; }
.hote-ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hote-ligne input { flex: 1; min-width: 0; font: 600 1rem var(--body); padding: 10px 12px; border-radius: 8px; border: 1px solid var(--seat); background: var(--velvet); color: var(--cream); }
.hote-btn { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--cream); background: var(--cream); color: var(--ink); font: 700 .9rem var(--body); cursor: pointer; }
.hote-btn.line { background: transparent; color: var(--cream); justify-self: start; }
.hote-maj { border: 1px solid var(--red); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; background: var(--velvet-2); }
.hote-maj ul { margin: 0; padding-left: 1.2em; color: var(--dim); }
.hote-maj a { color: var(--cream); }
.hote-how { display: grid; gap: 8px; color: var(--dim); }
.hote-how p { margin: 0; }
.hote-how code { display: block; padding: 8px 10px; border-radius: 6px; background: var(--velvet); color: var(--cream); user-select: all; overflow-wrap: anywhere; }
.field > span { font: 700 .72rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.field input:is([type=text], [type=password]).plain, select, input[type=number] { font: 600 1rem var(--body); letter-spacing: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--seat); background: var(--velvet); color: var(--cream); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--seat); border-radius: 10px; overflow: hidden; justify-self: start; }
.seg button { font: 700 .88rem var(--body); padding: 9px 14px; border: 0; background: var(--velvet); color: var(--dim); cursor: pointer; border-right: 1px solid var(--seat); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
/* Listes déroulantes : flèche dorée ; le menu ouvert prend les couleurs de la salle
   dans les navigateurs qui savent le personnaliser (sinon, menu du système). */
select { cursor: pointer; appearance: none; padding-right: 38px; transition: border-color .2s ease;
  background: var(--velvet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffcf6b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat; }
select:hover { border-color: rgba(255,207,107,.5); }
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 14px; background-image: none; }
  select::picker-icon { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--bulb); border-bottom: 2px solid var(--bulb); transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
  select:open { border-color: var(--bulb); }
  select:open::picker-icon { transform: translateY(2px) rotate(225deg); }
  ::picker(select) { margin-top: 6px; padding: 6px; max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--seat) transparent;
    border: 1px solid rgba(255,207,107,.35); border-radius: 12px; background: #1d0f16; color: var(--cream); box-shadow: 0 18px 44px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.4);
    opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, overlay .18s allow-discrete, display .18s allow-discrete; }
  ::picker(select):popover-open { opacity: 1; transform: none; }
  @starting-style { ::picker(select):popover-open { opacity: 0; transform: translateY(-6px); } }
  select option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font: 600 .95rem var(--body); color: var(--cream); background: transparent; cursor: pointer; }
  select option:hover, select option:focus-visible { background: rgba(255,207,107,.12); color: #fff; outline: none; }
  select option:checked { background: var(--bulb); color: var(--ink); font-weight: 800; }
  select option::checkmark { content: "✓"; order: 1; margin-left: auto; }
}

/* Curseurs de note : un sillon sombre, la part choisie en or, une graduation par point,
   et une ampoule qu'on fait glisser (éteinte tant qu'il n'y a pas de note minimale). */
.range { display: flex; align-items: center; gap: 14px; }
.range input[type=range] { --p: 0%; --steps: 8; flex: 1; min-width: 0; height: 30px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.range input[type=range]:focus-visible { outline: none; }
.range input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #a8742a, var(--bulb)) 0 0 / var(--p) 100% no-repeat, repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px calc(100% / var(--steps))), #0f080c;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 0 0 1px var(--seat); }
.range input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px calc(100% / var(--steps))), #0f080c; box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 0 0 1px var(--seat); }
.range input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #a8742a, var(--bulb)); }
.range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff8e1, var(--bulb) 55%, #c98b2e); box-shadow: 0 0 0 3px #1b0d14, 0 0 16px rgba(255,207,107,.85); transition: transform .15s ease, box-shadow .15s ease; }
.range input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff8e1, var(--bulb) 55%, #c98b2e); box-shadow: 0 0 0 3px #1b0d14, 0 0 16px rgba(255,207,107,.85); transition: transform .15s ease, box-shadow .15s ease; }
.range input[type=range]:hover::-webkit-slider-thumb, .range input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.range input[type=range]:hover::-moz-range-thumb, .range input[type=range]:active::-moz-range-thumb { transform: scale(1.15); }
.range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #1b0d14, 0 0 0 6px var(--bulb), 0 0 16px rgba(255,207,107,.85); }
.range input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #1b0d14, 0 0 0 6px var(--bulb), 0 0 16px rgba(255,207,107,.85); }
.range input[type=range].zero::-webkit-slider-thumb { background: radial-gradient(circle at 40% 35%, #8a6a4c, #4e3420 60%, #2e1c12); box-shadow: 0 0 0 3px #1b0d14, inset 0 0 3px rgba(0,0,0,.6); }
.range input[type=range].zero::-moz-range-thumb { background: radial-gradient(circle at 40% 35%, #8a6a4c, #4e3420 60%, #2e1c12); box-shadow: 0 0 0 3px #1b0d14, inset 0 0 3px rgba(0,0,0,.6); }
.range input[type=range].zero + output { color: var(--dim); }
.range output { font: 400 1.5rem/1 var(--display); color: var(--bulb); min-width: 3.4ch; text-align: right; }
.summary { margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.25); font: 400 .9rem/1.45 var(--type); color: var(--cream); }
.b-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.b-actions .mini { padding: 10px 16px; font-size: .9rem; }

.chips.danger .chip input:checked + span { background: var(--red); border-color: var(--red); color: #fff; text-decoration: line-through; text-decoration-thickness: 2px; }
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { appearance: none; width: 46px; height: 26px; border-radius: 99px; background: var(--seat); position: relative; cursor: pointer; flex: none; transition: background .15s ease; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); transition: transform .15s ease; }
.switch input:checked { background: var(--red); }
.switch input:checked::after { transform: translateX(20px); }
.switch small { display: block; color: var(--dim); }
.aff-resume { margin: 0 0 12px; color: var(--cream); }
.aff-resume b { color: var(--bulb); }

/* ---------- La régie : le configurateur d'affiches, en fenêtre (scène + console d'éclairage) ----------
   Sur ordinateur et tablette, tout tient dans l'écran sans défiler : la scène à gauche (grande affiche à la
   hauteur disponible, six coulisses en rangée dessous), la console à droite. Sur téléphone, tout s'empile. */
.regie-affiches { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(5,3,4,.86); animation: fade-in .2s ease both; }
.regie-affiches[hidden] { display: none; }
.regie-boite { width: min(1240px, 100%); height: calc(100dvh - 32px); max-height: 940px; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 16px; overflow: hidden; background: #0d0a0c; border: 1px solid var(--seat); box-shadow: 0 30px 80px rgba(0,0,0,.6); color: var(--cream); }
.regie-barre { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: #140e11; border-bottom: 1px solid var(--seat); }
.regie-barre h2 { margin: 0; font: 400 1.6rem/1 var(--display); letter-spacing: .05em; }
/* Importer un lien : un petit panneau sous la barre, à droite (par-dessus la scène : rien ne bouge). */
.regie-barre { position: relative; }
.regie-import { position: absolute; top: calc(100% + 6px); right: 16px; z-index: 5; width: min(520px, calc(100% - 32px)); display: grid; gap: 8px; padding: 12px 14px;
  border-radius: 12px; background: #241c22; border: 1px solid #5a4a53; box-shadow: 0 12px 40px rgba(0,0,0,.6); color: var(--cream); font: 500 .8rem system-ui, sans-serif; }
.regie-import[hidden] { display: none; }
.regie-import-ligne { display: flex; gap: 8px; }
.regie-import input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #5a4a53; background: #140e11; color: var(--cream); font: 500 .78rem ui-monospace, monospace; }
.regie-import input:focus-visible { outline: 2px solid var(--bulb); outline-offset: 1px; }
.regie-import-msg { margin: 0; min-height: 1em; color: #c2b4a6; }
.regie-import-msg.erreur { color: #ff8a8a; }
/* QR code du lien d'affiches : même panneau, le code à gauche, l'explication à droite. */
.regie-qr { width: min(440px, calc(100% - 32px)); grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 14px; }
.regie-qr p { margin: 0; line-height: 1.45; color: #e6d6c8; }
.regie-qr-code { width: 168px; height: 168px; display: grid; place-items: center; padding: 6px; border-radius: 10px; background: #fff; color: #2a1a14; font: 400 .72rem var(--type); text-align: center; }
.regie-qr-code svg { width: 100%; height: 100%; display: block; }
.regie-qr-code.alerte { background: #3b1216; color: #ffe1d8; }
@media (max-width: 520px) { .regie-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.regie-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.regie-x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--seat); background: transparent; color: var(--cream); font-size: 1.05rem; cursor: pointer; }
.regie-corps { display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 0; }

/* La scène : rideaux, en-tête (titre en cours + Portrait/Paysage), grande affiche, rangée de coulisses. */
.regie-scene { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; padding: 12px 44px 12px;
  background: radial-gradient(ellipse 50% 60% at 50% 45%, rgba(255,236,190,.16), transparent 72%), linear-gradient(#1c1013, #0d0a0c); }
.regie-rideau { position: absolute; top: 0; bottom: 0; width: 28px; background: repeating-linear-gradient(90deg, #4a0c18 0 9px, #6b1526 9px 15px); }
.regie-rideau.g { left: 0; } .regie-rideau.d { right: 0; }
.regie-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.regie-legende { margin: 0; color: var(--dim); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regie-tete .seg button { padding: 6px 12px; font-size: .8rem; }
/* Le titre de son choix : une ligne sous l'en-tête, la liste des titres trouvés par-dessus la grande affiche. */
.regie-tete { flex-wrap: wrap; }
.regie-legende { flex: 1 1 0; min-width: 0; }
.regie-choix { position: relative; flex: 1 1 100%; display: flex; gap: 8px; align-items: center; }
.regie-choix input { flex: 1; min-width: 0; font: 500 .85rem/1.2 var(--body); padding: 8px 12px; color: #fff6e6; background: rgba(0,0,0,.35); border: 1px solid var(--seat); border-radius: 99px; }
.regie-choix input:focus-visible { outline: 2px solid var(--bulb); outline-offset: 2px; }
.regie-retirer { flex: none; font: 600 .75rem/1 var(--body); padding: 8px 12px; color: var(--dim); background: none; border: 1px solid var(--seat); border-radius: 99px; cursor: pointer; }
.regie-retirer:hover, .regie-retirer:focus-visible { color: var(--cream); border-color: var(--dim); }
#regie-propositions { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; max-height: min(360px, 55vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: #1b1216; border: 1px solid var(--seat); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
#regie-propositions li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--cream); font: 500 .85rem/1.25 var(--body); }
#regie-propositions li[aria-selected="true"], #regie-propositions li:hover { background: rgba(255,207,107,.12); }
#regie-propositions li.vide { cursor: default; color: var(--dim); }
#regie-propositions img, #regie-propositions .sans { flex: none; width: 34px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: #2a1d22; }
#regie-propositions small { display: block; color: var(--dim); font-size: .72rem; }
@media (pointer: coarse) { .regie-choix input, .regie-retirer { min-height: 44px; } #regie-propositions li { min-height: 52px; } }
/* La grande affiche prend toute la place, en gardant ses proportions (2:3 ou 16:9) : largeur bornée par la largeur ET la hauteur du plateau. */
.regie-plateau { margin: 0; min-height: 0; display: flex; justify-content: center; align-items: center; container-type: size; }
.regie-plateau img { display: block; width: min(100cqw, calc(100cqh * 2 / 3)); height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; background: #1b1418; box-shadow: 0 0 60px rgba(255,220,150,.18); transition: opacity .25s ease; }
.regie-plateau.paysage img { width: min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; }
.regie-plateau img.attente { opacity: .55; }
.regie-coulisses { display: flex; justify-content: center; gap: 10px; }
.regie-coulisses button { width: 62px; flex: none; padding: 0; border: 0; background: none; color: var(--dim); font: 600 .66rem/1.2 system-ui, sans-serif; cursor: pointer; text-align: center; }
.regie-coulisses img { display: block; width: 62px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 5px; margin-bottom: 4px; outline: 2px solid transparent; outline-offset: 2px; opacity: .8; background: #1b1418; }
.regie-coulisses button[aria-pressed="true"] img { outline-color: var(--bulb); opacity: 1; }
.regie-coulisses span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regie-coulisses.paysage button { width: 104px; }
.regie-coulisses.paysage img { width: 104px; aspect-ratio: 16 / 9; }

/* La console : styles tout prêts en vignettes (vraies petites affiches), 6 onglets, une carte par élément (icône,
   nom, interrupteur, choix principaux visibles ; réglages fins dans « Plus de réglages », un seul ouvert). */
.regie-console { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; padding: 12px 14px; background: linear-gradient(#231d22, #161117); border-left: 3px solid #3a2f36; }
.regie-memoires { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.regie-memoires button { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; padding: 3px; border: 1.5px solid transparent; border-radius: 9px; background: none; color: #d8cab2; font: 600 .62rem/1.1 system-ui, sans-serif; cursor: pointer; }
.regie-memoires img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; background: #2a2126; }
.regie-memoires span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.regie-memoires button:hover { border-color: #5a4a53; }
.regie-memoires button[aria-pressed="true"] { border-color: var(--bulb); color: var(--bulb); background: rgba(255,207,107,.08); }
.regie-perso { margin: -4px 0 0; color: var(--bulb); font: 600 .72rem system-ui, sans-serif; }
.regie-perso[hidden], .regie-cible[hidden] { display: none; }
.regie-cible { margin: 0; padding: 5px 10px; border-radius: 8px; background: rgba(255,207,107,.12); color: var(--bulb); font: 600 .78rem system-ui, sans-serif; }
.regie-onglets { display: flex; border-bottom: 1px solid #3a2f36; }
.regie-onglets button { flex: 1; min-width: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: #c2b4a6; font: 600 .74rem system-ui, sans-serif; padding: 8px 0; cursor: pointer; white-space: nowrap; }
.regie-onglets button:hover { color: var(--cream); }
.regie-onglets button[aria-selected="true"] { color: var(--cream); border-bottom-color: var(--bulb); }
.regie-voies { display: flex; flex-direction: column; gap: 5px; }
.regie-voies .carte { display: grid; gap: 6px; padding: 7px 10px; border-radius: 12px; background: #1d171b; border: 1px solid #30272d; }
.regie-voies .carte.ouverte { border-color: #5a4a53; }
.regie-voies .carte-tete { display: flex; align-items: center; gap: 9px; }
.regie-voies .carte-icone { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #2a2126; }
.regie-voies .carte-icone svg { width: 17px; height: 17px; fill: none; stroke: var(--bulb); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.regie-voies .carte-tete b { flex: 1; min-width: 0; font-size: .82rem; color: var(--cream); }
.regie-voies .eteinte .carte-icone svg { stroke: #8d7f86; }
.regie-voies .eteinte .carte-tete b { color: #b9aa97; }
.regie-voies .carte-corps { display: grid; gap: 6px; }
.regie-voies .carte-fin { border-top: 1px dashed #3a2f36; padding-top: 7px; }
.regie-voies .carte-plus { flex: none; border: 1px solid #4a3d45; border-radius: 99px; background: none; color: var(--bulb); font: 600 .66rem system-ui, sans-serif; padding: 3px 9px; cursor: pointer; }
.regie-voies .carte-plus:hover, .regie-voies .carte-plus[aria-expanded="true"] { border-color: var(--bulb); }
/* Panneau « Plus de réglages » : posé par-dessus le bas de la console, il ne déplace rien ; il défile s'il est long. */
.regie-console { position: relative; }
.regie-plus { position: absolute; left: 10px; right: 10px; bottom: 10px; max-height: calc(100% - 150px); overflow: auto; display: grid; gap: 8px;
  padding: 10px 12px 12px; border-radius: 14px; background: #241c22; border: 1px solid #5a4a53; box-shadow: 0 -12px 40px rgba(0,0,0,.6); animation: plus-monte .18s ease both; z-index: 2; }
.regie-plus[hidden] { display: none; }
.regie-plus .plus-tete { display: flex; align-items: center; gap: 8px; }
.regie-plus .plus-tete b { flex: 1; font-size: .84rem; color: var(--bulb); }
.regie-plus .plus-fermer { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #5a4a53; background: transparent; color: var(--cream); cursor: pointer; }
.regie-plus .carte-corps { display: grid; gap: 7px; }
@keyframes plus-monte { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .regie-plus { animation: none; } }
.regie-console .interrupteur { width: 36px; height: 20px; flex: none; border: 0; border-radius: 99px; background: #4a3d45; position: relative; cursor: pointer; padding: 0; }
.regie-console .interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #d8cab2; transition: transform .15s ease; }
.regie-console .interrupteur[aria-checked="true"] { background: var(--bulb); }
.regie-console .interrupteur[aria-checked="true"]::after { transform: translateX(16px); background: #1a1208; }
.regie-console .choix { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.regie-console .choix > span { font: 700 .6rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #c2b4a6; }
.regie-console .puces { display: flex; flex-wrap: wrap; gap: 4px; }
.regie-console .puces button { border: 1px solid #4a3d45; border-radius: 99px; padding: 3px 9px; background: transparent; color: var(--cream); font: 600 .7rem system-ui, sans-serif; cursor: pointer; }
.regie-console .puces button:hover { border-color: #7a6670; }
.regie-console .puces button[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.regie-console .curseur { display: flex; align-items: center; gap: 8px; }
.regie-console .curseur output { font: 700 .74rem system-ui, sans-serif; width: 5ch; text-align: right; color: var(--cream); font-variant-numeric: tabular-nums; }
/* Curseurs dessinés à la main : piste fine, partie remplie dorée jusqu'au bouton (--rempli), bouton rond doré. */
.regie-console .curseur input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 18px; margin: 0; background: transparent; cursor: pointer; }
.regie-console .curseur input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--bulb) var(--rempli, 50%), #4a3d45 var(--rempli, 50%)); }
.regie-console .curseur input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: #4a3d45; }
.regie-console .curseur input[type=range]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--bulb); }
.regie-console .curseur input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe7a0, var(--bulb) 65%); box-shadow: 0 0 0 3px #1d171b, 0 0 8px rgba(255,207,107,.45); }
.regie-console .curseur input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe7a0, var(--bulb) 65%); box-shadow: 0 0 0 3px #1d171b, 0 0 8px rgba(255,207,107,.45); }
.regie-console .curseur input[type=range]:focus-visible { outline: none; }
.regie-console .curseur input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #1d171b, 0 0 0 5px var(--cream); }
.regie-console .curseur input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #1d171b, 0 0 0 5px var(--cream); }
/* Nuancier : 36 pastilles et « Par défaut » (rayée), sur deux rangs. */
.regie-console .nuancier { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 4px; }
.regie-console .nuancier button { aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); cursor: pointer; }
.regie-console .nuancier button.defaut { background: linear-gradient(135deg, #2a2126 44%, #e5484d 44% 56%, #2a2126 56%); }
.regie-console .nuancier button[aria-pressed="true"] { outline: 2px solid var(--cream); outline-offset: 1px; }
.regie-console .nuancier button:focus-visible { outline: 2px solid var(--bulb); outline-offset: 1px; }
.regie-console .regie-note { margin: 0; font-size: .72rem; color: #c2b4a6; }
.regie-paysage { display: grid; gap: 10px; padding-top: 10px; }
.regie-paysage .btn { justify-self: start; }
body.regie-ouverte { overflow: hidden; }
/* Tablette : console un peu plus étroite, coulisses plus petites. */
@media (max-width: 1000px) {
  .regie-corps { grid-template-columns: minmax(0, 1fr) 340px; }
  .regie-coulisses { gap: 6px; }
  .regie-coulisses button, .regie-coulisses img { width: 50px; }
  .regie-coulisses.paysage button, .regie-coulisses.paysage img { width: 80px; }
}
/* Écran peu haut (portable en 1280×720) : console resserrée. */
@media (max-height: 760px) and (min-width: 761px) {
  .regie-console { gap: 6px; padding: 10px 12px; }
  .regie-memoires span { display: none; }
  .regie-voies { gap: 5px; }
  .regie-voies .carte { padding: 6px 9px; gap: 5px; }
  .regie-voies .carte-icone { width: 24px; height: 24px; }
  .regie-cible { padding: 2px 8px; font-size: .72rem; }
}
/* Téléphone : tout s'empile et défile (l'écran est trop petit pour tout montrer d'un coup). */
@media (max-width: 760px) {
  .regie-affiches { padding: 0; }
  .regie-boite { height: 100dvh; max-height: none; border-radius: 0; grid-template-rows: auto minmax(0, 1fr); }
  .regie-corps { display: block; overflow: auto; }
  .regie-scene { padding: 12px; }
  .regie-rideau { display: none; }
  .regie-plateau { container-type: normal; }
  .regie-plateau img { width: min(240px, 62vw); }
  .regie-plateau.paysage img { width: 100%; }
  .regie-coulisses { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .regie-console { overflow: visible; border-left: 0; border-top: 3px solid #3a2f36; }
}
@media (prefers-reduced-motion: reduce) { .regie-affiches, .regie-plateau img { animation: none; transition: none; } }

.coll { border: 1px solid var(--seat); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; background: var(--velvet); }
.coll-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.coll-head .switch b { font-weight: 800; }
.coll details summary { cursor: pointer; color: var(--bulb); font-weight: 700; font-size: .88rem; }
.coll details .chips { margin-top: 10px; }
/* Tuiles d'une collection : une ligne chacune, la pastille les montre ou les cache, les flèches les déplacent. */
.tiles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-width: 460px; }
.tiles li { display: flex; align-items: center; gap: 4px; }
.tiles .chip { flex: 1; min-width: 0; margin-right: 4px; }
.tiles .chip span { display: flex; }
.coll .chip span { padding: 6px 11px; font-size: .84rem; }
.coll.off { opacity: .55; }
/* Repère : sur l'accueil de Nuvio, les rangées du Catalogue FR passent entre Plateformes et les autres collections. */
.coll-rangees { margin: 0; padding: 10px 14px; border: 1.5px dashed var(--seat); border-radius: 12px; text-align: center; font: 700 .86rem/1.4 var(--body); color: var(--dim); }
.coll-rangees b { color: var(--bulb); }

@media (max-width: 520px) { .two { grid-template-columns: 1fr; } }

/* ================= Grand jeu : la salle ================= */
:root { --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; }
/* Lambrequin de velours en haut de la page */
.valance { position: absolute; inset: 0 0 auto; height: 74px; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 34px 22px at 34px 0, transparent 0 20px, rgba(0,0,0,.35) 21px, transparent 26px) 0 52px / 68px 30px repeat-x,
    radial-gradient(ellipse 34px 30px at 34px 0, #6d1420 0 28px, transparent 29px) 0 46px / 68px 32px repeat-x,
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 3px, transparent 3px 22px, rgba(255,255,255,.04) 22px 24px, transparent 24px 34px),
    linear-gradient(#4a0c15, #7a1824 70%, #5a0f1a);
  -webkit-mask: linear-gradient(#000 60%, #000) top / 100% 48px no-repeat, radial-gradient(ellipse 34px 30px at 34px 0, #000 28px, transparent 29px) 0 46px / 68px 32px repeat-x;
          mask: linear-gradient(#000 60%, #000) top / 100% 48px no-repeat, radial-gradient(ellipse 34px 30px at 34px 0, #000 28px, transparent 29px) 0 46px / 68px 32px repeat-x;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.valance::after { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 6px; background: repeating-linear-gradient(90deg, #d9a441 0 6px, #8a5f1a 6px 9px); opacity: .9; }
body { position: relative; padding-top: max(104px, calc(env(safe-area-inset-top) + 92px)); }
/* Grain de pellicule */
body::after { content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 50; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.marquee-wrap p { font-size: 1.04rem; }
.guide-link { display: inline-block; font: 800 .92rem var(--body); text-decoration: none; color: var(--ink); background: var(--bulb); padding: 9px 16px; border-radius: 99px; box-shadow: 0 0 22px rgba(255,207,107,.35); }
.guide-link:hover { background: #fff1c9; }
.marquee-wrap .tagline { font: italic 400 1.5rem/1.2 var(--serif); color: var(--bulb); margin: 0; }

/* Titres de section : lettrage d'enseigne + numéro de séance */
.act { position: relative; overflow: hidden; }
.act::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,207,107,.5), transparent); }
.act .sub { font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; color: #cdb8ad; }
.act header span { font-family: var(--type); font-weight: 700; letter-spacing: .14em; background: var(--red); color: #fff; padding: 3px 8px 2px; border-radius: 3px; transform: rotate(-2deg); display: inline-block; }
.act h2 { font-size: 2.2rem; }

/* L'écran : vrais visuels */
.stage { position: relative; }
.stage .glow { position: absolute; inset: 6% 4% 10%; z-index: -1; filter: blur(42px) saturate(1.4); opacity: .55; background-size: cover; background-position: center; transition: background-image .6s ease; border-radius: 30px; }
/* ---------- L'écran : un vrai petit Nuvio, qu'on parcourt à la souris ou aux flèches ---------- */
.tv { overflow: hidden; background: #050304; border-radius: 16px; padding: 10px; box-shadow: 0 0 0 2px #2b1820, 0 30px 80px rgba(0,0,0,.6), 0 0 90px rgba(120,160,255,.06); }
.screen { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #13101a, #0b0910); container-type: inline-size; }
.tv-foot { height: 10px; width: 34%; margin: 8px auto 0; border-radius: 0 0 10px 10px; background: #1c1116; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
/* Sous l'écran : format des affiches, agrandir */
.screen-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -8px; }
.screen-tools .seg button { padding: 7px 12px; font-size: .82rem; }
.caption { margin: -12px 0 0; text-align: center; color: var(--dim); font-size: .82rem; }
.big-close { display: none; }
.screen-fun { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.stage .screen-tools { justify-content: center; }
#pp-btn[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--ink); }
/* Les affiches maison se règlent plus haut (« Tes affiches ») ; le lien va dans Nuvio (étape 8 du guide). */
.pp-note { margin: 10px auto 0; max-width: 46ch; text-align: center; color: var(--dim); font-size: .82rem; }
.pp-ouvrir { padding: 0; border: 0; background: none; font: inherit; color: var(--bulb); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* L'étape 8 du guide en fenêtre : clé TMDB, lien à copier, où le coller dans Nuvio. */
.pp-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(5,3,4,.84); animation: fade-in .2s ease both; }
.pp-modal .boite { position: relative; display: grid; gap: 12px; width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border-radius: 18px; background: var(--velvet-2); border: 1px solid rgba(255,207,107,.35); box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: rise .25s ease both; }
.pp-modal h2 { margin: 0; padding-right: 36px; font: 400 1.8rem/1 var(--display); letter-spacing: .03em; color: var(--bulb); }
.pp-modal p, .pp-modal ol { margin: 0; color: #e6d6c8; font-size: .92rem; line-height: 1.45; }
.pp-modal ol { display: grid; gap: 6px; padding-left: 1.3em; }
.pp-modal .pp-mini { color: var(--dim); font-size: .82rem; }
.pp-modal a { color: var(--bulb); }
.pp-modal label { display: grid; gap: 6px; font-size: .82rem; color: var(--dim); }
.pp-modal input[type=text] { font: 400 .95rem var(--type); letter-spacing: 0; padding: 10px 12px; }
.pp-lien { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.pp-lien code { min-width: 0; max-height: 5.6em; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--velvet); border: 1px solid var(--seat); font: 400 .74rem/1.45 var(--type); word-break: break-all; color: var(--cream); }
.pp-lien button { padding: 9px 14px; border-radius: 8px; border: 0; background: var(--bulb); color: var(--ink); font: 800 .85rem var(--body); cursor: pointer; }
.pp-modal .fermer { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: var(--cream); font: 800 1.1rem/1 var(--body); cursor: pointer; }
.screen-fun .mini { padding: 8px 14px; font-size: .84rem; border-color: rgba(255,207,107,.4); color: var(--bulb); }
.screen-fun .mini:hover { background: rgba(255,207,107,.1); }
.stage .screen-tools { margin-top: 14px; }
/* La colonne collante crée sa propre pile d'affichage : on la passe devant tout quand l'écran est en grand. */
.ecran-grand aside { z-index: 66; }
/* Le billet du jour (z-index 84) ne passe pas devant l'écran agrandi. */
.ecran-grand .billet-jour { display: none; }
/* L'écran en grand, par-dessus la page */
.stage.big { position: fixed; inset: 0; z-index: 65; display: grid; place-content: center; justify-items: center; padding: 24px; background: rgba(5,3,4,.92); }
.stage.big .tv { width: min(1180px, calc(100vw - 48px), calc((100vh - 230px) * 16 / 9)); max-width: none; }
.stage.big .screen-tools, .stage.big .screen-fun { width: min(1100px, calc(100vw - 48px)); }
.stage.big .caption, .stage.big .pp-note { display: none; }
.stage.big .glow { inset: 15%; }
.stage.big .big-close { display: inline-flex; margin-top: 16px; border-color: var(--cream); background: var(--cream); color: var(--ink); }

/* Le billet qui se déchire quand on copie */
.ticket .stub { transition: transform .5s cubic-bezier(.16,1,.3,1); transform-origin: 0 100%; }
.ticket.torn .stub { transform: translate(10px, 16px) rotate(9deg); }
.ticket.torn .main { animation: thump .4s ease; }
@keyframes thump { 30% { transform: translateY(2px); } }
.stamp { position: absolute; right: 90px; top: 40%; transform: rotate(-12deg) scale(.6); opacity: 0; font: 400 1.6rem/1 var(--display); letter-spacing: .1em; color: var(--red); border: 3px solid var(--red); border-radius: 6px; padding: 4px 10px; pointer-events: none; transition: all .35s cubic-bezier(.16,1,.3,1); mix-blend-mode: multiply; }
.ticket.torn .stamp { opacity: .85; transform: rotate(-12deg) scale(1); }

/* Le billet holographique : il s'incline sous la souris, un reflet irisé le traverse. */
.ticket { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease; }
.ticket.tilting { transition: transform .08s linear; }
.ticket .main { position: relative; }
.ticket .main::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 25%, rgba(255,240,200,.9) 42%, rgba(255,170,220,.75) 48%, rgba(150,220,255,.75) 54%, transparent 70%) var(--mx, 50%) 0 / 260% 100% no-repeat; }
.ticket.tilting .main::after { opacity: 1; }
.t-seance { margin-top: -4px; font: 700 .74rem var(--type); color: #7a5a4c; }
.qr { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 8px; background: rgba(42,26,20,.07); }
.qr svg { width: 112px; height: 112px; display: block; border-radius: 6px; }
.qr p { margin: 0; font-size: .85rem; line-height: 1.4; }
.qr-wait { font: 400 .78rem var(--type); }

/* L'écran grésille comme quand on change de chaîne. */
.screen::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 140px, repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 3px); }
.screen.zap::before { animation: zap .4s steps(5); }
@keyframes zap { 0% { opacity: .85; background-position: 0 0, 0 0; } 25% { background-position: 50px 30px, 0 6px; } 50% { opacity: .55; background-position: -40px 70px, 0 2px; } 75% { background-position: 20px -40px, 0 9px; } 100% { opacity: 0; } }

/* Une rangée mise à l'affiche : le projecteur la balaie, son numéro s'allume. */
.frame.lit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255,226,165,.3) 50%, transparent 62%) no-repeat; background-size: 240% 100%;
  animation: sweep-row .75s ease-out both; }
@keyframes sweep-row { from { background-position: 100% 0; } to { background-position: 0 0; } }
.frame.lit .pos { animation: tick .45s cubic-bezier(.16,1,.3,1); }
@keyframes tick { from { transform: scale(.3); opacity: 0; } }