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

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

.em-ph-inner {
	max-width: var(--em-ph-outer-max, 1280px);
	margin: 0 auto;
	padding-left: clamp(16px, 3vw, 32px);
	padding-right: clamp(16px, 3vw, 32px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: var(--em-ph-gallery-w, 55%) var(--em-ph-info-w, 45%);
	gap: var(--em-ph-layout-gap, 40px) !important;
	align-items: start;
}

/* Vertical alignment */
.em-ph--valign-center .em-ph-inner { align-items: center; }

/* Gallery position (default left) */
.em-ph--gallery-left  .em-ph-inner { grid-template-areas: "gallery info"; }
.em-ph--gallery-right .em-ph-inner {
	grid-template-columns: var(--em-ph-info-w, 45%) var(--em-ph-gallery-w, 55%);
	grid-template-areas: "info gallery";
}
.em-ph--gallery-left  .em-ph-gallery { grid-area: gallery; }
.em-ph--gallery-left  .em-ph-info    { grid-area: info; }
.em-ph--gallery-right .em-ph-gallery { grid-area: gallery; }
.em-ph--gallery-right .em-ph-info    { grid-area: info; }

/* Unified block width */
.em-ph--bmw .em-ph-inner {
	max-width: var(--em-ph-bmw, none) !important;
}

/* =================================================================
 * Gallery
 * ================================================================= */
.em-ph-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--em-ph-thumb-gap, 10px);
	min-width: 0;
}

/* Thumbs on the side */
.em-ph--thumbs-left  .em-ph-gallery { flex-direction: row-reverse; }
.em-ph--thumbs-right .em-ph-gallery { flex-direction: row; }
.em-ph--thumbs-left  .em-ph-gallery-thumbs,
.em-ph--thumbs-right .em-ph-gallery-thumbs {
	grid-template-columns: 1fr;
	grid-auto-rows: var(--em-ph-thumb-size, 84px);
	width: calc(var(--em-ph-thumb-size, 84px) + var(--em-ph-thumb-gap, 10px));
	flex-shrink: 0;
}
.em-ph--thumbs-left  .em-ph-gallery-main,
.em-ph--thumbs-right .em-ph-gallery-main { flex: 1; }

.em-ph-gallery-main {
	aspect-ratio: var(--em-ph-main-aspect, 4 / 3);
	border-radius: var(--em-ph-main-radius, 16px) !important;
	overflow: hidden;
	background: #f6f7f5;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
	position: relative;
}
.em-ph-gallery-main-img {
	width: 100%;
	height: 100%;
	object-fit: var(--em-ph-main-fit, cover);
	object-position: center;
	display: block;
	transition: opacity 0.2s ease;
	/* v0.54.0 — « crisp-edges » retiré : ce mode coupe l'interpolation et
	   crève les schémas cotés (traits en escalier, légendes brouillées) dès
	   que l'image n'est pas affichée à sa taille exacte. On laisse le
	   navigateur lisser. */
	image-rendering: auto;
	/* v0.54.1 — « backface-visibility: hidden » et « transform: translateZ(0) »
	   RETIRÉS. Ils forçaient la promotion de l'image en couche GPU : le
	   navigateur ne réduisait plus l'image avec son filtre de qualité mais par
	   un simple échantillonnage de texture. Un schéma de 929 px affiché à
	   404 px y perdait 12,4 % de netteté (gradient moyen mesuré contre une
	   réduction hors navigateur) ; sans eux, l'écart tombe à 3,9 %. La
	   transition d'opacité au changement de vignette n'a pas besoin de couche
	   dédiée. */
}

/* v0.54.0 — cadrage automatique : une image nettement plus large que son cadre
   (schéma coté dans un cadre 4/3) serait rognée sur les côtés par « Couvrir »,
   donc illisible. La classe est posée par le script quand le rapport de
   l'image s'écarte trop de celui du cadre. */
.em-ph-gallery-main-img.is-contain {
	object-fit: contain;
	background: #fff;
}

/* v0.89.0 — taille limitée (Médias → Image des fiches, EM_Ph_Taille) : le
   script pose la largeur (et la hauteur) exactes pour ne pas agrandir une
   petite photo au point de la pixelliser. L'image est montrée en entier,
   centrée ; autour, le fond clair du cadre.
   - cadre à ratio fixe : il garde sa taille, l'image y est centrée ;
   - cadre « Auto » : il garde sa largeur, sa hauteur suit l'image. */
.em-ph-gallery-main-img.is-limite {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.em-ph-gallery-main-img.is-limite-auto {
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}

.em-ph-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(var(--em-ph-thumbs-cols, 4), minmax(0, 1fr));
	gap: var(--em-ph-thumb-gap, 10px);
	list-style: none;
	padding: 0;
	margin: 0;
}

