/* Grand Format — feuille unique.
   Deux accents porteurs de sens : chaud pour la pellicule et le 70 mm,
   froid pour le laser. La couleur dit le format, elle ne décore pas. */

:root {
  --nuit:      #0A0C10;   /* la salle avant projection */
  --surface:   #12161C;
  --surface-2: #1A2029;
  --bord:      #262E39;
  --toile:     #F2EFE9;   /* blanc chaud, comme un écran éclairé */
  --gris:      #8A93A1;
  --gris-fort: #5D6675;

  --chaud:     #FF5A3C;   /* lampe de projection — pellicule, 70 mm */
  --chaud-nu:  rgba(255, 90, 60, .12);
  --froid:     #6FD3E8;   /* laser */
  --froid-nu:  rgba(111, 211, 232, .12);
  --vo:        #8FD9A8;   /* version originale */

  --display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --corps:   "Public Sans", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --r: 4px;
  --marge: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--toile);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 72px;             /* place pour la nav mobile */
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--chaud);
  outline-offset: 2px;
}
img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0;
             letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.02; }
h2 { font-size: clamp(1.3rem, 3.4vw, 1.9rem); line-height: 1.1; }
h3 { font-size: 1.05rem; font-weight: 700; }

.contenu { max-width: 1180px; margin: 0 auto; padding: 0 var(--marge); }

/* ---------- en-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 12, 16, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bord);
}
.entete .contenu { display: flex; align-items: center; gap: 28px;
                   height: 60px; }
.marque { font-family: var(--display); font-weight: 800; font-size: 1.1rem;
          letter-spacing: -.03em; display: flex; align-items: center; gap: 9px; }
/* Le cadre : 1.43:1, le rapport de l'IMAX 15/70 ; les deux bandes chaudes
   sont ce qu'il ajoute à une image scope de 2.39:1. La marque dit le sujet
   sans un mot, et tient à 16 px. */
.marque .logo { height: 19px; width: auto; color: var(--toile);
                flex: 0 0 auto; }
.marque .pastille { width: 10px; height: 10px; border-radius: 50%;
                    background: var(--chaud);
                    box-shadow: 0 0 14px var(--chaud); flex: none; }
.nav-bureau { display: none; gap: 22px; font-size: .93rem; color: var(--gris); }
.nav-bureau a.actif, .nav-bureau a:hover { color: var(--toile); }
@media (min-width: 768px) { .nav-bureau { display: flex; } }
.entete .fraicheur { margin-left: auto; font-family: var(--mono);
                     font-size: .72rem; color: var(--gris-fort); }

/* ---------- hero ---------- */
.hero { position: relative;
        padding: clamp(26px, 6vw, 76px) 0 clamp(22px, 4vw, 40px); }

/* Le faisceau du projecteur. Il est posé sur la page et non sur le hero :
   dans un bloc à `overflow: hidden` il se coupe net, et une arête nette ne
   ressemble pas à de la lumière. Fixe, il ne défile pas — la lampe reste
   derrière le spectateur. */
body::before {
  content: ""; position: fixed; inset: -20vh -10vw auto -30vw;
  height: 120vh; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58vw 62vh at 12% -8%, rgba(255, 90, 60, .13), transparent 70%),
    radial-gradient(46vw 52vh at 88% -14%, rgba(111, 211, 232, .07), transparent 72%);
}
body > * { position: relative; z-index: 1; }
.hero h1 { position: relative; max-width: 16ch; }
.hero .accroche { position: relative; color: var(--gris);
                  font-size: clamp(1rem, 2.2vw, 1.15rem); max-width: 52ch;
                  margin: 14px 0 0; }

/* chiffres du hero */
.compteurs { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 30px;
             border: 1px solid var(--bord); border-radius: var(--r);
             background: var(--bord); overflow: hidden; }
.compteur { flex: 1 1 146px; padding: 13px 17px; background: var(--surface); }
.compteur b { display: block; font-family: var(--display); font-size: 1.5rem;
              font-weight: 800; line-height: 1.15;
              font-variant-numeric: tabular-nums; }
.compteur span { font-size: .78rem; color: var(--gris); }

