/* ==========================================================================
   COMPAGNIE PIPA SOL — feuille de style unique du site (version « castelet »)
   --------------------------------------------------------------------------
   Inspirée de Marizibill (papier moucheté, filets fins, affiches),
   Tro-héol (fonds sombres, titres lumineux, grandes photos) et SNAFU
   (couleurs franches, bords de papier déchiré, photos découpées).
   Le jaune Pipa Sol et les petites têtes jaunes du site d'origine sont
   gardés comme signature.

   Pour changer l'apparence de TOUT le site, modifiez les RÉGLAGES
   ci-dessous. Le reste du fichier est rangé par sections numérotées.
   Les polices sont chargées par une ligne <link> en haut de chaque page.
   (L'ancienne feuille noire et jaune est dans _sauvegarde-avant-relooking/)
   ========================================================================== */


/* 1. RÉGLAGES ============================================================ */
:root {
  /* Fonds sombres : la « scène » du théâtre noir */
  --scene:        #16151d;
  --scene-2:      #24222e;
  --scene-trait:  #3d3a4a;

  /* Fonds clairs : le « papier » des affiches */
  --papier:       #f4eee1;
  --blanc:        #fffcf5;
  --trait:        #ddd2bd;   /* filets fins sur le papier */

  /* Textes */
  --encre:        #1d1b24;   /* texte sur papier */
  --encre-douce:  #5d5a66;   /* texte secondaire sur papier */
  --creme:        #f4eee1;   /* texte sur scène */
  --creme-douce:  #b9b4c2;   /* texte secondaire sur scène */

  /* Couleurs vives (une par spectacle, voir « teinte-... » plus bas) */
  --jaune:        #fecc17;   /* jaune Pipa Sol */
  --jaune-clair:  #fff0b3;
  --petrole:      #1e5c66;
  --petrole-clair:#d3e8e7;
  --corail:       #e4553b;
  --corail-clair: #fadcd3;
  --prune:        #6d3f78;
  --prune-clair:  #ecdff0;
  --sauge:        #5b8545;
  --sauge-clair:  #e0ebd5;

  /* Polices (chargées depuis fonts.bunny.net, voir <head>) */
  --police-titre: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --police-texte: "Bricolage Grotesque", Arial, "Helvetica Neue", sans-serif;
  --police-main:  "Caveat", "Comic Sans MS", cursive;   /* petites notes manuscrites */

  /* Mise en page */
  --largeur: 1160px;
  --arrondi: 6px;

  /* Bord de papier déchiré (dessin SVG, à ne pas modifier) */
  --masque-dechire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V18L1176 23L1150 15L1122 21L1098 12L1071 19L1046 24L1019 14L993 20L966 11L940 18L913 25L887 16L860 21L834 13L807 19L781 24L754 15L728 22L701 12L675 18L648 23L622 14L595 20L569 26L542 17L516 22L489 13L463 19L436 24L410 15L383 21L357 11L330 18L304 23L277 14L251 20L224 25L198 16L171 22L145 12L118 19L92 24L65 15L39 21L0 16Z'/%3E%3C/svg%3E");

  /* Grain du papier */
  --mouchetis:
    radial-gradient(rgba(80, 60, 20, .10) 1px, transparent 1.5px) 0 0 / 23px 23px,
    radial-gradient(rgba(80, 60, 20, .07) 1px, transparent 1.6px) 11px 7px / 37px 37px;

  /* Couleur du fond courant (sert aux bords déchirés et aux tickets) */
  --fond: var(--papier);
}


/* 2. BASE ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mouchetis), var(--papier);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* coupe ce qui dépasse sur les côtés (ruban en biais, étiquettes) */
main { overflow-x: clip; }

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

a { color: var(--petrole); text-underline-offset: 3px; }
a:hover { color: var(--corail); }

:focus-visible { outline: 3px solid var(--corail); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }

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

.section { padding: 76px 0; position: relative; }
.section-suite { padding-top: 0; }
.centre { text-align: center; }

/* Petite note manuscrite au-dessus des titres */
.surtitre {
  display: inline-block;
  font-family: var(--police-main);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--corail);
  transform: rotate(-2deg);
  margin-bottom: .3em;
}

/* Titre de section précédé d'une pastille jaune (clin d'œil à l'ancien site) */
.titre-pastille { display: flex; align-items: center; gap: 14px; }
.titre-pastille::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teinte, var(--jaune));
  box-shadow: 3px 3px 0 var(--encre);
}

/* Titre centré entre deux filets fins */
.titre-filets {
  display: flex;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.titre-filets::before,
.titre-filets::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .35;
}

.intro { font-size: 1.18rem; color: var(--encre-douce); max-width: 62ch; }
.texte { max-width: 70ch; }
.discret { color: var(--encre-douce); font-size: .92rem; }

.entete-section { margin-bottom: 36px; }
.entete-section p { color: var(--encre-douce); max-width: 62ch; margin: 0; }
.entete-section.centre p { margin: 0 auto; }

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--jaune);
  color: var(--encre);
  padding: 8px 14px;
}
.lien-evitement:focus { left: 8px; }


