/* ============================================================
   REALISATIONS — bandeau de vignettes en défilement automatique
   ============================================================ */

.realisations-marquee-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
}

#grid-marquee {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	animation: realisations-scroll 46s linear infinite;
}

/* Le defilement de base reste en CSS (fallback si JS desactive).
   Quand js/realisations-marquee.js s'initialise, il neutralise cette
   animation et prend la main via transform pour pouvoir ralentir /
   accelerer en douceur (ease-out) au lieu d'un arret net. */

/* largeur calquee sur celle qu'avaient les vignettes statiques
   (25% de la largeur de contenu disponible, sidebar deduite) ;
   la hauteur suit automatiquement via l'aspect-ratio du .thumb de base */
#grid-marquee .thumb {
	flex: 0 0 auto;
	width: calc((100vw - 250px) / 4);
	margin: 0 !important;
}

#grid-marquee .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes realisations-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* on respecte les préférences d'accessibilité du visiteur */
@media (prefers-reduced-motion: reduce) {
	#grid-marquee {
		animation: none;
	}
	.realisations-marquee-wrap {
		overflow-x: auto;
	}
}

/* la sidebar passe a 210px sur ce palier (voir udt_media_queries.css) */
@media (max-width: 1199px) and (min-width: 960px) {
	#grid-marquee .thumb { width: calc((100vw - 210px) / 4); }
}

/* la sidebar disparait (menu mobile) : on retombe a 3 puis 2 colonnes
   pour garder des vignettes lisibles */
@media (max-width: 959px) and (min-width: 768px) {
	#grid-marquee .thumb { width: calc(100vw / 3); }
	#grid-marquee { animation-duration: 38s; }
}

@media (max-width: 767px) {
	#grid-marquee .thumb { width: calc(100vw / 2); }
	#grid-marquee { animation-duration: 30s; }
}