@charset "UTF-8";

/* Mode normal (par défaut) */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Empêche le débordement horizontal */
  position: relative;
  height: 720vh; /* Augmente la hauteur totale pour inclure le light-off-container */
  width: 100vw;
  color: rgb(0, 2, 40); /* Texte noir */
  background-color: white; /* Fond blanc */
  opacity: 1; /* Opacité par défaut */
  transition: opacity 1s ease; /* Transition douce pour l'opacité */
}

/* Mode nuit */
body.night-mode {
  background: rgb(0, 2, 40); /* Fond bleumarine */
  color: white; /* Texte blanc lumineux */
  opacity: 0.8; /* Réduit légèrement l'opacité */
  transition: opacity 0.9s ease; /* Transition douce pour l'opacité */
}

body.night-mode p {
  text-shadow: 0 0 10px white; /* Texte lumineux */
  transition: text-shadow 0.5s ease, opacity 0.5s ease; /* Transition douce pour l'ombre et l'opacité du texte */
}

body.night-mode .texte01,
body.night-mode .texte02,
body.night-mode .texte03,
body.night-mode .texte04,
body.night-mode .texte05,
body.night-mode .texte06,
body.night-mode .texte07,
body.night-mode .texte08,
body.night-mode .texte09,
body.night-mode .texte10,
body.night-mode .texte11,
body.night-mode .texte12,
body.night-mode .texte13,
body.night-mode .texte14,
body.night-mode .texte15,
body.night-mode .texte16,
body.night-mode .texte17,
body.night-mode .texte18,
body.night-mode .texte19,
body.night-mode .texte20,
body.night-mode .texte21,
body.night-mode .texte22,
body.night-mode .texte23 {
  animation: textTwinkle 2s infinite ease-in-out; /* Applique l'animation de scintillement */
  max-width: 100%; /* Augmente la largeur maximale des textes */
  margin: 0 auto; /* Centre les textes horizontalement */
  text-align: center; /* Justifie le texte pour un alignement équilibré */
}

body.night-mode .background-image {
  opacity: 0.3; /* Réduit l'opacité à 30% */
  transition: opacity 0.5s ease; /* Transition douce pour l'opacité */
}

/* Mode nuit : cacher le top-container */
body.night-mode .top-container {
  display: none; /* Cache complètement le conteneur */
}

