/* ==========================================================================
   LAB ELLA - CSS MOBILE OPTIMISÉ - VERSION CORRIGÉE
   Version: 4.0.1 - CONSERVATIVE
   Description: Corrections mobiles sans casser l'existant
   Date: Août 2025
   ========================================================================== */

/* ==========================================================================
   VARIABLES GLOBALES OPTIMISÉES
   ========================================================================== */
:root {
    /* Couleurs */
    --cream: #FAF9F6;
    --dark: #333333;
    --rose: #F9E4E6;
    --gold: #E8C7A7;
    --gold-dark: #D4A774;
    --shadow: rgba(0, 0, 0, 0.05);
    --light-shadow: rgba(0, 0, 0, 0.03);
    
    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.2s ease;
    --transition-slow: all 0.5s ease;
    
    /* Bordures */
    --border-radius: 12px;
    --border-radius-small: 8px;
    --border-radius-large: 16px;
    
    /* Typographie */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'Playfair Display', Georgia, serif;
    
    /* Tailles de police responsive */
    --font-size-title: clamp(24px, 5vw, 32px);
    --font-size-subtitle: clamp(14px, 3vw, 16px);
    --font-size-body: clamp(14px, 3vw, 16px);
    --font-size-small: clamp(12px, 2.5vw, 14px);
    
    /* Espacement responsive */
    --spacing-xs: clamp(4px, 1vw, 8px);
    --spacing-sm: clamp(8px, 2vw, 12px);
    --spacing-md: clamp(12px, 3vw, 20px);
    --spacing-lg: clamp(20px, 4vw, 32px);
    --spacing-xl: clamp(32px, 6vw, 48px);
    
    /* Zones tactiles */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
}

/* ==========================================================================
   CORRECTIONS MOBILES CONSERVATRICES
   ========================================================================== */

/* Empêcher le débordement horizontal */
body {
    overflow-x: hidden;
}

