/*
 * Menu de gauche moderne pour tout le site (demande de Najet, 2026-10-26) — dessiné par menu-moderne.js.
 *
 * Version 2 : reprend à l'identique la barre latérale du CRM Entreprises v2 (crm-entreprises-v2.css, .c2-rail) :
 * carte blanche collée à gauche de l'écran, en-tête du module, rubriques en petites majuscules, icônes au
 * trait, entrée ouverte sur le fond doux du module avec une barre à gauche, repliable en icônes seules.
 * Tout est sous html.brRail, posée seulement quand le nouveau menu est construit : sans script, ou sur un
 * écran de moins de 1100 px, le site reste exactement comme avant.
 */

nav.brRailMenu {
	display: none;
}

html.brRail {
	--br-rail-l: 272px;
}

html.brRail.brRailReplie {
	--br-rail-l: 96px;
}

/* L'ancien menu et sa colonne disparaissent, le contenu prend toute la largeur et se décale à droite du menu. */
html.brRail .sectionMenu.brAncienMenu,
html.brRail .brMenuSource.brAncienMenu,
html.brRail .brColMenu {
	display: none !important;
}

html.brRail .brColContenu {
	width: 100% !important;
	margin-left: 0 !important;
}

html.brRail .wrapper.brAvecRail {
	margin-left: calc(var(--br-rail-l) + 32px) !important;
	margin-right: auto !important;
	max-width: min(1288px, calc(100vw - var(--br-rail-l) - 56px)) !important;
	transition: margin-left .25s cubic-bezier(.4, 0, .2, 1);
}

/* Menu replié : le contenu prend toute la largeur restante (demande de Najet, 2026-10-26). */
html.brRail.brRailReplie .wrapper.brAvecRail {
	max-width: none !important;
	width: auto !important;
	margin-right: 24px !important;
}

/* ------------------------------------------------------------------------------------------- la carte */
html.brRail nav.brRailMenu {
	display: block;
	position: fixed;
	z-index: 40;
	left: 16px;
	top: 83px;
	bottom: 72px; /* laisse la place à la pastille de langue (FR) en bas à gauche */
	width: var(--br-rail-l);
	transition: width .25s cubic-bezier(.4, 0, .2, 1);
	font-family: 'Satoshi-Medium', 'Satoshi', 'DM Sans', sans-serif;
	color: #042E5B;
}

nav.brRailMenu .brRailIn {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(4, 46, 91, .04), 0 8px 24px rgba(4, 46, 91, .06);
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
}

nav.brRailMenu .brRailCorps {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: #DCE6F5 transparent;
	margin: 0 -12px;
	padding: 0 12px;
}

nav.brRailMenu .brRailCorps::-webkit-scrollbar {
	width: 4px;
}

nav.brRailMenu .brRailCorps::-webkit-scrollbar-thumb {
	background: #DCE6F5;
	border-radius: 999px;
}

/* ------------------------------------------------------------------------------------------- en-tête */
nav.brRailMenu .brRailTete {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 6px 18px;
	margin-bottom: 6px;
	border-bottom: 1px solid #EEF3FB;
}

