/* =============================================================
 *  TROPICAL URBAN — PREMIUM UX LAYER (performance + fluidity)
 *  Couche 100 % ADDITIVE, chargée APRÈS responsive-premium.css.
 *  Objectif : gains de rapidité perçue, fluidité des interactions,
 *  confort mobile haut de gamme — sans toucher aux règles existantes.
 *
 *  Règles :
 *   - Aucune redéfinition de variables :root existantes.
 *   - Aucune suppression de fonctionnalité.
 *   - Desktop respecté : la majorité des tweaks mobile ≤ 992 px.
 *   - Respect strict de la DA (ombres + arrondis conservés, on les
 *     allège juste sur petits écrans où le GPU pompe).
 *   - Tous les nouveaux sélecteurs commencent par .tu-ux-* pour
 *     éviter tout conflit.
 * ============================================================= */

/* ------------------------------------------------------------------
 *  0. TOKENS — courbes d'easing premium + durées standard
 * ------------------------------------------------------------------ */
:root {
  --tu-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tu-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --tu-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tu-dur-fast: 140ms;
  --tu-dur-base: 220ms;
  --tu-dur-slow: 360ms;
}

/* ------------------------------------------------------------------
 *  1. TAP-DELAY KILLER + FEEDBACK TACTILE
 *     touch-action: manipulation supprime le délai de 300 ms sans
 *     désactiver le scroll ni le zoom pinch — UX iOS/Android plus
 *     réactive sur tous les boutons et liens interactifs.
 * ------------------------------------------------------------------ */
button,
a[role="button"],
.btn,
[type="submit"],
[type="button"],
.cart-icon,
.burger-menu-btn,
.nav-icon,
.dark-mode-btn,
.close,
.modal-close,
.popup-close,
.toggle-password,
.tab-button,
.filter-btn,
.btn-add-to-cart,
.add-to-cart-btn,
.quantity-control button,
.wishlist-btn,
.gallery-nav-btn {
  touch-action: manipulation;
}

/* Feedback au tap : léger enfoncement + retour spring — purement
   visuel, ne modifie AUCUN handler JS. Désactivé sur reduced-motion
   et sur desktop (hover-only).                                       */
@media (hover: none) and (pointer: coarse) {
  button:not(:disabled):active,
  a.btn:active,
  .btn:not(:disabled):active,
  .nav-icon:active,
  .cart-icon:active,
  .burger-menu-btn:active,
  .btn-add-to-cart:not(:disabled):active,
  .add-to-cart-btn:not(:disabled):active {
    transform: scale(0.97);
    transition: transform var(--tu-dur-fast) var(--tu-ease-spring);
  }
}

/* ------------------------------------------------------------------
 *  2. PERF — content-visibility sur les longues sections hors viewport
 *     Gain majeur sur LCP + temps de rendu initial.
 *     Sûr : le layout est recalculé à l'entrée en viewport.
 *     On cible uniquement les sections CLAIREMENT non critiques :
 *       - .testimonials (sous le hero, souvent plus bas)
 *       - .newsletter-section (footer-like)
 *       - .footer (déjà hors du premier écran)
 *     On évite le hero, la nav et tout ce qui est above-the-fold.
 * ------------------------------------------------------------------ */
@supports (content-visibility: auto) {
  .testimonials,
  .newsletter-section,
  .footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
  /* Cartes produits catalogue — contenu initialement virtualisé
     quand elles sortent du viewport (retour instantané quand on
     remonte grâce à contain-intrinsic-size).                        */
  .products-grid > .product-card,
  .products-list > .product-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
  }
}

/* ------------------------------------------------------------------
 *  3. PERF — contain sur composants isolés (layout paint style)
 *     Réduit la propagation des reflows lors des hovers/animations.
 * ------------------------------------------------------------------ */
.product-card,
.order-card,
.order-item-card,
.testimonial-card,
.cart-item,
.stat-card,
.address-card {
  contain: layout paint style;
}