/* 3. FONDS ET BORDS DÉCHIRÉS ============================================= */
/* Ajouter sur une <section> :
     fond-scene / fond-petrole / fond-jaune  → couleur de fond
     dechire        → bord déchiré en bas
     dechire-haut   → bord déchiré en haut                                  */
.fond-scene   { --fond: var(--scene);   background: var(--scene);   color: var(--creme); }
.fond-petrole { --fond: var(--petrole); background: var(--petrole); color: var(--creme); }
.fond-jaune   { --fond: var(--jaune);   background: var(--jaune);   color: var(--encre); }

.fond-scene .intro, .fond-petrole .intro,
.fond-scene .entete-section p, .fond-petrole .entete-section p { color: var(--creme-douce); }
.fond-petrole .entete-section p { color: #cfe3e3; }
.fond-scene .surtitre, .fond-petrole .surtitre { color: var(--jaune); }
.fond-scene a:not(.bouton), .fond-petrole a:not(.bouton) { color: var(--jaune); }
.fond-scene a:not(.bouton):hover, .fond-petrole a:not(.bouton):hover { color: var(--blanc); }

.dechire, .dechire-haut { position: relative; }
.dechire::after,
.dechire-haut::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 3;
  background: var(--fond);
  -webkit-mask: var(--masque-dechire) no-repeat center / 100% 100%;
          mask: var(--masque-dechire) no-repeat center / 100% 100%;
  pointer-events: none;
}
.dechire::after      { bottom: -27px; }
.dechire-haut::before { top: -27px; transform: scaleY(-1); }

/* Photo aux bords irréguliers, comme découpée aux ciseaux */
.photo-dechiree {
  clip-path: polygon(1.5% 3%, 22% 0, 48% 2%, 76% .5%, 99% 2.5%, 100% 30%, 98% 58%, 100% 86%, 97.5% 100%, 70% 97.5%, 44% 100%, 18% 98%, 0 100%, 1.5% 72%, 0 44%, 1% 18%);
}


/* 4. BOUTONS ET LIENS ==================================================== */
.bouton {
  --ombre: var(--encre);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7em 1.4em;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: var(--jaune);
  color: var(--encre);
  box-shadow: 4px 4px 0 var(--ombre);
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.bouton:hover { color: var(--encre); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ombre); }
.bouton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ombre); }

.bouton-contour { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; }
.bouton-contour:hover { background: var(--jaune); color: var(--encre); border-color: var(--encre); box-shadow: 4px 4px 0 var(--ombre); }

/* Sur fond sombre, l'ombre des boutons devient corail */
.fond-scene .bouton, .fond-petrole .bouton, .entete .bouton, .pied .bouton { --ombre: var(--corail); }

.boutons { display: flex; flex-wrap: wrap; gap: 14px; }

/* Lien vers un document : « › Dossier de diffusion   PDF · 400 Ko » */
.doc {
  display: flex;
  align-items: baseline;
  gap: .5em;
  padding: 8px 0;
  color: var(--encre);
  text-decoration: none;
  border-bottom: 1px dashed var(--trait);
}
.doc::before { content: "›"; color: var(--corail); font-weight: 800; }
.doc small { margin-left: auto; color: var(--encre-douce); font-size: .75rem; white-space: nowrap; }
.doc:hover { color: var(--corail); }

.lien-fleche { font-weight: 700; text-decoration: none; }
.lien-fleche::after { content: "→"; display: inline-block; margin-left: .35em; transition: transform .15s; }
.lien-fleche:hover::after { transform: translateX(4px); }


/* 5. EN-TÊTE ET MENU (le contenu est dans js/site.js) ==================== */
.entete { background: var(--scene); color: var(--creme); position: relative; z-index: 50; }
.entete .conteneur {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.entete-logo { flex: none; transition: transform .2s; }
.entete-logo:hover { transform: rotate(-4deg); }
.entete-logo img { width: 58px; }

.entete-droite { flex: 1; min-width: 0; }
.entete-haut {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  padding-bottom: 10px;
  font-size: .85rem;
  color: var(--creme-douce);
}
.entete-haut a { color: var(--creme-douce); text-decoration: none; }
.entete-haut a:hover { color: var(--jaune); }
.entete-haut strong { color: var(--jaune); }
.entete-haut img { width: 22px; height: 22px; border-radius: 4px; }

.menu { border-top: 1px solid var(--scene-trait); padding-top: 10px; }
.menu > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li { position: relative; }
/* petites têtes jaunes entre les rubriques, comme sur l'ancien site */
.menu > ul > li + li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 11px;
  height: 7px;
  margin-top: -4px;
  background: url("../images/tetejaune.png") no-repeat center;
}
.menu a {
  display: block;
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--creme);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.menu a:hover { color: var(--jaune); }
.menu a[aria-current="page"] { background: var(--jaune); color: var(--encre); }

/* Sous-menu des spectacles : une petite feuille de papier */
.sous-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: var(--arrondi);
  box-shadow: 6px 6px 0 var(--jaune);
}
.sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.sous-menu a { color: var(--encre); border-radius: 4px; padding: 8px 12px; font-size: .95rem; }
.sous-menu a:hover { background: var(--jaune-clair); color: var(--encre); }
.sous-menu small { color: var(--encre-douce); font-weight: 400; margin-left: .4em; }
.menu li:hover > .sous-menu,
.menu li:focus-within > .sous-menu { display: block; }

