/* =========================================================================
   PAGE PROJETS
   Styles spécifiques et scopés — réutilise au maximum les tokens & composants.
   ====================================================================== */

/* ---------------- Barre de filtres ---------------- */
.projects-filters {
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

/* État actif des boutons de filtre (.is-active posée par le JS) */
.btn--ghost.is-active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: none;
}
.btn--ghost.is-active:hover {
  background: var(--color-primary-strong, var(--color-primary));
  box-shadow: none;
}

/* ---------------- Grille de projets ---------------- */
/* La transition rend le masquage/affichage par filtre plus fluide */
.projects-grid [data-project] {
  animation: project-in 0.45s var(--ease-out) both;
}

@keyframes project-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .projects-grid [data-project] { animation: none; }
}