body{
 overflow-x: hidden;
  overflow-y: auto;
}


li, ul{
  line-height: 1;
  margin: 0;
  padding-left: 0;
}
li{
  margin-top: 1%;
 list-style: none;
  counter-reset: item;
  padding-left: 3%;
  width: 97%;
}
ol {
  list-style: none;
  padding-left: 0;
}
/* */

#mast{
  width: 85%;
  height:auto;
  display: flex;
  justify-content: center;
  padding-top: 10%;
  margin-left: 7.5%;
}
#container_mast{
  width: 100%;
  height:100%;
}
#presentation{
  display: flex;
  width: 100%;
  height:15vh;
}
#sevice1{
  width: 50%;
}
.service{
  width: 25%;
  height: 100%;
}
.under{
  margin-top: 2%;
}

/* */
#container_text{
  width: 100%;
  height:auto;
  margin-top: 10vh;
}
#titre, #text{
  width: 100%;
  height:auto;
}





/* */
#reseau{
  width: 100%;
  display: flex;
  justify-content: end;
  padding-right: 10%;
  gap:2%;
}
#container_right{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap:1%;
}
.img_icone{
  width: 20%;
  height: auto;
  cursor: pointer;
  aspect-ratio: 1/1;
}
.youtube_ic{
  width: 20%;
  height: auto;
  cursor: pointer;
}



.are_social{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.btn_margin{
  width: 100%;
  text-align: right;
}


/* */
#container_bottom{
  width: 100%;
  height:100vh;
  min-height: 450px;
  display: flex;
}
.container_side{
  width: 8%;
  height:100%;
  padding-top: 15vh;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
#container_left{
  padding-top: 0%;
}
#percent{
  position: absolute;
  bottom: 5vh;
}
#conteinr_center{
  width: 82%;
  height:100%;
  margin-top: 10%;
  display: flex;
  position: relative;
}
.half{
  width: 50%;
  height:100%;
  position: relative;
}
.are_padd_left{
  padding-left: 2%;
  padding-right: 3%;
}
#container_img{
  padding: 2% 5% 2% 3%;
  display: flex;
  justify-content: center;
}
.img{
  width: 75%;
  margin-left: 0%;
  height:90%;
  position: absolute;
  bottom: 0;
  object-fit: cover;
  filter: grayscale(100%);
  border-radius: 20px;
}

/* */
#line_top {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color:rgb(77, 77, 77);
  transition: width 1s ease;
}
#line_left,
#line_right,
#line_left1 {
  position: absolute;
  top: 0;
  width: 1px;
  height: 0;
  background-color:rgb(77, 77, 77);
  transition: height 1.5s ease;
}
#line_left1{
  left:0;
}
.draw_top {
  width: 100%!important;
}
#line_left {
  left: 0;
}
#line_right {
  right: 0;
}

.draw_side {
  height: 100%!important;
}




/* */

/* */
#time_line_section{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  margin-top: 10vh;
  position: relative;
}
#container_time{
  width: 80%;
  position: relative;
  padding-bottom: 5vh;
}
.container_times{
  width: 100%;
  height:auto;
  display: flex;
  gap:10%;
  margin-top: 5vh;
  overflow: hidden;
}
.cirle{
  width: 3vw;
  height:3vw;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgb(77, 77, 77);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
  transform: translateX(-100%);
}
.text_time{
  width: 80%;
  height: auto;
  display: flex;
  justify-content: start;
  align-items: center;
}
#line_container_time{
  width: 1px;
  position: absolute;
  height:0%;
  background-color:rgb(77, 77, 77);
  left: 17.4%;
  transition: height 1s ease;
  z-index: 1;
}

/* */



/* */
#container_scroll {
  width: 100%;
  height: 85vh;      /* <-- important : 100% ne marche pas si parent sans hauteur */
  min-height: 100%;
  overflow-y: auto;   /* scroll à l'intérieur */
  box-sizing: border-box;
  position: relative;
}
#container_scroll::-webkit-scrollbar {
  width: 3px;
}

#container_scroll::-webkit-scrollbar-track {
  background: transparent;
}

#container_scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  transition: background 0.3s ease;
}

#container_scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.7);
}

#nav_in{
  cursor: pointer;
  height:auto;
  width: 100%;
  padding: 2%;
  margin-top: 1%;
  text-align: center;
  background-color: rgb(0, 0, 0);
}


