/* vg-tactile.css — cibles tactiles et lisibilité, AppStore.
 *
 * POURQUOI UNE FEUILLE GLOBALE PLUTÔT QUE DES COMPOSANTS
 * ─────────────────────────────────────────────────────
 * 🔑 Le front est en styled-components : les classes sont HACHÉES
 * (`sc-fPXMVe kcZoRW`) et changent à chaque build. On ne peut donc ni les
 * cibler, ni retrouver d'un build à l'autre le composant qui pose problème.
 * Une règle globale, portée par le TYPE d'élément et par quelques classes
 * stables (`.tag`), survit aux reconstructions ; une correction dans un
 * composant précis demanderait de les retrouver un par un.
 *
 * 🔑 LE CRITÈRE EST LE POINTEUR, PAS LA LARGEUR D'ÉCRAN. Un doigt fait ~9 mm
 * sur un téléphone comme sur un iPad de 1024 px. Une règle en `max-width`
 * laisserait les tablettes tactiles avec des cibles de 34 px.
 *
 * MESURÉ EN APPAREIL VIRTUEL le 19/10/2026 sur store.vertingo.eu, à 360 px :
 *   · boutons-icônes à 34×34, 38×38 et 40×40 px — sous le seuil des 44 ;
 *   · boutons courts à 55×22 et 99×29 ;
 *   · `span.tag` à 9,6 px — sous le plancher de lisibilité de 12 px.
 */

@media (pointer: coarse) {
  /* 44 px : seuil sous lequel on rate une cible environ une fois sur trois
     (minimum commun aux recommandations Apple et Android). */
  button,
  [role="button"],
  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], select {
    min-width: 44px;
    min-height: 44px;
  }

  /* 🔑 LES `<a>` AUSSI — ET C'EST SANS RISQUE POUR LA PROSE. La moitié des
     commandes de l'AppStore sont des `<a>` stylés en cartes ou en onglets
     (mesurés à 34×34 et 214×35) : les exclure laissait le défaut entier.
     ⚠️ Et on peut les viser tous, parce que `min-height` et `min-width`
     N'ONT AUCUN EFFET sur un élément `display: inline` — c'est la définition
     du modèle de boîte. La règle n'atteint donc QUE les `<a>` passés en
     block, inline-block ou flex, c'est-à-dire exactement ceux qui se
     comportent en boutons. Un lien au fil d'une phrase reste intact sans
     qu'on ait à l'exclure. */
  a {
    min-height: 44px;
    /* `min-width` est soumis à la même règle : sans effet sur un `<a>`
       inline, il ne redresse que les liens-icônes, mesurés à 28 et 34 px
       de large. */
    min-width: 44px;
  }
  /* Un `<a>` agrandi par `min-height` garde son libellé collé en haut.
     `align-content` recentre sans changer le mode d'affichage — le passer en
     `inline-flex` sortirait du fil du texte les liens qu'on vient justement
     de s'interdire de toucher. */
  a[class] { align-content: center; text-align: center; }

  /* 🔑 `min-height` seul ne recentre PAS le contenu d'un bouton : le libellé
     reste collé en haut et le bouton paraît cassé. On aligne explicitement,
     sans toucher à ceux qui gèrent déjà leur disposition en grille. */
  button:not([class*="grid"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Les étiquettes de jeu : 9,6 px, illisibles sans zoomer. 12 px est le
     plancher. On ne grossit QUE la police — la pastille suit d'elle-même. */
  .tag,
  span.tag {
    font-size: 12px !important;
    line-height: 1.3;
  }
}

/* 🔑 Le plancher de lisibilité ne dépend pas du doigt : un texte de 9,6 px
   est illisible à la souris aussi. Cette règle-ci reste donc HORS du bloc
   `pointer: coarse`. */
.tag, span.tag { font-size: max(12px, 0.75rem); }