/* ============================================================
   tab-scroll.css — Composant slider horizontal pour menus/onglets
   #9798 — Remplace le carousel Bootstrap par un scroll natif
   ============================================================ */

/* Container principal — engloble le track scrollable + les flèches */
.eb-tab-scroll {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

/* Track scrollable — la zone qui scroll horizontalement */
.eb-tab-scroll-track {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    flex: 1;
    min-width: 0;
    gap: 0;
    align-items: center;
}
.eb-tab-scroll-track::-webkit-scrollbar { display: none; }

/* Les tabs à l'intérieur du track */
.eb-tab-scroll-track > a,
.eb-tab-scroll-track > .nav-item,
.eb-tab-scroll-track > li {
    flex-shrink: 0;
}

/* Flèches de navigation */
.eb-tab-scroll-arrow {
    display: none; /* masqué par défaut, JS active si overflow */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    border: 1px solid var(--eb-border, #e2e8f0);
    background: var(--eb-surface, #fff);
    color: var(--eb-text-secondary, #64748b);
    cursor: pointer;
    flex-shrink: 0;
    z-index: 2;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    font-size: 12px;
    box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}
@media (hover: hover){.eb-tab-scroll-arrow:hover{
    background: var(--eb-bg, #f1f5f9);
    color: var(--eb-text, #1e293b);
}}
.eb-tab-scroll-arrow.eb-hidden { opacity: 0; pointer-events: none; }

/* Quand le contenu dépasse — JS ajoute .eb-tab-scroll--overflows */
.eb-tab-scroll--overflows .eb-tab-scroll-arrow { display: flex; }

/* Fade indicators aux bords */
.eb-tab-scroll::before,
.eb-tab-scroll::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 24px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;
}
.eb-tab-scroll::before {
    left: 40px; /* après la flèche gauche */
    background: linear-gradient(to right, var(--eb-surface, #fff), transparent);
}
.eb-tab-scroll::after {
    right: 40px; /* avant la flèche droite */
    background: linear-gradient(to left, var(--eb-surface, #fff), transparent);
}
.eb-tab-scroll--fade-left::before { opacity: 1; }
.eb-tab-scroll--fade-right::after { opacity: 1; }

/* Sans overflow — pas de fades ni flèches, track pleine largeur */
.eb-tab-scroll:not(.eb-tab-scroll--overflows)::before,
.eb-tab-scroll:not(.eb-tab-scroll--overflows)::after { display: none; }

/* ---- Main menu wrapper (généré par carousel_menu_js) ---- */
.eb-tab-scroll-menu {
    display: flex;
    align-items: center;
    gap: 4px; /* espace entre pastilles — aligné sur .menu-mobile (évite les onglets collés) */
    padding: 0 4px;
    overflow: hidden; /* contraint la largeur au parent pour activer le scroll */
}
.eb-tab-scroll-item {
    flex-shrink: 0;
}
.eb-tab-scroll-item a {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
}

/* Sub-tabs : l'eb-tab-scroll enfant d'un ul.nav doit occuper toute la largeur */
ul.nav > .eb-tab-scroll {
    flex: 1;
    min-width: 0;
}

/* ---- Champ de recherche automatique (> SEARCH_THRESHOLD onglets) ---- */
.eb-tab-search-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.eb-tab-search-container > ul.nav {
    flex: 1;
    min-width: 0;
}
.eb-tab-search {
    flex-shrink: 0;
    width: 180px;
    position: relative;
}
.eb-tab-search .input-group-text {
    background-color: var(--eb-surface, #fff);
    border-color: var(--eb-border, #e2e8f0);
    border-right: none;
    color: var(--eb-text-secondary, #64748b);
}
.eb-tab-search .eb-tab-search-input {
    background-color: var(--eb-surface, #fff);
    border-color: var(--eb-border, #e2e8f0);
    border-left: none;
    color: var(--eb-text, #1e293b);
    /* Réserve la place pour la croix interne quand elle est visible */
    padding-right: 2rem;
    box-shadow: var(--eb-shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
}
/* Croix de reset positionnée À L'INTÉRIEUR du champ recherche (overlay
   absolu, sans casser le layout flex de input-group). */
.eb-tab-search .eb-tab-search-clear {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    z-index: 5;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    line-height: 1;
    color: var(--eb-text-secondary, #94a3b8);
    cursor: pointer;
    border-radius: 50%;
    transition: color .15s ease, background-color .15s ease;
}
@media (hover: hover){.eb-tab-search .eb-tab-search-clear:hover{
    color: var(--eb-danger, #dc2626);
    background-color: var(--eb-bg, #f1f5f9);
}}
.eb-tab-search .eb-tab-search-clear[hidden] { display: none; }

/* ---- Mobile : flèches visibles SEULEMENT en cas d'overflow ---- */
/* Avant, les flèches étaient toujours cachées sur mobile (`display:none`) :
   les onglets en overflow (ex. Signature/Performance dépassant un viewport
   de 475px) étaient totalement invisibles, sans indication possible de
   scroller. On garde le scroll natif comme moyen principal mais on remontre
   la flèche droite en cas d'overflow pour signaler l'existence des onglets
   masqués. La gauche apparaît quand le scroll est engagé (.eb-tab-scroll--fade-left). */
@media (max-width: 768px) {
    .eb-tab-scroll:not(.eb-tab-scroll--overflows) .eb-tab-scroll-arrow {
        display: none !important;
    }
    .eb-tab-scroll::before { left: 0; }
    .eb-tab-scroll::after { right: 0; }
    /* La flèche gauche, invisible tant qu'on n'a pas défilé (opacity 0),
       réservait ses 40 px : à 390 px, les onglets commençaient au tiers de la
       barre. Elle passe par-dessus le début de la piste, sans place réservée ;
       son apparition ne décale plus les onglets. */
    .eb-tab-scroll { position: relative; }
    .eb-tab-scroll > .eb-tab-scroll-arrow--left {
        position: absolute;
        left: 0;
        top: 50%;
        translate: 0 -50%;
    }
}

/* ---- Impression : pas de scroll ---- */
@media print {
    .eb-tab-scroll { overflow: visible; }
    .eb-tab-scroll-arrow { display: none !important; }
    .eb-tab-scroll::before, .eb-tab-scroll::after { display: none; }
    .eb-tab-scroll-track { overflow: visible; flex-wrap: wrap; }
}

/* ============================================================
   #9819 — STYLING MODERNE #menu.mc-tabs-bar (factorisation)
   Auto-appliqué par carousel_menu.js sur toutes les pages qui
   utilisent carousel_menu_js($S, 'menu'). Unifie l'apparence des
   menus horizontaux (upd_personnel, upd_vehicule, upd_materiel,
   upd_consommable, upd_company, upd_section, etc.)
   ============================================================ */

/* Palette locale (alias sur les vars dashboard-modern.css si présentes,
   sinon fallback light theme). Définies à :root pour disponibilité
   globale — pas de body class requise. */
:root {
    --mc-primary:         var(--eb-primary, #3B82F6);
    --mc-border:          var(--eb-border,  #E2E8F0);
    --mc-surface-alt:     var(--eb-surface, #FFFFFF);
    --mc-surface-hover:   var(--eb-surface-hover, #F1F5F9);
    --mc-text:            var(--eb-text, #1E293B);
    --mc-text-secondary:  var(--eb-text-secondary, #64748B);
    --mc-on-primary:      #fff;
    --mc-radius:          var(--eb-radius, 12px);
    --mc-shadow-sm:       var(--eb-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    --mc-transition:      var(--eb-transition, 0.2s ease);
    /* « Profondeur par teinte » des niveaux de menu empilés : chaque
       niveau s'enfonce d'un cran de gris. Teintes dérivées du gris de
       bordure par color-mix → cohérentes en thème clair ET sombre
       (clair : blanc → ~#F6F8FA → ~#F2F5F8). Le 3e niveau reste PLUS CLAIR
       que le fond de page (~#EEF0F8) : à 60 % il s'y confondait. */
    --mc-lvl2-bg:         color-mix(in srgb, var(--mc-border) 30%, var(--mc-surface-alt));
    --mc-lvl3-bg:         color-mix(in srgb, var(--mc-border) 45%, var(--mc-surface-alt));
}

/* Barre d'onglets réduite à un seul onglet (droits de l'utilisateur) : pas de
   choix à offrir, on la masque pour rendre la hauteur au contenu. Posé par
   carousel_menu.js (eb_tabs_is_single). Spécificité alignée sur les sélecteurs
   `#menu.mc-tabs-bar` ci-dessous, qui forcent display:flex !important. */
#menu.eb-tabs-single,
html body #menu.eb-tabs-single,
html body.eb-has-topbar-v2 #menu.eb-tabs-single,
.eb-tabs-single {
    display: none !important;
}

/* Spécificité bumpée via html body.eb-has-topbar-v2 pour battre
   `body.eb-has-topbar-v2 #menu` (dashboard-modern.css) qui force
   padding 0 16px !important et height fixe sur le #menu. */
#menu.mc-tabs-bar,
html body #menu.mc-tabs-bar,
html body.eb-has-topbar-v2 #menu.mc-tabs-bar {
    background: var(--mc-surface-alt) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
    box-shadow: var(--mc-shadow-sm) !important;
    /* padding-top augmenté + overflow visible pour laisser passer
       les badges notification (exposant top:-6) sans cropper. */
    padding: 12px 6px 6px !important;
    /* Aligne avec .evd-hero et .evi-layout-grid qui ont margin: 14px 16px ;
       width:auto pour que la marge réduise la largeur visuelle. */
    margin: 0 16px 16px !important;
    width: auto !important;
    overflow: visible !important;
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    top: 0 !important;
    bottom: auto !important;
}
#menu.mc-tabs-bar .eb-tab-scroll-menu,
#menu.mc-tabs-bar .eb-tab-scroll,
#menu.mc-tabs-bar .eb-hscroll-inner,
#menu.mc-tabs-bar .menu-mobile {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}
#menu.mc-tabs-bar .eb-tab-scroll-track {
    overflow-x: auto;
    overflow-y: visible;
    flex: 1 1 auto;
}
#menu.mc-tabs-bar .menu-mobile {
    display: flex !important;
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    flex-wrap: nowrap !important;
}
#menu.mc-tabs-bar .menu-mobile::-webkit-scrollbar { height: 4px; }
#menu.mc-tabs-bar .menu-mobile::-webkit-scrollbar-thumb {
    background: var(--mc-border); border-radius: 2px;
}
/* Cellules (wrappers legacy) */
#menu.mc-tabs-bar .menu-mobile > div,
#menu.mc-tabs-bar .eb-tab-scroll-item {
    flex: 0 0 auto !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
#menu.mc-tabs-bar .menu-mobile > div.div-mobile {
    display: none !important;
}
/* Pills <a> */
#menu.mc-tabs-bar .menu-mobile a,
#menu.mc-tabs-bar .eb-tab-scroll-item > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 40px !important;
    padding: 9px 16px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--mc-text-secondary) !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 0 !important;
    box-shadow: none !important;
    /* #11807 — Deux onglets « actifs » simultanés (Don ▸ Campagnes/Actions).
       Le toggle JS in-place (campagne.js) change en même temps la classe de
       l'enfant <span> (qui pilote les règles :has()) ET la classe .active de
       l'<a> ; avec un `transition: all` sur `background`, Chromium ne réévalue
       pas le :has() de l'onglet désactivé → sa pastille bleue reste figée.
       On limite la transition à `color`/`box-shadow` (pas background/border) :
       la pastille bascule instantanément, plus de figement. */
    transition: color var(--mc-transition), box-shadow var(--mc-transition) !important;
    line-height: 1.2 !important;
    position: relative; /* pour ancrer les badges notification en exposant */
}
@media (hover: hover){#menu.mc-tabs-bar .menu-mobile a:hover,#menu.mc-tabs-bar .eb-tab-scroll-item > a:hover{
    background: var(--mc-surface-hover) !important;
    color: var(--mc-text) !important;
}}
#menu.mc-tabs-bar .menu-mobile a span,
#menu.mc-tabs-bar .eb-tab-scroll-item > a span {
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    /* #9819 — position:static pour que .badge-circle (enfant de span) s'ancre
       sur le <a> parent (position:relative) au lieu du span — sinon le badge
       se positionne au coin du texte et chevauche le libellé du tab. */
    position: static !important;
}
/* Actif (span.active-color / span.marge-active — legacy handleTabActivation).
   #9819 — style aligné sur les alert-primary du dashboard :
   fond bleu transparent + bordure bleue moins transparente + texte bleu foncé. */
#menu.mc-tabs-bar .menu-mobile a:has(span.active-color),
#menu.mc-tabs-bar .menu-mobile a:has(span.marge-active),
#menu.mc-tabs-bar .eb-tab-scroll-item > a:has(span.active-color),
#menu.mc-tabs-bar .eb-tab-scroll-item > a:has(span.marge-active) {
    background: color-mix(in srgb, var(--mc-primary) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--mc-primary) 25%, transparent) !important;
    color: var(--mc-primary) !important;
    box-shadow: none !important;
    padding: 8px 15px !important; /* compense le border 1px pour garder la hauteur */
}
#menu.mc-tabs-bar .menu-mobile a.active,
#menu.mc-tabs-bar .menu-mobile a[aria-selected="true"],
#menu.mc-tabs-bar .eb-tab-scroll-item > a.active,
#menu.mc-tabs-bar .eb-tab-scroll-item > a[aria-selected="true"] {
    background: color-mix(in srgb, var(--mc-primary) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--mc-primary) 25%, transparent) !important;
    color: var(--mc-primary) !important;
    box-shadow: none !important;
    padding: 8px 15px !important; /* compense le border 1px pour garder la hauteur */
}
#menu.mc-tabs-bar .menu-mobile a span.active-color:not(eb-z),
#menu.mc-tabs-bar .menu-mobile a span.active-color span,
#menu.mc-tabs-bar .menu-mobile a span.marge-active:not(eb-z),
#menu.mc-tabs-bar .menu-mobile a span.marge-active span,
#menu.mc-tabs-bar .eb-tab-scroll-item > a span.active-color:not(eb-z),
#menu.mc-tabs-bar .eb-tab-scroll-item > a span.active-color span,
#menu.mc-tabs-bar .eb-tab-scroll-item > a span.marge-active:not(eb-z),
#menu.mc-tabs-bar .eb-tab-scroll-item > a span.marge-active span {
    color: var(--mc-primary) !important;
    font-weight: 600 !important;
}
#menu.mc-tabs-bar .menu-mobile a.active span,
#menu.mc-tabs-bar .menu-mobile a[aria-selected="true"] span,
#menu.mc-tabs-bar .eb-tab-scroll-item > a.active span,
#menu.mc-tabs-bar .eb-tab-scroll-item > a[aria-selected="true"] span {
    color: var(--mc-primary) !important;
    font-weight: 600 !important;
}
/* La pastille, c'est le <a> : le libellé (span.fa-sm2) ne se peint JAMAIS
   lui-même. L'ancienne génération d'onglets (dashboard-modern.css,
   `body.eb-has-topbar-v2 #menu .fa-sm2.active-color`, plus spécifique que le
   neutraliseur `a span` ci-dessus) lui laissait son fond teinté et son ombre :
   une seconde pastille, plus petite, DANS la pastille active — et bleue en
   dur, donc d'autant plus visible sous un thème d'une autre couleur
   (constaté le 11/11/2026 sur Paramétrage ▸ Document, thème violet).
   Les variantes :hover sont nommées : celles de l'ancienne règle portent une
   pseudo-classe de plus et repassaient devant au survol. */
#menu.mc-tabs-bar :is(.menu-mobile a, .eb-tab-scroll-item > a) span.fa-sm2:is(.active-color, .marge-active, .active),
#menu.mc-tabs-bar :is(.menu-mobile a, .eb-tab-scroll-item > a) span.fa-sm2:is(.active-color, .marge-active, .active):hover,
#menu.mc-tabs-bar :is(.menu-mobile a, .eb-tab-scroll-item > a) span.fa-sm2:hover {
    background: transparent !important;
    box-shadow: none !important;
}
/* Flèches carousel Bootstrap legacy — masquées (doublons du nouveau
   système .eb-tab-scroll-arrow). */
#menu.mc-tabs-bar .carousel-control-prev,
#menu.mc-tabs-bar .carousel-control-next {
    display: none !important;
}

/* ============================================================
   #9819 — Sous-menus (ul.nav-tabs.sub-tabs) — même apparence que
   le menu principal (pills modernes) + collés visuellement au menu
   parent (pas de gap vertical, border-radius harmonisé).
   ============================================================ */
/* Quand la page contient un sous-menu .sub-tabs, on "colle" le menu
   principal au sous-menu (pas de gap, pas de border-radius bas).
   Spécificité augmentée via html body.eb-has-topbar-v2 pour battre
   la règle principale de #menu.mc-tabs-bar (border + margin !important). */
html body.eb-has-topbar-v2.eb-a-sous-onglets #menu.mc-tabs-bar,
html body.eb-a-sous-onglets #menu.mc-tabs-bar {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-width: 0 !important;
}
/* Conteneur de sous-menu (.table-responsive.table-nav.sub-tabs + son ul).
   Le `!important` bat déjà les règles main.css (non-!important) sur ces
   mêmes classes — inutile de gonfler la spécificité avec `html body` /
   `.table-tabs` (c'était redondant et forçait toutes les règles voisines à
   surenchérir). Le FOND n'est PAS posé ici : il est défini par niveau plus
   bas (« profondeur par teinte »), donc aucun blanc en dur à sur-spécifier.
   Marge latérale nulle : le conteneur d'onglets (#evenement_display_tabs_content,
   #parametrage_tabs_content…) est déjà sur le rail de #menu ; le sous-menu
   remplit son conteneur → aligné au pixel (idem mobile + Paramétrage).
   width:auto neutralise `.table-responsive { width:100% }` de main.css. */
.table-responsive.table-nav.sub-tabs,
div.sub-tabs,
ul.nav-tabs.sub-tabs {
    border: none !important;
    border-radius: 0 0 var(--mc-radius, 12px) var(--mc-radius, 12px) !important;
    /* Retrait horizontal : 10px + le filet d'1px du cadre (plus bas) = 11px,
       soit exactement le départ du premier onglet du menu principal (1px de
       bord + 6px de retrait + 4px). Les premières pastilles des trois niveaux
       tombent ainsi l'une sous l'autre.
       Rythme vertical : la piste garde 8px en tête (place des compteurs en
       exposant) et 2px en pied → 12px au-dessus de la pastille, 12px dessous. */
    padding: 4px 10px 10px !important;
    margin: 0 0 16px 0 !important;
    width: auto !important;
    box-shadow: none !important;
    overflow: visible !important;
}
/* #11610 — Le conteneur de sous-menu doit clipper horizontalement le
   carrousel. Sinon, en mobile, le wrapper prend la largeur totale des
   onglets, le track ne détecte plus d'overflow et les items de droite
   deviennent inaccessibles. */
.table-responsive.table-nav.sub-tabs {
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}
.table-responsive.table-nav.sub-tabs > ul.nav-tabs.sub-tabs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
/* Neutralise le styling bootstrap nav-tabs parent */
.table-responsive.table-nav.sub-tabs ul.nav-tabs,
ul.nav-tabs.sub-tabs {
    border-bottom: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    list-style: none;
    /* Le ul.nav (flex) hérite de min-width:auto → il refuse de rétrécir sous
       la largeur de son contenu et déborde hors du conteneur sur viewport
       étroit (mobile) : le sous-menu sortait de l'écran au lieu de scroller
       en interne. min-width:0 laisse le ul se contraindre à son parent, ce
       qui déclenche l'overflow-x:auto du track + les flèches — exactement
       comme le menu principal #menu.mc-tabs-bar (qui pose déjà min-width:0
       sur toute sa chaîne). Rend le carrousel de niveau 2 identique au
       niveau 1. */
    min-width: 0 !important;
}
/* Items du sous-menu — même pill style */
.sub-tabs li.nav-item,
.eb-tab-scroll .nav-tabs.sub-tabs > li.nav-item {
    margin: 0 2px;
}
.sub-tabs li.nav-item > a.nav-link,
.eb-tab-scroll .nav-tabs.sub-tabs > li.nav-item > a.nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--mc-text-secondary, #64748B) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: background 0.2s, color 0.2s !important;
    line-height: 1.2 !important;
    position: relative; /* ancrage des badges exposant */
}
@media (hover: hover){.sub-tabs li.nav-item > a.nav-link:hover{
    background: var(--mc-surface-hover, #F1F5F9) !important;
    color: var(--mc-text, #1E293B) !important;
}}
.sub-tabs li.nav-item > a.nav-link.active{
    background: color-mix(in srgb, var(--mc-primary) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--mc-primary) 25%, transparent) !important;
    color: var(--mc-primary) !important;
    font-weight: 600 !important;
    padding: 7px 15px !important; /* compense le border 1px */
}
@media (hover: hover){.sub-tabs li.nav-item > a.nav-link.active:hover{
    background: color-mix(in srgb, var(--mc-primary) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--mc-primary) 25%, transparent) !important;
    color: var(--mc-primary) !important;
    font-weight: 600 !important;
    padding: 7px 15px !important; /* compense le border 1px */
}}
.sub-tabs li.nav-item > a.nav-link span {
    color: inherit !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    /* #9819 — position:static pour que les badges .badge-circle s'ancrent
       sur le <a> parent (position:relative) et pas sur le span qui enveloppe
       juste le texte (ce qui plaçait le badge au ras du libellé). */
    position: static !important;
}
/* #9819 — Neutralise aussi le border-bottom par défaut de ul.nav-tabs
   (Bootstrap) qui laisse une ligne horizontale sous le sous-menu. */
.table-responsive.table-nav.sub-tabs ul.nav-tabs,
.table-responsive.table-nav.sub-tabs .eb-tab-scroll,
.table-responsive.table-nav.sub-tabs .eb-tab-scroll-track,
.table-responsive.table-nav.sub-tabs .eb-tab-scroll-menu,
.table-responsive.table-nav.sub-tabs .eb-tab-scroll *::before,
.table-responsive.table-nav.sub-tabs .eb-tab-scroll *::after {
    border-bottom: 0 !important;
}
/* Masque les fade gradients de tab-scroll sur le sous-menu quand il n'y a
   pas overflow (sinon on voit une ligne résiduelle en bas). */
.table-responsive.table-nav.sub-tabs .eb-tab-scroll:not(.eb-tab-scroll--overflows)::before,
.table-responsive.table-nav.sub-tabs .eb-tab-scroll:not(.eb-tab-scroll--overflows)::after {
    display: none !important;
}
/* Sous-menu wrappé par tab-scroll.js — neutralise fond de l'inner */
.table-responsive.table-nav.sub-tabs .eb-tab-scroll-menu,
.table-responsive.table-nav.sub-tabs .eb-tab-scroll,
.table-responsive.table-nav.sub-tabs .eb-tab-scroll-track {
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important; /* laisser passer les badges */
}
.table-responsive.table-nav.sub-tabs .eb-tab-scroll-track {
    overflow-x: auto;
    overflow-y: visible;
}
/* Flèches nav du sous-menu : même style que le menu principal */
.table-responsive.table-nav.sub-tabs .eb-tab-scroll-arrow {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    border: 1px solid var(--mc-border, #E2E8F0) !important;
    background: var(--mc-surface-alt, #fff) !important;
    color: var(--mc-text-secondary, #64748B) !important;
}
@media (hover: hover){.table-responsive.table-nav.sub-tabs .eb-tab-scroll-arrow:hover{
    background: var(--mc-primary, #3B82F6) !important;
    color: var(--mc-on-primary) !important;
}}
/* #B14 — Mirror du #menu.mc-tabs-bar (ligne 502-504) : forcer display:flex
   sur les flèches quand le track sous-onglets déborde. Sans ce !important,
   la base rule (.eb-tab-scroll--overflows .eb-tab-scroll-arrow { display:
   flex }, ligne 60, sans !important) peut être battue par d'autres règles
   plus spécifiques qui touchent display sur l'arrow → l'arrow droit reste
   caché alors que le menu parent l'affiche correctement. */
.table-responsive.table-nav.sub-tabs .eb-tab-scroll--overflows .eb-tab-scroll-arrow {
    display: flex !important;
}
.table-responsive.table-nav.sub-tabs .eb-tab-scroll-arrow.eb-hidden {
    opacity: 0;
    pointer-events: none;
}
/* #9819 — Flèches .eb-tab-scroll-arrow (tab-scroll.js) : visibles UNIQUEMENT
   quand le track dépasse (classe .eb-tab-scroll--overflows posée par le JS).
   Par défaut : display:none. Styling cohérent avec le pill bar. */
#menu.mc-tabs-bar .eb-tab-scroll-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    border: 1px solid var(--mc-border) !important;
    background: var(--mc-surface-alt) !important;
    color: var(--mc-text-secondary) !important;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 3;
    transition: background var(--mc-transition), color var(--mc-transition), opacity var(--mc-transition);
    font-size: 12px;
    box-shadow: var(--mc-shadow-sm);
}
#menu.mc-tabs-bar .eb-tab-scroll--overflows .eb-tab-scroll-arrow {
    display: flex !important;
}
@media (hover: hover){#menu.mc-tabs-bar .eb-tab-scroll-arrow:hover{
    background: var(--mc-primary) !important;
    color: var(--mc-on-primary) !important;
    border-color: var(--mc-primary) !important;
}}
#menu.mc-tabs-bar .eb-tab-scroll-arrow.eb-hidden {
    opacity: 0;
    pointer-events: none;
}

/* #9819 — Search field auto-injecté par tab-scroll.js quand > 10 tabs.
   Intégration dans le pill bar : le search prend une colonne à droite,
   les tabs scrollent dans la colonne gauche. */
#menu.mc-tabs-bar .eb-tab-search-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
#menu.mc-tabs-bar .eb-tab-search-container > .eb-tab-scroll-menu {
    flex: 1;
    min-width: 0;
}
#menu.mc-tabs-bar .eb-tab-search {
    flex-shrink: 0;
    width: 200px;
}
#menu.mc-tabs-bar .eb-tab-search .input-group-text {
    background: transparent !important;
    border-color: var(--mc-border) !important;
    color: var(--mc-text-secondary) !important;
}
#menu.mc-tabs-bar .eb-tab-search .eb-tab-search-input {
    background: transparent !important;
    border-color: var(--mc-border) !important;
    color: var(--mc-text) !important;
    font-size: 0.86rem !important;
    box-shadow: none !important;
}
#menu.mc-tabs-bar .eb-tab-search .eb-tab-search-input:focus {
    border-color: var(--mc-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc-primary) 12%, transparent) !important;
}
/* #12461 — Sous 16px, iOS zoome de lui-même à la mise au point. La garde
   générale du produit (css/dashboard-modern.css, « P0.3 Form inputs ») ne
   pouvait pas rattraper ce champ : la règle ci-dessus porte un ID, elle bat
   toute réécriture à base de classes, `!important` ou non. On la nomme donc
   ici, à la même spécificité. Ce champ est celui de la recherche d'onglets :
   il est présent sur toute fiche à onglets (membre, organisation, société,
   paramétrage), soit les 10 derniers écrans où le zoom subsistait en paysage.
   0.86rem reste la mesure de référence partout ailleurs. */
@media (hover: none), (max-width: 767px) {
    #menu.mc-tabs-bar .eb-tab-search .eb-tab-search-input {
        font-size: 16px !important;
    }
}

