/* ==========================================================================
   BO E-Shop : mise en page (refonte 2026-10-06)
   - barre latérale bleu nuit (#0f2740 -> #0a1929, comme la page de connexion)
   - rail d'icônes (html.bo-rail, mémorisé par navigateur) avec sous-menus en volet
   - barre du haut claire : menu, recherche globale, contraste, alertes, bug, profil
   - mobile (< 992px) : menu en tiroir (body.bo-sb-open) + fond assombri
   Comportement : /js/bo-eshop/bo-layout.v1.js. Nouvelle version = nouveau nom de fichier.
   ========================================================================== */

:root {
	--bo-sb-w: 272px;
	--bo-rail-w: 68px;
	--bo-top-h: 60px;
	--bo-sb-bg-1: #0f2740;
	--bo-sb-bg-2: #0a1929;
	--bo-sb-text: #c9d6e5;
	--bo-sb-muted: #7f95ad;
	--bo-sb-hover: rgba(255, 255, 255, .07);
	--bo-accent: #1e6fd9;
	--bo-accent-2: #3b8cff;
	--bo-top-bg: #ffffff;
	--bo-top-border: #e4e9f0;
	--bo-top-text: #2b3a4f;
	--bo-top-icon: #52637a;
	--bo-top-hover: #eef2f7;
	--bo-field-bg: #f2f5f9;
	--bo-field-border: #dfe6ef;
	--bo-ease: cubic-bezier(.4, 0, .2, 1);
	--bo-dur: .26s;
}

body.bo-layout {
	--bo-cur: var(--bo-sb-w);
}

html.bo-rail body.bo-layout {
	--bo-cur: var(--bo-rail-w);
}

/* Menu masqué (ancienne préférence de session hide_menu, ou fenêtre popup qui ajoute .hidden) */
body.bo-layout.bo-menu-hidden,
body.bo-layout:has(#area-menu-left.hidden) {
	--bo-cur: 0px;
}

/* Animations uniquement après le premier rendu (pas de saut au chargement) */
html.bo-anim #area-menu-left.bo-sidebar {
	transition: width var(--bo-dur) var(--bo-ease), transform var(--bo-dur) var(--bo-ease);
}

html.bo-anim #area-menu-top.bo-topbar,
html.bo-anim body.bo-layout #area_content {
	transition: margin-left var(--bo-dur) var(--bo-ease);
}

html.bo-anim #area-menu-left .bo-brand-text,
html.bo-anim #area-menu-left .bo-sec-label,
html.bo-anim #area-menu-left .bo-sec-chevron {
	transition: opacity .18s var(--bo-ease);
}

/* --------------------------------------------------------------------------
   Barre latérale
   -------------------------------------------------------------------------- */
#area-menu-left.bo-sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1035;
	width: var(--bo-sb-w);
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 1 !important;
	color: var(--bo-sb-text) !important;
	background: linear-gradient(180deg, var(--bo-sb-bg-1) 0%, var(--bo-sb-bg-2) 100%) !important;
	box-shadow: 1px 0 0 rgba(255, 255, 255, .04), 4px 0 18px rgba(10, 25, 41, .18);
}

#area-menu-left.bo-sidebar.hidden {
	display: none !important;
}

/* Marque */
#area-menu-left .bo-brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--bo-top-h);
	padding: 0 16px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

#area-menu-left .bo-brand-logo {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--bo-accent-2), var(--bo-accent));
	color: #fff;
	font-size: 15px;
	box-shadow: 0 4px 12px rgba(30, 111, 217, .35);
}

#area-menu-left .bo-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}

#area-menu-left .bo-brand-name {
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .01em;
}

#area-menu-left .bo-brand-env {
	margin-top: 3px;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 600;
	color: #ffb4b4;
	background: rgba(229, 56, 59, .18);
	border: 1px solid rgba(229, 56, 59, .35);
	border-radius: 6px;
	padding: 1px 7px;
}

/* Zone défilante */
#area-menu-left .bo-sb-scroll {
	position: relative !important;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 10px 24px !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

#area-menu-left .bo-sb-scroll::-webkit-scrollbar {
	width: 6px;
}

#area-menu-left .bo-sb-scroll::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .18);
	border-radius: 3px;
}

