/* ==========================================================================
   ISMOD · Page Admissions
   À charger après base.css et components.css.
   Motif dominant : le bâti. Points de conduite des frais (gris sur blanc),
   ligne des étapes (indigo sur voile). Aucun autre motif sur la page.
   ========================================================================== */

/* Le bâti (points de conduite des frais, ligne des étapes) vient du
   composant commun .bati de components.css : points ronds réguliers. */
/* Couleurs permises : gris sur blanc pour les points de conduite des frais,
   indigo sur voile pour l'ouverture et les étapes. */
.adm-tableau {
  --bati-couleur: var(--gris-300);
}

/* ==========================================================================
   1. Ouverture : le titre, le chapeau et le panneau du bâti
   Pas de photo : en regard du titre, un panneau indigo voilé porte le bâti
   et le pictogramme de l'uniforme, comme la porte Admissions de l'accueil.
   Le titre suit l'échelle commune --titre-page (.ouverture-page__titre).
   ========================================================================== */
.adm-ouverture {
  padding-block: clamp(var(--e-6), 1rem + 3vw, var(--e-8)) clamp(var(--e-7), 2rem + 3vw, var(--e-8));
  border-block-end: 0;
}
/* Coupure de secours à 320 px et sous l'espacement de texte WCAG. */
.adm-ouverture__titre,
.adm-ouverture__chapeau {
  overflow-wrap: anywhere;
}
.adm-ouverture__chapeau {
  max-width: 40ch;
}
/* Photo d'atelier dans le cadre d'équerre, comme toutes les photos de contenu. */
.adm-ouverture__photo {
  margin: 0;
  min-width: 0;
}
.adm-ouverture__cadre img {
  --ratio: 3 / 2;
  --focale: 50% 50%;
}
@media (min-width: 64em) {
  .adm-ouverture__photo {
    grid-column: 8 / -1;
    align-self: center;
  }
}

/* ==========================================================================
   2. Les frais : tableau à points de conduite
   Bureau : poste, cours de jour, cours du samedi, en colonnes.
   Mobile : chaque poste devient une fiche, un rythme par ligne, le bâti
   conduit du rythme au montant.
   ========================================================================== */
.adm-frais {
  padding-block: 0 var(--section);
}
.adm-frais__grille {
  display: grid;
  gap: var(--e-6) var(--gouttiere);
}
.adm-frais__titre {
  font-size: var(--t-3xl);
  max-width: 11ch;
}
.adm-tableau .frais__poste {
  font-size: var(--t-xl);
}
.adm-tableau .frais__precision {
  max-width: 36ch;
  color: var(--texte-doux);
}
.adm-tableau .frais__montant {
  font-size: var(--t-2xl);
  line-height: 1.1;
}
.adm-tableau .frais__non-du {
  font-size: var(--t-base);
  color: var(--texte-doux);
}
/* Libellé long (« Frais de participation aux activités socio-éducatives ») :
   le début se répartit en lignes égales, le dernier mot porte les points
   de conduite jusqu'au montant, comme les postes d'un seul mot. */
.adm-tableau__debut {
  text-wrap: balance;
}
/* « socio-éducatives », « ci-dessus » : jamais coupés au trait d'union. */
.adm-insecable {
  white-space: nowrap;
}
@media (max-width: 30em) {
  .adm-insecable {
    white-space: normal;
  }
  /* Dans le tableau, « socio-éducatives » tient toujours sur une ligne
     (environ 150 px à 320 px de large) : jamais « socio- / éducatives ». */
  .adm-tableau .adm-insecable {
    white-space: nowrap;
  }
}
.adm-tableau__note {
  caption-side: bottom;
  padding-block-start: var(--e-5);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--texte);
  text-align: start;
}
.adm-tableau__note .icone {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-inline-end: var(--e-2);
  vertical-align: -0.2em;
  color: var(--accent);
}

