/* =============================================================================
   dashboard-sidebar.css — barre latérale gauche du DASHBOARD (baseline maquette Skapa)
   -----------------------------------------------------------------------------
   Thème SOMBRE marine repris du prototype Skapa (« Suivi du dossier ») :
   fond #010940, libellés gris ardoise, lien actif ORANGE pleine largeur.
   Structure/dimensions conservées de l'export Figma « Aside - Sidebar » (256px,
   position fixed, 100vh, scrollable).

   Les COULEURS sont posées ici (CSS dédié de la page) en attendant les tokens de
   thème — regroupées en variables --sb-* en tête de .dashboard-sidebar pour rester
   modifiables d'un seul endroit. À NE PAS coder en dur dans la vue.
   ============================================================================= */

.dashboard-sidebar {
    /* --- Palette : AUCUNE couleur en dur ici. Les valeurs sont définies dans le THÈME
       (assets/src/scss/_theme.default.scss → variables --tg-sidebar-* compilées dans
       assets/themes/default/bootstrap.default.css). On se contente de les aliaser. --- */
    /* Fond = couleur du HEADER personnalisée par l'abonné (/Preferences → --tg-bandeau-fond),
       avec repli sur le marine de la charte. La perso du header pilote ainsi la nav latérale.
       Les autres tons (texte/actif/survol) restent ceux du thème : ils supposent un fond
       SOMBRE (le bandeau est une couleur d'en-tête, prévue pour du texte clair). */
    /* AUCUNE couleur en dur : palette dans le THÈME (_theme.default.scss → --tg-sidebar-* compilées
       dans bootstrap.default.css). Par DÉFAUT thème CLAIR (blanc, maquette Figma « Dashboard Client »).
       Le FOND et le TEXTE suivent EN PRIORITÉ la couleur de header personnalisée par l'abonné
       (Vision Expert → « Mise en forme » → --tg-bandeau-fond / --tg-bandeau-texte poussées au runtime
       par _BandeauTheme.cshtml) : personnaliser le header recolore ainsi AUSSI la barre latérale du
       dashboard. Repli sur le thème clair si l'abonné n'a rien réglé. L'abonné maîtrise la paire
       fond/texte (contraste sous sa responsabilité) ; l'actif orange et les autres tons restent au thème. */
    --sb-bg: var(--tg-bandeau-fond, var(--tg-sidebar-bg));
    /* Le FOND suit la couleur de header abonné (--tg-bandeau-fond, Vision Expert → Mise en forme) ;
       le TEXTE vient du THÈME (--tg-sidebar-text = #475569, maquette Figma) et NON de
       --tg-bandeau-texte, pour rester lisible/homogène sur le fond clair par défaut. */
    --sb-text: var(--tg-sidebar-text);
    --sb-text-hover: var(--tg-sidebar-text-hover);
    --sb-text-fort: var(--tg-sidebar-text-strong);
    --sb-muted: var(--tg-sidebar-muted);
    /* Module de la page courante : NUANCE de la couleur « main » du thème (fond clair, texte main
       assombri pour rester lisible dessus — même mélange que l’en-tête de la Révision), et non plus
       l’aplat orange plein à texte blanc. */
    --sb-actif-bg: rgba(var(--bs-main-rgb), .12);
    --sb-actif-texte: color-mix(in srgb, var(--bs-main) 78%, var(--bs-black));
    --sb-hover-bg: var(--tg-sidebar-hover-bg);
    --sb-champ-bg: var(--tg-sidebar-field-bg);
    --sb-champ-bordure: var(--tg-sidebar-field-border);
    --sb-separateur: var(--tg-sidebar-divider);
    --sb-avatar-bg: var(--tg-sidebar-avatar-bg);

    /* Mise en page en 3 zones : HEAD figé (logo + sélecteurs), SCROLL au milieu
       (modules/utilitaires, seul à défiler), BOTTOM figé (compte + utilisateur). */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 0 .75rem;

    /* Positionnement (Skapa : absolute/900px → fixed/100vh) */
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;

    color: var(--sb-text);
    background: var(--sb-bg);
    overflow: hidden; /* le scroll est porté par .dashboard-sidebar-scroll, pas par la barre entière */
    z-index: 1030;
}

/* Refonte CLAIRE (Figma) : le fond blanc impose du texte SOMBRE. `#topBlock { color:#fff }`
   (spécificité ID) teinterait tout le header en blanc (invisible sur blanc) → on rétablit la
   couleur sombre de la barre avec une spécificité ID, et un filet droit discret sur le fond
   de page clair (#E1EAF3). */
#dashboard-sidebar {
    color: var(--sb-text);
    border-right: 1px solid var(--sb-separateur);
}
#dashboard-sidebar a {
    color: var(--sb-text);
}

/* #topBlock impose color:#fff (bandeau) à TOUT le header via la règle ID `#topBlock a`.
   Sur fond marine on garde des liens clairs → on rétablit la palette sidebar avec une
   spécificité ID (`#dashboard-sidebar …`) pour passer devant. */
#dashboard-sidebar .dashboard-sidebar-menu a {
    color: var(--sb-text);
}

#dashboard-sidebar .dashboard-sidebar-menu a:hover {
    color: var(--sb-text-hover);
}

#dashboard-sidebar .dashboard-sidebar-menu a.active {
    color: var(--sb-actif-texte);
}

/* Zone HAUTE FIGÉE : logo + sélecteurs Dossier/Exercice (ne défile pas). */
.dashboard-sidebar-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    flex: 0 0 auto;
}

/* Zone MILIEU DÉFILANTE : modules + utilitaires. Le scroll vit ICI (ex. « Voir plus de
   modules » avec une longue liste) ; le haut et le bas restent figés.
   `min-height: 0` est requis pour qu'un enfant flex puisse scroller. */
.dashboard-sidebar-scroll {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Scrollbar MASQUÉE (défilement molette/trackpad) : aucune gouttière réservée → pas de
       « padding » à droite et largeur constante (scroll visible ou non). */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dashboard-sidebar-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ---- Logo / marque ---- */
.dashboard-sidebar-logo {
    padding: .25rem 1.25rem 0.25rem;
}

.dashboard-sidebar-logo .image-logo,
.dashboard-sidebar-logo img {
    max-width: 185px;
    height: auto;
}

/* Wordmark Teogest clair (façon maquette Skapa) : ratio ~4.6:1 → ~30px de haut. */
.dashboard-sidebar-logo .dashboard-sidebar-logo-img {
    display: block;
    width: 140px;
    max-width: 100%;
    height: auto;
}

/* Marque produit en TEXTE, affichee a la place du logo quand l'abonne n'en a pas
   (cf. Menu/Parts/_MarqueProduit.cshtml). Typo et couleurs = socle `.tg-marque-produit`
   (shell.css), repris de la page de connexion : ici on ne fixe que la TAILLE.
   `.dashboard-sidebar-brand-accent` n'est plus utilisee (l'accent vient du socle). */
.dashboard-sidebar-brand {
    font-size: 1.3rem;
}

/* Barre mobile : meme marque, a la hauteur de la barre (le logo y fait 24 px). */
.dashboard-mobile-brand {
    font-size: 1.15rem;
}

/* Logo produit (SVG) a la place du texte : meme gabarit que le logo abonne qu'il remplace —
   largeur imposee dans la sidebar, hauteur imposee dans la barre mobile. */
.dashboard-sidebar-logo img.dashboard-sidebar-brand {
    height: auto;
}

img.dashboard-mobile-brand {
    height: 24px;
    width: auto;
}

/* ---- Sélecteurs dossier / exercice (réemploi de _SelecteurSocieteDossier) ---- */
.dashboard-sidebar-selecteurs {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0 0.75rem;
}

/* Le sélecteur = UNE BOÎTE (façon Figma « Dashboard Client ») : le LIBELLÉ (DOSSIER/EXERCICE)
   est DANS la boîte, au-dessus de la VALEUR (gras). Bordure/fond portés par le conteneur ;
   icône à gauche (::before) et chevron/loupe à droite. */
.dashboard-sidebar-selecteurs .comboContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;
    width: 100%;
    min-height: 3.15rem;
    padding: .4rem 2rem .4rem 2.55rem; /* gauche = place icône, droite = chevron/loupe */
    border: 1px dashed var(--sb-champ-bordure);
    border-radius: .35rem;
    background-color: var(--sb-champ-bg);
    cursor: pointer; /* toute la boîte est cliquable (ouverture du sélecteur au clic n'importe où) */
}

