/* =============================================================================
   header-pages.css — restyle du HEADER des pages (hors dashboard) — baseline maquette
   -----------------------------------------------------------------------------
   Cible la barre haute `.navbar-teogest` (logo + sélecteurs + utilisateur + icônes)
   ET la barre de navigation modules `.navbar-sousmenu` (Saisie / Traitements /
   Révision…), pour un bloc d'en-tête marine cohérent (cf. maquette « révision »).

   Chargé APRÈS topmenu.css (gagne par ordre source, sans !important sauf overrides
   d'inline-styles legacy). Couleur marine = `--tg-bandeau-fond` (perso abonné) avec
   repli sur la marine de la maquette ; texte = `--tg-bandeau-texte`. Accent module
   actif = orange (token posé ici en attendant Figma).
   ============================================================================= */

:root {
    /* Header = couleur du bandeau personnalisée par l'abonné (/Preferences → --tg-bandeau-fond),
       avec repli sur le marine de la charte. Identique au rail / à la sidebar (même token) →
       chrome cohérente (header + rail = un seul bloc), pilotée par la perso du header. */
    --tg-header-bg: var(--tg-bandeau-fond, var(--tg-sidebar-bg, #010940));
    /* Repli sur le token de TEXTE du thème (et non un blanc en dur) : sans personnalisation
       d'abonné, le fond retombe sur --tg-sidebar-bg (BLANC dans le thème par défaut) — un repli
       blanc en dur donnait alors du blanc sur blanc, header illisible. Les deux replis doivent
       venir de la MÊME source (le thème compilé) pour rester cohérents. */
    --tg-header-fg: var(--tg-bandeau-texte, var(--tg-sidebar-text-hover, #334155));
    /* Variantes ATTÉNUÉES de la couleur de texte/picto du header (perso abonné). On dérive du
       même token (color-mix avec transparent) pour que TOUT le texte/picto du header suive la
       couleur choisie en /Preferences, tout en gardant la hiérarchie (libellés discrets plus
       pâles que les libellés/pictos principaux). Avant : blanc en dur → ne suivait pas la perso. */
    --tg-header-fg-soft: color-mix(in srgb, var(--tg-header-fg) 82%, transparent);
    --tg-header-fg-muted: color-mix(in srgb, var(--tg-header-fg) 70%, transparent);
    --tg-header-accent: var(--tg-sidebar-active-bg); /* module actif (orange main) */
    --tg-header-border: rgb(255 255 255 / 18%);
    --tg-avatar-bg: #2f6fa8; /* rond d'initiales utilisateur (repli sans photo) */
}

/* ----------------------------------------------------------------------------
   Barre haute
   ---------------------------------------------------------------------------- */
.navbar-teogest {
    background: var(--tg-header-bg);
    color: var(--tg-header-fg);
    min-height: 56px;
    padding: 0 .75rem;
}

#topBlock.responsive {
    min-height: 56px;
}

.navbar-teogest .logo {
    margin-left: .25rem;
    padding-top: 0;
}

.navbar-teogest .image-logo,
.navbar-teogest .logo .logo-abonne {
    max-height: 34px;
}

/* Le logo du header est désormais un SVG sans dimensions intrinsèques (juste un viewBox) :
   `max-height` seul le laisse à 0×0 dans Chrome → hauteur explicite, largeur auto (suit le ratio). */
.navbar-teogest .logo .image-logo {
    height: 24px;
    width: auto;
}

/* Cluster droit : sélecteurs + étoile + utilisateur + icônes, alignés et espacés.
   `flex: 0 0 auto` (il ne rétrécit pas) + `nowrap` : le cluster reste intact à droite,
   c'est le menu des modules (à gauche) qui absorbe le manque de place via le bouton « ⋮ ». */
.navbar-teogest .navbar-nav.ms-auto {
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.navbar-teogest .navbar-nav > li {
    display: flex;
    align-items: center;
}

/* ---- Sélecteurs Société / Dossier (pilules contournées) ---- */
.navbar-teogest .societe-dossier {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* À plat (cf. maquette) : pas de bordure ni de fond — juste icône + texte + caret. */
.navbar-teogest .societe-dossier .comboContainer {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: 38px;
    padding: 0 .35rem;
    border: none;
    border-radius: 0;
    background: transparent;
}

.navbar-teogest .societe-dossier .select-label {
    margin: 0;
    font-size: .7rem;
    color: var(--tg-header-fg-muted);
    white-space: nowrap;
}

.navbar-teogest .societe-dossier select,
.navbar-teogest .societe-dossier input[type="text"] {
    max-width: 180px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--tg-header-fg);
    font-weight: 600;
    outline: none;
}

/* Caret blanc cohérent (chevron Bootstrap) à la place de la flèche native — illisible
   sur fond marine. `appearance:none` masque la flèche système ; on réserve la place à droite. */
.navbar-teogest .societe-dossier select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 1.15rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .05rem center;
    background-size: .65rem;
}

.navbar-teogest .societe-dossier select option {
    color: #212529; /* liste déroulante native sur fond clair */
}

/* ----------------------------------------------------------------------------
   Sélecteur Société en mode RECHERCHE (input + autocomplétion).
   Rendu quand le nombre de sociétés accessibles dépasse le seuil de liste
   déroulante : la société n'est plus un menu mais un champ `SocieteSearchEditV2`.
   Markup : <span.inputSearchContainer> > input[text] + <span.inputSearchContainerSpan> > a(loupe).
   Par défaut la loupe est un picto flottant APRÈS l'input (hors champ) → on en fait
   une vraie barre de recherche translucide sur le marine, LOUPE À L'INTÉRIEUR (à droite).
   La liste de suggestions (ul.ui-autocomplete, ajoutée à <body>) est stylée dans
   socle/controles-natifs.css.
   ---------------------------------------------------------------------------- */
#navbar-principale .societe-dossier .inputSearchContainer {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Champ : fond clair discret, bordure douce, coins arrondis, place réservée à
   droite pour la loupe (padding-right). Texte clair (couleur header). */
#navbar-principale .societe-dossier .inputSearchContainer input[type="text"] {
    width: 100%;
    max-width: 220px;
    height: 32px;
    padding: 0 1.95rem 0 2.05rem; /* icône dossier à gauche + loupe à droite */
    border: 1px solid var(--tg-header-border);
    border-radius: .45rem;
    background: rgb(255 255 255 / 10%);
    color: var(--tg-header-fg);
    font: inherit;
    font-weight: 500;
    outline: none;
}

#navbar-principale .societe-dossier .inputSearchContainer input[type="text"]::placeholder {
    color: var(--tg-header-fg-muted);
    font-weight: 400;
}

#navbar-principale .societe-dossier .inputSearchContainer input[type="text"]:focus {
    border-color: var(--tg-header-fg-soft);
    background: rgb(255 255 255 / 16%);
    box-shadow: 0 0 0 .15rem rgb(255 255 255 / 12%);
}

