/**
 * Extra MatGeco — Split Content
 * Styles scopés .em-sc-* pilotés par CSS custom properties.
 *
 * !important : appliqué sur toutes les props utilisateur pour battre
 * les Global Styles de Kadence (theme.json) et .entry-content h1..h6.
 * Spécificité doublée `.em-sc.em-sc` sur les conteneurs sensibles pour
 * survivre à un theme.json qui cible tag + class avec un poids élevé.
 */

/* =================================================================
 * Section wrapper
 * ================================================================= */
.em-sc {
	background: var(--em-sc-section-bg, transparent);
	color: var(--em-sc-section-text, inherit);
	padding-top: var(--em-sc-outer-pt, 0) !important;
	padding-bottom: var(--em-sc-outer-pb, 0) !important;
	position: relative;
	box-sizing: border-box;
}

/* Padding 0 défauts — l'utilisateur ajoute du padding via l'Inspector s'il en veut. */
.em-sc-inner {
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: grid;
	/* v0.38.1 : les % doivent céder la moitié du gap, sinon la grille déborde
	   de la largeur du gap à droite (50% + 50% + gap > 100%). */
	grid-template-columns:
		calc(var(--em-sc-image-w, 50%) - var(--em-sc-gap, 40px) / 2)
		calc(var(--em-sc-content-w, 50%) - var(--em-sc-gap, 40px) / 2);
	gap: var(--em-sc-gap, 40px) !important;
	align-items: var(--em-sc-valign, center) !important;
}

/* Largeur du bloc unifiée (bmw) */
.em-sc--bmw .em-sc-inner { max-width: var(--em-sc-bmw, none) !important; margin-inline: auto !important; }
@media (max-width: 1024px) {
	.em-sc--bmw .em-sc-inner { max-width: var(--em-sc-bmw-t, var(--em-sc-bmw, none)) !important; }
}
@media (max-width: 600px) {
	.em-sc--bmw .em-sc-inner { max-width: var(--em-sc-bmw-m, var(--em-sc-bmw-t, var(--em-sc-bmw, none))) !important; }
}

/* =================================================================
 * Layout — image left / right + grid areas
 * ================================================================= */
.em-sc--img-left .em-sc-inner {
	grid-template-columns:
		calc(var(--em-sc-image-w, 50%) - var(--em-sc-gap, 40px) / 2)
		calc(var(--em-sc-content-w, 50%) - var(--em-sc-gap, 40px) / 2);
	grid-template-areas: "image content";
}
.em-sc--img-right .em-sc-inner {
	grid-template-columns:
		calc(var(--em-sc-content-w, 50%) - var(--em-sc-gap, 40px) / 2)
		calc(var(--em-sc-image-w, 50%) - var(--em-sc-gap, 40px) / 2);
	grid-template-areas: "content image";
}
.em-sc .em-sc-image   { grid-area: image; min-width: 0; }
.em-sc .em-sc-content { grid-area: content; min-width: 0; }

/* Mode en-tête de section (pas d'image) : contenu pleine largeur */
.em-sc.em-sc--no-image .em-sc-inner {
	grid-template-columns: 1fr !important;
	grid-template-areas: "content" !important;
}

/* Alignement vertical — helper classes (redondant avec la CSS var, priorité + explicite) */
.em-sc--valign-start  .em-sc-inner { align-items: start !important; }
.em-sc--valign-center .em-sc-inner { align-items: center !important; }
.em-sc--valign-end    .em-sc-inner { align-items: end !important; }

/* =================================================================
 * Image column
 * ================================================================= */
.em-sc-image {
	display: block;
	line-height: 0; /* empêche l'espace fantôme sous l'img inline-block */
}

/* --- Cadre d'image (fond / bordure / padding interne) ---
 * Défauts transparent / 0 / 0 → strictement aucun changement visuel.
 * Le radius utilisateur s'applique au cadre ; l'img reçoit un radius
 * réduit (radius - bordure - padding) pour ne jamais déborder des coins
 * arrondis. Pas d'overflow:hidden : il rognerait le box-shadow de l'img. */
.em-sc.em-sc .em-sc-image {
	background: var(--em-sc-img-bg, transparent) !important;
	border: var(--em-sc-img-bd-w, 0) solid var(--em-sc-img-bd, transparent) !important;
	padding: var(--em-sc-img-pad, 0) !important;
	border-radius: var(--em-sc-img-radius, 12px) !important;
	box-sizing: border-box;
}

