/* ==========================================================================
   Le Grand Rex — refonte legrandrex.com
   Feuille de styles unique · charte or et nuit · mobile-first
   ========================================================================== */

/* 1. Variables
   ========================================================================== */
:root {
  /* Palette 2026 : noir conservé, écritures éclaircies (ivoire, texte doux, gris lisible), or plus lumineux. Voir CONSIGNES_HOME. */
  --c-noir: #0B0B0B;
  --c-surface: #14120E;
  --c-carte: #121110;
  --c-bord: rgba(201, 165, 92, 0.18);
  --c-bord-clair: rgba(201, 165, 92, 0.30);
  --c-or: #C9A55C;
  --c-or-vif: #E3C27F;
  --c-champagne: #D8BE85;
  --c-creme: #E4DECD;
  --c-ivoire: #FAF5E8;
  --c-gris: #B7B0A0;
  --c-muet: #8F8B80;
  /* Catégories (planche validée) : or Cinéma, rouge Avant-première, orange Marathon, violet Concert, framboise Ciné-concert,
     cobalt Conférence, bleu d'eau Féerie, vert Spectacle & humour, jaune Visites, argenté Séance spéciale. */
  --c-violet: #6C4BA6;
  --c-rouge: #922025;
  --c-orange: #C9661C;
  --c-framboise: #AD3A64;
  --c-cobalt: #2457C5;
  --c-bleu: #2493B8;
  --c-vert: #2E7D44;
  --c-jaune: #F5C21B;
  --c-argent: #B9BEC7;
  --c-olive: #2E7D44;
  /* ancien nom du vert Spectacle, conservé pour le contrôleur */
  --c-petrole: #F5C21B;
  /* ancien nom du jaune Visites, conservé pour le contrôleur */
  --c-sable: #E9E2D0;

  --f-titre: "Marcellus", "Palatino Linotype", Palatino, Georgia, serif;
  --f-texte: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --esp-1: 0.5rem;
  --esp-2: 0.875rem;
  --esp-3: 1.5rem;
  --esp-4: 2.5rem;
  --esp-5: 4rem;

  --largeur-site: 102.5rem;
  /* 1640 px de largeur utile (bandes noires réduites sur grands écrans) */
  --ratio-affiche: 327 / 436;
  --transition: 180ms ease;
}

/* Calendrier de l'année */
.calendrier-entete {
  margin: var(--esp-4) var(--esp-3) var(--esp-2);
  text-align: center;
}

.calendrier-entete .titre-hero {
  margin: 0.3rem 0 0.4rem;
}

.calendrier-entete .accroche {
  margin: 0 auto;
  max-width: 40rem;
  color: var(--c-gris);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Barre du calendrier : aujourd'hui · mois précédent / choix du mois / mois suivant · vue d'ensemble */
.calendrier-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem var(--esp-2);
  margin: var(--esp-3) var(--esp-3) var(--esp-2);
}

.calendrier-barre__aujourdhui {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--c-or);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-or);
  white-space: nowrap;
}

.calendrier-barre__aujourdhui:hover {
  background: var(--c-or);
  color: var(--c-noir);
}

.calendrier-barre__mois {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calendrier-barre__mois .rail__fleche {
  display: inline-flex;
}

.calendrier-barre__choix select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 13rem;
  padding: 0.45rem 2.2rem 0.45rem 0.9rem;
  border: 1px solid var(--c-bord-clair);
  background: var(--c-carte) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23CBB077' stroke-width='1.4'/></svg>") no-repeat right 0.8rem center / 0.7rem;
  color: var(--c-ivoire);
  font-family: var(--f-titre);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-align: center;
  cursor: pointer;
}

.calendrier-barre__choix select:focus-visible {
  outline: 2px solid var(--c-or);
  outline-offset: 2px;
}

.calendrier-barre__vue {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-champagne);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.calendrier-barre__vue:hover,
.calendrier-barre__vue[aria-pressed="true"] {
  border-color: var(--c-or);
  color: var(--c-or);
}

/* Vue du mois : un seul mois, plus grand ; vue d'ensemble : les douze */
.calendrier-annee {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-2);
  margin: var(--esp-2) var(--esp-3) 0;
}

.calendrier-annee--mois {
  display: block;
}

.calendrier-annee--mois .calendrier-mois {
  display: none;
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--esp-3);
}

.calendrier-annee--mois .calendrier-mois.est-visible {
  display: block;
}

.calendrier-annee--mois .calendrier-mois__titre {
  font-size: 1.3rem;
}

.calendrier-annee--mois .calendrier-mois__grille {
  gap: 0.35rem;
}

.calendrier-annee--mois .calendrier-mois__semaine {
  font-size: 0.66rem;
}

.calendrier-annee--mois .calendrier__jour {
  aspect-ratio: auto;
  min-height: 2.8rem;
  font-size: 0.95rem;
}

.calendrier-annee--mois .calendrier__points {
  height: 6px;
  margin-top: 4px;
  gap: 3px;
}

.calendrier-annee--mois .calendrier__point {
  width: 6px;
  height: 6px;
}

.calendrier-annee--annee .calendrier-mois__titre {
  cursor: default;
}

.calendrier-mois {
  padding: var(--esp-2) var(--esp-2) var(--esp-3);
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
  scroll-margin-top: 8.5rem;
}

.calendrier-mois__titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--c-bord);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--c-ivoire);
}

.calendrier-mois__titre span {
  font-family: var(--f-texte);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--c-or);
}

.calendrier-mois__grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

.calendrier-mois__semaine {
  padding-bottom: 0.2rem;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--c-muet);
}

.calendrier__jour {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid transparent;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--c-creme);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

a.calendrier__jour:hover {
  border-color: var(--c-or);
  color: var(--c-ivoire);
}

.calendrier__jour--passe {
  color: var(--c-muet);
}

.calendrier__jour--ferme {
  color: var(--c-muet);
  text-decoration: line-through;
}

.calendrier__jour--sans {
  color: var(--c-gris);
}

.calendrier__jour--aujourdhui {
  border-color: var(--c-or);
}

.calendrier__jour--actif,
.calendrier__jour--actif:hover {
  background: var(--c-or);
  border-color: var(--c-or);
  color: var(--c-noir);
}

.calendrier__points {
  display: flex;
  gap: 2px;
  height: 4px;
  margin-top: 2px;
}

.calendrier__point {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-or);
}

.calendrier__jour--actif .calendrier__point {
  background: var(--c-noir);
}

.calendrier__point--or {
  background: var(--c-or);
}

.calendrier__point--rouge {
  background: var(--c-rouge);
}

.calendrier__point--orange {
  background: var(--c-orange);
}

.calendrier__point--violet {
  background: var(--c-violet);
}

.calendrier__point--framboise {
  background: var(--c-framboise);
}

.calendrier__point--cobalt {
  background: var(--c-cobalt);
}

.calendrier__point--bleu {
  background: var(--c-bleu);
}

.calendrier__point--vert,
.calendrier__point--olive {
  background: var(--c-vert);
}

.calendrier__point--jaune,
.calendrier__point--petrole {
  background: var(--c-jaune);
}

.calendrier__point--argent {
  background: var(--c-argent);
}

.calendrier__point--olive {
  background: #9AA74E;
}

.calendrier__point--petrole {
  background: #3E8E92;
}

.calendrier__point--bleu {
  background: #4F8DB8;
}

.calendrier-legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  margin: var(--esp-2) var(--esp-3) 0;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gris);
}

.calendrier-legende span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.calendrier-legende .calendrier__point {
  width: 6px;
  height: 6px;
}

.calendrier-programme {
  scroll-margin-top: 7rem;
}

.calendrier-programme .titre-section {
  margin-top: var(--esp-4);
}

/* Ajouter au calendrier (fiche spectacle à date unique) */
.ajout-cal {
  position: relative;
  margin-top: 0.6rem;
}

.ajout-cal__bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.6rem;
  padding: 0 0.9rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-champagne);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--transition), color var(--transition);
}

.ajout-cal__bouton::-webkit-details-marker {
  display: none;
}

.ajout-cal__bouton:hover,
.ajout-cal[open] .ajout-cal__bouton {
  border-color: var(--c-or);
  color: var(--c-or);
}

.ajout-cal__liste {
  margin: 0;
  padding: 0.35rem 0;
  border: 1px solid var(--c-bord-clair);
  border-top: 0;
  background: var(--c-carte);
  list-style: none;
}

.ajout-cal__liste a {
  display: block;
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  color: var(--c-creme);
}

.ajout-cal__liste a:hover {
  color: var(--c-or);
  background: rgba(185, 155, 94, 0.08);
}

.calendrier-programme__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  margin: calc(-1 * var(--esp-2)) var(--esp-3) var(--esp-3);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.calendrier-programme__nav a {
  color: var(--c-champagne);
}

.calendrier-programme__nav a:hover {
  color: var(--c-or);
}

.calendrier-programme__vide {
  margin: var(--esp-4) var(--esp-3);
  color: var(--c-gris);
}

@media (min-width: 480px) {
  .calendrier-annee--annee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .calendrier-annee--annee {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-3);
    margin-top: var(--esp-3);
  }
}

@media (min-width: 1100px) {
  .calendrier-annee--annee {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Programme du jour : fiche et ses séances, à la charte */
.programmation-salle {
  padding: clamp(2rem, 5vw, 5rem) var(--esp-3);
}

.programmation-salle__liste {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.programmation-salle__film {
  display: grid;
  grid-template-columns: minmax(9rem, 10.5rem) 1fr;
  gap: 1.5rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-bord);
}

.page-calendrier .programmation-salle__liste {
  margin: 0 var(--esp-3) var(--esp-4);
}

.programmation-salle__carte .carte {
  width: 100%;
}

.programmation-salle__film .seances {
  align-content: start;
}

.salle-carte__image .pastille--tag-2 {
  top: 3.1rem;
}

.salle-carte__image .pastille--tag-3 {
  top: 5.7rem;
}

@media (max-width: 700px) {
  .programmation-salle__film {
    grid-template-columns: 1fr;
  }

  .programmation-salle__carte {
    max-width: 220px;
  }
}

/* Polices de la charte, servies localement.
   Déposer les fichiers woff2 dans assets/fonts/ (voir README). */
@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-300.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-500.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

/* 2. Reset et styles de base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

[id] {
  scroll-margin-top: 7.5rem;
}

body {
  margin: 0;
  background: var(--c-noir);
  color: var(--c-creme);
  font-family: var(--f-texte);
  font-weight: 400;
  font-size: 1.03rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--c-champagne);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--c-ivoire);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--c-or);
  outline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--c-or);
  color: var(--c-noir);
  padding: 0.6rem 1.1rem;
  font-weight: 500;
}

.skip-link:focus-visible {
  left: var(--esp-2);
  top: var(--esp-2);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 3. Typographie
   ========================================================================== */
h1,
h2,
h3 {
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

.titre-hero {
  font-size: clamp(2rem, 7vw, 2.9rem);
  letter-spacing: 0.1em;
  color: var(--c-ivoire);
  text-transform: uppercase;
}

.sur-titre {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-or);
}

.accroche {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--c-gris);
  margin: 0.5rem 0 0;
}

/* Titre de section centré, encadré de son ornement filet-étoile */
.titre-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin: var(--esp-5) var(--esp-3) var(--esp-3);
  text-align: center;
}

.titre-section h2 {
  font-size: clamp(1.35rem, 4.5vw, 2.05rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-creme);
}

.titre-section .ornement {
  flex: 0 1 auto;
  width: clamp(1.5rem, 9vw, 4rem);
  height: auto;
  color: var(--c-or);
}

/* 4. Layout
   ========================================================================== */
.contenu {
  max-width: var(--largeur-site);
  margin: 0 auto;
}

/* En-tête */
.bandeau-info {
  display: none;
  justify-content: space-between;
  padding: 0.55rem var(--esp-3);
  border-bottom: 1px solid var(--c-bord);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9C2AE;
}

.bandeau-info a {
  color: inherit;
}

.bandeau-info a:hover {
  color: var(--c-or);
}

.bandeau-info__langues {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.bandeau-info__langues a[aria-current="true"],
.nav-extra__infos a[aria-current="true"] {
  color: var(--c-or);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--c-noir);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1rem var(--esp-3);
  border-bottom: 1px solid var(--c-bord);
}

.site-header__logo img {
  width: auto;
  height: 3.25rem;
}

.site-header__recherche {
  flex: 1;
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  max-width: 30rem;
  padding: 0.65rem 0.95rem 0.55rem;
  border: 1px solid rgba(203, 176, 119, 0.5);
  background: rgba(246, 241, 228, 0.03);
  color: var(--c-champagne);
  transition: border-color var(--transition);
}

.site-header__recherche:focus-within {
  border-color: var(--c-or);
}

.site-header__recherche input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--c-ivoire);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.site-header__recherche input::placeholder {
  color: #B5AC94;
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
}


.nav-principale ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2.8rem;
}

.nav-principale a {
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #C9C2AE;
  padding: 0.4rem 0;
}

.nav-principale a:hover {
  color: var(--c-or);
}

.nav-principale a[aria-current="page"] {
  color: var(--c-or);
}

.bouton-burger {
  position: relative;
  z-index: 51;
  /* au dessus du menu plein écran, pour pouvoir le refermer */
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.6rem;
}

/* Fil d'Ariane */
.fil-ariane {
  padding: var(--esp-2) var(--esp-3) 0;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muet);
}

.fil-ariane b {
  color: var(--c-champagne);
  font-weight: 500;
}

/* Pied de page */
.site-footer {
  margin-top: var(--esp-5);
  padding: var(--esp-3);
  border-top: 1px solid var(--c-bord);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muet);
}

.site-footer__principal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-2) var(--esp-4);
  align-items: center;
}

.site-footer__principal a {
  width: 100%;
}

.site-footer__principal a:nth-child(1) {
  text-align: left;
}

.site-footer__principal a:nth-child(2) {
  text-align: center;
}

.site-footer__principal a:nth-child(3) {
  text-align: right;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.5rem;
  justify-content: center;
  margin-top: var(--esp-2);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--c-bord);
  font-size: .58rem;
  letter-spacing: .14em;
}

.site-footer a {
  color: var(--c-muet);
}

.site-footer a:hover {
  color: var(--c-or);
}

.site-footer__webam strong {
  color: var(--c-champagne);
  font-weight: 500;
}

.site-footer__mention {
  display: block;
  margin: var(--esp-2) 0 0;
  padding-top: var(--esp-2);
  border-top: 1px solid var(--c-bord);
  text-align: center;
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: none;
}

.site-footer__webam {
  display: inline-block;
  margin-left: 1.4rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--c-bord);
}

/* 5. Composants
   ========================================================================== */

/* Héro de page */
.hero {
  position: relative;
  margin: var(--esp-3) var(--esp-3) 0;
  min-height: 15rem;
  border: 1px solid var(--c-bord-clair);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero__fond {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--hero-teinte-1, #2A2416) 0%, var(--hero-teinte-2, #14110A) 55%, var(--c-noir) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.hero__texte {
  position: relative;
  padding: var(--esp-3);
}

.hero--grande-salle {
  --hero-teinte-1: #4A3210;
  --hero-teinte-2: #241806;
}

.hero--grand-large {
  --hero-teinte-1: #1E3A5A;
  --hero-teinte-2: #0F2034;
}

.hero--infinite {
  --hero-teinte-1: #2E1E5A;
  --hero-teinte-2: #141034;
}

.hero--velvet,
.hero--emeraude {
  --hero-teinte-1: #1E3A2C;
  --hero-teinte-2: #0A1410;
}

.hero--classiques {
  --hero-teinte-1: #3A3A3A;
  --hero-teinte-2: #1E1E1E;
}

.hero--boutique {
  --hero-teinte-1: #4A3210;
  --hero-teinte-2: #241806;
}

.hero--spectacles {
  --hero-teinte-1: #3A2A5A;
  --hero-teinte-2: #1A1230;
}

.hero--visites {
  --hero-teinte-1: #2A3A2E;
  --hero-teinte-2: #131F16;
}

.pastille {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.7rem 0.25rem;
  background: var(--c-or);
  color: var(--c-noir);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* Rangée de repères chiffrés */
.reperes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: var(--esp-3);
  border: 1px solid var(--c-bord);
  background: var(--c-bord);
}

.repere {
  background: var(--c-noir);
  padding: var(--esp-3) var(--esp-2);
  text-align: center;
}

.repere__valeur {
  font-variant-numeric: tabular-nums;
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--c-or);
}

.repere__libelle {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--c-gris);
  line-height: 1.45;
}

/* Présentation en deux colonnes */
.presentation {
  display: grid;
  gap: var(--esp-3);
  margin: var(--esp-3);
  align-items: center;
}

.presentation p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--c-creme);
}

.presentation b {
  font-weight: 500;
  color: var(--c-ivoire);
}

.presentation__photo {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-bord);
  background: linear-gradient(160deg, #1C1810, #0E0C07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muet);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Galerie photos : rail qui défile (flèches dès 768 px, glissement au doigt) */
.galerie {
  display: flex;
  gap: var(--esp-2);
  margin: var(--esp-2) var(--esp-3) var(--esp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
}

.galerie::-webkit-scrollbar {
  display: none;
}

.rail--galerie .rail__barre {
  margin-top: 0;
}

.galerie__cadre {
  overflow: hidden;
}

.galerie__cadre {
  flex: 0 0 78%;
  scroll-snap-align: start;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--c-bord);
  background: linear-gradient(160deg, #1C1810, #0E0C07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muet);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Portes contextuelles */
.portes {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-3);
}

.porte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
  padding: var(--esp-3);
  transition: border-color var(--transition);
}

/* Le bouton se cale en bas de la porte : même niveau d'une porte à l'autre, quelle que soit la longueur du texte */
.porte>.bouton {
  margin-top: auto;
}

.porte:hover {
  border-color: var(--c-or);
}

.porte__icone {
  display: flex;
  justify-content: center;
  color: var(--c-or);
  margin-bottom: var(--esp-2);
}

.porte h3 {
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-creme);
}

.porte p {
  margin: 0.5rem 0 var(--esp-3);
  font-size: 0.85rem;
  color: var(--c-gris);
}

/* Boutons */
.bouton {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-champagne);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.bouton:hover {
  border-color: var(--c-or);
  color: var(--c-ivoire);
}

.bouton:active {
  background: var(--c-carte);
}

.bouton--plein {
  background: var(--c-or);
  border-color: var(--c-or);
  color: var(--c-noir);
}

.bouton--plein:hover {
  background: var(--c-champagne);
  border-color: var(--c-champagne);
  color: var(--c-noir);
}

/* Pages d'erreur — une salle obscure, son écran et ses rideaux. */
.page-erreur-active {
  background: var(--c-noir);
}

.page-erreur-active main {
  overflow: hidden;
}

.page-erreur {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(36rem, 74vh, 52rem);
  place-items: center;
  padding: clamp(4rem, 9vw, 8rem) 1.25rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(223, 196, 139, .2), transparent 34%),
    linear-gradient(180deg, #181512 0%, #070707 68%);
}

.page-erreur::before {
  position: absolute;
  z-index: -1;
  inset: 8% 13% 12%;
  border: 1px solid rgba(223, 196, 139, .34);
  border-radius: 50% 50% 1.25rem 1.25rem / 18% 18% 1.25rem 1.25rem;
  background: linear-gradient(180deg, rgba(255, 247, 226, .09), rgba(255, 247, 226, .015));
  box-shadow: inset 0 0 5rem rgba(223, 196, 139, .07), 0 0 0 1rem rgba(0, 0, 0, .18);
  content: "";
}

.page-erreur__rideau {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: min(24vw, 22rem);
  opacity: .72;
  background: repeating-linear-gradient(90deg, #230306 0 14%, #6f1019 27%, #290407 43%);
  filter: drop-shadow(0 0 2rem rgba(0, 0, 0, .85));
}

.page-erreur__rideau--gauche {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 58% 100%, 0 100%);
}

.page-erreur__rideau--droite {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 42% 100%);
  transform: scaleX(-1);
}

.page-erreur__scene {
  width: min(100%, 47rem);
  text-align: center;
}

.page-erreur__sur-titre {
  margin: 0 0 1rem;
  color: var(--c-or);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.page-erreur__code {
  margin: 0;
  color: transparent;
  font-family: var(--f-titre);
  font-size: clamp(7rem, 20vw, 13rem);
  font-weight: 400;
  line-height: .72;
  -webkit-text-stroke: 1px rgba(223, 196, 139, .46);
  text-shadow: 0 0 3rem rgba(223, 196, 139, .12);
}

.page-erreur__logo {
  width: 3.25rem;
  height: auto;
  margin: -1.3rem auto 1.25rem;
}

.page-erreur h1 {
  margin: 0;
  color: var(--c-ivoire);
  font-family: var(--f-titre);
  font-size: clamp(2rem, 5vw, 4.3rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.page-erreur__message {
  max-width: 39rem;
  margin: 1.5rem auto 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.page-erreur__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
}

.page-erreur__aide {
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, .48);
  font-size: .88rem;
}

@media (max-width: 44rem) {
  .page-erreur {
    min-height: 34rem;
  }

  .page-erreur::before {
    inset: 7% 4% 9%;
  }

  .page-erreur__rideau {
    width: 17vw;
    opacity: .5;
  }

  .page-erreur__actions {
    align-items: stretch;
    flex-direction: column;
    padding: 0 1.5rem;
  }
}

.bouton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Fiches de programmation */
.cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-2);
  margin: var(--esp-3);
}

.carte {
  min-width: 0;
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
  transition: border-color var(--transition);
}

.carte:hover {
  border-color: var(--c-or);
}

.carte__lien {
  display: block;
  height: 100%;
  color: inherit;
}

.carte__lien:hover {
  color: inherit;
}

.carte__affiche {
  aspect-ratio: var(--ratio-affiche);
  background: linear-gradient(160deg, var(--affiche-teinte, #3A2E1C), #14100A);
  border-bottom: 1px solid var(--c-bord);
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  color: var(--c-muet);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.carte__affiche img,
.fiche__affiche img,
.temps-fort__image img,
.salle-carte__image img,
/* Photos cliquables : le bouton épouse le cadre sans rien changer au rendu */
.visionneuse__ouvrir {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
}

.visionneuse__ouvrir,
.fiche__affiche img[data-affiche-zoom],
.fiche-film-mobile__affiche[data-affiche-zoom] {
  cursor: zoom-in;
}

.fiche__affiche img[data-affiche-zoom]:focus-visible,
.fiche-film-mobile__affiche[data-affiche-zoom]:focus-visible {
  outline: 2px solid var(--c-or);
  outline-offset: 2px;
}

.visionneuse__ouvrir:focus-visible {
  outline: 2px solid var(--c-or);
  outline-offset: -2px;
}

.presentation__photo .visionneuse__ouvrir img,
.galerie__cadre .visionneuse__ouvrir img,
.presentation__photo img,
.galerie__cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte__affiche span {
  display: grid;
  width: 100%;
  min-height: 100%;
  place-items: center;
  padding: var(--esp-2);
}

.carte__affiche img {
  display: block;
}

.bande-image__visuel {
  background-position: center;
  background-size: cover;
}

.hero__fond {
  background-position: center;
  background-size: cover;
}

/* Visionneuse plein écran des photos de salle */
.visionneuse {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(11, 11, 11, 0.96);
  color: var(--c-creme);
}

.visionneuse::backdrop {
  background: rgba(11, 11, 11, 0.96);
}

.visionneuse:not([open]) {
  display: none;
}

.visionneuse[open] {
  display: grid;
  grid-template-columns: 3.5rem 1fr 3.5rem;
  align-items: center;
}

.visionneuse__cadre {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  min-width: 0;
}

.visionneuse__cadre img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border: 1px solid var(--c-bord-clair);
}

.visionneuse__cadre figcaption {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-champagne);
}

.visionneuse__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-champagne);
  font-size: 1rem;
  background: transparent;
}

.visionneuse__fleche:hover,
.visionneuse__fermer:hover {
  border-color: var(--c-or);
  color: var(--c-ivoire);
}

.visionneuse__fermer {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-champagne);
  background: transparent;
  font-size: 0.9rem;
}

.visionneuse--affiche[open] {
  grid-template-columns: minmax(0, 1fr);
  padding: 2rem;
}

.visionneuse--affiche .visionneuse__cadre img {
  max-width: min(90vw, 45rem);
  max-height: 88vh;
}

/* Bande annonce en surimpression : rien n'est réservé dans la page tant qu'elle n'est pas ouverte */
.bande-annonce {
  width: min(92vw, 64rem);
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--c-bord-clair);
  background: var(--c-noir);
  color: var(--c-creme);
}

.bande-annonce::backdrop {
  background: rgba(11, 11, 11, 0.9);
}

.bande-annonce:not([open]) {
  display: none;
}

.bande-annonce__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  border-bottom: 1px solid var(--c-bord);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-champagne);
}

.bande-annonce__fermer {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-champagne);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.bande-annonce__fermer:hover {
  border-color: var(--c-or);
  color: var(--c-ivoire);
}

.bande-annonce__cadre {
  aspect-ratio: 16 / 9;
  background: #000;
}