.dashboard-sidebar-selecteurs .select-label {
    font-size: .625rem; /* 10px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sb-muted);
    line-height: 1.2;
}

/* Valeur (select / input de recherche) : TRANSPARENTE, sans bordure, GRAS, sur une ligne
   (la boîte + l'icône + le chevron sont portés par le .comboContainer). */
.dashboard-sidebar-selecteurs select,
.dashboard-sidebar-selecteurs input[type="text"] {
    width: 100% !important;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--sb-text-fort);
    font-family: inherit; /* les <select>/<input> n'héritent pas de la police du body → forcer Inter */
    font-size: .8125rem; /* 13px */
    font-weight: 600;
    line-height: 1.3;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ⚠️ controles-natifs.css force `font-family: revert` sur les <select>/<input> natifs (rendu OS),
   avec une spécificité (0,2,1 via `select:not(.form-select):not(.form-control)`) qui bat la nôtre.
   Les selects de la sidebar sont CUSTOM (appearance:none, fond/chevron) → on re-force la police
   héritée (Inter) avec une spécificité ID (1,1,1) pour passer devant. */
#dashboard-sidebar .dashboard-sidebar-selecteurs select,
#dashboard-sidebar .dashboard-sidebar-selecteurs input[type="text"] {
    font-family: inherit;
}

/* Menu déroulant natif des options : rendu par l'OS sur fond clair → texte sombre lisible. */
.dashboard-sidebar-selecteurs select option {
    color: #1e293b;
    background: #ffffff;
}

/* Société = champ de recherche (SocieteSearchEditV2). La LOUPE (`.inputSearchContainerSpan`)
   est placée à droite DE LA BOÎTE : on met `.inputSearchContainer` en position:static pour que
   le span absolu se positionne relativement au `.comboContainer` (position:relative).
   La liste de suggestions (ul.ui-autocomplete) est stylée globalement dans socle/controles-natifs.css. */
.dashboard-sidebar-selecteurs .inputSearchContainer {
    position: static;
    display: block;
    width: 100%;
}

.dashboard-sidebar-selecteurs .inputSearchContainerSpan {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.dashboard-sidebar-selecteurs .inputSearchContainerSpan a,
.dashboard-sidebar-selecteurs .inputSearchContainerSpan a span {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--sb-muted);
    text-decoration: none;
}

.dashboard-sidebar-selecteurs .inputSearchContainerSpan a {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .35rem;
}

.dashboard-sidebar-selecteurs .inputSearchContainerSpan a:hover {
    color: var(--sb-text-fort);
    background: rgba(255, 255, 255, .08);
}

.dashboard-sidebar-selecteurs .inputSearchContainerSpan svg,
.dashboard-sidebar-selecteurs .inputSearchContainerSpan .picto {
    width: 1rem;
    height: 1rem;
}

/* Icône À GAUCHE de la boîte (façon Figma « Dashboard Client ») : DOSSIER (société) /
   CALENDRIER (exercice), SVG Lucide inline gris, centrée verticalement sur toute la boîte. */
.dashboard-sidebar-selecteurs #spanSociete::before,
.dashboard-sidebar-selecteurs .dossier-annuel-container::before {
    content: "";
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.15rem;
    height: 1.15rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}
.dashboard-sidebar-selecteurs #spanSociete::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
}
.dashboard-sidebar-selecteurs .dossier-annuel-container::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2'/%3E%3Ccircle cx='14' cy='15' r='1'/%3E%3C/svg%3E");
}

/* Chevron À DROITE de la boîte exercice (le select est transparent, appearance:none). */
.dashboard-sidebar-selecteurs .dossier-annuel-container::after {
    content: "";
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* Fioritures masquées en mode latéral (baseline) : flèches de navigation, fiche de synthèse,
   ET le bouton-icône « se connecter en tant que » — non pertinent ici (accessible depuis le
   header du haut des autres pages).
   ⚠️ `.en-tant-que` sert AUSSI de classe d'ÉTAT sur le conteneur `.dossier-annuel-container`
   (exercice) → on exclut les conteneurs via `:not(.comboContainer)` pour ne masquer QUE le
   bouton-icône, pas le sélecteur d'exercice.
   🛑 `.retour-cabinet` (picto « maison », accès direct à la société du cabinet) n'est PLUS masqué :
   demande du dev du 07/09/2026 — il doit être offert sur le dashboard comme dans le header du haut.
   Sa présentation est réglée juste en dessous. */
.dashboard-sidebar-selecteurs .arrow-spacer,
.dashboard-sidebar-selecteurs .NavBtnContainer,
.dashboard-sidebar-selecteurs .boutonFicheSynthese,
.dashboard-sidebar-selecteurs .en-tant-que:not(.comboContainer) {
    display: none !important;
}

/* ---- Picto « maison » = accès direct à la société du cabinet (collaborateur sur une société
   gérée) ----
   Même markup, même condition et même comportement que dans le header du haut : le partial
   partagé `_SelecteurSocieteDossier.cshtml` rend le `<a class="retour-cabinet">` (et pose
   `picto-cabinet` sur `#spanSociete`) dès que `estCollabSurSocieteGeree`, sans distinguer le
   header de la sidebar. Il n'y a donc RIEN à ajouter côté vue : seule la présentation change ici.

   Placement : dans la GOUTTIÈRE D'ICÔNE À GAUCHE de la boîte « Dossier », à la place du glyphe
   « dossier » (`#spanSociete::before`), et NON en plus de lui.
   ⚠️ C'est un choix imposé par la LARGEUR : la barre fait 220 px, la boîte 180 px, dont 40,8 px de
   gouttière gauche et 32 px de chevron droit → il reste ~107 px pour la raison sociale, déjà
   tronquée à l'ellipse. Insérer le picto en plus (à gauche comme à droite) coûterait ~25 px de plus
   et rendrait le nom du dossier illisible. Le remplacement est neutre en gabarit, et l'identité de
   la boîte reste portée par son libellé « DOSSIER ». L'ordre visuel reste celui du header (la
   maison est le premier élément à gauche du cluster société).

   🛑 Le picto doit passer AU-DESSUS de l'overlay de clic de la boîte
   (`#spanSociete .societe-toggle::before`, `inset: 0; z-index: 1`) : sans `z-index: 2`, le pointeur
   tombe sur l'overlay, le lien n'est jamais atteint (et le relais de clic de dashboard-sidebar.js,
   qui écarte les `a`/`button` via `e.target.closest(...)`, ouvrirait le sélecteur de société). */
.dashboard-sidebar-selecteurs #spanSociete.picto-cabinet::before {
    display: none;
}

.dashboard-sidebar-selecteurs #spanSociete.picto-cabinet .retour-cabinet {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Le lien est un `<a>` : on neutralise le soulignement. La couleur est fixée sur le glyphe
       ci-dessous — `#topBlock a { color: #fff }` (spécificité ID) la teinterait sinon en blanc,
       invisible sur le fond clair de la barre. */
    text-decoration: none;
    color: var(--bs-main);
}

/* 🛑 Cibler `svg` ET `i` : Lucide remplace l'`<i data-lucide>` par un `<svg>` au rendu et RETIRE
   l'attribut `data-lucide` (parade anti-boucle de lucide-init.js) → une règle `[data-lucide]`
   serait morte dès l'icône réellement affichée. L'`<i>` couvre le battement avant rendu. */
.dashboard-sidebar-selecteurs #spanSociete.picto-cabinet .retour-cabinet > i,
.dashboard-sidebar-selecteurs #spanSociete.picto-cabinet .retour-cabinet > svg {
    width: 1.15rem;
    height: 1.15rem;
    /* Tracé Lucide → la couleur se pose par `color` (le `fill` legacy de topmenu.css est sans
       effet, et n'atteint de toute façon pas la barre : il est scopé à `.navbar-teogest`). */
    color: var(--bs-main);
}

.dashboard-sidebar-selecteurs #spanSociete.picto-cabinet .retour-cabinet:hover > i,
.dashboard-sidebar-selecteurs #spanSociete.picto-cabinet .retour-cabinet:hover > svg {
    opacity: .7;
}

/* ---- Dossier annuel = MÊME composant que le header du haut (menu déroulant Bootstrap) ----
   Le partial _SelecteurSocieteDossier rend désormais, dans le dashboard comme dans le header du
   haut, un dropdown BS (`.dossier-toggle` + `ul.dossier-annuel-menu`) au lieu d'un <select> natif.
   Ici on le présente dans la BOÎTE Figma de la sidebar (bordure/fond/icône déjà portés par
   `.comboContainer.dossier-annuel-container` : ::before calendrier + ::after chevron). */
.dashboard-sidebar-selecteurs .dossier-toggle,
.dashboard-sidebar-selecteurs .societe-toggle {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
}

