*{
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body{
  position: relative;
  padding: 0;
  margin: 0;
  width:100%;
  height:100%;
  background-color: black;
  color:white;
  overflow: scroll;
  font-family: Sfmono, sans-serif;
}
body::-webkit-scrollbar {
    display: none; /* Cache la barre de défilement dans Chrome, Safari, Edge */
}



.is_border{
  border:1px solid white;
}
.second_color{
  color:#ffffffb3!important;
}
.thid_color{
  color:#bcbcbcb3!important;
}



#masthead{
  text-align: center;
  position: relative;
  width: 100%;
  margin-top: 1%;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: block;
}

#arrow_picture{
  position:absolute;
  width:1.9%;
  top:85vh;
  right:5%;
  animation: downUp 1s infinite;
  z-index: 5;
  display: none;
}
.arrow {
  position:absolute;
  top: 80vh;
  z-index: 20;
  animation: downUp 1s infinite;
}

@keyframes downUp {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(30px);
  }
  100% {
      transform: translateY(0);
  }
}


#masthead{
  position: relative;
  width: 100%;
  height:100vh;
  padding: 0;
  margin: 0;
}
#video_mastead{
  transition: transform 0.5s ease;
  height: 100%;
  width: auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(1); /* Centrage horizontal */
  transform-origin: bottom center; /* L'origine de la transformation est le centre */


}
#container_text_parent{
  position: absolute;
  top:0;
  left:0;
  width: 80%;
  margin-left: 10%;
  height:200vh;
  transition: transform 0.5s ease;
}
.container_text{
  position: absolute;
  width: 50%;
  text-align: left;
}
.titre1_text{
  opacity: 0;
  transition: opacity 0.5s ease,
  transform 0.5s ease;
  transform: translateX(-10%);
}
.titre2_text{
  opacity: 0;
  transition: opacity 0.5s ease,
  transform 0.5s ease;
  transform: translateX(-10%);
}
.to_oppa{
  opacity: 1;
  transform: translateX(0);
}


#text1{
  top: 50vh;
  height:50vh;
}
#text2{
  top: 100vh;
  height:50vh;
  right:0;
  text-align: right;
}
#text3{
  top:150vh;
  height:50vh;
}
#text4{
  top:200vh;
  height:50vh;
  right:0;
  text-align: right;
}
.anim_decl{
  position: absolute;
  bottom: 20%;
}


















#text_after_mastead{
  display: none;
  position:relative;
  width: 100%;
  height:60vh;
  text-align: center;
  margin-top: 10vh;
  padding-top: 10vh;
}
.text_in_adter{
  position:relative;
  width:40%;
  margin: auto;
  overflow: hidden;
}

.text_effect{
  opacity: 0.5;
  color:#bcbcbcb3!important;
}
.span_after{
  overflow: hidden;
}
.toraise{
  transition: opacity 0.5s ease;
}
.span_after_1{
  transition: color 0.5s ease;
  color:white;
  line-height: 1.08333;
  opacity: 0.9;
}
.span_after_2{
  transition: color 0.5s ease;
  color:white;
  line-height: 1.08333;
  opacity: 0.9;
}
.span_after_3{
  transition: color 0.5s ease;
  color:white;
  line-height: 1.08333;
  opacity: 0.9;
}
.perif{
  opacity: 0.6;
  transition: opacity 0.5s ease;
}
#our_product{
  transition: transform 0.5s ease,
  opacity 0.5s ease;
}


.arrow_down {
  width:100%;
  height:5vh;
  margin-top: 2%;
  overflow: hidden;
  display: none;
}
.bot{
  width:1.5%;
  height:auto;
  transition: all 0.5s ease;
}
.to_bottom{
  animation: to_bottom 1s infinite; 
}
@keyframes to_bottom {
  from{
    opacity: 1;
    transform: translateY(0%);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}















#after_text{
  display: none;
  position: relative;
  width:100%;
  height:100vh;
  padding-bottom: 1%;
  overflow: hidden;
}

#container_after_text{
  position: absolute;
  top:0;
  left: 0;
  width: 80%;
  left:10%;
  height:300vh;
  transition: transform 0.5s ease;
}
#video_mastead1{
  position: absolute;
  bottom:0;
  left:5%;
  margin-left: 10%;
  width:auto;
  height:100%;
  transition: transform 1s ease;  /* Durée de l'animation */
  transform-origin: center;
}

.are_text_after{
  height: 80vh;
  width: 100%;
  position: absolute;
}
.enum{
  position: absolute;
  top:-5%;
  left:-2%;
  opacity: 0.3;
  font-weight: bold;
}
#text1_after{
  top:100vh;
}
#text2_after{
  top:200vh;
}
#text3_after{
  top:280vh;
}
.anim_decl_robot{
  position: relative;
}