#area-menu-left .nav-item {
	margin-left: 0;
	color: var(--bo-sb-text) !important;
	font-weight: 400;
}

#area-menu-left #list_menu > li > hr {
	margin: 8px 6px;
	border-color: rgba(255, 255, 255, .15);
	opacity: 1;
}

/* Titres de section */
#area-menu-left .sidenav-menu-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase !important;
	white-space: nowrap;
	color: var(--bo-sb-muted) !important;
	cursor: pointer;
	user-select: none;
}

#area-menu-left .sidenav-menu-heading:hover {
	color: #e6eef8 !important;
	background: var(--bo-sb-hover);
}

#area-menu-left .bo-sec-icon {
	flex: 0 0 20px;
	width: 20px;
	text-align: center;
	font-size: 14px;
	letter-spacing: 0;
}

#area-menu-left .bo-sec-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

#area-menu-left .bo-sec-chevron {
	flex: 0 0 auto;
	font-size: 10px;
	opacity: .8;
	transition: transform .2s var(--bo-ease);
}

#area-menu-left #list_menu > li.bo-open > .sidenav-menu-heading {
	color: #e6eef8 !important;
}

#area-menu-left #list_menu > li.bo-open > .sidenav-menu-heading .bo-sec-chevron {
	transform: rotate(180deg);
}

/* Sous-menus */
#area-menu-left #list_menu > li > ul {
	padding: 2px 0 6px 0 !important;
	margin: 0;
}

#area-menu-left #list_menu > li,
#area-menu-left #list_menu > li > ul,
#area-menu-left #list_menu > li > ul > li {
	min-width: 0;
	max-width: 100%;
}

#area-menu-left #list_menu > li > ul > li {
	margin: 0;
}

#area-menu-left .nav-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 1px 0;
	padding: 7px 10px 7px 12px !important;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.3;
	white-space: normal;
	color: var(--bo-sb-text) !important;
}

html.bo-sb-anim #area-menu-left .nav-link {
	white-space: nowrap;
}

#area-menu-left .nav-link:hover {
	color: #fff !important;
	background: var(--bo-sb-hover);
}

#area-menu-left .nav-link-icon {
	flex: 0 0 20px;
	width: 20px;
	text-align: center;
	color: var(--bo-sb-muted) !important;
}

#area-menu-left .nav-link-icon i {
	margin: 0 !important;
}

#area-menu-left .nav-link.text-danger,
#area-menu-left .nav-link.text-danger .nav-link-icon,
#area-menu-left .nav-link .text-danger {
	color: #ff8f99 !important;
}

/* Compteurs dans le menu : en ligne, à droite (pas de débordement hors de la barre) */
#area-menu-left .nav-link .badge {
	position: static !important;
	transform: none !important;
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 10.5px;
}

/* Élément actif */
#area-menu-left .nav-link.active,
#area-menu-left .nav-link.collapsed.active {
	color: #fff !important;
	background: linear-gradient(90deg, var(--bo-accent), #2a7de8);
	box-shadow: 0 4px 12px rgba(30, 111, 217, .35);
}

#area-menu-left .nav-link.active .nav-link-icon,
#area-menu-left .nav-link.active i {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Barre du haut + contenu
   -------------------------------------------------------------------------- */
#area-menu-top.bo-topbar {
	position: sticky;
	top: 0;
	z-index: 1030;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: var(--bo-top-h);
	margin-left: var(--bo-cur);
	padding: 8px 16px;
	background: var(--bo-top-bg);
	color: var(--bo-top-text);
	border-bottom: 1px solid var(--bo-top-border);
	box-shadow: 0 1px 6px rgba(15, 39, 64, .05);
}

body.bo-layout #area_content {
	margin-left: var(--bo-cur);
	width: auto;
}

body.bo-layout #area_controller {
	min-width: 0;
}

#area-menu-top .bo-top-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

#area-menu-top .bo-top-spacer {
	flex: 1 1 auto;
}

#area-menu-top .bo-icon-btn {
	position: relative;
	width: 40px !important;
	height: 40px !important;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--bo-top-icon) !important;
	font-size: 17px !important;
	box-shadow: none;
}

#area-menu-top .bo-icon-btn:hover,
#area-menu-top .bo-icon-btn:focus-visible {
	background: var(--bo-top-hover);
	color: var(--bo-top-text) !important;
}

