/* ==========================================================================
   Collectif TDP — proposition de refonte (maquette locale)
   Un seul système : mêmes couleurs, même typo, même carte pour TOUT
   (théâtre, concert, extérieur, film). L'éclectisme vient du contenu,
   la cohérence vient de la forme.
   ========================================================================== */

:root {
  --papier:      #F7F4EF;   /* fond général, ton pierre claire */
  --papier-2:    #EFEAE2;   /* bandes alternées */
  --encre:       #1B1A17;   /* texte principal */
  --encre-2:     #6A645B;   /* texte secondaire */
  --filet:       #DBD4C8;   /* traits 1px */
  --accent:      #9C4226;   /* terre cuite — texte (5,48:1 sur papier) */
  --accent-fond: #C25A34;   /* terre cuite — aplats seulement */
  --bleu:        #073675;   /* bleu des dossiers de diffusion (10,7:1 sur papier) */
  --bleu-papier: #ECF0F7;   /* le même bleu, à peine posé sur le papier */
  --bleu-filet:  #CFD9E8;
  --accent-rouge:#9C4226;   /* conservé pour les mentions « à fournir » */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  "Inter", "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;

  --marge: clamp(1.25rem, 4vw, 4rem);
  --large: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.conteneur { max-width: var(--large); margin: 0 auto; padding: 0 var(--marge); }
.etroit    { max-width: 720px; }

/* --- petites capitales espacées : l'unique motif graphique du site -------- */
.capitales {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-2);
}

/* ==========================  EN-TÊTE  ===================================== */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 239, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
}
.entete .conteneur {
  display: flex; align-items: center; gap: 2rem;
  min-height: 72px;
}
.marque { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.marque img { width: 40px; height: 40px; border-radius: 2px; }
.marque b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; }
.marque span { display: block; font-size: .72rem; color: var(--encre-2); letter-spacing: .04em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  text-decoration: none; font-size: .93rem; color: var(--encre-2);
  padding: .35rem 0; border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current] { color: var(--encre); border-bottom-color: var(--accent); }
.nav .bouton { color: #fff; }

.bouton {
  display: inline-block; text-decoration: none;
  background: var(--encre); color: #fff;
  padding: .6rem 1.25rem; border-radius: 2px;
  font-size: .88rem; letter-spacing: .04em;
  border: 1px solid var(--encre);
  transition: background .18s, color .18s;
}
.bouton:hover { background: var(--accent-fond); border-color: var(--accent-fond); color: #fff; }
.bouton.creux { background: transparent; color: var(--encre); }
.bouton.creux:hover { background: var(--encre); color: #fff; }

/* ==========================  OUVERTURE  =================================== */

.ouverture { position: relative; }
.ouverture img {
  width: 100%; height: clamp(300px, 52vh, 520px); object-fit: cover; object-position: center 40%;
  filter: saturate(.92);
}
.ouverture .voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27,26,23,.72) 0%, rgba(27,26,23,.25) 45%, rgba(27,26,23,.1) 100%);
}
.ouverture .texte {
  position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(1.5rem, 4vw, 3rem);
  color: #fff;
}
.ouverture h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.08; margin: .4rem 0 0;
  max-width: 20ch;
}
.ouverture .capitales { color: rgba(255,255,255,.8); }