/* Conteneur de contenu onglets : même largeur que #menu.mc-tabs-bar, bord à
   bord. Il portait une bordure transparente d'1px à gauche et à droite
   (#10188) : les bandes de sous-menu n'avaient alors pas de contour, et leur
   fond devait s'arrêter au ras INTÉRIEUR du filet du menu. Elles portent
   désormais ce filet elles-mêmes (« Cadre », plus bas) : rentrées d'1px, leur
   contour faisait un cran sous celui du menu. Le cadre et tout ce qu'il
   contient (bandes, cartes) partagent maintenant le bord extérieur du menu,
   comme sur les autres écrans à onglets du produit. */
#parametrage_tabs_content {
    margin: 0 16px 16px;
}
@media (max-width: 768px) {
    #parametrage_tabs_content { margin: 0 0 16px; }
}

/* #9819 — Responsive mobile pour mc-tabs-bar.
   Sélecteurs alignés sur la spécificité de la règle de base (html body…)
   pour pouvoir réellement override les valeurs !important des lignes 211-230. */
@media (max-width: 768px) {
    #menu.mc-tabs-bar,
    html body #menu.mc-tabs-bar,
    html body.eb-has-topbar-v2 #menu.mc-tabs-bar {
        padding: 10px 4px 4px !important;
        /* margin-bottom à 0 : les wrappers .container-fluid sous le menu
           ajoutent déjà ~8px de padding-top cumulé, ce qui donne le même
           rythme visuel que l'espace hero↔menu (8px). */
        margin: 0 !important;
        border-radius: 10px !important;
    }
    #menu.mc-tabs-bar .menu-mobile a,
    #menu.mc-tabs-bar .eb-tab-scroll-item > a {
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
    }
    /* Search passe en pleine largeur sous les tabs en mobile */
    #menu.mc-tabs-bar .eb-tab-search-container {
        flex-wrap: wrap;
    }
    #menu.mc-tabs-bar .eb-tab-search {
        width: 100%;
        order: -1;
        margin-bottom: 6px;
    }
}
@media (max-width: 480px) {
    #menu.mc-tabs-bar,
    html body #menu.mc-tabs-bar,
    html body.eb-has-topbar-v2 #menu.mc-tabs-bar {
        padding: 8px 4px 4px !important;
        margin: 0 !important;
    }
    #menu.mc-tabs-bar .menu-mobile a,
    #menu.mc-tabs-bar .eb-tab-scroll-item > a {
        padding: 7px 10px !important;
        font-size: 0.78rem !important;
    }
}