/* ------------------------------------------------------------------
 *  4. PERF — ombres / filtres allégés sur mobile (GPU-friendly)
 *     Sur petit écran, les blur (box-shadow + backdrop-filter) coûtent
 *     cher. On divise le blur radius pour conserver la sensation
 *     premium sans étrangler les GPU d'entrée de gamme.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .product-card,
  .cart-item,
  .order-card,
  .testimonial-card,
  .modal-content,
  .popup-content {
    box-shadow: var(--tu-shadow-mobile, 0 6px 18px rgba(17, 24, 39, 0.08));
  }
  /* Limite l'agressivité des backdrop-filter (glass) sur mobile */
  [style*="backdrop-filter"],
  .glass-card,
  .glass,
  .mini-cart-header,
  .mini-cart-footer {
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
  }
}
@media (max-width: 480px) {
  /* Encore plus léger sur très petits écrans */
  [style*="backdrop-filter"],
  .glass-card,
  .glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ------------------------------------------------------------------
 *  5. FLUIDITÉ — anim d'entrée modale/popup, cohérente et courte
 *     N'écrase PAS les anims existantes : on vise uniquement les
 *     modales sans classe d'animation custom (defensive CSS).
 * ------------------------------------------------------------------ */
@keyframes tu-ux-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes tu-ux-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Le sélecteur .tu-ux-fade-in est ajouté par premium-ux.js à
   l'ouverture d'une modale si aucune anim native n'est détectée.    */
.tu-ux-fade-in {
  animation: tu-ux-modal-in var(--tu-dur-base) var(--tu-ease-out) both;
}
.tu-ux-backdrop-fade-in {
  animation: tu-ux-backdrop-in var(--tu-dur-base) var(--tu-ease-out) both;
}

/* ------------------------------------------------------------------
 *  6. FLUIDITÉ — scroll-lock quand une modale est ouverte
 *     Classe .tu-ux-scroll-locked appliquée au <body> par premium-ux.js
 *     Empêche le "scroll bleed" iOS derrière la popup.
 * ------------------------------------------------------------------ */
body.tu-ux-scroll-locked {
  overflow: hidden !important;
  /* touch-action: none était la cause racine de "taps bloqués" sur
     iPhone 12 Safari : cette valeur désactive TOUS les gestes
     (scroll/pan/pinch/swipe-back) sur body, y compris le swipe-back
     de navigation iOS et le premier touchmove sur les modales
     enfants (qui sont fixed, donc rattachées à leur propre touch-
     action, mais iOS hésite au moment du hit-test si body est en
     none). On garde le lock visuel via `overflow: hidden` +
     `overscroll-behavior: contain` (empêche le rubber-band iOS
     derrière la modale) sans sacrifier la réactivité tactile.       */
  overscroll-behavior: contain;
  /* Compensation de la disparition de la scrollbar (desktop) */
  padding-right: var(--tu-ux-scrollbar-compensation, 0px);
}

/* ------------------------------------------------------------------
 *  7. FLUIDITÉ — transitions génériques plus douces
 *     On applique un transition-timing-function global à tous les
 *     éléments qui déclarent déjà une transition — on ne crée PAS
 *     de transition là où il n'y en avait pas.
 * ------------------------------------------------------------------ */
button,
a,
.btn,
.card,
.product-card,
.nav-icon,
.cart-icon,
.burger-menu-btn {
  transition-timing-function: var(--tu-ease-out);
}

/* ------------------------------------------------------------------
 *  8. FLUIDITÉ — scroll natif lissé + momentum
 * ------------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.mini-cart-items,
.modal-content,
.popup-content,
.sidebar-menu,
.account-tabs-nav,
.tabs-header,
.product-thumbnails,
.checkout-progress {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------------
 *  9. PERF — images & médias : hints mobiles + placeholder propre
 *     Aucune image n'est modifiée, on ajoute juste un fond subtil
 *     pendant le chargement (évite le clignotement blanc).
 * ------------------------------------------------------------------ */
img {
  background-color: rgba(0, 0, 0, 0.02);
}
body.dark-mode img {
  background-color: rgba(255, 255, 255, 0.03);
}
img[loading="lazy"] {
  opacity: 0;
  transition: opacity var(--tu-dur-slow) var(--tu-ease-out);
}
img[loading="lazy"].tu-ux-loaded,
img[loading="lazy"][complete] {
  opacity: 1;
}
/* Fallback : dès qu'une image est chargée on la marque.
   Géré par premium-ux.js ; ce CSS est le garde-fou visuel.          */

/* ------------------------------------------------------------------
 * 10. FLUIDITÉ — feedback visuel des liens/boutons au focus clavier
 *     (pour la sensation premium + a11y) — ne modifie PAS :focus-visible
 *     existant, juste l'affine.
 * ------------------------------------------------------------------ */
.btn:focus-visible,
.nav-icon:focus-visible,
.cart-icon:focus-visible,
.burger-menu-btn:focus-visible,
.dark-mode-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.22);
  outline-color: var(--primary-color, #2ECC71);
}

