/**
 * ============================================================
 * SHOP MOBILE REFONTE CSS - EXPERT E-COMMERCE v2.0.0
 * Forever Be WP Premium Theme
 * ============================================================
 *
 * Expert: Marc DURAND - E-commerce Mobile UX Specialist
 * 15 ans d'experience - Conversion Rate Optimization
 *
 * Standards E-commerce Professionnels Implementes:
 * ------------------------------------------------
 * 1. Mobile-First UX (Google Mobile-First Index)
 * 2. Touch-Friendly Targets (minimum 44x44px - Apple HIG)
 * 3. Thumb Zone Optimization (Steven Hoober Research)
 * 4. Conversion-Centered Design (CXL Institute)
 * 5. F-Pattern & Z-Pattern Layout (Nielsen Norman Group)
 * 6. Micro-interactions (Anticipatory Design)
 * 7. Progressive Disclosure (Information Architecture)
 * 8. Trust Signals Integration (Baymard Institute)
 * 9. One-Tap Commerce (Amazon Best Practice)
 * 10. WCAG 2.1 AA Accessibility
 *
 * Performance Metrics Target:
 * - FCP < 1.8s (First Contentful Paint)
 * - LCP < 2.5s (Largest Contentful Paint)
 * - CLS < 0.1 (Cumulative Layout Shift)
 * - FID < 100ms (First Input Delay)
 *
 * Objectif Principal: Simplifier l'acces aux produits
 * - Cartes produits epurees (image + description + prix + bouton Commander)
 * - Masquer hero banner et filtres non essentiels
 * - Redirection rapide vers FLP via WooAffiliation
 * - Popup de capture lead avant redirection
 *
 * ATTENTION: Ce fichier concerne UNIQUEMENT le format mobile (< 768px)
 * Ne pas modifier le desktop/tablette
 * ============================================================
 */

/* ========================================================================
   1. VARIABLES MOBILE BOUTIQUE
   ======================================================================== */

:root {
  /* ===== PALETTE MARQUE (Forever Living) ===== */
  --shop-mobile-brand-primary: #1e5a3e;
  --shop-mobile-brand-secondary: #2d8659;
  --shop-mobile-brand-accent: #fbbf24;
  --shop-mobile-brand-gold: #f59e0b;

  /* ===== COULEURS SYSTEME ===== */
  --shop-mobile-bg: #ffffff;
  --shop-mobile-bg-secondary: #f9fafb;
  --shop-mobile-card-bg: #ffffff;
  --shop-mobile-border: #e5e7eb;
  --shop-mobile-border-light: #f3f4f6;

  /* ===== TYPOGRAPHIE ===== */
  --shop-mobile-text: #1f2937;
  --shop-mobile-text-muted: #6b7280;
  --shop-mobile-text-light: #9ca3af;
  --shop-mobile-price: #1e5a3e;
  --shop-mobile-price-old: #9ca3af;

  /* ===== BOUTONS CTA ===== */
  --shop-mobile-btn-bg: #1e5a3e;
  --shop-mobile-btn-hover: #164430;
  --shop-mobile-btn-active: #0f3624;
  --shop-mobile-btn-text: #ffffff;
  --shop-mobile-btn-shadow: 0 4px 14px rgba(30, 90, 62, 0.35);

  /* ===== COULEURS STATUS ===== */
  --shop-mobile-success: #10b981;
  --shop-mobile-warning: #f59e0b;
  --shop-mobile-error: #ef4444;
  --shop-mobile-info: #3b82f6;
  --shop-mobile-stock-low: #f97316;

  /* ===== ESPACEMENTS (8px Base Grid) ===== */
  --shop-mobile-gap-xs: 4px;
  --shop-mobile-gap-sm: 8px;
  --shop-mobile-gap: 12px;
  --shop-mobile-gap-md: 16px;
  --shop-mobile-gap-lg: 24px;
  --shop-mobile-padding: 12px;
  --shop-mobile-card-radius: 12px;
  --shop-mobile-btn-radius: 8px;

  /* ===== TAILLES TOUCH-FRIENDLY (Apple HIG) ===== */
  --shop-mobile-btn-height: 48px;
  --shop-mobile-touch-target: 44px;
  --shop-mobile-input-height: 48px;

  /* ===== TRANSITIONS (60fps) ===== */
  --shop-mobile-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --shop-mobile-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --shop-mobile-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== OMBRES (Elevation System) ===== */
  --shop-mobile-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shop-mobile-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shop-mobile-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shop-mobile-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shop-mobile-shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.12);

  /* ===== Z-INDEX SCALE ===== */
  --shop-mobile-z-card: 1;
  --shop-mobile-z-sticky: 100;
  --shop-mobile-z-header: 200;
  --shop-mobile-z-overlay: 500;
  --shop-mobile-z-popup: 1000;
  --shop-mobile-z-toast: 1100;
}