.bande-annonce iframe,
.bande-annonce video {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mise en page minimale des écrans historiques encore accessibles hors refonte. */
main>.container,
main>article.container,
main>section.container {
  width: min(calc(100% - 2rem), var(--largeur-site));
  margin-inline: auto;
  padding-block: var(--esp-4);
}

main input,
main select,
main textarea {
  max-width: 100%;
  padding: .7rem .85rem;
  color: var(--c-creme);
  background: #16140f;
  border: 1px solid var(--c-bord-clair);
}

main button:not(.bouton):not(.rail__fleche):not(.bande-annonce__fermer):not(.hero-slider__fleche):not(.hero-slider__indicateur):not(.calendrier-barre__vue):not(.bande-experience__plus):not(.visionneuse__ouvrir):not(.visionneuse__fleche):not(.visionneuse__fermer):not(.filtre),
main .btn {
  /* 28 septembre 2026 : .filtre ajouté (cases de filtre des rubriques, CSS 10.5) */
  display: inline-flex;
  padding: .65rem 1rem;
  color: var(--c-noir);
  background: var(--c-champagne);
  border: 1px solid var(--c-champagne);
}

.recherche-page {
  max-width: 48rem;
  margin: var(--esp-4) auto;
}

.recherche-page>label {
  display: block;
  margin-bottom: .45rem;
  color: var(--c-champagne);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.recherche-page>div {
  display: flex;
  gap: .75rem;
}

.recherche-page input {
  flex: 1;
}

.resultats-section {
  margin-block: var(--esp-5);
}

.resultats-vide {
  margin-inline: var(--esp-3);
  color: var(--c-gris);
}

.faq-resultats {
  display: grid;
  gap: .75rem;
  max-width: 58rem;
  margin: 0 auto var(--esp-5);
}

.faq-resultat {
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
}

.faq-resultat[open] {
  border-color: var(--c-bord-clair);
}

.faq-resultat summary {
  position: relative;
  padding: 1rem 3rem 1rem 1.2rem;
  color: var(--c-ivoire);
  font-family: var(--f-titre);
  cursor: pointer;
  list-style: none;
}

.faq-resultat summary::-webkit-details-marker {
  display: none;
}

.faq-resultat summary::after {
  content: "+";
  position: absolute;
  top: .75rem;
  right: 1.1rem;
  color: var(--c-or);
  font-size: 1.35rem;
}

.faq-resultat[open] summary::after {
  content: "−";
}

.faq-resultat__reponse {
  padding: 0 1.2rem 1.2rem;
  color: var(--c-gris);
}

@media (max-width: 40rem) {
  .recherche-page>div {
    align-items: stretch;
    flex-direction: column;
  }
}

.carte--or {
  --affiche-teinte: #A8895B;
}

.carte--or .carte__categorie {
  background: #A8895B;
  color: var(--c-noir);
}

.carte--violet {
  --affiche-teinte: var(--c-violet);
}

.carte--rouge {
  --affiche-teinte: var(--c-rouge);
}

.carte--orange {
  --affiche-teinte: var(--c-orange);
}

.carte--framboise {
  --affiche-teinte: var(--c-framboise);
}

.carte--cobalt {
  --affiche-teinte: var(--c-cobalt);
}

.carte--bleu {
  --affiche-teinte: var(--c-bleu);
}

.carte--vert,
.carte--olive {
  --affiche-teinte: var(--c-vert);
}

.carte--jaune,
.carte--petrole {
  --affiche-teinte: var(--c-jaune);
}

.carte--argent {
  --affiche-teinte: var(--c-argent);
}

.carte__categorie {
  display: block;
  overflow-wrap: anywhere;
  padding: 0.3rem 0.8rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-ivoire);
}

.carte--bleu {
  --affiche-teinte: var(--c-bleu);
}

.carte--violet .carte__categorie {
  background: var(--c-violet);
}

.carte--rouge .carte__categorie {
  background: var(--c-rouge);
}

.carte--olive .carte__categorie,
.carte--vert .carte__categorie {
  background: var(--c-vert);
}

.carte--petrole .carte__categorie,
.carte--jaune .carte__categorie {
  background: var(--c-jaune);
  color: var(--c-noir);
}

.carte--bleu .carte__categorie {
  background: var(--c-bleu);
}

.carte--orange .carte__categorie {
  background: var(--c-orange);
}

.carte--framboise .carte__categorie {
  background: var(--c-framboise);
}

.carte--cobalt .carte__categorie {
  background: var(--c-cobalt);
}

.carte--argent .carte__categorie {
  background: var(--c-argent);
  color: var(--c-noir);
}

.carte__corps {
  padding: var(--esp-2);
}

.carte__titre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-creme);
}

.carte__fleche {
  color: var(--c-or);
  flex: 0 0 auto;
}

.carte__libelle {
  min-width: 0;
  overflow-wrap: anywhere;
}

.carte__date {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--c-or);
}

.carte--annule .carte__affiche img {
  filter: grayscale(1);
  opacity: 0.48;
}

.carte--annule .carte__date {
  text-decoration: line-through;
}

.carte--annule .carte__fleche {
  display: none;
}

.carte__mention {
  display: block;
  margin-top: 0.65rem;
  color: var(--c-rouge);
  font-size: 0.72rem;
  line-height: 1.45;
}

.seance-carre--desactivee {
  cursor: default;
  opacity: 0.65;
}

.seance-carre--complete {
  filter: grayscale(1);
  opacity: 0.48;
  pointer-events: none;
}

.seance-carre__complet {
  padding: 0.12rem 0.35rem;
  border: 1px solid currentColor;
  color: var(--c-gris);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.fiche--annulee .fiche__affiche img {
  filter: grayscale(1);
  opacity: 0.48;
}

.fiche--annulee .fiche__infos {
  text-decoration: line-through;
}

.fiche__annulation {
  color: var(--c-rouge);
  font-weight: 700;
}

/* Tuiles de la boutique */
.tuiles-boutique {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-2);
  margin: var(--esp-3);
}

.tuile {
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
  transition: border-color var(--transition);
}

.tuile:hover {
  border-color: var(--c-or);
}

.tuile__vignette {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--c-bord);
  background: radial-gradient(circle at 50% 42%, var(--tuile-teinte, #161409) 0%, var(--c-carte) 74%);
}

.tuile--carte {
  --tuile-teinte: #1B0E0F;
}

.tuile--parfum {
  --tuile-teinte: #141020;
}

.tuile--popcorn {
  --tuile-teinte: #1B1510;
}

.tuile--textile {
  --tuile-teinte: #0E1717;
}

.tuile--divers {
  --tuile-teinte: #141507;
}

.tuile__vignette svg {
  width: 72%;
  height: 72%;
}

.tuile__titre {
  padding: 0.8rem 0.9rem 0.2rem;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-creme);
}

.tuile__sous-titre {
  padding: 0 0.9rem 0.9rem;
  font-size: 0.72rem;
  color: var(--c-gris);
  line-height: 1.5;
}

/* Produits */
.produits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-2);
  margin: var(--esp-3);
}

.produit {
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
}

.produit__photo {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--c-bord);
  background: linear-gradient(160deg, #1C1810, #0E0C07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muet);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.produit__nom {
  padding: 0.75rem 0.9rem 0.15rem;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-creme);
}

.produit__prix {
  padding: 0 0.9rem 0.85rem;
  font-size: 0.82rem;
  color: var(--c-or);
}

.produit__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-boutique .separateur {
  margin-bottom: var(--esp-3);
}

.page-boutique .tuiles-boutique {
  margin-top: 0;
}

.tuile:hover .tuile__vignette svg {
  transform: translateY(-2px);
}

.tuile__vignette svg {
  transition: transform var(--transition);
}

/* Intro centrée */
.intro {
  max-width: 42rem;
  margin: var(--esp-3) auto 0;
  padding: 0 var(--esp-3);
  text-align: center;
  font-size: 0.98rem;
  color: var(--c-gris);
  line-height: 1.75;
}

/* Héro de l'accueil : film à la une, voile en dégradé */
.hero--accueil {
  min-height: 32vh;
  border: 0;
  margin: 0;
}

.hero--accueil .hero__fond {
  background: linear-gradient(150deg, #3A1F14, #12100D);
  -webkit-mask-image: none;
  mask-image: none;
}

.hero--accueil .hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.12) 0%, rgba(11, 11, 11, 0) 38%, rgba(11, 11, 11, 0.3) 66%, rgba(11, 11, 11, 0.86) 100%);
}

/* Le texte du héro s'aligne sur la colonne de contenu du site */
.hero--accueil .hero__texte {
  padding-inline: max(var(--esp-3), calc((100% - var(--largeur-site)) / 2 + var(--esp-3)));
  padding-bottom: var(--esp-4);
}

.hero-slider {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  background: var(--c-noir);
}

.hero-slider__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 700ms ease, visibility 700ms ease;
}

.hero-slider__slide.est-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Héro en deux volets */
.hero-slider--volets {
  min-height: 0;
}

.hero-slider--volets .hero-slider__slide {
  position: absolute;
  inset: 0;
}

.hero-slider--volets .hero-slider__slide.est-active {
  position: relative;
}

.hero-volets {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--c-noir);
}

.hero-volets__texte {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--esp-3) var(--esp-3) var(--esp-4);
}

.hero-volets__texte .titre-hero {
  margin: 0.2rem 0 0.6rem;
}

.hero-volets__texte .accroche {
  max-width: 34ch;
}

.hero-volets__visuel {
  position: relative;
  order: -1;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(150deg, #3A1F14, #12100D);
}

.hero-volets__visuel .hero__fond {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.hero-volets__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.hero-volets__video.est-prete {
  opacity: 1;
}

.hero-volets__youtube {
  position: absolute;
  top: 50%;
  left: 50%;
  background: transparent;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  transform: translate(-50%, -50%);
  border: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}

.hero-volets__youtube.est-prete {
  opacity: 1;
}

/* Diapositive sans texte : le visuel seul occupe tout le héro (bannière composée par les équipes) */
.hero-volets--plein {
  grid-template-columns: 1fr !important;
}

.hero-volets--plein .hero-volets__visuel .hero__fond,
.hero-volets--plein .hero-volets__video,
.hero-volets--plein .hero-volets__youtube {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hero-slider__commandes {
  position: absolute;
  z-index: 3;
  left: clamp(1.5rem, 3.5vw, 3.25rem);
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0.85;
}

.hero-slider__fleche,
.hero-slider__indicateur {
  border: 1px solid var(--c-bord-clair);
  background: transparent;
  color: var(--c-champagne);
  cursor: pointer;
}

.hero-slider__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
}

.hero-slider__indicateurs {
  display: flex;
  gap: 0.4rem;
}

.hero-slider__indicateur {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 50%;
}

.hero-slider__indicateur.est-actif {
  background: var(--c-or);
  border-color: var(--c-or);
}

.hero-slider__commandes:hover,
.hero-slider__commandes:focus-within {
  opacity: 1;
}

.hero-slider__fleche:hover,
.hero-slider__fleche:focus-visible,
.hero-slider__indicateur:hover,
.hero-slider__indicateur:focus-visible {
  border-color: var(--c-or);
}

.hero__kick {
  font-size: 0.66rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--c-champagne);
  margin: 0 0 0.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: var(--esp-2);
}

/* Pastilles d'horaires : le format au-dessus de l'heure */
.horaires {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.pastille-seance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  padding: 0.4rem 0.6rem 0.35rem;
  border: 1px solid rgba(185, 155, 94, 0.45);
  transition: border-color var(--transition);
}

.pastille-seance:hover {
  border-color: var(--c-or);
}

.pastille-seance__format {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8C8570;
}

.pastille-seance__heure {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--c-ivoire);
}

/* Newsletter, section dédiée avant le pied de page */
.infolettre {
  max-width: var(--largeur-site);
  margin: var(--esp-5) auto 0;
  padding: 0 var(--esp-3);
  text-align: center;
}

.infolettre .separateur {
  margin-left: 0;
  margin-right: 0;
}

.infolettre h2 {
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-creme);
  margin: var(--esp-2) 0 0.4rem;
}

.infolettre p {
  margin: 0 0 var(--esp-2);
  color: var(--c-gris);
  font-size: 0.9rem;
}

.infolettre form {
  display: flex;
  gap: 0.6rem;
  max-width: 26rem;
  margin: 0 auto;
}

.infolettre input {
  flex: 1;
  background: none;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-creme);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
}

.infolettre input::placeholder {
  color: var(--c-muet);
}

/* Fiche film, page de détail */
.fiche {
  display: grid;
  gap: var(--esp-3);
  margin: var(--esp-3);
}

.fiche--fond-configure {
  padding: var(--esp-4);
  background-image: linear-gradient(90deg, rgba(11, 11, 11, .96), rgba(11, 11, 11, .78)), var(--fiche-image-mobile);
  background-position: var(--fiche-position-mobile, center center);
  background-size: cover;
}

@media (min-width: 768px) {
  .fiche--fond-configure {
    background-image: linear-gradient(90deg, rgba(11, 11, 11, .96), rgba(11, 11, 11, .78)), var(--fiche-image-desktop);
    background-position: var(--fiche-position-desktop, center center);
  }
}

.fiche__affiche {
  aspect-ratio: var(--ratio-affiche);
  max-width: 20rem;
  border: 1px solid var(--c-bord);
  background: linear-gradient(160deg, #3A2E1C, #14100A);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muet);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.fiche__poster {
  position: relative;
  max-width: 20rem;
}

.fiche__play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  color: var(--c-champagne);
  border: 1px solid var(--c-bord-clair);
  transition: border-color var(--transition), color var(--transition);
}

.fiche__play:hover {
  color: var(--c-ivoire);
  border-color: var(--c-or);
}

.fiche__play-anneau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--c-or);
  color: var(--c-or);
  font-size: 0.7rem;
}

.fiche__play-libelle {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.fiche__equipe {
  font-size: 0.9rem;
  color: var(--c-creme);
  margin: 0.7rem 0 0;
}

.fiche__equipe b {
  font-weight: 500;
  color: var(--c-or);
}

.fiche__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
}

.fiche__infos {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-or);
  margin: 0.6rem 0 0;
}

/* Tarifs de la fiche spectacle : une ligne discrète qui termine le texte, même écriture que la ligne d'informations */
.fiche__tarifs {
  margin: 1.1rem 0 0;
  max-width: 64ch;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-or);
}

.fiche__tarifs-libelle::after {
  content: " · ";
}

/* Sous l'affiche : bande annonce et Réserver côte à côte, même hauteur */
.fiche__boutons {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}

.fiche__boutons .fiche__play {
  flex: 1.5 1 0;
  min-height: 3.1rem;
  margin-top: 0;
  padding: 0 0.6rem;
  white-space: nowrap;
}

.fiche__boutons .fiche__play-libelle {
  letter-spacing: 0.14em;
}

.fiche__boutons .fiche__play-anneau {
  width: 1.7rem;
  height: 1.7rem;
}

.fiche__boutons .fiche__reserver {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0 0.9rem;
}

.fiche__boutons .fiche__reserver:only-child {
  flex: 1 1 100%;
}

.alerte-vente {
  width: min(92vw, 34rem);
}

.alerte-vente__contenu {
  padding: clamp(1.25rem, 4vw, 2rem);
}

.alerte-vente__contenu h2 {
  margin: 0 0 .75rem;
  color: var(--c-ivoire);
  font-family: var(--f-titre);
  font-size: clamp(1.45rem, 4vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

.alerte-vente__contenu>p {
  color: var(--c-creme);
  line-height: 1.65;
}

.alerte-vente__contenu form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .65rem;
  margin-top: 1.25rem;
}

.alerte-vente__contenu form label {
  grid-column: 1 / -1;
  color: var(--c-champagne);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.alerte-vente__contenu form input {
  min-width: 0;
}

.alerte-vente__contenu .alerte-vente__precision {
  margin: .85rem 0 0;
  color: var(--c-gris);
  font-size: .75rem;
}

.page-evenement .accroche {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--c-champagne);
}

.fiche__synopsis {
  max-width: 64ch;
  margin-top: var(--esp-3);
  color: var(--c-creme);
  font-size: 1rem;
  line-height: 1.9;
  text-align: justify;
  text-wrap: pretty;
  white-space: pre-line;
}

.fiche__synopsis>* {
  white-space: normal;
}

.fiche__synopsis p {
  margin: 0 0 1.35em;
}

.fiche__synopsis p:last-child {
  margin-bottom: 0;
}

.fiche__synopsis :is(ul, ol, blockquote) {
  margin: 1.2em 0;
}

.fiche__synopsis :is(ul, ol) {
  padding-left: 1.5em;
}

.fiche__synopsis :is(h2, h3, h4) {
  margin: 1.5em 0 .65em;
  line-height: 1.25;
}

.page-film .titre-section {
  margin-top: var(--esp-4);
}

.sous-section {
  margin: calc(-1 * var(--esp-2)) var(--esp-3) var(--esp-3);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-or);
}

.seances {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  margin-top: var(--esp-2);
}

/* Messages flash (application Symfony) */
.alerte {
  margin: var(--esp-2) var(--esp-3);
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--c-bord-clair);
  background: var(--c-carte);
  color: var(--c-creme);
  font-size: 0.85rem;
}

.alerte--success {
  border-color: var(--c-olive);
}

.alerte--error,
.alerte--danger {
  border-color: var(--c-rouge);
}

/* Sous-navigation de rubrique */
.sous-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: var(--esp-2) var(--esp-3) 0;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sous-nav a {
  color: var(--c-gris);
  padding: 0.3rem 0;
}

.sous-nav a[aria-current="true"],
.sous-nav a:hover {
  color: var(--c-or);
}

/* Sélecteur de jours et filtres */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--esp-2) var(--esp-3);
}

.filtres span {
  flex: 1 1 auto;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--c-bord);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gris);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.filtres .actif {
  border-color: var(--c-or);
  color: var(--c-or);
}

.rail__barre .jours {
  flex: 1 1 auto;
}

/* Titre de mois (typographie validée : Jost espacée en or, filet à la suite) */
.mois {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: var(--esp-4) var(--esp-3) var(--esp-2);
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-or);
}

.mois::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-bord);
}

/* Agenda des spectacles : mois cliquables qui défilent, puis un slider par mois */
.mois-nav {
  display: flex;
  gap: 0.5rem;
  margin: var(--esp-2) var(--esp-3) var(--esp-3);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-bottom: 0.2rem;
}

.mois-nav::-webkit-scrollbar {
  display: none;
}

.mois-nav a {
  flex: 0 0 auto;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--c-bord);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gris);
  white-space: nowrap;
  scroll-snap-align: start;
  transition: border-color var(--transition), color var(--transition);
}

.mois-nav a:hover,
.mois-nav a[aria-current="true"] {
  border-color: var(--c-or);
  color: var(--c-or);
}

.rail--mois {
  scroll-margin-top: 8.5rem;
}

.rail--mois .rail__barre {
  flex-wrap: nowrap;
  margin-top: var(--esp-4);
}

.rail--mois .mois {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.rail--mois+.rail--mois .rail__barre {
  margin-top: var(--esp-3);
}

/* Séparateur art déco : filet, points, étoile de l'enseigne */
.separateur {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: var(--esp-4) var(--esp-3);
  color: var(--c-or);
}

.separateur::before,
.separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-bord-clair);
}

.separateur svg {
  flex: 0 0 auto;
}

/* Bande image éditoriale */
.bande-image {
  display: grid;
  margin: var(--esp-4) var(--esp-3);
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
}

.bande-image__visuel {
  min-height: 11rem;
  background: linear-gradient(150deg, #2E5E7E, #0E1C26);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

.bande-image__visuel--responsive {
  background-image: var(--band-image-mobile);
}

.bande-image__texte {
  padding: var(--esp-3);
}

.bande-image__texte h2,
.bande-image__texte h3 {
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  color: var(--c-ivoire);
  margin: 0.3rem 0 0.6rem;
}

.bande-image__texte p {
  margin: 0 0 var(--esp-2);
  color: var(--c-gris);
  font-size: 0.92rem;
}

.bande-image--cabine .bande-image__visuel {
  background: linear-gradient(150deg, #4A3210, #14100A);
}

.bande-image--feerie .bande-image__visuel {
  background: linear-gradient(150deg, #2E5E7E, #0E1C26);
}

.bande-image--cadeaux .bande-image__visuel {
  background: linear-gradient(150deg, #6E1420, #14060A);
}

.bande-image__texte .bouton {
  margin-top: 0.2rem;
}

/* Bandeaux d'expériences (rubrique Visites) : visuel fondu, informations clés, réservation. Alternance droite / gauche dès 768 px. */
.bande-experience {
  display: grid;
  margin: var(--esp-3);
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
}

.page-visites .separateur {
  margin-bottom: var(--esp-3);
}

.bande-experience__visuel {
  min-height: 13rem;
  background: linear-gradient(150deg, #2A3A2E, #131F16) center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

.bande-experience__texte {
  padding: var(--esp-3);
}

.bande-experience__texte h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  letter-spacing: 0.08em;
  color: var(--c-ivoire);
  margin: 0.35rem 0 0.7rem;
}

.bande-experience__texte p {
  margin: 0 0 var(--esp-2);
  max-width: 56ch;
  color: var(--c-gris);
  font-size: 0.95rem;
  line-height: 1.7;
}

.bande-experience__cles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 var(--esp-3);
}

.bande-experience__cles span {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--c-bord-clair);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-champagne);
}

.bande-experience__cles .bande-experience__nouveau {
  background: var(--c-champagne);
  border-color: var(--c-champagne);
  color: var(--c-noir);
  font-weight: 500;
}

.bande-experience__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.bande-experience__plus[aria-expanded="true"] {
  border-color: var(--c-or);
  color: var(--c-or);
}

.bande-experience__details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms ease;
}

.bande-experience__details>div {
  overflow: hidden;
}

.bande-experience--ouvert .bande-experience__details {
  grid-template-rows: 1fr;
}

.bande-experience__details-texte {
  padding-top: var(--esp-3);
  max-width: 62ch;
}

.bande-experience__details-texte p {
  margin: 0 0 0.9em;
  color: var(--c-creme);
  font-size: 0.92rem;
  line-height: 1.75;
  text-align: justify;
}

.bande-experience__details-texte p:last-child {
  margin-bottom: 0;
}

.bande-experience__play {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-champagne);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: border-color var(--transition), color var(--transition);
}

.bande-experience__play:hover {
  border-color: var(--c-or);
  color: var(--c-ivoire);
}

.bande-experience__play .fiche__play-anneau {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.6rem;
}

.bande-experience--vip {
  border-color: var(--c-bord-clair);
}

.bande-experience--vip .bande-experience__visuel {
  background-image: linear-gradient(120deg, #9A7B3A 0%, #5E4520 40%, #241A08 100%);
}

.bande-experience--vip .bande-experience__texte h2 {
  color: var(--c-champagne);
}

/* Groupes : bandeau sobre de clôture */
.bande-groupes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin: var(--esp-4) var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
}

.bande-groupes h2 {
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--c-ivoire);
  margin: 0.35rem 0 0.5rem;
}

.bande-groupes p {
  margin: 0;
  max-width: 64ch;
  color: var(--c-gris);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Bande des salles */
.salles-bande {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-2);
  margin: var(--esp-3);
}

.salle-carte {
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
  transition: border-color var(--transition);
}

.salle-carte:hover {
  border-color: var(--c-or);
}

.salle-carte__image {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--salle-teinte-1, #2A2416), var(--salle-teinte-2, #12080A));
}

.salle-carte--grande-salle {
  --salle-teinte-1: #5A1E1E;
  --salle-teinte-2: #12080A;
}

.salle-carte--grand-large {
  --salle-teinte-1: #1E3A5A;
  --salle-teinte-2: #08101A;
}

.salle-carte--infinite {
  --salle-teinte-1: #2E1E5A;
  --salle-teinte-2: #0C081A;
}

.salle-carte--velvet,
.salle-carte--emeraude {
  --salle-teinte-1: #1E3A2C;
  --salle-teinte-2: #0A1410;
}

.salle-carte--classiques {
  --salle-teinte-1: #3A3A3A;
  --salle-teinte-2: #101010;
}

.salle-carte__image .pastille {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  margin: 0;
}

.salle-carte__corps {
  padding: 0.8rem 0.95rem 0.95rem;
}

.salle-carte__corps h3 {
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-creme);
}

.salle-carte__corps p {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--c-gris);
}

.salle-carte__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Temps forts de l'accueil : exactement les mêmes fiches que la programmation du jour, dans le même rail ;
   seule différence, la date au dessus du titre. */
.carte--temps-fort .carte__date {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-or);
}

/* Rail de fiches : une seule rangée, défilement horizontal, la fiche suivante reste visible à moitié */
.rail {
  position: relative;
}

.rail__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem var(--esp-2);
  margin: var(--esp-3) var(--esp-3) 0;
}

.rail__barre .jours {
  margin: 0;
}

.rail__outils {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.rail--temps-forts .rail__barre,
.rail--sans-jours .rail__barre {
  margin-top: calc(-1 * var(--esp-2));
}

/* Sections de rubrique : les rails s'enchaînent, le titre orné fait la respiration */
.rubrique-section+.rubrique-section {
  margin-top: var(--esp-2);
}

.rail__fleche {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-champagne);
  font-size: 0.95rem;
  line-height: 1;
  transition: border-color var(--transition), color var(--transition), opacity var(--transition);
}

.rail__fleche:hover {
  border-color: var(--c-or);
  color: var(--c-ivoire);
}

.rail__fleche:disabled {
  opacity: 0.3;
  cursor: default;
  border-color: var(--c-bord);
  color: var(--c-gris);
}

.cartes--rail {
  --visibles: 2.2;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--esp-2);
  margin: var(--esp-2) var(--esp-3) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
}

.cartes--rail::-webkit-scrollbar {
  display: none;
}

.cartes--rail>.carte {
  flex: 0 0 calc((100% - var(--esp-2) * (var(--visibles) - 1)) / var(--visibles));
  scroll-snap-align: start;
}

