/* =========================================================
   Théâtre Les 3 Soleils — feuille de style principale
   Fond et palette repris du site d'origine (les3soleils.fr)
   ========================================================= */

:root {
  --noir: #000000;
  --texte: #e3e3e3;
  --blanc: #ffffff;
  --accent: #ff8800; /* orange d'accent : textes, lignes, icônes */
  --accent-lien: #ff991c; /* orange des liens */
  --rouge-fonce: #3a0606;
  /* boutons : dégradé rouge → orange du site d'origine */
  --degrade: linear-gradient(90deg, #3a0606 0%, #a3100a 45%, #d42a0a 75%, #ff5a00 100%);
  --panneau: rgba(0, 0, 0, 0.72);
  --bordure: rgba(255, 136, 0, 0.25);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --largeur: 1180px;
}

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

html {
  scroll-behavior: smooth;
  /* empêche iOS d'agrandir le texte tout seul en mode paysage */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* place de la barre de défilement toujours réservée : la page ne bouge pas quand la fiche
     d'un spectacle s'ouvre et bloque le défilement derrière elle */
  scrollbar-gutter: stable;
}
html.fiche-ouverte { overflow: hidden; }

/* Fondu enchaîné entre les pages du site (Chrome, Edge, Safari récents ; les autres navigateurs
   changent de page normalement). L'en-tête reste en place pendant le fondu.
   Ne fonctionne qu'avec le site en ligne ou servi en local, pas en ouvrant le fichier en double-clic. */
@view-transition { navigation: auto; }
.entete { view-transition-name: entete; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Les longues adresses e-mail peuvent passer à la ligne (sinon débordement sur petit téléphone) */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Les blocs des grilles peuvent rétrécir sous la largeur de leur contenu */
.grille > *,
.grille-theatres > *,
.grille-spectacles > * { min-width: 0; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
  background-color: var(--noir);
}

/* Le fond du site d'origine : la salle aux fauteuils rouges, fixe et plein écran.
   Un pseudo-élément fixe remplace background-attachment: fixed (mal géré sur mobile). */
body::before {
  content: "";
  position: fixed;
  /* Hauteur de l'écran barre d'adresse rétractée (lvh), et non « inset: 0 » : sur téléphone,
     la barre qui apparaît ou disparaît au défilement ne change plus la taille du fond,
     qui sinon bougeait puis revenait en place. 100vh pour les navigateurs qui ignorent lvh. */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  /* calque à part : le fond ne tremble pas pendant le défilement */
  transform: translateZ(0);
  /* Photo en pleine résolution (WebP léger si le navigateur le gère, sinon JPEG).
     Voile noir par-dessus pour l'assombrir : augmenter .35 pour plus sombre. */
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image:
    linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)),
    url("../images/fond.jpg");
  background-image:
    linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)),
    image-set(url("../images/fond.webp") type("image/webp"), url("../images/fond.jpg") type("image/jpeg"));
  /* couleurs plus vives (1 = normal) */
  filter: saturate(1.35);
}

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

a { color: var(--accent-lien); font-weight: bold; }
a:hover { text-decoration: none; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--noir);
  border-bottom: 1px solid #1a1a1a;
}

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

.logo {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--blanc);
  text-decoration: none;
  white-space: nowrap;
  /* invisible tant que le script n'a pas posé le bon nom (classe logo-pret sur <html>),
     puis apparition en fondu. Filet de sécurité : visible d'office après 1,5 s si le script échoue. */
  opacity: 0;
  animation: logo-secours .01s 1.5s forwards;
}
html.logo-pret .logo {
  opacity: 1;
  animation: none;
  transition: opacity .3s;
}
.logo span { color: inherit; } /* tout le logo en blanc (remettre var(--accent) pour mettre la 2e partie en couleur d'accent) */
@keyframes logo-secours { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.logo-pret .logo { transition: none; }
}

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu > li { position: relative; }

.menu a {
  display: block;
  padding: 10px 16px;
  color: var(--blanc);
  font-weight: normal;
  text-decoration: none;
  letter-spacing: .5px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}

.menu a:hover,
.menu a.actif { color: var(--accent); border-bottom-color: var(--accent); }

/* sous-menu Archives */
.menu .sous-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: var(--noir);
  border: 1px solid #222;
}
.menu li:hover > .sous-menu,
.menu li:focus-within > .sous-menu { display: block; }
.menu .sous-menu a { border: 0; padding: 8px 18px; }

.bouton-menu {
  display: none;
  background: none;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
}
.bouton-menu span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: var(--blanc);
}

/* Bouton « mode jour », à droite du menu : soleil en mode nuit, lune en mode jour.
   Le logo est poussé à gauche : le menu et le bouton restent groupés à droite. */
.logo { margin-right: auto; }
.bouton-theme {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  padding: 0;
  color: var(--blanc);
  background: none;
  border: 1px solid #444;
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.bouton-theme:hover { color: var(--accent); border-color: var(--accent); }
.bouton-theme:focus:not(:focus-visible) { outline: none; }
.bouton-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bouton-theme svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bouton-theme .icone-nuit,
html.jour .bouton-theme .icone-jour { display: none; }
html.jour .bouton-theme .icone-nuit { display: block; }

/* ---------- Bandeau d'accueil ---------- */
.bandeau {
  min-height: calc(100vh - 76px);
  /* sur mobile : hauteur stable même quand la barre d'adresse apparaît / disparaît */
  min-height: calc(100svh - 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 28vh;
}

.bandeau h1 {
  margin: 0 0 10px;
  font-size: clamp(36px, 7vw, 76px);
  line-height: 1.05;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--blanc);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .9);
}

/* Les 3 noms de théâtres sur une ligne, séparés par un point d'accent, dans la police du titre.
   La taille suit la largeur de l'écran pour que la ligne tienne toujours. */
.bandeau h1.noms-theatres {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 .45em;
  margin-bottom: 18px;
  font-size: clamp(22px, 3.2vw, 50px);
  line-height: 1.1;
  letter-spacing: .1em;
}
.noms-theatres .sep { color: var(--accent); letter-spacing: 0; }