/* ========================================================================
   2. MASQUAGE DES ELEMENTS NON ESSENTIELS SUR MOBILE
   ======================================================================== */

@media (max-width: 767px) {

  /* ===== MASQUER LE HERO BANNER COMPLET ===== */
  /* Inclut: banniere commandes, titre categorie, description, trust badges */
  /* Specificite renforcee avec body et html pour surcharger shop-premium.css */
  body .shop-hero-premium,
  body .shop-hero-content,
  body .shop-hero-title,
  body .shop-hero-subtitle,
  body section.shop-hero-premium,
  body .social-proof-banner,
  body .trust-badges-hero,
  body .trust-badge-mini,
  body .pulse-dot,
  html body .shop-hero-premium,
  html body section.shop-hero-premium,
  .shop-page-premium .shop-hero-premium,
  .shop-page-premium .shop-hero-content,
  .shop-page-premium .social-proof-banner,
  .shop-page-premium .trust-badges-hero {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ===== MASQUER LES BREADCRUMBS ===== */
  body .breadcrumbs-premium,
  body .breadcrumb-list,
  .shop-page-premium .breadcrumbs-premium {
    display: none !important;
  }

  /* ===== MASQUER LE SLIDER DE CATEGORIE ===== */
  body .category-slider-section,
  body .category-slider-wrapper,
  body .slider-header,
  .shop-page-premium .category-slider-section {
    display: none !important;
  }

  /* ===== MASQUER LES FILTRES RAPIDES HORIZONTAUX ===== */
  /* Menu horizontal des categories produits a gauche */
  body .quick-filter-tags,
  body .quick-filter-tag,
  body .category-pills,
  body .category-tabs,
  body .filter-pills,
  body .horizontal-filters,
  .shop-page-premium .quick-filter-tags,
  .shop-main-content .quick-filter-tags {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* ===== MASQUER LA SIDEBAR FILTRES ===== */
  body .shop-sidebar,
  body aside.shop-sidebar,
  body #shop-sidebar,
  body .filter-drawer-overlay,
  body .mobile-filter-trigger,
  body .mobile-filter-toggle,
  body #mobile-filter-toggle,
  .shop-page-premium .shop-sidebar,
  .shop-container .shop-sidebar,
  html body .shop-sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
  }

  /* ===== MASQUER LES ACTIVE FILTERS BAR ===== */
  body .active-filters-bar,
  body .active-filters-display,
  body .filter-section,
  body .filter-header,
  body .filter-options,
  .shop-page-premium .active-filters-bar {
    display: none !important;
  }

  /* ===== MASQUER LA TOOLBAR DESKTOP COMPLETE ===== */
  body .toolbar-premium,
  body .shop-toolbar,
  body .toolbar-left,
  body .toolbar-right,
  body .results-info,
  body .results-count,
  body .view-toggle,
  body .view-toggle-btn,
  body .search-toggle-container,
  body .search-expandable,
  body .search-form-toolbar,
  body .search-input-toolbar,
  body .search-submit-toolbar,
  body .search-circle-btn,
  body #search-toggle-btn,
  body #search-expandable,
  body .toolbar-select,
  .shop-page-premium .shop-toolbar,
  .shop-main-content .shop-toolbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ===== MASQUER LES ELEMENTS NON ESSENTIELS DES CARTES ===== */
  body .product-card-premium .product-category,
  body .product-card-premium .product-rating-stars,
  body .product-card-premium .product-features-mini,
  body .product-card-premium .price-promo-info,
  body .product-card-premium .product-quick-actions,
  body .product-card-premium .quick-action-btn,
  .products-grid .product-card-premium .product-category,
  .products-grid .product-card-premium .product-rating-stars,
  .products-grid .product-card-premium .product-features-mini {
    display: none !important;
  }
}

/* ========================================================================
   3. LAYOUT BOUTIQUE MOBILE
   ======================================================================== */

@media (max-width: 767px) {

  /* Container principal - Full width - Specificite renforcee */
  body .shop-container,
  html body .shop-container,
  .shop-page-premium .shop-container {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: var(--shop-mobile-padding) !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Zone produits - Full width */
  body .shop-products-grid,
  body .shop-products,
  body .shop-main-content,
  .shop-page-premium .shop-main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Header simple mobile */
  .shop-mobile-header {
    padding: var(--shop-mobile-padding);
    background: var(--shop-mobile-bg);
    border-bottom: 1px solid var(--shop-mobile-border);
    margin-bottom: var(--shop-mobile-gap);
  }

  .shop-mobile-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--shop-mobile-price);
    margin: 0;
    text-align: center;
  }

  .shop-mobile-count {
    font-size: 0.875rem;
    color: var(--shop-mobile-text-muted);
    text-align: center;
    margin-top: 4px;
  }
}