.cartes--rail>p {
  color: var(--c-gris);
}

.cartes--rail:focus-visible {
  outline: 2px solid var(--c-or);
  outline-offset: 4px;
}

/* Réseaux sociaux, logos en couleur, sous l'inscription à la newsletter (toutes les pages) */
.reseaux {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin: var(--esp-3) 0 0;
}

.reseaux__titre {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-or);
}

.reseaux__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reseaux a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
  transition: border-color var(--transition), transform var(--transition);
}

.reseaux a:hover,
.reseaux a:focus-visible {
  border-color: var(--c-or);
  transform: translateY(-2px);
}

.reseaux svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* Héro de l'accueil (ciel étoilé + film à la une) */
.hero--accueil {
  min-height: 26rem;
}

.hero--accueil .hero__fond {
  background: linear-gradient(165deg, #16324A 0%, #0E1E30 45%, var(--c-noir) 100%);
}

.hero__fond--responsive {
  background-image: var(--hero-overlay, linear-gradient(90deg, rgba(11, 11, 11, .45) 0%, rgba(11, 11, 11, 0) 55%)), var(--hero-image-mobile);
  background-position: var(--hero-position-mobile, center center);
  background-size: cover;
}

.hero--accueil .hero__fond--responsive {
  background-image: linear-gradient(90deg, rgba(11, 11, 11, .45) 0%, rgba(11, 11, 11, 0) 55%), var(--hero-image-mobile);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: var(--esp-2);
}

@media (min-width: 768px) {
  .hero__fond--responsive {
    background-image: var(--hero-overlay, linear-gradient(90deg, rgba(11, 11, 11, .45) 0%, rgba(11, 11, 11, 0) 55%)), var(--hero-image-desktop);
    background-position: var(--hero-position-desktop, center center);
  }

  .hero--accueil .hero__fond--responsive {
    background-image: linear-gradient(90deg, rgba(11, 11, 11, .45) 0%, rgba(11, 11, 11, 0) 55%), var(--hero-image-desktop);
  }
}

/* Rectangles de séances : taille fixe unique, coins droits */
.seances-carres {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--esp-2);
  margin: var(--esp-2) var(--esp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.4rem;
}

.seance-carre {
  flex: 0 0 9.5rem;
  width: 9.5rem;
  min-height: 5.25rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.5rem 0.65rem 0.55rem;
  border: 1px solid var(--c-bord-clair);
  background: var(--c-carte);
  transition: border-color var(--transition);
}

.seance-carre:hover {
  border-color: var(--c-or);
}

.seance-carre__l1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.seance-carre__debut {
  font-variant-numeric: tabular-nums;
  font-family: var(--f-titre);
  font-size: 1.05rem;
  color: var(--c-ivoire);
}

.seance-carre__fin {
  font-size: 0.68rem;
  color: var(--c-gris);
}

.seance-carre__jour {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-champagne);
}

.seance-carre__l2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.seance-carre__l2 .seance-carre__pmr {
  margin-left: auto;
}

/* Deuxième ligne : le logo officiel de la salle (fusion sur fond sombre, les fonds noirs deviennent invisibles) ou son nom */
.seance-carre__salle {
  display: flex;
  align-items: center;
  min-height: 1.2rem;
}

.seance-carre__logo {
  display: block;
  height: 1.15rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: lighten;
}

.seance-carre__nom {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ivoire);
  white-space: nowrap;
}

.seance-carre__format {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-or);
}

.seance-carre__version {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8C8570;
}

.seance-carre__classification {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.28rem;
  border: 1px solid #D95359;
  color: #D95359;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
}

.seance-carre__pmr {
  width: 0.8rem;
  height: 0.85rem;
  color: var(--c-gris);
  flex: 0 0 auto;
}

@media (max-width: 767px) {

  /* ---- Home mobile (validations du 23 août) : héro compact, jours sur une ligne, fiches et espaces resserrés ---- */
  .hero-volets__texte {
    padding: 0.9rem var(--esp-3) 0.6rem;
  }

  .hero-volets__texte .hero__kick {
    font-size: 0.58rem;
    letter-spacing: 0.26em;
  }

  .hero-volets__texte .titre-hero {
    margin: 0.25rem 0 0.45rem;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
  }

  .hero-volets__texte .accroche {
    max-width: none;
    margin: 0 0 0.8rem;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .hero-volets__texte .hero__actions {
    gap: 0.5rem;
  }

  .hero-volets__texte .hero__actions .bouton {
    padding: 0.55rem 0.9rem;
    font-size: 0.66rem;
  }

  .hero-volets__visuel {
    aspect-ratio: 16 / 9;
  }

  .hero-slider--volets .hero-slider__commandes {
    margin: 0 var(--esp-3) 0.9rem;
  }

  .rail__barre {
    margin-top: var(--esp-2);
  }

  .rail__barre .jours {
    flex: 1 1 100%;
    min-width: 0;
  }

  .cartes--rail {
    margin-top: 0.8rem;
  }

  /* Barres sans sélecteur de jours (temps forts, salles…) : rien à afficher sur mobile, on ne réserve pas d'espace */
  .rail--sans-jours .rail__barre,
  .rail--temps-forts .rail__barre {
    display: none;
  }

  /* Fiches : corps resserré, titre limité à deux lignes pour que les fiches aient presque la même hauteur */
  .cartes--rail .carte__corps {
    padding: 0.55rem 0.7rem 0.65rem;
  }

  .cartes--rail .carte__libelle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cartes--rail .carte__date {
    margin-top: 0.25rem;
    font-size: 0.66rem;
  }

  /* Espaces entre les blocs : plus courts sur mobile */
  .separateur {
    margin: var(--esp-2) var(--esp-3);
  }

  .titre-section {
    margin: var(--esp-3) var(--esp-3) var(--esp-2);
    gap: 0.9rem;
  }

  .page-home .infolettre {
    margin-top: var(--esp-3);
  }

  .infolettre .separateur {
    margin-top: 0;
  }

  .bande-image {
    margin: var(--esp-3) var(--esp-3);
  }

  .page-home .reseaux {
    margin-top: var(--esp-2);
  }

  /* ---- Pages de rubrique sur mobile (validations du 23 août) ---- */
  /* Héro de rubrique : comme la home, le visuel au dessus sans texte dessus, le texte en dessous */
  .hero {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    min-height: 0;
    border: 0;
    border-bottom: 1px solid var(--c-bord);
  }

  .hero__fond {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  }

  .hero__fond--responsive {
    background-image: var(--hero-image-mobile);
  }

  .hero__voile {
    display: none;
  }

  .hero__texte {
    padding: 0.7rem var(--esp-3) 1rem;
  }

  .hero__texte .titre-hero {
    margin: 0.25rem 0 0.4rem;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
  }

  .hero__texte .accroche {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .hero__texte .sur-titre {
    font-size: 0.58rem;
    letter-spacing: 0.26em;
  }

  .hero__texte .hero__actions {
    margin-top: 0.8rem;
    gap: 0.5rem;
  }

  .hero__texte .hero__actions .bouton {
    padding: 0.55rem 0.9rem;
    font-size: 0.66rem;
  }

  /* Sous navigation : une ligne qui défile */
  .sous-nav {
    flex-wrap: nowrap;
    gap: 0 1.1rem;
    margin: 0.6rem var(--esp-3) 0;
    padding-bottom: 0.2rem;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }

  .sous-nav::-webkit-scrollbar {
    display: none;
  }

  .sous-nav a {
    flex: 0 0 auto;
    padding: 0.45rem 0;
  }

  /* Titres de section : plus petits, ornements réduits, le texte peut passer sur deux lignes entre les ornements */
  .titre-section {
    flex-wrap: nowrap;
    gap: 0.7rem;
  }

  .titre-section h2 {
    font-size: 0.98rem;
    letter-spacing: 0.16em;
    line-height: 1.35;
  }

  .titre-section .ornement {
    flex: 0 0 auto;
    width: 1.6rem;
  }

  .rubrique-section+.rubrique-section {
    margin-top: 0;
  }

  /* Nos salles : la Grande Salle en pleine largeur, puis deux par deux (cinq cartes sans orpheline) */
  .salles-bande {
    gap: 0.6rem;
  }

  .salles-bande .salle-carte:first-child {
    grid-column: 1 / -1;
  }

  .salles-bande .salle-carte:first-child .salle-carte__image {
    aspect-ratio: 16 / 8;
  }

  .salle-carte__corps {
    padding: 0.65rem 0.75rem 0.75rem;
  }

  .salle-carte__corps h3 {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
  }

  .salle-carte__corps p {
    font-size: 0.72rem;
  }

  .pied-rubrique .bouton,
  .marge-basse {
    margin-bottom: var(--esp-2);
  }

  /* Pages de salles : repères compacts, texte justifié et aéré, un seul slider de photos (la photo de présentation y est), portes resserrées */
  .reperes {
    margin: var(--esp-2) var(--esp-3) 0;
  }

  .repere {
    padding: 0.75rem 0.5rem;
  }

  .repere__valeur {
    font-size: 1.35rem;
  }

  .repere__libelle {
    margin-top: 0.25rem;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .presentation {
    margin: var(--esp-3) var(--esp-3) var(--esp-2);
  }

  .presentation p {
    font-size: 0.95rem;
    line-height: 1.85;
    text-align: justify;
    text-wrap: pretty;
  }

  .presentation__photo {
    display: none;
  }

  .rail--galerie .rail__barre {
    display: none;
  }

  .galerie {
    margin: 0 var(--esp-3) var(--esp-2);
  }

  .galerie__cadre {
    flex-basis: 84%;
  }

  .visionneuse[open] {
    grid-template-columns: 2.6rem 1fr 2.6rem;
  }

  .visionneuse__fleche {
    width: 2rem;
    height: 2rem;
  }

  .visionneuse__cadre img {
    max-height: 70vh;
  }

  .portes {
    gap: 0.6rem;
    margin: 0 var(--esp-3);
  }

  .porte {
    padding: var(--esp-2);
  }

  .porte p {
    margin-bottom: var(--esp-2);
  }

  /* Spectacles : agenda resserré, bande Grande Salle compacte */
  .rail--mois .rail__barre {
    margin-top: var(--esp-3);
  }

  .rail--mois+.rail--mois .rail__barre {
    margin-top: var(--esp-2);
  }

  .rail--mois .cartes--rail {
    margin-top: 0.6rem;
  }

  .bande-image__visuel {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .bande-image__texte {
    padding: var(--esp-2) var(--esp-3) var(--esp-3);
  }

  .bande-image__texte h2 {
    font-size: 1.3rem;
    margin: 0.3rem 0 0.5rem;
  }

  .bande-image__texte p {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .bande-image__texte .bouton {
    width: 100%;
    padding: 0.65rem 0.6rem;
    text-align: center;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .titre-section+.bande-image {
    margin-top: 0;
  }

  /* Visites : bandeaux compacts, pastilles alignées sur deux lignes au plus, textes justifiés, boutons pleine largeur, Groupes en colonne */
  .bande-experience {
    margin: var(--esp-2) var(--esp-3);
  }

  .bande-experience__visuel {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .bande-experience__texte {
    padding: var(--esp-2) var(--esp-3) var(--esp-3);
  }

  .bande-experience__texte h2 {
    font-size: 1.3rem;
    margin: 0.3rem 0 0.5rem;
  }

  .bande-experience__texte p {
    max-width: none;
    font-size: 0.92rem;
    line-height: 1.65;
    text-align: justify;
    text-wrap: pretty;
  }

  .bande-experience__cles {
    gap: 0.35rem;
    margin-bottom: var(--esp-2);
  }

  .bande-experience__cles span {
    padding: 0.28rem 0.5rem;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }

  .bande-experience__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .bande-experience__actions .bouton {
    margin: 0;
    padding: 0.65rem 0.5rem;
    text-align: center;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .bande-experience__play {
    grid-column: 1 / -1;
    justify-content: center;
    padding: 0.6rem 0.9rem;
  }

  .bande-experience__details-texte {
    padding-top: var(--esp-2);
    max-width: none;
  }

  .bande-experience__details-texte p {
    font-size: 0.88rem;
  }

  .bande-groupes {
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-2);
    margin: var(--esp-3) var(--esp-3) var(--esp-2);
    padding: var(--esp-3);
  }

  .bande-groupes h2 {
    font-size: 1.2rem;
  }

  .bande-groupes p {
    max-width: none;
    font-size: 0.9rem;
    line-height: 1.65;
    text-align: justify;
    text-wrap: pretty;
  }

  .bande-groupes .bouton {
    text-align: center;
  }

  .page-visites .separateur {
    margin-bottom: var(--esp-2);
  }

  /* Pied de page mobile : colonne centrée sous la couronne, deux niveaux par lien, filets, mention © */
  .site-footer {
    margin-top: var(--esp-3);
    padding: var(--esp-3) var(--esp-3) var(--esp-2);
    text-align: center;
  }

  .site-footer::before {
    content: "";
    display: block;
    width: 2rem;
    height: 1.4rem;
    margin: 0 auto 0.5rem;
    background: url("../images/couronne-rex.png") center / contain no-repeat;
    opacity: 0.9;
  }

  .site-footer__principal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .site-footer__principal a:nth-child(n) {
    text-align: center;
  }

  /* font-size 0 sur le lien : le tiret (texte nu entre les deux spans) disparaît, les deux niveaux gardent leur corps */
  .site-footer__principal a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0.7rem 0;
    border-top: 1px solid var(--c-bord);
    font-size: 0;
  }

  .site-footer__principal a:first-of-type {
    border-top: 0;
  }

  .site-footer__titre {
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    color: var(--c-ivoire);
  }

  .site-footer__sous {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    color: var(--c-gris);
  }

  .site-footer__legal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: .2rem;
    padding-top: .2rem;
  }

  .site-footer__legal a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .55rem .4rem;
    border-bottom: 1px solid var(--c-bord);
    font-size: .54rem;
    line-height: 1.45;
  }

  .site-footer__mention {
    width: 100%;
    margin: .7rem 0 0;
    padding-top: .75rem;
    color: var(--c-muet);
  }

  .site-footer__webam {
    margin-left: .7rem;
    padding-left: .7rem;
  }

  /* Rails sur mobile : titres un peu plus compacts, flèche des fiches masquée pour laisser la place aux mots longs */
  .cartes--rail .carte__titre {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
  }

  .cartes--rail .carte__fleche {
    display: none;
  }

  .cartes--rail .carte__categorie {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
  }

  .cartes--rail .carte__libelle {
    overflow-wrap: break-word;
  }

  .carte--temps-fort .carte__date {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
  }

  .bande-annonce {
    width: calc(100vw - 1.5rem);
  }

  .hero-slider .hero__texte {
    padding-bottom: 5.25rem;
  }

  .hero-slider--volets .hero-slider__commandes {
    position: static;
    margin: 0 var(--esp-3) var(--esp-3);
  }

  .seances-carres {
    margin-inline: var(--esp-3);
  }

  .seance-carre {
    flex-basis: min(18rem, calc(100vw - var(--esp-3) - var(--esp-3)));
    width: min(18rem, calc(100vw - var(--esp-3) - var(--esp-3)));
    min-height: 5.25rem;
    height: auto;
  }

  .seance-carre__l2 {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .seance-carre__format {
    min-width: 0;
    line-height: 1.35;
  }
}

@media (min-width: 768px) {
  .bande-image {
    grid-template-columns: 1.1fr 1fr;
  }

  .bande-experience {
    grid-template-columns: 1.05fr 1fr;
  }

  .bande-experience__visuel {
    order: 2;
    min-height: 18rem;
    -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
    mask-image: linear-gradient(to left, #000 45%, transparent 100%);
  }

  .bande-experience--inverse {
    grid-template-columns: 1fr 1.05fr;
  }

  .bande-experience--inverse .bande-experience__visuel {
    order: 0;
    -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 100%);
    mask-image: linear-gradient(to right, #000 45%, transparent 100%);
  }

  .bande-experience__texte {
    padding: var(--esp-4);
    align-self: center;
  }

  .bande-image__visuel {
    order: 2;
    -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
    mask-image: linear-gradient(to left, #000 45%, transparent 100%);
  }

  .bande-image__visuel--responsive {
    background-image: var(--band-image-desktop);
  }

  .salles-bande {
    grid-template-columns: repeat(5, 1fr);
  }

  .cartes--rail {
    --visibles: 3.35;
  }

  .rail__fleche {
    display: inline-flex;
  }

  .rail:not(.rail--defilable) .rail__fleche {
    display: none;
  }

  .hero--accueil {
    min-height: 60vh;
  }

  .hero-slider {
    min-height: 60vh;
  }

  .hero-slider--volets {
    min-height: 0;
  }

  .hero-volets {
    grid-template-columns: minmax(22rem, 32%) 1fr;
    min-height: 62vh;
  }

  .hero-volets__texte .titre-hero {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  }

  .hero-volets__texte .accroche {
    max-width: 38ch;
  }

  /* Le texte part du bord de l'écran (pleine largeur), pas de la colonne de contenu : plus de place pour le visuel */
  .hero-volets__texte {
    padding: var(--esp-4) var(--esp-2) 4.5rem clamp(1.5rem, 3.5vw, 3.25rem);
  }

  .hero-volets__visuel {
    order: 0;
    aspect-ratio: auto;
    min-height: 100%;
  }

  .hero-volets__visuel .hero__fond,
  .hero-volets__video,
  .hero-volets__youtube {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%);
    mask-image: linear-gradient(to right, transparent 0%, #000 11%);
  }
}

/* 6. Pages
   ========================================================================== */
.page-boutique .titre-hero {
  letter-spacing: 0.14em;
}

/* Informations pratiques et contact */
.hero--infos {
  --hero-teinte-1: #3A2E18;
  --hero-teinte-2: #171108;
}

.infos-section {
  margin-block: var(--esp-5);
}

.raccourcis {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  gap: 0.45rem;
  margin: var(--esp-3);
  padding: 0.6rem;
  overflow-x: auto;
  border: 1px solid var(--c-bord);
  background: rgba(17, 16, 9, 0.96);
  scrollbar-width: thin;
}

.raccourcis a {
  flex: 0 0 auto;
  padding: 0.45rem 0.75rem;
  border: 1px solid transparent;
  color: var(--c-gris);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.raccourcis a:hover,
.raccourcis a:focus-visible {
  border-color: var(--c-or);
  color: var(--c-ivoire);
}

.acces {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-3);
}

.acces__carte {
  display: flex;
  min-height: 15rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--esp-3);
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
  text-align: center;
}

.acces__carte h3 {
  display: flex;
  min-height: 4.5625rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  color: var(--c-ivoire);
  font-family: var(--f-texte);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.acces__logo {
  width: auto;
  height: 2.75rem;
  object-fit: contain;
}

.acces__carte p {
  margin: var(--esp-2) 0;
  color: var(--c-gris);
  line-height: 1.65;
}

.acces__metro {
  min-height: 4.5rem;
}

.badge-ligne {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  margin-inline: 0.15rem;
  place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 500;
}

.promo-rouge {
  display: inline-block;
  margin-bottom: var(--esp-2);
  color: #E36A70;
  font-family: var(--f-titre);
  font-size: 1.4rem;
}

.acces__carte .bouton {
  margin-top: auto;
}

.bouton--maps {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.bouton--maps img {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
}

.tarifs {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-3);
}

.tarif-carte {
  min-width: 0;
  padding: var(--esp-3);
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
}

.tarif-carte h3 {
  min-height: 2.6rem;
  margin-bottom: var(--esp-2);
  color: var(--c-or);
  font-family: var(--f-texte);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tarif-carte__contenu {
  color: var(--c-gris);
  font-size: 0.82rem;
  line-height: 1.65;
  white-space: pre-line;
}

.tarif-notes {
  max-width: 58rem;
  margin: var(--esp-3) auto;
  padding: var(--esp-3);
  border-left: 2px solid var(--c-or);
  background: var(--c-carte);
  color: var(--c-gris);
}

.intro--large {
  max-width: 58rem;
}

.intro a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.faq {
  display: grid;
  gap: 0.65rem;
  max-width: 58rem;
  margin: var(--esp-3) auto;
  padding-inline: var(--esp-3);
}

.faq details {
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
}

.faq details[open] {
  border-color: var(--c-bord-clair);
}

.faq summary {
  position: relative;
  padding: 1rem 3.2rem 1rem 1.2rem;
  color: var(--c-ivoire);
  cursor: pointer;
  font-family: var(--f-titre);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  position: absolute;
  top: 0.65rem;
  right: 1.1rem;
  content: "+";
  color: var(--c-or);
  font-size: 1.45rem;
}

.faq details[open] summary::after {
  content: "−";
}

.faq__answer {
  padding: 0 1.2rem 1.2rem;
  color: var(--c-gris);
  font-size: 0.9rem;
  line-height: 1.75;
}

.faq__answer> :first-child {
  margin-top: 0;
}

.faq__answer> :last-child {
  margin-bottom: 0;
}

.faq__answer li+li {
  margin-top: 0.65rem;
}

.contact-bloc {
  max-width: 58rem;
  margin-inline: auto;
  padding-inline: var(--esp-3);
}

.contact-bloc__intro {
  max-width: 42rem;
  margin: 0 auto var(--esp-3);
  color: var(--c-gris);
  text-align: center;
}

.formulaire {
  display: grid;
  gap: var(--esp-2);
  padding: clamp(1.2rem, 4vw, 2.5rem);
  border: 1px solid var(--c-bord-clair);
  background: var(--c-carte);
}

.champ {
  display: grid;
  gap: 0.4rem;
}

.champ label {
  color: var(--c-champagne);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.formulaire input,
.formulaire select,
.formulaire textarea {
  width: 100%;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--c-bord-clair);
  border-radius: 0;
  background: var(--c-noir);
  color: var(--c-creme);
  font: inherit;
}

.formulaire textarea {
  min-height: 10rem;
  resize: vertical;
}

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  border-color: var(--c-or);
  outline: 0;
}

.champs-demi {
  display: grid;
  gap: var(--esp-2);
}

.formulaire__note {
  margin: 0;
  color: var(--c-muet);
  font-size: 0.76rem;
}

.formulaire .bouton {
  justify-self: start;
}

/* Formulaires publics et campagnes — sans framework CSS */
.page-formulaire {
  width: min(calc(100% - 2rem), 62rem);
  margin-inline: auto;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.page-formulaire__entete {
  max-width: 48rem;
  margin: 0 auto clamp(1.8rem, 5vw, 3rem);
  text-align: center;
}

.page-formulaire__entete::after {
  display: block;
  width: 3.25rem;
  height: 1px;
  margin: 1.5rem auto 0;
  background: var(--c-or);
  content: "";
}

.page-formulaire__entete h1,
.confirmation-campagne h1,
.confirmation-campagne h2 {
  margin: .45rem 0 1rem;
  color: var(--c-ivoire);
  font-size: clamp(2rem, 6vw, 3.6rem);
}

.page-formulaire__intro {
  max-width: 42rem;
  margin-inline: auto;
  color: var(--c-gris);
  line-height: 1.85;
}

.page-formulaire__intro> :last-child {
  margin-bottom: 0;
}

.page-formulaire .alerte {
  max-width: 52rem;
  margin: 0 auto var(--esp-2);
}

.formulaire--public {
  max-width: 52rem;
  margin-inline: auto;
  background:
    linear-gradient(135deg, rgba(185, 155, 94, .08), transparent 42%),
    var(--c-carte);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .28);
}

.formulaire--compact {
  max-width: 32rem;
}

.formulaire__grille {
  display: grid;
  gap: var(--esp-2);
}

.formulaire--public .bouton {
  min-height: 3rem;
  justify-content: center;
  margin-top: .35rem;
}

.confirmation-campagne {
  max-width: 42rem;
  margin-inline: auto;
  padding: clamp(2rem, 7vw, 4rem);
  border: 1px solid var(--c-bord-clair);
  background:
    radial-gradient(circle at 50% 0, rgba(185, 155, 94, .15), transparent 45%),
    var(--c-carte);
  text-align: center;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .28);
}

.confirmation-campagne__icone {
  display: grid;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  place-items: center;
  border: 1px solid var(--c-or);
  border-radius: 50%;
  color: var(--c-or);
  font-size: 1.45rem;
}

.confirmation-campagne__gain {
  color: var(--c-champagne);
  font-family: var(--f-titre);
  font-size: clamp(1.35rem, 4vw, 2rem);
}

.confirmation-campagne .bouton {
  margin-top: 1rem;
}

/* En-tête volontairement minimal des campagnes, sondages et formulaires dédiés */
.campagne-header {
  display: flex;
  min-height: 6rem;
  align-items: center;
  justify-content: space-between;
  padding: .8rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--c-bord);
  background: rgba(11, 11, 11, .96);
}

.campagne-header__logo {
  display: block;
}

.campagne-header__logo img {
  width: 42px;
  height: auto;
}

.campagne-header__langues {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-muet);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
}

.campagne-header__langues a {
  color: var(--c-gris);
}

.campagne-header__langues a:hover,
.campagne-header__langues a.actif {
  color: var(--c-champagne);
}

.campagne-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.5rem;
  padding: 1.25rem 1rem;
  border-top: 1px solid var(--c-bord);
  color: var(--c-muet);
  font-size: .72rem;
  letter-spacing: .08em;
  text-align: center;
}

.campagne-footer a {
  color: var(--c-gris);
}

.campagne-footer a:hover {
  color: var(--c-champagne);
}

/* Roue NFT — parcours historique restauré sans Bootstrap */
.nft-wheel-page {
  min-height: calc(100vh - 10rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: radial-gradient(circle at 50% 15%, #1a1a1a, #0b0b0b 65%, #000);
}

.nft-wheel-card {
  width: min(100%, 45rem);
  margin-inline: auto;
  padding: clamp(1rem, 4vw, 1.6rem);
  border: 1px solid rgba(242, 233, 209, .18);
  border-radius: 1.1rem;
  background: rgba(0, 0, 0, .55);
  box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, .6);
}

.nft-wheel-card__header {
  text-align: center;
}

.nft-wheel-card__header h1 {
  margin: 0;
  color: var(--c-ivoire);
  font-size: clamp(1.65rem, 6vw, 2.75rem);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nft-wheel-card__header p {
  margin: .35rem 0 0;
  color: var(--c-gris);
}

.nft-wheel-card .alerte {
  margin: var(--esp-2) 0;
}

.nft-wheel-stage {
  position: relative;
  width: min(100%, 21.25rem);
  aspect-ratio: 340 / 380;
  margin: 1.1rem auto .4rem;
}

.nft-wheel-pointer {
  position: absolute;
  z-index: 5;
  top: -.35rem;
  left: 50%;
  width: 0;
  height: 0;
  border-right: .9rem solid transparent;
  border-bottom: 1.8rem solid #d7b35a;
  border-left: .9rem solid transparent;
  filter: drop-shadow(0 .4rem .65rem rgba(0, 0, 0, .6));
  transform: translateX(-50%);
}

.nft-wheel-pointer::after {
  position: absolute;
  top: .4rem;
  left: -.4rem;
  width: .8rem;
  height: .8rem;
  border: 1px solid rgba(215, 179, 90, .9);
  background: var(--c-noir);
  content: "";
  transform: rotate(45deg);
}

.nft-wheel-shell {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(215, 179, 90, .45);
  border-radius: 50%;
  background: radial-gradient(circle, #111, #050505 60%, #000);
  box-shadow: inset 0 0 0 .65rem rgba(215, 179, 90, .08), 0 1.1rem 2.5rem rgba(0, 0, 0, .75);
  transform: translateX(-50%);
}

.nft-wheel {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.nft-wheel.est-en-rotation {
  animation: nft-wheel-loading 1.2s linear infinite;
}

@keyframes nft-wheel-loading {
  to {
    transform: rotate(720deg);
  }
}

.nft-wheel-cap {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  width: 4.65rem;
  height: 4.65rem;
  place-items: center;
  border: 2px solid rgba(215, 179, 90, .85);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .18), transparent 45%), radial-gradient(circle, #2a2418, #0b0b0b 70%);
  box-shadow: inset 0 0 0 .4rem rgba(215, 179, 90, .14), 0 .6rem 1.25rem rgba(0, 0, 0, .7);
  transform: translate(-50%, -50%);
}

.nft-wheel-cap img {
  width: 2.75rem;
  height: auto;
}

.nft-wheel-form {
  display: grid;
  gap: var(--esp-2);
  max-width: 36rem;
  margin: var(--esp-2) auto 0;
  align-items: end;
}

.nft-wheel-email {
  display: flex;
}

.nft-wheel-email span {
  display: grid;
  min-width: 2.75rem;
  place-items: center;
  border: 1px solid var(--c-bord-clair);
  border-right: 0;
  background: var(--c-sable);
  color: var(--c-noir);
}

.nft-wheel-email input {
  width: 100%;
}

.nft-wheel-form .bouton {
  min-height: 3rem;
  justify-content: center;
}

.nft-wheel-remaining {
  margin: var(--esp-2) 0 0;
  color: var(--c-gris);
  font-size: .82rem;
  text-align: center;
}

.nft-wheel-result {
  margin-top: var(--esp-2);
  padding: var(--esp-3);
  border: 1px solid rgba(215, 179, 90, .35);
  border-radius: 1rem;
  background: rgba(0, 0, 0, .35);
  text-align: center;
}

.nft-wheel-result.est-cache {
  display: none;
}

.nft-wheel-result h2 {
  color: var(--c-ivoire);
  font-size: clamp(1.4rem, 5vw, 2rem);
}

.nft-wheel-result__qr {
  width: min(100%, 20rem);
  margin: var(--esp-3) auto var(--esp-2);
}

.nft-wheel-result__note {
  margin: var(--esp-2) 0 0;
  color: var(--c-gris);
}

@media (min-width: 700px) {
  .nft-wheel-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .nft-wheel-form .bouton {
    min-width: 14rem;
  }
}

/* Utilitaires légers pour les quelques écrans historiques du front */
.centre {
  text-align: center;
}

.image-responsive {
  width: auto;
  max-width: 100%;
  height: auto;
}

.image-centree {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.bandeau-page {
  width: 100%;
}

/* Politique de confidentialité */
.privacy-page {
  width: min(calc(100% - 2rem), 54rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 4rem);
  color: var(--c-creme);
  text-align: left;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.privacy-page__header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.privacy-page h1 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.2;
}

.privacy-page__section {
  scroll-margin-top: 7rem;
}

.privacy-page__section+.privacy-page__section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-bord-clair);
}

.privacy-page h2 {
  margin: 0 0 1rem;
  color: var(--c-champagne);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  line-height: 1.4;
}

.privacy-page p {
  margin: 0 0 1rem;
}

.privacy-page ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  list-style: disc;
}

.privacy-page li+li {
  margin-top: 0.4rem;
}

.privacy-page a {
  color: var(--c-or-vif);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-page a:hover {
  color: var(--c-ivoire);
}

.privacy-page__section> :last-child {
  margin-bottom: 0;
}

.page-texte {
  width: min(calc(100% - 2rem), var(--largeur-site));
  margin-inline: auto;
  padding-block: var(--esp-4);
}

.grille-films {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--esp-3);
  width: min(calc(100% - 2rem), var(--largeur-site));
  margin-inline: auto;
  padding-block: var(--esp-4);
}

.grille-films__carte {
  min-width: 0;
}

.grille-films__carte .affiche-film {
  width: 100%;
}

/* Escape Game */
.page-escape__hero {
  min-height: clamp(30rem, 72vh, 48rem);
  background-position: center;
  background-size: cover;
}

.page-escape__voile {
  display: grid;
  min-height: inherit;
  align-items: center;
  padding: var(--esp-3);
  background: linear-gradient(90deg, rgba(11, 11, 11, .94), rgba(11, 11, 11, .2));
}

.page-escape__contenu {
  max-width: 42rem;
}

.page-escape__contenu h1 {
  margin-bottom: var(--esp-3);
  color: var(--c-ivoire);
  font-size: clamp(2.2rem, 7vw, 4.6rem);
}

.page-escape__contenu .bouton {
  margin-top: var(--esp-2);
}

.page-escape__video {
  width: min(calc(100% - 2rem), 64rem);
  margin: var(--esp-4) auto;
  aspect-ratio: 16 / 9;
}

.page-escape__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.page-escape__infos {
  width: min(calc(100% - 2rem), var(--largeur-site));
  margin-inline: auto;
  padding-bottom: var(--esp-5);
}

.page-escape__infos h2 {
  margin-bottom: var(--esp-2);
  color: var(--c-ivoire);
}

.page-escape__galerie {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.page-escape__galerie img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Toute une histoire */
.page-histoire .hero {
  min-height: clamp(25rem, 66vh, 42rem);
}

.page-histoire .hero__fond {
  background-position: center 42%;
}

.histoire-naissance {
  display: grid;
  gap: var(--esp-4);
  margin: var(--esp-5) var(--esp-3);
}

.histoire-naissance__texte {
  max-width: 38rem;
}

.histoire-naissance__texte h2 {
  margin: 0.55rem 0 var(--esp-3);
  color: var(--c-ivoire);
  font-size: clamp(1.8rem, 5vw, 3.1rem);
}

.histoire-naissance__texte p:not(.sur-titre) {
  color: var(--c-gris);
  font-size: 1rem;
  line-height: 1.85;
}

.histoire-naissance__texte blockquote {
  margin: var(--esp-3) 0;
  padding: var(--esp-2) var(--esp-3);
  border-left: 2px solid var(--c-or);
  color: var(--c-ivoire);
  font-family: var(--f-titre);
  font-size: 1.15rem;
}

.histoire-naissance__texte .histoire-naissance__repere {
  color: var(--c-champagne);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.histoire-naissance__galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.histoire-naissance__photo {
  min-height: 10rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
}

.histoire-naissance__photo:first-child {
  grid-column: 1 / -1;
  min-height: 16rem;
}

.histoire-naissance__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.2) saturate(0.78);
  transition: filter var(--transition), transform 500ms ease;
}

.histoire-naissance__photo:hover img {
  filter: sepia(0) saturate(1);
  transform: scale(1.02);
}

.histoire-panorama {
  position: relative;
  margin: var(--esp-5) var(--esp-3);
  overflow: hidden;
  border-block: 1px solid var(--c-bord-clair);
}

.histoire-panorama img {
  width: 100%;
  min-height: 18rem;
  max-height: 38rem;
  object-fit: cover;
}

.histoire-panorama::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 11, .45), transparent 45%, rgba(11, 11, 11, .22));
}

.histoire-chronologie {
  margin-block: var(--esp-5);
}

.histoire-frise {
  position: relative;
  max-width: 64rem;
  margin: var(--esp-4) auto;
  padding: 0 var(--esp-3);
  list-style: none;
}

.histoire-frise::before {
  position: absolute;
  top: 0.7rem;
  bottom: 0;
  left: calc(var(--esp-3) + 3.7rem);
  width: 1px;
  content: "";
  background: linear-gradient(var(--c-or), var(--c-bord));
}

.histoire-frise__etape {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--esp-3);
  min-height: 8rem;
  padding-bottom: var(--esp-4);
}

