body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
}

header {
    height: 100px;
    background-color:rgb(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
   
}
#h-b1{
   display: flex;
   align-items: center; 

}

 .h-a{
    color: white;
    font-family: 'Roboto';
    font-size: 17px;
    letter-spacing: 1px;
    z-index: 1;
    position: relative;
    
 }

 #h-logo{
    margin-left: 25px;
    margin-right: 25px;
    cursor: pointer;
   
 }

.h-div{
   justify-content: right;
}


 

 .h-nav{
    display: flex;
    
 }

 #btn-Votreespace{
   display: flex;
   justify-content: center; 
   align-items: center;
   background: white;
   color: black;
   width: 150px;
   height: 35px;
   border-radius: 2px;
   margin-right: 30px;
   padding-right: 15px;
   box-shadow: 5px 5px 0px #ee751b;
   position: relative;


 }

 #btn-Votreespace:hover{
   background:#ee751b;
   color: white;
   box-shadow: 5px 5px 0px #ffffff;
   cursor: pointer;

 }


 #btn-Votreespace:hover #h-cadenanoir{
  opacity: 0%;
 }

 #h-cadenablanc{
  position: absolute;
  opacity: 0%;
  left:0;
 }

 #btn-Votreespace:hover #h-cadenablanc{
  opacity: 100%;
 }

 #btn-Votreespace img {
   margin-right: 10px;
 }

 .sous-trait{
   height: 5px;
   background-color: #ee751b;
   margin-top: -6px;
   transform:scaleX(0);
   transition: all 200ms;

 }

 .nav-link{
   margin: 25px;

 }
 .nav-link a {
   padding-left: 5px;
   padding-right: 5px;
   text-decoration: none;

 }

 .nav-link a:hover + .sous-trait{
  transform: scaleX(1);
  
 } 

 @media screen and (width > 577px){
  #mobile {
    display: none;
  }
 }
 
 @media screen and (width < 576px){
    #desktop {
      display: none;
  }
 }