/**
 * Visiora Core — Composant : Breadcrumb
 *
 * Fil d’Ariane indiquant la position de l’utilisateur
 * dans l’arborescence du site ou de l’application.
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - typography.css
 * - radius.css
 * - shadows.css
 * - animation.css
 * - containers.css
 * - primitives/icon.css
 *
 * @package Visiora_Core
 */

/* ======================================================
   1. BASE
   ====================================================== */

.v-breadcrumb {
	--v-breadcrumb-font-size: var(--v-text-small-size);

	display: block;
	inline-size: 100%;
	min-inline-size: 0;
	color: var(--v-color-text);
	font-family: var(--v-font-family-body);
}

/* ======================================================
   2. LISTE
   ====================================================== */

.v-breadcrumb__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--v-space-component-xs);
	margin:
		calc(var(--v-space-1) * -1);
	padding: var(--v-space-1);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	list-style: none;
	scrollbar-width: thin;
}

/*
 * overflow-x reste utilisé volontairement.
 *
 * La propriété logique overflow-inline n’offre pas encore
 * une compatibilité suffisamment uniforme pour constituer
 * le contrat principal du composant.
 *
 * Le padding protège les anneaux de focus du premier et du
 * dernier lien contre le rognage provoqué par le conteneur
 * scrollable.
 *
 * La marge négative compense cet espace dans le layout externe.
 */

/* ======================================================
   3. ÉLÉMENTS
   ====================================================== */

.v-breadcrumb__item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	min-inline-size: 0;
}

/* ======================================================
   4. LIENS
   ====================================================== */

.v-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--v-color-link);
	font-size: var(--v-breadcrumb-font-size);
	font-weight: var(--v-text-small-weight);
	line-height: var(--v-text-small-line-height);
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--v-transition-component);
}

.v-breadcrumb__link:hover {
	color: var(--v-color-link-hover);
	text-decoration: none;
}

.v-breadcrumb__link:focus {
	outline: none;
}

.v-breadcrumb__link:focus-visible {
	border-radius: var(--v-radius-sm);
	box-shadow: var(--v-shadow-focus);
	outline: none;
}

/* ======================================================
   5. PAGE COURANTE
   ====================================================== */

.v-breadcrumb__current {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--v-color-heading);
	font-size: var(--v-breadcrumb-font-size);
	font-weight: var(--v-font-weight-semibold);
	line-height: var(--v-text-small-line-height);
	white-space: nowrap;
}

/* ======================================================
   6. SÉPARATEUR
   ====================================================== */

.v-breadcrumb__separator {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: var(--v-color-text-muted);
	transform-origin: center;
}

/*
 * Le séparateur doit être purement décoratif :
 *
 * aria-hidden="true"
 *
 * L’inversion RTL est appliquée au wrapper du séparateur,
 * et non directement à .v-icon.
 *
 * Cette approche évite d’écraser une éventuelle transformation
 * déclarée par la primitive Icon.
 */

.v-breadcrumb:dir(rtl) .v-breadcrumb__separator {
	transform: scaleX(-1);
}

/* ======================================================
   7. TAILLES
   ====================================================== */

.v-breadcrumb--sm {
	--v-breadcrumb-font-size: var(--v-font-size-xs);
}

.v-breadcrumb--md {
	--v-breadcrumb-font-size: var(--v-font-size-sm);
}

.v-breadcrumb--lg {
	--v-breadcrumb-font-size: var(--v-font-size-md);
}

/* ======================================================
   8. ÉTATS
   ====================================================== */

.v-breadcrumb.is-hidden,
.v-breadcrumb[hidden] {
	display: none;
}

/* ======================================================
   9. ACCESSIBILITÉ
   ====================================================== */

/*
 * Structure officielle :
 *
 * <nav
 *     class="v-breadcrumb"
 *     aria-label="Fil d’Ariane"
 * >
 *     <ol class="v-breadcrumb__list">
 *         <li class="v-breadcrumb__item">
 *             ...
 *         </li>
 *     </ol>
 * </nav>
 *
 * Le dernier élément porte :
 *
 * aria-current="page"
 *
 * Le composant ne doit contenir qu’un seul élément
 * utilisant aria-current="page".
 *
 * Les séparateurs utilisent :
 *
 * aria-hidden="true"
 *
 * Le titre de la page courante ne doit normalement pas être
 * rendu comme un lien vers la page elle-même.
 */

@media (forced-colors: active) {
	.v-breadcrumb__link {
		color: LinkText;
		forced-color-adjust: auto;
	}

	.v-breadcrumb__current,
	.v-breadcrumb__separator {
		color: CanvasText;
		forced-color-adjust: auto;
	}

	.v-breadcrumb__link:focus-visible {
		outline:
			var(--v-size-border-medium)
			solid
			Highlight;
		outline-offset: var(--v-size-border-medium);
		box-shadow: none;
	}
}

/* ======================================================
   10. RESPONSIVE
   ====================================================== */

/*
 * Le Breadcrumb ne revient pas volontairement à la ligne.
 *
 * Lorsque l’espace disponible devient insuffisant :
 *
 * - la liste reste sur une seule ligne ;
 * - les libellés conservent white-space: nowrap ;
 * - un défilement horizontal devient disponible.
 *
 * Aucun breakpoint spécifique n’est nécessaire.
 */

/* ======================================================
   11. REDUCED MOTION
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
	.v-breadcrumb__link {
		transition: none;
	}
}

/* ======================================================
   12. COMPATIBILITÉ WORDPRESS
   ====================================================== */

.v-root .v-breadcrumb,
.v-root .v-breadcrumb__list,
.editor-styles-wrapper .v-breadcrumb,
.editor-styles-wrapper .v-breadcrumb__list {
	box-sizing: border-box;
}

.v-root .v-breadcrumb ol,
.editor-styles-wrapper .v-breadcrumb ol {
	list-style: none;
}

/* ======================================================
   13. COMPATIBILITÉ GUTENBERG
   ====================================================== */

.wp-block .v-breadcrumb {
	max-inline-size: 100%;
}

/* ======================================================
   14. COMPATIBILITÉ SPECTRA
   ====================================================== */

.uagb-container__content .v-breadcrumb,
.uagb-infobox .v-breadcrumb {
	max-inline-size: 100%;
}

/* ======================================================
   15. PERFORMANCE ET SÉCURITÉ
   ====================================================== */

/*
 * - Aucun JavaScript requis pour la présentation.
 * - Aucun gestionnaire inline.
 * - Aucun contenu HTML utilisateur non échappé.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Compatible RTL.
 * - Compatible Schema.org BreadcrumbList.
 * - Aucun positionnement absolu.
 * - Aucun z-index.
 * - Aucun contexte d’empilement.
 * - Aucun retour à la ligne imprévisible.
 * - Les dimensions utilisent des propriétés logiques.
 * - Les liens dynamiques doivent être validés et échappés
 *   côté PHP avant le rendu.
 */