.histoire-frise__annee {
  position: relative;
  z-index: 1;
  align-self: start;
  padding: 0.28rem 0;
  border: 1px solid var(--c-or);
  background: var(--c-noir);
  color: var(--c-or);
  font-family: var(--f-titre);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: center;
}

.histoire-frise__contenu {
  max-width: 42rem;
}

.histoire-frise__contenu p {
  margin: 0;
  color: var(--c-creme);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.7;
}

.histoire-frise__contenu p+p {
  margin-top: var(--esp-2);
  color: var(--c-gris);
  font-size: 1rem;
}

.histoire-frise__contenu a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.histoire-frise__galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: var(--esp-3);
}

.histoire-frise__galerie img {
  width: 100%;
  height: 100%;
  min-height: 11rem;
  max-height: 23rem;
  border: 1px solid var(--c-bord);
  object-fit: cover;
}

.histoire-frise__videos {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.histoire-frise__videos iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--c-bord-clair);
}

.histoire-panorama--final figcaption {
  position: absolute;
  z-index: 1;
  right: var(--esp-3);
  bottom: var(--esp-3);
  max-width: 22rem;
  color: var(--c-ivoire);
  font-family: var(--f-titre);
  font-size: clamp(1.25rem, 3.5vw, 2rem);
  text-align: right;
}

.histoire-evenements {
  margin-block: var(--esp-5);
}

.histoire-evenements__grille {
  display: grid;
  gap: var(--esp-3);
  margin: var(--esp-3);
}

.histoire-evenement {
  overflow: hidden;
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
}

.histoire-evenement>img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.histoire-evenement__corps {
  padding: var(--esp-3);
}

.histoire-evenement h3 {
  color: var(--c-ivoire);
  font-size: 1.35rem;
}

.histoire-evenement__description {
  margin: var(--esp-2) 0;
  color: var(--c-gris);
}

.histoire-evenement__description> :first-child {
  margin-top: 0;
}

.histoire-evenement__description> :last-child {
  margin-bottom: 0;
}

.histoire-evenement--masque {
  display: none;
}

.histoire-evenements__grille--ouverte .histoire-evenement--masque {
  display: block;
}

.histoire-evenements__actions {
  display: flex;
  justify-content: center;
  margin: var(--esp-3);
}

/* Toute une histoire : composition éditoriale de la page historique d'origine,
   adaptée au fond et à la typographie du nouveau site. */
.histoire-complete {
  margin: var(--esp-4) var(--esp-3) var(--esp-5);
}

.histoire-complete__periode {
  display: grid;
  gap: var(--esp-3);
  max-width: 70rem;
  margin: 0 auto;
  padding: var(--esp-4) 0;
  border-bottom: 1px solid var(--c-bord);
}

.histoire-complete__dates h2 {
  margin: var(--esp-3) 0 0.4rem;
  color: var(--c-or-vif);
  font-family: var(--f-titre);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
}

.histoire-complete__dates h2:first-child {
  margin-top: 0;
}

.histoire-complete__dates p {
  color: var(--c-champagne);
  font-weight: 600;
  line-height: 1.65;
}

.histoire-complete__recit p,
.histoire-complete__suite p {
  color: var(--c-creme);
  line-height: 1.8;
}

.histoire-complete__recit p+p,
.histoire-complete__suite p+p {
  margin-top: var(--esp-3);
}

.histoire-complete__recit a,
.histoire-complete__suite a {
  color: var(--c-or-vif);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.histoire-complete__suite {
  grid-column: 1 / -1;
}

.histoire-complete__large {
  max-width: 70rem;
  margin: var(--esp-3) auto;
}

.histoire-complete__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-bord-clair);
}

.histoire-complete__galerie {
  display: grid;
  gap: 0.65rem;
}

.histoire-complete__galerie img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
  border: 1px solid var(--c-bord-clair);
}

.histoire-complete__galerie--construction {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 70rem;
  margin: var(--esp-3) auto var(--esp-4);
}

.histoire-complete__galerie--construction img:first-child {
  grid-column: 1 / -1;
}

.histoire-complete__galerie--deux {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--esp-3);
}

.histoire-complete__galerie--trois {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--esp-3);
}

.histoire-complete__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--c-bord-clair);
}

.histoire-complete__panorama {
  max-width: 100%;
  margin: var(--esp-4) calc(var(--esp-3) * -1);
}

.histoire-complete__panorama img {
  display: block;
  width: 100%;
  max-height: 44rem;
  object-fit: cover;
  border-block: 1px solid var(--c-bord-clair);
}

