body, html {
  height: 100%;
  margin: 0;
}

#video-background {
  position: fixed; /* Video will be fixed in the background */
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100; /* Ensure video is in the background */
  background-size: cover;
  overflow: hidden;
}

/* Assurez-vous que le contenu qui suit est bien positionné et visible par-dessus la vidéo */
.content {
  position: relative;
  z-index: 1;
  /* vos autres styles ici */
}

/* Conteneur pour les sections horizontales */
.horizontal-container {
  display: flex; /* Les éléments sont disposés horizontalement */
  overflow-x: hidden;
  height: 100vh; /* Hauteur fixée à celle de la fenêtre de visualisation */
  scroll-snap-type: x mandatory; /* Active le "snap" pour le défilement horizontal */
}

/* Style des sections horizontales */
.sectionhorizontal {
  flex: 0 0 100vw; /* Chaque section horizontale a la largeur de la fenêtre de visualisation */
  height: 100vh; /* Chaque section horizontale a la hauteur de la fenêtre de visualisation */
  scroll-snap-align: start; /* Alignement pour le "snap" lors du défilement */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}

/* Style des sections verticales */
.sectionvertical {
  height: 100vh; /* Chaque section verticale a la hauteur de la fenêtre de visualisation */
  width: 100%; /* Chaque section verticale prend toute la largeur disponible */
  scroll-snap-align: start; /* Alignement pour le "snap" lors du défilement */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}



#vertical1::before {
  content: ''; /* Nécessaire pour le pseudo-élément */
  position: absolute; /* Absolu par rapport à #vertical1 */
  top: 803px;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px; /* Hauteur de la bande, ajustez selon vos besoins */
  /*background: rgba(92, 2, 2, 0.5); /* Noir semi-transparent */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(92, 2, 2, 0.5)100%); /* Gradient de fondu */
  z-index: 1; /* En dessous du contenu de la section mais au-dessus de l'arrière-plan */
}






#vertical2 {
  position: relative;
  margin: 0; /* Assurez-vous qu'il n'y a pas de marge par défaut */
  overflow: hidden; /* Cache le défilement par défaut de la page entière */
  background: rgb(0, 0, 0) ;
  background-size: cover; /* Pour couvrir tout l'écran sans distorsion */
 /* background-position: center;  Centrer l'image dans la page */
 /* background-repeat: no-repeat;  Pour éviter que l'image se répète */
 /* background-attachment: fixed;  Pour que l'image ne défile pas avec le contenu */
  /* autres styles pour la section */
}




#vertical1 {
  font-family: 'Donsky';
  display: flex;
  align-items: center; /* Centrer verticalement le contenu dans la section */
  justify-content: center; /* Centrer horizontalement le contenu dans la section */
  position: relative; /* Important pour le positionnement de l'image */
  overflow: hidden; /* Cache les parties de l'image qui dépassent pendant l'animation */
  height: 100vh; /* Ajustez selon vos besoins */
  width: 100%; /* Ajustez selon vos besoins */
}



