/* ==========================================================================
   Fil des étapes de la commande (panier, commande, confirmation) :
   pastilles numérotées reliées par des filets dorés.
   ========================================================================== */

/* Titre de la page de commande, avec les fleurons dorés au-dessus. */
.tl-etapes__titre {
	margin: 0 0 1.75rem !important;
	color: var(--wp--preset--color--noir-chaud) !important;
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
}

.tl-etapes__titre::before {
	content: "";
	display: block;
	width: 7rem;
	height: 2rem;
	margin: 0 auto 0.8rem;
	background-color: #c9a24e;
	-webkit-mask:
		var(--tl-orn-divider-left) left center / 46% auto no-repeat,
		var(--tl-orn-divider-right) right center / 46% auto no-repeat;
	mask:
		var(--tl-orn-divider-left) left center / 46% auto no-repeat,
		var(--tl-orn-divider-right) right center / 46% auto no-repeat;
}

.tl-etapes {
	margin: 0 auto 2.75rem;
}

.tl-etapes ol {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-etapes li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	color: #a89a8a;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Le filet doré entre deux étapes. */
.tl-etapes li + li::before {
	content: "";
	width: clamp(1.5rem, 5vw, 4.5rem);
	height: 1px;
	margin-inline: 1rem 0.3rem;
	background: rgba(201, 162, 78, 0.6);
}

.tl-etapes__numero {
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid #d8cbb6;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: 0.95rem;
	letter-spacing: 0;
}

/* Étape faite : pastille dorée pleine. */
.tl-etapes li.is-faite {
	color: #8a6420;
}

.tl-etapes li.is-faite .tl-etapes__numero {
	border-color: var(--wp--preset--color--or);
	background: var(--wp--preset--color--or);
	color: var(--wp--preset--color--noir-chaud);
}

/* Étape en cours : pastille noire, chiffre doré. */
.tl-etapes li.is-actuelle {
	color: var(--wp--preset--color--noir-chaud);
}

.tl-etapes li.is-actuelle .tl-etapes__numero {
	border-color: var(--wp--preset--color--noir-chaud);
	background: var(--wp--preset--color--noir-chaud);
	color: var(--wp--preset--color--or);
}

/* Téléphone : seuls les numéros et le nom de l'étape en cours. */
@media (max-width: 600px) {
	.tl-etapes li:not(.is-actuelle) .tl-etapes__nom {
		display: none;
	}

	.tl-etapes li + li::before {
		width: 1.5rem;
		margin-inline: 0.6rem 0.2rem;
	}
}