.menu-bouton {
  display: none;
  margin-left: auto;
  border: 2px solid var(--jaune);
  background: var(--jaune);
  color: var(--encre);
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  padding: .45em 1.2em;
  border-radius: 999px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .entete .conteneur { align-items: center; flex-wrap: wrap; gap: 12px 20px; }
  .entete-logo img { width: 44px; }
  .entete-droite { display: contents; }
  .entete-haut { order: 2; margin-left: auto; padding: 0; }
  .entete-haut .masquer-mobile { display: none; }
  .menu-bouton { display: block; order: 3; margin-left: 0; }
  .menu { display: none; order: 4; width: 100%; padding-top: 6px; }
  .menu.ouvert { display: block; }
  .menu > ul { flex-direction: column; }
  .menu > ul > li + li::before { display: none; }
  .menu > ul > li { border-bottom: 1px solid var(--scene-trait); }
  .menu a { padding: 12px 4px; font-size: 1.05rem; border-radius: 0; }
  .menu a[aria-current="page"] { background: none; color: var(--jaune); }
  .sous-menu { display: block; position: static; box-shadow: none; background: none; border: 0; padding: 0 0 8px 14px; }
  .sous-menu::before { display: none; }
  .sous-menu a { color: var(--creme); padding: 6px 4px; font-weight: 400; }
  .sous-menu a:hover { background: none; color: var(--jaune); }
  .sous-menu small { color: var(--creme-douce); }
}


/* 6. BANDEAU D'ACCUEIL =================================================== */
.accueil {
  padding: 60px 0 96px;
  overflow: hidden;
  /* halo de projecteur derrière les photos */
  background:
    radial-gradient(ellipse 46% 60% at 74% 42%, rgba(254, 204, 23, .16), transparent 70%),
    var(--scene);
}
.accueil .conteneur {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
.accueil h1 em {
  font-style: normal;
  color: var(--jaune);
  /* trait de feutre corail sous les mots */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C40 2 80 11 120 5S178 4 197 7' fill='none' stroke='%23e4553b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% .32em;
  padding-bottom: .12em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.accueil .intro { margin-bottom: 1.8em; }

.accueil-visuel { position: relative; padding: 0 0 40px 24px; }
.accueil-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transform: rotate(1.5deg);
}
.accueil-medaillon {
  position: absolute;
  left: -10px;
  bottom: 0;
  width: 38%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 50%;
  border: 6px solid var(--jaune);
  box-shadow: 8px 8px 0 var(--corail);
}
.accueil-note {
  position: absolute;
  right: 4%;
  bottom: -6px;
  font-family: var(--police-main);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--jaune);
  text-decoration: none;
  transform: rotate(-4deg);
  text-align: right;
}
.accueil-note:hover { color: var(--blanc); }
/* petite flèche dessinée vers la photo */
.accueil-note::before {
  content: "";
  position: absolute;
  right: 30%;
  top: -46px;
  width: 44px;
  height: 42px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 42'%3E%3Cpath d='M30 40C34 26 28 12 10 6M10 6l9-3M10 6l4 8' fill='none' stroke='%23fecc17' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Ruban jaune des distinctions, posé en biais sous l'accueil */
.atouts {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 104%;
  margin: -34px 0 0 -2%;
  padding: 18px max(3%, calc((104% - var(--largeur)) / 2 + 20px));
  list-style: none;
  background: var(--jaune);
  color: var(--encre);
  border-top: 2px solid var(--encre);
  border-bottom: 2px solid var(--encre);
  transform: rotate(-1.2deg);
}
.atouts li { position: relative; padding: 4px 22px; font-size: .9rem; line-height: 1.4; }
.atouts li + li::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 8px;
  width: 11px;
  height: 7px;
  background: url("../images/tetejaune.png") no-repeat center;
  filter: brightness(0);
}
.atouts strong { display: block; font-family: var(--police-titre); font-weight: 800; font-size: 1.1rem; }

@media (max-width: 900px) {
  .accueil { padding-top: 40px; }
  .accueil .conteneur { grid-template-columns: 1fr; gap: 40px; }
  .accueil-visuel { max-width: 560px; }
  .atouts { grid-template-columns: 1fr 1fr; row-gap: 12px; }
}
@media (max-width: 520px) {
  .atouts { grid-template-columns: 1fr; transform: rotate(-1deg); }
  .atouts li + li::before { display: none; }
  .accueil-note { font-size: 1.4rem; }
}


/* 7. BANDEAU DE TITRE (pages intérieures) ================================ */
.bandeau {
  --fond: var(--scene);
  position: relative;
  padding: 52px 0 56px;
  margin-bottom: 28px;
  background: radial-gradient(ellipse 50% 90% at 85% 20%, rgba(254, 204, 23, .12), transparent 70%), var(--scene);
  color: var(--creme);
}
.bandeau::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -27px;
  height: 28px;
  background: var(--scene);
  -webkit-mask: var(--masque-dechire) no-repeat center / 100% 100%;
          mask: var(--masque-dechire) no-repeat center / 100% 100%;
}
.bandeau .boutons { margin-top: 24px; }