/* Largeur DYNAMIQUE du champ société : la raison sociale doit TOUJOURS s'afficher en entier.
   `field-sizing:content` (Chrome/Edge) dimensionne le champ sur son contenu ; on borne par min/max.
   Le `width` inline legacy (posé par SocieteSearchEditV2) est neutralisé — `!important` justifié
   (override d'un style inline). Repli navigateurs sans field-sizing : max-width large (nom lisible).
   ⚠️ On cible l'input DIRECTEMENT (pas `.ui-autocomplete-input`) : cette classe est ajoutée
   tardivement/asynchrone par le plugin autocomplete → sinon le champ reste plafonné à sa largeur de
   base (raison sociale tronquée) jusqu'au 1er reflow (« corrige au survol »). En ciblant l'input,
   `field-sizing` s'applique dès le 1er rendu, sans attendre l'init du plugin. */
#navbar-principale .societe-dossier .inputSearchContainer input[type="text"] {
    field-sizing: content;
    width: auto !important;
    min-width: 6ch;
    max-width: 22rem;
}

/* Loupe À L'INTÉRIEUR du champ (à droite), centrée verticalement. */
#navbar-principale .societe-dossier .inputSearchContainerSpan {
    position: absolute;
    top: 50%;
    right: .15rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

#navbar-principale .societe-dossier .inputSearchContainerSpan a,
#navbar-principale .societe-dossier .inputSearchContainerSpan a span {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--tg-header-fg-soft);
    text-decoration: none;
}

#navbar-principale .societe-dossier .inputSearchContainerSpan a {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .35rem;
}

#navbar-principale .societe-dossier .inputSearchContainerSpan a:hover {
    color: var(--tg-header-fg);
    background: rgb(255 255 255 / 12%);
}

#navbar-principale .societe-dossier .inputSearchContainerSpan svg,
#navbar-principale .societe-dossier .inputSearchContainerSpan .picto {
    width: 1rem;
    height: 1rem;
}

/* ----------------------------------------------------------------------------
   Menus déroulants personnalisés Société / Dossier annuel (remplacent les <select>
   natifs — cf. maquettes « headerdroite » / « dossierheader »). Déclencheur = texte
   courant + caret blanc dans la pilule marine ; panneau = fond blanc, une ligne par
   entrée, entrée courante en bleu, icône calendrier (dossier) / recherche client (société).
   ---------------------------------------------------------------------------- */
#navbar-principale .societe-dossier .societe-toggle,
#navbar-principale .societe-dossier .dossier-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--tg-header-fg);
    font-size: .85rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Pas de troncature du nom (société / exercice) : la ligne reste insécable et s'affiche en entier. */
#navbar-principale .societe-dossier .societe-courante-libelle,
#navbar-principale .societe-dossier .dossier-courant-libelle {
    white-space: nowrap;
}