.em-sc.em-sc .em-sc-image img {
	width: 100% !important;
	height: 100%;
	max-width: 100% !important;
	aspect-ratio: var(--em-sc-img-aspect, 4/3);
	object-fit: var(--em-sc-img-fit, cover);
	object-position: var(--em-sc-img-pos, 50% 50%);
	/* = var(--em-sc-img-radius) tant que bordure + padding valent 0 (défauts) */
	border-radius: max(0px, calc(var(--em-sc-img-radius, 12px) - var(--em-sc-img-bd-w, 0px) - var(--em-sc-img-pad, 0px))) !important;
	display: block;
	box-shadow: var(--em-sc-img-shadow, none) !important;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: high-quality;
}
/* Zoom de recadrage (point focal) — enveloppe .em-sc-image-crop ajoutée par le rendu
 * UNIQUEMENT si un zoom personnalisé est réglé. Elle reprend ratio / arrondi / ombre
 * (l'img est rognée par overflow:hidden) pour que seul le zoom change, sans casser le reste. */
.em-sc.em-sc .em-sc-image-crop {
	display: block;
	width: 100%;
	aspect-ratio: var(--em-sc-img-aspect, 4/3);
	border-radius: max(0px, calc(var(--em-sc-img-radius, 12px) - var(--em-sc-img-bd-w, 0px) - var(--em-sc-img-pad, 0px)));
	overflow: hidden;
	box-shadow: var(--em-sc-img-shadow, none);
}
.em-sc.em-sc .em-sc-image-crop img {
	aspect-ratio: auto !important;
	height: 100%;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: scale(var(--em-sc-img-zoom, 1));
	transform-origin: var(--em-sc-img-pos, 50% 50%);
}
/* Cas aspect-ratio: auto — respecte la ratio native de l'image */
.em-sc.em-sc .em-sc-image[data-aspect="auto"] img,
.em-sc.em-sc .em-sc-image img[style*="aspect-ratio: auto"] {
	height: auto;
	aspect-ratio: auto;
}

/* =================================================================
 * Content column
 * ================================================================= */
.em-sc-content {
	display: block;
}

