/* Séancéo — identité « salle obscure ».
   Le site recense le répertoire (films qui repassent) : l'ambre du projecteur
   est l'accent, le rouge ne signifie plus QUE « cinéma indépendant » (notre
   signature), et le vert ne sert qu'aux notes Letterboxd. Une couleur, un sens. */
:root {
  --bg: #0d1014;          /* noir bleuté de salle obscure */
  --panel: #151a21;
  --sunk: #10141a;
  --text: #ece7de;
  --muted: #98a0ab;
  --rule: #262c36;
  --accent: #d9a441;      /* ambre : lumière tungstène du projecteur */
  --accent-soft: #d9a4411f;
  --accent-deep: #57482a;
  --indie: #ec5765;       /* rouge : signature « indé » UNIQUEMENT */
  --lb: #4ee38a;          /* vert : note Letterboxd UNIQUEMENT */
  --radius: 10px;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Titrage en serif : familles présentes nativement sur macOS/Windows/Android,
   donc aucune police à charger (et aucun appel réseau). */
h1, h2, .brand, .movie-card h3, .cycle-nom, .film, .salle-nom, .compteur b {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: inherit; }
a:hover { color: var(--accent); }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  /* --pad sert DEUX fois : ici comme padding, et en marge négative sur la nav
     mobile pour que la barre défilante aille jusqu'aux bords de l'écran. */
  --pad: clamp(16px, 4vw, 48px);
  padding: 14px var(--pad);
  border-bottom: 2px solid var(--accent);
  background: var(--panel);
}

.brand {
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.tagline { margin: 0; color: var(--muted); font-size: .9rem; }

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 48px) 48px;
}

h1 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; }
h2 { margin-top: 2em; border-bottom: 1px solid var(--accent-deep); padding-bottom: .3em; }

.lead { color: var(--muted); }
.meta { color: var(--muted); font-size: .88rem; margin: .2em 0; }
.lead, .movie-card .meta { text-wrap: pretty; }

/* Cartes film */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.movie-card {
  display: flex;
  gap: 12px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 12px;
  margin: 10px 0;
}

.movie-card img, .noposter {
  width: 72px;
  height: 104px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.noposter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #242a35;
  font-size: 1.6rem;
}

.movie-card h3 { margin: 0 0 .25em; font-size: 1rem; }
.movie-card h3 a { text-decoration: none; }
.movie-info { min-width: 0; }

/* Pastilles de séances — flex-wrap obligatoire (leçon de Paris Ciné) */
.showtimes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: .4em 0 0;
}

/* Chips informatives, pas des boutons : l'ancien style rouge (bordure accent)
   promettait un clic qui n'existait pas — affordance trompeuse. */
.showtimes li {
  background: #1f242e;
  border: 1px solid #3a4150;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .85rem;
  white-space: nowrap;
}

.showtimes .v { color: var(--muted); font-size: .78rem; }

/* Séance réservable : celle-là mène vraiment quelque part (la billetterie du
   cinéma, dans un nouvel onglet), donc elle a le droit d'en avoir l'air —
   c'est l'inverse du défaut corrigé plus haut, où TOUTES les pastilles
   promettaient un clic inexistant. La flèche annonce la sortie du site. */
.showtimes li.reservable {
  border-color: var(--accent-deep);
  padding: 0;
}
.showtimes li.reservable a {
  display: block;
  padding: 2px 10px;
  text-decoration: none;
}
.showtimes li.reservable a::after {
  content: " ↗";
  color: var(--accent);
  font-size: .78rem;
}
.showtimes li.reservable:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Agenda de l'accueil : même contrat sur l'heure de la séance */
.heure.reservable a { text-decoration: none; }
.heure.reservable a::after { content: " ↗"; font-size: .7em; }
.heure.reservable a:hover { text-decoration: underline; }

.day { font-weight: 600; font-size: .9rem; display: block; margin-top: .6em; }

.cinema-block {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 4px 18px 14px;
  margin: 14px 0;
}

.cinema-block h2, .cinema-block h3, .cinema-block h4 { border: none; margin: .6em 0 .1em; }
.cinema-block h4 { font-size: 1.05rem; }
.cinema-block { scroll-margin-top: 12px; }

/* Page ville : cartes film en grille — la colonne unique laissait la moitié
   droite du conteneur vide en desktop. min() : jamais plus large que le parent. */
.cinema-block .films {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 10px;
  margin: 10px 0;
}
.cinema-block .films .movie-card { margin: 0; }

/* Listes longues repliées (« + N autres films », suite du classement, villes) */
.more-films > summary, .all-cities > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 0;
}
.more-films > summary:hover, .all-cities > summary:hover { color: var(--accent); }

/* Distinction indé / chaîne — l'indé porte l'accent rouge, sa signature */
.badge {
  display: inline-block;
  vertical-align: middle;
  font-size: .68rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 8px;
  letter-spacing: .02em;
}

