/* ==========================================================================
   SEANCE — feuille de style unique
   ========================================================================== */

:root {
  --fond: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --texte: #1d2330;
  --texte-doux: #667085;
  --bordure: #e2e5ea;
  --bordure-champ: #cfd4dc;
  --primaire: #2f5bd3;
  --primaire-fonce: #2347a6;
  --primaire-clair: #e8eefc;
  --danger: #c0352b;
  --danger-fond: #fdecea;
  --ok: #24733a;
  --ok-fond: #e7f6ec;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

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

h1,
h2 {
  line-height: 1.2;
}

:focus-visible {
  outline: 2px solid var(--primaire);
  outline-offset: 2px;
}

.is-hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- Barre du haut ----- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 54px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}

.brand {
  color: var(--texte);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 4px;
}

.nav a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--texte-doux);
  font-weight: 500;
  text-decoration: none;
}

.nav a:hover {
  background: var(--surface-2);
  color: var(--texte);
}

.nav a.is-active {
  background: var(--primaire-clair);
  color: var(--primaire-fonce);
}

/* ----- Structure ----- */

.main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
}

.titre-page {
  margin: 0 0 16px;
  font-size: 1.5rem;
}

.section-titre {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.carte {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.vide {
  margin: 4px 0;
  color: var(--texte-doux);
  font-style: italic;
}

.aide {
  margin: 10px 0 0;
  color: var(--texte-doux);
  font-size: .85rem;
}

/* ----- Boutons ----- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover {
  background: var(--surface-2);
}

.btn:disabled {
  opacity: .55;
  cursor: default;
}

.btn-primaire {
  background: var(--primaire);
  border-color: var(--primaire);
  color: #fff;
}

.btn-primaire:hover {
  background: var(--primaire-fonce);
}

.btn-danger {
  color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger-fond);
  border-color: #f3c1bc;
}

.btn-petit {
  padding: 4px 10px;
  font-size: .85rem;
}

.btn-lien {
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--primaire);
}

.btn-lien:hover {
  background: none;
  text-decoration: underline;
}

/* ----- Formulaires ----- */

.champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin-bottom: 12px;
}

.champ label {
  color: var(--texte-doux);
  font-size: .85rem;
  font-weight: 600;
}

input[type="text"],
input[type="date"],
input[type="time"],
select {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--bordure-champ);
  border-radius: 8px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--primaire);
  box-shadow: 0 0 0 3px rgba(47, 91, 211, .18);
}

.champs-ligne {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1.6fr;
  gap: 12px;
}

.date-ligne {
  display: flex;
  gap: 4px;
}

.date-ligne input {
  flex: 1;
}

.btn-icone {
  flex: none;
  width: 38px;
  padding: 0;
  font-size: 1.15rem;
}

.aide-champ {
  min-height: 1.2em;
  color: var(--texte-doux);
  font-size: .8rem;
}

.aide-champ.is-ok {
  color: var(--ok);
  font-weight: 600;
}

.aide-champ.is-erreur {
  color: var(--danger);
  font-weight: 600;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.form-inline {
  display: flex;
  gap: 10px;
}

.form-inline input {
  flex: 1;
}

.message {
  min-height: 1.3em;
  margin: 0 0 12px;
  font-size: .9rem;
}

.form-actions .message {
  margin: 0;
}

.message-ok {
  color: var(--ok);
}

.message-erreur {
  color: var(--danger);
  font-weight: 600;
}

/* ----- Séances retenues ----- */

.retenues-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.retenue {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 100px 60px minmax(0, 1.5fr);
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-left: 4px solid var(--c-bd, var(--bordure));
  border-radius: 8px;
  background: var(--c-bg, var(--surface-2));
  color: var(--c-fg, var(--texte));
}

.retenue-film,
.retenue-cinema {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retenue-film {
  font-weight: 700;
}

.retenue-heure {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ----- Filtres ----- */

.filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-bottom: 12px;
}

.filtres-groupe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.filtres-label {
  margin-right: 2px;
  color: var(--texte-doux);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pastille {
  padding: 4px 11px;
  border: 1px solid var(--c-bd, var(--bordure-champ));
  border-radius: 999px;
  background: var(--c-bg, var(--surface));
  color: var(--c-fg, var(--texte));
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: opacity .15s, box-shadow .15s;
}

.pastille:hover {
  box-shadow: 0 0 0 1px var(--c-bd, var(--bordure-champ));
}

.has-actif .pastille {
  opacity: .45;
}

.has-actif .pastille.is-on {
  opacity: 1;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--c-bd, var(--primaire));
}

/* ----- Grille du calendrier (semaines enchaînées) ----- */

.cal-entetes {
  position: sticky;
  top: 54px; /* sous la barre du haut */
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--bordure);
  border: 1px solid var(--bordure);
  border-bottom: 0;
  border-radius: var(--rayon) var(--rayon) 0 0;
  overflow: hidden;
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--bordure);
  border: 1px solid var(--bordure);
  border-radius: 0 0 var(--rayon) var(--rayon);
  box-shadow: var(--ombre);
}

