.galerie-realisations {
  padding: 3rem 1rem;
  text-align: center;
}

.filtre-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.filtre-btn {
  padding: 0.5rem 1.25rem;
  border-radius: var(--border-radius-max);
  border: none;
  font-family: var(--main-font-family);
  font-size: var(--font-size-base);
  cursor: pointer;
  background-color: var(--main-color-green);
  color: var(--main-color-white);
  transition: var(--basic-transition);
}

.filtre-btn.active,
.filtre-btn:hover {
  background-color: var(--hover-color);
}

/* Affiche les boutons seulement sur desktop */
.filtre-categories {
  display: flex;
}

.select-filter-container {
  display: none;
}

/* Responsive : on cache les boutons et on montre le select */
@media (max-width: 1200px) {
  .filtre-categories {
    display: none;
  }

  .select-filter-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .filtre-select {
    display: block;
    margin-bottom: 2rem;
    padding: 0.75rem 1rem;
    font-family: var(--main-font-family);
    font-size: var(--font-size-base);
    border-radius: var(--border-radius-max);
    border: 1px solid var(--main-color-green);
    background-color: var(--main-color-white);
    color: var(--main-color-black);
  }
}

.filtre-select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23444444" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.liste-realisations {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center; /* centre chaque bloc .realisation-item */
}

.realisation-item {
  background: var(--color-light-beige);
  padding: 3rem;
  border-radius: var(--border-radius);
  box-shadow: var(--main-shadow);
  transition: var(--basic-transition);
  width: 100%;
  text-align: center;
}

.realisation-item h2 {
  font-family: var(--title-font-family);
  font-size: var(--font-size-h2);
  color: var(--main-color-black);
  margin-bottom: 3rem;
}

/* Galerie WordPress (Gutenberg ou Classique) */
.realisation-content .wp-block-gallery,
.realisation-content .wp-block-gallery.is-layout-flex,
.realisation-content .gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

/* Sur mobile, on remplace minmax() */
@media (max-width: 480px) {
  .realisation-content .wp-block-gallery,
  .realisation-content .gallery {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)) !important;
  }
}

.realisation-content .wp-block-gallery img,
.realisation-content .gallery img {
  width: 100% !important;
  min-width: 350px;
  min-height: 200px !important;
  max-height: 250px;
  object-fit: contain;
  border-radius: var(--border-radius);
  box-shadow: var(--main-shadow);
  display: block;
  margin: 0 auto;
  transition: var(--basic-transition);
}

@media (max-width: 900px) {
  .realisation-content .wp-block-gallery img,
  .realisation-content .gallery img {
    min-height: unset !important;
    min-width: unset;
  }
}

.realisation-content .wp-block-gallery img:hover {
  transform: scale(1.02);
}

.realisation-content .wp-block-image {
  width: 100% !important;
}

.realisation-content .wp-block-gallery a,
.realisation-content .gallery a {
  display: block;
  cursor: zoom-in;
}