.badge-inde { background: var(--indie); color: #fff; }
.badge-chain { background: #2a2f3a; color: var(--muted); border: 1px solid #3a4150; }
/* Reprises de classiques : badge doré, clin d'œil pellicule */
.badge-classic { background: #33290f; color: var(--accent); border: 1px solid var(--accent-deep); }
/* Anniversaire rond : même famille dorée que Classique, une nuance plus chaude
   (reste dans la palette ambre du site, aucune couleur nouvelle). */
.badge-anniv { background: #3a2a12; color: var(--accent); border: 1px solid var(--accent-deep); }
/* Ligne anniversaire sur la fiche film : discrète, ton ambré. */
.anniv-note { color: var(--accent); font-size: .92rem; margin: .4em 0 0; }

.more { font-weight: 600; }

/* Fiche film : sommaire des villes où le film passe */
.city-jump {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--card, #171b22);
  border: 1px solid #2a2f3a;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 10px 0 18px;
}
.city-search { position: relative; }
.city-search input {
  background: #0f1218;
  color: inherit;
  border: 1px solid #3a4150;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: .9rem;
  min-width: 240px;
}
.city-search input:focus { border-color: var(--accent); }
/* Suggestions au fil de la frappe (2 lettres mini, voir film.js) */
#city-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 240px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #12151b;
  border: 1px solid #3a4150;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
#city-suggest li {
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
}
#city-suggest li:hover, #city-suggest li.active {
  background: var(--accent-soft, #2a1418);
  color: #fff;
}
.city-jump a {
  display: inline-block;
  font-size: .85rem;
  padding: 6px 12px; /* cible tactile confortable (loi de Fitts) */
  margin: 0 2px;
  border: 1px solid #3a4150;
  border-radius: 999px;
  text-decoration: none;
}
.city-jump a:hover { border-color: var(--accent); }

/* Accueil : bouton « Autour de moi » posé dans la barre de recherche de ville,
   et liste des villes les plus proches après géolocalisation (proximite.js). */
.proximite-btn {
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}
.proximite-btn:hover { background: var(--accent); color: #1a1400; }
.proximite-btn:disabled { opacity: .6; cursor: progress; }
/* Sans JavaScript, une géolocalisation morte n'aurait aucun sens : on masque
   le bouton (la recherche de ville, elle, reste utilisable). */
html:not(.js) .proximite-btn { display: none; }

#proximite { margin: 6px 0 0; }
.proximite-titre { color: var(--muted); font-size: .9rem; margin: 0 0 10px; }
.proximite-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.proximite-ville {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-decoration: none;
}
.proximite-ville:hover { border-color: var(--accent); }
/* Une ville qui programme du répertoire porte l'accent ambre : c'est ce que
   le visiteur est venu chercher. */
.proximite-ville.has-rep { border-left: 3px solid var(--accent); }
.proximite-nom { font-family: var(--display); font-weight: 600; }
.proximite-meta { color: var(--muted); font-size: .82rem; }
.proximite-ville.has-rep .proximite-meta { color: var(--accent); }

/* Fiche film : une seule ville affichée à la fois.
   Les sections restent dans le HTML (indexables) ; le masquage n'est actif
   qu'avec JavaScript (classe `js` posée dans le <head>) — sinon la recherche
   ne pourrait rien révéler et la page serait vide. */
html.js .city-list.filtered > .city-group { display: none; }
html.js .city-list.filtered > .city-group.shown { display: block; }

.city-group { scroll-margin-top: 12px; }
.city-group > h3 {
  border: none;
  font-size: 1.15rem;
  margin: .2em 0 .1em;
}
.city-group > h3 .meta { font-size: .8rem; font-weight: 400; }

.city-prompt {
  color: var(--muted);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-wrap: pretty;
}

/* Idées de marathon : deux films enchaînés dans deux salles voisines */
.marathon {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 4px 18px 16px;
  margin: 16px 0;
}
.marathon > h3 {
  border: none;
  font-size: 1.05rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: .9em 0 .2em;
}
/* Deux films côte à côte, empilés dès que la colonne devient étroite */
.marathon-films { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.marathon-films .movie-card { margin: 0; }
.marathon-transfer {
  color: var(--muted);
  font-size: .9rem;
  border-top: 1px solid #2a2f3a;
  padding-top: 10px;
  margin: 12px 0 0;
  text-wrap: pretty;
}

/* « Aujourd'hui » dans le titre d'un marathon : pilule ambre pour ressortir
   dans le h3 gris (l'ambre est la couleur d'accent du site). */
.marathon-today {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-soft);
  padding: 1px 9px;
  border-radius: 999px;
}

/* Marathon culte : deux classiques enchaînés, l'accent ambre le distingue */
.marathon-cult { border: 1px solid var(--accent-deep); }
.badge-cult {
  background: #33290f;
  color: var(--accent);
  border: 1px solid var(--accent-deep);
  text-transform: none;
  letter-spacing: 0;
}
/* La section « Marathons cultes » en tête de page, légèrement mise en valeur */
.marathon-cults { margin-top: 8px; }
.marathon-cults > h2 { color: var(--accent); }

/* Recherche de film dans le header (titre ou réalisateur, voir search.js).
   Sans JavaScript elle ne peut rien chercher : on la retire plutôt que
   d'offrir un champ mort. */
html:not(.js) .film-search { display: none; }
.film-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}
.film-search input {
  width: 100%;
  background: #0f1218;
  color: inherit;
  border: 1px solid #3a4150;
  border-radius: 999px;
  padding: 7px 16px;
  font: inherit;
  font-size: .9rem;
}
.film-search input:focus { border-color: var(--accent); }
#film-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #12151b;
  border: 1px solid #3a4150;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
#film-suggest li {
  display: flex;
  flex-direction: column;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1.3;
}
#film-suggest li:hover, #film-suggest li.active {
  background: var(--accent-soft);
  color: #fff;
}
#film-suggest .suggest-meta { color: var(--muted); font-size: .8rem; }
#film-suggest .suggest-vide { cursor: default; color: var(--muted); }

/* Barre de tri / filtre au-dessus d'une liste de films (voir tri.js).
   Inutile sans JavaScript — la liste est alors servie entière, déjà triée. */
html:not(.js) .film-tools { display: none; }
.film-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  background: var(--card, #171b22);
  border: 1px solid #2a2f3a;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 14px 0 18px;
  font-size: .9rem;
}
.tri-tri { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tri-label { color: var(--muted); }

/* Boutons de tri et de filtre : même grammaire visuelle, l'actif porte
   l'accent. Un second clic sur le tri actif inverse le sens (voir tri.js) ;
   la marque « ↓ » ou « A → Z » dit lequel est appliqué. */
.tri-tri button, .tri-versions button {
  background: none;
  color: var(--muted);
  border: 1px solid #3a4150;
  border-radius: 999px;
  padding: 6px 14px;      /* cible tactile confortable */
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.tri-tri button:hover, .tri-versions button:hover {
  border-color: var(--accent);
  color: var(--text);
}
.tri-tri button[aria-pressed="true"], .tri-versions button[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
/* Marque du sens de tri : réservée en largeur pour que le bouton ne saute
   pas quand on l'active, et tabulaire pour que « A → Z » et « Z → A »
   occupent exactement la même place. */
.tri-sens {
  display: inline-block;
  min-width: 1em;
  margin-left: 6px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tri-versions { display: flex; gap: 6px; }

/* Menus de filtre (décennie / genre / pays) : posés au build seulement quand la
   liste contient de vraies valeurs. Menus natifs = accessibles et compacts. */
.tri-filtres { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.tri-filtre { display: inline-flex; align-items: center; gap: 6px; }
.tri-filtre-nom { color: var(--muted); font-size: .85rem; }
.tri-filtres select {
  background: var(--sunk);
  color: var(--text);
  border: 1px solid #3a4150;
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.tri-filtres select:focus { outline: none; border-color: var(--accent); }

.tri-compte { margin: 0 0 0 auto; color: var(--muted); font-size: .85rem; }

/* Cartes masquées par le filtre ou la pagination : `hidden` seul ne suffit
   pas, `.movie-card { display: flex }` le prendrait de vitesse. */
.movie-card[hidden] { display: none; }
/* Page ville : un cinéma (ou son repli « plus tard ») vidé par le filtre langue
   est masqué — mêmes gardes contre le piège `display:` vs `hidden`. */
.cinema-block[hidden] { display: none; }
.more-films[hidden] { display: none; }

/* Rang du classement Letterboxd : sans objet dès qu'on trie autrement */
.film-list.hors-classement .rang-lb, .grid.hors-classement .rang-lb { display: none; }

.tri-plus {
  display: block;
  width: 100%;
  margin: 18px 0 0;
  padding: 12px;
  background: none;
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tri-plus:hover { background: var(--accent-soft); }
/* Même piège que `.retour` : `display: block` battrait l'attribut `hidden`,
   et le bouton resterait affiché alors qu'il ne reste rien à afficher. */
.tri-plus[hidden] { display: none; }

/* ── Ma watchlist Letterboxd ─────────────────────────────────────────── */
.wl-drop {
  border: 2px dashed #3a4150;
  border-radius: var(--radius);
  background: var(--panel);
  padding: 30px 20px;
  text-align: center;
  margin: 18px 0;
  transition: border-color .15s, background .15s;
}
.wl-drop.wl-over { border-color: var(--lb); background: #12211a; }
.wl-drop-main { margin: 0 0 8px; }
.wl-drop-alt { margin: 0; color: var(--muted); font-size: .9rem; }
/* Le bouton de dépôt emprunte l'accent vert de Letterboxd, pas l'ambre :
   c'est l'action « Letterboxd » de la page. */
#wl-pick { border-color: var(--lb); color: var(--lb); }
#wl-pick:hover { background: var(--lb); color: #06130c; }

.wl-privacy {
  color: var(--muted);
  font-size: .9rem;
  background: #12211a;
  border: 1px solid #24402f;
  border-radius: var(--radius);
  padding: 12px 16px;
  text-wrap: pretty;
}
.wl-summary { font-size: 1.05rem; margin: 22px 0 14px; text-wrap: pretty; }
.wl-erreur {
  color: var(--indie);
  background: #241417;
  border: 1px solid #4a2630;
  border-radius: var(--radius);
  padding: 12px 16px;
}
.wl-how { margin-top: 24px; }
.wl-how > summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 8px 0; }
.wl-how > summary:hover { color: var(--accent); }
.wl-how code {
  font-family: var(--mono);
  font-size: .85em;
  background: #0f1218;
  padding: 1px 5px;
  border-radius: 4px;
}

/* Accent Letterboxd (vert) pour l'appel watchlist sur l'accueil et son onglet */
/* Vert Letterboxd sur les boutons LB. Sélecteur à DEUX classes exprès :
   `.bouton` (base ambre) est défini plus bas dans la feuille ; à specificité
   égale il gagnerait par ordre de cascade et repeindrait le bouton en ambre.
   `.bouton.bouton-lb` (0,2,0) passe devant `.bouton` (0,1,0) quel que soit l'ordre. */
.bouton.bouton-lb { border-color: var(--lb); color: var(--lb); }
.bouton.bouton-lb:hover { background: var(--lb); color: #06130c; border-color: var(--lb); }
.wl-cta { border-color: #24402f; }
.wl-cta[hidden] { display: none; }  /* .passerelle est en display:flex : garde anti-piège */
.nav-wl { border-color: var(--lb) !important; }

/* ---- Connexion Letterboxd par pseudo (page /ma-watchlist/) ---- */
.lb-connect { margin: 18px 0 6px; }
.lb-connect label { display: block; font-weight: 600; margin-bottom: 8px; }
.lb-field { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lb-input {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--sunk);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 1rem;
}
.lb-input:focus { outline: none; border-color: var(--lb); }
.lb-field .bouton { flex: 0 0 auto; cursor: pointer; }
.lb-connect-note {
  color: var(--muted);
  font-size: .9rem;
  background: #12211a;
  border: 1px solid #24402f;
  border-radius: var(--radius);
  padding: 12px 16px;
  text-wrap: pretty;
}
/* Rappel « pseudo de l'URL, pas nom affiché » sous les deux champs de saisie
   (page /ma-watchlist/ et portail d'accueil). Discret mais juste sous le champ :
   c'est là qu'on se trompe, pas dans un encart plus bas. */
.lb-hint {
  color: var(--muted);
  font-size: .85rem;
  margin: 8px 0 14px;
  text-wrap: pretty;
}
.lb-hint code {
  background: #12211a;
  border: 1px solid #24402f;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: .95em;
}
.lb-hint code b, .lb-empty code .lb-eg { color: var(--lb); font-weight: 700; }
.lb-empty code {
  background: #12211a;
  border: 1px solid #24402f;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: .95em;
}

.lb-connected { color: var(--muted); font-size: .92rem; margin: 14px 0 0; }
.lb-connected span { color: var(--lb); font-weight: 600; }
.lb-secondary {
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.lb-secondary:hover { color: var(--accent); }

/* Favoris à revoir : section mise en avant (accent Letterboxd + étoile). On
   reste dans la palette « vert = Letterboxd », pas de nouvelle couleur. */
.lb-favs {
  margin: 20px 0 26px;
  padding: 16px 18px 6px;
  background: #12211a;
  border: 1px solid #24402f;
  border-left: 3px solid var(--lb);
  border-radius: var(--radius);
}
.lb-favs h3 { margin: 0 0 4px; border: none; padding: 0; font-size: 1.15rem; }
.lb-favs-sub { margin: 0 0 12px; color: var(--muted); font-size: .92rem; text-wrap: pretty; }
.lb-favs .grid { margin-bottom: 6px; }

/* Cadrage géographique de la watchlist : « À Nancy » d'abord, « Ailleurs en
   France » ensuite. La hiérarchie visuelle porte tout le sens de la page —
   la section de la ville du visiteur est la seule mise en avant (bordure
   ambre = accent du site), le reste est explicitement secondaire. */
.lb-city-bar { color: var(--muted); font-size: .92rem; margin: 14px 0 4px; }
.lb-city-on { color: var(--accent); font-weight: 600; }
/* Changer de ville est une vraie action, pas une note de bas de page : bouton
   visible plutôt que lien souligné, même quand une ville est déjà cadrée. */
.lb-city-chg {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  padding: 3px 12px;
  margin: 0 2px;
}
.lb-city-chg:hover { border-color: var(--accent); color: var(--accent); }
/* Demander sa ville est l'action principale de l'écran : le champ est affiché
   d'emblée (plus de « Choisir ma ville » à cliquer d'abord) et encadré comme
   la section de ville des résultats, avec le même accent ambre. */
.lb-city-edit {
  margin: 16px 0 6px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.lb-city-edit label { display: block; font-weight: 600; margin-bottom: 8px; }
.lb-city-edit .lb-field { display: flex; gap: 8px; max-width: 420px; }
.lb-city-actions { display: inline-block; margin-top: 8px; font-size: .9rem; }
.lb-city-msg { display: block; color: var(--muted); font-size: .85rem; margin-top: 6px; }

/* Suggestions de ville au fil de la frappe (2 lettres mini, voir autoVille).
   Le conteneur remplace le champ dans la ligne flex : il en reprend donc la
   souplesse, sinon le champ perdrait sa largeur. */
.lb-suggest-wrap { position: relative; flex: 1 1 220px; min-width: 0; display: block; }
.lb-suggest-wrap .lb-input { width: 100%; flex: none; }
.lb-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.lb-suggest[hidden] { display: none; }  /* display: l'emporterait sur `hidden` */
.lb-suggest li {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .95rem;
}
.lb-suggest li:hover, .lb-suggest li.active { background: var(--sunk); color: var(--accent); }

.lb-sec-sub { margin: 0 0 12px; color: var(--muted); font-size: .92rem; text-wrap: pretty; }
.lb-ici {
  margin: 20px 0 26px;
  padding: 16px 18px 6px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.lb-ici h3 { margin: 0 0 4px; border: none; padding: 0; font-size: 1.15rem; }
.lb-ici .grid { margin-bottom: 6px; }
/* Ville du visiteur sans rien à l'affiche : on garde le cadre (c'est bien la
   réponse à sa question) mais sans l'accent, qui promettrait des séances. */
.lb-ici-vide { border-left-color: var(--rule); }
.lb-ailleurs { margin: 26px 0 0; }
.lb-ailleurs h3 { font-size: 1.05rem; color: var(--muted); }

/* Message watchlist vide ou privée. */
.lb-empty {
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-wrap: pretty;
}
.lb-empty b { color: var(--text); }

/* Bloc « Ajouter à Google Agenda » (calendrier .ics servi par le Worker). */
#lb-calendar {
  margin: 26px 0;
  padding: 18px 18px 8px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--lb);
  border-radius: var(--radius);
}
#lb-calendar h3 { margin: 0 0 4px; border: none; padding: 0; font-size: 1.15rem; }
.lb-cal-sub { margin: 0 0 14px; color: var(--muted); text-wrap: pretty; }
.lb-cal-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 8px; }
.lb-cal-actions .bouton { cursor: pointer; }
.lb-cal-scope { margin: 0 0 12px; color: var(--muted); font-size: .85rem; }
.lb-cal-other { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: .9rem; margin: 0 0 8px; }
.lb-cal-url { flex: 1 1 240px; min-width: 0; font-size: .82rem; font-family: var(--mono); }

/* Le CSV devient le repli « watchlist privée / sans compte » : replié par défaut. */
.wl-alt { margin-top: 26px; border-top: 1px solid var(--rule); padding-top: 10px; }
.wl-alt > summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 8px 0; }
.wl-alt > summary:hover { color: var(--accent); }
.wl-drop-help, .wl-steps { color: var(--muted); font-size: .92rem; }
.wl-steps code, .wl-drop-help code {
  font-family: var(--mono); font-size: .85em;
  background: var(--sunk); padding: 1px 5px; border-radius: 4px;
}

/* ---- Onglets « pseudo / liste » (page /ma-watchlist/) ----
   Chrome de navigation : accent AMBRE (le vert reste réservé aux notes
   Letterboxd). Sans JavaScript, la barre disparaît et les deux panneaux
   s'empilent, tout reste lisible. */
.wl-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--rule); margin: 4px 0 6px; }
html:not(.js) .wl-tabs { display: none; }
.wl-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 14px; margin-bottom: -1px;
}
.wl-tab:hover { color: var(--text); }
.wl-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.wl-pane[hidden] { display: none; }

/* Barre de filtre (menu des villes + « autour de moi »). display:flex, donc la
   règle [hidden] est indispensable (sinon le masquage serait sans effet). */
.list-controls {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  margin: 18px 0 6px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
}
.list-controls[hidden] { display: none; }
.list-city-label { font-weight: 600; color: var(--muted); }
.list-city {
  background: var(--sunk); color: var(--text);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 8px 10px; font: inherit; max-width: 220px;
}
.list-city:focus { outline: none; border-color: var(--accent); }
.list-geo { margin-left: auto; }

/* Séance unique : le film ne passe qu'une fois dans toute la France sur la
   fenêtre (6 films de répertoire sur 10). En AMBRE, comme tout ce qui demande
   l'attention sur ce site — surtout pas en rouge, réservé à la signature indé,
   ni en vert, réservé aux notes Letterboxd. La pastille reprend le dessin de
   `.marathon-today`, qui joue déjà ce rôle d'urgence datée ailleurs. */
.wl-unique {
  display: inline-block;
  margin: .35em 0 0;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-deep);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
}

/* Ligne de séance sous chaque carte de la liste : lieu + billetterie. */
.seance-line { color: var(--muted); font-size: .85rem; margin: .2em 0 0; text-wrap: pretty; }
.seance-book { color: var(--accent); font-weight: 600; white-space: nowrap; }
.seance-book:hover { text-decoration: underline; }

/* ---- Ta cinémathèque (page /cinematheque/) ---- */
.cine-chips-label { color: var(--muted); font-size: .85rem; margin: 16px 0 8px; }
.cine-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cine-chip {
  background: var(--sunk); border: 1px solid var(--rule); color: var(--text);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .9rem; cursor: pointer;
}
.cine-chip:hover { border-color: var(--accent); }
.cine-chip span { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 4px; }

.cine-insight {
  background: linear-gradient(180deg, #1b232e, var(--panel));
  border: 1px solid var(--accent-deep); border-radius: var(--radius);
  padding: 18px 22px; margin: 22px 0 18px;
}
.cine-big { font-family: var(--display); font-size: 1.35rem; line-height: 1.3;
            margin: 0; text-wrap: pretty; }
.cine-big b { color: var(--accent); font-variant-numeric: tabular-nums; }

.cine-controls { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; margin-bottom: 18px; }
.cine-seg-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctl-label { color: var(--muted); font-size: .85rem; }
.cine-segbar { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cine-seg {
  background: none; border: 1px solid var(--rule); color: var(--muted);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: .84rem; cursor: pointer;
}
.cine-seg[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent);
  color: var(--text); font-weight: 600; }
.cine-more { color: var(--muted); }
.cine-grouped { border-color: var(--accent-deep); }

.cine-export {
  margin-top: 22px; padding: 18px; background: var(--panel);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.cine-export .bouton { cursor: pointer; }
.cine-export .meta { margin: 12px 0 0; }

/* Encart d'entrée sur l'accueil + bouton sur les pages de rétrospective. */
.cine-cta { border-color: var(--accent-deep); }
/* Le bouton d'extension vers la cinémathèque : `.bouton` est un <a> inline, et
   un inline à padding vertical déborde sur ses voisins sans les pousser (il
   « mangeait » la ligne « Au programme »). inline-block respecte le padding, et
   on autorise le retour à la ligne pour les noms longs. */
.cine-extend { margin: 16px 0 22px; }
.cine-extend .bouton { display: inline-block; white-space: normal; cursor: pointer; }

/* Recommandations « Pour toi » sur l'accueil : bloc encadré (accent Letterboxd
   comme les autres modules Letterboxd), une sous-section par réalisateur. */
#reco-home {
  margin: 26px 0;
  padding: 18px 18px 8px;
  background: #12211a;
  border: 1px solid #24402f;
  border-left: 3px solid var(--lb);
  border-radius: var(--radius);
}
.reco-home-titre { margin: 0 0 2px; border: none; padding: 0; }
.reco-dir { margin: 22px 0; }
.reco-dir h3 { margin-bottom: 2px; }
.reco-sub { color: var(--muted); font-size: .92rem; margin: 0 0 14px; text-wrap: pretty; }

/* ---- Portail d'accueil (injecté en JS, absent du HTML source) ---- */
.lb-portal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 11, .78);
  backdrop-filter: blur(3px);
  animation: lb-fade .18s ease-out;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lb-portal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--lb);
  border-radius: var(--radius);
  padding: 26px 24px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lb-portal-card h2 { margin: 0 0 10px; border: none; padding: 0; font-size: 1.35rem; }
.lb-portal-card > p { margin: 0 0 16px; color: var(--muted); text-wrap: pretty; }
.lb-portal-card .lb-field { margin-bottom: 4px; }
.lb-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none; border: none;
  color: var(--muted); font-size: 1.6rem; line-height: 1;
  cursor: pointer; padding: 4px 8px;
}
.lb-close:hover { color: var(--text); }
.lb-portal-alt {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 14px 0 0; font-size: .9rem;
}
.lb-portal-note { color: var(--muted); font-size: .82rem; margin: 14px 0 0; }
.lb-msg { margin: 12px 0 0; font-size: .92rem; }
.lb-error { color: var(--indie); }
.lb-ok-count { color: var(--text); font-size: 1.05rem; margin: 0 0 16px; }
.nav-wl:hover { background: #12211a !important; }

/* Navigation header */
.site-nav { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.site-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
}
.site-nav a:hover { background: var(--accent-soft); }

/* « Vous êtes ici ». On reprend exactement le motif de .bouton:hover (fond
   ambre + texte #1a1400) : même signe, même sens, comme pour les couleurs.
   Contraste #1a1400 sur #d9a441 ≈ 9:1, très au-dessus des 4,5:1 du WCAG AA. */
.site-nav a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1400;
}
/* Cas particulier de la watchlist : son anneau est vert (--lb) via un
   !important. Un fond ambre dans un anneau vert serait incohérent, on lui donne
   son propre actif — exactement comme .bouton.bouton-lb:hover le fait déjà.
   Spécificité 0,3,0, donc ça passe devant la règle générique 0,2,0. */
.site-nav a.nav-wl[aria-current="page"] {
  background: var(--lb);
  color: #06130c;
}

/* Sélecteur de langue FR | EN.
   Volontairement DISCRET : ce n'est pas une section du site, c'est un réglage.
   Il ne porte donc ni l'ambre de l'accent ni la pastille des entrées de nav —
   sinon il se lirait comme une septième destination, alors que les six autres
   comptent davantage. Un cadre sobre, et l'ambre réservé à la langue active.
   Il vient APRÈS la nav dans le HTML et se place au bout de la ligne. */
.lang-switch {
  display: flex;
  gap: 2px;
  align-self: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px;
  overflow: hidden;
}
.lang-switch a {
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--muted);
}
.lang-switch a:hover { background: var(--accent-soft); color: var(--text); }
/* Langue affichée : même motif « vous êtes ici » que la nav (fond ambre,
   texte très sombre), pour qu'un seul et même signe veuille dire une seule
   et même chose partout dans le header. */
.lang-switch a[aria-current="true"] {
  background: var(--accent);
  color: #1a1400;
}

/* Carte des cinémas : page-outil, on lui donne le viewport entier
   (:has ignoré par un très vieux navigateur = simple retour au conteneur 1080px) */
main:has(#cine-map) { max-width: none; }

/* Barre d'outils de la carte : « Autour de moi » + filtre répertoire */
.map-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 14px 0 6px;
}
#geoloc-btn { cursor: pointer; }
#geoloc-btn:disabled { opacity: .6; cursor: progress; }
.map-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .9rem;
  cursor: pointer;
}
.map-filter input { width: 16px; height: 16px; accent-color: var(--accent); }
.map-status {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: .9rem;
  text-wrap: pretty;
}

/* Marqueur « vous êtes ici » : point ambre avec halo, distinct des cinémas */
.cine-moi span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #1a1400;
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px var(--accent);
}
.leaflet-popup-content .pop-rep { color: var(--accent); font-size: .85rem; }