@media (max-width: 47.99em) {
  .adm-tableau__ligne .bati {
    display: none;
  }
  .adm-tableau tbody th .frais__poste {
    display: inline;
  }
  .adm-tableau tbody th {
    margin-block-end: var(--e-2);
  }
  .adm-tableau tbody td {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: var(--e-1) var(--e-3);
  }
  .adm-tableau tbody td::before {
    flex: none;
    font-size: var(--t-base);
    color: var(--texte);
  }
  /* « cours de week-end (samedi) » : le saut de ligne posé dans
     data-libelle (
) range « (samedi) » sous le rythme sur téléphone,
     pour que le montant reste sur la ligne des points de conduite. */
  .adm-tableau tbody td::before {
    white-space: pre-line;
    line-height: 1.35;
  }
}
/* 320 px : vides resserrés, « 60 000 FCFA » reste à côté du rythme. */
@media (max-width: 22.5em) {
  .adm-tableau tbody td {
    column-gap: var(--e-2);
  }
  .adm-tableau tbody td > .bati {
    min-width: var(--e-2);
  }
}
/* Dès 30 em, le libellé tient sur une ligne : le saut redevient espace. */
@media (min-width: 30em) and (max-width: 47.99em) {
  .adm-tableau tbody td::before {
    white-space: normal;
  }
}
@media (max-width: 47.99em) {
  /* Les points posés sur la ligne de base, comme au bureau : ils restent
     sur la première ligne quand le libellé en compte deux. */
  .adm-tableau tbody td > .bati {
    flex: 1 1 auto;
    align-self: baseline;
    min-width: 1rem;
  }
  /* Le montant reste groupé (insécables) ; « FCFA par mois » passe à la
     ligne quand la place manque (320 px, 400 %, espacement de texte). */
  .adm-tableau .frais__cellule {
    flex: 0 1 auto;
    min-width: 0;
    margin-inline-start: auto;
    text-align: end;
  }

  .adm-tableau .frais__montant {
    font-size: var(--t-xl);
  }
}

@media (min-width: 48em) {
  .adm-tableau td > .bati {
    display: none;
  }
  .adm-tableau thead th {
    padding-block: var(--e-3);
    vertical-align: bottom;
  }
  .adm-tableau {
    table-layout: fixed;
  }
  .adm-tableau thead th:first-child {
    width: 44%;
  }
  .adm-tableau thead th + th {
    width: 28%;
  }
  .adm-tableau tbody th,
  .adm-tableau tbody td {
    vertical-align: baseline;
    padding-block: var(--e-5);
  }
  .adm-tableau tbody th {
    padding-inline-end: var(--e-4);
  }
  .adm-tableau tbody td {
    padding-inline: var(--e-2) var(--e-4);
  }
  .adm-tableau__ligne {
    display: flex;
    align-items: flex-end;
    gap: var(--e-3);
  }
  .adm-tableau__ligne .frais__poste {
    flex: 0 1 auto;
  }
  .adm-tableau__ligne .bati {
    flex: 1 1 auto;
    margin-block-end: 0.35em;
  }
}

@media (min-width: 88em) {
  .adm-frais__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    align-items: start;
  }
  .adm-frais__titre {
    grid-column: 1 / span 4;
  }
  .adm-tableau {
    grid-column: 5 / -1;
  }
}

/* ==========================================================================
   3. Conditions et dossier : deux colonnes sur noir
   Les deux blocs partagent leurs rangées (sous-grille) : les listes
   commencent à la même hauteur quel que soit le nombre de lignes du titre.
   ========================================================================== */
.adm-conditions {
  padding-block: var(--section);
}
.adm-conditions__grille {
  display: grid;
  gap: var(--e-9) var(--gouttiere);
}
.adm-conditions__bloc {
  display: grid;
  align-content: start;
  gap: var(--e-6);
  min-width: 0;
}
.adm-conditions__titre {
  font-size: var(--t-3xl);
}
/* La mesure se prend sur la liste, pas sur le bloc : le confinement d'un
   conteneur de requête annulerait la sous-grille. */
.adm-ages {
  container-type: inline-size;
  border-block-start: var(--filet-fin) solid var(--filet);
}
.adm-age {
  display: grid;
  gap: var(--e-2);
  padding-block: var(--e-5);
  border-block-end: var(--filet-fin) solid var(--filet);
}
/* « De 18 à 25 ans » mesure 6,8 em : 14 cqi le garde sur une ligne. */
.adm-age__valeur {
  font-family: var(--police-titre);
  font-size: min(var(--t-4xl), 14cqi);
  font-weight: var(--titre-graisse);
  line-height: 1.05;
}
.adm-age__rythme {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--texte-doux);
}
.adm-age__rythme .icone {
  color: var(--accent);
}
/* « en cours de week-end (samedi) » passe sur deux lignes au téléphone :
   le pictogramme reste en face de la première. */
