/* --- Base Styles --- */
/* Import d'une police élégante (remplacez-la par une police de votre choix) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* Déclaration de la police Neuropol Custom */
@font-face {
    /* C'est le nom que vous utiliserez dans les autres règles CSS (ex: .hero-title) */
    font-family: 'Neuropol Custom';

    /* Chemin vers votre fichier de police.
       Le chemin '../fonts/' est correct si votre fichier CSS est dans 'assets/css/' 
       et votre police dans 'assets/fonts/' */
    src: url('https://assets.team-réality.com/assets/fonts/neuropol/Neuropol X Rg.otf') format('opentype');

    font-weight: normal;
    font-style: normal;
    /* Indique au navigateur de charger la police en priorité ou d'utiliser une alternative temporaire */
    font-display: swap;
}

*, ::before, ::after{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}
body{
    overflow-x: hidden;
}

@media screen and (min-width : 0px){
    .menu_wrapper{
        min-width: 10vw;
        width: 100vw;
        height: 75px;
    }
    .menu_wrapper .scrolled{
        position: fixed;
    }
    .menu_wrapper > .menu_container{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .menu_wrapper > .menu_container > a > img{
        width: 75px;
        height: 100%;
    }
    .menu_wrapper > .menu_container > .menu_bars{
        font-size: 2rem;
        color: black;
        margin-right: 20px;
    }
    .menu_navbar_wrapper{
        display: none;
    }
    .menu_side_wrapper{
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: black;
        transform: translateX(-100%);
        overflow: scroll;
    }
    .open .menu_side_wrapper{
        transform: translateX(0%);
        position: fixed;
    }
    .menu_side_container{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .menu_side_container > ul{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .menu_side_container > ul > li{
        font-size: 2rem;
        font-family: 'Neuropol Custom';
        margin: 10px 0px;
    }
    .menu_side_container > ul > li > a{
        color: white;
    }
    .menu_side_container > ul > li > a.active{
        color: blue;
    }
    .menu_side_cross{
        width: 100%;
        height: 75px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .menu_side_cross > img{
        width: 75px;
        height: 100%;
    }
    .menu_side_cross > .menu_cross{
        font-size: 2rem;
        color: white;
        margin-right: 20px;
    }
}

@media screen and (min-width: 1024px){
    /*HEADER*/
    .menu_wrapper{
        min-width: 10vw;
        width: 100vw;
        height: 75px;
    }
    .menu_wrapper > .menu_container{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .menu_wrapper > .menu_container > img{
        width: 75px;
        height: 100%;
    }
    .menu_container > .menu_bars{
        display: none;
    }
    .menu_side_wrapper{
        display: none;
    }
    .menu_navbar_wrapper{
        width: 100%;
        height: 100%;
        display: block;
    }
    .menu_navbar_container{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .menu_navbar_container > ul{
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .menu_navbar_container > ul > li{
        margin: 0px 20px;
        font-size: 1rem;
        font-family: 'Neuropol Custom';
    }
    .menu_navbar_container > ul > li > a{
        color: black;
    }
    .menu_navbar_container > ul > li > a.active{
        color: blue;
    }
}