/* Dossier annuel non cliquable (un seul exercice / sélection verrouillée) : pas de curseur main. */
#navbar-principale .societe-dossier .dossier-toggle:not(.dropdown-toggle) {
    cursor: default;
}

/* Caret Bootstrap blanc, aligné sur le texte. */
.navbar-teogest .societe-dossier .dropdown-toggle::after {
    margin-left: .1rem;
    vertical-align: middle;
    color: var(--tg-header-fg-soft);
}

/* Panneau commun (fond blanc, ombre douce, coins arrondis). */
.navbar-teogest .societe-dossier .dropdown-menu {
    margin-top: .4rem;
    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%);
}

/* ---- Menu Dossier annuel ---- */
.navbar-teogest .dossier-annuel-menu {
    min-width: 13rem;
}

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

/* Icône par item : SVG Lucide (folder-open-dot). ⚠️ Les items utilisent du Lucide `<svg>` et NON
   `.bi` (Bootstrap Icons) → cibler le svg, sinon l'icône garde sa taille Lucide par défaut (24px).
   Dimensions/couleur IDENTIQUES au dropdown dossier du dashboard (1rem, gris #9aa0a6). */
#navbar-principale .dossier-annuel-menu .dropdown-item .bi,
#navbar-principale .dossier-annuel-menu .dropdown-item svg,
#navbar-principale .dossier-annuel-menu .dropdown-item [data-lucide] {
    width: 1rem;
    height: 1rem;
    font-size: .95rem;
    color: #9aa0a6;
}

#navbar-principale .dossier-annuel-menu .dropdown-item:hover,
#navbar-principale .dossier-annuel-menu .dropdown-item:focus {
    background: #f1f3f5;
    color: #212529;
}

/* ---- Menu Société ---- */
.navbar-teogest .societe-menu {
    min-width: 15rem;
}

#navbar-principale .societe-menu .societe-menu-cabinet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: .45rem;
    color: #212529;
    font-weight: 500;
    text-decoration: none;
}

#navbar-principale .societe-menu .societe-menu-cabinet:hover {
    background: #f1f3f5;
}

#navbar-principale .societe-menu .societe-menu-cabinet .bi {
    color: #9aa0a6;
}

.navbar-teogest .societe-menu .societe-menu-recherche {
    margin-top: .25rem;
    padding: .4rem .6rem .25rem;
    border-top: 1px solid rgb(0 0 0 / 6%);
}

.navbar-teogest .societe-menu .societe-menu-label {
    margin-bottom: .25rem;
    font-size: .72rem;
    color: #6c757d;
}

/* Champ de recherche avec loupe À L'INTÉRIEUR de l'input (icône positionnée en absolu). */
.navbar-teogest .societe-menu .societe-menu-search-wrap {
    position: relative;
}

#navbar-principale .societe-menu .societe-menu-input {
    width: 100%;
    padding: .35rem .6rem .35rem 1.9rem;
    border: 1px solid #ced4da;
    border-radius: .45rem;
    background: #fff;
    color: #212529;
    font-weight: 400;
    outline: none;
}

#navbar-principale .societe-menu .societe-menu-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgb(13 110 253 / 15%);
}

.navbar-teogest .societe-menu .societe-menu-search-wrap .bi {
    position: absolute;
    top: 50%;
    left: .6rem;
    transform: translateY(-50%);
    color: #9aa0a6;
    pointer-events: none;
}

.navbar-teogest .societe-menu .societe-menu-liste {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    max-height: 16rem;
    overflow-y: auto;
}

#navbar-principale .societe-menu .societe-item {
    display: block;
    padding: .45rem .6rem;
    border-radius: .45rem;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#navbar-principale .societe-menu .societe-item:hover,
#navbar-principale .societe-menu .societe-item:focus {
    background: #f1f3f5;
    color: #212529;
}

/* Entrée courante (société/dossier sur lequel on est positionné) : bleu + gras. */
#navbar-principale .societe-dossier .dropdown-item.actif-courant,
#navbar-principale .societe-dossier .dropdown-item.actif-courant .bi {
    color: var(--sb-text);
}

#navbar-principale .societe-dossier .dropdown-item.actif-courant {
    font-weight: 600;
}

/* ⚠️ topmenu.css (legacy) pose `.navbar-teogest a span { display:block; margin-top:11px; color:white }`
   (pensé pour les <span> qui enveloppent les <i> de la barre d'icônes). Sur nos toggles ET nos menus
   déroulants, ces <span> portent du TEXTE : on neutralise le bloc/marge (désalignement) et, sur le
   panneau blanc, on force l'héritage de la couleur de l'entrée (sinon texte blanc sur fond blanc). */
#navbar-principale .societe-dossier .societe-toggle span,
#navbar-principale .societe-dossier .dossier-toggle span,
#navbar-principale .societe-dossier .dropdown-menu a span {
    display: inline;
    margin-top: 0;
    line-height: normal;
    text-align: left;
}

