#nav{
  position: relative;
  height:8vh;
  background-color: white;
  color:white;
  display: flex;
  color:black;
  z-index: 20;
}
.nav_section{
  width: 50%;
  display: flex;
  align-items: center;
  gap:3%;
}
#right{
  padding-left: 2%;
}
#left{
  padding-right: 2%;
  text-align: right;
  justify-content: flex-end;
}
.el_nav, #img_logo_nav{
  cursor: pointer;
}

.el_nav{
  font-size: 1vw;
  font-size: clamp(14px, 1vw, 40px);
}
.el_nav_resp{
    font-size: 1.1vw;
    font-size: clamp(14px, 1.1vw, 40px);
}
.el_nav_sous{
  font-size: 1.1vw;
  font-size: clamp(13px, 1.1vw, 40px);
  cursor: pointer;
  transition: transform 0.5s ease;
}
#nav_container{
  position:sticky;
  top:0;
  width: 100%;
  height:100%;
  z-index: 20;
  background-color: transparent;
}


#sous_nav{
  border-top: 1px solid rgb(168, 168, 168);
  position: fixed;
  height: 7vh;
  color:white;
  display: flex;
  padding-right: 5%;
  padding-left: 2.5%;
  padding-top: 0.3%;
  width: 100%;
  gap:2%;
  justify-content: flex-start;
  align-items: center;
  background-color: rgb(64, 61, 61);
  border-bottom: 1px solid rgba(83, 83, 83, 0.371);
  transition: all 0.5s ease;
}

#img_logo_nav{
  width: auto;
  height:100%;
}







#nav_container_resp{
  display: none;
  position:sticky;
  top:0;
  width: 100%;
  height:100%;
  z-index: 20;
  background-color: transparent;
}
#icone_menu{
  width: 2.5vh;
  height:auto;
  margin-right: 3%;
  cursor: pointer;
}



#overlay_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255); /* Noir transparent */
  color: white;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.2s, transform 0.5s ease;
  overflow-y: scroll;
}
.play_over_nav{
  opacity: 1!important;
  visibility: visible!important;
}
.to_left{
  transform: translateX(-100%);
}
hr{
  background-color: gray;
  width:40%;
}
#container_over_nav{
  width: 80%;
  text-align: center;
}
.resp_nav_el{
  transform: translateX(-105%);
  transition: transform 0.5s ease;
}
#close_nav{
  position: absolute;
  right: 8%;
  top: 15%;
  width:4vh;
  height:auto;
  z-index: 5;
  cursor: pointer;
}
@media (max-width: 990px) {

  #nav_container{
    display: none;
  }
  #nav_container_resp{
    display: block;
  }
  #sous_nav{
    height: 5vh;
    gap:3%;
  }

}


@media (orientation: landscape) and (max-width: 768px) {
  #container_over_nav{
    padding-top: 15%;
    padding-bottom: 5%;
  }

}
@media (max-width: 348px) {
  .el_nav_resp {
      font-size: clamp(10px, 1.1vw, 40px)!important;
  }
    .el_nav {
      font-size: clamp(10px, 1.1vw, 40px)!important;
  }
  #sous_nav{
    
  }
}