/* ============================================================
   Ensemble Vocal Mascarin — feuille de style
   Aucun texte de contenu ici : uniquement la mise en forme.
   Charte : blanc chaud / violet Mascarin / or — Josefin Sans + Montserrat
   ============================================================ */

/* ---------- 1. Jetons de design ---------- */
:root {
  /* couleurs — charte « Violet Mascarin », version sobre.
     Le violet ne sert qu'à la barre, au pied, aux boutons et aux accents.
     Tout le reste du site est sur fond blanc chaud. */
  --violet:         #4A2479;   /* couleur principale (violet de la plaquette) */
  --violet-sombre:  #351A57;   /* survol des boutons violets */
  --violet-nuit:    #2E1150;   /* bandes les plus profondes : hero, pied */
  --violet-clair:   #7A55B0;   /* filigranes et survols sur fond violet */
  --violet-pale:    #F3EFF8;   /* le seul aplat teinté, une fois par page */
  --or:             #F2B300;   /* or du logo : filets, contour du bouton */
  --cuivre:         #A94F2C;   /* étiquettes en petites capitales sur fond clair.
                                  Le terre cuite de l'ancien site (#B65A33) assombri
                                  de deux crans : il passe alors le seuil de lisibilité
                                  aussi bien sur le blanc chaud (5,3:1) que sur la
                                  bande lilas (4,8:1). */
  --creme-logo:     #F7F1E3;   /* texte et logo posés sur le violet */

  --creme:          #FBF9F5;   /* fond de page */
  --vert:           #211E2A;   /* encre principale (le nom reste, la valeur change) */
  --terre:          #4A2479;   /* accent = violet */
  --terre-clair:    #F2B300;   /* accent posé sur fond violet = or */
  --texte-2:        #574F63;   /* texte secondaire sur fond clair */
  --texte-2-sombre: #DCD3E6;   /* texte secondaire sur fond violet */
  --menu:           #6B6275;
  --blanc:          #FFFFFF;
  --bord:           #E4DED4;   /* trait sur fond clair */
  --bord-blanc:     #EAE4DA;   /* trait sur fond blanc */
  --marque:         #6F6A5F;   /* texte des emplacements à remplir.
                                  #8B8478 ne donnait que 3,7:1 sur blanc — sous le
                                  seuil pour un texte de 14 px, y compris dans un
                                  bouton grisé. Assombri : 5,4:1. */

  /* rayons */
  --r-carte:  20px;
  --r-bloc:   24px;
  --r-petit:  14px;
  --r-pilule: 999px;

  /* rythme */
  --largeur:  1200px;
  --gouttiere: 88px;
  --entre-sections: 128px;

  /* typographie */
  --titre: "Josefin Sans", "Avenir Next", "Century Gothic", sans-serif;
  --texte: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--vert);
  font-family: var(--texte);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--titre); font-weight: 400; margin: 0; }

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

.lien-evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--violet); color: var(--creme-logo);
  padding: 10px 18px; border-radius: 0 0 var(--r-petit) 0; z-index: 100;
}
.lien-evitement:focus { left: 0; }

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

/* ---------- 3. Gabarit ---------- */
.zone {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.bande { padding-block: calc(var(--entre-sections) / 2); }

/* Une section sur deux est posée sur un fond lilas très clair.
   C'est ce qui donne le rythme : sans lui, tout le corps de page
   est une seule nappe blanche. */
.bande--teintee { background: var(--violet-pale); }

/* ---------- 4. Éléments de texte ---------- */
.surtitre {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cuivre);
  margin: 0;
}
.surtitre--discret { color: var(--menu); }
.surtitre--clair   { color: var(--violet); }

.titre-section {
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.18;
  letter-spacing: -.01em;
}

/* L'étiquette de section est posée au-dessus du titre, comme sur les affiches. */
.entete-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 36px;
}
.mascarin__textes .surtitre,
.deux-colonnes .surtitre { margin-bottom: 4px; }

.texte-2 { color: var(--texte-2); }

.mesure { max-width: 46ch; }

/* mot mis en avant dans une phrase (les taux de réduction d'impôt) */
/* les deux taux de réduction d'impôt : en gras, ce sont les chiffres qu'on cherche.
   nowrap parce qu'en français l'espace avant le % est insécable : « 66 % » ne
   doit jamais se couper en fin de ligne. */
.appui { font-weight: 700; color: var(--vert); white-space: nowrap; }

/* emplacement à remplir dans contenu.json */
.a-remplir { color: var(--marque); }
.bouton .a-remplir,
.bloc-vert .a-remplir { color: inherit; opacity: .72; }

/* ---------- 5. Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  min-height: 44px;
  border-radius: var(--r-pilule);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.bouton--plein   { background: var(--violet); color: var(--creme-logo); }
.bouton--plein:hover   { background: var(--violet-sombre); }
.bouton--contour { border-color: var(--bord); color: var(--vert); }
.bouton--contour:hover { border-color: var(--vert); }
.bouton--petit   { padding: 11px 20px; min-height: 40px; }

.groupe-boutons { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap; overflow-wrap: anywhere;
  font-size: 14px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--terre);
}
.lien-fleche::after { content: "→"; letter-spacing: 0; }
.lien-fleche:hover { color: var(--violet-sombre); }

/* ---------- 6. Cartes et blocs ---------- */
.carte {
  background: var(--blanc);
  border-radius: var(--r-carte);
  padding: 30px 32px;
}
.carte--grande { border-radius: var(--r-bloc); padding: 52px 56px; }
.carte--bordee { border: 1px solid var(--bord-blanc); }

/* Bloc mis en avant. Un seul par page : c'est le seul aplat teinté du site. */
.bloc-vert {
  background: var(--violet-pale);
  color: var(--vert);
  border-radius: var(--r-bloc);
}
.bloc-vert .texte-2 { color: var(--texte-2); }

/* ---------- 7. Barre de navigation ---------- */
.barre {
  padding-block: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--violet);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, padding .2s ease;
}
.barre--defilee { border-bottom-color: rgba(242, 179, 0, .38); padding-block: 11px; }

.barre__marque--logo { display: flex; align-items: center; }
.barre__logo {
  height: 46px;
  width: auto;
  display: block;
  transition: height .2s ease;
}
.barre--defilee .barre__logo { height: 38px; }

/* les ancres ne doivent pas passer sous la barre collante */
[id] { scroll-margin-top: 104px; }

.barre__interieur {
  display: flex;
  align-items: center;
  gap: 28px;
}

.barre__marque {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--creme-logo);
}

