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

/* 1. Héros : titre de la liste en style surtitre, cadrage de la photo sur le chanteur */
.accueil-b__liste-titre {
  margin: var(--cl-espace-1b) 0 0;
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-libelle);
  font-weight: 400;
  letter-spacing: var(--cl-interlettrage-surtitre);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--cl-or-clair);
}
.accueil-b__hero .cl-hero__liste { margin-top: var(--cl-espace-1); }
.accueil-b__hero .cl-hero__photo img { object-position: 62% 50%; }

/* 2. Section 2 : à la largeur tablette, la troisième réponse occupe toute la rangée (maquette, section 10) */
@media (min-width: 480.02px) and (max-width: 1023.98px) {
  .accueil-b__acces .cl-etapes__item:last-child { grid-column: 1 / -1; }
}

/* 3. Agenda : phrase de présentation du concert et note sous la liste */
.accueil-b__phrase { margin-top: var(--cl-espace-1); font-size: var(--cl-taille-carte); max-width: none; }
.accueil-b__note { margin: var(--cl-espace-3) auto 0; text-align: center; }

/* 4. Histoire : paragraphe court centré, 19 px, crème sur noir */
.accueil-b__recit {
  max-width: var(--cl-conteneur-texte);
  margin: 0 auto var(--cl-espace-5);
  text-align: center;
  font-size: var(--cl-taille-citation);
  color: var(--cl-creme-texte);
}

/* 5. Pieds de section centrés (bouton ou liens) */
.accueil-b__pied { margin-top: var(--cl-espace-5); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cl-espace-2) var(--cl-espace-4); }

/* 6. Éducation : titre de la liste des partenaires */
.accueil-b__partenaires-titre { margin: var(--cl-espace-5) 0 var(--cl-espace-3); }

/* 7. Soutien : bloc bénévolat sous la carte de don */
.accueil-b__benevolat { max-width: 640px; margin: var(--cl-espace-5) auto 0; text-align: center; }
.accueil-b__benevolat h3 { margin-bottom: var(--cl-espace-1b); }
.accueil-b__benevolat p { margin: 0 auto var(--cl-espace-3); color: var(--cl-creme-texte); }

/* 8. Héros : l'élément picture remplit la colonne photo, pour que l'image couvre toute sa hauteur */
.accueil-b__hero .cl-hero__photo picture { display: block; height: 100%; }

/* 9. Héros sur ordinateur et tablette : la photo remplit la hauteur de la colonne de texte
   (recadrage par object-fit), au lieu d'imposer sa propre hauteur 4:5 */
@media (min-width: 768px) {
  .accueil-b__hero .cl-hero__photo picture { position: absolute; inset: 0; }
  .accueil-b__hero .cl-hero__photo img { aspect-ratio: auto; }
}

/* 10. Héros : boutons un peu moins larges, pour tenir côte à côte dans la colonne de 1440 px */
.accueil-b__hero .cl-hero__boutons .cl-btn { padding-inline: 26px; }

/* 11. Éducation : les cinq partenaires sur une rangée à 1440 px (maquette : cinq colonnes au plus) */
@media (min-width: 480.02px) {
  .accueil-b__ecoles { grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr)); }
}

/* 12. Héros à 1024 px et plus : boutons entiers dans un écran de 900 px de haut (QA, B-4) */
@media (min-width: 1024px) {
  .accueil-b__hero .cl-hero__texte { padding-block: var(--cl-espace-5); }
}