#navbar-principale .societe-dossier .dropdown-menu a span {
    color: inherit;
}

/* ---- Étoile favoris (réemploi de l'icône synthèse globale) ---- */
.navbar-teogest .icon-syntheseGlobale .bi,
.navbar-teogest .btn-syntheseGlobale .bi {
    color: #ffc857;
}

/* ---- Bloc utilisateur : avatar rond (photo ou initiales) + nom + type société ---- */
.navbar-teogest .utilisateur {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: .5rem;
}

.navbar-teogest .image-utilisateur {
    flex: 0 0 auto;
}

.navbar-teogest .image-utilisateur > img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: rgb(255 255 255 / 15%);
}

/* Repli initiales (pas de photo) : rond plein, initiales centrées (cf. maquette « KH »). */
.navbar-teogest .image-utilisateur .avatar-initiales {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--tg-avatar-bg, #2f6fa8);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.navbar-teogest .utilisateur .nom-utilisateur,
.navbar-teogest .nom-utilisateur {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: .82rem;
    color: var(--tg-header-fg);
}

/* Nom complet (prénom + nom) sur une ligne, en gras (cf. « Kevin Hamon »). */
.navbar-teogest .nom-utilisateur .nom-complet {
    font-weight: 600;
    white-space: nowrap;
}

/* Sous-titre = type de société rattachée (Cabinet / Entreprise). */
.navbar-teogest .nom-utilisateur .type-societe {
    font-size: .72rem;
    color: var(--tg-header-fg-muted);
    white-space: nowrap;
}

/* ---- Barre d'icônes (historique, mail, aide, paramètres, déconnexion…) ---- */
.navbar-teogest .bloc-icones {
    display: flex;
    align-items: center;
    gap: .15rem;
}

.navbar-teogest .nav-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
}

.navbar-teogest .nav-icon a,
.navbar-teogest .nav-icon a span {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tg-header-fg-soft);
}

.navbar-teogest .nav-icon .bi {
    font-size: 1rem;
}

.navbar-teogest .nav-icon:hover {
    background: rgb(255 255 255 / 12%);
}

/* Lanceur de modules (logo « 4 carrés ») : icône bi à la place de l'ancien SVG, alignée
   et colorée comme les autres icônes du cluster. Le wrapper reste cliquable (menuModules.js). */
.navbar-teogest .nav-icon .picto-menu-modules,
.navbar-teogest .nav-icon .picto-menu-modules > div {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tg-header-fg-soft);
}

.navbar-teogest .nav-icon .picto-menu-modules .bi {
    font-size: 1.05rem;
}

/* Séparateurs verticaux discrets entre groupes du cluster.
   `width:1px` explicite (auto-suffisant) : ne dépend pas de topmenu.css (legacy à retirer). */
.navbar-teogest .vdivider {
    width: 1px;
    height: 28px;
    align-self: center;
    background: var(--tg-header-border);
    opacity: 1;
}

/* ----------------------------------------------------------------------------
   Menu des modules INTÉGRÉ dans la barre haute (header une seule ligne).
   Le menu (ul.nav.navbar-nav > li[.actif] > a) est rendu par _Header dans
   .navbar-modules, entre le logo et le cluster droit (ms-auto).

   Header sur UNE seule ligne (OBLIGATOIRE) : #header est position:fixed top:0
   SANS hauteur fixe (socle/shell.css) et le fil d'Ariane est figé à top:56px →
   une 2ᵉ ligne de menu recouvrirait le fil d'Ariane (bug constaté). Le menu occupe
   donc l'espace libre entre le logo et le cluster ; les entrées qui ne tiennent pas
   sont repliées dans un bouton « ⋮ » (priority+, piloté par header.js :
   ajusterMenuModulesDebordement). Les entrées NE rétrécissent PAS (flex:0 0 auto)
   pour permettre une mesure fiable du débordement (sinon le texte se compresse). */
@media (min-width: 768px) {
    .navbar-teogest .container-fluid {
        flex-wrap: nowrap;
    }

    .navbar-teogest #menu-principal {
        min-width: 0;
        flex-wrap: nowrap;
    }
}

.navbar-teogest .navbar-modules {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: .5rem;
}

.navbar-teogest .navbar-modules .navbar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
}

.navbar-teogest .navbar-modules .navbar-nav > li {
    flex: 0 0 auto;
}

/* ⚠️ Préfixe #navbar-principale (spécificité ID, 1,x,x) OBLIGATOIRE sur toutes les règles
   de COULEUR du menu : teogest-fonctionnel.css pose `#topBlock a { color: var(--tg-bandeau-texte,#fff) }`
   (1,0,1) qui englobe tout le header (le <nav id=navbar-principale> est dans #topBlock) et
   écraserait des règles en simple classe (0,x,x) → libellés/sous-menus rendus blancs. */
#navbar-principale .navbar-modules .navbar-nav > li > a {
    display: block;
    margin: 0 .1rem;
    padding: .4rem .7rem;
    color: var(--tg-header-fg-soft);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border-radius: .4rem;
}

