/* CinePalm — feuille de style (thème clair cinéma, responsive) */

:root {
  --bg: #f4f6f9;           /* fond de page */
  --bg-2: #ffffff;         /* cartes, topbar, champs */
  --bg-3: #eef1f6;         /* fonds subtils : pastilles, hover, placeholder */
  --border: #dce2ea;
  --text: #1b2430;
  --text-dim: #5c6a7a;
  --accent: #f5a623;       /* ambre — remplissages / bordures actives */
  --accent-ink: #8a5200;   /* ambre foncé — texte/icônes/liens sur fond clair */
  --accent-2: #d83a2c;     /* rouge ciné */
  --vo: #4ea1ff;
  --vost: #7c5cff;
  --vf: #34c759;
  --radius: 12px;
  --shadow: 0 6px 22px rgba(27, 36, 48, .12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3 { margin: 0; font-weight: 700; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { font-size: 26px; }
.brand-text h1 { font-size: 19px; letter-spacing: .3px; }
.subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); }

.search-wrap { flex: 1 1 240px; min-width: 180px; }
#search, #cinema-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
#search:focus, #cinema-search:focus { border-color: var(--accent); }
#cinema-search { border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; }

.view-toggle {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.view-toggle button {
  border: 0; background: transparent; color: var(--text-dim);
  padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.view-toggle button.active { background: var(--accent); color: #1a1205; }

.filters-toggle {
  display: none;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; font-weight: 600;
}

/* ---------- Layout ---------- */
.layout { display: flex; align-items: flex-start; }

.filters {
  position: sticky;
  top: 64px;
  width: 270px;
  flex: 0 0 270px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 18px 16px 40px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.filters-head h2 { font-size: 15px; }
.link-btn { background: none; border: 0; color: var(--accent-ink); font-size: 12.5px; padding: 0; }
.link-btn:hover { text-decoration: underline; }

.filter-group { margin-bottom: 20px; }
.filter-group h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-dim); margin-bottom: 9px;
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  background: var(--bg-2); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  transition: all .12s ease;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.active { background: var(--accent); color: #1a1205; border-color: var(--accent); }

.checklist {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; background: var(--bg-2);
}
.check { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13px; cursor: pointer; }
.check:hover { color: var(--accent-ink); }
.check input { accent-color: var(--accent); flex: 0 0 auto; }

.switch { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.switch input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- Content ---------- */
.content { flex: 1 1 auto; min-width: 0; padding: 18px 22px 60px; }

/* Barre « quand » : catégorie (toutes vues) + jour + moment, empilés et alignés à
   gauche (une ligne chacun ; les chips se replient seulement sur écran étroit). */
.whenbar {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.when-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.when-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-dim); font-weight: 700;
}
.content-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.head-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.head-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.layout-mode { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); }
.layout-mode-label { font-weight: 600; }
.layout-mode .chip { padding: 5px 11px; }
.results-count { font-size: 13.5px; color: var(--text-dim); }
.results-count b { color: var(--text); }
.expand-toggle {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.expand-toggle:hover { border-color: var(--accent); color: var(--accent-ink); }
.sort { font-size: 13px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.sort select {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 13px;
}
.sort-dir {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 11px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.sort-dir:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---------- Grille films ---------- */
.films-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
}
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .12s ease, border-color .12s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.poster-wrap { position: relative; aspect-ratio: 2 / 3; background: var(--bg-3); }
.poster-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: #c3ccd9;
}
.card-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.card-body { padding: 10px 11px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-title { font-size: 14px; font-weight: 700; line-height: 1.25; }
.card-meta { font-size: 11.5px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 6px; }
.card-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
.badge-vo { background: var(--vo); color: #04203f; }
.badge-vost { background: var(--vo); color: #04203f; }   /* VO et VOST = même couleur */
.badge-vf { background: var(--vf); color: #03260f; }
.badge-fmt { background: #e7eef8; color: #2f5a93; }
.badge-new { background: var(--accent-2); color: #fff; }
.badge-ap { background: #8a5cff; color: #fff; }
.badge-note { background: transparent; color: var(--accent-ink); padding: 0; font-size: 12px; }
.badge-cert { background: #fbe4ec; color: #b03a63; }

.seances-count { font-size: 11.5px; color: var(--text-dim); }

/* Vue Affiches : prochaine séance sous le titre */
.card-next {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.card-next-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim); font-weight: 700;
}
.card-next-time { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }
.card-next-cine {
  font-size: 11.5px; color: var(--text-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-next-none { color: var(--text-dim); font-style: italic; font-size: 12px; }

/* ---------- Programme ---------- */
.programme { display: flex; flex-direction: column; gap: 10px; }

/* Séparateur dans la liste des cinémas (tri "par carte choisie") */
.cine-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 2px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim);
}
.cine-divider::before, .cine-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Sélecteur de carte (tri "par carte choisie"), à côté du tri */
.sort-card-wrap { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Mode Grille (prochaines séances) ---------- */
/* Pastilles "ronds" des prochains horaires + "+X" */
.fc-shows { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.show-pill {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.show-pill.ap { background: #9e1b32; border-color: #9e1b32; color: #fff; }
.show-pill.muted { opacity: .42; }                 /* horaires d'un film terminé cette semaine */
.show-more { font-size: 11.5px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.show-more.muted { opacity: .5; }

/* Ancre « maintenant » (vue Horaire) : 1re carte/ligne à venir, on scrolle dessus
   en la calant sous la barre du haut (collante). */
#now-anchor { scroll-margin-top: calc(var(--topbar-h, 64px) + 16px); }
/* Bouton « charger les séances passées » (vue Horaire grille) */
.load-past-btn {
  display: block; margin: 0 auto 14px; padding: 8px 16px;
  background: var(--bg-2); color: var(--accent-ink);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.load-past-btn:hover { border-color: var(--accent); }

/* Ligne « maintenant » (vue Horaire) : repère à la frontière passé / à venir */
.now-line {
  display: flex; align-items: center; gap: 10px; margin: 12px 0;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--accent-2);
}
.now-line span { white-space: nowrap; }
.now-line::before, .now-line::after {
  content: ""; flex: 1; height: 2px; background: var(--accent-2); border-radius: 2px;
}
.sc-grid .now-line { grid-column: 1 / -1; margin: 4px 0 10px; }   /* pleine largeur dans la grille */
.day-card { scroll-margin-top: calc(var(--topbar-h, 64px) + 16px); }

/* Vue Cinéma — grille de cartes film dans le bloc cinéma */
.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 14px; }
.film-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: transform .12s ease, border-color .12s ease;
}
.film-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.fc-poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--bg-3); display: block; }
.fc-poster.ph { display: flex; align-items: center; justify-content: center; font-size: 28px; color: #c3ccd9; }
.fc-title { font-size: 13px; font-weight: 700; line-height: 1.25; padding: 8px 9px 0; }
.film-card .fc-shows { padding: 6px 9px 10px; }
/* Film terminé cette semaine (vue Cinéma grille) : affiche désaturée, titre atténué */
.film-card.done .fc-poster { filter: grayscale(.85); opacity: .6; }
.film-card.done .fc-title { color: var(--text-dim); }

/* Vue Film — grille de cartes film (affiche + titre + cinémas avec horaires) */
.ff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.ff-cines { display: flex; flex-direction: column; gap: 9px; padding: 8px 9px 10px; }
.ff-cines .fc-shows { padding: 0; }   /* annule le padding hérité de .film-card .fc-shows */
.ff-cine-name {
  font-size: 11.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ff-more { font-size: 11.5px; font-weight: 600; color: var(--accent-ink); }

/* Vue Horaire — grille de cartes séance verticales (affiche / titre / cinéma / horaire) */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin-top: 4px; }
.seance-card {
  display: flex; flex-direction: column; cursor: pointer; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  transition: transform .12s ease, border-color .12s ease;
}
.seance-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.seance-card.past { filter: grayscale(.6); opacity: .55; }   /* séance passée (désaturée) */
.sc-poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--bg-3); display: block; }
.sc-poster.ph { display: flex; align-items: center; justify-content: center; font-size: 26px; color: #c3ccd9; }
.sc-info { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px 10px; }
.sc-title { font-weight: 700; font-size: 13px; line-height: 1.2; }
.sc-cine { font-size: 11.5px; color: var(--text-dim); }
.sc-time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13.5px; margin-top: 2px; }
.sc-ver { font-size: 10.5px; color: var(--text-dim); font-weight: 600; }
.cine-block {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  /* pas d'overflow:hidden → casserait le position:sticky de l'entête */
}
.cine-block > summary {
  list-style: none; cursor: pointer; padding: 13px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 700;
  /* entête collante : reste visible sous la barre du haut quand on scrolle le bloc */
  position: sticky; top: var(--topbar-h, 64px); z-index: 5;
  background: var(--bg-2); border-radius: var(--radius) var(--radius) 0 0;
}
.cine-block[open] > summary { border-bottom: 1px solid var(--border); }
.cine-block > summary::-webkit-details-marker { display: none; }
.cine-block > summary:hover { background: var(--bg-3); }
.cine-count { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.cine-body { padding: 8px 14px 14px; }

/* Sous-blocs (film dans la vue Cinéma, cinéma dans la vue Film) */
.subblock {
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; margin: 8px 0;
  display: flex; gap: 12px; align-items: flex-start;
}
.sb-content { flex: 1 1 auto; min-width: 0; }
.sb-poster {
  flex: 0 0 44px; width: 44px; aspect-ratio: 2 / 3;
  border-radius: 6px; object-fit: cover; background: var(--bg-3);
}
.summary-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.summary-poster {
  flex: 0 0 38px; width: 38px; aspect-ratio: 2 / 3;
  border-radius: 5px; object-fit: cover; background: var(--bg-3);
}
.sb-poster.ph, .summary-poster.ph {
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #c3ccd9;
}
.subblock-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.sb-badges { display: inline-flex; flex-wrap: wrap; gap: 5px; }

/* Grille hebdo (vue Cinéma) : colonne tranches + une colonne par jour */
.week-grid {
  display: grid;
  grid-template-columns: minmax(72px, max-content) repeat(var(--days), minmax(60px, 1fr));
  gap: 3px 4px;
  overflow-x: auto;
}
.wg-corner { position: sticky; left: 0; background: var(--bg); z-index: 1; }
.wg-dayhead {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--text-dim); text-align: center; padding: 3px 2px 5px;
  border-bottom: 1px solid var(--border);
}
.wg-slot {
  display: flex; align-items: flex-start; white-space: nowrap; padding: 6px 8px 4px 0;
  font-size: 11.5px; font-weight: 600; color: var(--accent-ink);
  position: sticky; left: 0; background: var(--bg); z-index: 1;
}
.wg-cell {
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  padding: 4px 0; border-top: 1px solid var(--border);
}
.wg-cell.wg-first { border-top: 0; }   /* 1re tranche : la ligne sous les entêtes suffit */
.wg-cell .time-pill { text-align: center; }
.wg-empty { color: var(--border); text-align: center; font-size: 12px; padding: 2px 0; }
.subblock-title { font-weight: 700; }
.subblock-title.pf-title { cursor: pointer; }
.subblock-title.pf-title:hover { color: var(--accent-ink); }
.subblock-body { display: flex; flex-direction: column; gap: 6px; }
.day-line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.day-tag {
  flex: 0 0 84px; font-size: 12px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .4px;
}
.day-row { padding: 10px 0; border-top: 1px solid var(--border); }
.day-row:first-child { border-top: 0; }
.day-name { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent-ink); margin-bottom: 8px; }
.prog-film { display: flex; gap: 10px; padding: 5px 0; flex-wrap: wrap; align-items: baseline; }
.prog-film .pf-title { font-weight: 600; cursor: pointer; }
.prog-film .pf-title:hover { color: var(--accent-ink); }
.prog-film .pf-cine { font-weight: 600; flex: 0 0 200px; max-width: 100%; }
.prog-times { display: flex; flex-wrap: wrap; gap: 6px; }
.time-pill {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 8px; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.time-pill.ap { background: #9e1b32; border-color: #9e1b32; color: #fff; }  /* avant-première / événement */
.pill-fmt { color: #2f5a93; font-weight: 700; }                            /* format premium sur la pastille */
.time-pill.ap .pill-fmt { color: #ffd9df; }                                /* lisible sur fond rouge */
.time-pill.past { opacity: .4; }                                           /* séance déjà passée (mode Détaillé) */

/* Vue Film : entête repliable avec compteur + bouton fiche */
.summary-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.mini-btn {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 9px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.mini-btn:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Vue Horaire : une carte par jour, séances chronologiques */
.day-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px 6px; margin-bottom: 12px;
}
.hr-row {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--border);
}
.hr-row:first-of-type { border-top: 0; }
.hr-row .time-pill { flex: 0 0 auto; min-width: 64px; text-align: center; }
.hr-title { font-weight: 600; cursor: pointer; flex: 1 1 200px; }
.hr-title:hover { color: var(--accent-ink); }
.hr-cine { color: var(--text-dim); font-size: 13px; flex: 0 0 auto; }

/* ---------- Détail (modale) ---------- */
.detail-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 28, 40, .5); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.detail-card {
  position: relative; width: min(820px, 100%);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow); padding: 0; overflow: hidden;
}
.detail-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: rgba(0, 0, 0, .5); color: #fff; border: 0;
  width: 34px; height: 34px; border-radius: 999px; font-size: 22px; line-height: 1;
}
.detail-close:hover { background: var(--accent-2); }

.detail-head { display: flex; gap: 18px; padding: 20px; }
.detail-poster { flex: 0 0 150px; }
.detail-poster img { width: 100%; border-radius: 10px; display: block; }
.detail-poster .poster-ph { aspect-ratio: 2/3; border: 1px solid var(--border); border-radius: 10px; }
.detail-info { flex: 1; min-width: 0; }
.detail-info h2 { font-size: 22px; line-height: 1.15; margin-bottom: 4px; }
.detail-orig { color: var(--text-dim); font-size: 13px; font-style: italic; margin-bottom: 10px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.kv { font-size: 13px; margin: 3px 0; }
.kv b { color: var(--text-dim); font-weight: 600; }
.detail-synopsis { padding: 0 20px 4px; color: var(--text); font-size: 13.5px; line-height: 1.6; }
.detail-seances { padding: 14px 20px 24px; }
.detail-seances h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); margin-bottom: 12px; }
.ds-cine { margin-bottom: 14px; }
.ds-cine-name { font-weight: 700; margin-bottom: 6px; }
.ds-day { display: flex; gap: 10px; padding: 4px 0; flex-wrap: wrap; align-items: baseline; }
.ds-day-name { font-size: 12.5px; color: var(--text-dim); flex: 0 0 130px; }

/* ---------- Fiche cinéma ---------- */
.cinema-detail { padding: 24px; }
.cinema-detail h2 { font-size: 22px; line-height: 1.15; margin-bottom: 12px; }
.cinema-detail h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-dim); margin: 20px 0 8px;
}
.cd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cd-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.cd-links a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.cd-links a:hover { text-decoration: underline; }

/* ---------- Vue Carte (Leaflet, lib vendorisée) ---------- */
.map-view {
  height: 72vh; min-height: 460px;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-3);
  /* Leaflet pose des z-index internes jusqu'à 1000 (contrôles, popups) : on isole
     le contexte d'empilement pour que la topbar (z 30) et la modale (z 50) restent
     au-dessus de la carte. Sans ça, les boutons de zoom passeraient devant la modale. */
  isolation: isolate; position: relative; z-index: 0;
}
.map-view .leaflet-container { height: 100%; width: 100%; background: var(--bg-3); font: inherit; }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: 11px 14px; }
.map-popup { text-align: center; }
.map-popup .mp-name { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.map-popup .mp-addr { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.map-popup .mp-count { font-size: 12px; color: var(--text-dim); margin-bottom: 9px; }

/* Sélecteur d'affichage de la carte (par séances / par enseigne), dans content-head */
.map-mode { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); }
.map-mode-label { font-weight: 600; }
.map-mode .chip { padding: 5px 11px; }

/* Légende des enseignes (contrôle Leaflet, mode "par enseigne") */
.map-legend {
  background: rgba(255, 255, 255, .94); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; font-size: 12px; color: var(--text);
  box-shadow: 0 1px 5px rgba(27, 36, 48, .18); line-height: 1.5;
}
.map-legend .ml-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim); font-weight: 700; margin-bottom: 4px;
}
.map-legend .ml-row { display: flex; align-items: center; gap: 7px; }
.map-legend .ml-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid; flex: 0 0 auto;
}

/* ---------- Divers ---------- */
.empty { text-align: center; color: var(--text-dim); padding: 60px 20px; font-size: 15px; }
.hidden { display: none !important; }

.footer {
  border-top: 1px solid var(--border);
  padding: 16px 22px; display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: space-between; font-size: 12px; color: var(--text-dim);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .filters-toggle { display: inline-block; }
  .filters {
    position: fixed; top: 0; left: 0; bottom: 0;
    height: 100vh; width: 290px; max-width: 85vw;
    z-index: 40; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--shadow);
  }
  .filters.open { transform: translateX(0); }
  .content { padding: 16px 14px 60px; }
  .films-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .map-view { height: 70vh; min-height: 380px; }
  .detail-head { flex-direction: column; }
  .detail-poster { flex: 0 0 auto; width: 150px; margin: 0 auto; }
  .ds-day-name { flex-basis: 100%; }
}