/* ==========================================================================
   PIZZA FIFI — Correctifs mobiles (ADDITIFS, chargés en dernier)
   Passe de maintenance : zéro débordement horizontal, cibles tactiles ≥44px,
   coupe des effets hover-only au toucher. Ne réécrit aucune media query
   existante — ce fichier complète styles.css / theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) ZÉRO DÉBORDEMENT HORIZONTAL
   Le tiroir de navigation (.nav__links) est en position:fixed et parqué hors
   écran à droite via translateX(100%) quand il est fermé. Un élément fixe
   translaté ainsi étend la zone scrollable horizontale (scrollWidth > innerWidth)
   sur mobile. `overflow-x: clip` sur la racine neutralise cette contribution
   SANS casser position:sticky (contrairement à overflow:hidden) et sans créer
   de conteneur de défilement parasite.
   -------------------------------------------------------------------------- */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Ceinture + bretelles : sur les très petits écrans, on s'assure aussi que le
   tiroir fermé ne peut jamais générer de scroll latéral même si `clip` n'est
   pas supporté (navigateurs anciens) — il reste hors flux et invisible. */
@media (max-width: 860px) {
  .nav__links:not(.is-open) {
    /* déjà visibility:hidden + translateX(100%) dans styles.css ; on borne en
       plus sa largeur d'empreinte pour les moteurs sans overflow:clip. */
    max-width: 100vw;
  }
}

/* Garde-fou générique : aucune image/vidéo ne dépasse son conteneur. */
img, video, canvas, svg { max-width: 100%; }

/* --------------------------------------------------------------------------
   2) CIBLES TACTILES ≥ 44×44px (compléments aux règles déjà présentes)
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* liens du tiroir : déjà généreux verticalement, on garantit le minimum */
  .nav__links a { min-height: 44px; display: flex; align-items: center; }
  /* fermeture panier / customizer : pleinement tapables */
  .cart__close, .modal__close { min-width: 44px; min-height: 44px; }
  /* puces du deck d'avis : zone tactile élargie autour du point */
  .rdeck__dot { min-width: 44px; min-height: 44px; }
  /* liens du pied de page : espacés pour le doigt */
  .footer__nav a { min-height: 40px; display: inline-flex; align-items: center; }
  /* boutons d'onglets de la carte : confort */
  #menu-tabs button { min-height: 44px; }
  /* statut/itinéraire/CTA déjà couverts par .btn { min-height:44px } */
}

/* --------------------------------------------------------------------------
   3) AU TOUCHER (pointer:coarse) — couper les effets hover-only et alléger
   On ne désactive jamais une fonctionnalité : on neutralise seulement les
   transforms déclenchés au survol qui n'ont aucun sens au doigt et peuvent
   laisser un élément « collé » en état hover après un tap.
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .sig:hover img,
  .sig__add:hover,
  .menu .dish:hover,
  .btn:hover { transform: none; }
  /* la pizza 3D reste interactive mais ne piège jamais le scroll vertical */
  .cz__canvas, .three__canvas { touch-action: pan-y; }
}

/* --------------------------------------------------------------------------
   4) LISIBILITÉ — éviter qu'un titre ne « casse » salement sur très petit écran
   Le hero était à la limite à 360px ; on autorise une coupure de mot propre
   plutôt qu'un débordement, sans toucher aux tailles (clamp déjà responsive).
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .hero__title { overflow-wrap: break-word; }
}