@media (min-width: 768px) {
  .histoire-complete__periode {
    grid-template-columns: minmax(13rem, 0.34fr) minmax(0, 0.66fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .histoire-complete__periode--ouverture {
    padding-top: var(--esp-5);
  }

  .histoire-complete__galerie--construction {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .histoire-complete__galerie--construction img:first-child {
    grid-column: auto;
  }

  .histoire-complete__galerie--construction img {
    min-height: 15rem;
  }

  .histoire-complete__panorama {
    margin-inline: calc(var(--esp-3) * -1);
  }
}

@media (max-width: 767px) {
  .histoire-complete {
    margin-inline: 1rem;
  }

  .histoire-complete__galerie--trois {
    grid-template-columns: 1fr;
  }

  .histoire-complete__galerie--trois img {
    min-height: 0;
  }

  .histoire-complete__panorama {
    margin-inline: -1rem;
  }
}

/* 7. Utilitaires
   ========================================================================== */
.centre {
  text-align: center;
}

.marge-basse {
  margin-bottom: var(--esp-4);
}

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

/* 8. Responsive
   ========================================================================== */
@media (max-width: 1023px) {

  /* Menu plein écran : logo en haut, rubriques au centre, billetteries et Infos pratiques dessous, FR · EN tout en bas en face du logo */
  .nav-extra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-top: var(--esp-4);
  }

  .nav-extra__billetteries {
    display: flex;
    gap: 0.5rem 1.6rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-extra__billetteries a {
    color: var(--c-or);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .nav-extra__liens-pratiques {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    justify-content: center;
  }

  .nav-extra__liens-pratiques a {
    color: var(--c-champagne);
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .nav-extra__infos {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-muet);
  }

  .nav-principale {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--c-noir);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.1rem var(--esp-3) 1.4rem;
  }

  .nav-principale.est-ouverte {
    display: flex;
  }

  .nav-principale.est-ouverte {
    flex-direction: column;
  }

  /* Logo deux fois plus grand, descendu d'un tiers de l'espace qui le sépare des rubriques ; FR · EN reste en bas. Espaces 1 : 2 : 3. */
  .nav-principale__espace {
    display: block;
    flex: 1 1 0;
    min-height: 0.5rem;
  }

  .nav-principale__espace--milieu {
    flex-grow: 2;
  }

  .nav-principale__espace--bas {
    flex-grow: 3;
  }

  .nav-principale__logo {
    display: block;
  }

  .nav-principale__logo img {
    display: block;
    height: 6.8rem;
    width: auto;
  }

  .nav-principale ul {
    flex-direction: column;
    text-align: center;
    gap: 1.15rem;
  }

  .nav-principale a {
    font-size: 1rem;
  }

  .nav-langues {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-muet);
  }

  .nav-langues a {
    font-size: 0.7rem;
    color: var(--c-muet);
  }

  .nav-langues a[aria-current="true"] {
    color: var(--c-or);
  }
}

@media (min-width: 768px) {
  .formulaire__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .champ--large {
    grid-column: 1 / -1;
  }

  .page-escape__voile {
    padding-inline: max(var(--esp-4), calc((100vw - var(--largeur-site)) / 2));
  }

  .page-escape__galerie {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .seances-carres {
    flex-wrap: wrap;
    overflow: visible;
  }

  .seance-carre {
    flex-basis: 10.75rem;
    width: 10.75rem;
    min-height: 5.4rem;
    padding: 0.55rem 0.8rem 0.6rem;
  }

  .seance-carre__format {
    line-height: 1.4;
  }

  .bandeau-info {
    display: flex;
  }

  .bouton-burger {
    display: none;
  }

  .hero {
    min-height: 20rem;
  }

  .reperes {
    grid-template-columns: repeat(4, 1fr);
  }

  .presentation {
    grid-template-columns: 1.15fr 1fr;
  }

  .portes {
    grid-template-columns: repeat(3, 1fr);
  }

  .portes--quatre {
    grid-template-columns: repeat(2, 1fr);
  }

  .cartes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .produits {
    grid-template-columns: repeat(3, 1fr);
  }

  .tuiles-boutique {
    grid-template-columns: repeat(5, 1fr);
  }

  .galerie__cadre {
    flex-basis: 44%;
  }

  .fiche {
    grid-template-columns: minmax(0, 20rem) 1fr;
    align-items: start;
  }

  .experiences {
    grid-template-columns: repeat(3, 1fr);
  }

  .histoire-naissance {
    grid-template-columns: minmax(16rem, .8fr) minmax(24rem, 1.2fr);
    align-items: center;
  }

  .histoire-evenements__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .histoire-frise__videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tarifs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .champs-demi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cartes--rail {
    --visibles: 4.4;
  }

  .nav-extra {
    display: none;
  }

  .nav-principale__logo,
  .nav-principale__espace,
  .nav-langues {
    display: none;
  }

  .bouton-burger {
    display: none;
  }

  .site-header {
    padding: 1rem 2.875rem;
  }

  .raccourcis {
    top: 6rem;
  }

  .acces {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .site-header__recherche {
    display: flex;
  }

  .portes--quatre {
    grid-template-columns: repeat(4, 1fr);
  }

  .cartes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cartes--large {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .galerie__cadre {
    flex-basis: 32%;
  }
}

@media (min-width: 1440px) {
  .hero {
    min-height: 22rem;
  }
}

/* Infos pratiques — alignement sur la maquette client infos-pratiques.html */
.page-infos .raccourcis {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0 var(--esp-3) var(--esp-4);
  padding: 0;
  overflow: visible;
  border: 1px solid var(--c-bord);
  background: var(--c-bord);
}

.page-infos .raccourcis a {
  padding: 1.05rem 0.5rem 0.95rem;
  border: 0;
  background: var(--c-carte);
  color: var(--c-champagne);
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  text-align: center;
}

.page-infos .raccourcis a::after {
  display: block;
  margin-top: .3rem;
  color: var(--c-or);
  font-size: .8rem;
  content: "▾";
}

.page-infos .raccourcis a:hover,
.page-infos .raccourcis a:focus-visible {
  background: var(--c-or);
  color: #0B0B0B;
}

.page-infos .raccourcis a:hover::after,
.page-infos .raccourcis a:focus-visible::after {
  color: #0B0B0B;
}

.page-infos .acces {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  margin: var(--esp-3) var(--esp-3) var(--esp-4);
  border: 1px solid var(--c-bord);
  background: var(--c-bord);
}

.page-infos .acces__carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.3rem 1.2rem 1.2rem;
  background: var(--c-carte);
  text-align: center;
}

/* Tête de bloc : logo au dessus du titre, hauteur fixe pour que les quatre titres soient au même niveau */
.page-infos .acces__carte h3 {
  display: flex;
  width: 100%;
  min-height: 3.9rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  margin: 0 0 .7rem;
  color: var(--c-or);
  font-family: var(--f-texte);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.page-infos .acces__carte p {
  margin: 0 0 .15rem;
  color: var(--c-creme);
  font-size: .9rem;
  line-height: 1.7;
}

.page-infos .acces__metro {
  min-height: 0;
}

/* Le bouton (Maps ou Plus d'informations) se cale en bas : même niveau sur les quatre blocs */
.page-infos .acces__carte>.bouton,
.page-infos .acces__carte>.popinfo {
  margin-top: auto;
  padding-top: .9rem;
}

.page-infos .acces__carte>.bouton {
  margin-top: auto;
}

.page-infos .logo-couronne {
  width: auto;
  height: 26px;
  flex: none;
  object-fit: contain;
}

.page-infos img.logo-parking,
.page-infos img.logo-bus,
.page-infos img.logo-metro {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  object-fit: contain;
}

.page-infos .acces__parkings {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-infos .acces__parking {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .55rem 0;
}

.page-infos .acces__parking+.acces__parking {
  border-top: 1px solid var(--c-bord);
}

.page-infos .acces__parking-nom {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-champagne);
}

.page-infos .acces__parking-adresse {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--c-creme);
}

.page-infos .acces__parking-lien {
  font-size: .82rem;
  color: var(--c-or);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.page-infos .acces__parking-lien:hover {
  color: var(--c-ivoire);
}

.page-infos .metro-l1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
}

.page-infos .bouton--maps {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .8rem .42rem .5rem;
  white-space: nowrap;
}

.page-infos .acces__carte>.bouton--maps {
  min-height: 39px;
  align-items: center;
  justify-content: center;
  padding: .42rem .8rem .42rem .5rem;
  line-height: 1;
}

.page-infos .bouton--maps img {
  display: block;
  width: 21px;
  height: 21px;
  flex: none;
}

.page-infos .badge-ligne {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  font-size: .78rem;
}

.page-infos .promo-rouge {
  display: block;
  margin: .1rem 0 .55rem;
  color: #E2001A;
  font-size: 1rem;
  font-weight: 600;
}

.page-infos .popinfo {
  position: relative;
}

.page-infos .popinfo summary {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  padding: 0 .9rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-champagne);
  font-size: .68rem;
  letter-spacing: .22em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.page-infos .popinfo summary::-webkit-details-marker {
  display: none;
}

.page-infos .popinfo summary:hover,
.page-infos .popinfo[open] summary {
  border-color: var(--c-or);
  color: var(--c-or);
}

.page-infos .popinfo__panneau {
  position: absolute;
  z-index: 30;
  top: calc(100% + .6rem);
  right: 0;
  left: 0;
  min-width: 14rem;
  padding: .9rem 1rem;
  text-align: left;
  border: 1px solid var(--c-bord-clair);
  background: #14110B;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  color: var(--c-creme);
  font-size: .82rem;
  line-height: 1.7;
}

.page-infos .tarifs {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--esp-2);
  margin: var(--esp-3) var(--esp-3) var(--esp-2);
}

.page-infos .tarif-carte {
  padding: 1.2rem 1.3rem 1rem;
}

.page-infos .tarif-carte h3 {
  min-height: 0;
  margin: 0 0 .8rem;
  color: var(--c-ivoire);
  font-family: var(--f-titre);
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: none;
}

.page-infos .tarif-carte table {
  width: 100%;
  border-collapse: collapse;
}

.page-infos .tarif-carte td {
  padding: .42rem 0;
  border-top: 1px solid var(--c-bord);
  color: var(--c-creme);
  font-size: .85rem;
}

.page-infos .tarif-carte td:last-child {
  color: var(--c-champagne);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.page-infos .tarif-notes {
  max-width: 60rem;
  margin: 0 var(--esp-3) var(--esp-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-gris);
  font-size: .8rem;
  line-height: 1.75;
}

.page-infos .tarif-notes p {
  margin: 0 0 .9rem;
}

.page-infos .tarif-notes__titre {
  margin-bottom: .15rem;
  color: var(--c-champagne);
  letter-spacing: .06em;
}

.page-infos .faq {
  max-width: 56rem;
  margin: var(--esp-3) auto var(--esp-4);
  padding: 0 var(--esp-3);
}

.page-infos .faq details {
  margin-bottom: .6rem;
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
}

.page-infos .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.2rem;
  color: var(--c-ivoire);
  font-size: .9rem;
  letter-spacing: .03em;
  list-style: none;
  cursor: pointer;
}

.page-infos .faq summary::after {
  flex: none;
  color: var(--c-or);
  font-size: 1.1rem;
  content: "+";
}

.page-infos .faq details[open] summary::after {
  content: "–";
}

.page-infos .faq__answer {
  margin: 0;
  padding: 0 1.2rem 1.05rem;
  color: var(--c-creme);
  font-size: .87rem;
  line-height: 1.75;
}

.page-infos .faq__answer p {
  margin: 0;
}

.page-infos .texte-justifie {
  text-align: justify;
  hyphens: auto;
}

@media (max-width: 680px) {
  .page-infos .raccourcis {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-infos .popinfo__panneau {
    right: 0;
  }
}

.calendrier-page {
  padding: clamp(2rem, 5vw, 5rem) var(--esp-3);
}

.calendrier-page__jours {
  position: sticky;
  top: var(--hauteur-header, 72px);
  z-index: 5;
  margin: 0 calc(var(--esp-3) * -1) 2rem;
  padding: .8rem var(--esp-3);
  background: rgb(8 8 10 / .94);
  backdrop-filter: blur(12px);
}

/* Fiche film 2026 : lignes de séances lisibles et repères des salles premium. */
.fiche-film-mobile,
.fiche-film-mobile__nav,
.fiche-film-mobile__texte {
  display: none;
}

.page-film .seances-carres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: .65rem;
  overflow: visible;
}

.page-film .seance-carre {
  display: grid;
  grid-template-columns: 4.5rem minmax(4rem, 1fr) auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 4.6rem;
  padding: .55rem .8rem;
}

.page-film .seance-carre__l1 {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
}

.page-film .seance-carre__debut {
  font-size: 1.35rem;
  line-height: 1;
}

.page-film .seance-carre__fin {
  color: var(--c-gris);
  font-size: .62rem;
  white-space: nowrap;
}

.page-film .seance-carre__salle {
  width: 100%;
  min-height: 2.5rem;
}

.page-film .seance-carre__logo {
  width: min(100%, 7.5rem);
  height: 2.5rem;
  max-height: 2.5rem;
  mix-blend-mode: normal;
  object-fit: contain;
  object-position: left center;
}

.page-film .seance-carre__l2 {
  justify-content: flex-end;
}

.page-film .seance-carre__format,
.page-film .seance-carre__version,
.page-film .seance-carre__classification {
  padding: .28rem .38rem;
  border: 1px solid var(--c-bord-clair);
  line-height: 1;
  white-space: nowrap;
}

.legende-salles {
  display: flex;
  gap: 1rem;
  margin: .8rem var(--esp-3) var(--esp-3);
  overflow-x: auto;
  padding-bottom: .35rem;
  scrollbar-width: thin;
}

.legende-salles__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .55rem;
  color: var(--c-gris);
  font-size: .66rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

.legende-salles__logo {
  display: grid;
  width: 3.5rem;
  height: 1.75rem;
  place-items: center;
}

.legende-salles__logo img {
  display: block;
  max-width: 3.5rem;
  max-height: 1.75rem;
  object-fit: contain;
}

@media (max-width: 767px) {

  .page-film .bandeau-info,
  .page-film .site-header {
    display: none;
  }

  .page-film main {
    overflow: hidden;
  }

  .fiche--film-desktop {
    display: none;
  }

  .fiche-film-mobile,
  .fiche-film-mobile__nav,
  .fiche-film-mobile__texte {
    display: block;
  }

  .fiche-film-mobile__nav {
    display: flex;
    min-height: 3.75rem;
    align-items: center;
    justify-content: space-between;
    padding: .45rem 1rem;
    border-bottom: 1px solid var(--c-bord);
    background: #0b0b0b;
  }

  .fiche-film-mobile__nav>a {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    color: var(--c-ivoire);
    font-size: 1.55rem;
  }

  .fiche-film-mobile__nav svg {
    width: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
  }

  .fiche-film-mobile__nav .fiche-film-mobile__marque {
    width: auto;
  }

  .fiche-film-mobile__marque img {
    width: auto;
    height: 2.8rem;
    object-fit: contain;
  }

  .fiche-film-mobile {
    border-bottom: 1px solid var(--c-bord);
  }

  .fiche-film-mobile__visuel {
    position: relative;
    height: 12.5rem;
    overflow: visible;
    background: #111;
  }

  .fiche-film-mobile--video .fiche-film-mobile__visuel {
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .fiche-film-mobile--video .fiche-film-mobile__visuel::after {
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(transparent, #0b0b0b);
    content: "";
    pointer-events: none;
  }

  .fiche-film-mobile--video .fiche-film-mobile__visuel>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fiche-film-mobile__lecture {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: .55rem;
    color: #fff;
    text-shadow: 0 1px 10px #000;
  }

  .fiche-film-mobile__lecture span {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    padding-left: .2rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    font-size: 1.25rem;
  }

  .fiche-film-mobile__lecture b {
    font-size: .65rem;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .fiche-film-mobile__flou {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) brightness(.55);
    transform: scale(1.12);
  }

  .fiche-film-mobile__affiche {
    position: absolute;
    z-index: 2;
    bottom: -4.625rem;
    left: 1rem;
    width: 7.375rem;
    aspect-ratio: var(--ratio-affiche);
    border: 1px solid var(--c-bord-clair);
    object-fit: cover;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .65);
  }

  .fiche-film-mobile__identite {
    padding: .9rem 1rem 1.1rem;
  }

  .fiche-film-mobile--repli .fiche-film-mobile__identite {
    min-height: 8.4rem;
    padding-left: 9.35rem;
  }

  .fiche-film-mobile__identite h1 {
    margin: 0;
    color: var(--c-ivoire);
    font-family: var(--f-titre);
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.15;
  }

  .fiche-film-mobile__identite .fiche__infos {
    font-size: .64rem;
    line-height: 1.6;
  }

  .fiche-film-mobile__identite .fiche__equipe {
    font-size: .76rem;
    line-height: 1.55;
  }

  .fiche-film-mobile__reserver {
    width: 100%;
    margin-top: .9rem;
  }

  .fiche-film-mobile--repli .fiche__equipe {
    margin-left: -8.35rem;
    padding-top: .8rem;
  }

  .alerte-vente__contenu form {
    grid-template-columns: 1fr;
  }

  .page-film .titre-section {
    margin-top: 1.35rem;
  }

  .page-film .jours {
    margin-top: .5rem;
  }

  .page-film .seances-carres {
    grid-template-columns: 1fr;
    gap: .5rem;
    margin-top: .8rem;
  }

  .page-film .seance-carre {
    grid-template-columns: 3.75rem minmax(3.5rem, 1fr) auto;
    gap: .55rem;
    min-height: 4.15rem;
    padding: .45rem .6rem;
  }

  .page-film .seance-carre__debut {
    font-size: 1.2rem;
  }

  .page-film .seance-carre__salle {
    min-height: 2.5rem;
  }

  .page-film .seance-carre__logo {
    height: 2.25rem;
    max-height: 2.25rem;
  }

  .page-film .seance-carre__nom {
    font-size: .54rem;
    letter-spacing: .12em;
    white-space: normal;
  }

  .page-film .seance-carre__l2 {
    gap: .25rem;
  }

  .page-film .seance-carre__format,
  .page-film .seance-carre__version {
    padding: .22rem .28rem;
    font-size: .5rem;
    letter-spacing: .1em;
  }

  .legende-salles {
    gap: .75rem;
    margin: .7rem 1rem 1.4rem;
  }

  .legende-salles__item {
    gap: .4rem;
    font-size: .58rem;
  }

  .fiche-film-mobile__texte {
    margin: 0 1rem 1.5rem;
  }

  .fiche-film-mobile__texte .fiche__synopsis {
    margin-top: 0;
    font-size: .9rem;
    line-height: 1.75;
  }

  .fiche-programmation {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .fiche-programmation>.carte {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   9. Accueil 2026 — refonte validée le 7 septembre 2026 (voir CONSIGNES_HOME_2026-09-07)
   Ce bloc, placé en fin de feuille, prend le dessus sur les règles historiques qu'il remplace.
   ========================================================================== */

/* 9.1 Base : liens et boutons de la charte éclaircie */
a {
  color: var(--c-champagne);
}

a:hover {
  color: var(--c-or-vif);
}

.bouton {
  border-color: var(--c-bord-clair);
  color: var(--c-champagne);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.bouton:hover {
  border-color: var(--c-or);
  color: var(--c-or-vif);
}

.bouton--plein {
  background: var(--c-or);
  border-color: var(--c-or);
  color: var(--c-noir);
  font-weight: 500;
}

.bouton--plein:hover {
  background: var(--c-or-vif);
  border-color: var(--c-or-vif);
  color: var(--c-noir);
}

.accroche {
  color: var(--c-creme);
}

.sur-titre {
  color: var(--c-champagne);
}

/* 9.2 En-tête : mobile d'abord (barre de 72 px : Menu · logo · loupe), desktop dès 1024 px (logo au centre sur deux niveaux) */
.site-header {
  display: block;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
  background: rgba(11, 11, 11, 0.97);
  /* Un filtre sur ce parent limiterait le menu fixed à la hauteur du header. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header__cadre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 0.5rem;
  width: 100%;
  max-width: var(--largeur-site);
  margin: 0 auto;
  min-height: 4.5rem;
  padding: 0.35rem 0.75rem;
}

.site-header__logo {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: block;
}

.site-header__logo img {
  height: 3.25rem;
  width: auto;
}

.site-header__outils {
  display: none;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
  height: 2.25rem;
  font-size: 0.94rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-header__outils a {
  color: var(--c-champagne);
}

.site-header__outils a:hover {
  color: var(--c-or-vif);
}

.site-header__langues {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--c-gris);
  font-size: 0.94rem;
  letter-spacing: 0.14em;
}

.site-header__langues a {
  color: var(--c-gris);
}

.site-header__langues a[aria-current="true"] {
  color: var(--c-or-vif);
  font-weight: 500;
}

.site-header__recherche {
  display: flex;
  flex: 1;
  max-width: none;
  min-width: 0;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--c-bord-clair);
  background: var(--c-surface);
}

.site-header__recherche input {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.site-header__recherche input::placeholder {
  color: var(--c-gris);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
}

/* Sur mobile, la zone de gauche devient la barre de recherche dépliée sous l'en-tête (loupe) */
.site-header__outils--gauche {
  grid-column: 1 / -1;
  grid-row: 2;
  height: auto;
  padding: 0.55rem 0.35rem 0.6rem;
}

.site-header__outils--gauche.est-ouverte {
  display: flex;
}

.site-header__outils--gauche .site-header__langues {
  display: none;
}

.site-header__outils--droite {
  display: none;
}

.bouton-burger {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  z-index: 61;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0 0.3rem;
  color: var(--c-champagne);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.bouton-burger__icone {
  display: block;
  flex: 0 0 auto;
  color: var(--c-champagne);
}

.bouton-burger__libelle {
  width: auto;
  height: auto;
  background: none;
}

.bouton-loupe {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--c-champagne);
}

.bouton-loupe svg {
  width: 1.3rem;
  height: 1.3rem;
}

.bouton-loupe[aria-expanded="true"] {
  color: var(--c-or-vif);
}

/* Menu plein écran mobile et tablette : logo centré et croix à droite,
   rubriques centrées sans filet, soleil, liens secondaires en champagne, FR · EN, réseaux posés sur une lueur dorée. Tout tient sur un écran. */
@media (max-width: 1023px) {
  body.navigation-ouverte {
    overflow: hidden;
  }

  .bouton-burger {
    display: inline-flex;
  }

  .nav-principale {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 70;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 0.875rem 1.4rem 1.625rem;
    overflow-y: auto;
    background: radial-gradient(ellipse 85% 42% at 50% 100%, rgba(201, 165, 92, 0.16), transparent 70%), rgba(11, 11, 11, 0.98);
  }

  .nav-principale.est-ouverte {
    display: flex;
  }

  .nav-principale.est-ouverte .nav-principale__soleil {
    margin: 2rem auto;
  }

  .nav-principale__haut {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 5.75rem;
    margin-bottom: 0.625rem;
  }

  .nav-principale__logo {
    display: block;
    padding: 0;
  }

  .nav-principale__logo img {
    display: block;
    width: auto;
    height: 5.25rem;
  }

  .nav-principale__fermer {
    position: absolute;
    top: 50%;
    right: -0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    color: var(--c-champagne);
    font-size: 1.625rem;
    line-height: 1;
  }

  .nav-principale__espace {
    display: none;
  }

  .nav-principale .nav-principale__liste {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-principale__liste a {
    display: block;
    padding: 0.5rem 0.2rem;
    font-size: 1.06rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ivoire);
    text-align: center;
  }

  .nav-principale__liste a:hover,
  .nav-principale__liste a[aria-current="page"] {
    color: var(--c-or-vif);
  }

  .nav-principale__soleil {
    width: 100%;
    max-width: 21rem;
  }

  .nav-principale__soleil .separateur {
    margin: 0.35rem 0;
  }

  .nav-principale__soleil .separateur__motif img {
    height: 1.6rem;
  }

  .nav-extra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 0.2rem;
  }

  .nav-extra__liens-pratiques {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .nav-extra__liens-pratiques a {
    padding: 0.42rem 0.2rem;
    color: var(--c-champagne);
    font-size: 0.94rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .nav-langues {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    font-size: 1rem;
    letter-spacing: 0.14em;
    color: var(--c-gris);
  }

  .nav-langues a {
    color: var(--c-gris);
    font-size: 1rem;
    padding: 0.4rem 0.3rem;
  }

  .nav-langues a[aria-current="true"] {
    color: var(--c-or-vif);
    font-weight: 500;
  }

  .nav-principale__reseaux {
    margin-top: auto;
    padding-top: 1rem;
  }

  .nav-principale__reseaux .reseaux {
    margin: 0;
  }

  .nav-principale__reseaux .reseaux__liste {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
  }
}

/* Desktop : les deux listes de rubriques rejoignent la grille de l'en-tête de part et d'autre du logo */
@media (min-width: 1024px) {
  .site-header {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .site-header__cadre {
    grid-template-rows: auto auto;
    column-gap: clamp(3.5rem, 5.5vw, 7.6rem);
    row-gap: 0.55rem;
    min-height: 5.9375rem;
    padding: 0.5rem clamp(1.25rem, 4vw, 4rem) 0.55rem;
  }

  .site-header__logo {
    grid-row: 1 / span 2;
  }

  .site-header__logo img {
    height: 4.75rem;
  }

  .bouton-burger,
  .bouton-loupe {
    display: none;
  }

  .site-header__outils {
    display: flex;
  }

  .site-header__outils--gauche {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    padding: 0;
    height: 2.25rem;
  }

  .site-header__outils--gauche .site-header__langues {
    display: inline-flex;
  }

  .site-header__recherche {
    flex: 0 0 auto;
    width: 20.95rem;
  }

  .site-header__outils--droite {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .nav-principale {
    display: contents;
  }

  .nav-principale__haut,
  .nav-principale__logo,
  .nav-principale__soleil,
  .nav-extra,
  .nav-langues,
  .nav-principale__reseaux,
  .nav-principale__mobile {
    display: none;
  }

  .nav-principale__liste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-principale__liste--gauche {
    grid-column: 1;
    grid-row: 2;
    padding-left: 7rem;
  }

  .nav-principale__liste--droite {
    grid-column: 3;
    grid-row: 2;
    padding-right: 7rem;
  }

  .nav-principale__liste a {
    font-size: 1.125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ivoire);
    padding: 0 0 3px;
    border-bottom: 1px solid transparent;
  }

  .nav-principale__liste a:hover {
    color: var(--c-or-vif);
    border-bottom-color: var(--c-or);
  }

  .nav-principale__liste a[aria-current="page"] {
    color: var(--c-or-vif);
  }
}

@media (min-width: 1024px) and (max-width: 1380px) {
  .nav-principale__liste--gauche {
    padding-left: 2.25rem;
  }

  .nav-principale__liste--droite {
    padding-right: 2.25rem;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .site-header__logo img {
    height: 3.9rem;
  }

  .site-header__recherche {
    width: 15rem;
  }
}

/* 9.3 Héro pleine largeur : visuel 16/9 plafonné, texte dessous ; texte en surimpression à gauche à partir de 1500 px */
.hero-slider--pleine-largeur {
  min-height: 0;
  overflow: visible;
}

.hero-slider__scene {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.hero-slider__scene img {
  -webkit-user-drag: none;
}

.hero-slider--pleine-largeur .hero-slider__slide {
  position: absolute;
  inset: 0;
}

.hero-slider--pleine-largeur .hero-slider__slide.est-active {
  position: relative;
}

.hero-slider--pleine-largeur .hero-volets {
  display: block;
  min-height: 0;
}

.hero-slider--pleine-largeur .hero-volets__visuel {
  position: relative;
  order: 0;
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  background: var(--c-surface);
}

.hero-slider--pleine-largeur .hero-volets__visuel .hero__fond,
.hero-slider--pleine-largeur .hero-volets__video,
.hero-slider--pleine-largeur .hero-volets__youtube {
  -webkit-mask-image: none;
  mask-image: none;
}

.hero-slider--pleine-largeur .hero-volets__visuel .hero__fond {
  background-position: center 22%;
}

.hero-volets__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0) 55%, rgba(11, 11, 11, 0.55) 100%);
  pointer-events: none;
}

.hero-slider--pleine-largeur .hero-volets__texte {
  position: static;
  padding: 0.4rem var(--esp-3) 0.2rem;
}

.hero-slider__texte {
  display: none;
}

.hero-slider__texte.est-active {
  display: flex;
}

.hero-slider__texte--vide {
  padding: 0 !important;
}

.hero-volets__texte-cadre {
  max-width: var(--largeur-site);
  margin: 0 auto;
}

.hero-slider--pleine-largeur .hero__kick {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  color: var(--c-champagne);
  margin: 0.6rem 0 0.4rem;
}

.hero-slider--pleine-largeur .titre-hero {
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1.22;
  text-transform: none;
  margin: 0.3rem 0 0.5rem;
}

.hero-slider--pleine-largeur .accroche {
  max-width: 62ch;
  margin: 0 0 0.9rem;
  font-size: 0.97rem;
  letter-spacing: 0;
  color: var(--c-creme);
}

.hero-slider--pleine-largeur .hero__actions {
  margin-top: 0.2rem;
}

.hero-slider--pleine-largeur .hero-slider__fleche {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 4.9rem;
  height: auto;
  border: 0;
  background: linear-gradient(90deg, rgba(11, 11, 11, 0.55), rgba(11, 11, 11, 0));
  color: var(--c-champagne);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.hero-slider__fleche--gauche {
  left: 0;
}

.hero-slider__fleche--droite {
  right: 0;
  background: linear-gradient(270deg, rgba(11, 11, 11, 0.55), rgba(11, 11, 11, 0));
}

.hero-slider__fleche .chevron {
  transition: transform 0.2s ease, color 0.2s ease;
}

.hero-slider__fleche:hover .chevron,
.hero-slider__fleche:focus-visible .chevron {
  color: var(--c-or-vif);
}

.hero-slider__fleche--gauche:hover .chevron {
  transform: translateX(-4px);
}

.hero-slider__fleche--droite:hover .chevron {
  transform: translateX(4px);
}

.hero-slider--pleine-largeur .hero-slider__commandes {
  position: static;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0.75rem var(--esp-3) 0.125rem;
  opacity: 1;
}

.hero-slider--pleine-largeur .hero-slider__indicateurs {
  gap: 0.6rem;
}

.hero-slider--pleine-largeur .hero-slider__indicateur {
  width: 1.4rem;
  height: 3px;
  border: 0;
  border-radius: 0;
  background: var(--c-bord-clair);
}

.hero-slider--pleine-largeur .hero-slider__indicateur.est-actif {
  background: var(--c-or);
}

@media (min-width: 768px) and (max-width: 1499px) {
  .hero-slider--pleine-largeur .hero-volets__visuel {
    aspect-ratio: auto;
    height: min(58vh, 52vw);
    min-height: 16rem;
  }

  .hero-slider--pleine-largeur .hero-volets__voile {
    background: linear-gradient(180deg, rgba(11, 11, 11, 0.05) 55%, rgba(11, 11, 11, 0.72) 100%);
  }

  .hero-slider--pleine-largeur .hero-slider__fleche {
    display: flex;
  }

  .hero-slider--pleine-largeur .hero-slider__fleche {
    bottom: auto;
    height: min(58vh, 52vw);
    min-height: 16rem;
  }

  .hero-slider--pleine-largeur:hover .hero-slider__fleche,
  .hero-slider--pleine-largeur:focus-within .hero-slider__fleche {
    opacity: 1;
  }

  .hero-slider--pleine-largeur .hero-volets__texte {
    padding: 1.625rem var(--esp-3) 0.5rem;
  }

  .hero-slider--pleine-largeur .hero__kick {
    font-size: 0.84rem;
    letter-spacing: 0.3em;
  }

  .hero-slider--pleine-largeur .titre-hero {
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    letter-spacing: 0.06em;
    line-height: 1.18;
  }

  .hero-slider--pleine-largeur .accroche {
    font-size: 1.06rem;
  }

  .hero-slider--pleine-largeur .hero-slider__commandes {
    justify-content: flex-start;
    padding-top: 0.875rem;
    padding-bottom: 0.25rem;
  }

  .hero-slider--pleine-largeur .hero-slider__indicateur {
    width: 1.625rem;
  }
}

@media (min-width: 1500px) {
  .hero-slider--pleine-largeur .hero-slider__scene {
    height: min(72vh, 46vw);
  }

  .hero-slider--pleine-largeur .hero-slider__textes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: min(72vh, 46vw);
    pointer-events: none;
  }

  .hero-slider--pleine-largeur .hero-slider__slide,
  .hero-slider--pleine-largeur .hero-slider__slide.est-active {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .hero-slider--pleine-largeur .hero-volets {
    height: 100%;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero-slider--pleine-largeur .hero-volets__visuel {
    aspect-ratio: auto;
    height: 100%;
    min-height: 16rem;
  }

  .hero-slider--pleine-largeur .hero-slider__fleche {
    display: flex;
  }

  .hero-slider__scene:hover .hero-slider__fleche,
  .hero-slider__scene:focus-within .hero-slider__fleche {
    opacity: 1;
  }

  .hero-slider--pleine-largeur .hero__kick {
    font-size: 0.84rem;
    letter-spacing: 0.3em;
  }

  .hero-slider--pleine-largeur .titre-hero {
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    letter-spacing: 0.06em;
    line-height: 1.18;
  }

  .hero-slider--pleine-largeur .accroche {
    font-size: 1.06rem;
  }

  .hero-slider--pleine-largeur .hero-volets__texte {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 0 var(--esp-3) 2.75rem;
    pointer-events: none;
  }

  .hero-slider--pleine-largeur .hero-volets__texte-cadre {
    max-width: 40rem;
    margin: 0 auto 0 max(0px, calc((100% - var(--largeur-site)) / 2));
  }

  .hero-slider--pleine-largeur .hero-volets__texte-cadre>* {
    pointer-events: auto;
  }

  .hero-slider--pleine-largeur .hero-volets__voile {
    background: linear-gradient(90deg, rgba(11, 11, 11, 0.82) 0%, rgba(11, 11, 11, 0.25) 46%, rgba(11, 11, 11, 0) 70%), linear-gradient(180deg, rgba(11, 11, 11, 0) 55%, rgba(11, 11, 11, 0.55) 100%);
  }

  .hero-slider--pleine-largeur .hero-slider__commandes {
    justify-content: flex-start;
    margin-top: 0;
    padding-top: 0.875rem;
    padding-bottom: 0.25rem;
  }
}

/* 9.4 Séparateurs à motif et titres ornés */
.separateur {
  color: var(--c-or);
}

.separateur::before,
.separateur::after {
  background: var(--c-bord-clair);
}

.separateur--motif {
  gap: 0.8rem;
  margin: var(--esp-4) var(--esp-3) 0;
}

.separateur__motif {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.separateur__motif svg {
  flex: 0 0 auto;
}

.separateur__motif img {
  display: block;
  height: 2.75rem;
  width: auto;
}

@media (min-width: 768px) {
  .separateur__motif img {
    height: 3.5rem;
  }

  .separateur__motif {
    gap: 0.85rem;
  }
}

.titre-section {
  gap: clamp(0.8rem, 2vw, 1.9rem);
  margin: 1.2rem var(--esp-3) 1.4rem;
}

.titre-section h2 {
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  color: var(--c-ivoire);
}

.titre-section__ornement {
  display: block;
  height: 1.9rem;
  width: auto;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .titre-section {
    margin: 1.6rem var(--esp-3) 1.75rem;
  }

  .titre-section h2 {
    font-size: clamp(1.55rem, 2.2vw, 2.1rem);
    letter-spacing: 0.26em;
  }

  .titre-section__ornement {
    height: clamp(2.5rem, 3.4vw, 3.5rem);
  }
}

/* Cadre de la maquette d'accueil. La largeur maximale reste portée par
   .contenu ; son padding constitue la marge utile, y compris sur grand écran. */
.page-home .contenu {
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

.page-home .contenu>.separateur--motif,
.page-home .contenu>.titre-section,
.page-home .rail__barre,
.page-home .cartes--rail,
.page-home .salles-home,
.page-home .mises-avant {
  margin-inline: 0;
}

.page-home .contenu>.separateur--motif {
  margin-top: clamp(2.875rem, 5vw, 4.5rem);
}

.page-home .rail__cadre {
  margin-top: 0;
}

.page-home .rail--jour .rail__barre {
  margin-bottom: 1.375rem;
}

@media (max-width: 767px) {
  .page-home .contenu {
    padding-inline: 1.125rem;
  }

  .page-home .contenu>.separateur--motif {
    margin-top: 2.125rem;
  }

  .page-home .contenu>.titre-section {
    margin: 1.125rem -0.25rem 1.125rem;
  }

  .page-home .rail--jour .rail__barre {
    margin-bottom: 0;
    padding-bottom: 1rem;
  }
}

/* 9.5 Ligne des jours : style beta, une seule ligne, « Calendrier complet » en toutes lettres avec son picto en bout de ligne */
.jours {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  margin: var(--esp-2) var(--esp-3);
  overflow: hidden;
}

.jours>a,
.jours>span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-creme);
  font-size: 0.94rem;
  letter-spacing: 0.05em;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.jours .ferme {
  opacity: 0.4;
}

.jours .actif.ferme {
  border-color: var(--c-bord);
  background: transparent;
  color: var(--c-gris);
  font-weight: 400;
}

.jours.jours--glissants {
  overflow-x: auto;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  cursor: grab;
  user-select: none;
}

.jours.jours--glissants.est-saisie {
  cursor: grabbing;
}

.jours>[data-jour]:where(:not(.ferme):not(.actif)) {
  border-color: #fff;
  color: #fff;
}

.jours>a:hover {
  border-color: var(--c-or);
  color: var(--c-or-vif);
}

.jours .actif,
.jours>a.actif:hover {
  background: var(--c-or);
  border-color: var(--c-or);
  color: var(--c-noir);
  font-weight: 500;
}

.jours--programmation>[data-jour] {
  border-color: #fff;
  color: #fff;
  opacity: 1;
}

.jours--programmation>[data-jour].actif,
.jours--programmation>a[data-jour]:hover {
  background: var(--c-noir);
  border-color: var(--c-or);
  color: var(--c-or-vif);
  opacity: 1;
  font-weight: 400;
}

.jours .est-cache {
  display: none;
}

.jours__calendrier {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-left: auto;
  padding: 0 1rem;
  background: var(--c-noir);
  font-size: 0.94rem;
  letter-spacing: 0.05em;
  text-transform: none;
}

.jours__calendrier svg {
  width: 16px;
  height: 16px;
}

.jours>.jours__calendrier {
  border-color: #fff;
  color: #fff;
}

.jours>.jours__calendrier:hover {
  border-color: var(--c-or);
  color: var(--c-or-vif);
}

.jours>.jours__voir-plus {
  border-color: var(--c-or);
  color: var(--c-or-vif);
}

.jours__calendrier-texte {
  display: inline;
}

@media (max-width: 767px) {
  .jours {
    overflow-x: auto;
    margin: var(--esp-2) var(--esp-3) 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .jours::-webkit-scrollbar {
    display: none;
  }

  .jours>a,
  .jours>span {
    padding: 0 1rem;
    font-size: 0.94rem;
    letter-spacing: 0.05em;
  }

  .jours .actif {
    position: static;
    box-shadow: none;
  }

  .jours__calendrier {
    position: static;
    width: auto;
    padding: 0 1rem;
    box-shadow: none;
  }
}

.rail__barre {
  margin: 0 var(--esp-3);
}

/* 9.6 Fiches et rails : titres centrés sur deux lignes réservées, date épinglée en bas, chevrons contextuels aux bords, glisser souris */
.rail__cadre {
  position: relative;
  margin: 0.9rem 0 0;
}

.cartes--rail {
  margin: 0 var(--esp-3);
  gap: 1.1rem;
  scroll-snap-type: none;
  cursor: grab;
  user-select: none;
}

.cartes--rail img {
  -webkit-user-drag: none;
}

.cartes--rail.est-saisie {
  cursor: grabbing;
  scroll-behavior: auto;
}

.cartes--rail>.carte {
  flex: 0 0 10.75rem;
  scroll-snap-align: none;
}

@media (min-width: 768px) {
  .cartes--rail>.carte {
    flex: 0 0 14.25rem;
  }
}

.carte {
  display: flex;
  flex-direction: column;
  border-color: var(--c-bord);
}

.carte:hover {
  border-color: var(--c-or);
}

.carte__lien {
  display: flex;
  flex-direction: column;
  flex: 1;
  cursor: pointer;
}

.carte__affiche {
  border-bottom: 0;
  cursor: pointer;
}

.carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.75rem 0.55rem 0.85rem;
  text-align: center;
}

.carte__titre {
  display: block;
  min-height: 2.6em;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 1.03rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ivoire);
  text-wrap: balance;
}

.carte__libelle {
  display: block;
  overflow-wrap: normal;
}

.carte__fleche {
  display: none;
}

.carte__date {
  display: block;
  margin-top: auto;
  padding-top: 0.3rem;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-champagne);
}

.carte--temps-fort .carte__date {
  margin: auto 0 0;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-champagne);
}

.carte__categorie {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
}

.carte--or .carte__categorie {
  background: #A8895B;
  color: var(--c-noir);
}

/* Accueil : dans le rail du jour, le titre seul (pas d'horaires) ; la fiche mène au film */
.page-home .rail--jour .carte__date {
  display: none;
}

.cartes--rail .carte__libelle {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

@media (max-width: 767px) {
  .cartes--rail .carte__corps {
    padding: 0.65rem 0.5rem 0.75rem;
  }

  .cartes--rail .carte__titre {
    font-size: 0.94rem;
    letter-spacing: 0;
    min-height: 2.6em;
  }

  .cartes--rail .carte__categorie {
    font-size: 0.64rem;
    letter-spacing: 0.18em;
  }

  .carte--temps-fort .carte__date {
    font-size: 0.84rem;
    letter-spacing: 0;
  }

  .rail__cadre::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0.4rem;
    right: 0;
    width: 2.1rem;
    background: linear-gradient(270deg, var(--c-noir), transparent);
    pointer-events: none;
  }
}

.rail__fleche {
  position: absolute;
  top: 0;
  bottom: 0.4rem;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: auto;
  border: 0;
  color: var(--c-champagne);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.rail__fleche--gauche {
  left: 0;
  background: linear-gradient(90deg, var(--c-noir) 30%, transparent);
}

.rail__fleche--droite {
  right: 0;
  background: linear-gradient(270deg, var(--c-noir) 30%, transparent);
}

.rail__fleche .chevron {
  transition: transform 0.2s ease, color 0.2s ease;
}

.rail__fleche:hover {
  color: var(--c-or-vif);
}

.rail__fleche--gauche:hover .chevron {
  transform: translateX(-4px);
}

.rail__fleche--droite:hover .chevron {
  transform: translateX(4px);
}

.rail__fleche:disabled {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .rail__fleche {
    display: flex;
  }

  .rail--defilable .rail__fleche:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
  }

  .rail:not(.rail--defilable) .rail__fleche {
    display: none;
  }
}

.rail--temps-forts .rail__barre,
.rail--sans-jours .rail__barre {
  display: none;
}

/* 9.7 Mises en avant en longueur : textes en ivoire et texte doux, bouton contour champagne */
.bande-image {
  border-color: var(--c-bord-clair);
}

.bande-image__texte h2,
.bande-image__texte h3 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  letter-spacing: 0.04em;
}

.bande-image__texte p {
  color: var(--c-creme);
  font-size: 1rem;
}

/* Mises en avant de la home : structure et CTA conformes aux maquettes
   desktop/mobile. L'encart entier est le lien, le CTA est sa représentation. */
.mises-avant {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin: clamp(2.5rem, 4.5vw, 3.5rem) clamp(1.25rem, 4vw, 4rem) 0;
}

.mise-avant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  padding: 1.875rem clamp(1.5rem, 3vw, 3rem);
  border: 1px solid var(--c-bord-clair);
  color: inherit;
}

.mise-avant--bleu {
  background: linear-gradient(100deg, #101A2E 0%, #0B0F1C 60%, #0B0B0B 100%);
}

.mise-avant--ambre {
  background: linear-gradient(100deg, #241708 0%, #140E06 60%, #0B0B0B 100%);
}

.mise-avant--bleu.mise-avant--avec-image {
  background-image: linear-gradient(90deg, rgba(16, 26, 46, 0.98) 0%, rgba(11, 15, 28, 0.9) 52%, rgba(11, 11, 11, 0.35) 100%), var(--mise-avant-image-desktop);
  background-position: center;
  background-size: cover;
}

.mise-avant--ambre.mise-avant--avec-image {
  background-image: linear-gradient(90deg, rgba(36, 23, 8, 0.98) 0%, rgba(20, 14, 6, 0.9) 52%, rgba(11, 11, 11, 0.35) 100%), var(--mise-avant-image-desktop);
  background-position: center;
  background-size: cover;
}

.mise-avant:hover,
.mise-avant:focus-visible {
  border-color: var(--c-or);
  color: inherit;
}

.mise-avant__contenu {
  min-width: 0;
}

.mise-avant .kicker {
  color: var(--c-champagne);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.mise-avant h3 {
  margin: 0.375rem 0 0.5rem;
  font-family: var(--f-titre);
  font-size: clamp(1.3125rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--c-ivoire);
}

.mise-avant p {
  margin: 0;
  color: var(--c-creme);
  font-size: 1.03rem;
}

.mise-avant .cta {
  display: inline-block;
  flex: 0 0 auto;
  padding: 0.6875rem 1.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mise-avant .cta.contour {
  border: 1px solid var(--c-bord-clair);
  background: none;
  color: var(--c-champagne);
  white-space: nowrap;
}

.mise-avant:hover .cta.contour,
.mise-avant:focus-visible .cta.contour {
  border-color: var(--c-or);
  color: var(--c-or-vif);
}

@media (max-width: 900px) {
  .mises-avant {
    gap: 0.875rem;
    margin: 1.875rem 1.125rem 0;
  }

  .mise-avant {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.375rem 1.25rem;
  }

  .mise-avant--bleu {
    background: linear-gradient(120deg, #101A2E 0%, #0B0F1C 60%, #0B0B0B 100%);
  }

  .mise-avant--ambre {
    background: linear-gradient(120deg, #241708 0%, #140E06 60%, #0B0B0B 100%);
  }

  .mise-avant--bleu.mise-avant--avec-image {
    background-image: linear-gradient(120deg, rgba(16, 26, 46, 0.96) 0%, rgba(11, 15, 28, 0.82) 65%, rgba(11, 11, 11, 0.48) 100%), var(--mise-avant-image-mobile);
  }

  .mise-avant--ambre.mise-avant--avec-image {
    background-image: linear-gradient(120deg, rgba(36, 23, 8, 0.96) 0%, rgba(20, 14, 6, 0.82) 65%, rgba(11, 11, 11, 0.48) 100%), var(--mise-avant-image-mobile);
  }

  .mise-avant .kicker {
    font-size: 0.75rem;
    letter-spacing: 0.28em;
  }

  .mise-avant h3 {
    margin: 0.3125rem 0 0.4375rem;
    font-size: 1.21875rem;
  }

  .mise-avant p {
    font-size: 0.96875rem;
  }

  .mise-avant .cta {
    min-height: 2.75rem;
    padding: 0.75rem 1.375rem;
    font-size: 0.84375rem;
  }
}

/* 9.8 Les salles du Grand Rex : photo 16/10, titre et texte centrés ; mobile : Grande Salle pleine largeur (photo 2:1) puis quatre carrés */
.salles-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin: 0 var(--esp-3);
}

.salle-home {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-bord-clair);
  background: var(--c-carte);
  color: inherit;
  text-align: center;
  transition: border-color var(--transition);
}

.salle-home:hover {
  border-color: var(--c-or);
  color: inherit;
}

.salle-home__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-bord);
  color: #4A443A;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.salle-home__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.salle-home__corps {
  display: block;
  padding: 0.9rem 0.9rem 1.1rem;
}

.salle-home h3 {
  font-size: 1.06rem;
  letter-spacing: 0.04em;
  color: var(--c-ivoire);
}

.salle-home p {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: var(--c-creme);
}

.salle-home:first-child {
  grid-column: 1 / -1;
}

.salle-home:first-child .salle-home__photo {
  aspect-ratio: 2 / 1;
}

.salle-home:first-child h3 {
  font-size: 1.2rem;
}

.salle-home:first-child p {
  font-size: 0.95rem;
}

@media (min-width: 768px) {
  .salles-home {
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 1.1rem;
  }

  .salle-home:first-child {
    grid-column: auto;
  }

  .salle-home:first-child .salle-home__photo {
    aspect-ratio: 16 / 10;
  }

  .salle-home h3,
  .salle-home:first-child h3 {
    font-size: 1.3rem;
  }

  .salle-home p,
  .salle-home:first-child p {
    font-size: 0.97rem;
  }

  .salle-home__corps {
    padding: 1rem 1rem 1.25rem;
  }
}

/* 9.9 Bande vidéo immersive « L'expérience Grand Rex » */
.bande-video {
  position: relative;
  height: 52vh;
  min-height: 20rem;
  margin-top: var(--esp-4);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(201, 165, 92, 0.2), transparent 70%), linear-gradient(180deg, #0B0B0B 0%, #17130C 45%, #0B0B0B 100%);
}

.bande-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from -90deg at 50% 118%, rgba(201, 165, 92, 0.1) 0deg 2deg, transparent 2deg 8deg);
}

.bande-video__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--c-noir);
}

.bande-video__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.35), rgba(11, 11, 11, 0.15) 50%, rgba(11, 11, 11, 0.7));
}

.bande-video__contenu {
  position: relative;
  z-index: 2;
  padding: 0 var(--esp-3);
}

.bande-video__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.1rem;
  padding-left: 4px;
  border: 1px solid var(--c-champagne);
  background: rgba(11, 11, 11, 0.5);
  color: var(--c-champagne);
  font-size: 1.2rem;
}

a.bande-video__play:hover {
  color: var(--c-or-vif);
  border-color: var(--c-or-vif);
}

.bande-video h2 {
  font-size: 1.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ivoire);
  margin: 0 0 0.5rem;
}

.bande-video p {
  margin: 0;
  font-size: 0.97rem;
  color: var(--c-creme);
}

@media (min-width: 768px) {
  .bande-video {
    height: 62vh;
    min-height: 26rem;
    margin-top: clamp(3rem, 6vw, 5rem);
  }

  .bande-video__play {
    width: 4.75rem;
    height: 4.75rem;
    font-size: 1.4rem;
  }

  .bande-video h2 {
    font-size: clamp(1.9rem, 3vw, 2.9rem);
  }

  .bande-video p {
    font-size: 1.1rem;
  }
}

/* 9.10 Newsletter et pied de page : aucun filet, séparateurs à motif sur toute la ligne, textes en ivoire */
.infolettre {
  max-width: none;
  min-height: 22.3125rem;
  margin-top: clamp(3.125rem, 6vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4rem) max(clamp(1.25rem, 4vw, 4rem), calc((100vw - var(--largeur-site)) / 2 + 4rem));
  border: 0;
}

.infolettre .separateur {
  margin: 0 0 1.4rem;
}

.infolettre h2 {
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--c-ivoire);
}

