/* Étapes - dubost-concept/etapes */

.dc-etapes__grille {
	display: grid;
	gap: 3rem;
}

.dc-etapes__tete {
	align-self: start;
}

.dc-etapes__titre {
	font-size: clamp(1.5rem, 2.4vw, 2.15rem);
}

.dc-etapes__cartes {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Chaque carte colle un peu plus bas que la précédente : elles s'empilent. */
.dc-etapes__carte {
	position: sticky;
	top: calc(var(--dc-entete-h) + 1rem + var(--n, 0) * 18px);
	display: flex;
	flex-direction: column;
	min-height: 380px;
	overflow: hidden;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	border-radius: var(--dc-rayon);
	background: #fff;
	box-shadow: 0 -10px 40px rgba(17, 20, 24, 0.07);
	color: var(--dc-gris-texte);
	isolation: isolate;
}

.dc-fond--blanc .dc-etapes__carte--blanche {
	box-shadow: 0 -10px 40px rgba(17, 20, 24, 0.07), inset 0 0 0 1.5px var(--dc-ligne);
}

.dc-etapes__haut {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.dc-etapes__numero {
	color: var(--dc-bleu);
	font-family: var(--dc-titres);
	font-size: 1.15rem;
	font-weight: 700;
}

.dc-etapes__etiquette {
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--dc-voile);
	color: var(--dc-bleu-fonce);
	font-size: 0.9rem;
	font-weight: 600;
}

.dc-etapes .dc-etapes__nom {
	margin: auto 0 0;
	padding-top: 3rem;
	color: var(--dc-encre);
	font-size: clamp(1.4rem, 2.4vw, 2.05rem);
	letter-spacing: -0.035em;
	line-height: 1;
}

.dc-etapes__texte {
	max-width: 32rem;
	margin-top: 0.9rem;
	font-size: 1.15rem;
}

.dc-etapes__texte p {
	margin: 0;
}

.dc-etapes__carte--bleue {
	background: var(--dc-bleu);
	color: rgba(255, 255, 255, 0.88);
}

.dc-etapes__carte--claire {
	background: var(--dc-clair);
	color: #3a4049;
}

.dc-etapes__carte--nuit {
	background: var(--dc-nuit);
	color: rgba(255, 255, 255, 0.82);
}

.dc-etapes .dc-etapes__carte:is(.dc-etapes__carte--bleue, .dc-etapes__carte--nuit) :is(.dc-etapes__nom, .dc-etapes__numero) {
	color: #fff;
}

.dc-etapes__carte:is(.dc-etapes__carte--bleue, .dc-etapes__carte--nuit) .dc-etapes__etiquette {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.dc-etapes__carte--claire .dc-etapes__etiquette {
	background: #fff;
}

/* La sphère éclaire la dernière carte, en bas à droite. */
.dc-etapes__sphere {
	--dc-sphere: 3.25rem;

	position: absolute;
	z-index: -1;
	right: clamp(1.75rem, 3.5vw, 2.75rem);
	bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.dc-etapes__sphere .dc-lueur {
	width: 520px;
}

.dc-etapes__carte--nuit .dc-etapes__texte {
	margin-right: 4rem;
}

@media (min-width: 950px) {
	.dc-etapes__grille {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 5rem;
	}

	.dc-etapes__tete {
		position: sticky;
		top: calc(var(--dc-entete-h) + 2rem);
	}
}