/* =========================================================
   EEP – Étapes — Version: 1.0.0
   5 designs · numérotation · ligne de liaison · cascade
   Charte Landscop : vert anis #97b545 · vert foncé #0f3714 · doré #f4be29
   ========================================================= */

.eep-et [hidden] { display: none !important; }

.eep-et {
	--eep-primary: #97b545;
	--eep-dark: #0f3714;
	--eep-accent: #f4be29;
	--eep-texte: #5b6b5d;
	--eep-ligne: #dbe3d2;
	--eep-align: center;
	--eep-pad-x: 0px;
	--eep-gap: 28px;
	--eep-cols: 4;
	--eep-radius: 18px;
	--eep-num: 58px;
	--eep-ic: 56px;
	--eep-leaf: 30px;

	padding-left: var(--eep-pad-x);
	padding-right: var(--eep-pad-x);
	max-width: 100%;
}

.eep-et *,
.eep-et *::before,
.eep-et *::after { box-sizing: border-box; }

/* ---------------------------------------------------------
   EN-TÊTE
   --------------------------------------------------------- */
.eep-et__header {
	text-align: var(--eep-align);
	margin: 0 0 48px 0;
}

.eep-et__leaf {
	display: block;
	width: var(--eep-leaf);
	height: var(--eep-leaf);
	color: var(--eep-primary);
	margin: 0 0 14px 0;
}

.eep-et__header[style*="center"] .eep-et__leaf { margin-left: auto; margin-right: auto; }

/* Contre les thèmes qui imposent svg { height: auto } */
.eep-et__leaf svg,
.eep-et__leaf img {
	width: 100%;
	max-width: 100%;
	height: 100% !important;
	object-fit: contain;
	display: block;
}

.eep-et__leaf svg { fill: currentColor; }

.eep-et__eyebrow {
	color: var(--eep-dark);
	text-transform: none;
	margin: 0 0 14px 0;
}

.eep-et:not(.eep-et--herite) .eep-et__eyebrow {
	font-family: 'Dancing Script', 'Brush Script MT', cursive;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
}

.eep-et__eyebrow.is-badge {
	display: inline-block;
	background-color: #eef1e8;
	border-radius: 60px;
	padding: 7px 24px;
}

.eep-et__eyebrow.is-simple { display: block; }

.eep-et__titre {
	color: var(--eep-dark);
	text-transform: none;
	margin: 0 0 14px 0;
	overflow-wrap: break-word;
}

.eep-et:not(.eep-et--herite) .eep-et__titre {
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.01em;
}

.eep-et__hl { color: var(--eep-primary); }

.eep-et__intro {
	color: var(--eep-texte);
	margin: 0 auto;
	max-width: 680px;
}

.eep-et:not(.eep-et--herite) .eep-et__intro {
	font-size: 16px;
	line-height: 1.7;
}

/* ---------------------------------------------------------
   BRIQUES COMMUNES
   --------------------------------------------------------- */
.eep-et__list { margin: 0; padding: 0; }

.eep-et__item {
	position: relative;
	margin: 0;
	padding: 0;
}

.eep-et__marqueur {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* ---------- Numéro ---------- */
.eep-et__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--eep-num);
	height: var(--eep-num);
	border-radius: 50%;
	font-size: calc(var(--eep-num) * .36);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	border: 2px solid transparent;
	transition: background-color .35s ease, color .35s ease, transform .35s ease;
}

.eep-et--num-pastille .eep-et__num {
	background-color: var(--eep-dark);
	color: #ffffff;
	border-color: var(--eep-dark);
}

.eep-et--num-contour .eep-et__num {
	background-color: transparent;
	color: var(--eep-dark);
	border-color: var(--eep-primary);
}

/* Grand chiffre en filigrane, posé derrière le contenu */
.eep-et--num-filigrane .eep-et__num {
	position: absolute;
	top: -6px;
	right: 4px;
	width: auto;
	height: auto;
	border: none;
	border-radius: 0;
	background: none;
	color: transparent;
	-webkit-text-stroke: 2px rgba(151, 181, 69, .5);
	font-size: calc(var(--eep-num) * 1.05);
	pointer-events: none;
}

