/* Réinitialisation des styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;   /* box-sizing pour éviter la superposition du contenu du body au footer */
}

html {
  height: 100%;
}

header {
  z-index: 999; /* Assurez-vous que le header apparaît au-dessus des sections */
  position: fixed;
  width: 100%;
  top: 0;
  letter-spacing: 0.05rem;
}

main {
  height: 100vh;
  display: flex;
  flex-direction: row; /* Le défilement sera horizontal */
  overflow-x: scroll; /* Activation du défilement horizontal */
  overflow-y: hidden; /* Désactivez le défilement vertical sur le corps */
  padding-top: 5vh; /* Ajustez cette valeur en fonction de la hauteur de votre header */
}

section {
  padding: 7vh 0;
  width: 100vw;
  display: flex;
  flex-direction: column; /* Contenu aligné en colonne */
  justify-content: center; /* Centrer verticalement le contenu */
  overflow-y: auto; 
  scroll-behavior: smooth; /* Activer un défilement fluide */
  scroll-snap-align: start; /* Le défilement s'arrête au début de chaque section */

  flex: 0 0 100%; /* Les sections ont une largeur égale à 100% de la largeur de la fenêtre */
}

section#offers, section#contact {
  justify-content: space-between; /* Centrer verticalement le contenu */
}

section.verti-center {
  align-items: center; /* Centrer le contenu verticalement */
}

.scroll-anim {
  animation-name: moveRight;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2; /* Répétez l'animation 2 fois */
}

@keyframes moveRight {
  0% {
    transform: translateX(0); /* Aucun déplacement initial */
  }
  50% {
    transform: translateX(-4vw); /* Déplacement vers la droite */
  }
  100% {
    transform: translateX(0); /* Retour à la position d'origine */
  }
}

footer {
  padding: 0.1rem 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  letter-spacing: 0.05rem;
}