.infolettre p {
  color: var(--c-creme);
  font-size: 0.97rem;
}

.infolettre form {
  max-width: 29rem;
}

.infolettre input {
  background: var(--c-surface);
  border-color: var(--c-bord-clair);
  color: var(--c-ivoire);
  font-size: 0.97rem;
  padding: 0.75rem 0.9rem;
}

.infolettre input::placeholder {
  color: var(--c-gris);
}

.infolettre .bouton--plein {
  min-height: 2.75rem;
}

@media (min-width: 768px) {
  .infolettre h2 {
    font-size: 1.7rem;
    letter-spacing: 0.14em;
  }

  .infolettre form {
    max-width: 32.5rem;
  }
}

.site-footer {
  margin-top: 0;
  padding: 0 var(--esp-3) 1.3rem;
  border-top: 0;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--c-ivoire);
}

.site-footer::before {
  display: none;
}

.site-footer .separateur {
  margin: 0 0 1.4rem;
}

.site-footer .reseaux {
  margin: 0 0 1.6rem;
}

.reseaux__titre {
  font-family: var(--f-titre);
  font-size: 1rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-champagne);
}

.reseaux__liste {
  gap: 1.2rem;
}

.reseaux a {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
}

.reseaux a:hover,
.reseaux a:focus-visible {
  transform: none;
  opacity: 0.75;
}

.reseaux svg {
  width: 1.75rem;
  height: 1.75rem;
}

.site-footer__principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.3rem;
}

.site-footer__principal a {
  display: inline;
  width: auto;
  padding: 0.25rem;
  border: 0;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--c-ivoire);
  text-align: center;
}

.site-footer__principal a:hover {
  color: var(--c-or-vif);
}

.site-footer__titre,
.site-footer__sous {
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--c-ivoire);
}

.site-footer__rexclub img {
  display: block;
  height: 4.5rem;
  width: auto;
  margin: 0 auto;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  font-size: 0.94rem;
  letter-spacing: 0.05em;
}

.site-footer__legal a {
  display: inline;
  min-height: 0;
  padding: 0.25rem;
  border: 0;
  color: var(--c-ivoire);
  font-size: 0.94rem;
  line-height: 1.5;
}

.site-footer__legal a:hover {
  color: var(--c-or-vif);
}

.site-footer__mention {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  padding-top: 0.9rem;
  border: 0;
  font-size: 0.86rem;
  letter-spacing: 0;
  line-height: 1.7;
  color: var(--c-gris);
}

.site-footer__webam {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--c-gris);
}

.site-footer__webam strong {
  color: var(--c-creme);
  font-weight: 500;
}

@media (min-width: 768px) {
  .site-footer {
    padding: 0 max(clamp(1.25rem, 4vw, 4rem), calc((100vw - var(--largeur-site)) / 2 + 4rem)) 1.25rem;
  }

  .site-footer .separateur {
    margin-bottom: 1.5rem;
  }

  .reseaux__titre {
    font-size: 1.125rem;
    letter-spacing: 0.26em;
  }

  .reseaux svg {
    width: 1.94rem;
    height: 1.94rem;
  }

  .site-footer__principal {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.4rem;
  }

  .site-footer__principal a:nth-child(1) {
    justify-self: start;
    text-align: left;
  }

  .site-footer__principal a:nth-child(3) {
    justify-self: end;
    text-align: right;
  }

  .site-footer__rexclub img {
    height: 6rem;
  }

  .site-footer__mention {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    font-size: 0.9rem;
  }
}

@media (max-width: 767px) {
  .infolettre {
    min-height: 20rem;
    margin-top: 2.375rem;
    padding: 1.875rem 1.125rem 2.375rem;
  }

  .infolettre .separateur {
    margin-bottom: 1.25rem;
  }

  .site-footer {
    padding: 0.25rem 1.125rem 1.125rem;
  }

  .site-footer .separateur {
    margin-bottom: 1.25rem;
  }
}

/* Le visuel du hero garde ses proportions à chaque largeur. */
.hero-slider--pleine-largeur .hero-slider__scene {
  height: auto;
}

.hero-slider--pleine-largeur .hero-slider__slide {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
}

.hero-slider--pleine-largeur .hero-slider__slide.est-active {
  position: relative;
  inset: auto;
  height: auto;
}

.hero-slider--pleine-largeur .hero-volets {
  height: auto;
  min-height: 0;
}

.hero-slider--pleine-largeur .hero-volets__visuel {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}

.hero-slider__image,
.hero-slider__image img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-slider--pleine-largeur .hero-slider__fleche {
  height: 100%;
  min-height: 0;
}

.hero-slider--pleine-largeur .hero-slider__textes {
  height: auto;
}

@media (min-width: 1500px) {
  .hero-slider--pleine-largeur .hero-slider__textes {
    bottom: 0;
  }
}

.hero .sur-titre__lien {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.hero .sur-titre__lien:hover {
  text-decoration: underline;
}

/* Choix des cookies : panneau or et nuit, mêmes boutons pour accepter et refuser. */
.cookie-consent[hidden],
.cookie-consent [hidden] {
  display: none !important;
}

.cookie-consent {
  position: fixed;
  z-index: 10000;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(70rem, calc(100% - 2.5rem));
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  padding: 1.6rem 1.9rem;
  border: 1px solid var(--c-or);
  border-radius: 1rem;
  background: rgba(20, 18, 14, 0.98);
  color: var(--c-ivoire);
  box-shadow: 0 12px 65px rgba(0, 0, 0, 0.65);
  font-family: var(--f-texte);
}

.cookie-consent__eyebrow {
  color: var(--c-or);
  font-size: 0.7rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.cookie-consent h2 {
  margin: 0.4rem 0 0.65rem;
  font: 1.55rem / 1.25 var(--f-titre);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ivoire);
}

.cookie-consent p {
  margin: 0;
  max-width: 90ch;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--c-gris);
}

.cookie-consent__description-mobile {
  display: none;
}

.cookie-consent__privacy {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--c-champagne);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.cookie-consent__actions button {
  min-height: 2.75rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--c-or);
  border-radius: 0.4rem;
  background: transparent;
  color: var(--c-champagne);
  font: 500 0.9rem var(--f-texte);
  cursor: pointer;
}

.cookie-consent__actions button:hover {
  background: var(--c-or);
  color: var(--c-noir);
}

.cookie-consent__actions .cookie-consent__customize {
  border-color: var(--c-bord-clair);
  color: var(--c-gris);
}

.cookie-consent button:focus-visible,
.cookie-consent input:focus-visible,
.cookie-settings-link:focus-visible {
  outline: 2px solid var(--c-ivoire);
  outline-offset: 4px;
}

.cookie-consent__preferences {
  margin-top: 1rem;
  border-top: 1px solid var(--c-bord-clair);
}

.cookie-consent__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--c-bord-clair);
}

.cookie-consent__option strong {
  font-size: 0.95rem;
  font-weight: 500;
}

.cookie-consent__option p,
.cookie-consent__required {
  font-size: 0.8rem;
  color: var(--c-gris);
}

.cookie-consent__option input {
  appearance: none;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border: 1px solid var(--c-bord-clair);
  border-radius: 2rem;
  background: var(--c-noir);
  cursor: pointer;
}

.cookie-consent__option input::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0.18rem;
  border-radius: 50%;
  background: var(--c-gris);
  transition: transform 180ms ease;
}

.cookie-consent__option input:checked {
  background: var(--c-or);
  border-color: var(--c-or);
}

.cookie-consent__option input:checked::before {
  transform: translateX(1.2rem);
  background: var(--c-noir);
}

.cookie-settings-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.cookie-settings-link:hover {
  color: var(--c-or);
}