#navbar-principale .navbar-modules .navbar-nav > li > a:hover {
    color: var(--tg-header-fg);
    background: rgba(255, 255, 255, .08);
}

/* Module actif : PILULE orange pleine (cf. « Révision » de la maquette Skapa) — plus de
   soulignement, mais un fond plein arrondi + texte blanc. */
#navbar-principale .navbar-modules .navbar-nav > li.actif > a,
#navbar-principale .navbar-modules .navbar-nav > li.actif > a:hover {
    background: var(--tg-header-accent);
    color: #fff;
    font-weight: 600;
    padding-inline: .6rem;
    padding-block: .3rem;
}

/* Sous-menus déroulants sur fond clair (lisibilité). */
.navbar-teogest .navbar-modules .dropdown-menu {
    background: #fff;
}

/* Pas de « couloir mort » entre l'entrée de menu et son panneau : l'espacement BS5
   (--bs-dropdown-spacer, appliqué en margin-top par Popper) est une bande hors de
   l'élément survolé → le curseur qui la traverse déclenche un mouseleave. On colle le
   panneau à l'entrée et on récupère l'écart visuel en padding INTERNE (donc survolable). */
#navbar-principale .navbar-modules .dropdown-menu[data-bs-popper],
#navbar-principale .navbar-modules .dropdown-menu {
    margin-top: 0;
    padding-top: 0.25rem;
}

#navbar-principale .navbar-modules .dropdown-menu li > a,
#navbar-principale .navbar-modules .dropdown-item {
    color: #212529;
}

#navbar-principale .navbar-modules .dropdown-menu li > a:hover,
#navbar-principale .navbar-modules .dropdown-item:hover,
#navbar-principale .navbar-modules .dropdown-item:focus {
    color: #1e2125;
    background-color: #e9ecef;
}

/* ----------------------------------------------------------------------------
   Bouton « ⋮ » de débordement du menu modules (priority+, cf. header.js).
   Repli des entrées qui ne tiennent pas sur la ligne unique du header.
   ---------------------------------------------------------------------------- */
.navbar-teogest .navbar-modules .navbar-nav > li.tg-menu-plus {
    flex: 0 0 auto;
}

#navbar-principale .navbar-modules .tg-menu-plus-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 .1rem;
    padding: .45rem .55rem;
    color: var(--tg-header-fg-soft);
    border-bottom: 3px solid transparent;
    text-decoration: none;
}

/* Pas de caret Bootstrap (▾) à côté des trois points. */
.navbar-teogest .navbar-modules .tg-menu-plus-toggle::after {
    display: none;
}

#navbar-principale .navbar-modules .tg-menu-plus-toggle:hover,
#navbar-principale .navbar-modules .tg-menu-plus.show .tg-menu-plus-toggle {
    color: var(--tg-header-fg);
}

.navbar-teogest .navbar-modules .tg-menu-plus-toggle .bi {
    font-size: 1.15rem;
    line-height: 1;
}

/* L'icône « ⋮ » est désormais un <i data-lucide="ellipsis-vertical"> rendu en <svg> 24px par
   défaut (Lucide) → trop gros. On le ramène à la taille voulue (≈ celle du .bi voisin). */
.navbar-teogest .navbar-modules .tg-menu-plus-toggle svg,
.navbar-teogest .navbar-modules .tg-menu-plus-toggle [data-lucide] {
    width: 1.15rem;
    height: 1.15rem;
}

/* Le déroulant ⋮ réutilise le style clair des sous-menus modules (ci-dessus) ; on
   borne juste sa hauteur (entrées aplaties : libellé de parent en en-tête + enfants). */
.navbar-teogest .navbar-modules .tg-menu-plus .dropdown-menu {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

.navbar-teogest .navbar-modules .tg-menu-plus .dropdown-header {
    font-weight: 600;
    color: #6c757d;
}

/* ----------------------------------------------------------------------------
   Icônes des sélecteurs Société / Dossier (cf. maquette : personne + dossier).
   Spécificité ID (#navbar-principale) pour passer DEVANT teogest-fonctionnel.css
   (chargé avant header-pages.css). On masque le libellé « Société gérée : » au
   profit d'une icône ; on préfixe « Dossier annuel : » d'une icône dossier ; et
   « Données du cabinet » devient une pilule cohérente avec une icône bâtiment.
   ---------------------------------------------------------------------------- */
#navbar-principale #spanSociete {
    margin: 0;
}

/* Espaceurs d'alignement legacy (15px) inutiles dans la pilule flex (le `gap` suffit).
   `!important` requis : le markup porte la classe utilitaire Bootstrap `d-md-inline-block`
   (display:inline-block !important au-dessus de md) qui bat un simple display:none. */
#navbar-principale .societe-dossier .arrow-spacer {
    display: none !important;
}

