#headerNav {
  position: relative;
  height: auto;
  width: 100%;
  flex: 0 0 auto;
  z-index: 1000 !important;
}
.logo-header{
  position:absolute;
  top: 1em;
    margin-left: 3em;
    background: #fff;
    border-radius: 14px;
}

nav{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
 justify-content: center;
 flex-direction: row;
 display: flex;
  align-items: center;
  margin-top: 2em;
  

}
nav a{
  font-size: 18px !important;
  text-transform: uppercase !important;
  font-weight: 500;
}
/*on vient cacher le burger menu en version telephone*/
.nav .icon{
  display: none;
}


nav .dropdown-1{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;

}
.navLink{
  font-family:"Cambria";
  margin: 0 35px; 
  color: black;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.15em;
}
.navLink:hover{
  text-decoration: none;
  color: #eb7454;
 
}

.navLink:active{
  text-decoration: none;
  color: #eb7454;
}
/*petit ecran de pc*/
@media(max-width:1360px)  {
  nav > a, 
  nav button{
      display: none;
  }
  .logo-header{
    width: 22%;
    margin-left:2em;
  }
  .navLink:active{
    font-weight: 700;
    color: #000000;
  }
  .nav .icon{
      display: block ;
      position: relative;
      left: 84%;
      width: 10%  !important;
      text-align: center !important;
      padding: 0 !important;
      text-decoration: none;
      font-size:45px !important;
      top: 3px;
  }
  nav.responsive{
    background-color: #eeeeee;
  }
  nav.responsive :hover{
    color: #eb7454;
  }
  nav{
      flex-direction: column;
      height: auto;
      min-height: 70px;
      align-items: flex-start;
      position: absolute;
      justify-content: flex-start !important;
      margin-top: 0.45em !important;
  }
  #headerNav{
    height: 88px !important;
  }
 
  nav.responsive button{
      display: block;
  }
  nav.responsive > a, 
  nav.responsive button{
      display: block;
      padding: 10px 0;
      width: 100%;
      text-align: left;
      
  }
  
  nav.responsive > a, 
  nav.responsive .dropdown-1{
      display: block;
      padding: 10px 0;
      width: 90%;
      /*text-align: left;*/
  }
  nav .dropdown-1:hover .content1,  nav .dropdown-1:hover .content2{
      display: block;
      display: flex;
      flex-direction: column;
      background-color: #eb7454;
      position: absolute;
      top:50px;
      width: 220%;
      box-shadow: none
  
  }
  .content2 > a.navLink, .content1 > a.navLink {
      margin: 0 20px;
  }

  nav .dropdown-1:hover .content1,  nav .dropdown-1:hover .content2{
      position: relative;
      width: 100%;
      top: 0;
  }
  

}
/*tablette*/
@media(max-width:950px)  {
  nav > a, 
  nav button{
      display: none;
  }
  .logo-header{
    width: 22%;
    margin-left:2em;

  }
  .nav .icon{
      display: block ;
      position: relative;
      left: 85%;
      width: 10%  !important;
      text-align: center !important;
      padding: 0 !important;
      text-decoration: none;
      font-size:40px !important;
      top: 20px;
  }
  nav{
      flex-direction: column;
      height: auto;
      min-height: 70px;
      align-items: flex-start;
      position: absolute;
      justify-content: flex-start !important;
      margin-top: 2.5em !important;
  }
  #headerNav{
    height: 117px !important;
  }
  nav.responsive{
    background-color: #eeeeee;
  }
  nav.responsive :hover{
    color: #eb7454;
  }
  nav.responsive button{
      display: block;
  }
  nav.responsive > a, 
  nav.responsive button{
      display: block;
      padding: 10px 0;
      width: 100%;
      text-align: left;
      
  }
  
  nav.responsive > a, 
  nav.responsive .dropdown-1{
      display: block;
      padding: 10px 0;
      width: 90%;
      /*text-align: left;*/
  }
  nav .dropdown-1:hover .content1,  nav .dropdown-1:hover .content2{
      display: block;
      display: flex;
      flex-direction: column;
      background-color: #eb7454;
      position: absolute;
      top:50px;
      width: 220%;
      box-shadow: none
  
  }
  .content2 > a.navLink, .content1 > a.navLink {
      margin: 0 20px;
  }

  nav .dropdown-1:hover .content1,  nav .dropdown-1:hover .content2{
      position: relative;
      width: 100%;
      top: 0;
  }
  

}
@media (max-width:600px) and (min-width:320px) {
  nav > a, 
  nav button{
      display: none;
  }
  .logo-header{
    width: 24%;
    margin-left:1em;

  }
  .nav .icon{
      display: block ;
      position: relative;
      left: 84%;
      width: 10%  !important;
      text-align: center !important;
      padding: 0 !important;
      text-decoration: none;
      top: 8px;
      font-size: 36px !important;
  }
  nav{
    flex-direction: column;
    height: auto;
    min-height: 70px;
    align-items: flex-start;
    position: absolute;
    justify-content: flex-start !important;
    margin-top: 0.5em !important;
}
  #headerNav{
    height: 75px !important;
  }
  nav.responsive button{
      display: block;
  }
  nav.responsive > a, 
  nav.responsive button{
      display: block;
      padding: 10px 0;
      width: 100%;
      text-align: left;
  }
  nav.responsive{
    background-color: #eeeeee;
  }
  nav.responsive :hover{
    color: #eb7454;
  }
  nav.responsive > a, 
  nav.responsive .dropdown-1{
      display: block;
      padding: 10px 0;
      width: 90%;
      /*text-align: left;*/
  }
  nav .dropdown-1:hover .content1,  nav .dropdown-1:hover .content2{
      display: block;
      display: flex;
      flex-direction: column;
      background-color: #eb7454;
      position: absolute;
      top:50px;
      width: 220%;
      box-shadow: none
  
  }
  .content2 > a.navLink, .content1 > a.navLink {
      margin: 0 20px;
  }

  nav .dropdown-1:hover .content1,  nav .dropdown-1:hover .content2{
      position: relative;
      width: 100%;
      top: 0;
  }
  
  
}
@media (max-width:380px) {
  .logo-header {
    width: 28%;
    margin-left: 0.5em;
    top:1.3em;
}
  
}