/* Page Académie internationale vocale de Lachine : règles propres à la page.
   Aucune couleur en dur : jetons --cl-* seulement. Grilles en rem. */

/* 1. Héros partagé : titre court sur deux lignes, métadonnées en deux colonnes */
.academie__hero .cl-hero__titre { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
.academie__hero .cl-hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cl-espace-3) var(--cl-espace-3); }
/* Photo de la cohorte sans voile, la cohorte entière visible */
.academie__hero .cl-hero__photo img { object-position: center 40%; }
@media (min-width: 768px) {
  .academie__hero .cl-hero__photo picture { position: absolute; inset: 0; }
  .academie__hero .cl-hero__photo img { aspect-ratio: auto; }
}
@media (max-width: 767.98px) {
  .academie__hero .cl-hero__photo img { aspect-ratio: 3 / 2; height: auto; }
}
@media (max-width: 480px) {
  .academie__hero .cl-hero__titre { letter-spacing: 0.01em; }
  .academie__hero .cl-hero__meta { gap: var(--cl-espace-2); }
}

/* 2. Sections courtes : padding vertical réduit */
.cl-section.academie__serree { padding-block: var(--cl-espace-5); }

/* 3. Pieds de section centrés (phrase et lien) */
.academie__pied { margin-top: var(--cl-espace-4); text-align: center; }
.academie__pied p { margin: 0 auto var(--cl-espace-1); }

/* 4. Ce que vivent les stagiaires : mots clés en Georgia, quatre colonnes en rem */
.academie__formation { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* 5. Cohorte : titres des groupes et bloc repliable des stagiaires */
.academie__groupe-titre { margin: 0 0 var(--cl-espace-3); text-align: center; }
.academie__stagiaires { max-width: 62.5rem; margin: var(--cl-espace-5) auto 0; }
.academie__stagiaires .cl-faq__question { justify-content: center; gap: var(--cl-espace-2); }
.academie__stagiaires .cl-faq__reponse { padding-top: var(--cl-espace-2); }
.academie__stagiaires .academie__groupe-titre { margin-top: var(--cl-espace-3); }
.academie__cohorte-liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* 6. Comment postuler : formulaire d'avis sous les étapes */
.academie__avis { max-width: 37.5rem; margin: var(--cl-espace-5) auto 0; padding-top: var(--cl-espace-5); border-top: 1px solid var(--cl-or-40); }
.academie__avis-titre { margin-bottom: var(--cl-espace-1b); text-align: center; font-family: var(--cl-police-texte); font-size: 1.375rem; font-weight: 400; }
.academie__avis .cl-infolettre__texte { text-align: center; margin-inline: auto; }
.academie__avis .cl-infolettre__ligne { display: flex; flex-wrap: wrap; align-items: flex-end; }
.academie__avis .cl-infolettre__ligne .cl-champ { flex: 2 1 14rem; }
.academie__avis .cl-infolettre__ligne .cl-btn { flex: 1 1 9rem; }

/* 7. Appel final : mention */
.academie__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);
}

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

/* 9. Chiffres : « vingtaine » ne se coupe pas ; la troisième paire centrée quand la bande passe à deux colonnes */
#en-chiffres .cl-chiffres-bande__chiffre { overflow-wrap: normal; font-size: min(var(--cl-taille-chiffre), 11vw); }
@media (max-width: 1023.98px) {
  #en-chiffres .cl-chiffres-bande__item:nth-child(3):last-child { grid-column: 1 / -1; border-left: 0; }
}
@media (max-width: 480px) {
  #en-chiffres .cl-chiffres-bande__chiffre { font-size: min(2.5rem, 11vw); }
}

/* 10. Ce que vivent les stagiaires : mots clés un peu plus petits pour tenir dans quatre colonnes */
.academie__formation .cl-etapes__numero { font-size: 1.75rem; }