.text_after_robot{
  opacity: 0;
  transition: opacity 0.5s ease;
}
.to_oppa_robot{
  opacity: 1;
}
#pointe{
  position: absolute;
  bottom:10%;
  height:0px;
  width:2px;
  background-color: white;
  transition: height  0.5s ease;
  left:20%;
}
#pointe2{
  position: absolute;
  top:15%;
  height:2px;
  width:0px;
  background-color: white;
  transition: width  0.5s ease;
  right:5%;
}
#cmnv{
  position: absolute;
  opacity: 0;
  transition: transform 0.5s ease,
  opacity 0.5s ease;
  top: 29%;
  left:22%;
  transform: translateX(-20%);
}
#ia{
  position: absolute;
  opacity: 0;
  transition: transform 0.5s ease,
  opacity 0.5s ease;
  top: 17%;
  right:13%;
  transform: translateX(20%);
}
#robot{
  position: absolute;
  z-index: 2;
  width:100%;
  height:8vh;
  overflow: hidden;
  left:45%;
  bottom: 5%;
  display: none;
}
.img_robot{
  height:50%;
}
.move_robot{
  opacity: 1!important;
  transform: translateX(0%)!important;
}
.import{
  transition: opacity 0.5s ease;
}




#avis3{
  position: relative;
}











#image_video{
  position: relative;
  display: flex;
  display: none;
  padding-top: 50vh;
  height:120vh;
  width:100%;
  overflow: hidden;
}
#video_mastead2{
  position: absolute;
  bottom:0%;
  right:0;
  height:80%;
  opacity: 0.1;
  z-index: 1;
}
#left{
  width: 60%;
  height:50vh;
  overflow: hidden;
}
#right{
  width: 40%;
  height:50vh;
  overflow: hidden;
  position: relative;
}
#container_text_left{
  height:200vh;
  transition: transform 0.5s ease;

}
.container_text_after{
  position: relative;
  height:33.33%;
  width: 90%;
  padding-left: 15%;
}
.perif_vid{
  opacity: 1;
}
.text_effect_vid{
  opacity: 0.8;
  color:#bcbcbcb3!important;
}
.barre{
  position: absolute;
  left:0;
  width: 1px;
  height:100%;
  background-color: white;
  transform: translateY(100%);
  transition: transform 0.5s ease;
}
.enum_vid{
  opacity: 0.6;
  font-weight: bold;
}
.rect{
  position: absolute;
  left:5%;
  top:5%;
  transition: width 0.5s ease,
  transform 0.5s ease,
  opacity 0.5s ease;
  width: 0%;
  height:7vh;
  overflow: hidden;
}
.text_rect{
  opacity: 0;
  position: absolute;
  z-index: 0;
}
.in_square{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: white;
  transition: transform 0.5s ease;
}












#titre{
  margin-left: 5%;
  margin-top: 5%;
}
#frame{
  width: 80%;
  margin-left: 10%;
  height:100vh;
  min-height: 300px;
  margin-top: 10%;
}
#titre_top{
  display: flex;
  height:150px;
  gap:2%;
}
#titre_bottom{
  display: flex;
  align-items: end;
}
#iaa{
  line-height: 1;
  display: flex;
  align-items: end;
  width: fit-content;
}
.accompagnement_first_line{
  width: 100%;
  display: flex;
  margin-left: 3%;
}
.div_acc{
  width: 35%;
  height: 100%;
  padding: 2%;
  position: relative;
  z-index: 5;
}
#sous_sentce{
  margin-top: 2%;
  margin-left: 5%;
  position: relative;
}
#div_acc_2{
  width: 60%;
  padding-left: 0;
}
#sous_sentence_text{
  width: 45%;
  position: absolute;
  right: 10%;
  bottom:-10%;
}
#container_button{
  width: 80%;
  margin-left: 10%;
  display: flex;
  justify-content: end;
}
#button_vid{
    justify-content: end;
}
#play_icone{
  position:absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%, -50%); 
  color:#fff;
  cursor: pointer;
}
#miniature{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#container_top_under_section{
  display: none;
  width: 100%;

}
#video_placeholder{
  position: relative;
  width: 100%;
  height:100vh;
  margin-top: 5%;
}






















h1{
  font-size: 1.4vw;
}
h2{
  font-size: 1.4vw;
}
#our_product{
  font-size: 1.4vw;
}
.text_in_adter{
  font-size: 2vw;
}
.text_after_robot{
  font-size: 2vw;
}
.titre1_text{
  font-size: clamp(30px, 5vw, 65px);
}
.titre2_text{
  font-size: clamp(25px, 4vw, 50px);
}
.enum{
  font-size: clamp(65px, 7vw, 150px);
}
#cmnv{
  font-size: 1.2vw;
}
#ia{
  font-size: 1.2vw;
}
.container_text_after{
  font-size: 2vw;
}
.rect{
  font-size: 2.5vw;
}
#play_icone{
  font-size:3rem; 
}






