/**
 * Extra MatGeco — Product List
 * Styles scopés .em-pl-* 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-pl {
	background: var(--em-pl-section-bg, transparent);
	color: var(--em-pl-section-text, inherit);
	padding-top: var(--em-pl-outer-pt, 40px);
	padding-bottom: var(--em-pl-outer-pb, 40px);
	position: relative;
}

.em-pl-outer {
	max-width: var(--em-pl-outer-max, 1280px);
	margin: 0 auto;
	padding-left: clamp(16px, 3vw, 32px);
	padding-right: clamp(16px, 3vw, 32px);
	box-sizing: border-box;
}

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

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

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

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

/* =================================================================
 * Barre de filtres
 * ================================================================= */
.em-pl .em-pl-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
}
.em-pl .em-pl-filter-btn {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background: #ffffff;
	border: 1px solid var(--em-pl-cta1-bg, #2d6e2e);
	color: var(--em-pl-cta1-bg, #2d6e2e);
	border-radius: 999px;
	padding: 9px 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.em-pl .em-pl-filter-btn:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
	transform: translateY(-1px);
}
.em-pl .em-pl-filter-btn.is-active {
	background: var(--em-pl-cta1-bg, #2d6e2e);
	color: var(--em-pl-cta1-color, #ffffff);
}
.em-pl-card.em-pl-card--filtered {
	display: none !important;
}

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

/* =================================================================
 * Card
 * ================================================================= */
.em-pl-card {
	background: var(--em-pl-card-bg, #ffffff) !important;
	border-radius: var(--em-pl-card-radius, 20px) !important;
	border: var(--em-pl-card-bd-w, 0) solid var(--em-pl-card-bd-color, transparent) !important;
	box-shadow: var(--em-pl-card-shadow, none) !important;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease;
	position: relative;
}
.em-pl-card--hidden { display: none !important; }

/* Hover variants */
.em-pl--hover-lift  .em-pl-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important; }
.em-pl--hover-scale .em-pl-card:hover { transform: scale(1.02); }
.em-pl--hover-glow  .em-pl-card:hover { box-shadow: 0 0 0 2px var(--em-pl-tag-color, #2d6e2e) !important; }
.em-pl--hover-none  .em-pl-card:hover { transform: none; }

/* --- Image --- */
.em-pl-card-img {
	position: relative;
	aspect-ratio: var(--em-pl-img-aspect, 4 / 3);
	height: var(--em-pl-img-height, auto);
	width: var(--em-pl-img-width, 100%);
	/* Blanc : les photos produits détourées sur fond blanc se fondent dans la
	 * carte (visible uniquement en mode « contain » — en « cover » l'image remplit tout). */
	background: var(--em-pl-img-bg, #ffffff);
	overflow: hidden;
	border-radius: var(--em-pl-img-radius, 0);
}
.em-pl--img-align-left   .em-pl-card-img { align-self: flex-start; margin-inline: 0; }
.em-pl--img-align-center .em-pl-card-img { align-self: center;     margin-inline: auto; }
.em-pl--img-align-right  .em-pl-card-img { align-self: flex-end;   margin-inline: 0; }
/* Image cliquable vers la fiche produit : le lien doit occuper toute la zone
   pour que l'image garde son cadrage et son rapport d'image. */
.em-pl-card-img-lien {
	display: block;
	width: 100%;
	height: 100%;
}
.em-pl-card-img-lien img {
	transition: transform 0.25s ease;
}
.em-pl-card-img-lien:hover img,
.em-pl-card-img-lien:focus-visible img {
	transform: scale(1.03);
}
.em-pl-card-img-lien:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
	.em-pl-card-img-lien img { transition: none; }
	.em-pl-card-img-lien:hover img { transform: none; }
}

.em-pl-card-img img {
	width: 100%;
	height: 100%;
	object-fit: var(--em-pl-img-fit, cover);
	object-position: center;
	display: block;
}

/* --- Card badge (position absolue sur l'image) --- */
.em-pl .em-pl-card-badge {
	position: absolute;
	top: var(--em-pl-badge-top, 12px);
	right: var(--em-pl-badge-right, 12px);
	background: var(--em-pl-badge-bg, #2d6e2e) !important;
	color: var(--em-pl-badge-color, #ffffff) !important;
	border-radius: var(--em-pl-badge-radius, 999px) !important;
	padding: var(--em-pl-badge-py, 6px) var(--em-pl-badge-px, 12px) !important;
	font-size: var(--em-pl-badge-fs, 11px) !important;
	font-weight: var(--em-pl-badge-fw, 600) !important;
	font-style: var(--em-pl-badge-fst, normal) !important;
	line-height: var(--em-pl-badge-lh, 1.2) !important;
	letter-spacing: var(--em-pl-badge-ls, 0.4px) !important;
	text-transform: var(--em-pl-badge-tt, uppercase) !important;
	white-space: nowrap;
	z-index: 2;
	pointer-events: none;
}

/* --- Card body --- */
.em-pl-card-body {
	padding: var(--em-pl-card-pad, 22px);
	display: flex;
	flex-direction: column;
	gap: var(--em-pl-card-body-gap, 12px);
	flex: 1;
}

/* --- Tag (au-dessus du titre) --- */
.em-pl .em-pl-card-tag {
	display: inline-block;
	align-self: flex-start;
	background: var(--em-pl-tag-bg, rgba(45,110,46,0.08)) !important;
	color: var(--em-pl-tag-color, #2d6e2e) !important;
	border-radius: var(--em-pl-tag-radius, 6px) !important;
	padding: var(--em-pl-tag-py, 4px) var(--em-pl-tag-px, 10px) !important;
	font-size: var(--em-pl-cardtag-fs, 12px) !important;
	font-weight: var(--em-pl-cardtag-fw, 600) !important;
	font-style: var(--em-pl-cardtag-fst, normal) !important;
	line-height: var(--em-pl-cardtag-lh, 1.2) !important;
	letter-spacing: var(--em-pl-cardtag-ls, 0.4px) !important;
	text-transform: var(--em-pl-cardtag-tt, uppercase) !important;
	margin-bottom: var(--em-pl-cardtag-mb, 8px) !important;
}

/* --- Card title --- */
.em-pl .em-pl-card-title,
.em-pl h1.em-pl-card-title,
.em-pl h2.em-pl-card-title,
.em-pl h3.em-pl-card-title,
.em-pl h4.em-pl-card-title,
.em-pl h5.em-pl-card-title,
.em-pl h6.em-pl-card-title {
	font-size: var(--em-pl-cardtitle-fs, 22px) !important;
	font-weight: var(--em-pl-cardtitle-fw, 700) !important;
	font-style: var(--em-pl-cardtitle-fst, normal) !important;
	line-height: var(--em-pl-cardtitle-lh, 1.2) !important;
	letter-spacing: var(--em-pl-cardtitle-ls, -0.3px) !important;
	text-transform: var(--em-pl-cardtitle-tt, none) !important;
	color: var(--em-pl-card-title-color, #1c4a1d) !important;
	margin: 0 0 var(--em-pl-cardtitle-mb, 8px) 0 !important;
}

/* --- Card description --- */
.em-pl .em-pl-card-desc,
.em-pl p.em-pl-card-desc {
	font-size: var(--em-pl-carddesc-fs, 14px) !important;
	font-weight: var(--em-pl-carddesc-fw, 400) !important;
	font-style: var(--em-pl-carddesc-fst, normal) !important;
	line-height: var(--em-pl-carddesc-lh, 1.55) !important;
	letter-spacing: var(--em-pl-carddesc-ls, 0) !important;
	text-transform: var(--em-pl-carddesc-tt, none) !important;
	color: var(--em-pl-card-desc-color, #4a5a4a) !important;
	margin: 0 0 var(--em-pl-carddesc-mb, 12px) 0 !important;
}

/* =================================================================
 * Specs
 * ================================================================= */
.em-pl-card-specs {
	background: var(--em-pl-specs-bg, #f6f7f5) !important;
	border: 1px solid var(--em-pl-specs-bd-color, transparent) !important;
	border-radius: var(--em-pl-specs-radius, 12px) !important;
	padding: var(--em-pl-specs-pad, 12px) !important;
	gap: var(--em-pl-specs-gap, 10px);
	display: grid;
	grid-template-columns: repeat(var(--em-pl-specs-cols, 2), minmax(0, 1fr));
}
.em-pl--specs-list .em-pl-card-specs { display: flex; flex-direction: column; }

.em-pl-card-spec {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.em-pl--specs-list .em-pl-card-spec {
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.em-pl .em-pl-card-spec small {
	font-size: var(--em-pl-speclbl-fs, 11px) !important;
	font-weight: var(--em-pl-speclbl-fw, 500) !important;
	font-style: var(--em-pl-speclbl-fst, normal) !important;
	line-height: var(--em-pl-speclbl-lh, 1.3) !important;
	letter-spacing: var(--em-pl-speclbl-ls, 0.3px) !important;
	text-transform: var(--em-pl-speclbl-tt, uppercase) !important;
	color: var(--em-pl-spec-label-color, #627262) !important;
}
.em-pl .em-pl-card-spec strong {
	font-size: var(--em-pl-specval-fs, 14px) !important;
	font-weight: var(--em-pl-specval-fw, 700) !important;
	font-style: var(--em-pl-specval-fst, normal) !important;
	line-height: var(--em-pl-specval-lh, 1.3) !important;
	letter-spacing: var(--em-pl-specval-ls, 0) !important;
	text-transform: var(--em-pl-specval-tt, none) !important;
	color: var(--em-pl-spec-value-color, #1c4a1d) !important;
}

/* =================================================================
 * CTAs (dans une carte)
 * ================================================================= */
.em-pl-card-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
}

.em-pl .em-pl-btn,
.em-pl a.em-pl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
	line-height: 1.2;
}

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

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

/* =================================================================
 * Pagination
 * ================================================================= */
.em-pl-pagination {
	display: flex;
	align-items: center;
	gap: var(--em-pl-pag-gap, 8px);
	margin-top: 32px;
	flex-wrap: wrap;
	justify-content: center;
}
.em-pl--pag-align-start  .em-pl-pagination { justify-content: flex-start;  }
.em-pl--pag-align-end    .em-pl-pagination { justify-content: flex-end;    }
.em-pl--pag-align-center .em-pl-pagination { justify-content: center;      }
.em-pl--pag-align-between .em-pl-pagination { justify-content: space-between; }

.em-pl-pag-numbers {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--em-pl-pag-gap, 8px);
	flex-wrap: wrap;
}

.em-pl .em-pl-pag-btn,
.em-pl a.em-pl-pag-btn,
.em-pl .em-pl-pag-num,
.em-pl a.em-pl-pag-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	background: var(--em-pl-pag-bg, transparent) !important;
	color: var(--em-pl-pag-color, #1c4a1d) !important;
	border: 1px solid var(--em-pl-pag-bd, rgba(0,0,0,0.15)) !important;
	border-radius: var(--em-pl-pag-radius, 8px) !important;
	padding: var(--em-pl-pag-py, 8px) var(--em-pl-pag-px, 12px) !important;
	font-size: var(--em-pl-pag-fs, 14px) !important;
	font-weight: var(--em-pl-pag-fw, 600) !important;
	min-width: 40px;
	line-height: 1.2;
	transition: background .2s ease, color .2s ease;
}
.em-pl .em-pl-pag-active {
	background: var(--em-pl-pag-abg, #2d6e2e) !important;
	color: var(--em-pl-pag-acolor, #ffffff) !important;
	border-color: transparent !important;
}
.em-pl .em-pl-pag-disabled {
	opacity: .4;
	pointer-events: none;
}

.em-pl-loadmore-btn {
	margin: 0 auto;
}

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

/* =================================================================
 * Responsive
 * ================================================================= */
@media (max-width: 1024px) {
	.em-pl-outer { max-width: var(--em-pl-outer-max-t, var(--em-pl-outer-max, 1280px)); }
	.em-pl-card-img { height: var(--em-pl-img-height-t, var(--em-pl-img-height, auto)); width: var(--em-pl-img-width-t, var(--em-pl-img-width, 100%)); }
	.em-pl-grid { grid-template-columns: repeat(var(--em-pl-cols-t, 2), minmax(0, 1fr)); gap: var(--em-pl-gap-t, 20px); }
	.em-pl .em-pl-title,
	.em-pl h1.em-pl-title, .em-pl h2.em-pl-title, .em-pl h3.em-pl-title,
	.em-pl h4.em-pl-title, .em-pl h5.em-pl-title, .em-pl h6.em-pl-title {
		font-size: var(--em-pl-title-fs-t, 30px) !important;
	}
	.em-pl .em-pl-lead, .em-pl p.em-pl-lead { font-size: var(--em-pl-lead-fs-t, 15px) !important; }
	.em-pl .em-pl-card-desc, .em-pl p.em-pl-card-desc { font-size: var(--em-pl-carddesc-fs-t, var(--em-pl-carddesc-fs, 14px)) !important; }
	.em-pl .em-pl-card-title,
	.em-pl h1.em-pl-card-title, .em-pl h2.em-pl-card-title, .em-pl h3.em-pl-card-title,
	.em-pl h4.em-pl-card-title, .em-pl h5.em-pl-card-title, .em-pl h6.em-pl-card-title {
		font-size: var(--em-pl-cardtitle-fs-t, 20px) !important;
	}
}

@media (max-width: 600px) {
	.em-pl-outer { max-width: var(--em-pl-outer-max-m, var(--em-pl-outer-max-t, var(--em-pl-outer-max, 1280px))); }
	.em-pl-card-img { height: var(--em-pl-img-height-m, var(--em-pl-img-height-t, var(--em-pl-img-height, auto))); width: var(--em-pl-img-width-m, var(--em-pl-img-width-t, var(--em-pl-img-width, 100%))); }
	.em-pl-grid { grid-template-columns: repeat(var(--em-pl-cols-m, 1), minmax(0, 1fr)); gap: var(--em-pl-gap-m, 16px); }
	.em-pl .em-pl-title,
	.em-pl h1.em-pl-title, .em-pl h2.em-pl-title, .em-pl h3.em-pl-title,
	.em-pl h4.em-pl-title, .em-pl h5.em-pl-title, .em-pl h6.em-pl-title {
		font-size: var(--em-pl-title-fs-m, 26px) !important;
	}
	.em-pl .em-pl-lead, .em-pl p.em-pl-lead { font-size: var(--em-pl-lead-fs-m, 14px) !important; }
	.em-pl .em-pl-card-title,
	.em-pl h1.em-pl-card-title, .em-pl h2.em-pl-card-title, .em-pl h3.em-pl-card-title,
	.em-pl h4.em-pl-card-title, .em-pl h5.em-pl-card-title, .em-pl h6.em-pl-card-title {
		font-size: var(--em-pl-cardtitle-fs-m, 19px) !important;
	}
	.em-pl .em-pl-card-desc,
	.em-pl p.em-pl-card-desc { font-size: var(--em-pl-carddesc-fs-m, 13px) !important; }
	.em-pl-card-cta { flex-direction: column; align-items: stretch; }
	.em-pl-card-cta .em-pl-btn { width: 100%; }
}

/* =================================================================
 * Editor tweaks — mock badge visibility & repeater feel
 * ================================================================= */
.editor-styles-wrapper .em-pl { max-width: 100%; }

/* Titre de carte cliquable (hérite du lien CTA principal) */
.em-pl .em-pl-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
.em-pl .em-pl-card-title a:hover {
	color: var(--em-pl-cta1-bg, #2d6e2e);
	text-decoration: none;
}

/* =====================================================================
   v0.58.0 — Carte Catalogue (mise en avant d'un PDF de gamme)
   Fond personnalisable (--em-pl-cat-bg), accent boutons (--em-pl-cat-accent),
   couverture façon livre / dépliant incliné / simple, largeur 1 ou 2 colonnes.
   ===================================================================== */
.em-pl .em-pl-card--catalog {
	background: var(--em-pl-cat-bg, #eef7ee) !important;
	border: 1px solid color-mix(in srgb, var(--em-pl-cat-accent, #2d6e2e) 22%, transparent);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* v0.59.0 — espacements reglables (vars emises seulement si reglees) */
	padding: var(--em-pl-cat-pady, 22px) var(--em-pl-cat-padx, 18px);
	gap: 0;
}
.em-pl .em-pl-card--span2 { grid-column: span 2; }
.em-pl-cat-cover {
	width: min(62%, 220px);
	/* v0.58.2 — marge basse généreuse : l'ombre portée des looks « livre » et
	   « dépliant » descend sous l'image, la pastille doit respirer. */
	margin: 4px auto var(--em-pl-cat-covergap, 26px);
	position: relative;
}
.em-pl-cat-cover--tilt { margin-bottom: var(--em-pl-cat-covergap, 34px); }
.em-pl-cat-cover a { display: block; }
.em-pl-cat-cover img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}
/* Look « livre » : tranche + ombre portée décalée */
.em-pl-cat-cover--book img {
	border-radius: 3px 8px 8px 3px;
	box-shadow:
		inset 6px 0 8px -6px rgba(0, 0, 0, 0.35),
		0 10px 22px rgba(0, 0, 0, 0.22),
		0 2px 6px rgba(0, 0, 0, 0.12);
}
/* Look « dépliant » : légère inclinaison, redressé au survol */
.em-pl-cat-cover--tilt img {
	transform: rotate(-3.5deg);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
	transition: transform 0.25s ease;
}
.em-pl-card--catalog:hover .em-pl-cat-cover--tilt img { transform: rotate(0deg) scale(1.02); }
/* Look « simple » : ombre douce */
.em-pl-cat-cover--flat img { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); }

.em-pl-cat-body { display: flex; flex-direction: column; align-items: center; gap: var(--em-pl-cat-itemsgap, 8px); }
.em-pl .em-pl-cat-tag {
	display: inline-block;
	background: var(--em-pl-cat-accent, #2d6e2e);
	color: #ffffff;
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.em-pl .em-pl-cat-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--em-pl-cat-text, var(--em-pl-title-color, #1c4a1d));
}
.em-pl .em-pl-cat-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--em-pl-cat-text, var(--em-pl-desc-color, #4a5a4a));
}
.em-pl-cat-actions { display: flex; gap: var(--em-pl-cat-btngap, 10px); flex-wrap: wrap; justify-content: center; margin-top: var(--em-pl-cat-btntopgap, 10px); }
.em-pl .em-pl-cat-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.em-pl .em-pl-cat-btn--dl {
	background: var(--em-pl-cat-accent, #2d6e2e);
	color: #ffffff;
	border: 1px solid var(--em-pl-cat-accent, #2d6e2e);
}
.em-pl .em-pl-cat-btn--dl:hover { filter: brightness(1.12); color: #ffffff; }
.em-pl .em-pl-cat-btn--view {
	background: transparent;
	color: var(--em-pl-cat-accent, #2d6e2e);
	border: 1px solid var(--em-pl-cat-accent, #2d6e2e);
}
.em-pl .em-pl-cat-btn--view:hover {
	background: var(--em-pl-cat-accent, #2d6e2e);
	color: #ffffff;
}
/* Mobile : une seule colonne → le span 2 redevient naturel */
@media (max-width: 600px) {
	.em-pl .em-pl-card--span2 { grid-column: auto; }
}