/*
 * Bloc « slider d'images » (secteurs / industries) : SPECIFIQUE a ce bloc.
 * La mecanique commune du carousel est dans assets/css/mx-slider.css (+ assets/js/mx-slider.js).
 *
 * Fond deux tons PLEINE LARGEUR : sombre (grey-dark) en haut, clair (grey-ultralight) en bas, separes par une
 * LIGNE NETTE (fond sombre + bande claire solide ancree en bas). Motif repete par-dessus, faible opacite.
 * L'en-tete reste contraint et centre ; le SLIDER s'aligne a gauche sur le contenu et DEBORDE jusqu'au bord
 * DROIT du navigateur (peek). Les cartes chevauchent la ligne (leur centre vertical tombe sur la separation).
 */

.mx-slider {
	--mx-slider-card-w: 290px; /* cote Figma */
	--mx-slider-card-h: 216px; /* cote Figma */
	--mx-slider-pad-x: var(--wp--preset--spacing--60); /* 104 : padding horizontal du contenu */
	/* Inset gauche = bord gauche du contenu contraint (aligne en-tete et 1re carte). Le slider deborde a droite. */
	--mx-slider-inset: max(var(--mx-slider-pad-x), calc((100% - var(--wp--style--global--wide-size, 1400px)) / 2 + var(--mx-slider-pad-x)));
	position: relative;
	overflow: hidden; /* borne le motif et clippe le debordement du slider au bord droit */
	padding-block-end: var(--wp--preset--spacing--50); /* 40 : garde-bas des cartes */
	background-color: var(--wp--preset--color--grey-dark); /* ton sombre (haut) */
	color: var(--wp--preset--color--white);
}

/* Ton clair (bas), bord a bord : bande solide ancree en bas -> ligne NETTE avec le fond sombre.
   Hauteur = demi-carte + padding bas : la ligne tombe pile au centre vertical des cartes. */
.mx-slider::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--mx-slider-card-h) / 2 + var(--wp--preset--spacing--50)); /* 108 + 40 = 148 */
	background-color: var(--wp--preset--color--grey-ultralight);
	z-index: 0;
}

/* Motif repete par-dessus les deux tons (opacite reconstruite en CSS, methode §4). */
.mx-slider::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: url("../images/motif-M.png");
	background-repeat: repeat;
	/* Position Y pilotee par --mx-motif-y (0 par defaut) : la couche d'animation la fait
	   deriver doucement au scroll (parallax du motif). Sans anim.js, reste a 0 (top). */
	background-position: left var(--mx-motif-y, 0px);
	background-size: 532px 203px; /* cote Figma (taille native du motif) */
	opacity: var(--wp--custom--motif--opacity); /* 0.08 */
}

/* En-tete : contraint et centre. */
.mx-slider__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--mx-slider-pad-x) 0; /* 40 (haut) / 104 (cotes) / 0 (bas) */
}

.mx-slider__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40); /* 24 */
}

.mx-slider__intro {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 */
}

.mx-slider__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--title); /* 28 */
	line-height: 1;
	color: var(--wp--preset--color--white);
}

/* Navigation en haut a droite. Fleches carrees communes (mx-slider.css). Sur le fond sombre du hero du
   slider, un bouton a fond grey-dark serait invisible : fond transparent + contour clair (le chevron
   blanc et le contour ressortent ; au survol, remplissage orange herite de la primitive). */
.mx-slider .mx-slider__nav {
	display: flex;
	gap: var(--wp--preset--spacing--30); /* 16 */
	flex: 0 0 auto;
}

.mx-slider .mx-slider__nav-prev,
.mx-slider .mx-slider__nav-next {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--grey-light);
}

/* Slider : aligne a gauche sur le contenu (marge, pas padding, pour clipper a l'inset), deborde a droite. */
.mx-slider .mx-slider__viewport {
	position: relative;
	z-index: 2;
	margin-block-start: var(--wp--preset--spacing--45); /* 32 : ecart en-tete / slider */
	margin-inline-start: var(--mx-slider-inset);
}

.mx-slider .mx-slider__track {
	gap: var(--wp--preset--spacing--40); /* 24 */
}

.mx-slider-card {
	position: relative;
	flex: 0 0 auto;
	width: var(--mx-slider-card-w); /* 290 */
	height: var(--mx-slider-card-h); /* 216 */
	border-radius: var(--mx-radius-s); /* 4 */
	overflow: hidden;
	background-color: var(--wp--preset--color--grey-dark);
}

.mx-slider-card__media,
.mx-slider-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mx-slider-card__media img {
	pointer-events: none; /* pas d'interaction / de drag natif sur l'image */
}

/* Voile de lisibilite reconstruit (grey-dark) : degrade sombre depuis le coin bas-gauche + assombrissement
   global leger, pour que le label blanc reste lisible (methode §4, image nette dessous). */
.mx-slider-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(63.5deg, rgba(30, 30, 30, 0.95) 45%, rgba(30, 30, 30, 0) 83%),
		rgba(30, 30, 30, 0.25);
}

.mx-slider-card__label {
	position: relative;
	z-index: 1;
	box-sizing: border-box; /* le padding reste dans les 100% de hauteur (texte cale en bas, pas de debordement) */
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--45); /* 32 */
	padding-block-end: var(--wp--preset--spacing--50); /* 40 */
	font-family: var(--wp--preset--font-family--anta);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--subtitle); /* 22 */
	line-height: 1.1;
	color: var(--wp--preset--color--white);
}

/* ---- Responsive : slider au doigt, fond deux tons + motif conserves ---- */
@media (max-width: 900px) {
	.mx-slider {
		--mx-slider-pad-x: var(--wp--preset--spacing--40); /* 24 (l'inset du slider suit) */
		--mx-slider-card-w: 260px;
	}
}