.elementor-kit-75{--e-global-color-primary:#252422;--e-global-color-secondary:#E1E0E0;--e-global-color-text:#E1E0E0;--e-global-color-accent:#61CE70;--e-global-color-9252ae9:#E1E0E0;--e-global-color-6194ffe:#252422;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-75 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* CSS pour la barre de recherche Elementor - Centrage parfait avec padding calculé */

/* Réinitialiser le conteneur parent */
.elementor-widget-search-form .elementor-widget-container {
    background: transparent !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Créer le contour gris avec un pseudo-élément */
.elementor-widget-search-form .elementor-widget-container::before {
    content: '' !important;
    position: absolute !important;
    top: -6px !important;
    left: -8px !important;
    right: -8px !important;
    bottom: -6px !important;
    background: rgba(45, 45, 45, 0.8) !important;
    border-radius: 30px !important;
    z-index: -1 !important;
}

/* Conteneur principal du formulaire */
.e-search-form {
    background: white !important;
    border-radius: 25px !important;
    padding: 4px 15px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
    height: 45px !important;
    min-height: 45px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Wrapper de l'input */
.e-search-input-wrapper {
    flex: 1 1 auto !important;
    background: transparent !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

/* Champ de saisie - RESET COMPLET + PADDING CALCULÉ */
.e-search-input.e-search-input--no-icon-label,
input#search-e77e9f0,
.e-search-form input[type="search"] {
    /* Reset total */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    
    /* Dimensions et positionnement */
    width: 100% !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    box-sizing: border-box !important;
    
    /* Texte et centrage - PADDING CALCULÉ POUR CENTRAGE PARFAIT */
    padding: 6px 12px 13px 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: #666 !important;
    
    /* Reset des propriétés search spécifiques */
    -webkit-search-cancel-button: none !important;
    -webkit-search-decoration: none !important;
}

/* Placeholder - hérite du padding de l'input */
.e-search-input::placeholder {
    color: #aaa !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

/* Reset des boutons de search sur webkit */
.e-search-form input[type="search"]::-webkit-search-cancel-button,
.e-search-form input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none !important;
    display: none !important;
}

/* Bouton de recherche */
.e-search-submit {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    margin-left: 4px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
}

/* Icône SVG du bouton */
.e-search-submit .e-font-icon-svg,
.e-search-submit svg {
    fill: #2d2d2d !important;
    width: 16px !important;
    height: 16px !important;
}

/* Path du SVG */
.e-search-submit svg path {
    fill: #2d2d2d !important;
}

/* Hover sur le bouton */
.e-search-submit:hover {
    background: #FF5900 !important;
}

.e-search-submit:hover svg,
.e-search-submit:hover .e-font-icon-svg {
    fill: white !important;
}

.e-search-submit:hover svg path {
    fill: white !important;
}

/* Label (cacher) */
.e-search-label {
    display: none !important;
}

/* Conteneur des résultats */
.e-search-results-container.hide-loader {
    display: none !important;
}

/* S'assurer que le widget parent ne force pas d'autres styles */
.elementor-widget-search-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Forcer le widget à prendre toute la largeur de sa colonne */
.elementor-widget-search-form.elementor-widget {
    width: 100% !important;
    max-width: 100% !important;
}

/* Forcer l'élément wrappeur aussi */
.elementor-element.elementor-widget-search-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Empêcher le retour à la ligne du bouton Vendre */
.elementor-button-text,
.elementor-button {
    white-space: nowrap !important;
}

/* Ciblage plus spécifique pour tous les boutons du header */
header .elementor-button-text,
header .elementor-button,
.elementor-button-link {
    white-space: nowrap !important;
}

/* Si le bouton est dans un widget button */
.elementor-widget-button .elementor-button-text,
.elementor-widget-button .elementor-button-content-wrapper {
    white-space: nowrap !important;
}

/* Affiche sur mobile */
@media screen and (max-width: 768px) {
    .logoreduce {
        display: block !important;
    }
}
/* Cache sur PC/Desktop */
@media screen and (min-width: 769px) {
    .logoreduce {
        display: none !important;
    }
}

/* Cache sur mobile */
@media screen and (max-width: 768px) {
    .logofull {
        display: none !important;
    }
}
/* Affiche sur PC */
@media screen and (min-width: 769px) {
    .logofull {
        display: block !important;
    }
}

/* Responsive - Tablette */
@media (max-width: 1024px) {
    .elementor-widget-search-form .elementor-widget-container::before {
        top: -6px !important;
        left: -7px !important;
        right: -7px !important;
        bottom: -6px !important;
    }
}

/* ============================================
   HEADER MOBILE - OVERLAY RECHERCHE + RÉDUCTION TAILLES
   ============================================ */

@media (max-width: 768px) {
    
    /* RÉDUCTION DE LA TAILLE DE TOUS LES ÉLÉMENTS */
    
    /* Logo plus petit */
    [data-id="b0fb3a2"] {
        max-width: 70px !important;
    }
    
    [data-id="b0fb3a2"] img {
        max-height: 32px !important;
        width: auto !important;
    }
    
    /* Bouton Vendre plus compact */
    [data-id="8260a51"] {
        max-width: 120px !important;
    }
    
    [data-id="8260a51"] .elementor-button {
        padding: 8px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    
    /* Icônes plus petites (menu, recherche, compte, panier) */
    [data-id="24247e70"] .elementor-icon,
    [data-id="4a2a1f4"] .elementor-icon,
    #elementor-menu-cart_toggle_button .elementor-icon {
        font-size: 22px !important;
    }
    
    /* Style de l'icône de recherche */
    [data-id="4a2a1f4"] {
        cursor: pointer !important;
        display: flex !important;
    }
    
    /* Réduire les espacements du header */
    [data-id="5dee7b29"] {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    
    /* OVERLAY DE RECHERCHE */
    
    /* Cacher la barre de recherche par défaut sur mobile */
    [data-id="400450c8"] {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        z-index: 99999 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }
    
    /* Afficher quand la classe search-active est ajoutée */
    [data-id="400450c8"].search-active {
        display: flex !important;
    }
    
    /* Style de la barre en overlay */
    [data-id="400450c8"].search-active .elementor-widget-container {
        max-width: 500px !important;
        width: 100% !important;
    }
    
    [data-id="400450c8"].search-active .elementor-widget-search-form .elementor-widget-container::before {
        top: -5px !important;
        left: -7px !important;
        right: -7px !important;
        bottom: -5px !important;
        border-radius: 30px !important;
    }
    
    [data-id="400450c8"].search-active .e-search-form {
        height: 55px !important;
        min-height: 55px !important;
        padding: 5px 18px !important;
        border-radius: 30px !important;
    }
    
    [data-id="400450c8"].search-active .e-search-input.e-search-input--no-icon-label,
    [data-id="400450c8"].search-active input#search-e77e9f0,
    [data-id="400450c8"].search-active .e-search-form input[type="search"] {
        height: 55px !important;
        min-height: 55px !important;
        padding: 17px 14px 16px 14px !important;
        font-size: 17px !important;
    }
    
    [data-id="400450c8"].search-active .e-search-input::placeholder {
        font-size: 17px !important;
    }
    
    [data-id="400450c8"].search-active .e-search-submit {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
    }
    
    [data-id="400450c8"].search-active .e-search-submit .e-font-icon-svg,
    [data-id="400450c8"].search-active .e-search-submit svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Bouton fermer X */
    [data-id="400450c8"]::after {
        content: "✕" !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        color: white !important;
        font-size: 35px !important;
        cursor: pointer !important;
        width: 50px !important;
        height: 50px !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        transition: background 0.3s ease !important;
    }
    
    [data-id="400450c8"].search-active::after {
        display: flex !important;
    }
    
    [data-id="400450c8"]::after:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }
}

/* Très petit écran */
@media (max-width: 480px) {
    
    /* Logo encore plus petit */
    [data-id="b0fb3a2"] {
        max-width: 60px !important;
    }
    
    [data-id="b0fb3a2"] img {
        max-height: 28px !important;
    }
    
    /* Bouton Vendre encore plus compact */
    [data-id="8260a51"] {
        max-width: 100px !important;
    }
    
    [data-id="8260a51"] .elementor-button {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
    
    /* Icônes plus petites */
    [data-id="24247e70"] .elementor-icon,
    [data-id="4a2a1f4"] .elementor-icon,
    #elementor-menu-cart_toggle_button .elementor-icon {
        font-size: 20px !important;
    }
    
    /* Espacements réduits */
    [data-id="5dee7b29"] {
        padding: 8px 10px !important;
        gap: 6px !important;
    }
}

<style>
/* Animation d'ouverture de l'overlay */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

[data-id="400450c8"].search-active {
    animation: fadeIn 0.3s ease !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Attendre que tout soit chargé
    setTimeout(function() {
        // Icône de recherche
        const searchIcon = document.querySelector('[data-id="4a2a1f4"]');
        // Container de la barre de recherche
        const searchContainer = document.querySelector('[data-id="400450c8"]');
        
        if (searchIcon && searchContainer) {
            console.log('Éléments trouvés, initialisation...');
            
            // Ouvrir la recherche au clic sur l'icône
            searchIcon.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                console.log('Icône cliquée');
                searchContainer.classList.add('search-active');
                
                // Focus sur l'input
                setTimeout(function() {
                    const searchInput = searchContainer.querySelector('input[type="search"]');
                    if (searchInput) {
                        searchInput.focus();
                    }
                }, 100);
            });
            
            // Fermer au clic sur le fond noir
            searchContainer.addEventListener('click', function(e) {
                if (e.target === searchContainer) {
                    console.log('Fond cliqué');
                    searchContainer.classList.remove('search-active');
                }
            });
            
            // Fermer au clic sur le X (::after)
            searchContainer.addEventListener('click', function(e) {
                const rect = searchContainer.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                // Zone du X (en haut à droite)
                if (x > rect.width - 70 && y < 70) {
                    console.log('X cliqué');
                    searchContainer.classList.remove('search-active');
                }
            });
            
            // Empêcher la fermeture si on clique sur la barre
            const searchWidget = searchContainer.querySelector('.elementor-widget-container');
            if (searchWidget) {
                searchWidget.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
            
            // Fermer avec Échap
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && searchContainer.classList.contains('search-active')) {
                    console.log('Échap pressé');
                    searchContainer.classList.remove('search-active');
                }
            });
            
            console.log('Script de recherche initialisé avec succès');
        } else {
            console.error('Éléments non trouvés:', {
                searchIcon: !!searchIcon,
                searchContainer: !!searchContainer
            });
        }
    }, 500);
});
</script>/* End custom CSS */