.barre__liens {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.barre__liens a {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  color: rgba(247, 241, 227, .86);
  white-space: nowrap;
}
.barre__liens a:hover { color: var(--creme-logo); }

/* « Espace choristes » : réservé aux choristes, donc mis en retrait.
   Un filet le sépare des liens publics. */
.barre__choristes {
  opacity: .82;
  font-weight: 400 !important;
  padding-left: 20px;
  border-left: 1px solid rgba(247, 241, 227, .28);
}
.barre__choristes:hover { opacity: 1; }

/* Bouton « Menu » — visible seulement sur téléphone (voir plus bas).
   Il porte le mot en toutes lettres à côté des trois traits : c'est ce qui
   le rend trouvable pour quelqu'un qui n'a pas l'habitude du symbole seul. */
.barre__menu {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid rgba(247, 241, 227, .55);
  border-radius: 2px;
  background: transparent;
  color: var(--creme-logo);
  font-family: var(--texte);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
}
.barre__menu:hover { border-color: var(--creme-logo); }
.barre__menu-icone {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.barre__menu-icone::before,
.barre__menu-icone::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.barre__menu-icone::before { top: -6px; }
.barre__menu-icone::after  { top: 6px; }

/* « Nous soutenir » : le seul appel à l'action du site.
   Contour or sur violet — 6,2:1, largement au-dessus du minimum. */
.barre__bouton {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  font-size: 15px;
  border: 1px solid var(--or);
  background: transparent;
  color: var(--or) !important;
  padding: 11px 18px;
  border-radius: 2px;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  transition: background-color .18s ease, color .18s ease;
}
.barre__bouton:hover { background: var(--or); color: var(--violet) !important; }

/* ---------- 8. Hero ---------- */
.hero { padding-top: 40px; }

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 72px;
  align-items: start;
}

.hero__titre {
  font-size: clamp(50px, 6.2vw, 74px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-bottom: 34px;
}
.hero__titre span { display: block; }
.hero__titre em {
  font-style: normal;
  color: var(--violet);
  font-weight: 400;
}

/* petit filet décoratif entre le titre et le texte de vocation */
.hero__filet {
  width: 46px; height: 2px; border: 0; margin: 0 0 28px;
  background: var(--or);
}

.hero__vocation { margin-bottom: 32px; }

.hero__colonne { display: flex; flex-direction: column; gap: 20px; }

/* pavé vert avec le dessin de l'oiseau */
.vignette-oiseau {
  background: var(--violet);
  border-radius: var(--r-bloc);
  color: var(--creme);
  aspect-ratio: 21 / 16;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.vignette-oiseau img { width: 100%; height: 100%; object-fit: cover; }
/* Hors saison : la photo de groupe, au-dessus du titre.
   Elle est montrée ENTIÈRE — jamais recadrée. Le bandeau reprend le violet
   du hero, si bien qu'au-delà de la largeur native de la photo (1200 px)
   les côtés se confondent avec la section. */
.hero__bandeau {
  width: 100%;
  background: var(--violet-nuit);
  display: flex;
  justify-content: center;
}
.hero__bandeau-image {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
}
.hero__grille--simple { grid-template-columns: minmax(0, 1fr); }
/* sans colonne de droite, le texte de vocation peut respirer un peu plus */
.hero__grille--simple .hero__vocation { max-width: 60ch; }
body[data-etat="hors_saison"] .hero { padding-top: 0; }
body[data-etat="hors_saison"] .hero .zone { padding-top: 96px; }
.oiseau { width: 62%; height: auto; opacity: .92; }

/* encart « prochain concert » */
.encart-concert { display: grid; gap: 10px; }
.encart-concert__date {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
}
.encart-concert__details {
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte-2);
}

/* encart « hors saison » */
.retour-images { display: grid; gap: 14px; }
.retour-images__titre { font-size: 24px; }
.grille-medias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.media {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--bord-blanc);
  border-radius: var(--r-petit);
  display: grid;
  place-items: center;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marque);
  overflow: hidden;
}
.media img { width: 100%; height: 100%; object-fit: cover; }

.annonce { padding: 22px 26px; display: grid; gap: 8px; }
.annonce__texte { font-family: var(--titre); font-size: 22px; line-height: 1.35; }

/* carte entièrement cliquable */
.carte--lien { text-decoration: none; color: inherit; transition: box-shadow .18s ease; }
.carte--lien:hover { box-shadow: 0 6px 20px rgba(74, 36, 121, .10); }

/* ---------- 9. Section « Un concert par an » ---------- */
.concert__entete {
  border-bottom: 1px solid var(--bord-blanc);
  padding-bottom: 22px;
  margin-bottom: 0;
}

.concert__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  padding-top: 26px;
}

.liste-infos { display: grid; gap: 0; margin: 24px 0 28px; }
.liste-infos > div {
  display: grid;
  /* « RÉPÉTITIONS » mesure 107 px en petites capitales espacées : à 92 px le
     libellé mordait sur sa valeur. La colonne tient le plus long libellé, et
     un libellé encore plus long passera à la ligne au lieu de chevaucher. */
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--bord-blanc);
}
.liste-infos > div:last-child { border-bottom: 1px solid var(--bord-blanc); }
.liste-infos dt {
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cuivre); padding-top: 4px;
  overflow-wrap: break-word;
}
.liste-infos dd { margin: 0; font-size: 17px; line-height: 1.6; }
.liste-infos .complement { display: block; font-size: 15.5px; color: var(--texte-2); }

.editions { display: grid; gap: 12px; margin-top: 14px; }
.edition__titre { font-size: 21px; line-height: 1.3; margin-bottom: 8px; }
.edition__programme,
.edition__note { font-size: 16px; line-height: 1.7; color: var(--texte-2); }
.edition__note { margin-top: 6px; font-style: italic; }
/* accueil : les deux dernières éditions, en vignettes cliquables */
.editions-accueil { margin-top: 4px; }
.edition-accueil {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  background: var(--blanc);
  border-radius: var(--r-carte);
  padding: 26px 30px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.edition-accueil:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(74, 36, 121, .12);
}
.edition-accueil__image {
  width: 100%;
  border-radius: var(--r-petit);
  display: block;
}
.edition-accueil__titre { font-size: 22px; line-height: 1.3; margin-top: 8px; }