/* ------------------------------------------------------------------
 * 11. MOBILE — garde anti-overflow horizontal (ceinture + bretelles)
 *     responsive-premium.css gère déjà html/body overflow-x hidden ;
 *     on cible ici les enfants connus pour déborder sur mobile.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .container,
  main,
  section,
  header,
  footer {
    max-width: 100%;
  }
  pre, code {
    white-space: pre-wrap;
    word-break: break-word;
  }
  /* Garde image lazy : ne pas la laisser grandir au-delà de la carte */
  .product-card img,
  .cart-item-image img,
  .order-item img {
    max-width: 100%;
    height: auto;
  }
}

/* ------------------------------------------------------------------
 * 12. SKELETON LOADERS — placeholders premium pour états d'attente
 *     Utilisables (optionnellement) par les scripts existants via
 *     .tu-ux-skeleton / .tu-ux-skeleton-line / .tu-ux-skeleton-card
 * ------------------------------------------------------------------ */
.tu-ux-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 100%);
  background-size: 200% 100%;
  animation: tu-ux-shimmer 1.4s linear infinite;
  border-radius: 10px;
}
body.dark-mode .tu-ux-skeleton {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.05) 100%);
  background-size: 200% 100%;
}
.tu-ux-skeleton-line {
  height: 12px;
  border-radius: 6px;
  margin: 6px 0;
}
.tu-ux-skeleton-card {
  height: 280px;
  border-radius: var(--tu-radius-mobile, 14px);
}
@keyframes tu-ux-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tu-ux-skeleton { animation: none; }
}

/* ------------------------------------------------------------------
 * 13. BOUTONS PRIMAIRES — feedback hover/press plus clean
 *     Affine uniquement la micro-interaction ; ne modifie pas la
 *     couleur ni la taille.
 * ------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:not(:disabled):hover,
  .btn-add-to-cart:not(:disabled):hover,
  .add-to-cart-btn:not(:disabled):hover {
    transform: translateY(-1px);
    transition: transform var(--tu-dur-fast) var(--tu-ease-out),
                box-shadow var(--tu-dur-fast) var(--tu-ease-out);
  }
  .btn-primary:not(:disabled):active,
  .btn-add-to-cart:not(:disabled):active,
  .add-to-cart-btn:not(:disabled):active {
    transform: translateY(0) scale(0.985);
  }
}

/* ------------------------------------------------------------------
 * 14. CART / CHECKOUT — progress bar fluide, stickiness safe
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  .checkout-progress .step,
  .progress-steps .step {
    transition: background-color var(--tu-dur-base) var(--tu-ease-out),
                color var(--tu-dur-base) var(--tu-ease-out),
                transform var(--tu-dur-base) var(--tu-ease-out);
  }
}

/* Sticky "Passer au paiement" sur mobile — purement visuel,
   s'active seulement si la classe est déjà posée par le HTML ou
   par l'app. Ne crée pas de nouvel élément.                          */
