/*
 * Bloc « liste des traitements » (one-off, page Traitement de surface). Section blanche pleine largeur,
 * contenu contraint. En-tete (eyebrow + H2 a chevron + intro) + grille de cartes sombres (4 colonnes).
 * Carte : grey-dark (leger degrade diagonal pour la profondeur) + titre Anta 22 blanc + description
 * Titillium 12 grey-light. Aucun token neuf.
 */

.mx-traitements {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--55); /* 80 */
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--grey-dark);
}

.mx-traitements__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--55); /* 80 : en-tete / grille (cote Figma) */
}

/* ---- En-tete ---- */
.mx-traitements__head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 (eyebrow -> titre) */
}

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

.mx-traitements__intro {
	margin-block-start: var(--wp--preset--spacing--20); /* +8 => 16 sous le titre */
	max-width: 90ch;
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
}

.mx-traitements__intro p { margin: 0; }

/* ---- Grille de cartes ---- */
.mx-traitements__grille {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20); /* 8 (cote Figma) */
}

.mx-traitements__carte {
	box-sizing: border-box;
	min-height: 224px; /* cote Figma (cartes uniformes ; grandit si le contenu deborde) */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--10); /* 4 (cote Figma) */
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--45); /* 40 32 */
	border-radius: var(--mx-radius-s, 4px);
	/* Fond sombre + leger degrade diagonal (profondeur metallique, sans image ni couleur en dur). */
	background: linear-gradient( 120deg, var(--wp--preset--color--grey-dark) 55%, color-mix( in srgb, var(--wp--preset--color--grey-dark) 86%, #ffffff ) 100% );
	color: var(--wp--preset--color--white);
}

/* Nom du traitement : H4 de charte (Anta 22), blanc. */
.mx-traitements__nom {
	margin: 0;
	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);
}

.mx-traitements__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--xs); /* 12 (cote Figma) */
	line-height: 1.3;
	color: var(--wp--preset--color--grey-light); /* AA sur grey-dark */
}

/* ---- Responsive : 4 -> 3 -> 2 -> 1 colonnes ---- */
@media (max-width: 1100px) {
	.mx-traitements__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.mx-traitements__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.mx-traitements__inner { padding-inline: var(--wp--preset--spacing--40); /* 24 */ }
	.mx-traitements__grille { grid-template-columns: minmax(0, 1fr); }
}