/* --- manifeste : la phrase qui tient tout l'éclectisme -------------------- */
.manifeste {
  border-bottom: 1px solid var(--filet);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.manifeste p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.45; margin: 0; max-width: 34ch;
}
.manifeste .colonnes { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.manifeste .colonnes > div:last-child p { font-family: var(--sans); font-size: 1rem; color: var(--encre-2); max-width: 46ch; line-height: 1.7; }
@media (max-width: 800px) { .manifeste .colonnes { grid-template-columns: 1fr; } }

/* ==========================  FAMILLES + GRILLE  =========================== */

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section.alt { background: var(--papier-2); }

.titre-section {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.15; margin: 0 0 .5rem;
}

/* bandeau de famille : un filet, un nom, une définition, un compte */
.famille { padding-top: clamp(2rem, 5vw, 3.5rem); }
.famille + .famille { border-top: 1px solid var(--filet); margin-top: clamp(2rem, 5vw, 3.5rem); }
.famille-entete {
  display: grid; grid-template-columns: minmax(180px, 240px) 1fr auto;
  gap: 1.5rem; align-items: baseline;
  margin-bottom: 2rem;
}
.famille-entete h2 {
  font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 0; line-height: 1.2;
}
.famille-entete p { margin: 0; color: var(--encre-2); font-size: .97rem; max-width: 52ch; }
.famille-entete .compte { color: var(--encre-2); font-size: .8rem; letter-spacing: .12em; white-space: nowrap; }
@media (max-width: 780px) {
  .famille-entete { grid-template-columns: 1fr; gap: .4rem; }
  .famille-entete .compte { display: none; }
}

/* --- LA CARTE : identique pour un spectacle, un concert, un film ---------- */
.grille {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grille { grid-template-columns: 1fr; } }

.carte { text-decoration: none; display: block; }
.carte .vignette { display: block;
  position: relative; overflow: hidden; background: var(--papier-2);
  aspect-ratio: 3 / 2; margin-bottom: .9rem;
}
.carte .vignette img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.carte:hover .vignette img { transform: scale(1.035); }
.carte .etiquette {
  position: absolute; left: 0; bottom: 0;
  background: var(--papier); color: var(--encre);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  padding: .35rem .7rem;
}
.carte h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.25;
  margin: 0 0 .3rem;
}
.carte:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.carte .meta {
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--encre-2); margin: 0 0 .5rem;
}
.carte .pitch { margin: 0; font-size: .95rem; color: var(--encre-2); line-height: 1.6; }

/* --- filtres ------------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; }
.filtres button {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .06em;
  background: transparent; color: var(--encre-2);
  border: 1px solid var(--filet); border-radius: 2px;
  padding: .45rem 1rem; cursor: pointer;
  transition: all .15s;
}
.filtres button:hover { border-color: var(--encre-2); color: var(--encre); }
.filtres button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.famille[hidden] { display: none; }
.carte[hidden] { display: none; }

/* ==========================  AGENDA  ====================================== */

.agenda { border-top: 1px solid var(--filet); }
.date-ligne {
  display: grid; grid-template-columns: 130px 1fr 220px auto;
  gap: 1.5rem; align-items: baseline;
  padding: 1.15rem 0; border-bottom: 1px solid var(--filet);
}
.date-ligne .jour { font-family: var(--serif); font-size: 1.05rem; }
.date-ligne .quoi { font-weight: 500; }
.date-ligne .quoi small { display: block; font-weight: 400; color: var(--encre-2); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.date-ligne .ou { color: var(--encre-2); font-size: .95rem; }
.date-ligne a { font-size: .84rem; letter-spacing: .05em; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
@media (max-width: 780px) {
  .date-ligne { grid-template-columns: 1fr; gap: .25rem; }
  .date-ligne .jour { color: var(--accent); }
}

/* ==========================  FICHE SPECTACLE  ============================= */

.fiche { display: grid; grid-template-columns: 1fr 320px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .fiche { grid-template-columns: 1fr; } }

.fiche-texte h2 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; margin: 2.5rem 0 .8rem; }
.fiche-texte h2:first-child { margin-top: 0; }
.fiche-texte p { margin: 0 0 1.1rem; }
.fiche-texte .chapeau { font-family: var(--serif); font-size: 1.22rem; line-height: 1.55; }

blockquote {
  margin: 2rem 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--accent-fond);
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; color: var(--encre);
}
blockquote cite { display: block; margin-top: .7rem; font-family: var(--sans); font-style: normal;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); }

/* encart technique : la même structure sur toutes les fiches */
.encart {
  position: sticky; top: 96px;
  border: 1px solid var(--filet); background: var(--papier-2);
  padding: 1.5rem;
}
.encart dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: .85rem; }
.encart dt { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.encart dd { margin: .15rem 0 0; font-size: .95rem; line-height: 1.5; }
.encart .bouton { display: block; text-align: center; margin-top: 1.5rem; }
.encart .manque { color: var(--accent); font-style: italic; }

.videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 1.5rem 0; }
@media (max-width: 700px) { .videos { grid-template-columns: 1fr; } }
.videos iframe, .videos video, .videos .cadre {
  width: 100%; max-width: 100%; aspect-ratio: 16/9; border: 0; background: #111;
}

details.programmations { border-top: 1px solid var(--filet); padding-top: 1rem; margin-top: 2rem; }
details.programmations summary { cursor: pointer; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); }
details.programmations p { font-size: .9rem; color: var(--encre-2); margin-top: 1rem; }