/* #B14 — Sub-tabs mobile (≤768px) : aligne le sous-menu sur le même rail
   horizontal que #menu.mc-tabs-bar (qui passe à margin:0 en mobile via
   les règles ci-dessus). Sans ce miroir, sub-tabs garde margin:0 16px
   pendant que le menu parent passe margin:0 → décalage de 16px entre
   les deux barres + sub-tabs apparaît plus étroit que le menu parent. */
@media (max-width: 768px) {
    .table-responsive.table-nav.sub-tabs,
    div.sub-tabs,
    ul.nav-tabs.sub-tabs,
    html body .table-responsive.table-nav.table-tabs.sub-tabs,
    html body .table-responsive.table-nav.sub-tabs {
        padding: 2px 4px 6px !important;
        margin: 0 0 16px 0 !important;
        /* Coins du HAUT droits : la bande est collée sous le menu principal
           (ou sous la bande du niveau 2), dont le bas est droit lui aussi.
           Arrondis, ils laissaient deux encoches de fond de page à la jointure. */
        border-radius: 0 0 10px 10px !important;
    }
}
@media (max-width: 480px) {
    .table-responsive.table-nav.sub-tabs,
    div.sub-tabs,
    ul.nav-tabs.sub-tabs,
    html body .table-responsive.table-nav.table-tabs.sub-tabs,
    html body .table-responsive.table-nav.sub-tabs {
        padding: 2px 4px 6px !important;
        margin: 0 0 16px 0 !important;
    }
}

