/**
 * Extra MatGeco — Product Tabs Nav
 * Barre sticky de navigation par ancres (scroll-spy inclus).
 * Styles scopés .em-ptn-* 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 a.
 */

/* =================================================================
 * Section wrapper
 * ================================================================= */
.em-ptn {
	background: var(--em-ptn-section-bg, #ffffff);
	color: var(--em-ptn-section-text, inherit);
	padding-top: var(--em-ptn-outer-pt, 12px);
	padding-bottom: var(--em-ptn-outer-pb, 12px);
	position: relative;
	transition: box-shadow .25s ease, background .25s ease;
}

/* Sticky positioning */
.em-ptn--sticky {
	position: sticky;
	top: var(--em-ptn-sticky-offset, 0);
	z-index: var(--em-ptn-sticky-z, 100);
}

/* Shadow au pin — appliquée quand la barre est effectivement collée */
.em-ptn--sticky.em-ptn--shadow.is-stuck {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Fond alternatif quand collée (fallback sur sectionBg) */
/* v0.30.1 : breakout du container boxed — force le bloc à 100vw pour couvrir toute la largeur écran (utile quand Kadence est en layout boxed) */
.em-ptn--breakout {
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	width: 100vw !important;
	max-width: 100vw !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.em-ptn--breakout .em-ptn-outer {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: clamp(16px, 3vw, 32px);
	padding-right: clamp(16px, 3vw, 32px);
}

.em-ptn--sticky.is-stuck {
	background: var(--em-ptn-sticky-bg, var(--em-ptn-section-bg, #ffffff));
}

/* Bordures section */
.em-ptn--bd-t { border-top:    var(--em-ptn-bd-w, 1px) solid var(--em-ptn-bd-color, rgba(0,0,0,0.08)); }
.em-ptn--bd-b { border-bottom: var(--em-ptn-bd-w, 1px) solid var(--em-ptn-bd-color, rgba(0,0,0,0.08)); }

/* Sentinel pour l'IntersectionObserver du "sticky pin" */
.em-ptn-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
}

/* Outer container */
.em-ptn-outer {
	margin: 0 auto;
	padding-left: clamp(16px, 3vw, 32px);
	padding-right: clamp(16px, 3vw, 32px);
	box-sizing: border-box;
}

.em-ptn--bmw .em-ptn-outer {
	max-width: var(--em-ptn-bmw, none) !important;
}

/* Empty state */
.em-ptn-empty {
	text-align: center;
	color: #757575;
	font-size: 13px;
	padding: 12px 0;
}

/* =================================================================
 * Nav
 * ================================================================= */
.em-ptn-nav {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--em-ptn-gap, 24px) !important;
	align-items: center !important;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

/* Alignements */
.em-ptn--align-start   .em-ptn-nav { justify-content: flex-start;    }
.em-ptn--align-center  .em-ptn-nav { justify-content: center;        }
.em-ptn--align-end     .em-ptn-nav { justify-content: flex-end;      }
.em-ptn--align-between .em-ptn-nav { justify-content: space-between; flex-wrap: nowrap; }

/* =================================================================
 * Item
 * NB : sélecteurs doublés `.em-ptn.em-ptn` pour forcer une spécificité
 * (0,3,1) qui bat les règles éditeur Gutenberg / Kadence (0,2,1 typique).
 * ================================================================= */
.em-ptn.em-ptn nav.em-ptn-nav {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--em-ptn-gap, 24px) !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.em-ptn.em-ptn a.em-ptn-item,
.em-ptn.em-ptn .em-ptn-item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--em-ptn-ico-gap, 8px) !important;
	text-decoration: none !important;
	padding: var(--em-ptn-item-py, 12px) var(--em-ptn-item-px, 14px) !important;
	box-shadow: none !important;
}
.em-ptn.em-ptn .em-ptn-item-ico {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--em-ptn-ico-size, 16px) !important;
	height: var(--em-ptn-ico-size, 16px) !important;
	min-width: var(--em-ptn-ico-size, 16px) !important;
	min-height: var(--em-ptn-ico-size, 16px) !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}
.em-ptn.em-ptn .em-ptn-item-ico svg,
.em-ptn.em-ptn .em-ptn-item-ico img {
	overflow: visible !important;
	max-width: 100% !important;
	max-height: 100% !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}

.em-ptn .em-ptn-item,
.em-ptn a.em-ptn-item {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--em-ptn-ico-gap, 8px) !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none !important;
	padding: var(--em-ptn-item-py, 12px) var(--em-ptn-item-px, 14px) !important;
	background: var(--em-ptn-item-bg, transparent) !important;
	color: var(--em-ptn-item-color, #4a5a4a) !important;
	border: 1px solid var(--em-ptn-item-bd, transparent) !important;
	border-radius: var(--em-ptn-item-radius, 0) !important;
	font-size: var(--em-ptn-item-fs, 14px) !important;
	font-weight: var(--em-ptn-item-fw, 600) !important;
	font-style: var(--em-ptn-item-fst, normal) !important;
	line-height: var(--em-ptn-item-lh, 1.2) !important;
	letter-spacing: var(--em-ptn-item-ls, 0.3px) !important;
	text-transform: var(--em-ptn-item-tt, none) !important;
	transition: color .18s ease, background .18s ease, border-color .18s ease;
}

/* Icon (SVG preset / custom or image) — hérite de la couleur du texte item */
.em-ptn .em-ptn-item-ico {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--em-ptn-ico-size, 16px) !important;
	height: var(--em-ptn-ico-size, 16px) !important;
	flex-shrink: 0 !important;
	color: inherit;
	line-height: 1;
	margin: 0 !important;
	padding: 0 !important;
}
.em-ptn .em-ptn-item-ico svg {
	width: 100%;
	height: 100%;
	display: block;
	color: inherit;
	stroke: currentColor;
	fill: none;
}
.em-ptn .em-ptn-item-ico img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.em-ptn.em-ptn .em-ptn-item-label {
	display: inline-flex !important;
	align-items: center !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}

