/* ========================================
   Pattern : Étapes vers le diplôme
   ======================================== */

.etapes-diplome {
	position: relative;
	margin-inline: auto !important;
	padding: 3rem 1.5rem;
	counter-reset: step;
}

.etapes-diplome__title {
	position: relative;
	z-index: 2;
	margin: 0 0 2.5rem !important;
}

.etapes-diplome__step {
	position: relative;
	z-index: 2;
	margin-bottom: 2.5rem;
	counter-increment: step;
}

.etapes-diplome__step-title {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.75rem;
	margin: 0 0 1rem !important;
	font-weight: var(--wp--custom--font-weight--semibold);
}

.etapes-diplome__step-title::before {
	content: counter(step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	background-color: var(--wp--preset--color--apple);
	color: var(--wp--preset--color--ultra);
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: var(--wp--custom--font-weight--bold);
	flex-shrink: 0;
	line-height: 1;
}

/* ----- Desktop : décor SVG en background + positionnement absolu ----- */
@media (min-width: 1024px) {

	.etapes-diplome {
		max-width: 1180px;
		aspect-ratio: 1180 / 1240;
		padding: 0;
	}

	.etapes-diplome::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url("../img/etapes-decoration.svg") center / 100% 100% no-repeat;
		z-index: 1;
		pointer-events: none;
	}

	/* Le titre et chaque étape sont positionnés absolument
	   par rapport au container 1180×1240 — les % sont calés
	   sur les zones laissées libres par le tracé. */
	.etapes-diplome__title {
		position: absolute !important;
		top: 4%;
		right: 4%;
		max-width: 38%;
		margin: 0 !important;
	}

	.etapes-diplome__step {
		position: absolute;
		width: 32%;
		max-width: 360px;
		margin: 0;
	}

	.etapes-diplome__step--1 { top: 16%; left: 4%; }
	.etapes-diplome__step--2 { top: 36%; right: 4%; }
	.etapes-diplome__step--3 { top: 56%; left: 4%; }
	.etapes-diplome__step--4 { top: 76%; right: 4%; }
}

/* ----- Aperçu éditeur : neutralise les wrappers Gutenberg
   qui pourraient faire écran au positionnement absolu ----- */
.editor-styles-wrapper .etapes-diplome,
.block-editor-block-list__layout .etapes-diplome {
	background-color: var(--wp--preset--color--eggshell);
}