body {
    font-family: Arial, sans-serif;
}

/* Style pour le conteneur du scroll horizontal */
.horizontal-scroll-container {
  display: block;
  overflow-x: auto; /* Permet le défilement horizontal */
  white-space: nowrap; /* Empêche les éléments de se casser sur une nouvelle ligne */
  scroll-behavior: smooth; /* Défilement fluide */
  padding: 4px 0; /* Espacement pour que les images ne collent pas au bord */
}

.horizontal-scroll-container::-webkit-scrollbar {
  display: none; /* Masque la barre de défilement sur Chrome et Safari */
}

.horizontal-scroll-content {
  display: flex; /* Utilisation de flexbox pour l'agencement horizontal */
  gap: 10px; /* Espace entre les images */
}

.horizontal-scroll-content img {
  width: auto;
  height: 700px; /* Hauteur ajustée selon la proportion de l'image */
  object-fit: cover; /* Recadre l'image pour remplir sans déformer */
  transition: transform 0.3s ease-in-out; /* Effet de zoom fluide au survol */
}


/* Effet zoom au survol */
.horizontal-scroll-content img:hover {
  transform: scale(1.06);
}

/* Style pour l'image d'en-tête */
.header-image {
  width: 10%; /* S'adapte à 50% de la largeur de l'écran */
  height: auto; /* Garde les proportions */
}



/* Style pour la légende des images */
.image-container {
  position: relative;
  display: inline-block;
}

.image-caption {
  display: block; /* Assure que la légende occupe une nouvelle ligne */
  margin-top: 5px; /* Ajoute un espacement entre l'image et la légende */
  color: black; /* Change la couleur du texte si nécessaire */
  font-size: 12px; /* Taille de la police */
  opacity: 0; /* Reste invisible par défaut */
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* Empêche l'interaction avec la légende quand elle est invisible */
}

.image-container:hover .image-caption {
  opacity: 1;
}

.image-container video {
  width: 560px; /* Vidéo ou image occupe toute la largeur de son conteneur */
  height: auto; /* Garde les proportions */
  display: block; /* Évite les marges externes indésirables */
}

a {
  color: black; /* Change la couleur du texte des liens */
  text-decoration: none; /* Enlève le soulignement */
}

p {
  color: black; /* Change la couleur du texte si nécessaire */
  font-size: 12px; /* Taille de la police */
}

footer {
  position: fixed; /* Fixe le footer en bas de la fenêtre */
  bottom: 0; /* Positionne le footer tout en bas */
  z-index: 1000; /* Assure que le footer reste au-dessus des autres éléments */
  width: 100%; /* Occupe toute la largeur de l'écran */
  background-color: white;
}

.footer-container {
  display: flex; /* Flexbox pour aligner les éléments */
  justify-content: space-between; /* Distribue les éléments de manière égale */
  align-items: center; /* Centre les éléments verticalement */
  padding: 10px; /* Espacement */
  box-sizing: border-box; /* Inclut le padding dans la largeur totale */
  width: 100%; /* S'assure que le footer occupe toute la largeur de la page */
}

.footer-image {
  width: 15%; /* Réduit la taille de l'image à 10% */
  height: auto; /* Maintient les proportions */
}

.footer-text {
  font-size: 12px; /* Ajuste la taille du texte */
  color: black; /* Couleur du texte */
  margin-left: auto; /* Pousse le texte tout à droite */
  text-align: right; /* Aligne le texte à droite */
padding-right: 10px; /* Ajoute un espace de 20px entre le texte et le bord droit */
}

}


.video-container {
  /* max-width: 100%;  Empêche que la vidéo dépasse la largeur de la page */
  width: 560px;    /* Largeur par défaut */
  margin: 0 auto;  /* Centrer la vidéo sur la page */
}

.video-container iframe {
  width: 100%;
  height: auto;
}



/* Media Queries pour écrans plus petits */
@media (max-width: 768px) {
  .header-image {
    width: 30%; /* Laisse l'image prendre toute la largeur de l'écran sur mobile */
  }
.horizontal-scroll-content img {
  width: auto;
  height: 600px;
p { max-width: 100%; }
}