/* ========================================================================
   4. GRILLE PRODUITS MOBILE - 2 COLONNES COMPACTES
   Specificite renforcee pour surcharger shop-premium.css
   ======================================================================== */

@media (max-width: 767px) {

  /* Grille 2 colonnes - Specificite maximale */
  body .products-grid,
  html body .products-grid,
  .shop-page-premium .products-grid,
  .shop-main-content .products-grid,
  body .shop-main-content .products-grid,
  html body .shop-main-content .products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--shop-mobile-gap) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Desactiver la vue liste sur mobile */
  body .products-grid.list-view,
  html body .products-grid.list-view,
  .shop-page-premium .products-grid.list-view {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body .products-grid.list-view .product-card-premium,
  html body .products-grid.list-view .product-card-premium {
    flex-direction: column !important;
  }
}

/* ========================================================================
   5. CARTES PRODUITS SIMPLIFIEES MOBILE
   Specificite renforcee pour surcharger shop-premium.css
   ======================================================================== */

@media (max-width: 767px) {

  /* Carte produit - Design epure - Specificite maximale */
  body .product-card-premium,
  html body .product-card-premium,
  .shop-page-premium .product-card-premium,
  .products-grid .product-card-premium,
  body .products-grid .product-card-premium,
  html body .products-grid .product-card-premium,
  .shop-main-content .products-grid .product-card-premium {
    display: flex !important;
    flex-direction: column !important;
    background: var(--shop-mobile-card-bg) !important;
    border-radius: var(--shop-mobile-card-radius) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid var(--shop-mobile-border) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }

  body .product-card-premium:active,
  html body .product-card-premium:active {
    transform: scale(0.98) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }

  /* ===== IMAGE PRODUIT - Specificite renforcee ===== */
  body .product-card-premium .product-image-container,
  html body .product-card-premium .product-image-container,
  .products-grid .product-card-premium .product-image-container {
    position: relative !important;
    width: 100% !important;
    padding-top: 100% !important; /* Ratio 1:1 */
    overflow: hidden !important;
    background: #f9fafb !important;
    height: auto !important;
  }

  body .product-card-premium .product-image-container img.product-image,
  body .product-card-premium .product-image-container img,
  html body .product-card-premium .product-image-container img,
  .products-grid .product-card-premium .product-image-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Badge - Simple et discret - Specificite renforcee */
  body .product-card-premium .product-badges,
  html body .product-card-premium .product-badges,
  .products-grid .product-card-premium .product-badges {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 2 !important;
  }

  body .product-card-premium .product-badge,
  html body .product-card-premium .product-badge {
    display: inline-block !important;
    padding: 3px 8px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }

  body .product-card-premium .product-badge.badge-new,
  html body .product-card-premium .product-badge.badge-new {
    background: var(--shop-mobile-gold) !important;
    color: #1e5a3e !important;
  }

  body .product-card-premium .product-badge.badge-bestseller,
  html body .product-card-premium .product-badge.badge-bestseller {
    background: #dc2626 !important;
    color: #ffffff !important;
  }

  /* ===== INFOS PRODUIT SIMPLIFIEES - Specificite renforcee ===== */
  body .product-card-premium .product-info,
  html body .product-card-premium .product-info,
  .products-grid .product-card-premium .product-info {
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex-grow: 1 !important;
  }

  /* Titre produit - Compact - Specificite renforcee */
  body .product-card-premium .product-title,
  html body .product-card-premium .product-title,
  .products-grid .product-card-premium .product-title {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--shop-mobile-text) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  body .product-card-premium .product-title a,
  html body .product-card-premium .product-title a {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* Description breve - 2 lignes max - Specificite renforcee */
  body .product-card-premium .product-description,
  html body .product-card-premium .product-description,
  .products-grid .product-card-premium .product-description {
    font-size: 0.75rem !important;
    color: var(--shop-mobile-text-muted) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* ===== FOOTER CARTE: PRIX + BOUTON - Specificite renforcee ===== */
  body .product-card-premium .product-footer,
  html body .product-card-premium .product-footer,
  .products-grid .product-card-premium .product-footer {
    padding: 10px !important;
    padding-top: 0 !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Prix - Mise en avant - Specificite renforcee */
  body .product-card-premium .price-container,
  html body .product-card-premium .price-container,
  .products-grid .product-card-premium .price-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body .product-card-premium .price-current,
  html body .product-card-premium .price-current,
  .products-grid .product-card-premium .price-current {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--shop-mobile-price) !important;
  }

  /* ===== BOUTON COMMANDER - Full Width - Specificite renforcee ===== */
  body .product-card-premium .product-cta,
  html body .product-card-premium .product-cta,
  .products-grid .product-card-premium .product-cta {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  body .product-card-premium .btn-add-cart,
  body .product-card-premium .product-promo-trigger,
  body .product-card-premium button.product-promo-trigger,
  html body .product-card-premium .btn-add-cart,
  html body .product-card-premium .product-promo-trigger,
  .products-grid .product-card-premium .btn-add-cart,
  .products-grid .product-card-premium .product-promo-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: var(--shop-mobile-btn-height) !important;
    min-height: var(--shop-mobile-btn-height) !important;
    padding: 0 16px !important;
    background: var(--shop-mobile-btn-bg) !important;
    color: var(--shop-mobile-btn-text) !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    text-transform: none !important;
    text-decoration: none !important;
  }

  body .product-card-premium .btn-add-cart:active,
  body .product-card-premium .product-promo-trigger:active,
  html body .product-card-premium .btn-add-cart:active,
  html body .product-card-premium .product-promo-trigger:active {
    background: var(--shop-mobile-btn-hover) !important;
  }

  /* Cacher le texte original du bouton - Specificite renforcee */
  body .product-card-premium .btn-add-cart,
  body .product-card-premium .product-promo-trigger,
  html body .product-card-premium .btn-add-cart,
  html body .product-card-premium .product-promo-trigger,
  .products-grid .product-card-premium .btn-add-cart,
  .products-grid .product-card-premium .product-promo-trigger {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  }

  /* Masquer tous les elements enfants du bouton (span, texte) */
  body .product-card-premium .btn-add-cart *,
  body .product-card-premium .product-promo-trigger *,
  html body .product-card-premium .btn-add-cart *,
  html body .product-card-premium .product-promo-trigger *,
  body .product-card-premium .btn-add-cart span,
  body .product-card-premium .product-promo-trigger span {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
  }

  /* Afficher uniquement "Commander" via ::before - Specificite renforcee */
  body .product-card-premium .btn-add-cart::before,
  body .product-card-premium .product-promo-trigger::before,
  html body .product-card-premium .btn-add-cart::before,
  html body .product-card-premium .product-promo-trigger::before,
  .products-grid .product-card-premium .btn-add-cart::before,
  .products-grid .product-card-premium .product-promo-trigger::before {
    content: "Commander" !important;
    font-size: 0.875rem !important;
    color: var(--shop-mobile-btn-text) !important;
    text-indent: 0 !important;
    display: flex !important;
    visibility: visible !important;
  }
}

/* ========================================================================
   6. PAGINATION MOBILE
   ======================================================================== */

@media (max-width: 767px) {

  .pagination-wrapper {
    padding: var(--shop-mobile-padding) !important;
    margin-top: var(--shop-mobile-gap) !important;
  }

  .pagination-premium {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .pagination-btn,
  .pagination-nav-btn {
    min-width: var(--shop-mobile-touch-target) !important;
    min-height: var(--shop-mobile-touch-target) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    border-radius: 8px !important;
    background: var(--shop-mobile-card-bg) !important;
    border: 1px solid var(--shop-mobile-border) !important;
    color: var(--shop-mobile-text) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .pagination-btn.active {
    background: var(--shop-mobile-btn-bg) !important;
    color: var(--shop-mobile-btn-text) !important;
    border-color: var(--shop-mobile-btn-bg) !important;
  }

  .pagination-ellipsis {
    padding: 0 4px !important;
    color: var(--shop-mobile-text-muted) !important;
  }

  /* Masquer certains boutons pagination sur mobile */
  .pagination-btn[title="Premiere page"],
  .pagination-btn[title="Derniere page"] {
    display: none !important;
  }

  .pagination-nav-btn span {
    display: none !important;
  }
}

/* ========================================================================
   7. HEADER SIMPLE BOUTIQUE MOBILE (INJECTE VIA PHP)
   ======================================================================== */

@media (max-width: 767px) {

  /* Barre de recherche simplifiee mobile */
  .shop-mobile-search {
    padding: var(--shop-mobile-padding);
    background: #f9fafb;
    border-bottom: 1px solid var(--shop-mobile-border);
  }

  .shop-mobile-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--shop-mobile-card-bg);
    border: 1px solid var(--shop-mobile-border);
    border-radius: 24px;
    padding: 8px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .shop-mobile-search-form:focus-within {
    border-color: var(--shop-mobile-price);
    box-shadow: 0 0 0 3px rgba(30, 90, 62, 0.1);
  }

  .shop-mobile-search-form input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--shop-mobile-text);
    outline: none;
    min-width: 0;
  }

  .shop-mobile-search-form input::placeholder {
    color: var(--shop-mobile-text-muted);
  }

  .shop-mobile-search-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: var(--shop-mobile-btn-bg);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .shop-mobile-search-form button svg {
    width: 18px;
    height: 18px;
    stroke: var(--shop-mobile-btn-text);
  }

  /* Categories horizontales scrollables */
  .shop-mobile-categories {
    padding: var(--shop-mobile-padding);
    padding-top: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .shop-mobile-categories::-webkit-scrollbar {
    display: none;
  }

  .shop-mobile-categories-list {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }

  .shop-mobile-category-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--shop-mobile-card-bg);
    border: 1px solid var(--shop-mobile-border);
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--shop-mobile-text);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .shop-mobile-category-btn:active,
  .shop-mobile-category-btn.active {
    background: var(--shop-mobile-btn-bg);
    color: var(--shop-mobile-btn-text);
    border-color: var(--shop-mobile-btn-bg);
  }
}