/* Téléphone (portrait) : une seule ligne serait illisible, on repasse les noms l'un sous l'autre */
@media (max-width: 760px) {
  .bandeau h1.noms-theatres {
    flex-direction: column;
    align-items: center;
    gap: .12em;
    font-size: clamp(22px, min(6.5vw, 8vh), 40px);
  }
  .noms-theatres .sep { display: none; }
}
.noms-theatres a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.noms-theatres a:hover { color: var(--accent); }

.bandeau p {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--accent);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

.fleche {
  margin-top: 36px;
  animation: rebond 2s infinite;
}
.fleche img { width: 58px; height: auto; }

@keyframes rebond {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

/* Écrans peu hauts (téléphone à l'horizontale) : on resserre pour garder la flèche visible */
@media (max-height: 500px) {
  .bandeau { padding: 20px 24px 28px; }
  .bandeau h1.noms-theatres { margin-bottom: 10px; }
  .fleche { margin-top: 14px; }
  .fleche img { width: 44px; }
}

/* ---------- Sections ---------- */
main { flex: 1; }

.section { padding: 70px 0; }

/* Quand la page défile jusqu'à une section (flèche, descente automatique, liens du menu),
   elle s'arrête sous l'en-tête fixe au lieu de glisser dessous */
.section[id] { scroll-margin-top: 43px; }

.titre-section {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-align: center;
  color: var(--blanc);
}

.sous-titre {
  margin: 0 auto 36px;
  max-width: 640px;
  text-align: center;
  color: var(--texte);
}
/* phrase un peu plus longue gardée sur une seule ligne (elle repasse à la ligne sur téléphone) */
.sous-titre.une-ligne { max-width: none; }

.titre-salle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 56px 0 24px;
  padding-bottom: 10px;
  font-size: 30px;
  color: var(--blanc);
  border-bottom: 2px solid var(--accent);
}

/* Équipements de la salle, tout à droite de la ligne : sièges · accès PMR · climatisation */
.equipements {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: normal;
}
.equipement {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--texte);
  cursor: default;
  outline: none;
}
.equipement svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.equipement svg .plein { fill: var(--accent); stroke: none; }

/* Infobulle au survol, au toucher (focus) ou au clavier */
.equipement::after {
  content: attr(data-info);
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: max-content;
  max-width: 230px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  color: var(--blanc);
  background: #1a1a1a;
  border: 1px solid var(--accent);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.equipement:hover::after,
.equipement:focus::after { opacity: 1; }
.equipement:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Nom du théâtre : même typographie que les trois noms de l'accueil (sans-serif gras,
   majuscules, lettres espacées), dans un encadré qui épouse la largeur du texte */
.titre-theatre {
  width: fit-content;
  max-width: 100%;
  margin: 64px auto 0;
  padding: 14px 38px;
  font-family: var(--sans);
  font-size: clamp(18px, 4.6vw, 34px);
  font-weight: bold;
  line-height: 1.15;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent);
  background: rgba(0, 0, 0, .84);
  border: 2px solid var(--accent);
  border-radius: 8px;
}
/* le nom seul s'anime au changement de théâtre, le cadre reste en place */
.titre-theatre span { display: inline-block; }

.titre-theatre + .a-venir { margin-top: 24px; }

.a-venir { text-align: center; }
.a-venir h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--blanc);
}
.a-venir p { margin: 0; }

.panneau {
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 32px;
}

/* ---------- Filtres du programme ---------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.filtre {
  padding: 9px 20px;
  font: inherit;
  color: var(--blanc);
  background: rgba(0, 0, 0, .7);
  border: 1px solid #555;
  border-radius: 30px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.filtre:hover { border-color: var(--accent); }
/* « border-box » : le dégradé couvre aussi la bordure transparente, sinon il s'y répète
   et laisse un fin trait de couleur claire sur le bord gauche du bouton sélectionné */
.filtre.actif { background: var(--degrade) border-box; border-color: transparent; }

/* Pas de contour au clic de souris ; contour d'accent seulement à la navigation au clavier */
.filtre:focus:not(:focus-visible),
.puce:focus:not(:focus-visible),
.bouton-filtres:focus:not(:focus-visible) { outline: none; }
.filtre:focus-visible,
.puce:focus-visible,
.bouton-filtres:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Outils du programme : théâtres + recherche + filtres ---------- */
/* Le bloc prend la largeur de la rangée de théâtres : la recherche s'aligne
   à gauche sur « Tous les théâtres » et le bouton Filtres à droite sur le dernier théâtre. */
.outils-programme {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.recherche {
  display: flex;
  gap: 10px;
  margin: 8px 0 10px;
}

.recherche input {
  flex: 1;
  min-width: 0;
  padding: 12px 22px 12px 48px;
  font: inherit;
  font-size: 15px;
  color: var(--blanc);
  background: rgba(0, 0, 0, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 18px center;
  border: 1px solid #555;
  border-radius: 30px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.recherche input::placeholder { color: #9a9a9a; }
.recherche input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 136, 0, .2);
}

.bouton-filtres {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 0 22px 0 44px;
  font: inherit;
  font-size: 15px;
  color: var(--blanc);
  background: rgba(0, 0, 0, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") no-repeat 18px center;
  border: 1px solid #555;
  border-radius: 30px;
  cursor: pointer;
  transition: border-color .2s;
}
.bouton-filtres:hover,
.bouton-filtres.ouvert { border-color: var(--accent); }

.compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: bold;
  background: var(--degrade);
  border-radius: 11px;
}
.compteur[hidden] { display: none; }

.panneau-filtres {
  margin: 0 0 10px;
  padding: 18px 22px;
  background: rgba(0, 0, 0, .8);
  border: 1px solid #444;
  border-radius: 18px;
}
.panneau-filtres[hidden] { display: none; }

.groupe-filtres + .groupe-filtres { margin-top: 14px; }
.groupe-filtres h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9a9a9a;
}

.puces { display: flex; flex-wrap: wrap; gap: 8px; }

.puce {
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--blanc);
  background: transparent;
  border: 1px solid #555;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color .2s;
}
.puce:hover { border-color: var(--accent); }
.puce.actif { background: var(--degrade) border-box; border-color: transparent; }