.special-gothic-expanded-one-regular {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Container pour les animations */
.animation-container {
  position: relative; /* Nécessaire pour que les enfants positionnés en absolu soient alignés correctement */
  height: 720vh; /* Ajuste la hauteur pour occuper tout l'espace sauf le light-off-container */
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Positionne les éléments en haut */
  align-items: center; /* Centre horizontalement */
  overflow: hidden; /* Cache les débordements éventuels */
}

/* Conteneur pour les images en mode nuit */
.night-images-container {
  display: none; /* Caché par défaut */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 720vh; /* Même hauteur que .animation-container */
  z-index: 200; /* Place au-dessus de l'animation-container */
}

/* Afficher le conteneur uniquement en mode nuit */
body.night-mode .night-images-container {
  display: flex; /* Affiche le conteneur en mode nuit */
}

/* Styles pour les images */
.night-image {
  position: absolute;
  width: 10%; /* Taille des vignettes */
  height: auto; /* Conserve les proportions */
  opacity: 0.8; /* Légère transparence */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Transition douce */
}

/* Styles pour le conteneur de texte */
.animation-text {
  position: absolute; /* Correspond à .animation-container */
  top: 0; /* Aligne verticalement avec .animation-container */
  left: 0; /* Aligne horizontalement avec .animation-container */
  width: 100%; /* Occupe toute la largeur de .animation-container */
  height: 100%; /* Occupe toute la hauteur de .animation-container */
  margin: 0; /* Supprime les marges */
  padding: 0; /* Supprime les espacements internes */
  display: flex; /* Active flexbox pour centrer le contenu */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  color: white; /* Couleur du texte */
  font-family: "Special Gothic Expanded One", sans-serif;
  line-height: 1.5; /* Améliore la lisibilité */
}

/* Styles pour les paragraphes */
.animation-text p {
  width: 100%; /* Les paragraphes occupent toute la largeur du conteneur */
  text-align: center; /* Centre le texte */
}

/* Styles pour les écrans mobiles */
@media (max-width: 600px) {
  .animation-text {
    position: absolute; /* Nécessaire pour le positionnement */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(
      -50%,
      -50%
    ); /* Ajuste le point d'ancrage pour centrer */
    width: 90%; /* Ajuste la largeur pour les petits écrans */
    margin: 0 auto; /* Centre horizontalement */
    text-align: center; /* Centre le texte à l'intérieur */
    display: flex; /* Active flexbox */
    justify-content: center; /* Centre horizontalement le contenu */
    align-items: center; /* Centre verticalement le contenu */
    mix-blend-mode: exclusion;
  }

  .animation-text p {
    font-size: 1.3rem; /* Augmente la taille du texte pour les paragraphes */
  }

  .top-container h1 {
    font-size: 3rem; /* Augmente la taille du titre pour les petits écrans */
  }
}

/* Styles pour les écrans plus grands (ordinateurs) */
@media (min-width: 1040px) {
  body {
    height: 1200vh; /* Augmente la hauteur de la page pour les écrans larges */
  }

  .animation-container {
    height: 1200vh; /* Ajuste la hauteur de l'animation-container */
  }

  .animation-text {
    position: absolute; /* Nécessaire pour le positionnement */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(
      -50%,
      -50%
    ); /* Ajuste le point d'ancrage pour centrer */
    width: 90%; /* Ajuste la largeur pour les petits écrans */
    margin: 0 auto; /* Centre horizontalement */
    text-align: center; /* Centre le texte à l'intérieur */
    display: flex; /* Active flexbox */
    justify-content: center; /* Centre horizontalement le contenu */
    align-items: center; /* Centre verticalement le contenu */
    mix-blend-mode: exclusion;
  }

  .animation-text p {
    font-size: 2.8rem; /* Augmente la taille du texte pour les paragraphes */
  }

  .top-container h1 {
    font-size: 8rem; /* Augmente la taille du titre pour les écrans larges */
  }
}

.texte01,
.texte02,
.texte03,
.texte04,
.texte05,
.texte06,
.texte07,
.texte08,
.texte09,
.texte10,
.texte11,
.texte12,
.texte13,
.texte14,
.texte15,
.texte16,
.texte17,
.texte18,
.texte19,
.texte20,
.texte21,
.texte22,
.texte23 {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  mix-blend-mode: exclusion;
  margin: 0 auto; /* Centre les textes horizontalement */
}

.texte01 {
  top: 5%; /* Aligne verticalement avec #lamp01 */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  left: 50%;
  text-align: center;
  mix-blend-mode: exclusion;
}

.texte02 {
  top: 10%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte03 {
  top: 15%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte07 {
  top: 20%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte08 {
  top: 25%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte09 {
  top: 30%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte10 {
  top: 35%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte11 {
  top: 40%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte12 {
  top: 45%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte13 {
  top: 49%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte14 {
  top: 53%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte15 {
  top: 57%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte16 {
  top: 61%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte17 {
  top: 65%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte18 {
  top: 70%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte19 {
  top: 75%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte20 {
  top: 80%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte21 {
  top: 85%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte22 {
  top: 90%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}

.texte23 {
  top: 95%; /* Position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  text-align: center;
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center; /* Centre verticalement le contenu */
  mix-blend-mode: exclusion;
}
/* Styles par défaut */
.scroll-image {
  position: absolute;
  opacity: 1; /* Les images sont visibles par défaut */
  transition: opacity 0.5s ease; /* Transition douce pour l'apparition/disparition */
}

/* Animation pour faire clignoter l'image */
@keyframes blink {
  0%,
  100% {
    opacity: 1; /* Visible */
  }
  50% {
    opacity: 0; /* Invisible */
  }
}

/* Animation pour faire clignoter une partie de l'image */
@keyframes partial-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Animation pour faire clignoter rapidement l'image */
@keyframes fast-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Animation pour faire grandir et réduire */

/* Animation pour faire osciller */
@keyframes rotateSwing {
  0% {
    transform: rotate(0deg); /* Position initiale */
  }
  50% {
    transform: rotate(10deg); /* Rotation vers la droite */
  }
  100% {
    transform: rotate(0deg); /* Retour à la position initiale */
  }
}

/* Animation combinée */
@keyframes rotateAndBlink {
  0% {
    transform: rotate(0deg); /* Position initiale */
    opacity: 1; /* Complètement visible */
  }
  25% {
    opacity: 0.5; /* Semi-transparent */
  }
  50% {
    transform: rotate(10deg); /* Rotation vers la droite */
    opacity: 1; /* Complètement visible */
  }
  75% {
    opacity: 0.5; /* Semi-transparent */
  }
  100% {
    transform: rotate(0deg); /* Retour à la position initiale */
    opacity: 1; /* Complètement visible */
  }
}

@keyframes textTwinkle {
  0%,
  100% {
    opacity: 1; /* Complètement visible */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Lueur forte */
  }
  50% {
    opacity: 0.5; /* Semi-transparent */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Lueur faible */
  }
}

#lamp1 {
  position: absolute;
  top: 0%;
  left: -20%;
  width: 150%; /* Ajuste la taille des images */
  height: auto; /* Conserve les proportions */
  mix-blend-mode: lighten;
  z-index: 100;
}

#bouchons {
  /*image bouchon*/
  top: 45%;
  mix-blend-mode: lighten;
  width: 150vw;
}

#building {
  /*immeuble long bas*/
  top: 70%;
  left: 30%; /* Ajustez selon vos besoins */

  width: 200vw;
  mix-blend-mode: lighten;
  z-index: 100;
}

#fenetre01 img {
  position: absolute;
  top: 22%;
  left: 15%;
  width: 100%; /* Ajuste la taille des images */
  height: auto; /* Conserve les proportions */
  opacity: 0; /* Les images sont invisibles par défaut */
  mix-blend-mode: lighten;
  z-index: 100;
}

/* Appliquer l'animation avec des décalages */
#fenetre01 img:nth-child(1) {
  animation: blink 1.5s infinite ease-in-out; /* Clignote toutes les 1.5s */
  animation-delay: 0s; /* Pas de décalage */
}

#fenetre01 img:nth-child(2) {
  animation: blink 1.5s infinite ease-in-out; /* Clignote toutes les 1.5s */
  animation-delay: 0.5s; /* Décalage de 0.5s */
}

#fenetre01 img:nth-child(3) {
  animation: blink 1.5s infinite ease-in-out; /* Clignote toutes les 1.5s */
  animation-delay: 1s; /* Décalage de 1s */
}

#fenetre02 {
  /*fenetre immeuble rond*/
  top: 55%;
  left: -5%;
  width: 100vw;
  mix-blend-mode: lighten;
  z-index: 100;
}

#camion {
  top: 15%;
  width: 150vw;
  position: absolute;
  opacity: 1; /* Caché par défaut */
  animation: camionAnim 8s ease infinite; /* Animation infinie */
  mix-blend-mode: lighten;
  z-index: 100;
}

@keyframes camionAnim {
  0% {
    transform: translate(100%, 0%); /* Commence en dehors de la vue */
    opacity: 1; /* Caché au début */
    rotate: 0deg;
  }

  10% {
    rotate: 0deg;
  }
  90% {
    transform: translate(-100%, 30%);
    opacity: 1; /* Caché au début */
    /* Commence en dehors de la vue */
    rotate: 5deg;
  }
  100% {
    transform: translate(-100%, 0%);
    opacity: 1; /* Caché au début */
    rotate: 0deg;
  }
}

#fenetre03 {
  top: 18%;
  left: -120%;
  mix-blend-mode: lighten;
  width: 205vw;
  z-index: 100;
}

#fenetre04 img {
  position: absolute;
  top: 7%;
  left: -35%;
  width: 100%; /* Ajuste la taille des images */
  height: auto; /* Conserve les proportions */
  opacity: 0; /* Les images sont invisibles par défaut */
  mix-blend-mode: lighten;
  z-index: 100;
}

#fenetre04 img:nth-child(1) {
  animation: blink 1.5s infinite ease-in-out; /* Clignote toutes les 1.5s */
  animation-delay: 0s; /* Pas de décalage */
  z-index: 100;
}

#fenetre04 img:nth-child(2) {
  animation: blink 1.5s infinite ease-in-out; /* Clignote toutes les 1.5s */
  animation-delay: 0.5s; /* Décalage de 0.5s */
}

#fenetre04 img:nth-child(3) {
  animation: blink 1.5s infinite ease-in-out; /* Clignote toutes les 1.5s */
  animation-delay: 1s; /* Décalage de 1s */
}

#lamp02 {
  top: 32%;
  left: 35%;
  mix-blend-mode: lighten;
  width: 40vw; /* Taille pour petits écrans */
  animation: grow 3s infinite ease-in-out; /* Animation infinie avec une durée de 3s */
  transform-origin: center; /* L'animation se fait à partir du centre */
}
@keyframes grow {
  0% {
    transform: scale(0.5); /* Taille initiale réduite à 50% */
    opacity: 0; /* Légère transparence */
  }
  30% {
    opacity: 1; /* Légère transparence */
  }
  70% {
    opacity: 1;
  }

  100% {
    transform: scale(3.5); /* Taille agrandie à 200% */
    opacity: 0; /* Devient invisible */
  }
}

#panno01 {
  top: 25%;
  mix-blend-mode: lighten;
  width: 150vw;

  /* Ajout de l'animation */
  animation: blink 0.8s infinite ease-in-out;
}

#magasin01 {
  top: 60%;
  left: 14%;
  mix-blend-mode: lighten;
  width: 100vw;
}

#magasin02 {
  top: 35%;
  left: -10%;
  mix-blend-mode: lighten;
  width: 200vw;
}

