/* ─────────────────────────────────────────────────────────────────────────────
   public/css/supporters-band.css
   Bande de logos de soutiens. Rendu : /js/supporters-band.js.

   Comme le script, cette feuille existe parce que les pages en avaient chacune
   leur copie, et que les copies avaient divergé : l'accueil affichait les logos
   à 36 px de haut, « À propos » à 32 px, pour la même bande des mêmes soutiens.

   Taille portée à 72 px le 2026-09-08 : à 36 px les marques ne se lisaient pas,
   alors que ce sont elles qui portent la caution auprès de quelqu'un qui
   découvre l'association. Les fichiers ont été ré-importés à 640 px dans la
   foulée (`LARGEUR_LOGO`, scripts/lib/logo-pipeline.js) pour tenir le 2× sur
   écran dense.
   ───────────────────────────────────────────────────────────────────────────── */

.logos-soutiens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px 64px;
  margin-bottom: 36px;
}
/* L'accueil centre sa bande, « À propos » l'aligne à gauche dans sa colonne. */
.logos-soutiens.centre { justify-content: center; }

.logos-soutiens img {
  max-height: 72px;
  max-width: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: .78;
  transition: opacity .15s;
}
.logos-soutiens img:hover { opacity: 1; }

/* Même raison que sur les pages Éditions et Soutiens : ces marques sont
   dessinées pour du papier clair et disparaissent sur fond sombre. */
html.dark .logos-soutiens img {
  background: #F4F3EF;
  padding: 10px 14px;
  border-radius: 2px;
  opacity: .92;
}

@media (max-width: 767px) {
  .logos-soutiens { gap: 36px 40px; }
  .logos-soutiens img { max-height: 56px; max-width: 190px; }
}