:root {
  --col_border: rgba(255, 255, 0, 0.202);
}
.bold{
  font-weight: bold;
}




/* */
.img_icone{
  width: 40%;
  height: auto;
  cursor: pointer;
  aspect-ratio: 1/1;
}
.youtube_ic{
  width: 50%;
  height: auto;
  cursor: pointer;
  aspect-ratio: 1/1;
}






/* */
#section_mast{
  width: 100%;
  height:80vh;
  min-height: 400px;
  text-align: center;
  position: relative;
}
#container_img{
  width: 90%;
  height:100%;
  margin-left: 5%;
  margin-top: 2%;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  /* filter: drop-shadow(0 0 4px #c7439216)
          drop-shadow(0 0 8px #530c371b)
          drop-shadow(0 0 120px rgba(83, 12, 55, 0.272)); */
}
#img_mast{
  width: 100%;
  height:100%;
  object-fit: cover;
  filter:grayscale(100%);
  object-position: 0% 20%;
}
#reseau{
  position: absolute;
  right: 0%;
  width: 5%;
  display: flex;
  align-items: center;
  flex-direction: column;
  top: 0;
}
#situ{
  margin-top: 2%;
}
/* */
#service{
  width: 100%;
  height: auto;
  min-height: 600px;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}

#container_service_titre{
  width: 90%;
  height: auto;
}
.container_service{
  width: 90%;
  height: 90vh;
  min-height: 500px;
  display: flex;
  margin-top: 2%;
  position: relative;
}
.margin_top_0{
  margin-top: 5%!important;
}
.container{
  width: 50%;
  height:100%;
  padding-right: 5%;
  position: relative;
  padding: 3% 3% 0% 3%;
}
.margin_top0{
  margin-top: 0!important;
}
.container_img{
  display: flex;
  justify-content: center;
  align-items: center;
}
.img_container{
  width: 80%;
  height:100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
  border-radius: 10px;
}
.container_img:hover .img_container{
  filter: grayscale(30%);
}
.under_titre{
  margin-top: 2%;
}
.under_text{
  margin-top: 2%;
}
.p_brnefice{
  margin-top: 5%;
}
.p_ben{
  margin-top: 1%;
  display: flex;
  gap:2%;
}
.ok{
  width: 1.5vw;
  height:auto;
  aspect-ratio: 1/1;
  min-width: 20px;
  object-fit: contain;
}


.anim_psr{
 transform: rotate(-90deg);
 position: absolute;
 overflow: hidden;
}
.are_anim_psr{
  transform: translateX(-100%);
  transition: transform 1s ease;
  opacity: 0.5;
}
#container_psrt1{
  right:-2%;
  bottom: 30%;
}
#container_psr2{
  left:-2%!important;
  position: absolute;
  top:35%!important;
}




.btn_flex{
  display: flex;
  width: auto;
  justify-content: center;
  align-items: center;
}







/* */
.icone_arrow{
  width: 100%;
  min-width: 20px;
  height: auto;
  /* overflow: hidden; */
  display: flex;
  justify-content: end;
  align-items: center;
  margin-left: auto;
  margin-top: 5%;
  gap:2%;
  width: auto;
}
.arrow_top{
  width: 2vw;
  height: auto;
  aspect-ratio: 1 / 1;
  min-width: 20px;
}
.home_btn{
  margin-top: 3%;
}





#container_service2:hover #img_service2{
  filter: grayscale(50%);
}


#line_top, #line_top2{
  top:0;
  left:0;
}
#line_left, #line_left4{
  top:0;
  left:0;
}
#line_right{
  top:0;
  right:0;
}
#line_left2{
  top:0;
  right:0;
}
.line_animate_height{
  transition: height 2s ease;
  width: 1px;
  height:0;
  background-color: rgb(77, 77, 77);
  position: absolute;
}
.line_animate_width{
  transition: width 2s ease,
  transform 1s ease;
  width: 0%;
  height:1px;
  background-color: rgb(77, 77, 77);
  position: absolute;
}
.to_height{
  height: 100%!important;
}
.to_width{
  width: 100%!important;
}




/* */
#reso_line{
  display: flex;
  gap:1%;
  width: 100%;
  padding-right: 5%;
  justify-content: end;
  margin-top: 3%;
}
.img_icone_line{
  width: 2vw;
  min-width: 25px;
  height: auto;
}



/**/
#top_section2{
  height:30vh;
  width: 95%;
  margin-top: 5%;
  display: flex;
  justify-content: center;
}








/* */
#assurance{
  width: 100%;
  display: flex;
  margin-top: 10%;
}
.container_over_div{
  width: 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.over_div_stat{
  width: auto;
  height:100%;
  overflow: hidden;
}
.anim_stat{
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.5s ease;
}
.to_top_div{
  transform: translateY(0%);

}



/* */
#procedure{
  width: 100%;
  height:auto;
  margin-top: 5%;
}