/* Améliorer les carrousels sur mobile uniquement */
@media (max-width: 768px) {
    
    /* Carrousels - corrections légères */
    .lab-ella-bestsellers .carousel,
    .lab-ella-community-videos .carousel,
    .lab-ella-save-with-sets .carousel {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .lab-ella-bestsellers .carousel::-webkit-scrollbar,
    .lab-ella-community-videos .carousel::-webkit-scrollbar,
    .lab-ella-save-with-sets .carousel::-webkit-scrollbar {
        display: none;
    }
    
    /* Améliorer les éléments de carrousel */
    .lab-ella-bestsellers .product-card,
    .lab-ella-community-videos .video-item,
    .lab-ella-save-with-sets .pack-item {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
    
    /* Améliorer les boutons de navigation des carrousels */
    .carousel-prev,
    .carousel-next {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Page produit - corrections légères */
    .glow-recipe-main-section {
        padding: 15px;
        gap: 20px;
    }
    
    /* Vignettes produit - organisation horizontale */
    .glow-image-thumbnails {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    
    .glow-thumbnail {
        flex-shrink: 0;
        scroll-snap-align: start;
        min-width: 60px;
        min-height: 60px;
    }
    
    /* Boutons produit - amélioration tactile */
    .single_add_to_cart_button {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 16px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Sélecteurs de quantité */
    .quantity input[type="number"] {
        min-height: 44px;
        text-align: center;
        font-size: 16px;
    }
    
    .quantity .qty-btn,
    .quantity-btn {
        min-width: 26px !important;
        min-height: 26px !important;
        width: 26px !important;
        height: 26px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        font-size: 13px !important;
    }
    
    /* Champs de quantité sur mobile */
    .quantity-input {
        width: 40px !important;
        height: 26px !important;
        font-size: 12px !important;
        min-height: 20px !important;
    }
    
    /* Navigation mobile - amélioration légère */
    .main-navigation a,
    .elementor-nav-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 8px 12px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* ==========================================================================
       HEADER MOBILE - CORRECTIONS COMPLÈTES
       ========================================================================== */
    
    /* Supprimer l'espace entre header et hero */
    header,
    .elementor-location-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow-x: hidden !important;
    }
    
    .header-container {
        flex-wrap: nowrap !important;
        padding: 8px 0 !important;
        justify-content: space-between !important;
        align-items: center !important;
        max-width: 100% !important;
        overflow: hidden !important;
        gap: 0 !important;
    }

    /* COLLER les icônes sociales TOUT À GAUCHE */
    .social-icons {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        padding-left: 5px !important;
        min-width: 0 !important;
        width: auto !important;
        gap: 2px !important;
    }

    .social-icons a {
        margin: 0 !important;
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .social-icons a svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* CENTRER LE LOGO EN PLEIN CENTRE */
    .logo {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
    }

    .logo img {
        width: 75px !important;
        height: 25px !important;
        max-width: 100% !important;
    }

    /* COLLER les icônes de droite TOUT À DROITE */
    .header-icons {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin-right: 0 !important;
        padding-right: 5px !important;
        min-width: 0 !important;
        gap: 2px !important;
    }

    .header-icons a {
        margin: 0 !important;
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        flex-shrink: 0 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .header-icons a svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* CORRIGER le toggle menu */
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 14px !important;
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Corriger le badge du panier */
    .cart-counter {
        position: absolute;
        top: -3px;
        right: -3px;
        background-color: #000 !important;
        color: #fff !important;
        border-radius: 50%;
        padding: 2px 4px;
        font-size: 10px;
        min-width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        line-height: 1;
        font-weight: 600;
    }
    
    /* Icônes header - amélioration tactile */
    .header-actions a,
    .elementor-widget-container a {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Améliorer les liens et boutons généraux */
    a, button, input[type="submit"], input[type="button"] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Améliorer les zones de texte */
    input, textarea, select {
        font-size: 16px; /* Évite le zoom sur iOS */
    }
    
    /* Améliorer l'espacement général */
    .elementor-container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Améliorer les sections */
    .elementor-section {
        margin-bottom: 20px;
    }
    
    /* Corriger les débordements potentiels */
    .elementor-row,
    .elementor-column {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Améliorer les images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Améliorer les vidéos */
    video {
        max-width: 100%;
        height: auto;
    }
    
    /* Améliorer les tableaux */
    table {
        width: 100%;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }
    
    /* Améliorer les formulaires */
    .woocommerce-form-row {
        margin-bottom: 15px;
    }
    
    .woocommerce-form-row input {
        width: 100%;
        min-height: 44px;
        padding: 10px;
        font-size: 16px;
    }
    
    /* Améliorer les onglets produit */
    .wc-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 15px;
    }
    
    .wc-tabs li {
        flex: 1;
        min-width: 0;
    }
    
    .wc-tabs li a {
        display: block;
        padding: 10px 8px;
        text-align: center;
        font-size: 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Améliorer les avis */
    .comment-form input,
    .comment-form textarea {
        width: 100%;
        min-height: 44px;
        padding: 10px;
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    /* Améliorer les produits liés */
    .related .products,
    .upsells .products {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
    }
    
    .related .product,
    .upsells .product {
        flex-shrink: 0;
        min-width: 200px;
        scroll-snap-align: start;
    }
}

/* Optimisations pour très petits écrans */
@media (max-width: 480px) {
    .glow-recipe-main-section {
        padding: 10px;
        gap: 15px;
    }
    
    .elementor-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .wc-tabs li a {
        font-size: 12px;
        padding: 8px 4px;
    }
    
    .related .product,
    .upsells .product {
        min-width: 160px;
    }
}

/* ==========================================================================
   AMÉLIORATIONS SCROLL MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    /* Améliorer le scroll général */
    html {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Éviter les conflits de scroll dans les carrousels */
    .carousel-wrapper {
        position: relative;
        overflow: hidden;
    }
    
    .carousel {
        touch-action: auto; /* Scroll libre */
    }
    
    /* Améliorer les zones de swipe */
    .swiper-container,
    .slick-slider {
        touch-action: auto; /* Scroll libre */
    }
}

/* ==========================================================================
   CORRECTIONS SPÉCIFIQUES ELEMENTOR
   ========================================================================== */
@media (max-width: 768px) {
    /* Corriger les colonnes Elementor */
    .elementor-column {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Corriger les widgets Elementor */
    .elementor-widget {
        margin-bottom: 20px;
    }
    
    /* Corriger les espacements Elementor */
    .elementor-element {
        margin-bottom: 15px;
    }
    
    /* Corriger les images Elementor */
    .elementor-image img {
        width: 100%;
        height: auto;
    }
    
    /* Corriger les boutons Elementor */
    .elementor-button {
        min-height: 44px;
        padding: 10px 20px;
        font-size: 16px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Corriger les icônes Elementor */
    .elementor-icon {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   CORRECTIONS WOOCOMMERCE MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    /* Corriger les variations produit */
    .variations select {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        padding: 10px;
    }
    
    /* Corriger les messages WooCommerce */
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 8px;
    }
    
    /* Corriger le panier */
    .woocommerce-cart-form {
        overflow-x: auto;
    }
    
    .cart_item {
        min-width: 300px;
    }
    
    /* Corriger le checkout */
    .woocommerce-checkout .form-row {
        margin-bottom: 15px;
    }
    
    .woocommerce-checkout input,
    .woocommerce-checkout select {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        padding: 10px;
    }
}

/* ==========================================================================
   UTILITAIRES MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    /* Classes utilitaires pour masquer/afficher */
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
    
    /* Classes utilitaires pour l'espacement */
    .mobile-padding {
        padding: 15px !important;
    }
    
    .mobile-margin {
        margin: 15px 0 !important;
    }
    
    /* Classes utilitaires pour le texte */
    .mobile-text-center {
        text-align: center !important;
    }
    
    .mobile-text-small {
        font-size: 14px !important;
    }
    
    /* Classes utilitaires pour les boutons */
    .mobile-button-full {
        width: 100% !important;
        min-height: 48px !important;
    }
}


/* ========================================================================== 
   CORRECTIF MOBILE SIMPLIFIÉ - Garder le desktop correct
   Date : 11 Octobre 2025
   ========================================================================== */

/* Mobile - Garder les mêmes tailles que desktop pour cohérence */
@media (max-width: 768px) {
    /* Cartes de variantes - même hauteur que desktop */
    .section-container.lab-ella-bestsellers .section-card.bestseller-product .variant-selection {
        min-height: 220px !important;
        margin-bottom: 15px !important;
        padding: 12px !important;
    }
    
    /* Bouton de fermeture - compatible iOS sans double X */
    .close-variant-card {
        top: 6px !important;
        right: 6px !important;
        width: 26px !important;
        height: 26px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        background: #f0f0f0 !important;
        color: #000 !important;
        border: 2px solid #ccc !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        line-height: 1 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        -webkit-appearance: none !important;
        -webkit-font-smoothing: antialiased !important;
    }
    
    /* Supprimer tout contenu généré pour éviter le double X */
    .close-variant-card::before,
    .close-variant-card::after {
        content: none !important;
        display: none !important;
    }
    
    /* Boutons de quantité - IDENTIQUES partout */
    .section-container.lab-ella-bestsellers .options-card .quantity-btn,
    .section-container.lab-ella-bestsellers .variant-selection .quantity-btn,
    .quantity-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 13px !important;
    }
    
    /* Champs de quantité - IDENTIQUES partout */
    .section-container.lab-ella-bestsellers .options-card .quantity-input,
    .section-container.lab-ella-bestsellers .variant-selection .quantity-input,
    .quantity-input {
        width: 40px !important;
        height: 26px !important;
        min-height: 20px !important;
        font-size: 12px !important;
    }
}


/* ESPACEMENT MOBILE RENFORCÉ entre avis et bouton d'ajout au panier */
@media (max-width: 768px) {
    /* Espacement après les avis produits */
    .section-container.lab-ella-bestsellers .section-card .product-rating {
        margin-bottom: 35px !important;
        padding-bottom: 15px !important;
    }
    
    /* Espacement avant le bouton d'ajout au panier */
    .section-container.lab-ella-bestsellers .section-card .add-to-cart-btn {
        margin-top: 25px !important;
        padding-top: 10px !important;
    }
    
    /* Espacement des étoiles */
    .section-container.lab-ella-bestsellers .section-card .stars {
        margin-bottom: 20px !important;
    }
    
    /* Espacement du texte des avis */
    .section-container.lab-ella-bestsellers .section-card .review-text {
        margin-bottom: 25px !important;
        padding-bottom: 10px !important;
    }
    
    /* Espacement général des détails produit */
    .section-container.lab-ella-bestsellers .section-details {
        padding-bottom: 20px !important;
        margin-bottom: 15px !important;
    }
    
    /* Espacement spécifique pour les éléments de notation */
    .section-container.lab-ella-bestsellers .section-card .rating-container {
        margin-bottom: 30px !important;
    }
    
    /* Espacement pour les avis individuels */
    .section-container.lab-ella-bestsellers .section-card .review-item {
        margin-bottom: 20px !important;
    }
}


/* ==========================================================================
   CORRECTIONS CARTES VERSION MOBILE - Version 4.2.1
   ========================================================================== */

@media (max-width: 768px) {
    /* Cartes VERSION - hauteur optimisée grâce aux espacements réduits */
    .section-container.lab-ella-bestsellers .section-card.bestseller-product .version-variant-card,
    .section-container.lab-ella-bestsellers .section-card.bestseller-product .variant-selection.main-variant-card.version-variant-card {
        min-height: 260px !important; /* Réduit de 280px à 260px */
        margin-bottom: 20px !important;
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    /* Boutons VERSION - plus grands sur mobile */
    .section-container.lab-ella-bestsellers .section-card.bestseller-product .version-variant-card .version-option {
        padding: 12px 20px !important;
        font-size: 14px !important;
        width: 160px !important; /* Plus large sur mobile */
        margin-bottom: 5px !important;
    }
    
    /* Options VERSION - espacement minimal pour gagner en hauteur */
    .section-container.lab-ella-bestsellers .section-card.bestseller-product .version-variant-card .version-options {
        gap: 6px !important; /* Réduit de 8px à 6px */
        margin-bottom: 5px !important; /* Réduit de 8px à 5px */
        flex-shrink: 0 !important;
    }
    
    /* Label VERSION - espacement minimal */
    .section-container.lab-ella-bestsellers .section-card.bestseller-product .version-variant-card .option-label {
        font-size: 14px !important;
        margin-bottom: 5px !important; /* Réduit de 8px à 5px */
        font-weight: 600 !important;
        flex-shrink: 0 !important;
    }
    
    /* Section quantité - espacement mobile */
    .section-container.lab-ella-bestsellers .section-card.bestseller-product .version-variant-card .option-group.quantity-option-group {
        margin-top: auto !important;
        padding-top: 10px !important;
        flex-shrink: 0 !important;
    }
}