/* ==========================================================================
   page-realisations.css
   Chargé UNIQUEMENT sur cette page (voir functions.php, section 3).
   Ne mettre ici QUE ce qui est spécifique à cette page :
   base.css et header-footer.css couvrent déjà le reste.
   ========================================================================== */

/* ==========================================================================
   page-realisations.css
   Chargé uniquement sur la page "Réalisations" (voir functions.php).
   ========================================================================== */

.hero-realisations .page-hero-deco {
  top: -20px;
  right: -30px;
  width: 300px;
}

/* ---- Boutons de filtre par catégorie ---- */
.realisations-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: var(--space-5);
}

.realisations-filter button {
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  background: var(--blue-mist);
  color: var(--blue-primary);
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease);
}

.realisations-filter button:hover {
  background: var(--blue-mist-2);
}

.realisations-filter button.active {
  background: var(--grad-brand);
  color: #fff;
  border: none;
}

/* ---- Grille (le style de chaque tuile .realisation-tile est dans base.css) ---- */
.realisations-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

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

@media (max-width: 560px) {
  .realisations-full-grid {
    grid-template-columns: 1fr;
  }
}






.selector {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}