/*
 * Bloc « certificats ». Defilement via la primitive partagee mx-slider (mx-slider.css + .js), mode boucle.
 * Ce fichier ne porte que le layout du bloc : section blanche + contenu CONTRAINT, en-tete (titre a chevron
 * + CTA optionnel), rangee fleches flanquantes + viewport, carte certificat (3 visibles desktop).
 *
 * Carte : vignette (image mise en avant, contain sur fond gris) + corps blanc a bordure basse orange-middle
 * (esprit « carte metier » de la charte, ici en blanc) : titre H5 + description + lien PDF (style lien).
 */

.mx-certificats {
	box-sizing: border-box;
	/* Retrait du block-gap WP entre sections + rythme resserre : sur Ressources, plusieurs sections
	   certificats s'empilent (meme fond blanc), ce qui cumulait 80 + 24 + 80 = 184px d'air entre deux
	   rangees. On supprime le gap et on passe le padding a 40, soit 80px entre rangees (demande JN). */
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--50); /* 40 (etait 80) */
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--grey-dark);
}

.mx-certificats__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--60); /* 104 */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--45); /* 32 : en-tete / carousel */
}

/* En-tete : titre (chevron) a gauche, CTA optionnel a droite. */
.mx-certificats__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40); /* 24 */
	flex-wrap: wrap;
}

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

.mx-certificats__title {
	margin: 0;
	color: var(--wp--preset--color--grey-dark);
}

.mx-certificats__cta {
	margin: 0;
}

/* Rangee : fleche gauche + viewport (clippe au contenu) + fleche droite (comme temoignages / logos). */
.mx-certificats__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--45); /* 32 */
}

.mx-certificats__row .mx-slider__viewport {
	flex: 1 1 auto;
	min-width: 0;
	/* Le viewport clippe l'overflow (cartes hors vue). Sans marge interne, il rognait aussi l'ombre
	   portee des cartes (haut/bas). On menage 16px en haut/bas pour laisser respirer l'ombre, compenses
	   par une marge negative pour ne pas decaler la rangee ni les fleches (mecanique du slider intacte). */
	padding-block: var(--wp--preset--spacing--40); /* 24 : contient l ombre */
	margin-block: calc(-1 * var(--wp--preset--spacing--40));
}

.mx-certificats__row .mx-slider__track {
	gap: var(--wp--preset--spacing--45); /* 32 (cote Figma ~36, homogeneise) */
	align-items: stretch; /* cartes de meme hauteur */
}

/* ---- Carte certificat : 3 par vue. ---- */
.mx-certificat-card {
	box-sizing: border-box;
	flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--45)) / 3); /* 3 visibles (gap 32) */
	display: flex;
	flex-direction: column;
	margin: 0;
	border-radius: var(--mx-radius-s, 4px);
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10); /* ombre douce resserree, un peu plus visible (etait 0 4 30 / 0.06) */
	background-color: var(--wp--preset--color--white);
}

/* Vignette : image mise en avant (logo de certificat) en contain, centree sur fond gris. */
.mx-certificat-card__media {
	height: 175px; /* cote Figma */
	background-color: var(--wp--preset--color--grey-ultralight);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Image : occupe davantage la vignette (moins de vide autour), sans deformation ni recadrage
   (object-fit: contain, ratio conserve). Une respiration minimale reste (plafond a 88 %). */
.mx-certificat-card__media img {
	max-width: 88%;
	max-height: 88%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Variante « Sombre » : SEULE la vignette (zone image) passe sur fond noir, comme la carte « Brochure
   commerciale » du frame. Le corps de carte, la section et les textes restent clairs (inchanges). */
.mx-certificats.is-fond-sombre .mx-certificat-card__media {
	background-color: var(--wp--preset--color--black);
}

/* Corps blanc : bordure basse 2px orange-middle (esprit carte metier), titre + description + lien. */
.mx-certificat-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 */
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); /* 24 16 (etait 32 16 : moins d'air) */
	background-color: var(--wp--preset--color--white);
	border-bottom: 2px solid var(--wp--preset--color--orange-middle);
}

/* Titre : H5 de charte (Titillium SemiBold 20). */
.mx-certificat-card__titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--lg); /* 20 */
	line-height: 1;
	color: var(--wp--preset--color--grey-dark);
}

.mx-certificat-card__desc {
	flex: 1 1 auto; /* pousse le lien en bas de carte */
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-dark);
}

.mx-certificat-card__desc p {
	margin: 0;
}

/* Lien PDF : style « lien flèche » de charte (orange, SemiBold, flèche ajoutée par le style). */
.mx-certificat-card__link {
	margin: 0;
}

/* Etat vide (aucun document du type). */
.mx-certificats__empty {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	color: var(--wp--preset--color--grey-middle);
}

/* ---- Responsive : 3 -> 2 -> 1 carte visible ---- */
@media (max-width: 1024px) {
	.mx-certificat-card {
		flex-basis: calc((100% - var(--wp--preset--spacing--45)) / 2); /* 2 visibles */
	}
}

@media (max-width: 680px) {
	.mx-certificats__inner {
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}
	.mx-certificats__row {
		gap: var(--wp--preset--spacing--30); /* 16 */
	}
	.mx-certificat-card {
		flex-basis: 100%; /* 1 visible */
	}
}