/* --- Eyebrow --- */
.em-sc .em-sc-eyebrow {
	display: inline-block;
	font-size: var(--em-sc-eyebrow-fs, 13px) !important;
	font-weight: var(--em-sc-eyebrow-fw, 600) !important;
	font-style: var(--em-sc-eyebrow-fst, normal) !important;
	line-height: var(--em-sc-eyebrow-lh, 1.3) !important;
	letter-spacing: var(--em-sc-eyebrow-ls, 1.2px) !important;
	text-transform: var(--em-sc-eyebrow-tt, uppercase) !important;
	color: var(--em-sc-eyebrow-color, #1c4a1d) !important;
	margin: 0 0 var(--em-sc-eyebrow-mb, 10px) 0 !important;
}

/* --- Title (h1..h6, doublé) --- */
.em-sc .em-sc-title,
.em-sc h1.em-sc-title,
.em-sc h2.em-sc-title,
.em-sc h3.em-sc-title,
.em-sc h4.em-sc-title,
.em-sc h5.em-sc-title,
.em-sc h6.em-sc-title {
	font-size: var(--em-sc-title-fs, 32px) !important;
	font-weight: var(--em-sc-title-fw, 700) !important;
	font-style: var(--em-sc-title-fst, normal) !important;
	line-height: var(--em-sc-title-lh, 1.15) !important;
	letter-spacing: var(--em-sc-title-ls, -0.5px) !important;
	text-transform: var(--em-sc-title-tt, none) !important;
	color: var(--em-sc-title-color, #11802f) !important;
	margin: 0 0 var(--em-sc-title-mb, 16px) 0 !important;
}
.em-sc .em-sc-title em {
	font-weight: var(--em-sc-title-em-fw, 700) !important;
	font-style: var(--em-sc-title-em-fst, italic) !important;
	text-transform: var(--em-sc-title-em-tt, none) !important;
	color: var(--em-sc-title-em-color, #1c4a1d) !important;
}
.em-sc .em-sc-title strong {
	font-weight: 800;
	color: inherit;
}

/* =================================================================
 * Body prose
 * ================================================================= */
.em-sc.em-sc .em-sc-body {
	font-size: var(--em-sc-body-fs, 16px) !important;
	font-weight: var(--em-sc-body-fw, 400) !important;
	font-style: var(--em-sc-body-fst, normal) !important;
	line-height: var(--em-sc-body-lh, 1.65) !important;
	letter-spacing: var(--em-sc-body-ls, 0) !important;
	text-transform: var(--em-sc-body-tt, none) !important;
	color: var(--em-sc-body-color, #4a5a4a) !important;
}
.em-sc.em-sc .em-sc-body > *:first-child { margin-top: 0 !important; }
.em-sc.em-sc .em-sc-body > *:last-child  { margin-bottom: 0 !important; }

.em-sc.em-sc .em-sc-body p {
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	margin: 0 0 12px 0;
}

/* --- Sous-titres h3/h4 dans le body --- */
.em-sc.em-sc .em-sc-body h3,
.em-sc.em-sc .em-sc-body h4 {
	font-size: var(--em-sc-body-h-fs, 20px) !important;
	font-weight: var(--em-sc-body-h-fw, 700) !important;
	font-style: var(--em-sc-body-h-fst, normal) !important;
	color: var(--em-sc-body-h-color, #1c4a1d) !important;
	margin: var(--em-sc-body-h-mt, 22px) 0 var(--em-sc-body-h-mb, 8px) 0 !important;
	line-height: var(--em-sc-body-h-lh, 1.3) !important;
	letter-spacing: var(--em-sc-body-h-ls, 0) !important;
	text-transform: var(--em-sc-body-h-tt, none) !important;
}
.em-sc.em-sc .em-sc-body h3:first-child,
.em-sc.em-sc .em-sc-body h4:first-child {
	margin-top: 0 !important;
}

.em-sc.em-sc .em-sc-body strong,
.em-sc.em-sc .em-sc-body b {
	font-weight: var(--em-sc-body-strong-fw, 700) !important;
	color: var(--em-sc-body-strong-color, #1c4a1d) !important;
}

.em-sc.em-sc .em-sc-body em,
.em-sc.em-sc .em-sc-body i {
	font-style: italic;
}

.em-sc.em-sc .em-sc-body a {
	color: var(--em-sc-body-link-color, #11802f) !important;
	text-decoration: var(--em-sc-body-link-deco, underline);
	text-underline-offset: 2px;
	transition: color .15s ease;
}
.em-sc.em-sc .em-sc-body a:hover {
	text-decoration: var(--em-sc-body-link-deco, underline);
	color: var(--em-sc-body-link-hcolor, var(--em-sc-body-link-color, #11802f)) !important;
	filter: var(--em-sc-body-link-hfilter, brightness(0.9));
}

/* --- Lists --- */
.em-sc.em-sc .em-sc-body ul,
.em-sc.em-sc .em-sc-body ol {
	margin: 0 0 12px 0;
	padding-left: 1.4em;
	list-style-position: outside;
}
.em-sc.em-sc .em-sc-body ul {
	list-style-type: var(--em-sc-body-list-marker, disc) !important;
}
.em-sc.em-sc .em-sc-body ol {
	list-style-type: decimal;
}
.em-sc.em-sc .em-sc-body li {
	margin-bottom: var(--em-sc-body-li-mb, 6px) !important;
	line-height: inherit;
}
.em-sc.em-sc .em-sc-body li:last-child {
	margin-bottom: 0 !important;
}

/* --- Custom "check" marker (via ::before pseudo-element) --- */
.em-sc--marker-check .em-sc-body ul {
	list-style-type: none !important;
	padding-left: 0 !important;
}
.em-sc--marker-check .em-sc-body ul > li {
	position: relative;
	padding-left: 1.8em;
}
.em-sc--marker-check .em-sc-body ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.1em;
	height: 1.1em;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23159a39' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}

/* --- 'none' marker --- */
.em-sc--marker-none .em-sc-body ul {
	list-style-type: none !important;
	padding-left: 0 !important;
}

/* =================================================================
 * Boutons CTA sous le texte (v0.37.0) — désactivés par défaut,
 * charte du hero : primaire vert plein, secondaire contour.
 * ================================================================= */
.em-sc .em-sc-actions {
	display: flex;
	flex-wrap: wrap;
	flex-direction: var(--em-sc-ctas-dir, row);
	align-items: var(--em-sc-ctas-items, center);
	justify-content: var(--em-sc-ctas-align, flex-start);
	gap: 12px;
	margin-top: var(--em-sc-ctas-mt, 22px) !important;
}
.em-sc .em-sc-btn,
.em-sc a.em-sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none !important;
	border-radius: var(--em-sc-cta-radius, 8px) !important;
	padding: var(--em-sc-cta-py, 12px) var(--em-sc-cta-px, 18px) !important;
	font-size: var(--em-sc-cta-fs, 14px) !important;
	font-weight: var(--em-sc-cta-fw, 600) !important;
	line-height: 1.2 !important;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.em-sc .em-sc-btn--1,
.em-sc a.em-sc-btn--1 {
	background: var(--em-sc-cta1-bg, #11802f) !important;
	color: var(--em-sc-cta1-color, #ffffff) !important;
	border: 1px solid var(--em-sc-cta1-bd, var(--em-sc-cta1-bg, #11802f)) !important;
}
.em-sc .em-sc-btn--1:hover,
.em-sc a.em-sc-btn--1:hover {
	background: var(--em-sc-cta1-hbg, #0f7228) !important;
	color: var(--em-sc-cta1-hcolor, #ffffff) !important;
}
.em-sc .em-sc-btn--2,
.em-sc a.em-sc-btn--2 {
	background: var(--em-sc-cta2-bg, transparent) !important;
	color: var(--em-sc-cta2-color, #1c4a1d) !important;
	border: 1px solid var(--em-sc-cta2-bd, rgba(28, 74, 29, 0.35)) !important;
}
.em-sc .em-sc-btn--2:hover,
.em-sc a.em-sc-btn--2:hover {
	background: var(--em-sc-cta2-hbg, rgba(17,128,47, 0.08)) !important;
	color: var(--em-sc-cta2-hcolor, #11802f) !important;
}

/* =================================================================
 * Mobile — stack (breakpoint piloté par --em-sc-mobile-bp mais
 * les media queries CSS ne supportent pas les vars → on cible 768px
 * par défaut. L'utilisateur qui change mobileBreakpoint le voit
 * appliqué côté editor preview seulement. Fallback CSS @media doublé
 * à 600 pour matcher la breakpoint bmw mobile.)
 * ================================================================= */
@media (max-width: 768px) {
	.em-sc .em-sc-inner {
		grid-template-columns: 1fr !important;
		grid-template-areas: "image" "content" !important;
		gap: 24px !important;
	}
	.em-sc--stack-content-first .em-sc-inner {
		grid-template-areas: "content" "image" !important;
	}
	.em-sc .em-sc-eyebrow {
		font-size: var(--em-sc-eyebrow-fs-m, 12px) !important;
	}
	.em-sc .em-sc-title,
	.em-sc h1.em-sc-title,
	.em-sc h2.em-sc-title,
	.em-sc h3.em-sc-title,
	.em-sc h4.em-sc-title,
	.em-sc h5.em-sc-title,
	.em-sc h6.em-sc-title {
		font-size: var(--em-sc-title-fs-m, 24px) !important;
	}
	.em-sc.em-sc .em-sc-body {
		font-size: var(--em-sc-body-fs-m, 14px) !important;
	}
	.em-sc.em-sc .em-sc-body h3,
	.em-sc.em-sc .em-sc-body h4 {
		font-size: var(--em-sc-body-h-fs-m, 17px) !important;
	}

	/* CTA mobile : empilés pleine largeur (comme le hero) */
	.em-sc .em-sc-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.em-sc .em-sc-btn,
	.em-sc a.em-sc-btn {
		width: 100%;
	}
}

/* Tablette — titre et texte intermédiaires */
@media (min-width: 769px) and (max-width: 1024px) {
	.em-sc .em-sc-title,
	.em-sc h1.em-sc-title,
	.em-sc h2.em-sc-title,
	.em-sc h3.em-sc-title,
	.em-sc h4.em-sc-title,
	.em-sc h5.em-sc-title,
	.em-sc h6.em-sc-title {
		font-size: var(--em-sc-title-fs-t, 28px) !important;
	}
	.em-sc.em-sc .em-sc-body {
		font-size: var(--em-sc-body-fs-t, var(--em-sc-body-fs, 16px)) !important;
	}
}