/* ========================================================================
   8. POPUP CAPTURE LEAD MOBILE
   ======================================================================== */

@media (max-width: 767px) {

  /* Styles specifiques au popup sur mobile */
  .product-promo-popup-overlay,
  .lead-capture-popup-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: flex-end !important; /* Bottom sheet style */
    justify-content: center !important;
    padding: 0 !important;
  }

  .product-promo-popup-overlay.active,
  .lead-capture-popup-overlay.active {
    display: flex !important;
  }

  .product-promo-popup,
  .lead-capture-popup {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    background: var(--shop-mobile-card-bg) !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
    animation: slideUpMobile 0.3s ease-out !important;
  }

  @keyframes slideUpMobile {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .product-promo-popup-content,
  .lead-capture-popup-content {
    padding: 20px !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 60px) !important;
  }

  /* Drag handle pour fermer */
  .popup-drag-handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 12px auto 8px;
  }

  /* Header popup */
  .popup-header-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--shop-mobile-border);
  }

  .popup-close-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Formulaire capture lead mobile */
  .lead-capture-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .lead-capture-form .form-group {
    margin-bottom: 0;
  }

  .lead-capture-form input,
  .lead-capture-form select {
    width: 100%;
    height: var(--shop-mobile-btn-height);
    padding: 0 16px;
    border: 1px solid var(--shop-mobile-border);
    border-radius: 8px;
    font-size: 1rem;
    -webkit-appearance: none;
  }

  .lead-capture-form input:focus,
  .lead-capture-form select:focus {
    outline: none;
    border-color: var(--shop-mobile-btn-bg);
    box-shadow: 0 0 0 3px rgba(30, 90, 62, 0.1);
  }

  .lead-capture-form .btn-submit {
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, var(--shop-mobile-btn-bg) 0%, #2d8659 100%);
    color: var(--shop-mobile-btn-text);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease;
  }

  .lead-capture-form .btn-submit:active {
    transform: scale(0.98);
  }

  /* Message de succes */
  .lead-capture-success {
    text-align: center;
    padding: 24px;
  }

  .lead-capture-success-icon {
    width: 64px;
    height: 64px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
  }

  .lead-capture-success-icon svg {
    width: 32px;
    height: 32px;
    stroke: #16a34a;
  }

  .lead-capture-success h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--shop-mobile-text);
    margin-bottom: 8px;
  }

  .lead-capture-success p {
    font-size: 0.9375rem;
    color: var(--shop-mobile-text-muted);
    margin-bottom: 20px;
  }

  .btn-continue-shop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    background: var(--shop-mobile-btn-bg);
    color: var(--shop-mobile-btn-text);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ========================================================================
   9. ANIMATIONS MOBILE
   ======================================================================== */

