/* ==========================================================================
   Téléphone et tablette : catalogue des formations et fiche formation.
   Chargée après les feuilles des blocs. La démo n'était dessinée que pour l'ordinateur :
   ces règles ne s'appliquent qu'aux petites largeurs ou aux écrans tactiles.
   ========================================================================== */

/* ---------- Écrans tactiles : zones de toucher d'au moins 44 px, rien ne dépend du survol ---------- */
@media (pointer: coarse), (max-width: 1024px) {
  .cat__puce, .cat__puce[data-univers] { min-height: 44px; }
  .cat__select, .cat__input { min-height: 48px; }
  .cat__reinit, .cat-comparer__vider { min-height: 44px; }
  .cat__effacer-q { width: 44px; height: 44px; }
  /* La case « Comparer » n'apparaissait qu'au survol : toujours visible au doigt. */
  .fcarte__comparer { opacity: 1; transform: none; min-height: 44px; font-size: 0.875rem; padding-block: 0.4rem; }
  .cat-comparer__retirer { width: 44px; height: 44px; right: 4px; }
  .fiche-sommaire__liste a { min-height: 44px; display: inline-flex; align-items: center; }
  .fiche-salaire__annee { min-height: 44px; }
  .fiche-journee__chapitre { min-height: 44px; }
  .fiche-journee__pause { min-width: 44px; min-height: 44px; }
  .defi-ordre__fleches button { width: 44px; height: 44px; }
  .defi-tri__deposer { min-height: 44px; }
  .fiche-entete__ariane a { display: inline-flex; align-items: center; min-height: 44px; }
  .fiche-parcours__noeud a { min-height: 44px; }
  .fiche-pratique__docs a { min-height: 44px; }
  .fiche-proches__tete .link-arrow { min-height: 44px; display: inline-flex; align-items: center; }
  /* Curseur d'âge : pouce plus grand au doigt. */
  .fiche-salaire__curseur { height: 44px; }
}

/* ---------- Tablette (≤ 1024 px) ---------- */
@media (max-width: 1024px) {
  /* Aucun texte sous 14 px au doigt (petites capitales comprises). */
  .cat__groupe-titre, .cat__tri label, .fcarte__univers, .fcarte__pro,
  :is(.page-fiche, .page-formations) :is(.badge, dt, .fiche-pratique__h3, .fiche-salaire__label, .fiche-salaire__annee, .fiche-parcours__sens, .fiche-parcours__u, .fiche-parcours__ici, .fiche-rythme__mois-nom, .fiche-journee__tete small, .fiche-rythme__citation footer, .eyebrow) { font-size: 0.875rem; }
  :is(.page-fiche, .page-formations) .btn { min-height: 44px; }
  .fiche-pratique__rncp { min-height: 44px; }
}

/* ---------- Catalogue : tablette et téléphone (≤ 960 px) ---------- */
@media (max-width: 960px) {
  /* Filtres : une rangée de puces qui défile au doigt par groupe, au lieu d'une longue colonne. */
  .cat__filtres { padding: var(--space-s) 0; gap: var(--space-s); }
  .cat__groupe { min-width: 0; }
  .cat__groupe-titre { padding-inline: var(--space-s); margin-bottom: 0.4rem; }
  .cat__puces, .cat__groupe--univers .cat__puces {
    display: flex; flex-wrap: nowrap; gap: 0.45rem; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 2px var(--space-s) 6px; scroll-padding-inline: var(--space-s); scrollbar-width: none;
  }
  .cat__puces::-webkit-scrollbar { display: none; }
  .cat__puce, .cat__groupe--univers .cat__puce { flex: none; width: auto; white-space: nowrap; }
  .cat__actifs { padding-inline: var(--space-s); }
}