/* liste des éditions précédentes, page « Les concerts » */
.editions-liste { display: grid; gap: 0; margin-top: 8px; }
.edition {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid var(--bord);
}
.edition:first-child { border-top: 0; padding-top: 12px; }
.edition__image {
  width: 100%;
  border-radius: var(--r-petit);
  display: block;
  box-shadow: 0 1px 3px rgba(74, 36, 121, .14);
}
.edition__sans-visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
  padding: 20px;
  border: 1px dashed var(--bord);
  border-radius: var(--r-petit);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--marque);
}
.edition__annee {
  font-family: var(--titre);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  color: var(--terre);
}
.edition__date {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cuivre);
}
.edition__texte .edition__titre { margin: 14px 0 0; font-size: 24px; }
.edition__presentation { margin-top: 14px; font-size: 17px; line-height: 1.75; color: var(--texte-2); }
.edition__texte .edition__programme { margin-top: 18px; font-size: 17px; line-height: 1.85; }
.edition__texte .edition__note { margin-top: 10px; }

/* liste de noms (membres bienfaiteurs) */
.liste-noms { columns: 2; column-gap: 40px; }
.liste-noms li {
  break-inside: avoid;
  padding: 10px 0;
  border-bottom: 1px solid var(--bord);
  font-family: var(--titre);
  font-size: 21px;
}

.editions__note {
  text-align: center;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--marque);
  border: 1px dashed var(--bord-blanc);
  border-radius: var(--r-petit);
  padding: 14px;
}

/* ---------- 10. Grilles de cartes ---------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.carte__titre { font-size: 22px; line-height: 1.3; margin-bottom: 12px; }
.carte__texte { font-size: 17px; line-height: 1.7; color: var(--texte-2); }

/* ---------- 11. Le chœur ---------- */
.pupitres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.pupitres:last-child { margin-bottom: 0; }
.pupitre__nombre {
  font-family: var(--titre);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 8px;
}
.pupitre__nom {
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cuivre);
}

/* adresse électronique sous le nom, dans les cartes du bureau */
.carte__courriel {
  display: inline-block;
  margin-top: 10px;
  /* une adresse tient sur une ligne dans une carte de tiers de largeur :
     14,5 px est le plus petit corps admis sur le site, et il suffit ici. */
  font-size: 14.5px;
  letter-spacing: -.005em;
  line-height: 1.5;
  color: var(--terre);
  text-decoration: none;
  border-bottom: 1px solid var(--bord);
  padding-bottom: 2px;
  overflow-wrap: anywhere;
}
.carte__courriel:hover { color: var(--violet-sombre); border-bottom-color: var(--violet-sombre); }

.encadrant { display: grid; gap: 6px; }
.encadrant__nom { font-family: var(--titre); font-size: 23px; }

/* ---------- 12. Le mascarin ---------- */
.mascarin {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 56px 60px;
}
.mascarin .oiseau { width: 100%; color: var(--violet); opacity: .75; }
.mascarin__image {
  width: 100%;
  border-radius: var(--r-petit);
  display: block;
}
.mascarin__textes { display: grid; gap: 14px; max-width: 62ch; }
.mascarin__titre { font-size: clamp(24px, 3vw, 30px); }
.mascarin p { font-size: 17px; line-height: 1.8; }

/* ---------- 13. Nous rejoindre ---------- */
.deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}
.deux-colonnes .liste-infos { margin: 0; }
.deux-colonnes .liste-infos > div:first-child { border-top: 0; padding-top: 0; }
.deux-colonnes .liste-infos > div:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- 14. Nous soutenir ---------- */
.soutien__taux { font-weight: 700; }

/* ---------- 15. Pied de page ---------- */
.pied {
  background: var(--violet);
  color: var(--creme-logo);
  padding-block: 64px 36px;
}
.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
}
/* L'inscription à l'infolettre ouvre le pied de page, sur toutes les pages.
   Elle s'écrit à la même échelle que le reste du pied : ni carte blanche, ni
   gros titre. C'est une invitation discrète, pas une bannière. */
.pied__infolettre {
  margin-bottom: 46px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(247, 241, 227, .16);
}
.infolettre--pied { max-width: 560px; }
.infolettre--pied .surtitre {
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  color: var(--or); margin-bottom: 8px;
}
/* Bat .titre-section (0,2,0 contre 0,1,0) : sans cela le titre garderait
   ses 38 px de titre de section au milieu du pied de page. */
.infolettre--pied .infolettre__titre {
  font-family: var(--texte);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--creme-logo);
  margin: 0;
}
.infolettre--pied .infolettre__texte {
  font-size: 15px; line-height: 1.6; margin-top: 6px;
  color: var(--texte-2-sombre); max-width: none;
}
.infolettre--pied .infolettre__form { margin-top: 16px; gap: 10px; }
.infolettre--pied .infolettre__form input[type="email"] {
  flex: 1 1 210px; min-height: 46px; font-size: 15px; padding: 11px 15px;
}
.infolettre--pied .infolettre__form button {
  min-height: 46px; padding-inline: 24px; font-size: 13px;
}
/* Un bouton violet sur un pied violet ne se verrait pas : ici c'est l'or qui
   porte l'action, avec l'encre sombre par-dessus. */
.infolettre--pied .bouton--plein { background: var(--or); color: var(--violet-nuit); }
.infolettre--pied .bouton--plein:hover { background: var(--creme-logo); }
.infolettre--pied .infolettre__mention {
  font-size: 13px; margin-top: 10px; color: var(--texte-2-sombre);
}
/* Tant que l'adresse Mailchimp n'est pas renseignée, c'est l'état d'attente
   qui s'affiche : lui aussi doit rester lisible sur le violet. */
.infolettre--pied .attente__note { font-size: 13px; color: var(--texte-2-sombre); }
.infolettre--pied .bouton--indisponible {
  border-color: rgba(247, 241, 227, .35); color: var(--texte-2-sombre);
}
.pied__marque {
  font-size: 13px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 8px;
}
.pied__slogan { font-family: var(--titre); color: var(--or); font-size: 18px; }
.pied__colonne h3 {
  font-family: var(--texte);
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--or); margin-bottom: 14px;
}
.pied__colonne li { font-size: 16px; line-height: 1.8; color: var(--texte-2-sombre); }
.pied__colonne a { text-decoration: none; }
.pied__colonne a:hover { color: var(--creme-logo); }

.pied__bas {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid rgba(247, 241, 227, .16);
  font-size: 14px; color: var(--texte-2-sombre);
}

/* ---------- 16. Adaptation aux petits écrans ---------- */
@media (max-width: 1180px) {
  .barre__interieur { gap: 18px; }
  .barre__liens { gap: 18px; }
}

/* Sous 980 px la barre passe sur deux rangs :
   logo + « Nous soutenir » en haut, les autres liens en dessous. */
