/* ============================================================
   Harmony Confort ERP — Custom Brand Theme
   Source de vérité CSS (copie déployée : ERP/PUBLIC/assets/css/)
   Direction validée : "B-light" — sidebar navy + main clair,
   pas de coins coupés, pas de jargon technique. Inter unique.
   ============================================================

   Anti-patterns interdits :
   - AP-01 : bouton jaune `#E8E12A` → contraste insuffisant, confusion warning.
             Le jaune est un accent décoratif (liseré, indicateur, bouton CTA discret).
   - AP-02 : warning ≠ jaune marque. Le warning = ambre `#F0A500`.
   - AP-03 : pas de `btn-primary` ni `form-control` ni `badge text-bg-*` Bootstrap
             génériques — uniquement les classes `hc-*` projet.
   - AP-04 : pas de clip-path / coins coupés / coins angulaires — border-radius only.
   - AP-05 : pas de `font-family: 'JetBrains Mono'` ni autre mono décorative — Inter unique.
   - AP-06 : pas de jargon technique visible utilisateur (`//`, `node:`, `BUILD:`,
             `MOD-001`, timestamps formatés ISO, breadcrumbs `/erp/accueil`).
   - AP-07 : pas de gradient autre que skeleton loader, pas de shadow lourd
             (max `0 10px 24px -12px rgba(13,27,42,.18)` pour cards en hover).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
    /* — Famille typo — */
    --hc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* — Palette marque — */
    --hc-navy:        #0D1B2A;
    --hc-navy-2:      #152639;
    --hc-navy-3:      #1E3349;

    --hc-green:       #8CC63F;
    --hc-green-deep:  #73A82F;
    --hc-green-soft:  #A8D957;
    --hc-green-tint:  rgba(140, 198, 63, 0.15);

    --hc-yellow:      #E8E12A;
    --hc-yellow-deep: #C4BE1C;
    --hc-yellow-tint: rgba(232, 225, 42, 0.18);

    /* — Surfaces (mode clair) — */
    --hc-bg:          #F5F4F0;   /* fond principal */
    --hc-paper:       #FFFFFF;   /* cards et surfaces blanches */
    --hc-panel:       #FBFAF6;   /* panels secondaires (modules bientôt) */

    /* — Texte — */
    --hc-text-primary:   #1A2230;
    --hc-text-secondary: #5B6E7D;
    --hc-text-muted:     #94A0AE;
    --hc-text-on-navy:   #FFFFFF;

    /* — Bordures — */
    --hc-border:        #E2DFD8;
    --hc-border-strong: #C9C5BC;
    --hc-border-focus:  var(--hc-green);

    /* — Statuts sémantiques — */
    --hc-status-ok:        var(--hc-green-deep);
    --hc-status-ok-tint:   var(--hc-green-tint);
    --hc-status-warning:   #F0A500;
    --hc-status-warning-tint: rgba(240, 165, 0, 0.15);
    --hc-status-danger:    #D64545;
    --hc-status-danger-tint:  rgba(214, 69, 69, 0.12);
    --hc-status-info:      #3F8FCC;
    --hc-status-info-tint: rgba(63, 143, 204, 0.15);

    /* — Layout — */
    --hc-sidebar-w:      240px;
    --hc-topbar-h:       64px;
    --hc-radius-sm:      4px;
    --hc-radius-md:      6px;
    --hc-radius-lg:      8px;

    /* — Espacement — */
    --hc-gap-xs:  4px;
    --hc-gap-sm:  8px;
    --hc-gap-md:  16px;
    --hc-gap-lg:  24px;
    --hc-gap-xl:  32px;

    /* — Élévation (douce, jamais lourde) — */
    --hc-shadow-sm:    0 1px 2px rgba(13, 27, 42, 0.05);
    --hc-shadow-card:  0 2px 6px rgba(13, 27, 42, 0.06);
    --hc-shadow-hover: 0 10px 24px -12px rgba(13, 27, 42, 0.18);
    --hc-shadow-modal: 0 30px 80px -40px rgba(13, 27, 42, 0.25);
}

/* ============================================================
   2. BASE
   ============================================================ */
html, body {
    font-family: var(--hc-font);
    color: var(--hc-text-primary);
    background: var(--hc-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body { font-size: 14px; line-height: 1.55; }

/* ============================================================
   3. OVERRIDES HYPER (data-menu-color=dark)
   On surcharge les variables Hyper sur les sélecteurs racine
   pour garantir l'application AVANT toute classe utilitaire.
   ============================================================ */
html[data-menu-color="dark"] {
    --ct-menu-bg:                 var(--hc-navy);
    --ct-menu-item:               rgba(255, 255, 255, 0.78);
    --ct-menu-item-hover:         #FFFFFF;
    --ct-menu-item-active:        #FFFFFF;
    --ct-menu-item-bg-active:     var(--hc-navy-2);
    /* RHYP-08 — override fond popup flyout condensed (par défaut bleu #727cf5 Hyper) */
    --ct-menu-condensed-link-bg:  var(--hc-navy-2);
}

html[data-bs-theme="light"] {
    --ct-body-bg:           var(--hc-bg);
    --ct-content-bg:        var(--hc-bg);
    --ct-card-bg:           var(--hc-paper);
    --ct-card-border:       var(--hc-border);
}

/* ============================================================
   4. SIDEBAR — restyle Hyper .leftside-menu
   ============================================================ */

/* Règles communes : fond, hauteur, flex — applicables dans TOUS les modes sidenav */
.leftside-menu {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    background: var(--hc-navy) !important;
    border-right: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    z-index: 1010;
}

/* Mode DEFAULT (>1140px) : sidebar pleine 240px avec labels.
   RHYP-02 : on aligne la largeur native Hyper (--ct-leftbar-width = 260px par
   défaut, sélecteur .wrapper .leftside-menu plus spécifique que le nôtre) sur
   la largeur du design system. Sinon la sidebar fixed rend 260px tandis que le
   margin contenu vaut 240px → 20px de contenu passent sous la sidebar. */
html:not([data-sidenav-size="condensed"]) {
    --ct-leftbar-width: var(--hc-sidebar-w);
}
html[data-sidenav-size="default"] .leftside-menu {
    width: var(--hc-sidebar-w) !important;
    padding: 24px 16px 24px;
}

/* Mode CONDENSED (768-1140px) : sidebar rétrécie ~70px, icônes seules
   Hyper pose data-sidenav-size="condensed" nativement dans cette plage.
   On force la largeur condensed et le centrage des icônes. */
html[data-sidenav-size="condensed"] .leftside-menu {
    width: 70px !important;
    padding: 12px 0 12px;
    overflow: visible;            /* laisse le flyout dépasser */
}

/* En condensed : centrer les icônes des items nav */
html[data-sidenav-size="condensed"] .leftside-menu .side-nav-link {
    justify-content: center !important;
    padding: 11px 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
    position: relative;
}
html[data-sidenav-size="condensed"] .leftside-menu .side-nav-link i {
    font-size: 20px !important;
    width: 20px !important;
    min-width: 20px;
    margin: 0 !important; /* annule le décalage gauche : icône centrée en condensed */
}

/* Masquer les textes sidebar en condensed — les icônes seules restent visibles */
html[data-sidenav-size="condensed"] .leftside-menu .hc-sidebar-brand__text,
html[data-sidenav-size="condensed"] .leftside-menu .hc-sidebar-user__info,
html[data-sidenav-size="condensed"] .leftside-menu .hc-sidebar-user__chev,
html[data-sidenav-size="condensed"] .leftside-menu .hc-nav-num,
html[data-sidenav-size="condensed"] .leftside-menu .side-nav-title,
html[data-sidenav-size="condensed"] .leftside-menu .side-nav-link > span:not(.hc-nav-num) {
    display: none !important;
}

/* Bloc brand en condensed : centrer la marque HC seule */
html[data-sidenav-size="condensed"] .leftside-menu .logo,
html[data-sidenav-size="condensed"] .leftside-menu .hc-sidebar-brand {
    justify-content: center !important;
    padding: 4px 0 16px !important;
    gap: 0 !important;
}

/* Bloc user en condensed : avatar centré seulement, pas de nom/role/chevron */
html[data-sidenav-size="condensed"] .leftside-menu .hc-sidebar-user {
    justify-content: center !important;
    padding: 10px 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* FLYOUT au survol en condensed — affiche le label dans un popup lateral RHYP-08 */
html[data-sidenav-size="condensed"] .leftside-menu .side-nav-item:hover > .side-nav-link,
html[data-sidenav-size="condensed"] .leftside-menu .side-nav-item:hover > ul {
    background-color: var(--hc-navy-2) !important;
}
/* Tooltip label au survol : pseudo-element qui affiche le texte du span caché */
html[data-sidenav-size="condensed"] .leftside-menu .side-nav-item {
    position: relative;
}
/* Flyout custom : le label apparaît dans un tooltip positionné à droite */
html[data-sidenav-size="condensed"] .leftside-menu .side-nav-link[data-label]:hover::after {
    content: attr(data-label);
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--hc-navy-2);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 0 var(--hc-radius-md) var(--hc-radius-md) 0;
    white-space: nowrap;
    z-index: 1050;
    box-shadow: 4px 0 12px rgba(0,0,0,0.18);
    pointer-events: none;
}

/* Bloc condensed : label user au survol */
html[data-sidenav-size="condensed"] .leftside-menu .side-nav-item-user:hover .hc-sidebar-user__info,
html[data-sidenav-size="condensed"] .leftside-menu .side-nav-item-user:hover .hc-sidebar-user__chev {
    display: flex !important;
}

/* Brand block sidebar : HC mark + nom + sous-titre */
.leftside-menu .logo,
.hc-sidebar-brand {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 22px !important;
    margin: 0 0 22px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none !important;
    line-height: 1 !important;
    background: transparent !important;
}
.hc-sidebar-brand__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.hc-sidebar-brand__name {
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hc-sidebar-brand__sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.04em;
    line-height: 1.2;
}

/* Conteneur scroll — masque scrollbar */
#leftside-menu-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
}
#leftside-menu-container::-webkit-scrollbar { width: 0; display: none; }
#leftside-menu-container { scrollbar-width: none; }

/* Simplebar de Hyper casse la chaîne height:100% — on force la transmission
   pour que le `margin-top:auto` du bloc user fonctionne (sticky bottom). */
#leftside-menu-container[data-simplebar] .simplebar-wrapper,
#leftside-menu-container[data-simplebar] .simplebar-mask,
#leftside-menu-container[data-simplebar] .simplebar-offset,
#leftside-menu-container[data-simplebar] .simplebar-content-wrapper,
#leftside-menu-container[data-simplebar] .simplebar-content {
    height: 100% !important;
}
#leftside-menu-container[data-simplebar] .simplebar-content {
    display: flex !important;
    flex-direction: column !important;
}

/* CONDENSED : libérer l'overflow de toute la chaîne scroll (conteneur +
   wrappers SimpleBar) pour que le flyout libellé (::after au survol) puisse
   déborder hors de la sidebar 70px. En condensed les items sont peu nombreux
   → aucun scroll vertical nécessaire. SimpleBar pose son overflow en inline
   sans !important, donc ce !important gagne. */