/* ==========================  PIED  ======================================== */

.pied { background: var(--encre); color: #CFC9BF; padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.pied a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
.pied .colonnes { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 800px) { .pied .colonnes { grid-template-columns: 1fr; } }
.pied h3 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #8D867B; margin: 0 0 .9rem; font-weight: 600; }
.pied p, .pied li { font-size: .92rem; line-height: 1.7; margin: 0 0 .4rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied .bas { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.5rem; padding-top: 1.2rem; font-size: .8rem; color: #8D867B; }

/* --- annotation de maquette (à supprimer en production) ------------------- */
.note-maquette {
  background: #FFF8E6; border: 1px dashed #C9A227; color: #6B5310;
  padding: .8rem 1rem; font-size: .85rem; line-height: 1.55; margin: 1.5rem 0;
}
.note-maquette b { color: #4A3906; }

/* --- grille à 4 colonnes (aperçu d'accueil) ------------------------------ */
.grille.quatre { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grille.quatre { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grille.quatre { grid-template-columns: 1fr; } }

/* --- en-tête sur petit écran : la barre passe sur deux lignes,
       aucun lien n'est masqué (le bouton Contact reste toujours visible) --- */
@media (max-width: 760px) {
  .entete .conteneur { flex-wrap: wrap; gap: .6rem; padding-top: .7rem; padding-bottom: .7rem; }
  .nav { margin-left: 0; width: 100%; gap: .9rem; justify-content: space-between; }
  .nav a { font-size: .82rem; }
  .nav .bouton { padding: .4rem .85rem; font-size: .8rem; }
  .marque img { width: 34px; height: 34px; }
}

/* --- deux colonnes de section : une seule sur petit écran ---------------- */
@media (max-width: 800px) {
  .duo { grid-template-columns: 1fr !important; }
}

/* --- galerie de la fiche : mêmes proportions que les cartes -------------- */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 620px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
.galerie img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--papier-2); }

/* --- liste de villes / diffusion : texte dense mais respirable ----------- */
.villes { font-size: .92rem; color: var(--encre-2); line-height: 1.8; }

/* --- emplacement d'image encore vide (contenu à fournir) ----------------- */
.vide {
  display: grid; place-items: center; text-align: center;
  background: var(--papier-2); border: 1px dashed #C9A227; color: #6B5310;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 1rem; min-height: 100%;
}
.ouverture .vide { height: clamp(200px, 26vh, 300px); font-size: .82rem; }
.carte .vignette .vide { position: absolute; inset: 0; }

/* --- lien sortant mis en avant (site dédié d'un artiste) ----------------- */
.lien-fort {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin: 2.5rem 0 0; padding: 1.4rem 1.6rem;
  background: var(--accent-fond); color: #fff; text-decoration: none;
  transition: filter .18s;
}
.lien-fort:hover { filter: brightness(1.08); }
.lien-fort .quoi { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.lien-fort .quoi small {
  display: block; font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82);
  margin-bottom: .35rem;
}
.lien-fort .fleche { font-size: 1.6rem; line-height: 1; flex: none; }
@media (max-width: 620px) {
  .lien-fort { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* --- formules : trois blocs côte à côte ---------------------------------- */
.formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 1.5rem 0; }
@media (max-width: 760px) { .formules { grid-template-columns: 1fr; } }
.formules > div { border-top: 2px solid var(--encre); padding-top: .9rem; }
.formules h3 { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; margin: 0 0 .2rem; }
.formules .duree {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .5rem; font-weight: 600;
}
.formules p { margin: 0; font-size: .93rem; color: var(--encre-2); line-height: 1.6; }

/* --- listes dans le corps d'une fiche ------------------------------------ */
.fiche-texte ul, .fiche-texte ol { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.fiche-texte li { margin-bottom: .55rem; line-height: 1.6; }

/* ==========================  CALENDRIER  ================================== */

.bloc-agenda + .bloc-agenda { margin-top: clamp(3rem, 7vw, 5rem); }

/* le passé : fond distinct, pour qu'on voie d'un coup où bascule la page */
.passe-bloc {
  background: var(--papier-2);
  margin-left: calc(var(--marge) * -1); margin-right: calc(var(--marge) * -1);
  padding: clamp(2rem, 5vw, 3rem) var(--marge);
}

/* l'année : c'est le repère qu'on cherche en parcourant l'historique */
.annee + .annee { margin-top: 2.2rem; }
.annee-titre {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem); color: var(--accent);
  margin: 0 0 .3rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--accent-fond);
}

.date-ligne.passe { color: var(--encre-2); }
.date-ligne.passe .jour { color: var(--encre-2); }
.date-ligne .quoi .note {
  display: block; font-size: .78rem; color: var(--encre-2);
  font-style: italic; letter-spacing: 0; text-transform: none; margin-top: .15rem;
}
.date-ligne .libre { font-size: .84rem; color: var(--encre-2); white-space: nowrap; }
.date-ligne .exemple {
  display: inline-block; vertical-align: middle; margin-left: .4rem;
  background: #FFF8E6; border: 1px dashed #C9A227; color: #6B5310;
  font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; padding: .1rem .35rem;
}
.date-ligne[hidden], .annee[hidden] { display: none; }
.agenda[hidden] { display: none; }
.agenda-vide { color: var(--encre-2); font-style: italic; padding: 1.5rem 0; margin: 0; }

/* --- les trois actes / les deux pianos : blocs numérotés ------------------ */
.actes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 1.5rem 0 2rem; }
@media (max-width: 760px) { .actes { grid-template-columns: 1fr; } }
.actes > div { border-top: 2px solid var(--encre); padding-top: .9rem; }
.actes .num {
  font-family: var(--serif); font-size: .85rem; color: var(--accent);
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .2rem; font-weight: 600;
}
.actes h3 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin: 0 0 .4rem; line-height: 1.25; }
.actes p { margin: 0; font-size: .93rem; color: var(--encre-2); line-height: 1.6; }

.pianos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin: 1.5rem 0 2rem; }
@media (max-width: 700px) { .pianos { grid-template-columns: 1fr; } }
.pianos figure { margin: 0; }
.pianos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: .9rem; }
.pianos h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin: 0 0 .15rem; }
.pianos .modele { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem; font-weight: 600; }
.pianos dl { margin: .8rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .88rem; }
.pianos dt { color: var(--encre-2); }
.pianos dd { margin: 0; }
.pianos > figure > p { font-size: .93rem; color: var(--encre-2); line-height: 1.6; margin: 0; }