/* Photo de scène en fond des en-têtes (bandeau et fiche spectacle) :
   <img class="photo-fond" src="images/nouveau/fond-....jpg" alt="">
   placée juste après la balise <section>. Elle se fond dans le noir à gauche. */
.photo-fond {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%);
          mask-image: linear-gradient(to right, transparent, #000 55%);
  pointer-events: none;
}
.bandeau .conteneur, .fiche-tete .conteneur { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .photo-fond {
    width: 100%;
    opacity: .28;
    -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent);
            mask-image: linear-gradient(to bottom, #000 20%, transparent);
  }
}
.bandeau h1 { margin-bottom: .2em; }
.bandeau .intro { margin: 0; color: var(--creme-douce); }
.bandeau .surtitre { color: var(--jaune); }
.bandeau a:not(.bouton) { color: var(--jaune); }


/* 8. CATALOGUE DES SPECTACLES =========================================== */
/* Une couleur par spectacle : ajouter teinte-jaune / teinte-petrole /
   teinte-corail / teinte-prune / teinte-sauge sur la carte <article>
   de l'accueil, et sur <body> de la page du spectacle (pastilles des
   titres, ombres des panneaux et de l'affiche, thématiques, citations). */
.teinte-jaune   { --teinte: var(--jaune);   --teinte-clair: var(--jaune-clair);   --sur-teinte: var(--encre); }
.teinte-petrole { --teinte: var(--petrole); --teinte-clair: var(--petrole-clair); --sur-teinte: var(--blanc); }
.teinte-corail  { --teinte: var(--corail);  --teinte-clair: var(--corail-clair);  --sur-teinte: var(--blanc); }
.teinte-prune   { --teinte: var(--prune);   --teinte-clair: var(--prune-clair);   --sur-teinte: var(--blanc); }
.teinte-sauge   { --teinte: var(--sauge);   --teinte-clair: var(--sauge-clair);   --sur-teinte: var(--blanc); }

.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 36px; }
.filtre {
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  padding: .45em 1.1em;
  border-radius: 999px;
  border: 2px solid var(--encre);
  background: var(--blanc);
  color: var(--encre);
  cursor: pointer;
  transition: background .15s;
}
.filtre:hover { background: var(--jaune-clair); }
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--jaune); }

.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 34px 30px;
}
/* couleur par défaut si la carte n'a pas de classe teinte-... */
:where(.spectacle) { --teinte: var(--jaune); --teinte-clair: var(--jaune-clair); --sur-teinte: var(--encre); }
.spectacle {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: var(--arrondi);
  box-shadow: 8px 8px 0 var(--teinte);
  transition: transform .2s, box-shadow .2s;
}
.spectacle:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--teinte); }
.spectacle-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--scene);
  border-bottom: 2px solid var(--encre);
  border-radius: 4px 4px 0 0;
}
.spectacle-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; border-radius: 4px 4px 0 0; }
.spectacle-age {
  position: absolute;
  left: 16px;
  bottom: -18px;
  background: var(--teinte);
  color: var(--sur-teinte);
  border: 2px solid var(--encre);
  border-radius: 999px;
  font-family: var(--police-main);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  padding: .25em .7em .3em;
  transform: rotate(-3deg);
}
.spectacle-nouveau {
  position: absolute;
  right: -10px;
  top: 16px;
  background: var(--encre);
  color: var(--jaune);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .35em .8em;
  transform: rotate(3deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
}
.spectacle-corps { padding: 32px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.spectacle h3 { font-size: 1.6rem; margin-bottom: .3em; }
.spectacle h3 a { color: var(--encre); text-decoration: none; }
.spectacle h3 a:hover { color: var(--teinte); }
.spectacle .accroche { color: var(--encre-douce); font-size: .98rem; }
.spectacle-liens {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--trait);
  font-size: .92rem;
}
.spectacle-liens a { color: var(--encre); }
.spectacle-liens a:hover { color: var(--corail); }

/* Carte sombre « besoin d'un conseil ? » en fin de catalogue */
.carte-conseil {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 36px 30px;
  background: radial-gradient(ellipse 80% 60% at 80% 10%, rgba(254, 204, 23, .18), transparent 70%), var(--scene);
  color: var(--creme-douce);
  border: 2px solid var(--encre);
  border-radius: var(--arrondi);
  box-shadow: 8px 8px 0 var(--corail);
}
.carte-conseil .surtitre { color: var(--jaune); }
.carte-conseil h3 { color: var(--creme); font-size: 1.9rem; }
.carte-conseil p { margin-bottom: 1.4em; }
.carte-conseil .bouton { --ombre: var(--corail); }

/* Petites étiquettes d'infos : durée, jauge... */
.infos-rapides {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.infos-rapides li {
  font-size: .82rem;
  padding: .2em .7em;
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--encre-douce);
}
.infos-rapides li strong { color: var(--encre); }
.infos-rapides .oui { background: var(--teinte-clair, var(--jaune-clair)); border-color: transparent; color: var(--encre); font-weight: 700; }


/* 9. PAGE SPECTACLE ====================================================== */
.fiche-tete {
  position: relative;
  padding: 48px 0 56px;
  margin-bottom: 30px;
  background: radial-gradient(ellipse 50% 90% at 85% 20%, rgba(254, 204, 23, .12), transparent 70%), var(--scene);
  color: var(--creme);
}
.fiche-tete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -27px;
  height: 28px;
  background: var(--scene);
  -webkit-mask: var(--masque-dechire) no-repeat center / 100% 100%;
          mask: var(--masque-dechire) no-repeat center / 100% 100%;
}
.fiche-tete + .section-suite { padding-top: 36px; }
.fiche-tete .conteneur {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 40px;
  align-items: start;
}
.fiche-tete .affiche { margin: 0; }
.fiche-tete .affiche a { display: block; transform: rotate(-2deg); transition: transform .2s; }
.fiche-tete .affiche a:hover { transform: rotate(0); }
.fiche-tete .affiche img { width: 100%; border: 4px solid var(--blanc); box-shadow: 8px 8px 0 var(--teinte, var(--jaune)); }
.fiche-tete .affiche figcaption { font-family: var(--police-main); font-size: 1.15rem; color: var(--creme-douce); margin-top: 12px; text-align: center; }
.fiche-tete h1 { margin-bottom: .15em; }
.fiche-tete .age {
  display: inline-block;
  font-family: var(--police-main);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--jaune);
  transform: rotate(-2deg);
  margin-bottom: .5em;
}
.fiche-tete .distinction { color: var(--creme-douce); font-size: .95rem; }
.fiche-tete .distinction strong { color: var(--jaune); }
.fiche-tete .accroche { font-size: 1.15rem; max-width: 62ch; color: var(--creme); }
.fiche-tete .boutons { margin-top: 24px; }
.fiche-tete .bouton { --ombre: var(--corail); }
.fiche-tete .surtitre { color: var(--jaune); }
.fiche-tete .infos-rapides li { border-color: var(--scene-trait); color: var(--creme-douce); }
.fiche-tete .infos-rapides li strong { color: var(--creme); }
.fiche-tete .infos-rapides .oui { color: var(--encre); }
.fiche-tete a:not(.bouton) { color: var(--jaune); }

