/* ===================== PARAMÈTRES FACILES À MODIFIER ===================== */
:root {
--carousel-height: 200px;   /* hauteur fixe du carousel */
--gap: 0;                 /* espace entre les images */
--transition-duration: 800ms; /* vitesse de l'animation de glissement */
}
/* =========================================================================== */

/*
html, body {
margin: 0;
padding: 0;
}

body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background: #f4f1ea;
padding: 24px;
}

.page-title {
font-size: 1.1rem;
color: #333;
margin: 0 0 16px;
}
*/

/* Conteneur du carousel : occupe toute la largeur disponible */
.carousel-container 
{
	position: relative;
	width: 100%;
	max-width: 100%;   /* garde-fou supplémentaire */
	min-width: 0;       /* <-- LA correction clé */
	height: var(--carousel-height);
	overflow: hidden;
	background: #FFF;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	box-sizing: border-box;
}

/* La piste qui glisse horizontalement */
.carousel-track 
{
	display: flex;
	align-items: center;
	height: 100%;
	gap: var(--gap);
	will-change: transform;
	transition: transform var(--transition-duration) ease;
}

.carousel-item 
{
	flex: 0 0 auto;
	height: 100%;
	display: block;
	line-height: 0; /* évite l'espace blanc sous les <img> inline */
}

.carousel-item img 
{
	height: 100%;
	width: auto;
	display: block;
	object-fit: cover;
	transition: filter 0.2s ease, transform 0.2s ease;
	background: #333; /* visible pendant le chargement */
}

.carousel-item:hover img 
{
	filter: brightness(1.08);
	transform: scale(1.02);
}

.carousel-status
{
	display:none;
	font-size: 0.8rem;
	color: #777;
	margin-top: 8px;
}