/*:root {
	--step--2: clamp(3.13rem, 2.62rem + 2.51vw, 5.76rem);
	--step--1: clamp(3.75rem, 3.09rem + 3.29vw, 7.2rem);
	--step-0: clamp(4.5rem, 3.64rem + 4.29vw, 9rem);
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

@keyframes marquee-r {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes rollCage {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(5turn);
	}
}

body {
	
}

.marquee {
	border-bottom: 1px solid #efefef;
	color: #000;
	font-size: var(--step-0);
	height: calc(170px + 4rem);
	overflow: hidden;
	position: relative;
	width: 100vw;

	& img {
		object-fit: cover;
		max-height: 150px;
	}
}

.track {
	height: 100%;
	overflow: hidden;
	padding: 2rem 0;
	position: absolute;
	transition: background-color 300ms ease, color 300ms ease;
	white-space: nowrap;

	& .text {
		animation: marquee 50000ms linear infinite;
		align-items: center;
		display: inline-flex;
		will-change: transform;

		&.-r {
			animation-name: marquee-r;
		}

		&.-twox {
			animation-duration: 25000ms;
		}
	}

	&:hover {
		background-color: #efefef;
		color: #1a1f24;

		img {
			animation: rollCage 10000ms linear infinite;
		}

		& .-green {
			color: #beb9a3;
		}
	}
}

.-green {
	color: #c1ff1d;
	font-weight: 900;
}
*/



/* ---------------------------- */
/* Défilement de droite à gauche */
.marquee-rtl {
  overflow: hidden; /* important */
  width:100%; max-width: 80em; /* A ADAPTER */
}
.marquee-rtl > div {
  display: inline-block; /* important */
  white-space: nowrap; /* important */
  animation: defilement-rtl 15s infinite linear; /* défilement */
  cursor: pointer;
  padding: 10px 2em 10px 100%;
}
.marquee-rtl:hover > div {
  animation-play-state: paused; /* met en pause le défilement */
}
.marquee-rtl > div:first-letter {
  font-weight: 700;
  color: #F00;
}
@keyframes defilement-rtl {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  100% {
    -webkit-transform: translate(-100%);
    transform: translate(-100%);
  }
}
/* ---------------------------- */
/* texte sur plusieurs lignes automatiquement */
.marquee-multi-lignes > div { 
  width:90%; 
  white-space: normal; /* important */
}

/* ---------------------------- */
/* déco */
h2, p { text-align:center; }

.marquee-rtl {
  margin: 2em auto;
  border: 10px solid #F0F0FF;
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}
.marquee-rtl > div {
  font-size: 1.5em;
}