.dashboard-sidebar-selecteurs .dossier-toggle .dossier-courant-libelle,
.dashboard-sidebar-selecteurs .societe-toggle .societe-courante-libelle {
    color: var(--sb-text-fort);
    font-size: .8125rem; /* 13px, comme la valeur du <select> */
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Caret Bootstrap masqué : le chevron est déjà porté par `.dossier-annuel-container::after`. */
.dashboard-sidebar-selecteurs .dossier-toggle.dropdown-toggle::after,
.dashboard-sidebar-selecteurs .societe-toggle.dropdown-toggle::after {
    display: none;
}

/* TOUTE la boîte « Dossier » déclenche le dropdown : overlay transparent étiré sur le conteneur.
   Les pseudo-éléments icône (::before) et chevron (::after) du conteneur sont en pointer-events:none
   → le clic sur ces zones (dans le padding, hors du contenu du toggle) tombe sur cet overlay,
   qui appartient au `.dossier-toggle` (déclencheur BS). */
.dashboard-sidebar-selecteurs .dossier-annuel-container .dossier-toggle::before,
.dashboard-sidebar-selecteurs #spanSociete .societe-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* 🛑 ... mais le NOM DU DOSSIER ANNUEL doit rester au-dessus de cet overlay, sinon il n'est
   jamais survolé — et l'info-bulle qu'il porte (plage de dates) ne s'affiche JAMAIS.

   L'overlay est à `z-index: 1` alors que le `<span>` de la valeur est en flux normal : le pointeur tombe
   donc sur lui, c'est-à-dire sur le `<a class="dossier-toggle">` — or celui-ci porte
   `data-bs-toggle="dropdown"`, et la délégation d'info-bulles écarte volontairement ces éléments
   (Bootstrap n'admet qu'UNE instance par élément : un tooltip y volerait la place du Dropdown).
   Résultat : `original-title` bien présent dans le DOM, bulle jamais affichée — symptôme d'autant
   plus trompeur qu'un `dispatchEvent` de test envoyé au <span>, lui, l'affiche parfaitement.
   Diagnostic qui tranche en une ligne : `document.elementFromPoint(centre du span)` — s'il ne rend
   pas le span, aucun survol ne l'atteindra. (Mesuré le 03/09/2026.)

   ⚠️ Ne PAS résoudre en mettant `pointer-events: none` sur l'overlay : il existe pour que TOUTE la
   boîte ouvre le menu (padding, icône, chevron). On relève les textes au-dessus de lui : le clic sur
   le texte remonte au `<a>` parent, donc le menu s'ouvre toujours (vérifié). */
.dashboard-sidebar-selecteurs .dossier-annuel-container .dossier-toggle > .dossier-courant-libelle {
    position: relative;
    z-index: 2;
}

/* Panneau déroulant (liste des dossiers) : fond blanc, item courant surligné (comme le header du haut). */
.dashboard-sidebar-selecteurs .dossier-annuel-menu,
.dashboard-sidebar-selecteurs .societe-sidebar-menu {
    min-width: 13rem;
    padding: .35rem;
    background: #fff;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: .6rem;
    box-shadow: 0 .5rem 1.25rem rgb(0 0 0 / 18%);
    /* 🛑 La barre est en `overflow: hidden` (cf. plus haut : son défilement est porté par
       `.dashboard-sidebar-scroll`, pas par elle) : elle CLIPPE donc ses menus déroulants. Sans
       borne de hauteur, un dossier annuel de plusieurs exercices sortait de la barre et se
       retrouvait coupé net, SANS défilement pour atteindre le reste — d'autant plus vite en mobile,
       où la barre devient un tiroir. Le menu société avait déjà sa borne (`.societe-menu-liste`,
       plus bas) ; celui du dossier annuel, non. On la porte donc pour les deux.
       ⚠️ `overflow-x: hidden` est indispensable : `overflow-y: auto` rend AUSSI l'axe X défilant
       (cf. conventions), ce qui sortirait une barre horizontale parasite. */
    max-height: 15rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.dashboard-sidebar-selecteurs .dossier-annuel-menu .dropdown-item,
.dashboard-sidebar-selecteurs .societe-sidebar-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    border-radius: .45rem;
    color: #495057;
    white-space: nowrap;
}

.dashboard-sidebar-selecteurs .dossier-annuel-menu .dropdown-item svg,
.dashboard-sidebar-selecteurs .societe-sidebar-menu .dropdown-item svg {
    width: 1rem;
    height: 1rem;
    color: #9aa0a6;
}

.dashboard-sidebar-selecteurs .dossier-annuel-menu .dropdown-item:hover,
.dashboard-sidebar-selecteurs .societe-sidebar-menu .dropdown-item:hover,
.dashboard-sidebar-selecteurs .dossier-annuel-menu .dropdown-item:focus,
.dashboard-sidebar-selecteurs .societe-sidebar-menu .dropdown-item:focus {
    background: #f1f3f5;
    color: #212529;
}

.dashboard-sidebar-selecteurs .dossier-annuel-menu .dropdown-item.actif-courant,
.dashboard-sidebar-selecteurs .societe-sidebar-menu .dropdown-item.actif-courant {
    color: var(--bs-primary);
    font-weight: 600;
}

/* ---- Sélecteur « Dossier » (société) = MÊME composant que « Dossier annuel » ----
   Depuis la refonte, la boîte société de la sidebar n'est plus un <select> natif ni un champ de
   recherche visible : c'est le même bloc cliquable (libellé + valeur + chevron) que l'exercice.
   Trois variantes, toutes de même APPARENCE :
     • `.societe-toggle.dropdown-toggle` — liste des dossiers en session → menu déroulant Bootstrap ;
     • `.societe-toggle--recherche`      — liste non peuplée (Expert) → le clic est relayé à la loupe
                                           (dashboard-sidebar.js) qui ouvre la fenêtre de recherche ;
     • `.societe-toggle--statique`       — une seule société → aucun menu, aucun chevron. */

/* Chevron à droite de la boîte société, comme pour l'exercice — sauf en variante statique
   (rien à dérouler). Le sélecteur reprend le pseudo `::after` de `.dossier-annuel-container`. */
.dashboard-sidebar-selecteurs #spanSociete:has(.societe-toggle:not(.societe-toggle--statique))::after {
    content: "";
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* Variante RECHERCHE : le champ SocieteSearchEditV2 (input + loupe) reste rendu — la fenêtre de
   recherche s'appuie dessus — mais n'est plus affiché ; seul le bloc libellé/valeur est visible.
   `display:none` n'empêche pas le `loupe.click()` programmatique du relais de clic. */
.dashboard-sidebar-selecteurs #spanSociete:has(.societe-toggle--recherche) .inputSearchContainer {
    display: none;
}

/* Variante STATIQUE : pas de curseur main (rien à ouvrir). */
.dashboard-sidebar-selecteurs .societe-toggle--statique {
    cursor: default;
}

/* Champ de filtre du menu société (au-delà de 8 dossiers). Le panneau est BLANC : on annule ici
   la règle générale des champs de la sidebar (transparents, sans bordure, texte clair). */
.dashboard-sidebar-selecteurs .societe-sidebar-menu .societe-menu-recherche {
    padding: .1rem .35rem .35rem;
}

.dashboard-sidebar-selecteurs .societe-sidebar-menu .societe-menu-input[type="text"] {
    width: 100% !important;
    padding: .25rem .5rem;
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: .45rem;
    background: #fff;
    color: #212529;
    font-weight: 400;
}

.dashboard-sidebar-selecteurs .societe-sidebar-menu .societe-menu-liste {
    max-height: 15rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden; /* `overflow-y:auto` rend AUSSI l'axe X défilant (cf. conventions). */
    list-style: none;
}

/* ---- Sections de menu (Modules / Utilitaires) ---- */
.dashboard-sidebar-nav {
    padding: 0; /* liens pleine largeur (la barre active occupe toute la largeur) */
}

/* Bloc BAS : utilitaires de compte (Contact / Paramètres / Déconnexion) + bloc utilisateur,
   regroupés en bas de la barre (le groupe du haut, en flex:1, occupe l'espace et pousse
   ce bloc tout en bas). */
.dashboard-sidebar-bottom {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto; /* hauteur fixe : ne défile pas et reste collé en bas */
}

/* Groupe d'utilitaires séparé par un liseret (Contact / Paramètres / Déconnexion), cf. Figma. */
.dashboard-sidebar-nav--separe {
    padding-top: .75rem;
    /* Liseret PLUS SOMBRE que les autres séparateurs (demande du 14/10/2026) : il sépare la liste des
       modules du bloc bas. Teinte mêlée au texte de la barre, pour suivre le thème. */
    border-top: 1px solid color-mix(in srgb, var(--sb-separateur), var(--sb-text) 30%);
}

/* Bloc bas : la <nav> porte un padding horizontal (p-2). On le compense par une marge négative
   sur la <ul> pour que le FOND AU SURVOL des items s'étende jusqu'aux bords du rail, comme dans
   les groupes du haut (dont la <nav> n'a pas de padding). Le padding interne des items
   (.dashboard-sidebar-menu a) gère l'inset du texte/icône. */
.dashboard-sidebar-nav--separe .dashboard-sidebar-menu {
    max-width: none;
    margin-left: -.5rem;  /* = padding-left  du .p-2 de la <nav> */
    margin-right: -.5rem; /* = padding-right du .p-2 de la <nav> */
}

/* Même bord gauche transparent (3px) que les items des groupes du haut → les icônes du bloc bas
   (Vos documents, Assistance, Paramètres, Déconnexion) s'alignent horizontalement avec celles des groupes. */
.dashboard-sidebar-nav--separe .dashboard-sidebar-menu a {
    border-left: 3px solid transparent;
}

