/*
 * AXEK Elements – Sur-titre / Pilule (par 6LEX – https://6lex.co)
 * Label d'en-tête réutilisable : « texte » (sur-titre à tiret) ou « pilule »
 * (badge arrondi). Deux ambiances (fond clair / sombre) via variables.
 * Letter-spacing à 0 par défaut.
 */
.axek-pill, .axek-pill *{ box-sizing:border-box; }

.axek-pill{
	/* Ambiance fond clair (défaut) */
	--pl-ink:var(--ax-terra); --pl-bg:var(--ax-terra-voile); --pl-bd:transparent; --pl-dash:var(--ax-terra);
}
.axek-pill--sombre{
	--pl-ink:#ffffff; --pl-bg:rgba(255,255,255,.12); --pl-bd:var(--ax-filet-sombre); --pl-dash:rgba(255,255,255,.55);
}

.axek-pill-el{
	display:inline-flex; align-items:center; gap:10px;
	font-weight: 500; font-size: var(--ax-meta); line-height: 1.2;
	letter-spacing: 0; text-transform:uppercase;
	color:var(--pl-ink); text-decoration:none;
	transition:opacity var(--axk-dur) var(--axk-ease);
}
a.axek-pill-el:hover{ opacity:.72; }

/* Marque de sur-titre : la barre penchée AXEK, comme sur les 9 autres
   widgets. Le nom de classe reste `-dash` — il est référencé par le
   contrôle de couleur, dont le nom est une clé enregistrée en base. */
.axek-pill-dash{
	flex:none;
	width: var(--ax-sur-barre-w); height: var(--ax-sur-barre-h);
	border-radius: calc(var(--ax-sur-barre-w) / 2);
	background: var(--pl-dash);
	transform: rotate(var(--ax-sur-barre-a));
}

/* pilule arrondie */
.axek-pill-el.is-pill{
	background:var(--pl-bg);
	border:1px solid var(--pl-bd);
	border-radius:100px;
	padding:8px 16px 8px 16px;
}