@media (max-width: 1366px){
  #sous_sentence_text{
      width: 50%;
      right:10%;
  }
  .titre1_text{
    font-size: clamp(25px, 3vw, 35px);
  }
  .titre2_text{
    font-size: clamp(23px, 2.8vw, 35px);
  }
}
@media (max-width: 1280px){
  #sous_sentence_text{
      width: 45%;
    }
  .text_in_adter{
    font-size: clamp(16px, 2vw, 35px);
  }
}
@media (max-width: 1176px){
  #sous_sentence_text{
        bottom:0%;
    }
}
@media (max-width: 1152px){
  .text_in_adter{
    font-size: clamp(16px, 2.5vw, 35px);
    width: 50%;
  }
  #cmnv, #ia{
    font-size: clamp(16px, 1.5vw, 30px);
  }
  #ia{
    right: 5%;
  }
  #after_text{
    height:100vh;
  }
  #arrow_picture{
    width: 20px;   
  }
}

@media (max-width: 1024px){
  #sous_sentence_text{
        bottom:-10%;
        width: 50%;
    }
}

@media (max-width: 850px){
  .text_in_adter{
    font-size: clamp(24px, 3.5vw, 40px);
    width: 60%;
  }
  #our_product{
    font-size: clamp(20px, 2.5vw, 35px);
  }
  .text_after_robot{
    font-size: clamp(22px, 2.5vw, 35px);
  }
  .container_text_after{
    font-size: clamp(22px, 2.5vw, 35px);
  }
  .rect{
    font-size: clamp(25px, 3vw, 40px);
  }
  #titre_bottom{
    font-size: clamp(25px, 3vw, 40px);

  }
}
@media (max-width: 800px){
  #no_ess{
    display: none!important;
  }
  #div_acc_2{
    width: 95%;
  }
  #tech{
    padding-left: 0;
  }
  #sous_sentce{
    width: 95%;
  }
  #titre{
    margin-left: 3%!important;
  }
  .accompagnement_first_line{
    margin-left: 3%;
  }

  #sous_sentce{
    width: 90%;
    margin-left: 3%;
  }
  #sous_sentence_text{
    width: 80%;
    position: relative;
    padding-left: 10%;
    bottom: 0;
  }
  .container_text{
    width: 80%;
  }
  .arrow_down{
    height:8vh;
  }
  .bot{
    width: 20px;
  }
  .right{
    padding-right:5%;
  }
}
@media (max-width: 650px){
  #iaa{
    width: 33%;
  }
}
@media (max-width: 600px){
  #sous_sentence_text{
    position: relative;
    width: 100%;
    padding-left: 0%;
    right: 0%;
    bottom:0%;
    margin-top: 5%;
  }
  #sous_sentce{
    margin-left: 3%;
  }
}


@media (max-width: 550px){
  #iaa{
    width: 100%;
  }
  .div_acc{
    width: 95%!important;
    margin-top: 5%;
  }
  #titre_top div{
    width: 100%;
  }
  #titre_top{
    flex-direction: column;
    gap:0;
    height: fit-content;
  }
  #iaa, #psycho{
    font-size: 80px!important;
    width: 100%;
    word-break: break-all;
  }
  #sous_sentce{
    margin-top: 30px!important;
  }
  #video_placeholder{
    width: 90%;
    margin-left: 5%;
  }
  #video_mastead1{
    left: -5%;
  }
  .rect{
    height:10vh;
  }
}

@media (max-width: 530px){
  #video_mastead2{
    padding-top: 10vh;
  }
  #pointe{
    left:10%;
  }
  #cmnv{
    left:12%;
  }
  #avis3{
    margin-top: 0px;
  }
  #image_video{
    padding-top: 35vh;
    height:100vh;
    width: 100%;
  }
  #video_mastead2{
    height: 100%;
    top:0;
    opacity: 0.2;
  }
  #right{
    visibility: hidden;
    width: 0;
  }
  #left{
    width: 90%;
    margin-left: 5%;
  }
  #video_mastead1{
    height: 100%;
    width: auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(1); /* Centrage horizontal */
  }
  #container_top_under_section{
    padding-top: 5vh;
  }
}
@media (max-width: 500px){
  .text_in_adter{
    width: 95%;
  }
}
@media (max-width: 400px){
  #video_mastead2{
    width: auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(1); /* Centrage horizontal */
  }
  .container_text_after{
    padding-left: 0;
    width: 100%;
  }
}




@media (max-width: 1280px) and (min-height: 800px){
  #after_text{
    height:70vh;
  }
  #our_product{
    font-size: 2vw;
  }
  .text_in_adter{
    font-size: 2.5vw;
    width: 65%;
  }
}