/* Couche CSS « core » (voir Theme::buildCoreHeaders) : gagne sur BootstrapVendor, perd contre tout CSS sans couche (Theme.css, pages Produit). */
@layer core {
/* ================================================================================================
	HEADER (Core) - mécanique seulement : disposition, tailles, comportement étroit.
	L'apparence (fonds, couleurs, pastilles) vit dans Skin.css.
================================================================================================ */
.bootstrap-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem;
	min-height: var(--bootstrap-nav-h, 3rem);
	padding: 0 .5rem;
	user-select: none;
}

.bootstrap-header-site,
.bootstrap-header-where,
.bootstrap-header-links,
.bootstrap-header-context,
.bootstrap-header-account {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: var(--bootstrap-nav-h, 3rem);
}

.bootstrap-header-site,
.bootstrap-header-account {
	flex: none;
}

.bootstrap-header-where {
	flex: 0 1 auto;
	padding: 0 .25rem;
}

/* MENU_APP et MENU_APP_CONTEXT cèdent la place en premier : Menu.js (barMode 'auto')
   les replie lui-même derrière une icône quand la largeur ne suffit plus. */
.bootstrap-header-links,
.bootstrap-header-context {
	flex: 0 1 auto;
}

/* Le groupe de droite ([MENU_APP_CONTEXT] [SEPARATOR] [ACCOUNT]) est poussé à droite
   par son PREMIER élément présent. */
.bootstrap-header-context,
.bootstrap-header-account {
	margin-left: auto;
}
.bootstrap-header-context ~ .bootstrap-header-account {
	margin-left: 0;
}

/* SEPARATOR : forme seulement - la couleur (accent) vit dans Skin.css */
.bootstrap-header-sep {
	flex: none;
	width: .1875rem;
	height: 1.125rem;
	margin: 0 .5rem;
	border-radius: 2px;
	background: var(--bs-border-color);
}

/* Les instances Menu prennent la couleur de l'en-tête, jamais la leur */
.bootstrap-header .bootstrap-menu {
	--bootstrap-menu-background: transparent;
	flex-wrap: nowrap;
}
.bootstrap-header .bootstrap-menu > .container-fluid {
	padding: 0;
}
.bootstrap-header .bootstrap-menu-offcanvas {
	--bootstrap-menu-background: var(--bs-body-bg);
}

/* ---- Marque (Theme.html : .bootstrap-brand > .bootstrap-brand-mark + -wordmark | -label) ---- */
.bootstrap-brand {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
}
.bootstrap-brand-mark {
	flex: none;
	height: 1.75rem;
	width: auto;
}
.bootstrap-brand-wordmark {
	height: 1.25rem;
	width: auto;
}
.bootstrap-brand-label {
	white-space: nowrap;
}

/* ---- Où je suis : badges séparés par un chevron fin ---- */
.bootstrap-header-trail {
	display: flex;
	align-items: center;
	gap: .25rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bootstrap-header-trail > li {
	display: flex;
	align-items: center;
	gap: .25rem;
	min-width: 0;
}
.bootstrap-header-trail > li + li::before {
	content: "";
	flex: none;
	width: .375rem;
	height: .375rem;
	margin: 0 .25rem 0 .125rem;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .5;
}
.bootstrap-header-badge {
	display: inline-block;
	max-width: 16rem;
	padding: .1875rem .625rem;
	border-radius: 999px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: default;
}

/* Menu.css pose un padding sur tout <span> d'un item (.bootstrap-menu .nav-item span) -
   jamais sur le contenu fourni au déclencheur (marque, avatar) */
.bootstrap-header .bootstrap-menu .nav-item .bootstrap-brand,
.bootstrap-header .bootstrap-menu .nav-item .bootstrap-brand *,
.bootstrap-header .bootstrap-menu .nav-item .bootstrap-avatar {
	padding: 0;
}

/* ---- Avatar ---- */
.bootstrap-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
}

/* ---- Écran étroit : marque réduite au symbole, lieu courant seulement, menu de la page
        sur sa propre ligne ---- */
@media (max-width: 767.98px) {
	.bootstrap-header .bootstrap-brand-mark ~ .bootstrap-brand-wordmark,
	.bootstrap-header .bootstrap-brand-mark ~ .bootstrap-brand-label {
		display: none;
	}
	.bootstrap-header-trail > li:not(:last-child),
	.bootstrap-header-trail > li:last-child::before {
		display: none;
	}
	.bootstrap-header-where {
		flex: 1 1 0;
	}
	/* MENU_APP et MENU_APP_CONTEXT ensemble sur une 2e ligne : le ::after est le saut
	   de ligne (et le filet qui la sépare - couleur dans Skin.css) */
	.bootstrap-header:has(> .bootstrap-header-links, > .bootstrap-header-context)::after {
		content: "";
		order: 9;
		flex: 1 0 100%;
		height: 0;
		border-top: 2px solid var(--bs-border-color);
	}
	.bootstrap-header-sep {
		display: none;
	}
	.bootstrap-header-links {
		order: 10;
		flex: 1 1 0; /* base 0 : laisse la place à MENU_APP_CONTEXT sur la même ligne */
		min-height: 0;
	}
	.bootstrap-header-context {
		order: 11;
		margin-left: auto;
		min-height: 0;
	}
	.bootstrap-header-context ~ .bootstrap-header-account {
		margin-left: auto;
	}
}

/* ---- Tactile : cibles d'au moins 44px ---- */
@media (pointer: coarse) {
	.bootstrap-header .bootstrap-menu .navbar-nav > li > .nav-link {
		min-height: 2.75rem;
	}
}

/* ---- Impression : l'en-tête n'a pas sa place sur papier ---- */
@media print {
	.bootstrap-header {
		display: none;
	}
}
}