.reinitialiser {
  display: block;
  margin: 14px 0 0 auto;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--accent-lien);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.reinitialiser:hover { text-decoration: none; }

/* ---------- Fiches spectacles ---------- */
/* 2 colonnes, remplies ligne par ligne : 1er spectacle à gauche, 2e à droite… */
.grille-spectacles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.spectacle {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: start;
  gap: 22px;
  padding: 20px;
  /* cadre un peu plus opaque que les autres panneaux (fond .72 → .84, bordure .25 → .45) */
  background: rgba(0, 0, 0, .84);
  border: 1px solid rgba(255, 136, 0, .45);
  border-radius: 8px;
  transition: border-color .25s, transform .25s;
}
.spectacle:hover { border-color: rgba(255, 136, 0, .85); transform: translateY(-2px); }
.spectacle { cursor: pointer; } /* un clic ouvre la fiche détaillée */

/* Texte de la carte sur toute sa hauteur : les tarifs et les boutons sont poussés en bas,
   à la même hauteur que ceux du spectacle d'à côté (les cartes d'une rangée ont la même hauteur) */
.spectacle-infos {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.spectacle-infos > .horaire { align-self: flex-start; }
.spectacle-infos > .tarifs,
.spectacle-infos > p + .actions { margin-top: auto; } /* sans tarifs, les boutons seuls en bas */

.spectacle-affiche {
  position: relative;
  overflow: hidden;
  aspect-ratio: 798 / 950; /* format des affiches du festival Off */
  border-radius: 4px;
  background: #151515;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
}
.spectacle-affiche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.spectacle:hover .spectacle-affiche img { transform: scale(1.04); }

/* « Voir la fiche » sur l'affiche, au survol */
.voir-fiche {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 8px 10px;
  font-size: 12px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  color: var(--blanc);
  background: linear-gradient(transparent, rgba(0, 0, 0, .88));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
.spectacle:hover .voir-fiche,
.spectacle:focus-within .voir-fiche { opacity: 1; transform: none; }
@media (hover: none) { .voir-fiche { display: none; } }

.spectacle h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--accent);
}
/* titre cliquable (et accessible au clavier) */
.ouvrir-fiche {
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.ouvrir-fiche:focus:not(:focus-visible) { outline: none; }
.ouvrir-fiche:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Spectacle sans affiche (ajouté au tableur avant d'avoir son image) : le titre sur fond sombre */
.sans-affiche {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  color: var(--accent);
  background: radial-gradient(circle at 50% 30%, #3a0606, #0d0d0d 75%);
}
.fiche .sans-affiche { font-size: 30px; padding: 28px; }

/* Programme en cours de lecture (première visite avec le tableur) */
.chargement-programme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 140px;
  color: var(--texte);
}
.chargement-programme::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 136, 0, .22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fiche-tourne .8s linear infinite;
}

/* Page verification-tableur.html */
.grille-verification { display: grid; gap: 20px; }
.verif h2 { margin: 0 0 4px; font-family: var(--serif); font-size: 20px; color: var(--accent); }
.verif ul { margin: 10px 0 0; padding: 0; list-style: none; }
.verif li { position: relative; margin: 6px 0; padding-left: 28px; }
.verif li::before { position: absolute; left: 0; top: 0; width: 20px; font-weight: bold; text-align: center; }
.verif-ok::before { content: "✓"; color: #5cc96b; }
.verif-attention::before { content: "!"; color: var(--accent); }
.verif-erreur::before { content: "✕"; color: #ff4d3d; }
.verif-erreur { color: #ffb3aa; }
.relire { margin-top: 24px; text-align: center; }
.relire .bouton { cursor: pointer; font: inherit; }

.lire-suite { font-weight: bold; color: var(--accent-lien); white-space: nowrap; }
.lire-suite::after { content: " ›"; }
.spectacle:hover .lire-suite { text-decoration: underline; }

.horaire {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 12px;
  font-size: 14px;
  color: var(--blanc);
  background: rgba(255, 136, 0, .15);
  border: 1px solid rgba(255, 136, 0, .4);
  border-radius: 20px;
}

.genres {
  display: block;
  margin: -6px 0 12px;
  font-size: 13px;
  color: #bdbdbd;
}
/* Auteur, mise en scène ou compagnie (archives), sous l'horaire */
.credits {
  display: block;
  margin: -6px 0 10px;
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
  color: #d9d9d9;
}
.credits + .genres { margin-top: 0; }

/* Jours de représentation (« Du 3 au 25 juillet, relâche… »), sous l'horaire */
.dates {
  display: block;
  margin: -6px 0 8px;
  padding-left: 21px;
  font-size: 13px;
  line-height: 1.45;
  color: #d9d9d9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8800' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat 0 2px / 14px 14px;
}
.dates + .genres { margin-top: 0; }

.spectacle p { margin: 0 0 18px; font-size: 15px; line-height: 1.55; }

.tarifs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 136, 0, .25);
  border-bottom: 1px solid rgba(255, 136, 0, .25);
  font-size: 14px;
}
.tarif strong {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--accent);
  margin-right: 4px;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Boutons : dégradé rouge → orange du site d'origine */
.bouton {
  display: inline-block;
  padding: 10px 26px;
  font-weight: normal;
  color: var(--blanc);
  text-decoration: none;
  background: var(--degrade);
 
  border: 0;
  border-radius: 4px;
  transition: filter .2s, background .2s;
}
.bouton:hover { filter: brightness(1.2); }

.bouton.secondaire { background: #333c44; }
.bouton.secondaire:hover { background: #13161a; filter: none; }

/* ---------- Fiche détaillée (fenêtre ouverte au clic sur un spectacle) ---------- */
.fiche {
  width: min(1040px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
  color: var(--texte);
  background: rgba(10, 10, 10, .97);
  border: 1px solid rgba(255, 136, 0, .45);
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .85);
}
.fiche[open] {
  display: flex;
  flex-direction: column;
  animation: fiche-entree .4s cubic-bezier(.2, .8, .2, 1);
}
.fiche::backdrop {
  background: rgba(0, 0, 0, .75);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.fiche[open]::backdrop { animation: fiche-fond-entree .3s ease; }
.fiche.fermeture { animation: fiche-sortie .22s ease-in forwards; }
.fiche.fermeture::backdrop { animation: fiche-fond-sortie .22s ease-in forwards; }

@keyframes fiche-entree { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@keyframes fiche-sortie { to { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes fiche-fond-entree { from { opacity: 0; } }
@keyframes fiche-fond-sortie { to { opacity: 0; } }

.fiche-defilement {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px;
}
.fiche-defilement:focus { outline: none; } /* reçoit le focus à l'ouverture : les flèches du clavier font défiler la fiche */
.fiche-corps {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.fiche-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--blanc);
  background: rgba(0, 0, 0, .7);
  border: 1px solid rgba(255, 136, 0, .5);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .25s;
}
.fiche-fermer::before,
.fiche-fermer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  background: currentColor;
  transform: rotate(45deg);
}
.fiche-fermer::after { transform: rotate(-45deg); }
.fiche-fermer:hover { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.fiche-fermer:focus:not(:focus-visible) { outline: none; }
.fiche-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Encadré de l'affiche et son animation de chargement :
   miniature floutée + reflet qui balaie l'encadré + anneau orange + bordure qui pulse,
   puis l'affiche en grand apparaît en se précisant (flou → net). */
.fiche-affiche {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 798 / 950;
  background: #121212;
  border: 1px solid rgba(255, 136, 0, .45);
  border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .7);
}
.fiche-affiche.chargement { animation: fiche-bordure 1.5s ease-in-out infinite; }
.fiche-affiche img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fiche-flou {
  filter: blur(16px) brightness(.5) saturate(1.2);
  transform: scale(1.12);
  transition: filter .6s, transform .6s;
}
.fiche-affiche.erreur .fiche-flou { filter: none; transform: none; } /* affiche indisponible : miniature nette */
.fiche-grande {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.06);
  transition: opacity .55s ease, filter .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
}
.fiche-affiche.chargee .fiche-grande { opacity: 1; filter: blur(0); transform: none; }

.fiche-affiche::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 170, 80, .22) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: fiche-reflet 1.5s ease-in-out infinite;
  transition: opacity .4s;
}
.fiche-affiche:not(.chargement)::after { opacity: 0; }

.fiche-chargeur {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  transition: opacity .35s, transform .35s, visibility 0s .35s;
}
.fiche-chargeur::before {
  content: "";
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 136, 0, .22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fiche-tourne .8s linear infinite;
}
.fiche-affiche:not(.chargement) .fiche-chargeur { opacity: 0; visibility: hidden; transform: scale(.85); }

@keyframes fiche-reflet { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes fiche-tourne { to { transform: rotate(360deg); } }
@keyframes fiche-bordure {
  0%, 100% { border-color: rgba(255, 136, 0, .3); }
  50% { border-color: rgba(255, 136, 0, .95); }
}

/* Textes de la fiche */
.fiche-lieu {
  margin: 0 0 6px;
  padding-right: 40px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #bdbdbd;
}
.fiche h2 {
  margin: 0 0 12px;
  padding-right: 40px;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.15;
  color: var(--accent);
}
.fiche .genres { margin: 2px 0 18px; }
.fiche h3 {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}
.fiche-texte p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; }
.fiche-texte { margin-bottom: 8px; }

/* lignes grises animées pendant le chargement du texte complet */
.fiche-squelette span {
  display: block;
  height: 12px;
  margin: 12px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .06) 70%) 0 0 / 300% 100%;
  animation: fiche-squelette 1.3s linear infinite;
}
.fiche-squelette span:nth-child(2) { width: 92%; }
.fiche-squelette span:nth-child(3) { width: 68%; }
@keyframes fiche-squelette { from { background-position: 100% 0; } to { background-position: 0 0; } }

.apparition { animation: fiche-apparition .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes fiche-apparition { from { opacity: 0; transform: translateY(8px); } }

.fiche-presse { display: grid; gap: 14px; margin: 6px 0 24px; }
.fiche-presse figure { margin: 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--accent); }
.fiche-presse blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.4;
  color: var(--blanc);
}
.fiche-presse figcaption { margin-top: 4px; font-size: 13px; font-weight: bold; color: var(--accent); }