@media (max-width: 700px) {
  .fiche-tete { padding-top: 30px; }
  .fiche-tete .conteneur { grid-template-columns: 1fr; gap: 22px; }
  .fiche-tete .affiche { max-width: 120px; }
}

/* Blocs successifs de la colonne principale */
.bloc { margin-bottom: 60px; scroll-margin-top: 20px; }
.bloc:last-child { margin-bottom: 0; }
.bloc > h2 { margin-bottom: 22px; }
.themes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 1em; }
.themes li { background: var(--teinte-clair, var(--jaune-clair)); padding: .3em .9em; font-size: .88rem; border-radius: 999px; }

/* Mise en page à deux colonnes : contenu + colonne pro */
.colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 44px;
  align-items: start;
}
@media (max-width: 960px) { .colonnes { grid-template-columns: 1fr; } }

/* Colonne « documents à télécharger » : une fiche de papier blanc */
.panneau {
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: var(--arrondi);
  box-shadow: 6px 6px 0 var(--teinte, var(--jaune));
  padding: 24px 24px 26px;
}
.panneau + .panneau { margin-top: 26px; }
.panneau > p:last-child { margin-bottom: 0; }
.panneau h2, .panneau h3 {
  font-size: 1.15rem;
  color: var(--encre);
  margin-bottom: .7em;
}
.panneau h4 {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--petrole);
  margin: 18px 0 2px;
}
.panneau .bouton { width: 100%; justify-content: center; }

/* Fiche pratique (durée, jauge, plateau...) */
.fiche-pratique {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px;
  background: var(--encre);
  border: 2px solid var(--encre);
  border-radius: var(--arrondi);
  overflow: hidden;
  margin: 0 0 12px;
}
.fiche-pratique div { background: var(--blanc); padding: 16px 18px; }
.fiche-pratique dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--corail);
  margin-bottom: 4px;
}
.fiche-pratique dd { margin: 0; font-size: 1.05rem; font-weight: 700; }
.fiche-pratique dd small { display: block; font-weight: 400; color: var(--encre-douce); font-size: .82rem; line-height: 1.4; margin-top: 2px; }

