/* =============================================================================
   DÉFILEMENT CONTINU — moteur partagé (Chiffres, Partenaires).

   ⚠️ WCAG 2.2.2 : un contenu qui bouge plus de 5 secondes doit pouvoir être
   arrêté. D'où le bouton Pause, toujours présent, et l'arrêt au survol et au
   focus. Avec « réduire les animations », rien ne défile : la rangée se
   parcourt au doigt.

   Sans script : rangée défilante à la main (overflow).
   ============================================================================= */

.cci-defile {
	position: relative;
}

.cci-defile__fenetre {
	overflow-x: auto;
	scrollbar-width: none;
}

.cci-defile__fenetre::-webkit-scrollbar {
	display: none;
}

.cci-defile__piste {
	display: flex;
	align-items: center;
	gap: var(--defile-gap, 0px);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cci-defile__piste > li {
	flex: none;
}

.cci-defile.is-pret .cci-defile__fenetre {
	overflow: hidden;
}

.cci-defile.is-pret .cci-defile__piste {
	animation: cci-defile var(--duree, 40s) linear infinite;
}

.cci-defile.is-pause .cci-defile__piste,
.cci-defile:hover .cci-defile__piste,
.cci-defile:focus-within .cci-defile__piste {
	animation-play-state: paused;
}

@keyframes cci-defile {
	to {
		/* La piste contient deux exemplaires du contenu : décaler d'une moitié
		   (plus un écart) ramène exactement au point de départ. */
		transform: translateX(calc(-50% - var(--defile-gap, 0px) / 2));
	}
}

.cci-defile__pause {
	position: absolute;
	z-index: 2;
	right: var(--pad);
	bottom: calc(100% + 0.75rem);
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem 0.375rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--fg);
	font-size: var(--fs-xs);
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.cci-defile__pause:hover,
.cci-defile__pause:focus-visible {
	opacity: 1;
}

.cci-defile__pause .icon {
	width: 1rem;
	height: 1rem;
}

.cci-defile__pause .icon + .icon,
.cci-defile.is-pause .cci-defile__pause .icon:first-of-type {
	display: none;
}

.cci-defile.is-pause .cci-defile__pause .icon + .icon {
	display: block;
}

.cci-defile:not(.is-pret) .cci-defile__pause {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.cci-defile.is-pret .cci-defile__piste {
		animation: none;
	}

	.cci-defile.is-pret .cci-defile__fenetre {
		overflow-x: auto;
	}
}