/* Clean Minimalist Navbar Style - White Theme */

:root {
    --primary-color: #ff9933;
    /* Solvay Orange - softer tone */
    --header-text: #2c3e50;
    --subheader-text: #7f8c8d;
    --link-text: #95a5a6;
    --link-hover: #2c3e50;
    --bg-color: #ffffff;
    --transition-speed: 0.3s;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #F8F8F8;
}

/* Header Bar */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none !important;
    /* Remove shadow for cleaner look with transparency, or keep if preferred. User didn't specify shadow, but usually shadow on transparent looks weird. */
    /* Wait, original had shadow. Let's keep it subtle or remove? */
    /* "Met le avec une légère couleur noire mais ça doit être flou et on doit ver 90% de ce qu'il y a derrière" */
    /* Shadow might interfere with the look. I will remove it or make it very subtle. */
    /* Let's try without shadow first as it's cleaner for this style. */
    padding: 20px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Optional: slight border to define edge? or nothing. */
}

.nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1400px;
}

.logo-solvay img {
    height: 40px;
    width: auto;
    /* Invert logo color if it's black, but it's likely an image. 
       If it's a black logo on transparent, it might be invisible on black bg.
       The user said "Le haut doit être en noir". 
       The logo in the first image is white/light. 
       The current logo is `img/cs-logo.png`. 
       I'll assume it works or I might need a filter. 
       Let's add a filter just in case if it's black. 
       But usually logos have versions. 
       The user didn't ask to change the logo image in the navbar, just the background.
       Wait, the first image shows a white logo. 
       If the current logo is black, I might need `filter: invert(1);` or similar.
       Let's assume for now it's fine or I'll check later.
    */
}

.nav-links-desktop {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links-desktop a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    /* SemiBold */
    font-size: 16px;
    transition: opacity 0.2s;
}

.nav-links-desktop a:hover {
    opacity: 0.8;
}

.lang-select {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

.lang-select option {
    background: #000000;
    color: #ffffff;
}

.mobile-only {
    display: none;
}

@media (max-width: 1024px) {
    .nav-links-desktop {
        display: none;
    }

    .mobile-only {
        display: flex;
    }

    .mobile-lang-select {
        color: #000;
        border: 1px solid #ccc;
        width: 100%;
        padding: 10px;
        background: #fff;
    }

    .mobile-lang-select option {
        background: #fff;
        color: #000;
    }
}

/* Header Links & Icons */
.nav-links-desktop a {
    color: #ffffff;
}

.nav-item svg {
    stroke: #ffffff;
    /* Assuming icons use stroke */
}

.lang-select {
    color: #ffffff;
    border-color: #ffffff;
}

/* Dark Mode for Header */
body.dark-mode header,
header.dark-mode {
    background: #000000 !important;
    color: #ffffff;
}

body.dark-mode .nav-links-desktop a,
header.dark-mode .nav-links-desktop a {
    color: #ffffff;
}

body.dark-mode .nav-item svg,
header.dark-mode .nav-item svg {
    stroke: #ffffff;
}

body.dark-mode .lang-select,
header.dark-mode .lang-select {
    color: #ffffff;
    border-color: #ffffff;
}

/* Icons container (Lock + Burger) */
.nav-item {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

/* Grossissement des icônes au survol */
.nav-item svg {
    transition: transform 0.2s cubic-bezier(.4, 0, .2, 1);
}

.nav-item:hover svg {
    transform: scale(1.18);
}

/* Main Navigation Overlay */
.navbar {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: #ffffff;
    z-index: 999;

    padding: 40px 80px;
    box-sizing: border-box;
    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
}

.navbar.active {
    opacity: 1 !important;
    visibility: visible !important;
    /* When active, ensure it's solid white so we don't see through */
    background-color: #ffffff !important;
}

/* Layout pour les catégories */
.navbar-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
}

.navbar-category {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Style des liens de catégorie */
.navbar-category a {
    text-decoration: none;
    color: var(--header-text);
    /* Couleur par défaut (Gris foncé) */
    padding-left: 0;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    display: block;
    /* Important pour le padding et la bordure */
}

.navbar-category a:hover {
    color: var(--primary-color);
    /* Orange */
    padding-left: 10px;
    /* Décale le texte vers la droite */
    border-left: 3px solid var(--primary-color);
    /* Barre latérale orange */
}

/* Dynamic Content Layout */
.navbar-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-end;
    gap: 30px;
    min-width: 250px;
}

.socials {
    display: flex;
    gap: 15px;
}

.socials img {
    height: 32px;
    /* Slightly larger */
    width: auto;
    /* Default: Black logos if theme is light */
    /* If images are colored, use grayscale + brightness 0 for black */
    filter: brightness(0);
    transition: filter 0.3s;
}

/* ACE Link */
.ace-membership {
    text-align: right;
}

.ace-link {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.ace-link span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--header-text);
}

.ace-link img {
    height: 50px;
    width: auto;
}

/* Dark Mode Support */
body.dark-mode .navbar,
header.dark-mode .navbar {
    background-color: #000000;
    color: #ffffff;
}

body.dark-mode .navbar-category a,
header.dark-mode .navbar-category a,
body.dark-mode .ace-link span,
header.dark-mode .ace-link span {
    color: #ffffff;
}

body.dark-mode .socials img,
header.dark-mode .socials img {
    filter: brightness(0) invert(1);
    /* White */
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.01);
    z-index: 998;
    display: none;
}

.overlay.active {
    display: block;
}

/* Responsive */
@media (max-width: 1024px) {
    .navbar {
        padding: 40px;
    }

    .navbar-wrapper {
        flex-direction: column-reverse;
    }

    .navbar-extras {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }

    .socials {
        order: 2;
    }

    .ace-membership {
        order: 1;
        text-align: left;
        align-items: flex-start;
    }

    .ace-link {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .navbar {
        top: 70px;
        height: calc(100vh - 70px);
        padding: 20px;
    }

    .navbar-categories {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Subtitle style for Quadrimestre */
.nav-subtitle {
    display: block;
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-bottom: 8px;
    font-weight: 500;
}