/* --- BARRE DE NAVIGATION GLASSMORPHISM --- */
header.header.container-header.full-width.position-sticky.sticky-top {
    background-color: rgba(30, 27, 75, 0.75) !important; /* Bleu Marine transparent (assorti à votre logo) */
    backdrop-filter: blur(15px) !important; /* L'effet de flou */
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

/* --- LIENS DU MENU (Cyan de Jvisual harmonisé) --- */
/* On cible précisément la structure vue dans votre inspection Image 9 */
.metismenu.mod-menu li a, 
.metismenu.mod-menu li span,
#navbar1 .nav-link {
    color: #72c0f1 !important; /* Le bleu cyan que vous avez choisi */
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Améliore la lisibilité sur le flou */
}

/* --- EFFET AU SURVOL DES LIENS --- */
.metismenu.mod-menu li a:hover {
    color: #ffffff !important; /* Devient blanc pur au survol */
    transform: translateY(-2px) !important;
}

/* --- PETITE BARRE DE SOULIGNEMENT SOUS L'ITEM ACTIF --- */
.metismenu.mod-menu li.active > a::after {
    content: '';
    display: block;
    width: 20px;
    height: 3px;
    background: #72c0f1;
    margin: 4px auto 0;
    border-radius: 10px;
}


/* --- ANIMATION ÉTOILES FILANTES VERSION FORCÉE --- */
.star-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 150px !important; /* Force la visibilité */
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 9999 !important; /* Passe devant absolument TOUT */
}

.star {
    position: absolute;
    background: linear-gradient(90deg, #ffffff, transparent);
    height: 3px;
    filter: drop-shadow(0 0 12px #72c0f1) brightness(1.5);
    border-radius: 100%;
    opacity: 0;
}

@keyframes shooting-star {
    0% {
        transform: translate(-10%, 100%) rotate(var(--angle)) scale(0.1);
        opacity: 0;
    }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% {
        transform: translate(110vw, -10%) rotate(var(--angle)) scale(0.1);
        opacity: 0;
    }
}


/* --- LE CIEL (CONTENEUR) --- */
.star-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1; /* Derrière votre logo et menu */
}

/* --- L'ÉTOILE DE BASE --- */
.shooting-star {
    position: absolute;
    background: linear-gradient(90deg, #ffffff, transparent);
    border-radius: 100%;
    opacity: 0;
    filter: drop-shadow(0 0 10px #72c0f1);
}

/* --- L'ANIMATION UNIQUE --- */
@keyframes fly {
    0% {
        transform: translate(var(--startX), var(--startY)) rotate(var(--angle)) scale(0);
        opacity: 0;
    }
    15% {
        opacity: var(--brightness);
        transform: translate(var(--midX), var(--midY)) rotate(var(--angle)) scale(var(--size));
    }
    85% {
        opacity: var(--brightness);
    }
    100% {
        transform: translate(var(--endX), var(--endY)) rotate(var(--angle)) scale(0);
        opacity: 0;
    }
}


/* Conteneur invisible sur toute la page */
.space-container {
    position: fixed; /* Couvre tout l'écran */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999; /* Par-dessus tout */
    overflow: hidden;
}

.random-star {
    position: absolute;
    background: linear-gradient(90deg, #ffffff, transparent);
    border-radius: 2px;
    opacity: 0;
    filter: drop-shadow(0 0 10px #72c0f1);
    /* Animation de scintillement en plus du déplacement */
    animation: shooting-animation var(--duration) linear var(--delay) infinite;
}

@keyframes shooting-animation {
    0% {
        transform: translate(var(--startX), var(--startY)) rotate(var(--angle)) scale(0);
        opacity: 0;
    }
    10% {
        opacity: var(--brightness);
        transform: translate(calc(var(--startX) + 10vw), calc(var(--startY) - 5vh)) rotate(var(--angle)) scale(1);
    }
    50% {
        /* Effet de brillance max au milieu */
        filter: drop-shadow(0 0 15px #ffffff) drop-shadow(0 0 20px #72c0f1);
    }
    90% {
        opacity: var(--brightness);
    }
    100% {
        transform: translate(var(--endX), var(--endY)) rotate(var(--angle)) scale(0.1);
        opacity: 0;
    }
}

/* Conteneur sur toute la page */
.star-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* L'étoile ronde */
.magic-star {
    position: absolute;
    background: #ffffff;
    border-radius: 50%; 
    opacity: 0;
    box-shadow: 0 0 10px 2px #ffffff, 0 0 18px 5px #72c0f1;
    animation: slow-travel var(--duration) linear var(--delay) infinite;
}

/* Animation : Déplacement lent + Changement de taille + Clignotement */
@keyframes slow-travel {
    0% {
        transform: translate(var(--startX), var(--startY)) scale(0.1);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translate(calc(var(--startX) + 5vw), calc(var(--startY) - 5vh)) scale(0.5);
    }
    30%, 50%, 70% { 
        opacity: 0.4; 
        transform: translate(var(--midX), var(--midY)) scale(var(--size));
    }
    40%, 60%, 80% { 
        opacity: 1; 
        box-shadow: 0 0 20px 8px #ffffff, 0 0 30px 10px #72c0f1;
    }
    100% {
        transform: translate(var(--endX), var(--endY)) scale(0.1);
        opacity: 0;
    }
}