html[data-sidenav-size="condensed"] #leftside-menu-container,
html[data-sidenav-size="condensed"] #leftside-menu-container[data-simplebar] .simplebar-wrapper,
html[data-sidenav-size="condensed"] #leftside-menu-container[data-simplebar] .simplebar-mask,
html[data-sidenav-size="condensed"] #leftside-menu-container[data-simplebar] .simplebar-offset,
html[data-sidenav-size="condensed"] #leftside-menu-container[data-simplebar] .simplebar-content-wrapper,
html[data-sidenav-size="condensed"] #leftside-menu-container[data-simplebar] .simplebar-content {
    overflow: visible !important;
}

/* Liste nav reset Hyper */
.leftside-menu .side-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}

/* Section title (Modules, Bientôt) */
.leftside-menu .side-nav-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.4) !important;
    padding: 22px 12px 8px !important;
    background: transparent !important;
}

/* Item nav */
.leftside-menu .side-nav-item { padding: 0 !important; margin: 0 0 2px 0 !important; }

.leftside-menu .side-nav-link {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 14px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    border-radius: var(--hc-radius-md) !important;
    transition: background 0.15s, color 0.15s;
    background: transparent !important;
}
.leftside-menu .side-nav-link i {
    font-size: 18px !important;
    width: 18px !important; /* neutralise le width calc(~50px) de Hyper qui recentre le glyphe loin du bord */
    min-width: 18px;
    text-align: center;
    margin: 0 0 0 -14px !important; /* compense le padding-left du lien : icône alignée sur le bord du ul.side-nav */
}
.leftside-menu .side-nav-link > span:not(.hc-nav-num) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Numérotation discrète à droite */
.hc-nav-num {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* Hover */
.leftside-menu .side-nav-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #FFFFFF !important;
}
.leftside-menu .side-nav-link:hover .hc-nav-num { color: rgba(255, 255, 255, 0.7); }

/* Active : fond navy-2 + barre verte 3px à gauche + num jaune */
.leftside-menu .side-nav-link.active {
    background: var(--hc-navy-2) !important;
    color: #FFFFFF !important;
}
.leftside-menu .side-nav-link.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--hc-green);
    border-radius: 0 2px 2px 0;
}
.leftside-menu .side-nav-link.active .hc-nav-num { color: var(--hc-yellow); }

/* Item désactivé (modules bientôt) */
.leftside-menu .side-nav-link.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Bloc user — sticky en BAS de la sidebar + trigger dropdown
   Remplace l'item logout dédié : la déconnexion est un item du dropdown.
   Spécificité montée pour battre `.leftside-menu .side-nav-item`. */
.leftside-menu .side-nav-item.side-nav-item-user {
    margin: auto 0 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

/* Le trigger lui-même (button.hc-sidebar-user) */
.hc-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--hc-navy-3);
    padding: 12px;
    border: 1px solid transparent;
    border-radius: var(--hc-radius-md);
    cursor: pointer;
    color: inherit;
    text-align: left;
    font-family: var(--hc-font);
    transition: background 0.15s, border-color 0.15s;
}
.hc-sidebar-user:hover,
.hc-sidebar-user[aria-expanded="true"] {
    background: #243A56;
    border-color: rgba(140, 198, 63, 0.3);
}

.hc-sidebar-user__avatar {
    width: 34px;
    height: 34px;
    background: var(--hc-yellow);
    color: var(--hc-navy);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hc-radius-md);
    flex-shrink: 0;
}
.hc-sidebar-user__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hc-sidebar-user__name {
    font-weight: 600;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hc-sidebar-user__role {
    font-size: 11px;
    color: var(--hc-green);
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.hc-sidebar-user__chev {
    color: rgba(255, 255, 255, 0.55);
    font-size: 18px;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.hc-sidebar-user[aria-expanded="true"] .hc-sidebar-user__chev {
    transform: rotate(180deg);
    color: #FFFFFF;
}

/* Dropdown menu — s'ouvre vers le haut (dropup) */
.hc-sidebar-user-menu {
    background: #FFFFFF;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.4);
    padding: 6px;
    min-width: 100%;
    margin-bottom: 8px;
}
.hc-sidebar-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--hc-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--hc-text-primary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.hc-sidebar-user-menu .dropdown-item i { font-size: 16px; color: var(--hc-text-secondary); }
.hc-sidebar-user-menu .dropdown-item:hover {
    background: var(--hc-green-tint);
    color: var(--hc-navy);
}
.hc-sidebar-user-menu .dropdown-item:hover i { color: var(--hc-green-deep); }
.hc-sidebar-user-menu .dropdown-item:active,
.hc-sidebar-user-menu .dropdown-item:focus {
    background: var(--hc-green-tint);
    color: var(--hc-navy);
}
.hc-sidebar-user-menu .dropdown-divider {
    margin: 4px 0;
    border-color: var(--hc-border);
    opacity: 1;
}
.hc-sidebar-user-menu .hc-dropdown-item--danger {
    color: var(--hc-status-danger);
}
.hc-sidebar-user-menu .hc-dropdown-item--danger i { color: var(--hc-status-danger); }
.hc-sidebar-user-menu .hc-dropdown-item--danger:hover {
    background: var(--hc-status-danger-tint);
    color: var(--hc-status-danger);
}
.hc-sidebar-user-menu .hc-dropdown-item--danger:hover i { color: var(--hc-status-danger); }

/* ============================================================
   5. CONTENT PAGE + TOPBAR
   ============================================================ */
.wrapper { background: var(--hc-bg); min-height: 100vh; }

.content-page {
    background: var(--hc-bg);
    padding: 0 !important;
    min-height: 100vh;
}
/* margin-left suit la largeur de la sidebar selon le mode Hyper */
html[data-sidenav-size="default"] .content-page {
    margin-left: var(--hc-sidebar-w) !important;
}
html[data-sidenav-size="condensed"] .content-page {
    margin-left: 70px !important;
}

/* Topbar — blend cream, liseré bas porté par le .topbar interne pour
   qu'il s'arrête au padding et ne traverse pas toute la largeur (cf. maquette). */
.navbar-custom {
    background: var(--hc-bg) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    height: var(--hc-topbar-h) !important;
    padding: 0 44px !important;
    margin-left: 0 !important;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navbar-custom .topbar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
    max-width: none !important;
    border-bottom: 1.5px solid var(--hc-border);
}

/* Hamburger */
.button-toggle-menu {
    background: transparent;
    border: 1px solid var(--hc-border);
    color: var(--hc-text-secondary);
    width: 36px;
    height: 36px;
    border-radius: var(--hc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}
.button-toggle-menu:hover { border-color: var(--hc-text-primary); color: var(--hc-text-primary); }
/* Hamburger masqué uniquement en desktop plein (>1140px — Hyper default).
   En tablette (768-1140px, mode condensed), le hamburger reste visible
   pour permettre le retour en mode default si l'utilisateur le souhaite. */
@media (min-width: 1141px) { .button-toggle-menu { display: none !important; } }

/* Breadcrumb topbar */
.hc-topbar-crumb {
    font-size: 14px;
    color: var(--hc-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.hc-topbar-crumb__current {
    color: var(--hc-text-primary);
    font-weight: 600;
}
.hc-topbar-crumb__sep { color: var(--hc-text-muted); }

/* Search inline */
.hc-topbar-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hc-bg);
    padding: 8px 14px;
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    font-size: 13px;
    color: var(--hc-text-secondary);
    min-width: 280px;
    transition: border-color 0.15s, background 0.15s;
}
.hc-topbar-search:focus-within { border-color: var(--hc-border-focus); background: var(--hc-paper); }
.hc-topbar-search i { color: var(--hc-text-muted); font-size: 16px; }
.hc-topbar-search input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    color: var(--hc-text-primary);
    font-family: var(--hc-font);
    font-size: 13px;
}

/* Date topbar */
.hc-topbar-date {
    font-size: 13px;
    color: var(--hc-text-secondary);
    font-weight: 500;
}

/* Content zone */
.content { padding: 32px 44px !important; background: transparent !important; }

/* ============================================================
   6. PAGE TITLE / HERO ACCUEIL
   ============================================================ */
.hc-hero {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    margin-bottom: 36px;
    align-items: end;
}
.hc-hero__kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hc-green-deep);
    margin-bottom: 10px;
}
.hc-hero__title {
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 14px;
    color: var(--hc-text-primary);
}
.hc-hero__sub {
    font-size: 15px;
    color: var(--hc-text-secondary);
    line-height: 1.55;
    max-width: 540px;
    margin: 0;
}
.hc-hero__sub b { color: var(--hc-text-primary); font-weight: 600; }

/* Indicateur principal (bloc navy à droite du hero) */
.hc-hero__indicator {
    background: var(--hc-navy);
    color: #FFFFFF;
    padding: 24px 26px 22px;
    border-radius: var(--hc-radius-lg);
    position: relative;
    overflow: hidden;
}
.hc-hero__indicator::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--hc-yellow);
}
.hc-hero__indicator-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hc-yellow);
    margin-bottom: 10px;
}
.hc-hero__indicator-value {
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.hc-hero__indicator-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 8px;
}

@media (max-width: 992px) {
    .hc-hero { grid-template-columns: 1fr; gap: 24px; }
    .hc-hero__title { font-size: 28px; }
    .hc-hero__indicator-value { font-size: 44px; }
}

/* ============================================================
   7. KPI CARDS
   ============================================================ */
.hc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}
.hc-kpi {
    background: var(--hc-paper);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    padding: 18px 22px;
    position: relative;
    overflow: hidden;
}
.hc-kpi::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 42px;
    height: 3px;
    background: var(--hc-green);
}
.hc-kpi--yellow::before  { background: var(--hc-yellow); }
.hc-kpi--neutral::before { background: var(--hc-text-muted); }