#magasin03 {
  top: 65%;
  mix-blend-mode: lighten;
  width: 200vw;
}

#ville01 {
  top: 14%;
  left: 0%;
  mix-blend-mode: lighten;
  width: 100vw;
}

#panno02 {
  /*globe*/
  top: 62%;
  left: -85%;
  mix-blend-mode: lighten;
  width: 200vw;
}

#panno03 {
  /*panneau las vegas*/
  top: 35%;
  left: -10%;
  mix-blend-mode: lighten;
  width: 100vw;
}

#panno04 {
  /*cheval*/
  top: 33%;
  left: -30%;
  mix-blend-mode: lighten;
  width: 150vw;
}

#phare01 {
  /*phrare*/
  top: 73%;
  left: -30%;
  mix-blend-mode: lighten;
  width: 150vw;
  animation: rotateAndBlink 2s infinite ease-in-out; /* Animation infinie avec une durée de 2s */
  transform-origin: center; /* Définit le point de rotation au centre de l'image */
}

#phare02 {
  /* Phare voiture coupé */
  top: 95%;
  left: -30%;
  mix-blend-mode: lighten;
  width: 130vw;
  animation: blinkPhare 1.5s infinite ease-in-out; /* Animation de clignotement */
}

@keyframes blinkPhare {
  0%,
  100% {
    opacity: 1; /* Complètement visible */
  }
  60% {
    opacity: 0.5; /* Invisible */
  }
}