/* ---------- Téléphone (≤ 640 px) ---------- */
@media (max-width: 640px) {
  /* Barre de recherche : la recherche sur toute la largeur, le compteur et le tri dessous ;
     elle ne colle plus en haut (elle prendrait un tiers de l'écran). */
  .cat__barre { position: relative; top: auto !important; }
  html:has(.site-header:not(.is-hidden)) .cat__barre { top: auto; }
  .cat__barre-inner { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-xs) var(--space-s); }
  .cat__recherche { grid-column: 1 / -1; }
  .cat__compteur { padding-bottom: 0; }
  .cat__tri { grid-column: auto; display: block; padding-bottom: 0; min-width: 0; }
  .cat__tri label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cat__select { width: 100%; }
  .cat__input { font-size: 1rem; }

  /* Une carte par ligne : titres et méta lisibles. */
  .cat__grille { grid-template-columns: minmax(0, 1fr); }
  .cat__grille .fcarte { grid-column: auto !important; grid-row: auto !important; }

  /* Barre de comparaison : en bas à gauche, en laissant 96 px à droite pour la bulle de l'assistante. */
  .cat-comparer__barre {
    left: 12px; right: 96px; bottom: 12px; width: auto;
    grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 0.7rem;
  }
  .cat-comparer__consigne { display: none; }
  .cat-comparer__choix { gap: 0.35rem; }
  .cat-comparer__puce, .cat-comparer__place { min-height: 48px; padding: 0.2rem; justify-content: center; }
  .cat-comparer__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cat-comparer__vignette { width: 40px; height: 40px; }
  .cat-comparer__retirer { width: 26px; height: 26px; right: -6px; top: -6px; translate: none; font-size: 0.95rem; }
  .cat-comparer__actions { gap: 0.4rem; }
  .cat-comparer__vider { display: none; }
  .cat-comparer__ouvrir { padding-inline: 0.9rem; min-height: 48px; }

  /* Tableau de comparaison : le libellé de chaque ligne passe au-dessus des colonnes. */
  .cat-comparer__panneau { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .cat-comparer__tete { padding: 0.8rem 1rem; }
  .cat-comparer__table { padding: 0 1rem 1rem; }
  .cat-comparer__ligne { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 0.7rem; }
  .cat-comparer__libelle { grid-column: 1 / -1; padding: 0.8rem 0 0; }
  .cat-comparer__ligne--tete .cat-comparer__libelle { display: none; }
  .cat-comparer__cellule { padding: 0.4rem 0 0.8rem; font-size: 0.875rem; overflow-wrap: anywhere; }
  .cat-comparer__col-tete h3 { font-size: 1.05rem; overflow-wrap: anywhere; }
  .cat-comparer__img { border-radius: 12px; }
}

/* ---------- Fiche formation : tablette et téléphone ---------- */
@media (max-width: 1000px) {
  /* Le téléphone de la journée type gardait la largeur prévue pour deux colonnes (20vw). */
  .fiche-duo .fiche-journee__telephone, .fiche-journee__telephone { position: relative; top: auto; width: min(320px, 100%); justify-self: center; }
  .fiche-journee__story { max-height: none; }
}
@media (max-width: 960px) {
  /* Sommaire collant : une seule ligne qui défile au doigt, sans l'intitulé. */
  .fiche-sommaire__inner { flex-wrap: nowrap; min-height: 56px; gap: var(--space-s); }
  .fiche-sommaire__titre { display: none; }
  .fiche-sommaire__liste {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-right: 0; flex: 1 1 auto; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .fiche-sommaire__liste::-webkit-scrollbar { display: none; }
  .fiche-sommaire__liste li { flex: none; }
  .fiche-sommaire__liste a { font-size: 0.875rem; white-space: nowrap; }
  .fiche-sommaire__cta { flex: none; }

  /* Calendrier de l'alternance : deux rangées de six mois. */
  .fiche-rythme__calendrier { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--space-s); }
  .fiche-rythme__semaine { height: 30px; border-radius: 8px; }

  /* Parcours : niveaux les uns sous les autres, le rail devient vertical. */
  .fiche-parcours__frise { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .fiche-parcours__rail { left: 11px; right: auto; top: 14px; bottom: 14px; width: 6px; height: auto; }
  .fiche-parcours__colonne { padding-left: 44px; }
  .fiche-parcours__station { position: absolute; left: 0; top: 0; margin: 0; }
  .fiche-parcours__niveau { min-height: 28px; align-content: center; }
  .fiche-parcours__rail i { background: linear-gradient(180deg, var(--u), var(--yellow)); transform-origin: top; }
  .fiche-parcours__colonne.is-vide { display: none; }

  /* Formations proches : titre et lien l'un sous l'autre. */
  .fiche-proches__tete { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .fiche-entete__faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-essentiel__grille { grid-template-columns: minmax(0, 1fr); }
  .fiche-proches__grille { grid-template-columns: minmax(0, 1fr); }
  .fiche-sommaire__cta { padding-inline: 0.8rem; }
  .fiche-salaire__ref .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Tablette et téléphone : derniers petits textes et liens au doigt ---------- */
@media (max-width: 1024px) {
  .fiche-salaire__axe span, .fiche-pratique__rncp span, .fiche-pratique__docs small, .fiche-pratique__pdf,
  .fiche-sommaire__liste a, .fiche-parcours__ailleurs-titre, .fiche-pratique .fiche-pratique__rncp span { font-size: 0.875rem; }
  .fiche-salaire__ref .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
}