/* ============================================================
   BLOC BANDEAU CONFIANCE (structure neutre)
   Contenu : ligne de logos + 3 chiffres clés.
   Zéro couleur, zéro police nominale, zéro valeur de style.
   ============================================================ */

.bloc-bandeau {
  background: var(--surface-alt);
  padding-block: var(--sp-7);
  text-align: center;
}

.bandeau-lede {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: var(--sp-5);
}

/* Logos : défilement horizontal fluide en mobile, centré en desktop */
.bandeau-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}

.bandeau-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bandeau-logos img {
  max-height: 2.5rem;
  width: auto;
  opacity: 0.65;
  filter: grayscale(1);
}

/* Chiffres : 3 colonnes en desktop, empilées en mobile */
.bandeau-chiffres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-6) var(--sp-7);
}

.bandeau-chiffre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.bandeau-chiffre-valeur {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--ink);
}

.bandeau-chiffre-legende {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* Mobile : les logos passent a la ligne, tout reste visible
   (doctrine : jamais de defilement horizontal) */
@media (max-width: 640px) {
  .bloc-bandeau { padding-block: var(--sp-6); }
  .bandeau-logos {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--sp-3);
  }
  .bandeau-chiffres { flex-direction: column; gap: var(--sp-4); }
}