/* =====================================================================
   Exavoris — sgbl_pathnav.css  (components/pathnav)
   Habillage du fil d'Ariane : barre pleine largeur sous l'en-tête,
   bloc « Retour » à gauche, maillons à droite.

   Aucune variable n'est DÉFINIE ici — seulement consommée depuis le :root de
   gbl_styles.css (cf. _direction/FD2_app-conventions/edition-css.md), qui n'est donc
   pas touché : aucune page n'a de cache-busting à relever de ce fait.

   > Le bloc « Retour » ne porte PAS les classes .buttonstructure-* /
   > .buttonstyle-* : ce n'est pas un bouton posé DANS une mise en page, c'est une
   > ZONE de la barre — pleine hauteur, affleurant le bord de l'écran, sans contour
   > ni rayon, contenu calé à droite. Les .buttonstructure-* (padding, bordure,
   > rayon, contenu centré) y seraient tous à neutraliser. La couleur, elle, reste
   > celle de .buttonstyle-accentfill (mêmes tokens --cl-accent*) : l'écart porte sur
   > la structure, jamais sur la palette. Écart du même ordre que celui documenté
   > pour le bouton d'isolement de sgbl_sunburst.css.

   Sections ordonnées : A petits éléments · B textes · C secondaires · D structurels.
   ===================================================================== */

/* ---------- A. Petits éléments fonctionnels ---------- */

/* Bloc « Retour » : double le maillon parent du fil (même destination). D'où le
   survol partagé — .linked-hover est posé sur les DEUX par sgbl_pathnav.js. */
.path-nav-back {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 0 20px;
	background-color: var(--cl-accent);
	color: var(--cl-blanc-i1);
	text-decoration: none;
	user-select: none; /* le fil, lui, reste sélectionnable : son texte se copie tel quel */
	transition: background-color 0.15s;
}

.path-nav-back:hover,
.path-nav-back.linked-hover {
	background-color: var(--cl-accent-hover);
}

.path-nav-back:active {
	background-color: var(--cl-accent-active);
}

.path-nav-back[hidden] {
	display: none;
}

.path-nav-back-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* Marqueur de maillon : barre basse affleurant le bas de la barre. Atténuée sur un
   maillon cliquable (affordance), pleine sur le maillon courant et au survol. Un
   nœud de regroupement (.path-nav-group, sans page propre) n'en porte pas : il
   n'est pas une destination. */
.path-nav-link::after,
.path-nav-current::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	transition: background-color 0.15s;
}

.path-nav-link::after {
	background-color: color-mix(in srgb, var(--cl-accent) 30%, transparent);
}

.path-nav-current::after,
.path-nav-link:hover::after,
.path-nav-link.linked-hover::after {
	background-color: var(--cl-accent);
}

/* ---------- B. Textes ---------- */

.path-nav-back-label,
.path-nav-link,
.path-nav-current,
.path-nav-group {
	font-size: var(--ht-texte-09);
	font-weight: var(--wg-texte-medium);
}

.path-nav-link {
	color: var(--theme-texte-secondaire);
	text-decoration: none;
	transition: color 0.15s;
}

.path-nav-link:hover,
.path-nav-link.linked-hover,
.path-nav-current {
	color: var(--theme-texte-primaire);
}

/* Nœud de regroupement (« Technologies », « Compte ») : contexte, pas destination. */
.path-nav-group {
	color: var(--theme-texte-tertiaire);
}

/* Séparateurs. « / » entre deux pages distinctes (élément de liste propre) ;
   « : » à l'intérieur d'un maillon, quand le complément désigne un contenu de la
   MÊME page que son porteur (ex. « Analyse d'entreprise : META »). */
.path-nav-sep,
.path-nav-join {
	color: var(--theme-texte-tertiaire);
	font-weight: var(--wg-texte-regular);
	white-space: pre; /* les espaces autour du séparateur viennent du texte, cf. sgbl_pathnav.js */
}

.path-nav-sep {
	padding: 0 4px;
}

/* ---------- C. Secondaires (décor / conteneurs) ---------- */

/* Dégradé horizontal : le fond de page à gauche (le bloc Retour s'y détache),
   la nuance la plus claire à droite. Les deux nuances suivent le thème. */
.path-nav {
	width: 100%;
	background-image: linear-gradient(
		to right,
		var(--theme-bg-primaire) 0%,
		var(--theme-bg-primaire) 20%,
		var(--theme-bg-tertiaire) 100%
	);
	border-bottom: 1px solid var(--theme-border-color);
}

.path-nav[hidden] {
	display: none;
}

/* ---------- D. Structurels (layout) ---------- */

.path-nav-inner {
	display: flex;
	align-items: stretch;
	height: 40px;
}

.path-nav-back-slot {
	flex: 0 0 auto;
	width: clamp(150px, 19.3vw, 356px);
}

.path-nav-content {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 25px;
	overflow-x: auto;
	scrollbar-width: none; /* fil défilable sans barre : 8px mangeraient 20 % de la hauteur */
}

.path-nav-content::-webkit-scrollbar {
	display: none;
}

.path-nav-breadcrumb {
	display: flex;
	align-items: stretch;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.path-nav-breadcrumb li {
	display: flex;
	align-items: center;
}

/* height:100% + position:relative : le marqueur de maillon se cale sur le bas de
   la BARRE (et non sous le texte), largeur du libellé (complément inclus). */
.path-nav-link,
.path-nav-current,
.path-nav-group {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
}

@media (max-width: 800px) {
	/* Plus de largeur réservée : le bloc Retour se réduit à son contenu. */
	.path-nav-back-slot { width: auto; }
	.path-nav-back { padding: 0 16px; }
	.path-nav-content { padding-left: 16px; }
	.path-nav-sep { padding: 0 6px; }
}