.interactiveContent {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.imageDeplacement {
  transition: transform 0.5s ease-in-out;
  transform: translateX(0); /* Position initiale */
}
@media (max-width: 1000px) {
  .imageDeplacement {
  transition: transform 0.5s ease-in-out;
  transform: translateX(0); /* Position initiale */
  width: 75%;
}
}
@media (max-width: 730px) {
    .imageDeplacement {
    transition: transform 0.5s ease-in-out;
    transform: translateX(0); /* Position initiale */
    width: 75%;
  }
}



.texteFondu {
  opacity: 0; /* Rend le texte initialement invisible */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  color: #ff0800;
  position: absolute;
  top: 120px;
  left: 120px;
  transform: translateX(0);
  font-size: 184px; /* Taille de la police désirée */
  z-index: 1; /* Pour garder le texte en place, même transformation que l'image */
}
@media (max-width: 1000px) {
  .texteFondu {
    opacity: 0; /* Rend le texte initialement invisible */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    color: #ff0800;
    position: absolute;
    top: 90px;
    left: 133px;
    transform: translateX(0);
    font-size: 110px; /* Taille de la police désirée */
    z-index: 1; /* Pour garder le texte en place, même transformation que l'image */
  }
}
@media (max-width: 730px) {
    .texteFondu {
      opacity: 0; /* Rend le texte initialement invisible */
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
      color: #ff0800;
      position: absolute;
      top: 90px;
      left: 133px;
      transform: translateX(0);
      font-size: 110px; /* Taille de la police désirée */
      z-index: 1; /* Pour garder le texte en place, même transformation que l'image */
    }
}

.digiphrase{
  color: #ffffff;
  position: absolute;
  top: 42%;
  left: 78%;
  font-size: 25px; /* Taille de la police désirée */
  z-index: 3; /* Pour garder le texte en place, même transformation que l'image */
  transform: translate(-50%, -50%); /* Centre le texte par rapport à son point de positionnement */
  text-align: center; /* S'assure que le texte est centré, même lorsqu'il passe à la ligne */
  width: 21%; /* Définit une largeur pour permettre le retour à la ligne */
}

@media (max-width: 1000px) {
  .digiphrase {
    display: none;
}
}
.digiphrase2{
  color: #ffffff;
  position: absolute;
  top: 65%;
  left: 78%;
  font-size: 20px; /* Taille de la police désirée */
  z-index: 3; /* Pour garder le texte en place, même transformation que l'image */
  transform: translate(-50%, -50%); /* Centre le texte par rapport à son point de positionnement */
  text-align: center; /* S'assure que le texte est centré, même lorsqu'il passe à la ligne */
  width: 21%; /* Définit une largeur pour permettre le retour à la ligne */
}
@media (max-width: 1650px) {
  .digiphrase2{
    color: #ffffff;
    position: absolute;
    top: 70%;
    left: 78%;
    font-size: 20px; /* Taille de la police désirée */
    z-index: 3; /* Pour garder le texte en place, même transformation que l'image */
    transform: translate(-50%, -50%); /* Centre le texte par rapport à son point de positionnement */
    text-align: center; /* S'assure que le texte est centré, même lorsqu'il passe à la ligne */
    width: 25%; /* Définit une largeur pour permettre le retour à la ligne */
  }
}
@media (max-width: 1000px) {
  .digiphrase2{
    color: #ffffff;
    position: absolute;
    top: 73%;
    left: 51%;
    font-size: 20px; /* Taille de la police désirée */
    z-index: 3; /* Pour garder le texte en place, même transformation que l'image */
    transform: translate(-50%, -50%); /* Centre le texte par rapport à son point de positionnement */
    text-align: center; /* S'assure que le texte est centré, même lorsqu'il passe à la ligne */
    width: 81%; /* Définit une largeur pour permettre le retour à la ligne */
  }
}
@media (max-width: 730px) {
  .digiphrase2{
    color: #ffffff;
    position: absolute;
    top: 73%;
    left: 51%;
    font-size: 20px; /* Taille de la police désirée */
    z-index: 3; /* Pour garder le texte en place, même transformation que l'image */
    transform: translate(-50%, -50%); /* Centre le texte par rapport à son point de positionnement */
    text-align: center; /* S'assure que le texte est centré, même lorsqu'il passe à la ligne */
    width: 81%; /* Définit une largeur pour permettre le retour à la ligne */
  }
}


.interactiveContent:hover .texteFondu {
  opacity: 1; /* Rend le texte visible */
  transform: translateX(0); /* Ajuste si nécessaire */
}

.interactiveContent:hover .imageDeplacement {
  transform: translateX(-35%); /* Déplacement vers la gauche */
}
.video-container {
  width: 320px; /* Ajustez la largeur selon vos besoins */
  height: 180px; /* Ajustez la hauteur selon vos besoins */
  border-radius: 20px; /* Ajustez pour des côtés plus ou moins arrondis */
  overflow: hidden; /* Cache les parties de la vidéo qui débordent */
  position: relative; /* Positionnement relatif pour le conteneur */
}

.video-container video {
  width: 100%; /* Assure que la vidéo couvre la largeur */
  height: 100%; /* Assure que la vidéo couvre la hauteur */
  object-fit: cover; /* Couvre la zone sans perdre les proportions */
}
.Element1 {
  position: relative;
  top: -250px; /* Déplace l'élément de 10px vers le bas par rapport à sa position originale */
  left: 10px; /* Déplace l'élément de 10px vers la droite par rapport à sa position originale */
}
.Element2 {
  position: relative;
  top: -250px; /* Déplace l'élément de 10px vers le bas par rapport à sa position originale */
  left: 60px; /* Déplace l'élément de 10px vers la droite par rapport à sa position originale */
}
.Element3 {
  position: relative;
  top: -250px; /* Déplace l'élément de 10px vers le bas par rapport à sa position originale */
  left: 110px; /* Déplace l'élément de 10px vers la droite par rapport à sa position originale */
}
.Element4 {
  position: relative;
  top: -20px; /* Déplace l'élément de 10px vers le bas par rapport à sa position originale */
  left: -300px; /* Déplace l'élément de 10px vers la droite par rapport à sa position originale */
}
.Element5 {
  position: relative;
  top: -20px; /* Déplace l'élément de 10px vers le bas par rapport à sa position originale */
  left: -250px; /* Déplace l'élément de 10px vers la droite par rapport à sa position originale */
}
.Element6 {
  position: relative;
  top: -20px; /* Déplace l'élément de 10px vers le bas par rapport à sa position originale */
  left: -200px; /* Déplace l'élément de 10px vers la droite par rapport à sa position originale */
}


.taille-modifiable {
  position: absolute;
  width: 50%;
  height: 100%; /* Définissez une hauteur initiale */
  right: 50%;
  z-index: 2;
  /* Ajoutez d'autres propriétés selon le besoin */
}

@media (max-width: 1000px) {
  .taille-modifiable {
    display: none;
}
}
.taille-cadre {
  position: absolute;
  height: 50%;
  top: 35%; /* Ajustez selon le positionnement vertical souhaité */
  left: 17%; /* Ajustez selon le positionnement horizontal souhaité */
  transform: translate(-50%, -50%); /* Centre l'image */
  border: 5px solid black; /* Ajoute un bord noir de 5px */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
  z-index: 2; /* Assure que l'image est au-dessus du rectangle */
}
@media (max-width: 1000px) {
  .taille-cadre {
    position: absolute;
    height: 35%;
    top: 20%; /* Ajustez selon le positionnement vertical souhaité */
    left: 23%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    border: 5px solid black; /* Ajoute un bord noir de 5px */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}
@media (max-width: 730px) {
  .taille-cadre {
    position: absolute;
    height: 35%;
    top: 20%; /* Ajustez selon le positionnement vertical souhaité */
    left: 23%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    border: 5px solid black; /* Ajoute un bord noir de 5px */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}

.taille-cadre2 {
  position: absolute;
  height: 50%;
  top: 55%; /* Ajustez selon le positionnement vertical souhaité */
  left: 28%; /* Ajustez selon le positionnement horizontal souhaité */
  transform: translate(-50%, -50%); /* Centre l'image */
  border: 5px solid black; /* Ajoute un bord noir de 5px */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
  z-index: 2; /* Assure que l'image est au-dessus du rectangle */
}
@media (max-width: 1000px) {
  .taille-cadre2 {
    position: absolute;
    height: 35%;
    top: 25%; /* Ajustez selon le positionnement vertical souhaité */
    left: 45%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    border: 5px solid black; /* Ajoute un bord noir de 5px */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
}
}
@media (max-width: 730px) {
    .taille-cadre2 {
      position: absolute;
      height: 35%;
      top: 25%; /* Ajustez selon le positionnement vertical souhaité */
      left: 55%; /* Ajustez selon le positionnement horizontal souhaité */
      transform: translate(-50%, -50%); /* Centre l'image */
      border: 5px solid black; /* Ajoute un bord noir de 5px */
      box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
      z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}

.taille-cadre3 {
  position: absolute;
  height: 50%;
  top: 35%; /* Ajustez selon le positionnement vertical souhaité */
  left: 39%; /* Ajustez selon le positionnement horizontal souhaité */
  transform: translate(-50%, -50%); /* Centre l'image */
  border: 5px solid black; /* Ajoute un bord noir de 5px */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
  z-index: 2; /* Assure que l'image est au-dessus du rectangle */
}
@media (max-width: 1000px) {
  .taille-cadre3 {
    position: absolute;
    height: 35%;
    top: 25%; /* Ajustez selon le positionnement vertical souhaité */
    left: 67%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    border: 5px solid black; /* Ajoute un bord noir de 5px */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}
@media (max-width: 730px) {
    .taille-cadre3 {
      display: none;
  }
}

.taille-cadre4 {
  position: absolute;
  height: 50%;
  top: 55%; /* Ajustez selon le positionnement vertical souhaité */
  left: 50%; /* Ajustez selon le positionnement horizontal souhaité */
  transform: translate(-50%, -50%); /* Centre l'image */
  border: 5px solid black; /* Ajoute un bord noir de 5px */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
  z-index: 2; /* Assure que l'image est au-dessus du rectangle */
}
@media (max-width: 1000px) {
  .taille-cadre4 {
    position: absolute;
    height: 35%;
    top: 20%; /* Ajustez selon le positionnement vertical souhaité */
    left: 89%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    border: 5px solid black; /* Ajoute un bord noir de 5px */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}
@media (max-width: 730px) {
  .taille-cadre4 {
    display: none;
}
}

.taille-logo {
  position: absolute;
  height: 25%;
  top: 30%; /* Ajustez selon le positionnement vertical souhaité */
  left: 80%; /* Ajustez selon le positionnement horizontal souhaité */
  transform: translate(-50%, -50%); /* Centre l'image */
  z-index: 2; /* Assure que l'image est au-dessus du rectangle */
}
@media (max-width: 1210px) {
  .taille-logo {
    position: absolute;
    height: 21%;
    top: 30%; /* Ajustez selon le positionnement vertical souhaité */
    left: 80%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}
@media (max-width: 1000px) {
  .taille-logo {
    position: absolute;
    height: 17%;
    top: 50%; /* Ajustez selon le positionnement vertical souhaité */
    left: 55%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}
@media (max-width: 730px) {
  .taille-logo {
    position: absolute;
    height: 17%;
    top: 50%; /* Ajustez selon le positionnement vertical souhaité */
    left: 55%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}

.taille-logo2 {
  position: absolute;
  height: 28%;
  top: 38%; /* Ajustez selon le positionnement vertical souhaité */
  left: 65%; /* Ajustez selon le positionnement horizontal souhaité */
  transform: translate(-50%, -50%); /* Centre l'image */
  z-index: 2; /* Assure que l'image est au-dessus du rectangle */
}
@media (max-width: 1365px) {
  .taille-logo2 {
    position: absolute;
    height: 25%;
    top: 40%; /* Ajustez selon le positionnement vertical souhaité */
    left: 55%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}
@media (max-width: 1000px) {
  .taille-logo2 {
    position: absolute;
    height: 25%;
    top: 40%; /* Ajustez selon le positionnement vertical souhaité */
    left: 45%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}

@media (max-width: 730px) {
  .taille-logo2 {
    position: absolute;
    height: 15%;
    top: 36%; /* Ajustez selon le positionnement vertical souhaité */
    left: 45%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}

.taille-logo3 {
  position: absolute;
  height: 28%;
  top: 48%; /* Ajustez selon le positionnement vertical souhaité */
  left: 20%; /* Ajustez selon le positionnement horizontal souhaité */
  transform: translate(-50%, -50%); /* Centre l'image */
  z-index: 2; /* Assure que l'image est au-dessus du rectangle */
}
@media (max-width: 1000px) {
  .taille-logo3 {
    position: absolute;
    height: 28%;
    top: 48%; /* Ajustez selon le positionnement vertical souhaité */
    left: 25%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}
@media (max-width: 730px) {
  .taille-logo3 {
    position: absolute;
    height: 28%;
    top: 48%; /* Ajustez selon le positionnement vertical souhaité */
    left: 40%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}

.taille-Kickstarter {
  position: absolute;
  height: 7%;
  top: 22%; /* Ajustez selon le positionnement vertical souhaité */
  left: 46%; /* Ajustez selon le positionnement horizontal souhaité */
  transform: translate(-50%, -50%); /* Centre l'image */
  z-index: 2; /* Assure que l'image est au-dessus du rectangle */
}
@media (max-width: 1000px) {
  .taille-Kickstarter {
    position: absolute;
    width: 65%; /* Ajustez la largeur selon l'espace désiré */
    height: 8%;
    top: 25%; /* Ajustez selon le positionnement vertical souhaité */
    left: 45%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}
@media (max-width: 730px) {
  .taille-Kickstarter {
    position: absolute;
    width: 65%; /* Ajustez la largeur selon l'espace désiré */
    height: 4%;
    top: 25%; /* Ajustez selon le positionnement vertical souhaité */
    left: 42%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
}



  #horizontalsuit, #horizontalsuit1 {
    position: relative;
    background: rgba(92, 2, 2, 0.5); /* Noir semi-transparent */
    /* Assurez-vous que ces éléments ont une hauteur définie pour que le rectangle puisse être positionné correctement à l'intérieur */
  }
  
  .rectangle {
    position: absolute; /* Changé de fixed à absolute pour le lier à la section */
    bottom: 14%; /* Ajustez selon le centrage vertical souhaité */
    right: 0; /* Aligné au bord droit de la section */
    width: 90%; /* Ajustez la largeur selon l'espace désiré */
    height: 70%; /* Hauteur du rectangle */
    margin-right: 20px; /* Espace depuis le bord droit de la section */
    background-color: #000; /* Couleur de fond du rectangle */
    border-radius: 30px 0 0 30px; /* Coins arrondis sur le côté gauche */
    z-index: 1;
  }
  #horizontalsuit2, #horizontalsuit3 {
    position: relative;
    background: rgba(92, 2, 2, 0.5); /* Noir semi-transparent */
    /* Assurez-vous que ces éléments ont une hauteur définie pour que le rectangle puisse être positionné correctement à l'intérieur */
  }
  
  .rectangle1 {
    position: absolute; /* Changé de fixed à absolute pour le lier à la section */
    bottom: 14%; /* Ajustez selon le centrage vertical souhaité */
    right: 12%; /* Aligné au bord droit de la section */
    width: 90%; /* Ajustez la largeur selon l'espace désiré */
    height: 70%; /* Hauteur du rectangle */
    margin-right: 20px; /* Espace depuis le bord droit de la section */
    background-color: #000; /* Couleur de fond du rectangle */
    border-radius: 0 30px 30px 0; /* Coins arrondis sur le côté gauche */
    z-index: 1;
  }

  .rectangleKickstarter2 {
    position: absolute; /* Changé de fixed à absolute pour le lier à la section */
    bottom: 18%; /* Ajustez selon le centrage vertical souhaité */
    right: 16%; /* Aligné au bord droit de la section */
    width: 75%; /* Ajustez la largeur selon l'espace désiré */
    height: 55%; /* Hauteur du rectangle */
    margin-right: 20px; /* Espace depuis le bord droit de la section */
    background-color: #ffffff; /* Couleur de fond du rectangle */
    border-radius: 30px ; /* Coins arrondis sur le côté gauche */
    z-index: 1;
  }
  .rectangleKickstarter {
    position: absolute; /* Changé de fixed à absolute pour le lier à la section */
    bottom: 21%; /* Ajustez selon le centrage vertical souhaité */
    right: 16%; /* Aligné au bord droit de la section */
    width: 75%; /* Ajustez la largeur selon l'espace désiré */
    height: 52%; /* Hauteur du rectangle */
    margin-right: 20px; /* Espace depuis le bord droit de la section */
    background-color: #05ce78; /* Couleur de fond du rectangle */
    border-radius: 30px ; /* Coins arrondis sur le côté gauche */
    z-index: 1;
  }

  .taille-image1 {
    position: absolute;
    height: 55%;
    top: 52%; /* Ajustez selon le positionnement vertical souhaité */
    right: 50%; /* Ajustez selon le positionnement horizontal souhaité */
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
  @media (max-width: 1650px) {
    .taille-image1 {
      position: absolute;
      height: 55%;
      top: 52%; /* Ajustez selon le positionnement vertical souhaité */
      right: 43%; /* Ajustez selon le positionnement horizontal souhaité */
      transform: translate(-50%, -50%); /* Centre l'image */
      z-index: 2; /* Assure que l'image est au-dessus du rectangle */
    }
  }
  @media (max-width: 1450px) {
    .taille-image1 {
      position: absolute;
      height: 60%;
      top: 52%; /* Ajustez selon le positionnement vertical souhaité */
      right: 36%; /* Ajustez selon le positionnement horizontal souhaité */
      transform: translate(-50%, -50%); /* Centre l'image */
      z-index: 2; /* Assure que l'image est au-dessus du rectangle */
    }
  }
  
  @media (max-width: 1000px) {
    .taille-image1 {
      position: absolute;
      height: 25%;
      top: 68%; /* Ajustez selon le positionnement vertical souhaité */
      right: 50%; /* Ajustez selon le positionnement horizontal souhaité */
      transform: translate(-50%, -50%); /* Centre l'image */
      z-index: 2; /* Assure que l'image est au-dessus du rectangle */
    }
  }
  @media (max-width: 1365px) {
    .taille-image1 {
        display: none;
    }
  }
  
  
  .taille-image2 {
    position: absolute;
    height: 10%;
    transform: translate(-50%, -50%); /* Centre l'image */
    z-index: 2; /* Assure que l'image est au-dessus du rectangle */
  }
  .nuageline1 {
    top: 44%; /* Ajustez selon le positionnement vertical souhaité */
    left: 35%; /* Ajustez selon le positionnement horizontal souhaité */
    
  }
  @media (max-width: 1365px) {
    .nuageline1 {
      top: 44%; /* Ajustez selon le positionnement vertical souhaité */
      left: 25%; /* Ajustez selon le positionnement horizontal souhaité */ 
    }
  }
 
  @media (max-width: 1000px) {
    .nuageline1 {
        display: none;
    }
  }
  .nuageline2 {
    top: 56%; /* Ajustez selon le positionnement vertical souhaité */
    left: 42%; /* Ajustez selon le positionnement horizontal souhaité */
    
  }
  @media (max-width: 1365px) {
    .nuageline2 {
      top: 56%; /* Ajustez selon le positionnement vertical souhaité */
      left: 30%; /* Ajustez selon le positionnement horizontal souhaité */ 
    }
  }

  @media (max-width: 1000px) {
    .nuageline2 {
        display: none;
    }
  }
  .nuageline3 {
    top: 68%; /* Ajustez selon le positionnement vertical souhaité */
    left: 49%; /* Ajustez selon le positionnement horizontal souhaité */
    
  }
  @media (max-width: 1365px) {
    .nuageline3 {
      top: 68%; /* Ajustez selon le positionnement vertical souhaité */
      left: 39%; /* Ajustez selon le positionnement horizontal souhaité */ 
    }
  }

  @media (max-width: 1000px) {
    .nuageline3 {
        display: none;
    }
  }
  .nuageline4 {
    top: 55%; /* Ajustez selon le positionnement vertical souhaité */
    left: 58%; /* Ajustez selon le positionnement horizontal souhaité */
    
  }

  @media (max-width: 1000px) {
    .nuageline4 {
        display: none;
    }
  }

  .kickphrase{
    color: #ffffff;
    position: absolute;
    top: 49%;
    left: 65%;
    font-size: 20px; /* Taille de la police désirée */
    z-index: 3; /* Pour garder le texte en place, même transformation que l'image */
    transform: translate(-50%, -50%); /* Centre le texte par rapport à son point de positionnement */
    text-align: center; /* S'assure que le texte est centré, même lorsqu'il passe à la ligne */
    width: 31%; /* Définit une largeur pour permettre le retour à la ligne */
  }
@media (max-width: 1000px) {
    .kickphrase{
      color: #ffffff;
      position: absolute;
      top: 52%;
      left: 42%;
      font-size: 21px; /* Taille de la police désirée */
      z-index: 3; /* Pour garder le texte en place, même transformation que l'image */
      transform: translate(-50%, -50%); /* Centre le texte par rapport à son point de positionnement */
      text-align: center; /* S'assure que le texte est centré, même lorsqu'il passe à la ligne */
      width: 70%; /* Définit une largeur pour permettre le retour à la ligne */
    }
  }
  @media (max-width: 730px) {
    .kickphrase{
      color: #ffffff;
      position: absolute;
      top: 49%;
      left: 42%;
      font-size: 18px; /* Taille de la police désirée */
      z-index: 3; /* Pour garder le texte en place, même transformation que l'image */
      transform: translate(-50%, -50%); /* Centre le texte par rapport à son point de positionnement */
      text-align: center; /* S'assure que le texte est centré, même lorsqu'il passe à la ligne */
      width: 75%; /* Définit une largeur pour permettre le retour à la ligne */
    }
  }
  
  
  .line1 {
    position: absolute; /* Changé de fixed à absolute pour le lier à la section */
    bottom: 70%; /* Ajustez selon le centrage vertical souhaité */
    right: 10%; /* Aligné au bord droit de la section */
    width: 80%; /* Ajustez la largeur selon l'espace désiré */
    height: 0.1%; /* Hauteur du rectangle */
    margin-right: 20px; /* Espace depuis le bord droit de la section */
    background-color: #7e7e7e; /* Couleur de fond du rectangle */
    /*border-radius: 0 30px 30px 0;  Coins arrondis sur le côté gauche */
    z-index: 1;
  }
  .copyright{
    color: #ffffff;
    position: absolute;
    top: 62%;
    left: 18%;
    font-size: 20px; /* Taille de la police désirée */
    z-index: 3; /* Pour garder le texte en place, même transformation que l'image */
    transform: translate(-50%, -50%); /* Centre le texte par rapport à son point de positionnement */
    text-align: center; /* S'assure que le texte est centré, même lorsqu'il passe à la ligne */
    width: 31%; /* Définit une largeur pour permettre le retour à la ligne */
  }
  .contact{
    color: #ffffff;
    position: absolute;
    left: 11%;
    font-size: 20px; /* Taille de la police désirée */
    z-index: 3; /* Pour garder le texte en place, même transformation que l'image */
  }
  .c1{ 
    top: 68%;
  }
  .c2{ 
    top: 71%;
  }
  .c3{ 
    top: 74%;
  }