.hc-kpi__num {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--hc-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.hc-kpi__value {
    font-weight: 700;
    font-size: 32px;
    color: var(--hc-text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
.hc-kpi__value-unit {
    font-size: 14px;
    color: var(--hc-text-secondary);
    margin-left: 6px;
    font-weight: 500;
}
.hc-kpi__label {
    font-size: 13px;
    color: var(--hc-text-secondary);
    font-weight: 500;
}
.hc-kpi__trend {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hc-green-deep);
    display: flex;
    align-items: center;
    gap: 4px;
}
.hc-kpi__trend--down    { color: var(--hc-status-danger); }
.hc-kpi__trend--neutral { color: var(--hc-text-muted); }

/* ============================================================
   8. MODULE CARDS
   ============================================================ */
.hc-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.hc-mod {
    background: var(--hc-paper);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    padding: 24px 24px 20px;
    position: relative;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
}
.hc-mod:hover {
    border-color: var(--hc-green);
    transform: translateY(-2px);
    box-shadow: var(--hc-shadow-hover);
}
.hc-mod--soon {
    background: var(--hc-panel);
    opacity: 0.88;
}
.hc-mod--soon:hover {
    border-color: var(--hc-border);
    transform: none;
    box-shadow: none;
}

.hc-mod__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}
.hc-mod__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--hc-radius-md);
    background: var(--hc-bg);
    color: var(--hc-text-secondary);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.hc-mod__num--active {
    background: var(--hc-green);
    color: var(--hc-navy);
}
.hc-mod__state {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--hc-radius-sm);
    background: var(--hc-status-ok-tint);
    color: var(--hc-status-ok);
}
.hc-mod__state--soon {
    background: transparent;
    border: 1px solid var(--hc-border-strong);
    color: var(--hc-text-secondary);
}
.hc-mod__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}
.hc-mod__title i {
    color: var(--hc-green-deep);
    font-size: 18px;
}
.hc-mod__text {
    font-size: 13px;
    color: var(--hc-text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    flex: 1;
}

/* ============================================================
   8b. PAGE "MON COMPTE" — profil utilisateur
   ============================================================ */
.hc-profile {
    background: var(--hc-paper);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    overflow: hidden;
    max-width: 920px;
}

.hc-profile__hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    background: var(--hc-navy);
    color: #FFFFFF;
    position: relative;
}
.hc-profile__hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--hc-yellow);
}
.hc-profile__avatar {
    width: 72px;
    height: 72px;
    background: var(--hc-yellow);
    color: var(--hc-navy);
    font-weight: 700;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hc-radius-lg);
    flex-shrink: 0;
}
.hc-profile__main { flex: 1; min-width: 0; }
.hc-profile__name {
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 8px;
    color: #FFFFFF;
    letter-spacing: -0.015em;
}
.hc-profile__main .hc-badge {
    background: rgba(140, 198, 63, 0.22);
    color: #C8E89A;
}
.hc-profile__main .hc-badge.hc-badge--neutral {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}
.hc-profile__email {
    margin: 12px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hc-profile__email i { font-size: 14px; color: var(--hc-yellow); }

.hc-profile__sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
.hc-profile__section {
    padding: 24px 32px;
    border-top: 1px solid var(--hc-border);
}
.hc-profile__section:nth-child(odd) { border-right: 1px solid var(--hc-border); }
.hc-profile__section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hc-text-muted);
    margin: 0 0 14px;
}

.hc-profile__grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 10px 16px;
    margin: 0;
}
.hc-profile__grid dt {
    font-size: 13px;
    color: var(--hc-text-secondary);
    font-weight: 500;
}
.hc-profile__grid dd {
    font-size: 14px;
    color: var(--hc-text-primary);
    margin: 0;
    font-weight: 500;
}
.hc-profile__empty {
    color: var(--hc-text-muted);
    font-style: italic;
    font-weight: 400;
}
.hc-profile__code {
    font-family: var(--hc-font);
    background: var(--hc-bg);
    padding: 2px 8px;
    border-radius: var(--hc-radius-sm);
    font-size: 13px;
    color: var(--hc-text-primary);
}
.hc-profile__hint {
    font-size: 13px;
    color: var(--hc-text-secondary);
    margin: 0 0 14px;
    line-height: 1.55;
}
.hc-profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 768px) {
    .hc-profile__sections { grid-template-columns: 1fr; }
    .hc-profile__section:nth-child(odd) { border-right: none; }
    .hc-profile__hero { flex-direction: column; align-items: flex-start; padding: 24px; }
    .hc-profile__grid { grid-template-columns: 1fr; gap: 4px 0; }
    .hc-profile__grid dd { margin-bottom: 12px; }
}

/* ============================================================
   9. BUTTONS
   ============================================================ */
.hc-btn,
.hc-btn--primary,
.hc-btn--secondary,
.hc-btn--ghost,
.hc-btn--danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 36px;
    border-radius: var(--hc-radius-md);
    font-family: var(--hc-font);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}
.hc-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.hc-btn--lg { height: 44px; padding: 0 20px; font-size: 15px; }

.hc-btn--primary {
    background: var(--hc-green);
    color: var(--hc-navy);
    border-color: var(--hc-green);
}
.hc-btn--primary:hover {
    background: var(--hc-green-deep);
    border-color: var(--hc-green-deep);
    color: #FFFFFF;
}

.hc-btn--secondary {
    background: #FFFFFF;
    color: var(--hc-text-primary);
    border-color: var(--hc-border-strong);
}
.hc-btn--secondary:hover {
    background: var(--hc-green-tint);
    border-color: var(--hc-green);
    color: var(--hc-text-primary);
}

.hc-btn--ghost {
    background: transparent;
    color: var(--hc-text-primary);
    border-color: var(--hc-border-strong);
}
.hc-btn--ghost:hover {
    background: var(--hc-paper);
    border-color: var(--hc-text-primary);
}

.hc-btn--danger {
    background: var(--hc-status-danger);
    color: #FFFFFF;
    border-color: var(--hc-status-danger);
}
.hc-btn--danger:hover { background: #B83838; border-color: #B83838; }

.hc-btn:disabled,
.hc-btn--primary:disabled,
.hc-btn--secondary:disabled,
.hc-btn--ghost:disabled,
.hc-mod__cta--soon {
    background: transparent;
    color: var(--hc-text-muted);
    border-color: var(--hc-border-strong);
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   10. BADGES STATUTS
   ============================================================ */
.hc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: var(--hc-radius-sm);
    line-height: 1;
}
.hc-badge--ok       { background: var(--hc-status-ok-tint);      color: var(--hc-status-ok); }
.hc-badge--warning  { background: var(--hc-status-warning-tint); color: var(--hc-status-warning); }
.hc-badge--danger   { background: var(--hc-status-danger-tint);  color: var(--hc-status-danger); }
.hc-badge--info     { background: var(--hc-status-info-tint);    color: var(--hc-status-info); }
.hc-badge--neutral  { background: var(--hc-bg);                  color: var(--hc-text-secondary); }

/* ============================================================
   11. AVATAR (topbar et autres usages)
   ============================================================ */
.hc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hc-yellow);
    color: var(--hc-navy);
    font-weight: 700;
    border-radius: var(--hc-radius-md);
    flex-shrink: 0;
}
.hc-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.hc-avatar--md { width: 36px; height: 36px; font-size: 14px; }
.hc-avatar--lg { width: 48px; height: 48px; font-size: 17px; }

/* ============================================================
   12. BRAND MARK (logo HC carré pour login)
   ============================================================ */
.hc-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--hc-navy);
    border: 1.5px solid var(--hc-green);
    border-radius: var(--hc-radius-md);
    font-weight: 700;
    font-size: 17px;
    color: var(--hc-green);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.hc-brand-mark::after {
    content: "C";
    color: var(--hc-yellow);
    margin-left: -2px;
}

/* ============================================================
   13. LOGIN — structure split (image + form)
   ============================================================ */
.hc-login-page {
    background: var(--hc-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.hc-login-card {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    width: 100%;
    max-width: 1100px;
    min-height: 660px;
    background: var(--hc-paper);
    box-shadow: var(--hc-shadow-modal);
    border-radius: var(--hc-radius-lg);
    overflow: hidden;
}

.hc-login-hero {
    position: relative;
    background: var(--hc-navy);
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #FFFFFF;
}
.hc-login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,27,42,.88) 0%, rgba(13,27,42,.55) 60%, rgba(13,27,42,.35) 100%);
    z-index: 0;
}
.hc-login-hero > * { position: relative; z-index: 1; }

.hc-login-hero__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.hc-login-hero__brand-text .name {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.06em;
}
.hc-login-hero__brand-text .sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

.hc-login-hero__editorial { max-width: 520px; }
.hc-login-hero__rule {
    width: 64px;
    height: 3px;
    background: var(--hc-yellow);
    margin-bottom: 22px;
    border-radius: 2px;
}
.hc-login-hero__title {
    font-weight: 600;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
}
.hc-login-hero__title em {
    font-style: normal;
    color: var(--hc-yellow);
    font-weight: 700;
}
.hc-login-hero__caption {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    max-width: 440px;
    margin: 0;
}

.hc-login-form {
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--hc-paper);
}
.hc-login-form__title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 6px;
    color: var(--hc-text-primary);
}
.hc-login-form__sub {
    font-size: 14px;
    color: var(--hc-text-secondary);
    margin-bottom: 32px;
}

/* Champ login */
.hc-login-field { margin-bottom: 16px; }
.hc-login-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--hc-text-primary);
    margin-bottom: 6px;
}
.hc-login-field input,
.hc-login-field select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--hc-border-strong);
    border-radius: var(--hc-radius-md);
    background: #FFFFFF;
    font-family: var(--hc-font);
    font-size: 14px;
    color: var(--hc-text-primary);
    outline: none;
    transition: all 0.15s;
}
.hc-login-field input::placeholder { color: var(--hc-text-muted); }
.hc-login-field input:focus,
.hc-login-field select:focus {
    border-color: var(--hc-green);
    box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.18);
}
.hc-login-field__help {
    font-size: 12px;
    color: var(--hc-text-secondary);
    margin-top: 6px;
}

.hc-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    border-radius: var(--hc-radius-md);
    border: none;
    background: var(--hc-green);
    color: var(--hc-navy);
    font-family: var(--hc-font);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    margin-top: 24px;
    transition: all 0.15s;
}
.hc-login-btn:hover { background: var(--hc-green-deep); color: #FFFFFF; }
.hc-login-btn i { font-size: 18px; }

.hc-login-form__footer {
    margin-top: 36px;
    font-size: 13px;
    color: var(--hc-text-secondary);
    text-align: center;
}

/* Alerte erreur login */
.hc-login-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hc-status-danger-tint);
    border: 1px solid var(--hc-status-danger);
    color: var(--hc-status-danger);
    border-radius: var(--hc-radius-md);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}
.hc-login-alert--info {
    background: var(--hc-yellow-tint);
    border-color: var(--hc-yellow-deep);
    color: var(--hc-navy);
}

/* Login responsive — single column sous 800px */
@media (max-width: 800px) {
    .hc-login-card { grid-template-columns: 1fr; min-height: auto; }
    .hc-login-hero { min-height: 280px; padding: 32px; }
    .hc-login-hero__title { font-size: 32px; }
    .hc-login-form { padding: 40px 28px; }
}

/* ============================================================
   14. RESPONSIVE — Tablette + Mobile
   ============================================================ */

/* TABLETTE (768-1140px) — mode condensed Hyper natif.
   content-page et topbar padding ajustés pour la sidebar 70px.
   La sidebar est déjà gérée par les sélecteurs [data-sidenav-size="condensed"] ci-dessus. */
@media (min-width: 768px) and (max-width: 1140px) {
    .content { padding: 24px 28px !important; }
    .navbar-custom { padding: 0 28px !important; }
}

/* MOBILE (<768px) — sidebar en overlay (translateX).
   Breakpoint resserré à 767.98px pour libérer la plage tablette. */