@media (max-width: 767px) {
  .cookie-consent {
    box-sizing: border-box;
    left: 50vw;
    right: auto;
    top: calc(var(--cookie-viewport-bottom, 100vh) - max(0.65rem, env(safe-area-inset-bottom)));
    top: calc(var(--cookie-viewport-bottom, 100dvh) - max(0.65rem, env(safe-area-inset-bottom)));
    bottom: auto;
    transform: translate(-50%, -100%);
    width: min(22rem, calc(100vw - 3rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
    padding: 0.8rem;
    max-height: calc(var(--cookie-viewport-height, 100vh) - 1.3rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(var(--cookie-viewport-height, 100dvh) - 1.3rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    border-radius: 0.75rem;
  }

  .cookie-consent__eyebrow {
    display: none;
  }

  .cookie-consent h2 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
  }

  .cookie-consent p {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .cookie-consent .cookie-consent__description {
    display: none;
  }

  .cookie-consent .cookie-consent__description-mobile {
    display: block;
  }

  .cookie-consent__privacy {
    margin-top: 0.35rem;
    font-size: 0.78rem;
  }

  .cookie-consent__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.65rem;
  }

  .cookie-consent__actions button {
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.4rem;
    font-size: 0.8rem;
    white-space: normal;
  }

  .cookie-consent__actions .cookie-consent__customize,
  .cookie-consent__actions [data-cookie-save] {
    grid-column: 1 / -1;
  }

  .cookie-consent__preferences {
    margin-top: 0.65rem;
  }

  .cookie-consent__option {
    gap: 0.65rem;
    padding: 0.6rem 0;
  }

  .cookie-consent__option strong {
    font-size: 0.85rem;
  }

  .cookie-consent__option>div {
    min-width: 0;
  }

  .cookie-consent__required {
    flex: 0 0 auto;
    max-width: 6rem;
    text-align: right;
  }
}


/* ==========================================================================
   10. Rubriques, salles et mobile — validations du 26 au 28 septembre 2026 (voir CONSIGNES_SITE_2026-09-28)
   Bloc placé en fin de feuille : il prend le dessus sur les règles historiques et sur le bloc 9 qu'il complète.
   Toutes les valeurs sont celles des maquettes (1 rem = 16 px).
   ========================================================================== */

/* 10.0 Cadre des pages de rubrique (Cinéma, Concerts & Spectacles, Visites & Expériences : body.page-rubrique) et des pages de salles (body.page-salle) :
   le même cadre que l'accueil. .contenu porte la marge utile, clamp(20 px, 4 vw, 64 px) puis 18 px sur mobile, dans les 1640 px du site ;
   les séparateurs, titres, rangées, filtres et blocs de ces pages s'y alignent sans marge latérale propre (comme les règles .page-home du bloc 9). */
.page-rubrique .contenu,
.page-salle .contenu {
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

:is(.page-rubrique, .page-salle) :is(.contenu > .separateur--motif, .contenu > .titre-section, .rail__barre, .cartes--rail, .salles-home, .mises-avant, .filtres[data-filtres], .rail__vide, .mois-titre, .fil-ariane--page, .chiffres, .galerie-salle, .offre) {
  margin-inline: 0;
}

:is(.page-rubrique, .page-salle) :is(.page-entete, .rail__tout, .groupes, .appel-calendrier, .salle-texte) {
  padding-inline: 0;
}

:is(.page-rubrique, .page-salle) .contenu>.separateur--motif {
  margin-top: clamp(2.875rem, 5vw, 4.5rem);
  margin-bottom: 0;
}

:is(.page-rubrique, .page-salle) .rail__cadre {
  margin-top: 0;
}

.page-rubrique .rail--jour .rail__barre {
  margin-bottom: 1.375rem;
}

.page-rubrique .rail--jour .carte__date {
  display: none;
}

@media (max-width: 767px) {

  .page-rubrique .contenu,
  .page-salle .contenu {
    padding-inline: 1.125rem;
  }

  :is(.page-rubrique, .page-salle) .contenu>.separateur--motif {
    margin-top: 2.125rem;
  }

  :is(.page-rubrique, .page-salle) .contenu>.titre-section {
    margin: 1.125rem -0.25rem 1.125rem;
  }

  .page-rubrique .rail--jour .rail__barre {
    margin-bottom: 0;
    padding-bottom: 1rem;
  }
}

/* 10.1 Héro de l'accueil : hauteur fixe de la bannière 1920 × 590 quelle que soit la diapositive, légende dessous sur une ligne
   (titre doré · description · Réserver), points sous la légende, plus de sur-titre, plus de texte en surimpression sur grand écran.
   Défilement 5 s sans pause au survol (main.js). Ordre visuel sur desktop : visuel, légende, points alignés à gauche dans la largeur du contenu ;
   sur mobile : visuel, points centrés, légende (le bloc des textes étant placé après les points dans le gabarit, l'ordre est donné par flex order).
   La légende et les points s'alignent sur le contenu de la page : marges clamp(20 px, 4 vw, 64 px), 1512 px de large au maximum. */
.hero-slider--pleine-largeur {
  display: flex;
  flex-direction: column;
}

.hero-slider--pleine-largeur .hero-slider__scene {
  order: 0;
  height: auto;
}

.hero-slider--pleine-largeur .hero-slider__commandes {
  order: 1;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1.125rem 0.125rem;
  justify-content: center;
}

.hero-slider--pleine-largeur .hero-slider__textes {
  order: 2;
  position: static;
  height: auto;
  pointer-events: auto;
}

.hero-slider--pleine-largeur .hero__kick {
  display: none;
}

.hero-slider--pleine-largeur .titre-hero {
  color: var(--c-or-vif);
  text-transform: none;
}

.hero-slider--pleine-largeur .hero-volets__texte {
  position: static;
  pointer-events: auto;
  padding: 0.375rem 1.125rem 0.25rem;
}

.hero-slider--pleine-largeur .hero-volets__texte-cadre {
  width: 100%;
}

.hero-slider--pleine-largeur .hero-volets__textes {
  min-width: 0;
}

.hero-slider--pleine-largeur .hero-volets__voile {
  background: linear-gradient(180deg, rgba(11, 11, 11, 0) 70%, rgba(11, 11, 11, 0.35) 100%);
}

.hero-slider--pleine-largeur .hero-slider__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.hero-slider--pleine-largeur .hero__actions .bouton {
  min-height: 2.25rem;
  padding: 0 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
}

@media (min-width: 768px) {
  .hero-slider--pleine-largeur .hero-volets__visuel {
    aspect-ratio: auto;
    height: min(calc(100vw * 590 / 1920), 620px);
    min-height: 300px;
  }

  .hero-slider--pleine-largeur .hero-slider__image,
  .hero-slider--pleine-largeur .hero-slider__image img {
    aspect-ratio: auto;
    height: 100%;
  }

  .hero-slider--pleine-largeur .hero-slider__fleche {
    top: 0;
    bottom: 0;
    height: 100%;
    min-height: 0;
  }

  .hero-slider--pleine-largeur .hero-slider__textes {
    order: 1;
  }

  .hero-slider--pleine-largeur .hero-slider__commandes {
    order: 2;
    max-width: var(--largeur-site);
    margin: 0 auto;
    padding: 0.75rem clamp(1.25rem, 4vw, 4rem) 0.125rem;
    justify-content: flex-start;
  }

  .hero-slider--pleine-largeur .hero-volets__texte {
    padding: 1.125rem clamp(1.25rem, 4vw, 4rem) 0.25rem;
  }

  .hero-slider--pleine-largeur .hero-volets__texte-cadre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
    max-width: calc(var(--largeur-site) - 8rem);
    margin: 0 auto;
  }

  .hero-slider--pleine-largeur .titre-hero {
    font-size: 1.6875rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
    margin: 0 0 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-slider--pleine-largeur .accroche {
    max-width: none;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--c-creme);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-slider--pleine-largeur .hero__actions {
    flex: 0 0 auto;
    margin: 0;
  }

  .hero-slider--pleine-largeur .hero__actions .bouton {
    min-height: 2.75rem;
    padding: 0 1.5rem;
    font-size: 0.84rem;
    letter-spacing: 0.14em;
  }
}

@media (min-width: 1500px) {
  .hero-slider--pleine-largeur .hero-slider__scene {
    height: auto;
  }

  .hero-slider--pleine-largeur .hero-slider__slide {
    height: auto;
  }

  .hero-slider--pleine-largeur .hero-slider__slide.est-active {
    position: relative;
    inset: auto;
    height: auto;
  }

  .hero-slider--pleine-largeur .hero-volets {
    height: auto;
  }

  .hero-slider--pleine-largeur .hero-volets__visuel {
    height: min(calc(100vw * 590 / 1920), 620px);
  }

  .hero-slider--pleine-largeur .hero-slider__textes {
    position: static;
    height: auto;
  }

  .hero-slider--pleine-largeur .hero-volets__texte {
    position: static;
    padding: 1.125rem clamp(1.25rem, 4vw, 4rem) 0.25rem;
    pointer-events: auto;
  }

  .hero-slider--pleine-largeur .hero-volets__texte-cadre {
    max-width: calc(var(--largeur-site) - 8rem);
    margin: 0 auto;
  }

  .hero-slider--pleine-largeur .hero-volets__voile {
    background: linear-gradient(180deg, rgba(11, 11, 11, 0) 70%, rgba(11, 11, 11, 0.35) 100%);
  }

  .hero-slider--pleine-largeur .hero-slider__commandes {
    margin-top: 0;
  }
}

/* 10.2 Ligne des jours (validée sur la home v13 et la page Cinéma) : cases en texte doux sur bord fin, jour actif en or plein sur texte noir,
   « Calendrier complet » en champagne juste après le dernier jour visible. Desktop : cases resserrées (14 px, 9 px 12 px, 8 px d'écart).
   Ces règles remplacent les variantes blanches (bord et texte #fff, actif noir cerclé d'or) présentes dans le code courant. */
.jours>[data-jour],
.jours.jours--programmation>[data-jour],
.jours>[data-jour]:where(:not(.ferme):not(.actif)) {
  border-color: var(--c-bord);
  color: var(--c-creme);
  background: none;
  opacity: 1;
  font-weight: 400;
}

.jours>a[data-jour]:hover,
.jours.jours--programmation>a[data-jour]:hover {
  border-color: var(--c-or);
  color: var(--c-or-vif);
  background: none;
}

.jours>[data-jour].actif,
.jours.jours--programmation>[data-jour].actif,
.jours.jours--programmation>a[data-jour].actif:hover {
  background: var(--c-or);
  border-color: var(--c-or);
  color: var(--c-noir);
  font-weight: 500;
  opacity: 1;
}

/*.jours > [data-jour].ferme { opacity: 0.4; }*/
.jours>.jours__calendrier {
  margin-left: 0;
  background: none;
  border-color: var(--c-bord);
  color: var(--c-champagne);
}

.jours>.jours__calendrier:hover {
  border-color: var(--c-or);
  color: var(--c-or-vif);
}

.jours>[data-jour].jours__voir-plus {
  border-color: var(--c-or);
  color: var(--c-or-vif);
}

@media (min-width: 768px) {
  .jours {
    gap: 0.5rem;
    margin-bottom: 1.125rem;
  }

  .jours>a,
  .jours>span,
  .jours.jours--programmation>[data-jour] {
    min-height: 0;
    padding: 0.5625rem 0.75rem;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .jours>.jours__calendrier {
    min-height: 0;
    padding: 0.5625rem 0.75rem;
    gap: 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    line-height: 1;
  }
}

/* 10.3 Séparateurs : nouveaux motifs (rosace, bobine, projecteur, ticket, étoile, disque, trompette, casquette).
   Règle de taille : tous les motifs s'inscrivent dans le même cercle (79 px sur desktop, 62 px sur mobile) ; un motif carré ou rond fait 56 px (44 px),
   un motif plus large que haut est réduit jusqu'à tenir dans ce cercle. Les séparateurs porteurs d'une ancre ont une marge de défilement. */
.separateur--projecteur .separateur__motif img {
  height: 2.625rem;
}

.separateur--casquette .separateur__motif img {
  height: 2.1875rem;
}

.separateur--ticket .separateur__motif img {
  height: 1.5rem;
}

.separateur--trompette .separateur__motif img {
  height: 1.3125rem;
}

.separateur[id] {
  scroll-margin-top: 5.25rem;
}

@media (min-width: 768px) {
  .separateur--projecteur .separateur__motif img {
    height: 3.375rem;
  }

  .separateur--casquette .separateur__motif img {
    height: 2.75rem;
  }

  .separateur--ticket .separateur__motif img {
    height: 1.9375rem;
  }

  .separateur--trompette .separateur__motif img {
    height: 1.6875rem;
  }
}

@media (min-width: 1024px) {
  .separateur[id] {
    scroll-margin-top: 1.5rem;
  }
}

/* Titres courts sur mobile (« Temps forts », « Nos salles », « Avant-premières ») : même taille, libellé plus court */
.titre-section__court {
  display: none;
}

@media (max-width: 767px) {
  .titre-section__long {
    display: none;
  }

  .titre-section__court {
    display: inline;
  }
}

/* 10.4 Héro des pages de rubrique et de salles : photo à hauteur fixe (16/9 sur mobile), fondu bas, puis titre, accroche et sous-navigation centrés */
.hero-page {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-surface) var(--hero-image-mobile, var(--hero-image-desktop)) var(--hero-position-mobile, center center) / cover no-repeat;
}

.hero-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0) 60%, rgba(11, 11, 11, 0.55) 100%);
}

.page-entete {
  text-align: center;
  padding: 1.125rem var(--esp-3) 0.25rem;
}

.page-entete h1 {
  font-size: 1.4375rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-ivoire);
  margin: 0 0 0.375rem;
}

.page-entete .accroche {
  font-family: var(--f-titre);
  font-size: 1.03rem;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--c-or-vif);
  margin: 0 0 0.875rem;
}

/* Fil d'Ariane des pages de salles (classe propre : le fil d'Ariane historique des autres pages ne change pas) */
.fil-ariane--page {
  padding: 1rem 0 0;
  margin: 0 var(--esp-3);
  color: var(--c-gris);
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fil-ariane--page a {
  color: var(--c-champagne);
}

.fil-ariane--page b {
  color: var(--c-ivoire);
  font-weight: 400;
}

.fil-ariane__separateur {
  margin: 0 0.5rem;
}

.badge-nouveau {
  display: inline-block;
  margin-left: 0.75rem;
  padding: 0.125rem 0.5625rem;
  background: var(--c-or);
  color: var(--c-noir);
  font-family: var(--f-texte);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Sous-navigation : sur mobile, des cases comme les jours qui défilent au doigt (la case de la section visible passe en or) ;
   sur desktop, des mots en ivoire séparés par des points dorés (style liens) ou les mêmes cases centrées (style cases, ex. les mois). */
.sous-nav-page {
  display: flex;
  gap: 0.5625rem;
  margin: 0 -1.125rem;
  padding: 0 1.125rem 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: none;
}

.sous-nav-page::-webkit-scrollbar {
  display: none;
}

.sous-nav-page a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-creme);
  white-space: nowrap;
  text-decoration: none;
}

.sous-nav-page a[aria-current="true"] {
  background: var(--c-or);
  border-color: var(--c-or);
  color: var(--c-noir);
  font-weight: 500;
}

.sous-nav-page__calendrier,
.sous-nav-page a.sous-nav-page__calendrier {
  color: var(--c-champagne);
}

.sous-nav-page__calendrier svg {
  width: 16px;
  height: 16px;
}

.sous-nav-page__long {
  display: none;
}

.sous-nav-page__court {
  display: inline;
}

@media (min-width: 768px) {
  .hero-page {
    aspect-ratio: auto;
    height: min(calc(100vw * 590 / 1920), 620px);
    min-height: 300px;
    background-image: var(--hero-image-desktop);
    background-position: var(--hero-position-desktop, center center);
  }

  .page-entete {
    padding: 1.875rem 0 0;
  }

  .page-entete h1 {
    font-size: clamp(2rem, 3vw, 2.875rem);
    letter-spacing: 0.1em;
    line-height: 1.15;
    margin: 0 0 0.5rem;
  }

  .page-entete .accroche {
    font-size: 1.3125rem;
    margin: 0 0 1.375rem;
  }

  .fil-ariane--page {
    margin: 0;
  }

  .sous-nav-page {
    margin: 0;
    padding: 0;
    overflow: visible;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sous-nav-page__long {
    display: inline;
  }

  .sous-nav-page__court {
    display: none;
  }

  /* style liens : mots en ivoire, capitales espacées, points dorés entre les mots */
  .sous-nav-page--liens {
    gap: 0.375rem 0;
  }

  .sous-nav-page--liens a {
    min-height: 0;
    padding: 0.25rem 0;
    border: 0;
    color: var(--c-ivoire);
    font-size: 0.84rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .sous-nav-page--liens a:hover,
  .sous-nav-page--liens a[aria-current="true"] {
    background: none;
    color: var(--c-or-vif);
    font-weight: 400;
  }

  .sous-nav-page--liens a+a::before {
    content: "·";
    color: var(--c-or);
    margin: 0 1rem;
  }

  /* style cases : les cases des jours (14 px, 9 px 12 px, bord fin), la case active en or, « Calendrier complet » en champagne en bout de ligne */
  .sous-nav-page--cases {
    gap: 0.5rem;
  }

  .sous-nav-page--cases a {
    min-height: 0;
    padding: 0.5625rem 0.75rem;
    border-color: var(--c-bord);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .sous-nav-page--cases a:hover {
    border-color: var(--c-or);
    color: var(--c-or-vif);
  }

  .sous-nav-page--cases a[aria-current="true"] {
    background: var(--c-or);
    border-color: var(--c-or);
    color: var(--c-noir);
  }
}

/* 10.5 Sections de fiches : filtres, étiquettes, « Tout afficher », traitement Annulé, message vide */
.filtres[data-filtres] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 var(--esp-3) 0.875rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.filtres[data-filtres]::-webkit-scrollbar {
  display: none;
}

.filtres[data-filtres] .filtres__libelle {
  display: none;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  color: var(--c-gris);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  margin-right: 0.375rem;
}

.filtres[data-filtres] .filtre {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--c-bord);
  background: none;
  color: var(--c-creme);
  font-family: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}

.filtres[data-filtres] .filtre:hover {
  border-color: var(--c-or);
  color: var(--c-or-vif);
}

.filtres[data-filtres] .filtre.actif {
  background: var(--c-or);
  border-color: var(--c-or);
  color: var(--c-noir);
  font-weight: 500;
}

.carte.est-masquee {
  display: none;
}

.carte__affiche {
  position: relative;
}

.carte--complet .carte__affiche img {
  filter: grayscale(1);
  opacity: 0.45;
}

.carte__affiche .carte__complet {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  min-height: 0;
  padding: 0.35rem 0.75rem;
  transform: translate(-50%, -50%);
  border: 1px solid var(--c-rouge);
  background: rgba(11, 11, 11, 0.88);
  color: var(--c-ivoire);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* Étiquettes sur l'affiche (VIP en or à droite, Équipe du film en ivoire à gauche) ; le sélecteur .carte__affiche .carte__etiquette passe devant la règle .carte__affiche span de la fiche. */
.carte__etiquette,
.carte__affiche .carte__etiquette {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: inline-block;
  width: auto;
  min-height: 0;
  padding: 0.1875rem 0.5rem;
  background: var(--c-or);
  color: var(--c-noir);
  font-family: var(--f-texte);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}

.carte__etiquette--equipe,
.carte__affiche .carte__etiquette--equipe {
  right: auto;
  left: 0.5rem;
  background: var(--c-ivoire);
}

.carte--annule .carte__categorie--annule {
  background: var(--c-rouge);
  color: var(--c-ivoire);
}

/* passe devant la teinte de la fiche (.carte--violet .carte__categorie…) */
.carte--annule .carte__lien {
  cursor: default;
}

.carte--annule:hover {
  border-color: var(--c-bord);
}

.carte--annule .carte__affiche {
  filter: grayscale(1);
  opacity: 0.45;
}

.carte--annule .carte__titre {
  color: var(--c-gris);
}

.carte--annule .carte__date {
  color: var(--c-gris);
  text-decoration: line-through;
}

.carte--annule .carte__mention {
  color: var(--c-gris);
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 0.125rem;
}

.rail__vide {
  margin: 0.625rem var(--esp-3) 0;
  color: var(--c-gris);
  font-size: 0.9375rem;
}

.rail__tout {
  text-align: center;
  padding: 0.875rem var(--esp-3) 0;
}

.rail__tout-bouton {
  min-height: 2.75rem;
  padding: 0 1.125rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rail__tout-bouton[hidden] {
  display: none;
}

/* Rangée dépliée par « Tout afficher » : les fiches passent à la ligne (deux colonnes sur mobile), les chevrons et le fondu de bord disparaissent */
.rail--deploye .cartes--rail {
  flex-wrap: wrap;
  overflow: visible;
  cursor: default;
}

.rail--deploye .cartes--rail>.carte {
  flex: 0 0 calc(50% - 0.55rem);
}

.rail--deploye .rail__fleche {
  display: none;
}

.rail--deploye .rail__cadre::after {
  display: none;
}

@media (min-width: 768px) {
  .filtres[data-filtres] {
    margin: -0.5rem var(--esp-3) 1.125rem;
    overflow: visible;
    flex-wrap: wrap;
  }

  .filtres[data-filtres] .filtres__libelle {
    display: inline;
  }

  .filtres[data-filtres] .filtre {
    min-height: 0;
    padding: 0.5625rem 0.75rem;
    line-height: 1;
  }

  .carte__etiquette,
  .carte__affiche .carte__etiquette {
    top: 0.625rem;
    right: 0.625rem;
    padding: 0.1875rem 0.5625rem;
    font-size: 0.6875rem;
  }

  .carte__etiquette--equipe,
  .carte__affiche .carte__etiquette--equipe {
    left: 0.625rem;
    right: auto;
  }

  .rail__tout {
    padding: 1.125rem var(--esp-3) 0;
  }

  .rail__tout-bouton {
    min-height: 0;
    padding: 0.5625rem 1.125rem;
    font-size: 0.75rem;
  }

  .rail--deploye .cartes--rail>.carte {
    flex: 0 0 14.25rem;
  }
}

/* 10.6 Mises en avant en cartes (accueil, Grande Salle sur Concerts & Spectacles) et titres des salles en doré */
.mises-avant {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.875rem var(--esp-3) 0;
}

/* La carte remplace la bande en longueur du code courant (.mise-avant--bleu / --ambre) : marges, écart, alignement et dégradés remis à zéro. */
.mise-avant,
.mise-avant--bleu,
.mise-avant--ambre {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  border: 1px solid var(--c-bord-clair);
  background: var(--c-carte);
  color: inherit;
  transition: border-color var(--transition);
}

.mise-avant:hover {
  border-color: var(--c-or);
  color: inherit;
}

.mise-avant__visuel {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--c-surface) var(--band-image-mobile, var(--band-image-desktop)) center / cover no-repeat;
  border-bottom: 1px solid var(--c-bord);
}

.mise-avant__corps {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.125rem 1.125rem;
}

.mise-avant__textes {
  min-width: 0;
}

.mise-avant__titre {
  display: block;
  font-family: var(--f-titre);
  font-size: 1.22rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--c-or-vif);
  margin: 0 0 0.375rem;
}

.mise-avant__texte {
  display: block;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--c-creme);
}

.mise-avant__bouton {
  justify-content: center;
}

.salle-home h3,
.salle-home:first-child h3 {
  color: var(--c-or-vif);
}

@media (min-width: 780px) {
  .mises-avant {
    grid-template-columns: repeat(auto-fit, minmax(23.75rem, 1fr));
    justify-items: center;
    gap: 1.125rem;
    margin: clamp(2.5rem, 4.5vw, 3.5rem) var(--esp-3) 0;
  }

  .mise-avant {
    width: 100%;
    max-width: 53.75rem;
  }

  .mise-avant__visuel {
    background-image: var(--band-image-desktop);
    border-bottom: 0;
  }

  .mise-avant__corps {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.125rem 1.25rem 1.25rem;
  }

  .mise-avant__titre {
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.3125rem;
  }

  .mise-avant__texte {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mise-avant__bouton {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0.5625rem 1.125rem 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
  }
}

/* 10.7 Pages de salles : chiffres en rangée, texte justifié centré, galerie 16/10, section VIP, titres en capitales */
.page-salle .page-entete h1 {
  text-transform: uppercase;
}

.salle-entete {
  text-align: center;
  padding-top: 0.375rem;
}

.salle-entete h2 {
  font-size: 1.4375rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-ivoire);
  margin: 0 0 0.375rem;
}

.salle-entete .accroche {
  font-family: var(--f-titre);
  font-size: 1.03rem;
  letter-spacing: 0;
  color: var(--c-or-vif);
  margin: 0 0 1.25rem;
}

.chiffres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0 var(--esp-3);
}

.chiffre {
  border: 1px solid var(--c-bord);
  background: var(--c-carte);
  padding: 1.25rem 0.875rem 1.125rem;
  text-align: center;
}

.chiffre b {
  display: block;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  color: var(--c-or-vif);
  margin-bottom: 0.625rem;
}

.chiffre span {
  display: block;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--c-creme);
}

.salle-texte {
  max-width: 68ch;
  margin: 1.75rem auto 0;
  padding: 0 var(--esp-3);
  text-align: justify;
  hyphens: none;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-creme);
}

.salle-texte b {
  color: var(--c-ivoire);
  font-weight: 500;
}

.galerie-salle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1.75rem var(--esp-3) 0;
}

.galerie-salle__photo {
  display: block;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 1px solid var(--c-bord);
  background: var(--c-surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition);
}

.galerie-salle__photo:hover {
  border-color: var(--c-or);
}

.galerie-salle__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie-salle--rail {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.375rem;
}

.galerie-salle--rail::-webkit-scrollbar {
  display: none;
}

.galerie-salle--rail .galerie-salle__photo {
  flex: 0 0 calc((100% - 0.75rem) / 2);
}

@media (min-width: 768px) {
  .salle-entete h2 {
    font-size: clamp(2rem, 3vw, 2.875rem);
    letter-spacing: 0.1em;
    line-height: 1.15;
    margin: 0 0 0.5rem;
  }

  .salle-entete .accroche {
    font-size: 1.3125rem;
    margin: 0 0 1.75rem;
  }

  .chiffres {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
    margin: 0;
  }

  .chiffre {
    padding: 1.625rem 1.125rem 1.375rem;
  }

  .chiffre b {
    font-size: 2.75rem;
    margin-bottom: 0.75rem;
  }

  .chiffre span {
    font-size: 0.9375rem;
  }

  .salle-texte {
    margin-top: 2.25rem;
    padding: 0;
    font-size: 1.125rem;
  }

  .galerie-salle {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
    margin: 2.125rem 0 0;
  }

  .galerie-salle--rail .galerie-salle__photo {
    flex: 0 0 calc((100% - 2.625rem) / 4);
  }
}

/* 10.8 Visites & Expériences : cartes d'offres (photo en fondu, alternée gauche / droite dès 761 px ; au-dessus du texte jusqu'à 760 px), Groupes centré */
.offre {
  display: grid;
  grid-template-columns: 1fr;
  margin: 1.125rem var(--esp-3) 0;
  border: 1px solid var(--c-bord-clair);
  background: var(--c-carte);
  scroll-margin-top: 5.25rem;
}

.separateur+.offre {
  margin-top: 1.375rem;
}

.offre--vip {
  box-shadow: inset 0 0 0 1px rgba(201, 165, 92, 0.1);
}

.offre__visuel {
  position: relative;
  background: var(--c-surface) var(--band-image-mobile, var(--band-image-desktop)) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.offre__visuel::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.offre__visuel .carte__etiquette {
  top: 0.625rem;
  right: 0.625rem;
}

.offre__texte {
  padding: 1.125rem 1.125rem 1.375rem;
  min-width: 0;
}

.offre__sur-titre {
  margin: 0 0 0.25rem;
  color: var(--c-gris);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.offre h2 {
  font-size: 1.4375rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: var(--c-or-vif);
  margin: 0 0 0.625rem;
}

.offre__intro {
  margin: 0 0 0.875rem;
  color: var(--c-creme);
  font-size: 0.97rem;
  line-height: 1.6;
  text-align: justify;
  hyphens: none;
}

.cles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin: 0 0 1rem;
}

.cles span {
  padding: 0.375rem 0.5625rem;
  border: 1px solid var(--c-bord);
  color: var(--c-champagne);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.cles .cles__nouveau {
  background: var(--c-or);
  border-color: var(--c-or);
  color: var(--c-noir);
  font-weight: 500;
}

.offre__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5625rem;
}

.offre__actions .bouton {
  grid-column: 1 / -1;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  text-align: center;
}

.offre__actions .offre__plus,
.offre__actions .offre__bande-annonce {
  grid-column: auto;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
  padding: 0 0.5rem;
}

.offre__actions .offre__plus:last-child {
  grid-column: 1 / -1;
}

/* sans bande-annonce, « + d'infos » prend toute la largeur */
.play-anneau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid currentColor;
  font-size: 0.5rem;
  padding-left: 2px;
}