@media (max-width: 980px) {
  .barre__interieur { flex-wrap: wrap; row-gap: 12px; }
  .barre__marque { order: 1; }
  .barre__bouton { order: 2; margin-left: auto; }
  /* le bouton « Menu » apparaît, et commande l'ouverture des liens */
  .barre__menu { display: inline-flex; order: 3; }
  .barre__liens {
    order: 4;
    flex-basis: 100%;
    margin-left: 0;
    gap: 4px;
    flex-direction: column;
    align-items: stretch;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .25s ease, opacity .25s ease;
  }
  .barre--ouverte .barre__liens { max-height: 380px; opacity: 1; }
  /* chaque destination est une ligne pleine largeur : plus facile à viser */
  .barre__liens a {
    display: block;
    padding: 13px 2px;
    font-size: 17px;
    border-bottom: 1px solid rgba(247, 241, 227, .16);
  }
  .barre__liens a:last-child { border-bottom: 0; }
  .barre__choristes {
    padding-left: 2px;
    border-left: 0;
    opacity: 1;
  }
}

@media (max-width: 1100px) {
  :root { --gouttiere: 48px; --entre-sections: 96px; }
  .hero__grille { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
  .concert__grille,
  .deux-colonnes { gap: 40px; }
  .carte--grande { padding: 38px 34px; }
  .mascarin { padding: 40px; gap: 40px; grid-template-columns: 150px minmax(0, 1fr); }
}

@media (max-width: 860px) {
  :root { --gouttiere: 22px; --entre-sections: 72px; }
  body { font-size: 17px; }
  [id] { scroll-margin-top: 132px; }

  .barre__liens a { font-size: 14.5px; }
  .barre__bouton { padding: 10px 15px; }

  .hero { padding-top: 16px; }
  body[data-etat="hors_saison"] .hero .zone { padding-top: 48px; }
  .barre__logo { height: 38px; }
  .barre--defilee .barre__logo { height: 32px; }
  .hero__grille,
  .concert__grille,
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); gap: 32px; }

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

  .mascarin { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 26px; }
  .mascarin .oiseau { width: 120px; }

  .pied__grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .liste-infos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Sur les écrans les plus étroits (iPhone SE et assimilés), un libellé long
   comme « Voir le calendrier complet » dépassait de la carte : le bouton était
   en white-space:nowrap. On le laisse passer sur deux lignes plutôt que de
   sortir de l'écran. */
@media (max-width: 430px) {
  .bouton {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    padding-inline: 20px;
  }
}

/* ---------- 17. Impression et préférences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ============================================================
   18. Pages intérieures
   ============================================================ */

.barre__liens a.actif { color: var(--creme-logo); border-bottom: 1px solid var(--or); padding-bottom: 3px; }

.dessin { display: contents; }

.en-tete-page { padding-top: 34px; padding-bottom: 4px; }

/* Sur les pages intérieures, une « bande » n'est pas un aplat de couleur :
   c'est une sous-partie du même texte. L'écart de l'accueil (128 px) y est
   donc trop large — on le ramène à 68 px, et la première section démarre
   juste sous le chapeau. */
[data-zone="page"] > .bande { padding-block: 34px; }
/* un peu d'air entre le chapeau et la première section, pour qu'on voie
   que le texte d'introduction est fini — mais moins qu'entre deux sections */
[data-zone="page"] > .bande:first-of-type { padding-top: 30px; }
[data-zone="page"] > .bande:last-of-type { padding-bottom: 48px; }

/* le chapeau et les paragraphes qui le suivent respirent normalement */
.en-tete-page .paragraphe:last-child { margin-bottom: 0; }

.titre-page {
  font-family: var(--titre);
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 10px 0 0;
}
.en-tete-page .surtitre { margin-bottom: 4px; }

.chapeau {
  font-size: 20px;
  line-height: 1.65;
  max-width: 58ch;
  margin-top: 22px;
}

/* Une adresse e-mail repérée dans un texte devient cliquable. On garde la
   couleur du texte porteur — souligné suffit à dire « c'est un lien » — pour
   ne pas semer des taches de couleur au milieu des paragraphes, et pour que
   le contraste reste celui du texte qui l'entoure, déjà vérifié. */
.lien-courriel {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  word-break: break-word;
}
.lien-courriel:hover { text-decoration-thickness: 2px; }

.paragraphe { margin-bottom: 24px; }
.mesure-large { max-width: 65ch; }

/* ---- paragraphes riches (titre, italique, terre cuite) ---------------
   Réglés paragraphe par paragraphe depuis /admin. Le titre reprend la
   police des titres du site ; il ne crée pas de nouvelle famille visuelle. */
.paragraphe__titre {
  font-family: var(--titre);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--vert);
  margin: 36px 0 12px;
}
/* Premier bloc d'une colonne : pas de blanc superflu au-dessus. */
.paragraphe__titre:first-child { margin-top: 0; }
.para--italique { font-style: italic; }
/* Sélecteur volontairement plus fort que .texte-2, sinon la couleur du
   corps de texte l'emporterait (même spécificité, déclarée plus haut). */
p.para--terre { color: var(--cuivre); }

.bloc-large { padding: 52px 56px; }
.bloc-large .mascarin__titre { margin-bottom: 14px; }

/* ---- mécénat : exergue, avantages, montants -------------------------
   Tout vit dans le bloc lilas « Devenir mécène », le seul aplat teinté de
   la page. Les montants reprennent le bouton contour du site : ce sont des
   liens de paiement, pas une nouvelle famille de composants. */
.mecenat__exergue {
  font-family: var(--titre);
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.45;
  color: var(--violet);
  margin: 0 0 24px;
}
.mecenat__avantages { margin: 0 0 28px; padding-left: 0; list-style: none; }
.mecenat__avantages li {
  position: relative;
  padding-left: 24px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--texte-2);
}
.mecenat__avantages li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .78em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet);
}
.mecenat__montants {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
}
/* Fond blanc : sur le lilas du bloc, un bouton contour sans fond se lit mal. */
.mecenat__montant { min-width: 96px; background: var(--blanc); }
.mecenat__autre { font-size: 15.5px; margin: 0 0 24px; }

.lien-fleche--clair { color: var(--violet); }
.lien-fleche--clair:hover { color: var(--violet-sombre); }

.legende { font-size: 15px; color: var(--texte-2); margin-top: 10px; }

.photo-large { width: 100%; border-radius: var(--r-bloc); margin-top: 26px; }
.encadrant__photo { width: 100%; border-radius: var(--r-petit); margin-bottom: 14px; }

/* liste simple (répertoire) */
.liste-simple { columns: 2; column-gap: 40px; }
.liste-simple li {
  font-size: 17px;
  line-height: 1.9;
  padding-left: 16px;
  position: relative;
  break-inside: avoid;
}
.liste-simple li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--cuivre);
}

