/**
 * Extra MatGeco — Product Specs
 * Styles scopés .em-ps-* 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.
 */

/* =================================================================
 * Jamais de mot coupé (v0.86.2)
 * Kadence / Gutenberg héritent word-break:break-word et
 * overflow-wrap:break-word (.entry-content, .wp-block-column) : un libellé
 * court dans une cellule flex rétrécie était coupé en plein mot
 * (« Palle / t »). On n'autorise que les retours entre mots.
 * ================================================================= */
.em-ps,
.em-ps .em-ps-table th,
.em-ps .em-ps-table td,
.em-ps .em-ps-matrix th,
.em-ps .em-ps-matrix td {
	word-break: normal !important;
	overflow-wrap: normal !important;
	word-wrap: normal !important;
	-webkit-hyphens: manual !important;
	hyphens: manual !important;
}

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

/* Défaut : pleine largeur, sans padding horizontal — Inspector « Largeur du bloc » (bmw) contraint si activé. */
.em-ps-inner {
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

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

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

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

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

.em-ps .em-ps-lead,
.em-ps p.em-ps-lead {
	font-size: var(--em-ps-lead-fs, 16px) !important;
	font-weight: var(--em-ps-lead-fw, 400) !important;
	font-style: var(--em-ps-lead-fst, normal) !important;
	line-height: var(--em-ps-lead-lh, 1.55) !important;
	letter-spacing: var(--em-ps-lead-ls, 0) !important;
	text-transform: var(--em-ps-lead-tt, none) !important;
	color: var(--em-ps-lead-color, #4a5a4a) !important;
	margin: 0 0 var(--em-ps-lead-mb, 0) 0 !important;
	max-width: 780px;
}
.em-ps .em-ps-lead strong {
	color: var(--em-ps-lead-strong-color, inherit) !important;
}
/* 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-ps-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-ps--head-align-center .em-ps-lead,
.em-ps--head-align-center p.em-ps-lead {
	margin-left: auto !important;
	margin-right: auto !important;
}
.em-ps--head-align-right .em-ps-lead,
.em-ps--head-align-right p.em-ps-lead {
	margin-left: auto !important;
	margin-right: 0 !important;
}
.em-ps--head-align-left .em-ps-lead,
.em-ps--head-align-left p.em-ps-lead {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* =================================================================
 * Groups (CSS Grid)
 * ================================================================= */
.em-ps-groups {
	display: grid;
	grid-template-columns: repeat(var(--em-ps-cols, 2), minmax(0, 1fr));
	gap: var(--em-ps-gap, 24px);
}

/* Répartition manuelle (v0.33.0) : un wrapper .em-ps-col par colonne,
 * les groupes assignés s'y empilent — hauteurs indépendantes par colonne. */
.em-ps-groups--manual > .em-ps-col {
	display: flex;
	flex-direction: column;
	gap: var(--em-ps-gap, 24px);
	min-width: 0;
}

/* =================================================================
 * Group card
 * ================================================================= */
.em-ps .em-ps-group {
	background: var(--em-ps-group-bg, transparent) !important;
	border: var(--em-ps-group-bd-w, 0) solid var(--em-ps-group-bd-color, transparent) !important;
	border-radius: var(--em-ps-group-radius, 12px) !important;
	padding: var(--em-ps-group-py, 20px) var(--em-ps-group-px, 20px) !important;
	box-sizing: border-box;
	min-width: 0;
}

.em-ps .em-ps-group-title {
	font-size: var(--em-ps-group-title-fs, 15px) !important;
	font-weight: var(--em-ps-group-title-fw, 700) !important;
	font-style: var(--em-ps-group-title-fst, normal) !important;
	line-height: var(--em-ps-group-title-lh, 1.3) !important;
	letter-spacing: var(--em-ps-group-title-ls, 0.5px) !important;
	text-transform: var(--em-ps-group-title-tt, uppercase) !important;
	color: var(--em-ps-group-title-color, #11802f) !important;
	margin: 0 0 var(--em-ps-group-title-mb, 12px) 0 !important;
}

/* =================================================================
 * Table (reset + custom rows)
 * ================================================================= */
/* v0.87.8 — remarque libre sous le tableau d'un groupe (sans libellé) */
.em-ps .em-ps-group-note,
.em-ps p.em-ps-group-note,
.em-ps div.em-ps-group-note {
	margin: 10px 0 0 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-style: italic !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: var(--em-ps-label-color, #4a5a4a) !important;
	overflow-wrap: break-word;
}
.em-ps .em-ps-group-note p { margin: 0 0 6px 0 !important; }
.em-ps .em-ps-group-note p:last-child { margin-bottom: 0 !important; }
.em-ps .em-ps-group-note ul,
.em-ps .em-ps-group-note ol { margin: 4px 0 0 1.2em !important; padding: 0 !important; }
.em-ps .em-ps-group-note li { margin: 0 0 2px 0 !important; }
.em-ps .em-ps-group-note a { color: inherit !important; text-decoration: underline !important; }

.em-ps .em-ps-table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 0 !important;
	background: transparent !important;
	table-layout: auto;
}
.em-ps .em-ps-table caption,
.em-ps .em-ps-table thead,
.em-ps .em-ps-table tfoot { display: none; }

.em-ps .em-ps-table tbody { display: block; width: 100%; }

.em-ps .em-ps-table tr {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 12px;
	width: 100%;
	border-bottom: var(--em-ps-row-bd-w, 1px) solid var(--em-ps-row-bd-color, rgba(0,0,0,0.08)) !important;
	background: transparent !important;
}
.em-ps .em-ps-table tr:last-child {
	border-bottom: 0 !important;
}
.em-ps--no-separators .em-ps-table tr {
	border-bottom: 0 !important;
}

.em-ps .em-ps-table th,
.em-ps .em-ps-table td {
	padding: var(--em-ps-row-py, 10px) var(--em-ps-row-px, 0) !important;
	background: transparent !important;
	border: 0 !important;
	vertical-align: baseline;
	box-sizing: border-box;
	margin: 0;
}

/* Label (th) */
.em-ps .em-ps-table th {
	font-size: var(--em-ps-label-fs, 14px) !important;
	font-weight: var(--em-ps-label-fw, 500) !important;
	font-style: var(--em-ps-label-fst, normal) !important;
	line-height: var(--em-ps-label-lh, 1.4) !important;
	letter-spacing: var(--em-ps-label-ls, 0) !important;
	text-transform: var(--em-ps-label-tt, none) !important;
	color: var(--em-ps-label-color, #4a5a4a) !important;
	text-align: left !important;
	flex: 1 1 auto;
	min-width: auto; /* jamais plus étroit que son mot le plus long (v0.86.2) */
}

/* Value (td) */
.em-ps .em-ps-table td {
	font-size: var(--em-ps-value-fs, 14px) !important;
	font-weight: var(--em-ps-value-fw, 600) !important;
	font-style: var(--em-ps-value-fst, normal) !important;
	line-height: var(--em-ps-value-lh, 1.4) !important;
	letter-spacing: var(--em-ps-value-ls, 0) !important;
	text-transform: var(--em-ps-value-tt, none) !important;
	color: var(--em-ps-value-color, #1c4a1d) !important;
	text-align: right;
	flex: 0 1 auto;
	min-width: auto; /* idem ; retours entre mots seulement (v0.86.2) */
}

.em-ps--value-align-left .em-ps-table td  { text-align: left  !important; }
.em-ps--value-align-right .em-ps-table td { text-align: right !important; }

/* Value inline HTML */
.em-ps .em-ps-table td a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.em-ps .em-ps-table td a:hover { color: var(--em-ps-title-color, #11802f); }
.em-ps .em-ps-table td code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
	padding: 1px 4px;
	background: rgba(17,128,47,0.08);
	border-radius: 3px;
}

/* =================================================================
 * Row layout — stack (label au-dessus, valeur en-dessous)
 * ================================================================= */
.em-ps--row-stack .em-ps-table tr {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.em-ps--row-stack .em-ps-table td {
	text-align: left !important;
	width: 100%;
	flex: 1 1 auto;
}
.em-ps--row-stack.em-ps--value-align-right .em-ps-table td {
	text-align: right !important;
}

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

/* =================================================================
 * Preemptive : overflow visible + doubled specificity
 * (bien que ce bloc n'ait pas d'icône SVG, on suit le pattern
 * défensif documenté v0.27.0)
 * ================================================================= */
.em-ps.em-ps .em-ps-icon,
.em-ps.em-ps .em-ps-icon svg {
	overflow: visible !important;
}

/* =================================================================
 * Tableau comparatif — displayMode 'matrix' (v0.37.0)
 * Lignes de caractéristiques × colonnes de déclinaisons, en nombre
 * libre. Typo héritée des vars label/value du module ; en-tête charte
 * verte ; notes de norme en petit ; zébrage ; défilement horizontal
 * propre sur mobile (le tableau ne casse jamais la page).
 * ================================================================= */
.em-ps .em-ps-matrix-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--em-ps-mx-bd, #e4e9e4) !important;
	border-radius: var(--em-ps-mx-radius, 12px) !important;
}
.em-ps table.em-ps-matrix {
	width: 100%;
	border-collapse: collapse;
	margin: 0 !important;
	border: none !important;
}
.em-ps .em-ps-matrix th,
.em-ps .em-ps-matrix td {
	padding: var(--em-ps-mx-py, 10px) var(--em-ps-mx-px, 14px) !important;
	border: 1px solid var(--em-ps-mx-bd, #e4e9e4) !important;
	text-align: left !important;
	vertical-align: top;
}
/* Le cadre extérieur est porté par le wrap : pas de double bordure */
.em-ps .em-ps-matrix tr > *:first-child { border-left: none !important; }
.em-ps .em-ps-matrix tr > *:last-child  { border-right: none !important; }
.em-ps .em-ps-matrix thead th           { border-top: none !important; }
.em-ps .em-ps-matrix tbody tr:last-child > * { border-bottom: none !important; }

.em-ps .em-ps-matrix thead th {
	background: var(--em-ps-mx-head-bg, #1c4a1d) !important;
	color: var(--em-ps-mx-head-color, #ffffff) !important;
	font-size: var(--em-ps-label-fs, 14px) !important;
	font-weight: 700 !important;
	line-height: var(--em-ps-label-lh, 1.4) !important;
	white-space: nowrap;
}
.em-ps .em-ps-matrix tbody th[scope="row"] {
	color: var(--em-ps-label-color, #4a5a4a) !important;
	font-size: var(--em-ps-label-fs, 14px) !important;
	font-weight: var(--em-ps-label-fw, 500) !important;
	line-height: var(--em-ps-label-lh, 1.4) !important;
	width: var(--em-ps-mx-col1-w, auto);
	/* plancher par défaut seulement : un réglage explicite < 150px doit être respecté */
	min-width: var(--em-ps-mx-col1-w, 150px);
	background: transparent;
}
.em-ps .em-ps-matrix tbody td {
	color: var(--em-ps-value-color, #1c4a1d) !important;
	font-size: var(--em-ps-value-fs, 14px) !important;
	font-weight: 400 !important;
	line-height: var(--em-ps-value-lh, 1.4) !important;
}
.em-ps .em-ps-matrix tbody tr:nth-child(even) > * {
	background: var(--em-ps-mx-stripe, #f6f7f5);
}
.em-ps .em-ps-matrix tbody tr.em-ps-matrix-row--bold td {
	font-weight: 700 !important;
}
.em-ps .em-ps-matrix-note {
	font-size: var(--em-ps-mx-note-fs, 11px) !important;
	font-weight: 400 !important;
	font-style: italic;
	opacity: 0.75;
	margin-left: 4px;
	white-space: nowrap;
}

/* =================================================================
 * Responsive
 * ================================================================= */
@media (max-width: 1024px) {
	.em-ps-groups { grid-template-columns: repeat(var(--em-ps-cols-t, 1), minmax(0, 1fr)); }
	.em-ps .em-ps-title,
	.em-ps h1.em-ps-title, .em-ps h2.em-ps-title, .em-ps h3.em-ps-title,
	.em-ps h4.em-ps-title, .em-ps h5.em-ps-title, .em-ps h6.em-ps-title {
		font-size: var(--em-ps-title-fs-t, 28px) !important;
	}
}

@media (max-width: 600px) {
	.em-ps .em-ps-title,
	.em-ps h1.em-ps-title, .em-ps h2.em-ps-title, .em-ps h3.em-ps-title,
	.em-ps h4.em-ps-title, .em-ps h5.em-ps-title, .em-ps h6.em-ps-title {
		font-size: var(--em-ps-title-fs-m, 24px) !important;
	}
	.em-ps .em-ps-lead, .em-ps p.em-ps-lead { font-size: var(--em-ps-lead-fs-m, 14px) !important; }
	.em-ps .em-ps-group-title { font-size: var(--em-ps-group-title-fs-m, 14px) !important; }
	.em-ps .em-ps-table th { font-size: var(--em-ps-label-fs-m, 13px) !important; }
	.em-ps .em-ps-table td { font-size: var(--em-ps-value-fs-m, 13px) !important; }

	/* Tableau comparatif mobile : cellules resserrées, typo mobile —
	   la table défile horizontalement dans son wrap si trop large. */
	.em-ps .em-ps-matrix th,
	.em-ps .em-ps-matrix td {
		padding: 8px 10px !important;
	}
	.em-ps .em-ps-matrix thead th,
	.em-ps .em-ps-matrix tbody th[scope="row"] { font-size: var(--em-ps-label-fs-m, 13px) !important; }
	.em-ps .em-ps-matrix tbody td { font-size: var(--em-ps-value-fs-m, 13px) !important; }
	.em-ps .em-ps-matrix tbody th[scope="row"] { min-width: var(--em-ps-mx-col1-w, 120px); }

	/* v0.30.5 — Fix mobile : forcer table 100% width (bypass display:table shrink-fit)
	   + spécificité triple pour battre em-ps--value-align-right qui reste right même stacké. */
	.em-ps.em-ps.em-ps .em-ps-table {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.em-ps.em-ps.em-ps .em-ps-table tbody { display: block !important; width: 100% !important; }

	/* Row en colonne, gap resserré */
	.em-ps.em-ps.em-ps .em-ps-table tr {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 2px !important;
		width: 100% !important;
	}

	/* Label + valeur : full width, aligné gauche systématiquement sur mobile.
	   Padding réduit pour compacité. */
	.em-ps.em-ps.em-ps .em-ps-table th,
	.em-ps.em-ps.em-ps .em-ps-table td {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		padding: 6px 0 !important;
		flex: 0 0 auto !important;
	}

	/* Le label devient un chapeau discret sur mobile (uppercase + petit) */
	.em-ps.em-ps.em-ps .em-ps-table th {
		padding: 8px 0 0 0 !important;
		font-weight: 500 !important;
		opacity: 0.85;
	}

	/* Réduire le padding-x des group cards sur mobile pour maximiser la largeur utile */
	.em-ps.em-ps.em-ps .em-ps-group {
		padding-left: var(--em-ps-group-px-m, 12px) !important;
		padding-right: var(--em-ps-group-px-m, 12px) !important;
	}
}

/* =================================================================
 * Editor tweaks
 * ================================================================= */
.editor-styles-wrapper .em-ps { max-width: 100%; }