/* ---------- Le guichet : 3 questions et programmations toutes prêtes (worker/guichet.js) ---------- */
.depart { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding: 14px 18px; border-radius: 14px;
  border: 1.5px dashed rgba(255,207,107,.45); background: linear-gradient(100deg, rgba(255,207,107,.1), rgba(229,65,58,.06)); }
.depart p { margin: 0; flex: 1 1 280px; color: #e6d6c8; font: 400 1.08rem/1.4 var(--serif); }
.depart p b { font: 800 1rem var(--body); color: var(--bulb); margin-right: 4px; }
.depart-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.depart-btn { min-height: 44px; padding: 10px 16px; border-radius: 99px; border: 1.5px solid var(--bulb); background: var(--bulb); color: var(--ink); font: 800 .9rem var(--body); cursor: pointer; }
.depart-btn.line { background: transparent; color: var(--bulb); }
.depart-btn:hover { background: #fff1c9; border-color: #fff1c9; color: var(--ink); }

.guichet { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 16px; background: rgba(5,3,4,.86); animation: fade-in .2s ease both; }
.guichet[hidden] { display: none; }
.guichet-boite { position: relative; width: min(980px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px clamp(18px, 4vw, 40px) 30px; border-radius: 20px;
  background: radial-gradient(ellipse 70% 40% at 50% 0, rgba(229,65,58,.22), transparent 70%), 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; }
.guichet-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--seat); background: rgba(0,0,0,.25); color: var(--cream); font-size: 1.05rem; cursor: pointer; }
.guichet-vue { display: grid; gap: 14px; }
.guichet-vue[hidden] { display: none; }
.guichet-sur { margin: 0; font: 700 .74rem var(--type); letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.guichet h2 { margin: 0; padding-right: 48px; font: 400 clamp(2rem, 5vw, 2.8rem)/1 var(--display); letter-spacing: .03em; color: var(--bulb); text-shadow: 0 0 22px rgba(255,207,107,.35); }
.guichet h2:focus { outline: none; }
.guichet-sub { margin: -4px 0 0; max-width: 60ch; color: #cdb8ad; font: 400 1.12rem/1.4 var(--serif); }
.guichet-go { justify-self: start; min-height: 48px; padding: 12px 22px; border-radius: 99px; border: 0; background: var(--bulb); color: var(--ink); font: 800 1rem var(--body); cursor: pointer; box-shadow: 0 0 22px rgba(255,207,107,.3); }
.guichet-go:hover { background: #fff1c9; }
.guichet-ou { margin: 10px 0 0; font: 700 .74rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

/* Les affiches de festival : papier vieilli, décor propre à chacune, lauriers dorés, titre en lettres de cinéma. */
.festivals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.festival { --fond: #5a0f1a; --fond2: #2a0710; --encre: #fff3d6; --or: #ffcf6b;
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; aspect-ratio: 2 / 3; min-width: 0; overflow: hidden;
  padding: 14px 12px 12px; border-radius: 10px; border: 0; cursor: pointer; color: var(--encre); font-family: var(--body);
  background: linear-gradient(180deg, var(--fond), var(--fond2)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 0 0 6px rgba(0,0,0,.18), 0 12px 26px rgba(0,0,0,.45);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease; }
.festival::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.25) 0 1px, transparent 1px 3px); }
.festival:hover, .festival:focus-visible { transform: translateY(-4px) rotate(-.6deg); box-shadow: inset 0 0 0 1.5px var(--or), inset 0 0 0 6px rgba(0,0,0,.18), 0 18px 34px rgba(0,0,0,.55), 0 0 26px rgba(255,207,107,.25); }
.festival:focus-visible { outline: 3px solid var(--bulb); outline-offset: 4px; }
.f-decor { position: absolute; inset: 0; pointer-events: none; }
/* La mention entre les deux branches de lauriers (60 px de large au milieu). */
.f-mention { position: relative; display: grid; place-items: center; margin-top: 2px; }
.f-mention > * { grid-area: 1 / 1; }
.f-mention small { width: 60px; font: 700 .5rem/1.2 var(--type); letter-spacing: .04em; text-transform: uppercase; color: var(--or); overflow-wrap: anywhere; }
.lauriers { width: 120px; height: 60px; fill: var(--or); stroke: var(--or); stroke-width: 1.4; }
.lauriers path { fill: none; }
.f-titre { position: relative; margin-top: auto; font: 400 clamp(1.9rem, 3.4vw, 2.7rem)/.9 var(--display); letter-spacing: .04em; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.f-accroche { position: relative; font: italic 400 .95rem/1.2 var(--serif); color: var(--encre); opacity: .9; }
.f-rangees { position: relative; margin-top: 4px; padding-top: 7px; width: 100%; border-top: 1px solid rgba(255,255,255,.22); font: 700 .56rem/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
/* Cinéphile : velours rouge, faisceau de projecteur. */
.f-cinephile .f-decor { background: conic-gradient(from 160deg at 50% 0, transparent 0 8deg, rgba(255,236,190,.22) 14deg 26deg, transparent 34deg); }
/* Famille : soleil couchant orangé, collines. */
.f-famille { --fond: #f08a3c; --fond2: #a8361d; --encre: #fff8e8; --or: #fff1c9; }
.f-famille .f-decor { background: radial-gradient(circle at 50% 46%, #ffd36b 0 22%, transparent 22.5%), radial-gradient(ellipse 80% 30% at 20% 82%, #7a2716 0 60%, transparent 61%), radial-gradient(ellipse 80% 34% at 85% 88%, #5e1d11 0 60%, transparent 61%); }
/* Binge : nuit bleue, écran allumé et pastilles d'épisodes. */
.f-binge { --fond: #1d2a6b; --fond2: #0a0f2b; --encre: #e9edff; --or: #9fd0ff; }
.f-binge .f-decor { background: radial-gradient(ellipse 46% 24% at 50% 44%, rgba(159,208,255,.38), transparent 70%), repeating-linear-gradient(90deg, rgba(159,208,255,.3) 0 10px, transparent 10px 16px) 50% 27% / 68px 4px no-repeat; }
/* Anime : soleil levant rouge sur papier crème. */
.f-anime { --fond: #f5ead8; --fond2: #e7d3b6; --encre: #2a1a14; --or: #c21f3a; }
.f-anime .f-decor { background: radial-gradient(circle at 50% 44%, #e5413a 0 20%, transparent 20.5%), repeating-conic-gradient(from 0deg at 50% 44%, rgba(229,65,58,.16) 0 7deg, transparent 7deg 18deg); }
.f-anime .f-titre { text-shadow: none; }
.f-anime .f-rangees { border-top-color: rgba(42,26,20,.25); }

/* Les questions : une à la fois, grandes cases à cocher. */
.guichet-pas { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.guichet-pas li { width: 34px; height: 8px; border-radius: 99px; background: var(--seat); transition: background .2s ease; }
.guichet-pas li.on { background: var(--bulb); box-shadow: 0 0 10px rgba(255,207,107,.5); }
.guichet-q { margin: 0; padding: 0; border: 0; display: grid; gap: 14px; min-width: 0; }
.guichet-q[hidden] { display: none; }
.guichet-q legend { padding: 0 48px 0 0; margin-bottom: 12px; font: 400 clamp(1.9rem, 5vw, 2.6rem)/1 var(--display); letter-spacing: .03em; color: var(--cream); }
.guichet-q legend:focus { outline: none; }
.guichet-q legend small { display: block; margin-bottom: 6px; font: 700 .74rem var(--type); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.guichet-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.guichet-choix label { position: relative; cursor: pointer; }
.guichet-choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.guichet-choix span { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--seat); background: var(--velvet); transition: border-color .15s ease, background .15s ease; }
.guichet-choix b { font: 400 1.6rem/1 var(--display); letter-spacing: .03em; color: var(--cream); }
.guichet-choix small { color: var(--dim); font-size: .88rem; line-height: 1.35; }
.guichet-choix input:checked + span { border-color: var(--bulb); background: rgba(255,207,107,.1); box-shadow: 0 0 0 1px var(--bulb), 0 0 22px rgba(255,207,107,.18); }
.guichet-choix input:checked + span b { color: var(--bulb); }
.guichet-choix input:focus-visible + span { outline: 3px solid var(--bulb); outline-offset: 3px; }
.guichet-aide { margin: -6px 0 0; color: #cdb8ad; font: 400 1.05rem/1.4 var(--serif); max-width: 62ch; }
.guichet-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.guichet-retour { min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--dim); font: 700 .95rem var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.guichet-nav .guichet-go { justify-self: auto; margin-left: auto; }

@media (max-width: 760px) {
  .festivals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .f-rangees { display: none; }
}
@media (max-width: 520px) {
  .guichet { padding: 0; }
  .guichet-boite { max-height: 100dvh; height: 100dvh; border-radius: 0; padding-top: 22px; }
  .depart-btns, .depart-btn { width: 100%; }
}
/* Grand écran (TV) : tout un peu plus grand, à lire du canapé. */
@media (min-width: 1700px) {
  .guichet-boite { width: min(1280px, 100%); }
  .guichet h2 { font-size: 3.4rem; }
  .f-accroche { font-size: 1.15rem; }
  .lauriers { width: 150px; height: 75px; }
  .f-mention small { width: 76px; font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) { .guichet, .guichet-boite, .festival { animation: none; transition: none; } .festival:hover, .festival:focus-visible { transform: none; } }