#area-menu-top .bo-icon-btn.bo-muted {
	color: #9aa8ba !important;
}

#area-menu-top .bo-badge {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #e5383b;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
	border: 2px solid var(--bo-top-bg);
}

#area-menu-top .bo-ico-dark {
	display: none;
}

body.bg-dark #area-menu-top .bo-ico-light {
	display: none;
}

body.bg-dark #area-menu-top .bo-ico-dark {
	display: inline-block;
}

/* Recherche globale (mêmes identifiants, nouvelle présentation) */
#area-menu-top #master_search_tool.bo-search {
	flex: 1 1 420px;
	max-width: 620px;
	height: 42px;
	margin-left: 6px;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	background: var(--bo-field-bg);
	border: 1px solid var(--bo-field-border);
	border-radius: 999px;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}

#area-menu-top #master_search_tool.bo-search:focus-within {
	background: #fff;
	border-color: #9cc2f5;
	box-shadow: 0 0 0 3px rgba(30, 111, 217, .15);
}

#area-menu-top #master_search_tool #btn_master_search_tool {
	flex: 0 0 auto;
	height: auto;
	margin: 0;
	padding: 0 12px 0 16px;
	border: 0 !important;
	border-right: 1px solid var(--bo-field-border) !important;
	border-radius: 999px 0 0 999px !important;
	background: transparent;
	color: var(--bo-top-text);
	font-weight: 600;
	font-size: 13px !important;
	box-shadow: none;
}

#area-menu-top #master_search_tool #btn_master_search_tool:hover,
#area-menu-top #master_search_tool #btn_master_search_tool.show {
	color: var(--bo-accent);
}

#area-menu-top #master_search_tool .bo-search-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 2px 0 12px;
	color: #8a99ad;
	font-size: 14px;
}

#area-menu-top #master_search_tool #field_master_search {
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	height: auto;
	padding: 0 10px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--bo-top-text);
	font-size: 14px;
	box-shadow: none;
	text-overflow: ellipsis;
}

#area-menu-top #master_search_tool #field_master_search::placeholder {
	color: #8a99ad;
}

#area-menu-top #master_search_tool #end_btn_master_search_tool {
	flex: 0 0 auto;
	width: auto;
	min-width: 14px;
	padding: 0 12px 0 0;
	border: 0 !important;
	border-radius: 0 999px 999px 0 !important;
	background: transparent;
}

#area-menu-top #master_search_tool #loader_master_search {
	color: var(--bo-accent) !important;
}

#area-menu-top #master_search_tool #btn_master_search {
	width: auto;
	color: var(--bo-top-icon) !important;
	background: transparent;
}

#area-menu-top #master_search_tool #btn_master_search h5 {
	margin: 0;
	font-size: 15px;
}

#area-menu-top #ddl_master_search_tool {
	border-radius: 10px !important;
	padding: 6px;
	border: 1px solid var(--bo-top-border);
	box-shadow: 0 12px 32px rgba(15, 39, 64, .16);
}

#area-menu-top #ddl_master_search_tool .dropdown-item {
	border-radius: 6px;
	padding: 6px 10px;
}

#area-menu-top #ddl_master_search_tool .dropdown-item i {
	width: 18px;
	margin-right: 6px;
	color: #7a8ba0;
}

/* Profil */
#area-menu-top .bo-profile-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px !important;
	margin-left: 6px;
	padding: 4px 12px 4px 4px;
	border: 1px solid var(--bo-top-border);
	border-radius: 999px;
	background: var(--bo-top-bg);
	color: var(--bo-top-text);
	box-shadow: none;
}

#area-menu-top .bo-profile-btn:hover,
#area-menu-top .bo-profile-btn.show {
	background: var(--bo-top-hover);
}

.bo-avatar {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--bo-accent-2), var(--bo-sb-bg-1));
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
}

.bo-avatar.bo-avatar-lg {
	width: 44px;
	height: 44px;
	font-size: 15px;
}

#area-menu-top .bo-profile-email {
	max-width: 230px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 500;
}

#area-menu-top .bo-profile-chevron {
	font-size: 10px;
	color: #8a99ad;
}