/* Vidéos */
.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.video { margin: 0; }
.video figcaption { font-family: var(--police-main); font-size: 1.35rem; font-weight: 700; color: var(--corail); margin-bottom: 6px; }
.video-cadre { position: relative; aspect-ratio: 16 / 9; background: var(--scene); border: 2px solid var(--encre); border-radius: var(--arrondi); overflow: hidden; }
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Galerie photos (un clic agrandit la photo) */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.galerie a { display: block; aspect-ratio: 457 / 320; overflow: hidden; background: var(--scene); border-radius: 4px; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.galerie a:hover img { transform: scale(1.07) rotate(.5deg); }
.galerie + .discret { margin-top: 12px; }

.visionneuse {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 94vw;
  max-height: 94vh;
}
.visionneuse::backdrop { background: rgba(22, 21, 29, .94); }
.visionneuse img { max-width: 94vw; max-height: 84vh; margin: 0 auto; }
.visionneuse-barre { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.visionneuse button {
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  background: var(--jaune);
  color: var(--encre);
  border: 2px solid var(--encre);
  border-radius: 999px;
  padding: .45em 1.1em;
  cursor: pointer;
}
.visionneuse button:hover { background: var(--blanc); }

/* Citations de presse */
.citations { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.citation {
  position: relative;
  margin: 0;
  padding: 26px 24px 20px;
  background: var(--blanc);
  border-radius: var(--arrondi);
  border-top: 6px solid var(--teinte, var(--jaune));
}
.citation::before {
  content: "“";
  position: absolute;
  right: 16px;
  top: -8px;
  font-family: var(--police-titre);
  font-size: 4rem;
  line-height: 1;
  color: var(--teinte, var(--jaune));
}
.citation p { font-size: 1.05rem; margin-bottom: .6em; }
.citation footer { font-size: .78rem; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .05em; }
.citation footer a { margin-left: .4em; text-transform: none; letter-spacing: 0; }

/* Listes repliables (références, articles) */
details.repli {
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  margin-top: 18px;
}
details.repli summary {
  cursor: pointer;
  padding: 14px 0;
  color: var(--petrole);
  font-weight: 700;
  list-style: none;
}
details.repli summary::-webkit-details-marker { display: none; }
details.repli summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  margin-right: .5em;
  border-radius: 50%;
  background: var(--jaune);
  color: var(--encre);
}
details.repli[open] summary::before { content: "–"; }

.references {
  columns: 3 240px;
  column-gap: 32px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: .9rem;
  color: var(--encre-douce);
}
.references li { break-inside: avoid; padding: 3px 0; }
.references strong { color: var(--encre); }

.presse-liste { list-style: none; padding: 0; margin: 0 0 18px; columns: 2 300px; column-gap: 32px; }
.presse-liste li { break-inside: avoid; padding: 6px 0; font-size: .9rem; color: var(--encre-douce); }
.presse-liste strong { color: var(--encre); }

.chiffre-cle { font-size: 1.05rem; }
.chiffre-cle strong { font-family: var(--police-titre); color: var(--corail); font-size: 1.8rem; font-weight: 800; margin-right: .2em; }

.credits { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.credits li { padding: 4px 0; }
.credits span { color: var(--encre-douce); text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; display: block; }

/* Les autres spectacles : affiches punaisées de travers */
.autres-spectacles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 22px; }
.autres-spectacles a { display: block; text-decoration: none; color: var(--encre); font-weight: 700; font-size: .9rem; text-align: center; }
.autres-spectacles img { width: 100%; margin-bottom: 10px; border: 3px solid var(--blanc); box-shadow: 4px 4px 0 var(--encre); transform: rotate(-2deg); transition: transform .2s; }
.autres-spectacles a:nth-child(even) img { transform: rotate(2deg); }
.autres-spectacles a:hover img { transform: rotate(0) translateY(-4px); }
.autres-spectacles small { display: block; color: var(--encre-douce); font-weight: 400; }


/* 10. AGENDA (rempli automatiquement depuis js/agenda.js) ================ */
/* Chaque date ressemble à un billet de spectacle avec son talon jaune. */
.agenda { display: grid; gap: 16px; }
.agenda-mois {
  font-size: 1.15rem;
  margin: 28px 0 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  text-transform: capitalize;
}
.agenda-mois:first-child { margin-top: 0; }
.date {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--blanc);
  color: var(--encre);
  border-radius: var(--arrondi);
  padding: 14px 20px 14px 0;
  overflow: hidden;
}
/* encoches rondes du billet */
.date::before,
.date::after {
  content: "";
  position: absolute;
  left: 79px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fond);
}
.date::before { top: -9px; }
.date::after  { bottom: -9px; }
.date-jour {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: -14px 0;
  padding: 10px 0;
  text-align: center;
  line-height: 1.05;
  background: var(--jaune);
  border-right: 2px dashed var(--encre);
}
.date-jour b { display: block; font-family: var(--police-titre); font-size: 2rem; font-weight: 800; }
.date-jour span { font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.date h3 { margin: 0; font-size: 1.2rem; }
.agenda .date h3 a { color: var(--encre); text-decoration: none; }
.agenda .date h3 a:hover { color: var(--corail); }
.date p { margin: 0; font-size: .9rem; color: var(--encre-douce); }
.date p strong { color: var(--encre); }
.date-image img { width: 150px; height: 40px; object-fit: cover; border-radius: 4px; }
.agenda-vide { border: 2px dashed currentColor; border-radius: var(--arrondi); padding: 18px 20px; margin: 0; }
@media (max-width: 640px) {
  .date { grid-template-columns: 66px 1fr; gap: 14px; }
  .date::before, .date::after { left: 57px; }
  .date-jour b { font-size: 1.6rem; }
  .date-image { display: none; }
}


/* 11. ESPACE PROGRAMMATEURS ============================================== */
.tableau-wrap { overflow-x: auto; border: 2px solid var(--encre); border-radius: var(--arrondi); background: var(--blanc); }
.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 820px; }
.tableau th, .tableau td { text-align: left; padding: 12px 14px; vertical-align: top; }
.tableau thead th {
  background: var(--encre);
  color: var(--jaune);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tableau tbody th { font-family: var(--police-titre); font-weight: 800; }
.tableau tbody th a { color: var(--encre); text-decoration: none; }
.tableau tbody th a:hover { color: var(--corail); }
.tableau tbody th small { display: block; font-family: var(--police-texte); font-weight: 400; color: var(--encre-douce); }
.tableau tbody tr { border-top: 1px solid var(--trait); }
.tableau tbody tr:hover { background: var(--jaune-clair); }
.tableau .oui { color: var(--sauge); font-weight: 700; }

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: 0;
}
.etapes li {
  counter-increment: etape;
  background: var(--blanc);
  border-radius: var(--arrondi);
  padding: 22px;
  font-size: .95rem;
  color: var(--encre-douce);
}
.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--jaune);
  border: 2px solid var(--encre);
  font-family: var(--police-titre);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--encre);
}
.etapes h3 { color: var(--encre); font-size: 1.1rem; }