@media (max-width: 767.98px) {
    /* Override du mode condensed si Hyper l'a posé avant le resize :
       en mobile on force l'overlay quel que soit data-sidenav-size. */
    .leftside-menu {
        transform: translateX(-100%) !important;
        transition: transform 0.25s ease;
        width: var(--hc-sidebar-w) !important;   /* sidebar pleine en overlay mobile */
        padding: 24px 16px 24px !important;
        overflow: hidden !important;
    }
    /* Ré-afficher les textes qui sont cachés en condensed (au cas où) */
    .leftside-menu .hc-sidebar-brand__text,
    .leftside-menu .hc-sidebar-user__info,
    .leftside-menu .hc-sidebar-user__chev,
    .leftside-menu .hc-nav-num,
    .leftside-menu .side-nav-title {
        display: flex !important;
    }
    .leftside-menu .side-nav-link > span:not(.hc-nav-num) {
        display: inline !important;
    }
    /* Restaurer les styles des éléments masqués en condensed */
    .leftside-menu .logo,
    .leftside-menu .hc-sidebar-brand {
        justify-content: flex-start !important;
        padding: 4px 8px 22px !important;
        gap: 12px !important;
    }
    .leftside-menu .side-nav-link {
        justify-content: flex-start !important;
        padding: 11px 14px !important;
        gap: 12px !important;
    }
    .leftside-menu .hc-sidebar-user {
        justify-content: flex-start !important;
        padding: 12px !important;
        gap: 10px !important;
        background: var(--hc-navy-3) !important;
    }

    html.sidebar-enable .leftside-menu {
        transform: translateX(0) !important;
    }

    .content-page { margin-left: 0 !important; }
    .content { padding: 20px 16px !important; }

    .navbar-custom { padding: 0 16px !important; }

    .hc-topbar-search { min-width: 0; flex: 1; max-width: none; }

    .hc-hero__title { font-size: 24px; }
}

/* Backdrop mobile (créé dynamiquement par le toggle hamburger) */
#custom-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 42, 0.5);
    z-index: 1005;
}

/* =====================================================================
   MODULE MÉTIER — Listing, formulaires, fiche (record-page)
   Porté depuis components/tables.html + forms.html dans le thème
   ===================================================================== */

/* ── Sous-menu sidebar (Salarié) ─────────────────────────────────── */
.leftside-menu .side-nav .menu-arrow {
    margin-left: auto;
    margin-right: 6px;
    transition: transform .15s ease;
}
.leftside-menu .side-nav .menu-arrow::before {
    content: "\ea4e"; /* ri-arrow-right-s-line */
    font-family: 'remixicon';
    font-size: 16px;
    display: inline-block;
}
.leftside-menu .side-nav-link[aria-expanded="true"] .menu-arrow { transform: rotate(90deg); }
.leftside-menu .side-nav-link[data-bs-toggle] .hc-nav-num { margin-left: 6px; }
.leftside-menu .side-nav-second-level {
    list-style: none;
    padding: 2px 0 4px 0;
    margin: 0;
}
.leftside-menu .side-nav-second-level li a {
    display: block;
    padding: 8px 16px 8px 48px;
    color: var(--ct-menu-item-color, #b8c5d6);
    font-size: 13px;
    text-decoration: none;
    transition: color .12s, background-color .12s;
}
.leftside-menu .side-nav-second-level li a:hover { color: #fff; }
.leftside-menu .side-nav-second-level li.active a {
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--hc-green);
}

/* ── Page title / toolbar listing ────────────────────────────────── */
.page-title-hc {
    font-size: 22px;
    font-weight: 700;
    color: var(--hc-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}
.page-subtitle-hc {
    font-size: 13px;
    color: var(--hc-text-secondary);
    margin: 2px 0 0 0;
}
.listing-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.listing-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.search-inline-hc {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 260px;
}
.search-inline-hc i {
    position: absolute;
    left: 10px;
    color: var(--hc-text-muted);
    font-size: 16px;
    pointer-events: none;
}
.search-inline-hc input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    background: var(--hc-paper);
    font-size: 13px;
    color: var(--hc-text-primary);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.search-inline-hc input:focus {
    border-color: var(--hc-green);
    box-shadow: 0 0 0 3px var(--hc-green-tint);
}

/* ── Filter pills (onglets de statut) ────────────────────────────── */
.filter-pills-hc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filter-pill-hc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--hc-border);
    border-radius: 999px;
    background: var(--hc-paper);
    color: var(--hc-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s ease;
    white-space: nowrap;
}
.filter-pill-hc:hover {
    border-color: var(--hc-border-strong);
    color: var(--hc-text-primary);
}
.filter-pill-hc.is-active {
    background: var(--hc-navy);
    border-color: var(--hc-navy);
    color: #fff;
}
.pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--hc-bg);
    color: var(--hc-text-secondary);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.filter-pill-hc.is-active .pill-count {
    background: var(--hc-green);
    color: var(--hc-navy);
}

/* ── Panneau filtres avancés (collapsible) ───────────────────────── */
.hc-filters-panel {
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    background: var(--hc-panel);
    padding: 18px 18px 6px 18px;
    margin-bottom: 16px;
}
.hc-filters-panel[hidden] { display: none; }
.hc-filters-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 8px 0 4px 0;
}

/* ── Drawer filtres (slide-in latéral droit) ─────────────────────── */
.hc-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 42, 0.5);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.hc-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.hc-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: var(--hc-paper);
    box-shadow: var(--hc-shadow-modal);
    z-index: 1051;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
.hc-filter-drawer.is-open { transform: translateX(0); }

.hc-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 2px solid var(--hc-yellow);
    flex-shrink: 0;
}
.hc-drawer-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    color: var(--hc-text-primary);
}
.hc-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}
.hc-drawer-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 18px;
    border-top: 1px solid var(--hc-border);
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .hc-filter-drawer { width: 100%; max-width: 100%; }
}

/* ── Tableau ──────────────────────────────────────────────────────── */
.hc-table-wrapper {
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    background: var(--hc-paper);
    overflow-x: auto;
}
.hc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.hc-table thead th {
    background: var(--hc-panel);
    color: var(--hc-text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--hc-border);
    white-space: nowrap;
    vertical-align: middle;
}
.hc-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--hc-border);
    color: var(--hc-text-primary);
    vertical-align: middle;
    white-space: nowrap;
}
.hc-table tbody tr:last-child td { border-bottom: none; }
.hc-table tbody tr { transition: background-color .1s; }
.hc-table tbody tr:hover { background: var(--hc-green-tint); }
.hc-table a { color: var(--hc-green-deep); font-weight: 600; text-decoration: none; }
.hc-table a:hover { text-decoration: underline; }
/* Colonne actions figée à droite (RCOMP-12) — toujours accessible même quand la table déborde */
.hc-table .col-actions { width: 1%; white-space: nowrap; text-align: right; position: sticky; right: 0; }
.hc-table thead th.col-actions { background: var(--hc-panel); box-shadow: -8px 0 8px -8px rgba(0,0,0,.10); }
.hc-table tbody td.col-actions { background: var(--hc-paper); box-shadow: -8px 0 8px -8px rgba(0,0,0,.10); }
.hc-table tbody tr:hover td.col-actions { background: var(--hc-green-tint); }

/* Barre de défilement horizontale flottante pour listings larges — épinglée en
   bas du viewport quand le scrollbar natif du wrapper est hors écran. Gérée par
   Listing::renderGlobalJS() (une seule barre partagée, re-bindée en AJAX). */
.hc-hscroll {
    position: fixed;
    bottom: 0;
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 1020;
    background: var(--hc-paper);
    border-top: 1px solid var(--hc-border);
    box-shadow: 0 -6px 14px -8px rgba(0,0,0,.22);
    display: none;
}
.hc-hscroll.is-visible { display: block; }
.hc-hscroll-inner { height: 1px; }
.hc-hscroll::-webkit-scrollbar { height: 12px; }
.hc-hscroll::-webkit-scrollbar-track { background: var(--hc-panel); }
.hc-hscroll::-webkit-scrollbar-thumb { background: var(--hc-text-muted); border-radius: 6px; border: 2px solid var(--hc-panel); }
.hc-hscroll::-webkit-scrollbar-thumb:hover { background: var(--hc-text-secondary); }

/* ── Barre d'outils du tableau (compteur + sélecteur de colonnes) ───── */
.hc-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.hc-table-toolbar .listing-count { margin-bottom: 0; }
.hc-table-toolbar-spacer { flex: 1; }

/* Sélecteur de colonnes — dropdown calqué sur .hc-sidebar-user-menu */
.hc-colpicker { position: relative; }
.hc-colpicker-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1010;
    min-width: 220px;
    max-height: 360px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.4);
    padding: 6px;
    display: none;
}
.hc-colpicker-menu.is-open { display: block; }
.hc-colpicker-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hc-text-secondary);
    padding: 6px 10px 8px;
}
.hc-colpicker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0;
    border-radius: var(--hc-radius-sm);
    font-size: 13px;
    color: var(--hc-text-primary);
    cursor: pointer;
}
.hc-colpicker-item:hover { background: var(--hc-green-tint); color: var(--hc-navy); }
.hc-colpicker-item input { accent-color: var(--hc-green-deep); width: 15px; height: 15px; cursor: pointer; }
.hc-colpicker-reset {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    padding: 9px 10px;
    border: none;
    border-top: 1px solid var(--hc-border);
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--hc-text-secondary);
    cursor: pointer;
}
.hc-colpicker-reset i { font-size: 14px; }
.hc-colpicker-reset:hover { color: var(--hc-green-deep); }

/* Colonne masquée via le sélecteur de colonnes */
.hc-table .hc-col-hidden { display: none; }

/* Colonne gelée à gauche (option freeze) — pendant gauche de .col-actions (RCOMP-12) */
.hc-table .col-freeze { position: sticky; left: 0; z-index: 1; }
.hc-table thead th.col-freeze { background: var(--hc-panel); box-shadow: 8px 0 8px -8px rgba(0,0,0,.10); z-index: 2; }
.hc-table tbody td.col-freeze { background: var(--hc-paper); box-shadow: 8px 0 8px -8px rgba(0,0,0,.10); }
.hc-table tbody tr:hover td.col-freeze { background: var(--hc-green-tint); }

/* Compteur de lignes rendu par la classe Listing (showCount) */
.listing-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--hc-text-secondary);
    margin-bottom: 10px;
}
.listing-count i { font-size: 15px; color: var(--hc-text-muted); }
.listing-count strong { color: var(--hc-text-primary); font-weight: 700; }
.hc-table thead th.sortable { cursor: pointer; user-select: none; }
.hc-table thead th.sortable .sort-icon {
    font-size: 11px;
    opacity: .35;
    margin-left: 4px;
    vertical-align: middle;
    transition: opacity .12s, color .12s;
}
.hc-table thead th.sortable:hover .sort-icon { opacity: .7; }
.hc-table thead th.is-sorted-asc,
.hc-table thead th.is-sorted-desc { color: var(--hc-text-primary); border-bottom: 2px solid var(--hc-green); }
.hc-table thead th.is-sorted-asc  .sort-icon,
.hc-table thead th.is-sorted-desc .sort-icon { opacity: 1; color: var(--hc-green-deep); }

