/* =================================================================
   LOGOS — Ticker infini des références clients
   Background : var(--bg-logos)  |  gap : var(--space-8)
   Vitesse : var(--logo-speed) — définie dans tokens.css

   🔁 Pour ajouter un logo :
      → Copier un <li> dans les DEUX <ul class="logos__set">

   🎨 Pour passer en SVG colorisé :
      → Ajouter fill="currentColor" sur les <path>
      → CSS : .logos__item svg { color: var(--logo-tint); }
================================================================= */

/* ─────────────────────────────────────────
   SECTION
───────────────────────────────────────── */
.logo {
  position:   relative;
  background: var(--purple-950);   /* Figma : #11051d — même fond que la hero */
  overflow:   hidden;
  /* padding géré par .section-sm (64px 0) */
}

/* ─────────────────────────────────────────
   TRACK
   Deux <ul class="logos__set"> côte à côte.
   translateX(-50%) = déplace exactement un set
   → boucle seamless.
───────────────────────────────────────── */
.logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: logosTicker var(--logo-speed) linear infinite;
}


@keyframes logosTicker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

/* ─────────────────────────────────────────
   SET DE LOGOS
   padding-left = gap entre les sets (doit être
   identique au gap entre les logos du set).
───────────────────────────────────────── */
.logos__set {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-8);
}

/* ─────────────────────────────────────────
   ITEM
───────────────────────────────────────── */
.logos__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.9;
  transition: opacity 0.25s ease;
}
.logos__item:hover { opacity: 1; }

.logos__item img {
  display: block;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   LOGO COMPOSÉ (picto + typo superposés)
   Les enfants <img> sont positionnés en absolu.
───────────────────────────────────────── */
.logo-combo {
  position: relative;
  flex-shrink: 0;
}
.logo-combo img {
  position: absolute;
}

/* ─────────────────────────────────────────
   FONDU BORDS
   Masque le redémarrage de la boucle.
───────────────────────────────────────── */
.logos__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}

.logos__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--purple-950) 25%, transparent);
}

.logos__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--purple-950) 25%, transparent);
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
  /* Fades moins larges (écran étroit) */
  .logos__fade { width: 60px; }

  /* Gap et leading-gap réduits (restent identiques entre eux) */
  .logos__set {
    gap:          40px;
    padding-left: 40px;
  }
}

/* ── Petit mobile ≤ 480px ── */
@media (max-width: 480px) {
  .logos__fade { width: 32px; }

  .logos__set {
    gap:          28px;
    padding-left: 28px;
  }
}