/* Étoile « fiche de synthèse » : topmenu.css la met en position:absolute (top:2px) ; or la
   pilule n'est pas un ancêtre positionné → l'étoile s'échappait en haut à gauche du header.
   On la remet dans le flux flex (static), dimensionnée et colorée comme la maquette. */
#navbar-principale .societe-dossier .boutonFicheSynthese {
    display: inline-flex;
    align-items: center;
}

#navbar-principale .societe-dossier .boutonFicheSynthese .icon {
    position: static;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    fill: #ffc857;
}

#navbar-principale #spanSociete .select-label {
    width: auto;
    margin: 0;
    font-size: 0; /* masque le texte du libellé, remplacé par l'icône ::before */
}

#navbar-principale #spanSociete .select-label::before {
    content: "\e0d7"; /* lucide folder — même logo que le sélecteur société du header dashboard */
    font-family: lucide;
    font-size: 1.15rem; /* même taille que les icônes du dashboard */
    line-height: 1;
    margin-right: .4rem; /* même espacement icône↔texte que le dossier annuel */
    vertical-align: middle; /* aligné verticalement comme l'icône dossier annuel */
    color: var(--tg-header-fg-soft);
}

/* Variante RECHERCHE (loupe, sans .select-label) : on pose l'icône folder JUSTE AVANT le champ de
   recherche (et non en début de conteneur, où le bouton « retour cabinet » + le spacer
   l'éloignaient de la raison sociale) → collée au texte, comme l'icône du dossier annuel. */
/* Icône dossier À L'INTÉRIEUR du champ (à gauche), comme la loupe à droite. */
#navbar-principale #spanSociete .inputSearchContainer::before {
    content: "\e0d7"; /* lucide folder */
    font-family: lucide;
    font-size: 1.05rem;
    line-height: 1;
    position: absolute;
    left: .55rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    color: var(--tg-header-fg-soft);
}

/* Société unique : affichage statique (nom + icône dossier), sans champ éditable ni loupe. */
#navbar-principale #spanSociete .societe-libelle-statique {
    display: inline-flex;
    align-items: center;
    color: var(--tg-header-fg);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

#navbar-principale #spanSociete .societe-libelle-statique::before {
    content: "\e0d7"; /* lucide folder */
    font-family: lucide;
    font-size: 1.05rem;
    line-height: 1;
    margin-right: .4rem;
    color: var(--tg-header-fg-soft);
}

/* Picto « Accès direct à la société du cabinet » : à gauche du cluster société (avant la
   société), en couleur d'accent (main). L'icône Lucide est en stroke → couleur via `color`
   (le `fill` legacy de topmenu.css n'a aucun effet sur un tracé Lucide). */
#navbar-principale .societe-dossier .retour-cabinet {
    display: inline-flex;
    align-items: center;
    /* order:-1 → passe DEVANT le pseudo `::before` (folder société, order 0) et tous les autres
       items flex du conteneur → le picto « accès cabinet » est le tout premier élément à gauche. */
    order: -1;
    /* Un peu décalé vers la gauche + place pour le séparateur vertical (::after) avant l'icône
       dossier société qui suit (distingue le bouton « accès cabinet » des sélecteurs). */
    margin-left: -.15rem;
    /* Écarts équilibrés autour du séparateur (::after) : padding-right = écart maison→séparateur,
       margin-right = écart séparateur→icône Dossier. On les rend ~symétriques. */
    padding-right: 1rem;
    margin-right: .2rem;
    position: relative;
    color: var(--bs-main);
}

/* Séparateur vertical visible : couleur dérivée du texte du header (≠ --tg-header-border qui vaut
   blanc 18% → invisible sur ce header clair). S'adapte aux thèmes (clair = trait sombre, sombre = clair). */
#navbar-principale .societe-dossier .retour-cabinet::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: color-mix(in srgb, var(--tg-header-fg) 28%, transparent);
}

    #navbar-principale .societe-dossier .retour-cabinet svg {
        width: 1.15rem;
        height: 1.15rem;
        color: var(--bs-main);
    }

#navbar-principale .dossier-annuel-container .select-label {
    width: auto;
    font-size: .85rem;
    line-height: 1;
    color: var(--tg-header-fg-muted); /* libellé atténué (comme le dashboard) */
}

#navbar-principale .dossier-annuel-container .select-label::before {
    content: "\e4c7"; /* lucide folder-open-dot — même logo que le sélecteur dossier annuel du header dashboard */
    font-family: lucide;
    font-size: 1.15rem; /* même taille que les icônes du dashboard */
    line-height: 1;
    margin-right: .4rem;
    vertical-align: middle;
    color: var(--tg-header-fg-soft);
}

/* Valeur (exercice) : couleur pleine + gras (contraste comme la valeur du dashboard, où le
   libellé est atténué et l'exercice fort). Correction couleur du texte du select. */
#navbar-principale .dossier-annuel-container .dossier-courant-libelle {
    color: var(--tg-header-fg);
    font-weight: 600;
}

