/**
 * Extra MatGeco — Advantages Story (« Le Rail Produit »)
 * Styles scopés .em-avs-* pilotés par CSS custom properties.
 *
 * Discipline du plugin :
 * - !important sur toutes les props utilisateur pour battre les Global
 *   Styles de Kadence (theme.json) et .entry-content h1..h6 ;
 * - spécificité doublée `.em-avs.em-avs` sur les conteneurs sensibles ;
 * - le rendu STATIQUE (grille alignée, sans sticky) est la base ; le
 *   sticky est une addition (.em-avs-sticky { position: sticky }) —
 *   dégradation = rail statique aligné, jamais un layout cassé ;
 * - les grid-row des médias/items sont en style INLINE → l'override
 *   mobile exige grid-row:auto !important et grid-column:1 !important.
 */

/* =================================================================
 * Section wrapper
 * ================================================================= */
.em-avs {
	background: var(--em-avs-section-bg, #ffffff);
	padding-top: var(--em-avs-outer-pt, 72px) !important;
	padding-bottom: var(--em-avs-outer-pb, 72px) !important;
	/* L'ancre #avantages arrive sous une nav sticky */
	scroll-margin-top: var(--em-avs-scroll-mt, 90px);
	position: relative;
	box-sizing: border-box;
}

.em-avs-inner {
	max-width: 100%;
	margin: 0;
	padding-block: 0;
	padding-inline: clamp(16px, 3vw, 32px);
	box-sizing: border-box;
}

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

/* =================================================================
 * Zone A — En-tête
 * ================================================================= */
.em-avs.em-avs .em-avs-head {
	max-width: 720px;
	margin: 0 0 var(--em-avs-title-mb, 48px) 0 !important;
	text-align: left;
}

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

.em-avs .em-avs-title,
.em-avs h1.em-avs-title,
.em-avs h2.em-avs-title,
.em-avs h3.em-avs-title,
.em-avs h4.em-avs-title,
.em-avs h5.em-avs-title,
.em-avs h6.em-avs-title {
	font-size: var(--em-avs-title-fs, 32px) !important;
	font-weight: var(--em-avs-title-fw, 700) !important;
	font-style: var(--em-avs-title-fst, normal) !important;
	line-height: var(--em-avs-title-lh, 1.15) !important;
	letter-spacing: var(--em-avs-title-ls, -0.5px) !important;
	text-transform: var(--em-avs-title-tt, none) !important;
	color: var(--em-avs-title-color, #11802f) !important;
	margin: 0 !important;
}

/* Texte d'introduction sous le titre (optionnel, « texte normal ») */
.em-avs .em-avs-lead {
	font-size: var(--em-avs-lead-fs, 17px);
	line-height: var(--em-avs-lead-lh, 1.6);
	color: var(--em-avs-lead-color, #4a5a4a);
	margin: 16px 0 0 0;
}
.em-avs .em-avs-lead p { margin: 0 0 0.8em 0; }
.em-avs .em-avs-lead p:last-child { margin-bottom: 0; }

/* =================================================================
 * Zone B — Grille principale (rail média + colonne éditoriale)
 * Rangées implicites : une par avantage (grid-row inline depuis PHP).
 * ================================================================= */
.em-avs.em-avs .em-avs-grid {
	display: grid;
	grid-template-columns: var(--em-avs-media-w, 420px) minmax(0, 1fr);
	column-gap: var(--em-avs-gap, 64px) !important;
	row-gap: 0 !important;
	align-items: stretch;
}

/* Variante média à droite */
.em-avs--media-right.em-avs .em-avs-grid {
	grid-template-columns: minmax(0, 1fr) var(--em-avs-media-w, 420px);
}

/* =================================================================
 * Zone B1 — Rail média (statique d'abord, sticky en addition)
 * ================================================================= */
.em-avs .em-avs-media {
	grid-column: 1;
	min-width: 0;
}
.em-avs--media-right .em-avs-media { grid-column: 2; }

/* Mode alterné : gauche/droite/gauche… par chapitre. Colonnes symétriques ;
 * les côtés (grid-column) sont posés en inline par le PHP, la scène garde sa
 * largeur de rail (centrée dans sa moitié). */
.em-avs--media-alternate.em-avs .em-avs-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.em-avs--media-alternate.em-avs .em-avs-media .em-avs-sticky {
	max-width: var(--em-avs-media-w, 420px);
	margin-inline: auto;
	width: 100%;
}

/* L'addition sticky : la scène reste épinglée pendant que ses items
 * défilent, puis se dé-épingle quand la cellule (span de rangées)
 * se termine — le relais est 100 % CSS. */
.em-avs .em-avs-sticky {
	position: sticky;
	top: var(--em-avs-sticky-top, 96px);
}

/* Plusieurs photos dans un même chapitre : les scènes s'empilent dans la
 * même cellule épinglée, avec un écart réglable. */
.em-avs.em-avs .em-avs-sticky > .em-avs-stage + .em-avs-stage {
	margin-top: var(--em-avs-stage-gap, 14px) !important;
}

/* Aucune photo : la colonne éditoriale prend toute la largeur (le style
 * des items — numéros, filets, typo — reste strictement identique). */
.em-avs.em-avs--nomedia .em-avs-grid {
	grid-template-columns: 1fr;
}
.em-avs.em-avs--nomedia .em-avs-item {
	grid-column: 1;
}

/* Épinglage désactivé (stickyEnabled=false) : l'image est simplement
 * centrée verticalement face à ses sections. */
.em-avs.em-avs--nosticky .em-avs-media {
	display: flex;
	align-items: center;
}
.em-avs.em-avs--nosticky .em-avs-sticky {
	position: static;
	width: 100%;
}

/* La SCÈNE : carte gris-vert, même matériau que les KPI cards du hero */
.em-avs.em-avs .em-avs-stage {
	background: var(--em-avs-stage-bg, #f6f7f5) !important;
	border: var(--em-avs-stage-bd-w, 1px) solid var(--em-avs-stage-bd, rgba(28, 74, 29, 0.08)) !important;
	border-radius: var(--em-avs-stage-radius, 12px) !important;
	padding: var(--em-avs-stage-pad, 24px) !important;
	box-sizing: border-box;
}

/* La PLAQUE : socle blanc — le fond blanc des photos y devient invisible */
.em-avs.em-avs .em-avs-plate {
	background: var(--em-avs-plate-bg, #ffffff) !important;
	border-radius: var(--em-avs-plate-radius, 8px) !important;
	min-height: var(--em-avs-plate-minh, 260px) !important;
	display: grid;
	place-items: center;
	/* v0.54.0 — repère pour la pastille « agrandir » posée dans la plaque. */
	position: relative;
	box-shadow: var(--em-avs-plate-shadow, 0 4px 16px rgba(28, 74, 29, 0.05)) !important;
	overflow: hidden;
	padding: 8px;
	box-sizing: border-box;
}

/* Image : jamais upscalée au-delà de largeur-native × imgScaleMax,
 * jamais plus haute que img-maxh. width/height natifs en attributs
 * (zéro CLS), le CSS ramène à la taille d'affichage. */
.em-avs.em-avs .em-avs-plate img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: min(100%, calc(var(--em-avs-img-natw, 300px) * var(--em-avs-img-scale, 1.25))) !important;
	max-height: var(--em-avs-img-maxh, 232px) !important;
	object-fit: contain;
	border-radius: 0 !important;
	box-shadow: none !important;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: high-quality;
}

/* Légende de scène : index de chapitre « 01 — 02 » + légende libre */
.em-avs .em-avs-caption {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 12px;
}
.em-avs .em-avs-range {
	font-size: var(--em-avs-range-fs, 12px) !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	font-variant-numeric: tabular-nums;
	color: var(--em-avs-range-color, #11802f) !important;
	white-space: nowrap;
}
.em-avs .em-avs-caption-text {
	font-size: var(--em-avs-caption-fs, 13px) !important;
	font-weight: 500 !important;
	color: var(--em-avs-caption-color, #4a5a4a) !important;
	line-height: 1.4;
}

/* =================================================================
 * Zone B2 — Colonne éditoriale (articles numérotés, filets continus)
 * ================================================================= */
.em-avs.em-avs .em-avs-item {
	grid-column: 2;
	min-width: 0;
	min-height: var(--em-avs-item-minh, 170px);
	padding-block: var(--em-avs-item-py, 26px) !important;
	border-top: 1px solid var(--em-avs-divider, #e7ece6) !important;
	display: grid;
	grid-template-columns: var(--em-avs-num-w, 56px) minmax(0, 1fr);
	align-items: start;
	box-sizing: border-box;
}
.em-avs--media-right.em-avs .em-avs-item { grid-column: 1; }

/* Numéros masqués (numsVisible=false) : la colonne des numéros disparaît.
 * !important : bat aussi les redéfinitions tablette/mobile. */
.em-avs.em-avs--nonums .em-avs-item {
	grid-template-columns: 1fr !important;
}

/* Premier article : pas de filet, pas de padding haut */
.em-avs.em-avs .em-avs-grid > .em-avs-item:first-of-type {
	border-top: 0 !important;
	padding-top: 0 !important;
}

/* Numéro « 01 »…« 08 » — l'axe vertical tenu au cordeau */
.em-avs .em-avs-num {
	font-size: var(--em-avs-num-fs, 13px) !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	padding-top: 7px; /* alignement optique avec la 1re ligne du H3 */
	color: var(--em-avs-num-color, #627262) !important;
}

.em-avs .em-avs-item-body { min-width: 0; }

/* H3 fixe des items (spécificité doublée anti theme.json Kadence) */
.em-avs.em-avs .em-avs-item-title,
.em-avs.em-avs h3.em-avs-item-title {
	font-size: var(--em-avs-h-fs, 20px) !important;
	font-weight: var(--em-avs-h-fw, 700) !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--em-avs-h-color, #1c4a1d) !important;
	margin: 0 0 8px 0 !important;
}

/* Souligné vert optionnel sous le H3 (classe em-avs--tick) */
.em-avs .em-avs-item-tick { display: none; }
.em-avs--tick .em-avs-item-tick {
	display: block;
	width: var(--em-avs-tick-w, 36px) !important;
	height: var(--em-avs-tick-h, 3px) !important;
	background: var(--em-avs-tick-color, #11802f) !important;
	border-radius: 2px;
	margin: 10px 0 12px 0;
}

/* Paragraphes des items */
.em-avs.em-avs .em-avs-item-text {
	font-size: var(--em-avs-p-fs, 16px) !important;
	line-height: var(--em-avs-p-lh, 1.65) !important;
	color: var(--em-avs-p-color, #4a5a4a) !important;
	max-width: var(--em-avs-p-maxw, 640px);
}

/* Avantage sans photo : texte pleine largeur (active par l interrupteur) */
.em-avs--wide-nophoto.em-avs--nomedia .em-avs-item-text,
.em-avs--wide-nophoto .em-avs-item--full .em-avs-item-text {
	max-width: none;
}
.em-avs.em-avs .em-avs-item-text > *:first-child { margin-top: 0 !important; }
.em-avs.em-avs .em-avs-item-text > *:last-child  { margin-bottom: 0 !important; }
.em-avs.em-avs .em-avs-item-text p {
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	margin: 0 0 12px 0;
}
.em-avs.em-avs .em-avs-item-text strong,
.em-avs.em-avs .em-avs-item-text b {
	font-weight: 700;
	color: var(--em-avs-h-color, #1c4a1d);
}
.em-avs.em-avs .em-avs-item-text a {
	color: var(--em-avs-link-color, #11802f) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .15s ease;
}
.em-avs.em-avs .em-avs-item-text a:hover { color: var(--em-avs-h-color, #1c4a1d) !important; }
.em-avs.em-avs .em-avs-item-text ul,
.em-avs.em-avs .em-avs-item-text ol {
	margin: 0 0 12px 0;
	padding-left: 1.4em;
	list-style-position: outside;
}
.em-avs.em-avs .em-avs-item-text li { margin-bottom: 6px; line-height: inherit; }
.em-avs.em-avs .em-avs-item-text li:last-child { margin-bottom: 0; }

/* =================================================================
 * Zone C — Outro (callout à barre verte)
 * ================================================================= */
.em-avs.em-avs .em-avs-outro {
	margin-top: var(--em-avs-outro-mt, 40px) !important;
	background: var(--em-avs-outro-bg, #f0f4ef) !important;
	border-left: var(--em-avs-outro-accent-w, 3px) solid var(--em-avs-outro-accent, #11802f) !important;
	border-radius: var(--em-avs-outro-radius, 12px) !important;
	padding: var(--em-avs-outro-py, 20px) var(--em-avs-outro-px, 24px) !important;
	font-size: var(--em-avs-outro-fs, 15px) !important;
	line-height: 1.6 !important;
	color: var(--em-avs-outro-color, #4a5a4a) !important;
	box-sizing: border-box;
}
.em-avs.em-avs .em-avs-outro > *:first-child { margin-top: 0 !important; }
.em-avs.em-avs .em-avs-outro > *:last-child  { margin-bottom: 0 !important; }
.em-avs.em-avs .em-avs-outro p {
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	margin: 0 0 10px 0;
}
.em-avs.em-avs .em-avs-outro a {
	color: var(--em-avs-outro-link, #11802f) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .15s ease;
}
.em-avs.em-avs .em-avs-outro a:hover { color: var(--em-avs-h-color, #1c4a1d) !important; }

/* =================================================================
 * États JS (scopés .em-avs-js — zéro différence si JS absent/coupé)
 * ================================================================= */
.em-avs.em-avs-js .em-avs-num { transition: color .25s ease; }
.em-avs.em-avs-js .em-avs-item.is-active .em-avs-num {
	color: var(--em-avs-num-active, #11802f) !important;
}

/* Index de chapitre : atténué au repos, couleur active sur la scène active */
.em-avs.em-avs-js .em-avs-media .em-avs-range {
	color: rgba(28, 74, 29, 0.45) !important;
	transition: color .25s ease;
}
.em-avs.em-avs-js .em-avs-media.is-active .em-avs-range {
	color: var(--em-avs-range-color, #11802f) !important;
}

/* Micro-fondu de la scène active (uniquement si animation activée) */
.em-avs--anim.em-avs-js .em-avs-media .em-avs-stage {
	opacity: 0.55;
	transform: translateY(10px);
	transition: opacity .4s ease, transform .4s ease;
}
.em-avs--anim.em-avs-js .em-avs-media.is-active .em-avs-stage {
	opacity: 1;
	transform: none;
}

/* =================================================================
 * Tablette ≤ 1024px — vars -t
 * ================================================================= */
@media (max-width: 1024px) {
	.em-avs.em-avs .em-avs-grid {
		grid-template-columns: var(--em-avs-media-w-t, 320px) minmax(0, 1fr);
		column-gap: var(--em-avs-gap-t, 40px) !important;
	}
	.em-avs--media-right.em-avs .em-avs-grid {
		grid-template-columns: minmax(0, 1fr) var(--em-avs-media-w-t, 320px);
	}
	.em-avs .em-avs-title,
	.em-avs h1.em-avs-title,
	.em-avs h2.em-avs-title,
	.em-avs h3.em-avs-title,
	.em-avs h4.em-avs-title,
	.em-avs h5.em-avs-title,
	.em-avs h6.em-avs-title {
		font-size: var(--em-avs-title-fs-t, 28px) !important;
	}
	.em-avs.em-avs .em-avs-stage { padding: var(--em-avs-stage-pad-t, 20px) !important; }
	.em-avs.em-avs .em-avs-plate { min-height: var(--em-avs-plate-minh-t, 216px) !important; }
	.em-avs.em-avs .em-avs-plate img { max-height: var(--em-avs-img-maxh-t, 192px) !important; }
	.em-avs.em-avs .em-avs-item {
		grid-template-columns: var(--em-avs-num-w-t, 44px) minmax(0, 1fr);
	}
	.em-avs.em-avs .em-avs-item-title,
	.em-avs.em-avs h3.em-avs-item-title {
		font-size: var(--em-avs-h-fs-t, 18px) !important;
	}
}

/* =================================================================
 * Mobile ≤ 768px — passage 1 colonne : l'ordre DOM entrelacé
 * (média k puis ses items) donne naturellement photo → sous-sections.
 * Les grid-row/column inline DOIVENT être battus par !important.
 * ================================================================= */
@media (max-width: 768px) {
	.em-avs.em-avs .em-avs-grid,
	.em-avs--media-right.em-avs .em-avs-grid {
		grid-template-columns: 1fr !important;
		row-gap: 0 !important;
	}
	.em-avs .em-avs-media,
	.em-avs.em-avs .em-avs-item,
	.em-avs--media-right .em-avs-media,
	.em-avs--media-right.em-avs .em-avs-item {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	/* Sticky désactivé : scène en flux normal */
	.em-avs .em-avs-sticky { position: static !important; }
	.em-avs .em-avs-media { margin-bottom: 24px; }
	.em-avs.em-avs .em-avs-item { min-height: 0; }
	.em-avs.em-avs .em-avs-grid > .em-avs-item:first-of-type {
		border-top: 0 !important;
		padding-top: 0 !important;
	}
}

/* =================================================================
 * Mobile ≤ 600px — vars -m (affinage typo)
 * ================================================================= */
@media (max-width: 600px) {
	.em-avs .em-avs-eyebrow { font-size: var(--em-avs-eyebrow-fs-m, 12px) !important; }
	.em-avs .em-avs-title,
	.em-avs h1.em-avs-title,
	.em-avs h2.em-avs-title,
	.em-avs h3.em-avs-title,
	.em-avs h4.em-avs-title,
	.em-avs h5.em-avs-title,
	.em-avs h6.em-avs-title {
		font-size: var(--em-avs-title-fs-m, 24px) !important;
	}
	.em-avs.em-avs .em-avs-plate { min-height: var(--em-avs-plate-minh-m, 190px) !important; }
	.em-avs.em-avs .em-avs-plate img { max-height: var(--em-avs-img-maxh-m, 170px) !important; }
	.em-avs .em-avs-range { font-size: 12px !important; }
	.em-avs .em-avs-caption-text { font-size: 12px !important; }
	.em-avs.em-avs .em-avs-item {
		grid-template-columns: var(--em-avs-num-w-m, 40px) minmax(0, 1fr);
		padding-block: var(--em-avs-item-py-m, 20px) !important;
	}
	.em-avs.em-avs .em-avs-item-title,
	.em-avs.em-avs h3.em-avs-item-title {
		font-size: var(--em-avs-h-fs-m, 17px) !important;
	}
	.em-avs.em-avs .em-avs-item-text { font-size: var(--em-avs-p-fs-m, 15px) !important; }
}

/* =================================================================
 * Accessibilité — mouvement réduit : toutes transitions coupées
 * ================================================================= */
@media (prefers-reduced-motion: reduce) {
	.em-avs *,
	.em-avs *::before,
	.em-avs *::after {
		transition: none !important;
	}
	.em-avs--anim.em-avs-js .em-avs-media .em-avs-stage {
		opacity: 1;
		transform: none;
	}
}