#container_titre_procedure{
  width: 100%;
  height:100%;
  padding-left: 5%;
}
#in_contianer_titre{
  width: 60%;
  height:20%;
}
.titre{
  height:50%;
  width: 100%;
}
.is_flex_titre{
  display: flex;
  width: 100%;
  height: 100%;
}
.titre_glue{
  height: 100%;
}
#glue1{
  width: 30%;
}
#glue2{
  width: 70%;
}

#container_section_step{
  width: 80%;
  height:auto;
}
.are_flex{
  display: flex;
  width: 100%;
  margin-top: 2%;
}
.big_div{
  width: 60%;
  height:auto;
  padding: 5%;
  padding-bottom: 0;
}
.little_div{
  width: 40%;
  height:auto;
  padding: 2%;
  position: relative;
}
#paname_lit{
  position: absolute;
  bottom: 0;
  left:5%;
}
#under_littkle{
  margin-top: 2%;
}
.divs_big{
  margin-top: 3%;
  position: relative;
  padding-bottom: 3%;
}
.bold{
  font-weight: bold;
}
.line_bottom_step{
  position: absolute;
  bottom:0;
  left:0;
  width: 0%;
  height:1px;
  background-color: rgba(255, 255, 255, 0.397);
}

/* */
#video{
  width: 90%;
  height:80vh;
  min-height: 400px;
  margin-left: 5%;
  margin-top: 10%;
}
#video_new{
  width: 100%;
  height:100%;
  border-radius: 20px;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 3s ease;
}
#video_new:hover{
    filter: grayscale(50%);

}


/* */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 90%;
  height: auto;
  margin-left: 5%;
}
.item{
  position: relative;
  width: 100%;
  height:80vh;
  min-height: 300px;
  display: flex;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
.line_left_grid{
  position: absolute;
  left:0;
  height:0%;
  width: 1px;
  background-color:rgb(77, 77, 77);
}
.line_right_grid{
  position: absolute;
  right:0;
  height:0%;
  width: 1px;
  background-color:rgb(77, 77, 77);
}
.img_container_grid{
  width: 80%;
  height:60%;
  margin-top: 10%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid white;
}
.img_grid{
  height:100%;
  width: 100%;
  object-fit: cover;
  filter:grayscale(100%);
  transition: filter 1s ease;
}
.img_grid:hover{
   filter:grayscale(50%);
}
.titre_img{
  width: 80%;
  display: flex;
  justify-content: space-between; 
   margin-top: 4%;
}
.text_grid{
  width: 80%;
  margin-top: 4%;
}
.container_arrow{
  width: 2vw;
  height:auto;
  overflow: hidden;
  display: flex;
  margin-left:auto;
  margin-right: 5%;
  padding-bottom: 1%;
}
.arrow{
  width: 2vw;
  height:2vw;
  aspect-ratio: 1/1;
  min-width: 20px;
  min-height: 20px;
  margin-right: 0%;
  transition: transform 0.5s ease;
  transform: translateX(100%);
}
.item:hover .arrow{
  transform: translateX(0%);
}






.drag_scroll {
  position: relative;
  display: none;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE et Edge */
  scrollbar-width: none;    /* Firefox */
  width: 100%;
  height:100%;
  scroll-behavior: smooth;
  cursor: grab;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: auto;
  border-bottom: 1px solid rgb(77, 77, 77);
}
.drag_scroll a,
.drag_scroll button,
.drag_scroll .box .img {
  pointer-events: auto;
}
.drag_scroll:active {
  cursor: grabbing;
}
.drag_scroll::-webkit-scrollbar {
  display: none;
}
.drag_scroll.dragging .grab_layer {
  cursor: grabbing;
}
.box {
  min-width: 32vw;
  height: 100%;
  position: relative;
  z-index: 1;
  overscroll-behavior: contain;
  overflow: hidden;
  transition: border 0.5s ease;
}
.lines{
  position: absolute;
  transition:height 1s ease-out;
  background-color: rgb(255, 255, 255);;
}
.line_top {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  background: rgb(255, 255, 255);;

  transform-origin: left;
  transform: scaleX(0);
  transition: transform 3s ease-out;
}
.line_left{
  width: 1px;
  top:0;
  height:0;
  left:0;
  transform-origin: top;
}
.line_right{
  width: 1px;
  top:0;
  right: 0;
  height:0;
  transform-origin: top;
}
.drag_scroll.draw .line_top {
  transform: scaleX(1);
}
.section_img{
  width: 100%;
  height:70%;
  margin-top: 5%;
  display: flex;
  justify-content: center;
}
.draw .line_top {
  width: 100%;
}

.line_draw .line_left {
  height: 100%;
}

.line_draw .line_right {
  height: 100%;
}
.draw_top {
  width: 100%!important;
}
/* */


.container_in_box{
  padding: 8%;
  height: 100%;
}
.is_three{
  padding-top: 20%;
}
.first_titre{
  margin-top: 3%;
}
.under_first{
  margin-top: 2%;
  position: relative;
}
.see{
  position: absolute;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 2;
  padding: 1% 2% 1% 2%;
  right: 0%;
}


.section_img{
  width: 100%;
  height:70%;
  margin-top: 5%;
  display: flex;
  justify-content: center;
}
.top_img{
  margin-top: 10%;
}
.container_img_drag{
  width: 100%;
  height:100%;
}
.img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 1s ease;
  cursor: pointer;
}












