/**
 * Extra MatGeco — Install Guide
 * Styles scopés .em-ig-* 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-ig {
	background: var(--em-ig-section-bg, transparent);
	color: var(--em-ig-section-text, inherit);
	padding-top: var(--em-ig-outer-pt, 0) !important;
	padding-bottom: var(--em-ig-outer-pb, 0) !important;
	position: relative;
}

.em-ig-inner {
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

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

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

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

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

.em-ig .em-ig-lead,
.em-ig p.em-ig-lead {
	font-size: var(--em-ig-lead-fs, 16px) !important;
	line-height: 1.55 !important;
	color: var(--em-ig-lead-color, #4a5a4a) !important;
	margin: 0 !important;
	max-width: 780px;
}
.em-ig--head-center .em-ig-lead { margin-left: auto !important; margin-right: auto !important; }

/* =================================================================
 * Numéro (badge)
 * ================================================================= */
.em-ig .em-ig-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width:  var(--em-ig-num-size, 32px);
	height: var(--em-ig-num-size, 32px);
	min-width: var(--em-ig-num-size, 32px);
	background: var(--em-ig-num-bg, #11802f) !important;
	color:      var(--em-ig-num-color, #ffffff) !important;
	font-size:   var(--em-ig-num-fs, 14px) !important;
	font-weight: var(--em-ig-num-fw, 700) !important;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
}
.em-ig--num-circle .em-ig-num { border-radius: 50%; }
.em-ig--num-square .em-ig-num { border-radius: 4px; }
.em-ig--num-plain  .em-ig-num {
	background: transparent !important;
	color: var(--em-ig-num-bg, #11802f) !important;
	width: auto;
	min-width: 24px;
}
.em-ig--num-plain  .em-ig-num::after { content: '.'; margin-left: 1px; }

/* =================================================================
 * Layout : GRID
 * ================================================================= */
.em-ig--layout-grid .em-ig-grid {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(var(--em-ig-cols, 2), minmax(0, 1fr));
	gap: var(--em-ig-gap, 20px);
}

.em-ig .em-ig-card {
	background: var(--em-ig-card-bg, #f6f7f5) !important;
	border: var(--em-ig-card-bd-w, 0) solid var(--em-ig-card-bd-color, rgba(0,0,0,0.08)) !important;
	border-radius: var(--em-ig-card-radius, 10px) !important;
	padding: var(--em-ig-card-pad, 18px) !important;
	box-sizing: border-box;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.em-ig-card .em-ig-step-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--em-ig-step-title-mb, 6px);
}

/* =================================================================
 * Layout : TIMELINE
 * ================================================================= */
/* Wrapper multi-colonnes (par défaut 1 colonne = pas de grille) */
.em-ig--layout-timeline .em-ig-timeline-wrap {
	position: relative;
}
.em-ig--layout-timeline .em-ig-timeline-wrap--cols {
	display: grid;
	grid-template-columns: repeat(var(--em-ig-tl-cols, 1), minmax(0, 1fr));
	gap: var(--em-ig-gap, 20px);
	align-items: start;
}

.em-ig--layout-timeline .em-ig-timeline {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
}

.em-ig--layout-timeline .em-ig-tl-step {
	position: relative;
	padding-left: calc(var(--em-ig-num-size, 32px) + 16px);
	padding-bottom: var(--em-ig-gap, 20px);
	list-style: none;
}
.em-ig--layout-timeline .em-ig-tl-step:last-child {
	padding-bottom: 0;
}

/* Mode compact : spacing serré pour raccourcir encore la timeline */
.em-ig--tl-compact .em-ig-tl-step {
	padding-bottom: 10px !important;
	padding-left: calc(var(--em-ig-num-size, 32px) + 12px) !important;
}
.em-ig--tl-compact .em-ig-step-title { margin-bottom: 2px !important; }
.em-ig--tl-compact .em-ig-step-desc  { line-height: 1.35 !important; }
.em-ig--tl-compact .em-ig-sub { padding: 6px 8px !important; margin-top: 2px !important; }
.em-ig--tl-compact .em-ig-sub-item { padding-top: 1px !important; padding-bottom: 1px !important; }

/* Ligne verticale continue derrière les dots */
.em-ig--layout-timeline .em-ig-tl-step::before {
	content: '';
	position: absolute;
	left: calc(var(--em-ig-num-size, 32px) / 2 - var(--em-ig-tl-line-w, 2px) / 2);
	top: var(--em-ig-num-size, 32px);
	bottom: 0;
	width: var(--em-ig-tl-line-w, 2px);
	background: var(--em-ig-tl-line-color, rgba(17,128,47,0.25));
}
.em-ig--layout-timeline .em-ig-tl-step:last-child::before {
	display: none;
}

.em-ig--layout-timeline .em-ig-tl-step > .em-ig-num {
	position: absolute;
	left: 0;
	top: 0;
	background: var(--em-ig-tl-dot-color, var(--em-ig-num-bg, #11802f)) !important;
}

/* Timeline step body */
.em-ig--layout-timeline .em-ig-step-body {
	padding-top: 2px;
}

/* =================================================================
 * Step content — commun
 * ================================================================= */
.em-ig .em-ig-step-title {
	font-size: var(--em-ig-step-title-fs, 16px) !important;
	font-weight: var(--em-ig-step-title-fw, 700) !important;
	color: var(--em-ig-step-title-color, #1c4a1d) !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	flex: 1 1 auto;
}

.em-ig .em-ig-step-desc {
	font-size: var(--em-ig-step-desc-fs, 14px) !important;
	color: var(--em-ig-step-desc-color, #4a5a4a) !important;
	line-height: var(--em-ig-step-desc-lh, 1.5) !important;
	margin: 0 !important;
}
.em-ig .em-ig-step-desc p { margin: 0 0 6px 0; }
.em-ig .em-ig-step-desc p:last-child { margin-bottom: 0; }
.em-ig .em-ig-step-desc strong { color: inherit; font-weight: 700; }
.em-ig .em-ig-step-desc a {
	color: var(--em-ig-title-color, #11802f);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Image inline (thumb) */
.em-ig .em-ig-step-media {
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border-radius: var(--em-ig-img-radius, 8px) !important;
	background: transparent; /* v0.87.0 : plus de fond gris derrière une photo non rognée */
	aspect-ratio: var(--em-ig-img-aspect, 4/3);
}
/* v0.87.2 : pastille loupe toujours visible dans le coin bas droit des photos
   (étapes et remarques), pour signaler l'agrandissement. Style de base dans
   assets/css/lightbox.css (.em-zoom-btn) ; ici on force l'affichage permanent. */
.em-ig .em-ig-step-media,
.em-ig .em-ig-remarks-img {
	position: relative;
}
.em-ig .em-zoom-btn {
	opacity: 1;
	transform: none;
}
/* v0.87.0 : une photo de pose n'est JAMAIS rognée — la photo entière tient dans
   le cadre (contain), quel que soit le ratio choisi. Clic = agrandissement. */
.em-ig .em-ig-step-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	cursor: zoom-in;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}
/* Aspect auto : laisser respirer */
.em-ig[style*="--em-ig-img-aspect:auto"] .em-ig-step-media { aspect-ratio: auto; }

/* Sub-items (sous-liste style) */
.em-ig .em-ig-sub {
	background: var(--em-ig-sub-bg, #ffffff) !important;
	padding: var(--em-ig-sub-pad, 10px) !important;
	border-radius: var(--em-ig-sub-radius, 6px) !important;
	margin-top: 4px !important;
}
.em-ig .em-ig-sub-title {
	font-size: var(--em-ig-sub-fs, 13px) !important;
	font-weight: 600 !important;
	color: var(--em-ig-step-title-color, #1c4a1d) !important;
	margin-bottom: 6px !important;
}
.em-ig .em-ig-sub-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* Sous-item : layout INLINE par défaut — label + valeur flottent l'un à côté de l'autre
   comme une liste à puces normale. */
.em-ig .em-ig-sub-item {
	position: relative;
	padding: 3px 0 3px 14px !important;
	font-size: var(--em-ig-sub-fs, 13px) !important;
	color: var(--em-ig-sub-color, #4a5a4a) !important;
	line-height: 1.4 !important;
	list-style: none !important;
}
.em-ig .em-ig-sub-item::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 11px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--em-ig-step-title-color, #1c4a1d);
	opacity: 0.55;
}
.em-ig .em-ig-sub-label {
	color: var(--em-ig-step-title-color, #1c4a1d);
	font-weight: 500;
}
.em-ig .em-ig-sub-value {
	margin-left: 4px;
	color: var(--em-ig-step-title-color, #1c4a1d);
	font-weight: 600;
}

/* Variante « aligné » (fiche technique) — activée via classe em-ig-sub--aligned.
   Utile quand la sous-liste sert de tableau clé/valeur avec une colonne alignée. */
.em-ig .em-ig-sub--aligned .em-ig-sub-item {
	display: grid !important;
	grid-template-columns: minmax(0, max-content) 1fr;
	column-gap: 12px !important;
	padding: 3px 0 3px 14px !important;
}
.em-ig .em-ig-sub--aligned .em-ig-sub-value {
	margin-left: 0;
	justify-self: start;
}

/* =================================================================
 * Layout : STEPPER (horizontal)
 * ================================================================= */
.em-ig--layout-stepper .em-ig-stepper {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Nav horizontale des badges numérotés + ligne de connexion — COMPACTE, centrée. */
.em-ig--layout-stepper .em-ig-stepper-nav {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--em-ig-sp-nav-gap, 40px);
	flex-wrap: wrap;
	padding: 4px 0;
}

.em-ig--layout-stepper .em-ig-step-tab {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 2px 4px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: var(--em-ig-sp-tab-color, #4a5a4a) !important;
	transition: color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}
.em-ig--layout-stepper .em-ig-step-tab:focus-visible {
	outline: 2px solid var(--em-ig-sp-tab-bg-active, #11802f);
	outline-offset: 2px;
	border-radius: 6px;
}
.em-ig--layout-stepper .em-ig-step-tab:hover:not(.is-active) {
	color: var(--em-ig-step-title-color, #1c4a1d) !important;
}

.em-ig--layout-stepper .em-ig-step-tab-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width:  var(--em-ig-num-size, 36px);
	height: var(--em-ig-num-size, 36px);
	background: var(--em-ig-sp-tab-bg, #e9ede9) !important;
	color:      var(--em-ig-sp-tab-color, #4a5a4a) !important;
	border-radius: 50%;
	font-size: var(--em-ig-num-fs, 14px);
	font-weight: var(--em-ig-num-fw, 700);
	line-height: 1;
	transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	flex-shrink: 0;
}
.em-ig--layout-stepper .em-ig-step-tab.is-done .em-ig-step-tab-num {
	background: var(--em-ig-sp-tab-bg-done, #c4e0ca) !important;
	color: var(--em-ig-sp-tab-color-done, var(--em-ig-step-title-color, #1c4a1d)) !important;
}
/* Survol d'une pastille non active (repli = aucun changement) */
.em-ig--layout-stepper .em-ig-step-tab:hover:not(.is-active) .em-ig-step-tab-num {
	background: var(--em-ig-sp-tab-hbg, var(--em-ig-sp-tab-bg, #e9ede9)) !important;
	color:      var(--em-ig-sp-tab-hcolor, var(--em-ig-sp-tab-color, #4a5a4a)) !important;
}
.em-ig--layout-stepper .em-ig-step-tab.is-done:hover:not(.is-active) .em-ig-step-tab-num {
	background: var(--em-ig-sp-tab-hbg, var(--em-ig-sp-tab-bg-done, #c4e0ca)) !important;
	color:      var(--em-ig-sp-tab-hcolor, var(--em-ig-sp-tab-color-done, var(--em-ig-step-title-color, #1c4a1d))) !important;
}
.em-ig--layout-stepper .em-ig-step-tab.is-active .em-ig-step-tab-num {
	background: var(--em-ig-sp-tab-bg-active, #11802f) !important;
	color: var(--em-ig-sp-tab-color-active, #ffffff) !important;
	transform: scale(1.1);
	box-shadow: 0 2px 8px rgba(17,128,47,0.25);
}

.em-ig--layout-stepper .em-ig-step-tab-label {
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	max-width: 12ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.em-ig--layout-stepper .em-ig-step-tab.is-active .em-ig-step-tab-label {
	color: var(--em-ig-step-title-color, #1c4a1d) !important;
	font-weight: 600;
}

/* Ligne de connexion : ligne courte qui traverse le gap entre badges.
   Elle est ancrée à gauche du tab, s'étend vers le tab précédent, sur toute la
   largeur du gap (var --em-ig-sp-nav-gap), avec un petit retrait pour ne pas
   toucher les badges. */
.em-ig--layout-stepper .em-ig-step-tab + .em-ig-step-tab::before {
	content: '';
	position: absolute;
	top: calc(var(--em-ig-num-size, 36px) / 2 + 2px);
	right: 100%;
	width: var(--em-ig-sp-nav-gap, 40px);
	height: 2px;
	background: var(--em-ig-sp-line-color, #e0e5e0);
	z-index: 1;
	pointer-events: none;
	transform: translateX(4px);
}
.em-ig--layout-stepper .em-ig-step-tab.is-done + .em-ig-step-tab::before,
.em-ig--layout-stepper .em-ig-step-tab.is-active + .em-ig-step-tab::before {
	background: var(--em-ig-sp-line-color-done, #11802f);
}

/* Panneau actif (contient title + image + desc + subs) */
.em-ig--layout-stepper .em-ig-stepper-panels {
	position: relative;
	min-height: var(--em-ig-sp-min-h, 200px);
}
.em-ig--layout-stepper .em-ig-step-panel {
	background: var(--em-ig-sp-panel-bg, #f6f7f5) !important;
	border-radius: var(--em-ig-sp-panel-radius, 10px) !important;
	padding: var(--em-ig-sp-panel-pad, 24px) !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	animation: em-ig-sp-fade 0.25s ease;
}
.em-ig--layout-stepper .em-ig-step-panel[hidden] {
	display: none;
}

/* Hauteur égalisée (stepperEqualHeight, v0.34.0) : tous les panneaux sont
 * empilés dans la même cellule de grille → le conteneur garde la hauteur du
 * plus grand panneau, l'espace sous le cadre reste constant d'une étape à
 * l'autre. Les panneaux cachés participent à la hauteur mais sont invisibles.
 * Ne s'applique pas au mode « voir toutes les étapes » (is-show-all). */
.em-ig--sp-equalh .em-ig-stepper:not(.is-show-all) .em-ig-stepper-panels {
	display: grid;
}
.em-ig--sp-equalh .em-ig-stepper:not(.is-show-all) .em-ig-step-panel {
	grid-area: 1 / 1;
	height: 100%;
}
.em-ig--sp-equalh .em-ig-stepper:not(.is-show-all) .em-ig-step-panel[hidden] {
	display: flex;
	visibility: hidden;
	pointer-events: none;
	animation: none;
}

/* Sous-conteneur qui groupe titre/desc/subs pour placer l'image à côté */
.em-ig--layout-stepper .em-ig-step-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
}

/* Image à DROITE : flex row, image = width fixe, contenu prend le reste */
.em-ig--layout-stepper .em-ig-step-panel--img-right {
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
}
.em-ig--layout-stepper .em-ig-step-panel--img-right > .em-ig-step-media {
	flex: 0 0 var(--em-ig-sp-img-w, 240px);
	width: var(--em-ig-sp-img-w, 240px);
	max-width: 50%;
	margin: 0 !important;
}

/* Image à GAUCHE : row-reverse pour garder le HTML dans l'ordre logique
   (contenu d'abord dans le source pour SEO) mais visuel image à gauche */
.em-ig--layout-stepper .em-ig-step-panel--img-left {
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 20px;
}
.em-ig--layout-stepper .em-ig-step-panel--img-left > .em-ig-step-media {
	flex: 0 0 var(--em-ig-sp-img-w, 240px);
	width: var(--em-ig-sp-img-w, 240px);
	max-width: 50%;
	margin: 0 !important;
}

/* Image en HAUT (défaut historique) : stack vertical, image passe en dessous du content
   via order:-1 pour rester en haut visuellement, taille limitée */
.em-ig--layout-stepper .em-ig-step-panel--img-top {
	flex-direction: column;
}
.em-ig--layout-stepper .em-ig-step-panel--img-top > .em-ig-step-media {
	order: -1;
	width: var(--em-ig-sp-img-w, 240px);
	max-width: 100%;
	margin: 0 !important;
}

@keyframes em-ig-sp-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0);   }
}
@media (prefers-reduced-motion: reduce) {
	.em-ig--layout-stepper .em-ig-step-panel { animation: none; }
	.em-ig--layout-stepper .em-ig-step-tab-num { transition: none; }
}

/* Contrôles : compteur à gauche, [Voir tout] [Prev] [Next] alignés à droite */
.em-ig--layout-stepper .em-ig-stepper-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}
/* Compteur poussé à gauche via margin-right auto (le reste flotte à droite) */
.em-ig--layout-stepper .em-ig-stepper-counter {
	margin-inline-end: auto;
}
/* Bouton "Voir tout" reste discret, premier du groupe de droite */
.em-ig--layout-stepper .em-ig-view-all {
	background: transparent !important;
	color: var(--em-ig-step-title-color, #1c4a1d) !important;
	border: 1px solid var(--em-ig-sp-line-color, #e0e5e0) !important;
	font-weight: 500;
	padding: 8px 14px;
	font-size: 13px;
}
.em-ig--layout-stepper .em-ig-view-all:hover {
	background: var(--em-ig-sp-tab-bg, #e9ede9) !important;
	filter: none;
}
.em-ig--layout-stepper .em-ig-view-all[aria-pressed="true"] {
	background: var(--em-ig-sp-tab-bg-done, #c4e0ca) !important;
	border-color: var(--em-ig-sp-line-color-done, #11802f) !important;
}

/* Mode "toutes les étapes affichées" : tous les panneaux visibles empilés,
   nav + prev/next reste utile pour un retour rapide. */
.em-ig--layout-stepper .em-ig-stepper.is-show-all .em-ig-step-panel {
	display: flex !important;
	margin-bottom: 12px;
	animation: none;
}
.em-ig--layout-stepper .em-ig-stepper.is-show-all .em-ig-step-panel[hidden] {
	display: flex !important;
}
/* Numéro d'étape : pastille ronde verte, chiffre blanc (placée dans la marge
   gauche du panneau, quelle que soit la position de l'image). */
.em-ig--layout-stepper .em-ig-stepper.is-show-all .em-ig-step-panel {
	position: relative;
	padding-left: calc(var(--em-ig-sp-panel-pad, 24px) + var(--em-ig-num-size, 36px) + 14px) !important;
}
.em-ig--layout-stepper .em-ig-stepper.is-show-all .em-ig-step-panel::before {
	content: attr(data-panel-label);
	position: absolute;
	top: var(--em-ig-sp-panel-pad, 24px);
	left: var(--em-ig-sp-panel-pad, 24px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--em-ig-num-size, 36px);
	height: var(--em-ig-num-size, 36px);
	border-radius: 50%;
	background: var(--em-ig-sp-tab-bg-active, #11802f);
	color: #ffffff;
	font-size: var(--em-ig-num-fs, 14px);
	font-weight: var(--em-ig-num-fw, 700);
	line-height: 1;
}
.em-ig--layout-stepper .em-ig-stepper.is-show-all .em-ig-stepper-panels {
	min-height: 0;
}
/* En mode show-all, prev/next perdent leur sens — on les grise */
.em-ig--layout-stepper .em-ig-stepper.is-show-all .em-ig-prev,
.em-ig--layout-stepper .em-ig-stepper.is-show-all .em-ig-next,
.em-ig--layout-stepper .em-ig-stepper.is-show-all .em-ig-stepper-counter {
	opacity: 0.35;
	pointer-events: none;
}

.em-ig--layout-stepper .em-ig-stepper-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: var(--em-ig-sp-btn-bg, #11802f) !important;
	color:      var(--em-ig-sp-btn-color, #ffffff) !important;
	border: 0;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
	font: inherit;
	line-height: 1;
}
.em-ig--layout-stepper .em-ig-stepper-btn:hover:not(:disabled) {
	filter: brightness(0.92);
}
.em-ig--layout-stepper .em-ig-stepper-btn:active:not(:disabled) {
	transform: translateY(1px);
}
.em-ig--layout-stepper .em-ig-stepper-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.em-ig--layout-stepper .em-ig-stepper-btn:focus-visible {
	outline: 2px solid var(--em-ig-sp-tab-bg-active, #11802f);
	outline-offset: 2px;
}
.em-ig--layout-stepper .em-ig-stepper-btn-arrow {
	font-size: 16px;
	line-height: 1;
}

/* === Styles individuels par bouton (v0.34.0) ===================
 * Chaîne de repli : réglage individuel → réglage commun → défaut.
 * Sans réglage individuel, le rendu est strictement identique. */
.em-ig--layout-stepper .em-ig-prev {
	background: var(--em-ig-sp-prev-bg, var(--em-ig-sp-btn-bg, #11802f)) !important;
	color:      var(--em-ig-sp-prev-color, var(--em-ig-sp-btn-color, #ffffff)) !important;
}
.em-ig--layout-stepper .em-ig-prev:hover:not(:disabled) {
	background: var(--em-ig-sp-prev-hbg, var(--em-ig-sp-prev-bg, var(--em-ig-sp-btn-bg, #11802f))) !important;
	color:      var(--em-ig-sp-prev-hcolor, var(--em-ig-sp-prev-color, var(--em-ig-sp-btn-color, #ffffff))) !important;
}
.em-ig--layout-stepper .em-ig-next {
	background: var(--em-ig-sp-next-bg, var(--em-ig-sp-btn-bg, #11802f)) !important;
	color:      var(--em-ig-sp-next-color, var(--em-ig-sp-btn-color, #ffffff)) !important;
}
.em-ig--layout-stepper .em-ig-next:hover:not(:disabled) {
	background: var(--em-ig-sp-next-hbg, var(--em-ig-sp-next-bg, var(--em-ig-sp-btn-bg, #11802f))) !important;
	color:      var(--em-ig-sp-next-hcolor, var(--em-ig-sp-next-color, var(--em-ig-sp-btn-color, #ffffff))) !important;
}
.em-ig--layout-stepper .em-ig-view-all {
	background: var(--em-ig-sp-va-bg, var(--em-ig-sp-btn-bg, #11802f)) !important;
	color:      var(--em-ig-sp-va-color, var(--em-ig-sp-btn-color, #ffffff)) !important;
}
.em-ig--layout-stepper .em-ig-view-all:hover:not(:disabled) {
	background: var(--em-ig-sp-va-hbg, var(--em-ig-sp-va-bg, var(--em-ig-sp-btn-bg, #11802f))) !important;
	color:      var(--em-ig-sp-va-hcolor, var(--em-ig-sp-va-color, var(--em-ig-sp-btn-color, #ffffff))) !important;
}
/* État « mode déplié » actif du bouton Voir toutes les étapes */
.em-ig--layout-stepper .em-ig-stepper.is-show-all .em-ig-view-all {
	background: var(--em-ig-sp-va-abg, var(--em-ig-sp-va-bg, var(--em-ig-sp-btn-bg, #11802f))) !important;
	color:      var(--em-ig-sp-va-acolor, var(--em-ig-sp-va-color, var(--em-ig-sp-btn-color, #ffffff))) !important;
}

.em-ig--layout-stepper .em-ig-stepper-counter {
	font-size: 14px;
	color: var(--em-ig-step-desc-color, #4a5a4a);
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}
.em-ig--layout-stepper .em-ig-counter-current {
	font-weight: 700;
	color: var(--em-ig-step-title-color, #1c4a1d);
}

/* Responsive : mobile / tablette */
@media (max-width: 600px) {
	.em-ig--layout-stepper .em-ig-step-tab-label { display: none; }
	.em-ig--layout-stepper .em-ig-stepper-nav { gap: 28px; }
	.em-ig--layout-stepper .em-ig-step-tab + .em-ig-step-tab::before { width: 28px; }
	.em-ig--layout-stepper .em-ig-stepper-btn { padding: 10px 14px; font-size: 13px; }
	/* Mobile : compteur retourne au-dessus, boutons repassent centrés en dessous */
	.em-ig--layout-stepper .em-ig-stepper-controls { justify-content: center; }
	.em-ig--layout-stepper .em-ig-stepper-counter { order: -1; width: 100%; text-align: center; margin: 0; }
	.em-ig--layout-stepper .em-ig-view-all { width: 100%; margin: 0; text-align: center; order: 5; }
	.em-ig--layout-stepper .em-ig-stepper-panels { min-height: 0; }
	.em-ig--layout-stepper .em-ig-step-panel { padding: 16px !important; }

	/* Mobile : image toujours en haut (stack), pleine largeur.
	   Image position droite/gauche → passe en flex-direction column. */
	.em-ig--layout-stepper .em-ig-step-panel--img-right,
	.em-ig--layout-stepper .em-ig-step-panel--img-left {
		flex-direction: column;
		gap: 12px;
	}
	.em-ig--layout-stepper .em-ig-step-panel--img-right > .em-ig-step-media,
	.em-ig--layout-stepper .em-ig-step-panel--img-left > .em-ig-step-media,
	.em-ig--layout-stepper .em-ig-step-panel--img-top > .em-ig-step-media {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		order: -1; /* image en tête sur mobile même pour img-left/right */
	}
}

/* =================================================================
 * Collapse / accordion (natif <details>)
 * ================================================================= */
.em-ig .em-ig-collapse {
	width: 100%;
	box-sizing: border-box;
}

/* Enlève la flèche native + fait de la summary une ligne cliquable propre */
.em-ig .em-ig-summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin: 0;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.em-ig .em-ig-summary::-webkit-details-marker { display: none; }
.em-ig .em-ig-summary::marker { content: ''; }
.em-ig .em-ig-summary:focus-visible {
	outline: 2px solid var(--em-ig-num-bg, #11802f);
	outline-offset: 3px;
	border-radius: 4px;
}
/* Titre : prend tout l'espace pour que le caret vienne à droite */
.em-ig .em-ig-summary > .em-ig-step-title,
.em-ig .em-ig-summary > .em-ig-step-head {
	flex: 1 1 auto;
	min-width: 0;
}

/* Caret : chevron qui pivote quand ouvert */
.em-ig .em-ig-caret {
	display: inline-flex;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
	color: var(--em-ig-step-title-color, #1c4a1d);
	opacity: 0.6;
}
.em-ig .em-ig-caret::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	margin: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
}
.em-ig details[open] > .em-ig-summary > .em-ig-caret {
	transform: rotate(-180deg);
}

/* Corps révélé */
.em-ig .em-ig-collapse-body {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Timeline : la summary reste sur la ligne du titre — cache le titre visible aussi */
.em-ig--layout-timeline.em-ig--collapsible .em-ig-tl-step .em-ig-collapse {
	display: block;
}

/* Grid : la summary contient num+title, on garde le style flex avec num */
.em-ig--layout-grid.em-ig--collapsible .em-ig-summary .em-ig-step-head {
	margin: 0;
}

/* Hover feedback léger */
.em-ig .em-ig-summary:hover .em-ig-step-title,
.em-ig .em-ig-summary:hover .em-ig-step-head .em-ig-step-title {
	opacity: 0.85;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.em-ig .em-ig-caret { transition: none; }
}

/* =================================================================
 * Section Remarques
 * ================================================================= */
.em-ig .em-ig-remarks {
	margin: var(--em-ig-rm-mt, 32px) var(--em-ig-rm-mr, 0) var(--em-ig-rm-mb, 0) var(--em-ig-rm-ml, 0) !important;
	background: var(--em-ig-rm-bg, #fff8e6) !important;
	border: var(--em-ig-rm-bd-w, 1px) solid var(--em-ig-rm-bd-color, #f0c256) !important;
	border-radius: var(--em-ig-rm-radius, 10px) !important;
	padding: var(--em-ig-rm-pad, 20px) !important;
	box-sizing: border-box;
}

.em-ig .em-ig-remarks-title {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: var(--em-ig-rm-title-fs, 16px) !important;
	font-weight: 700 !important;
	color: var(--em-ig-rm-title-color, #8a5a00) !important;
	margin: 0 0 12px 0 !important;
	line-height: 1.3 !important;
}
.em-ig .em-ig-remarks-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--em-ig-rm-icon-color, #c68a00) !important;
}
.em-ig .em-ig-remarks-icon svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.em-ig .em-ig-remarks-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.em-ig .em-ig-remarks-item {
	position: relative;
	padding: 4px 0 4px 20px !important;
	font-size: var(--em-ig-rm-item-fs, 14px) !important;
	color: var(--em-ig-rm-item-color, #4a3a1a) !important;
	line-height: 1.5 !important;
	list-style: none !important;
}
.em-ig .em-ig-remarks-item::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 12px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--em-ig-rm-icon-color, #c68a00);
}
.em-ig .em-ig-remarks-item strong { color: inherit; font-weight: 700; }

/* ---- Image optionnelle des remarques (comme pour les étapes) ---- */
.em-ig .em-ig-remarks-flex {
	display: flex !important;
	gap: 20px !important;
	align-items: flex-start !important;
}
.em-ig .em-ig-remarks-flex .em-ig-remarks-list {
	flex: 1 1 auto;
	min-width: 0;
}
.em-ig .em-ig-remarks-img {
	flex: 0 0 var(--em-ig-rm-img-w, 220px);
	max-width: var(--em-ig-rm-img-w, 220px);
	margin: 0 !important;
	padding: 0 !important;
}
.em-ig .em-ig-remarks-img img {
	display: block;
	width: 100%;
	height: auto;
	cursor: zoom-in; /* v0.87.0 : agrandissement au clic */
	border-radius: var(--em-ig-rm-img-radius, 8px);
}
.em-ig .em-ig-remarks--img-left .em-ig-remarks-flex,
.em-ig-remarks--img-left .em-ig-remarks-flex {
	flex-direction: row-reverse !important;
}
.em-ig .em-ig-remarks--img-top .em-ig-remarks-flex,
.em-ig-remarks--img-top .em-ig-remarks-flex {
	flex-direction: column !important;
}
.em-ig-remarks--img-top .em-ig-remarks-img {
	order: -1;
	flex-basis: auto;
	width: var(--em-ig-rm-img-w, 220px);
	max-width: 100%;
}

/* =================================================================
 * Defensive : overflow visible sur icônes SVG
 * ================================================================= */
.em-ig.em-ig .em-ig-remarks-icon,
.em-ig.em-ig .em-ig-remarks-icon svg {
	overflow: visible !important;
}

/* =================================================================
 * Responsive
 * ================================================================= */
@media (max-width: 1024px) {
	.em-ig--layout-grid .em-ig-grid {
		grid-template-columns: repeat(var(--em-ig-cols-t, 2), minmax(0, 1fr));
	}
	/* Timeline tablette : cols configurables (défaut 1 = stack) */
	.em-ig--layout-timeline .em-ig-timeline-wrap--cols {
		grid-template-columns: repeat(var(--em-ig-tl-cols-t, 1), minmax(0, 1fr));
	}
	.em-ig .em-ig-title,
	.em-ig h1.em-ig-title, .em-ig h2.em-ig-title, .em-ig h3.em-ig-title,
	.em-ig h4.em-ig-title, .em-ig h5.em-ig-title, .em-ig h6.em-ig-title {
		font-size: var(--em-ig-title-fs-t, 28px) !important;
	}
}

@media (max-width: 600px) {
	.em-ig--layout-grid .em-ig-grid {
		grid-template-columns: repeat(var(--em-ig-cols-m, 1), minmax(0, 1fr));
		gap: var(--em-ig-gap-m, 16px);
	}
	.em-ig .em-ig-card {
		padding: var(--em-ig-card-pad-m, 14px) !important;
	}
	.em-ig .em-ig-title,
	.em-ig h1.em-ig-title, .em-ig h2.em-ig-title, .em-ig h3.em-ig-title,
	.em-ig h4.em-ig-title, .em-ig h5.em-ig-title, .em-ig h6.em-ig-title {
		font-size: var(--em-ig-title-fs-m, 24px) !important;
	}
	.em-ig .em-ig-lead { font-size: var(--em-ig-lead-fs-m, 14px) !important; }

	/* Timeline mobile : gap réduit, TOUJOURS 1 colonne (lisibilité) */
	.em-ig--layout-timeline .em-ig-timeline-wrap--cols {
		grid-template-columns: 1fr;
	}
	.em-ig--layout-timeline .em-ig-tl-step {
		padding-bottom: var(--em-ig-gap-m, 16px);
	}

	/* Remarques mobile : image toujours empilée sous la liste, pleine largeur.
	   Spécificité doublée pour battre les règles desktop row-reverse (3 classes). */
	.em-ig.em-ig .em-ig-remarks-flex,
	.em-ig.em-ig .em-ig-remarks--img-left .em-ig-remarks-flex,
	.em-ig.em-ig .em-ig-remarks--img-top .em-ig-remarks-flex {
		flex-direction: column !important;
	}
	.em-ig.em-ig .em-ig-remarks-img {
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.em-ig.em-ig .em-ig-remarks--img-top .em-ig-remarks-img { order: -1; }
}

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