* {
  box-sizing: border-box; /* Applique à tous les éléments */
}

html {
  scroll-behavior: smooth;
}

body{
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  height:100%;
  color: white;
  font-size: 1.1vw;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#masthead{
  position:relative;
  width: 100%;
  padding-bottom: 8%;
}
.scheduls{
  overflow: hidden;
}
.shed{
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

#top_contact{
  position: relative;
  height:8vh;
  width: 100%;
}
#medium_contact{
  height:fit-content;
  width: 100%;
  display: flex;
  padding-left: 2%;
  padding-top: 2%;
}

#right_medium{
  width: 30%;
  height:100%;
}
#left_medium{
  width: 70%;
  height:100%;
  padding-left: 15%;
}
.container_inputs{
  display: flex;
  width: 100%;
}
.container_inputs:not(:first-child){
  margin-top: 5%;
}
.field{
  width: 50%;
}




#titre_top{
  height:100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 2%;
}
#sep_contact{
  background-color: #DA6416;
  margin-left: 2%;
  height:2px;
  margin-bottom: 1%;
  margin-top: -0.5%;
}
#contact{
  position: relative;
  width: 70%;
  height:100%;
  margin-top: 10%;
  margin-left: 15%;
}

#titre_top_resp{
  display: none;
  height: fit-content;
  width: 100%;
  padding-left: 2%;
}

@media (max-width: 768px) {


  #masthead{
    margin-top: 20%;
    padding-bottom: 15%;
  }
  #titre_top{
    display: none;
  }
  #titre_top_resp{
    display: block;
  }
  #medium_contact{
    display: block;
  }
  #right_medium{
    width: 100%;
  }
  #left_medium{
    width: 100%;
    padding-left: 0;
    margin-top: 10%;
  }
  #contact{
    margin-left: 5%;
  }
}


@media (orientation: landscape) and (max-width: 768px) {

  #masthead{
    margin-top: 5%!important;
    height:100%;
  }
  #left_medium{
    margin-top: 5%!important;
  }
  #right_medium{
    margin-top: 2%!important;
  }
  .container_inputs:not(:first-child){
    margin-top: 2%!important;
  }
  #contact{
    width: 90%!important;
  }
}


@media (max-width: 534px) {

  .field{
    width: 50%;
  }
  #contact{
    width: 100%;
    margin-left: 0;
    padding-left: 5%;
  }

}