/*
 * Bloc « texte + CTA » (simple). Section pleine largeur, contenu contraint. Fond editable (clair / gris /
 * sombre) et alignement editable (gauche / centre). Reutilise les primitives de charte (eyebrow, H2, boutons).
 */

.mx-texte-cta {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--55); /* 80 */
}

/* Variante d'INSTANCE : bandeau plus ramasse (moins de blanc vertical). Se pose via le champ
   « CSS class(es) » du bloc, sur la seule instance concernee (ex. bandeau haut de la page Carriere). */
.mx-texte-cta.is-compact {
	padding-block: var(--wp--preset--spacing--50); /* 40 */
}

.mx-texte-cta.is-fond-clair {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--grey-dark);
}

.mx-texte-cta.is-fond-gris {
	background-color: var(--wp--preset--color--grey-ultralight);
	color: var(--wp--preset--color--grey-dark);
}

.mx-texte-cta.is-fond-sombre {
	background-color: var(--wp--preset--color--grey-dark);
	color: var(--wp--preset--color--white);
}

.mx-texte-cta__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--40); /* 24 */
}

/* ---- Variante bandeau : image de fond optionnelle (parallaxe) + voile de lisibilite ----
 * Methode §4 : l'image reste nette a 100 % (aucune opacite dessus) ; la lisibilite vient d'un voile de la
 * COULEUR DE FOND de la section a 80 % pose par-dessus (color-mix sur le token, pas de valeur en dur). */
.mx-texte-cta.has-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.mx-texte-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden; /* clippe l'image pre-agrandie par la parallaxe (pas de bord visible) */
}

.mx-texte-cta__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mx-texte-cta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mx-tc-overlay);
}

.mx-texte-cta.is-fond-clair  { --mx-tc-overlay: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent); }
.mx-texte-cta.is-fond-gris   { --mx-tc-overlay: color-mix(in srgb, var(--wp--preset--color--grey-ultralight) 80%, transparent); }
.mx-texte-cta.is-fond-sombre { --mx-tc-overlay: color-mix(in srgb, var(--wp--preset--color--grey-dark) 80%, transparent); }

.mx-texte-cta.has-bg .mx-texte-cta__inner {
	position: relative;
	z-index: 1;
}

/* Alignement centre : contenu centre, boutons centres. */
.mx-texte-cta.is-align-centre .mx-texte-cta__inner {
	align-items: center;
	text-align: center;
}

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

.mx-texte-cta.is-align-centre .mx-texte-cta__head {
	align-items: center;
}

.mx-texte-cta__title {
	margin: 0;
	color: inherit;
}

.mx-texte-cta__texte {
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: inherit;
}

.mx-texte-cta__texte p {
	margin: 0 0 var(--wp--preset--spacing--30); /* 16 */
}

.mx-texte-cta__texte p:last-child {
	margin-bottom: 0;
}

.mx-texte-cta__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30); /* 16 */
}

.mx-texte-cta.is-align-centre .mx-texte-cta__cta {
	justify-content: center;
}

@media (max-width: 680px) {
	.mx-texte-cta__inner {
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}
}