/* Bandeau marques – variables globales : custom.css */
.idinteractive-brandsbanner {
  margin-bottom: 16px;
  background: var(--tertiary-color);
}

.idinteractive-brandsbanner__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(16px, 3vw, 50px);
  margin: 0;
  padding: 24px 0;
  list-style: none;
  min-height: 90px;
}

.idinteractive-brandsbanner__item {
  width: 100%;
  min-width: 0;
}

.idinteractive-brandsbanner__link {
  display: grid;
  place-items: center;
  min-height: 90px;
}

.idinteractive-brandsbanner__logo {
  max-width: 100%;
  max-height: 90px;
  width: auto;
  height: auto;
  filter: grayscale(1);
  transition: filter 0.2s;
}

.idinteractive-brandsbanner__link:is(:hover, :focus-visible) .idinteractive-brandsbanner__logo {
  filter: none;
  opacity: 1;
}

/* Carrousel Bootstrap (> 6 marques) */
.idinteractive-brandsbanner__carousel {
  position: relative;
}

.idinteractive-brandsbanner__carousel .carousel-inner {
  overflow: hidden;
}

.idinteractive-brandsbanner__carousel .carousel-item .container-md {
  padding-inline: 44px;
}

.idinteractive-brandsbanner__carousel .idinteractive-brandsbanner__list {
  grid-template-columns: repeat(var(--brands-per-slide, 6), minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 40px);
}

.idinteractive-brandsbanner__carousel .carousel-control-prev,
.idinteractive-brandsbanner__carousel .carousel-control-next {
  z-index: 2;
  width: 36px;
  opacity: 1;
}

.idinteractive-brandsbanner__carousel .carousel-control-prev {
  left: 8px;
}

.idinteractive-brandsbanner__carousel .carousel-control-next {
  right: 8px;
}

@media (max-width: 1199.98px) {
  .idinteractive-brandsbanner__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .idinteractive-brandsbanner__logo {
    max-height: 80px;
  }
}

@media (max-width: 767.98px) {
  .idinteractive-brandsbanner__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-block: 16px;
  }

  .idinteractive-brandsbanner__link {
    min-height: 72px;
  }

  .idinteractive-brandsbanner__logo {
    max-height: 72px;
  }

  .idinteractive-brandsbanner__carousel .carousel-item .container-md {
    padding-inline: 36px;
  }

  .idinteractive-brandsbanner__carousel .carousel-control-prev {
    left: 4px;
  }

  .idinteractive-brandsbanner__carousel .carousel-control-next {
    right: 4px;
  }
}