/* Cellule utilisateur (avatar + nom + sous-texte) */
.user-cell-hc { display: flex; align-items: center; gap: 10px; }
.user-info { display: flex; flex-direction: column; line-height: 1.25; }
.user-name { font-weight: 600; color: var(--hc-text-primary); }
.user-sub  { font-size: 11px; color: var(--hc-text-muted); }
.avatar-hc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}
.avatar-hc.avatar-sm { width: 30px; height: 30px; font-size: 11px; }
.avatar-hc.avatar-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-hc.color-1 { background: #3F8FCC; }
.avatar-hc.color-2 { background: #73A82F; }
.avatar-hc.color-3 { background: #C4892F; }
.avatar-hc.color-4 { background: #9C5BD6; }
.avatar-hc.color-5 { background: #D6685B; }
.avatar-hc.color-6 { background: #2FA8A0; }

/* Row actions */
.row-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--hc-radius-md);
    color: var(--hc-text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.row-action-icon:hover { background: var(--hc-bg); color: var(--hc-text-primary); }
.row-action-icon.danger:hover { background: var(--hc-status-danger-tint); color: var(--hc-status-danger); }

/* Empty state */
.hc-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--hc-text-secondary);
}
.hc-empty-state__icon { font-size: 40px; color: var(--hc-text-muted); margin-bottom: 8px; }
.hc-empty-state .empty-state-icon { font-size: 40px; color: var(--hc-text-muted); margin-bottom: 8px; }
.hc-empty-state__title, .hc-empty-state .empty-state-title { font-size: 15px; font-weight: 600; color: var(--hc-text-primary); margin: 0 0 4px 0; }
.hc-empty-state__desc, .hc-empty-state .empty-state-desc { font-size: 13px; color: var(--hc-text-secondary); margin: 0 0 12px 0; }

/* Pagination */
.hc-pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hc-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    background: var(--hc-paper);
    color: var(--hc-text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: all .12s;
}
.hc-pagination .page-link:hover { border-color: var(--hc-border-strong); color: var(--hc-text-primary); }
.hc-pagination .page-link.is-active { background: var(--hc-navy); border-color: var(--hc-navy); color: #fff; }
.hc-pagination .page-link.is-disabled { opacity: .45; pointer-events: none; }

/* ── Formulaires ─────────────────────────────────────────────────── */
.hc-card {
    background: var(--hc-paper);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    overflow: hidden;
}
.hc-card > .card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--hc-border);
    background: var(--hc-panel);
}
.hc-card .card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--hc-text-primary);
}
.hc-card > .card-body { padding: 18px; }

.hc-form-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hc-text-secondary);
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--hc-border);
}
.hc-form-section-header i { color: var(--hc-green-deep); font-size: 15px; }

.hc-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.hc-field-label { font-size: 12px; font-weight: 600; color: var(--hc-text-secondary); }
.hc-field-hint  { font-size: 11px; color: var(--hc-text-muted); }
.hc-input, .hc-select, .hc-textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    background: var(--hc-paper);
    font-size: 13px;
    font-family: var(--hc-font);
    color: var(--hc-text-primary);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.hc-textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.hc-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A0AE' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 30px;
}
.hc-input:focus, .hc-select:focus, .hc-textarea:focus {
    border-color: var(--hc-green);
    box-shadow: 0 0 0 3px var(--hc-green-tint);
}
.hc-input:disabled, .hc-select:disabled, .hc-textarea:disabled {
    background: var(--hc-bg);
    color: var(--hc-text-muted);
    cursor: not-allowed;
}
.hc-input.is-error, .hc-select.is-error, .hc-textarea.is-error,
.hc-input.fail, .hc-select.fail {
    border-color: var(--hc-status-danger);
    box-shadow: 0 0 0 3px var(--hc-status-danger-tint);
}
.hc-input-group { display: flex; align-items: stretch; }
.hc-input-group .hc-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.hc-input-group .hc-input-addon {
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid var(--hc-border);
    border-left: none;
    border-radius: 0 var(--hc-radius-md) var(--hc-radius-md) 0;
    background: var(--hc-panel);
    color: var(--hc-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

/* ── Fiche (record-page) ─────────────────────────────────────────── */
.hc-record-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--hc-paper);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    padding: 20px 22px;
    flex-wrap: wrap;
}
.hc-record-hero__avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hc-navy);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
}
.hc-record-hero__main { flex: 1 1 240px; min-width: 0; }
.hc-record-hero__name { font-size: 20px; font-weight: 700; color: var(--hc-text-primary); margin: 0 0 4px 0; }
.hc-record-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--hc-text-secondary); }
.hc-record-hero__meta b { color: var(--hc-text-primary); font-weight: 600; }
.hc-record-hero__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.hc-record-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--hc-border);
    margin: 18px 0 20px 0;
}
.hc-record-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hc-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .12s, border-color .12s;
}
.hc-record-tab:hover { color: var(--hc-text-primary); }
.hc-record-tab.is-active { color: var(--hc-navy); border-bottom-color: var(--hc-green); }
.hc-record-tab.is-disabled { color: var(--hc-text-muted); cursor: not-allowed; pointer-events: none; }

/* Grille clé/valeur de synthèse (réutilisable) */
.hc-kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 13px; }
.hc-kv dt { color: var(--hc-text-secondary); }
.hc-kv dd { color: var(--hc-text-primary); margin: 0; font-weight: 500; }
.hc-kv dd .hc-empty { color: var(--hc-text-muted); font-weight: 400; }

/* Grille de cartes synthèse */
.hc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hc-stack { display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 991.98px) {
    .hc-grid-2 { grid-template-columns: 1fr; }
    .hc-kv { grid-template-columns: 130px 1fr; }
    .listing-toolbar-actions { width: 100%; }
    .search-inline-hc { max-width: none; }
}

/* ============================================================
   PIÈCES OBLIGATOIRES — composants hc-piece-*
   Colonne droite de la synthèse salarié
   ============================================================ */

/* Conteneur liste pièces */
.hc-piece-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Ligne de pièce */
.hc-piece-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--hc-radius-md);
    border: 1px solid var(--hc-border);
    background: var(--hc-paper);
    transition: border-color 0.15s;
    min-height: 52px;
}
.hc-piece-row:hover {
    border-color: var(--hc-border-strong);
}

/* Pièce manquante et obligatoire — accent danger */
.hc-piece-row.is-missing-required {
    border-color: var(--hc-status-danger);
    background: var(--hc-status-danger-tint);
}

/* Pièce déposée — accent vert */
.hc-piece-row.is-uploaded {
    border-color: var(--hc-status-ok);
    background: var(--hc-status-ok-tint);
}

/* Icône statut à gauche */
.hc-piece-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--hc-surface-table-header, #F1F3F5);
    color: var(--hc-text-muted);
}
.hc-piece-row.is-uploaded .hc-piece-icon {
    background: var(--hc-green-tint);
    color: var(--hc-green-deep, #73A82F);
}
.hc-piece-row.is-missing-required .hc-piece-icon {
    background: var(--hc-status-danger-tint);
    color: var(--hc-status-danger);
}

/* Infos texte de la pièce */
.hc-piece-info {
    flex: 1 1 auto;
    min-width: 0;
}
.hc-piece-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--hc-text-primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-piece-meta {
    font-size: 11px;
    color: var(--hc-text-muted);
    display: block;
    margin-top: 2px;
}

/* Actions à droite */
.hc-piece-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Bouton upload inline discret */
.hc-piece-upload-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--hc-text-secondary);
    background: var(--hc-surface-table-header, #F1F3F5);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hc-piece-upload-btn:hover {
    background: var(--hc-green-tint);
    border-color: var(--hc-green);
    color: var(--hc-green-deep, #73A82F);
}
.hc-piece-upload-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 0;
}

/* Spinner inline upload */
.hc-piece-upload-btn.is-uploading {
    pointer-events: none;
    opacity: 0.7;
}
.hc-piece-spinner {
    display: none;
    width: 12px;
    height: 12px;
    border: 2px solid var(--hc-border);
    border-top-color: var(--hc-green);
    border-radius: 50%;
    animation: hc-spin 0.6s linear infinite;
    flex-shrink: 0;
}
.is-uploading .hc-piece-spinner { display: inline-block; }
.is-uploading .hc-piece-upload-text { display: none; }

@keyframes hc-spin {
    to { transform: rotate(360deg); }
}

/* Empty state pièces */
.hc-piece-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--hc-text-muted);
}

/* Compteur badge dans le header de la card pièces */
.hc-piece-counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

/* Grille 2-col synthèse : col gauche 60% / col droite 40% */
.hc-grid-synthese {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 18px;
    align-items: start;
}
/* Empêche un contenu enfant large (formulaire à colonnes serrées, table étroite) de forcer
   le track grid au-delà du container — sans ça un contenu qui ne peut pas se contracter
   (ex: plusieurs col-md-* dans un même .row) fait déborder toute la page horizontalement,
   surtout visible sous 991px où .hc-grid-synthese passe à 1 seule colonne. */
.hc-grid-synthese > .hc-stack { min-width: 0; }
@media (max-width: 1199.98px) {
    .hc-grid-synthese { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991.98px) {
    .hc-grid-synthese { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   Gestionnaire de fichiers — onglet « Documents » de la fiche salarié
   (salarie/documents.php). Arbre de dossiers commun + contenu par salarié.
   ════════════════════════════════════════════════════════════════════ */
.hc-fm-layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 18px;
    align-items: start;
}
.hc-fm-main { min-width: 0; }

/* ── Volet arbre ────────────────────────────────────────────────────── */
.hc-fm-tree {
    background: var(--hc-paper);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    padding: 12px;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.hc-fm-tree-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 10px 2px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--hc-border);
}
.hc-fm-tree-head-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: var(--hc-text-primary);
}
.hc-fm-tree-list { list-style: none; margin: 0; padding: 0; }
.hc-fm-tree-list .hc-fm-tree-list { padding-left: 14px; }
.hc-fm-tree-item { margin: 1px 0; }
.hc-fm-tree-link {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 8px;
    border-radius: var(--hc-radius-md);
    font-size: 13px; color: var(--hc-text-secondary);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.hc-fm-tree-link:hover { background: var(--hc-bg); color: var(--hc-text-primary); }
.hc-fm-tree-link.is-active { background: var(--hc-yellow-tint); color: var(--hc-text-primary); font-weight: 600; }
.hc-fm-tree-link i { font-size: 16px; color: var(--hc-yellow-deep); flex-shrink: 0; }
.hc-fm-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-fm-tree-count {
    flex-shrink: 0;
    min-width: 18px; text-align: center;
    font-size: 11px; font-weight: 600;
    color: var(--hc-text-secondary);
    background: var(--hc-bg);
    border-radius: 9px; padding: 1px 6px;
}

/* ── Volet contenu ──────────────────────────────────────────────────── */
.hc-fm-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    font-size: 13px; color: var(--hc-text-muted);
    margin-bottom: 12px;
}
.hc-fm-breadcrumb i { font-size: 15px; }
.hc-fm-breadcrumb a { color: var(--hc-text-secondary); text-decoration: none; }
.hc-fm-breadcrumb a:hover { color: var(--hc-text-primary); text-decoration: underline; }

.hc-fm-row-icon { font-size: 20px; color: var(--hc-text-muted); }
.hc-fm-row-icon--folder { color: var(--hc-yellow-deep); }
.hc-fm-row--folder:hover { background: var(--hc-bg); }
.hc-fm-file-link { color: var(--hc-text-primary); text-decoration: none; }
.hc-fm-file-link:hover { text-decoration: underline; }