/* ============================================================
   « Coller » le sous-sous-menu (.sub-sub-tabs : Fiche n°/Bilan santé/Bilan
   psychologique/Document) directement sous le sous-menu parent (.sub-tabs :
   Liste/Centres d'accueil). Les deux barres forment un seul bloc empilé :
   pas de gap, coins internes aplatis, séparateur fin.

   FACTORISATION — s'applique à TOUS les breakpoints (desktop, tablette,
   mobile), au même titre que le collage niveau 1 → niveau 2 (règle
   `.eb-a-sous-onglets #menu.mc-tabs-bar` plus haut, sans media query). Les
   trois barres (menu principal + sous-menu + sous-sous-menu) partagent
   ainsi le même rail (margin: 0 16px, width: auto) et s'empilent en une
   seule carte continue de largeur identique, quelle que soit la taille
   d'écran. Auparavant ce collage était limité à ≤768px, laissant le 3e
   niveau flotter 16px sous le 2e niveau en desktop.

   Le sous-sous-menu reste swipeable comme un carrousel via le track
   overflow-x:auto + momentum tactile de tab-scroll.js (voir plus bas).

   Garde :not([style*="display: none"]) sur le sous-sous-menu : quand
   aucune victime n'est sélectionnée, evenement_display_tabs.php fait
   $(".sub-sub-tabs").hide() (→ display:none inline) ; dans ce cas on ne
   doit PAS aplatir le bas du sous-menu parent (rien dessous).
   ============================================================ */
