/* =============================================================================
   Tigre Bois — css/marques.css
   Le bandeau « Elles ne nous font pas confiance » (js/marques.js).

   Un mur de sponsors qui n'en est pas un. Les logos sont des masques alpha
   encrés d'une seule couleur, très en retrait : ils sont là en fantômes.

   Le défilement est en CSS pur — la piste est dupliquée et l'animation
   translate de -50 %, si bien que la boucle ne se voit jamais. Aucun JS ne
   tourne pendant l'animation.
   ============================================================================= */

.tb-marques {
  --tb-marque-h: 34px;              /* hauteur du tracé, pas de la boîte */
  --tb-marque-ecart: clamp(var(--tb-e8), 6vw, var(--tb-e10));
  --tb-marque-encre: var(--tb-vert);
  --tb-marque-opacite: .30;

  position: relative;
  overflow: hidden;
  padding-block: var(--tb-e7);
  border-top: 1px solid var(--tb-ligne);
  border-bottom: 1px solid var(--tb-ligne);
  background-color: var(--tb-ivoire);
}

/* --- Le titre ------------------------------------------------------------- */

/* `margin-bottom` et non le raccourci `margin` : celui-ci écraserait le
   `margin-inline:auto` que .tb-conteneur pose pour se centrer, et le titre
   partirait se coller à gauche sur les écrans larges. */
.tb-marques__tete {
  margin-bottom: var(--tb-e6);
  text-align: center;
}

.tb-marques__titre {
  margin: 0;
  font-family: var(--tb-font-texte);
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tb-encre-45);
}

/* --- La bande qui défile -------------------------------------------------- */

.tb-marques__defile {
  display: flex;
  width: max-content;
  animation: tb-marques-defile var(--tb-marques-duree, 33s) linear infinite;
}

/* Le pas vaut exactement une piste, quel que soit le nombre de copies posées
   par js/marques.js : `--tb-marques-copies` pistes identiques, on glisse de
   1/copies de la bande. À l'arrivée, l'image est strictement celle du départ —
   la boucle ne se voit pas — et il reste toujours (copies - 1) pistes devant
   l'œil, donc jamais de vide à droite en fin de cycle. */
@keyframes tb-marques-defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / var(--tb-marques-copies, 2)), 0, 0); }
}

/* Au survol comme au clavier, la bande s'arrête : on peut lire les noms. */
.tb-marques:hover .tb-marques__defile,
.tb-marques:focus-within .tb-marques__defile { animation-play-state: paused; }

.tb-marques__piste {
  display: flex;
  align-items: center;
  margin: 0;
  list-style: none;
  flex: 0 0 auto;
}

.tb-marques__item {
  flex: 0 0 auto;
  /* La place est réservée au pixel près à partir du rapport de forme du
     masque : la bande ne sursaute pas au chargement des images. */
  width: calc(var(--tb-marque-h) * var(--tb-marque-ratio, 1.5) * var(--tb-marque-echelle, 1));
  height: calc(var(--tb-marque-h) * var(--tb-marque-echelle, 1));

  /* L'écart est porté par chaque logo, pas par la piste. Deux raisons.
     D'abord la largeur d'une piste vaut alors exactement la somme de ses
     items marge comprise : le translate de -50 % retombe au pixel près sur
     le point de départ, et la boucle reste invisible. Ensuite le dernier logo
     d'une piste garde sa marge, donc le raccord respire comme le reste —
     là où un `padding` sur la piste se faisait battre en spécificité par le
     `ul[class]{padding:0}` de base.css. */
  margin-inline-end: var(--tb-marque-ecart);
}

.tb-marques__logo {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--tb-marque-encre);
  opacity: var(--tb-marque-opacite);

  -webkit-mask-image: var(--tb-marque-masque);
          mask-image: var(--tb-marque-masque);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;

  transition: opacity var(--tb-d2) var(--tb-ease);
}

/* La bande arrêtée, les logos remontent un peu : de quoi les reconnaître. */
.tb-marques:hover .tb-marques__logo,
.tb-marques:focus-within .tb-marques__logo { opacity: .58; }

/* --- Fondus aux deux bords ------------------------------------------------ */

/* Les logos naissent et disparaissent au lieu d'être tranchés net. Le masque
   porte sur le conteneur : il ne coûte rien pendant l'animation. */
@supports (mask-image: linear-gradient(#000, #000)) {
  .tb-marques__defile-cadre {
    /* Le cadre découpe lui-même : sans cela le masque se calerait sur sa boîte
       tandis que le rognage se ferait sur la section, et le dégradé se
       répéterait au fil de la piste qui déborde. */
    overflow: hidden;

    -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
}

/* --- Mouvement réduit ----------------------------------------------------- */

/* Personne ne devrait subir une bande qui bouge en permanence. Sans animation,
   le bandeau devient une simple rangée : la piste dupliquée disparaît et les
   six logos se répartissent sur la largeur. */
@media (prefers-reduced-motion: reduce) {
  .tb-marques__defile {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  .tb-marques__defile > .tb-marques__piste[aria-hidden='true'] { display: none; }
  .tb-marques__piste {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--tb-e6);
  }
  .tb-marques__item { margin-inline-end: var(--tb-e7); }
  /* Sans la marge du dernier, la rangée serait décalée à gauche du centre. */
  .tb-marques__item:last-child { margin-inline-end: 0; }
  .tb-marques__defile-cadre {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* --- Impression ----------------------------------------------------------- */

@media print {
  .tb-marques__defile { animation: none; }
  .tb-marques__defile > .tb-marques__piste[aria-hidden='true'] { display: none; }
}