/* Panneau « cinémas les plus proches » sous la carte */
#map-nearby { margin: 20px 0 0; }
#map-nearby h2 { margin-top: 0; }
.near-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.near-item {
  display: flex;
  gap: 14px;
  align-items: baseline;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
}
.near-item:hover { border-color: var(--accent); }
/* Une salle qui programme du répertoire porte l'accent ambre : c'est ce que
   le visiteur est venu chercher. */
.near-item.has-rep { border-left: 3px solid var(--accent); }
.near-dist {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
  font-size: .9rem;
}
.near-nom { font-family: var(--display); font-weight: 600; text-decoration: none; }
.near-nom:hover { color: var(--accent); }
.near-meta { color: var(--muted); font-size: .82rem; margin: .15em 0 0; }
.near-rep { color: var(--accent); font-size: .82rem; margin: .3em 0 0; }

#cine-map {
  height: max(420px, calc(100vh - 330px));
  border-radius: var(--radius);
  border: 1px solid #2a2f3a;
  /* Fond clair (Positron) : gris pâle proche des tuiles, pour ne pas
     laisser un aplat sombre clignoter pendant leur chargement. */
  background: #ebebe6;
  margin-top: 12px;
}

#map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .9rem;
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dot-indep { background: var(--indie); box-shadow: 0 0 0 2px #15130f; }
.dot-chain { background: #4da6ff; box-shadow: 0 0 0 2px #15130f; }

/* Marqueurs (divIcon) : anneau rouge = indé, point bleu = chaîne */
.cine-pin span {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #15130f;
}
.cine-pin-indep span { background: var(--indie); box-shadow: 0 0 0 2px #fff3, 0 0 0 3px var(--indie); }
.cine-pin-chain span { background: #4da6ff; }

.cine-cluster span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  /* Texte SOMBRE sur l'ambre : du blanc tomberait à 1,6:1, illisible. */
  color: #1a1400;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 0 0 4px rgba(217, 164, 65, .3), 0 0 0 1px #15130f;
}

/* Cluster entièrement composé de chaînes : bleu, comme la légende le promet
   (déclaré APRÈS .cine-cluster span pour l'emporter à spécificité égale) */
.cine-cluster-chain span {
  background: #4da6ff;
  box-shadow: 0 0 0 4px rgba(77, 166, 255, .3), 0 0 0 1px #15130f;
}

/* Popups Leaflet en thème sombre */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel);
  color: var(--text);
}
.leaflet-popup-content { font: 14px/1.5 system-ui, sans-serif; }
.leaflet-popup-content .pop-kind { color: var(--muted); font-size: .85rem; }
.leaflet-popup-content a { color: var(--accent); font-weight: 600; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }

/* Fiche film */
.film-head { display: flex; gap: 20px; align-items: flex-start; }
.film-head .poster { width: 160px; border-radius: var(--radius); flex-shrink: 0; }
@media (max-width: 560px) {
  .film-head { flex-direction: column; }
  .film-head .poster { width: 120px; }
}

/* Actions sous le synopsis d'un film : bande-annonce, fiche Letterboxd */
.film-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 14px;
}
.film-actions a { font-weight: 600; text-decoration: none; }
.film-actions a:hover { text-decoration: underline; }
/* Vert Letterboxd : la couleur que le site réserve à cette source */
.film-actions .lien-lb { color: var(--lb); }

