/*
 * Styles ajoutés pour des éléments qui n'existent pas dans le thème
 * d'origine (filtres de portfolio/vidéos par catégorie).
 */

.project-page__filter {
  margin-bottom: 40px;
  text-align: center;
}

.project-page__filter-list {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.project-page__filter-list li {
  cursor: pointer;
  padding: 10px 24px;
  border: 1px solid var(--builza-bdr-color);
  border-radius: var(--builza-bdr-radius);
  color: var(--builza-black);
  font-weight: 600;
  font-size: 15px;
  transition: all 300ms ease;
}

.project-page__filter-list li:hover,
.project-page__filter-list li.active {
  background-color: var(--builza-base);
  border-color: var(--builza-base);
  color: var(--builza-white);
}

/*
 * Le carrousel de texte de la bannière d'accueil (effet "fade" + boucle
 * infinie, Swiper 5.4.5) affiche parfois deux diapositives à opacité 1
 * simultanément : la diapositive active ET la diapositive dupliquée
 * voisine créée par le mode boucle héritent toutes les deux d'une
 * opacité pleine au moment du clonage, avant que Swiper ne recalcule
 * l'opacité de fondu. Résultat : les textes de plusieurs diapositives
 * se superposent et deviennent illisibles.
 * On force ici l'opacité par CSS (plus fiable que le calcul JS de
 * Swiper pour cette combinaison boucle + fondu) : seule la diapositive
 * marquée active reste visible, la transition en fondu de Swiper
 * continue de s'appliquer normalement sur cette propriété.
 */
.main-slider__carousel .swiper-slide {
  opacity: 0 !important;
}

.main-slider__carousel .swiper-slide-active {
  opacity: 1 !important;
}

/*
 * Trou dans les règles responsive du header (public/vendor/css/responsive.css) :
 * le menu principal (main-menu__list) bascule en mode mobile (hamburger)
 * dès 991px de large, mais l'encart "Appelez-nous à tout moment"
 * (main-menu__call) n'est masqué que pour 768-991px et 1200-1319px —
 * la tranche intermédiaire 992-1199px (largeur très courante d'ordinateur
 * portable) l'oublie et l'affiche en pleine taille à côté du hamburger,
 * ce qui écrase le header et déséquilibre toute la mise en page.
 * On comble ce trou pour harmoniser le comportement avec les tranches
 * voisines.
 */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu__call {
    display: none;
  }
}