/* programme du concert */
.programme { display: grid; gap: 0; margin-top: 14px; }
.programme__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--bord-blanc);
}
.programme__ligne:last-child { border-bottom: 1px solid var(--bord-blanc); }
.programme__compositeur { font-size: 17px; font-weight: 600; }
.programme__oeuvre { font-size: 17px; color: var(--texte-2); font-style: italic; }

/* étapes numérotées */
.etapes { counter-reset: etape; display: grid; gap: 16px; }
.etapes li {
  counter-increment: etape;
  background: var(--blanc);
  border-radius: var(--r-carte);
  padding: 28px 32px 28px 70px;
  position: relative;
}
.etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 28px;
  top: 22px;
  font-family: var(--titre);
  font-size: 26px;
  font-weight: 400;
  color: var(--terre);
}
.etape__titre { font-size: 21px; margin-bottom: 8px; }

/* albums de photos et vidéos, au bas de la page « Le concert » */
.album { margin-top: 34px; }
.album:first-of-type { margin-top: 22px; }
.album__titre {
  font-family: var(--titre);
  font-size: 23px;
  font-weight: 400;
  color: var(--vert);
  margin-bottom: 16px;
}

/* galerie de photos */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.media--galerie { aspect-ratio: 3 / 2; border-radius: var(--r-petit); }

/* vidéos */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-petit);
  overflow: hidden;
  background: var(--violet);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* formulaires HelloAsso */
.iframe-helloasso {
  background: var(--blanc);
  border-radius: var(--r-bloc);
  overflow: hidden;
  margin-top: 6px;
}
.iframe-helloasso iframe { width: 100%; border: 0; display: block; }
.iframe-vide {
  border: 1px dashed var(--bord);
  border-radius: var(--r-bloc);
  padding: 48px 24px;
  text-align: center;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--marque);
}

/* espace choristes — porte d'entrée */
.porte { max-width: 560px; }
.porte__form { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; align-items: stretch; }
.porte__form input {
  flex: 1 1 240px;
  min-height: 56px;
  font-family: var(--texte);
  font-size: 17px;
  padding: 14px 20px;
  border: 1px solid var(--bord);
  border-radius: var(--r-pilule);
  background: var(--blanc);
  color: var(--vert);
}
.porte__form input:focus-visible { outline: 2px solid var(--terre); outline-offset: 2px; }

/* « Entrer » doit se voir de loin : c'est le seul geste de la page.
   56 px de haut, texte à 16 px, et sur téléphone il prend toute la largeur
   plutôt que de se serrer à côté du champ. */
.porte__form button {
  border: 0;
  cursor: pointer;
  font-family: var(--texte);
  flex: 0 0 auto;
  min-height: 56px;
  padding-inline: 38px;
  font-size: 16px;
  letter-spacing: .1em;
}
@media (max-width: 560px) {
  .porte__form button { flex: 1 1 100%; }
}
.porte__erreur { margin-top: 12px; font-size: 16px; color: var(--terre); }

/* annonces */
.annonce-ligne { padding: 14px 0; border-top: 1px solid var(--bord-blanc); }
.annonce-ligne:first-of-type { border-top: 0; padding-top: 6px; }
.annonce-ligne__date {
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cuivre); margin-bottom: 6px;
}
.annonce-ligne__texte { font-size: 17px; line-height: 1.7; }

/* infolettre — inscription depuis l'accueil */
.infolettre__titre { margin-top: 10px; }
.infolettre__texte { margin-top: 14px; }
.infolettre__form {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
  align-items: stretch;
}
.infolettre__form input[type="email"] {
  flex: 1 1 280px;
  min-height: 56px;
  font-family: var(--texte);
  font-size: 17px;
  padding: 14px 20px;
  border: 1px solid var(--bord);
  border-radius: var(--r-pilule);
  background: var(--blanc);
  color: var(--vert);
}
.infolettre__form input[type="email"]:focus-visible {
  outline: 2px solid var(--terre); outline-offset: 2px;
}
.infolettre__form button {
  flex: 0 0 auto;
  min-height: 56px;
  padding-inline: 38px;
  font-size: 16px;
  letter-spacing: .1em;
}
/* le champ anti-robot de Mailchimp : présent pour les automates, invisible pour tous */
.infolettre__piege {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.infolettre__mention {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texte-2);
  max-width: 60ch;
}
@media (max-width: 560px) {
  .infolettre__form button { flex: 1 1 100%; }
}

/* espace choristes — trombinoscope */
.trombinoscope__image {
  width: 100%;
  height: auto;
  border-radius: var(--r-petit);
  display: block;
  margin-top: 16px;
}
.trombinoscope .legende { margin-top: 12px; }

/* espace choristes — pistes de travail (vidéos et enregistrements).
   Une ligne par morceau. Rien ne se charge tant qu'on n'a pas cliqué :
   la page reste légère même avec vingt pistes. */
.pistes { display: grid; gap: 0; margin-top: 18px; }
.piste {
  border-top: 1px solid var(--bord-blanc);
  padding: 14px 0;
}
.piste:first-child { border-top: 0; padding-top: 4px; }
.piste__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.piste__textes { min-width: 0; flex: 1 1 260px; }
.piste__titre { font-size: 17px; line-height: 1.35; margin: 0; }
.piste__note { margin: 5px 0 0; font-size: 14px; color: var(--texte-2); }
.piste__audio { width: 100%; margin-top: 14px; }
.piste__lecteur { margin-top: 14px; aspect-ratio: 16 / 9; }
.piste__lecteur iframe {
  width: 100%; height: 100%; border: 0;
  border-radius: var(--r-petit); display: block;
}
/* le déclencheur est un <button> : il faut lui rendre l'allure d'un lien-bouton.
   Attention : ne PAS remettre le fond ici — « button.bouton » l'emporterait sur
   « .bouton--plein » et viderait le fond violet du bouton « Entrer ». */
button.bouton {
  cursor: pointer;
  font-family: var(--texte);
}
button.bouton--contour { background: transparent; }

/* espace choristes — bouton dont l'adresse n'est pas encore connue */
.bouton--indisponible {
  background: transparent;
  border-color: var(--bord-blanc);
  color: var(--marque);
  cursor: default;
}
.attente { display: inline-block; }
.attente__note {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--marque);
}
.carte .attente + .attente { margin-left: 12px; }

