.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% */
  position: relative;
  min-height: calc(100vh - 40px);
}

.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%);
  z-index: 0;
}

.photo-container .nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scaleX(0.6); /* Center vertically and horizontally compress */
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
  padding: 0;
  pointer-events: none;
  color: rgba(204, 204, 204, 0.15); /* 80% gray (204/255 ≈ 80%) with 15% opacity (almost transparent) */
  font-size: clamp(150px, 30vw, 600px); /* 3x bigger: responsive size between 150px and 600px based on viewport width */
  text-shadow: none;
  font-weight: 100; /* Very thin weight for narrow appearance */
  line-height: 1;
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -0.15em; /* More negative letter spacing for narrower appearance */
  font-stretch: ultra-condensed; /* Ultra-condensed font variant if available */
  width: auto;
}

.photo-container .nav-arrow.left {
  left: clamp(0px, calc(6vw - 50px), 70px); /* Responsive, adjusted to compensate for extra 50px left margin */
}

.photo-container .nav-arrow.right {
  right: clamp(40px, 6vw, 120px); /* Responsive distance from right edge */
}

.photo-container .nav-arrow.left::after,
.photo-container .nav-arrow.right::after {
  display: none; /* Remove the old arrow styling */
}

.photo-container.nav-visible .nav-arrow {
  opacity: 1;
  pointer-events: auto;
}

.touch-device .photo-container .nav-arrow {
  display: none;
}

@media (max-width: 800px) {
  .photo-container .nav-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .photo-container img {
  /* Définit la largeur maximale de l'image */
  max-width: 100%; /* Container already has 10px margins */

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

@media (max-width: 768px) {
  .photo-container img {
  /* Définit la largeur maximale de l'image */
  max-width: 100%; /* Container already has 10px margins */

  /* Définit la hauteur maximale de l'image */
  max-height: calc(100vh - 150px); /* 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;

}

@media (max-width: 580px) {
  .legendgallery {
    top: 70px; /* Moved down by 20px to match mobile positioning */
  }
}

.touch-device .legendgallery {
  top: 70px; /* Moved down by 20px from 50px */
}

@media (max-width: 800px) {
  .legendgallery {
    top: 70px; /* Moved down by 20px from 50px */
  }
  
  .photo-container {
    margin: 110px 10px 80px 10px !important; /* 110px for fixed banner + extra space, 10px on sides, 80px bottom margin */
    /* To center: container_center = 110px + height/2 = 50vh */
    /* So: height = 2 * (50vh - 110px) = 100vh - 220px */
    min-height: calc(100vh - 220px);
    padding-bottom: 50px !important; /* Reduced padding to make margin more visible */
  }
  
  .photo-container img {
    /* Image can use full container width since container already has 10px margins */
    max-width: 100%;
    margin-bottom: 20px !important; /* Add margin below image */
  }
  
  .legend {
    bottom: 30px; /* Back to original position */
  }
  
  .legend2 {
    bottom: 15px; /* Back to original position */
  }
}

/* Landscape orientation adjustments for touch devices < 800px */
@media (orientation: landscape) and (max-width: 800px) {
  .touch-device .legendgallery,
  .legendgallery {
    top: 20px !important; /* Reduced top margin since no horizontal bar */
    left: 80px !important; /* Add left margin for vertical bar */
  }
  
  .touch-device .photo-container,
  .photo-container {
    margin: 20px 10px 80px 80px !important; /* Reduced top margin (20px), added left margin (80px) for vertical bar */
    min-height: calc(100vh - 100px); /* Adjusted for reduced top margin */
  }
}

.touch-device .photo-container {
  margin: 110px 10px 80px 10px !important; /* 110px for fixed banner + extra space, 10px on sides, 80px bottom margin */
  /* To center: container_center = 110px + height/2 = 50vh */
  /* So: height = 2 * (50vh - 110px) = 100vh - 220px */
  min-height: calc(100vh - 220px);
  padding-bottom: 50px !important; /* Reduced padding to make margin more visible */
}

.touch-device .legend {
  bottom: 30px; /* Back to original position */
}

.touch-device .legend2 {
  bottom: 15px; /* Back to original position */
}

.touch-device .photo-container img {
  /* Image can use full container width since container already has 10px margins */
  max-width: 100%;
  margin-bottom: 20px !important; /* Add margin below image */
}

@media (max-width: 580px) {
  .legendgallery {
    top: 65px;
  }
  
  .touch-device .legendgallery {
    top: 65px;
  }
}

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

/* Mobile: Always show overlay (for title), transparent background by default, darken on tap */
@media (max-width: 800px) {
  .image-container .overlay {
    display: flex !important;
    background-color: transparent; /* No darkening by default */
    transition: background-color 0.2s ease;
  }
  
  /* Add text shadow to make text visible without dark background */
  .image-container .overlay p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, 0.8);
  }
  
  .image-container .overlay span {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, 0.8);
  }
  
  /* Darken background only on tap */
  .image-container:active .overlay,
  .image-container.tapped .overlay {
    background-color: rgba(0, 0, 0, 0.7); /* Dark background on tap */
  }
}

.touch-device .image-container .overlay {
  display: flex !important;
  background-color: transparent; /* No darkening by default */
  transition: background-color 0.2s ease;
}

/* Add text shadow to make text visible without dark background */
.touch-device .image-container .overlay p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, 0.8);
}

.touch-device .image-container .overlay span {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, 0.8);
}

.touch-device .image-container:active .overlay,
.touch-device .image-container.tapped .overlay {
  background-color: rgba(0, 0, 0, 0.7); /* Dark background on tap */
}


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

}