/* ---------- Icône ---------- */
.eep-et__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--eep-ic);
	height: var(--eep-ic);
	border-radius: 50%;
	background-color: rgba(151, 181, 69, .16);
	color: var(--eep-primary);
	font-size: calc(var(--eep-ic) * .4);
	line-height: 1 !important;
	transition: background-color .35s ease, color .35s ease, transform .35s ease;
}

.eep-et__ic i,
.eep-et__ic i::before { line-height: 1 !important; }

/* Contre les thèmes qui imposent svg { height: auto } */
.eep-et__ic svg {
	width: calc(var(--eep-ic) * .42);
	height: calc(var(--eep-ic) * .42) !important;
	fill: currentColor;
	display: block;
}

.eep-et__item:hover .eep-et__ic {
	background-color: var(--eep-primary);
	color: #ffffff;
	transform: scale(1.06);
}

/* ---------- Textes ---------- */
.eep-et__item-titre {
	color: var(--eep-dark);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: normal;
	text-transform: none;
	margin: 0 0 8px 0;
}

.eep-et__item-texte {
	color: var(--eep-texte);
	font-size: .95rem;
	line-height: 1.68;
	margin: 0;
}

/* =========================================================
   DESIGN 1 — FRISE HORIZONTALE
   ========================================================= */
.eep-et--horizontale .eep-et__list,
.eep-et--cartes .eep-et__list,
.eep-et--sombre .eep-et__list {
	display: grid;
	grid-template-columns: repeat(var(--eep-cols), minmax(0, 1fr));
	gap: var(--eep-gap);
}

.eep-et--horizontale .eep-et__item {
	text-align: center;
	padding-top: 6px;
}

.eep-et--horizontale .eep-et__marqueur {
	flex-direction: column;
	margin-bottom: 20px;
}

.eep-et--horizontale .eep-et__ic { margin-top: 12px !important; }

/* La ligne relie les marqueurs d'une étape à l'autre */
.eep-et--horizontale.eep-et--ligne .eep-et__item::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: calc(var(--eep-num) / 2 + 6px);
	left: calc(50% + var(--eep-num) / 2 + 12px);
	right: calc(-50% + var(--eep-num) / 2 - 12px);
	border-top: 2px solid var(--eep-ligne);
}

.eep-et--horizontale.eep-et--pointilles .eep-et__item::before { border-top-style: dashed; }
.eep-et--horizontale.eep-et--ligne .eep-et__item:last-child::before { display: none; }

/* Sans numéro, la ligne se cale sur l'icône */
.eep-et--horizontale.eep-et--num-aucun.eep-et--ligne .eep-et__item::before {
	top: calc(var(--eep-ic) / 2 + 6px);
	left: calc(50% + var(--eep-ic) / 2 + 12px);
	right: calc(-50% + var(--eep-ic) / 2 - 12px);
}

/* =========================================================
   DESIGN 2 — CARTES NUMÉROTÉES
   ========================================================= */
.eep-et--cartes .eep-et__item,
.eep-et--sombre .eep-et__item {
	overflow: hidden;
	border-radius: var(--eep-radius);
	padding: 30px 26px;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}

.eep-et--cartes .eep-et__item {
	background-color: #ffffff;
	border: 1px solid rgba(15, 55, 20, .10);
}

.eep-et.eep-et--cartes .eep-et__item[data-reveal]:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(15, 55, 20, .13);
	border-color: rgba(151, 181, 69, .45);
}

.eep-et--cartes .eep-et__marqueur,
.eep-et--sombre .eep-et__marqueur {
	display: flex;
	align-items: center;
	margin-bottom: 18px;
}

.eep-et--cartes .eep-et__ic + .eep-et__num,
.eep-et--cartes .eep-et__num + .eep-et__ic,
.eep-et--sombre .eep-et__ic + .eep-et__num,
.eep-et--sombre .eep-et__num + .eep-et__ic { margin-left: 14px !important; }

