@keyframes water-drop-effect {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
    }
    60% {
        transform: translate(-50%, -50%) scale(1.25, 0.85);
        box-shadow: 0 0 20px 10px rgba(0,0,0,0.08);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }
}
.custom-mouse-effect.water-drop {
    animation: water-drop-effect 0.35s cubic-bezier(.4,2,.6,.9);
}
/* Effet curseur cercle inversé (desktop uniquement) */
@media (min-width: 992px) {
    .custom-mouse-effect {
        pointer-events: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        mix-blend-mode: difference;
        background: rgba(125, 54, 0, 1);
        transition: background 0.2s, width 0.2s, height 0.2s;
        will-change: transform;
    }
}
@media (max-width: 991px) {
    .custom-mouse-effect {
        display: none !important;
    }
    body {
        cursor: auto !important;
    }
}
/* CUSTOM CSS LAURE CAVALLINI */
/* ==============================================
   CSS OPTIMISÉ MEGA MENU - VERSION ULTRA-SPÉCIFIQUE
   ITIS Commerce - Force les styles sur la 4ème colonne
   ============================================== */

/* 1. FOND GÉNÉRAL DU MEGA MENU - PADDING RÉDUIT */
.sf-menu > li.menu-item.menu-item-type-custom.megamenu > ul.sub-menu {
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%) !important;
    padding: 20px 20px !important;
    gap: 15px;
}

/* 2. TOUTES LES COLONNES EN CARTES - PADDING RÉDUIT */
.sf-menu > li.menu-item.menu-item-type-custom.megamenu > ul.sub-menu > li {
    background: #ffffff !important;
    padding: 15px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05) !important;
    border-top: 4px solid #FF6B47 !important;
    transition: all 0.3s ease !important;
    margin: 0 8px !important;
}

/* 3. EFFET HOVER - ÉLÉVATION DES CARTES */
.sf-menu > li.menu-item.menu-item-type-custom.megamenu > ul.sub-menu > li:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}

/* 4. TITRES DES COLONNES - MARGES RÉDUITES */
.sf-menu > li.menu-item.menu-item-type-custom.megamenu > ul.sub-menu > li > a {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #333 !important;
    margin-bottom: 12px !important;
    display: block !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

/* 5. SOUS-ITEMS (LIENS DANS LES COLONNES) */
.sf-menu > li.menu-item.menu-item-type-custom.megamenu > ul.sub-menu > li ul li {
    margin: 0 !important;
}

.sf-menu > li.menu-item.menu-item-type-custom.megamenu > ul.sub-menu > li ul li a {
    padding: 8px 0 !important;
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

/* 6. EFFET HOVER SUR LES LIENS */
.sf-menu > li.menu-item.menu-item-type-custom.megamenu > ul.sub-menu > li ul li a:hover {
    color: #FF6B47 !important;
    padding-left: 8px !important;
    background: rgba(255, 107, 71, 0.05) !important;
}

/* 7. DERNIER ITEM SANS BORDURE */
.sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li ul li:last-child a {
    border-bottom: none !important;
}

/* ==============================================
   STYLE SPÉCIAL POUR LA COLONNE CTA (4ème)
   VERSION ULTRA-SPÉCIFIQUE POUR FORCER L'APPLICATION
   ============================================== */

/* 8. LA DERNIÈRE COLONNE = CARTE CTA CENTRÉE */
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child {
    background: linear-gradient(135deg, #FF6B47 0%, #ff8566 100%) !important;
    border-top: none !important;
    border-radius: 12px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 240px !important;
    padding: 30px 25px !important;
    box-shadow: 0 4px 20px rgba(255, 107, 71, 0.2) !important;
}

/* 8b. LISTE DANS LA COLONNE CTA - FORCE LE CENTRAGE */
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
}

/* 8c. TOUS LES ITEMS DE LA LISTE - CENTRÉS */
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > ul > li {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 9. TITRE DE LA COLONNE CTA - NON CLIQUABLE */
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > a {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    pointer-events: none !important;
    cursor: default !important;
    width: 100% !important;
}

/* 10. EMOJI DU TITRE - TAILLE AJUSTÉE */
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > a::before {
    font-size: 24px !important;
    margin-right: 0 !important;
}

/* 11. TEXTE DESCRIPTIF - ULTRA-SPÉCIFIQUE POUR CENTRAGE */
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > ul > li:first-child {
    width: 100% !important;
    text-align: center !important;
}

body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > ul > li:first-child > a {
    color: #ffffff !important;
    border-bottom: none !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 0 15px 25px 15px !important;
    opacity: 0.95 !important;
    line-height: 1.5 !important;
    pointer-events: none !important;
    cursor: default !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    background: transparent !important;
}

/* 12. LE BOUTON - ULTRA-SPÉCIFIQUE POUR FORCER LE BLANC */
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > ul > li:last-child {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
}

body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > ul > li:last-child > a,
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > ul > li:last-child > a:link,
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > ul > li:last-child > a:visited {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #FF6B47 !important;
    padding: 15px 40px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-top: 5px !important;
    display: inline-block !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    border: none !important;
    border-bottom: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* 13. EFFET HOVER SUR LE BOUTON - RESTE BLANC */
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child > ul > li:last-child > a:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.35) !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #FF6B47 !important;
    padding: 15px 40px !important;
    padding-left: 40px !important;
    text-decoration: none !important;
}

/* 14. HOVER SUR LA CARTE CTA */
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 35px rgba(255, 107, 71, 0.35) !important;
}

/* ==============================================
   AMÉLIORATIONS VISUELLES SUPPLÉMENTAIRES
   ============================================== */

/* 15. SÉPARATEUR PLUS VISIBLE ENTRE COLONNES */
.sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        #e0e0e0 20%, 
        #e0e0e0 80%, 
        transparent 100%);
}

