/*
 * blocks/stepper-band.css — bandeau fond couleur + motif SVG, étapes numérotées.
 * Complète guest.css, ne redéfinit aucune primitive existante.
 */

.stepper-band {
	position: relative;
	background-color: var(--teal);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='2' cy='2' r='2' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E");
	padding-block: var(--s20);
	overflow: hidden;
}
.stepper-band .eyebrow { background: rgba(255,255,255,.18); color: #fff; }
.stepper-band .section__head h2 { color: #fff; }
.stepper-band .section__head p { color: rgba(255,255,255,.85); margin-top: var(--s3); max-width: 560px; margin-inline: auto; }

.stepper-band__steps {
	display: grid;
	grid-template-columns: repeat(var(--step-count, 4), 1fr);
	gap: var(--s10);
	margin-top: var(--s16);
	position: relative;
}
.stepper-band__step { text-align: center; padding: var(--s6) var(--s4); background: rgba(0,0,0,.12); border-radius: var(--radius-lg, 12px); }
.stepper-band__num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
	color: var(--teal);
	font-size: 1.3rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	box-shadow: var(--shadow-card);
}
.stepper-band__step h3 { color: #fff; margin-top: var(--s5); }
.stepper-band__step p { color: rgba(255,255,255,.82); margin-top: var(--s2); }

.stepper-band__cta { text-align: center; margin-top: var(--s16); }

@media (max-width: 760px) {
	.stepper-band__steps { grid-template-columns: 1fr; gap: var(--s10); }
}