/* Couche CSS « core » (voir Theme::buildCoreHeaders) : gagne sur BootstrapVendor, perd contre tout CSS sans couche (Theme.css, pages Produit). */
@layer core {
/* ================================================================================================
	MENU (Core)
	Scoping via la classe-marqueur .bootstrap-menu, posée par Menu.js sur sa racine
	(générique - <div>, pas <nav> - voir Menu.js, en-tête)
================================================================================================ */
body {
	--bootstrap-menu-accent: var(--bs-tertiary-bg);
	--bootstrap-menu-accent-contrast: var(--bs-body-color);
	--bootstrap-menu-background: var(--bs-secondary-bg);
	--bootstrap-menu-text: var(--bs-body-color);
}

.bootstrap-menu {
	--bs-navbar-padding-x: 0;
	--bs-navbar-padding-y: 0;

	/* Plancher/plafond du bouton (voir Menu.js options.itemMinWidth/itemMaxWidth) -
	   défauts Core, redéfinissables par option à l'instanciation ou par le Thème
	   via override de ces 2 variables (même patron que l'accent à 2 niveaux). */
	--bootstrap-menu-item-minwidth: 75px;
	--bootstrap-menu-item-maxwidth: 300px;

	/* Zéro espacement natif entre un déclencheur et son popup - élimine le vide
	   physique qui casse un survol lent (le popup se ferme avant que la souris ne
	   l'atteigne). --bs-dropdown-spacer couvre la CSS (margin-top/margin-left des
	   variantes .dropend), data-bs-offset="0,0" (posé par Menu.js sur chaque
	   trigger) couvre le décalage Popper interne à Bootstrap (offset:[0,2] par
	   défaut) - LES DEUX sont nécessaires, l'un n'implique pas l'autre. */
	--bs-dropdown-spacer: 0;

	background-color: var(--bootstrap-menu-background) !important;
}

/* Piège flexbox classique, imbriqué sur 3 niveaux (.navbar -> .container-fluid ->
   .navbar-nav) : min-width vaut "auto" par défaut sur un item flex, ce qui
   l'empêche de rétrécir sous la taille de SON PROPRE contenu, à CHAQUE niveau -
   nécessaire à la mesure elle-même (this._ul.clientWidth doit refléter la largeur
   RÉELLEMENT disponible), pas juste cosmétique. */
.bootstrap-menu,
.bootstrap-menu .container-fluid,
.bootstrap-menu .navbar-nav {
	min-width: 0;
}

.bootstrap-menu .navbar-nav {
	flex-direction: row;
	flex-wrap: nowrap;
	/* PAS de overflow:hidden ici : un popup (.dropdown-menu) est un DESCENDANT DOM
	   de .navbar-nav même positionné en absolute - un overflow:hidden sur cet
	   ancêtre le rognerait entièrement (bug réel rencontré : Bootstrap ouvrait
	   bien le popup - classe .show posée - mais invisible, découpé par cette
	   règle). Conséquence assumée : barMode:'full' sur un espace insuffisant
	   déborde visuellement plutôt que d'être clippé - compromis nécessaire, pas
	   une régression volontaire de la mécanique de bordure. */
}

/* Plancher/plafond (voir Menu.js) - EXCLUT compact/hamburger : un item icône-seule
   n'a pas de label à borner (voir architecture cible, section 2.1 - "concerne
   uniquement auto et full"). */
.bootstrap-menu .navbar-nav:not(.bootstrap-menu-compact):not(.bootstrap-menu-hamburger) > li {
	min-width: var(--bootstrap-menu-item-minwidth);
	max-width: var(--bootstrap-menu-item-maxwidth);
}

.bootstrap-menu .navbar-nav > li {
	flex-shrink: 1;
	flex-grow: 0;
}

.bootstrap-menu .navbar-nav > li > .nav-link {
	display: flex;
	align-items: center;
	width: 100%; /* borne le bouton à la largeur du <li> (déjà réduite par min/max-width) - sans ça, le bouton garde sa largeur de contenu naturelle et déborde visuellement du <li> */
	min-width: 0; /* laisse le label interne rétrécir sous son contenu naturel - même piège flexbox, un niveau plus bas */
	overflow: hidden;
	/* Dégagement de chaque côté - même valeur que le padding horizontal des
	   dropdown-item (--bs-dropdown-item-padding-x, cohérence visuelle demandée).
	   Cette variable n'est déclarée qu'à l'intérieur de .dropdown-menu (portée
	   Bootstrap), donc pas héritable ici - même valeur reprise en dur (1rem). */
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Le label cède seul (ellipsis) - icône et chevron restent toujours entiers, voir
   architecture cible section 2.1. */
.bootstrap-menu-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bootstrap-menu .nav-link {
	color: var(--bootstrap-menu-text);
}

/* Taille des glyphes - mask-image en 1em (voir Glyphs.css), donc font-size pilote
   directement la taille rendue. Scopé à .bootstrap-menu uniquement, jamais les
   glyphes du reste de la page. */
.bootstrap-menu [class^="bi-"],
.bootstrap-menu [class*=" bi-"],
.bootstrap-menu [class^="im-"],
.bootstrap-menu [class*=" im-"] {
	font-size: 1.25em;
}

.bootstrap-menu .dropdown-toggle {
	cursor: pointer; /* jamais de href sur ce genre d'item (voir Menu.js, en-tête) - affordance posée ici plutôt qu'en inline */
}

/* Retire le halo de focus (box-shadow bleu, règle Bootstrap .nav-link:focus-visible)
   sur nos triggers - un <button> le déclenche au clic (heuristique Chromium),
   contrairement à un <a> (les items URL) qui ne l'affiche jamais au clic. Parité
   demandée avec les liens. Note : :focus-visible ne distingue pas clic souris et
   vraie navigation clavier pour un <button> - ce retrait touche donc les deux,
   pas seulement le clic. */
.bootstrap-menu .dropdown-toggle:focus-visible {
	outline: 0;
	box-shadow: none;
}

.bootstrap-menu .nav-item:hover {
	background-color: var(--bootstrap-menu-accent);
}

.bootstrap-menu .nav-item .active {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	color: var(--bootstrap-menu-text);
}

/* Survol discret sur l'item déjà actif - peint directement sur l'élément actif
   (couvre déjà tout le nav-item, width:100%), pas sur le nav-item lui-même :
   masque naturellement le hover accent habituel sans avoir à le neutraliser. */
.bootstrap-menu .active:hover {
	background-color: var(--bs-tertiary-bg);
}

.bootstrap-menu .dropdown-item:hover {
	background-color: var(--bootstrap-menu-accent);
	color: var(--bootstrap-menu-accent-contrast);
}

.bootstrap-menu .dropdown-item.active {
	background-color: transparent;
	color: var(--bootstrap-menu-text);
}

.bootstrap-menu-tooltip {
	--bs-tooltip-bg: var(--bootstrap-menu-accent-contrast);
	--bs-tooltip-color: var(--bootstrap-menu-accent);
}

/* Popup ancré (niveau 1, et niveau 2+ en mode cascade) - BootstrapVendor pose déjà
   tout le reste nativement (position, flip, preventOverflow) dès qu'un vrai
   bootstrap.Dropdown pilote l'élément (voir Menu.js, "Option C" - plus AUCUN CSS
   maison de positionnement ici, contrairement à l'ancienne version). La classe
   Bootstrap native `dropend` (posée par Menu.js sur tout noeud cascade niveau 2+)
   gère seule le positionnement latéral ET la rotation du chevron - vérifié dans
   bootstrap.css, rien à dupliquer ici. */
.bootstrap-menu .navbar-nav .dropdown-menu {
	position: absolute;
}

/* Filet complémentaire à preventOverflow (voir Menu.js, _ensureDropdownInstance) :
   preventOverflow repositionne pour rester dans le viewport, mais ne réduit
   jamais la TAILLE d'un popup plus haut que l'espace disponible au complet (ex.
   une liste de 100 items) - ce plafond + défilement couvre ce cas. Posé
   UNIQUEMENT sur les popups terminaux (voir Menu.js, _markScrollable) - jamais
   sur un popup qui héberge lui-même un sous-menu cascade, sinon overflow:auto le
   clipperait (même piège que .navbar-nav plus haut, un niveau plus profond). */
.bootstrap-menu .navbar-nav .dropdown-menu.bootstrap-menu-scrollable {
	max-height: 80vh;
	overflow-y: auto;
}

/* Chevron du niveau 1 - reflète le vrai état Bootstrap (.show), plus précis que
   l'ancienne approximation par :hover (qui ne reflétait que le survol CSS, pas
   l'état réel d'un vrai Dropdown natif). */
.bootstrap-menu .navbar-nav > li > .dropdown-toggle.show::after {
	transform: rotate(180deg);
}

/* display:flex nécessaire ICI (pas juste sur le chevron) - Bootstrap rend
   .dropdown-item en display:block par défaut, contexte où margin-left:auto sur un
   ::after n'a aucun effet. Sans ce flex, le chevron reste collé au texte peu
   importe la marge demandée plus bas. */
.bootstrap-menu .dropdown-menu .dropdown-toggle {
	display: flex;
	align-items: center;
}

/* Chevron aligné à droite du popup (jamais dans la barre elle-même, où la largeur
   du bouton est déjà bornée par itemMinWidth/Max) - pousse le triangle au bord
   opposé du groupe icône+label plutôt que collé au texte. */
.bootstrap-menu .dropdown-menu .dropdown-toggle::after {
	margin-left: auto;
}

/* Padding icône/label - inchangé */
.bootstrap-menu .nav-item span {
	padding: 0 .5rem 0 .25rem;
}

/* Un consommateur qui positionne une instance à droite (ex. menu du compte, Header) le
   fait dans Theme.css, scopé à sa propre classe de zone - jamais ici. Aucun ajout
   nécessaire pour empêcher un débordement à droite du viewport : Bootstrap pose
   déjà `preventOverflow` par défaut sur tout Dropdown (vérifié dans bootstrap.js),
   qui garde le popup dans les limites de l'écran tout seul, peu importe où la
   barre est positionnée - contrairement à l'ancienne version (CSS :hover pur, sans
   Popper impliqué), qui nécessitait un correctif Theme.css dédié pour ce cas. */

/* ================================================================================================
	CHILDMODE:'stacked' - <details>/<summary> imbriqués, natif, profondeur illimitée.
	Utilisé pour le contenu d'un popup ancré (niveau 2+) OU d'un Offcanvas (niveau 1+)
	- jamais pour la barre elle-même (toujours navbar-nav, voir plus haut).
================================================================================================ */
.bootstrap-menu-list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem; /* indentation par niveau, cumulative par imbrication native */
}

.bootstrap-menu-list > li:first-child > .bootstrap-menu-list,
.bootstrap-menu-list > li > details > .bootstrap-menu-list,
.dropdown-menu > li:first-child > .bootstrap-menu-list,
.dropdown-menu > li > details > .bootstrap-menu-list {
	padding-left: 1rem;
}

/* Portée .bootstrap-menu (racine), PAS .bootstrap-menu-list : le premier niveau
   d'un rendu stacked, quand il est le contenu direct d'un popup ancré à la barre,
   vit dans un <ul class="dropdown-menu"> (exigé par Bootstrap pour que Dropdown le
   détecte) - jamais .bootstrap-menu-list, qui n'apparaît qu'aux niveaux imbriqués
   plus profonds. Scoper à .bootstrap-menu-list ratait donc tout le premier niveau
   (bug réel, découvert en testant : summary restait display:block, chevron absent). */
.bootstrap-menu summary {
	display: flex;
	align-items: center;
	cursor: pointer;
	list-style: none; /* masque le triangle natif de <summary> - remplacé ci-dessous par le même chevron que Bootstrap utilise pour .dropdown-toggle, pour rester cohérent visuellement avec le mode cascade */
}

.bootstrap-menu summary::-webkit-details-marker {
	display: none;
}

/* Chevron de remplacement - même triangle que Bootstrap pose nativement sur
   .dropdown-toggle::after (bordures, pas un glyphe), aligné à droite comme en
   mode cascade (voir plus haut). Tourne de 90° une fois le <details> ouvert. */
.bootstrap-menu summary::after {
	display: inline-block;
	margin-left: auto;
	content: "";
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
	transition: transform .15s ease-in-out;
}

.bootstrap-menu details[open] > summary::after {
	transform: rotate(180deg);
}

.bootstrap-menu .dropdown-item {
	display: flex;
	align-items: center;
}

/* ================================================================================================
	Offcanvas (barMode:'hamburger') - habillage minimal, le mécanisme (ouverture/
	fermeture/backdrop/focus/ESC) est 100% natif bootstrap.Offcanvas.
================================================================================================ */
.bootstrap-menu-offcanvas {
	background-color: var(--bootstrap-menu-background);
	color: var(--bootstrap-menu-text);
}

/* Cibles tactiles - ce panneau est presque toujours utilisé au doigt, jamais à la
   souris (voir architecture cible, mapping profil -> mode). Padding vertical
   généreux (~48px de hauteur totale par ligne, icône 22px comprise - norme usuelle
   Apple/Google pour une cible tactile confortable), gap plutôt que padding
   ponctuel pour l'espace icône/label. Scopé à childMode:'stacked' - PAS à
   l'Offcanvas spécifiquement : childMode:'stacked' est le vrai signal "pensé pour
   un doigt", et peut très bien vivre dans un popup ANCRÉ (ex. zone Context en
   profil Mobile, qui reste toujours en popup ancré - jamais l'Offcanvas - tout en
   étant en stacked). Jamais la cascade Desktop (souris, cibles déjà précises). */
.bootstrap-menu-childmode-stacked .dropdown-item,
.bootstrap-menu-childmode-stacked summary {
	padding: .75rem 1rem;
	gap: .5rem;
}

/* Bouton de fermeture - se dimensionne entièrement via font-size (icône ET zone
   cliquable en em, voir bootstrap.css .btn-close) - une seule propriété suffit. */
.bootstrap-menu-offcanvas .btn-close {
	font-size: 1.75rem;
}

.bootstrap-menu-hamburger-toggle {
	cursor: pointer;
	background: transparent;
	border: 0;
}

/* Palier compact (icône seule, jamais le texte) - masque le label, chaîne
   d'enfants directs uniquement (ul > li > a|button > span), jamais un sélecteur de
   descendant qui toucherait aussi un sous-menu déjà déplié. */
.bootstrap-menu-compact > li > .nav-link > .bootstrap-menu-label {
	display: none;
}
.bootstrap-menu-compact > li > .nav-link.dropdown-toggle::after {
	display: none;
}
}