.diaporama--logos {
  width: 100%;
  overflow: hidden;
}

/* On coupe complètement la hauteur pendant le chargement */
.diaporama--logos.loading {
  max-height: 0;
  overflow: hidden;
}

/* On garde quand même le contenu invisible */
.diaporama--logos.loading .diaporama {
  visibility: hidden;
}

.diaporama--logos .item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px; /* espace entre les logos */
}

.diaporama--logos img {
  max-height: 50px;    /* à adapter à ton design */
  width: auto;
  height: auto;
}

/* Conteneur global du slider + fades */
.diaporama--logos {
  position: relative;
  overflow: hidden;
}

/* Le vrai conteneur du slider (celui sur lequel Slick est initialisé) */
.diaporama--logos .diaporama {
  width: 100%;
}

/* Fades gauche / droite */
.logos-fade {
  position: absolute;
  top: 0;
  width: 80px;              /* largeur du dégradé */
  height: 100%;
  z-index: 5;
  pointer-events: none;      /* les clics passent à travers */
}

{% scope_css %} 

  /* Vos styles existants */
  .logos-fade--left {
    left: 0;
  }

  .logos-fade--right {
    right: 0;
  }

{% end_scope_css %}

/* Mise en forme des slides Slick */
.diaporama--logos .diaporama .slick-track {
  display: flex !important;
  align-items: center;
}

.diaporama--logos .diaporama .slick-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
}

/* Wrapper de chaque logo */
.diaporama--logos .diaporama .item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;           /* espace entre logos */
}

/* Images de logos */
.diaporama--logos .diaporama img {
  height: 60px;              /* ajuste la taille à ton design */
  width: auto !important;
  max-width: none;
}
/* AUCUN effet (par défaut) */
.diaporama--logos.none img {
  filter: none !important;
  opacity: 1 !important;
}

/* EFFET GRIS */
.diaporama--logos.grey img {
  filter: grayscale(100%) brightness(1.4) contrast(0.1) !important;
  opacity: 1;
  transition: filter .3s ease, opacity .3s ease;
}

/* EFFET BLANC (on transforme en blanc via inversion + désaturation) */
.diaporama--logos.white img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.9;
  transition: filter .3s ease, opacity .3s ease;
}

/* EFFET NOIR (on assombrit tout) */
.diaporama--logos.black img {
  filter: brightness(0) !important;
  opacity: 0.9;
  transition: filter .3s ease, opacity .3s ease;
}

/* Optionnel : effet hover si tu veux */
.diaporama--logos.grey img:hover,
.diaporama--logos.white img:hover,
.diaporama--logos.black img:hover {
  opacity: 1;
}