body {
  text-decoration: none;
  overflow-x: hidden;
      margin: 0;
      padding: 0;
      background-color: rgb(0, 0, 0);;
      -webkit-font-smoothing: antialiased;
  text-decoration: none;
  font-family: description;
  }
  
  html {
      text-rendering: optimizeLegibility;
      --res:calc(0.01 * 10vmin);
 
  }

 
  
  @font-face {
      font-family: "Main";
      src: url("medias/LL\ Valentine\ Bold.ttf");}
      @font-face {
        font-family: "description";
        src: url("medias/LL\ Valentine\ Bold.ttf");}

    
  
  
                  li,button {
                    color: #ffffff;
                    text-decoration: none;
                       }
                    
                       header {
                         border-bottom: 1px solid #000;
                         font-family: description;
                    justify-content: space-between;
                    align-items: center;
                    text-rendering: optimizeSpeed;
                    padding:7px;
                    width: 100%;
                    height: 20px;
                    background-color: rgb(0, 0, 0);
                position: fixed;
                z-index: 2;
                top: 0;
                font-size: 16px;
         
                
                    border-top-width: 0px;
                    border-left-width:0px;
                    border-right-width:0px;
                       }
                    
                  .left {
                    width:100%;
                    transition: all 0.3s ease 0s;
                    padding-left: 10px;
                  }
            
                  .right, .right2 {
                    cursor: pointer;
                    padding-right: 10px;
                    margin-right: 15px;
                   display: flex;
                  }
                  

                       .nav_link {
                      
                        font-weight: bolder;
                        letter-spacing: 0;
                        list-style: none;
                        flex-grow: 1;
                        width:auto;
                        display: flex;
                        justify-content: space-between;
                        margin-top: -2px;
                      padding: 0;
                    
                       }
                    
                       .nav_link li {
                    display: inline-block;
                 
                    
                       }
                    
                       .nav_link li a {
                        transition: all 0.3s ease 0s;
                       }
                   
      a {  text-decoration: none;
        font-family: description;
      color: rgb(0, 0, 0);}
      a,.text-footer {  text-decoration: none;
        font-family: description;
      color: rgb(255, 255, 255);}
     .info_open a  {  text-decoration: none;
        color: rgb(255, 255, 255);}

.general {
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
margin-top: 35px;
}

.letter {

  transition: color 0.1s;
}

.letter:hover {
  /* Aucune couleur n'est spécifiée ici pour laisser place à la couleur générée par JavaScript */
}
.middle_clear {
width: calc((100% - 6px)/4);
float: left;
position: relative;
margin: 0;
height: auto;
margin-right: 2px;
}
.middle_clear1 {
  width: calc((100% - 6px)/4);
  float: left;
  position: relative;
  margin: 0;
  height: auto;
  margin-right: 2px;
  }

.middle_clear2 {
  width: calc((100% - 6px)/4);
  float: left;
  position: relative;
  margin: 0;
  height: auto;

  }

 .middle_clear1 video, .middle_clear2 video {

    width: calc(100%);
  }
  .post_home {
margin-bottom: -4px;
    transition: all .3s cubic-bezier(.5, 0, .3, 1);
    width: 100%;
    background-size: cover;
object-fit: cover;
    position: relative;
}


.post_home2 {
  margin-bottom: -4px;
}




.fleche {
  width: 15%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 90%;
  position: fixed;
  z-index: 9;
  transition: all 0.3s ease 0s;
  animation: float 3s infinite ease;
}

@keyframes float {
  0% {
    top: 90%;
  }
  50% {
    top: 92%;
  }
  100% {
    top: 90%;
  }
}

.slider {
  position: fixed;
  width:100vw;
  height: 100vh;
  font-family: description;
  top: 0;
}

.slide {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height:100%;
  overflow: hidden;
  clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%);
  font-family: description;
}

#slide-1 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.slider-content {
  overflow: hidden;
  position: fixed;
  top:35px;
  left:0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.35);
  z-index: 5;
  font-family: description;
}

.slide-number {
  position: absolute;
  top:55%;
  left: 10%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 0.25em;
  font-family: description;

}

.postfix span {
  padding:0 0.25em;
  font-family: description;
}

.slide-name {
  position: absolute;
  top: 55%;
  left: 30%;
  transform: translate(-50%, -50%);
  font-family: description;
}

.slide-year {
  position: absolute;
  top: 55%;
  right: 50%;
  transform: translate(-50%, -50%);
  font-family: description;
}

.slide-number,
.slide-name,
.slide-year {
  font-size: 18px;
  color: #ffffff;
  line-height: 30px;
  clip-path: polygon(0 0, 100% 0, 100% 30px, 0 30px);
  text-transform: uppercase;
  font-family: description;
}

.prefix,
.names,
.years {
  position: relative;
  top: 0;
  font-family: description;
}