/* Alignement vertical libellé / valeur : l'icône ::before du libellé (1.15rem) gonflait sa boîte
   par rapport à la valeur (texte seul) → le texte de l'exercice apparaissait plus bas. On centre
   chaque span (icône + texte) et on égalise la hauteur de ligne pour aligner les deux textes. */
#navbar-principale .dossier-annuel-container .dossier-toggle .select-label,
#navbar-principale .dossier-annuel-container .dossier-toggle .dossier-courant-libelle {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

#navbar-principale .dossier-annuel-container .dossier-toggle .select-label::before {
    vertical-align: middle;
}

#navbar-principale .societe-dossier .spanCabinet {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: 38px;
    margin: 0;
    padding: 0 .35rem;
    border: none;
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
}

#navbar-principale .societe-dossier .spanCabinet::before {
    content: "\e1cc"; /* lucide building */
    font-family: lucide;
    font-size: .95rem;
    color: var(--tg-header-fg-soft);
}

/* ----------------------------------------------------------------------------
   (LEGACY) Ancienne barre de navigation modules séparée `.navbar-sousmenu` —
   plus rendue depuis l'intégration dans la barre haute (header 1 ligne).
   Règles conservées sans effet ; à retirer après validation.
   ---------------------------------------------------------------------------- */
.navbar-sousmenu {
    background: var(--tg-header-bg);
    min-height: 55px;
    padding: 0 1rem;
    border-top: 1px solid rgb(255 255 255 / 8%);
}

.navbar-sousmenu .navbar-nav > li > a {
    margin: 0 .15rem;
    padding: .45rem .7rem !important;
    color: rgb(255 255 255 / 85%);
    font-weight: 500;
    border-radius: .4rem;
}

.navbar-sousmenu .navbar-nav > li > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

/* Module actif : PILULE orange pleine (cf. « Révision » de la maquette Skapa) — plus de soulignement. */
.navbar-sousmenu .navbar-nav > li.actif > a,
.navbar-sousmenu .navbar-nav > li.actif > a:hover {
    background: var(--tg-header-accent);
    color: #fff;
    font-weight: 600;
}

/* Sous-menus déroulants sur fond clair (lisibilité). */
.navbar-sousmenu .dropdown-menu {
    background: #fff;
}

.navbar-sousmenu .dropdown-menu li > a,
.navbar-sousmenu .dropdown-item {
    color: #212529;
}

/* ----------------------------------------------------------------------------
   Fil d'Ariane — barre de titre des pages, sous le bloc d'en-tête marine.
   Restyle de .titre-layout-page (cf. _Layout.cshtml) en breadcrumb clair façon
   maquette « révision » : chevron retour + module (bleu) > page courante (gris).
   On conserve le positionnement (position:fixed + top) défini dans socle/shell.css.
   ---------------------------------------------------------------------------- */
