@charset "utf-8";
/* CSS Document - améliorations pour le carrousel de marques */

#defile-des-marques {
	/* variables configurables (augmentées de 50% puis +20%) */
	--defile-height: 288px; /* 240 * 1.2 */
	--img-width: 288px;     /* 240 * 1.2 */
	/* espacement : au maximum la moitié de la largeur de la vignette */
	--img-separation: calc(var(--img-width) * 0.5);
	--img-padding-y: 18px;  /* 15 * 1.2 */

	width: 100%;
	overflow: hidden;
}

.md-col-fullwidth {
   padding: 0px 5px 10px 5px;
}

#defile-des-marques #defile-zone {
  height: calc(var(--defile-height) + var(--img-padding-y) * 2);
  position: relative;
  overflow: hidden;
  /* on garde un léger débordement pour l'effet de transition */
  width: 120%;
}
/*
 Reset de la liste pour un affichage propre
 Utilisation de flexbox pour rendre la grille responsive et garantir N vignettes visibles
 en fonction de la largeur d'écran.
 L'animation JS se base sur la largeur des éléments, donc ces calculs restent compatibles.
 Note : le conteneur visible est 100% ; on calcule la base des items pour en afficher 4 par défaut.

 La liste est en flex, les éléments ne se contractent pas (flex: 0 0 ...) et ont un margin horizontal
 égal à la moitié de la séparation.

 Effet visuel sur les images
 --------------------------------------------------
 list container
 --------------------------------------------------
 On met display:flex pour aligner les items sur une ligne
 Le height:100% est gardé pour compatibilité

 Important : `#defile-des-marques #defile-zone` garde width:120% pour préserver l'effet de débordement
 utilisé par le JS, mais les calculs ci-dessous sont faits en % relatifs au viewport visible.

 Mise en page responsive (par défaut: 4 items visibles)
 --------------------------------------------------
 Utilisation de calc pour répartir l'espace : (100% - (sep * (count-1))) / count
*/
/* Reset de la liste pour un affichage propre */
#defile-des-marques ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	align-items: center;
	/* allow horizontal overflow for the scrolling effect */
}

/* Par défaut (desktop) : 4 vignettes visibles */
#defile-des-marques li {
	flex: 0 0 calc((100% - (var(--img-separation) * 3)) / 4);
	margin: 0 calc(var(--img-separation) / 2);
	box-sizing: border-box;
}

/* Images adaptatives */
#defile-des-marques li img {
	width: 100%;
	height: auto;
	max-height: var(--defile-height);
	object-fit: contain;
	opacity: 0.9;
	transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
	border-radius: 6px;
	background-color: #000; /* changé de blanc à noir pour les cases */
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); /* léger liseré clair */
	display: block;
}

#defile-des-marques li img:hover {
	transform: scale(1.06);
	opacity: 1;
	box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}

@media (min-width: 1200px){
	#defile-des-marques #defile-zone::before,
	#defile-des-marques #defile-zone::after {
		content: " ";
		display: block;
		position: absolute;
		top: 0;
		height: 100%;
		width: 200px;
		background-color: transparent;
		z-index: 10;
	}
	#defile-des-marques #defile-zone::before {
		left: 0;
		/* dégradé noir -> transparent */
		background: linear-gradient(to right,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	}
	#defile-des-marques #defile-zone::after {
		/* aligné avec le conteneur 120% (décalé de 2px vers la droite) */
		left: calc(100% * 5 / 6 - 200px + 2px); /* 5/6 x 120% = 100% */
		/* dégradé transparent -> noir (sur la droite) */
		background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	}
}

#defile-des-marques li {
	height: var(--defile-height);
	margin-top: var(--img-padding-y);
	margin-bottom: var(--img-padding-y);
	display: block;
	/* float retiré (flexbox utilisé) ; JS continue d'utiliser la largeur des éléments */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
	#defile-des-marques {
		--defile-height: 252px; /* 210 * 1.2 */
		--img-width: 252px;     /* 210 * 1.2 */
		--img-separation: calc(var(--img-width) * 0.5);
	}
	/* tablette : 3 vignettes visibles */
	#defile-des-marques ul {
		display: flex;
	}
	#defile-des-marques li {
		flex: 0 0 calc((100% - (var(--img-separation) * 2)) / 3);
	}
}

@media (max-width: 767px) {
	/* smartphone and small screens: show 2 vignettes */
	#defile-des-marques {
		--defile-height: 198px; /* 165 * 1.2 */
		--img-width: 198px;     /* 165 * 1.2 */
		--img-separation: calc(var(--img-width) * 0.5);
	}
	#defile-des-marques ul { display: flex; }
	#defile-des-marques li {
		flex: 0 0 calc((100% - var(--img-separation)) / 2);
	}
	#defile-des-marques #defile-zone::before,
	#defile-des-marques #defile-zone::after { display: none; }
}

@media (max-width: 480px) {
	/* very small phones: still show 2 vignettes to meet requirement */
	#defile-des-marques li { flex: 0 0 calc((100% - var(--img-separation)) / 2); }
}

/* petite amélioration d'accessibilité visuelle */
#defile-des-marques li a {
	display: inline-block;
	height: 100%;
}