/**
 * Widget « Fil d'Ariane CercleKit » — structure + variables.
 * Les couleurs/écarts arrivent en variables --ck-bc-* posées sur {{WRAPPER}}
 * par les contrôles Elementor ; ici on les CONSOMME avec un repli. La typo
 * n'est pas imposée : elle est héritée (contrôle Typographie sur .ck-breadcrumb).
 */

.ck-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ck-bc-gap, 8px);
	line-height: 1.4;
}

.ck-breadcrumb__prefix {
	color: var(--ck-bc-prefix, inherit);
	margin-right: var(--ck-bc-gap, 8px);
}

.ck-breadcrumb__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ck-bc-gap, 8px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ck-breadcrumb__item,
.ck-breadcrumb__sep {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.ck-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	color: var(--ck-bc-link, inherit);
	text-decoration: none;
	transition: color .15s ease;
}

.ck-breadcrumb__link:hover,
.ck-breadcrumb__link:focus-visible {
	color: var(--ck-bc-link-h, var(--ck-bc-link, inherit));
	text-decoration: underline;
}

.ck-breadcrumb__current {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	color: var(--ck-bc-current, inherit);
	font-weight: 600;
}

.ck-breadcrumb__sep {
	color: var(--ck-bc-sep, currentColor);
	font-size: var(--ck-bc-sep-size, inherit);
	opacity: .7;
	user-select: none;
	/* Décalage vertical fin pour aligner le glyphe (›, /, flèche) sur le texte. */
	transform: translateY(var(--ck-bc-sep-y, 0));
}

/* L'icône d'accueil et l'icône-séparateur suivent la taille du texte. */
.ck-breadcrumb__home-icon svg,
.ck-breadcrumb__home-icon i,
.ck-breadcrumb__sep svg,
.ck-breadcrumb__sep i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	vertical-align: middle;
}

.ck-breadcrumb__sep svg,
.ck-breadcrumb__sep i {
	font-size: var(--ck-bc-sep-size, inherit);
}