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

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




/* 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: 450px;
  height: auto; /* 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 */
margin-bottom: 10px;
}


/* Style pour l'image d'en-tête */
.header-image {
  width: 50%; /* 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 */
  
  position: relative;
    width: auto;
  
  
  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;
}

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

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

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 */
}



.image-container {
  flex: 0 0 auto; /* Empêche les conteneurs de vidéos de se redimensionner */
  width: auto; /* Laisse les vidéos s'ajuster automatiquement */
}

.video-container {
  flex: 0 0 auto;  Empêche les conteneurs de vidéos de se redimensionner */
  width: 450px; /* Ajuste la largeur pour correspondre aux images */
  height: auto; /* Maintient les proportions */
  object-fit: cover; /* Recadre la vidéo pour éviter les bandes */
  display: block; /* Évite les marges externes indésirables */



}

video {
  max-width: 40%;
  max-height: 70vh; /* Limite la hauteur de la vidéo à la hauteur de l'écran */
  object-fit: contain; /* S'assure que la vidéo est visible sans être coupée */
  display: block; /* Évite les marges externes indésirables */
}

.mobile-break {
  display: none;
}


@media (max-width: 768px) {
  video {
    max-width: 100%;
    max-height: 50vh;
  }

  .image-container video {
    max-height: 50vh;
  }

  .mobile-break {
    display: block;
    height: 0;
  }
}