.fiche-distribution { margin: 0 0 22px; }
.fiche-distribution dl { display: grid; gap: 6px; margin: 0; }
.fiche-distribution dl div { display: grid; grid-template-columns: 170px 1fr; gap: 14px; }
.fiche-distribution dt { color: #bdbdbd; }
.fiche-distribution dd { margin: 0; color: var(--blanc); }
.fiche-a-venir { margin: 0; font-style: italic; color: #9a9a9a; }

/* Bande-annonce : façade (rien n'est chargé chez YouTube/Vimeo avant le clic sur « Lire ») */
.fiche-video { grid-column: 1 / -1; }
.video-cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 136, 0, .45);
  border-radius: 6px;
}
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cadre.chargement::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(255, 136, 0, .22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fiche-tourne .8s linear infinite;
}
.video-lancer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 0;
  font: inherit;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--blanc);
  background: #000;
  border: 0;
  cursor: pointer;
}
.video-lancer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(.45);
  transform: scale(1.2);
}
.video-icone {
  position: relative;
  width: 74px;
  height: 74px;
  background: var(--degrade);
  border-radius: 50%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
  transition: transform .25s;
}
.video-icone::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -7px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--blanc);
}
.video-texte { position: relative; }
.video-lancer:hover .video-icone { transform: scale(1.08); }
.video-lancer:focus:not(:focus-visible) { outline: none; }
.video-lancer:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Téléphone : la fiche prend tout l'écran et arrive par le bas */
@media (max-width: 700px) {
  .fiche {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .fiche[open] { animation-name: fiche-entree-mobile; }
  .fiche.fermeture { animation-name: fiche-sortie-mobile; }
  .fiche-defilement { padding: 64px 16px 28px; }
  .fiche-corps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fiche-affiche { width: 100%; max-width: 260px; margin: 0 auto; }
  .fiche h2 { font-size: 27px; padding-right: 0; }
  .fiche-lieu { padding-right: 0; }
  .fiche-distribution dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@keyframes fiche-entree-mobile { from { opacity: 0; transform: translateY(40px); } }
@keyframes fiche-sortie-mobile { to { opacity: 0; transform: translateY(40px); } }

@media (prefers-reduced-motion: reduce) {
  .fiche[open], .fiche[open]::backdrop, .fiche.fermeture, .fiche.fermeture::backdrop,
  .apparition, .fiche-affiche.chargement, .fiche-affiche::after, .fiche-squelette span { animation: none; }
  .fiche-grande, .fiche-flou { transform: none; transition: opacity .2s; }
}

/* ---------- Grilles génériques ---------- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.carte {
  padding: 24px;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: 8px;
}
.carte h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--accent);
}
.carte p { margin: 0; }

.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .grille-3 { grid-template-columns: 1fr; }
}

/* Citations de presse */
.citation {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  border-left: 3px solid var(--accent);
}
.citation blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  line-height: 1.4;
  color: var(--blanc);
}
.citation figcaption { font-size: 14px; color: var(--texte); }
.citation figcaption strong { color: var(--accent); }
/* nom du journal en lien vers l'article (page Presse et fiche détaillée) */
.citation figcaption a,
.fiche-presse figcaption a { color: inherit; text-decoration: none; }
.citation figcaption a:hover,
.fiche-presse figcaption a:hover { text-decoration: underline; }

.annee {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--blanc);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.annee:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Archives : sélecteur d'année, puis le programme de l'année choisie ---------- */
.filtres[hidden],
.recherche[hidden],
.outils-programme[hidden] { display: none; }
/* sans sélecteur de théâtre (un seul théâtre cette année-là), la recherche garde une bonne largeur */
.outils-programme:has(> .filtres[hidden]) { width: min(620px, 100%); }
.recherche { justify-content: center; } /* année sans programme : le menu de l'année seul, centré */

/* Menu de l'année, à droite de la recherche (même allure que le bouton « Filtres ») */
.choix-annee {
  flex-shrink: 0;
  min-width: 118px;
  padding: 0 44px 0 22px;
  font: inherit;
  font-size: 15px;
  font-weight: bold;
  color: var(--blanc);
  background: rgba(0, 0, 0, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center;
  border: 1px solid #555;
  border-radius: 30px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s;
}
.choix-annee:hover,
.choix-annee:focus { border-color: var(--accent); outline: none; }
.choix-annee:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* liste déroulante : lisible quel que soit le système */
.choix-annee option { color: #111111; background: #ffffff; font-weight: normal; }
/* année sans programme : le menu seul a la hauteur habituelle de la ligne */
.recherche input[hidden] + .choix-annee { min-height: 46px; }

.titre-annee { margin-top: 10px; font-size: 30px; }
.infos-annee { margin: 0 0 24px; font-size: 14px; text-align: center; color: var(--texte); }
.titre-annee + .infos-annee[hidden] + .filtres { margin-top: 24px; }
.lien-archive { margin-top: 18px; }
@media (max-width: 600px) {
  .choix-annee { min-width: 96px; padding: 0 36px 0 16px; font-size: 14px; background-position: right 14px center; }
  .titre-annee { margin-top: 4px; font-size: 24px; }
}

/* ---------- Contact Pro : encadré des contacts, centré, sous le titre de la page ---------- */
.panneau.contact { max-width: 560px; margin: 28px auto 0; }
/* Mentions légales : même présentation que le contact, plus large et en paragraphes */
.panneau.mentions { max-width: 760px; }
.mentions dd + dd { margin-top: 12px; }
.contact dl { margin: 0; }

/* Fiches techniques des théâtres (page Contact Pro) : sélecteur de théâtre au-dessus de
   l'encadré, sélecteur de salle dans l'encadré (vide pour un théâtre à une seule salle) */
.filtres-fiche { margin: 34px 0 14px; }
.filtres-salle { justify-content: flex-start; margin: 18px 0 0; }
.filtres-salle:empty { display: none; }
.filtres-salle .filtre { padding: 7px 18px; font-size: 14px; }
.fiche-technique h2 { margin: 0; } /* police : voir « Nom du théâtre dans l'encadré » (page Itinéraire) */
.fiche-technique h2 span {
  display: block;
  margin-top: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texte);
}
.fiche-technique-intro { margin: 12px 0 0; }
.fiche-technique-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 32px;
  margin: 26px 0 22px;
}
.fiche-technique h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--blanc);
  border-bottom: 1px solid var(--bordure);
}
.fiche-technique ul { margin: 0; padding-left: 18px; }
.fiche-technique li { margin: 4px 0; font-size: 15px; line-height: 1.45; }
.fiche-technique li::marker { color: var(--accent); }
.fiche-technique .note { margin: 0 0 18px; font-size: 14px; color: #9a9a9a; }

@media (max-width: 960px) {
  .fiche-technique-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .fiche-technique-grille { grid-template-columns: 1fr; }
}
.contact dt {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--accent);
}
.contact dt:first-child { margin-top: 0; }
.contact dd { margin: 4px 0 0; }