.em-ph-gallery-thumb {
	appearance: none;
	background: #fff;
	padding: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--em-ph-thumb-radius, 10px) !important;
	overflow: hidden;
	cursor: pointer;
	border: var(--em-ph-thumb-bd-w, 2px) solid rgba(0, 0, 0, 0.08) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	display: block;
}
.em-ph-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* v0.54.1 — même correction que l'image principale, et elle compte encore
	   plus ici : une vignette réduit un fichier de 929 px à 84 px. « crisp-edges »
	   coupait le lissage, « translateZ(0) » forçait une couche GPU où le
	   navigateur n'applique plus son filtre de réduction de qualité. */
	image-rendering: auto;
}
.em-ph-gallery-thumb:hover {
	transform: translateY(-1px);
	border-color: var(--em-ph-thumb-active, #11802f) !important;
}
.em-ph-gallery-thumb.is-active {
	border-color: var(--em-ph-thumb-active, #11802f) !important;
	box-shadow: 0 0 0 3px rgba(45, 110, 46, 0.18);
}

/* Bouton « + » (dernière vignette) : lien ancre vers le bloc Galerie photos de la page */
.em-ph-gallery-thumb.em-ph-gallery-more {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--em-ph-thumb-active, #11802f);
	text-decoration: none;
	font-size: 30px;
	font-weight: 300;
	line-height: 1;
}
.em-ph-gallery-thumb.em-ph-gallery-more:hover {
	background: var(--em-ph-thumb-active, #11802f);
	color: #fff;
	border-color: var(--em-ph-thumb-active, #11802f) !important;
	transform: translateY(-1px);
}
.em-ph-gallery-thumb.em-ph-gallery-more span { pointer-events: none; line-height: 0; margin-top: -3px; }

/* === Vignette vidéo (v0.38.0) : badge lecture + zone vidéo principale === */
.em-ph-gallery-thumb--video {
	position: relative;
}
.em-ph-gallery-thumb--video::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.62) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8 5v14l11-7z"/></svg>') center / 16px 16px no-repeat;
	pointer-events: none;
	transition: background-color 0.2s ease;
}
.em-ph-gallery-thumb--video:hover::after {
	background-color: var(--em-ph-thumb-active, #11802f);
}
.em-ph-main-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--em-ph-main-radius, 14px);
	overflow: hidden;
	background: #000;
}
.em-ph-main-video iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* Zone d'éléments déplacés sous la galerie (galleryOrder, v0.34.0) */
.em-ph .em-ph-gallery-extra {
	margin-top: var(--em-ph-gx-mt, 18px);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* =================================================================
 * Info column
 * ================================================================= */
.em-ph-info {
	min-width: 0;
}

/* Badges */
.em-ph-info-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--em-ph-badge-gap, 8px) !important;
	margin-bottom: 14px;
}
.em-ph .em-ph-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--em-ph-badge-py, 5px) var(--em-ph-badge-px, 10px) !important;
	border-radius: var(--em-ph-badge-radius, 999px) !important;
	font-size: var(--em-ph-badge-fs, 11px) !important;
	font-weight: var(--em-ph-badge-fw, 700) !important;
	font-style: var(--em-ph-badge-fst, normal) !important;
	line-height: var(--em-ph-badge-lh, 1.2) !important;
	letter-spacing: var(--em-ph-badge-ls, 0.6px) !important;
	text-transform: var(--em-ph-badge-tt, uppercase) !important;
	white-space: nowrap;
}
.em-ph .em-ph-badge--solid {
	background: var(--em-ph-badge-bg, #1c4a1d) !important;
	color: var(--em-ph-badge-color, #ffffff) !important;
	border: 1px solid var(--em-ph-badge-bd, #1c4a1d) !important;
}
.em-ph .em-ph-badge--outline {
	background: transparent !important;
	color: var(--em-ph-badge-outline-color, #1c4a1d) !important;
	border: 1px solid var(--em-ph-badge-bd, #1c4a1d) !important;
}

/* Cat */
.em-ph .em-ph-info-cat {
	font-size: var(--em-ph-cat-fs, 12px) !important;
	font-weight: var(--em-ph-cat-fw, 700) !important;
	font-style: var(--em-ph-cat-fst, normal) !important;
	line-height: var(--em-ph-cat-lh, 1.3) !important;
	letter-spacing: var(--em-ph-cat-ls, 1px) !important;
	text-transform: var(--em-ph-cat-tt, uppercase) !important;
	color: var(--em-ph-cat-color, #1c4a1d) !important;
	/* Reset des marges par défaut des titres (h2/h3…) pour un rendu identique
	   au texte quelle que soit la balise choisie (SEO). */
	margin-top: 0 !important;
	margin-bottom: var(--em-ph-cat-mb, 6px) !important;
	padding: 0 !important;
}

/* Title */
.em-ph .em-ph-info-title,
.em-ph h1.em-ph-info-title,
.em-ph h2.em-ph-info-title,
.em-ph h3.em-ph-info-title,
.em-ph h4.em-ph-info-title,
.em-ph h5.em-ph-info-title,
.em-ph h6.em-ph-info-title {
	font-size: var(--em-ph-title-fs, 44px) !important;
	font-weight: var(--em-ph-title-fw, 800) !important;
	font-style: var(--em-ph-title-fst, normal) !important;
	line-height: var(--em-ph-title-lh, 1.1) !important;
	letter-spacing: var(--em-ph-title-ls, -0.7px) !important;
	text-transform: var(--em-ph-title-tt, none) !important;
	color: var(--em-ph-title-color, #11802f) !important;
	margin: 0 0 var(--em-ph-title-mb, 12px) 0 !important;
}

/* Title suffix — nom de catégorie à côté du titre (v0.33.0) */
.em-ph .em-ph-info-title .em-ph-info-title-suffix {
	display: inline-block;
	margin-left: var(--em-ph-tsuf-gap, 10px) !important;
	/* 0.45em = taille proportionnelle au titre (défaut « 0 = proportionnel ») */
	font-size: var(--em-ph-tsuf-fs, 0.45em) !important;
	font-weight: var(--em-ph-tsuf-fw, 600) !important;
	font-style: var(--em-ph-tsuf-fst, normal) !important;
	letter-spacing: var(--em-ph-tsuf-ls, 0.5px) !important;
	text-transform: var(--em-ph-tsuf-tt, none) !important;
	color: var(--em-ph-tsuf-color, #1c4a1d) !important;
	line-height: 1.2 !important;
	vertical-align: baseline;
}
.em-ph .em-ph-info-title .em-ph-info-title-suffix--break {
	display: block;
	margin-left: 0 !important;
	margin-top: 6px;
}

/* Lead */
.em-ph .em-ph-info-lead,
.em-ph p.em-ph-info-lead {
	font-size: var(--em-ph-lead-fs, 17px) !important;
	font-weight: var(--em-ph-lead-fw, 400) !important;
	font-style: var(--em-ph-lead-fst, normal) !important;
	line-height: var(--em-ph-lead-lh, 1.55) !important;
	letter-spacing: var(--em-ph-lead-ls, 0) !important;
	text-transform: var(--em-ph-lead-tt, none) !important;
	color: var(--em-ph-lead-color, #4a5a4a) !important;
	margin: 0 0 var(--em-ph-lead-mb, 22px) 0 !important;
}
.em-ph .em-ph-info-lead strong {
	font-weight: var(--em-ph-lead-strong-fw, 700) !important;
	color: var(--em-ph-lead-strong-color, inherit) !important;
}

/* =================================================================
 * KPIs
 * ================================================================= */
.em-ph-kpis {
	display: grid;
	grid-template-columns: repeat(var(--em-ph-kpis-cols, 2), minmax(0, 1fr));
	gap: var(--em-ph-kpis-gap, 12px) !important;
	margin: 0 0 var(--em-ph-kpis-mb, 22px) 0 !important;
}

.em-ph-kpi {
	background: var(--em-ph-kpi-bg, #f6f7f5) !important;
	border: var(--em-ph-kpi-bd-w, 0) solid var(--em-ph-kpi-bd, transparent) !important;
	border-radius: var(--em-ph-kpi-radius, 12px) !important;
	padding: var(--em-ph-kpi-py, 12px) var(--em-ph-kpi-px, 14px) !important;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.em-ph .em-ph-kpi-val {
	font-size: var(--em-ph-kpi-val-fs, 22px) !important;
	font-weight: var(--em-ph-kpi-val-fw, 700) !important;
	font-style: var(--em-ph-kpi-val-fst, normal) !important;
	line-height: var(--em-ph-kpi-val-lh, 1.1) !important;
	letter-spacing: var(--em-ph-kpi-val-ls, -0.2px) !important;
	text-transform: var(--em-ph-kpi-val-tt, none) !important;
	color: var(--em-ph-kpi-val-color, #1c4a1d) !important;
	margin-bottom: var(--em-ph-kpi-val-mb, 4px) !important;
}
.em-ph .em-ph-kpi-lbl {
	font-size: var(--em-ph-kpi-lbl-fs, 12px) !important;
	font-weight: var(--em-ph-kpi-lbl-fw, 500) !important;
	font-style: var(--em-ph-kpi-lbl-fst, normal) !important;
	line-height: var(--em-ph-kpi-lbl-lh, 1.3) !important;
	letter-spacing: var(--em-ph-kpi-lbl-ls, 0.3px) !important;
	text-transform: var(--em-ph-kpi-lbl-tt, uppercase) !important;
	color: var(--em-ph-kpi-lbl-color, #627262) !important;
}

/* =================================================================
 * Actions (CTAs)
 * ================================================================= */
.em-ph-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--em-ph-actions-gap, 12px) !important;
	margin: 0 0 var(--em-ph-actions-mb, 0) 0 !important;
}
.em-ph--actions-stack .em-ph-actions {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
}

.em-ph .em-ph-btn,
.em-ph a.em-ph-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none !important;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	flex: 1 1 auto;
	min-width: 160px;
}
.em-ph .em-ph-btn:hover,
.em-ph a.em-ph-btn:hover { transform: translateY(-1px); }

.em-ph-btn-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}
.em-ph-btn-ico svg { display: block; width: 1em; height: 1em; }
.em-ph-btn-ico .em-ph-ico-img {
	width: auto;
	height: 1em;
	max-height: 1.2em;
	object-fit: contain;
}

/* === Fix préemptif icônes SVG CTAs clippées (v0.27.0) ================
 * Les SVGs feather stroke-based débordent du viewBox à cause du stroke-width.
 * Fix : spécificité doublée + overflow:visible sur wrapper + enfant SVG/img.
 * ================================================================= */
.em-ph.em-ph .em-ph-btn-ico {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	line-height: 0 !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: 0 !important;
}
.em-ph.em-ph .em-ph-btn-ico svg,
.em-ph.em-ph .em-ph-btn-ico img {
	max-width: 100% !important;
	max-height: 100% !important;
	display: block !important;
	overflow: visible !important;
}
.em-ph.em-ph .em-ph-btn-ico svg {
	fill: none;
	stroke: currentColor;
}

.em-ph .em-ph-btn-primary,
.em-ph a.em-ph-btn-primary {
	background: var(--em-ph-cta1-bg, #11802f) !important;
	color: var(--em-ph-cta1-color, #ffffff) !important;
	border-color: var(--em-ph-cta1-bd, #11802f) !important;
	border-radius: var(--em-ph-cta1-radius, 8px) !important;
	padding: var(--em-ph-cta1-py, 12px) var(--em-ph-cta1-px, 16px) !important;
	font-size: var(--em-ph-cta1-fs, 14px) !important;
	font-weight: var(--em-ph-cta1-fw, 600) !important;
	font-style: var(--em-ph-cta1-fst, normal) !important;
	line-height: var(--em-ph-cta1-lh, 1.2) !important;
	letter-spacing: var(--em-ph-cta1-ls, 0) !important;
	text-transform: var(--em-ph-cta1-tt, none) !important;
}
.em-ph .em-ph-btn-primary .em-ph-btn-ico { font-size: var(--em-ph-cta1-ico, 16px); }
.em-ph .em-ph-btn-primary:hover,
.em-ph a.em-ph-btn-primary:hover {
	background: var(--em-ph-cta1-hbg, #1c4a1d) !important;
	color: var(--em-ph-cta1-hcolor, #ffffff) !important;
}

.em-ph .em-ph-btn-outline,
.em-ph a.em-ph-btn-outline {
	background: var(--em-ph-cta2-bg, transparent) !important;
	color: var(--em-ph-cta2-color, #11802f) !important;
	border-color: var(--em-ph-cta2-bd, rgba(45, 110, 46, 0.35)) !important;
	border-radius: var(--em-ph-cta2-radius, 8px) !important;
	padding: var(--em-ph-cta2-py, 12px) var(--em-ph-cta2-px, 16px) !important;
	font-size: var(--em-ph-cta2-fs, 14px) !important;
	font-weight: var(--em-ph-cta2-fw, 600) !important;
	font-style: var(--em-ph-cta2-fst, normal) !important;
	line-height: var(--em-ph-cta2-lh, 1.2) !important;
	letter-spacing: var(--em-ph-cta2-ls, 0) !important;
	text-transform: var(--em-ph-cta2-tt, none) !important;
}
.em-ph .em-ph-btn-outline .em-ph-btn-ico { font-size: var(--em-ph-cta2-ico, 16px); }
.em-ph .em-ph-btn-outline:hover,
.em-ph a.em-ph-btn-outline:hover {
	background: var(--em-ph-cta2-hbg, rgba(45, 110, 46, 0.08)) !important;
	color: var(--em-ph-cta2-hcolor, #11802f) !important;
}

/* =================================================================
 * Trust list
 * ================================================================= */
.em-ph-trust,
.em-ph .em-ph-trust,
.entry-content .em-ph .em-ph-trust {
	list-style: none !important;
	padding: var(--em-ph-trust-pt, 22px) 0 0 0 !important;
	margin: var(--em-ph-trust-mt, 22px) 0 0 0 !important;
	border-top: 1px var(--em-ph-trust-bd-style, dashed) var(--em-ph-trust-bd, rgba(0, 0, 0, 0.12));
	display: flex;
	flex-direction: column;
	gap: var(--em-ph-trust-gap, 8px) !important;
}
.em-ph-trust li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--em-ph-trust-fs, 13px) !important;
	font-weight: var(--em-ph-trust-fw, 500) !important;
	font-style: var(--em-ph-trust-fst, normal) !important;
	line-height: var(--em-ph-trust-lh, 1.45) !important;
	letter-spacing: var(--em-ph-trust-ls, 0) !important;
	text-transform: var(--em-ph-trust-tt, none) !important;
	color: var(--em-ph-trust-color, #4a5a4a) !important;
}
.em-ph-trust-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--em-ph-trust-icon-color, #11802f);
	line-height: 0;
	margin-top: 2px;
}
.em-ph-trust-ico svg {
	display: block;
	width: var(--em-ph-trust-icon-size, 16px);
	height: var(--em-ph-trust-icon-size, 16px);
}
.em-ph-trust-ico .em-ph-ico-img {
	width: var(--em-ph-trust-icon-size, 16px);
	height: var(--em-ph-trust-icon-size, 16px);
	object-fit: contain;
}
.em-ph-trust-text { min-width: 0; }

/* === Fix préemptif icônes SVG trust list clippées (v0.27.0) ===========
 * Idem CTAs : SVG feather + stroke-width provoquent un clipping du trait.
 * Fix : spécificité doublée + overflow:visible sur wrapper + enfants.
 * ================================================================= */
.em-ph.em-ph .em-ph-trust-ico {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: var(--em-ph-trust-icon-size, 16px) !important;
	height: var(--em-ph-trust-icon-size, 16px) !important;
	min-width: var(--em-ph-trust-icon-size, 16px) !important;
	min-height: var(--em-ph-trust-icon-size, 16px) !important;
	line-height: 0 !important;
	overflow: visible !important;
	padding: 0 !important;
}
.em-ph.em-ph .em-ph-trust-ico svg,
.em-ph.em-ph .em-ph-trust-ico img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	display: block !important;
	overflow: visible !important;
}
.em-ph.em-ph .em-ph-trust-ico svg {
	fill: none;
	stroke: currentColor;
}

/* =================================================================
 * Listes de mise en avant — Applications / Avantages (v0.33.0)
 * Vars génériques --em-ph-lst-* portées par le style inline de chaque
 * instance (pas de duplication de règles entre list1 et list2).
 * ================================================================= */
.em-ph .em-ph-list {
	margin: var(--em-ph-lst-mt, 0) 0 var(--em-ph-lst-mb, 20px) 0 !important;
}
.em-ph .em-ph-list-title,
.em-ph h2.em-ph-list-title,
.em-ph h3.em-ph-list-title,
.em-ph h4.em-ph-list-title,
.em-ph h5.em-ph-list-title,
.em-ph h6.em-ph-list-title {
	font-size: var(--em-ph-lst-title-fs, 13px) !important;
	font-weight: var(--em-ph-lst-title-fw, 700) !important;
	font-style: var(--em-ph-lst-title-fst, normal) !important;
	line-height: var(--em-ph-lst-title-lh, 1.3) !important;
	letter-spacing: var(--em-ph-lst-title-ls, 1px) !important;
	text-transform: var(--em-ph-lst-title-tt, uppercase) !important;
	color: var(--em-ph-lst-title-color, #1c4a1d) !important;
	margin: 0 0 var(--em-ph-lst-title-mb, 10px) 0 !important;
	padding: 0 !important;
}
.em-ph .em-ph-list-items {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.em-ph .em-ph-list-item {
	font-size: var(--em-ph-lst-fs, 13px) !important;
	font-weight: var(--em-ph-lst-fw, 600) !important;
	font-style: var(--em-ph-lst-fst, normal) !important;
	line-height: var(--em-ph-lst-lh, 1.4) !important;
	letter-spacing: var(--em-ph-lst-ls, 0.4px) !important;
	text-transform: var(--em-ph-lst-tt, none) !important;
	color: var(--em-ph-lst-color, #1c4a1d) !important;
	margin: 0 !important;
}
.em-ph .em-ph-list-text { min-width: 0; }

/* Style chips (pastilles) */
.em-ph .em-ph-list--chips .em-ph-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--em-ph-lst-gap, 8px) !important;
}
.em-ph .em-ph-list--chips .em-ph-list-item {
	display: inline-flex;
	align-items: center;
	background: var(--em-ph-lst-chip-bg, #f0f4ef) !important;
	border: 1px solid var(--em-ph-lst-chip-bd, rgba(28, 74, 29, 0.15)) !important;
	border-radius: var(--em-ph-lst-chip-radius, 999px) !important;
	padding: var(--em-ph-lst-chip-py, 6px) var(--em-ph-lst-chip-px, 12px) !important;
}

/* Styles checks (checklist) et bullets (puces) : grille */
.em-ph .em-ph-list--checks .em-ph-list-items,
.em-ph .em-ph-list--bullets .em-ph-list-items {
	display: grid;
	grid-template-columns: repeat(var(--em-ph-lst-cols, 1), minmax(0, 1fr));
	gap: var(--em-ph-lst-gap, 8px) !important;
}
.em-ph .em-ph-list--checks .em-ph-list-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
/* v0.70.0 — Lecture des checklists en COLONNES (desktop/tablette) : la 1re
   colonne se remplit de haut en bas puis la 2e (7 items → 4 + 3), au lieu du
   remplissage en lignes. --em-ph-lst-rows est émis par le PHP (⌈items/cols⌉ ;
   listes à 1 colonne : rows = n, rendu inchangé). Validé par Francisco sur
   TrafiDal 50 (v0.69.1) puis généralisé. Téléphone (≤ 600 px) : inchangé. */
.em-ph .em-ph-list--checks .em-ph-list-items,
.em-ph .em-ph-list--bullets .em-ph-list-items {
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--em-ph-lst-rows, 1), auto);
}
@media (max-width: 600px) {
	.em-ph .em-ph-list--checks .em-ph-list-items,
	.em-ph .em-ph-list--bullets .em-ph-list-items {
		grid-auto-flow: row;
		grid-template-rows: none;
	}
}
.em-ph.em-ph .em-ph-list-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--em-ph-lst-ico-color, #11802f);
	line-height: 0 !important;
	margin-top: 2px;
	width: var(--em-ph-lst-ico-size, 16px) !important;
	height: var(--em-ph-lst-ico-size, 16px) !important;
	min-width: var(--em-ph-lst-ico-size, 16px) !important;
	overflow: visible !important;
	padding: 0 !important;
}
.em-ph.em-ph .em-ph-list-ico svg,
.em-ph.em-ph .em-ph-list-ico img {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	overflow: visible !important;
}
.em-ph.em-ph .em-ph-list-ico svg {
	fill: none;
	stroke: currentColor;
}
.em-ph .em-ph-list--bullets .em-ph-list-item {
	position: relative;
	padding-left: 18px !important;
}
.em-ph .em-ph-list--bullets .em-ph-list-item::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--em-ph-lst-ico-color, #11802f);
}

/* =================================================================
 * Responsive
 * ================================================================= */
@media (max-width: 1024px) {
	.em-ph-inner {
		grid-template-columns: 1fr !important;
		grid-template-areas: "gallery" "info" !important;
		gap: 32px !important;
	}
	.em-ph--gallery-right .em-ph-inner {
		grid-template-columns: 1fr !important;
		grid-template-areas: "gallery" "info" !important;
	}
	.em-ph--stack-info-first .em-ph-inner {
		grid-template-areas: "info" "gallery" !important;
	}
	.em-ph--bmw .em-ph-inner {
		max-width: var(--em-ph-bmw-t, var(--em-ph-bmw, none)) !important;
	}
	.em-ph .em-ph-info-title,
	.em-ph h1.em-ph-info-title,
	.em-ph h2.em-ph-info-title,
	.em-ph h3.em-ph-info-title,
	.em-ph h4.em-ph-info-title,
	.em-ph h5.em-ph-info-title,
	.em-ph h6.em-ph-info-title {
		font-size: var(--em-ph-title-fs-t, 36px) !important;
	}
	.em-ph .em-ph-info-title .em-ph-info-title-suffix {
		font-size: var(--em-ph-tsuf-fs-t, var(--em-ph-tsuf-fs, 0.45em)) !important;
	}
	.em-ph .em-ph-info-lead,
	.em-ph p.em-ph-info-lead {
		font-size: var(--em-ph-lead-fs-t, var(--em-ph-lead-fs, 17px)) !important;
	}
	/* Side thumbs → below on tablet */
	.em-ph--thumbs-left .em-ph-gallery,
	.em-ph--thumbs-right .em-ph-gallery {
		flex-direction: column;
	}
	.em-ph--thumbs-left .em-ph-gallery-thumbs,
	.em-ph--thumbs-right .em-ph-gallery-thumbs {
		grid-template-columns: repeat(var(--em-ph-thumbs-cols, 4), minmax(0, 1fr));
		grid-auto-rows: auto;
		width: 100%;
	}
}

@media (max-width: 600px) {
	.em-ph .em-ph-info-title,
	.em-ph h1.em-ph-info-title,
	.em-ph h2.em-ph-info-title,
	.em-ph h3.em-ph-info-title,
	.em-ph h4.em-ph-info-title,
	.em-ph h5.em-ph-info-title,
	.em-ph h6.em-ph-info-title {
		font-size: var(--em-ph-title-fs-m, 28px) !important;
	}
	.em-ph .em-ph-info-lead,
	.em-ph p.em-ph-info-lead {
		font-size: var(--em-ph-lead-fs-m, 15px) !important;
	}
	.em-ph .em-ph-info-title .em-ph-info-title-suffix {
		font-size: var(--em-ph-tsuf-fs-m, var(--em-ph-tsuf-fs-t, var(--em-ph-tsuf-fs, 0.45em))) !important;
	}
	.em-ph .em-ph-list--checks .em-ph-list-items,
	.em-ph .em-ph-list--bullets .em-ph-list-items {
		grid-template-columns: repeat(var(--em-ph-lst-cols-m, 1), minmax(0, 1fr));
	}
	.em-ph--bmw .em-ph-inner {
		max-width: var(--em-ph-bmw-m, var(--em-ph-bmw-t, var(--em-ph-bmw, none))) !important;
	}
	.em-ph-kpis {
		grid-template-columns: 1fr 1fr;
	}
	.em-ph-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.em-ph .em-ph-btn { min-width: 0; }
}

/* =================================================================
 * Ordre de pile personnalisé tablette / mobile (v0.36.0)
 *
 * Le hero est déjà en 1 colonne ≤1024px : display:contents aplatit
 * galerie + zone sous-galerie + colonne info en un seul flux flex, et
 * chaque unité (wrapper .em-ph-el émis par le PHP, photos de la galerie)
 * reçoit son rang via order. Le DOM émis (donc le SEO) reste l'ordre
 * desktop. Sans ordre personnalisé (pas de classe em-ph--ord-*), rien
 * ne change. Mobile non personnalisé = hérite de la tablette (600 ⊂ 1024).
 * ================================================================= */
@media (max-width: 1024px) {
	.em-ph--ord-t .em-ph-inner {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important; /* l'espacement vient des marges propres des éléments */
		align-items: stretch !important; /* sans quoi start/center (grid) rétrécit les items en fit-content */
	}
	.em-ph--ord-t .em-ph-gallery,
	.em-ph--ord-t .em-ph-gallery-extra,
	.em-ph--ord-t .em-ph-info {
		display: contents !important;
	}
	.em-ph--ord-t .em-ph-el {
		order: var(--em-ph-ot, 0);
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}
	/* Planchers d'espacement : actions n'a pas de marge basse par défaut et
	   trust n'en a aucune — dans l'ordre historique c'est l'élément suivant
	   qui espaçait ; en pile libre n'importe quoi peut les suivre. */
	.em-ph--ord-t .em-ph-el > .em-ph-actions {
		margin-bottom: max(var(--em-ph-actions-mb, 0px), 18px) !important;
	}
	.em-ph--ord-t .em-ph-el > .em-ph-trust {
		/* mt neutralisée : les wrappers flex ne fusionnent plus les marges
		   (22+22 = 44px sinon) — l'écart vient du mb de l'élément précédent */
		margin-top: 0 !important;
		margin-bottom: 18px !important;
	}
	.em-ph--ord-t .em-ph-gallery-main,
	.em-ph--ord-t .em-ph-gallery-thumbs {
		order: var(--em-ph-ot-gallery, 0);
		width: 100%;
		box-sizing: border-box;
	}
	.em-ph--ord-t .em-ph-gallery-main {
		margin-bottom: var(--em-ph-stack-pgap, 24px);
	}
	.em-ph--ord-t .em-ph-gallery-main:has(+ .em-ph-gallery-thumbs) {
		margin-bottom: var(--em-ph-thumb-gap, 10px); /* les vignettes suivent toujours la photo */
	}
	.em-ph--ord-t .em-ph-gallery-thumbs {
		margin-bottom: var(--em-ph-stack-pgap, 24px);
	}
}

@media (max-width: 600px) {
	.em-ph--ord-m .em-ph-inner {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		align-items: stretch !important;
	}
	.em-ph--ord-m .em-ph-gallery,
	.em-ph--ord-m .em-ph-gallery-extra,
	.em-ph--ord-m .em-ph-info {
		display: contents !important;
	}
	.em-ph--ord-m .em-ph-el {
		order: var(--em-ph-om, var(--em-ph-ot, 0));
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.em-ph--ord-m .em-ph-el > .em-ph-actions {
		margin-bottom: max(var(--em-ph-actions-mb, 0px), 18px) !important;
	}
	.em-ph--ord-m .em-ph-el > .em-ph-trust {
		margin-top: 0 !important;
		margin-bottom: 18px !important;
	}
	.em-ph--ord-m .em-ph-gallery-main,
	.em-ph--ord-m .em-ph-gallery-thumbs {
		order: var(--em-ph-om-gallery, var(--em-ph-ot-gallery, 0));
		width: 100%;
		box-sizing: border-box;
	}
	.em-ph--ord-m .em-ph-gallery-main {
		margin-bottom: var(--em-ph-stack-pgap, 24px);
	}
	.em-ph--ord-m .em-ph-gallery-main:has(+ .em-ph-gallery-thumbs) {
		margin-bottom: var(--em-ph-thumb-gap, 10px);
	}
	.em-ph--ord-m .em-ph-gallery-thumbs {
		margin-bottom: var(--em-ph-stack-pgap, 24px);
	}
}

/* =================================================================
 * Conditionnement — panier demande de prix (sous les KPIs)
 * ================================================================= */
.em-ph-pack {
	background: var(--em-ph-pack-bg, #f6f7f5);
	border: 1px solid var(--em-ph-pack-bd, #dfe7df);
	border-radius: var(--em-ph-pack-radius, 14px);
	padding: 16px 18px;
	margin-top: var(--em-ph-pack-mt, 18px);
	margin-bottom: var(--em-ph-pack-mb, 22px);
}
.em-ph-pack-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #1c4a1d;
	margin-bottom: 10px;
}
.em-ph-pack-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
.em-ph-pack-field { display: block; }
.em-ph-pack-field > span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #4a5a4a;
	margin-bottom: 4px;
}
.em-ph-pack-field select,
.em-ph-pack-field input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d7ded7;
	border-radius: 10px;
	background: #fff;
	color: #2d3a2d;
	font-size: 14px;
	padding: 10px 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.em-ph-pack-field select:focus,
.em-ph-pack-field input:focus {
	outline: none;
	border-color: #11802f;
	box-shadow: 0 0 0 3px rgba(17,128,47, 0.12);
}
/* Indicateur (chevron) : uniquement quand la liste offre plusieurs choix */
.em-ph-pack-field select.has-choices {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23159a39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	padding-right: 34px;
	cursor: pointer;
}
/* Quantité + unité côte à côte dès que la place le permet */
@media (min-width: 480px) {
	.em-ph-pack-fields {
		grid-template-columns: 1fr 1fr;
	}
	.em-ph-pack-field--cond { grid-column: 1 / -1; }
}
.em-ph-pack-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.em-ph-pack .em-ph-pack-add { cursor: pointer; }
.em-ph-pack--added .em-ph-pack-add {
	background: #0b6022;
	border-color: #0b6022;
}
.em-ph-pack-view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 2px solid #11802f;
	border-radius: var(--em-ph-cta1-radius, 8px);
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 700;
	color: #0b6022;
	background: #fff;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.em-ph-pack-view[hidden] { display: none; }
.em-ph-pack-view:hover,
.em-ph-pack-view:focus {
	background: #11802f;
	color: #fff;
	text-decoration: none;
}
/* Lignes actuellement dans la demande + retrait par ligne. */
.em-ph-pack-lines { margin-top: 12px; }
.em-ph-pack-lines-intro { font-size: 12px; font-weight: 700; color: #4a544a; margin-bottom: 6px; }
.em-ph-pack-lines-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.em-ph-pack-line {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #2d3a2d;
	background: #f6f7f5;
	border: 1px solid #e4e8e2;
	border-radius: 8px;
	padding: 6px 10px;
}
.em-ph-pack-line-txt { flex: 1; font-weight: 600; }
/* « Retirer » par ligne : petit lien discret, aucun effet au survol. */
.em-ph-pack-remove {
	flex: 0 0 auto;
	padding: 0;
	background: none;
	border: none;
	width: auto;
	color: #8a8f8a;
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}
/* Aucun effet au survol : repos = hover = focus = active (scopé .em-ph + !important pour battre le button:hover du thème). */
.em-ph .em-ph-pack-remove,
.em-ph .em-ph-pack-remove:hover,
.em-ph .em-ph-pack-remove:focus,
.em-ph .em-ph-pack-remove:active {
	color: #8a8f8a !important;
	background: none !important;
	text-decoration: underline !important;
	transform: none !important;
	box-shadow: none !important;
}
.em-ph-pack-msg {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	padding: 8px 12px;
}
.em-ph-pack-msg.is-ok { background: rgba(17,128,47, 0.1); color: #0b6022; }
.em-ph-pack-msg.is-error { background: rgba(192, 57, 43, 0.08); color: #c0392b; }
.em-ph-pack-msg.is-removed { background: rgba(138, 143, 138, 0.14); color: #4a544a; }
.em-ph-pack-note {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: #627262;
}

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

/* --------------------------------------------------------------------------
 * Plan de titres (réglage « seoHeadings » du bloc)
 * La ligne de catégorie est émise en tête du CODE afin de pouvoir porter le h1
 * sans qu'un autre titre ne la précède. L'ordre AFFICHÉ est rétabli ici par la
 * propriété order, à toutes les largeurs. Les ordres d'empilement déjà réglés
 * pour la tablette et le mobile gardent la priorité (--em-ph-ot / --em-ph-om).
 * -------------------------------------------------------------------------- */
.em-ph--seo .em-ph-info {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}
.em-ph--seo .em-ph-info > .em-ph-el {
	order: var(--em-ph-od, 0);
	min-width: 0;
}
@media (max-width: 1024px) {
	.em-ph--seo .em-ph-info > .em-ph-el {
		order: var(--em-ph-ot, var(--em-ph-od, 0));
	}
}
@media (max-width: 600px) {
	.em-ph--seo .em-ph-info > .em-ph-el {
		order: var(--em-ph-om, var(--em-ph-ot, var(--em-ph-od, 0)));
	}
}

/* =====================================================================
 * Modale « ajouté à votre demande de prix » (EM_Devis_Modal)
 * Décor global, rendue par le hero près du panneau Conditionnement.
 * ===================================================================== */
body.em-dm-open { overflow: hidden; }

.em-dm {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.em-dm[hidden] { display: none; }

.em-dm-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 18, .55);
}

.em-dm-box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	padding: 28px 28px 24px;
	animation: em-dm-in .18s ease;
}
@keyframes em-dm-in {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .em-dm-box { animation: none; } }

.em-dm-x {
	position: absolute;
	top: 10px;
	right: 12px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	color: #8a8f8a;
	padding: 4px 8px;
	border-radius: 8px;
}
.em-dm-x:hover { color: #1a1a1a; background: #f2f4f2; }

.em-dm-msg { text-align: center; }
.em-dm-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #e6f6ea;
	color: #11802f;
	margin-bottom: 10px;
}
.em-dm-title { margin: 4px 0 6px; font-size: 20px; line-height: 1.25; color: #14331d; }
/* v0.84.0 — titre devenu div (hors plan des titres) : on garde l'apparence qu'il avait en h2
   (graisse du thème + marges .single-content h2 : 1.5em 0 .5em). */
div.em-dm-title { font-weight: 700; margin: 1.5em 0 .5em; }
div.em-dm-suggest-h { line-height: 1.5; margin-bottom: .5em; } /* idem, ex-h3 (1er enfant : pas de marge haute) */
.em-dm-text { margin: 0 0 4px; color: #4a544a; font-size: 15px; }

.em-dm-suggest { margin-top: 20px; }
.em-dm-suggest-h { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #14331d; text-align: center; }
.em-dm-suggest-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
@media (max-width: 520px) {
	.em-dm-suggest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.em-dm-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid #e7e9ea;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.em-dm-card:hover { border-color: #11802f; box-shadow: 0 6px 18px rgba(0, 0, 0, .10); transform: translateY(-2px); }
.em-dm-card-media { aspect-ratio: 3 / 2; background: #f4f6f4; overflow: hidden; }
.em-dm-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-dm-card-title { padding: 8px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #1a1a1a; }

.em-dm-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 22px;
}
.em-dm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background .15s, border-color .15s, color .15s;
}
.em-dm-btn--primary { background: #11802f; color: #fff; }
.em-dm-btn--primary:hover,
.em-dm-btn--primary:focus { background: #12812f; color: #fff; }
.em-dm-btn--ghost { background: #fff; color: #14331d; border-color: #cdd6cd; }
.em-dm-btn--ghost:hover,
.em-dm-btn--ghost:focus { background: #f2f5f2; border-color: #11802f; color: #14331d; }
/* Le thème force a:hover en vert : garder la couleur du texte des boutons. */
.em-dm-btn:hover,
.em-dm-btn:focus { text-decoration: none; }

/* =====================================================================
 * Produits complémentaires (bande pleine largeur en bas du hero)
 * ===================================================================== */
.em-ph-complements {
	margin-top: 18px;
}
.em-ph-cx-heading {
	margin: 0 0 12px;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	line-height: 1.2;
	color: #14331d;
}
/* v0.84.0 — en mode seoHeadings le titre est une div (il précède le h1 dans le code) : même
   apparence qu'en h2 (graisse du thème, marge basse .single-content h2 = .5em, 1er enfant sans marge haute). */
div.em-ph-cx-heading {
	font-weight: 700;
	margin-bottom: .5em;
}
.em-ph-cx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 12px;
}

.em-ph-cx-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none !important;
	color: inherit;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 10px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.em-ph-cx-card:hover { border-color: #11802f; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.em-ph-cx-media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 110px;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
}
.em-ph-cx-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.em-ph-cx-body { display: flex; flex-direction: column; gap: 3px; }
.em-ph-cx-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: #1a1a1a; }
.em-ph-cx-card:hover .em-ph-cx-name { color: #11802f; }
.em-ph-cx-sentence { font-size: 12px; line-height: 1.35; color: #5a615a; }