@media (max-width: 860px) {
  .liste-simple { columns: 1; }
  .liste-noms { columns: 1; }
  .edition { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 0; }
  .edition-accueil { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 18px 20px; }
  .edition__visuel { max-width: 240px; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .programme__ligne { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bloc-large { padding: 32px 26px; }
  /* Sept montants côte à côte ne tiennent pas : deux par rangée, cibles larges. */
  .mecenat__montants { gap: 10px; }
  .mecenat__montant { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .etapes li { padding: 22px 22px 22px 58px; }
  .etapes li::before { left: 22px; }
}


/* ============================================================
   19. Bandes colorées — la mise en page des affiches
   ------------------------------------------------------------
   Le corps de page alterne : nuit / blanc / lilas / violet /
   blanc / lilas / nuit. Les bandes sombres ne portent jamais de
   long paragraphe : un titre, deux phrases, un bouton.
   ============================================================ */

.bande--violette { background: var(--violet); color: var(--creme-logo); }
.bande--nuit     { background: var(--violet-nuit); color: var(--creme-logo); }

/* filigrane du mascarin, comme sur les affiches */
.bande--violette,
.bande--nuit,
body[data-etat="hors_saison"] .hero { position: relative; overflow: hidden; }

.bande--violette > .zone,
.bande--nuit > .zone,
body[data-etat="hors_saison"] .hero > .zone { position: relative; z-index: 1; }

/* le texte passe devant l'oiseau */
.bande--violette > .zone > *,
.bande--nuit > .zone > *,
body[data-etat="hors_saison"] .hero > .zone > * { position: relative; z-index: 1; }

/* L'oiseau est accroché à la COLONNE DE TEXTE, pas au bord de la fenêtre :
   la zone est plafonnée à 1200 px, donc au-delà de cette largeur il ne
   s'éloigne plus. On agrandit la fenêtre, il ne bouge pas. */
.bande--violette > .zone::after,
.bande--nuit > .zone::after,
body[data-etat="hors_saison"] .hero > .zone::after {
  content: "";
  position: absolute;
  right: var(--gouttiere);
  top: 50%;
  transform: translateY(-50%);
  height: 76%;
  max-height: 420px;
  aspect-ratio: 85 / 220;
  background-color: rgba(242, 179, 0, .13);
  -webkit-mask: url("images/oiseau.png") no-repeat center / contain;
  mask: url("images/oiseau.png") no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

/* le hero hors saison est posé sur le violet le plus profond */
body[data-etat="hors_saison"] .hero { background: var(--violet-nuit); color: var(--creme-logo); }
/* Le filigrane doit rester dans la partie violette : la photo est au-dessus,
   on l'ancre donc en bas plutôt qu'au centre de la section. */
body[data-etat="hors_saison"] .hero > .zone::after {
  top: auto;
  bottom: 0;
  height: auto;
  max-height: none;
  width: 132px;
  /* juste à droite de la phrase de vocation (60 caractères de large) */
  left: min(62%, 100% - 170px);
  right: auto;
}
body[data-etat="hors_saison"] .hero .hero__titre { color: var(--creme-logo); }
body[data-etat="hors_saison"] .hero .hero__titre em { color: var(--or); }
body[data-etat="hors_saison"] .hero .texte-2 { color: var(--texte-2-sombre); }
body[data-etat="hors_saison"] .hero .zone { padding-bottom: 96px; }

/* --- ce qui change dès qu'on est sur un fond violet --- */
.bande--violette .surtitre,
.bande--nuit .surtitre           { color: var(--or); }
.bande--violette .texte-2,
.bande--nuit .texte-2            { color: var(--texte-2-sombre); }
.bande--violette .titre-section,
.bande--nuit .titre-section,
.bande--violette .mascarin__titre,
.bande--nuit .mascarin__titre    { color: var(--creme-logo); }

.bande--violette .carte,
.bande--nuit .carte {
  background: rgba(247, 241, 227, .07);
  border: 1px solid rgba(247, 241, 227, .18);
  color: var(--creme-logo);
}
.bande--violette .carte .texte-2,
.bande--nuit .carte .texte-2     { color: var(--texte-2-sombre); }
.bande--violette .liste-infos > div,
.bande--nuit .liste-infos > div  { border-color: rgba(247, 241, 227, .18); }
.bande--violette .liste-infos > div:last-child,
.bande--nuit .liste-infos > div:last-child { border-bottom-color: rgba(247, 241, 227, .18); }
.bande--violette .liste-infos dt,
.bande--nuit .liste-infos dt     { color: var(--or); }

/* sur fond violet, le bloc mis en avant devient un voile crème */
/* La bande EST déjà le bloc : inutile d'en dessiner un second par-dessus. */
.bande--violette .bloc-vert,
.bande--nuit .bloc-vert {
  background: transparent;
  color: var(--creme-logo);
  border: 0;
  padding-left: 0;
  padding-right: 0;
}
.bande--violette .bloc-vert .texte-2,
.bande--nuit .bloc-vert .texte-2 { color: var(--texte-2-sombre); }
.bande--violette .surtitre--clair,
.bande--nuit .surtitre--clair    { color: var(--or); }
.bande--violette .lien-fleche,
.bande--nuit .lien-fleche,
.bande--violette .lien-fleche--clair,
.bande--nuit .lien-fleche--clair { color: var(--or); }
.bande--violette .lien-fleche:hover,
.bande--nuit .lien-fleche:hover  { color: var(--creme-logo); }

/* boutons sur fond violet : or plein, ou contour crème */
.bande--violette .bouton--plein,
.bande--nuit .bouton--plein,
body[data-etat="hors_saison"] .hero .bouton--plein {
  background: var(--or); color: var(--violet-nuit);
}
.bande--violette .bouton--plein:hover,
.bande--nuit .bouton--plein:hover { background: #FFC633; }
.bande--violette .bouton--contour,
.bande--nuit .bouton--contour {
  border-color: rgba(247, 241, 227, .5); color: var(--creme-logo);
}
.bande--violette .bouton--contour:hover,
.bande--nuit .bouton--contour:hover { border-color: var(--or); color: var(--or); }

.bande--violette .mascarin .oiseau,
.bande--nuit .mascarin .oiseau { color: var(--or); opacity: .9; }

/* --- petit repère doré au-dessus de chaque titre de section --- */
.entete-section::before,
.surtitre--tete::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--cuivre);
  margin-bottom: 6px;
}
.bande--violette .entete-section::before,
.bande--nuit .entete-section::before,
.bande--violette .surtitre--tete::before,
.bande--nuit .surtitre--tete::before { background: var(--or); }

/* le pied rejoint le violet le plus profond */
.pied { background: var(--violet-nuit); }

@media (max-width: 860px) {
  .bande--violette > .zone::after,
  .bande--nuit > .zone::after { height: 62%; right: 0; opacity: .8; }
  /* sur téléphone l'oiseau se range en bas à droite, sous le texte */
  body[data-etat="hors_saison"] .hero > .zone::after {
    top: auto; bottom: 0; height: auto; width: 62px;
    left: auto; right: 0; opacity: .7;
  }
  body[data-etat="hors_saison"] .hero .zone { padding-bottom: 48px; }
}

/* ============================================================
   20. Calendrier des répétitions — espace choristes
   Toutes les classes sont préfixées « rep- » : le bloc reprend des
   noms très courants (.section, .pied, table) qui existent déjà
   ailleurs sur le site.
   ============================================================ */

.repetitions {
  background: var(--blanc);
  border: 1px solid var(--bord-blanc);
  border-radius: var(--r-bloc);
  overflow: hidden;
  margin-top: 20px;
}

/* --- bandeau --- */
.rep-bandeau {
  position: relative;
  background: var(--violet-nuit);
  color: var(--creme-logo);
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
}
.rep-bandeau-texte { position: relative; z-index: 2; padding: 52px 48px 92px; max-width: 30rem; }
.rep-titre {
  font-family: var(--titre);
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--creme-logo);
}
.rep-an { display: block; color: var(--or); }
.rep-horaire { font-size: 21px; line-height: 1.5; margin: 0 0 8px; }
.rep-cadre { font-size: 16px; color: var(--texte-2-sombre); margin: 0 0 30px; }
.rep-prochaine {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 9px 22px;
  border: 2px solid var(--or); border-radius: var(--r-pilule);
  color: var(--or); font-size: 16px; font-weight: 600; margin: 0;
}
.rep-pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--or); flex: none; }