/* Liste des villes */
.cities {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 16px;
}

/* Lien = toute la hauteur de la ligne : 22px de haut au doigt, c'était raté
   une fois sur deux sur mobile (recommandation tactile : ≥ 44px) */
.cities li { padding: 0; }
.cities li a { display: inline-block; padding: 10px 6px 10px 0; }

footer {
  border-top: 1px solid #2a2f3a;
  color: var(--muted);
  font-size: .85rem;
  padding: 18px clamp(16px, 4vw, 48px);
}

/* Retour en haut (gabarits longs : film, ville, classiques) */
/* Bouton « ← Retour », posé au-dessus du H1. Masqué par défaut : search.js ne
   le révèle que si la page précédente est interne au site (sinon il ferait
   sortir le visiteur au lieu de le ramener). */
.retour {
  display: inline-block;
  margin: 0 0 10px;
  padding: 7px 14px;
  border: 1px solid #3a4150;
  border-radius: 999px;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}
.retour:hover { border-color: var(--accent); color: var(--text); }
/* `display: inline-block` l'emporterait sur l'attribut `hidden` : sans cette
   règle le bouton s'affiche même quand search.js a décidé de le masquer, et
   un visiteur arrivé de Google se ferait éjecter du site en cliquant. */
.retour[hidden] { display: none; }

