/* ==========================================================================
   Téléphone et tablette : pages « La CFA » (cfa-*) et « Vie à la CFA » (vie-*).
   Chargée après les feuilles des blocs. Rien ne change au-dessus de 1100 px à la souris.
   ========================================================================== */

@media (max-width: 1100px), (pointer: coarse) {
  /* Textes d'appoint lisibles sans zoom (14 px au moins). */
  .cfa-avis__services small,
  .cfa-avis__qui small,
  .cfa-chiffres__src,
  .cfa-histoire__jalon p,
  .vie-soutien__bureau { font-size: max(0.875rem, 1em); }
  .cfa-avis__qui small { font-size: 0.875rem; }

  /* Liens isolés : zone de toucher de 44 px. */
  .cfa-chiffres__inserjeunes a,
  .vie-quotidien .link-arrow,
  .vie-soutien .link-arrow,
  .cfa-qualite__docs a { display: inline-flex; align-items: center; min-height: 44px; }
  .cfa-avis__plus > summary { min-height: 44px; }
  .vie-mosaique__fermer, .vie-mosaique__nav { min-width: 44px; min-height: 44px; }
}

/* Tablette paysage (sommaire latéral encore présent) : résultats au-dessus des compteurs,
   sinon les cartes de compteurs (trois colonnes) débordent de leur panneau. */
@media (max-width: 1100px) {
  .cfa-chiffres__grille { grid-template-columns: minmax(0, 1fr); }
  .cfa-chiffres__liste { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .cfa-chiffres__item { min-width: 0; }
  .cfa-chiffres__valeur b { overflow-wrap: anywhere; }
  /* Histoire : l'année au-dessus des jalons (deux colonnes de jalons de 70 px coupaient les titres). */
  .cfa-histoire__grille, .cfa-histoire__suite { grid-template-columns: minmax(0, 1fr); }
  .cfa-histoire__jalons { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  /* Qualiopi : le badge garde une taille de badge quand la grille passe sur une colonne. */
  .cfa-qualite__badge { justify-self: start; max-width: 320px; }
}

@media (max-width: 700px) {
  /* Avis : une colonne (deux colonnes donnaient des cartes de 120 px de large). */
  .cfa-avis__mur { columns: 1; }
  .cfa-avis__services { flex-wrap: wrap; }
  .cfa-avis__services li { min-width: 0; flex: 1 1 140px; }

  /* Équipements : une colonne, les intitulés en toutes lettres ne débordent plus. */
  .vie-lieux__liste { grid-template-columns: minmax(0, 1fr); }
  .vie-lieux__liste li { padding-right: 0; }
  .vie-lieux__seul { font-size: var(--step-2); }

  /* Plateaux techniques : une carte par ligne, texte posé sur une photo assez haute. */
  .vie-lieux__plateaux { grid-template-columns: minmax(0, 1fr); }
  .vie-lieux__plateau { min-height: 300px; }

  /* Équipe : courriels longs sur leur propre ligne. */
  .cfa-equipe__refs li { gap: 0.3rem; }
}

@media (max-width: 480px) {
  /* Chiffres : compteurs sur une colonne, les libellés gardent une largeur de lecture. */
  .cfa-chiffres__liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cfa-chiffres__anneaux { gap: var(--space-s); }
  .vie-soutien__epicerie img { width: 112px; height: 112px; }
}

@media (max-width: 700px) {
  /* Visionneuse : la photo prend toute la largeur, les flèches passent sous la légende. */
  .vie-mosaique__visionneuse { max-width: calc(100vw - 32px); padding: 64px 0 76px; }
  .vie-mosaique__visionneuse img { max-height: calc(90vh - 180px); }
  .vie-mosaique__fermer { top: 4px; right: 0; }
  .vie-mosaique__nav { top: auto; bottom: 8px; }
  .vie-mosaique__nav[data-nav='-1'] { left: calc(50% - 64px); }
  .vie-mosaique__nav[data-nav='1'] { right: calc(50% - 64px); }
}