/* ============================================================================
   Oishi Sushi & Wok — mobile-fixes.css
   Passe de durcissement responsive ADDITIVE (chargée en dernier).
   Ne réécrit pas les media queries existantes : ne fait que compléter pour
   garantir zéro débordement horizontal, des cibles tactiles >= 44px et un
   mode « lite » au toucher. Testé à 360 / 390 / 430px.
   ========================================================================== */

/* ---- Garde-fou global anti-débordement horizontal ---------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }
img, svg, video, canvas, iframe { max-width: 100%; }

/* Médias qui peuvent garder un ratio sans pousser la largeur */
img { height: auto; }

/* ---- Cibles tactiles : >= 44px sur appareils tactiles ------------------ */
@media (pointer: coarse) {
  a.btn, button.btn,
  .nav-toggle,
  .menu-cat,
  .dish__add,
  .gallery__nav,
  .mobile-menu__cta,
  .mobile-menu__close,
  [data-open-cart], [data-open-account],
  [data-place-order],
  .qty button, .cart__qty button,
  .footer__social a {
    min-height: 44px;
    min-width: 44px;
  }
  /* Liens de navigation et liens texte cliquables : zone confortable */
  .mobile-menu a, .mobile-menu button { min-height: 48px; }
}

/* ---- Mode « lite » au toucher : on allège les effets lourds ------------- */
@media (pointer: coarse) {
  /* Curseur custom et halo : inutiles et gênants au doigt */
  .cursor-dot, .cursor-ring { display: none !important; }
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button { cursor: auto !important; }

  /* Grain / vignette film : on réduit pour soulager le GPU mobile */
  .fx-grain { opacity: .03; }

  /* Le canvas 3D ambiant reste mais ne doit jamais capter le toucher
     ni déborder ; il est purement décoratif. */
  #sushi3d { pointer-events: none !important; touch-action: auto; }
}

/* ---- Petits écrans : lisibilité et confort ----------------------------- */
@media (max-width: 480px) {
  /* Corps de texte lisible (>= 15px) sans toucher au design des titres */
  body { font-size: 16px; }
  p, li, .lede, .footer__brand p { font-size: clamp(15px, 4vw, 16px); line-height: 1.6; }

  /* Le ruban marquee reste contenu */
  .marquee { overflow: hidden; }
  .marquee__item { font-size: 1.15rem; }

  /* Empêche les longs mots/URLs de casser la mise en page */
  h1, h2, h3, p, a, li { overflow-wrap: anywhere; word-break: normal; }

  /* Panier / tiroirs / modales : jamais plus larges que l'écran */
  .cart, .drawer, .modal, .mobile-menu, .account-panel {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Grilles éventuelles restées multi-colonnes : on passe en 1 colonne */
  .craft, .order-steps, .reviews__grid, .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Très petits écrans (360px) ---------------------------------------- */
@media (max-width: 380px) {
  :root { --container: 100%; }
  .section { padding-inline: clamp(14px, 5vw, 22px); }
  .hero__cta .btn { width: 100%; }
}

/* ---- Le voile noren / marques fixes ne doivent pas déborder ------------- */
@media (max-width: 560px) {
  .noren, .noren__mark, .fx-overlay { max-width: 100vw; overflow: hidden; }
}