.elementor-11438 .elementor-element.elementor-element-d569f87{--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-11438 .elementor-element.elementor-element-e9fe24a > .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-e9fe24a *//* --- 1. VARIABLES --- */
    :root {
        /* Vos Couleurs */
        --primary-red: #E30613;
        --primary-orange: #F39200;
        --primary-yellow: #FFDE07;
        --primary-green: #006633;
        --primary-blue: #36A9E1;
        --primary-purple: #662483;
        --primary-navy: #312783;
        --text-dark: #1D1D1B;
        --primary-dark-gray: #4a4a4a;
        --primary-white: #ffffff;
        
        /* Couleurs du Header */
        --sq-dark: #0f172a;
        --glass-bg: rgba(255, 255, 255, 0.9);
        --glass-border: rgba(255, 255, 255, 0.2);
    }

    body { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
    a { text-decoration: none; }

    /* --- 2. CSS DE VOTRE LOGO (INCHANGÉ) --- */
    .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 800;
        font-size: 1.3rem;
        color: var(--text-dark);
        flex-shrink: 0;
        white-space: nowrap;
        /* J'ai remis Montserrat ici pour coller à votre demande initiale,
           changez pour 'Plus Jakarta Sans' si vous préférez uniformiser */
        font-family: 'Montserrat', sans-serif; 
    }

 .logo-link {
    position: relative;
    z-index: 20; 
    background-color: transparent; /* Ou la couleur du fond si besoin de masquer le texte */
}

    .logo-squares {
        display: grid;
        grid-template-columns: repeat(3, 10px);
        grid-template-rows: repeat(3, 10px);
        gap: 2px;
        /* Votre animation de pulsation */
        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 */
    .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); }

    /* VOTRE EFFET HOVER ORIGINAL (Rotation + Scale, pas de ronds) */
    .logo:hover .square {
        transform: rotate(45deg) scale(1.2);
    }


    /* --- 3. CSS DU HEADER (GHOST TO PILL) --- */
    
    /* Le Container Principal (Fixe en haut) */
    .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);
    }
    
    /* Correction si la barre admin WordPress est là */
    body.admin-bar .custom-navbar { top: 32px; }

    /* La Barre Interne (Le contenu du menu) */
    .nav-inner {
        width: 100%; max-width: 1400px; height: 80px;
        /* ÉTAT INITIAL : TOTALEMENT INVISIBLE/TRANSPARENT */
        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 - Liens */
    .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 {
        color: var(--sq-dark); font-weight: 600; font-size: 1.5rem;
        position: relative; transition: color 0.3s;
    }
    .nav-item a::after { /* Petit point bleu au survol */
        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 (Contact) */
    .nav-cta {
        background: var(--sq-dark); color: white !important;
        padding: 12px 30px; border-radius: 50px; font-weight: 700;
        transition: 0.3s; box-shadow: 0 5px 15px rgba(15, 23, 42, 0.2);
    }
    .nav-cta:hover { transform: translateY(-2px); background: var(--primary-blue); }

    /* Burger Mobile (Trois lignes) */
    .burger { display: none; cursor: pointer; flex-direction: column; gap: 6px; }
    .line { width: 25px; height: 2px; background: var(--sq-dark); border-radius: 2px; transition: 0.4s; }

    /* =========================================
       L'EFFET SCROLL (LE "GHOST" DEVIENT "PILL")
       ========================================= */
    .custom-navbar.scrolled { top: 10px; } /* Se décolle un peu du haut */
    body.admin-bar .custom-navbar.scrolled { top: 42px; }

    .custom-navbar.scrolled .nav-inner {
        max-width: 900px; /* Devient compact */
        height: 65px; /* Devient moins haut */
        padding: 0 30px;
        
        /* Apparition du fond "verre" et des bords */
        background: var(--glass-bg);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--glass-border);
        border-radius: 100px; /* Devient une pilule ronde */
        box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    }

.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 */
}


    /* --- 4. RESPONSIVE MOBILE --- */
    @media(max-width: 1000px) {
        .nav-links, .nav-cta { display: none; } /* On cache le menu PC */
        .burger { display: flex; } /* On affiche le burger */
        .nav-inner { padding: 0; }
        
        /* Sur mobile, la pilule prend presque toute la largeur */
        .custom-navbar.scrolled .nav-inner { width: 95%; border-radius: 16px; }
        
        /* Ajustement taille logo mobile */
        .logo { font-size: 1.1rem; gap: 8px; }
        .square { width: 8px; height: 8px; }
        .logo-squares { grid-template-columns: repeat(3, 8px); grid-template-rows: repeat(3, 8px); }
    }

    /* Menu Mobile Overlay (Plein écran) */
    .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; 
        /* Animation d'ouverture circulaire */
        clip-path: circle(0% at 100% 0%); transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.3, 1);
    }
    .mobile-menu-overlay.active { clip-path: circle(150% at 100% 0%); }
    .mobile-link { font-size: 2rem; font-weight: 800; color: var(--sq-dark); margin: 15px 0; }



   @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);
}/* End custom CSS */