/* contenu */
#scroll {
  width: 100%;
  height: auto; /* laisse le contenu décider */
  padding-top: 5%;
  padding-bottom: 10%;
}
.marge{
  margin-top: 3%;
}
.marge_big{
  margin-top: 30%;
}

/* */
.timming{
  margin-top: 2%;
}
.cf_etude{
  width: 100%;
  display: flex;
  justify-content: end;
  margin-top: 5%;
  cursor: pointer;
  gap:2%;
}
.section_in_scroll{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgb(77, 77, 77);
}
.right_section{
  padding: 1%;
}
.step{
  border-left:1px solid rgb(77, 77, 77);
  width: fit-content;
  padding-left: 1%;
  height:100%;
  padding: 1%;
}



/* */

/* */
.is_titre_section{
  width: 100%;
  height:auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20%;
  flex-direction: column;
}
.container_titre_section{
  width: 70%;
}
.undertitre_section{
  display: flex;
  margin-top: 1%;
}
.text_right{
  width: 20%;
}
.text_under{
  width: 70%;
  margin-top: 1%;
}


/* */
#section_btn{
  width: 100%;
  text-align: center;
}

@media (max-width: 1280px) and (max-height: 1024px){
  #container_bottom{
    width: 100%;
    height:90vh;
    display: flex;
  }
  .img{
    width: 80%;
    height:80%;
    bottom:10%;
  }
  #container_img{
    padding: 2% 3% 2% 3%;
  }
  #mid_service{

  }
  #last_service_padd{
    width: 40%;
  }

}
@media (max-width: 1280px) and (max-height: 800px){
  #conteinr_center{
    margin-top: 8%;
  }
}
@media (max-width: 1280px) and (max-height: 664px){
  #container_bottom{
    height:100vh;
  }
  .img{
    width: 75%;
    height:90%;
    bottom:0%;
  }
}

@media (max-width: 1280px){
  #mast{
   margin-top: 5%;
  }
}

@media (max-width: 1024px){
  .img{
    width: 80%;
  }
}
@media (max-width: 800px){
  #line_top,
  #line_left,
  #line_left1,
  #line_right{
    display: none;
  }

  .container_titre_section{
    width: 80%;
  }
  #sevice1{
    width: 45%;
  }
  #mast{
    margin-top: 60px;
    width: 90%;
    margin-left: 5%;
  }
  #last_service_padd{
    width: 50%;
  }
  #presentation{
    flex-direction: column;
    height: auto;
  }
  #mast{
    height: auto;
  }
  .service, #last_service_padd{
    width: 100%;
  }
  #container_bottom{
    height: auto;
    min-height: auto;
  }
  #conteinr_center{
    flex-direction: column;
  }
  .half{
    width: 100%;
    height: auto;
  }
  #container_img{
    padding: 0;
    height:80vh;
    align-items: start;
  }
  /* */
  .is_titre_section{
    margin-top: 15%;
  }
  .container_titre_section{
    width: 95%;
    margin-left: 2.5%;
  }
  .text_under, #container_time{
    width: 95%;
    margin-left: 2.5%;
  }
  .text_time{
    width: 95%;
  }
  #line_container_time{
    left:16%;
  }
  /* */
  #sevice1{
    width: 100%;
  }
  #conteinr_center{
    width: 95%;
    margin-left: 2.5%;
  }
  .img{
    width: 90%;
    top:0;
  }
  /**/
  #nav_in{
    height:auto;
    width: 100%;
    padding: 3%;
    font-size: 15px;
  }
  #container_scroll{
    height: 100%;
  }
  .non_display{
    display: none!important;
  }
  .img_icone, .youtube_ic{
    width: 40%;
  }
  .marge_big{
    margin-top: 10%;
  }
  .cirle{
    width: 25px;
    height:25px;
  }
  #line_container_time{
    left:12%;
  }
  #container_bottom,
  .is_titre_section,
  #container_time{
    width: 100%;
  }
  #container_bottom{
    flex-direction: column;
  }
  .img{
    width: 100%;
  }
  #container_left{
    width: 100%;
    align-items: start;
    padding-left: 2.5%;
  }
  #mast{
    margin-left: 2.5%;
    width: 95%;
  }
  .right_section{
    width: 70%;
  }
}