/* ========================================================================== 
   NAVBAR MODERNE (Header, Nav, Menu Mobile)
   ========================================================================== */

/* --- En-tête principal --- */
header {
    background: rgba(15, 23, 42, 0.8); /* Fond bleu nuit semi-transparent */
    backdrop-filter: blur(10px); /* Effet de flou pour un look moderne */
    padding: 12px 0;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 1000;
}

/* Conteneur nav */
header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Logo */
.logo img {
    height: 48px;
    transition: transform 0.3s ease;
}
.logo:hover img {
    transform: scale(1.08);
}

/* --- Liens bureau --- */
nav ul.desktop-links {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0; padding: 0;
}
nav ul.desktop-links a, .nav-links-mobile a {
    color: var(--light-bg); /* Liens en blanc par défaut */
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}
nav ul.desktop-links a:not(.active)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: var(--primary-blue);
    transition: all 0.3s ease;
}
nav ul.desktop-links a:hover::after {
    width: 100%; left: 0;
}
nav ul.desktop-links a:hover,
nav ul.desktop-links a.active {
    color: var(--primary-blue); /* Couleur bleue au survol/actif */
    font-weight: 600;
}

/* --- Menu Hamburger --- */
.menu-burger {
    display: none;
    width: 32px; height: 24px;
    cursor: pointer;
    position: relative;
    z-index: 1002;
}
.menu-burger .bar {
    position: absolute;
    right: 0; /* Alignement à droite pour un meilleur effet asymétrique */
    height: 3px;
    background: var(--light-bg); /* Barres du burger en blanc */
    border-radius: 3px;
    transition: all 0.35s ease;
}
/* --- Nouvelles largeurs pour un design asymétrique --- */
.bar1 { top: 0; width: 100%; }
.bar2 { top: 50%; transform: translateY(-50%); width: 75%; }
.bar3 { bottom: 0; width: 50%; }

/* --- Menu mobile --- */
.nav-links-mobile {
    position: fixed;
    top: 0; left: -100%;
    width: 100%; height: 100vh;
    background: rgba(15, 23, 42, 0.98); /* Fond bleu nuit presque opaque */
    backdrop-filter: blur(10px);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    transition: left 0.4s ease;
    z-index: 1001;
    padding: 20px;
    box-sizing: border-box;
}
.nav-links-mobile.active { left: 0; }
.nav-links-mobile a {
    font-size: 1.6em;
    margin: 12px 0;
}
.nav-links-mobile a:hover {
    color: var(--primary-blue);
}

/* --- Bloquer scroll quand menu ouvert --- */
body.no-scroll { overflow: hidden; }

/* --- Responsive --- */
@media (max-width: 992px) {
    nav ul.desktop-links { display: none; }
    .menu-burger { display: block; }
    .nav-actions a.primary { display: none; }
}

/* Styles pour le QR Code dans la nav (si nécessaire) */
#nav-qrcode-container {
    position: relative;
}
#nav-qrcode-popup {
    display: none;
    position: absolute;
    right: 0; top: 120%;
    width: 150px; padding: 10px;
    background: var(--luminous-white); border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* ==================================================================
   AMÉLIORATION DU MENU MOBILE LATÉRAL (SIDENAV)
   ================================================================== */

/* --- Le panneau latéral (Sidenav) --- */
.mobile-sidenav {
    height: 100%;
    width: 0; /* Commence fermé */
    position: fixed; 
    z-index: 1002; /* Au-dessus de l'overlay */
    top: 0;
    right: 0; /* Positionné à droite */
    background-color: #0f172a; /* Fond bleu nuit, cohérent avec le thème */
    overflow-x: hidden;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animation de glissement plus douce */
    padding-top: 60px;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3); /* Ombre pour donner de la profondeur */
}

/* --- Liens dans le Sidenav --- */
.mobile-sidenav a {
    padding: 12px 15px 12px 32px;
    text-decoration: none;
    font-size: 1.1em; /* Taille de police légèrement augmentée */
    font-weight: 500;
    color: var(--text-secondary);
    display: block;
    transition: background-color 0.3s, color 0.3s, padding-left 0.3s;
    border-bottom: 1px solid var(--border-color); /* Ligne de séparation subtile */
}

/* --- Effet au survol/focus des liens --- */
.mobile-sidenav a:hover, .mobile-sidenav a:focus {
    background-color: var(--primary-blue);
    color: var(--luminous-white);
    padding-left: 40px; /* Léger décalage pour l'effet */
}

/* --- Bouton de fermeture (la croix) --- */
.mobile-sidenav .close-btn-mobile {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 36px;
    color: var(--text-secondary);
    border-bottom: none; /* Pas de bordure pour le bouton de fermeture */
    padding: 0;
    transition: transform 0.3s, color 0.3s;
}

.mobile-sidenav .close-btn-mobile:hover {
    color: var(--luminous-white);
    transform: rotate(90deg) scale(1.1);
    background-color: transparent; /* Annule l'effet de survol des autres liens */
    padding-left: 15px; /* Annule le décalage */
}