/* ============================================================
   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));
}
.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;
}
.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; }
}

/* ---- 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:      var(--eb-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 → ~#EDF1F6). */
    --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) 60%, var(--mc-surface-alt));
}

/* 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;
    transition: var(--mc-transition) !important;
    line-height: 1.2 !important;
    position: relative; /* pour ancrer les badges notification en exposant */
}
#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:has(span.active-color) span,
#menu.mc-tabs-bar .menu-mobile a:has(span.marge-active) span,
#menu.mc-tabs-bar .eb-tab-scroll-item > a:has(span.active-color) span,
#menu.mc-tabs-bar .eb-tab-scroll-item > a:has(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;
}
/* 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:has(.sub-tabs) #menu.mc-tabs-bar,
html body:has(.sub-tabs) #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;
    padding: 14px 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 */
}
.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,
.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;
}
.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;
}
#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;
}

/* Conteneur de contenu onglets : même largeur que #menu.mc-tabs-bar.
   border transparent 1px g/d pour compenser la bordure de #menu et aligner
   les bords extérieurs pixel à pixel (box-sizing: border-box). */
#parametrage_tabs_content {
    margin: 0 16px 16px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}
@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: 10px 4px 4px !important;
        margin: 0 0 16px 0 !important;
        border-radius: 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: 8px 4px 4px !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
   `:has(.sub-tabs) #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;
}
/* 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;
}

/* 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;
}
/* Neutralise l'espace que #parametrage-content insère entre les 2 barres */
#parametrage_tabs_content:has(.table-responsive.table-nav.sub-sub-tabs)
    > #parametrage-content {
    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;
}