.bloc-client {
  padding: 100px 0;
  overflow: hidden;
  text-align: center;
  background: white;
}

.client-container h2 {
  margin-bottom: 40px;
  color: #2c3e50;
  /* Police */
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.client-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.client-track {
  display: flex;
  width: calc(200%); /* double pour la boucle */
  animation: scroll-left 25s linear infinite;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.client-item {
  flex: 0 0 auto;
  width: 150px;
  margin: 0 4%;
}

.client-item img {
  width: 100%;
  height: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.client-item img:hover {
  opacity: 1;
}

/* ---------------------- */
/*  TABLETTES ( ≤1050px ) */
/* ---------------------- */
@media (max-width: 1050px) {

  .bloc-client {
    padding: 80px 0;
  }

  .client-container h2 {
    font-size: 0.95rem;
    margin-bottom: 30px;
    padding: 0 1rem; /* espace latéral */
  }

  .client-item {
    width: 120px;          /* logos plus petits */
    margin: 0 3%;
  }

  .client-item img {
    opacity: 0.85;
  }

  .client-slider {
    padding: 0 1rem;       /* évite que les logos touchent les bords */
  }
}


/* ---------------------- */
/*  MOBILES ( ≤480px )    */
/* ---------------------- */
@media (max-width: 480px) {

  .bloc-client {
    padding: 60px 0;
  }

  .client-container h2 {
    font-size: 0.85rem;
    margin-bottom: 25px;
    padding: 0 1.2rem;
    line-height: 1.4;
  }

  .client-item {
    width: 90px;     /* taille optimale sur téléphone */
    margin: 0 5%;
  }

  .client-slider {
    padding: 0 0.5rem; /* espace latéral supplémentaire */
  }

  .client-track {
    animation-duration: 20s; /* un peu plus rapide pour mobile */
  }

  .client-item img {
    opacity: 0.9;
  }
}