.docs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.docs-grille .panneau { margin: 0; }
.docs-grille .panneau h3 a { color: var(--encre); text-decoration: none; }
.docs-grille .panneau h3 a:hover { color: var(--corail); }


/* 12. CONTACT ============================================================ */
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.carte-contact { background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--arrondi); padding: 26px; }
.carte-contact.principale { background: var(--jaune); box-shadow: 6px 6px 0 var(--encre); }
.carte-contact h3 { font-family: var(--police-main); font-size: 1.5rem; font-weight: 700; color: var(--corail); letter-spacing: 0; margin-bottom: .2em; }
.carte-contact.principale h3 { color: var(--encre); }
.carte-contact .nom { font-family: var(--police-titre); font-weight: 800; font-size: 1.35rem; margin-bottom: .5em; }
.carte-contact p { margin: 0 0 .3em; }
.carte-contact a { color: var(--encre); }
.carte-contact a:hover { color: var(--corail); }

/* Carte unique : numéro à gauche, adresses e-mail par sujet à droite */
.carte-unique {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 24px 48px;
  align-items: center;
  padding: 32px 36px;
}
.carte-unique .nom { font-size: 2rem; margin-bottom: .3em; }
.carte-unique .nom a { text-decoration: none; }
.carte-unique p + p { margin-top: .8em; }
.contact-emails { list-style: none; margin: 0; padding: 0; }
.contact-emails li { padding: 12px 0; border-bottom: 1px dashed rgba(29, 27, 36, .35); }
.contact-emails li:first-child { padding-top: 0; }
.contact-emails li:last-child { padding-bottom: 0; border-bottom: 0; }
.contact-emails span { display: block; font-size: .85rem; }
.contact-emails a { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .carte-unique { grid-template-columns: 1fr; padding: 26px 22px; }
}

/* Formulaire de demande de devis (prépare un e-mail) */
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.formulaire .large { grid-column: 1 / -1; }
.formulaire label { display: block; font-size: .85rem; font-weight: 700; color: var(--encre); margin-bottom: 6px; }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--encre);
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: var(--arrondi);
  padding: .65em .8em;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--jaune); }
.formulaire textarea { min-height: 110px; resize: vertical; }
.formulaire .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.apercu { white-space: pre-wrap; font-size: .85rem; background: var(--blanc); border: 2px dashed var(--trait); border-radius: var(--arrondi); padding: 14px; color: var(--encre-douce); }
@media (max-width: 640px) { .formulaire { grid-template-columns: 1fr; } }


/* 13. COMPAGNIE ET PARTENAIRES =========================================== */
.duo { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 52px; align-items: center; }
.duo img { width: 100%; }
.duo > img, .duo > figure img { clip-path: polygon(1.5% 3%, 22% 0, 48% 2%, 76% .5%, 99% 2.5%, 100% 30%, 98% 58%, 100% 86%, 97.5% 100%, 70% 97.5%, 44% 100%, 18% 98%, 0 100%, 1.5% 72%, 0 44%, 1% 18%); }
.duo figure { margin: 0; }
.duo figcaption { font-family: var(--police-main); font-size: 1.3rem; font-weight: 700; color: var(--corail); margin-top: 10px; transform: rotate(-1.5deg); }
.duo-portrait { grid-template-columns: 130px 1fr; align-items: start; gap: 30px; }
.duo-portrait > img { clip-path: none; border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: 4px solid var(--jaune); }
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; gap: 26px; }
  .duo-portrait img { max-width: 120px; }
}

.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px; list-style: none; padding: 0; margin: 0; }
.equipe img { width: 100%; aspect-ratio: 100 / 89; object-fit: cover; margin-bottom: 10px; border-radius: var(--arrondi); border: 2px solid var(--encre); box-shadow: 4px 4px 0 var(--jaune); }
.equipe li:nth-child(5n+2) img { box-shadow: 4px 4px 0 var(--petrole); }
.equipe li:nth-child(5n+3) img { box-shadow: 4px 4px 0 var(--corail); }
.equipe li:nth-child(5n+4) img { box-shadow: 4px 4px 0 var(--prune); }
.equipe li:nth-child(5n+5) img { box-shadow: 4px 4px 0 var(--sauge); }
.equipe strong { display: block; font-family: var(--police-titre); font-weight: 800; font-size: 1rem; }
.equipe span { font-size: .85rem; color: var(--encre-douce); }