#phare03 {
  top: 77%;
  left: -30%;
  mix-blend-mode: lighten;
  width: 100vw;
  animation: grow2 8s ease infinite; /* Animation infinie avec une durée de 3s */
}
@keyframes grow2 {
  0% {
    transform: scale(0) translateY(0); /* Taille initiale réduite et position initiale */
    opacity: 0; /* Légère transparence */
  }
  10% {
    opacity: 1;
  }

  30% {
    opacity: 1; /* Complètement visible */
  }

  80% {
    transform: scale(1.5) translateY(80%); /* Taille maximale et déplacement final */
    opacity: 0; /* Devient invisible */
  }
  100% {
    transform: scale(1.5) translateY(80%); /* Taille maximale et déplacement final */
    opacity: 0; /* Devient invisible */
  }
}

/* Nouveau conteneur en haut */
.top-container {
  position: relative; /* Nécessaire pour positionner les enfants avec z-index */
  font-family: "Special Gothic Expanded One", sans-serif;
  color: white;
  background: rgb(0, 2, 40); /* Texte noir */
  text-align: center;
  height: 100vh; /* Le conteneur occupe toute la hauteur de la fenêtre */
  display: flex; /* Active flexbox */
  justify-content: center; /* Centre horizontalement les enfants */
  align-items: center; /* Centre verticalement les enfants */
  flex-direction: column; /* Positionne les enfants en colonne */
  overflow: hidden; /* Cache les débordements éventuels */
  transition: background-color 0.5s ease-in-out; /* Transition fluide pour l'assombrissement */
}

