/**
 * NineSigma Process Steps - styles.
 * Bandeau de process en chevrons : cartes en forme de flèche (clip-path),
 * badge numéroté, sur-titre, titre, description, axe fléché en dessous.
 * Les chevrons s'empilent verticalement en mobile.
 */

.ns-nps {
	--ns-nps-depth: 36px;
	position: relative;
	padding: 36px 36px 24px;
	border-radius: 12px;
	background-color: #0E2A47;
}

/* Rangée de chevrons */
.ns-nps__row {
	display: flex;
	align-items: stretch;
}

/* Étape (chevron) */
.ns-nps__step {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: 28px 26px 28px calc(var(--ns-nps-depth) + 20px);
	/* Encoche à gauche + pointe à droite */
	clip-path: polygon(
		0 0,
		calc(100% - var(--ns-nps-depth)) 0,
		100% 50%,
		calc(100% - var(--ns-nps-depth)) 100%,
		0 100%,
		var(--ns-nps-depth) 50%
	);
}

/* Chaque chevron chevauche la pointe du précédent */
.ns-nps__step + .ns-nps__step {
	margin-left: calc(-1 * var(--ns-nps-depth) + 6px);
}

/* Première étape : bord gauche droit (pas d'encoche) */
.ns-nps__step--first {
	padding-left: 28px;
	clip-path: polygon(
		0 0,
		calc(100% - var(--ns-nps-depth)) 0,
		100% 50%,
		calc(100% - var(--ns-nps-depth)) 100%,
		0 100%
	);
	border-radius: 8px 0 0 8px;
}

/* Badge numéroté */
.ns-nps__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 16px;
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

/* Badge plein (étape finale) : fond blanc, numéro coloré (inline style) */
.ns-nps__step--highlight .ns-nps__badge {
	background: #ffffff;
	border-color: #ffffff;
}

/* Sur-titre */
.ns-nps__kicker {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #8FB3E8;
}

/* Titre */
.ns-nps__title {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: #ffffff;
}

/* Description */
.ns-nps__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #D9E2F2;
}

/* Axe sous les étapes */
.ns-nps__axis {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 22px;
	padding: 0 8px;
	color: #AFC3DC;
}

.ns-nps__axis-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
}

.ns-nps__axis-line {
	position: relative;
	flex: 1 1 auto;
	border-top: 2px dashed currentColor;
	opacity: 0.7;
}

/* Pointe de flèche au bout de la ligne */
.ns-nps__axis-line::after {
	content: "";
	position: absolute;
	right: -2px;
	top: -6px;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* ---------- Responsive ---------- */

/* Tablette : textes un peu plus compacts */
@media (max-width: 1024px) {
	.ns-nps__title {
		font-size: 20px;
	}
	.ns-nps__step {
		padding-right: 20px;
	}
}

/* Mobile : empilement vertical, chevrons pointant vers le bas */
@media (max-width: 767px) {
	.ns-nps {
		padding: 24px 20px 18px;
	}

	.ns-nps__row {
		flex-direction: column;
	}

	.ns-nps__step,
	.ns-nps__step--first {
		padding: 26px 24px calc(var(--ns-nps-depth) + 14px);
		clip-path: polygon(
			0 0,
			100% 0,
			100% calc(100% - var(--ns-nps-depth)),
			50% 100%,
			0 calc(100% - var(--ns-nps-depth))
		);
		border-radius: 0;
	}

	.ns-nps__step--first {
		border-radius: 8px 8px 0 0;
	}

	.ns-nps__step + .ns-nps__step {
		margin-left: 0;
		margin-top: calc(-1 * var(--ns-nps-depth) + 8px);
		padding-top: calc(var(--ns-nps-depth) + 16px);
	}

	.ns-nps__title {
		font-size: 20px;
	}
}