/* Hover */
.em-ptn .em-ptn-item:hover,
.em-ptn .em-ptn-item:focus-visible {
	background: var(--em-ptn-item-hbg, transparent) !important;
	color: var(--em-ptn-item-hcolor, #1c4a1d) !important;
	outline: none;
}

/* Active — état de base pour tous les layouts */
.em-ptn .em-ptn-item.is-active {
	background: var(--em-ptn-item-abg, transparent) !important;
	color: var(--em-ptn-item-acolor, #2d6e2e) !important;
}

/* =================================================================
 * Layout style : underline (défaut)
 * ================================================================= */
.em-ptn--layout-underline .em-ptn-item {
	border-radius: 0 !important;
}
.em-ptn--layout-underline .em-ptn-item::after {
	content: "";
	position: absolute;
	left: var(--em-ptn-item-px, 14px);
	right: var(--em-ptn-item-px, 14px);
	bottom: 0;
	height: var(--em-ptn-ind-h, 3px);
	background: transparent;
	border-radius: var(--em-ptn-ind-radius, 999px);
	transition: background .18s ease;
	pointer-events: none;
}
.em-ptn--layout-underline .em-ptn-item.is-active::after {
	background: var(--em-ptn-ind-color, #2d6e2e);
}

/* =================================================================
 * Layout style : pills
 * ================================================================= */
.em-ptn--layout-pills .em-ptn-item {
	border-radius: var(--em-ptn-item-radius, 999px) !important;
}
.em-ptn--layout-pills .em-ptn-item.is-active {
	background: var(--em-ptn-ind-color, #2d6e2e) !important;
	color: #ffffff !important;
}
.em-ptn--layout-pills .em-ptn-item.is-active:hover {
	background: var(--em-ptn-ind-color, #2d6e2e) !important;
	color: #ffffff !important;
}

/* =================================================================
 * Layout style : plain (color only, no indicator)
 * ================================================================= */
.em-ptn--layout-plain .em-ptn-item::after { display: none; }
.em-ptn--layout-plain .em-ptn-item.is-active {
	color: var(--em-ptn-item-acolor, #2d6e2e) !important;
}

/* =================================================================
 * Mobile — scroll horizontal
 * ================================================================= */
.em-ptn--mobile-scroll .em-ptn-nav {
	scrollbar-width: thin;
}

/* =================================================================
 * Focus visible (accessibilité)
 * ================================================================= */
.em-ptn .em-ptn-item:focus-visible {
	outline: 2px solid var(--em-ptn-ind-color, #2d6e2e);
	outline-offset: 2px;
}

/* =================================================================
 * Responsive
 * ================================================================= */
@media (max-width: 1024px) {
	.em-ptn--bmw .em-ptn-outer {
		max-width: var(--em-ptn-bmw-t, var(--em-ptn-bmw, none)) !important;
	}
}

@media (max-width: 600px) {
	.em-ptn--bmw .em-ptn-outer {
		max-width: var(--em-ptn-bmw-m, var(--em-ptn-bmw-t, var(--em-ptn-bmw, none))) !important;
	}

	.em-ptn .em-ptn-item {
		font-size: var(--em-ptn-item-fs-m, 13px) !important;
	}

	/* v0.30.1 : sticky offset mobile séparé — évite l'espace fantôme quand le header desktop est caché */
	.em-ptn--sticky {
		top: var(--em-ptn-sticky-offset-m, 0) !important;
	}

	/* v0.30.1 : styles mobile compacts */
	/* compact-scroll : scroll horizontal + items resserrés (défaut) */
	.em-ptn--m-compact-scroll .em-ptn-nav {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start !important;
		padding-bottom: 4px;
		gap: 4px !important;
	}
	.em-ptn--m-compact-scroll .em-ptn-item {
		flex: 0 0 auto !important;
		padding: 8px 10px !important;
		font-size: 12px !important;
	}
	.em-ptn--m-compact-scroll .em-ptn-item-ico {
		width: 14px !important; height: 14px !important;
		min-width: 14px !important; min-height: 14px !important;
	}

	/* icons-only : cache les labels, garde les icônes uniquement
	 * NB : spécificité triplée .em-ptn.em-ptn.em-ptn--m-icons-only pour battre la règle
	 * générale .em-ptn.em-ptn .em-ptn-item-label { display: inline-flex !important } */
	.em-ptn.em-ptn.em-ptn--m-icons-only .em-ptn-item-label {
		display: none !important;
	}
	.em-ptn.em-ptn.em-ptn--m-icons-only .em-ptn-item {
		padding: 8px !important;
	}
	.em-ptn.em-ptn.em-ptn--m-icons-only .em-ptn-nav {
		justify-content: space-around !important;
		gap: 4px !important;
	}

	/* labels-only : cache les icônes, garde les labels */
	.em-ptn.em-ptn.em-ptn--m-labels-only .em-ptn-item-ico {
		display: none !important;
	}
	.em-ptn.em-ptn.em-ptn--m-labels-only .em-ptn-item {
		padding: 8px 10px !important;
		font-size: 12px !important;
	}

	/* full (aucune restriction) : gardé pour rétrocompat + scroll horizontal si besoin */
	.em-ptn--m-full .em-ptn-nav {
		flex-wrap: wrap !important;
	}


	/* Rétrocompat : ancien mobileScroll toujours supporté */
	.em-ptn--mobile-scroll .em-ptn-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start;
		padding-bottom: 4px;
	}
	.em-ptn--mobile-scroll .em-ptn-nav .em-ptn-item {
		flex: 0 0 auto;
	}

	/* Hide the whole nav on mobile if user chose so */
	.em-ptn--hide-mobile {
		display: none !important;
	}
}