/* Bloc bas : « Vos documents », « Portail de services » et « Paramètres » AU REPOS dans la couleur des entrées
   « Accès rapide » / « Aide & assistant » (--tg-entree-repos, socle/help-nav.css ; demande du 15/10/2026).
   Survol, focus clavier et module actif gardent leurs couleurs, d’où les exclusions ; les deux entrées de
   panneau ont leurs propres états (panneau ouvert) et sont laissées à leur feuille. */
#dashboard-sidebar .dashboard-sidebar-bottom .dashboard-sidebar-menu a:not(.tg-entree-panneau):not(.active):not(:hover):not(:focus-visible) {
    color: var(--tg-entree-repos);
}

.dashboard-sidebar-section-title {
    padding: .5rem 1.25rem .25rem;
    margin: 0;
    font-size: .6875rem; /* 11px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sb-muted);
    white-space: nowrap; /* le nom de groupe reste TOUJOURS sur une ligne */
}

/* Titre de groupe = UN SEUL déclencheur (nom + chevron) : le clic replie/déplie tout le groupe, et le
   survol de n'importe quelle partie surligne l'ensemble (le hover est porté par le conteneur). */
.dashboard-sidebar-section-title--toggle {
    display: flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
    transition: color .12s ease;
}

.dashboard-sidebar-section-title--toggle:hover,
.dashboard-sidebar-section-title--toggle:focus-visible {
    color: var(--sb-text-hover);
}

/* Nom du groupe : occupe la place restante (le chevron est poussé à droite). */
.dashboard-sidebar-groupe-nom {
    flex: 1 1 auto;
    min-width: 0;
}

/* Chevron du groupe : à droite, aligné sur la même colonne que les boutons épingle des modules. */
.dashboard-sidebar-groupe-plus {
    margin-left: auto; /* pousse le chevron à droite du nom */
    margin-right: -.5rem; /* grignote le padding-right du titre pour rapprocher le chevron du bord */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}

.dashboard-sidebar-groupe-plus svg,
.dashboard-sidebar-groupe-plus .bi {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    transition: transform .15s ease;
}

/* Conteneur des modules NON épinglés d'un groupe : animé (max-height/opacity), replié/déplié par le
   titre du groupe. Replié par défaut au rendu serveur (arbitrage PO du 14/10/2026) ; .est-deplie l’ouvre. */
.dashboard-sidebar-groupe-modules {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .28s ease, opacity .2s ease;
}

.dashboard-sidebar-groupe-modules.est-deplie {
    max-height: 60rem; /* borne haute > contenu réel (tous les modules du groupe sont affichés) */
    opacity: 1;
}

/* Reprise de l'état ouvert au chargement (localStorage, cf. core/dashboard-sidebar.js) : la classe
   est posée le temps du premier rendu, sinon on VOIT les groupes s’ouvrir à chaque page — le serveur
   les rend toujours repliés. */
.dashboard-sidebar.sans-transition .dashboard-sidebar-groupe-modules {
    transition: none;
}

/* Chevron : pointe vers le bas quand le groupe est déplié, remonte quand il est replié. */
.dashboard-sidebar-groupe-plus.est-ouvert svg,
.dashboard-sidebar-groupe-plus.est-ouvert .bi {
    transform: rotate(180deg);
}

/* ---------- Modules ÉPINGLÉS ---------- */
/* Liste des modules épinglés : rendue HORS du conteneur repliable → toujours visible, impossible à
   masquer. Rendue même vide (le JS y déplace un module fraîchement épinglé) → masquée si vide. */
.dashboard-sidebar-menu--epingles:empty {
    display: none;
}

/* Bouton épingle d'un module : même colonne de droite que le chevron du titre de groupe (alignement
   horizontal demandé). Discret au repos, révélé au survol de la ligne ; toujours visible si épinglé. */
.dashboard-sidebar-menu li {
    position: relative;
}

/* 🛑 L'épingle se loge dans le padding droit du lien : collée au bord (`right: 0`), sa boîte de
   1.5rem couvre le padding-right existant (1.25rem) et ne grignote que 2 px de libellé au survol.
   Toute place réservée en plus rétrécit le libellé, qui passe alors sur DEUX lignes (mesuré :
   « Superv. trans. banque » fait 145,9 px pour 149 px disponibles au repos — il ne restait que
   141 px avec l'ancien `right: .25rem` + `padding-right: 1.75rem`). */
.dashboard-sidebar-epingle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: none;
    color: var(--sb-text);
    opacity: 0;
    cursor: pointer;
    transition: opacity .12s ease, color .12s ease;
}

.dashboard-sidebar-epingle svg,
.dashboard-sidebar-epingle .bi {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.dashboard-sidebar-menu li:hover .dashboard-sidebar-epingle,
.dashboard-sidebar-epingle:focus-visible {
    opacity: 1;
}

/* Module épinglé : épingle toujours visible et en couleur d'accent (l'icône « pin-off » indique
   l'action au clic = désépingler). */
.dashboard-sidebar-menu li.est-epingle .dashboard-sidebar-epingle {
    opacity: 1;
    color: var(--bs-main, #ff6136);
}

/* Le libellé du module ne doit pas passer sous l'épingle : 1.375rem laisse 4 px entre la fin du
   libellé le plus long qui tienne (« Superv. trans. banque ») et le glyphe de l'épingle. */
.dashboard-sidebar-menu li:hover > a,
.dashboard-sidebar-menu li.est-epingle > a {
    padding-right: 1.375rem;
}

/* 🛑 Un libellé de module reste TOUJOURS sur une ligne — comme le nom de groupe (`nowrap` plus
   haut) : sans cela, la ligne double de hauteur au survol dès que le libellé frôle la largeur
   disponible, la place réservée à l'épingle suffisant à le faire passer à la ligne. Un libellé
   plus long que la barre est coupé par des points de suspension, jamais replié. */
.dashboard-sidebar-menu a > span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-sidebar-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-sidebar-menu li {
    margin: 0;
}

.dashboard-sidebar-menu a {
    display: flex;
    align-items: center;
    gap: .625rem; /* 10px */
    padding: .5rem 1.25rem; /* 8px 20px */
    border-left: 3px solid transparent;
    border-radius: 0;
    color: var(--sb-text);
    font-size: .875rem; /* 14px */
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

/* Icônes : Lucide rendu en <svg> hérite de currentColor (couleur = celle du lien).
   On contraint la taille car Lucide rend 24px par défaut.
   ⚠️ Cibler `svg` ET `[data-lucide]` : Lucide remplace le <i> par un <svg> et lui RETIRE
   `data-lucide` — une règle qui ne viserait que l'attribut serait morte dès l'icône rendue. */
.dashboard-sidebar-menu a svg,
.dashboard-sidebar-menu a [data-lucide] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    transition: transform .16s ease;
}

/* Compat éventuelle icônes police (.bi). */
/* Survol d'un MODULE : l'icône grandit légèrement, le temps que le fond et la couleur changent
   (.12s). Même geste et même durée que dans le rail hors dashboard (rail-modules.css) : les deux
   surfaces listent les mêmes modules, elles doivent réagir pareil.
   🛑 Le bloc BAS est exclu (`--separe` : Vos documents, Assistance, Paramètres, Déconnexion) —
   ce ne sont pas des modules, et Déconnexion/Paramètres ont leur propre traitement. */
.dashboard-sidebar-nav:not(.dashboard-sidebar-nav--separe) .dashboard-sidebar-menu a:hover svg,
.dashboard-sidebar-nav:not(.dashboard-sidebar-nav--separe) .dashboard-sidebar-menu a:hover [data-lucide] {
    transform: scale(1.15);
}

.dashboard-sidebar-menu a .bi {
    width: 1.125rem;
    font-size: 1.05rem;
    text-align: center;
}

/* Logo de module (rendu serveur) ramené à la taille d'une icône de menu. */
.dashboard-sidebar-menu a .dashboard-sidebar-module-logo {
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.dashboard-sidebar-menu a:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-text-hover);
}

.dashboard-sidebar-menu a.active {
    background: var(--sb-actif-bg);
    color: var(--sb-actif-texte);
    font-weight: 500;
}

/* Icône du module actif en « main » pur (le libellé est en main assombri, cf. --sb-actif-texte). */
.dashboard-sidebar-menu a.active svg,
.dashboard-sidebar-menu a.active [data-lucide] {
    color: var(--bs-main);
}

/* Paramètres : au survol, icône + libellé en couleur « main » du thème. PAS d'animation
   (contrairement à Déconnexion) : une rotation de l'engrenage a été tentée puis RETIRÉE le
   2026-07-28 (rendu instable à l'écran). */
#dashboard-sidebar .dashboard-sidebar-menu a.sb-parametres:hover {
    color: var(--bs-main);
}

/* Déconnexion : même traitement que le rail (cf. rail-modules.css) — l'icône « power »
   passe en ROUGE (danger) et joue un petit « pulse » (scale + léger pivot) au survol. */
#dashboard-sidebar .dashboard-sidebar-menu a.confirmdisconnect:hover {
    color: var(--bs-danger, #dc3545);
}

