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

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

}
body{
  position: relative;
  width: 100%;
  height:100%;
  color:rgb(0, 0, 0);
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  font-size: 1.2vw;
  overflow-x: hidden;
}
#page{
  position: relative;
  width: 100%;
  height:100%;
}

#nav{
  width: 100%;
  height:10svh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:3%;
  background-color: beige;
  position: fixed;
  z-index: 2;
  top:0;
}
.el_nav{
  cursor: pointer;
}
.section_service{
  width: 100%;
  height:75svh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  cursor: pointer;
}
#bottom_first{
  bottom: 2%;
  display: flex;
  width: 100%;
  padding-left: 2%;
  gap:2%;
  margin-top: 2%;
  justify-content: center;
  align-items: center;
}
.is_bold{
  font-weight: bold;
}
.info_left{
  position: absolute;
  left:9%;
  bottom: 25%;
  width: 30%;
  height:15svh;
}
.info_right{
  position: absolute;
  right:0%;
  top: 0%;
  width: 30%;
  height:100%;
  padding-left: 15%;
  background: linear-gradient(to left,
   rgba(0, 0, 0, 0.341), 
   rgba(0, 0, 0, 0.089));
  padding-top: 11%;
  color:white;
}
.inline{
  width: 100%;
  display: flex;
  gap:3%;
  margin-top: 1%;
  opacity: 0;
  transition: transform 0.5s ease,
  opacity 0.5s ease;
  transform: translateX(-5%);
}
.icone_r{
  width:10%;
  height:5svh;
}
.icone{
  width:6%;
  height:5svh;
}
.icone_txt{
  padding-top: 1%;
}
.icone_img{
  width: 90%;
  height: auto;
}

.is_container_picture{
  padding-left: 3%;
  padding-top: 2%;
}
#section0{
  margin-top: 5%;
  background-image: url('/static/images/velo/aa.webp');
}
#titre_section0{
  margin-top: 3%;
}
#section1{
  margin-top: 8%;
  background-image: url('/static/images/velo/a.webp');
  background-repeat: no-repeat;
}
#section2{
  background-image: url('/static/images/velo/e.webp');
  background-size: cover;

}
#section3{
  background-image: url('/static/images/velo/ff.webp');
  background-size: cover;
  background-position: 0% 17%;
}
#section4{
  background-image: url('/static/images/velo/h.webp');
  background-size: cover;
  background-position: 0% 90%;
}
.btn_right{
  position: absolute;
  bottom: 5%;
  right:3%;
  
}

.svg_mast{
  position: absolute;
  top:0;
  left:0;
  
}
.line_mast{
  opacity: 0;
  transition: opacity 0.5s ease;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.is_right{
  float: right;
  margin-right:3%;
}
.btn_left{
  position: absolute;
  bottom: 5%;
  left:3%;
  
}




#mastead{
  width: 100%;
  height:100svh;
}


#under_velo{
  width: 100%;
  height:fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:3%;
  margin-top: 3%;
}
.text_abs{
  width: 35%;
  position: absolute;
}

#text1{
  right: -20%;
  top:8%;
  width: 40%;
}
#text2{
  left: -15%;
  top:27%;
}
#text3{
  right: -35%;
  top:65%;
}






#container_velo{
  width: 50%;
  height:70svh;
  margin-left: 25%;
  position: relative;
}
.composante{
  position: absolute;
  transition: transform 1s ease;
  width: 100%;
  height:auto;
}

.line{
  position: absolute;
}


.line{
  position: absolute;
}


.line_svg{
  stroke-dasharray: 5;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
} 



#about{
  position: relative;
  width: 100%;
  height:50svh;
  padding-top: 5%;
  padding-left: 5%;
}
#end_about{
  position: relative;
  width: 60%;
  padding-left: 5%;
  height:fit-content;
  margin-top: 5%;
}
.text_about{
  width: 60%;
  height:fit-content;
  position: absolute;
}
#titre_contact{
  padding-top: 5%;
}
#contact{
  width: 100%;
  height:100%;
  padding-left: 8%;
  position: relative;
  padding-bottom: 5%;
}
#container_conta{
  margin-top: 2%;
}
#map{
  position: absolute;
  width: 40%;
  height:auto;
  top:30%;
  right:10%;
}


.container_flex{
  width: 80%;
  margin-left: 10%;
  height: 80svh;
  display: flex;
}
.right_container{
  width: 50%;
  height: 100%;
}
.left_container{
  width: 50%;
  height: 100%;
}
.img_side{
  width: 100%;
  height: auto;
}
#container1{
  /* background-image: url('/static/images/velo/vtt.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; */
}



#click{
  position: absolute;
  left:5%;
  color:red;
}









#resp{
  display: none;
  color:black;
  font-size: 5vw;
}




#menu_resp{
  display: none;
  position: absolute;
  right: 3%;
  width: 5%;
  height:auto;
}
#logo_resp{
  display: none;
  position: absolute;
  left: 3%;
}






@media (max-width: 800px) {

  #menu_resp, #logo_resp{
    display: block;
  }
  .el_nav{
    display: none;
  }
  #titre_section0{
    margin-top: 20%;
  }
  #bottom_first{
    display: none;
  }
  .text_about{
    width: 90%;
  }
  #text1{
    right:0;
    width: 50%;
    top:-5%;
  }
  #text2{
    width: 50%;
    left:5%;
    margin-top:25%;
  }
  #text3{
    width: 50%;
    right: 0%;
  }
  #container_velo{
    width: 60%;
    margin-left : 0;
    height:fit-content;
    margin-left: 20%;
  }
  .resp_data{
    display: none;
  }
  #under_velo{
    margin-top: 0;
  }
  #end_about{
    width: 90%;
  }
  .white_btn{
    border: 2px solid white!important;
  }
  .is_container_picture{
    padding-left: 5%;
    padding-top: 8%;
  }
  .line_mast{
    font-size: 5px;
  }
  .info_right{
   
    width: 50%;
    top:10%;
  }
}


@media (max-width: 600px) {
  #container_velo{
    width: 100%;
    margin-left : 0;
    height:fit-content;
  }
  .resp{
    visibility: hidden;
  }
  .info_left, .info_right{
    display: none;
  }
}