/* Le filigrane occupe le coin de la carte */
.eep-et--cartes.eep-et--num-filigrane .eep-et__num,
.eep-et--sombre.eep-et--num-filigrane .eep-et__num {
	top: 10px;
	right: 16px;
	font-size: calc(var(--eep-num) * 1.3);
}

/* =========================================================
   DESIGN 3 — FRISE VERTICALE
   ========================================================= */
.eep-et--verticale .eep-et__list {
	display: flex;
	flex-direction: column;
	max-width: 780px;
	margin: 0 auto;
}

.eep-et--verticale .eep-et__item {
	display: flex;
	align-items: flex-start;
	padding-bottom: var(--eep-gap);
}

.eep-et--verticale .eep-et__item:last-child { padding-bottom: 0; }

.eep-et--verticale .eep-et__marqueur {
	flex-direction: column;
	margin-right: 24px !important;
}

.eep-et--verticale .eep-et__ic { margin-top: 12px !important; }

/* Le trait vertical descend le long de la colonne des marqueurs */
.eep-et--verticale.eep-et--ligne .eep-et__item::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: calc(var(--eep-num) + 12px);
	bottom: 6px;
	left: calc(var(--eep-num) / 2 - 1px);
	border-left: 2px solid var(--eep-ligne);
}

.eep-et--verticale.eep-et--pointilles .eep-et__item::before { border-left-style: dashed; }
.eep-et--verticale.eep-et--ligne .eep-et__item:last-child::before { display: none; }

.eep-et--verticale .eep-et__corps { padding-top: 8px; }

/* =========================================================
   DESIGN 4 — ALTERNÉE AVEC IMAGES
   ========================================================= */
.eep-et--alternee .eep-et__list {
	display: flex;
	flex-direction: column;
	gap: calc(var(--eep-gap) + 12px);
}

.eep-et--alternee .eep-et__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 30px;
}

/* Image d'un côté, texte de l'autre, en alternance */
.eep-et--alternee .eep-et__img {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--eep-radius);
	aspect-ratio: 16 / 10;
	background-color: #eef1e8;
}

.eep-et--alternee .eep-et__img img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.eep-et--alternee .eep-et__item:hover .eep-et__img img { transform: scale(1.05); }

.eep-et--alternee .eep-et__marqueur {
	grid-column: 2;
	grid-row: 1;
	flex-direction: column;
}

.eep-et--alternee .eep-et__ic { margin-top: 12px !important; }

.eep-et--alternee .eep-et__corps {
	grid-column: 3;
	grid-row: 1;
}

/* Une étape sur deux : image à droite */
.eep-et--alternee .eep-et__item:nth-child(even) .eep-et__img { grid-column: 3; }
.eep-et--alternee .eep-et__item:nth-child(even) .eep-et__corps {
	grid-column: 1;
	text-align: right;
}

/* Sans image, le texte occupe toute la largeur disponible */
.eep-et--alternee .eep-et__item:not(:has(.eep-et__img)) {
	grid-template-columns: auto minmax(0, 1fr);
}

.eep-et--alternee .eep-et__item:not(:has(.eep-et__img)) .eep-et__marqueur { grid-column: 1; }
.eep-et--alternee .eep-et__item:not(:has(.eep-et__img)) .eep-et__corps { grid-column: 2; text-align: left; }

/* Trait vertical central */
.eep-et--alternee.eep-et--ligne .eep-et__item::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	height: calc(50% + var(--eep-gap) + 12px);
	border-left: 2px solid var(--eep-ligne);
}

.eep-et--alternee.eep-et--pointilles .eep-et__item::before { border-left-style: dashed; }
.eep-et--alternee.eep-et--ligne .eep-et__item:last-child::before { display: none; }

/* =========================================================
   DESIGN 5 — SOMBRE
   ========================================================= */
