.elementor-11446 .elementor-element.elementor-element-3ee37cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11446 .elementor-element.elementor-element-3302637 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-3302637 *//* --- 1. VARIABLES --- */
    :root {
        /* Vos Couleurs Marque */
        --primary-red: #E30613;
        --primary-orange: #F39200;
        --primary-yellow: #FFDE07;
        --primary-green: #006633;
        --primary-blue: #36A9E1;
        --primary-purple: #662483;
        --primary-navy: #312783;
        --text-dark: #1D1D1B;      /* Gris foncé officiel */
        --primary-dark-gray: #4a4a4a;
        --primary-white: #ffffff;
        
        /* Variables Header */
        --sq-dark: #0f172a;
        --glass-bg: rgba(255, 255, 255, 0.95); /* Fond de la pilule */
        --glass-border: rgba(255, 255, 255, 0.2);
        
        /* --- LA VARIABLE MAGIQUE DE COULEUR --- */
        /* Par défaut (en haut) : BLANC */
        --header-text-color: #ffffff; 
    }

    /* 🔧 FIX 1 : EMPÊCHER LE DÉBORDEMENT HORIZONTAL (marge blanche) */
    body { 
        margin: 0; 
        font-family: 'Plus Jakarta Sans', sans-serif;
        overflow-x: hidden; /* Empêche le scroll horizontal */
        max-width: 100vw; /* Force la largeur max à 100% de la fenêtre */
    }
    
    a { text-decoration: none; }

    /* --- 2. LOGO CSS --- */
    .logo {
        display: flex; align-items: center; gap: 12px;
        font-weight: 800; font-size: 1.3rem;
        
        /* ICI : On utilise la variable dynamique au lieu d'une couleur fixe */
        color: var(--header-text-color); 
        
        flex-shrink: 0; white-space: nowrap;
        font-family: 'Montserrat', sans-serif;
        transition: color 0.4s ease; /* Transition douce de la couleur */
    }
    
    .logo-link {
        position: relative;
        z-index: 20; 
        background-color: transparent;
    }

    .logo-squares {
        display: grid;
        grid-template-columns: repeat(3, 10px);
        grid-template-rows: repeat(3, 10px);
        gap: 2px;
        animation: pulse-logo 3s ease-in-out infinite;
    }

    @keyframes pulse-logo {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    .square { width: 10px; height: 10px; border-radius: 2px; transition: transform 0.3s ease; }

    /* Couleurs des carrés (Inchangées) */
    .square:nth-child(1) { background: var(--primary-white); border: 1px solid #ddd; }
    .square:nth-child(2) { background: var(--primary-red); }
    .square:nth-child(3) { background: var(--primary-dark-gray); }
    .square:nth-child(4) { background: var(--primary-yellow); }
    .square:nth-child(5) { background: var(--primary-orange); }
    .square:nth-child(6) { background: var(--primary-navy); }
    .square:nth-child(7) { background: var(--primary-blue); }
    .square:nth-child(8) { background: var(--primary-green); }
    .square:nth-child(9) { background: var(--primary-purple); }

    .logo:hover .square { transform: rotate(45deg) scale(1.2); }


    /* --- 3. STRUCTURE DU HEADER --- */
    .custom-navbar {
        position: fixed; top: 0; left: 0; right: 0;
        width: 100%; display: flex; justify-content: center;
        z-index: 9999; padding: 20px;
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    body.admin-bar .custom-navbar { top: 32px; }

    .nav-inner {
        width: 100%; max-width: 1400px; height: 80px;
        background: transparent; border: 1px solid transparent; box-shadow: none;
        display: flex; justify-content: space-between; align-items: center;
        padding: 0 20px;
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
    }

    /* Menu Desktop */
    .nav-links { 
        position: static;
        left: 50%;          
        top: 50%;           
        transform: translate(-50%, -50%);
        display: flex; 
        gap: 30px; 
        list-style: none; 
        margin: 0; 
        padding: 0; 
        width: auto; 
        justify-content: center;
        transform: none;
    }
    .nav-item a {
        /* Utilisation de la variable dynamique */
        color: var(--header-text-color);
        
        font-weight: 600; font-size: 1.5rem; position: relative; 
        transition: color 0.4s ease; /* Transition douce */
    }
    
    /* Point bleu au survol (reste bleu) */
    .nav-item a::after {
        content:''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) scale(0);
        width: 6px; height: 6px; background: var(--primary-blue); border-radius: 50%; transition: 0.3s;
    }
    .nav-item a:hover::after { transform: translateX(-50%) scale(1); }

    /* Bouton CTA */
    .nav-cta {
        /* Bouton Blanc sur fond sombre pour ressortir */
        background: #ffffff; color: var(--sq-dark) !important;
        padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 700;
        transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    .nav-cta:hover { transform: translateY(-2px); background: var(--primary-blue); color: white !important; }

    /* Burger Mobile */
    .burger { display: none; cursor: pointer; flex-direction: column; gap: 6px; }
    
    .line { 
        width: 25px; height: 2px; border-radius: 2px; transition: 0.4s;
        
        /* La couleur des lignes suit aussi la variable dynamique */
        background: var(--header-text-color); 
    }



    /* =========================================
       L'EFFET SCROLL (CHANGEMENT DE COULEUR)
       ========================================= */
    
    /* Quand on ajoute la classe .scrolled via JS */
    .custom-navbar.scrolled {
        /* On redéfinit la variable couleur pour tout ce qui est dedans */
        --header-text-color: #1D1D1B; /* <-- C'est ici que ça devient DARK GRAY */
        
        top: 10px;
    }
    body.admin-bar .custom-navbar.scrolled { top: 42px; }

    .custom-navbar.scrolled .nav-inner {
        max-width: 900px; height: 65px; padding: 0 30px;
        
        /* Le fond devient BLANC/VERRE */
        background: var(--glass-bg);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--glass-border);
        border-radius: 100px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    }
    
    /* Modification spécifique du bouton CTA au scroll pour qu'il reste visible sur fond blanc */
    .custom-navbar.scrolled .nav-cta {
        
        background: var(--sq-dark); /* Devient sombre */
        color: white !important;
    }
    .custom-navbar.scrolled .nav-cta:hover {
        background: var(--primary-blue);
    }
    
    .custom-navbar.scrolled .nav-item a {
        font-size: 1.2rem; /* Le texte devient plus petit */
    }
    
    .custom-navbar.scrolled .nav-links {
        position: static !important; /* Force le mode normal */
        transform: none !important;
        
        /* Astuce : margin: auto permet de centrer "au mieux" l'élément restant */
        margin-left: auto; 
        margin-right: auto;
        
        gap: 20px; /* On rapproche encore un peu les liens dans la pilule */
    }
   

    /* Responsive */
    @media(max-width: 1000px) {
        .nav-links, .nav-cta { display: none; }
        .burger { display: flex; }
        .nav-inner { 
            padding: 0 15px; /* 🔧 FIX 2 : Réduit le padding pour éviter le débordement */
            width: 100%; /* S'assure que le header ne dépasse pas */
            box-sizing: border-box; /* Inclut le padding dans la largeur */
        }
        .custom-navbar { 
            padding: 15px; /* 🔧 FIX 2 : Réduit le padding extérieur */
        }
        .custom-navbar.scrolled .nav-inner { 
            width: 95%; 
            border-radius: 16px;
            padding: 0 20px; /* Padding réduit quand scrollé */
        }
        .logo { font-size: 1.1rem; gap: 8px; }
    }

    /* Menu Mobile Overlay */
    .mobile-menu-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center;
        z-index: 9998; clip-path: circle(0% at 100% 0%); transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.3, 1);
        
        /* 🔧 FIX 3 : Empêche le débordement du menu mobile */
        overflow-y: auto;
        overflow-x: hidden;
    }
    .mobile-menu-overlay.active { clip-path: circle(150% at 100% 0%); }
    
    /* Les liens mobiles restent foncés car sur fond blanc */
    .mobile-link { font-size: 2rem; font-weight: 800; color: var(--text-dark); text-decoration: none; margin: 15px 0; }
    
    
    /* 🔧 FIX 4 : FORCER LE LOGO ET BURGER EN NOIR QUAND LE MENU MOBILE EST OUVERT */
    /* Quand le menu mobile est actif ET qu'on n'a PAS scrollé */
    .mobile-menu-overlay.active ~ .custom-navbar:not(.scrolled) {
        --header-text-color: #1D1D1B; /* Force le texte en noir */
    }
    
    /* Version alternative : changement direct via classe JS (plus fiable) */
    .custom-navbar.menu-open {
        --header-text-color: #1D1D1B !important; /* Force le noir quand menu ouvert */
    }
    
    
    @media (min-width: 1300px) {
        .nav-inner { position: relative; } /* Le parent devient référent */
        
        .nav-links {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: auto;
            justify-content: center;
            white-space: nowrap; /* Empêche le texte de passer à la ligne */
        }
    }

    .nav-item a.active {
        color: var(--primary-orange);
        font-weight: 700;
    }

    .nav-item a.active::after {
        background: var(--primary-orange);
        transform: translateX(-50%) scale(1);
    }

    /* Version mobile */
    .mobile-link.active {
        color: var(--primary-orange);
    }

    @media(max-width: 900px) {
        /* 🔧 FIX 5 : Réduction supplémentaire pour les petits écrans */
        .logo { 
            font-size: 1rem; 
            gap: 6px; 
        }
        .logo-squares {
            grid-template-columns: repeat(3, 8px);
            grid-template-rows: repeat(3, 8px);
        }
        .square {
            width: 8px;
            height: 8px;
        }
        .custom-navbar {
            padding: 10px;
        }
        .nav-inner {
            padding: 0 10px;
        }
    }/* End custom CSS */