/* Style général pour la galerie */
.ma-galerie {
  padding: 12px; //20
}

/* Grille fluide avec des miniatures conservant les proportions */
.image-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* colonnes flexibles */
  gap: 15px;  /* Espacement entre les images */
  margin: 0 auto;
  max-width: 1200px; /* Largeur maximale de la galerie */
}

/* Conteneur des images avec proportions ajustables */
.image-container .image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* Proportions ajustables : ici 4:3, soit hauteur = 75% de la largeur */
  overflow: hidden;
  border-radius: 50%; /* Coins arrondis pour l'image 10 px */
  box-shadow: 0 4px 6px rgba(64, 0, 32, 0.32); /* Ombre légère */
  background-color: #d5dfe8;
}

/* Conteneur individuel pour chaque image et ses informations */
.image-container .image-item {
  display: flex;
  flex-direction: column; /* Empile la vignette et les infos verticalement */
  align-items: center; /* Centre les éléments horizontalement */
}

/* Informations sous les vignettes */
.image-container .image-info {
  margin-top: 10px; /* Espacement entre l'image et le texte */
  text-align: center; /* Centrer les textes */
  font-size: 0.9rem; /* Taille légèrement réduite pour le texte */
  color: #333; /* Couleur par défaut du texte */
}

/* Styles pour les sous-éléments (facultatif, pour personnalisation) */
.image-container .image-info .title {
  font-weight: bold;
  margin-bottom: 0;
}

.image-container .image-info .year {
  font-style: italic;
  color: #666; /* Couleur différente pour l'année */
}

.image-container .image-info .description {
  margin-top: 5px;
  line-height: 1.4; /* Meilleure lisibilité */
}

/* Les images dans leurs conteneurs */
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Garder les proportions sans déformation */
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Effet au survol des images */
.image-container img:hover {
  transform: scale(1.2); /* 1.05 */
}

/* Style pour l'overlay et l'image agrandie */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Style pour l'image agrandie */
.overlay img {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  transition: transform 0.3s ease;
}

/* Style des boutons de navigation dans l'overlay */
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 10px;
  background-color: rgba(118, 126, 152, 0.5); /*(118, 126, 134, 0.5)*/
  color: aliceblue; /* white*/
  border: none;
  font-size: 2rem;
  padding: 10px 10px 20px 10px; /*10px*/
  cursor: pointer;
  z-index: 1010;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* LECTEUR AUDIO */
.audio-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.audio-item {
    display: flex;
    align-items: center;
}

.audio-item audio {
    border-radius: 5px;
}

/* Video */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 840px;
    padding-top: 56.25%; /* Ratio 16:9 */
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}