/* ==========================================================================
   Pages institutionnelles (admission, contact, mentions légales) : retouches
   téléphone et tablette.
   ========================================================================== */

/* ---------- Mise en page générale ---------- */
@media (max-width: 1000px) {
  /* Une seule colonne qui ne s'élargit jamais pour son contenu (frise, règle d'âge…). */
  .ins-corps { grid-template-columns: minmax(0, 1fr); }
  /* Sommaire : pastilles sur plusieurs lignes, en haut du contenu. */
  .ins-sommaire { padding: var(--space-s); }
  .ins-sommaire ol { display: flex; flex-wrap: wrap; gap: 8px; }
  .ins-sommaire a { display: inline-flex; gap: 0.4rem; align-items: center; min-height: 44px; padding: 0.5rem 0.9rem; border-radius: var(--radius-pill); background: var(--bg-sunken); font-size: 0.9rem; }
  .ins-sommaire a[aria-current] { background: var(--bg-sunken); color: var(--ink); }
  .ins-sommaire a[aria-current] .num { color: var(--u-text); }
}
@media (max-width: 900px) {
  .ins-entete__grille { grid-template-columns: minmax(0, 1fr); }
  /* La hauteur fixe des photos, combinée au format 4/3, élargissait la colonne. */
  .ins-entete__photos { height: auto; aspect-ratio: 16 / 10; }
  .ins-tete { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ins-contenu > section { padding: var(--space-l) 1rem; border-radius: var(--radius-l); }
  .ins-entete__photos { aspect-ratio: 5 / 4; }
  .ins-entete__actions .btn { flex: 1 1 auto; justify-content: center; }
  .ins-sommaire__titre { font-size: 0.8rem; }
}

/* ---------- Lisibilité et cibles tactiles (tablette et téléphone) ---------- */
@media (max-width: 1024px) {
  .ins-contenu { grid-template-columns: minmax(0, 1fr); }
  /* Cibles d'au moins 44 px pour le doigt. */
  .ins :is(.chip, .link-arrow, .ins-contact) { min-height: 44px; display: inline-flex; align-items: center; }
  .ins .ins-entete__fil a { display: inline-flex; align-items: center; min-height: 44px; }
  .ins .ins-entete__fil { align-items: center; margin-bottom: 0; }
  .ins details > summary { min-height: 44px; }
}
@media (max-width: 1024px) {
  /* Aucun texte sous 14 px sur tablette et téléphone. */
  .ins { --step--2: 0.875rem; --step--1: 0.875rem; }
  .ins .ins-sommaire a { min-height: 44px; }
  .ins .con-coordonnees__mail { display: inline-flex; align-items: center; min-height: 44px; }
  /* Mentions légales : les liens seuls sur leur ligne se touchent au doigt. */
  .legal :is(.link-arrow, p > a:only-child, p > strong > a:only-child) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Frise de l'admission ---------- */
@media (max-width: 760px) {
  .adm-frise__cadre { --pastille: 40px; padding: 1rem 0; }
  .adm-frise__phases, .adm-frise__rail { display: none; }
  .adm-frise__noeuds { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); overflow: visible; gap: 0; }
  .adm-frise__noeud button { padding: 4px 0; min-height: 52px; align-content: center; }
  .adm-frise__noeud button[aria-selected='true'] .adm-frise__pastille { box-shadow: 0 0 0 4px color-mix(in oklab, var(--yellow) 60%, transparent), var(--shadow-2); transform: scale(1.06); }
  .adm-frise__pastille { font-size: 1.25rem; }
  /* Le nom de l'étape reste lu par les lecteurs d'écran ; à l'écran, il est dans le panneau. */
  .adm-frise__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .adm-frise__panneau { padding: 1.25rem; min-height: 0; }
  .adm-frise__etape { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; padding-right: 0; }
  .adm-frise__grand { font-size: 3.2rem; }
  .adm-frise__etape h3 { font-size: 1.6rem; }
  .adm-frise__texte { font-size: 1rem; }
  .adm-frise__nav { position: static; margin-top: var(--space-m); justify-content: flex-end; }
  .adm-frise__continue { margin-top: var(--space-l); }
}
@media (max-width: 1024px) {
  .ins .mention-convention, .ins .ins-sommaire__titre, .ins .ins-form__rgpd { font-size: 0.875rem; }
}
/* Tablette : les 7 étapes tiennent sur la largeur, sans défilement caché. */
@media (min-width: 761px) and (max-width: 1100px) {
  .adm-frise__noeuds, .adm-frise__phases { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); overflow: visible; }
  .adm-frise__nom { font-size: 0.875rem; max-width: none; hyphens: auto; }
  .adm-frise__noeud button { padding-inline: 2px; min-height: 44px; }
  .adm-frise__etape { padding-right: 0; }
  .adm-frise__nav { position: static; margin-top: var(--space-m); justify-content: flex-end; }
}

/* ---------- Conditions d'âge ---------- */
@media (max-width: 900px) {
  /* Légende des tranches : en liste lisible, une tranche par ligne. */
  .adm-conditions__legende { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .adm-conditions__tranche { min-height: 48px; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); align-items: center; column-gap: 0.8rem; border-top-width: 1px; border-left: 6px solid var(--z); }
}
@media (max-width: 640px) {
  /* Les repères 15 et 16 se touchent : seul 16, début de l'apprentissage, reste affiché. */
  .adm-conditions__graduations span:first-child { display: none; }
  .adm-conditions__graduations span { font-size: 0.875rem; }
}

/* ---------- Calendrier : rentrées en liste verticale, pastille à gauche ---------- */
@media (max-width: 1000px) {
  .adm-calendrier__vagues { gap: 0.9rem; margin-bottom: var(--space-l); }
  .adm-calendrier__vagues::before { left: 22px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; background: linear-gradient(180deg, var(--sky), color-mix(in oklab, var(--sky) 20%, transparent)); }
  .adm-calendrier__vagues li { grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 1rem; }
  .adm-calendrier__vagues b { font-size: var(--step-1); }
}

/* ---------- Aides : une carte par ligne sur téléphone ---------- */
@media (max-width: 640px) {
  .adm-aides__mosaique { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .adm-aides__carte.is-large, .adm-aides__carte.is-epicerie { grid-column: auto; grid-row: auto; }
  .adm-aides__carte.is-large { min-height: 300px; }
  .adm-aides__carte .link-arrow { overflow-wrap: anywhere; }
}

/* ---------- Contact ---------- */
@media (max-width: 640px) {
  /* Service au-dessus, adresse en dessous : rien ne se chevauche. */
  .con-coordonnees__emails a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; justify-items: start; }
  .con-coordonnees__adr { overflow-wrap: anywhere; text-align: left; }
  .con-coordonnees__emails a:hover { transform: none; }
  /* La rosace décorative ne passe plus sous le texte de l'encart. */
  .con-formulaire__bulle { width: 64px; height: 64px; top: 12px; right: 12px; opacity: 0.22; }
  .con-formulaire__a-titre { padding-right: 64px; }
  .con-formulaire__form { padding: var(--space-m); }
}

/* En-tête : le bloc texte contient toujours son chapô (lignes du titre à marges négatives). */
@media (max-width: 900px) {
  .ins-entete__texte { display: flow-root; padding-bottom: 0.3rem; }
}