/* confort-mobile.css — couche commune de confort de lecture et de geste ☀️ 11/09/2026
   Demande de Matthieu : « peut-on corriger tous ces éléments OU la plupart pour éviter l'accumulation ».
   Chaque règle porte une spécificité nulle (:where) : le style propre d'un écran l'emporte toujours.
   La veille visuelle (webhooks/veille-visuel.php) tient pour couverts les écrans liés à cette feuille. */

@media screen {
  /* ⑦ une adresse longue se coupe plutôt que d'élargir la page */
  :where(body) { overflow-wrap: anywhere; }
  :where(table, table *, pre, code, input, select, textarea) { overflow-wrap: normal; }
}

@media screen and (max-width: 760px) {
  /* ⑥ un tableau large défile de côté, ses colonnes restent entières */
  :where(table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* ④ un paragraphe respire avant ce qui suit */
  :where(p) { margin-block-end: .6em; }
  /* ③ une mention écrite en ligne sous 11 px remonte à 11 px */
  [style*="font-size:8px"], [style*="font-size: 8px"], [style*="font-size:8.5px"], [style*="font-size: 8.5px"],
  [style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:9.5px"], [style*="font-size: 9.5px"],
  [style*="font-size:10px"], [style*="font-size: 10px"], [style*="font-size:10.5px"], [style*="font-size: 10.5px"] { font-size: 11px !important; }
}

@media (pointer: coarse) {
  /* ② un bouton se touche du doigt */
  :where(button, input[type="button"], input[type="submit"]) { min-height: 38px; }
}