/* =========================================================================
   PAGE GALERIE
   Grille mosaïque responsive + filtres. Réutilise les tokens du design system.
   ====================================================================== */

/* ---------------- Note discrète dans le lead ---------------- */
.gallery-note {
  display: inline-block;
  margin-top: var(--sp-3);
  font-style: italic;
  font-size: var(--fs-50);
  color: var(--c-amber-300);
  opacity: 0.92;
}

/* ---------------- Barre de filtres ---------------- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-8);
}
.gallery-filters .btn { text-transform: none; letter-spacing: 0; }

/* État actif du filtre (bouton ghost sélectionné) */
.gallery-filters .btn--ghost.is-active {
  background: var(--grad-leaf, var(--color-primary));
  color: #fff;
  box-shadow: var(--sh-sm);
}
.gallery-filters .btn--ghost.is-active::after { display: none; }
.gallery-filters .btn--ghost.is-active:hover {
  box-shadow: var(--sh-md);
  background: var(--grad-leaf, var(--color-primary));
}

/* ---------------- Grille mosaïque ---------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: var(--sp-4);
}

/* L'item occupe toute la hauteur de la cellule et garde son ratio via .media */
.gallery-grid .gallery-item { height: 100%; }
.gallery-grid .gallery-item .media { height: 100%; }
.gallery-grid .gallery-item .media img { width: 100%; height: 100%; object-fit: cover; }

/* Rythme mosaïque : on met en avant quelques visuels (à partir de 2 colonnes) */
@media (min-width: 720px) {
  .gallery-grid .gallery-item:nth-child(6n + 1) { grid-column: span 2; }
  .gallery-grid .gallery-item:nth-child(8n + 4) { grid-row: span 2; }
}

/* Sur mobile, une seule colonne lisible */
@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid .gallery-item { grid-column: auto !important; grid-row: auto !important; }
}

/* Légende toujours lisible au focus clavier (accessibilité) */
.gallery-grid .gallery-item:focus-visible {
  outline: 3px solid var(--c-amber-400);
  outline-offset: 3px;
}
.gallery-grid .gallery-item:focus-visible .gallery-item__cap,
.gallery-grid .gallery-item:focus-visible .gallery-item__zoom {
  transform: none;
  opacity: 1;
}