/**
 * Extra MatGeco — Arguments Band
 * Scoped .em-ab-* avec CSS vars, !important sur props utilisateur (contre Kadence theme.json)
 */

.em-ab {
	background: var(--em-ab-section-bg, transparent);
	color: var(--em-ab-section-text, inherit);
	padding-top: var(--em-ab-outer-pt, 40px);
	padding-bottom: var(--em-ab-outer-pb, 40px);
}
.em-ab-outer {
	max-width: var(--em-ab-outer-max, 1280px);
	margin: 0 auto;
	padding-left: clamp(16px, 3vw, 32px);
	padding-right: clamp(16px, 3vw, 32px);
	box-sizing: border-box;
}

/* =================================================================
 * Head
 * ================================================================= */
.em-ab-head {
	margin-bottom: var(--em-ab-head-mb, 32px) !important;
	text-align: var(--em-ab-head-align, center);
}
.em-ab--head-align-left   .em-ab-head { text-align: left; }
.em-ab--head-align-right  .em-ab-head { text-align: right; }
.em-ab--head-align-center .em-ab-head { text-align: center; }

.em-ab .em-ab-eyebrow {
	display: inline-block;
	font-size: var(--em-ab-eyebrow-fs, 13px) !important;
	font-weight: var(--em-ab-eyebrow-fw, 600) !important;
	font-style: var(--em-ab-eyebrow-fst, normal) !important;
	line-height: var(--em-ab-eyebrow-lh, 1.3) !important;
	letter-spacing: var(--em-ab-eyebrow-ls, 1.2px) !important;
	text-transform: var(--em-ab-eyebrow-tt, uppercase) !important;
	color: var(--em-ab-eyebrow-color, #2d6e2e) !important;
	margin-bottom: var(--em-ab-eyebrow-mb, 10px) !important;
}
.em-ab .em-ab-title,
.em-ab h1.em-ab-title, .em-ab h2.em-ab-title, .em-ab h3.em-ab-title,
.em-ab h4.em-ab-title, .em-ab h5.em-ab-title, .em-ab h6.em-ab-title {
	font-size: var(--em-ab-title-fs, 36px) !important;
	font-weight: var(--em-ab-title-fw, 700) !important;
	font-style: var(--em-ab-title-fst, normal) !important;
	line-height: var(--em-ab-title-lh, 1.15) !important;
	letter-spacing: var(--em-ab-title-ls, -0.5px) !important;
	text-transform: var(--em-ab-title-tt, none) !important;
	color: var(--em-ab-title-color, #1c4a1d) !important;
	margin: 0 0 var(--em-ab-title-mb, 12px) 0 !important;
}
.em-ab .em-ab-title em {
	font-weight: var(--em-ab-title-em-fw, 700) !important;
	font-style: var(--em-ab-title-em-fst, italic) !important;
	text-transform: var(--em-ab-title-em-tt, none) !important;
	color: var(--em-ab-title-em-color, #3a8c3b) !important;
}
.em-ab .em-ab-lead,
.em-ab p.em-ab-lead {
	font-size: var(--em-ab-lead-fs, 16px) !important;
	font-weight: var(--em-ab-lead-fw, 400) !important;
	font-style: var(--em-ab-lead-fst, normal) !important;
	line-height: var(--em-ab-lead-lh, 1.55) !important;
	letter-spacing: var(--em-ab-lead-ls, 0) !important;
	text-transform: var(--em-ab-lead-tt, none) !important;
	color: var(--em-ab-lead-color, #4a5a4a) !important;
	margin: 0 0 var(--em-ab-lead-mb, 0) 0 !important;
	max-width: 780px;
}
/* L introduction est le seul element d en-tete a porter une largeur maximale :
   son texte est bien aligne A L INTERIEUR de son bloc, mais ce bloc doit encore
   etre place dans l en-tete, ce que font les marges automatiques. Les selecteurs
   reprennent " p.em-ab-lead " et le !important pour peser aussi lourd que la regle
   de mise en forme au-dessus : sans cela son " margin: 0 0 X 0 !important "
   l emporte et l introduction reste collee a gauche, quel que soit l alignement. */
.em-ab--head-align-center .em-ab-lead,
.em-ab--head-align-center p.em-ab-lead {
	margin-left: auto !important;
	margin-right: auto !important;
}
.em-ab--head-align-right .em-ab-lead,
.em-ab--head-align-right p.em-ab-lead {
	margin-left: auto !important;
	margin-right: 0 !important;
}
.em-ab--head-align-left .em-ab-lead,
.em-ab--head-align-left p.em-ab-lead {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* =================================================================
 * Grid
 * ================================================================= */
.em-ab-grid {
	display: grid;
	grid-template-columns: repeat(var(--em-ab-cols-d, 4), minmax(0, 1fr));
	gap: var(--em-ab-gap, 24px);
	position: relative;
}

/* =================================================================
 * Item
 * ================================================================= */
.em-ab-item {
	background: var(--em-ab-item-bg, transparent) !important;
	border: var(--em-ab-item-bd-w, 0) solid var(--em-ab-item-bd, transparent) !important;
	border-radius: var(--em-ab-item-radius, 12px) !important;
	box-shadow: var(--em-ab-item-shadow, none) !important;
	padding: var(--em-ab-item-py, 20px) var(--em-ab-item-px, 20px) !important;
	display: flex;
	position: relative;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .25s ease;
}

/* Icon position top */
.em-ab--ico-top .em-ab-item { flex-direction: column; }
.em-ab--ico-left .em-ab-item { flex-direction: row; align-items: flex-start; gap: 16px; }

/* Alignement du contenu */
.em-ab--align-left   .em-ab-item { text-align: left;   align-items: flex-start; }
.em-ab--align-center .em-ab-item { text-align: center; align-items: center; }
.em-ab--align-right  .em-ab-item { text-align: right;  align-items: flex-end; }
.em-ab--ico-left.em-ab--align-center .em-ab-item { align-items: center; }

/* Hover */
.em-ab-item:hover {
	background: var(--em-ab-item-hbg, var(--em-ab-item-bg, transparent)) !important;
	border-color: var(--em-ab-item-hbd, var(--em-ab-item-bd, transparent)) !important;
}
.em-ab--hover-lift .em-ab-item:hover { transform: translateY(-4px); }

/* =================================================================
 * Séparateurs verticaux entre items (mode "bandeau")
 * — appliqués seulement en mode ico-top pour ne pas casser le layout ico-left
 * ================================================================= */
.em-ab--divider .em-ab-grid { gap: 0; }
.em-ab--divider .em-ab-item {
	border-right: var(--em-ab-div-w, 1px) solid var(--em-ab-div-color, rgba(0,0,0,0.08)) !important;
}
.em-ab--divider .em-ab-item:last-child { border-right: 0 !important; }

/* =================================================================
 * Icon
 * ================================================================= */
.em-ab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--em-ab-ico-box, 48px);
	height: var(--em-ab-ico-box, 48px);
	border-radius: var(--em-ab-ico-radius, 12px);
	background: var(--em-ab-ico-bg, transparent);
	color: var(--em-ab-ico-color, #2d6e2e);
	flex-shrink: 0;
	margin-bottom: var(--em-ab-ico-mb, 14px);
}
.em-ab--ico-left .em-ab-icon { margin-bottom: 0; }

.em-ab-icon svg {
	width: var(--em-ab-ico-size, 26px);
	height: var(--em-ab-ico-size, 26px);
	stroke-width: var(--em-ab-ico-sw, 2);
	stroke: currentColor;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.em-ab-icon img {
	width: var(--em-ab-ico-size, 26px);
	height: var(--em-ab-ico-size, 26px);
	object-fit: contain;
	object-position: center;
	display: block;
}
.em-ab-icon--image { color: inherit; }

/* === Fix préemptif icônes SVG clippées (v0.27.0) =====================
 * Les SVGs feather utilisent stroke-width 2 avec viewBox 0 0 24 24 et
 * des points aux bords : la moitié du trait (1px) déborde du viewBox
 * et est clippée par overflow:hidden implicite sur le container flex.
 * Fix : spécificité doublée .em-ab.em-ab + overflow:visible + !important
 * pour battre les Global Styles de Kadence.
 * Le background/border-radius du container (cercle coloré) reste intact
 * grâce à overflow:visible qui n'affecte que le clipping du stroke SVG.
 * ================================================================= */
.em-ab.em-ab .em-ab-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: var(--em-ab-ico-box, 48px) !important;
	height: var(--em-ab-ico-box, 48px) !important;
	min-width: var(--em-ab-ico-box, 48px) !important;
	min-height: var(--em-ab-ico-box, 48px) !important;
	line-height: 0 !important;
	overflow: visible !important;
	padding: 0 !important;
}
.em-ab.em-ab .em-ab-icon svg,
.em-ab.em-ab .em-ab-icon img {
	width: var(--em-ab-ico-size, 26px) !important;
	height: var(--em-ab-ico-size, 26px) !important;
	max-width: 100% !important;
	max-height: 100% !important;
	display: block !important;
	overflow: visible !important;
}
.em-ab.em-ab .em-ab-icon svg {
	fill: none;
	stroke: currentColor;
}

/* =================================================================
 * Item body
 * ================================================================= */
.em-ab-body { flex: 1; min-width: 0; }
.em-ab--ico-left.em-ab--align-center .em-ab-body { text-align: left; }

.em-ab .em-ab-item-title,
.em-ab h1.em-ab-item-title, .em-ab h2.em-ab-item-title, .em-ab h3.em-ab-item-title,
.em-ab h4.em-ab-item-title, .em-ab h5.em-ab-item-title, .em-ab h6.em-ab-item-title {
	font-size: var(--em-ab-itemtitle-fs, 18px) !important;
	font-weight: var(--em-ab-itemtitle-fw, 700) !important;
	font-style: var(--em-ab-itemtitle-fst, normal) !important;
	line-height: var(--em-ab-itemtitle-lh, 1.3) !important;
	letter-spacing: var(--em-ab-itemtitle-ls, -0.2px) !important;
	text-transform: var(--em-ab-itemtitle-tt, none) !important;
	color: var(--em-ab-itemtitle-color, #1c4a1d) !important;
	margin: 0 0 var(--em-ab-itemtitle-mb, 8px) 0 !important;
}
.em-ab .em-ab-item-desc,
.em-ab p.em-ab-item-desc {
	font-size: var(--em-ab-itemdesc-fs, 14px) !important;
	font-weight: var(--em-ab-itemdesc-fw, 400) !important;
	font-style: var(--em-ab-itemdesc-fst, normal) !important;
	line-height: var(--em-ab-itemdesc-lh, 1.55) !important;
	letter-spacing: var(--em-ab-itemdesc-ls, 0) !important;
	text-transform: var(--em-ab-itemdesc-tt, none) !important;
	color: var(--em-ab-itemdesc-color, #4a5a4a) !important;
	margin: 0 0 var(--em-ab-itemdesc-mb, 0) 0 !important;
}

/* =================================================================
 * Empty
 * ================================================================= */
.em-ab-empty {
	padding: 40px 20px; text-align: center;
	color: var(--em-ab-lead-color, #627262);
	background: #f6f7f5; border-radius: 12px;
}

/* =================================================================
 * Responsive
 * ================================================================= */
@media (max-width: 1024px) {
	.em-ab-outer { max-width: var(--em-ab-outer-max-t, var(--em-ab-outer-max, 1280px)); }
	.em-ab-grid { grid-template-columns: repeat(var(--em-ab-cols-t, 2), minmax(0, 1fr)); gap: var(--em-ab-gap-t, 20px); }
	.em-ab--divider .em-ab-grid { gap: 0; }
	.em-ab--divider .em-ab-item:nth-last-child(-n+2) { border-right: 0 !important; }
	.em-ab .em-ab-title,
	.em-ab h1.em-ab-title, .em-ab h2.em-ab-title, .em-ab h3.em-ab-title,
	.em-ab h4.em-ab-title, .em-ab h5.em-ab-title, .em-ab h6.em-ab-title {
		font-size: var(--em-ab-title-fs-t, 30px) !important;
	}
}
@media (max-width: 600px) {
	.em-ab-outer { max-width: var(--em-ab-outer-max-m, var(--em-ab-outer-max-t, var(--em-ab-outer-max, 1280px))); }
	.em-ab-grid { grid-template-columns: repeat(var(--em-ab-cols-m, 1), minmax(0, 1fr)); gap: var(--em-ab-gap-m, 16px); }
	.em-ab--divider .em-ab-item { border-right: 0 !important; border-bottom: var(--em-ab-div-w, 1px) solid var(--em-ab-div-color, rgba(0,0,0,0.08)) !important; }
	.em-ab--divider .em-ab-item:last-child { border-bottom: 0 !important; }
	.em-ab .em-ab-title,
	.em-ab h1.em-ab-title, .em-ab h2.em-ab-title, .em-ab h3.em-ab-title,
	.em-ab h4.em-ab-title, .em-ab h5.em-ab-title, .em-ab h6.em-ab-title {
		font-size: var(--em-ab-title-fs-m, 26px) !important;
	}
	.em-ab .em-ab-lead, .em-ab p.em-ab-lead { font-size: var(--em-ab-lead-fs-m, 14px) !important; }
	.em-ab .em-ab-item-title,
	.em-ab h1.em-ab-item-title, .em-ab h2.em-ab-item-title, .em-ab h3.em-ab-item-title,
	.em-ab h4.em-ab-item-title, .em-ab h5.em-ab-item-title, .em-ab h6.em-ab-item-title {
		font-size: var(--em-ab-itemtitle-fs-m, 17px) !important;
	}
	.em-ab .em-ab-item-desc, .em-ab p.em-ab-item-desc {
		font-size: var(--em-ab-itemdesc-fs-m, 13px) !important;
	}
}

/* Editor helper */
.editor-styles-wrapper .em-ab { max-width: 100%; }