.dashboard-sidebar-menu a.confirmdisconnect svg,
.dashboard-sidebar-menu a.confirmdisconnect [data-lucide] {
    transition: transform .2s ease;
}

    .dashboard-sidebar-menu a.confirmdisconnect:hover svg,
    .dashboard-sidebar-menu a.confirmdisconnect:hover [data-lucide] {
        animation: sb-power-pulse .55s ease;
    }

@keyframes sb-power-pulse {
    0% { transform: scale(1) rotate(0); }
    40% { transform: scale(1.22) rotate(-10deg); }
    70% { transform: scale(1.1) rotate(6deg); }
    100% { transform: scale(1) rotate(0); }
}

/* ---- « Voir plus de module » : chevron + liste dépliable des modules réels ---- */
.dashboard-sidebar-plus-toggle .bi,
.dashboard-sidebar-plus-toggle svg {
    transition: transform .15s ease;
}

.dashboard-sidebar-plus-toggle.est-ouvert .bi,
.dashboard-sidebar-plus-toggle.est-ouvert svg {
    transform: rotate(180deg);
}

/* Liste dépliable : repliée par défaut (max-height 0 + opacité 0), animée à l'ouverture via la
   classe .est-deplie (posée par le JS). Transition douce sans « saut » (pas d'attribut hidden). */
.dashboard-sidebar-plus {
    padding: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .28s ease, opacity .2s ease, transform .2s ease;
}

.dashboard-sidebar-plus.est-deplie {
    max-height: 40rem; /* borne haute > contenu réel ; l'animation s'arrête à la hauteur du contenu */
    opacity: 1;
    transform: translateY(0);
}

/* Liseret de séparation (ex. sous « Vos documents »). Marge haute réduite pour aligner l'écart
   sur celui du séparateur de blocs au-dessus (le padding de l'item apporte déjà de l'espace). */
.dashboard-sidebar-liseret {
    height: 0;
    border-top: 1px solid var(--sb-separateur);
    margin: 0 1.25rem .4rem;
}

.dashboard-sidebar-plus-loading {
    padding: .4rem 1.25rem;
    font-size: .85rem;
    color: var(--sb-muted);
}

/* Modules réels (_ListeModules) ramenés au look sidebar sombre : icône + libellé.
   _ListeModules pose des fonds colorés en `style="…!important"` + une grosse typo → on
   neutralise avec une spécificité ID (#dashboard-sidebar) + !important. */
#dashboard-sidebar .dashboard-sidebar-plus .liste-modules-container a.lienModuleListe {
    background: transparent !important;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: .4rem 1.25rem !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 0;
}

#dashboard-sidebar .dashboard-sidebar-plus .liste-modules-container a.lienModuleListe:hover {
    background: var(--sb-hover-bg) !important;
}

#dashboard-sidebar .dashboard-sidebar-plus .lienModuleListe .moduleListe {
    padding: 0;
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
}

#dashboard-sidebar .dashboard-sidebar-plus .spanModuleListe {
    color: var(--sb-text) !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
}

#dashboard-sidebar .dashboard-sidebar-plus .imgModuleListe {
    width: 18px;
    height: 18px;
    margin-right: .625rem;
}

/* ---- Bloc utilisateur (bas de la barre, réemploi de _BlocUtilisateur) ---- */
/* Bloc utilisateur SANS cadre (cf. Figma : avatar + nom, pas de boîte). */
.dashboard-sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
}

.dashboard-sidebar-user .image-utilisateur img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, .1);
}

/* Repli initiales (rond bleu) quand l'utilisateur n'a pas de photo. */
.dashboard-sidebar-user .avatar-initiales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sb-avatar-bg);
    color: var(--sb-text-hover);
    font-size: .75rem;
    font-weight: 600;
}

.dashboard-sidebar-user .nom-utilisateur {
    font-size: .85rem;
    line-height: 1.2;
    color: var(--sb-text-fort);
}

.dashboard-sidebar-user .nom-utilisateur .prenom {
    font-weight: 600;
}

/* ---- Numéro de version applicative (tout en bas, sous le bloc utilisateur) ----
   Rendu par Parts/_VersionApplicative.cshtml, comme en bas du rail des autres pages
   (rail-modules.css, même taille). Il ne sert qu’à identifier la livraison sur une capture d’écran
   envoyée au support, d’où sa petite taille ; la page de connexion garde le sien à .75rem
   (login-split.css).
   Couleur du TEXTE des liens, et non la teinte atténuée des titres de section : à 8 px, sur une
   capture compressée, le gris atténué ne se lit plus.
   HORS DU FLUX : le numéro ne doit pas faire remonter le nom et la photo de l’utilisateur (demande du
   dev du 27/09/2026). Il est ancré sur la barre elle-même (en `position: fixed`, donc bloc conteneur
   de ses descendants absolus ; ni `.dashboard-sidebar-bottom` ni le bloc utilisateur ne sont
   positionnés) et se loge dans son rembourrage bas de .75rem (12 px) : la ligne fait .6rem, posée à
   2 px du bord, elle reste sous l’avatar, qui garde lui-même 8 px de marge (`py-2`) au-dessus.
   Aligné à gauche sur le bloc utilisateur (même retrait que son `px-3`). */
.dashboard-sidebar .tg-version-applicative {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .125rem;
    padding: 0 1rem;
    font-size: .5rem;
    line-height: 1.2;
    color: var(--sb-text);
    overflow-wrap: anywhere;
}

/* =============================================================================
   Décalage du contenu + neutralisation de l'ancienne chrome d'en-tête (navbar top)
   sur le layout dashboard (classe posée sur <body>).
   ============================================================================= */
.dashboard-sidebar-layout #wrapper {
    margin-left: 220px; /* = largeur de .dashboard-sidebar (220px) ; cohérent avec le rail hors dashboard */
    /* Le socle (shell.css) impose width:100% : combiné au margin-left, le contenu débordait de 220px
       (scroll horizontal fantôme). On borne la largeur à l'espace réellement disponible. */
    width: calc(100% - 220px);
}

.dashboard-sidebar-layout #header,
.dashboard-sidebar-layout #topBlock {
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* =============================================================================
   Rabattement de la barre latérale (gagner de la place). Bascule via la classe
   `dashboard-sidebar-collapsed` posée sur <body>. « Réduire » (coin haut-droit de
   la barre) cache la barre ; il ne reste qu'une ÉTROITE BANDE marine à gauche (le
   rail de réouverture, var --dsb-rail-w) portant le bouton « afficher » — pas de
   chevauchement avec le contenu. L'état est mémorisé en localStorage et restauré
   avant le rendu (cf. _LayoutDashboard.cshtml / _HeaderDashBoard.cshtml).
   ============================================================================= */

/* Largeur du trait de la poignée (état rabattu) : sert à la fois au trait « afficher » ET au
   retrait du contenu (#wrapper) → définie en variable pour rester synchronisée. Sur l'élément body
   (.dashboard-sidebar-layout), ancêtre des deux. La zone de survol, elle, est plus large. */
.dashboard-sidebar-layout {
    --dsb-rail-w: 2px;
    --dsb-zone-w: 12px;
}

/* Boutons bascule : icône seule, discrète, palette de la barre. */
.dashboard-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-muted);
    cursor: pointer;
    transition: opacity .15s ease, background-color .12s ease, color .12s ease;
}

.dashboard-sidebar-toggle:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-text-hover);
}

.dashboard-sidebar-toggle svg,
.dashboard-sidebar-toggle [data-lucide] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Bouton « réduire » : ancré en haut à droite de la barre (son containing block est la barre,
   en position:fixed). INVISIBLE au repos (opacity:0) ; se révèle dès qu'on SURVOLE LA BARRE (ou
   au focus clavier), puis passe en blanc + léger fond au survol direct (règle .dashboard-sidebar-toggle:hover).
   → discret au repos, découvrable au survol de la barre. */
.dashboard-sidebar-reduire {
    position: absolute;
    top: auto;
    bottom: .625rem;
    right: .5rem;
    z-index: 2;
    opacity: 0;
}

.dashboard-sidebar:hover .dashboard-sidebar-reduire,
.dashboard-sidebar-reduire:hover,
.dashboard-sidebar-reduire:focus-visible {
    opacity: 1;
}

.dashboard-sidebar-reduire:focus-visible {
    outline: 2px solid var(--sb-text-hover);
    outline-offset: 1px;
}

/* Icône « réduire le menu » au survol : même teinte « main » que la barre de repli, pour que les
   deux poignées de la bascule se répondent. Placée APRÈS `.dashboard-sidebar-toggle:hover` (même
   spécificité 0,2,0) : c'est l'ordre source qui départage, ne pas la remonter plus haut. */
