/* =========================================================
   Page « Galerie photos » + visionneuse plein écran
   ========================================================= */

/* ---------- Pastilles de filtre ---------- */
.pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 2rem; }
.pastilles button {
  min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
  font-family: var(--police-titre-2); font-weight: 700; color: var(--or);
  background: rgba(20, 6, 8, .6); border: 1px solid var(--or);
  transition: background-color var(--transition), color var(--transition);
}
.pastilles button:hover { background: var(--rouge-velours); color: var(--ivoire); }
.pastilles button[aria-pressed="true"] { background: var(--degrade-or); color: var(--noir); }

/* ---------- Mosaïque ---------- */
.galerie { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.galerie__vignette {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: zoom-in;
  background: var(--noir); border: 2px solid var(--or-fonce); border-radius: var(--rayon);
  box-shadow: var(--ombre); transition: border-color var(--transition), transform var(--transition);
}
.galerie__vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.galerie__vignette:hover, .galerie__vignette:focus-visible { border-color: var(--or); transform: translateY(-3px); }
.galerie__vignette:hover img { transform: scale(1.05); }
.galerie__legende {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem .8rem .6rem; text-align: left;
  background: linear-gradient(transparent, rgba(20, 6, 8, .9)); color: var(--ivoire); font-size: .92rem;
}

/* ---------- Visionneuse ---------- */
.visionneuse {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 3, 4, .96); color: var(--ivoire);
}
.visionneuse::backdrop { background: rgba(0, 0, 0, .85); }
.visionneuse[open] { display: grid; place-items: center; animation: apparaitre .25s ease; }
@keyframes apparaitre { from { opacity: 0; } }
.visionneuse__figure { display: grid; justify-items: center; gap: .75rem; max-width: 92vw; }
.visionneuse__image { max-width: 92vw; max-height: 80vh; object-fit: contain; border: 3px solid var(--or); border-radius: 6px; box-shadow: 0 0 60px rgba(212, 175, 55, .2); }
.visionneuse__legende { font-family: var(--police-sous-titre); font-style: italic; font-size: 1.1rem; text-align: center; }
.visionneuse__compteur { opacity: .7; font-style: normal; font-size: .9rem; margin-left: .5rem; }
.visionneuse__bouton {
  position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: var(--or); background: rgba(20, 6, 8, .8); border: 1px solid var(--or);
}
.visionneuse__bouton:hover { background: var(--rouge-velours); color: var(--ivoire); }
.visionneuse__precedent { left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse__suivant { right: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse__fermer { right: 1rem; top: 1rem; font-size: 1.3rem; }