/* Accueil A « La scène » : règles propres à la page.
   Aucune couleur en dur : jetons --cl-* seulement. */

/* 1. Section 2 : la bande de chiffres prolonge le héros (maquette, section 7, règle 1) */
.cl-section.accueil-a__chiffres {
  padding-block: var(--cl-espace-5);
  border-top: 1px solid var(--cl-or-30);
}

/* 2. Section 5 : noms un peu plus petits entre 481 et 1023 px, pour éviter
   des lignes d'un seul nom (maquette, section 7, règle 2) */
@media (min-width: 480.02px) and (max-width: 1023.98px) {
  .cl-mosaique--noms { font-size: 2.25rem; }
}

/* 3. Pieds de section centrés (phrase puis lien), sections 4 et 5 */
.accueil-a__pied {
  margin-top: var(--cl-espace-5);
  text-align: center;
}
.accueil-a__pied p {
  margin: 0 auto var(--cl-espace-1);
  font-size: var(--cl-taille-carte);
}

/* 4. Section 4 : les deux paragraphes factuels sous le titre */
.accueil-a__bref p { margin-inline: auto; }

/* 5. Section 6 : bouton sous la biographie */
.accueil-a__bio-action { margin-top: var(--cl-espace-3); }

/* 6. Section 12 : mention du reçu fiscal sous le bouton */
.accueil-a__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);
}

/* 7. Héros à 360 px : le prochain concert et sa mention d'accès tiennent dans
   le premier écran de 360 x 640 px (16 px regagnés sous le chapo) */
@media (max-width: 480px) {
  .accueil-a__hero .cl-hero__chapo { margin-bottom: var(--cl-espace-3); }
}

/* 8. Héros : libellés des métadonnées en crème, car la photo a des reflets
   (piano) sous les libellés ; l'or clair y descend à 3,1:1 (QA, A-1) */
.accueil-a__hero .cl-hero__meta dt { color: var(--cl-creme-texte); }

/* 9. Héros : titre sur deux lignes sur ordinateur (QA, A-2) */
.accueil-a__hero .cl-hero__texte { max-width: 68%; }
.accueil-a__hero .cl-hero__titre { font-size: clamp(2.75rem, 7vw, 6.25rem); }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .accueil-a__hero .cl-hero__texte { max-width: 80%; }
}
@media (max-width: 767.98px) {
  .accueil-a__hero .cl-hero__texte { max-width: none; }
}

/* 10. Héros à 360 px : deux lignes même avec la police de repli Georgia (QA, A-3) */
@media (max-width: 480px) {
  .accueil-a__hero .cl-hero__titre { font-size: 2.5rem; letter-spacing: 0.01em; }
}