.dashboard-sidebar-reduire:hover {
    color: var(--bs-main, #ff6136);
}

/* Bouton « afficher » = BORD LUMINEUX (maquette validée le 14/10/2026), sur le dashboard rabattu
   comme hors dashboard : une zone de survol TRANSPARENTE pleine hauteur ancrée à gauche, dont le
   trait (::before) et la lueur (::after) sont des pseudo-éléments. Le trait de 2 px et le chevron sont
   FIXES (arbitrage PO du 14/10/2026) ; à l’approche du pointeur, seule la lueur monte avec
   `--tg-nav-proximite` (0 à 1), posée sur
   CE bouton par core/dashboard-sidebar.js — et non sur <body>, ce qui ferait recalculer les styles de
   toute la page à chaque mouvement de souris. Dashboard : un clic rouvre la barre et la FIXE ; hors
   dashboard : le contact l’ouvre au survol. Rendu HORS de la barre (un position:fixed dans un ancêtre
   `transform` serait clippé avec elle). Les dimensions surchargent .dashboard-sidebar-toggle — même
   spécificité, ce bloc est plus bas en source. */
.dashboard-sidebar-afficher {
    --tg-nav-proximite: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--dsb-zone-w, 12px);
    height: auto;
    /* 1034 : au-dessus du fil d’Ariane (1032, opaque), sinon la lueur passe dessous sur sa bande ;
       sous la navigation ouverte (1042) et le voile des modales (1050). Cf. échelle de socle/shell.css. */
    z-index: 1034;
    display: none; /* visible seulement à l’état rabattu, ou hors dashboard (cf. plus bas) */
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--bs-main, #ff6136);
    overflow: visible;
    cursor: pointer; /* curseur « main » : la poignée ouvre la navigation */
}

.dashboard-sidebar-afficher:hover,
.dashboard-sidebar-afficher:focus-visible {
    background: transparent;
    color: var(--bs-main, #ff6136);
}

/* Le trait : toujours visible (fixe), plein sur le tiers central puis NUANCÉ vers le haut et le bas, où il
   s’éteint, comme l’arc de la lueur (demande du 15/10/2026). Paliers intermédiaires à mi-intensité pour
   que l’estompe suive une courbe douce plutôt qu’une rampe droite. */
.dashboard-sidebar-afficher::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--dsb-rail-w, 2px);
    background: linear-gradient(180deg,
        rgba(var(--bs-main-rgb, 255, 97, 54), 0) 0%,
        rgba(var(--bs-main-rgb, 255, 97, 54), .55) 15%,
        rgba(var(--bs-main-rgb, 255, 97, 54), 1) 33%,
        rgba(var(--bs-main-rgb, 255, 97, 54), 1) 67%,
        rgba(var(--bs-main-rgb, 255, 97, 54), .55) 85%,
        rgba(var(--bs-main-rgb, 255, 97, 54), 0) 100%);
    pointer-events: none;
}

/* La lueur : dégradé de main vers transparent, qui déborde de la zone sans capter le pointeur.
   En ARC DE CERCLE (demande du 15/10/2026) : ellipse ancrée au milieu du bord gauche, de 46 px de rayon
   horizontal (même largeur et même intensité qu’avant au centre) et d’une demi-hauteur de rayon vertical,
   donc de plus en plus étroite vers le haut et le bas, où elle s’éteint. */
.dashboard-sidebar-afficher::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 46px;
    background: radial-gradient(ellipse 46px 50% at 0 50%, rgba(var(--bs-main-rgb, 255, 97, 54), .32), rgba(var(--bs-main-rgb, 255, 97, 54), 0));
    opacity: var(--tg-nav-proximite);
    pointer-events: none;
}

/* Le chevron : toujours visible, à sa place (fixe). Sur le dashboard il porte l’info-bulle « Afficher le
   menu » (élément réel, pas un pseudo). */
.dashboard-sidebar-afficher-icone {
    position: absolute;
    top: 50%;
    left: 5px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-main, #ff6136);
    transform: translateY(-50%);
}

.dashboard-sidebar-afficher-icone svg,
.dashboard-sidebar-afficher-icone [data-lucide] {
    width: 18px;
    height: 18px;
}

/* Transitions douces. N'animent PAS l'état restauré au chargement : l'élément naît
   déjà dans son état (classe posée avant son rendu), la transition ne joue qu'au clic. */
.dashboard-sidebar {
    transition: transform .2s ease;
}

.dashboard-sidebar-layout #wrapper {
    transition: margin-left .2s ease;
}

/* ---- État RABATTU : barre glissée hors champ, contenu décalé de la largeur du rail. ---- */
.dashboard-sidebar-collapsed .dashboard-sidebar {
    transform: translateX(-100%);
}

.dashboard-sidebar-layout.dashboard-sidebar-collapsed #wrapper {
    margin-left: var(--dsb-rail-w); /* laisse la place au rail de réouverture (pas 0) */
    width: calc(100% - var(--dsb-rail-w));
}

.dashboard-sidebar-collapsed .dashboard-sidebar-afficher {
    display: flex;
}

/* Barre rabattue : les conteneurs Bootstrap perdent leur gouttière GAUCHE, pour que le contenu
   reparte du bord de la fenêtre au lieu de conserver le retrait calculé pour une barre visible.
   La gouttière DROITE est conservée (rien n'a changé de ce côté).
   ⚠️ Spécificité : la règle de Bootstrap (`.container, .container-fluid, …`) vaut 0,1,0 ; celle-ci,
   préfixée par la classe d'état du <body>, vaut 0,2,1 — elle passe donc devant SANS `!important`. */
.dashboard-sidebar-collapsed .container,
.dashboard-sidebar-collapsed .container-fluid,
.dashboard-sidebar-collapsed .container-xxl,
.dashboard-sidebar-collapsed .container-xl,
.dashboard-sidebar-collapsed .container-lg,
.dashboard-sidebar-collapsed .container-md,
.dashboard-sidebar-collapsed .container-sm {
    padding-left: 0;
}

/* Barre rabattue : la zone principale garde SON retrait gauche (16 px, Dashboard/dashboard-onglets.css),
   le même qu’à droite. L’ancien retrait de 36 px compensait la bande de 15 px, devenue un trait de 2 px. */

/* La barre du haut mobile et le voile n'existent qu'en mobile (masqués en desktop). */
.dashboard-mobile-topbar,
.dashboard-sidebar-backdrop {
    display: none;
}

/* ----------------------------------------------------------------------------
   Mobile (<768px) : la sidebar devient un TIROIR off-canvas (au lieu du bandeau
   plein écran qui repoussait tout le contenu). Une barre du haut (logo + burger)
   reste visible ; le burger fait glisser le tiroir PAR-DESSUS le contenu (voile),
   le contenu garde toute la largeur.
   ---------------------------------------------------------------------------- */
/* ⚠️ 767px et NON 768px : c'est le point de rupture de tout le reste du produit (socle/shell.css,
   rail-modules.css, header-pages.css, teogest-fonctionnel.css, et le `matchMedia` de
   assets/js/core/header.js). A 768px exactement, ce fichier basculait en tiroir alors que le reste
   de l'application se croyait encore en desktop -- une bande de 1px ou les deux mises en page se
   contredisaient. */
@media (max-width: 767px) {
    /* Sidebar = tiroir : fixe, pleine hauteur, hors champ par défaut, glisse à l'ouverture. */
    .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 300px);
        height: 100vh;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1045;
        box-shadow: 2px 0 18px rgba(0, 0, 0, .35);
    }

    body.dashboard-sidebar-mobile-open .dashboard-sidebar {
        transform: translateX(0);
    }

    /* Barre du haut mobile (burger à gauche + logo) — fixe, couleur du header.
       ⚠️ Tokens GLOBAUX (--tg-*) et NON --sb-* : ces derniers sont définis sur .dashboard-sidebar
       et la barre est un sibling → var(--sb-bg) y serait invalide (fond transparent → barre invisible). */
    .dashboard-mobile-topbar {
        display: flex;
        align-items: center;
        gap: .4rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        padding: 0 .5rem;
        background: var(--tg-bandeau-fond, var(--tg-sidebar-bg));
        z-index: 1035;
    }

    .dashboard-mobile-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--tg-bandeau-texte, var(--tg-sidebar-text-hover));
        cursor: pointer;
    }

    .dashboard-mobile-burger svg,
    .dashboard-mobile-burger i[data-lucide] {
        width: 26px;
        height: 26px;
    }

    .dashboard-mobile-logo {
        height: 24px;
        width: auto;
    }

    /* Contenu : pleine largeur, sous la barre du haut. */
    .dashboard-sidebar-layout #wrapper {
        margin-left: 0;
        width: 100%; /* annule le calc(100% - 220px) : en mobile la barre est en overlay, pas en marge */
        padding-top: 52px;
    }

    /* Voile : visible seulement quand le tiroir est ouvert. */
    body.dashboard-sidebar-mobile-open .dashboard-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1040;
    }

    /* Boutons de rabattement desktop (réduire / rail afficher) masqués : le burger les remplace.
       Et l'état "rabattu" desktop n'a pas de sens ici → pas de décalage du contenu. */
    .dashboard-sidebar-reduire,
    .dashboard-sidebar-afficher {
        display: none !important;
    }

    .dashboard-sidebar-layout.dashboard-sidebar-collapsed #wrapper {
        margin-left: 0;
    }

    /* Menus déroulants des sélecteurs (Société / Dossier annuel) : leur `min-width: 13rem`
       (= 208px) est calibré pour la barre desktop de 220px. Dans le tiroir mobile
       (`min(86vw, 300px)`, moins ses rembourrages) il ne reste pas la place : le menu débordait
       latéralement et se faisait clipper par l'`overflow: hidden` de la barre. On le laisse donc
       prendre simplement la largeur disponible — même correctif que pour le header des autres
       pages (`assets/css/header-pages.css`, section mobile). */
    .dashboard-sidebar-selecteurs .dossier-annuel-menu,
    .dashboard-sidebar-selecteurs .societe-sidebar-menu {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
}

