/* ==========================================================================
   Section 2 : bandeau clients

   Une rangee de vrais logos de marques qui defile lentement. Les logos sont
   d'origines et de styles tres heterogenes (wordmarks vectoriels, tampon
   encre, monogramme colore, etc.) : un aplatissement commun a une seule teinte
   et une boite de taille identique (voir .clients__logo) les ramenent a une
   meme intensite et a un meme encombrement
   visuelle, proche de l'encre du site, pour qu'ils forment une ligne
   coherente plutot qu'une mosaique de couleurs.

   Toutes les classes sont prefixees "clients" pour ne pas entrer en collision
   avec les feuilles des autres sections.
   ========================================================================== */

.clients {
  /* Pas de fond propre : le bandeau se pose sur ce qui vient au-dessus et en
     dessous, et se signale par ses deux filets plutot que par un aplat. Il
     reste ainsi lisible que la section voisine soit blanche ou creme. */
  background-color: transparent;
  overflow: hidden;
}

/* ----------------------------------------------------------------- legende */

/* Le titre de section n'est volontairement pas un .t-section : ce bandeau est
   une legende posee au-dessus d'une liste, pas un chapitre. Un corps de 48px
   ici ecraserait la rangee de logos, qui est le vrai sujet, et entrerait en
   concurrence avec l'accroche situee juste au-dessus. */
.clients__titre {
  margin: 0 0 var(--sp-7);
  font-family: var(--font-sans);
  font-size: var(--t-petit);
  font-weight: 500;
  line-height: var(--t-petit-lh);
  letter-spacing: 0.2px;
  color: var(--grey-texte);
  text-align: center;
}

/* -------------------------------------------------------------- le bandeau */

.clients__bandeau {
  /* Reglages locaux du defilement, regroupes ici pour n'avoir qu'un endroit a
     modifier aux points de rupture.
     --clients-duree : duree d'un tour complet, c'est a dire le temps mis pour
     faire defiler une serie entiere.
     --clients-ecart : demi-espace entre deux marques. Aucun point de
     separation n'est plus dessine (retire a la demande du client) : chaque
     marque porte desormais tout l'espacement en propre, sous forme de marge a
     droite egale au double de cette valeur (voir .clients__marque).
     --clients-fondu : largeur des fondus aux deux bords.
     --clients-logo-h et --clients-logo-l : boite commune a tous les logos.
     Chaque fichier s'y inscrit sans deformation, ce qui donne la meme
     surface a l'oeil malgre des proportions natives tres differentes. */
  --clients-duree: 62s;
  --clients-ecart: 34px;
  --clients-fondu: 120px;
  --clients-logo-h: 32px;
  --clients-logo-l: 112px;

  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  /* Padding vertical seulement, et jamais en raccourci : le mode mouvement
     reduit ajoute une marge laterale que le raccourci d'un point de rupture,
     declare plus bas dans le fichier, remettrait a zero. */
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

/* La fenetre coupe la piste et estompe ses deux extremites, pour que les
   logos ne semblent pas heurter le bord de l'ecran. Le masque est porte par
   cet element et non par le bandeau, sinon les deux filets s'effaceraient eux
   aussi aux extremites. */
.clients__fenetre {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0,
    rgb(0, 0, 0) var(--clients-fondu),
    rgb(0, 0, 0) calc(100% - var(--clients-fondu)),
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0,
    rgb(0, 0, 0) var(--clients-fondu),
    rgb(0, 0, 0) calc(100% - var(--clients-fondu)),
    rgba(0, 0, 0, 0) 100%
  );
}

/* La piste fait exactement trois fois la largeur d'une serie. Aucun ecart
   n'est pose entre les series : chaque marque porte deja son propre
   espacement a droite, ce qui garantit que la translation d'un tiers retombe
   pile sur la position de depart. */
.clients__piste {
  display: flex;
  width: max-content;
  animation: clients-defile var(--clients-duree) linear infinite;
  will-change: transform;
}

/* Le defilement s'interrompt au survol : on peut lire la liste sans la
   poursuivre des yeux. Le meme arret vaut au clavier, si un element du
   bandeau prend le focus un jour. */
.clients__bandeau:hover .clients__piste,
.clients__bandeau:focus-within .clients__piste {
  animation-play-state: paused;
}

/* Un tiers de la piste, soit exactement une serie. calc evite la valeur
   periodique 33.3333 % qui, arrondie, ferait deriver la boucle. */
@keyframes clients-defile {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-100% / 3), 0, 0);
  }
}

