:root {
            --purple-main: #6c34af;
            --purple-dark: #4a1d8a;
            --magenta-accent: #d63384;
            --accent-text: #ffb7fb;
            --nav-height: 85px;
            /* Gradient avec opacité ajustée pour laisser transparaître fond.jpg */
            --hero-gradient: linear-gradient(135deg, rgba(74, 29, 138, 0.9) 0%, rgba(108, 52, 175, 0.75) 100%);
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--purple-dark);
        }
/* --- AJUSTEMENT MENU MOBILE --- */
@media (max-width: 991.98px) {
    /* Fond blanc quand le menu est déroulé */
    .navbar-collapse {
        background-color: #ffffff !important;
        margin-top: 10px;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

    /* Force les liens en noir dans le menu déroulant même si la nav est transparente */
    .nav-transparent .navbar-collapse .nav-link {
        color: #1a1a1a !important;
    }

    /* Ajustement du bouton CTA dans le menu mobile */
    .nav-transparent .navbar-collapse .btn-cta {
        background: var(--purple-main);
        color: #ffffff !important;
        margin-top: 10px;
        display: inline-block;
    }

    /* On change la couleur de l'icône burger quand on clique (facultatif) */
    .navbar-toggler {
        border: none;
        padding: 0;
    }
}
        /* --- NAVIGATION --- */
        #main-nav {
            height: var(--nav-height);
            transition: all 0.4s ease-in-out;
            z-index: 1000;
        }

        .nav-transparent { background-color: transparent; }
        
        .nav-white {
            background-color: #ffffff !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            height: 75px !important;
        }

        .navbar-brand .logo-box {
            width: 42px; height: 42px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            color: #ffffff; font-size: 22px;
            transition: 0.3s;
        }

        .nav-transparent .logo-box {
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .nav-white .logo-box {
            background: linear-gradient(90deg, #9b4dca 0%, var(--magenta-accent) 100%);
        }

        .brand-name { font-size: 1.1rem; line-height: 1; font-weight: 800; }
        .brand-tagline { font-size: 0.75rem; font-weight: 400; }
        
        .nav-transparent .brand-name, .nav-transparent .brand-tagline { color: #ffffff; }
        .nav-white .brand-name { color: #1a1a1a; }
        .nav-white .brand-tagline { color: #666666; }

        .nav-link { font-weight: 600; font-size: 0.95rem; transition: 0.3s; }
        .nav-transparent .nav-link { color: #ffffff !important; }
        .nav-white .nav-link { color: #333333 !important; }
        .nav-white .nav-link:hover, .nav-white .nav-link.active { color: var(--purple-main) !important; }

        .btn-cta {
            border-radius: 12px; padding: 10px 24px;
            font-weight: 700; border: none; transition: 0.3s;
        }

        .nav-transparent .btn-cta { background-color: #ffffff; color: var(--purple-main); }
        .nav-white .btn-cta { background: linear-gradient(90deg, #9b4dca 0%, #e83e8c 100%); color: #ffffff; }
   /* Couleur par défaut (avant le scroll) */
.nav-transparent .nav-icon {
    color: #ffffff !important;
    transition: all 0.4s ease-in-out;
}

/* Couleur après le scroll (quand la navbar devient blanche) */
.nav-white .nav-icon {
    color: #000000 !important;
}