/* NAVEBARRE */
#nav{
    position: fixed;
    width: 100%;
    height: 14svh;
    min-height: 100px;
    background-color:#bac59f;
    color:white;
    z-index: 9999;
}
#bandeau{
    width: 100%;
    height:6vh;
    min-height: 30px;
    background-color: #a0aa86;
    display: flex;
    justify-content: center;
    align-items: center;
}
.el_nav{
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#in_nav{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:3%;
    height:100%;
    position: absolute;
    top:0;
    width: 100%;
    padding-top: 6vh;
}
#brand{
    position: absolute;
    left:5%;
}
#container_logo_nav{
    position: absolute;
    right: 5%;
    display: flex;
    justify-content: center;
    align-items: end;
    gap:20%;
    width: 20%;
}
.container_icone{
    display: flex;
    justify-content: center;
    position: relative;

}
#flag{
    align-items: center;
    gap:10px;
}
.icone_nav{
    width: 2vw;
    min-width: 15px;
    height:auto;
    cursor: pointer;
    user-select: none;
}
#add_card{
    border-radius: 50%;
    width: 20px;
    height:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
    color:red;
    position: absolute;
    right: -10px;
    top:-10px;
    font-weight: bold;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* */
#contianer_nav_info{
    position: relative;
    width: 100%;
}
.nav_infos{
    width: 100%;
    height: 0px;
    transition: height 0.5s ease;
    margin-top: 2svh;
    position: absolute;
}
.to_height_nav{
    height : 300px;
}
#nav_prod{
    background-color:#647240;
}
#nav_accompte{
    background-color:#aed844;
}
#nav_card{
    background-color:#87a53b;
}




@media (max-width: 1176px) and (max-height: 664px) {
    #nav{
        height: 10svh;
        min-height: 85px;
    }
}
@media (max-width: 800px){
    #nav{
        height: 100px;
        min-height: 100px;
    }
    .nav_resp{
        display: none;
    }
    .icone_nav{
        min-width: 18px;
    }
}

@media (max-width: 500px){
    .icone_nav{
        min-width: 20px;
    }
    #brand{
        left:2%;
    }
    #container_logo_nav{
        right: 4%;
    }
}