.cal-entete {
  padding: 6px;
  background: var(--surface-2);
  color: var(--texte-doux);
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
}

.cal-mois {
  grid-column: 1 / -1;
  padding: 7px 10px;
  border-top: 2px solid var(--texte-doux);
  background: var(--surface-2);
  color: var(--texte);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.cal-mois:first-child {
  border-top: 0;
}

.cal-plus {
  margin-top: 12px;
  text-align: center;
}

.cal-jour {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 112px;
  padding: 5px;
  background: var(--surface);
  scroll-margin-top: 100px; /* ancre #semaine-N visible sous la barre et l'en-tête collants */
}

.cal-jour.is-passe {
  background: #f7f8fa;
}

.cal-jour.is-passe .cal-jour-num,
.cal-jour.is-passe .cal-tuiles {
  opacity: .45;
}

.cal-jour.is-aujourdhui {
  background: #f5f8ff;
}

.cal-jour-num {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texte-doux);
  font-size: .8rem;
  font-weight: 600;
}

.cal-jour-nom {
  display: none;
}

.cal-jour-mois {
  color: var(--texte);
  font-weight: 700;
}

.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 999px;
}

.cal-jour.is-aujourdhui .num {
  background: var(--primaire);
  color: #fff;
}

.cal-tuiles {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ----- Tuiles de séance ----- */

.tuile {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 3px 3px 3px 6px;
  border-left: 3px solid var(--c-bd, #9ca3af);
  border-radius: 5px;
  background: var(--c-bg, #eef0f3);
  color: var(--c-fg, #374151);
  font-size: .78rem;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, filter .15s, box-shadow .15s;
}

.tuile:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.tuile-texte {
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 5px;
  min-width: 0;
}

.tuile-heure {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tuile-nom,
.tuile-cinema {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tuile-cinema {
  grid-column: 1 / -1;
  font-size: .7rem;
  opacity: .8;
}

.tuile-star {
  flex: none;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: var(--c-fg, #374151);
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  opacity: .25;
  cursor: pointer;
}

.tuile-star:hover {
  opacity: .8;
}

/* États : inactive (terne + barré), choisie (contour épais), occupée, filtrée */

.tuile.is-inactive {
  opacity: .5;
  filter: saturate(.25);
}

.tuile.is-inactive .tuile-texte {
  text-decoration: line-through;
}

.tuile.is-chosen {
  box-shadow: 0 0 0 3px var(--c-bd, #6b7280);
  font-weight: 600;
}

.tuile.is-chosen .tuile-star {
  color: var(--c-bd, #6b7280);
  opacity: 1;
}

/* Autre séance d'un film déjà choisi : estompée mais toujours utilisable (repli) */
.tuile.is-eclipsee {
  opacity: .4;
  filter: saturate(.5);
}

.tuile.is-eclipsee:not(.is-inactive):hover,
.tuile.is-eclipsee:not(.is-inactive):focus-visible {
  opacity: .85;
  filter: none;
}

.tuile.is-busy {
  cursor: progress;
}

.tuile.is-filtered {
  display: none;
}

/* ----- Tableau des séances (saisie) ----- */

.table-scroll {
  overflow-x: auto;
}

.table-seances {
  width: 100%;
  border-collapse: collapse;
}

.table-seances th,
.table-seances td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bordure);
  text-align: left;
  vertical-align: middle;
}

.table-seances th {
  color: var(--texte-doux);
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.table-seances tbody tr:last-child td {
  border-bottom: 0;
}

.table-seances tr.is-nouvelle td {
  background: var(--ok-fond);
}

.table-seances tr.is-edition td {
  background: var(--primaire-clair);
}

.col-date,
.col-heure {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.col-actions {
  text-align: right !important;
  white-space: nowrap;
}

.col-actions .btn + .btn {
  margin-left: 6px;
}

.champ-table {
  min-width: 110px;
  padding: 5px 8px !important;
}

.badge {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}

.badge-choisie {
  background: var(--primaire-clair);
  color: var(--primaire-fonce);
}

.badge-inactive {
  background: var(--surface-2);
  color: var(--texte-doux);
}

/* ----- Liste des films ----- */

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

.film-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--bordure);
}

.film-ligne:last-child {
  border-bottom: 0;
}

.pastille-ronde {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-bd, #9ca3af);
  box-shadow: 0 0 0 3px var(--c-bg, #eef0f3);
}

.film-nom {
  flex: 1;
  min-width: 140px;
  font-weight: 600;
}

.film-nb {
  color: var(--texte-doux);
  font-size: .9rem;
  white-space: nowrap;
}

.film-actions {
  display: flex;
  gap: 6px;
}

.film-edition {
  display: flex;
  flex: 1;
  gap: 6px;
  min-width: 240px;
}

.film-ligne.is-edition .film-nom,
.film-ligne.is-edition .film-actions {
  display: none;
}

/* ----- Toast ----- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--texte);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity .2s, transform .2s;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast-erreur {
  background: var(--danger);
}

/* ==========================================================================
   Palette des films : fond clair (--c-bg), texte foncé (--c-fg), contour (--c-bd)
   Combinable avec .tuile, .pastille, .retenue, .pastille-ronde et les états.
   ========================================================================== */

.film-c0 { --c-bg: #dce8fd; --c-fg: #1e3a8a; --c-bd: #3b7bf6; } /* bleu */
.film-c1 { --c-bg: #ffe3da; --c-fg: #9a3412; --c-bd: #f26b45; } /* corail */
.film-c2 { --c-bg: #cff7ef; --c-fg: #115e59; --c-bd: #14a899; } /* teal */
.film-c3 { --c-bg: #fde4f1; --c-fg: #9d174d; --c-bd: #e5468f; } /* rose */
.film-c4 { --c-bg: #fdf0c4; --c-fg: #854008; --c-bd: #e59a0b; } /* ambre */
.film-c5 { --c-bg: #ebe6fd; --c-fg: #5b21b6; --c-bd: #8b5cf6; } /* violet */
.film-c6 { --c-bg: #d9f7e3; --c-fg: #166534; --c-bd: #22a752; } /* vert */
.film-c7 { --c-bg: #fde0e0; --c-fg: #991b1b; --c-bd: #e23c3c; } /* rouge */

/* ==========================================================================
   Tactile : étoile plus visible et plus grande
   ========================================================================== */

@media (hover: none) {
  .tuile-star {
    padding: 2px 6px;
    font-size: 1.1rem;
    opacity: .55;
  }
}

/* ==========================================================================
   Mobile : le calendrier devient une liste des jours qui ont des séances
   ========================================================================== */

@media (max-width: 760px) {
  .topbar {
    gap: 12px;
    padding: 0 12px;
  }

  .nav a {
    padding: 6px 9px;
  }

  .main {
    padding: 12px;
  }

  .champs-ligne {
    grid-template-columns: 1fr 1fr;
  }

  .champs-ligne .champ:last-child {
    grid-column: 1 / -1;
  }

  .retenue {
    grid-template-columns: minmax(0, 1fr) auto auto;
    row-gap: 2px;
  }

  .retenue-cinema {
    grid-column: 1 / -1;
    font-size: .85rem;
  }

  .cal {
    grid-template-columns: 1fr;
    border-radius: var(--rayon);
  }

  .cal-entetes {
    display: none;
  }

  .cal-jour.is-passe {
    display: none;
  }

  .cal-jour {
    min-height: 0;
    padding: 8px 10px;
  }

  .cal-jour.is-vide:not(.is-aujourdhui) {
    display: none;
  }

  .cal-jour-nom {
    display: inline;
  }

  .tuile {
    padding: 6px 4px 6px 8px;
    font-size: .9rem;
  }

  .tuile-cinema {
    font-size: .8rem;
  }

  .form-inline {
    flex-wrap: wrap;
  }
}