.clients__serie {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ------------------------------------------------------------- les marques */

/* Conteneur commun a chaque marque, un logo dans chaque cas. Porte aussi
   l'espacement entre marques : plus de point separateur, la marge a droite
   fait tout le travail (le double de --clients-ecart, pour occuper la meme
   place que l'ancien point et ses deux demi-espaces). Appliquee sans
   exception, y compris sur la derniere marque d'une serie, elle garantit que
   la jointure entre deux series est identique a l'espacement interne : rien
   n'est pose au niveau de .clients__piste ou .clients__serie, donc la
   translation d'un tiers retombe toujours juste. */
.clients__marque {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: var(--clients-logo-h);
  margin-right: calc(2 * var(--clients-ecart));
}

/* Le logo, avec deux contraintes voulues : meme TEINTE et meme TAILLE pour
   tous.

   Teinte. grayscale() ne suffisait pas : il conserve la luminosite d'origine,
   donc un logo noir restait noir et un logo clair restait pale. La rangee
   n'etait pas homogene. brightness(0) ecrase toute couleur a du noir en
   preservant le canal alpha, y compris l'anticrenelage des bords ; l'opacite
   remonte ensuite l'ensemble a une seule intensite de gris. Les douze
   fichiers ont tous un canal alpha, la technique s'applique donc a chacun
   sans produire de rectangle plein.

   Taille. Chaque logo est enferme dans une boite de dimensions fixes et
   remplit au mieux cette boite sans deformation. Les proportions naturelles
   vont de 7:1 (Mina Storm) a 1,7:1 (Pomad) : leur donner la meme hauteur
   rendait les logos larges enormes et les logos hauts minuscules. A boite
   egale, chaque marque occupe la meme surface a l'oeil. */
.clients__logo {
  display: block;
  width: var(--clients-logo-l);
  height: var(--clients-logo-h);
  object-fit: contain;
  object-position: center;
  filter: brightness(0);
  opacity: 0.55;
}

/* ==========================================================================
   MOUVEMENT REDUIT

   base.css ecrase deja toutes les durees d'animation, ce qui figerait la
   piste sur une position arbitraire. On repasse donc explicitement en rangee
   statique. Deux precautions indispensables ici : la piste doit redevenir un
   bloc, sinon la serie reste un element flexible a max-content que la fenetre
   coupe au bord et qui perd la moitie des marques ; et la fenetre doit cesser
   de rogner, puisque plus rien n'en sort.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .clients__bandeau {
    /* Sans conteneur, une rangee pleine largeur collerait aux bords. */
    padding-left: var(--marge);
    padding-right: var(--marge);
  }

  .clients__fenetre {
    overflow: visible;
    max-width: var(--conteneur);
    margin-left: auto;
    margin-right: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .clients__piste {
    display: block;
    width: auto;
    animation: none;
    will-change: auto;
  }

  .clients__serie {
    flex-wrap: wrap;
    justify-content: center;
    /* Sur plusieurs lignes, l'espacement passe par "gap" plutot que par la
       marge de .clients__marque : un gap se comporte correctement en fin de
       ligne (pas d'espace qui traine avant un retour), la marge non. Meme
       valeur totale que le mode defilant (2 * l'ecart), pour une densite
       coherente entre les deux modes. */
    gap: var(--sp-3) calc(2 * var(--clients-ecart));
  }

  .clients__serie--copie {
    display: none;
  }

  .clients__marque {
    /* Neutralisee ici : le gap ci-dessus prend seul en charge l'espacement,
       cumuler les deux doublerait l'ecart et desequilibrerait les fins de
       ligne. */
    margin-right: 0;
  }
}

/* ==========================================================================
   POINTS DE RUPTURE
   ========================================================================== */

@media screen and (max-width: 991px) {
  .clients__bandeau {
    --clients-duree: 52s;
    --clients-ecart: 28px;
    --clients-fondu: 72px;
    --clients-logo-h: 28px;
    --clients-logo-l: 98px;
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-5);
  }
}

@media screen and (max-width: 767px) {
  .clients__titre {
    margin-bottom: var(--sp-6);
  }

  .clients__bandeau {
    --clients-duree: 44s;
    --clients-ecart: 22px;
    --clients-fondu: 40px;
    --clients-logo-h: 25px;
    --clients-logo-l: 88px;
  }
}

@media screen and (max-width: 479px) {
  .clients__bandeau {
    --clients-duree: 38s;
    --clients-ecart: 18px;
    /* Sur 375px de large, un fondu de 40px mangerait un logo entier. */
    --clients-fondu: 24px;
    --clients-logo-h: 20px;
    --clients-logo-l: 72px;
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
  }
}