.categories-carousel {
  display: none;
  justify-content: center;
  width: 100%;
  gap: .5em;
}

.categories-carousel.visible {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.categories-carousel a {
  text-transform: uppercase;
  text-align: center;
  font-size: 0.8rem;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  word-break: normal;
  margin: .35em .75em 0;
  position: relative;
}

.categories-carousel a:hover::before {
  content: '';
  position: absolute;
  display: block;
  top: -.65em;
  left: calc(50% - 27px);
  height: 5px;
  width: 54px;
  margin: 0 auto;
  background-color: var(--wp--preset--color--accent-3);
}

#toggle-filters {
  position: relative;
  padding-left: 40px !important;
}

#toggle-filters::before {
  content: ' ';
  top: calc(50% - 6px);
  left: 27px;
  width: 2px;
  margin-left: -2px;
  height: 12px;
  position: absolute;
  background-color: #1c1c1a;
  transform-origin: center;
  -ms-transition: transform .45s cubic-bezier(.3, .4, .2, 1), background-color .15s ease;
  transition: transform .45s cubic-bezier(.3, .4, .2, 1), background-color .15s ease;
  -webkit-transition: -webkit-transform .45s cubic-bezier(.3, .4, .2, 1), background-color .15s ease;
}

#toggle-filters::after {
  content: ' ';
  top: calc(50% - 1px);
  left: 20px;
  width: 12px;
  height: 2px;
  position: absolute;
  background-color: #1c1c1a;
  transform-origin: center;
  -ms-transition: transform .45s cubic-bezier(.3, .4, .2, 1), background-color .15s ease;
  transition: transform .45s cubic-bezier(.3, .4, .2, 1), background-color .15s ease;
  -webkit-transition: transform .45s cubic-bezier(.3, .4, .2, 1), background-color .15s ease;
}

#toggle-filters.visible::before {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

#toggle-filters.visible::after {
  transform: scaleY(0) rotate(90deg);
  -webkit-transform: scaleY(0) rotate(90deg);

}

#toggle-filters:hover::before {
  background-color: #fff;
}

#toggle-filters:hover::after {
  background-color: #fff;
}

@media only screen and (max-width : 540px) {
  .carrousel-projets {
    margin-left: calc(-.75* var(--wp--style--root--padding-right)) !important;
    margin-right: calc(-.75* var(--wp--style--root--padding-right)) !important;
  }
}

@media only screen and (min-width : 540px) {
  #filters-wrapper {
    display: none;
  }

  .categories-carousel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}