@media (max-width: 767px) {

  /* Fade in pour les cartes */
  .product-card-premium.fade-in-up {
    animation: fadeInUpMobile 0.4s ease-out forwards;
    opacity: 0;
  }

  @keyframes fadeInUpMobile {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Delai progressif pour chaque carte */
  .product-card-premium:nth-child(1) { animation-delay: 0.05s; }
  .product-card-premium:nth-child(2) { animation-delay: 0.1s; }
  .product-card-premium:nth-child(3) { animation-delay: 0.15s; }
  .product-card-premium:nth-child(4) { animation-delay: 0.2s; }
  .product-card-premium:nth-child(5) { animation-delay: 0.25s; }
  .product-card-premium:nth-child(6) { animation-delay: 0.3s; }

  /* Respect des preferences utilisateur */
  @media (prefers-reduced-motion: reduce) {
    .product-card-premium.fade-in-up,
    .product-promo-popup,
    .lead-capture-popup {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}

/* ========================================================================
   10. ACCESSIBILITE MOBILE
   ======================================================================== */

@media (max-width: 767px) {

  /* Focus visible pour navigation */
  .product-card-premium:focus-within,
  .btn-add-cart:focus,
  .product-promo-trigger:focus {
    outline: 2px solid var(--shop-mobile-gold);
    outline-offset: 2px;
  }

  /* Zone de tap agrandie */
  .product-title a {
    display: block;
    padding: 4px 0;
    margin: -4px 0;
  }

  /* Label visible pour lecteurs d'ecran */
  .sr-only-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ========================================================================
   11. DARK MODE MOBILE (SI ACTIVE)
   ======================================================================== */

@media (max-width: 767px) {

  html.dark .product-card-premium {
    background: #1e293b !important;
    border-color: #334155 !important;
  }

  html.dark .product-title,
  html.dark .product-title a {
    color: #f1f5f9 !important;
  }

  html.dark .product-description {
    color: #94a3b8 !important;
  }

  html.dark .price-current {
    color: #4ade80 !important;
  }

  html.dark .shop-mobile-search-form {
    background: #1e293b;
    border-color: #334155;
  }

  html.dark .shop-mobile-search-form input {
    color: #f1f5f9;
  }

  html.dark .shop-mobile-category-btn {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
  }
}

/* ========================================================================
   12. TRUST SIGNALS & SOCIAL PROOF (Baymard Institute)
   Standards E-commerce: Augmenter la confiance = Augmenter conversion
   ======================================================================== */

@media (max-width: 767px) {

  /* Barre de confiance sticky en bas */
  .shop-mobile-trust-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%);
    padding: 16px var(--shop-mobile-padding);
    padding-top: 32px;
    z-index: var(--shop-mobile-z-sticky);
    pointer-events: none;
  }

  .shop-mobile-trust-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    pointer-events: auto;
  }

  .trust-badge-mobile {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--shop-mobile-bg);
    border: 1px solid var(--shop-mobile-border);
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--shop-mobile-text-muted);
    white-space: nowrap;
  }

  .trust-badge-mobile svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .trust-badge-mobile.verified {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
  }

  .trust-badge-mobile.secure {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
  }

  /* Stock indicator sur carte */
  .product-stock-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    margin-top: 4px;
  }

  .product-stock-indicator.in-stock {
    color: var(--shop-mobile-success);
  }

  .product-stock-indicator.low-stock {
    color: var(--shop-mobile-stock-low);
  }

  .product-stock-indicator.out-of-stock {
    color: var(--shop-mobile-error);
  }

  .stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .stock-dot.pulse {
    animation: stockPulse 2s ease-in-out infinite;
  }

  @keyframes stockPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
  }
}