.top-link {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
.top-link:hover { background: var(--accent-soft); }

/* Navigation clavier : anneau accent visible sur fond sombre */
a:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   ACCUEIL « AGENDA DU RÉPERTOIRE »
   Le répertoire est un agenda d'événements, pas un catalogue : 6 films sur 10
   ne passent qu'UNE fois en France. D'où l'heure en tête de ligne, comme sur
   un programme de cinémathèque, et le marqueur « séance unique ».
   ========================================================================== */

/* Compteurs d'inventaire */
.compteurs {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  margin: 18px 0;
}
.compteur {
  flex: 1 1 130px;
  padding: 13px 18px;
  border-right: 1px solid var(--rule);
}
.compteur:last-child { border-right: 0; }
.compteur b {
  display: block;
  font-size: 1.65rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.compteur span { font-size: .78rem; color: var(--muted); }
.compteur-fort b { color: var(--accent); }

/* Légende des notes : le vert n'a de sens que si on dit d'où il vient */
.legende {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
  font-size: .82rem;
  color: var(--muted);
}
.legende .puce {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--lb);
  border: 1px solid var(--lb);
  border-radius: 5px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

/* Agenda */
.jour { margin-top: 20px; }
.jour-titre {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  border: none;
  margin: 0 0 2px;
}
.jour-date { color: var(--muted); font-weight: 500; letter-spacing: .04em; }
.seances { list-style: none; margin: 0; padding: 0; }
.seance {
  display: grid;
  align-items: center;
  gap: 4px 16px;
  grid-template-columns: 62px 46px 1fr auto;
  padding: 13px 4px;
  border-top: 1px solid var(--rule);
}
.seance:hover { background: var(--accent-soft); }
.heure {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vignette img, .vignette .noposter {
  width: 46px;
  height: 69px;
  border-radius: 3px;
  font-size: 1rem;
}
.film { font-size: 1.08rem; margin: 0; line-height: 1.25; border: none; }
.film a { text-decoration: none; }
.annee { color: var(--muted); font-weight: 400; font-size: .92rem; }
.seance .meta { margin: 2px 0 0; font-size: .82rem; }
.seance .lieu strong { color: var(--text); font-weight: 600; }
.flags { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* Note Letterboxd : le vert de la communauté, nulle part ailleurs */
.note-lb {
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 700;
  color: var(--lb);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.note-lb .sur { color: var(--muted); font-weight: 400; font-size: .78rem; }

.unique {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #1a1400;
  white-space: nowrap;
}

/* Cartes de cycle (rétrospectives) */
.cycles {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.cycle {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eyebrow {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.cycle-nom { font-size: 1.35rem; margin: 0; border: none; }
.cycle-nom a { text-decoration: none; }
/* Bandeau d'affiches : carrousel tactile en pur CSS, aucun JavaScript */
.bande {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
/* Une affiche de la bande : le titre s'affiche par-dessus au survol.
   Le fonds de répertoire est fait de films qu'on ne reconnaît pas toujours
   à leur jaquette — l'affiche seule ne suffit pas à savoir ce qu'on regarde. */
.affiche {
  position: relative;
  display: block;
  flex: 0 0 74px;
  scroll-snap-align: start;
}
.bande img {
  width: 74px;
  height: 111px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.affiche-nom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 4px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .93) 45%);
  color: #fff;
  font-size: .66rem;
  line-height: 1.15;
  border-radius: 0 0 3px 3px;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none; /* ne vole pas le clic destiné à l'affiche */
}
.affiche:hover .affiche-nom,
.affiche:focus-visible .affiche-nom { opacity: 1; }
/* Sans survol possible (mobile, tablette), le titre reste affiché : le
   masquer y rendrait la bande définitivement muette. */
@media (hover: none) {
  .affiche-nom { opacity: 1; }
}
.cycle .meta { flex: 1; }

/* Salles de patrimoine : un classement en PART, pas en volume */
.salles { list-style: none; margin: 16px 0 0; padding: 0; }
.salle {
  display: grid;
  align-items: center;
  gap: 6px 16px;
  grid-template-columns: 30px 1fr 240px;
  padding: 13px 4px;
  border-top: 1px solid var(--rule);
}
.salle:hover { background: var(--accent-soft); }
.rang {
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.salle-nom { font-size: 1.05rem; margin: 0; border: none; }
.salle-nom a { text-decoration: none; }
.jauge-piste {
  height: 7px;
  border-radius: 20px;
  background: var(--sunk);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.jauge-part { height: 100%; background: var(--accent); }
.jauge-txt { margin: 5px 0 0; font-size: .78rem; color: var(--muted); }
.jauge-txt strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Villes : pastille avec son compteur, jamais un mur brut */
.villes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ville {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  text-decoration: none;
  font-size: .9rem;
}
.ville:hover { border-color: var(--accent); color: var(--accent); }
.ville-n {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ville:hover .ville-n { color: var(--accent); }
.racc-n { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* Passerelle vers « À l'affiche » : la page ne doit pas être orpheline */
.passerelle {
  margin: 34px 0 0;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--rule);
  display: flex;
  gap: 14px 22px;
  align-items: center;
  flex-wrap: wrap;
}
.passerelle p { margin: 0; flex: 1 1 300px; }
.passerelle .titre { font-family: var(--display); font-size: 1.12rem; font-weight: 600; }
.bouton {
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 9px;
  border: 1px solid var(--accent);
  color: var(--accent);
  white-space: nowrap;
}
.bouton:hover { background: var(--accent); color: #1a1400; }

/* ==========================================================================
   NAV : UNE SEULE LIGNE QUI DÉFILE — jusqu'à 901 px
   ==========================================================================
   Le seuil n'est pas choisi au jugé, il est MESURÉ. La barre a besoin de
   815 px pour tenir sur une ligne ; en balayant les largeurs une par une, la
   bascule tombe entre 900 px (2 lignes) et 902 px (1 ligne). D'où 901.

   Sous ce seuil, flex-wrap:wrap repliait les 6 pastilles :
     - à 390 px (téléphone)  : 4 LIGNES, 219 px de nav, le H1 repoussé à y=364,
                               soit la moitié de l'écran avant le moindre contenu ;
     - de 761 à 901 px (tablette) : 2 lignes, header 156 px.
   Après : une ligne unique qu'on fait défiler au doigt, dans les deux cas.

   Pourquoi ne pas monter le seuil plus haut « avec de la marge » : au-dessus
   de 901 px la nav est collée à DROITE (margin-left:auto). Comme on remet
   margin-left:0 ici, étendre le bloc déplacerait les pastilles à gauche sur
   des écrans où rien n'était cassé. Le seuil colle donc au défaut réel. */
@media (max-width: 901px) {
  /* Cibles tactiles : 44px recommandés (WCAG 2.5.5), 31px auparavant.
     Mesuré à 390px de large : 47 px de haut. Cette règle monte jusqu'à 901 px
     avec la barre défilante : à 900 px on est bien plus probablement sur un
     iPad en portrait (820 px) que sur un laptop, et des cibles confortables
     n'ont jamais gêné personne à la souris. */
  .site-nav a, .city-jump a { padding: 11px 14px; }

  .site-nav {
    /* 1. La règle de base est flex-wrap:wrap — on l'annule, sinon les
          pastilles continueraient de passer à la ligne. */
    flex-wrap: nowrap;
    /* 2. Crée le conteneur de défilement horizontal. */
    overflow-x: auto;
    /* 3. margin-left:auto ne sert qu'à coller la nav à droite sur desktop ;
          ici on veut au contraire qu'elle occupe toute la ligne. */
    margin-left: 0;
    /* 4. flex-basis:100% force la nav sur SA propre ligne du header
          (le header est lui-même en flex-wrap). */
    flex: 1 0 100%;
    /* 5. Bord à bord de l'écran : on annule le padding du header par une
          marge négative, puis on le remet en padding INTERNE. La première
          pastille reste alignée sur le texte, mais la zone qui défile va
          jusqu'au bord — c'est ce qui rend évident qu'il y a « la suite ». */
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    /* 6. 2px de respiration verticale pour que l'anneau de focus clavier
          (outline-offset:2px) ne soit pas rogné par l'overflow. */
    padding-block: 2px;
    /* 7. Le clavier (Tab) fait défiler la barre : on lui dit de ne pas coller
          l'élément focalisé pile contre le bord. */
    scroll-padding-inline: var(--pad);
    /* 8. Masque la barre de défilement (Firefox + WebKit). Sur mobile elle
          n'apparaît de toute façon qu'à l'usage. */
    scrollbar-width: none;
    /* 9. Empêche le swipe horizontal de déclencher le geste « page
          précédente » du navigateur quand on arrive au bout de la barre. */
    overscroll-behavior-x: contain;
    /* 10. Dégradés de bord, PILOTÉS PAR nav.js (voir --fade-l/--fade-r).
           Ils valent 0 par défaut, donc le masque est un no-op : c'est ce qui
           évite d'estomper une pastille sur les largeurs où la barre tient
           tout juste et n'a rien à faire défiler (le cas des ~900 px). Le
           script les monte à 24px du côté où il reste vraiment du contenu :
           à droite au départ, à gauche dès qu'on a fait défiler. */
    --fade-l: 0px;
    --fade-r: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l),
                        #000 calc(100% - var(--fade-r)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--fade-l),
                        #000 calc(100% - var(--fade-r)), transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    /* LA règle indispensable : par défaut flex-shrink vaut 1, donc les
       pastilles se COMPRESSERAIENT pour tenir au lieu de déborder — et il n'y
       aurait alors rien à faire défiler. 0 0 auto = « garde ta taille ». */
    flex: 0 0 auto;
    /* Et sans ça, « À l'affiche » se casserait sur deux lignes. */
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  /* Agenda : l'heure passe en bandeau, la fiche dessous */
  .seance {
    grid-template-columns: 46px 1fr;
    gap: 3px 13px;
    grid-template-areas: "heure heure" "vign corps" ". flags";
  }
  .heure { grid-area: heure; color: var(--accent); }
  .vignette { grid-area: vign; }
  .seance .corps { grid-area: corps; }
  .flags {
    grid-area: flags;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 4px;
  }
  .salle { grid-template-columns: 26px 1fr; }
  .jauge { grid-column: 2; }
  /* Le champ de recherche prend une ligne à lui seul sur un petit écran ;
     on la reprend sur la tagline, qui est décorative et redit ce que le H1
     de chaque page annonce déjà. Entête : 334 px → 285 px. */
  .tagline { display: none; }
  .film-search { max-width: none; }
  /* Le compteur de films colle à droite sur desktop (margin-left:auto) ;
     une fois la barre repliée sur plusieurs lignes, il repasse à gauche
     avec le reste plutôt que de flotter seul. */
  .tri-compte { margin-left: 0; }
}

/* —— Alertes « préviens-moi quand ce film repasse » ————————————————————————
   Fonction du site, donc ambre (--accent). Surtout pas le vert, réservé aux
   notes Letterboxd, ni le rouge, réservé à la signature « indé ». Les
   messages d'erreur reprennent --indie comme le fait déjà .lb-error. */
.film-alerte { margin: 14px 0 0; }
.film-alerte .bouton { font-size: .92rem; }

.alerte-note {
  margin: 10px 0 0;
  font-size: .92rem;
  color: var(--muted);
  text-wrap: pretty;
}
.alerte-ok {
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}
.alerte-ko { color: var(--indie); }
/* Précision sous le bouton : discrète, c'est un mode d'emploi, pas le message
   principal. Plus petite que .alerte-note, qui sert aussi aux confirmations. */
.alerte-appareil { margin-top: 8px; font-size: .82rem; }
/* Marche à suivre iPhone : c'est la seule voie vers les notifications sur
   iOS, elle mérite d'être vue plutôt que lue en petit gris. */
.alerte-ios {
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  line-height: 1.5;
}

/* Champ de ville demandé au moment du marquage. Même allure que les autres
   saisies de ville du site (portail, /ma-watchlist/). */
.alerte-ville { display: flex; gap: 8px; margin: 10px 0 0; flex-wrap: wrap; }
.alerte-ville input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text);
  font: inherit;
}
.alerte-ville input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Bouton qui a l'apparence d'un lien (« retirer », « ne plus me prévenir ») :
   c'est bien une action, pas une navigation, donc un <button> — mais il ne
   doit pas rivaliser visuellement avec l'action principale. */
.lien-bouton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.lien-bouton:disabled { opacity: .5; cursor: default; }

.alerte-liste { list-style: none; padding: 0; margin: 16px 0 0; }
.alerte-liste li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.alerte-liste a { font-weight: 600; }

/* —— Dernière chance (page /derniere-chance/) ————————————————————————————————
   L'agenda lui-même réutilise .jour / .seance de l'accueil : les deux pages
   doivent se lire pareil, seule la longueur de la liste change. Il ne reste
   ici que la barre de filtre et l'encadré d'export. */
.chance-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 18px 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
/* Même pastille que les filtres de liste (.tri-filtres select) : c'est le même
   geste pour le visiteur, il doit avoir la même forme. Les trois menus (ville,
   jour, ordre) la partagent, sinon la barre aurait trois allures. */
.chance-tools select {
  background: var(--sunk);
  color: var(--text);
  border: 1px solid #3a4150;
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  max-width: 100%;
}
.chance-tools select:focus { outline: none; border-color: var(--accent); }

/* Liste plate du tri par note : chance.js y déplace les lignes, les sections
   de jour étant alors masquées. Vide (tri chronologique), elle ne doit pas
   laisser une marge fantôme entre l'agenda et l'encadré d'export. */
.seances.par-note { margin-top: 20px; }
.seances.par-note:empty { margin-top: 0; }

/* La date de la séance, portée par chaque ligne mais visible SEULEMENT dans la
   liste plate : en tri chronologique l'en-tête de journée la dit déjà, et la
   répéter sur chaque ligne serait un doublon. Même typographie que
   .jour-titre, dont elle prend le relais. */
.jour-inline { display: none; }
.par-note .jour-inline {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  /* Sur mobile .flags passe en rangée : sans ça « Jeudi 20 août » se coupe
     en deux lignes à côté de la note. Mesuré à 390 px de large : la rangée
     complète (date + note + badge) tient en 298 px pour 331 px dispo. */
  white-space: nowrap;
}

.chance-vide {
  margin: 26px 0 0;
  padding: 18px;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.chance-export {
  margin-top: 22px; padding: 18px; background: var(--panel);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.chance-export .bouton { cursor: pointer; }
.chance-export .meta { margin: 12px 0 0; }

/* ⚠️ PIÈGE RÉCURRENT : `display:` l'emporte sur l'attribut `hidden`.
   .seance est en grid et .jour en block — sans ces règles, les filtres de
   chance.js seraient silencieusement sans effet. `.chance-vide` n'a pas
   encore de `display:`, sa règle est là pour le jour où on lui en donnera un. */
.seance[hidden] { display: none; }
.jour[hidden] { display: none; }
.chance-vide[hidden] { display: none; }
.chance-export .bouton[hidden] { display: none; }

/* —— Abonnement au répertoire d'une ville (bas des pages ville) ————————————
   Même forme que les autres encadrés d'action du site (.cine-export,
   .chance-export) : c'est la même promesse, « emporter ce programme ». */
.abo {
  margin-top: 26px; padding: 18px; background: var(--panel);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.abo-titre { margin: 0 0 6px; font-weight: 700; }
.abo-liens {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 26px; margin: 14px 0 0;
}
.abo-liens .bouton { cursor: pointer; }
.abo-liens a:not(.bouton) { font-size: .88rem; }

/* Index des réalisateurs : la même grille que les villes, avec le compte de
   films sur sa propre ligne (un nom de cinéaste est plus long qu'un nom de
   ville, les deux ne tiennent pas côte à côte sous 190px). */
.realisateurs li a { padding-bottom: 2px; }
.realisateurs .meta { display: block; margin: 0 0 8px; font-size: .8rem; }