.text p{
  width: 28%;
opacity: 1;
font-size: 16px;
position: fixed; 
top: 50%;
left: 78.9%;
transform: translate(-50%, -50%);
align-self: flex-start;
color: rgb(255, 255, 255); /* Couleur du texte */
z-index: 101; /* Assurer que la div est au-dessus de l'image */
font-family: description;
  }

  .text2{
  
  opacity: 1;
  font-size: 18px;
  position: fixed; 
  top: 82%;
  text-transform: uppercase;
  left: 50%;
  transform: translate(-50%, -50%);
  align-self: flex-start;
  color: rgb(255, 255, 255); /* Couleur du texte */
  z-index: 102; /* Assurer que la div est au-dessus de l'image */
  font-family: description;
  -webkit-animation: 3s ease 0s normal forwards 1 fadein;
  animation: 10s ease 0s normal forwards 1 fadein;
    }

    @keyframes fadein{
      0% { opacity:0; }
      66% { opacity:0; }
      100% { opacity:1; }
  }
  
  @-webkit-keyframes fadein{
      0% { opacity:0; }
      66% { opacity:0; }
      100% { opacity:1; }
  }

.zig {
    width: 30px;
    position: absolute;
    margin-top: -1px;
    margin-left: 5px;
    transition: all .3s cubic-bezier(.5, 0, .3, 1);
}

.thumbnail {
    cursor: pointer;
    width: 100%;
    height: 100%;

    transition: all .4s cubic-bezier(.5, 0, .3, 1);
}



.thumbnail2 {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  
}

.thumbnail2:hover {
  opacity: 1;
  z-index: 80;
}


.info_close {
  width: 1em;
  z-index: 3;
position: fixed;
  right: 15px;
  top: 15px;
  cursor: pointer;
  z-index: 9;
  transition: all 0.5s cubic-bezier(0.715, 0.195, 0.000, 0.925); /* custom */
  transition-timing-function: cubic-bezier(0.715, 0.195, 0.000, 0.925); /* custom */
}

.roro {
  transition: all 0.5s cubic-bezier(0.715, 0.195, 0.000, 0.925); /* custom */
  transition-timing-function: cubic-bezier(0.715, 0.195, 0.000, 0.925); /* custom */
}
.roro:hover {
  opacity: .5;
  scale: .75;
rotate: 180deg;
}


/* Utilisez .info_open.is_open au lieu de .info_open .is-open */
.info_open.is_open {
  z-index: 40;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.text_container {
margin-top: 20%;
  display: flex;
  justify-content:flex-start;
  gap: 100px; /* Espace entre les colonnes */
  padding: 20px;
  flex-wrap: wrap; /* Pour que les éléments s'empilent si l'écran est trop petit */
}

.text_info_fr, .text_info_en {

  position: relative;
  width: 30%; /* Chaque colonne prend environ la moitié de la largeur */
  font-size: 16px;

}

.text_info_fr span, .text_info_en span {
  display: block;
}
.text_info_en, .text_info_en a {
  color: rgb(206, 206, 206);
}
.text_footer {
  text-align: center;
  position: relative;
  width: 50%;
color: #ffffff;
  left: 50%;
  margin-top: 50px;
  transform: translate(-50%,-50%);
   font-size: 16px;
  }

  .info_footer {
    text-align: center;
    position: absolute;
    width: 100%;
  bottom:40px;
    left: 50%;
    transform: translate(-50%,-50%);
     font-size: 12px;
    }

.counter {
  z-index: 999;
  position: fixed;
 
  left:50px;
  bottom:50px;
  display: flex;
  height: 100px;
  font-size: 100px;
  line-height: 135px;
  clip-path: polygon(0 0,100% 0, 100% 100px,0 100px);
}

.counter-1,
.counter-2,
.counter-3 {
position: relative;
top: -15px;
}
.num1offset1 {
  position: relative;
  right: -25px;
}
.num1offset2 {
  position: relative;
  right: -10px;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  font-family: "description";
  color: #ffffff;
  background-color: #000000;
  z-index: 998;
}

.info_open {
  position: fixed;
  z-index: 2222;
  float: right;
  height: 100%;
  top: 35px;
line-height: 1.1;
  font-family: description;
  font-weight: normal;
  font-size: 20px;
  right: 0;
  text-align: left;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%; 
  box-sizing: border-box;
 border-top: #525252 .5px solid;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  transform: translateY(0%);
  transition: all .4s cubic-bezier(0.82, 0.09, 0.25, 1);

}




p {
  font-family: description;
  margin-left: 0.4em;
  font-size: 1.4em;


}
.hoverimg {
opacity: 0;
position: fixed; 
  background-color: rgb(255, 255, 255); /* Fond semi-transparent noir */

  padding-left:0.2em;
  padding-right:0.6em ;
margin-left: 1.4em;
padding-top: 0.1em;
margin-top: 0.4em;
  height: 1.5em;
  display: flex;
  align-items: center;
  align-self: flex-start;
  color: rgb(0, 0, 0); /* Couleur du texte */
  z-index: 979; /* Assurer que la div est au-dessus de l'image */
}
.gif {
  display: none;
}
.hoverimg p {
  font-size: 14px;
  font-family: Main;
  width: max-content;
}
/* Afficher la div hoverimg lorsqu'on survole l'image */
.post_home:hover .hoverimg {
opacity: 1;
}

.post_home2:hover .hoverimg {
  opacity: 1;
  }

  .post_home_pc:hover .hoverimg {
    opacity: 1;
    }
#link {
  position: relative;
}

