/* La Rose des Salles — feuille de style maison, mobile d'abord. */

:root {
  --rose: #b5603e;
  --rose-clair: #efe0c8;
  --encre: #241c17;
  --encre-douce: #6e5c4c;
  --papier: #fdfaf4;
  --papier-creux: #f3ead9;
  --trait: #e3d6c0;
  --rayon: 10px;
  --largeur: 62rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rose: #e2905f;
    --rose-clair: #3c2c1e;
    --encre: #f5eee3;
    --encre-douce: #c1ad97;
    --papier: #1b1512;
    --papier-creux: #241c17;
    --trait: #3a2f26;
  }
}

* { box-sizing: border-box; }

[x-cloak] { display: none !important; }

.noscript-notice {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--papier-creux);
  color: var(--encre-douce);
}

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--papier);
  color: var(--encre);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main, .site-header, .site-footer { max-width: var(--largeur); margin: 0 auto; }

a { color: var(--rose); }

/* --- en-tête ------------------------------------------------------------ */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding: 1.25rem 0 1rem;
  border-bottom: 2px solid var(--rose);
}

.brand { display: flex; flex-direction: column; gap: 0.15rem; }
.wordmark { text-decoration: none; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
.wordmark-rose { color: var(--rose); }
.wordmark-rest { color: var(--encre); }
.wordmark-rest::before { content: " "; }
.tagline { margin: 0; font-size: 0.85rem; color: var(--encre-douce); }

.header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.filters-toggle, .nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--papier);
  color: var(--encre-douce);
  cursor: pointer;
}
.filters-toggle:hover, .nav-toggle:hover { border-color: var(--rose); color: var(--rose); }

.filters-toggle svg { width: 1.1rem; height: 1.1rem; }
.filters-toggle.is-active { border-color: var(--rose); color: var(--rose); background: var(--rose-clair); }

.nav-toggle { flex-direction: column; gap: 3px; }
.nav-toggle-bar { display: block; width: 1.1rem; height: 2px; background: currentColor; }

.site-nav { display: none; flex-direction: column; gap: 0.25rem; width: 100%; }
.site-nav.is-open { display: flex; }
.site-nav a { text-decoration: none; color: var(--encre-douce); padding: 0.5rem 0; }
.site-nav a:hover { color: var(--rose); }
.site-nav a[aria-current="page"] {
  color: var(--encre);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--rose);
}

@media (min-width: 40rem) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; flex-direction: row; gap: 1rem; width: auto; }
}

h1 { font-size: 1.5rem; margin: 1.25rem 0 1rem; }
h2 { font-size: 1.1rem; }

/* --- navigation par date ------------------------------------------------ */

.day-nav { margin: 1rem 0 0; }
.day-nav a { text-decoration: none; color: var(--encre-douce); font-size: 0.9rem; }
.day-nav a:hover { color: var(--rose); }

.day-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 2rem 0 0.5rem;
  padding: 1rem 0 0.5rem;
  border-top: 1px solid var(--trait);
  background: var(--papier);
  font-size: 1.05rem;
  color: var(--rose);
}
.day-group:first-child .day-heading { margin-top: 1.25rem; padding-top: 0; border-top: none; }

.load-more { margin: 1.5rem 0 0; text-align: center; }
.load-more a {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--encre-douce);
  font-size: 0.9rem;
}
.load-more a:hover { border-color: var(--rose); color: var(--rose); }

/* --- mise en page « Séances » : résultats + colonne de filtres ---------- */

.seances-sidebar { grid-area: sidebar; display: none; }
.seances-sidebar.is-open { display: block; }
.seances-main { grid-area: main; min-width: 0; }
.seances-main.is-hidden { display: none; }

@media (min-width: 60rem) {
  .seances-layout {
    display: grid;
    grid-template-columns: 1fr 18rem;
    grid-template-areas: "main sidebar";
    align-items: start;
    gap: 2rem;
  }
  .seances-sidebar {
    display: block;
    position: sticky;
    top: 1rem;
  }
  .seances-main.is-hidden { display: block; }
  .filters-toggle, .filters-close { display: none; }
}

/* --- filtres ------------------------------------------------------------ */

.filters {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem;
  background: var(--papier-creux);
  border-radius: var(--rayon);
  margin-bottom: 1rem;
}

.filters label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--encre-douce); }
.filters select, .filters input[type="search"] {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--papier);
  color: var(--encre);
  width: 100%;
}