/* Sous-menu parent suivi d'un sous-sous-menu visible → bas collé */
.table-responsive.table-nav.sub-tabs:not(.sub-sub-tabs):has(~ .table-responsive.table-nav.sub-sub-tabs:not([style*="display: none"])) {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-width: 0 !important; /* le filet haut du niveau 3 fait la séparation */
}
/* Sous-sous-menu : haut collé au sous-menu parent + séparateur fin */
.table-responsive.table-nav.sub-tabs:not(.sub-sub-tabs) ~ .table-responsive.table-nav.sub-sub-tabs {
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: 1px solid var(--mc-border, #E2E8F0) !important;
}

/* ============================================================
   « Profondeur par teinte » — hiérarchie visuelle des niveaux
   empilés. Le menu principal (#menu.mc-tabs-bar) reste blanc ;
   le sous-menu s'enfonce d'un cran de gris ; le sous-sous-menu
   d'un cran de plus. Un filet fin sépare chaque niveau (bord haut
   du sous-menu ci-dessous ; le bord haut du sous-sous-menu est déjà
   posé par la règle de collage juste au-dessus). Rend l'imbrication
   lisible sans chrome supplémentaire, sur tous les breakpoints.
   ============================================================ */
/* Niveau 2 — sous-menu (Liste/Centres d'accueil, Détail/Tarif…) : un cran
   de gris + filet de séparation avec le menu principal au-dessus. */
.table-responsive.table-nav.sub-tabs:not(.sub-sub-tabs) {
    background: var(--mc-lvl2-bg) !important;
    border-top: 1px solid var(--mc-border, #E2E8F0) !important;
}
/* Niveau 3 — sous-sous-menu (Fiche n°/Bilan santé/…) : un cran de plus.
   (Le filet du haut est posé par la règle de collage ci-dessus.) */
.table-responsive.table-nav.sub-tabs.sub-sub-tabs {
    background: var(--mc-lvl3-bg) !important;
}
/* Cadre — les bandes prolongent le filet du menu principal sur leurs côtés
   et le dernier niveau le referme en bas : les niveaux empilés se lisent comme
   UNE carte. Sans lui le filet du menu s'arrêtait net à la jointure, et le
   dernier niveau, d'une teinte voisine de celle du fond de page, n'avait plus
   de contour : ses pastilles semblaient posées sur la page (11/11/2026). */
.table-responsive.table-nav.sub-tabs {
    border-left: 1px solid var(--mc-border, #E2E8F0) !important;
    border-right: 1px solid var(--mc-border, #E2E8F0) !important;
    border-bottom: 1px solid var(--mc-border, #E2E8F0) !important;
}

/* Carrousel tactile : rendre la barre wrappée par tab-scroll.js réellement
   swipeable au doigt. La règle plus haut force `overflow: visible !important`
   sur le track (pour laisser dépasser les badges exposant) — effet de bord :
   overflow-x:visible = AUCUN scroll horizontal, les onglets débordent juste
   sous la flèche sans qu'on puisse les faire défiler. Ici on rétablit
   overflow-x:auto (scroll tactile + momentum iOS + snap = carrousel) tout en
   gardant la place des badges via un padding-top (overflow-y:hidden évite la
   barre de défilement verticale parasite induite par la coercition CSS
   overflow-x:auto + overflow-y:visible → auto). */
.table-responsive.table-nav.sub-tabs .eb-tab-scroll-track {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;  /* momentum iOS */
    scroll-snap-type: x proximity;      /* le swipe se cale en douceur sur un onglet */
    padding-top: 8px !important;   /* place pour les badges exposant (top:-6) */
    padding-bottom: 2px !important;
    scrollbar-width: none;          /* Firefox : pas de scrollbar visible */
}
.table-responsive.table-nav.sub-tabs .eb-tab-scroll-track::-webkit-scrollbar {
    display: none;                  /* WebKit/Blink : idem */
}
.table-responsive.table-nav.sub-tabs .eb-tab-scroll-track > li.nav-item {
    scroll-snap-align: start;
}

/* ============================================================
   Paramétrage > Document — « coller » le sous-sous-menu (Paramétrage/
   Stockage) au sous-menu parent (Documents automatiques/Conformité),
   comme sur la fiche victime. Particularité de cette page : les deux
   barres ne sont PAS siblings — le 3e niveau vit dans #parametrage-content
   (chargé après le 2e niveau). On cible donc via :has() sur le conteneur
   #parametrage_tabs_content. Valable desktop ET mobile (la page se voit
   surtout en desktop). Le gap venait des deux margins de 16px + de
   #parametrage-content entre les deux barres.
   ============================================================ */
#parametrage_tabs_content:has(.table-responsive.table-nav.sub-sub-tabs)
    > .table-responsive.table-nav.sub-tabs:not(.sub-sub-tabs) {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-width: 0 !important; /* le filet haut du niveau 3 fait la séparation */
}
/* Neutralise l'espace que #parametrage-content insère entre les 2 barres.
   `--pc-pad-y: 0px` l'ANNONCE : la barre de tête de #parametrage-content
   remonte de ce retrait (dashboard-modern.css, `margin-top: calc(-1 *
   var(--pc-pad-y))`). Sans l'annonce elle remontait de 12px qui n'existaient
   plus et recouvrait le bas du niveau 2 : la pastille active du niveau 2 se
   retrouvait posée sur le filet du niveau 3 (11/11/2026, Document, Mail, SMS). */
#parametrage_tabs_content:has(.table-responsive.table-nav.sub-sub-tabs)
    > #parametrage-content {
    --pc-pad-y: 0px;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* 3e niveau : haut collé au 2e niveau + séparateur fin */
#parametrage_tabs_content .table-responsive.table-nav.sub-sub-tabs {
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: 1px solid var(--mc-border, #E2E8F0) !important;
}