/* ========================================================================
   13. MICRO-INTERACTIONS E-COMMERCE (Anticipatory Design)
   Feedback visuel instantane pour chaque action utilisateur
   ======================================================================== */

@media (max-width: 767px) {

  /* Ripple effect sur boutons */
  .btn-add-cart,
  .product-promo-trigger {
    position: relative;
    overflow: hidden;
  }

  .btn-add-cart::after,
  .product-promo-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
  }

  .btn-add-cart:active::after,
  .product-promo-trigger:active::after {
    width: 200px;
    height: 200px;
  }

  /* Loading state bouton */
  .btn-add-cart.loading,
  .product-promo-trigger.loading {
    pointer-events: none;
    opacity: 0.7;
  }

  .btn-add-cart.loading::before,
  .product-promo-trigger.loading::before {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: buttonSpin 0.8s linear infinite;
  }

  @keyframes buttonSpin {
    to { transform: rotate(360deg); }
  }

  /* Success state bouton */
  .btn-add-cart.success::before,
  .product-promo-trigger.success::before {
    content: '✓' !important;
    font-size: 1rem !important;
  }

  /* Image hover/tap effect */
  .product-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.03) 100%);
    pointer-events: none;
    transition: opacity var(--shop-mobile-transition-fast);
  }

  .product-card-premium:active .product-image-container::after {
    background: rgba(30, 90, 62, 0.05);
  }

  /* Card selection feedback */
  .product-card-premium.selected {
    border-color: var(--shop-mobile-brand-primary) !important;
    box-shadow: 0 0 0 2px var(--shop-mobile-brand-primary) !important;
  }

  .product-card-premium.selected::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--shop-mobile-brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  .product-card-premium.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
  }
}

