/* mobile.css — optimisation mobile (AFD-T-106). Chargé en dernier : il ne retire rien au thème, il corrige ce qui gêne au toucher.
   Règles vérifiées par MobileEngine::analyzeStyles() — ne pas retirer sans mettre à jour l'audit. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
a, button, [role="button"], input, select, textarea, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(244, 121, 32, .18); }
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }
table { max-width: 100%; }
.table-wrap, .table-responsive, .wpa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
.min-vh-100 { min-height: 100vh; min-height: 100dvh; }

/* Petit écran : champs à 16 px (iOS ne zoome plus au toucher), zones tactiles de 44 px, zones sûres. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
  button, .btn, [role="button"], input[type="submit"], input[type="button"], .nav-link, .menu-item { min-height: 44px; }
  .btn, button { min-width: 44px; }
  a.nav-link, nav a, .tabs a, .pagination a { display: inline-flex; align-items: center; min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  .container, .wrap, main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .modal, .wpa-modal-box { max-width: 100vw; max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
  .player, #player, .player-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (max-width: 480px) {
  h1 { overflow-wrap: anywhere; }
  .grid, .cards, .track-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 360px) { .btn, button { padding-left: 10px; padding-right: 10px; } }
/* Paysage sur téléphone : le lecteur et les bandeaux ne mangent pas tout l'écran. */
@media (max-height: 480px) and (orientation: landscape) {
  .player, #player, .player-bar { max-height: 30vh; max-height: 30dvh; }
}
@media (hover: none) { .hover-only { display: block; opacity: 1; visibility: visible; } }
.app-layout { height: 100vh; height: 100dvh; }