/* ===== tactile.css — LE PLANCHER DE 16 px SUR LES CHAMPS, AU DOIGT ==========
   24/08/2026.

   POURQUOI CE FICHIER EXISTE, dit avec ses mots :
     « je veux juste que la largeur soit clean dans une vue d'iphone quoi, pas
       que j'ai besoin de reajuster le zoom quand je suis sur mon site »

   Sous 16 px, Safari sur iPhone et iPad ZOOME la page tout seul dès qu'on
   touche un champ. La page grossit (×1,087 mesuré depuis 14,72 px : ses 390 px
   de large n'en montrent plus que 359), elle se met à glisser latéralement, et
   il faut pincer pour revenir. C'est-à-dire : la largeur cesse d'être propre.
   Les deux gêne qu'il décrit n'en font qu'une, et sa cause est ici.

   ⚠️ LE PREMIER GESTE QU'IL FAIT SUR SON TÉLÉPHONE PASSE PAR ICI. Mesuré par
   le gate `oeil` en rejouant le parcours : page d'accueil -> menu -> « Se
   connecter » -> il touche le champ e-mail, et ça zoome. L'écran de connexion
   est cité TROIS fois sur la page d'accueil (en-tête, menu, bas du formulaire).
   La page d'accueil, elle, est protégée depuis le 14/08 par ses propres règles
   (`landing.css`, section « CHAMPS À 16 px ») — elle n'a pas besoin de ce
   fichier, et il ne lui est pas servi.

   ================== POURQUOI ICI, ET PAS DANS theme.css ====================
   La cause est `theme.css:113`, qui habille tous les champs de l'app en
   `.92rem` (= 14,72 px). Ce fichier est NO-TOUCH (`PROPRIETE_FICHIERS.md`) :
   on ne le corrige pas, on pose le plancher APRÈS lui.

   ================== POURQUOI `!important`, ici et nulle part ailleurs ======
   Trois règles au moins fixent aujourd'hui la taille d'un champ dans l'app, et
   l'une d'elles gagne par son IDENTIFIANT — `app.css:51` :
       #form-auth input[type=email], #form-auth input[type=password]
   Un identifiant l'emporte sur n'importe quel sélecteur sans identifiant,
   quelle que soit la position dans la cascade : sans `!important`, ce fichier
   serait chargé en dernier ET resterait sans effet sur l'écran de connexion —
   c'est-à-dire précisément là où le défaut est le plus visible. En silence.
   `!important` est aussi ce qui rend la correction DÉFINITIVE : une règle
   écrite demain dans un autre fichier ne pourra pas la défaire sans le dire.
   C'est un plancher d'accessibilité, pas un choix de goût — on ne négocie pas
   avec, et c'est le seul endroit du produit où ce mot est employé pour ça.

   ================== POURQUOI DEUX CONDITIONS, ET PAS UNE ===================
   - `pointer:coarse` dit ce qu'on veut vraiment dire : « on y touche avec un
     doigt », quelle que soit la largeur. C'est la seule qui couvre un iPad Pro
     en paysage, qui fait 1366 px CSS — autant qu'un ordinateur portable.
   - `max-width:1080px` est la ceinture, calée sur le palier de navigation de
     la page d'accueil : elle tient si le navigateur ment sur son pointeur, et
     elle se mesure en redimensionnant une fenêtre.
   Aucune des deux ne s'applique à une souris sur grand écran : le rendu du
   poste de travail ne bouge pas d'un pixel.

   ================== CE QUI EST EXCLU, ET POURQUOI =========================
   Un curseur, un sélecteur de couleur, une case à cocher, un choix de fichier
   ne sont pas des champs de SAISIE DE TEXTE : Safari ne zoome pas dessus. Leur
   imposer 16 px n'apporterait rien et grossirait leur boîte — le ruban de
   l'éditeur en porte dix. On les laisse donc tranquilles, exprès.
   `<select>` est gardé : il ne déclenche pas le zoom (iOS ouvre un sélecteur
   natif), mais il est demandé nommément et sa valeur se lit à côté des champs
   qu'il accompagne — un menu déroulant plus petit que le champ voisin se voit.

   ================== CE QUE CE FICHIER NE PROUVE PAS =======================
   Le zoom lui-même est un comportement WebKit : Chrome ne le reproduit pas. On
   mesure la CAUSE — la taille des champs — avec certitude ; la disparition du
   zoom demande un vrai iPhone. Le garde-fou `banc_landing_mobile.py` mesure la
   même chose, et le dit de la même façon.
   ========================================================================== */

@media (pointer:coarse), (max-width:1080px){
  input:not([type=range]):not([type=color]):not([type=checkbox]):not([type=radio]):not([type=file]),
  textarea,
  select{
    font-size:16px !important;
  }
}