/* Colonne actions toujours accessible au scroll horizontal (RCOMP-12) */
.hc-fm-list .col-actions {
    position: sticky; right: 0;
    background: var(--hc-paper);
    box-shadow: -8px 0 8px -8px rgba(13, 27, 42, 0.10);
    white-space: nowrap;
}
.hc-fm-list tbody tr:hover .col-actions { background: var(--hc-bg); }

/* ── Listes de partage (drawer) ─────────────────────────────────────── */
.hc-fm-share-list {
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    max-height: 220px; overflow-y: auto;
    margin-bottom: 8px;
}
.hc-fm-share-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    font-size: 13px; color: var(--hc-text-primary);
    border-bottom: 1px solid var(--hc-border);
    cursor: pointer; margin: 0;
}
.hc-fm-share-item:last-child { border-bottom: none; }
.hc-fm-share-item:hover { background: var(--hc-bg); }
.hc-fm-share-item input { flex-shrink: 0; }

@media (max-width: 991.98px) {
    .hc-fm-layout { grid-template-columns: 1fr; }
    .hc-fm-tree { position: static; max-height: 320px; }
}

/* ════════════════════════════════════════════════════════════════════
   Cloche de notifications du topbar (templates/base.php)
   ════════════════════════════════════════════════════════════════════ */
.hc-topbar-notif { position: relative; margin-left: 4px; }
.hc-notif-btn {
    position: relative;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    background: var(--hc-paper);
    color: var(--hc-text-secondary);
    font-size: 19px; cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.hc-notif-btn:hover { background: var(--hc-bg); color: var(--hc-text-primary); border-color: var(--hc-border-strong); }
.hc-notif-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; line-height: 1;
    color: #fff; background: var(--hc-status-danger);
    border: 2px solid var(--hc-paper); border-radius: 9px;
}
.hc-notif-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 360px; max-width: 92vw;
    background: var(--hc-paper);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    box-shadow: var(--hc-shadow-modal);
    z-index: 1055;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.hc-notif-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.hc-notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hc-border);
    font-size: 13px; font-weight: 700; color: var(--hc-text-primary);
}
.hc-notif-allread {
    border: none; background: none; padding: 0;
    font-size: 12px; font-weight: 600; color: var(--hc-status-danger);
    cursor: pointer;
}
.hc-notif-allread:hover { text-decoration: underline; }
.hc-notif-list { max-height: 380px; overflow-y: auto; }
.hc-notif-empty {
    padding: 26px 14px; text-align: center;
    font-size: 13px; color: var(--hc-text-muted);
}
.hc-notif-empty i { font-size: 26px; display: block; margin-bottom: 6px; }
.hc-notif-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--hc-border);
    text-decoration: none; color: var(--hc-text-primary);
    transition: background 0.12s ease;
}
.hc-notif-item:last-child { border-bottom: none; }
.hc-notif-item:hover { background: var(--hc-bg); }
.hc-notif-item i { font-size: 18px; color: var(--hc-yellow-deep); flex-shrink: 0; margin-top: 1px; }
.hc-notif-item.is-unread { background: var(--hc-yellow-tint); }
.hc-notif-item.is-unread:hover { background: var(--hc-yellow-tint); }
.hc-notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-notif-item-text { font-size: 13px; line-height: 1.35; color: var(--hc-text-primary); }
.hc-notif-item.is-unread .hc-notif-item-text { font-weight: 600; }
.hc-notif-item-date { font-size: 11px; color: var(--hc-text-muted); }

/* ── Annuaire — recherche rapide + vignettes ─────────────────────── */
.hc-annuaire-search { position: relative; display: flex; align-items: center; min-width: 300px; }
.hc-annuaire-search > i { position: absolute; left: 12px; color: var(--hc-text-muted); font-size: 16px; pointer-events: none; }
.hc-annuaire-search input { width: 100%; height: 40px; padding: 0 34px 0 36px; border: 1.5px solid var(--hc-border); border-radius: var(--hc-radius-md); background: var(--hc-paper); font-size: 13px; font-family: var(--hc-font); color: var(--hc-text-primary); outline: none; transition: border-color .12s, box-shadow .12s; }
.hc-annuaire-search input:focus { border-color: var(--hc-green); box-shadow: 0 0 0 3px var(--hc-green-tint); }
.hc-annuaire-search button { position: absolute; right: 8px; border: none; background: none; color: var(--hc-text-muted); cursor: pointer; display: inline-flex; padding: 4px; border-radius: 50%; line-height: 1; }
.hc-annuaire-search button:hover { color: var(--hc-text-primary); background: var(--hc-bg); }

.hc-annuaire-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 8px; }

.hc-annuaire-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hc-text-secondary); margin: 18px 0 10px; }
.hc-annuaire-section-title i { color: var(--hc-green-deep); font-size: 16px; }
.hc-annuaire-section-title span { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--hc-green-tint); color: var(--hc-green-deep); font-size: 11px; font-weight: 700; }

