/* ==========================================================================
   Téléphone et tablette : accompagnement d'orientation (ori-*) et pages univers (uni-*).
   Texte courant à 14 px au moins, cibles de toucher de 44 px, rien au-dessus de 1100 px
   (l'ordinateur garde exactement le rendu de la démo).
   ========================================================================== */

@media (max-width: 1100px), (pointer: coarse) {
  /* Jeu d'orientation */
  .ori-jeu .eyebrow,
  .ori-jeu__touches span,
  .ori-choix__libelle,
  .ori-res .eyebrow,
  .ori-conseil__texte p { font-size: 14px; }
  .ori-carte__type, .ori-carte__num, .ori-prog__aide, .ori-son { font-size: 14px; }
  .ori-son { min-height: 44px; padding-inline: 0.9rem; }
  .ori-res__pre, .ori-res__formation-lien { min-height: 44px; }

  /* Pages univers */
  .uni-ouverture__ariane a { display: inline-flex; align-items: center; min-height: 44px; }
  .uni-ouverture__ariane,
  .uni-ouverture__chiffres dt,
  .uni-metiers .eyebrow, .uni-escalier .eyebrow, .uni-ateliers .eyebrow,
  .uni-escalier__equiv,
  .uni-escalier__intitule,
  .uni-ateliers figcaption,
  .uni-suite__nb { font-size: 14px; }
  .uni-metiers__nb, .uni-metiers__qualites span,
  .uni-escalier__duree, .uni-escalier .badge { font-size: 14px; }
  .uni-escalier__formations a { min-height: 44px; }
}

/* Téléphone : la pile de cartes reste entière à l'écran avec ses boutons sous le pouce. */
@media (max-width: 560px) {
  .ori-commandes { gap: 0.75rem; }
  .ori-choix__rond { min-width: 56px; min-height: 56px; }
  .ori-retour { min-width: 44px; min-height: 44px; }
  .uni-ouverture__titre { overflow-wrap: anywhere; }
}

/* Métiers de l'univers : au doigt, pas de survol, l'accroche et la flèche restent visibles. */
@media (hover: none) {
  .uni-metiers__accroche { max-height: 8em; opacity: 1; font-size: max(14px, var(--step--1)); }
  .uni-metiers__fleche { opacity: 1; transform: none; width: 44px; height: 44px; }
}

/* Téléphone : une carte métier par ligne, au format portrait, titres entiers. */
@media (max-width: 600px) {
  .uni-metiers__compo { grid-auto-rows: auto; gap: var(--space-s); }
  .uni-metiers__item, .uni-metiers__item.is-grand, .uni-metiers__item.is-haut, .uni-metiers__item.is-moyen { grid-column: 1 / -1; grid-row: auto; }
  .uni-metiers__lien { min-height: 0; aspect-ratio: 4 / 5; }
  .is-grand .uni-metiers__nom { font-size: var(--step-4); }
  .uni-metiers__nom { overflow-wrap: anywhere; }
}

/* En-têtes de section sur une colonne quand le titre et le texte ne tiennent plus côte à côte. */
@media (max-width: 760px) {
  .uni-escalier__tete { grid-template-columns: minmax(0, 1fr); }
}

/* Écran tactile : les raccourcis clavier du jeu ne servent pas, la pile remonte d'autant. */
@media (hover: none) and (max-width: 1100px) {
  .ori-jeu__touches { display: none; }
}

/* Téléphone : le mur de photos des ateliers passe en une colonne, légendes entières. */
@media (max-width: 600px) {
  .uni-ateliers__mur { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .uni-ateliers__photo, .uni-ateliers__photo--1, .uni-ateliers__photo--2, .uni-ateliers__photo--5 { grid-column: 1 / -1; grid-row: auto; }
  .uni-ateliers__photo figure { height: auto; aspect-ratio: 4 / 3; }
}

/* Téléphone : compteur et bouton du son sur une ligne, la pile de cartes remonte. */
@media (max-width: 600px) {
  .ori-jeu__intro { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-m); }
  .ori-jeu__intro > :is(.eyebrow, .ori-jeu__titre, .ori-jeu__lead, .ori-jeu__touches) { flex-basis: 100%; }
  .ori-jeu__intro .ori-prog { margin-top: var(--space-s); }
  .ori-jeu__intro .ori-prog__rosace { width: 64px; height: 64px; }
  .ori-jeu__intro .ori-son { margin-top: var(--space-s); }
}