/* =============================================================================
   Mode SURVOL — pages HORS dashboard (_Layout, classe `tg-nav-survol` sur <body>)
   -----------------------------------------------------------------------------
   La même barre que celle du dashboard (Parts/_NavigationLaterale.cshtml), MASQUÉE par défaut :
   seule reste à gauche la barre de repli (bouton « afficher »). La SURVOLER ouvre la navigation
   PAR-DESSUS le contenu (classe `tg-nav-survol-ouverte`, posée par core/dashboard-sidebar.js),
   la quitter la referme. Le contenu ne bouge jamais : il est décalé de la seule largeur de la
   barre de repli, via `--rail-w` que lisent tout le shell (rail-modules.css, socle/shell.css) et
   les écrans qui se calent sur la navigation gauche.
   ============================================================================= */
body.tg-nav-survol {
    /* BORD LUMINEUX (maquette validée le 14/10/2026) : un trait de 2 px et un chevron fixes ; à l’approche
       du pointeur, une lueur monte progressivement ; un clic sur la zone ouvre la navigation (le survol ne l’ouvre plus depuis le 15/10/2026). Le contenu
       n’est décalé que de la largeur du trait. */
    --dsb-rail-w: 2px;
    --dsb-zone-w: 12px;
    /* Spécificité 0,1,1 : passe devant `.has-rail-modules { --rail-w: 64px }` (rail-modules.css),
       y compris sous 767 px. */
    --rail-w: var(--dsb-rail-w);
    /* La poignée occupe TOUTE la hauteur de la page, header compris (demande du 14/10/2026) : elle
       recouvre les 12 px de gauche du header, où le logo ne commence pas encore. */
    --tg-nav-survol-haut: 0px;
}

/* Hors dashboard, la poignée (bord lumineux, cf. « Bouton afficher » plus haut) est TOUJOURS visible :
   un clic dessus ouvre la navigation (le survol ne l’ouvre plus depuis le 15/10/2026). */
body.tg-nav-survol .dashboard-sidebar-afficher {
    display: flex;
    top: var(--tg-nav-survol-haut);
}

/* Navigation : part du HAUT de la fenêtre et recouvre la partie gauche du header (qui reste visible
   à droite, avec le menu du module et les sélecteurs) ; pas de logo dans ce mode, le header porte la
   marque. Hors champ au repos. z-index 1042 : au-dessus du header (999, 1040 sous 767 px), sous les
   panneaux off-canvas (1045) et les modales (1055). */
body.tg-nav-survol .dashboard-sidebar {
    top: 0;
    bottom: 0;
    height: auto;
    z-index: 1042;
    transform: translateX(-100%);
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

body.tg-nav-survol.tg-nav-survol-ouverte .dashboard-sidebar {
    transform: translateX(0);
    /* Ombre À DROITE seulement : l’étalement négatif empêche le flou de baver sur le header au-dessus. */
    box-shadow: 8px 0 10px -8px rgba(0, 0, 0, .25);
}

/* HAUT DE LA BARRE en mode survol (proposition 3 « liste claire », validée le 14/10/2026, puis ajustée) :
   le logo du header à sa place exacte (non cliquable), l’icône Dashboard à sa droite, puis juste sous lui « Retour au
   cabinet » (vrai lien de menu, grisé sur le cabinet) et le bloc « gérant » (ligne identité et panneau
   flottant, plus bas). Le module courant est affiché dans le header (arbitrage PO du 14/10/2026). */

/* Logo : même taille et même place que celui du header (x 16, y 20, 24 px de haut, header-pages.css),
   qu’il recouvre navigation ouverte. La barre partant elle aussi du haut de la fenêtre, ce sont des
   coordonnées d’écran. */
#dashboard-sidebar .dashboard-sidebar-logo-survol {
    position: absolute;
    top: 20px;
    left: 16px;
    display: flex;
    align-items: center;
    height: 24px;
    max-width: calc(100% - 32px);
}

.dashboard-sidebar-logo-survol .tg-logo-produit,
.dashboard-sidebar-logo-survol .image-logo {
    height: 24px;
    width: auto;
    max-width: 100%;
}

.dashboard-sidebar-logo-survol .tg-marque-produit--header {
    font-size: 1.15rem;
}

/* Les lignes commencent 8 px sous le logo (bas du logo à 44 px ; la barre a 16 px de marge haute,
   d’où 36 px). */
#dashboard-sidebar .dashboard-sidebar-raccourcis {
    margin-top: 36px;
}

/* Le premier groupe de modules commence à la même hauteur que sur le dashboard : 191,5 px, soit 16 px de
   marge haute + 167,5 px de logo et de sélecteurs + 8 px (demande du 14/10/2026). La tête garde donc la
   hauteur de celle du dashboard, quel que soit le nombre de lignes affichées ; l’espace sous elles reste
   libre. À reprendre si la tête du dashboard change de hauteur. */
body.tg-nav-survol .dashboard-sidebar-head {
    min-height: 167.5px;
}

/* « Retour au cabinet » sous le bloc gérant, calé juste AU-DESSUS du premier groupe de modules (demande du
   15/10/2026) : la liste des raccourcis occupe toute la hauteur de la tête, et la ligne est poussée en bas. */
body.tg-nav-survol .dashboard-sidebar-head > .dashboard-sidebar-raccourcis,
body.tg-nav-survol .dashboard-sidebar-raccourcis > .dashboard-sidebar-menu {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

body.tg-nav-survol .dashboard-sidebar-raccourcis .dashboard-sidebar-retour-cabinet {
    margin-top: auto;
}

/* Icône Dashboard seule, à droite du logo : centrée sur lui (y 32), calée sur le bord droit des lignes du
   menu. C’est le seul accès au dashboard de la barre (le logo, lui, n’y est pas cliquable). */
#dashboard-sidebar .dashboard-sidebar-dashboard-icone {
    position: absolute;
    top: 18px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: .375rem;
    color: var(--bs-main);
    transition: background-color .12s ease;
}

#dashboard-sidebar .dashboard-sidebar-dashboard-icone:hover,
#dashboard-sidebar .dashboard-sidebar-dashboard-icone:focus-visible {
    background: var(--sb-hover-bg);
}

.dashboard-sidebar-dashboard-icone svg,
.dashboard-sidebar-dashboard-icone [data-lucide] {
    width: 18px;
    height: 18px;
}

/* « Retour au cabinet » : icône NEUTRE (couleur atténuée, comme une action secondaire), qui ne prend la
   couleur « main » qu’au survol — la couleur « main » reste à l’icône Dashboard et au module courant. */
#dashboard-sidebar .dashboard-sidebar-menu a.sb-cabinet svg,
#dashboard-sidebar .dashboard-sidebar-menu a.sb-cabinet i {
    color: var(--sb-muted);
    transition: color .12s ease;
}

#dashboard-sidebar .dashboard-sidebar-menu a.sb-cabinet:hover svg,
#dashboard-sidebar .dashboard-sidebar-menu a.sb-cabinet:hover i,
#dashboard-sidebar .dashboard-sidebar-menu a.sb-cabinet:focus-visible svg {
    color: var(--bs-main);
}

/* Ligne INACTIVE, grisée, pour un accès sans objet là où l’on est : « Retour au cabinet » sur le cabinet
   (demande du 14/10/2026), « Vos documents » dans la GED (15/10/2026). Un span au gabarit exact d’un lien du
   menu (mêmes retraits, liseré, police, donc même hauteur) ; aucun fond ni couleur au survol, l’info-bulle
   dit pourquoi. */
#dashboard-sidebar .dashboard-sidebar-menu .sb-inactif {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem 1.25rem;
    border-left: 3px solid transparent;
    color: var(--sb-muted);
    font-size: .875rem;
    line-height: 1.4;
    white-space: nowrap;
    opacity: .6;
    cursor: not-allowed;
}