/* ========================================================================
   14. STICKY CTA BAR (One-Tap Commerce - Amazon Pattern)
   Acces rapide a l'action principale depuis n'importe ou
   ======================================================================== */

@media (max-width: 767px) {

  /* CTA sticky visible quand on scroll */
  .shop-mobile-sticky-cta {
    position: fixed;
    bottom: -100px;
    left: 0;
    right: 0;
    background: var(--shop-mobile-bg);
    padding: 12px var(--shop-mobile-padding);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: var(--shop-mobile-z-sticky);
    transition: bottom var(--shop-mobile-transition-base);
    border-top: 1px solid var(--shop-mobile-border-light);
  }

  .shop-mobile-sticky-cta.visible {
    bottom: 0;
  }

  .shop-mobile-sticky-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .sticky-cta-info {
    flex: 1;
    min-width: 0;
  }

  .sticky-cta-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--shop-mobile-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-cta-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--shop-mobile-price);
  }

  .sticky-cta-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 20px;
    background: var(--shop-mobile-btn-bg);
    color: var(--shop-mobile-btn-text);
    border: none;
    border-radius: var(--shop-mobile-btn-radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--shop-mobile-btn-shadow);
    transition: transform var(--shop-mobile-transition-fast);
  }

  .sticky-cta-btn:active {
    transform: scale(0.96);
  }
}

/* ========================================================================
   15. INFINITE SCROLL LOADING (UX E-commerce Modern)
   Indicateurs de chargement progressif
   ======================================================================== */

