/**
 * Bandeau « activités » — défilement horizontal continu (gauche → droite).
 *
 * Le filtre `tof_loop_bandeau_activites` (cf. tof-core.php) duplique l'image
 * et l'enveloppe ; on anime ici le track (qui contient les deux copies) en
 * `transform: translateX` pour un défilement GPU sans reflow. La boucle est
 * sans couture car les deux copies sont identiques : à la fin de l'animation,
 * la position de redémarrage affiche un contenu visuellement identique à la
 * fin précédente.
 *
 * Direction visuelle : les pictogrammes entrent par le bord gauche et
 * sortent par le bord droit (sens « de gauche à droite »).
 */

.tof-bandeau-loop {
	width: 100%;
	/* `max-width` est injecté en inline style par le filtre PHP, à partir
	   de l'attribut `width` de l'image d'origine, pour préserver la hauteur
	   naturelle du bandeau sur les écrans plus larges. */
	margin-inline: auto;
	overflow: hidden;
	line-height: 0;
}

.tof-bandeau-loop__track {
	display: flex;
	width: 200%;
	animation: tof-bandeau-loop var( --tof-bandeau-loop-duration, 40s ) linear infinite;
	will-change: transform;
}

.tof-bandeau-loop__track > img {
	display: block;
	/* 50 % du track (= 100 % de la largeur visible). `!important` est requis
	   pour battre la règle `.wp-block-image.alignfull img { width: 100% }`
	   du core Gutenberg, qui a une spécificité (0,2,1) supérieure à la nôtre.
	   Sans cet override, chaque image ferait 100 % du track (= 200 % du
	   wrapper) → bandeau deux fois plus haut que prévu. */
	width: 50% !important;
	height: auto;
	flex-shrink: 0;
	max-width: none !important;
}

@keyframes tof-bandeau-loop {
	from { transform: translateX( -50% ); }
	to   { transform: translateX( 0 ); }
}

/* Mobile : on double la hauteur visible du bandeau. La largeur du track
   passe à 400 % (au lieu de 200 %), donc chaque image (toujours à 50 %
   du track via la règle de base) est rendue à 2× la largeur du wrapper.
   `height: auto` fait suivre la hauteur, qui double aussi. La keyframe
   `-50% → 0` reste correcte : -50 % d'un track de 4W = -2W, soit le
   décalage d'une image — la boucle reste sans couture. La vitesse
   absolue du track est doublée mais chaque pictogramme étant lui aussi
   2× plus large, le temps de traversée d'un pictogramme dans le viewport
   est conservé. */
@media ( max-width: 899px ) {
	.tof-bandeau-loop__track {
		width: 400%;
	}
}

/* RGAA 13.8 / RGESN : on coupe l'animation si l'utilisateur le demande. */
@media ( prefers-reduced-motion: reduce ) {
	.tof-bandeau-loop__track {
		animation: none;
		transform: translateX( -25% );
	}
}