#dashboard-sidebar .dashboard-sidebar-menu .sb-inactif svg,
#dashboard-sidebar .dashboard-sidebar-menu .sb-inactif [data-lucide] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* =============================================================================
   BLOC « GÉRANT » (option C de la maquette du 15/10/2026, https://claude.ai/artifact/KJVjQKV2zNkd6VVA8GDKTA)
   -----------------------------------------------------------------------------
   Une ligne identité (avatar à initiales, nom, rôle, chevron) ; au clic, un panneau flottant À DROITE de la
   barre (nom, « rôle · raison sociale », e-mail et téléphone avec Copier et Écrire / Appeler). Comportement :
   core/dashboard-sidebar.js. Couleurs : variables de la barre et de Bootstrap, aucune valeur de la maquette en dur.
   ============================================================================= */

/* Ligne identité, et sa variante « aucun contact » au même gabarit. Avatar à 20 px du bord, comme les icônes et
   le texte des autres lignes du haut de la barre. */
.dashboard-sidebar-contact-bascule,
.dashboard-sidebar-contact-vide {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: calc(100% - 1rem);
    margin: .125rem .5rem;
    padding: .375rem .5rem .375rem .75rem;
    border: 0;
    border-radius: .625rem;
    background: none;
    color: var(--sb-text);
    font: inherit;
    text-align: left;
}

.dashboard-sidebar-contact-bascule {
    background: var(--sb-champ-bg);
    cursor: pointer;
    transition: background-color .12s ease, box-shadow .12s ease;
}

.dashboard-sidebar-contact-bascule:hover {
    background: var(--sb-hover-bg);
}

.dashboard-sidebar-contact-bascule:focus-visible {
    outline: 2px solid var(--bs-main);
    outline-offset: 1px;
}

/* Panneau ouvert : la ligne reste marquée (fond de survol et filet). */
.dashboard-sidebar-contact.est-ouvert .dashboard-sidebar-contact-bascule {
    background: var(--sb-hover-bg);
    box-shadow: inset 0 0 0 1px var(--sb-champ-bordure);
}

/* Avatar : initiales sur la teinte « main » du module actif (la même que la maquette, issue du thème). */
.dashboard-sidebar-contact-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sb-actif-bg);
    color: var(--sb-actif-texte);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
}

.dashboard-sidebar-contact-avatar--grand {
    width: 40px;
    height: 40px;
    font-size: .875rem;
}

.dashboard-sidebar-contact-avatar svg,
.dashboard-sidebar-contact-avatar i {
    width: 16px;
    height: 16px;
}

.dashboard-sidebar-contact-avatar--grand svg,
.dashboard-sidebar-contact-avatar--grand i {
    width: 20px;
    height: 20px;
}

/* Photo de profil du gérant, à la place des initiales (15/10/2026) : recadrée au centre pour remplir le disque. */
.dashboard-sidebar-contact-avatar--photo {
    overflow: hidden;
}

.dashboard-sidebar-contact-avatar--photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Aucun contact : avatar neutre, pas de teinte « main ». */
.dashboard-sidebar-contact-vide .dashboard-sidebar-contact-avatar {
    background: var(--sb-hover-bg);
    color: var(--sb-muted);
}

/* Nom et rôle, sur une ligne chacun : trop longs, ils sont coupés par des points de suspension et leur
   info-bulle les donne en entier. */
.dashboard-sidebar-contact-identite {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dashboard-sidebar-contact-nom,
.dashboard-sidebar-contact-role {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-sidebar-contact-nom {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sb-text-fort);
}

.dashboard-sidebar-contact-role {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--sb-muted);
}

.dashboard-sidebar-contact-vide .dashboard-sidebar-contact-nom {
    font-weight: 500;
    color: var(--sb-text);
}

/* Chevron : la classe est recopiée sur le svg par Lucide. */
.dashboard-sidebar-contact-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--sb-muted);
}

.dashboard-sidebar-contact.est-ouvert .dashboard-sidebar-contact-chevron {
    color: var(--sb-text);
}

/* Lien « Compléter la fiche » (aucun contact, ou une information manquante dans le panneau). Il vit DANS la
   liste du menu : il hériterait du gabarit des liens de menu (flex, retraits de 20 px, liseré, fond au survol),
   d’où la neutralisation à la même spécificité, déclarée après. */
#dashboard-sidebar .dashboard-sidebar-contact .dashboard-sidebar-contact-completer {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--bs-main);
    text-decoration: none;
}

#dashboard-sidebar .dashboard-sidebar-contact .dashboard-sidebar-contact-completer:hover,
#dashboard-sidebar .dashboard-sidebar-contact .dashboard-sidebar-contact-completer:focus-visible {
    text-decoration: underline;
}

/* PANNEAU flottant, à droite de la barre (8 px), aligné sur le haut de la ligne. 🛑 Il reste DANS la barre
   (cf. _NavigationLaterale.cshtml) : celle-ci est en `overflow: hidden`, levé ci-dessous le temps qu’il est
   ouvert — son défilement est porté par .dashboard-sidebar-scroll, qui garde le sien. */
body.tg-nav-survol .dashboard-sidebar:has(.dashboard-sidebar-contact.est-ouvert) {
    overflow: visible;
}

#dashboard-sidebar .dashboard-sidebar-contact-panneau {
    position: absolute;
    top: 0;
    left: calc(100% + .5rem);
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 320px;
    max-width: calc(100vw - 220px - 1.5rem);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: var(--bs-box-shadow);
    cursor: auto;
}

#dashboard-sidebar .dashboard-sidebar-contact-panneau:focus {
    outline: none;
}

.dashboard-sidebar-contact-panneau-tete {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.dashboard-sidebar-contact-panneau-tete .dashboard-sidebar-contact-nom {
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--bs-emphasis-color);
}

.dashboard-sidebar-contact-panneau-tete .dashboard-sidebar-contact-role {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* Logo de la société, à droite de l’en-tête du panneau (15/10/2026) : place fixe, la ligne « rôle · raison
   sociale » se coupant avant lui. Masqué sans logo ; logo-societe.js pose ou retire la classe « avec logo »
   après un dépôt. Le cadre épouse l’image : une image OPAQUE (photo) le remplit, et seul un logo TRANSPARENT
   (classe posée par le même script) est posé sur du blanc avec une marge, comme dans la fiche de synthèse. */
.dashboard-sidebar-contact-logo {
    display: none;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .375rem;
    background-color: var(--bs-white, #fff);
}

.dashboard-sidebar-contact-logo.tg-logo-societe--avec-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-sidebar-contact-logo.tg-logo-societe--transparent {
    padding: .1875rem .25rem;
}

.dashboard-sidebar-contact-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 72px;
    max-height: 28px;
}

.dashboard-sidebar-contact-panneau-corps {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem 1rem 1rem;
}

/* Une ligne par coordonnée : libellé et valeur à gauche, actions à droite. */
.dashboard-sidebar-contact-coord {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.dashboard-sidebar-contact-coord-texte {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-sidebar-contact-coord-libelle {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Retour « Copié », posé par le script pendant 2 s à côté du libellé (zone annoncée aux lecteurs d’écran). */
.dashboard-sidebar-contact-copie {
    margin-left: .25rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bs-success);
}

.dashboard-sidebar-contact-coord-valeur {
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-sidebar-contact-coord-valeur--chiffres {
    font-variant-numeric: tabular-nums;
}

.dashboard-sidebar-contact-actions {
    flex: none;
    display: flex;
    gap: .375rem;
}

/* Boutons Copier / Écrire / Appeler. Neutralisation du gabarit des liens de menu (cf. plus haut) : même
   spécificité, déclarée après. */
#dashboard-sidebar .dashboard-sidebar-contact-panneau .dashboard-sidebar-contact-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: var(--bs-body-bg);
    box-shadow: inset 0 0 0 1px var(--bs-border-color);
    color: var(--bs-body-color);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

#dashboard-sidebar .dashboard-sidebar-contact-panneau .dashboard-sidebar-contact-action:hover,
#dashboard-sidebar .dashboard-sidebar-contact-panneau .dashboard-sidebar-contact-action:focus-visible {
    background: var(--bs-tertiary-bg);
    color: var(--bs-main);
}

#dashboard-sidebar .dashboard-sidebar-contact-panneau .dashboard-sidebar-contact-action svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: inherit;
}

/* Copier → coche verte pendant le retour « Copié ». */
#dashboard-sidebar .dashboard-sidebar-contact-action .dashboard-sidebar-contact-action-copie,
#dashboard-sidebar .dashboard-sidebar-contact-action.est-copie .dashboard-sidebar-contact-action-copier {
    display: none;
}

#dashboard-sidebar .dashboard-sidebar-contact-action.est-copie .dashboard-sidebar-contact-action-copie {
    display: block;
    color: var(--bs-success);
}

#dashboard-sidebar .dashboard-sidebar-contact-panneau-corps .dashboard-sidebar-contact-completer {
    align-self: flex-start;
    font-size: .8125rem;
}

/* Écran étroit (tiroir mobile) : pas la place à droite, le panneau s’ouvre SOUS la ligne, dans la barre. */
@media (max-width: 767px) {
    #dashboard-sidebar .dashboard-sidebar-contact-panneau {
        position: static;
        width: auto;
        max-width: none;
        margin: .375rem .5rem .25rem;
        box-shadow: none;
    }
}

@media (max-width: 767px) {
    /* Le bloc mobile ci-dessus masque la barre de repli (le dashboard a son burger) : hors dashboard,
       elle reste le seul accès à la navigation (ouverture au toucher). */
    body.tg-nav-survol .dashboard-sidebar-afficher {
        display: flex !important;
    }
}