/* --- citation-lieu : le texte poétique du dossier ------------------------ */
.lieux-poeme {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.5;
  color: var(--encre); margin: 1.5rem 0; max-width: 34ch;
}
.lieux-poeme span { display: block; color: var(--accent); }

/* --- bouton de téléchargement dans l'encart ------------------------------ */
.encart .bouton + .bouton { margin-top: .6rem; background: transparent; color: var(--encre); }
.encart .bouton + .bouton:hover { background: var(--encre); color: #fff; }

/* --- barre des trois épisodes : les « onglets » de Rhapsodes ------------- */
.episodes { border-bottom: 1px solid var(--filet); background: var(--papier); }
.episodes .conteneur { display: flex; align-items: stretch; gap: 0; overflow-x: auto; }
.episodes a {
  flex: 1 1 0; min-width: 150px;
  display: block; text-decoration: none; color: var(--encre-2);
  padding: 1rem 1.2rem 1rem 0;
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.2;
  border-top: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.episodes a .num {
  display: block; font-family: var(--sans); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2);
  margin-bottom: .25rem;
}
.episodes a:hover { color: var(--encre); }
.episodes a[aria-current] { color: var(--encre); border-top-color: var(--accent-fond); }
.episodes a[aria-current] .num { color: var(--accent); }
.episodes a.serie {
  flex: 0 0 auto; min-width: 0; align-self: center;
  font-family: var(--sans); font-size: .85rem; letter-spacing: .05em;
  padding: 1rem 0 1rem 1.5rem; border-top: 0; color: var(--accent);
}
@media (max-width: 620px) { .episodes a { font-size: 1.05rem; padding-right: .9rem; } }

/* trois boutons empilés dans l'encart */
.encart .bouton + .bouton + .bouton { margin-top: .5rem; }

/* la barre des épisodes passe sur deux rangs plutôt que de défiler à l'aveugle */
@media (max-width: 640px) {
  .episodes .conteneur { flex-wrap: wrap; overflow-x: visible; }
  .episodes a { flex: 0 0 33.333%; min-width: 0; padding: .8rem .6rem .8rem 0; font-size: .98rem; }
  .episodes a.serie { flex: 0 0 100%; padding: 0 0 .9rem; border-top: 1px solid var(--filet); padding-top: .7rem; }
}

/* --- répertoire : on remonte les vignettes, surtout sur petit écran ------ */
.page-repertoire .section:first-of-type { padding-top: clamp(1.1rem, 2.6vw, 2rem); }
.page-repertoire .filtres { margin-top: 1.1rem; }
.page-repertoire main > .section:nth-of-type(2) { padding-top: 0; }
.page-repertoire .famille:first-of-type { padding-top: clamp(1.1rem, 2.6vw, 1.9rem); }
.page-repertoire .famille-entete { margin-bottom: 1.3rem; }
@media (max-width: 640px) {
  .page-repertoire .famille-entete { margin-bottom: 1rem; }
  .page-repertoire .section:first-of-type { padding-top: 1rem; }
}
.page-repertoire .section:first-of-type h1 { margin-bottom: .5rem; }
.page-repertoire .section:first-of-type > .conteneur > p { margin: 0; }
@media (max-width: 640px) {
  .page-repertoire .section:first-of-type > .conteneur > p { font-size: .95rem; line-height: 1.55; }
  .page-repertoire .filtres { margin-top: .9rem; gap: .4rem; }
  .page-repertoire .filtres button { padding: .38rem .8rem; }
}

/* les entrées de menu ne se coupent jamais au milieu d'un mot */
.nav a { white-space: nowrap; }
@media (max-width: 420px) {
  .nav { flex-wrap: wrap; gap: .3rem .7rem; justify-content: flex-start; }
  .nav a { font-size: .78rem; padding: .2rem 0; }
  .nav .bouton { padding: .32rem .7rem; font-size: .76rem; }
  .entete .conteneur { padding-top: .5rem; padding-bottom: .5rem; gap: .4rem; }
}

/* ==========  PAGES RHAPSODES : le bleu des dossiers de diffusion  ========= */

/* on bascule l'accent de la page : filets de citation, numéros d'épisode,
   onglet actif et liens suivent tous, sans avoir à les reprendre un par un */
.page-rhapsodes { --accent: var(--bleu); --accent-fond: var(--bleu); }

.page-rhapsodes blockquote { border-left-color: var(--bleu); }
.page-rhapsodes .chapeau { color: var(--bleu); }

/* la presse se lit en italique ; le nom du journal reste droit */
.page-rhapsodes blockquote.presse { font-style: italic; }
.page-rhapsodes blockquote.presse cite { font-style: normal; }

/* le manifeste du collectif : entre guillemets, sans italique */
.page-rhapsodes blockquote.manifeste-tdp { font-style: normal; }

/* les renvois vers les autres épisodes, dans le corps du texte : discrets */
.page-rhapsodes .fiche-texte p > a {
  color: var(--bleu); text-decoration: none;
  border-bottom: 1px solid rgba(7, 54, 117, .35);
}
.page-rhapsodes .fiche-texte p > a:hover { border-bottom-color: var(--bleu); }

/* --- un seul filet bleu court le long des paragraphes ET de la citation --- */
.page-rhapsodes .groupe-bleu {
  border-left: 2px solid var(--bleu);
  padding-left: 1.4rem;
  margin: 1.6rem 0 2rem;
}
.page-rhapsodes .groupe-bleu > p:first-child { margin-top: 0; }
.page-rhapsodes .groupe-bleu blockquote {
  border-left: 0; padding-left: 0; margin: 1.1rem 0 0;
}
.page-rhapsodes .groupe-bleu blockquote:last-child { margin-bottom: 0; }

/* --- l'encart technique : valeurs en bleu gras, fond à peine teinté ------- */
.page-rhapsodes .encart {
  background: var(--bleu-papier);
  border-color: var(--bleu-filet);
}
.page-rhapsodes .encart dd { color: var(--bleu); font-weight: 600; }
.page-rhapsodes .encart dd em { font-weight: 600; }
.page-rhapsodes .encart .manque { color: var(--accent-rouge); font-weight: 400; }
.page-rhapsodes .encart .bouton.creux,
.page-rhapsodes .encart .bouton + .bouton { border-color: var(--bleu); color: var(--bleu); }
.page-rhapsodes .encart .bouton + .bouton:hover { background: var(--bleu); color: #fff; }

/* --- tous les intertitres des pages Rhapsodes dans le bleu du dossier ----- */
.page-rhapsodes .fiche-texte h2,
.page-rhapsodes .titre-section { color: var(--bleu); }

/* --- rappel des deux autres épisodes : deux cartes, largeur inchangée ----- */
.grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 830px; }
@media (max-width: 620px) { .grille.deux { grid-template-columns: 1fr; } }

/* --- retour au répertoire, au bas de chaque page ------------------------- */
.retour-repertoire {
  background: var(--papier);
  border-top: 1px solid var(--filet);
  padding: clamp(1.8rem, 4vw, 2.8rem) 0;
  text-align: center;
}
.retour-repertoire .bouton { min-width: 220px; }

/* --- listes de crédits : intitulé à gauche, nom à droite ----------------- */
dl.credits { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem; margin: 0 0 1.2rem; font-size: .95rem; }
dl.credits dt { color: var(--encre-2); }
dl.credits dd { margin: 0; }
@media (max-width: 520px) { dl.credits { grid-template-columns: 1fr; gap: 0 0; } dl.credits dd { margin-bottom: .6rem; } }
.videos.solo { grid-template-columns: 1fr; }

/* --- video verticale (format telephone) : on la borne en largeur --------- */
.video-portrait { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 1.5rem; align-items: center; margin: 1.5rem 0; }
.video-portrait video { width: 100%; aspect-ratio: 9/16; background: #111; display: block; }
.video-portrait p { margin: 0 0 .7rem; font-size: .95rem; color: var(--encre-2); }
@media (max-width: 620px) { .video-portrait { grid-template-columns: 1fr; } .video-portrait video { max-width: 260px; } }

/* --- credit photo sous une galerie -------------------------------------- */
.credit-photo {
  margin: -.6rem 0 1.6rem; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-2);
}

/* ==========================================================================
   BANNIÈRE DE LA PAGE D'ACCUEIL
   Le triptyque Rhapsodes d'abord, puis un diaporama qui tourne tout seul.
   Sans JavaScript, seule la première diapositive s'affiche.
   ========================================================================== */

.banniere { position: relative; height: 100svh; background: var(--papier-2); overflow: hidden; }
.banniere .diapo {
  position: absolute; inset: 0; display: flex;
  opacity: 0; visibility: hidden;
  transition: opacity 1200ms ease, visibility 0s linear 1200ms;
}
.banniere .diapo.actif {
  opacity: 1; visibility: visible;
  transition: opacity 1200ms ease, visibility 0s;
}
.banniere .diapo img {
  flex: 1 1 0; min-width: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* les trois volets du triptyque se séparent d'un fin filet de papier */
.banniere .triptyque img + img { border-left: 3px solid var(--papier); }
@media (max-width: 700px) {
  .banniere { height: 88svh; }
  .banniere .triptyque { flex-direction: column; }
  .banniere .triptyque img + img { border-left: 0; border-top: 3px solid var(--papier); }
}

/* --- présentation : le texte du bilan à gauche, les créations à droite ---- */
.presentation .colonnes > div:first-child p:not(.capitales) {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); line-height: 1.65;
  max-width: 54ch; margin: 0 0 1.1rem;
}
.presentation .titre-section { margin: 0 0 1.4rem; }
.presentation .liste-titre {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bleu);
  margin: 0 0 .8rem;
}
.presentation .chrono {
  list-style: none; margin: 0 0 2rem; padding: 0;
  font-family: var(--sans); font-size: .92rem; color: var(--encre-2);
}
.presentation .chrono li {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .38rem 0; border-bottom: 1px solid var(--filet); line-height: 1.55;
}
.presentation .chrono b {
  color: var(--encre); font-weight: 600; flex: 0 0 2.6em;
  font-variant-numeric: tabular-nums;
}

/* --- grille à 5 colonnes (aperçu du répertoire sur l'accueil) ------------ */
.grille.cinq { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1150px) { .grille.cinq { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) { .grille.cinq { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grille.cinq { grid-template-columns: 1fr; } }

/* --- la page médiation : les actions, année par année -------------------- */
.mediation-liste {
  list-style: none; margin: 0; padding: 0;
  font-family: var(--sans); font-size: .95rem; color: var(--encre-2);
}
.mediation-liste li { padding: .55rem 0; border-bottom: 1px solid var(--filet); line-height: 1.6; }
.mediation-liste b { color: var(--encre); font-weight: 600; }