.photo-container {
  /* Centre le contenu horizontalement */
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Centre le contenu verticalement */
  align-items: center;

  /* Applique une marge de 25 pixels autour de l'image */
  margin: 25px;

  /* Fond  */
  background-color: rgba(255, 255, 255, 1); /* Gris transparent à 25% */
}

.photo-container img {
  /* Définit la largeur maximale de l'image */
  max-width: calc(100% - 150px); /* 50px = 2 * 25px (marges horizontales) */

  /* Définit la hauteur maximale de l'image */
  max-height: calc(100vh - 150px); /* 50px = 2 * 25px (marges verticales) */

  /* Centre l'image dans son conteneur */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  .photo-container img {
  /* Définit la largeur maximale de l'image */
  max-width: calc(100% - 50px); /* 50px = 2 * 25px (marges horizontales) */

  /* Définit la hauteur maximale de l'image */
  max-height: calc(100vh - 50px); /* 50px = 2 * 25px (marges verticales) */
  }
}

#image {

  opacity: 0; /* Définir l'opacité à 0 pour cacher l'image au début */
  transition: opacity 1.5s ease; /* Définir la transition pour l'opacité sur 0.5 seconde */
  
}

.legendgallery {
  /* Centrer la légende sous la photo */
  position: fixed;
  top: 20px;
  text-align: center;

  /* Ajouter un espace entre la légende et la photo */
  margin-top: 10px;

  /* Changer la couleur du texte en gris clair */
  color: #AAAAAA; /* Remplacez #888888 par le code de couleur gris clair souhaité */

  /* Changer la police du texte */
  font-family: 'Rubik', Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 100;

}

/* Supprime les décorations des liens uniquement dans .legendgallery */
.legendgallery a {
  text-decoration: none; /* Supprime les décorations */
  color: inherit; /* Conserve la couleur du texte environnant */
}

/* Exemple : personnalisation au survol */
.legendgallery a:hover {
  color: #3498db; /* Bleu au survol */
}

/* Exemple : personnalisation pour un lien actif */
.legendgallery a:active {
  color: #2ecc71; /* Vert lorsqu'il est actif */
}

.legend {
  /* Centrer la légende sous la photo */
  position: fixed;
  bottom: 30px;
  text-align: center;

  /* Ajouter un espace entre la légende et la photo */
  margin-top: 10px;

  /* Changer la couleur du texte en gris clair */
  color: #AAAAAA; /* Remplacez #888888 par le code de couleur gris clair souhaité */

  /* Changer la police du texte */
  font-family: 'Rubik', Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 100;

}

.legend2 {
  /* Centrer la légende sous la photo */
  position: fixed;
  bottom: 15px;
  text-align: center;

  /* Ajouter un espace entre la légende et la photo */
  margin-top: 10px;

  /* Changer la couleur du texte en gris clair */
  color: #BBBBBB; /* Remplacez #888888 par le code de couleur gris clair souhaité */

  /* Changer la police du texte */
  font-family: 'Rubik', Arial, Helvetica, sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 100;

}



/*
Gallery
*/

.image-container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Opacité de l'overlay */
  display: none;
  justify-content: center;
  align-items: center;
}

.overlay p {
  color: white;
  font-size: 18pt;
  text-align: center;
  max-width: 80%; /* Limite la largeur de la légende */
  padding: 10px;
  margin: 0;
}

.overlay span {
  color: lightgrey;
  font-size: 12pt;
  text-align: center;
  max-width: 80%; /* Limite la largeur de la légende */
  padding: 10px;
  margin: 0;
}

.image-container:hover .overlay {
  display: flex;
}


.information {
  text-decoration: none;
}
.information a {
  text-decoration: none;
  color: grey;

}