/*
 * kp-eyebrow.css — Eyebrow signature KP.
 *
 * Figma : divider 48×1 ─ dot 6×6 ─ LABEL uppercase ─ dot ─ divider (tout blanc, centré).
 * En tête de chaque section. CSS pur, zéro asset. Auto-enqueué (kp-pattern-eyebrow).
 *
 * Usage markup :
 *   <span class="kp-eyebrow">Le bureau</span>
 * Les dividers + dots sont générés en ::before / ::after + pseudo via les dots.
 */

.kp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--kp-space-3);
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-14);
	font-weight: var(--kp-font-weight-medium);
	letter-spacing: var(--kp-letter-spacing-eyebrow, 2px);
	text-transform: uppercase;
	color: var(--kp-color-text-inverse);
	line-height: 1;
}

/* Dividers (48×1) de part et d'autre */
.kp-eyebrow::before,
.kp-eyebrow::after {
	content: "";
	width: 48px;
	height: 1px;
	background: var(--kp-color-text-inverse);
	flex-shrink: 0;
}

/* Dots 6×6 internes : rendus via 2 spans optionnels. Si markup simple (sans spans),
 * les dividers seuls suffisent. Pour les dots, ajouter :
 *   <span class="kp-eyebrow"><i></i>Label<i></i></span>
 */
.kp-eyebrow > i {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	background: var(--kp-color-text-inverse);
	display: inline-block;
}

/* Variante accent : dots/dividers en orange */
.kp-eyebrow--accent {
	color: var(--kp-color-brand-primary);
}

.kp-eyebrow--accent::before,
.kp-eyebrow--accent::after,
.kp-eyebrow--accent > i {
	background: var(--kp-color-brand-primary);
}