.eep-et--sombre {
	background: linear-gradient(135deg, #0b280f, #1d5823);
	border-radius: 22px;
	padding: 54px calc(var(--eep-pad-x) + 44px);
	--eep-ligne: rgba(255, 255, 255, .22);
}

.eep-et--sombre .eep-et__titre { color: #ffffff; }
.eep-et--sombre .eep-et__intro { color: rgba(255, 255, 255, .74); }
.eep-et--sombre .eep-et__eyebrow { color: #ffffff; }
.eep-et--sombre .eep-et__eyebrow.is-badge { background-color: rgba(255, 255, 255, .12); }

.eep-et--sombre .eep-et__item {
	background-color: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
}

.eep-et.eep-et--sombre .eep-et__item[data-reveal]:hover {
	transform: translateY(-6px);
	border-color: rgba(151, 181, 69, .55);
	box-shadow: 0 22px 44px rgba(0, 0, 0, .35);
}

.eep-et--sombre .eep-et__item-titre { color: #ffffff; }
.eep-et--sombre .eep-et__item-texte { color: rgba(255, 255, 255, .72); }
.eep-et--sombre .eep-et__ic { background-color: rgba(151, 181, 69, .22); color: #ffffff; }
.eep-et--sombre.eep-et--num-pastille .eep-et__num { background-color: var(--eep-accent); color: var(--eep-dark); border-color: var(--eep-accent); }
.eep-et--sombre.eep-et--num-contour .eep-et__num { color: #ffffff; border-color: rgba(255, 255, 255, .5); }
.eep-et--sombre.eep-et--num-filigrane .eep-et__num { -webkit-text-stroke-color: rgba(255, 255, 255, .3); }

/* =========================================================
   APPARITIONS EN CASCADE (amélioration progressive)
   Le masquage n'existe que si le JS a posé .is-ready.
   ========================================================= */
.eep-et--reveal.is-ready [data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
	transition-delay: calc(var(--eep-i, 0) * 100ms);
}

.eep-et--reveal.is-ready.is-in [data-reveal] {
	opacity: 1;
	transform: none;
}

/* =========================================================
   ÉTAT VIDE (éditeur)
   ========================================================= */
.eep-et--vide {
	padding: 34px 20px;
	text-align: center;
	color: var(--eep-texte);
	background: #f4f6f0;
	border-radius: 12px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
	.eep-et--horizontale .eep-et__list,
	.eep-et--cartes .eep-et__list,
	.eep-et--sombre .eep-et__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* En deux colonnes, la ligne horizontale n'a plus de sens */
	.eep-et--horizontale.eep-et--ligne .eep-et__item::before { display: none; }

	.eep-et--sombre { padding: 40px calc(var(--eep-pad-x) + 22px); }

	/* L'alternance passe en frise verticale simple */
	.eep-et--alternee .eep-et__item,
	.eep-et--alternee .eep-et__item:not(:has(.eep-et__img)) {
		grid-template-columns: auto minmax(0, 1fr);
	}
	.eep-et--alternee .eep-et__img,
	.eep-et--alternee .eep-et__item:nth-child(even) .eep-et__img {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 18px;
	}
	.eep-et--alternee .eep-et__marqueur { grid-column: 1; grid-row: 1; }
	.eep-et--alternee .eep-et__corps,
	.eep-et--alternee .eep-et__item:nth-child(even) .eep-et__corps {
		grid-column: 2;
		grid-row: 1;
		text-align: left;
	}
	.eep-et--alternee.eep-et--ligne .eep-et__item::before { display: none; }
}

@media (max-width: 767px) {
	.eep-et--horizontale .eep-et__list,
	.eep-et--cartes .eep-et__list,
	.eep-et--sombre .eep-et__list { grid-template-columns: 1fr; }

	.eep-et__header { margin-bottom: 34px; }
	.eep-et:not(.eep-et--herite) .eep-et__eyebrow { font-size: 24px; }
	.eep-et__eyebrow.is-badge { padding: 6px 18px; }

	.eep-et--cartes .eep-et__item,
	.eep-et--sombre .eep-et__item { padding: 24px 20px; }

	.eep-et--verticale .eep-et__marqueur { margin-right: 16px !important; }

	.eep-et { --eep-num: 48px; --eep-ic: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.eep-et--reveal.is-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
	.eep-et__item:hover { transform: none; }
	.eep-et__ic,
	.eep-et__num,
	.eep-et__img img { transition: none; }
}