/* Page Contact Pro : contacts à gauche, carrousel de photos à droite (l'un sous l'autre sur
   petit écran). Le carrousel prend la hauteur de l'encadré des contacts. */
.contact-haut {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  margin-top: 28px;
}
.contact-haut .panneau.contact { max-width: none; margin: 0; }
.contact-haut .carrousel { margin: 0; }
.contact-haut .carrousel-piste,
.contact-haut .carrousel-diapo { height: 100%; }
.contact-haut .carrousel-diapo { aspect-ratio: auto; min-height: 300px; }
@media (max-width: 860px) {
  .contact-haut { grid-template-columns: minmax(0, 1fr); }
  .contact-haut .carrousel-piste,
  .contact-haut .carrousel-diapo { height: auto; }
  .contact-haut .carrousel-diapo { aspect-ratio: 16 / 9; min-height: 0; }
}

/* Carrousel de photos */
.carrousel {
  position: relative;
  margin-top: 22px;
  overflow: hidden;
  background: #000000;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  outline: none;
}
.carrousel[hidden] { display: none; }
.carrousel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.carrousel-piste {
  display: flex;
  touch-action: pan-y; /* le glissement horizontal du doigt change de photo */
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.carrousel-diapo {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
}
.carrousel-diapo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}
.carrousel-diapo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 20px 14px;
  font-size: 14px;
  color: #ffffff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
}
.carrousel-fleche {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  color: #ffffff;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.carrousel-fleche::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.carrousel-precedent { left: 14px; }
.carrousel-suivant { right: 14px; }
.carrousel-precedent::before { transform: translate(-30%, -50%) rotate(-135deg); }
.carrousel-suivant::before { transform: translate(-70%, -50%) rotate(45deg); }
.carrousel-fleche:hover { background: var(--degrade); border-color: transparent; }
.carrousel-fleche:focus:not(:focus-visible) { outline: none; }
.carrousel-fleche:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.carrousel-points {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: flex;
  gap: 8px;
}
.carrousel-points button {
  width: 10px;
  height: 10px;
  padding: 0;
  background: rgba(255, 255, 255, .45);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.carrousel-points button[aria-current="true"] { background: #ff8800; }
.carrousel.une-seule .carrousel-fleche { display: none; }
html.jour .carrousel-points button[aria-current="true"] { background: #ffffff; }
html.jour .carrousel-fleche:hover { background: #111111; }
@media (max-width: 600px) {
  .carrousel-diapo,
  .contact-haut .carrousel-diapo { aspect-ratio: 4 / 3; }
  .carrousel-fleche { width: 38px; height: 38px; margin-top: -19px; }
  .carrousel-precedent { left: 8px; }
  .carrousel-suivant { right: 8px; }
  .carrousel-diapo figcaption { padding: 28px 14px 34px; font-size: 13px; }
  .carrousel-points { left: 0; right: 0; bottom: 12px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .carrousel-piste { transition: none; }
}

.carte-plan {
  width: 100%;
  min-height: 360px;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/* Grille en 2 colonnes (page Presse) */
.grille-theatres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 760px) {
  .grille-theatres { grid-template-columns: 1fr; }
}

/* ---------- Page Itinéraire ---------- */
/* Encadré fixe (.itineraire) ; seul son contenu (.itineraire-contenu) s'anime au changement de théâtre */
.itineraire { margin-top: 28px; }
.itineraire-contenu {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 28px;
  align-items: center;
}
/* Nom du théâtre dans l'encadré : même écriture que les noms de théâtre du programme
   (.titre-theatre), comme dans la fiche technique de la page Contact Pro */
.itineraire h3,
.fiche-technique h2 {
  font-family: var(--sans);
  font-size: clamp(18px, 4.6vw, 24px);
  font-weight: bold;
  line-height: 1.15;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.itineraire-infos p { margin: 0 0 22px; font-size: 17px; }
.itineraire .carte-plan { height: 380px; min-height: 0; }
.itineraire .note { margin: 12px 0 0; font-size: 13px; color: #9a9a9a; }

.bouton-itineraire {
  padding: 14px 34px;
  font-size: 17px;
}
.bouton-itineraire::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Temps de marche entre les théâtres : schéma à gauche, trajets à droite */
.a-pied {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "entete entete"
    "schema trajets"
    "note note";
  gap: 10px 36px;
  align-items: center;
  margin-top: 28px;
}
.a-pied-entete { grid-area: entete; }
.a-pied-entete p { margin: 0; }
.a-pied h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--accent);
}
.a-pied h2 svg {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.a-pied h2 svg circle { fill: var(--accent); stroke: none; }

.schema-a-pied {
  grid-area: schema;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  height: auto;
  overflow: visible;
}
.arete-fond { stroke: rgba(255, 255, 255, .2); stroke-width: 2; }
/* « pas » orange qui avancent depuis le théâtre choisi */
.arete-pas {
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: .1 9;
  opacity: 0;
  transition: opacity .35s;
}
.arete.actif .arete-pas { opacity: 1; animation: pas 1s linear infinite; }
@keyframes pas { to { stroke-dashoffset: -9.1; } }

.arete-duree rect { fill: #111; stroke: rgba(255, 255, 255, .25); transition: fill .35s, stroke .35s; }
.arete-duree text {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: bold;
  text-anchor: middle;
  fill: #cfcfcf;
  transition: fill .35s;
}
.arete.actif .arete-duree rect { fill: #1d1206; stroke: var(--accent); }
.arete.actif .arete-duree text { fill: var(--accent); }

.noeud { cursor: pointer; }
.noeud circle {
  fill: #222;
  stroke: var(--accent);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .35s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.noeud:hover circle { fill: rgba(255, 136, 0, .45); }
.noeud text {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: bold;
  text-anchor: middle;
  fill: var(--blanc);
  transition: fill .35s;
}
.noeud.actif circle { fill: var(--accent); transform: scale(1.35); }
.noeud.actif text { fill: var(--accent); }

.trajets {
  grid-area: trajets;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trajet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  opacity: .7;
  transition: opacity .35s, border-color .35s, background .35s;
}
.trajet.actif {
  order: -1; /* les trajets du théâtre choisi passent en tête */
  opacity: 1;
  background: rgba(255, 136, 0, .08);
  border-color: rgba(255, 136, 0, .55);
}
.trajet-noms { flex: 1 1 190px; font-weight: bold; color: var(--blanc); }
.trajet-noms .fleche { margin: 0 4px; color: var(--accent); }
.trajet-duree { white-space: nowrap; color: #cfcfcf; }
.trajet-duree strong { margin-right: 2px; font-family: var(--serif); font-size: 20px; color: var(--accent); }
.trajet-lien { font-size: 14px; white-space: nowrap; }
.a-pied .note { grid-area: note; margin: 8px 0 0; font-size: 13px; color: #9a9a9a; }

@media (max-width: 760px) {
  .a-pied {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "entete" "schema" "trajets" "note";
  }
}
@media (prefers-reduced-motion: reduce) {
  .arete.actif .arete-pas { animation: none; }
}

@media (max-width: 860px) {
  .itineraire-contenu { grid-template-columns: 1fr; text-align: center; }
  .itineraire .carte-plan { height: 300px; }
}

/* ---------- Pied de page ---------- */
.pied {
  margin-top: auto;
  padding: 28px 0;
  background: var(--noir);
  text-align: center;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--blanc);
}
.pied a { color: #fc830a; }
.pied p { margin: 4px 0; }

/* ---------- Responsive ---------- */
/* Écran moyen : toujours 2 colonnes, l'affiche passe au-dessus du texte */
@media (max-width: 1100px) {
  .spectacle { grid-template-columns: 1fr; }
  .spectacle-affiche { width: 100%; max-width: 220px; margin: 0 auto; }
  .spectacle h3 { text-align: center; }
}

/* Petit écran : 1 seule colonne */
@media (max-width: 760px) {
  .grille-spectacles { grid-template-columns: 1fr; }
}

/* Menu replié (☰) dès que les 6 entrées et le bouton « mode jour » ne tiennent plus sur une ligne */
@media (max-width: 1140px) {
  .bouton-menu { display: block; }

  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    background: var(--noir);
    border-bottom: 1px solid #222;
    /* téléphone à l'horizontale : le menu défile s'il est plus haut que l'écran */
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu.ouvert { display: flex; }
  .menu a { padding: 12px 24px; border: 0; }
  .menu .sous-menu {
    display: block;
    position: static;
    border: 0;
    padding: 0 0 0 16px;
  }

}

/* Écrans tactiles : champ de recherche en 16px minimum, sinon l'iPhone zoome dessus au toucher */
@media (hover: none), (max-width: 1140px) {
  .recherche input { font-size: 16px; }
}

@media (max-width: 480px) {
  .conteneur { padding: 0 16px; }
  .logo { font-size: 20px; letter-spacing: 2px; }
  .panneau, .spectacle { padding: 18px; }
  .titre-section { font-size: 28px; }
}

/* Téléphone : éléments plus compacts (titres, cadres, boutons, cartes des spectacles).
   Le nom du théâtre tient sur une ligne, même « Théâtre Les 3 Soleils ». */
@media (max-width: 600px) {
  .section { padding: 44px 0; }
  .titre-section { font-size: 25px; }
  .sous-titre { margin-bottom: 24px; font-size: 15px; }

  .titre-theatre {
    margin-top: 40px;
    padding: 9px 18px;
    font-size: clamp(15px, 4.4vw, 20px);
    letter-spacing: .06em;
    border-width: 1.5px;
  }
  .titre-salle { margin: 34px 0 16px; padding-bottom: 8px; font-size: 22px; }
  .equipements { gap: 12px; font-size: 14px; }
  .equipement svg { width: 21px; height: 21px; }

  .filtres { gap: 8px; }
  .filtre { padding: 7px 14px; font-size: 14px; }
  .recherche input { padding: 10px 16px 10px 44px; }
  .bouton-filtres { padding: 0 16px 0 40px; font-size: 14px; }

  .grille-spectacles { gap: 16px; }
  .spectacle { gap: 14px; padding: 14px; }
  .spectacle-affiche { max-width: 170px; }
  .spectacle h3 { font-size: 19px; }
  .horaire { margin-bottom: 10px; padding: 2px 10px; font-size: 13px; }
  .spectacle p { margin-bottom: 14px; font-size: 14px; }
  .tarifs { gap: 6px 16px; margin-bottom: 12px; padding: 8px 0; font-size: 13px; }
  .tarif strong { font-size: 17px; }
  .actions { gap: 8px; }
  .bouton { padding: 9px 18px; font-size: 15px; }
  .bouton-itineraire { padding: 11px 24px; font-size: 16px; }

  .carte { padding: 18px; }
  .a-venir h3 { font-size: 19px; }
  .fiche h2 { font-size: 24px; }
}

/* =========================================================
   Mode jour : tout le site en monochrome clair (bouton à droite du menu).
   Le choix est mémorisé dans le navigateur (classe « jour » sur <html>, posée dans le <head>).
   Les affiches, photos, vidéos et plans gardent leurs couleurs.
   ========================================================= */
html.jour {
  --noir: #ffffff;   /* fonds de l'en-tête, du menu et du pied de page */
  --texte: #3a3a3a;
  --blanc: #111111;  /* titres et textes forts */
  --accent: #111111;
  --accent-lien: #111111;
  --rouge-fonce: #444444;
  --degrade: linear-gradient(90deg, #111111 0%, #444444 100%);
  --panneau: rgba(255, 255, 255, .88);
  --bordure: rgba(0, 0, 0, .14);
  color-scheme: light;
}

/* Fond : la même salle en noir et blanc et en négatif (images/fond-jour.jpg, faite à partir de
   fond.jpg), sous un léger voile clair : augmenter .2 pour l'éclaircir encore */
html.jour body::before {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)),
    url("../images/fond-jour.jpg");
  filter: none;
}

/* En-tête, menu, pied de page */
html.jour .entete { border-bottom-color: #e2e2e2; }
html.jour .menu .sous-menu { border-color: #dddddd; }
html.jour .bouton-menu,
html.jour .bouton-theme { border-color: #bbbbbb; }
html.jour .bouton-theme:hover { border-color: var(--accent); }
html.jour .pied { border-top: 1px solid #e2e2e2; }
html.jour .pied a { color: #111111; }
@media (max-width: 1140px) {
  html.jour .menu { border-bottom-color: #dddddd; }
}

/* Bandeau d'accueil : ombre claire au lieu de l'ombre noire, flèche en gris foncé */
html.jour .bandeau h1,
html.jour .bandeau p { text-shadow: 0 2px 18px rgba(255, 255, 255, .9); }
html.jour .fleche img { filter: grayscale(1) brightness(.3); }

/* Encadrés et cartes */
html.jour .titre-theatre { background: rgba(255, 255, 255, .92); }
html.jour .spectacle {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(0, 0, 0, .16);
}
html.jour .spectacle:hover { border-color: rgba(0, 0, 0, .5); }
html.jour .spectacle-affiche { background: #e6e6e6; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
html.jour .sans-affiche { background: radial-gradient(circle at 50% 30%, #ffffff, #dcdcdc 75%); }
html.jour .equipement::after { background: #ffffff; }
html.jour .horaire { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .25); }
html.jour .genres,
html.jour .credits,
html.jour .fiche-lieu,
html.jour .fiche-distribution dt { color: #5a5a5a; }
html.jour .dates {
  color: #444444;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
html.jour .tarifs { border-color: rgba(0, 0, 0, .14); }
html.jour .note,
html.jour .fiche-technique .note,
html.jour .itineraire .note,
html.jour .a-pied .note,
html.jour .fiche-a-venir,
html.jour .groupe-filtres h4 { color: #666666; }

/* Filtres, recherche, puces */
html.jour .filtre,
html.jour .bouton-filtres,
html.jour .choix-annee,
html.jour .recherche input { background-color: rgba(255, 255, 255, .9); border-color: #bbbbbb; }
html.jour .choix-annee:hover,
html.jour .choix-annee:focus { border-color: var(--accent); }
html.jour .puce { border-color: #bbbbbb; }
html.jour .filtre:hover,
html.jour .puce:hover,
html.jour .bouton-filtres:hover,
html.jour .bouton-filtres.ouvert,
html.jour .recherche input:focus { border-color: var(--accent); }
html.jour .recherche input:focus { box-shadow: 0 0 0 3px rgba(0, 0, 0, .1); }
html.jour .recherche input::placeholder { color: #777777; }
html.jour .panneau-filtres { background: rgba(255, 255, 255, .95); border-color: #cccccc; }
/* textes blancs sur les fonds foncés (dégradé des boutons et des éléments choisis) */
html.jour .filtre.actif,
html.jour .puce.actif,
html.jour .compteur,
html.jour .bouton { color: #ffffff; }

/* Boutons */
html.jour .bouton.secondaire { color: #111111; background: #e4e4e4; }
html.jour .bouton.secondaire:hover { background: #d2d2d2; }

/* Animations de chargement : anneaux gris au lieu d'orange */
html.jour .chargement-programme::before,
html.jour .fiche-chargeur::before,
html.jour .video-cadre.chargement::before { border-color: rgba(0, 0, 0, .12); border-top-color: var(--accent); }

/* Fiche détaillée d'un spectacle */
html.jour .fiche {
  background: rgba(250, 250, 250, .98);
  border-color: rgba(0, 0, 0, .18);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .25);
}
html.jour .fiche::backdrop { background: rgba(30, 30, 30, .45); }
html.jour .fiche-fermer { background: #ffffff; border-color: #bbbbbb; }
html.jour .fiche-fermer:hover { color: #ffffff; background: var(--accent); border-color: var(--accent); }
html.jour .fiche-affiche {
  background: #e6e6e6;
  border-color: rgba(0, 0, 0, .18);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}
html.jour .fiche-affiche.chargement { animation-name: fiche-bordure-jour; }
html.jour .fiche-affiche::after { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); }
html.jour .fiche-flou { filter: blur(16px) brightness(1.15) saturate(.6); }
html.jour .fiche-chargeur { color: #222222; }
html.jour .fiche-squelette span {
  background: linear-gradient(90deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, .05) 70%) 0 0 / 300% 100%;
}
@keyframes fiche-bordure-jour {
  0%, 100% { border-color: rgba(0, 0, 0, .15); }
  50% { border-color: rgba(0, 0, 0, .6); }
}
/* la bande-annonce reste sur fond noir, texte et icône en blanc */
html.jour .video-cadre { border-color: rgba(0, 0, 0, .18); }
html.jour .video-lancer,
html.jour .voir-fiche { color: #ffffff; }
html.jour .video-icone::before { border-left-color: #ffffff; }

/* Page Itinéraire : schéma des trajets à pied */
html.jour .arete-fond { stroke: rgba(0, 0, 0, .2); }
html.jour .arete-duree rect { fill: #ffffff; stroke: rgba(0, 0, 0, .25); }
html.jour .arete-duree text { fill: #444444; }
html.jour .arete.actif .arete-duree rect { fill: #eeeeee; stroke: var(--accent); }
html.jour .noeud circle { fill: #ffffff; }
html.jour .noeud:hover circle { fill: rgba(0, 0, 0, .2); }
html.jour .noeud.actif circle { fill: var(--accent); }
html.jour .trajet { background: rgba(255, 255, 255, .7); border-color: rgba(0, 0, 0, .12); }
html.jour .trajet.actif { background: rgba(255, 255, 255, .95); border-color: rgba(0, 0, 0, .45); }
html.jour .trajet-duree { color: #444444; }

/* Page de vérification du tableur : symboles en gris et noir */
html.jour .verif-ok::before { color: #555555; }
html.jour .verif-erreur,
html.jour .verif-erreur::before { color: #000000; }