.adm-age__rythme {
  align-items: flex-start;
}
.adm-age__rythme .icone {
  margin-block-start: max(0px, calc((1lh - 1.5rem) / 2));
}
.adm-conditions .lien-fleche {
  justify-self: start;
}
.adm-dossier {
  border-block-start: var(--filet-fin) solid var(--filet);
  align-self: start;
}
.adm-dossier__piece {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: start;
  padding-block: var(--e-5);
  border-block-end: var(--filet-fin) solid var(--filet);
  font-size: var(--t-lg);
  line-height: 1.45;
}
.adm-dossier__piece .icone {
  margin-block-start: 0.05em;
  color: var(--accent);
}
@media (min-width: 64em) {
  .adm-conditions__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }
  .adm-conditions__bloc {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--e-6);
  }
  .adm-conditions__bloc:first-child {
    grid-column: 1 / span 6;
  }
  .adm-conditions__bloc:last-child {
    grid-column: 8 / -1;
  }
}

/* ==========================================================================
   4. Les étapes : une ligne de bâti relie les quatre chiffres
   ========================================================================== */
.adm-etapes {
  --bati-couleur: var(--indigo);
  background-color: var(--indigo-voile);
}
.adm-etapes__titre {
  font-size: var(--t-3xl);
  margin-block-end: clamp(var(--e-7), 2rem + 3vw, var(--e-9));
}
.adm-etapes__bati {
  display: none;
}
.adm-etapes__liste {
  position: relative;
  display: grid;
  gap: var(--e-7) var(--gouttiere);
}
.adm-etape {
  display: grid;
  align-content: start;
  gap: var(--e-3);
  padding-block-start: var(--e-5);
  border-block-start: var(--filet-fin) solid #cfd3e6;
}
.adm-etape__num {
  position: relative;
  z-index: 1;
  justify-self: start;
  padding-inline-end: var(--e-4);
  font-family: var(--police-titre);
  font-size: var(--t-3xl);
  font-weight: var(--titre-graisse);
  line-height: 1;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
  background-color: var(--indigo-voile);
}
.adm-etape__titre {
  margin-block-start: var(--e-3);
  font-family: var(--police-texte);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.3;
}
.adm-etape p {
  max-width: 30ch;
  color: var(--gris-700);
}
@media (max-width: 33.3125em) {
  .adm-etape__num {
    font-weight: var(--titre-graisse-petit);
  }
}
/* Mobile : le chiffre en marge, le titre et le texte à côté. */
@media (max-width: 39.99em) {
  .adm-etape {
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: var(--e-3);
  }
  .adm-etape__num {
    grid-row: span 2;
    padding-inline-end: 0;
  }
  .adm-etape__titre {
    margin-block-start: 0.35em;
  }
}
@media (min-width: 40em) {
  .adm-etapes__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .adm-etapes__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Le chiffre est posé sur la ligne : la bande de voile qui l'entoure
     interrompt le bâti, comme un point d'arrêt. */
  .adm-etapes__parcours {
    position: relative;
  }
  .adm-etapes__bati {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: calc(var(--t-3xl) / 2 - 6px);
  }
  .adm-etape {
    padding-block-start: 0;
    border-block-start: 0;
  }
}

/* ==========================================================================
   5. Questions fréquentes : titre fixe à gauche, réponses à droite
   ========================================================================== */
.adm-faq__grille {
  display: grid;
  gap: var(--e-7) var(--gouttiere);
}
.adm-faq__titre {
  font-size: var(--t-3xl);
  max-width: 10ch;
}
.adm-faq .faq__reponse p {
  max-width: 62ch;
}
@media (min-width: 64em) {
  .adm-faq__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    align-items: start;
  }
  .adm-faq__titre {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--e-6));
  }
  .adm-faq__liste {
    grid-column: 5 / -1;
  }
}

/* ==========================================================================
   6. Fin de page : composant .suite, variante Appeler et WhatsApp
   ========================================================================== */
.adm-suite .bouton {
  flex: 0 1 auto;
}
/* Bureau : le lien vers les pôles sur sa ligne, les deux boutons côte à côte. */
@media (min-width: 64em) {
  .adm-suite .suite__titre {
    grid-column: 1 / span 6;
  }
  .adm-suite .suite__actions {
    grid-column: 7 / -1;
    column-gap: var(--e-4);
  }
  .adm-suite .suite__actions > li:first-child {
    display: flex;
    flex-basis: 100%;
    justify-content: flex-end;
  }
}