.titre-layout-page.fil-ariane {
    /* Le fil d'Ariane N'EST PAS impacté par la personnalisation de couleurs du cabinet : il suit
       toujours le fond du THÈME. Son texte (module en bleu, page courante en gris) est en couleurs
       fixes de la charte ; le brancher sur --tg-header-bg (perso) le rendait illisible dès qu'un
       cabinet choisissait un bandeau sombre. Seul le BANDEAU suit la perso. */
    background: var(--tg-sidebar-bg, #ffffff);
    border-bottom: 1px solid var(--bs-border-color);
    padding: .45rem 1rem;
    font-size: .82rem;
    /* Pleine largeur : le trait du border-bottom file jusqu'au bord droit
       (override du width:97% de socle/shell.css). box-sizing:border-box pour
       que le padding horizontal reste dans les 100% (pas de débordement /
       scroll). left:0 fige la barre au bord gauche. La hauteur ne change pas,
       donc le contenu en dessous n'est pas impacté. */
    width: 100%;
    left: 0;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.fil-ariane-nav {
    display: flex;
    align-items: center;
    gap: .4rem;
    line-height: 1;
}

.fil-ariane-retour {
    display: inline-flex;
    align-items: center;
    color: var(--bs-main); /* flèche retour = couleur main (orange Septeo) */
    text-decoration: none;
}

.fil-ariane-retour:hover {
    color: var(--bs-main);
    opacity: .8;
}

/* Aucun retour disponible (ex. page d'accueil d'un module) : flèche grisée (secondary),
   non cliquable — signale visuellement qu'il n'y a pas de retour. */
.fil-ariane-retour--inactif,
.fil-ariane-retour--inactif:hover {
    color: var(--bs-secondary);
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

.fil-ariane-sep {
    color: var(--bs-tertiary-color);
}

.fil-ariane-parent {
    color: var(--bs-link-color);
}

.fil-ariane-courant {
    color: var(--bs-secondary-color);
}

/* ----------------------------------------------------------------------------
   Repli mobile : on laisse le comportement collapse Bootstrap d'origine,
   on garde juste le fond marine sur les panneaux ouverts.
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Cluster droit replié dans le panneau du hamburger : on empile verticalement,
       aligné à gauche, et chaque groupe occupe la largeur dispo. */
    .navbar-teogest .navbar-nav.ms-auto {
        align-items: stretch;
        gap: .6rem;
        flex-wrap: wrap;
        width: 100%;
        margin-top: .5rem;
    }

    .navbar-teogest .societe-dossier {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .navbar-teogest .societe-dossier .comboContainer,
    .navbar-teogest .societe-dossier .spanCabinet {
        flex: 1 1 100%;
    }

    /* Les sélecteurs prennent toute la largeur dispo une fois empilés. */
    .navbar-teogest .societe-dossier select,
    .navbar-teogest .societe-dossier input[type="text"] {
        max-width: none;
        flex: 1 1 auto;
    }

    /* Panneaux déroulants Société / Dossier annuel : le `.dropdown-menu` est un enfant FLEX du
       `.comboContainer` (ligne) → il s'affichait à DROITE du toggle et SORTAIT de l'écran sur petit
       écran. Sur mobile : le conteneur wrappe et le panneau passe en PLEINE LARGEUR sous le toggle.
       (Un `margin-left` legacy de 30px le décalait/débordait → neutralisé par margin:.25rem 0 0.) */
    #navbar-principale .societe-dossier .comboContainer {
        flex-wrap: wrap;
    }

    #navbar-principale .societe-dossier .dropdown-menu {
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: .25rem 0 0;
    }

    .navbar-teogest .bloc-icones {
        flex-wrap: wrap;
        gap: .25rem;
    }

    /* ---- Burger : icône seule (ni boîte ni bordure blanche), alignée au logo sur une ligne.
       Surcharge la bordure legacy `topmenu.css .navbar-toggle { border:1px white }` (spécificité ID). ---- */
    .navbar-teogest .navbar-header {
        display: flex;
        align-items: center;
        gap: .15rem;
        width: 100%; /* pleine ligne → permet de pousser le burger au bord droit */
    }

    #navbar-principale .navbar-toggler,
    #navbar-principale .navbar-toggle {
        order: 1;            /* burger À DROITE (logo à gauche) */
        margin: 0 0 0 auto; /* poussé au bord droit */
        min-width: 0;
        padding: .25rem .4rem;
        border: 0;
        background: transparent;
        color: var(--tg-header-fg);
        box-shadow: none;
    }

    #navbar-principale .navbar-toggler:focus,
    #navbar-principale .navbar-toggler:active {
        box-shadow: none;
        outline: none;
    }

    #navbar-principale .navbar-toggler svg,
    #navbar-principale .navbar-toggler i[data-lucide] {
        width: 26px;
        height: 26px;
    }

    /* ---- Menu déroulé (burger ouvert) : modules EMPILÉS verticalement, pleine largeur, lisibles
       (le défaut row/nowrap du header une-ligne déborde sinon). Le JS de débordement « ⋮ » est
       neutralisé sous 768px (header.js : matchMedia 767.98 → return). ---- */
    #navbar-principale .navbar-modules {
        width: 100%;
        margin: .25rem 0 0;
    }

    #navbar-principale .navbar-modules .navbar-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
        gap: 2px;
    }

    #navbar-principale .navbar-modules .navbar-nav > li {
        width: 100%;
        flex: 0 0 auto;
    }

    #navbar-principale .navbar-modules .navbar-nav > li > a {
        display: block;
        width: 100%;
        margin: 0;
        padding: .6rem .75rem;
    }

    /* Sous-menus de modules : en FLUX (pas un panneau flottant qui déborde de l'écran), repliés
       sous leur parent quand ouverts. Texte clair sur le fond marine, légèrement renfoncé. */
    #navbar-principale .navbar-modules .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: rgba(255, 255, 255, .06);
    }

    #navbar-principale .navbar-modules .dropdown-menu li > a,
    #navbar-principale .navbar-modules .dropdown-item {
        color: var(--tg-header-fg);
        padding: .5rem .75rem .5rem 1.6rem;
        white-space: normal;
    }

    #navbar-principale .navbar-modules .dropdown-menu li > a:hover,
    #navbar-principale .navbar-modules .dropdown-item:hover {
        color: var(--tg-header-fg);
        background: rgba(255, 255, 255, .12);
    }

    /* Padding bas du panneau déplié (sous le menu + sélecteurs). */
    .navbar-teogest #menu-principal {
        padding-bottom: .5rem;
    }

    /* Le rail (position:fixed, gauche, z-index 1031) recouvrait le menu burger déployé
       (header en z-index 999) → libellés coupés derrière le rail. Sous 768px on remonte le
       header AU-DESSUS du rail : le menu déployé (fond marine plein) passe par-dessus et reste
       lisible ; le rail réapparaît à la fermeture du burger. */
    .has-rail-modules #header {
        z-index: 1040;
    }
}