.myfw-steps {
	--myfw-steps-gap: 40px;
	--myfw-steps-bubble-size: 84px;
	--myfw-steps-bubble-bg: transparent;
	--myfw-steps-bubble-border: var(--color-accent, #6366f1);
	--myfw-steps-bubble-border-width: 2px;
	--myfw-steps-icon-color: var(--color-text, #1a1a1a);
	--myfw-steps-icon-size: 30px;
	--myfw-steps-link-color: var(--color-accent, #6366f1);
	--myfw-steps-link-thickness: 2px;
	--myfw-steps-year-w: 100px;
	/* Hauteur de la ligne « boule + titre » : les deux y sont centrés. */
	--myfw-steps-row-h: max( var(--myfw-steps-bubble-size), 2rem );
	--myfw-steps-row-offset: calc( ( var(--myfw-steps-row-h) - var(--myfw-steps-bubble-size) ) / 2 );
}

.myfw-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--myfw-steps-gap);
}
.myfw-steps--numbered .myfw-steps__list {
	padding-top: 1.9rem;
}

/* ---- Étape ---- */
.myfw-steps__item {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
}

.myfw-steps__number {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate( -50%, -48% );
	z-index: 0;
	pointer-events: none;
	font-family: var(--font-heading, inherit);
	font-size: clamp( 2.4rem, 6vw, 3.75rem );
	font-weight: 700;
	line-height: 1;
	color: var(--color-secondary, #6b7280);
	opacity: 0.18;
}

.myfw-steps__marker {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.myfw-steps__bubble {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--myfw-steps-bubble-size);
	height: var(--myfw-steps-bubble-size);
	border-radius: 50%;
	background: var(--myfw-steps-bubble-bg);
	border: var(--myfw-steps-bubble-border-width) solid var(--myfw-steps-bubble-border);
	color: var(--myfw-steps-icon-color);
}
.myfw-steps__bubble svg {
	width: var(--myfw-steps-icon-size);
	height: var(--myfw-steps-icon-size);
	display: block;
}

.myfw-steps__bubble-number {
	font-family: var(--font-heading, inherit);
	font-size: calc( var(--myfw-steps-bubble-size) * 0.42 );
	font-weight: 700;
	line-height: 1;
}

.myfw-steps__content {
	margin-top: 1rem;
}
.myfw-steps__title {
	margin: 0 0 0.35em;
	font-family: var(--font-heading, inherit);
	font-size: 1.05rem;
	color: var(--color-text, #1a1a1a);
}
.myfw-steps__desc {
	margin: 0;
	font-family: var(--font-body, inherit);
	color: var(--color-secondary, #6b7280);
	font-size: 0.95rem;
}
.myfw-steps__year {
	margin-top: 0.75rem;
	font-family: var(--font-heading, inherit);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--color-secondary, #6b7280);
}
.myfw-steps .myfw-steps__badge {
	display: inline-block;
	box-sizing: border-box;
	margin-top: 0.85rem;
	padding: 6px 16px;
	border: 1px solid color-mix( in srgb, currentColor 18%, transparent );
	border-radius: 999px;
	background-color: color-mix( in srgb, var(--color-secondary, #6b7280) 14%, transparent );
	color: var(--color-text, #1a1a1a);
	font-family: var(--font-body, inherit);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
}

/* ---- Traits de liaison ---- */
.myfw-steps__link {
	position: absolute;
	z-index: 0;
	overflow: hidden;
}
.myfw-steps__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--myfw-steps-link-color);
}

/* Horizontal : le trait ne couvre que l'espace entre le bord droit de
   cette boule et le bord gauche de la suivante — il ne traverse aucune
   boule (items de largeur égale → centre-à-centre = 100 % + gap). */
.myfw-steps--horizontal .myfw-steps__link {
	top: calc( var(--myfw-steps-bubble-size) / 2 );
	left: calc( 50% + var(--myfw-steps-bubble-size) / 2 );
	width: calc( 100% + var(--myfw-steps-gap) - var(--myfw-steps-bubble-size) );
	height: var(--myfw-steps-link-thickness);
	transform: translateY( -50% );
}

/* ---- Orientation verticale ----
   Ordre visuel = ordre du DOM : boule, année, contenu (aucun `order`). 
   Ligne « boule + année + titre » de même hauteur, centrée : le centre
   de la boule est sur l'axe du titre. */
.myfw-steps--vertical .myfw-steps__list {
	flex-direction: column;
}
.myfw-steps--vertical .myfw-steps__item {
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
	gap: 1rem;
}
.myfw-steps--vertical.myfw-steps--numbered .myfw-steps__list {
	padding-top: 0;
}
.myfw-steps--vertical .myfw-steps__number {
	display: none;
}
.myfw-steps--vertical .myfw-steps__marker {
	order: 1;
	min-height: var(--myfw-steps-row-h);
}
.myfw-steps--vertical .myfw-steps__year {
	order: 2;
	flex: 0 0 var(--myfw-steps-year-w);
	margin-top: 0;
	min-height: var(--myfw-steps-row-h);
	display: flex;
	align-items: center;
}
.myfw-steps--vertical .myfw-steps__content {
	order: 3;
	margin-top: 0;
	flex: 1 1 auto;
	min-width: 0;
	padding-bottom: 0.25rem;
}
.myfw-steps--vertical .myfw-steps__title {
	min-height: var(--myfw-steps-row-h);
	display: flex;
	align-items: center;
	line-height: 1.3;
}
.myfw-steps--vertical .myfw-steps__link {
	top: calc( var(--myfw-steps-row-offset) + var(--myfw-steps-bubble-size) );
	left: calc( var(--myfw-steps-bubble-size) / 2 );
	width: var(--myfw-steps-link-thickness);
	height: calc( 100% + var(--myfw-steps-gap) - var(--myfw-steps-bubble-size) );
	transform: translateX( -50% );
}

/* ---- Révélation au défilement (surchargeable en CSS personnalisé) ----
   L'état masqué initial est conditionné à `.myfw-steps--animate`, ajouté
   par le JS : sans JS (ou JS en échec), le module reste entièrement
   visible. */
@media ( prefers-reduced-motion: no-preference ) {
	.myfw-steps--animate .myfw-steps__item {
		opacity: 0;
		transform: translateY( 16px );
		transition: opacity 0.5s ease, transform 0.5s ease;
		transition-delay: calc( ( var(--myfw-step-index, 1) - 1 ) * 0.12s );
	}
	.myfw-steps--animate.is-inview .myfw-steps__item {
		opacity: 1;
		transform: none;
	}

	.myfw-steps--animate .myfw-steps__link::before {
		transition: transform 0.5s ease;
		transition-delay: calc( ( var(--myfw-step-index, 1) - 1 ) * 0.12s + 0.25s );
	}

	/* Trait horizontal (rangée horizontale, écrans ≥ 768 px). */
	.myfw-steps--animate.myfw-steps--horizontal .myfw-steps__link::before {
		transform: scaleX( 0 );
		transform-origin: left;
	}
	.myfw-steps--animate.myfw-steps--horizontal.is-inview .myfw-steps__link::before {
		transform: scaleX( 1 );
	}

	/* Trait vertical (orientation verticale). */
	.myfw-steps--animate.myfw-steps--vertical .myfw-steps__link::before {
		transform: scaleY( 0 );
		transform-origin: top;
	}
	.myfw-steps--animate.myfw-steps--vertical.is-inview .myfw-steps__link::before {
		transform: scaleY( 1 );
	}
}

/* ---- Repli mobile : la rangée horizontale passe en colonne ---- */
@media ( max-width: 767px ) {
	.myfw-steps--horizontal .myfw-steps__list {
		flex-direction: column;
	}
	.myfw-steps--horizontal .myfw-steps__item {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: 1rem;
	}
	.myfw-steps--horizontal .myfw-steps__number {
		display: none;
	}
	.myfw-steps--horizontal .myfw-steps__marker {
		order: 1;
		min-height: var(--myfw-steps-row-h);
	}
	.myfw-steps--horizontal .myfw-steps__year {
		order: 2;
		flex: 0 0 var(--myfw-steps-year-w);
		margin-top: 0;
		min-height: var(--myfw-steps-row-h);
		display: flex;
		align-items: center;
	}
	.myfw-steps--horizontal .myfw-steps__content {
		order: 3;
		margin-top: 0;
		flex: 1 1 auto;
		min-width: 0;
	}
	.myfw-steps--horizontal .myfw-steps__title {
		min-height: var(--myfw-steps-row-h);
		display: flex;
		align-items: center;
		line-height: 1.3;
	}
	.myfw-steps--numbered.myfw-steps--horizontal .myfw-steps__list {
		padding-top: 0;
	}
	.myfw-steps--horizontal .myfw-steps__link {
		top: calc( var(--myfw-steps-row-offset) + var(--myfw-steps-bubble-size) );
		left: calc( var(--myfw-steps-bubble-size) / 2 );
		width: var(--myfw-steps-link-thickness);
		height: calc( 100% + var(--myfw-steps-gap) - var(--myfw-steps-bubble-size) );
		transform: translateX( -50% );
	}

	@media ( prefers-reduced-motion: no-preference ) {
		.myfw-steps--animate.myfw-steps--horizontal .myfw-steps__link::before {
			transform: scaleY( 0 );
			transform-origin: top;
		}
		.myfw-steps--animate.myfw-steps--horizontal.is-inview .myfw-steps__link::before {
			transform: scaleY( 1 );
		}
	}
}