.hc-vignette { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--hc-paper); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-md); transition: border-color .12s, box-shadow .12s; }
.hc-vignette:hover { border-color: var(--hc-border-strong); box-shadow: var(--hc-shadow-card); }
.hc-vignette__head { display: flex; align-items: center; gap: 10px; }
.hc-vignette__avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--hc-navy); color: #fff; font-size: 17px; font-weight: 700; text-transform: uppercase; }
.hc-vignette__avatar--square { border-radius: 10px; background: var(--hc-green-tint); color: var(--hc-green-deep); font-size: 20px; }
.hc-vignette__ident { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-vignette__name { font-size: 14px; font-weight: 600; color: var(--hc-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-vignette__sub { font-size: 12px; color: var(--hc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-vignette__sub i { font-size: 12px; }
.hc-vignette__status { flex: 0 0 auto; align-self: flex-start; font-size: 11px; }
.hc-vignette__body { display: flex; flex-direction: column; gap: 6px; }
.hc-vignette__line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hc-text-secondary); min-width: 0; }
.hc-vignette__line > i { flex: 0 0 auto; color: var(--hc-text-muted); font-size: 15px; }
.hc-vignette__line a { color: var(--hc-text-primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-vignette__line a:hover { color: var(--hc-green-deep); text-decoration: underline; }
.hc-vignette__line--muted { color: var(--hc-text-muted); font-style: italic; }
.hc-vignette__keybox { position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; padding: 8px 32px 8px 10px; background: var(--hc-bg); border-radius: var(--hc-radius-md); }
.hc-vignette__keybox-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hc-text-muted); display: flex; align-items: center; gap: 5px; }
.hc-vignette__keybox-value { font-size: 13px; color: var(--hc-text-primary); }
.hc-vignette__keybox-value.is-empty { color: var(--hc-text-muted); font-style: italic; }
.hc-vignette__keybox-edit { position: absolute; top: 6px; right: 6px; }

@media (max-width: 575.98px) {
    .hc-annuaire-grid { grid-template-columns: 1fr; }
    .hc-annuaire-search { min-width: 0; width: 100%; }
}

/* ============================================================
   SUITE MULTI-APPLICATIFS — contexte d'app sidebar + badge "à venir"
   ============================================================ */
.hc-sidebar-app{display:flex;align-items:center;gap:11px;margin:6px 0 10px;padding:10px 12px;background:var(--hc-navy-2);border-radius:var(--hc-radius-md);}
.hc-sidebar-app__ico{width:34px;height:34px;border-radius:var(--hc-radius-sm);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--hc-navy-3);color:var(--hc-green);border:1px solid rgba(140,198,63,.25);}
.hc-sidebar-app__meta{display:flex;flex-direction:column;min-width:0;}
.hc-sidebar-app__name{font-size:13px;font-weight:600;color:#fff;line-height:1.2;}
.hc-sidebar-app__sub{font-size:11px;color:rgba(255,255,255,.5);line-height:1.2;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.leftside-menu .side-nav-link .hc-nav-soon{margin-left:auto;flex-shrink:0;min-width:auto;font-size:15px;color:rgba(255,255,255,.32);}
html[data-sidenav-size="condensed"] .leftside-menu .hc-sidebar-app{justify-content:center;padding:8px 0;background:transparent;}
html[data-sidenav-size="condensed"] .leftside-menu .hc-sidebar-app__meta{display:none !important;}

/* ============================================================
   MODULE DEMANDES INTERNES — classes spécifiques (di-*)
   ============================================================ */

/* Tokens manquants utilisés dans le module */
:root {
    --hc-green-50:               rgba(140, 198, 63, 0.08);
    --hc-surface-card:           #FFFFFF;
    --hc-border-subtle:          #EEECE6;
    --hc-text-link:              #2E6EA6;

    /* Status sémantiques étendus (backgrounds + bordures + textes) */
    --hc-status-ok-bg:           #F2F9E8;
    --hc-status-ok-border:       #C2E48D;
    --hc-status-ok-text:         #3E6B1B;
    --hc-status-danger-bg:       #FDF3F3;
    --hc-status-danger-border:   #F0B8B8;
    --hc-status-danger-text:     #8B2020;
    --hc-status-warning-bg:      #FFFBEF;
    --hc-status-warning-border:  #F5D9A0;
}

/* ── Sélecteur de type ── */
.di-type-card {
    cursor: pointer;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    transition: border-color 150ms, box-shadow 150ms;
}
.di-type-card:hover {
    border-color: var(--hc-green);
    box-shadow: var(--hc-shadow-hover);
}
.di-type-card:focus-visible {
    outline: 2px solid var(--hc-green);
    outline-offset: 2px;
}
.di-type-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--hc-green-50);
    border-radius: var(--hc-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.di-type-icon i { color: var(--hc-green); font-size: 20px; }
.di-type-label { font-size: 14px; font-weight: 600; color: var(--hc-text-primary); margin-bottom: 4px; }
.di-type-desc  { font-size: 13px; color: var(--hc-text-muted); line-height: 1.5; }

/* ── Bandeau montant max acompte ── */
.di-acompte-calcul {
    margin-top: 12px;
    border-radius: var(--hc-radius-md);
    padding: 10px 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.di-acompte-ok {
    background: var(--hc-status-ok-bg);
    border: 1px solid var(--hc-status-ok-border);
    color: var(--hc-status-ok-text);
    border-radius: var(--hc-radius-md);
    padding: 10px 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.di-acompte-ok i    { color: var(--hc-green); }
.di-acompte-exceed  {
    background: var(--hc-status-danger-bg);
    border: 1px solid var(--hc-status-danger-border);
    color: var(--hc-status-danger-text);
    border-radius: var(--hc-radius-md);
    padding: 10px 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.di-acompte-exceed i { color: var(--hc-status-danger); }
.di-acompte-hint     { margin-left: 4px; color: var(--hc-text-muted); font-size: 12px; }

/* ── Dropzone upload ── */
.di-dropzone {
    border: 2px dashed var(--hc-border-strong);
    border-radius: var(--hc-radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--hc-surface-card);
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
    text-align: center;
}
.di-dropzone:hover,
.di-dropzone.is-dragover {
    border-color: var(--hc-green);
    background: var(--hc-green-50);
}
.di-dropzone i            { font-size: 28px; color: var(--hc-text-muted); }
.di-dropzone-label        { font-size: 14px; font-weight: 500; color: var(--hc-text-primary); }
.di-dropzone-hint         { font-size: 13px; color: var(--hc-text-muted); }
.di-dropzone-browse       { background: none; border: none; color: var(--hc-text-link); cursor: pointer; text-decoration: underline; padding: 0; }
.di-dropzone-types        { font-size: 12px; color: var(--hc-text-muted); }

.di-file-list             { list-style: none; padding: 0; margin: 8px 0 0; }
.di-file-list li          { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--hc-border-subtle); font-size: 13px; }
.di-file-list li:last-child { border-bottom: none; }

/* ── Icône type dans record-hero ── */
.di-record-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--hc-green-50);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.di-record-icon i { color: var(--hc-green); font-size: 22px; }

/* ── Bloc validation ── */
.di-validation-card .hc-btn--danger {
    background: var(--hc-status-danger);
    border-color: var(--hc-status-danger);
    color: #fff;
}
.di-validation-card .hc-btn--danger:hover {
    background: #B83A3A;
    border-color: #B83A3A;
}

/* ── Note / commentaire dans la timeline ── */
.di-note-content {
    margin-top: 6px;
    background: var(--hc-surface-table-header, #F1F3F5);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-md);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--hc-text-secondary);
}

/* ── Cartes mobile listing ── */
.di-mobile-card {
    background: var(--hc-surface-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    padding: 12px;
    margin-bottom: 8px;
}
.di-mobile-card-header {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.di-mobile-card-date   { margin-left: auto; font-size: 12px; color: var(--hc-text-muted); }
.di-mobile-card-objet  { font-size: 14px; font-weight: 500; color: var(--hc-text-primary); margin-bottom: 10px; }
.di-mobile-card-footer { display: flex; align-items: center; justify-content: space-between; }

/* ── Autocomplete suggestions ── */
.di-autocomplete-list {
    position: absolute;
    z-index: 1000;
    background: var(--hc-paper);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    box-shadow: var(--hc-shadow-card);
    list-style: none;
    padding: 4px 0;
    margin: 2px 0 0;
    min-width: 200px;
    max-height: 220px;
    overflow-y: auto;
}
.di-autocomplete-list li {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--hc-text-primary);
}
.di-autocomplete-list li:hover { background: var(--hc-bg); }

/* ── Quill wrapper ── */
.di-quill-wrapper {
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    background: var(--hc-paper);
}
.di-quill-wrapper .ql-toolbar {
    border: none;
    border-bottom: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md) var(--hc-radius-md) 0 0;
}
.di-quill-wrapper .ql-container {
    border: none;
    border-radius: 0 0 var(--hc-radius-md) var(--hc-radius-md);
    font-family: var(--hc-font);
    font-size: 13px;
    min-height: 120px;
}

/* ── Responsive demandes internes ── */
@media (max-width: 767.98px) {
    .di-type-card .card-body { padding: 14px !important; }
    .di-type-label { font-size: 13px; }
    .di-type-desc  { font-size: 12px; }
    .di-type-icon  { width: 32px; height: 32px; }
    .di-type-icon i { font-size: 16px; }
    .di-acompte-calcul { font-size: 12px; }
    .di-validation-card .d-flex { flex-direction: column; }
    .di-validation-card .hc-btn { width: 100%; }
}

/* ── Autocomplete canonique (RCOMP-11) — bindAutocomplete ── */
.field-o2toit { position: relative; }
.hc-input.has-clear { padding-right: 34px; }
.field-input-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; display: none;
    align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer;
    color: var(--hc-text-muted, #7a8699); border-radius: 50%; padding: 0; line-height: 1;
}
.field-input-clear:hover { background: var(--hc-bg-subtle, #f0f2f5); color: var(--hc-text, #33404f); }
.field-suggestions {
    display: none; background: var(--hc-surface-card, #fff);
    border: 1px solid var(--hc-border, #e3e7ee); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 30, 50, .12); overflow-y: auto; padding: 4px;
}
.field-suggestions__item {
    padding: 8px 10px; font-size: 13px; color: var(--hc-text, #33404f);
    border-radius: 6px; cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.field-suggestions__item:hover,
.field-suggestions__item.is-active { background: var(--hc-green-50, #eef7e6); color: var(--hc-green, #4a7c2a); }
.field-suggestions__empty { padding: 10px; font-size: 13px; color: var(--hc-text-muted, #7a8699); text-align: center; }

/* ============================================================
   MON QUOTIDIEN RH — dashboard accueil app RH (qrh)
   ============================================================ */

/* Carte KPI cliquable (ouvre le drawer de détail) */
.hc-kpi--click { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.hc-kpi--click .hc-kpi__num { padding-right: 90px; } /* réserve la place du trend absolu (icône + texte) */
.hc-kpi--click:hover {
    border-color: var(--hc-green);
    box-shadow: var(--hc-shadow-hover);
    transform: translateY(-2px);
}

/* Répartition par type à l'intérieur d'une carte KPI */
.hc-kpi__split { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Drawer de détail KPI — plus large que le drawer filtres standard */
.hc-filter-drawer--wide { width: 560px; }

/* Ligne dense d'une liste dashboard (bloc absences, fragments du drawer) */
.hc-dash-list { display: flex; flex-direction: column; }
.hc-dash-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-sm);
    cursor: pointer;
}
.hc-dash-row:last-child { border-bottom: none; }
.hc-dash-row:hover { background: var(--hc-green-tint); }
.hc-dash-row__main { flex: 1; min-width: 0; }
.hc-dash-row__main .user-name,
.hc-dash-row__main .user-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-dash-row__meta { text-align: right; font-size: 12px; color: var(--hc-text-muted); white-space: nowrap; }

/* ============================================================
   TABLEAU DE BORD COMMUN — accueil suite (appels / planning / actualités)
   ============================================================ */

/* Variante compacte de la grille KPI (services d'appels entrants) */
.hc-kpi-grid--sm { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; margin-bottom: 0; }
.hc-kpi-grid--sm .hc-kpi { padding: 12px 14px; }
.hc-kpi-grid--sm .hc-kpi__num { font-size: 10px; letter-spacing: 0.1em; margin-bottom: 4px; }
.hc-kpi-grid--sm .hc-kpi--click .hc-kpi__num { padding-right: 24px; }
.hc-kpi-grid--sm .hc-kpi__value { font-size: 24px; margin-bottom: 2px; }
.hc-kpi-grid--sm .hc-kpi__value-unit { font-size: 12px; margin-left: 5px; }
.hc-kpi-grid--sm .hc-kpi__trend { top: 12px; right: 14px; }

/* ── Bloc Planning : mini calendrier mensuel + panneau du jour ─────────── */
.hc-planning { display: grid; grid-template-columns: 340px 1fr; gap: 26px; }
@media (max-width: 1199px) { .hc-planning { grid-template-columns: 1fr; gap: 18px; } }

.hc-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hc-cal__title { font-size: 14px; font-weight: 700; color: var(--hc-text-primary); text-transform: capitalize; }
.hc-cal__nav {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--hc-border); background: var(--hc-paper);
    color: var(--hc-text-secondary);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hc-cal__nav:hover { border-color: var(--hc-green); color: var(--hc-green-deep); background: var(--hc-green-tint); }
.hc-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hc-cal__dow { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--hc-text-muted); text-transform: uppercase; padding: 4px 0; }
.hc-cal__day {
    position: relative; aspect-ratio: 1 / 1;
    border: 1px solid transparent; border-radius: var(--hc-radius-sm);
    background: transparent; padding: 0;
    font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
    color: var(--hc-text-primary); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.hc-cal__day:hover { background: var(--hc-green-tint); border-color: var(--hc-border); }
.hc-cal__day.is-out { color: var(--hc-text-muted); opacity: 0.45; }
.hc-cal__day.is-today { border-color: var(--hc-green); font-weight: 700; }
.hc-cal__day.is-active { background: var(--hc-navy); border-color: var(--hc-navy); color: #fff; font-weight: 700; }
.hc-cal__dots { display: flex; gap: 3px; height: 5px; }
.hc-cal__dot { width: 5px; height: 5px; border-radius: 50%; }
.hc-cal__dot--abs { background: var(--hc-status-warning); }
.hc-cal__dot--int { background: var(--hc-status-info); }
.hc-cal__dot--rdv { background: var(--hc-green); }
.hc-cal__day.is-active .hc-cal__dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75); }
.hc-cal__legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 11px; color: var(--hc-text-secondary); }
.hc-cal__legend span { display: inline-flex; align-items: center; gap: 5px; }

.hc-planning-day__title { font-size: 14px; font-weight: 700; color: var(--hc-text-primary); margin-bottom: 10px; text-transform: capitalize; }
.hc-planning-section { margin-bottom: 14px; }
.hc-planning-section:last-child { margin-bottom: 0; }
.hc-planning-section__head {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--hc-text-secondary);
    padding-bottom: 6px; border-bottom: 1px solid var(--hc-border); margin-bottom: 2px;
}
.hc-planning-section__head i { font-size: 14px; }
.hc-planning-section__head .hc-badge { margin-left: auto; }
.hc-planning-empty { font-size: 12px; color: var(--hc-text-muted); padding: 8px 6px; }

/* ── Bloc Actualités : mur de publications + commentaires ─────────────── */
.hc-actu-feed { display: flex; flex-direction: column; gap: 14px; }
.hc-actu { border: 1px solid var(--hc-border); border-radius: var(--hc-radius-lg); background: var(--hc-paper); padding: 14px 16px; }
.hc-actu__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.hc-actu__head-main { flex: 1; min-width: 0; }
.hc-actu__title { font-size: 14px; font-weight: 700; color: var(--hc-text-primary); line-height: 1.3; }
.hc-actu__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--hc-text-muted); margin-top: 3px; }
.hc-actu__type {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    color: var(--hc-green-deep); background: var(--hc-green-tint);
    border-radius: 999px; padding: 3px 9px;
}
.hc-actu__text { font-size: 13px; line-height: 1.55; color: var(--hc-text-secondary); overflow-wrap: break-word; }
.hc-actu__comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hc-border); display: flex; flex-direction: column; gap: 8px; }
.hc-comment { display: flex; gap: 8px; align-items: flex-start; }
.hc-comment__bubble { flex: 1; min-width: 0; background: var(--hc-bg); border-radius: 12px; padding: 8px 12px; }
.hc-comment__author { font-size: 12px; font-weight: 700; color: var(--hc-text-primary); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.hc-comment__date { font-size: 10px; font-weight: 400; color: var(--hc-text-muted); }
.hc-comment__text { font-size: 12.5px; color: var(--hc-text-secondary); line-height: 1.45; overflow-wrap: break-word; }
.hc-comment-more { align-self: flex-start; background: none; border: none; color: var(--hc-text-link); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.hc-comment-more:hover { text-decoration: underline; }
.hc-comment-form { display: flex; gap: 8px; align-items: center; }
.hc-comment-form .hc-input { height: 34px; font-size: 12.5px; border-radius: 999px; flex: 1; }
.hc-comment-send {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
    border: none; background: var(--hc-green); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hc-comment-send:hover { background: var(--hc-green-deep); }

/* Composeur de publication (visible pour les ayants droit uniquement) */
.hc-actu-composer { border: 1px dashed var(--hc-border-strong); border-radius: var(--hc-radius-lg); background: var(--hc-bg); padding: 12px 14px; display: none; }
.hc-actu-composer.is-open { display: block; }

/* Pièces jointes existantes en mode édition (retirables) */
.hc-actu-existing { display: flex; flex-direction: column; gap: 6px; }
.hc-actu-existing__item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border: 1px solid var(--hc-border); border-radius: var(--hc-radius-md);
    background: var(--hc-paper); font-size: 12.5px; color: var(--hc-text-primary);
}
.hc-actu-existing__item > i:first-child { color: var(--hc-green-deep); flex: 0 0 auto; }
.hc-actu-existing__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-actu-existing__item.is-removed { opacity: 0.55; }
.hc-actu-existing__item.is-removed .hc-actu-existing__name { text-decoration: line-through; }
.hc-actu-existing__remove { border: none; background: none; color: var(--hc-text-muted); cursor: pointer; padding: 2px; line-height: 1; flex: 0 0 auto; }
.hc-actu-existing__remove:hover { color: var(--hc-status-danger, #c0392b); }
.hc-actu-existing__item.is-removed .hc-actu-existing__remove { color: var(--hc-green-deep); }

/* Champ « joindre un fichier » du composeur */
.hc-actu-file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hc-actu-file__btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--hc-text-link); cursor: pointer;
    padding: 6px 10px; border: 1px solid var(--hc-border-strong);
    border-radius: var(--hc-radius-md); background: var(--hc-paper);
}
.hc-actu-file__btn:hover { background: var(--hc-green-tint); border-color: var(--hc-green); }
.hc-actu-file__name { font-size: 12.5px; color: var(--hc-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.hc-actu-file__clear { border: none; background: none; color: var(--hc-text-muted); cursor: pointer; padding: 2px; line-height: 1; }
.hc-actu-file__clear:hover { color: var(--hc-status-danger, #c0392b); }
.hc-actu-file__hint { font-size: 11px; color: var(--hc-text-muted); margin: 6px 0 0; }

/* Média (photo) et pièce jointe téléchargeable du mur */
.hc-actu__media { margin-top: 10px; }
.hc-actu__media img { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--hc-radius-md); border: 1px solid var(--hc-border); cursor: zoom-in; }

/* Carrousel de photos (≥ 2 images sur une même publication) */
.hc-actu__carousel { position: relative; margin-top: 10px; border-radius: var(--hc-radius-md); overflow: hidden; border: 1px solid var(--hc-border); background: #0b1120; }
.hc-actu__carousel-track { position: relative; line-height: 0; }
.hc-actu__carousel-slide { display: none; width: 100%; height: 320px; object-fit: cover; cursor: zoom-in; }
.hc-actu__carousel-slide.is-active { display: block; }
.hc-actu__carousel-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(0, 0, 0, 0.45); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 22px; padding: 0;
}
.hc-actu__carousel-nav:hover { background: rgba(0, 0, 0, 0.72); }
.hc-actu__carousel-nav--prev { left: 8px; }
.hc-actu__carousel-nav--next { right: 8px; }
.hc-actu__carousel-count {
    position: absolute; top: 8px; right: 10px;
    background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; font-weight: 600;
    padding: 2px 9px; border-radius: 999px;
}
.hc-actu__carousel-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.hc-actu__carousel-dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255, 255, 255, 0.5); }
.hc-actu__carousel-dot.is-active { background: #fff; }

/* Lightbox : agrandissement plein écran d'une photo du mur */
.hc-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.88); }
.hc-lightbox.is-open { display: flex; }
.hc-lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: var(--hc-radius-md); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
.hc-lightbox__close,
.hc-lightbox__nav {
    position: absolute; border: none; cursor: pointer; color: #fff;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.hc-lightbox__close:hover,
.hc-lightbox__nav:hover { background: rgba(255, 255, 255, 0.26); }
.hc-lightbox__close { top: 16px; right: 20px; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; }
.hc-lightbox__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; font-size: 28px; }
.hc-lightbox__nav--prev { left: 20px; }
.hc-lightbox__nav--next { right: 20px; }
.hc-lightbox__count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13px; font-weight: 600; }

/* Liste des pièces jointes téléchargeables */
.hc-actu__files { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; align-items: flex-start; }
.hc-actu__file {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    padding: 8px 12px; border: 1px solid var(--hc-border); border-radius: var(--hc-radius-md);
    background: var(--hc-bg); text-decoration: none; color: var(--hc-text-primary); font-size: 12.5px;
}
.hc-actu__file:hover { background: var(--hc-green-tint); border-color: var(--hc-green); }
.hc-actu__file > i:first-child { font-size: 18px; color: var(--hc-green-deep); flex: 0 0 auto; }
.hc-actu__file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-actu__file-size { color: var(--hc-text-muted); font-size: 11px; flex: 0 0 auto; }
.hc-actu__file > i:last-child { color: var(--hc-text-muted); flex: 0 0 auto; }

/* ============================================================
   MODULE TÂCHES — Kanban, carte tâche, chips matrice/pôle,
   drawer de détail, fil de notes (§TACHE-02/05/07)
   ============================================================ */

/* ── Chips matrice / pôle (au-dessus de la carte) ────────────────── */
.hc-chip-matrice,
.hc-chip-pole {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1;
}
.hc-chip-matrice i, .hc-chip-pole i { font-size: 12px; }
/* Couleur de la matrice : pilotée par variable inline --chip-color (posée par le futur PHP depuis tache_matrice) */
.hc-chip-matrice {
    background: color-mix(in srgb, var(--chip-color, var(--hc-status-info)) 14%, #fff);
    color: var(--chip-color, var(--hc-status-info));
}
.hc-chip-pole {
    background: var(--hc-panel);
    color: var(--hc-text-secondary);
    border: 1px solid var(--hc-border);
}

/* ── Board Kanban : 3 colonnes ────────────────────────────────────── */
.hc-kanban-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 16px;
    align-items: flex-start;
}
@media (max-width: 991.98px) {
    .hc-kanban-board {
        grid-template-columns: 100%;
        overflow-x: visible;
    }
}

.hc-kanban-col {
    background: var(--hc-panel);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    max-height: calc(100vh - 260px);
}
.hc-kanban-col__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hc-border);
    flex-shrink: 0;
}
.hc-kanban-col__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hc-kanban-col[data-statut="0"] .hc-kanban-col__dot { background: var(--hc-text-muted); }
.hc-kanban-col[data-statut="1"] .hc-kanban-col__dot { background: var(--hc-status-info); }
.hc-kanban-col[data-statut="2"] .hc-kanban-col__dot { background: var(--hc-green); }
.hc-kanban-col__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--hc-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.hc-kanban-col__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--hc-bg);
    color: var(--hc-text-secondary);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.hc-kanban-col__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background-color .15s ease;
}
/* Zone déposable — feedback visuel pendant le drag */
.hc-kanban-col__body.is-dragover {
    background: var(--hc-green-tint);
    outline: 2px dashed var(--hc-green);
    outline-offset: -4px;
    border-radius: var(--hc-radius-md);
}
.hc-kanban-col__empty {
    font-size: 12px;
    color: var(--hc-text-muted);
    text-align: center;
    padding: 24px 8px;
    border: 1px dashed var(--hc-border);
    border-radius: var(--hc-radius-md);
}

/* ── Carte tâche (déplaçable) ─────────────────────────────────────── */
.hc-task-card {
    background: var(--hc-paper);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    padding: 10px 12px;
    cursor: grab;
    box-shadow: var(--hc-shadow-sm);
    transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease, opacity .12s ease;
}
.hc-task-card:hover {
    border-color: var(--hc-border-strong);
    box-shadow: var(--hc-shadow-card);
}
.hc-task-card:active { cursor: grabbing; }
/* Élément en cours de déplacement (posé par le JS au dragstart) */
.hc-task-card.is-dragging {
    opacity: 0.45;
    transform: scale(0.98);
}
/* Carte terminée : libellé atténué/barré (TACHE-02) */
.hc-task-card.is-done .hc-task-card__title {
    color: var(--hc-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--hc-border-strong);
}
.hc-task-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 7px;
}
.hc-task-card__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--hc-text-primary);
    margin: 0 0 9px 0;
    overflow-wrap: break-word;
}
/* Objet concerné (ex. salarié embauché) — distinct du responsable qui traite la tâche (TACHE-01 objet_table/objet_id) */
.hc-task-card__objet {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--hc-status-info);
    font-weight: 600;
    margin: -3px 0 9px 0;
    overflow-wrap: break-word;
}
.hc-task-card__objet i { font-size: 13px; flex-shrink: 0; }
/* Ligne "Concerné" du drawer : lien cliquable vers la fiche, distinct visuellement de la ligne Responsable */
.hc-task-drawer-meta__row a.hc-task-drawer-meta__link {
    color: var(--hc-status-info);
    font-weight: 600;
    text-decoration: none;
}
.hc-task-drawer-meta__row a.hc-task-drawer-meta__link:hover { text-decoration: underline; }
.hc-task-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.hc-task-card__due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--hc-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.hc-task-card__due i { font-size: 13px; }
/* Retard = date dépassée et tache_statut <> 2 (TACHE-02) — jamais sur .is-done */
.hc-task-card__due.is-late { color: var(--hc-status-danger); font-weight: 600; }
.hc-task-card__footer-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
}
.hc-task-card__notes-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--hc-text-muted);
    flex-shrink: 0;
}
.hc-task-card__notes-count i { font-size: 13px; }
/* Responsable désigné : avatar + nom lisible directement sur la carte (distinct du "concerné" en bleu info) */
.hc-task-card__resp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.hc-task-card__resp-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hc-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Tâche en pool (sans responsable) : avatar remplacé par un badge neutre */
.hc-task-card__pool-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hc-bg);
    border: 1px dashed var(--hc-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hc-text-muted);
    font-size: 12px;
    flex-shrink: 0;
}
/* Badge "Retard" en coin de carte */
.hc-task-card__retard-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--hc-status-danger-tint);
    color: var(--hc-status-danger);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── Toolbar tâches (titre + Nouvelle tâche + filtres) ────────────── */
.hc-task-toolbar-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.hc-task-toolbar-filters .hc-select {
    height: 34px;
    font-size: 12.5px;
    width: auto;
    min-width: 150px;
}

/* ── Drawer détail tâche : contenu spécifique (coquille = .hc-filter-drawer) */
.hc-task-drawer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.hc-task-drawer-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--hc-text-primary);
    line-height: 1.3;
    margin: 0 0 14px 0;
}
.hc-task-drawer-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--hc-panel);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    margin-bottom: 16px;
}
.hc-task-drawer-meta__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--hc-text-secondary);
}
.hc-task-drawer-meta__row i { font-size: 15px; color: var(--hc-text-muted); flex-shrink: 0; }
.hc-task-drawer-meta__row b { color: var(--hc-text-primary); font-weight: 600; }
.hc-task-drawer-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hc-text-muted);
    margin: 0 0 8px 0;
}
.hc-task-drawer-desc {
    font-size: 13px;
    color: var(--hc-text-secondary);
    line-height: 1.55;
    margin: 0 0 20px 0;
    overflow-wrap: break-word;
}
.hc-task-drawer-notes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}