/* Le dessin doré de l'invitation, cadré au bord droit du bandeau : c'est un
   fichier à part (images/oiseau-bandeau.png), bien plus fin que l'oiseau
   extrait du logo, qui sert seulement de filigrane ailleurs. */
.rep-oiseau {
  position: absolute; right: 0; bottom: 44px;
  height: calc(100% - 68px); width: auto;
  z-index: 1; pointer-events: none; user-select: none;
}
.rep-vague {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: 92px; z-index: 2; display: block;
}
.rep-vague path { fill: var(--blanc); }

/* --- sections --- */
.rep-section { padding: 56px 48px; }
.rep-section + .rep-section { border-top: 1px solid var(--bord-blanc); }
.rep-section h3 { font-size: 30px; margin: 0 0 12px; }
.rep-chapeau { color: var(--texte-2); font-size: 17px; max-width: 36rem; margin: 0 0 36px; }

/* --- temps forts --- */
.rep-forts { display: grid; gap: 18px; }
.rep-fort {
  display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 26px;
  align-items: start; padding: 24px 26px;
  background: var(--creme); border: 1px solid var(--bord-blanc);
  border-left: 5px solid var(--or);
}
.rep-fort--concert { border-left-color: var(--violet); }
.rep-quand { font-family: var(--titre); font-size: 30px; line-height: 1.1; color: var(--violet); }
.rep-m {
  display: block; font-family: var(--texte); font-size: 15px;
  font-weight: 600; color: var(--texte-2); margin-top: 4px;
}
.rep-quand--vide {
  font-family: var(--texte); font-size: 15px; font-weight: 600;
  color: var(--cuivre); line-height: 1.5; padding-top: 5px;
}
.rep-fort h4 { font-size: 26px; margin: 0 0 6px; }
.rep-detail { font-size: 16px; color: var(--texte-2); margin: 0; }
.rep-detail + .rep-detail { margin-top: 4px; }

/* --- l'année --- */
.rep-mois {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px; align-items: baseline; padding: 24px 0;
}
.rep-mois + .rep-mois { border-top: 1px solid var(--bord-blanc); }
.rep-mois h4 { font-size: 27px; color: var(--violet); font-weight: 400; }
.rep-nb {
  font-family: var(--texte); font-size: 14px; font-weight: 500;
  color: var(--texte-2); display: block; margin-top: 2px;
}
.rep-jours { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rep-jour {
  min-width: 52px; height: 52px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bord-blanc); background: var(--creme);
  border-radius: 6px; font-size: 18px; font-weight: 500; color: var(--vert);
}
.rep-jour--marque { border: 2px solid var(--or); font-weight: 600; }
.rep-jour--concert {
  background: var(--violet); border-color: var(--violet);
  color: var(--creme-logo); font-weight: 600;
}
.rep-jour--ailleurs { border: 2px dashed var(--cuivre); color: var(--cuivre); font-weight: 600; }
.rep-jour--incertain { border-style: dashed; color: var(--texte-2); background: transparent; }
.rep-jour--annule { text-decoration: line-through; color: var(--marque); }
.rep-jour--passe { opacity: .45; }
.rep-pause {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 20px;
  background: var(--violet-pale); border-radius: 6px;
  color: var(--cuivre); font-size: 15px; font-weight: 600;
}
.rep-legende { margin: 26px 0 0; font-size: 15px; color: var(--texte-2); max-width: 40rem; }

/* --- où --- */
.rep-ou { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.rep-adresse { font-size: 19px; line-height: 1.6; margin: 0 0 6px; }
.rep-ou p { font-size: 16px; color: var(--texte-2); }

/* --- tableau des vacances --- */
/* Filet de sécurité : si le tableau ne tient pas, il défile dans son cadre
   plutôt que de déborder sous un parent en overflow:hidden, où le texte de
   droite disparaissait sans que rien ne le laisse deviner. */
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rep-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.rep-table th, .rep-table td {
  text-align: left; padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--bord-blanc); vertical-align: top;
}
.rep-table th {
  font-weight: 600; font-size: 13px; letter-spacing: .08em;
  color: var(--cuivre); text-transform: uppercase;
}
.rep-table td:last-child { color: var(--texte-2); }

/* --- le bureau, version compacte dans l'encadré « Nous rejoindre » --- */
/* Même grammaire que .liste-infos juste au-dessus : filets fins, libellé en
   petites capitales terre cuite. L'encadré doit se lire comme un seul bloc. */
.bureau-mini { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--bord-blanc); }
.bureau-mini__titre {
  font-family: var(--texte);
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cuivre);
  margin: 0 0 4px;
}
.bureau-mini__ligne { padding: 13px 0; border-bottom: 1px solid var(--bord-blanc); }
.bureau-mini__ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.bureau-mini__role {
  font-size: 13.5px; color: var(--texte-2); margin: 0 0 2px;
}
.bureau-mini__nom { font-size: 17px; line-height: 1.4; margin: 0; }
.bureau-mini__courriel {
  display: inline-block;
  margin-top: 3px;
  font-size: 15.5px;
  color: var(--cuivre);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}
