/* =============================================================
 *  TROPICAL URBAN — RESPONSIVE PREMIUM LAYER
 *  Couche additive non-destructive : ne modifie QUE le mobile/tablette.
 *  Chargée EN DERNIER pour gagner la cascade sur les ajustements ciblés.
 *  Respecte strictement la palette et les variables existantes
 *  (:root définit déjà --primary-color, --secondary-color, etc.).
 *  ZÉRO régression desktop (>= 1025px n'est jamais ciblé en override).
 * =============================================================
 *  Breakpoints :
 *    <= 1200px  — large laptop  (tweaks densité)
 *    <= 1024px  — tablette paysage / petit laptop
 *    <=  992px  — tablette portrait
 *    <=  768px  — grande mobile / tablette étroite
 *    <=  640px  — mobile standard
 *    <=  480px  — mobile compact
 *    <=  380px  — mobile iPhone SE / Galaxy S8
 *  Utilitaires : .tu-hide-sm, .tu-show-sm (safe, préfixe unique).
 * ============================================================= */

/* ------------------------------------------------------------------
 *  0. TOKENS MOBILES ADDITIFS (espacements fluides, touch targets)
 *     Utilisés uniquement par cette feuille — n'altère pas :root.
 * ------------------------------------------------------------------ */
:root {
  --tu-touch: 44px;                 /* zone tactile minimum (Apple HIG) */
  --tu-touch-lg: 48px;              /* pour CTA principaux */
  --tu-radius-mobile: 14px;
  --tu-shadow-mobile: 0 8px 24px rgba(17, 24, 39, 0.08);
  --tu-shadow-mobile-strong: 0 14px 40px rgba(17, 24, 39, 0.18);
  --tu-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tu-safe-top: env(safe-area-inset-top, 0px);
  --tu-safe-left: env(safe-area-inset-left, 0px);
  --tu-safe-right: env(safe-area-inset-right, 0px);
  --tu-gutter-mobile: clamp(14px, 4vw, 22px);
  --tu-section-gap-mobile: clamp(32px, 7vw, 56px);
}

/* ------------------------------------------------------------------
 *  1. GARDE-FOUS GLOBAUX — anti-overflow horizontal, smooth, focus
 * ------------------------------------------------------------------ */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
