/* ---------- Bandes de texte : deux lignes en sens contraire, accélérées par le défilement ---------- */
.ribbons {
  padding: 40px 0 56px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ribbon {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font: italic 900 4.17vw / 1.08 var(--sans);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--grey-soft);
  transform: translate3d(var(--x, 0px), 0, 0);
  will-change: transform;
}
.ribbon span {
  padding-right: 0.3em;
}
@media (max-width: 640px) {
  .ribbon {
    font-size: 24px;
    line-height: 32px;
  }
}

/* ---------- Animations (--x et --skew posés par motion.js ; rien ne bouge sans .has-motion) ---------- */
.has-motion .ribbon {
  transform: translate3d(var(--x, 0px), 0, 0) skewX(calc(var(--skew, 0deg) * 0.6));
}