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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
  padding: 0;
  margin: 0;
  width: 100%;
  height:100%;
  color: #E1E1C2;
  font-size: clamp(23px, 1.5vw, 1.5vw);
  background-color: #0091CF;
}
button{
    font-size: clamp(18px, 1.3vw, 1.3vw);

}
#menu_logo{
  display: none;
}
#nav{
  width: 100%;
  height:100px;
  background-color: rgb(42 42 43);
  display: flex;
}
#right{
  width: 50%;
  display: flex;
  align-items: center;
  padding: 2%;
}
#left{
  width: 50%;
  display: flex;
  align-items: center;
  gap:5%;
  justify-content: end;
  padding-right: 2%;
}
.el_nav{
  font-weight: bold;
  cursor: pointer;
}
#masthead{
  width: 100%;
  height: 600px;
  padding-top: 5%;
  background-color: rgb(42 42 43);
  display: flex;
  position: relative;
}
.container_mast{
  height: 100%;
  position: relative;
  width: 100%;
}
.line_mast{
  width: 100%;
  height: 50%;
  display: flex;
  gap:2%;
  padding-left: 3%;
}
#jumper{
  position: absolute;
  width: 50%;
  right:10%;
}
.quadri{
  position: relative;
  background-color: rgb(255 83 44);
  transform: skew(-10deg) rotate(-10deg) translateY(-10%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1% 2% 1% 2%;
  opacity: 1;
  will-change: opacity, transform;
  z-index: 10;
  height:80%;
  font-size: clamp(25px, 7vw, 7vw);
  font-weight: bold;
  
}
.is_black {
    color: rgb(42, 42, 43);
}
#line_bottom{
  margin-top: 2%;
}

#first_content{
  margin-top: 5%;
  padding-left: 5%;
  position: relative;
  overflow-x: hidden;
}
.second_text{
  width: 60%;
}
.section{
  padding-left: 5%;
  width: 60%;
  position: relative;
}
button{
  border-radius: 5px;
  border: 1px solid rgb(42, 42, 43);
  padding: 2% 3% 2% 3%;
  background-color: transparent;
  color:white;
  letter-spacing: 1px;
}

.icone{
  width: 50px;
}
#lk{
  width: 40px;
}

#h_footer{
  padding-top: 1.5%;
  margin-left: 1%;
}


#footer{
  padding: 5% 0% 10% 0%;
  text-align: center;
  background-color: rgb(42 42 43);
  margin-top: 20%;
}
#reso{
  width: 100%;
  display: flex;
  gap:3%;
  justify-content: center;
  align-items: center;
  margin-top: 3%;
}
.container_btn{
  width: 100%;
  text-align: right;
}
#girl{
  position: absolute;
  opacity: 0.2;
  transform: scaleX(-1);
  right: -10%;
  top:25%;
  width: 70%;
}
#marco{
  position: absolute;
  opacity: 0.2;
  left: 25;
  top:-10%;
  width: 100%;
  transform: scaleX(-1);
  z-index: -1;
}

.overlay_mob {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* noir transparent */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999999;
}
#nav_mob{
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.is_white{
  color: white;
}





.is_orange{
  color: rgb(255 83 44);
}

.poppins-thin {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: italic;
}






@media (max-width: 1366px){
  #masthead{
      height: 450px;
  }
  .quadri{
    font-size: clamp(25px, 6vw, 6vw);
  }
}

@media (max-width: 1280px){
  .section{
    width: 80%;
  }
  .quadri{
    font-size: clamp(25px, 5vw, 5vw);
  }
  body{
    font-size: clamp(20px, 1.5vw, 1.5vw);
  }
  #masthead{
    height:350px;
  }
  button{
    font-size: 14px;
  }
  #marco{
    width: 60%;
  }
}
@media (max-width: 1176px){
  body{
    font-size: 18px;
  }
  button{
    font-size: 12px;
  }
}
@media (max-width: 1152px){
  button{
    font-size: 14px;
  }
}
@media (max-width: 890px){
  #masthead{
    height:300px;
  }

}

@media (max-width: 800px){
  body{
    font-size: 16px;
  }
  #masthead{
    height:250px;
  }
  button{
    font-size: 12px;
  }
}
@media (max-width: 750px){

  #masthead{
    height:250px;
    min-height: 250px;
  }
  body{
    font-size: 18px;
  }
  button{
    font-size: 14px;
  }
  .quadri{
    font-size: 45px;
  }
  #right{
    width: 10%;
    display: flex;
    justify-content: start;
    align-items: center;
  }
  .el_nav{
    display: none;
  }
  #menu_logo{
    display: block;
    width: auto;
    height: 25px;
  }
  #left{
    width: 90%;
    padding-right: 2%;
    display: flex;
    justify-content: end;
    align-items: center;
  }
  .second_text{
    width: 90%;
  }
  .section{
    width: 90%;
  }
  #first_content{
    padding-right: 5%;
  }
  #marco{
    display: none;
  }
  #girl{
    display: none;
  }
}

@media (max-width: 405px){
  .quadri{
    font-size: 38px;
  }

}