#bo_profile_menu.bo-profile-menu {
	width: 330px;
	max-width: calc(100vw - 24px);
	padding: 0 0 6px;
	margin-top: 8px !important;
	border: 1px solid var(--bo-top-border);
	border-radius: 12px !important;
	box-shadow: 0 16px 40px rgba(15, 39, 64, .18);
	overflow: hidden;
	font-size: 13.5px;
}

#bo_profile_menu .bo-profile-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(180deg, var(--bo-sb-bg-1), var(--bo-sb-bg-2));
	color: #fff;
}

#bo_profile_menu .bo-profile-id {
	min-width: 0;
}

#bo_profile_menu .bo-profile-name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#bo_profile_menu .bo-profile-env {
	margin-top: 2px;
	font-size: 12px;
	color: #ffb4b4;
}

#bo_profile_menu .sidenav-footer.bo-profile-body {
	position: static;
	width: auto;
	padding: 10px 16px 4px;
}

#bo_profile_menu .sidenav-footer-block {
	margin: 0 0 6px 0;
	overflow-wrap: anywhere;
}

#bo_profile_menu .bo-profile-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 12px;
}

#bo_profile_menu .bo-profile-passkey {
	margin: 0;
}

#bo_profile_menu .dropdown-item {
	padding: 8px 16px;
	font-size: 13.5px;
}

#bo_profile_menu .dropdown-item i {
	width: 18px;
	text-align: center;
	color: #7a8ba0;
}

#bo_profile_menu .dropdown-item.bo-logout,
#bo_profile_menu .dropdown-item.bo-logout i {
	color: #c62f3a;
}

#area-menu-top .bo-not-logged {
	color: var(--bo-top-text);
}

/* Mode sombre (« Inverser les contrastes » : body.bg-dark) */
body.bg-dark {
	--bo-top-bg: hsl(220 12% 17%);
	--bo-top-border: hsl(220 10% 25%);
	--bo-top-text: hsl(0 0% 88%);
	--bo-top-icon: hsl(215 15% 72%);
	--bo-top-hover: hsl(220 12% 24%);
	--bo-field-bg: hsl(220 12% 22%);
	--bo-field-border: hsl(220 10% 30%);
}

body.bg-dark #area-menu-left.bo-sidebar {
	--bo-sb-bg-1: #0c2035;
	--bo-sb-bg-2: #071321;
}

body.bg-dark #area-menu-top #master_search_tool #field_master_search,
body.bg-dark #area-menu-top #master_search_tool #field_master_search:disabled {
	background: transparent !important;
	color: var(--bo-top-text) !important;
	border: 0 !important;
}

body.bg-dark #area-menu-top #master_search_tool.bo-search:focus-within {
	background: hsl(220 12% 20%);
}

body.bg-dark #bo_profile_menu,
body.bg-dark #area-menu-top #ddl_master_search_tool {
	background: hsl(220 12% 19%);
	color: hsl(0 0% 88%);
}

body.bg-dark #bo_profile_menu .dropdown-item,
body.bg-dark #area-menu-top #ddl_master_search_tool .dropdown-item {
	color: hsl(0 0% 88%);
}

body.bg-dark #bo_profile_menu .dropdown-item:hover,
body.bg-dark #area-menu-top #ddl_master_search_tool .dropdown-item:hover {
	background: hsl(220 12% 26%);
}

body.bg-dark #bo_profile_menu .dropdown-item.bo-logout,
body.bg-dark #bo_profile_menu .dropdown-item.bo-logout i {
	color: #ff8f99;
}