/* ---------- perforations 70 mm ---------- */
.perfos { height: 14px; margin: clamp(26px, 6vw, 44px) 0;
          background-image: radial-gradient(circle, var(--bord) 2.4px, transparent 2.6px);
          background-size: 22px 14px; background-position: center;
          opacity: .8; }

/* ---------- sections ---------- */
section { margin: clamp(28px, 6vw, 44px) 0; }
.titre-rang { display: flex; align-items: baseline; justify-content: space-between;
              gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.titre-rang p { color: var(--gris); margin: 0; font-size: .92rem; }
.oeil { font-family: var(--display); font-size: .72rem; font-weight: 700;
        letter-spacing: .14em; text-transform: uppercase; color: var(--gris-fort);
        display: block; margin-bottom: 5px; }

/* ---------- grille de films ---------- */
.films { display: grid; gap: 18px;
         grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.film { display: flex; flex-direction: column; gap: 9px; }
.film .affiche { position: relative; aspect-ratio: 2 / 3; border-radius: var(--r);
                 overflow: hidden; background: var(--surface-2);
                 border: 1px solid var(--bord); }
.film .affiche img { width: 100%; height: 100%; object-fit: cover;
                     transition: transform .35s ease; }
.film:hover .affiche img { transform: scale(1.04); }
.film .sans-affiche { display: grid; place-items: center; height: 100%;
                      color: var(--gris-fort); font-family: var(--mono);
                      font-size: .72rem; text-align: center; padding: 10px; }
.film .compte { position: absolute; left: 8px; bottom: 8px;
                background: rgba(10, 12, 16, .9); border: 1px solid var(--bord);
                border-radius: 2px; padding: 3px 7px;
                font-family: var(--mono); font-size: .7rem; }
.film .nom { font-weight: 600; font-size: .95rem; line-height: 1.28; }
.film .meta { color: var(--gris); font-size: .8rem;
              font-family: var(--mono); }

/* ---------- pastilles de format ---------- */
.form { font-family: var(--display); font-size: .66rem; font-weight: 700;
        letter-spacing: .08em; text-transform: uppercase;
        padding: 3px 7px; border-radius: 2px; white-space: nowrap;
        border: 1px solid transparent; }
.form-chaud { background: var(--chaud-nu); color: var(--chaud);
              border-color: rgba(255, 90, 60, .3); }
.form-froid { background: var(--froid-nu); color: var(--froid);
              border-color: rgba(111, 211, 232, .28); }
.vo { color: var(--vo); font-family: var(--mono); font-size: .74rem; }
.vf { color: var(--gris-fort); font-family: var(--mono); font-size: .74rem; }

/* ---------- séances ---------- */
.jour { margin-bottom: 30px; }
.jour > h3 { font-family: var(--display); font-size: 1.02rem;
             padding-bottom: 8px; border-bottom: 1px solid var(--bord);
             margin-bottom: 14px; text-transform: capitalize; }
.bloc-salle { padding: 13px 0; border-bottom: 1px solid var(--bord); }
.bloc-salle:last-child { border-bottom: 0; }
.bloc-salle .ligne1 { display: flex; align-items: center; gap: 10px;
                      flex-wrap: wrap; margin-bottom: 9px; }
.bloc-salle .lieu { font-weight: 600; }
.bloc-salle .ville { color: var(--gris); font-size: .85rem; }
.horaires { display: flex; flex-wrap: wrap; gap: 7px; }
.h {
  font-family: var(--mono); font-size: .84rem; font-variant-numeric: tabular-nums;
  padding: 6px 10px; border-radius: 2px; background: var(--surface-2);
  border: 1px solid var(--bord); color: var(--toile);
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .15s ease, background .15s ease;
}
.h:hover { border-color: var(--chaud); background: var(--chaud-nu); }
.h .marq { font-size: .68rem; letter-spacing: .04em;
           color: var(--gris); font-family: var(--mono); }
/* Le titre cède la place à l'heure quand l'écran se resserre : c'est l'heure
   qu'on cherche dans une grille, le titre se relit dans l'en-tête du bloc. */
.h .marq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
           max-width: 22ch; }
@media (max-width: 560px) { .h .marq { max-width: 11ch; } }

/* ---------- bandeau des journées ---------- */
.bandeau-jours { display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 10px;
                 scrollbar-width: thin; }
.jeton-jour { flex: 1 0 auto; min-width: 96px; border: 1px solid var(--bord);
              border-radius: var(--r); background: var(--surface);
              padding: 9px 11px; display: flex; flex-direction: column;
              gap: 2px; text-align: left; }
.jeton-jour:hover { border-color: var(--gris-fort); }
.jeton-jour .q { font-size: .78rem; color: var(--gris); white-space: nowrap; }
.jeton-jour .n { font-family: var(--display); font-weight: 800; font-size: 1.1rem;
                 font-variant-numeric: tabular-nums; }

/* ---------- filtres ---------- */
.filtres { background: rgba(10, 12, 16, .92);
           border-bottom: 1px solid var(--bord); padding: 12px 0; }
@media (min-width: 768px) {
  .filtres { position: sticky; top: 60px; z-index: 30;
             backdrop-filter: blur(10px); }
}
/* Six critères : en grille ils gardent la même largeur et se replient de
   trois colonnes à deux puis à une, sans qu'un champ reste seul sur sa
   ligne comme le ferait un flex. */
.filtres .rangee { display: grid; gap: 8px;
                   grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.filtres .rangee-pied { display: flex; align-items: center; gap: 12px;
                        margin-top: 8px; }
select, .bouton {
  font-family: var(--corps); font-size: .86rem; line-height: 1.2;
  background: var(--surface-2); color: var(--toile);
  border: 1px solid var(--bord); border-radius: var(--r);
  padding: 8px 11px; height: 38px; cursor: pointer; width: 100%;
}
select {
  appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
                    linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
select:hover, .bouton:hover { border-color: var(--gris-fort); }
.bouton { width: auto; }
.bouton.discret { color: var(--gris); }
.compte-resultats { color: var(--gris); font-size: .84rem;
                    font-family: var(--mono); margin-right: auto; }
.cle-lecture { color: var(--gris-fort); font-size: .8rem; margin-right: auto; }
.cle-lecture .vo { font-size: .74rem; }
@media (max-width: 700px) { .cle-lecture { display: none; } }

/* ---------- tableaux ---------- */
.tableau-enveloppe { overflow-x: auto; border: 1px solid var(--bord);
                     border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 11px 14px;
         border-bottom: 1px solid var(--bord); white-space: nowrap; }
th { font-family: var(--display); font-size: .72rem; font-weight: 700;
     letter-spacing: .1em; text-transform: uppercase; color: var(--gris-fort);
     background: var(--surface); }
tr:last-child td { border-bottom: 0; }
td.horaires-cell { white-space: normal; min-width: 240px; }
@media (max-width: 620px) {
  .secondaire { display: none; }
  /* « Kinepolis Nîmes Multiplexe - IMAX » ne tient pas sur une ligne de
     375 px : sur petit écran le nom se replie, le reste garde sa ligne. */
  th, td { padding: 10px 11px; white-space: normal; }
  th { letter-spacing: .05em; }
  td:first-child { min-width: 8.5em; }
}

/* ---------- fiche ---------- */
.fiche { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .fiche { grid-template-columns: 232px 1fr; }
  /* Sans affiche, la colonne de gauche resterait vide et le titre paraîtrait
     décentré sans raison. */
  .fiche.sans-visuel { grid-template-columns: 1fr; }
}
.fiche .affiche-grande { border-radius: var(--r); overflow: hidden;
                         border: 1px solid var(--bord); background: var(--surface-2);
                         max-width: 208px; }
.fiche .affiche-grande img { width: 100%; height: auto; }
@media (min-width: 720px) { .fiche .affiche-grande { max-width: none; } }
.attributs { display: flex; flex-wrap: wrap; gap: 7px 22px; margin: 14px 0 0;
             padding: 0; list-style: none; color: var(--gris); font-size: .9rem; }
.attributs b { color: var(--toile); font-weight: 600; }

/* ---------- carte ---------- */
.carte-france { background: var(--nuit); border: 1px solid var(--bord);
                border-radius: var(--r); padding: 8px; }
.carte-france svg { width: 100%; height: auto; display: block; }
/* Le fond : des départements réels, en filets d'un demi-point. Ceux qui
   accueillent une salle se détachent d'un ton — l'information avant les
   pastilles. */
.departements path { fill: #10141A; stroke: #1D2530; stroke-width: .7;
                     stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.departements path.habite { fill: #161C25; stroke: #283140; }
.carte-france.encart { margin-top: 14px; }
.encart-titre { font-family: var(--display); font-weight: 700; font-size: .95rem;
                padding: 6px 8px 0; display: flex; gap: 10px; align-items: baseline;
                flex-wrap: wrap; }
.encart-titre span { font-family: var(--mono); font-weight: 400;
                     font-size: .76rem; color: var(--gris-fort); }
.point { cursor: pointer; transition: fill-opacity .15s ease; }
a:hover .point { fill-opacity: .6; }
.rappel { stroke: var(--gris-fort); stroke-width: .9; }

/* ---------- chiffres ---------- */
.jauge { display: inline-block; width: 84px; height: 6px; border-radius: 3px;
         background: var(--surface-2); vertical-align: middle;
         margin-right: 8px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--froid); }
.mono-part { font-family: var(--mono); font-size: .8rem; color: var(--gris); }
.barres { display: flex; gap: 6px; align-items: flex-end;
          border: 1px solid var(--bord); border-radius: var(--r);
          background: var(--surface); padding: 16px 14px; }
.barre { flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
         gap: 6px; min-width: 0; }
.barre .tige { width: 100%; max-width: 46px; height: 118px; display: flex;
               align-items: flex-end; background: var(--surface-2);
               border-radius: 2px; overflow: hidden; }
.barre .tige span { width: 100%; background: var(--froid); opacity: .75; }
.barre .valeur { font-family: var(--mono); font-size: .8rem;
                 font-variant-numeric: tabular-nums; }
.barre .etiq { font-size: .7rem; color: var(--gris-fort); text-align: center;
               line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; max-width: 100%; }

/* ---------- deux colonnes ---------- */
.deux-colonnes { display: grid; gap: 14px;
                 grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.carte-texte { border: 1px solid var(--bord); border-radius: var(--r);
               background: var(--surface); padding: 18px 20px; }
.carte-texte h3 { margin: 10px 0 8px; font-size: 1.15rem; }
.carte-texte p { color: var(--gris); font-size: .93rem; margin: 0 0 10px; }
.carte-texte p:last-child { margin-bottom: 0; }
.attribution { color: var(--gris-fort); font-size: .78rem; margin: 9px 0 0;
               font-family: var(--mono); }

/* ---------- nav mobile ---------- */
.nav-mobile {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(10, 12, 16, .96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--bord);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-mobile a { padding: 9px 4px 10px; text-align: center; font-size: .68rem;
                color: var(--gris-fort); display: flex; flex-direction: column;
                align-items: center; gap: 3px; }
.nav-mobile a.actif { color: var(--chaud); }
.nav-mobile svg { width: 19px; height: 19px; }
@media (min-width: 768px) { .nav-mobile { display: none; } }

/* ---------- divers ---------- */
.vide { color: var(--gris); padding: 34px 0; text-align: center;
        border: 1px dashed var(--bord); border-radius: var(--r); }
.alerte { border-left: 2px solid var(--chaud); background: var(--chaud-nu);
          padding: 11px 15px; border-radius: 0 var(--r) var(--r) 0;
          font-size: .89rem; margin: 18px 0; }
.pied { border-top: 1px solid var(--bord); margin-top: 56px; padding: 24px 0 40px;
        color: var(--gris-fort); font-size: .82rem; }
.pied a { color: var(--gris); text-decoration: underline;
          text-underline-offset: 2px; }
.fil { color: var(--gris-fort); font-size: .82rem; margin-bottom: 10px;
       font-family: var(--mono); }
.fil a:hover { color: var(--toile); }
[hidden] { display: none !important; }