html {
  scroll-padding-top: 80px;  /* évite que l'ancre passe sous le header fixed */
}
body {
  -webkit-tap-highlight-color: rgba(46, 204, 113, 0.12);
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
*:focus-visible {
  outline: 2px solid var(--primary-color, #2ECC71);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------------
 *  2. TYPOGRAPHIE FLUIDE — mobile lisible sans casser le desktop
 *     Chaque h1/h2/h3 hérite d'un clamp seulement sur <= 1024px.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  h1 { font-size: clamp(1.75rem, 5.2vw, 2.6rem); line-height: 1.18; }
  h2 { font-size: clamp(1.5rem, 4.4vw, 2.1rem); line-height: 1.22; }
  h3 { font-size: clamp(1.2rem, 3.4vw, 1.55rem); line-height: 1.3; }
  p, li { line-height: 1.6; }
}
@media (max-width: 640px) {
  h1 { letter-spacing: -0.01em; }
  h2 { letter-spacing: -0.005em; }
}

/* ------------------------------------------------------------------
 *  3. CONTENEUR & PADDINGS — gutters mobiles confortables
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .container {
    padding-left: max(var(--tu-gutter-mobile), var(--tu-safe-left));
    padding-right: max(var(--tu-gutter-mobile), var(--tu-safe-right));
  }
}
@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------------
 *  4. HEADER & NAVIGATION — compact, lisible, zone tactile 44px
 *     Préserve les hooks : #burger-dropdown-btn / #burger-dropdown /
 *     .nav-links / .dropdown-content.show
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  header { padding-top: var(--tu-safe-top); }
  .navbar { padding: 0.55rem 0; }
  .nav-container { gap: 0.5rem; }
  .logo { font-size: 1.25rem; gap: 0.5rem; }
  .logo img { width: 34px; height: 34px; }
  .nav-actions { gap: 0.35rem; }
  .nav-actions > * {
    min-width: var(--tu-touch);
    min-height: var(--tu-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .navbar { padding: 0.45rem 0; }
  .logo { font-size: 1.1rem; }
  .logo img { width: 30px; height: 30px; }
}
@media (max-width: 380px) {
  .logo { font-size: 0.98rem; gap: 0.35rem; }
  .logo img { width: 26px; height: 26px; }
}

/* Menu déroulant burger — amélioration UX mobile */
@media (max-width: 640px) {
  .dropdown-content,
  .burger-dropdown {
    width: min(92vw, 340px) !important;
    max-height: calc(100vh - 80px - var(--tu-safe-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1rem + var(--tu-safe-bottom));
  }
  .dropdown-section {
    padding: 0.9rem 1.1rem !important;
  }
  .dropdown-section a,
  .dropdown-section button {
    min-height: var(--tu-touch);
    display: flex;
    align-items: center;
  }
  .burger-menu-btn {
    width: var(--tu-touch) !important;
    height: var(--tu-touch) !important;
    font-size: 1.15rem !important;
  }
}
@media (max-width: 480px) {
  .dropdown-content,
  .burger-dropdown {
    width: min(96vw, 360px) !important;
    right: 8px !important;
  }
}

/* Menu principal <ul class="nav-links"> (menu caché via déjà .nav-links sur 1024) */
@media (max-width: 1024px) {
  .nav-links {
    width: min(86vw, 320px) !important;
    padding: 1.5rem 1.25rem !important;
    padding-top: calc(1.5rem + var(--tu-safe-top));
    padding-bottom: calc(2rem + var(--tu-safe-bottom));
    gap: 0.25rem !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links li a,
  .nav-links li > * {
    display: flex;
    align-items: center;
    min-height: var(--tu-touch);
    padding: 0.5rem 0.25rem;
    font-size: 1.02rem;
  }
}

/* ------------------------------------------------------------------
 *  5. MINI-CART DRAWER — plein écran propre sur mobile
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* .mini-cart : ancre fixée (right:0), anim gérée par transform dans cart.css.
     Ne pas pousser "right:-105%" sinon le drawer reste hors écran
     quand .show bascule le transform à translate3d(0,0,0). */
  .mini-cart {
    width: 100% !important;
    max-width: 420px;
    right: 0 !important;
    top: var(--tu-safe-top, 0);
    height: 100vh !important;
    height: 100dvh !important;
    padding-bottom: var(--tu-safe-bottom);
  }
  /* .mini-cart-container (variante legacy .open) : on conserve le
     comportement original basé sur "right". */
  .mini-cart-container {
    width: 100% !important;
    max-width: 420px;
    right: -105% !important;
    top: var(--tu-safe-top, 0);
    height: 100vh !important;
    height: 100dvh !important;
    padding-bottom: var(--tu-safe-bottom);
  }
  .mini-cart-container.show,
  .mini-cart-container.active { right: 0 !important; }
  .mini-cart-header {
    padding: calc(0.9rem + var(--tu-safe-top)) 1rem 0.9rem;
  }
  .mini-cart-items {
    padding: 0.75rem 1rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .mini-cart-footer {
    padding: 1rem 1rem calc(1rem + var(--tu-safe-bottom));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
  }
  .mini-cart-footer .btn,
  .mini-cart-footer a,
  .mini-cart-footer button {
    min-height: var(--tu-touch-lg);
  }
  .close-mini-cart,
  .mini-cart-header .close,
  .mini-cart-header button {
    min-width: var(--tu-touch);
    min-height: var(--tu-touch);
  }
}

/* ------------------------------------------------------------------
 *  6. HOMEPAGE — hero, collections, lazy
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  .hero,
  .hero-section {
    padding-top: clamp(80px, 15vw, 110px);
    padding-bottom: clamp(40px, 8vw, 70px);
    min-height: auto;
  }
  .hero-title,
  .hero h1 { font-size: clamp(1.9rem, 6vw, 3rem) !important; }
  .hero-subtitle,
  .hero-description { font-size: clamp(0.95rem, 2.6vw, 1.15rem) !important; }
  .hero-buttons,
  .hero-cta {
    flex-wrap: wrap;
    gap: 0.65rem;
  }
  .hero-buttons .btn,
  .hero-cta .btn {
    min-height: var(--tu-touch-lg);
  }
  .collection-bg { height: clamp(260px, 60vw, 420px); }
  .collection-content { padding: 1.5rem 1.25rem; }
  .collection-content .collection-title { font-size: 1.5rem; }
}
@media (max-width: 640px) {
  .collections-grid,
  .categories-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .newsletter-section { padding: 3rem 1.25rem; }
  .newsletter-form { gap: 0.7rem; }
  .newsletter-form .btn,
  .newsletter-form button { min-height: var(--tu-touch-lg); }
}

/* ------------------------------------------------------------------
 *  7. CATALOGUE — grille produits
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  .products-grid,
  .products-list {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 1.1rem !important;
    padding: 1.5rem 0 !important;
  }
}
@media (max-width: 640px) {
  .products-grid,
  .products-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.85rem !important;
  }
  .product-card {
    border-radius: var(--tu-radius-mobile);
  }
  .product-image-wrapper,
  .product-card .product-image-link,
  .product-card .product-image-link img {
    aspect-ratio: 3 / 4;
    height: auto !important;
    min-height: 0 !important;
  }
  .product-image-wrapper img,
  .product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .product-info { padding: 0.7rem 0.75rem 0.9rem !important; }
  .product-name,
  .product-card h3 {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.2rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-price { font-size: 1rem !important; flex-wrap: wrap; }
  .current-price { font-weight: 700; }
  .original-price { font-size: 0.82rem; }
  .product-rating { font-size: 0.78rem; }
  .btn-add-to-cart {
    width: 100%;
    min-height: var(--tu-touch);
    font-size: 0.85rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
  }
  .product-badge {
    font-size: 0.68rem;
    padding: 0.25rem 0.5rem;
    top: 6px;
    left: 6px;
  }
  .product-wishlist,
  .wishlist-icon {
    top: 6px !important;
    right: 6px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 0.9rem !important;
  }
  /* Sections filtres / tri */
  .filters-section,
  .catalog-toolbar,
  .products-toolbar {
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.9rem 0;
  }
  .filters-section select,
  .filters-section .filter-btn,
  .filter-buttons .filter-btn {
    min-height: var(--tu-touch);
  }
}
@media (max-width: 380px) {
  .products-grid,
  .products-list {
    grid-template-columns: 1fr !important;
  }
  .product-image-wrapper,
  .product-card .product-image-link,
  .product-card .product-image-link img {
    aspect-ratio: 4 / 5;
  }
}

/* ------------------------------------------------------------------
 *  8. FICHE PRODUIT — galerie + détails + CTA sticky
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  #product-detail-content {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 20px 0 140px !important;  /* réserve la hauteur du CTA sticky */
  }
  .product-gallery {
    position: static !important;
    top: auto !important;
    max-width: 100%;
  }
  .main-image-container {
    border-radius: var(--tu-radius-mobile);
    overflow: hidden;
  }
  #main-product-image { width: 100%; height: auto; }
  .gallery-nav-btn {
    width: var(--tu-touch) !important;
    height: var(--tu-touch) !important;
  }
  .product-thumbnails {
    gap: 8px;
    padding: 4px 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-thumbnails::-webkit-scrollbar { display: none; }
  .product-thumbnails img,
  .product-thumbnails .thumbnail {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    border-radius: 10px;
  }
  .product-info h1 {
    font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
  }
  .product-badges { flex-wrap: wrap; gap: 6px; }
  .product-options .option-group { margin-bottom: 1rem; }
  .option-values {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .option-value {
    min-width: var(--tu-touch);
    min-height: var(--tu-touch);
    padding: 0.45rem 0.85rem;
  }
  .reassurance-block {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
}
@media (max-width: 640px) {
  .product-tabs-section { padding: 0 !important; }
  .tabs-header,
  .tabs-header-with-badges {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .tabs-header::-webkit-scrollbar { display: none; }
  .tab-button {
    padding: 0.7rem 1rem !important;
    font-size: 0.95rem !important;
  }
}

/* CTA sticky mobile pour fiche produit — purement visuel, aucune dépendance JS.
   S'affiche uniquement si un .add-to-cart-btn est présent. */
@media (max-width: 768px) {
  body.product-detail-page .add-to-cart-btn,
  .product-actions .add-to-cart-btn {
    min-height: var(--tu-touch-lg);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
  }
  .product-actions {
    flex-wrap: wrap;
    gap: 0.6rem !important;
  }
  .quantity-control {
    width: 100%;
    justify-content: space-between;
    min-height: var(--tu-touch);
  }
  .quantity-control button {
    min-width: var(--tu-touch);
    min-height: var(--tu-touch);
  }
  .wishlist-btn,
  .wishlist-btn-detail {
    min-height: var(--tu-touch);
  }
}

/* ------------------------------------------------------------------
 *  9. PANIER (cart.html / cart-page.css)
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  .cart-content {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .cart-sidebar,
  .cart-summary {
    position: static !important;
    width: 100% !important;
    margin-top: 0.5rem;
  }
  .cart-summary {
    border-radius: var(--tu-radius-mobile);
    box-shadow: var(--tu-shadow-mobile);
  }
  .trust-badges-top,
  .cart-trust-badges {
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .cart-header {
    text-align: left;
    padding: 1rem 0 0.5rem;
  }
  .cart-items-wrapper {
    gap: 0.85rem !important;
  }
  .cart-item {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    grid-template-areas:
      "image details"
      "image price"
      "qty   total"
      "actions actions" !important;
    gap: 0.5rem 0.85rem !important;
    padding: 0.9rem !important;
    border-radius: var(--tu-radius-mobile);
    background: var(--white);
    box-shadow: var(--tu-shadow-mobile);
  }
  body.dark-mode .cart-item { background: var(--bg-card); }
  .cart-item-image { grid-area: image; }
  .cart-item-image img {
    width: 72px; height: 72px;
    border-radius: 10px;
    object-fit: cover;
  }
  .cart-item-details { grid-area: details; min-width: 0; }
  .cart-item-details h3,
  .cart-item-details h4 {
    font-size: 0.98rem !important;
    line-height: 1.25;
    margin: 0 0 0.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cart-item-price { grid-area: price; font-weight: 600; }
  .cart-item-quantity { grid-area: qty; justify-self: start; }
  .cart-item-total { grid-area: total; justify-self: end; font-weight: 700; }
  .cart-item-remove {
    grid-area: actions;
    justify-self: end;
    min-height: 36px;
    padding: 0 0.75rem;
  }
  /* Résumé */
  .cart-summary { padding: 1rem 1.1rem !important; }
  .summary-row { font-size: 0.95rem; padding: 0.5rem 0; }
  .summary-row.total { font-size: 1.1rem; }
  .cart-summary .btn,
  .cart-summary a,
  .cart-summary button { min-height: var(--tu-touch-lg); }
}

/* ------------------------------------------------------------------
 * 10. CHECKOUT / PAIEMENT
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  .checkout-content,
  .checkout-grid,
  .payment-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .checkout-summary,
  .order-summary-panel {
    position: static !important;
    order: 2;
  }
  .checkout-form,
  .shipping-form,
  .billing-form { order: 1; }
  .checkout-progress,
  .progress-steps {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.6rem 0;
    gap: 0.6rem;
    scrollbar-width: none;
  }
  .checkout-progress::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .form-row,
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
  }
  .checkout-form h2,
  .checkout-form h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }
  .order-item {
    gap: 0.6rem;
  }
  .order-item img {
    width: 56px !important; height: 56px !important;
    border-radius: 8px;
    object-fit: cover;
  }
  .checkout-summary h3 { font-size: 1.1rem; }
  .checkout-form .btn-primary,
  .checkout-summary .btn-primary {
    min-height: var(--tu-touch-lg);
    font-size: 1rem;
  }
  /* Pay button sticky mobile — facultatif, non-intrusif */
  .checkout-page .pay-sticky,
  .checkout-page .sticky-pay {
    position: sticky;
    bottom: var(--tu-safe-bottom);
    background: var(--white);
    padding: 0.75rem 0;
    z-index: 5;
  }
}

/* ------------------------------------------------------------------
 * 11. AUTH (login / signup / reset / set-new / 2FA)
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  .auth-container,
  .login-container,
  .signup-container {
    padding: clamp(1rem, 4vw, 2rem) !important;
    min-height: calc(100vh - 70px);
    align-items: flex-start !important;
    padding-top: calc(90px + var(--tu-safe-top)) !important;
  }
  .auth-card,
  .login-card,
  .signup-card {
    width: 100% !important;
    max-width: 520px;
    padding: clamp(1.5rem, 4vw, 2.5rem) !important;
    border-radius: var(--tu-radius-mobile);
  }
}
@media (max-width: 640px) {
  .auth-card,
  .login-card,
  .signup-card {
    padding: 1.35rem 1.15rem !important;
    box-shadow: var(--tu-shadow-mobile);
  }
  .auth-card h1,
  .auth-card h2 {
    font-size: 1.45rem !important;
    margin-bottom: 0.5rem;
  }
  .social-login {
    flex-direction: column;
    gap: 0.6rem;
  }
  .social-btn {
    width: 100%;
    min-height: var(--tu-touch-lg);
  }
  .form-checkbox-group { align-items: flex-start; }
  .checkbox-label { line-height: 1.4; font-size: 0.9rem; }
  .password-input-wrapper { position: relative; }
  .toggle-password {
    min-width: var(--tu-touch);
    min-height: var(--tu-touch);
  }
  .auth-switch,
  .auth-divider { font-size: 0.9rem; }
}

/* Verify 2FA — boxes d'input code */
@media (max-width: 640px) {
  .code-inputs,
  .otp-inputs,
  .twofa-code-container {
    gap: 0.4rem !important;
    justify-content: center;
  }
  .code-inputs input,
  .otp-inputs input,
  .twofa-code-container input {
    width: clamp(36px, 11vw, 48px) !important;
    height: clamp(44px, 13vw, 56px) !important;
    font-size: 1.25rem !important;
    border-radius: 10px;
  }
}

/* ------------------------------------------------------------------
 * 12. ACCOUNT — sidebar → tabs scrollables, cartes mobiles
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  .account-wrapper,
  .account-container,
  .account-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .account-sidebar {
    position: static !important;
    top: auto !important;
    height: auto !important;
  }
  .sidebar-menu,
  .account-sidebar ul,
  .account-tabs-nav {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem;
    padding: 0.35rem 0;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .sidebar-menu::-webkit-scrollbar { display: none; }
  .sidebar-link,
  .account-sidebar ul li a,
  .account-tabs-nav a {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 0.6rem 1rem !important;
    border-radius: 999px !important;
    min-height: var(--tu-touch);
    display: inline-flex;
    align-items: center;
    font-size: 0.92rem;
  }
  .sidebar-link.active,
  .account-sidebar ul li a.active,
  .account-tabs-nav a.active {
    background: var(--primary-color, #2ECC71);
    color: #fff;
  }
}
@media (max-width: 640px) {
  .account-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem 0 0.5rem;
  }
  .account-content {
    padding: 0 !important;
  }
  .account-tab,
  .account-section {
    padding: 1rem 0 !important;
  }
  /* Cartes de commande */
  .order-card,
  .order-item-card {
    padding: 1rem !important;
    border-radius: var(--tu-radius-mobile);
  }
  .order-card-header,
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  /* Wishlist */
  .wishlist-grid,
  .favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.8rem;
  }
  /* Adresses */
  .addresses-grid,
  .address-cards {
    grid-template-columns: 1fr !important;
    gap: 0.8rem;
  }
  /* Stats dashboard */
  .stats-grid,
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem;
  }
  .stat-card { padding: 0.9rem !important; }
}
@media (max-width: 380px) {
  .wishlist-grid,
  .favorites-grid { grid-template-columns: 1fr !important; }
  .stats-grid,
  .dashboard-stats { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
 * 13. FORMULAIRES — 16px font-size pour éviter le zoom iOS, labels clairs
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  input, select, textarea {
    font-size: 16px !important;   /* anti-zoom Safari iOS */
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  select, textarea {
    min-height: var(--tu-touch);
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    width: 100%;
  }
  textarea { min-height: 110px; }
  label { display: block; margin-bottom: 0.3rem; font-weight: 600; }
  .form-group { margin-bottom: 0.9rem; }
  .form-error,
  .field-error {
    font-size: 0.82rem;
    margin-top: 0.3rem;
    display: block;
  }
  button,
  .btn,
  input[type="submit"],
  input[type="button"] {
    min-height: var(--tu-touch);
    padding: 0.7rem 1.1rem;
  }
  .btn-block,
  .btn-primary.btn-block {
    width: 100%;
    min-height: var(--tu-touch-lg);
  }
}

/* ------------------------------------------------------------------
 * 14. MODALES / POPUPS / OVERLAYS / TOASTS — confort + scroll interne
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  .modal,
  .popup-overlay,
  .popup-backdrop,
  .dialog-overlay {
    padding: clamp(0.75rem, 3vw, 1.25rem);
    align-items: center;
  }
  .modal-content,
  .popup-content,
  .dialog-content,
  .modal .content,
  .modal-body-wrapper {
    width: 100% !important;
    max-width: 560px !important;
    max-height: calc(100dvh - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: var(--tu-radius-mobile);
    padding: clamp(1rem, 3vw, 1.75rem);
  }
  .modal-header,
  .popup-header {
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 2;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  body.dark-mode .modal-header,
  body.dark-mode .popup-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  .modal-footer,
  .popup-footer,
  .dialog-footer {
    position: sticky;
    bottom: 0;
    background: inherit;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
  }
  .modal-footer .btn,
  .popup-footer .btn,
  .dialog-footer .btn {
    flex: 1 1 160px;
    min-height: var(--tu-touch-lg);
  }
  .modal .close,
  .modal-close,
  .popup-close {
    min-width: var(--tu-touch);
    min-height: var(--tu-touch);
  }
}

/* Variante "drawer mobile" pour popups lourdes — auto si classe .modal-full-mobile */
@media (max-width: 640px) {
  .modal.modal-full-mobile .modal-content,
  .popup.popup-full-mobile .popup-content {
    max-width: 100% !important;
    max-height: calc(100dvh - var(--tu-safe-top));
    border-radius: 18px 18px 0 0;
    margin-top: auto;
    align-self: flex-end;
  }
}

/* Toasts — safe-area + largeur raisonnable */
@media (max-width: 640px) {
  .toast,
  .notification,
  .toast-container > *,
  .notification-container > * {
    max-width: calc(100vw - 2rem);
    font-size: 0.92rem;
    border-radius: 12px;
    box-shadow: var(--tu-shadow-mobile-strong);
  }
  .toast-container,
  .notification-container {
    bottom: calc(12px + var(--tu-safe-bottom)) !important;
    right: 12px !important;
    left: 12px !important;
    max-width: calc(100vw - 24px);
  }
}

/* ------------------------------------------------------------------
 * 15. FOOTER — lisibilité mobile, accordéon doux
 * ------------------------------------------------------------------ */
@media (max-width: 992px) {
  .footer {
    padding: 2.5rem 0 1.5rem !important;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }
  .footer-column h3,
  .footer-column h4 {
    font-size: 0.98rem;
    margin-bottom: 0.6rem;
  }
  .footer-column ul li a {
    display: inline-block;
    padding: 0.3rem 0;
    min-height: 34px;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    font-size: 0.85rem;
  }
}

/* ------------------------------------------------------------------
 * 16. TABLES — transforme tableaux denses en cartes empilées sur mobile
 *     Cible les tables publiques (ex : suivi commandes, récap, etc.)
 *     Déclenché via data-attribut <table data-stack-mobile> — sûr.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  table[data-stack-mobile],
  .stack-mobile-table {
    border: 0;
    width: 100%;
  }
  table[data-stack-mobile] thead,
  .stack-mobile-table thead { display: none; }
  table[data-stack-mobile] tr,
  .stack-mobile-table tr {
    display: block;
    margin-bottom: 0.8rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    background: var(--white);
    box-shadow: var(--tu-shadow-mobile);
  }
  body.dark-mode table[data-stack-mobile] tr,
  body.dark-mode .stack-mobile-table tr { background: var(--bg-card); }
  table[data-stack-mobile] td,
  .stack-mobile-table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border: 0;
    font-size: 0.92rem;
  }
  table[data-stack-mobile] td::before,
  .stack-mobile-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--gray, #7F8C8D);
  }
}

/* ------------------------------------------------------------------
 * 17. UTILITAIRES MOBILE — préfixe unique .tu-*
 * ------------------------------------------------------------------ */
.tu-hide-sm { /* rien sur desktop */ }
.tu-show-sm { display: none !important; }
@media (max-width: 640px) {
  .tu-hide-sm { display: none !important; }
  .tu-show-sm { display: block !important; }
  .tu-show-sm.inline { display: inline !important; }
  .tu-show-sm.flex  { display: flex !important; }
}

/* ------------------------------------------------------------------
 * 18. MISC — sliders/swipers, FAQ accordéons, CGV/légales
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .swiper, .carousel, [class*="-slider"] {
    overflow: hidden;
  }
  .swiper-button-prev, .swiper-button-next,
  .carousel-prev, .carousel-next {
    width: 36px !important;
    height: 36px !important;
  }
  /* FAQ / accordéons */
  .faq-item, .accordion-item {
    border-radius: 12px;
    margin-bottom: 0.6rem;
  }
  .faq-question, .accordion-header {
    padding: 0.9rem 1rem !important;
    min-height: var(--tu-touch);
    font-size: 0.98rem;
  }
  .faq-answer, .accordion-body {
    padding: 0 1rem 0.9rem !important;
    font-size: 0.92rem;
    line-height: 1.55;
  }
  /* CGV / légales / mentions — long textes lisibles */
  .legal-page, .cgv-page, .privacy-page, .mentions-page, .returns-page {
    padding: 1rem !important;
    font-size: 0.95rem;
    line-height: 1.65;
  }
  .legal-page h1, .cgv-page h1, .privacy-page h1 {
    font-size: 1.5rem !important;
  }
  .legal-page h2, .cgv-page h2, .privacy-page h2 {
    font-size: 1.15rem !important;
    margin-top: 1.25rem !important;
  }
  .legal-page h3, .cgv-page h3, .privacy-page h3 {
    font-size: 1.02rem !important;
  }
}

/* ------------------------------------------------------------------
 * 19. PRÉFÉRENCE UTILISATEUR — reduced motion, prefers-contrast
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: more) {
  *:focus-visible {
    outline-width: 3px;
    outline-color: currentColor;
  }
}

/* ------------------------------------------------------------------
 * 20. GARDE-FIN — empêcher toute image/iframe de forcer l'overflow
 *     Cas pages externes (Google Maps embed, Instagram widgets, etc.)
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  iframe, embed, object {
    max-width: 100% !important;
  }
  .embed-container,
  .iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .embed-container > iframe,
  .iframe-wrapper > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* ------------------------------------------------------------------
 * 21. AVIS MOBILE — VISIBILITÉ BULLETPROOF (v2)
 *     Cause racine identifiée v2 : sur iOS Safari < 18.2 et quelques
 *     Chrome Android anciens, `content-visibility: auto` appliqué à
 *     `.testimonials` (via premium-ux.css §2) a un bug connu :
 *     quand du contenu est INJECTÉ async dans un ENFANT d'une section
 *     déjà skippée (hors viewport à l'arrivée), l'injection ne
 *     repaint PAS correctement au scroll — la section garde sa taille
 *     intrinsèque (600px) mais reste VIDE visuellement.
 *
 *     Fix : sur mobile, on neutralise `content-visibility` ET
 *     `contain-intrinsic-size` ET `contain` avec `!important` — hors
 *     `@supports` pour qu'il s'applique même si le parser ignore la
 *     propriété. On force aussi `display: block` (respectée par la
 *     grid interne du #tu-testimonials-grid qui reste en display:grid
 *     propre).
 *
 *     Ce bloc est UNE DEFENSE EN PROFONDEUR — il couvre aussi le cas
 *     où un site-override admin panel, un cache obsolète, ou une
 *     règle tierce aurait posé display:none / visibility:hidden sur
 *     les zones d'avis.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Sections porteuses des avis — jamais cachées en mobile. */
  body .testimonials,
  body .reviews-section,
  body #reviews-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    max-height: none !important;
    /* Cœur du fix iOS Safari (v2) : neutralise l'optimisation
       content-visibility qui cause le non-repaint des avis injectés
       async. On perd un microgain LCP marginal en échange d'un rendu
       fiable — trade-off justifié sur les sections d'avis. */
    content-visibility: visible !important;
    contain-intrinsic-size: auto none !important;
    contain: none !important;
  }

  /* Conteneurs de rendu (le vrai target du fetch). */
  body #reviews-list,
  body #tu-testimonials-grid,
  body .testimonials-grid {
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    min-height: 0 !important;
    /* Ces conteneurs utilisent display: grid ou flex selon le compte
       de cartes. On NE LES FORCE PAS en block — on désactive juste
       tout masquage. Le `display` original (grid/flex) reste actif. */
  }

  /* Cartes individuelles visibles, sans animation qui les laisse
     en opacity:0 si une animation de premium-ux est arrêtée. */
  body .review-card,
  body .testimonial-card,
  body #reviews-list > .review-card,
  body #tu-testimonials-grid > .testimonial-card {
    visibility: visible !important;
    opacity: 1 !important;
    animation-play-state: running !important;
  }
}

/* Hors @media : même neutralisation pour la sous-fenêtre desktop
   étroite (ex : split-screen iPad portrait, DevTools responsive).
   On ne touche PAS le desktop plein écran. */
@media (max-width: 992px) and (min-width: 769px) {
  body .testimonials,
  body .reviews-section,
  body #reviews-section {
    content-visibility: visible;
    contain-intrinsic-size: auto none;
  }
}

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