/* ==========================================================================
   REALISATIONS.CSS — Page Réalisations / Portfolio
   GRD Rénovation
   ========================================================================== */

/* --------------------------------------------------------------------------
   GRILLE PROJETS
   -------------------------------------------------------------------------- */
.realisations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 600px) {
  .realisations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .realisations-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

/* Items cachés lors du filtrage */
.project-card[hidden] {
  display: none;
}

.project-card.is-filtering {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* --------------------------------------------------------------------------
   SECTION INTRO RÉALISATIONS
   -------------------------------------------------------------------------- */
.realisations-intro {
  background-color: var(--color-surface);
  padding: var(--space-6) 0;
}

.realisations-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.realisations-count__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.realisations-count__number {
  font-weight: 700;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   INSTRUCTIONS SLIDER
   -------------------------------------------------------------------------- */
.slider-hint {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  padding: 0.75rem 1.5rem;
  background-color: var(--color-surface);
  border-radius: 50px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--color-border);
}

.slider-hint__icon {
  font-size: 1.3rem;
  animation: float 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   ANIMATIONS FILTRAGE
   -------------------------------------------------------------------------- */
@keyframes appear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.project-card.is-appearing {
  animation: appear 0.4s ease forwards;
}

/* --------------------------------------------------------------------------
   MESSAGE VIDE (si filtre n'a pas de résultats)
   -------------------------------------------------------------------------- */
.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-12) 0;
  display: none;
}

.no-results.is-visible {
  display: block;
}

.no-results__icon {
  font-size: 3rem;
  margin-bottom: var(--space-2);
  opacity: 0.4;
}

.no-results__text {
  color: var(--color-text-muted);
}