/* css/a11y.css — Lot 3.F Accessibilité
   - F6 : prefers-reduced-motion (neutralise animations/transitions)
   - F6 : focus visible pour les éléments rendus interactifs via role="button" (F2)
   Ne modifie aucune autre règle existante. */

/* Respecte le réglage système "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus clavier visible pour les éléments non natifs transformés en bouton (F2) */
[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* AUD-019 : 64% des cibles cliquables font moins de 44x44px (boutons-icônes BeerCSS
   .circle et chips). On agrandit la zone tactile via min-width/min-height + padding,
   sans changer la taille visuelle de l'icône (pas de font-size). Uniquement sur
   pointer grossier (tactile) pour ne rien changer au rendu souris/clavier.
   Compatible avec AUD-018 (TASK-023) : ne touche pas au gap/padding de la nav du haut. */
@media (pointer: coarse) {
  button.circle,
  a.circle,
  [role="button"].circle,
  .chip {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ─── AUD-025 : zones sûres des écrans natifs (encoche, Dynamic Island, barre de gestes) ───
   Inactif sur le Web : ces règles ne s'appliquent que si js/plateforme.js a posé la classe
   « natif » sur <html>, c'est-à-dire uniquement dans une WebView Capacitor.
   BeerCSS calcule déjà --top/--bottom/--left/--right à partir de env(safe-area-inset-*), mais
   aucune règle du projet ne les utilisait : sans cela, l'en-tête passerait sous la barre d'état
   et la barre de mémorisation sous la zone de gestes.
   IMPORTANT : ces marges n'ont d'effet qu'avec `viewport-fit=cover` dans la balise viewport
   (ajouté par le générateur de webDir, TASK-033) — les deux vont ensemble. */
html.natif body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
html.natif header,
html.natif .fixed.top {
    padding-top: env(safe-area-inset-top);
}
html.natif nav.bottom,
html.natif .fixed.bottom,
html.natif dialog.bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* ─── LOT 59-iOS (I09) : WebView iOS seulement (classe posée par js/plateforme.js) ; Web et Android inchangés ───
   - iOS grossit le texte en paysage sur iPhone (text autosizing) : les lignes du moushaf débordaient ;
   - pas de reflet gris au toucher (les retours visuels sont ceux de BeerCSS) ;
   - un champ de moins de 16 px déclenche un zoom de la page à la saisie, qui ne revient pas seul. */
body.natif-ios {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
/* Barre du bas : BeerCSS lui ajoute en bas la zone de la barre d'accueil (:has(>main)>footer, padding = --bottom,
   34 px sur iPhone à Face ID) DANS sa hauteur fixe de 5rem (majbear.css) : contenu centré dans 46 px, bouton de
   lecture qui dépassait au-dessus de la barre. La barre grandit d'autant (Android : zone nulle, rien ne change). */
body.natif-ios #reglagesNavBar { block-size: calc(5rem + env(safe-area-inset-bottom)); }
body.natif-ios input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
body.natif-ios select,
body.natif-ios textarea {
    font-size: max(16px, 1em);
}

/* ─── LOT 30 (T168) : dialogues ───────────────────────────────────────────────
   Cibles tactiles de 48 px (Material Design 3) pour les boutons-icônes des dialogues (fermer, verset/mot
   précédent-suivant, agrandir), sans changer la taille de l'icône. */
@media (pointer: coarse) {
  dialog button.circle,
  dialog a.circle {
    min-width: 48px;
    min-height: 48px;
  }
}
/* Un <fieldset> prend par défaut la largeur minimale de son contenu (min-inline-size: min-content) : la
   liste des sourates de « Plage d'écoute » débordait de l'écran à 360 px. */
dialog fieldset { min-inline-size: 0; }

/* LOT 46 : liens de la fenêtre « À propos » — couleur du texte (la couleur primaire du thème sombre manque de contraste) */
#dialogAPropos .liens-apropos a { color: var(--on-surface); text-decoration: underline; text-underline-offset: 2px; }