Lightbox

<style>
.bn-lightbox {
  padding: 1.5rem;
  background: #0B0F10;
  font-family: 'Inter', sans-serif;
}

.bn-lightbox__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

.bn-lightbox__thumb {
  display: block;
  cursor: zoom-in;
}

.bn-lightbox__thumb img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  transition: transform 0.3s ease;
}

.bn-lightbox__thumb:hover img {
  transform: scale(1.03);
}

/* ------------------------------------------------------------
   OVERLAY : cachée par défaut. La règle ":target" s'active sur un
   vrai site quand on clique un lien "#bn-lb-X" (navigation native
   du navigateur). La règle ".is-target" est un filet de secours
   utilisé UNIQUEMENT dans l'aperçu de ce catalogue — voir le script
   de la page détail pour le pourquoi. Les deux sélecteurs produisent
   exactement le même résultat visuel.
   ------------------------------------------------------------ */
.bn-lightbox__overlay {
  position: fixed;
  inset: 0;
  z-index: 999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(5, 8, 8, 0.95);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bn-lightbox__overlay:target,
.bn-lightbox__overlay.is-target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bn-lightbox__overlay figure {
  margin: 0;
  max-width: min(80vw, 700px);
}

.bn-lightbox__overlay img {
  width: 100%;
  border-radius: 4px;
  display: block;
}

.bn-lightbox__overlay figcaption {
  margin-top: 0.75rem;
  color: #979793;
  font-size: 0.85rem;
  text-align: center;
}

.bn-lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  color: #E6E4DD;
  font-size: 1.5rem;
  text-decoration: none;
}

.bn-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(230, 228, 221, 0.3);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #E6E4DD;
  text-decoration: none;
  font-size: 1.1rem;
}

.bn-lightbox__nav:hover {
  border-color: #E6E4DD;
}

.bn-lightbox__nav--prev { left: 24px; }
.bn-lightbox__nav--next { right: 24px; }

</style>

<div class="bn-lightbox">

  <div class="bn-lightbox__grid">
    <a href="#bn-lb-1" class="bn-lightbox__thumb">
      <img src="https://placehold.co/300x200" alt="Vignette 1" />
    </a>
    <a href="#bn-lb-2" class="bn-lightbox__thumb">
      <img src="https://placehold.co/300x200" alt="Vignette 2" />
    </a>
    <a href="#bn-lb-3" class="bn-lightbox__thumb">
      <img src="https://placehold.co/300x200" alt="Vignette 3" />
    </a>
  </div>

  <!-- Chaque overlay pointe vers le précédent ET le suivant, ce qui
       crée une boucle complète (1 → 2 → 3 → 1) sans une ligne de JS -->
  <div id="bn-lb-1" class="bn-lightbox__overlay">
    <a href="#" class="bn-lightbox__close" aria-label="Fermer">✕</a>
    <a href="#bn-lb-3" class="bn-lightbox__nav bn-lightbox__nav--prev" aria-label="Image précédente">←</a>
    <figure>
      <img src="https://placehold.co/1000x650" alt="Image 1 en grand" />
      <figcaption>1 / 3 — Brumes sur la vallée</figcaption>
    </figure>
    <a href="#bn-lb-2" class="bn-lightbox__nav bn-lightbox__nav--next" aria-label="Image suivante">→</a>
  </div>

  <div id="bn-lb-2" class="bn-lightbox__overlay">
    <a href="#" class="bn-lightbox__close" aria-label="Fermer">✕</a>
    <a href="#bn-lb-1" class="bn-lightbox__nav bn-lightbox__nav--prev" aria-label="Image précédente">←</a>
    <figure>
      <img src="https://placehold.co/1000x650" alt="Image 2 en grand" />
      <figcaption>2 / 3 — Forêt au petit matin</figcaption>
    </figure>
    <a href="#bn-lb-3" class="bn-lightbox__nav bn-lightbox__nav--next" aria-label="Image suivante">→</a>
  </div>

  <div id="bn-lb-3" class="bn-lightbox__overlay">
    <a href="#" class="bn-lightbox__close" aria-label="Fermer">✕</a>
    <a href="#bn-lb-2" class="bn-lightbox__nav bn-lightbox__nav--prev" aria-label="Image précédente">←</a>
    <figure>
      <img src="https://placehold.co/1000x650" alt="Image 3 en grand" />
      <figcaption>3 / 3 — Le lac au crépuscule</figcaption>
    </figure>
    <a href="#bn-lb-1" class="bn-lightbox__nav bn-lightbox__nav--next" aria-label="Image suivante">→</a>
  </div>

</div>