/* 16. ICÔNES PERSONNALISÉES PAR COLONNE (3 premières uniquement) */
.sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:nth-child(1) > a::before {
    content: '🛒 ';
}

.sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:nth-child(2) > a::before {
    content: '🎯 ';
}

.sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:nth-child(3) > a::before {
    content: '🔧 ';
}

/* 17. EMOJI POUR LA 4ème COLONNE */
body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:nth-child(4) > a::before {
    content: '💡';
}

/* ==============================================
   RESPONSIVE - MOBILE
   ============================================== */

@media (max-width: 999px) {
    .sf-menu > li.menu-item.menu-item-type-custom.megamenu > ul.sub-menu > li {
        margin: 8px 0 !important;
        width: 100% !important;
    }
    
    body #header-outer .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:last-child {
        min-height: 200px !important;
        padding: 25px 20px !important;
    }
    
    .sf-menu > li.menu-item-113.megamenu > ul.sub-menu > li:not(:last-child)::after {
        display: none;
    }
}

/* Affiche uniquement sur mobile */
.visible-mobile {
    display: none !important;
}

/* Affiche uniquement sur desktop */
.visible-desktop {
    display: block;
}

#slide-out-widget-area.slide-out-from-right, #slide-out-widget-area.slide-out-from-right:not(.fullscreen-alt):not(.fullscreen) {
    width: 100vw;
    z-index: 12;
    background-color: black !important;
}
body[data-slide-out-widget-area-style=slide-out-from-right] .slide_out_area_close
{
    position: absolute;
    right: 50px;
    top: 50px;
    z-index: 13;
    display: block;
}

/* #header-outer nav > ul > .megamenu.nectar-megamenu-menu-item > .sub-menu,
#header-outer nav > ul > .nectar-megamenu-menu-item > .sub-menu {
    left: 50%;
    transform: translateX(-50%);
    width:max-content !important;
} */
/* Media Queries pour mobile */
@media (max-width: 991px) {
    .visible-mobile {
        display: block !important;
    }
    .visible-desktop {
        display: none !important;
    }
    .contact-us-btn span.menu-title-text {
       display: none !important;
    }
    .contact-us-btn span.nectar-menu-icon{
       display: inline-block !important;
    }
}