:root {
  --bg-dark: #07111f;
  --glass: rgba(7, 17, 31, 0.85);
  --accent: #5eead4;
}

/* LE MENU FIXE ET FLOU */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: var(--glass) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 0 !important;
}

body {
    margin: 0 !important;
    padding-top: 100px !important;
    font-family: 'Inter', 'Nunito', sans-serif !important;
    background-color: #07111f !important; 
    background-image: 
        radial-gradient(circle at top left, rgba(94,234,212,0.2), transparent 30%),
        radial-gradient(circle at top right, rgba(139,92,246,0.2), transparent 30%),
        linear-gradient(to bottom, #07111f, #0b1830) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    color: #eef4ff !important;
}

.navbar .nav-link {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.navbar .nav-link:hover {
    color: var(--accent) !important;
}

.dropdown-menu {
    background: #ffffff !important;
    border-radius: 12px !important;
}
        
.dropdown-item { color: #07111f !important; }

/* Style du Mega Menu */
.dropdown-mega-menu {
    border-radius: 15px !important;
    margin-top: 10px !important;
}

/* Effet au survol de la partie gauche */
.bg-light-hover {
    transition: background 0.3s ease;
}
.bg-light-hover:hover {
    background-color: rgba(0,0,0,0.03);
}

/* Couleurs des icônes dans le menu */
.text-brand-pink { color: #E0BCC2 !important; } /* Votre rose */
.text-accent { color: #5eead4 !important; }     /* Votre turquoise */

/* On aligne bien les items de droite */
.dropdown-mega-menu .dropdown-item {
    border-radius: 8px;
    margin: 2px 0;
    font-weight: 500;
}

/* Tablette et PC */
@media (min-width: 992px) {
    /* On cible notre classe personnalisée pour ne pas casser les autres menus */
    .dropdown-mega-menu.mega-right {
        left: auto !important;   /* Annule l'alignement à gauche */
        right: 0 !important;      /* Aligne le bord droit du menu sur le bord droit de Lab IA */
        transform: none !important; /* Supprime les décalages automatiques de Bootstrap */
        margin-top: 10px !important;
    }
}

/* FORCE L'ALIGNEMENT À DROITE DU MEGA MENU */
@media (min-width: 992px) {
    .navbar-nav .dropdown-menu.mega-right {
        left: auto !important;
        right: 0 !important; /* Aligne le bord droit du menu sur le bord droit de "Lab IA" */
        transform: none !important; /* Désactive les calculs automatiques de Bootstrap */
        margin-top: 15px !important;
    }
}

/* Correction de la couleur des liens sur fond blanc du menu */
.mega-right .dropdown-item {
    color: #07111f !important;
    padding: 10px 15px !important;
}

.mega-right .dropdown-item:hover {
    background-color: rgba(94, 234, 212, 0.1) !important;
    color: #07111f !important;
}

/* 1. CRÉATION D'UNE ZONE TAMPON POUR ÉVITER LA FERMETURE AU SURVOL */
.dropdown-mega-menu::before {
    content: "";
    position: absolute;
    top: -20px; /* Crée une zone de 20px au-dessus du menu */
    left: 0;
    right: 0;
    height: 20px;
    background: transparent; /* Invisible mais capte la souris */
}

/* 2. FORCE L'ALIGNEMENT EN HAUT */
.dropdown-mega-menu .row {
    display: flex !important;
    align-items: flex-start !important; /* Cale tout en haut */
}

/* 3. AJUSTEMENT DU CADRAGE DROIT (Rappel) */
@media (min-width: 992px) {
    .dropdown-mega-menu.mega-right {
        left: auto !important;
        right: 0 !important;
        transform: translateY(10px) !important; /* Un petit décalage vers le bas pour le style */
        margin-top: 0 !important;
    }
}

/* On s'assure que la colonne de gauche ne prend pas de hauteur inutile */
.bg-light-hover {
    display: block;
}