/* Bandeau « Nos marques » : logos de même taille, défilement continu de la gauche vers la droite. */
/* Espace blanc au-dessus : on agrandit le bas de « Par où commencer » (une marge laisserait voir le fond rose de la page).
   Ainsi l'espace est identique au-dessus et en dessous des marques. Le fond de la section est en dégradé :
   blanc → rose très pâle → blanc, pour qu'il n'y ait plus de coupure nette entre les couleurs. */
section.categories { padding-bottom: 96px; }
.brands {
  padding: 96px 0 96px; overflow: hidden;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 34%, var(--color-bg) 66%, var(--color-white) 100%);
}
.brands-title {
  /* Même police et même taille que « Par où commencer ? » et « Découvrez nos produits favoris », aligné à gauche sur la même largeur de page.
     Marge basse plus grande : le titre est plus haut, plus loin des logos. */
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  max-width: 1440px; margin: 0 auto 64px; padding: 0 32px; text-align: left; color: var(--color-ink);
}
.brands-marquee {
  display: flex; width: max-content;
  animation: brands-scroll 45s linear infinite;
}
.brands-marquee:hover { animation-play-state: paused; }
.brands-track { display: flex; flex: 0 0 auto; list-style: none; margin: 0; padding: 0; }
/* Tous les logos tiennent dans la même boîte : même taille quelle que soit l'image d'origine. */
.brands-item {
  flex: 0 0 auto; width: 180px; height: 80px; margin: 0 28px;
  display: flex; align-items: center; justify-content: center;
}
.brands-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brands-item[hidden] { display: none; }
/* Gauche → droite : la bande revient de -50 % vers 0 ; les deux listes identiques rendent la boucle invisible. */
@keyframes brands-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 640px) {
  section.categories { padding-bottom: 56px; }
  .brands { padding: 64px 0 64px; }
  .brands-item { width: 130px; height: 60px; margin: 0 18px; }
  .brands-marquee { animation-duration: 36s; }
}
@media (prefers-reduced-motion: reduce) {
  .brands-marquee { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .brands-track[aria-hidden="true"] { display: none; }
  .brands-track { flex-wrap: wrap; justify-content: center; }
}