/* Étapes — template raw. Uniquement des variables générées par theme.json. */

.bank-steps__list {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bank-step;
}

.bank-steps__item {
	counter-increment: bank-step;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bank-is-dark .bank-steps__item {
	border-color: color-mix(in srgb, currentColor 25%, transparent);
}

/* Le numéro dit l'ordre : il n'apparaît que si le contenu est bien une séquence numérotée. */
.bank-steps--numbered .bank-steps__item::before {
	content: counter(bank-step);
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.bank-is-dark .bank-steps--numbered .bank-steps__item::before,
.bank-is-dark.bank-steps--numbered .bank-steps__item::before {
	color: inherit;
}

.bank-steps__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.bank-steps__text {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
}

.bank-is-dark .bank-steps__text {
	color: inherit;
}

.bank-steps--vertical .bank-steps__list {
	max-width: var(--wp--style--global--content-size);
}

@media (min-width: 48em) {
	.bank-steps--horizontal .bank-steps__list {
		grid-template-columns: repeat(var(--bank-columns), minmax(0, 1fr));
	}

	.bank-steps--vertical.bank-steps--numbered .bank-steps__item {
		display: grid;
		grid-template-columns: var(--wp--preset--spacing--60) 1fr;
		column-gap: var(--wp--preset--spacing--40);
	}

	.bank-steps--vertical.bank-steps--numbered .bank-steps__item::before {
		grid-row: span 2;
		margin: 0;
		font-size: var(--wp--preset--font-size--large);
	}
}