/* ==========================================================================
   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) ----------
   Les filtres ne précèdent plus les résultats : un bouton « Filtres » les ouvre dans une feuille
   qui monte du bas de l'écran, les puces y passent à la ligne, et « Voir les N formations » ramène
   aux résultats. Un rappel collant garde « Filtres » à portée de pouce pendant la lecture de la liste. */
@media (max-width: 960px) {
  .cat__corps { padding-top: var(--space-xs); }

  /* Bouton « Filtres » de la barre, et sa pastille quand des filtres sont actifs. */
  .cat__ouvrir-filtres, .cat__flottant-filtres {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 48px; padding: 0 1.1rem; border-radius: var(--radius-pill);
    background: var(--navy); color: #fff; font-weight: 650; font-size: 1rem;
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
  }
  .cat__ouvrir-filtres svg, .cat__flottant-filtres svg { width: 20px; height: 20px; flex: none; }
  .cat__ouvrir-filtres:active, .cat__flottant-filtres:active { transform: scale(0.96); }
  .cat__ouvrir-filtres:focus-visible, .cat__flottant-filtres:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
  .cat__nb-filtres {
    min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; border-radius: var(--radius-pill);
    display: inline-grid; place-items: center; background: var(--yellow); color: var(--navy); font-size: 0.85rem; font-weight: 800;
  }
  .cat__nb-filtres[hidden] { display: none; }

  /* La feuille : sortie du flux, en bas de l'écran, cachée tant qu'on ne l'ouvre pas. */
  .cat__filtres {
    position: fixed; inset: auto 0 0 0; top: auto; z-index: 1001;
    max-height: min(86dvh, 760px); overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--space-m);
    padding: 0 var(--space-s) 0; border-radius: 24px 24px 0 0;
    background: var(--bg-raised); box-shadow: 0 -18px 48px -12px hsl(var(--shadow-color) / 0.45);
    transform: translateY(104%); visibility: hidden;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.42s;
  }
  .cat__filtres.is-ouvert { transform: none; visibility: visible; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
  .cat__voile {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: color-mix(in oklab, var(--navy) 55%, transparent);
    animation: cat-voile 0.3s ease-out both;
  }
  .cat__voile[hidden] { display: none; }
  @keyframes cat-voile { from { opacity: 0; } }
  html.cat-feuille-ouverte { overflow: hidden; }

  /* Tête collante de la feuille : poignée, titre, fermer. */
  .cat__feuille-tete {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
    position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--space-s));
    padding: 1.1rem var(--space-s) 0.6rem; background: var(--bg-raised);
  }
  .cat__feuille-tete::before {
    content: ''; position: absolute; left: 50%; top: 8px; width: 44px; height: 5px; translate: -50% 0;
    border-radius: var(--radius-pill); background: var(--line-strong);
  }
  .cat__feuille-titre { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--navy); }
  .cat__fermer {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%;
    background: var(--bg-sunken); color: var(--navy);
  }
  .cat__fermer svg { width: 20px; height: 20px; }
  .cat__fermer:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

  /* Groupes : les puces passent à la ligne, tout est visible d'un coup d'œil. */
  .cat__groupe { min-width: 0; }
  .cat__groupe-titre { margin-bottom: 0.55rem; }
  .cat__puces, .cat__groupe--univers .cat__puces { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .cat__puce, .cat__groupe--univers .cat__puce { flex: none; width: auto; white-space: nowrap; }
  .cat__filtres > .cat__actifs { display: none; }

  /* Pied collant : effacer, et le bouton qui ramène aux résultats avec leur nombre. */
  .cat__feuille-pied {
    display: flex; align-items: center; gap: var(--space-s);
    position: sticky; bottom: 0; margin: auto calc(-1 * var(--space-s)) 0;
    padding: 0.8rem var(--space-s) calc(0.8rem + env(safe-area-inset-bottom));
    background: var(--bg-raised); box-shadow: 0 -1px 0 var(--line);
  }
  .cat__feuille-pied .cat__reinit { flex: none; border-bottom-width: 2px; }
  .cat__feuille-pied .cat__reinit[hidden] { display: none; }
  .cat__voir { flex: 1 1 auto; min-height: 52px; justify-content: center; font-size: 1rem; }
  .cat__voir:disabled { opacity: 0.55; }

  /* Rappel collant sous l'en-tête, quand la barre de recherche est passée. */
  .cat__flottant {
    display: flex; align-items: center; gap: 0.6rem;
    position: fixed; z-index: 30; left: 12px; right: 12px; top: calc(var(--header-h) + 8px);
    padding: 6px 6px 6px 6px; border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 10px 28px -14px hsl(var(--shadow-color) / 0.5), inset 0 0 0 1px var(--line);
    opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity 0.25s ease-out, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), top var(--dur-normal) var(--ease-out);
  }
  html:has(.site-header.is-hidden) .cat__flottant { top: 10px; }
  .cat__flottant.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .cat__flottant-filtres { min-height: 44px; padding: 0 0.95rem; font-size: 0.95rem; }
  .cat__flottant-compte { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat__flottant-compte strong { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--navy); }
  .cat__flottant-chercher { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bg-raised); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
  .cat__flottant-chercher svg { width: 20px; height: 20px; }
  .cat__flottant-chercher:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .cat__filtres, .cat__filtres.is-ouvert, .cat__flottant { transition: none; }
  .cat__voile { animation: none; }
}

/* ---------- 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; }
  /* Recherche sur toute la largeur ; dessous, « Filtres » et le tri côte à côte ; le compteur en tête de ligne. */
  .cat__barre-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-xs) var(--space-s); }
  .cat__recherche { grid-column: 1 / -1; }
  .cat__compteur { grid-column: 1 / -1; order: 1; padding-bottom: 0; }
  .cat__compteur-n { font-size: var(--step-2); }
  .cat__ouvrir-filtres { order: 2; width: 100%; }
  .cat__tri { order: 3; 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; }
}