/* =====================================================
   TAONSA — Optimisations mobile globales (Phase 19)
   - Touch targets ≥ 44×44px (WCAG)
   - Font sizes lisibles (min 14px sur mobile, 16px sur inputs pour pas de zoom auto iOS)
   - Safe-area iPhone notch
   - Smooth scrolling momentum
   - Tap highlight personnalisé
   - Container fluide
   ===================================================== */

/* ============= Base ============= */
html {
  -webkit-text-size-adjust: 100%; /* empêche le zoom de texte iOS en landscape */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  -webkit-tap-highlight-color: rgba(13, 148, 136, .15);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none; /* anti pull-to-refresh sur Android quand pas voulu */
}

/* ============= Safe-area iPhone notch ============= */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  /* Header sticky respecte le notch en haut */
  header.sticky,
  header[class*="sticky"] {
    padding-top: max(0px, env(safe-area-inset-top));
  }
  /* Bouton flottant whatsapp respecte le bottom (home indicator) */
  .whatsapp-float,
  [class*="bottom-"][class*="fixed"],
  #scrollTopBtn {
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* ============= Touch targets WCAG (44×44 min) ============= */
@media (max-width: 768px) {
  /* Tous les boutons et liens cliquables atteignent 44px de haut min */
  button,
  a.btn,
  a[role="button"],
  input[type="button"],
  input[type="submit"],
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
  }

  /* Augmente la zone tappable des petits boutons icon */
  button[aria-label],
  a[aria-label] {
    min-width: 44px;
  }

  /* Boutons de quantité dans le panier */
  .qty-btn,
  [data-act="inc"],
  [data-act="dec"],
  [data-act="del"] {
    min-width: 40px;
    min-height: 40px;
  }

  /* Inputs : 16px minimum pour empêcher le zoom auto iOS au focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* FIX 2026-05-20 : retire body{font-size:15px} qui cassait l'echelle rem Tailwind
     sur mobile (text-base devenait 15px au lieu de 16px -> hierarchie desalignee).
     iOS gere deja via -webkit-text-size-adjust:100% ailleurs.
     Retire aussi les override .text-xs/.text-sm avec !important qui creent un decalage
     entre rendu mobile et desktop. */
}

/* ============= Containers fluides ============= */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 640px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ============= Scroll horizontal smooth pour les rows produits ============= */
.scroll-snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 16px;
}
.scroll-snap-x > * {
  scroll-snap-align: start;
}

/* ============= Modals : pleine hauteur mobile ============= */
@media (max-width: 640px) {
  .modal,
  [class*="modal"] {
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============= Cart sidebar : ne déborde pas sur petits écrans ============= */
@media (max-width: 400px) {
  #cartSidebar,
  #userAccountSidebar,
  #mobileMenuSidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============= Footer : meilleur espacement mobile ============= */
@media (max-width: 640px) {
  footer .grid {
    gap: 32px;
  }
}

/* ============= Live chat widget mobile ============= */
@media (max-width: 640px) {
  #taonsaChatWidget {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: 16px;
  }
  #taonsaChatWidget #chatPanel {
    width: calc(100vw - 32px);
    right: 0;
  }
}

/* ============= Focus visible (accessibilité clavier mobile/desktop) ============= */
*:focus-visible {
  outline: 3px solid #14b8a6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============= Améliorations boutons CTA tactiles ============= */
@media (hover: none) and (pointer: coarse) {
  /* On simule le hover par :active sur touch devices */
  .hero-cta-primary:active { transform: scale(.97); }
  .hero-cta-secondary:active { transform: scale(.97); }
  .group:active img { transform: scale(.98); }
}

/* ============= Image responsive sécurisée ============= */
img {
  max-width: 100%;
  height: auto;
}

/* ============= Skeleton placeholder shimmer ============= */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-shimmer {
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ============= Pull-to-refresh visuel discret (PWA) ============= */
.ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  background: #14b8a6;
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 12px 12px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  transition: transform .3s ease;
}
.ptr-indicator.show { transform: translateX(-50%) translateY(0); }

/* ============= Empêche le double-tap zoom sur boutons ============= */
button, a.btn, [role="button"] {
  touch-action: manipulation;
}

/* ============= Cards interactives : feedback visuel touch ============= */
@media (hover: none) {
  .card-hover:active,
  [class*="hover:shadow"]:active,
  [class*="hover:-translate"]:active {
    transition: transform .1s ease;
    transform: scale(.98);
  }
}