/* Page Réalisations : mosaïque de photos encadrées (ouverture en modale : js/gallery.js) */

.galerie {
  columns: 3 260px;
  column-gap: var(--espace-m);
}

.galerie__element {
  break-inside: avoid;
  margin-bottom: var(--espace-m);
}

.galerie__bouton {
  display: block;
  width: 100%;
  cursor: zoom-in;
  transition: transform var(--transition);
}

.galerie__bouton:hover {
  transform: translateY(-4px);
}

.galerie__etiquette {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
}

/* Voile et icône au survol */
.galerie__survol {
  position: absolute;
  inset: 10px;
  display: grid;
  place-items: center;
  background-color: rgb(24 20 16 / 35%);
  color: var(--ivoire);
  opacity: 0;
  transition: opacity var(--transition);
}

.galerie__survol .icone {
  width: 36px;
  height: 36px;
}

/* Légende visible (texte lu par les visiteurs et par les moteurs de recherche) */
.galerie__legende {
  margin-top: var(--espace-xs);
  font-family: var(--police-titre);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--encre-douce);
  text-align: center;
}

.galerie__bouton:hover .galerie__survol,
.galerie__bouton:focus-visible .galerie__survol {
  opacity: 1;
}