.frise { list-style: none; padding: 0; margin: 0; border-left: 2px dashed var(--trait); }
.frise li { position: relative; padding: 0 0 24px 28px; }
.frise li::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--jaune); border: 2px solid var(--encre); }
.frise .annee { font-family: var(--police-titre); font-weight: 800; color: var(--corail); margin-right: .5em; }
.frise .titre { font-weight: 700; }
.frise p { margin: 2px 0 0; font-size: .9rem; color: var(--encre-douce); }
.frise a { font-size: .88rem; }

.archives { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 20px; }
.archives a { display: block; font-size: .8rem; text-decoration: none; color: var(--encre-douce); text-align: center; }
.archives img { width: 100%; aspect-ratio: 150 / 207; object-fit: cover; margin-bottom: 8px; border: 3px solid var(--blanc); box-shadow: 3px 3px 0 var(--encre); transition: transform .2s; }
.archives a:hover img { transform: translateY(-3px) rotate(-1deg); }

.partenaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.partenaire {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: center;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: var(--arrondi);
  padding: 16px;
  color: var(--encre-douce);
  text-decoration: none;
  font-size: .9rem;
  transition: box-shadow .15s, transform .15s;
}
.partenaire:hover { color: var(--encre); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--jaune); }
.partenaire span:first-child { display: flex; align-items: center; justify-content: center; height: 70px; padding: 6px; }
.partenaire img { max-height: 58px; width: auto; }


/* 14. BLOC « PROGRAMMER » (appel à contacter la diffusion) =============== */
.appel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 38px 40px;
  background: var(--jaune);
  color: var(--encre);
  border: 2px solid var(--encre);
  border-radius: var(--arrondi);
  box-shadow: 10px 10px 0 var(--encre);
  transform: rotate(-.6deg);
}
.appel h2 { margin: 0 0 .25em; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.appel p { margin: 0; max-width: 60ch; }
.appel .bouton { background: var(--encre); color: var(--jaune); --ombre: var(--blanc); }
.appel .bouton:hover { color: var(--jaune); }
.appel .bouton-contour { background: transparent; color: var(--encre); --ombre: var(--encre); }
.appel .bouton-contour:hover { background: var(--blanc); color: var(--encre); }


/* 15. PLANCHE DE PHOTOS (bande de marionnettes sur fond noir) ============= */
.planche {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 0 6px;
}
.planche a {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--scene-2);
  border-radius: 4px;
}
.planche img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .4s, filter .4s; }
.planche span {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  font-family: var(--police-main);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--jaune);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
.planche a:hover img, .planche a:focus-visible img { transform: scale(1.06); filter: saturate(1.1); }
.planche a:hover span, .planche a:focus-visible span { opacity: 1; transform: none; }
@media (max-width: 900px) { .planche { grid-template-columns: repeat(3, 1fr); } }
@media (hover: none) { .planche span { opacity: 1; transform: none; } }


/* 16. PIED DE PAGE (le contenu est dans js/site.js) ====================== */
.pied {
  position: relative;
  margin-top: 70px;
  padding: 56px 0 30px;
  background: var(--scene);
  color: var(--creme-douce);
  font-size: .92rem;
}
.pied::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -27px;
  height: 28px;
  background: var(--scene);
  transform: scaleY(-1);
  -webkit-mask: var(--masque-dechire) no-repeat center / 100% 100%;
          mask: var(--masque-dechire) no-repeat center / 100% 100%;
}
.pied-grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; }
.pied h3 { font-family: var(--police-main); color: var(--jaune); font-size: 1.5rem; font-weight: 700; letter-spacing: 0; margin-bottom: .4em; }
.pied-logo h3 { font-family: var(--police-titre); font-size: 1.15rem; font-weight: 800; color: var(--creme); }
.pied p { margin: 0 0 .3em; }
.pied a { color: var(--creme); text-decoration: none; }
.pied a:hover { color: var(--jaune); }
.pied-logo { display: flex; gap: 16px; align-items: flex-start; }
.pied-logo img { width: 48px; }
.pied-bas { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--scene-trait); font-size: .82rem; }
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied-grille { grid-template-columns: 1fr; } }


/* 17. PETITS ÉCRANS ====================================================== */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .conteneur { padding: 0 16px; }
  .appel { padding: 28px 22px; transform: none; box-shadow: 6px 6px 0 var(--encre); }
  .catalogue { grid-template-columns: 1fr; }
  .titre-filets { gap: 12px; }
}

/* Respecte le réglage « réduire les animations » de l'ordinateur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Impression (fiche pratique, contacts) */
@media print {
  body { background: #fff; color: #000; }
  .entete, .pied, .boutons, .filtres, .galerie, .videos, .planche { display: none !important; }
  .dechire::after, .dechire-haut::before, .bandeau::after, .fiche-tete::after { display: none; }
  .bandeau, .fiche-tete, .fond-scene, .fond-petrole { background: #fff; color: #000; }
  a { color: #000; }
  .panneau, .carte-contact, .spectacle { box-shadow: none; }
}

/* Filtres du catalogue : une carte masquée par un filtre disparaît vraiment
   (sinon le display:flex de .spectacle l'emportait sur l'attribut hidden) */
.catalogue .spectacle[hidden] { display: none; }

/* Titre en image (ex. le « M984 » lumineux de l'affiche) */
.titre-image { margin-bottom: .25em; line-height: 0; }
.titre-image img { display: block; width: 100%; max-width: 440px; height: auto; }