/* Barre de navigation commune (reprise de epreuves.css), pour les pages dont la feuille n'en contient pas une complète (Connexion). */
nav{

    position: fixed;

    top: 0;

    left: 0;

    height: 70px;

    width: 100%;

    background-color: var(--nav-color);

    z-index: 100;

}

body.dark nav{

    border: 1px solid #393838;

}

nav .nav-bar{

    position: relative;
    height: 100%;
    max-width: 1000px;
    width: 100%;
    background-color: var(--nav-color);
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

nav .nav-bar .sidebarOpen{

    color: var(--text-color);

    font-size: 25px;

    padding: 5px;

    cursor: pointer;

    display: none;

}

nav .nav-bar .logo a{

    font-size: 25px;

    font-weight: 500;

    color: var(--text-color);

    text-decoration: none;

}

.menu .logo-toggle{

    display: none;

}

.nav-bar .nav-links{

    display: flex;

    align-items: center;

}

.nav-bar .nav-links li{

    margin: 0 5px;

    list-style: none;

}

.nav-links li a{

    position: relative;

    font-size: 17px;

    font-weight: 400;

    color: var(--text-color);

    text-decoration: none;

    padding: 10px;

}

.nav-links li a::before{

    content: '';

    position: absolute;

    left: 50%;

    bottom: 0;

    transform: translateX(-50%);

    height: 6px;

    width: 6px;

    border-radius: 50%;

    background-color: var(--text-color);

    opacity: 0;

    transition: all 0.3s ease;

}

.boitePrincipale {
    color: var(--dark);
    
}

.nav-bar .darkLight-searchBox {
    display: flex;
    align-items: center;
}

.darkLight-searchBox .dark-light,

.darkLight-searchBox .searchToggle{

    height: 40px;

    width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 5px;

}

.dark-light i,

.searchToggle i{

    position: absolute;

    color: var(--text-color);

    font-size: 22px;

    cursor: pointer;

    transition: all 0.3s ease;

}

.dark-light i.sun{

    opacity: 0;

    pointer-events: none;

}

.dark-light.active i.sun{

    opacity: 1;

    pointer-events: auto;

}

.dark-light.active i.moon{

    opacity: 0;

    pointer-events: none;

}
@media (max-width: 790px) {
    nav .nav-bar .sidebarOpen{

        display: block;

    }

    .menu{

        position: fixed;

        height: 100%;

        width: 320px;

        left: -100%;

        top: 0;

        padding: 20px;

        background-color: var(--side-nav);

        z-index: 100;

        transition: all 0.4s ease;

    }

    nav.active .menu{

        left: -0%;

    }

    nav.active .nav-bar .navLogo a{

        opacity: 0;

        transition: all 0.3s ease;

    }

    .menu .logo-toggle{

        display: block;

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

    .logo-toggle .siderbarClose{

        color: var(--text-color);

        font-size: 24px;

        cursor: pointer;

    }

    .nav-bar .nav-links{

        flex-direction: column;

        padding-top: 30px;

    }

    .nav-links li a{

        display: block;

        margin-top: 20px;

    }

   

}