.filters .filter-check { flex-direction: row; align-items: center; gap: 0.4rem; }
.filters .filter-group { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.filters .filter-group legend { font-size: 0.8rem; color: var(--encre-douce); padding: 0; margin-bottom: 0.25rem; }
.filters .filter-group .filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 12rem;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--papier);
}
.filters .filter-group .filter-check { font-size: 0.9rem; color: var(--encre); }
.filters .filter-city { display: flex; flex-direction: column; gap: 0.3rem; }
.filters .filter-city + .filter-city { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--trait); }
.filters .filter-city-toggle { font-weight: 600; }
.filters .filter-cinema { padding-left: 1.4rem; font-weight: 400; }
.filters .filter-empty { font-size: 0.85rem; color: var(--encre-douce); margin: 0; }
.filters .reset {
  font: inherit;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--papier);
  color: var(--encre-douce);
  cursor: pointer;
}
.filters .reset:hover { border-color: var(--rose); color: var(--rose); }

.filters-close {
  align-self: flex-start;
  font: inherit;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--papier);
  color: var(--encre-douce);
  cursor: pointer;
}
.filters-close:hover { border-color: var(--rose); color: var(--rose); }

/* --- liste des séances -------------------------------------------------- */

.showtimes { list-style: none; margin: 0; padding: 0; }

.showtime {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.15rem 0.85rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--trait);
}

.showtime[hidden] { display: none; }

.time { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 700; color: var(--rose); }

.film-title { margin: 0 0 0.15rem; font-size: 1.05rem; line-height: 1.3; }
.film-title a { text-decoration: none; color: var(--encre); }
.film-title a:hover { color: var(--rose); text-decoration: underline; }

.where { margin: 0 0 0.2rem; font-size: 0.92rem; }
.city { color: var(--encre-douce); }
.city::before { content: "· "; }
.screen { color: var(--encre-douce); }

.meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin: 0; font-size: 0.8rem; color: var(--encre-douce); }

.version {
  font-weight: 700;
  color: var(--rose);
  background: var(--rose-clair);
  border-radius: 4px;
  padding: 0 0.3rem;
}

.mention, .certificate {
  border: 1px solid var(--trait);
  border-radius: 4px;
  padding: 0 0.3rem;
}

.certificate { color: var(--encre); font-weight: 600; }

.actions { grid-column: 2; display: flex; gap: 0.5rem; margin-top: 0.45rem; }

.book, .info {
  font-size: 0.85rem;
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
}

.book { background: var(--rose); color: #fff; font-weight: 600; }
.book:hover { filter: brightness(1.08); }
.info { border: 1px solid var(--trait); color: var(--encre-douce); }
.info:hover { border-color: var(--rose); color: var(--rose); }

.past { opacity: 0.55; }

.empty { padding: 2rem 0; color: var(--encre-douce); }

/* --- page film ---------------------------------------------------------- */

.film-sheet { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.5rem 0; }
.poster { width: 150px; border-radius: var(--rayon); background: var(--papier-creux); }
.film-info { flex: 1 1 18rem; }
.film-info h1 { margin-top: 0; }
.original-title { margin: 0 0 0.5rem; color: var(--encre-douce); font-size: 0.9rem; }
.synopsis { margin: 0.75rem 0 0; max-width: 42rem; }
.film-day h3 { font-size: 1rem; margin: 1.5rem 0 0; color: var(--rose); }
.showtimes.compact .showtime { padding: 0.6rem 0; }

/* --- page cinémas ------------------------------------------------------- */

.intro { color: var(--encre-douce); max-width: 42rem; }
.city-group { margin: 2rem 0 0; }
.city-group:first-child { margin-top: 1.5rem; }
.city-group h2 { margin: 0 0 0.5rem; }
.cinema-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cinema { padding: 1rem; border: 1px solid var(--trait); border-radius: var(--rayon); }
.cinema h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.address { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--encre-douce); }
.cinema .actions { grid-column: auto; margin-top: 0.75rem; }

@media (min-width: 46rem) {
  .cinema-list { grid-template-columns: repeat(2, 1fr); }
}

/* --- prose -------------------------------------------------------------- */

.prose { max-width: 42rem; }
.prose h2 { margin-top: 2rem; }
.plain { list-style: none; padding: 0; columns: 2; column-gap: 2rem; }
.plain li { break-inside: avoid; }

/* --- pied de page ------------------------------------------------------- */

.site-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  color: var(--encre-douce);
  font-size: 0.85rem;
}

.site-footer p { margin: 0.25rem 0; }

@media (min-width: 40rem) {
  .showtime { grid-template-columns: 4.5rem 1fr auto; }
  .actions { grid-column: 3; grid-row: 1; align-self: center; margin-top: 0; }
}