.top-container h1 {
  margin: 0; /* Supprime les marges par défaut */
  padding: 0; /* Supprime les espacements internes */
  text-align: center; /* Centre le texte */
  vertical-align: middle;
  align-items: center;
  position: absolute;
  mix-blend-mode: difference;
}

.video01 {
  position: absolute;
  top: 50%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  width: 100%; /* La vidéo occupe toute la largeur du conteneur */
  height: 100%; /* La vidéo occupe toute la hauteur du conteneur */
  object-fit: cover; /* Assure que la vidéo remplit le conteneur sans déformation */
  justify-content: center; /* Centre verticalement le contenu */
  align-items: center; /* Centre horizontalement le contenu */
  mix-blend-mode: lighten;
}

.year-counter {
  position: absolute;
  top: 50%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste le point d'ancrage pour centrer */
  font-size: 5rem; /* Taille du texte */
  font-family: "Special Gothic Expanded One", sans-serif;
  color: white;
  z-index: 3; /* Place le compteur au-dessus de la vidéo */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Ajoute une ombre pour améliorer la lisibilité */
  mix-blend-mode: difference;
}

/* Animation de scintillement */
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

/* Image de fond */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/plan-noir.svg") no-repeat center center;
  background-size: 200%; /* Ajuste la taille de l'image */
  opacity: 1; /* Opacité par défaut */
  z-index: 0; /* Place l'image derrière les autres éléments */
  pointer-events: none; /* Empêche les interactions */
}

/* Définition de l'animation */
@keyframes scrollText {
  0% {
    transform: translateX(50%); /* Commence hors de l'écran à droite */
  }
  100% {
    transform: translateX(-100%); /* Termine hors de l'écran à gauche */
  }
}

.night-mode-container {
  display: none; /* Caché par défaut */
  position: fixed; /* Fixe le conteneur */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100; /* Place au-dessus des autres éléments */
}

@keyframes textAppearDisappear {
  0% {
    opacity: 0; /* Invisible */
  }
  50% {
    opacity: 1; /* Complètement visible */
  }
  100% {
    opacity: 0; /* Invisible */
  }
}

/* Bouton pour activer le mode nuit */
#night-mode-button {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 50px; /* Largeur du bouton */
  height: 50px; /* Hauteur du bouton */
  background: url("../images/etoile.svg") no-repeat center center; /* Image par défaut */
  background-size: contain; /* Ajuste la taille de l'image */
  border: none; /* Pas de bordure */
  border-radius: 50%; /* Forme ronde */
  cursor: pointer; /* Curseur en forme de main */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Ombre pour un effet 3D */
  z-index: 1000;
  transition: background 0.3s ease; /* Transition douce pour le changement d'image */
}

/* Bouton en mode nuit */
body.night-mode #night-mode-button {
  background: url("../images/etoile-blanche.svg") no-repeat center center; /* Image en mode nuit */
  background-size: contain; /* Ajuste la taille de l'image */
}

/* Styles pour les étoiles */
.star {
  position: absolute;
  width: 3px; /* Taille des étoiles */
  height: 3px;
  background-color: white; /* Couleur des étoiles */
  border-radius: 50%; /* Forme ronde */
  opacity: 0.8; /* Légère transparence */
  pointer-events: none; /* Empêche les interactions */
  animation: starTwinkle 2s infinite ease-in-out; /* Animation de scintillement */
}

/* Animation de scintillement */
@keyframes starTwinkle {
  0%,
  100% {
    opacity: 0.8; /* Étoile légèrement visible */
  }
  50% {
    opacity: 0.4; /* Étoile moins visible */
  }
}