.bureau-mini__courriel:hover { color: var(--violet); }

/* --- s'abonner --- */
.rep-agenda { background: var(--violet-pale); }
.rep-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.rep-etape h4 { font-size: 26px; margin: 0 0 10px; color: var(--violet); }
.rep-etape p { font-size: 16px; color: var(--texte-2); margin: 0 0 14px; }
.rep-etape ol { margin: 0; padding-left: 20px; font-size: 16px; color: var(--texte-2); list-style: decimal; }
.rep-etape li { margin-bottom: 8px; }
.rep-etape code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px;
  background: var(--blanc); border: 1px solid var(--bord-blanc);
  padding: 3px 7px; word-break: break-all; color: var(--violet);
}

.rep-pied {
  background: var(--violet); color: var(--texte-2-sombre);
  font-size: 16px; padding: 30px 48px;
}
.rep-pied p { margin: 0; }
.rep-pied a { color: var(--creme-logo); }

@media (max-width: 860px) {
  .rep-bandeau { min-height: 0; display: block; }
  .rep-bandeau-texte { padding: 40px 22px 88px; max-width: none; }
  /* Sur téléphone l'oiseau tenait à -56 px du bord : le bandeau est en
     overflow:hidden, il était donc coupé à droite. Le contraindre en largeur
     ne suffit pas — le dessin est très élancé (360 x 1278), une largeur de
     150 px lui donne 530 px de haut et c'est le sommet qui se faisait couper.
     On le contraint donc en hauteur, comme sur grand écran, et il tient
     entier dans le bandeau. */
  .rep-oiseau {
    height: calc(100% - 56px);
    max-height: 100%;
    width: auto;
    right: 14px;
    bottom: 28px;
    opacity: .34;
  }
  .rep-section { padding: 40px 22px; }
  .rep-fort { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rep-mois { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rep-ou { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rep-etapes { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rep-pied { padding: 26px 22px; }

  /* Quatre colonnes de dates écrites en toutes lettres ne tiennent sur aucun
     téléphone. Plutôt que de faire défiler le tableau de côté — ce que
     personne ne devine — chaque ligne devient une petite fiche. */
  .rep-table, .rep-table thead, .rep-table tbody,
  .rep-table tr, .rep-table th, .rep-table td { display: block; }
  .rep-table thead { position: absolute; left: -9999px; }
  .rep-table tr {
    padding: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bord-blanc);
  }
  .rep-table tr:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
  .rep-table td { border: 0; padding: 0 0 10px; }
  .rep-table td:last-child { padding-bottom: 0; }
  .rep-table td:first-child {
    font-family: var(--titre);
    font-size: 22px; line-height: 1.25; color: var(--violet);
    margin-bottom: 10px;
  }
  .rep-table td:not(:first-child)::before {
    content: attr(data-libelle);
    display: block;
    font-size: 13px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--cuivre);
    margin-bottom: 2px;
  }
}

/* ============================================================
   21. Espace choristes — tableau de bord et sous-pages
   ============================================================ */

/* --- le fil de retour, en haut des sous-pages --- */
.fil { padding-top: 26px; padding-bottom: 0; }
.fil-retour {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 2px;
  font-size: 15.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--cuivre); text-decoration: none;
}
.fil-retour:hover { color: var(--violet); }
.fil-retour__fleche { font-size: 19px; line-height: 1; }

/* --- les cartes d'accès --- */
.grille-acces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}
.carte--acces {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: 1px solid var(--bord-blanc);
  padding: 26px 28px 22px;
  min-height: 164px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.carte--acces:hover {
  transform: translateY(-2px);
  border-color: var(--violet);
  box-shadow: 0 8px 22px rgba(74, 36, 121, .12);
}
.carte--acces .carte__titre { margin: 8px 0 0; }
.carte-acces__detail {
  margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--texte-2);
}
.carte-acces__fleche {
  margin-top: auto; padding-top: 18px;
  font-size: 20px; line-height: 1; color: var(--violet);
}

/* --- les prochaines répétitions, sur le tableau de bord --- */
.prochaines { display: grid; gap: 0; margin-top: 18px; }
.prochaine {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  padding: 14px 0; border-top: 1px solid var(--bord-blanc);
}
.prochaine:first-child { border-top: 0; padding-top: 6px; }
.prochaine__date { font-size: 17px; font-weight: 600; }
.prochaine__detail { font-size: 15.5px; color: var(--texte-2); }
.prochaine--incertaine .prochaine__date { font-weight: 500; color: var(--texte-2); }

/* --- la page des pistes : recherche et index --- */
.pistes-outils { display: grid; gap: 18px; margin-bottom: 8px; }
.pistes-recherche {
  width: 100%; max-width: 520px;
  min-height: 56px; padding: 14px 20px;
  font-family: var(--texte); font-size: 17px;
  border: 1px solid var(--bord); border-radius: var(--r-pilule);
  background: var(--blanc); color: var(--vert);
}
.pistes-recherche:focus-visible { outline: 2px solid var(--terre); outline-offset: 2px; }
.pistes-index { display: flex; flex-wrap: wrap; gap: 8px; }
.pistes-lettre {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--bord-blanc); border-radius: 4px;
  background: var(--blanc); color: var(--violet);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.pistes-lettre:hover { border-color: var(--violet); }
.pistes-lettre--vide { opacity: .3; pointer-events: none; }

.pistes-groupe { margin-top: 40px; scroll-margin-top: 116px; }
.pistes-groupe__lettre {
  font-family: var(--titre); font-size: 15px; font-weight: 600;
  letter-spacing: .18em; color: var(--cuivre);
  padding-bottom: 8px; border-bottom: 2px solid var(--bord-blanc);
  margin: 0 0 6px;
}
.oeuvre {
  background: var(--blanc); border: 1px solid var(--bord-blanc);
  border-radius: var(--r-carte);
  padding: 24px 28px; margin-top: 14px;
}
.oeuvre__titre { font-size: 22px; line-height: 1.3; margin: 0 0 6px; }
.oeuvre .pistes { margin-top: 8px; }
.pistes-rien { margin-top: 34px; }

@media (max-width: 860px) {
  .grille-acces { grid-template-columns: minmax(0, 1fr); }
  .carte--acces { min-height: 0; padding: 22px 22px 18px; }
  .oeuvre { padding: 20px 20px; }
  .pistes-groupe { scroll-margin-top: 168px; }
}
.carte--acces-attente { border-style: dashed; }
.carte--acces-attente .carte__titre { color: var(--marque); }
.carte--acces-attente .attente__note { margin-top: auto; padding-top: 16px; }