nav.brRailMenu .brRailMod {
	width: 36px;
	height: 36px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(160deg, var(--br-accent, #6694FD), var(--br-accent-fonce, #2555C3));
	box-shadow: 0 2px 6px rgba(4, 46, 91, .12);
}

/* L'en-tête est le lien Accueil : pas de barre à gauche ni de libellé en gras de plus que le titre. */
nav.brRailMenu .brRailAccueil {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	margin: -6px;
	padding: 6px;
	border-radius: 12px;
	text-decoration: none;
	color: #042E5B;
}

nav.brRailMenu a.brNav.brRailAccueil {
	min-height: 0;
	margin: -6px;
	padding: 6px;
	font-size: inherit;
}

nav.brRailMenu a.brNav.brRailAccueil::before {
	display: none;
}

nav.brRailMenu .brRailMod img {
	width: 36px;
	height: 36px;
	display: block;
}

nav.brRailMenu .brRailMod i {
	font-size: 22px;
}

nav.brRailMenu .brRailTete .lib {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

nav.brRailMenu .brRailTete strong {
	font-family: 'Satoshi-Bold', 'Satoshi', 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #042E5B;
}

nav.brRailMenu .brRailTete small {
	font-size: 11px;
	color: #7587B4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Bouton Replier / Déplier (demande d'Ali, 2026-10-28 : le rond blanc qui débordait de la carte était
   « moche ») : un bouton discret DANS la carte, à droite de l'en-tête, icône « panneau » au trait, sans
   bordure ni ombre ; au survol, le fond doux du module. Menu replié : sous la tuile du module. */
nav.brRailMenu .brRailReplier {
	position: static;
	flex: none;
	width: 32px;
	height: 32px;
	min-height: 0;
	margin: 0 0 0 auto;
	padding: 0;
	border-radius: 9px;
	border: 0;
	background: transparent;
	color: #A0B2CB;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	cursor: pointer;
	line-height: 1;
	transition: background-color .15s ease, color .15s ease;
}

nav.brRailMenu .brRailReplier:hover {
	background: var(--br-accent-doux, #EEF3FF);
	color: var(--br-accent-fonce, #2555C3);
}

nav.brRailMenu .brRailReplier:active {
	transform: scale(.94);
}

/* ------------------------------------------------------------------------------------------- entrées */
nav.brRailMenu .brRailSec {
	font-family: 'Satoshi-Bold', 'Satoshi', 'DM Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #A0B2CB;
	margin: 16px 10px 8px;
	padding: 0;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

nav.brRailMenu a.brNav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 12px;
	margin: 0 0 4px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: #4D678A;
	text-decoration: none;
	border: 0;
	transition: background .15s, color .15s;
}

nav.brRailMenu a.brNav svg {
	flex: none;
	color: #7587B4;
	transition: color .15s;
}

nav.brRailMenu a.brNav .lib {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

nav.brRailMenu a.brNav:hover {
	background: #F5F9FF;
	color: #042E5B;
}

nav.brRailMenu a.brNav:hover svg {
	color: #042E5B;
}

nav.brRailMenu a.brNav.on {
	background: var(--br-accent-doux, #EAF0FF);
	color: #042E5B;
	font-family: 'Satoshi-Bold', 'Satoshi', 'DM Sans', sans-serif;
	font-weight: 700;
}

nav.brRailMenu a.brNav.on svg {
	color: var(--br-accent-fonce, #2555C3);
}

nav.brRailMenu a.brNav.on::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--br-accent, #6694FD);
}

nav.brRailMenu a.brNav .n {
	margin-left: auto;
	background: #FFE4E2;
	color: #B32C24;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	padding: 1px 8px;
}

nav.brRailMenu a.brNav:focus-visible,
nav.brRailMenu .brRailReplier:focus-visible {
	outline: 2px solid #2F62E0;
	outline-offset: 2px;
}

nav.brRailMenu .brRailPied {
	padding-top: 12px;
	border-top: 1px solid #EEF3FB;
}

nav.brRailMenu a.brNav.discret {
	font-size: 13px;
	color: #7587B4;
}

/* ------------------------------------------------------------------------------------------- replié */
html.brRail.brRailReplie nav.brRailMenu .brRailIn {
	padding-left: 10px;
	padding-right: 10px;
}

html.brRail.brRailReplie nav.brRailMenu .brRailAccueil {
	flex: none;
	justify-content: center;
}

html.brRail.brRailReplie nav.brRailMenu .brRailTete {
	justify-content: center;
	padding-left: 0;
	padding-right: 0;
	flex-direction: column;
	gap: 10px;
}

html.brRail.brRailReplie nav.brRailMenu .brRailReplier {
	margin: 0;
}

html.brRail.brRailReplie nav.brRailMenu .brRailTete .lib,
html.brRail.brRailReplie nav.brRailMenu a.brNav .lib {
	display: none;
}

html.brRail.brRailReplie nav.brRailMenu .brRailSec {
	height: 1px;
	margin: 12px 8px;
	background: #EEF3FB;
	font-size: 0;
}

html.brRail.brRailReplie nav.brRailMenu a.brNav {
	justify-content: center;
	padding: 0;
}

html.brRail.brRailReplie nav.brRailMenu a.brNav .n {
	position: absolute;
	top: 6px;
	right: 10px;
	width: 8px;
	height: 8px;
	padding: 0;
	font-size: 0;
	border-radius: 50%;
	background: #FF3B30;
}

/* ------------------------------------------------------------------------------------------- bulles
   Menu replié : une bulle d'aide à droite de l'icône survolée (menu-moderne.js, installerBulles), posée
   dans le body en position fixe d'après la position réelle de l'entrée, donc jamais coupée par le
   défilement de la liste. Flèche vers l'icône, liseré à la couleur du module, apparition en fondu. */
.brRailBulle {
	position: fixed;
	z-index: 70;
	transform: translate(-6px, -50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	background: linear-gradient(135deg, #0B3A6E, #042E5B);
	color: #FFFFFF;
	font-family: 'Satoshi-Medium', 'Satoshi', 'DM Sans', sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: .01em;
	white-space: nowrap;
	padding: 7px 12px 7px 13px;
	border-radius: 8px;
	border-left: 3px solid var(--br-accent, #6694FD);
	box-shadow: 0 2px 4px rgba(4, 46, 91, .12), 0 8px 22px rgba(4, 46, 91, .22);
	transition: opacity .14s ease, transform .14s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .14s;
}

.brRailBulle::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 2px;
	background: var(--br-accent, #6694FD);
	transform: rotate(45deg);
}

.brRailBulle.visible {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	transition: opacity .14s ease, transform .14s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.brRailBulle,
	.brRailBulle.visible {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.brRail nav.brRailMenu,
	html.brRail .wrapper.brAvecRail {
		transition: none;
	}
}

/* Najet (2026-10-30, Figma 4716-15262) : le bouton Replier / Déplier redevient un petit carré blanc posé à cheval
   sur le bord droit du menu, à la hauteur de l'en-tête, avec un chevron seul. Mêmes règles replié et déplié. */
nav.brRailMenu .brRailReplier,
html.brRail.brRailReplie nav.brRailMenu .brRailReplier {
	position: absolute;
	top: 12px;
	right: -24px;
	z-index: 2;
	width: 24px;
	height: 24px;
	margin: 0;
	border-radius: 6px;
	border: 1px solid #E6EBF2;
	background: #FFFFFF;
	color: #042E5B;
	box-shadow: 0 1px 3px rgba(4, 46, 91, .10);
}
nav.brRailMenu .brRailReplier:hover,
html.brRail.brRailReplie nav.brRailMenu .brRailReplier:hover {
	background: #F5F8FC;
	color: #042E5B;
}