#link::before {
  content: '';
  position: absolute;
  width:100%;
  height: 1px;
  background-color: #ffffff;
  bottom: 0;
  left: 0;
  top: 1.35em;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .2s cubic-bezier(.215,.61,.355,1);
}

#link:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
#info-link {
  position: relative;
}

#info-link::before {
  content: '';
  position: absolute;
  width:100%;
  height: 1px;
  background-color: #ffffff;
  bottom: 0;
  left: 0;
  top: 1.35em;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .2s cubic-bezier(.215,.61,.355,1);
}

#info-link:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

#contact-link {
  position: relative;
}

#contact-link::before {
  content: '';
  position: absolute;
  width:100%;
  height: 1px;
  background-color: #ffffff;
  bottom: 0;
  left: 0;
  top: 1.35em;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .2s cubic-bezier(.215,.61,.355,1);
}

#contact-link:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}


#link2 {
  position: relative;
}

#link3 {
 color: #ffffff;
}



#link2::before {
  content: '';
  position: absolute;
  width:100%;
  height: 1px;
z-index: 999;
  background-color: #ffffff;
  bottom: 0;
  left: 0;
  top: 1.35em;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .2s cubic-bezier(.215,.61,.355,1);
}

#link2:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
.slide_video {
  height: 100vh;

  object-fit: cover;
}
#white {
  color: #ffffff;
}
.show_video {
  transform: translate(-50%, -50%);
 height: 100vh;
 left: 50%;
 top: 50%;
 z-index: 90;
 position: absolute;
 display: flex;
}
.show_video1 {
  transform: translate(-50%, -50%);

 width: 100vw;
 left: 50%;
 top: 50%;
 position: relative;
 display: flex;
}
.img_video {
  position: fixed;
  display: flex;
  height: 135vh;
  top: 0;
  right: 0;

 }
 .img_video2 {
  position: fixed;
  display: flex;
  height: 135vh;
  top: 0;
  left: 0;

 }
 .post_home_pc {
  margin-bottom: -4px;
}

.post_home_phone {
opacity: 0;
display: none;
}


@media only screen and (max-width: 900px) {

.post_home_pc {
     margin-top: 2px;
  display: none;
}
.post_home_phone {
  opacity: 1;
  display: block;
  margin-bottom: -4px;
}

.show_video {
  display: none;
}

.gif_phone {
  transform: translate(-50%, -50%);
  left: 50%;

  top: 50%;
  z-index: 99;
  position: absolute;
}

.gif_phone img{
height: 100vh;
width: auto;
}

.fleche {
  width: 40%;
}
.middle_clear {
  margin: 0;

margin-right: 2px;
  width: calc((100% - 2px)/2);
}

.middle_clear1 {
  margin: 0;


  width: calc((100% - 2px)/2);
}
.middle_clear2 {
  margin-top: -19%;
  width: calc((100% - 2px)/2);
}
.gif {
  display: flex;
  width: 100%;
}
.img_video {
display: none;
opacity: 0;
}
.img_video2 {
  display: none;
  opacity: 0;
  }
video {
  display: none;
}

.left {
  width: calc(80% - 1.5em);
}
.text {
  display: none;
}
.slide-number {
  display: none;
}
.slide-year {
  right: 5%;
}
.slide-name {
  left: 55%;
  width: 100%;
}
.text_info_title {
  font-size: 80px;
bottom: 30px ;
}

.boom {
  display: none;
}


.text_info_fr,.text_info_en {
width: 85%;
font-size: 12px;
text-align: left;
margin-left: -10px;
  margin-top: -40px;

 }


.text_footer {
  text-align: left;
  position: relative;
left: 27%;

   font-size: 12px;
  }

.nav_link {
  font-size: 14px;
 
}

.right2,.left {
  padding: 2px;
}
.right {
  margin-right: 5px;
margin-top: 2px;
}
  .info_footer {
    text-align: center;
   position: relative;
    width: 90%;
  top:15px;
    left: 50%;
    margin-top: 60px;
    transform: translate(-50%,-50%);
     font-size: 8px;
     padding-bottom: 30px;
    }
    
}