@media (max-width: 1600px){
  .item{
    height:70vh;
  }
}

@media (max-width: 1366px){
  .non_display{
    display: none!important;
  }
  .img_container_grid{
    height:60%;
  }
  .item{
    height:90vh;
    min-height: 350px;
  }
  .ok{
    width: 0.8vw;
  }

}


@media (max-width: 1280px) and (max-height: 1024px){
  .img_container{
    width: 90%;
  }
  #section_mast, #video{
    height: 70vh;
  }
  .item{
    height:60vh;
  }
}

@media (max-width: 1280px) and (max-height: 800px){
  .container_service{
    height:90vh;
  }
  .img_container{
    width: 80%;
  }
}
@media (max-width: 1280px) and (max-height: 768px){
  #container_service{
    height:120vh;
  }
}
@media (max-width: 1280px) and (max-height: 720px){
  .item{
    height:80vh;
  }
}

@media (max-width: 1176px){
  #section_mast, #video{
    height: 90vh;
  }
  .item{
    height:90vh;
  }
}


@media (max-width: 1152px){
  #section_mast, #video{
    height: 70vh;
  }
  .item{
    height:70vh;
  }
  #service{
    height:90vh;
  }
}

@media (max-width: 800px){
  #container_psrt1{
    right: -4%;
  }
  #container_psr2{
    left:-4%!important;
  }
  #service{
    height: 100vh;
  }
  .img_container{
    width: 90%;
    height:90%;
  }
  .img_icone{
    width: 60%;
  }
}


@media (max-width: 700px){
  .line_animate_width,
  .line_animate_height,
  .lines{
    display: none;
  }
  #section_mast{
    margin-top: 10%;
  }
  .line_animate_width{
    height:3px;
    background-color: rgba(255, 255, 255, 0.258);
  }
  .line_animate_height{
    width: 3px;
    background-color: rgba(255, 255, 255, 0.258);
  }
  #container_psrt1{
    display: none;
  }
  
  /* */



  /* */
  #artiste, #realisation{
    height:85vh;
    min-height: 480px;
  }
  .img{
    height: 80%;
    border-radius: 20px;
  }
  .container_service{
    flex-direction: column;
    height: 100%;
  }
  #container_titre_procedure{
    width: 90%;
    padding: 0;
    margin-left: 5%;
  }
  .container{
    width: 100%;
    margin-top: 0%;
    padding-top: 0;
  }
  .container_img{
    height:60vh;
    min-height: 330px;
    width: 100%;
    padding: 0;
  }
  .img_container{
    width: 100%!important;
  }
  .are_anim_psr{
    display: none;
  }
  #service{
    height:auto;
    min-height: auto;
  }
  .icone_arrow{
    margin-top: 10%;
  }
  .arrow_top{
    width: 4vw;
    min-width: 25px;
  }
  .are_flex{
    flex-direction: column;
  }
  .grid{
    grid-template-columns: repeat(1, 1fr);
  }
  .little_div{
    width: 100%;
  }
  #container_proc{
    width: 100%;
  }
  .img_grid{
    border-radius: 20px;
  }
  .no_display{
    display: none !important;
  }
  .drag_scroll{
    display: flex;
    margin-top: 10%;
  }
  .box{
    min-width: 80vw;
  }


  /* */
  .img_container{
    width: 90%;
  }
  .container{
    margin-top: 10%;
  }

  /* */
  #container_titre_procedure{
    width: 95%;
    margin-left: 2.5%;
  }
  #paname_lit{
    display: none;
  }
  .little_div{
    padding: 0;
  }
  #container_proc{
    padding: 0%;
    margin-top: 5%;
  }
  .divs_big{
    margin-top: 5%;
    padding-bottom: 5%;
  }
  .line_bottom_step{
    background-color: rgba(255, 255, 255, 0.6);
    height:1px;
  }
  #procedure{
    width: 95%;
    margin-left: 2.5%;
  }
}



@media (max-width: 400px){


}