/*
 * Barre d'étapes (templates/front/v3/_partials/_stepper.html.twig).
 * Thème du site (style.css : --secondary-color, --border-color, --radius-btn).
 * Mobile d'abord ; propriétés logiques pour l'arabe (RTL).
 */
.cdm-stepper {
	margin: 0 0 1.5rem;
}

.cdm-stepper__list {
	display: flex;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.cdm-stepper__item {
	flex: 1 1 0;
	min-inline-size: 0;
	position: relative;
}

/* Trait de liaison entre deux étapes. */
.cdm-stepper__item + .cdm-stepper__item::before {
	content: '';
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: calc(-50% + 1.25rem);
	inline-size: calc(100% - 2.5rem);
	block-size: 2px;
	background: var(--border-color, #e0e0e0);
}

.cdm-stepper__item.is-done + .cdm-stepper__item::before,
.cdm-stepper__item.is-current::before {
	background: var(--secondary-color, #00796b);
}

.cdm-stepper__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	text-align: center;
	color: var(--text-secondary, #757575);
	text-decoration: none;
	font-size: .8rem;
}

a.cdm-stepper__link:hover,
a.cdm-stepper__link:focus-visible {
	color: var(--secondary-color, #00796b);
	text-decoration: underline;
}

.cdm-stepper__number {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	border: 2px solid var(--border-color, #e0e0e0);
	background: var(--white, #fff);
	font-weight: 700;
}

.cdm-stepper__item.is-done .cdm-stepper__number {
	border-color: var(--secondary-color, #00796b);
	background: var(--secondary-color, #00796b);
	color: #fff;
}

.cdm-stepper__item.is-current .cdm-stepper__number {
	border-color: var(--secondary-color, #00796b);
	color: var(--secondary-color, #00796b);
}

.cdm-stepper__item.is-current .cdm-stepper__link {
	color: var(--text-dark, #3e2723);
	font-weight: 700;
}

/* Très petit écran : seul le libellé de l'étape en cours reste visible. */
@media (max-width: 420px) {
	.cdm-stepper__item:not(.is-current) .cdm-stepper__label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (min-width: 768px) {
	.cdm-stepper__link {
		font-size: .9rem;
	}
}

@media print {
	.cdm-stepper { display: none; }
}