Galerie grille avec filtres

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

.bn-gallery-grid__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.bn-gallery-grid__tabs button {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(230, 228, 221, 0.2);
  background: none;
  color: #979793;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.bn-gallery-grid__tabs button:hover {
  color: #E6E4DD;
}

.bn-gallery-grid__tabs button.is-active {
  border-color: #E6E4DD;
  color: #E6E4DD;
}

.bn-gallery-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.bn-gallery-grid__grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

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

/* Ajoutée par script.js sur les images qui ne correspondent pas au
   filtre actif */
.bn-gallery-grid__grid img.is-hidden {
  display: none;
}

</style>

<div class="bn-gallery-grid" data-fx-root>
  <div class="bn-gallery-grid__tabs">
    <button type="button" class="is-active" data-filter="all">Tout</button>
    <button type="button" data-filter="paysage">Paysages</button>
    <button type="button" data-filter="portrait">Portraits</button>
    <button type="button" data-filter="abstrait">Abstraits</button>
  </div>

  <div class="bn-gallery-grid__grid">
    <img data-cat="paysage" src="https://placehold.co/300x300" alt="Vallée brumeuse" />
    <img data-cat="portrait" src="https://placehold.co/300x300" alt="Portrait au crépuscule" />
    <img data-cat="abstrait" src="https://placehold.co/300x300" alt="Anneau sombre" />
    <img data-cat="paysage" src="https://placehold.co/300x300" alt="Forêt au petit matin" />
    <img data-cat="portrait" src="https://placehold.co/300x300" alt="Silhouette" />
    <img data-cat="abstrait" src="https://placehold.co/300x300" alt="Ondes sur l'eau" />
    <img data-cat="paysage" src="https://placehold.co/300x300" alt="Montagne au loin" />
    <img data-cat="portrait" src="https://placehold.co/300x300" alt="Regard vers la fenêtre" />
  </div>
</div>


<script>
(function () {
  const root = document.querySelector('.bn-gallery-grid[data-fx-root]');
  if (!root) return;

  const buttons = root.querySelectorAll('.bn-gallery-grid__tabs button');
  const images = root.querySelectorAll('.bn-gallery-grid__grid img');

  buttons.forEach((btn) => {
    btn.addEventListener('click', () => {
      buttons.forEach((b) => b.classList.remove('is-active'));
      btn.classList.add('is-active');

      const filter = btn.dataset.filter;
      images.forEach((img) => {
        const matches = filter === 'all' || img.dataset.cat === filter;
        img.classList.toggle('is-hidden', !matches);
      });
    });
  });
})();

</script>