/* Page Festival de musique de Lachine : règles propres à la page.
   Aucune couleur en dur : jetons --cl-* seulement. Grilles en rem. */

/* 1. Héros : surtitre et libellés en crème, car la photo est claire sous le texte
   (l'or clair ne tient pas 4,5:1 pour du texte de 13 px, leçon A-1) */
.festival__hero .cl-hero__surtitre,
.festival__hero .cl-hero__meta dt { color: var(--cl-creme-texte); }

/* 2. Héros : titre sur deux lignes à toutes les largeurs */
.festival__hero .cl-hero__texte { max-width: 68%; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .festival__hero .cl-hero__texte { max-width: 80%; }
}
@media (max-width: 767.98px) {
  .festival__hero .cl-hero__texte { max-width: none; }
}
/* Repli si Cormorant ne se charge pas : Georgia, plus large, est réduite pour que
   le titre garde ses deux lignes à 360 px (size-adjust ne touche que ce repli) */
@font-face {
  font-family: "Georgia titre festival";
  src: local("Georgia");
  size-adjust: 86%;
}
@media (max-width: 480px) {
  .festival__hero .cl-hero__titre {
    font-family: 'Cormorant Garamond', "Georgia titre festival", Georgia, serif;
    font-size: 2.25rem;
    letter-spacing: 0.01em;
  }
  .festival__hero .cl-hero__chapo { margin-bottom: var(--cl-espace-3); }
}

/* 3. Sections courtes (chiffres, partenaire, éditions passées) : padding vertical réduit */
.cl-section.festival__serree { padding-block: var(--cl-espace-5); }

/* 4. Chiffres : grille en rem sous 1024 px (trois colonnes à 768 px, deux à 360 px,
   une seule au zoom à 200 %) ; à 360 px, la troisième paire seule et centrée */
@media (max-width: 1023.98px) {
  .festival__chiffres .cl-chiffres-bande { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
  .festival__chiffres .cl-chiffres-bande__item { border-left: 0; }
}
@media (max-width: 480px) {
  .festival__chiffres .cl-chiffres-bande__item:nth-child(3):last-child { grid-column: 1 / -1; }
}

/* 5. Programme 2026 : deux colonnes de cinq à partir de 1024 px, ordre chronologique par colonne.
   Cartes non liées : le survol des cartes de concert est neutralisé. */
.festival__programme {
  max-width: var(--cl-conteneur-etroit);
  margin-inline: auto;
  list-style: none;
}
@media (min-width: 1024px) {
  .festival__programme {
    columns: 2;
    column-gap: 3rem;
  }
  .festival__programme > * { break-inside: avoid; }
}
.festival__programme .cl-concert:hover,
.festival__programme .cl-concert:focus-within { background: none; box-shadow: none; }

/* 6. Artistes : listes de noms en grille, catégorie au-dessus des noms */
.festival__artistes {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  list-style: none;
}
.festival__artistes .cl-citations__attribution { margin: 0 0 var(--cl-espace-1b); font-weight: 600; }
.festival__artistes .cl-citations__texte { margin: 0 auto; }

/* 7. Direction artistique : petite liste de repères sous le texte */
.festival__reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--cl-espace-2) var(--cl-espace-3);
  margin: var(--cl-espace-3) 0;
  padding-top: var(--cl-espace-3);
  border-top: 1px solid var(--cl-or-40);
}
.festival__reperes dt {
  font-family: var(--cl-police-titres);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--cl-or-grand);
}
.festival__reperes dd { margin-top: var(--cl-espace-1); font-size: var(--cl-taille-carte); }

/* 8. Partenaire fondateur : logo seul, en couleur */
.festival__partenaire { max-width: var(--cl-conteneur-texte); margin-inline: auto; text-align: center; }
.festival__partenaire .cl-partenaires__liste { grid-template-columns: 1fr; margin-bottom: var(--cl-espace-3); }
.festival__partenaire .cl-partenaires__item img { filter: none; opacity: 1; }
.festival__partenaire p { margin-inline: auto; }

/* 9. Blocs centrés (texte court et appel) */
.festival__centre { max-width: var(--cl-conteneur-texte); margin-inline: auto; text-align: center; }
.festival__centre p { margin-inline: auto; }
.festival__pied { margin-top: var(--cl-espace-4); text-align: center; }
.festival__pied p { margin: 0 auto var(--cl-espace-1); }

/* 10. Appel final : mention du reçu fiscal */
.festival__mention {
  margin: var(--cl-espace-3) auto 0;
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-note);
  color: var(--cl-creme-texte);
}
.festival__centre .cl-boutons { justify-content: center; }

/* 11. Grilles en rem pour le zoom à 200 % (rendu normal inchangé) */
.festival__hero .cl-hero__meta { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
#lieux .cl-infos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
#infolettre .cl-infolettre__ligne { display: flex; flex-wrap: wrap; align-items: flex-end; }
#infolettre .cl-infolettre__ligne .cl-champ { flex: 2 1 14rem; }
#infolettre .cl-infolettre__ligne .cl-btn { flex: 1 1 9rem; }