.page-home {
    background:url(../img/home/homePage.jpg) center center no-repeat;
    background-size: cover;
    min-height: 100vh;
  }

  .homeText {
    font-weight: 100;
    color: white;
    margin-top: 250px;
    max-width: 600px;
    margin-left: 65%;
    padding-bottom: 20px;
    border-radius: 20px;
    margin-right: 12px;
  }

  @media (max-width: 768px) {
    .homeText {
        background: linear-gradient(rgba(82, 72, 72, 0.6), rgb(230, 182, 182,0.2));
      }
    }
    
/* Gestion des images en gallerie */

/* Zoom image */
.image {
  cursor: pointer;
  padding: 5px 5px;
}

.image-container .image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: .2s linear;
}

.image-container .image:hover img {
  transform: scale(1.1);
}
.prev, .next {
  position: absolute; /* Positionnement absolu */
  top: 50%; /* Centrer verticalement */
  transform: translateY(-50%); /* Ajustement pour centrer l'élément */
  font-size: 30px; /* Taille de la flèche */
  color: white; /* Couleur de la flèche */
  cursor: pointer; /* Changer le curseur au survol */
  z-index: 1002; /* S'assurer qu'elles sont au-dessus de l'image */
  user-select: none; /* Évite la sélection de texte */
}

.prev {
  left: 10px; /* Position à gauche */
}

.next {
  right: 10px; /* Position à droite */
}

.prev:hover, .next:hover {
  color: #ddd; /* Change la couleur au survol pour indiquer que c'est cliquable */
}
/* Conteneur pour l'image agrandie */
.lightbox {
  display: none; /* Cacher le lightbox par défaut */
  position: fixed;
  z-index: 1000; /* S'assurer que le lightbox est au-dessus des autres éléments */
  left: 0;
  top: 0;
  width: 100%; /* Prendre toute la largeur */
  height: 100%; /* Prendre toute la hauteur */
  background-color: rgba(0, 0, 0, 0.8); /* Fond noir transparent */
  justify-content: center; /* Centrer l'image horizontalement */
  align-items: center; /* Centrer l'image verticalement */
}

/* Pour afficher le lightbox */
.lightbox.show {
  display: flex; /* Utiliser flexbox pour centrer */
}

.lightbox-content {
  max-width: 90%; /* Limiter la largeur de l'image */
  max-height: 70%; /* Limiter la hauteur de l'image */
  display: block; /* Afficher comme un bloc */
  margin: auto; /* Centrer l'image */
  position: relative; /* Ajouter un positionnement relatif pour le conteneur */
}
.close {
  position: absolute; /* Positionner de manière absolue */
  top: 5%; /* Ajuste la position verticale */
  right: 5%; /* Ajuste la position horizontale */
  color: white; /* Couleur de la croix */
  font-size: 30px; /* Taille de la croix */
  cursor: pointer; /* Changer le curseur au survol */
  z-index: 1001; /* S'assurer qu'elle est au-dessus du lightbox */
  transition: color 0.3s; /* Effet de transition pour le survol */
}

.close:hover {
  color: red; /* Change la couleur au survol pour indiquer que c'est cliquable */
}

/* Container de la galerie avec défilement horizontal */
.rowGallerie {
  display: flex;
  overflow-x: auto; /* Permet le défilement horizontal */
  gap: 10px; /* Espace entre les images */
  padding-bottom: 10px; /* Pour un peu d'espace sous les images */
  max-width: 100%; /* Empêche le conteneur de dépasser la largeur de l'écran */
  justify-content: space-around;
}
/* Style des images dans la galerie */
.gallery-item {
  width: 200px; /* Fixe la largeur de chaque image */
  height: 150px; /* Hauteur maximale de 150px */
  border-radius: 8px;
  object-fit: cover; /* Permet à l'image de remplir son conteneur sans déformation */

}
/* Styles pour le lien */
.gallery a {
  display: inline-block; /* Permet au lien de prendre uniquement la largeur de l'image */
  text-decoration: none; /* Supprime le soulignement du lien */
}

/* Fin de la gestion des images en gallerie */