/**
 * CYPURGE — pièces communes à plusieurs blocs.
 */

/* ── Icônes ─────────────────────────────────────────────────────── */

body.cypurge .c-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

/* La pulsation du badge du héros — animate-pulse de Tailwind. */
body.cypurge .c-pulse {
	animation: cypurge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes cypurge-pulse {
	50% {
		opacity: 0.5;
	}
}

/* ── Pastille du héros ──────────────────────────────────────────── */

body.cypurge .c-eyebrow {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1.75rem;
	padding: 0.55rem 0.8rem;
	border: 1px solid color-mix(in oklab, var(--c-primary) 28%, transparent);
	background: color-mix(in oklab, var(--c-card) 84%, transparent);
	box-shadow: var(--c-shadow-blue);
	font-family: var(--c-font-interface);
	font-size: 11px;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--c-primary);
}

body.cypurge .c-eyebrow::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--c-primary);
	box-shadow: 0 0 0 0.3rem color-mix(in oklab, var(--c-primary) 14%, transparent);
}

/* ── Carte ──────────────────────────────────────────────────────── */

/* La carte blanche qui se soulève au survol. */
body.cypurge .c-card {
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-card);
	background: var(--c-card);
	transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body.cypurge .c-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in oklab, var(--c-primary) 42%, var(--c-border));
	box-shadow: var(--c-shadow-blue);
}

/* La tuile d'icône des prestations. */
body.cypurge .c-icon-tile {
	display: grid;
	width: 3rem;
	height: 3rem;
	place-items: center;
	border-radius: var(--c-radius-md);
	background: color-mix(in oklab, var(--c-primary) 10%, transparent);
	color: var(--c-primary);
}

/* Le filet bleu court, sous la valeur d'une carte. */
body.cypurge .c-rule {
	display: block;
	width: 2.5rem;
	height: 1px;
	margin-top: 1.5rem;
	background: var(--c-primary);
}

/* ── Étapes ─────────────────────────────────────────────────────── */

/* Un filet au-dessus, le numéro en chasse fixe, le titre, le texte. */
body.cypurge .c-step {
	padding-top: 1.25rem;
	border-top: 1px solid var(--c-primary);
}

body.cypurge .c-step__num {
	font-family: var(--c-font-mono);
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--c-primary);
}

body.cypurge .c-step__title {
	font-size: 1rem;
	font-weight: 600;
}

body.cypurge .c-step__text {
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--c-muted-foreground);
}