@media (max-width: 767px) {

  /* Skeleton loading cards */
  .product-card-skeleton {
    background: var(--shop-mobile-card-bg);
    border-radius: var(--shop-mobile-card-radius);
    overflow: hidden;
    border: 1px solid var(--shop-mobile-border);
  }

  .skeleton-image {
    width: 100%;
    padding-top: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
  }

  .skeleton-content {
    padding: 10px;
  }

  .skeleton-title {
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
  }

  .skeleton-price {
    height: 24px;
    width: 60%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
  }

  .skeleton-btn {
    height: 48px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 8px;
  }

  @keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  /* Load more indicator */
  .load-more-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    gap: 8px;
  }

  .load-more-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--shop-mobile-border);
    border-top-color: var(--shop-mobile-brand-primary);
    border-radius: 50%;
    animation: buttonSpin 0.8s linear infinite;
  }

  .load-more-text {
    font-size: 0.875rem;
    color: var(--shop-mobile-text-muted);
  }
}

/* ========================================================================
   16. TOAST NOTIFICATIONS (Feedback System)
   Confirmations visuelles des actions utilisateur
   ======================================================================== */

@media (max-width: 767px) {

  .shop-mobile-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: var(--shop-mobile-text);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: var(--shop-mobile-z-toast);
    transition: transform var(--shop-mobile-transition-base);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 40px);
  }

  .shop-mobile-toast.visible {
    transform: translateX(-50%) translateY(0);
  }

  .shop-mobile-toast.success {
    background: var(--shop-mobile-success);
  }

  .shop-mobile-toast.error {
    background: var(--shop-mobile-error);
  }

  .shop-mobile-toast.warning {
    background: var(--shop-mobile-warning);
    color: var(--shop-mobile-text);
  }

  .toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .toast-dismiss {
    margin-left: auto;
    padding: 4px;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
  }

  .toast-dismiss:active {
    opacity: 1;
  }
}

/* ========================================================================
   17. DELIVERY & SHIPPING INFO (Conversion Booster)
   Informations livraison visibles = Reduction abandon panier
   ======================================================================== */

@media (max-width: 767px) {

  .product-delivery-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 0.6875rem;
    color: var(--shop-mobile-success);
  }

  .product-delivery-info svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .product-delivery-info .delivery-text {
    font-weight: 500;
  }

  /* Free shipping badge */
  .free-shipping-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #fef3c7;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
  }

  .free-shipping-badge svg {
    width: 12px;
    height: 12px;
  }
}

/* ========================================================================
   18. PROMO CODE VISUAL (Incentive Design)
   Mise en valeur des codes promo pour conversion
   ======================================================================== */

@media (max-width: 767px) {

  .product-promo-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #92400e;
    margin-top: 6px;
  }

  .product-promo-hint::before {
    content: '🎁';
    font-size: 0.75rem;
  }

  .product-promo-hint .promo-text {
    flex: 1;
  }

  .product-promo-hint .promo-code {
    font-family: monospace;
    background: white;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
  }

  /* Countdown urgency */
  .product-urgency-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
    margin-top: 6px;
  }

  .product-urgency-timer svg {
    width: 14px;
    height: 14px;
    animation: urgencyPulse 1s ease-in-out infinite;
  }

  @keyframes urgencyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }
}

/* ========================================================================
   19. SAFE AREA INSETS (iPhone X+ Support)
   Support des encoches et bords arrondis
   ======================================================================== */

@media (max-width: 767px) {

  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .shop-mobile-sticky-cta {
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .shop-mobile-trust-bar {
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .product-promo-popup,
    .lead-capture-popup {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .shop-container {
      padding-bottom: calc(var(--shop-mobile-padding) + env(safe-area-inset-bottom));
    }
  }
}

/* ========================================================================
   20. HIGH CONTRAST MODE (WCAG 2.1 AAA)
   Support mode contraste eleve systeme
   ======================================================================== */

@media (max-width: 767px) and (prefers-contrast: high) {

  .product-card-premium {
    border-width: 2px !important;
    border-color: var(--shop-mobile-text) !important;
  }

  .btn-add-cart,
  .product-promo-trigger {
    border: 2px solid currentColor !important;
  }

  .product-badge {
    border: 1px solid currentColor !important;
  }

  .price-current {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* ========================================================================
   FIN DU FICHIER - SHOP MOBILE REFONTE v2.0.0
   Expert E-commerce: Marc DURAND
   Standards: Baymard Institute, Nielsen Norman, CXL Institute
   ======================================================================== */