@media (max-width: 640px) {
  .cart-sticky-checkout,
  .mobile-sticky-checkout {
    position: sticky;
    bottom: 0;
    padding: 0.75rem 1rem calc(0.75rem + var(--tu-safe-bottom, 0px));
    background: var(--white, #fff);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
    z-index: 10;
  }
  body.dark-mode .cart-sticky-checkout,
  body.dark-mode .mobile-sticky-checkout {
    background: var(--bg-card, #1a1d24);
  }
}

/* ------------------------------------------------------------------
 * 15. HERO — LCP-friendly : supprime animations coûteuses si l'utilisateur
 *     a demandé reduced-motion, ou si le device signale save-data.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-data: reduce) {
  canvas.hero-canvas,
  canvas#network-canvas,
  canvas#networkCanvas,
  canvas[data-animation] {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
 * 16. SEARCH / FORM INPUTS — plus agréables au focus
 * ------------------------------------------------------------------ */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18);
  border-color: var(--primary-color, #2ECC71);
}

/* ------------------------------------------------------------------
 * 17. LINKS HOVER — underline propre, non violent
 * ------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .footer a:not(.btn):hover,
  .sidebar-link:hover,
  .nav-links a:not(.btn):hover {
    text-decoration-thickness: 2px;
  }
}

/* ------------------------------------------------------------------
 * 18. DRAWERS — entrée plus smooth
 *    Note : ".mini-cart" est VOLONTAIREMENT exclue ici. Son animation
 *    est gérée en GPU par css/cart.css (transform: translate3d) avec
 *    son propre will-change conditionné à .show. Déclarer une transition
 *    supplémentaire ici créerait un conflit (double transition,
 *    durées différentes) → c'était la cause de saccades à l'ouverture.
 * ------------------------------------------------------------------ */
.mini-cart-container,
.side-drawer,
.drawer {
  transition: transform var(--tu-dur-base) var(--tu-ease-out),
              right var(--tu-dur-base) var(--tu-ease-out),
              left var(--tu-dur-base) var(--tu-ease-out),
              opacity var(--tu-dur-base) var(--tu-ease-out);
  will-change: transform;
}

/* ------------------------------------------------------------------
 * 19. PRODUCT GALLERY — thumbs scroll momentum
 * ------------------------------------------------------------------ */
.product-thumbnails {
  scroll-snap-type: x proximity;
}
.product-thumbnails > * {
  scroll-snap-align: start;
}

/* ------------------------------------------------------------------
 * 20. FINAL GUARD — image dimensions hint pour layout shift minimum
 * ------------------------------------------------------------------ */
img[data-lcp],
.hero-image img,
.hero img {
  /* Laisse le navigateur réserver la place si width/height attr */
  aspect-ratio: attr(width) / attr(height);
}

/* ------------------------------------------------------------------
 * 21. ANTI-GHOST OVERLAYS — cause racine de "le site capte mes taps
 *     sans rien faire" : un overlay fixed plein écran laissé
 *     visible: hidden / opacity: 0 MAIS sans pointer-events: none
 *     intercepte les touches et les bloque silencieusement.
 *
 *     On force pointer-events: none sur tout élément reconnu comme
 *     overlay de modal (quelle que soit son implémentation)
 *     TANT QU'il n'a PAS de classe d'ouverture explicite. C'est
 *     une ceinture de sécurité : même si un script oublie de
 *     remove() un overlay fermé, il ne bloquera plus l'UI.
 * ------------------------------------------------------------------ */
.mini-cart-overlay:not(.show),
.popup-overlay:not(.show):not(.active):not(.open),
.dialog-overlay:not(.show):not(.active):not(.open),
.welcome-blur-overlay:not(.show),
#paymentFailedOverlay:not(.show):not(.active) {
  pointer-events: none !important;
}
/* Quand ouvert, on rétablit pour capter les clics backdrop de fermeture. */
.mini-cart-overlay.show,
.popup-overlay.show, .popup-overlay.active, .popup-overlay.open,
.dialog-overlay.show, .dialog-overlay.active, .dialog-overlay.open,
.welcome-blur-overlay.show,
#paymentFailedOverlay.show, #paymentFailedOverlay.active {
  pointer-events: auto;
}

/* ------------------------------------------------------------------
 * 22. MOBILE — neutralisation des hover coûteux sur pointer coarse
 *     Les règles `:hover { transform: ... }` continuent de
 *     s'appliquer au TAP sur iOS (Safari interprète le premier tap
 *     comme hover) et laissent des transitions pendantes qui
 *     donnent l'impression que le site "lag". On les désactive sur
 *     pointer coarse — ces appareils ne devraient jamais voir
 *     d'effet hover de toute façon.
 * ------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  /* Hover effects légitimes → gardés quand ils utilisent @media (hover: hover).
     Ici on cible juste les hover globaux non gatés qui produisent des
     transforms lourds sur mobile (box-shadow + translateY = repaint). */
  .product-card:hover,
  .testimonial-card:hover,
  .review-card:hover,
  .cart-item:hover,
  .mini-cart-item:hover,
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .nav-icon:hover,
  .cart-icon:hover {
    transform: none !important;
    box-shadow: inherit;
  }
}

/* ------------------------------------------------------------------
 * 23. TOUCH-ACTION — site-wide rules pour scroll tactile propre
 *     Complément à la règle existante section 1 (buttons).
 *     - html/body : pan-y default (scroll vertical naturel).
 *     - Conteneurs scrollables horizontaux (product thumbnails,
 *       tabs, onglets) : pan-x pour que le scroll X soit
 *       reconnu instantanément sans que iOS perde 200 ms à
 *       déterminer la direction dominante.
 * ------------------------------------------------------------------ */
.product-thumbnails,
.tabs-header,
.account-tabs-nav,
.checkout-progress {
  touch-action: pan-x;
}

/* =============== FIN premium-ux.css =============== */