/* --------------------------------------------------------------------------
   Rail d'icônes (ordinateur uniquement)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	html.bo-rail #area-menu-left.bo-sidebar {
		width: var(--bo-rail-w);
	}

	html.bo-rail #area-menu-left .bo-brand {
		padding: 0 16px;
	}

	html.bo-rail #area-menu-left .bo-brand-text,
	html.bo-rail #area-menu-left .bo-sec-label,
	html.bo-rail #area-menu-left .bo-sec-chevron {
		opacity: 0;
		pointer-events: none;
	}

	html.bo-rail #area-menu-left .bo-sb-scroll {
		padding: 10px 8px 24px !important;
		scrollbar-width: none;
	}

	html.bo-rail #area-menu-left .bo-sb-scroll::-webkit-scrollbar {
		display: none;
	}

	html.bo-rail #area-menu-left .sidenav-menu-heading {
		gap: 0;
		padding: 11px 0 11px 14px;
		margin-top: 2px;
		font-size: 0;
	}

	html.bo-rail #area-menu-left .bo-sec-icon {
		flex-basis: 24px;
		width: 24px;
		font-size: 16px;
	}

	/* Section contenant la page active */
	html.bo-rail #area-menu-left #list_menu > li:has(.nav-link.active) > .sidenav-menu-heading {
		color: #fff !important;
		background: linear-gradient(90deg, var(--bo-accent), #2a7de8);
		box-shadow: 0 4px 12px rgba(30, 111, 217, .35);
	}

	html.bo-rail #area-menu-left #list_menu > li.bo-fly > .sidenav-menu-heading {
		color: #fff !important;
		background: rgba(255, 255, 255, .12);
	}

	html.bo-rail #area-menu-left #list_menu > li > ul {
		display: none !important;
	}

	/* Volet de sous-menu à droite du rail */
	html.bo-rail #area-menu-left #list_menu > li.bo-fly > ul {
		display: block !important;
		position: fixed;
		left: calc(var(--bo-rail-w) + 8px);
		top: var(--bo-fly-top, 80px);
		z-index: 1045;
		min-width: 250px;
		max-width: 320px;
		max-height: calc(100vh - var(--bo-fly-top, 80px) - 12px);
		overflow-y: auto;
		padding: 0 8px 8px !important;
		border-radius: 12px;
		background: linear-gradient(180deg, var(--bo-sb-bg-1), var(--bo-sb-bg-2));
		border: 1px solid rgba(255, 255, 255, .08);
		box-shadow: 0 18px 44px rgba(10, 25, 41, .38);
		animation: bo-fly-in .16s var(--bo-ease);
	}

	html.bo-rail #area-menu-left #list_menu > li.bo-fly > ul > li {
		max-width: none;
	}

	html.bo-rail #area-menu-left #list_menu > li.bo-fly .nav-link {
		white-space: nowrap;
	}

	html.bo-rail #area-menu-left #list_menu > li.bo-fly > ul::before {
		content: attr(data-bo-title);
		display: block;
		padding: 12px 6px 8px;
		margin-bottom: 4px;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		font-size: 11.5px;
		font-weight: 600;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--bo-sb-muted);
	}

	@keyframes bo-fly-in {
		from {
			opacity: 0;
			transform: translateX(-6px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* --------------------------------------------------------------------------
   Tablette / mobile : tiroir
   -------------------------------------------------------------------------- */
.bo-sb-backdrop {
	display: none;
}

@media (max-width: 991.98px) {
	body.bo-layout {
		--bo-cur: 0px;
	}

	#area-menu-left.bo-sidebar {
		top: 0 !important;
		width: min(var(--bo-sb-w), 86vw);
		transform: translateX(-105%);
		box-shadow: none;
	}

	body.bo-sb-open #area-menu-left.bo-sidebar {
		transform: none;
		box-shadow: 8px 0 30px rgba(10, 25, 41, .35);
	}

	body.bo-sb-open .bo-sb-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1034;
		background: rgba(10, 25, 41, .45);
	}

	body.bo-sb-open {
		overflow: hidden;
	}

	#area-menu-top .bo-profile-email,
	#area-menu-top .bo-profile-chevron {
		display: none;
	}

	#area-menu-top .bo-profile-btn {
		padding: 4px;
	}
}

@media (max-width: 767.98px) {
	#area-menu-top.bo-topbar {
		flex-wrap: wrap;
		gap: 4px;
		padding: 8px 10px;
	}

	#area-menu-top #master_search_tool.bo-search {
		order: 10;
		flex: 1 1 100%;
		max-width: none;
		margin: 2px 0 0;
	}

}

@media (max-width: 420px) {
	#area-menu-top .bo-hide-xs {
		display: none;
	}

	#area-menu-top #master_search_tool #btn_master_search_tool {
		padding: 0 8px 0 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.bo-anim #area-menu-left.bo-sidebar,
	html.bo-anim #area-menu-top.bo-topbar,
	html.bo-anim body.bo-layout #area_content {
		transition: none;
	}
}