.offre__details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms ease;
}

.offre__details>div {
  overflow: hidden;
}

.offre.est-ouverte .offre__details {
  grid-template-rows: 1fr;
}

.offre__details-texte {
  padding-top: 1rem;
}

.offre__details-texte p {
  margin: 0 0 0.8em;
  color: var(--c-creme);
  font-size: 0.9375rem;
  line-height: 1.65;
  text-align: justify;
  hyphens: none;
}

.offre__details-texte p:last-child {
  margin-bottom: 0;
}

.groupes {
  text-align: center;
  padding: 1.375rem var(--esp-3) 0;
}

.groupes__sur-titre {
  margin: 0 0 0.25rem;
  color: var(--c-gris);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.groupes h2 {
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: var(--c-or-vif);
  margin: 0 0 0.5rem;
}

.groupes p {
  margin: 0 0 1.125rem;
  color: var(--c-creme);
  font-size: 0.97rem;
}

.groupes .bouton {
  justify-content: center;
}

@media (min-width: 761px) {
  .offre {
    grid-template-columns: 1.05fr 1fr;
    margin: 1.625rem 0 0;
  }

  .separateur+.offre {
    margin-top: 2.125rem;
  }

  .offre__visuel {
    -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 100%);
    mask-image: linear-gradient(to right, #000 45%, transparent 100%);
    background-image: var(--band-image-desktop);
  }

  .offre__visuel::before {
    padding-top: 62.5%;
  }

  .offre--inverse .offre__visuel {
    order: 2;
    -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
    mask-image: linear-gradient(to left, #000 45%, transparent 100%);
  }

  .offre__texte {
    padding: 2.5rem 2.875rem 2.625rem;
    align-self: center;
  }

  .offre__sur-titre {
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    margin-bottom: 0.375rem;
  }

  .offre h2 {
    font-size: clamp(1.625rem, 2vw, 2rem);
    letter-spacing: 0.06em;
    margin-bottom: 0.875rem;
  }

  .offre__intro {
    font-size: 1.0625rem;
    line-height: 1.65;
    margin-bottom: 1.125rem;
  }

  .cles {
    gap: 0.5rem;
    margin-bottom: 1.375rem;
  }

  .cles span {
    padding: 0.4375rem 0.625rem;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
  }

  .offre__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
  }

  .offre__actions .bouton,
  .offre__actions .offre__plus,
  .offre__actions .offre__bande-annonce {
    min-height: 0;
    padding: 0.6875rem 1.375rem;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    line-height: 1.1;
  }

  .play-anneau {
    width: 1.375rem;
    height: 1.375rem;
    font-size: 0.5625rem;
  }

  .offre__details-texte {
    padding-top: 1.25rem;
  }

  .offre__details-texte p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .groupes {
    padding: 1.875rem 0 0;
  }

  .groupes h2 {
    font-size: 1.6875rem;
    letter-spacing: 0.08em;
  }

  .groupes p {
    max-width: 78ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.03rem;
    margin-bottom: 1.25rem;
  }
}

/* 10.9 Agenda des spectacles (titres de mois) et bloc « Toute la programmation en un clic » */
.mois-titre {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-or-vif);
  margin: 1.875rem var(--esp-3) 0.75rem;
  scroll-margin-top: 5.25rem;
}

.titre-section+.mois-titre {
  margin-top: 0;
}

.appel-calendrier {
  text-align: center;
  padding: 2.125rem var(--esp-3) 0;
}

.appel-calendrier h2 {
  font-size: 1.3125rem;
  letter-spacing: 0.1em;
  color: var(--c-ivoire);
  margin: 0 0 0.5rem;
}

.appel-calendrier p {
  margin: 0 0 1.125rem;
  color: var(--c-creme);
  font-size: 0.97rem;
}

.appel-calendrier .bouton {
  justify-content: center;
}

@media (max-width: 767px) {
  .appel-calendrier .bouton {
    display: flex;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .mois-titre {
    font-size: 1.5rem;
    letter-spacing: 0.16em;
    margin: 3.25rem 0 1.125rem;
    scroll-margin-top: 1.75rem;
  }

  .titre-section+.mois-titre {
    margin-top: 0.125rem;
  }

  .appel-calendrier {
    padding: clamp(3.125rem, 6vw, 5rem) 0 0;
  }

  .appel-calendrier h2 {
    font-size: 1.6875rem;
    letter-spacing: 0.14em;
  }

  .appel-calendrier p {
    font-size: 1.03rem;
    margin-bottom: 1.25rem;
    white-space: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .appel-calendrier p {
    white-space: normal;
  }
}

/* 10.10 Menu plein écran mobile (28 septembre) : espace marqué entre le logo du panneau et « Cinéma », rosace à la place du soleil,
   FR · EN et les réseaux ancrés en bas de l'écran (vide au-dessus sur un téléphone haut ; le menu défile sur un écran court). */
@media (max-width: 1023px) {
  .nav-principale__haut {
    margin-bottom: 2.875rem;
  }

  .nav-principale__soleil .separateur__motif img {
    height: 1.625rem;
  }

  .nav-langues {
    margin-top: auto;
    padding-top: 2.125rem;
  }

  .nav-principale__reseaux {
    margin-top: 0;
    padding-top: 0.75rem;
  }
}


/* ==========================================================================
   11. Fiche film — 30 septembre 2026
   Cases de séance à largeur fixe, étiquettes lisibles (VF / VOST en ivoire,
   formats en or), légende des salles cliquable.
   ========================================================================== */

/* 11.1 Cases de séance : largeur fixe de 336 px sur desktop et mobile. */
.page-film .seances-carres {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.75rem;
  margin: var(--esp-2) var(--esp-3);
  padding-bottom: 0;
  overflow: visible;
  scroll-snap-type: none;
}

.page-film .seance-carre {
  flex: 0 0 auto;
  width: min(21rem, 100%);
  min-width: 0;
  display: grid;
  grid-template-columns: 4.5rem minmax(3.5rem, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 4.75rem;
  padding: 0.6rem 0.8rem;
  scroll-snap-align: none;
}

.page-film .seance-carre__l1 {
  min-width: 0;
}

.page-film .seance-carre__salle {
  min-width: 0;
}

.page-film .seance-carre__logo {
  width: min(100%, 7.5rem);
  height: 2.5rem;
  max-height: 2.5rem;
  object-fit: contain;
  object-position: left center;
}

/* 11.2 VF / VOST en ivoire ; formats 4K, ATMOS, 70 MM et 35 MM en or. */
.page-film .seance-carre__l2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem 0.375rem;
  max-width: 12.5rem;
}

.page-film .seance-carre__version,
.page-film .seance-carre__format,
.page-film .seance-carre__classification {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  border: 1px solid rgba(250, 245, 232, 0.4);
  color: var(--c-ivoire);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.page-film .seance-carre__format {
  border-color: rgba(201, 165, 92, 0.55);
  color: var(--c-or-vif);
}

.page-film .seance-carre__classification {
  border-color: #D95359;
  color: #D95359;
  font-weight: 600;
}

.page-film .seance-carre__pmr {
  width: 0.9rem;
  height: 0.95rem;
  color: var(--c-creme);
  margin-left: 0.125rem;
}

.page-film .seance-carre:hover .seance-carre__version {
  border-color: var(--c-ivoire);
}

.page-film .seance-carre:hover .seance-carre__format {
  border-color: var(--c-or-vif);
}

.jours>a[data-jour].actif:hover {
  background: var(--c-or);
  border-color: var(--c-or);
  color: var(--c-noir);
}

/* 11.3 Légende des salles cliquable. */
.legende-salles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.9rem var(--esp-3) var(--esp-3);
  padding-bottom: 0;
  overflow: visible;
}

.legende-salles__item,
a.legende-salles__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.65rem 0.3rem 0.4rem;
  border: 1px solid var(--c-bord);
  color: var(--c-ivoire);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition);
}

.legende-salles__logo {
  display: grid;
  width: 3.5rem;
  height: 1.75rem;
  place-items: center;
}

.legende-salles__logo img {
  display: block;
  max-width: 3.5rem;
  max-height: 1.75rem;
  object-fit: contain;
}

a.legende-salles__item::after {
  content: "›";
  margin-left: 0.125rem;
  color: var(--c-or);
  font-size: 0.95rem;
  line-height: 1;
  transition: transform var(--transition);
}

a.legende-salles__item:hover,
a.legende-salles__item:focus-visible {
  border-color: var(--c-or);
  color: var(--c-or-vif);
}

a.legende-salles__item:hover::after {
  transform: translateX(2px);
}

@media (max-width: 767px) {
  .page-film .seances-carres {
    justify-content: center;
    gap: 0.5rem;
    margin: 0.8rem 1rem 0;
  }

  .page-film .seance-carre {
    grid-template-columns: 4rem minmax(3.25rem, 1fr) auto;
    gap: 0.5rem;
    min-height: 4.5rem;
    padding: 0.55rem 0.65rem;
  }

  .page-film .seance-carre__l2 {
    max-width: 11rem;
    gap: 0.25rem 0.3rem;
  }

  .page-film .seance-carre__version,
  .page-film .seance-carre__format,
  .page-film .seance-carre__classification {
    padding: 0.28rem 0.36rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }

  .legende-salles {
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0.9rem 1rem 1.4rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .legende-salles::-webkit-scrollbar {
    display: none;
  }

  .legende-salles__item,
  a.legende-salles__item {
    flex: 0 0 auto;
    font-size: 0.66rem;
  }
}

/* ==========================================================================
   12. Infos pratiques, Toute une histoire, Nos salles — validations du 2 au 5 octobre 2026 (voir CONSIGNES_SITE_2026-10-05)
   Bloc placé en fin de feuille : il prend le dessus sur les règles historiques de la page Infos (.page-infos du bloc 8) et sur le bloc 9.8.
   Toutes les valeurs sont celles des maquettes (1 rem = 16 px).
   ========================================================================== */

/* 12.0 Nos salles (accueil et page Cinéma) : sur un écran intermédiaire (tablette, 768 à 1300 px), trois cartes par rangée puis les deux
   dernières centrées dessous ; cinq cartes sur une rangée au-delà. Sur mobile, la disposition du bloc 9.8 ne change pas. */
@media (min-width: 768px) {
  .salles-home {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.125rem;
  }

  .salle-home {
    flex: 0 0 calc((100% - 2.25rem) / 3);
    min-width: 0;
  }
}

@media (min-width: 1301px) {
  .salle-home {
    flex-basis: calc((100% - 4.5rem) / 5);
  }
}

/* 12.1 Séparateurs de la page Infos pratiques : motifs recadrés au plus près (clé, €, fauteuil, i, bouclier, enveloppe),
   cercle de référence 48 px sur desktop et 38 px sur mobile (visuellement la taille des motifs de l'accueil, qui gardent une marge dans leur fichier) ;
   € réduit de 20 % (38 / 30 px), enveloppe 33 / 26 px. */
.separateur--cle .separateur__motif img,
.separateur--fauteuil .separateur__motif img,
.separateur--info .separateur__motif img,
.separateur--bouclier .separateur__motif img {
  height: 2.375rem;
}

.separateur--euro .separateur__motif img {
  height: 1.875rem;
}

.separateur--enveloppe .separateur__motif img {
  height: 1.625rem;
}

@media (min-width: 768px) {

  .separateur--cle .separateur__motif img,
  .separateur--fauteuil .separateur__motif img,
  .separateur--info .separateur__motif img,
  .separateur--bouclier .separateur__motif img {
    height: 3rem;
  }

  .separateur--euro .separateur__motif img {
    height: 2.375rem;
  }

  .separateur--enveloppe .separateur__motif img {
    height: 2.0625rem;
  }
}

/* 12.2 Infos pratiques (page validée le 5 octobre 2026 : Le_Grand_Rex_Infos_Pratiques_Test.html et Le_Grand_Rex_Infos_Pratiques_Mobile_Test.html).
   Le haut de page (héro, titre, accroche, sous-navigation) et les titres ornés sont ceux des autres rubriques (10.4). */
.page-infos .intro-section {
  max-width: 68.75rem;
  margin: -0.375rem auto 1.375rem;
  text-align: center;
  color: var(--c-creme);
  font-size: 1.03rem;
  line-height: 1.55;
}

/* Venir au Rex : quatre cartes centrées, logo au-dessus du titre doré, texte doux, bouton Maps en bas */
.page-infos .acces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
  margin: 0;
  border: 0;
  background: none;
}

.page-infos .acces__carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 1.75rem 1.375rem 1.625rem;
  border: 1px solid var(--c-bord-clair);
  background: var(--c-carte);
  text-align: center;
}

.page-infos .acces__carte h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.875rem;
  width: auto;
  min-height: 0;
  margin: 0 0 0.625rem;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 1.3125rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--c-or-vif);
}

.page-infos .acces__carte h3 img,
.page-infos img.logo-metro,
.page-infos img.logo-bus,
.page-infos img.logo-parking {
  display: block;
  width: auto;
  max-width: 7.5rem;
  height: 2.75rem;
  border-radius: 0;
  object-fit: contain;
}

.page-infos .acces__carte h3 .logo-couronne,
.page-infos .logo-couronne {
  width: auto;
  height: 3.25rem;
  margin-bottom: -0.375rem;
}

.page-infos .acces__carte p,
.page-infos .acces__metro {
  min-height: 0;
  margin: 0 0 0.25rem;
  color: var(--c-creme);
  font-size: 0.97rem;
  line-height: 1.55;
}

.page-infos .acces__metro .badge-ligne {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 0.125rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  vertical-align: middle;
}

.page-infos .acces__parkings {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-infos .acces__parking {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0;
}

.page-infos .acces__parking+.acces__parking {
  border-top: 1px solid var(--c-bord);
}

.page-infos .acces__parking-nom {
  font-size: 1.03rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ivoire);
}

.page-infos .acces__parking-adresse {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-gris);
}

.page-infos .acces__parking-lien {
  margin-top: 0.25rem;
  color: var(--c-champagne);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.page-infos .acces__parking-lien:hover {
  color: var(--c-or-vif);
}

.page-infos .acces__carte>.bouton--maps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: auto;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--c-bord-clair);
  background: none;
  color: var(--c-champagne);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.page-infos .acces__carte>.bouton--maps:hover {
  border-color: var(--c-or);
  color: var(--c-or-vif);
  background: none;
}

.page-infos .acces__carte>.bouton--maps img {
  width: auto;
  height: 1.25rem;
}

.page-infos .acces__carte>.popinfo {
  margin-top: auto;
  padding-top: 0.9rem;
}

/* Les tarifs : trois grilles de même largeur ; titre et sous-titre centrés, salles en petites cases, tableau calé en bas pour aligner les lignes de prix */
.page-infos .tarifs-grilles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
  align-items: stretch;
}

.page-infos .tarif-grille {
  display: flex;
  flex-direction: column;
  padding: 1.625rem 1.75rem 1.5rem;
  border: 1px solid var(--c-bord-clair);
  background: var(--c-carte);
}

.page-infos .tarif-grille--saison {
  background: linear-gradient(180deg, rgba(201, 165, 92, 0.08), rgba(201, 165, 92, 0)), var(--c-carte);
}

.page-infos .tarif-grille h3 {
  margin: 0 0 0.25rem;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-align: center;
  color: var(--c-or-vif);
}

.page-infos .tarif-grille__sous {
  margin: 0 0 0.875rem;
  text-align: center;
  color: var(--c-gris);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.page-infos .tarif-grille__salles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.page-infos .tarif-grille--saison .tarif-grille__salles {
  grid-template-columns: 1fr;
}

.page-infos .tarif-grille__salles span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.125rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--c-bord);
  color: var(--c-champagne);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.page-infos .tarif-grille table {
  width: 100%;
  margin-top: auto;
  border-collapse: collapse;
}

.page-infos .tarif-grille th {
  padding: 0 0 0.5rem;
  border: 0;
  background: none;
  color: var(--c-champagne);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-align: right;
  text-transform: uppercase;
}

.page-infos .tarif-grille td {
  padding: 0.6875rem 0;
  border: 0;
  border-top: 1px solid var(--c-bord);
  background: none;
  color: var(--c-creme);
  font-size: 1rem;
  text-align: left;
}

.page-infos .tarif-grille td.prix {
  padding-left: 1.125rem;
  color: var(--c-ivoire);
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.page-infos .tarif-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem 2.25rem;
  margin: 1.375rem 0 0;
}

.page-infos .tarif-notes p {
  margin: 0;
  color: var(--c-creme);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.page-infos .tarif-notes b,
.page-infos .tarif-notes strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--c-champagne);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Accessibilité : texte justifié dans une colonne centrée, comme la présentation des salles */
.page-infos .texte-centre {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--c-creme);
  font-size: 1.125rem;
  line-height: 1.7;
  text-align: justify;
  hyphens: none;
}

.page-infos .texte-centre p {
  margin: 0 0 1em;
}

.page-infos .texte-centre p:last-child {
  margin-bottom: 0;
}

/* Questions fréquentes (deux colonnes) et règlement (une colonne) : accordéons à filet, icône + / − dorée, une seule question ouverte à la fois */
.page-infos .plis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.25rem;
  align-items: start;
}

.page-infos .plis--une {
  grid-template-columns: 1fr;
  max-width: 68.75rem;
  margin: 0 auto;
}

.page-infos .pli {
  border: 0;
  border-bottom: 1px solid var(--c-bord);
  background: none;
}

.page-infos .pli summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  padding: 0.9375rem 0.125rem;
  list-style: none;
  cursor: pointer;
  color: var(--c-ivoire);
  font-size: 1.03rem;
  line-height: 1.4;
}

.page-infos .pli summary::-webkit-details-marker {
  display: none;
}

.page-infos .pli summary::after {
  content: none;
}

.page-infos .pli summary:hover,
.page-infos .pli[open] summary {
  color: var(--c-or-vif);
}

.page-infos .pli summary i {
  position: relative;
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--c-bord-clair);
  color: var(--c-or);
}

.page-infos .pli summary i::before,
.page-infos .pli summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  left: 5px;
  height: 1px;
  background: currentColor;
}

.page-infos .pli summary i::after {
  transform: rotate(90deg);
  transition: transform 0.25s ease;
}

.page-infos .pli[open] summary i::after {
  transform: rotate(0);
}

.page-infos .pli__corps {
  padding: 0 2.75rem 1.125rem 0.125rem;
  color: var(--c-creme);
  font-size: 0.97rem;
  line-height: 1.65;
}

.page-infos .pli__corps p {
  margin: 0 0 0.7em;
}

.page-infos .pli__corps ul,
.page-infos .pli__corps ol {
  margin: 0 0 0.7em;
  padding-left: 1.3em;
}

.page-infos .pli__corps li {
  margin-bottom: 0.35em;
}

.page-infos .pli__corps li+li {
  margin-top: 0;
}

.page-infos .pli__corps a {
  color: var(--c-champagne);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-infos .pli__corps> :last-child {
  margin-bottom: 0;
}

/* Contact : formulaire sur deux colonnes dans une largeur de 1100 px, champs sur fond carte, bouton Envoyer en or */
.page-infos .formulaire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.375rem;
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
}

.page-infos .formulaire>.champ,
.page-infos .formulaire>.champs-demi,
.page-infos .formulaire>.formulaire__note,
.page-infos .formulaire>.bouton,
.page-infos .formulaire>.visuellement-cache {
  grid-column: 1 / -1;
}

.page-infos .formulaire>.champ:has(#ct-verif) {
  grid-column: 1 / 2;
}

.page-infos .champs-demi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.375rem;
}

.page-infos .champ {
  display: grid;
  gap: 0.375rem;
}

.page-infos .champ label {
  color: var(--c-gris);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-infos .formulaire input,
.page-infos .formulaire select,
.page-infos .formulaire textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--c-bord-clair);
  border-radius: 0;
  background: var(--c-carte);
  color: var(--c-ivoire);
  font-family: inherit;
  font-size: 1rem;
}

.page-infos .formulaire select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23C9A55C' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}

.page-infos .formulaire textarea {
  min-height: 10rem;
  resize: vertical;
}

.page-infos .formulaire input:focus,
.page-infos .formulaire select:focus,
.page-infos .formulaire textarea:focus {
  border-color: var(--c-or);
  outline: 0;
}

.page-infos .formulaire input::placeholder {
  color: var(--c-gris);
}

.page-infos .formulaire__note {
  margin: 0.125rem 0 0;
  color: var(--c-gris);
  font-size: 0.875rem;
  line-height: 1.55;
}

.page-infos .formulaire .bouton--plein {
  justify-self: start;
  padding: 0.8125rem 2.125rem;
  border: 0;
  background: var(--c-or);
  color: var(--c-noir);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-infos .formulaire .bouton--plein:hover {
  background: var(--c-champagne);
  color: var(--c-noir);
}

/* Tablette (768 à 1100 px) : accès sur deux colonnes, les deux grilles côte à côte et la Féerie centrée dessous à la même largeur, accordéons sur une colonne */
@media (max-width: 1100px) {
  .page-infos .acces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-infos .tarifs-grilles {
    grid-template-columns: 1fr 1fr;
  }

  .page-infos .tarif-grille--saison {
    grid-column: 1 / -1;
    width: calc(50% - 0.5625rem);
    justify-self: center;
  }

  .page-infos .tarif-grille--saison th {
    display: none;
  }

  .page-infos .plis {
    grid-template-columns: 1fr;
  }
}

/* Mobile : tout en une colonne, textes un peu plus petits, bouton Envoyer pleine largeur */
@media (max-width: 767px) {
  .page-infos .intro-section {
    margin: -0.25rem 0 1rem;
    font-size: 0.97rem;
  }

  .page-infos .acces {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .page-infos .acces__carte {
    padding: 1.375rem 1.125rem 1.25rem;
  }

  .page-infos .acces__carte h3 {
    font-size: 1.25rem;
    gap: 0.625rem;
  }

  .page-infos .acces__carte h3 img,
  .page-infos img.logo-metro,
  .page-infos img.logo-bus,
  .page-infos img.logo-parking {
    height: 2.5rem;
  }

  .page-infos .acces__carte h3 .logo-couronne,
  .page-infos .logo-couronne {
    height: 2.875rem;
  }

  .page-infos .tarifs-grilles {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .page-infos .tarif-grille,
  .page-infos .tarif-grille--saison {
    width: auto;
    padding: 1.25rem 1.125rem 1rem;
  }

  .page-infos .tarif-grille h3 {
    font-size: 1.21875rem;
  }

  .page-infos .tarif-grille__sous {
    font-size: 0.84rem;
    margin-bottom: 0.75rem;
  }

  .page-infos .tarif-grille__salles {
    gap: 0.4375rem;
    margin-bottom: 1rem;
  }

  .page-infos .tarif-grille__salles span {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  .page-infos .tarif-grille td {
    padding: 0.625rem 0;
    font-size: 0.9375rem;
  }

  .page-infos .tarif-grille td.prix {
    font-size: 0.9375rem;
    padding-left: 0.875rem;
  }

  .page-infos .tarif-notes {
    grid-template-columns: 1fr;
    gap: 0.875rem;
    margin-top: 1rem;
  }

  .page-infos .tarif-notes p {
    font-size: 0.9rem;
  }

  .page-infos .texte-centre {
    font-size: 0.97rem;
  }

  .page-infos .pli summary {
    padding: 0.8125rem 0;
    font-size: 0.97rem;
  }

  .page-infos .pli__corps {
    padding: 0 2.25rem 1rem 0;
    font-size: 0.9375rem;
  }

  .page-infos .formulaire {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }

  .page-infos .formulaire>.champ:has(#ct-verif) {
    grid-column: 1 / -1;
  }

  .page-infos .champs-demi {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }

  .page-infos .champ label {
    font-size: 0.75rem;
  }

  .page-infos .formulaire input,
  .page-infos .formulaire select,
  .page-infos .formulaire textarea {
    min-height: 2.875rem;
  }

  .page-infos .formulaire .bouton--plein {
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}

/* 12.3 Toute une histoire (validée le 5 octobre 2026 : Le_Grand_Rex_Histoire_Test.html et Le_Grand_Rex_Histoire_Mobile_Test.html) :
   haut de page au format des autres rubriques (héro photo de scène à hauteur fixe, titre, accroche, séparateur rosace), puis le contenu
   de la page (composition .histoire-complete) inchangé. Le paragraphe d'ouverture de 1932, qui tenait lieu d'accroche dans l'ancien héro,
   ouvre le récit sous le séparateur. */
.page-histoire-complete .histoire-complete,
.page-histoire-complete .histoire-evenements__grille,
.page-histoire-complete .histoire-evenements__actions {
  margin-inline: 0;
}

.page-histoire-complete .histoire-complete {
  margin-top: 0;
}

.page-histoire-complete .histoire-evenements .titre-section {
  margin-inline: 0;
}

.page-histoire-complete .histoire-complete__panorama {
  margin-inline: 0;
}

.page-histoire-complete .histoire-complete__intro {
  max-width: 70rem;
  margin: 2.25rem auto 0;
  color: var(--c-creme);
  font-size: 1.03rem;
  line-height: 1.8;
}

.page-histoire-complete .histoire-complete__periode--ouverture {
  padding-top: 1.5rem;
}

@media (max-width: 767px) {
  .page-histoire-complete .histoire-complete {
    margin-inline: 0;
  }

  .page-histoire-complete .histoire-complete__intro {
    margin-top: 1.5rem;
    font-size: 0.97rem;
  }
}