/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ GLOBALE (js/185, 10.10.2026)
   Chargée en dernier : ce sont des règles de socle, pas des choix d'écran. Elles restent volontairement
   peu spécifiques — un écran qui a déjà son propre repère de focus ou sa propre taille garde la main.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Le focus se voit ────────────────────────────────────────────────────────────────────────────
   Beaucoup de champs et de boutons du CRM écrivent « outline: none » sans rien mettre à la place :
   au clavier, on ne savait plus où l'on était. :focus-visible ne s'allume qu'à la navigation au
   clavier (et dans les champs de saisie), jamais sur un clic de souris : aucune gêne à la souris. */
:focus-visible {
  outline: 2px solid var(--accent, #0095B8);
  outline-offset: 2px;
}
/* Les lignes et cartes rendues focusables par js/185 : le cadre se pose à l'intérieur, pour ne pas
   être rogné par un conteneur qui défile. */
[data-a11y-clic]:focus-visible { outline-offset: -2px; border-radius: inherit; }
/* Les champs de l'écran de connexion ont déjà leur anneau (bordure + halo marine, css/00-socle). */
#login-screen .field-input:focus-visible { outline: none; }

/* ── Zones tactiles : 44 × 44 px au doigt ─────────────────────────────────────────────────────────
   Recommandation d'Apple et du WCAG (2.5.5). Le socle donnait déjà 38 px de haut aux boutons sur
   téléphone (css/00-socle) ; on monte à 44, en largeur aussi — les petits ✕ et ✏️ de 22 px étaient
   les plus durs à toucher. Exclus : le texte courant et les pastilles (badge, puce, pastille, chip,
   lien), les interrupteurs, le bouton Copier des messages. Spécificité minimale (celle de
   « button ») : une règle d'écran qui fixe sa propre hauteur minimale l'emporte. */
@media (max-width: 768px) {
  button:not(:where(.badge, [class*="badge"], [class*="pastille"], [class*="puce"], [class*="chip"], [class*="lien"], .ix-copier, [role="switch"])),
  :where(div[role="button"], li[role="button"], img[role="button"]):not(:where(.badge, [class*="badge"], [class*="pastille"], [class*="puce"], [class*="chip"], [class*="lien"])) {
    min-height: 44px;
    min-width: 44px;
  }
}