/* ============================================================
   Bravaux — Custom Brand Theme
   Source de vérité CSS (copies déployées : {ERP,ADV,TECHNIQUE}/PUBLIC/assets/css/)
   Direction validée : "Contraste" — sidebar Noir Bravaux + contenu clair,
   primaire Bleu Bravaux, blocs à angles arrondis, accent d'application en
   identification seulement. Sora (titres) + Plus Jakarta Sans (corps).

   Le préfixe `hc-` est l'espace de nom technique historique du design system.
   Il n'a AUCUNE signification marque (décision D1 du rebranding 2026-09) :
   331 classes et 116 fichiers PHP le portent, on ne le renomme pas.

   Couleurs : docs/project/brand-identity.md §1. Ne jamais pipetter le PDF de la
   charte, qui rend les Pantone en CMJN converti (#00abb6, #f37b83, #ffc749) —
   seules les valeurs HTML des pages 14-15 font foi.
   ============================================================

   Anti-patterns interdits :
   - AP-01 : accent d'app (corail `#d6828e`, jaune `#edd257`) jamais en fond de
             bouton ni de badge, jamais de texte blanc dessus (2,8:1 et 1,5:1).
             Texte Noir Bravaux, comme la charte le fait p. 15.
   - AP-02 : warning ≠ Jaune Bravaux. Le warning est l'ambre `#E08A00`, toujours
             accompagné de son icône — sans quoi, dans l'app TECHNIQUE, il se
             confond avec la couleur d'identification.
   - AP-03 : pas de `btn-primary` ni `form-control` ni `badge text-bg-*`
             Bootstrap génériques, pas de bleu Bootstrap `#0D6EFD`, pas de teal
             Hyper `--ct-primary` par défaut — uniquement les classes `hc-*`.
   - AP-04 : pas de clip-path / coins coupés / coins angulaires — border-radius
             only. Le coin « vague » de la charte est réservé au login et aux
             états vides.
   - AP-05 : Sora pour les titres, Plus Jakarta Sans pour le corps. Aucune
             troisième famille, aucune mono décorative.
   - AP-06 : pas de jargon technique visible utilisateur (`//`, `node:`,
             `BUILD:`, `MOD-001`, timestamps ISO, breadcrumbs `/erp/accueil`).
   - AP-07 : aucun gradient hors skeleton loader, aucune ombre lourde — les
             quatre tokens `--hc-shadow-*` sont la liste complète.
   - AP-08 : rayons 6 (badge) / 8 (bouton, input) / 12 (card, table, modale) /
             16 (hero, état vide) / pill. Jamais de rayon sur une cellule de
             tableau : seul le wrapper est arrondi.
   - AP-09 : `--hc-primary` interdit en texte sur fond clair (3,0:1) — c'est
             `--hc-primary-darker` qui porte le texte bleu (5,6:1).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
    /* — Familles typo — */
    --hc-font-title: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hc-font:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* — Charte Bravaux : valeurs HTML officielles (p. 14-15), ne jamais altérer — */
    --bv-bleu:   #24a2b3;   /* Pantone 320 C      — principale */
    --bv-noir:   #000000;   /* Pantone Black 3 C  — principale */
    --bv-ciel:   #b0cceb;   /* Pantone 291 C */
    --bv-rouge:  #ca4c40;   /* Pantone Warm Red C */
    --bv-creme:  #d2ccc7;   /* Pantone Warm Grey 2C */
    --bv-corail: #d6828e;   /* Pantone 1777 C     — famille STAFF */
    --bv-purple: #708cca;   /* Pantone 279 C */
    --bv-jaune:  #edd257;   /* Pantone 1225 C     — famille TECHNIQUE */

    /* — Primaire : états dérivés du Bleu Bravaux (hors charte) — */
    --hc-primary:        var(--bv-bleu);
    --hc-primary-deep:   #1D8A99;   /* hover de bouton, bouton sm */
    --hc-primary-darker: #177280;   /* texte bleu sur fond clair — 5,6:1 */
    --hc-primary-soft:   #6CC3CE;
    --hc-primary-tint:   rgba(36, 162, 179, 0.14);
    --hc-primary-50:     rgba(36, 162, 179, 0.08);

    /* — Encre : Noir Bravaux adouci pour les grands aplats d'écran — */
    --hc-ink:   #0B0C0E;   /* sidebar, hero login, backdrop */
    --hc-ink-2: #161719;   /* item nav actif, flyout condensed */
    --hc-ink-3: #202225;   /* hover, séparateur marqué */

    /* — Accent d'application : redéfini par html[data-app] en section 3 — */
    --hc-accent:      var(--bv-bleu);
    --hc-accent-tint: rgba(36, 162, 179, 0.16);
    --hc-app-logo:    url('../logo/bravaux-picto-bleu.svg');

    /* — Surfaces (neutre froid : la grège précédente était calibrée sur un navy) — */
    --hc-bg:         #F4F5F6;   /* fond principal */
    --hc-paper:      #FFFFFF;   /* cards et surfaces blanches */
    --hc-panel:      #FAFBFB;   /* thead, colonne figée, encart */
    --hc-panel-warm: var(--bv-creme);   /* encart secondaire ponctuel */

    /* — Texte — */
    --hc-text-primary:   #1A2230;
    --hc-text-secondary: #5B6E7D;
    --hc-text-muted:     #94A0AE;
    --hc-text-on-ink:    #FFFFFF;
    --hc-text-link:      var(--hc-primary-darker);

    /* — Bordures — */
    --hc-border:        #E3E5E8;
    --hc-border-strong: #C8CCD2;
    --hc-border-subtle: #EEF0F2;
    --hc-border-focus:  var(--hc-primary);
    --hc-surface-card:  #FFFFFF;

    /* — Statuts sémantiques —
       Le succès ne pointe PAS sur la primaire : le bleu est la couleur d'action,
       un badge « validé » bleu se lirait comme un lien. La charte n'a aucun vert,
       celui-ci est une couleur système assumée hors charte. */
    --hc-status-ok:             #2E9E6B;
    --hc-status-ok-tint:        rgba(46, 158, 107, 0.14);
    --hc-status-ok-bg:          #E6F5EE;
    --hc-status-ok-border:      #B7E3CE;
    --hc-status-ok-text:        #1B6B45;
    --hc-status-danger:         var(--bv-rouge);
    --hc-status-danger-tint:    rgba(202, 76, 64, 0.14);
    --hc-status-danger-bg:      #FBEEEC;
    --hc-status-danger-border:  #EFC4BF;
    --hc-status-danger-text:    #8E2C23;
    --hc-status-info:           var(--bv-purple);
    --hc-status-info-tint:      rgba(112, 140, 202, 0.16);
    --hc-status-info-bg:        #EDF1F9;
    --hc-status-info-border:    #C3CFE9;
    --hc-status-info-text:      #31477E;
    --hc-status-warning:        #E08A00;   /* ambre : jamais --bv-jaune, cf. AP-02 */
    --hc-status-warning-tint:   rgba(224, 138, 0, 0.16);
    --hc-status-warning-bg:     #FDF4E3;
    --hc-status-warning-border: #F2D5A3;
    --hc-status-warning-text:   #7A4B00;

    /* — Layout — */
    --hc-sidebar-w: 240px;
    --hc-topbar-h:  64px;

    /* — Rayons (charte p. 24 : « blocs aux angles arrondis ») — */
    --hc-radius-sm:   6px;      /* badge, puce */
    --hc-radius-md:   8px;      /* bouton, input, select */
    --hc-radius-lg:   12px;     /* card, wrapper de table, modale */
    --hc-radius-xl:   16px;     /* hero login, état vide */
    --hc-radius-pill: 9999px;   /* pill, onglet, avatar */

    /* — 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(11, 12, 14, 0.05);
    --hc-shadow-card:  0 2px 6px rgba(11, 12, 14, 0.06);
    --hc-shadow-hover: 0 10px 24px -12px rgba(11, 12, 14, 0.18);
    --hc-shadow-modal: 0 30px 80px -40px rgba(11, 12, 14, 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; }

/* Sora porte les titres, Plus Jakarta Sans tout le reste (AP-05). Sora est une
   géométrique large : excellente en titre, coûteuse en largeur dans une cellule. */
h1, h2, h3, h4 { font-family: var(--hc-font-title); }

/* ============================================================
   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-ink);
    --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-ink-2);
    /* RHYP-08 — override fond popup flyout condensed (par défaut bleu #727cf5 Hyper) */
    --ct-menu-condensed-link-bg:  var(--hc-ink-2);
}

/* Accent d'application — le shell pose data-app sur <html> depuis currentAppCode().
   Arbitrage utilisateur du 2026-09-17 : ADV porte le corail (STAFF), TECHNIQUE le
   jaune, et RH reste sur le Bleu Bravaux de la marque. RH n'a donc pas de règle
   ici : il hérite de l'accent bleu du :root, comme le login et les pages publiques
   (qui n'ont pas l'attribut du tout). */
html[data-app="adv"] {                      /* famille STAFF */
    --hc-accent:      var(--bv-corail);
    --hc-accent-tint: rgba(214, 130, 142, 0.18);
    --hc-app-logo:    url('../logo/bravaux-picto-corail.svg');
}
html[data-app="tech"] {                     /* famille TECHNIQUE */
    --hc-accent:      var(--bv-jaune);
    --hc-accent-tint: rgba(237, 210, 87, 0.22);
    --hc-app-logo:    url('../logo/bravaux-picto-jaune.svg');
}

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-ink) !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-ink-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-ink-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;
}
/* Wordmark de la charte : c'est un lettrage dessine, pas une police — on pose
   le SVG, on ne le recompose pas en Sora. Blanc sur sidebar noire (charte p. 4). */
.hc-brand-wordmark {
    display: block;
    height: 18px;
    width: auto;
}
/* Famille d'appartenance : STAFF ou TECHNIQUE — c'est le mot du client. */
.hc-sidebar-brand__sub {
    font-family: var(--hc-font-title);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.12em;
    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 encre clair + barre 3px et icône en couleur d'application (D6).
   Pas de fond teinté accent : sur du noir, un corail à 18 % rend un brun boueux. */
.leftside-menu .side-nav-link.active {
    background: var(--hc-ink-2) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}
.leftside-menu .side-nav-link.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--hc-accent);
    border-radius: 0 2px 2px 0;
}
.leftside-menu .side-nav-link.active i { color: var(--hc-accent) !important; }
.leftside-menu .side-nav-link.active .hc-nav-num { color: var(--hc-accent); }

/* 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-ink-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: var(--hc-ink-3);
    border-color: var(--hc-primary);
}

.hc-sidebar-user__avatar {
    width: 34px;
    height: 34px;
    background: var(--hc-primary);
    color: var(--hc-ink);
    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-primary);
    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-primary-tint);
    color: var(--hc-ink);
}
.hc-sidebar-user-menu .dropdown-item:hover i { color: var(--hc-primary-darker); }
.hc-sidebar-user-menu .dropdown-item:active,
.hc-sidebar-user-menu .dropdown-item:focus {
    background: var(--hc-primary-tint);
    color: var(--hc-ink);
}
.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: 3px solid var(--hc-accent) !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; }


/* ── Launcher d'applications (waffle) ─────────────────────────────────
   RCOMP-08 : le markup custom du chrome a son CSS ici, pas dans un <style>
   inline de inc/templates/applauncher.php. La pastille de famille (corail
   STAFF / jaune TECHNIQUE) est ce qui rend le mapping du client lisible
   d'un coup d'œil, sans dépendre de l'app dans laquelle on se trouve. */
.hc-waffle-btn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 38px; height: 38px; padding: 9px; border: 1px solid var(--hc-border); background: var(--hc-paper); border-radius: var(--hc-radius-md); cursor: pointer; flex-shrink: 0; }
.hc-waffle-btn span { width: 4px; height: 4px; border-radius: 1px; background: var(--hc-text-secondary); transition: background .15s; }
.hc-waffle-btn:hover span { background: var(--hc-primary-darker); }
.hc-waffle-btn.is-open { border-color: var(--hc-primary); background: var(--hc-primary-tint); }
.hc-waffle-btn.is-open span { background: var(--hc-primary-darker); }

.hc-applauncher-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(11, 12, 14, .45); opacity: 0; visibility: hidden; transition: opacity .18s; }
.hc-applauncher-backdrop.is-open { opacity: 1; visibility: visible; }
.hc-applauncher { position: fixed; z-index: 1101; top: 70px; left: calc(var(--hc-sidebar-w, 248px) + 16px); width: 420px; max-width: calc(100vw - 32px); background: var(--hc-paper); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-lg); box-shadow: var(--hc-shadow-modal); padding: 20px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top left; transition: opacity .18s, transform .18s; }
.hc-applauncher.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.hc-applauncher__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.hc-applauncher__title { font-family: var(--hc-font-title); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--hc-text-primary); }
.hc-applauncher__hint { font-size: 11px; color: var(--hc-text-muted); }
.hc-applauncher__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.hc-apptile { border: 1.5px solid var(--hc-border); border-radius: var(--hc-radius-lg); background: var(--hc-paper); padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 9px; transition: all .15s; position: relative; text-decoration: none; }
.hc-apptile:hover { border-color: var(--hc-primary); background: var(--hc-primary-tint); transform: translateY(-2px); }
.hc-apptile.is-current { border-color: var(--hc-accent); background: var(--hc-paper); }
.hc-apptile.is-current::after { content: "\eb80"; font-family: 'remixicon'; position: absolute; top: 7px; right: 8px; font-size: 14px; color: var(--hc-primary-darker); }
.hc-apptile.is-soon { opacity: .55; pointer-events: none; }
.hc-apptile__ico { width: 48px; height: 48px; border-radius: var(--hc-radius-md); display: flex; align-items: center; justify-content: center; font-size: 25px; background: var(--hc-ink); color: #fff; }
.hc-apptile__name { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.25; color: var(--hc-text-primary); }
.hc-apptile__count { font-size: 10px; color: var(--hc-text-muted); }
.hc-apptile__soon { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-text-muted); border: 1px solid var(--hc-border-strong); border-radius: var(--hc-radius-sm); padding: 1px 5px; }
/* Pastille de famille — posée en haut à gauche pour ne pas heurter le ✓ de l'app courante */
.hc-apptile__famille { position: absolute; top: 9px; left: 9px; width: 8px; height: 8px; border-radius: var(--hc-radius-pill); }
.hc-apptile__famille--staff { background: var(--bv-corail); }
.hc-apptile__famille--tech  { background: var(--bv-jaune); }

.hc-applauncher__divider { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hc-text-muted); }
.hc-applauncher__divider::before, .hc-applauncher__divider::after { content: ""; flex: 1; height: 1px; background: var(--hc-border); }
.hc-commonrow { display: flex; flex-direction: column; gap: 6px; }
.hc-commonlink { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--hc-radius-md); border: 1px solid transparent; transition: all .12s; text-decoration: none; }
.hc-commonlink:hover { background: var(--hc-bg); border-color: var(--hc-border); }
.hc-commonlink.is-soon { opacity: .55; pointer-events: none; }
.hc-commonlink i { width: 30px; height: 30px; border-radius: var(--hc-radius-sm); background: var(--hc-bg); color: var(--hc-text-secondary); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.hc-commonlink .cl-name { font-size: 13px; font-weight: 500; color: var(--hc-text-primary); }
.hc-commonlink .cl-soon { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-text-muted); }
.hc-applauncher__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hc-border); font-size: 11.5px; color: var(--hc-text-muted); display: flex; align-items: center; gap: 7px; }
.hc-applauncher__foot i { color: var(--hc-text-secondary); }
.hc-applauncher__legende { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 10.5px; color: var(--hc-text-muted); }
.hc-applauncher__legende span { display: inline-flex; align-items: center; gap: 5px; }
.hc-applauncher__legende i { width: 8px; height: 8px; border-radius: var(--hc-radius-pill); display: inline-block; }
@media (max-width: 991px) { .hc-applauncher { left: 8px; right: 8px; width: auto; } }

/* ============================================================
   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-primary-darker);
    margin-bottom: 10px;
}
.hc-hero__title {
    font-family: var(--hc-font-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-ink);
    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-primary);
}
.hc-hero__indicator-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hc-primary-soft);
    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-primary);
}
.hc-kpi--warning::before { background: var(--hc-status-warning); }
.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-family: var(--hc-font-title);
    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-primary-darker);
    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-primary);
    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-primary);
    color: var(--hc-ink);
}
.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-primary-darker);
    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-ink);
    color: #FFFFFF;
    position: relative;
}
.hc-profile__hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--hc-primary);
}
.hc-profile__avatar {
    width: 72px;
    height: 72px;
    background: var(--hc-primary);
    color: var(--hc-ink);
    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: var(--hc-primary-tint);
    color: var(--hc-primary-soft);
}
.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-primary-soft); }

.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-primary);
    color: var(--hc-ink);
    border-color: var(--hc-primary);
}
.hc-btn--primary:hover {
    background: var(--hc-primary-deep);
    border-color: var(--hc-primary-deep);
    color: var(--hc-ink);
}
.hc-btn--primary:active {
    background: var(--hc-primary-deep);
    border-color: var(--hc-primary-deep);
    color: var(--hc-ink);
    box-shadow: inset 0 2px 4px rgba(11, 12, 14, 0.22);
    transform: translateY(1px);
}

.hc-btn--secondary {
    background: #FFFFFF;
    color: var(--hc-text-primary);
    border-color: var(--hc-border-strong);
}
.hc-btn--secondary:hover {
    background: var(--hc-primary-tint);
    border-color: var(--hc-primary);
    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-text); }
.hc-badge--warning  { background: var(--hc-status-warning-tint); color: var(--hc-status-warning-text); }
.hc-badge--danger   { background: var(--hc-status-danger-tint);  color: var(--hc-status-danger-text); }
.hc-badge--info     { background: var(--hc-status-info-tint);    color: var(--hc-status-info-text); }
.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-primary);
    color: var(--hc-ink);
    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. MARQUE — pictogramme et signature
   ============================================================ */

/* Pictogramme « B » de la charte, en couleur d'application (sidebar) ou en bleu
   (login, pages publiques). `font-size: 0` neutralise tout texte résiduel dans
   le conteneur : la marque est portée par le fichier SVG, pas par une lettre.
   Zone de réserve = hauteur du B, portée ici par le padding, jamais par le SVG. */
.hc-brand-mark {
    display: inline-block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: 0;
    background: var(--hc-app-logo) center / contain no-repeat;
}

/* Signature de marque. Charte p. 6 : « Sur fond clair, elle est exclusivement
   utilisée en noir. Sur fond foncé ou coloré, elle reprend la couleur du
   logotype. Elle ne doit jamais être utilisée en blanc. » */
.hc-signature {
    font-family: var(--hc-font-title);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--bv-noir);
    margin: 0;
}
.hc-signature--sur-sombre { color: var(--bv-bleu); }

/* ============================================================
   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-xl);
    overflow: hidden;
}

.hc-login-hero {
    position: relative;
    background: var(--hc-ink);
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #FFFFFF;
}
.hc-login-hero > * { position: relative; z-index: 1; }

.hc-login-hero__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* Logotype version 2 (picto + mot), bleu sur Noir Bravaux — charte p. 7.
   La zone de reserve (= hauteur du B) est portee par le padding du hero. */
.hc-login-hero__logo {
    display: block;
    height: 76px;
    width: auto;
}

.hc-login-hero__editorial { max-width: 520px; }
.hc-login-hero__rule {
    width: 64px;
    height: 3px;
    background: var(--bv-bleu);
    margin-bottom: 22px;
    border-radius: 2px;
}
/* Signature de marque : Sora 600 capitales, interlettrage large, en Bleu
   Bravaux sur fond sombre — « Elle ne doit jamais etre utilisee en blanc »
   (charte p. 6). Les proprietes typo viennent de .hc-signature. */
.hc-login-hero__signature {
    font-size: 26px;
    line-height: 1.35;
    margin: 0 0 18px;
    max-width: 9em;
}
.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-family: var(--hc-font-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-primary);
    box-shadow: 0 0 0 3px var(--hc-primary-tint);
}
.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-primary);
    color: var(--hc-ink);
    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-primary-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-status-info-bg);
    border-color: var(--hc-status-info-border);
    color: var(--hc-status-info-text);
}

/* 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__signature { font-size: 21px; }
    .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-ink-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(11, 12, 14, 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-primary);
}

/* ── Page title / toolbar listing ────────────────────────────────── */
.page-title-hc {
    font-family: var(--hc-font-title);
    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-primary);
    box-shadow: 0 0 0 3px var(--hc-primary-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: var(--hc-radius-pill);
    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-ink);
    border-color: var(--hc-ink);
    color: #fff;
}
.pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--hc-radius-pill);
    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-primary);
    color: var(--hc-ink);
}

/* ── 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(11, 12, 14, 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-primary);
    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-primary-tint); }
.hc-table a { color: var(--hc-primary-darker); 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-primary-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-primary-tint); color: var(--hc-ink); }
.hc-colpicker-item input { accent-color: var(--hc-primary-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-primary-darker); }

/* 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-primary-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-primary); }
.hc-table thead th.is-sorted-asc  .sort-icon,
.hc-table thead th.is-sorted-desc .sort-icon { opacity: 1; color: var(--hc-primary-darker); }

/* 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: var(--bv-noir);
    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: var(--bv-bleu); }
.avatar-hc.color-2 { background: var(--bv-corail); }
.avatar-hc.color-3 { background: var(--bv-jaune); }
.avatar-hc.color-4 { background: var(--bv-purple); }
.avatar-hc.color-5 { background: var(--bv-ciel); }
.avatar-hc.color-6 { background: var(--bv-creme); }
.avatar-hc.color-7 { background: var(--bv-rouge); }
.avatar-hc.color-8 { background: var(--hc-primary-soft); }

/* 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-ink); border-color: var(--hc-ink); 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;
    margin-top: 14px;
    border-bottom: 1px solid var(--hc-border);
}
.hc-form-section-header i { color: var(--hc-primary-darker); 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-primary);
    box-shadow: 0 0 0 3px var(--hc-primary-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-ink);
    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-family: var(--hc-font-title); 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-ink); border-bottom-color: var(--hc-primary); }
.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-panel);
    color: var(--hc-text-muted);
}
.hc-piece-row.is-uploaded .hc-piece-icon {
    background: var(--hc-primary-tint);
    color: var(--hc-primary-darker);
}
.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-panel);
    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-primary-tint);
    border-color: var(--hc-primary);
    color: var(--hc-primary-darker);
}
.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-primary);
    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; }
}

/* Maître-détail de paramétrage (matrices de tâches, pôles & membres) — rail de sélection
   étroit + détail sur tout le reste. .hc-grid-synthese (60/40) était inadapté ici : le rail
   ne porte qu'un libellé, et lui donner 60 % de la largeur écrasait le formulaire de saisie
   du détail (7 champs qui tombaient à ~150 px chacun). */
.hc-param-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 18px;
    align-items: start;
}
.hc-param-layout > .hc-stack { min-width: 0; }
.hc-param-rail {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
@media (max-width: 991.98px) {
    .hc-param-layout { grid-template-columns: 1fr; }
    .hc-param-rail { position: static; max-height: 320px; }
}

/* ════════════════════════════════════════════════════════════════════
   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-primary-tint); color: var(--hc-text-primary); font-weight: 600; }
.hc-fm-tree-link i { font-size: 16px; color: var(--hc-primary); 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-primary); }
.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(11, 12, 14, 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; }
}

/* ── Encadré « Générer un document » (modèles de document, onglet Documents) ── */
.hc-fm-gen {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--hc-paper);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.hc-fm-gen-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--hc-radius-md);
    background: var(--hc-primary-tint);
    color: var(--hc-primary-darker);
    font-size: 20px;
}
.hc-fm-gen-text { min-width: 0; }
.hc-fm-gen-title { font-size: 13px; font-weight: 700; color: var(--hc-text-primary); }
.hc-fm-gen-desc { font-size: 12px; color: var(--hc-text-muted); margin: 1px 0 0; }
.hc-fm-gen-controls {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.hc-fm-gen-controls .hc-select { min-width: 260px; }
@media (max-width: 767.98px) {
    .hc-fm-gen { flex-wrap: wrap; }
    .hc-fm-gen-controls { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; }
    .hc-fm-gen-controls .hc-select { min-width: 0; }
}

/* Pastille d'échéance dans le listing de fichiers */
.hc-fm-echeance { margin-left: 6px; vertical-align: middle; }

/* ════════════════════════════════════════════════════════════════════
   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-primary); flex-shrink: 0; margin-top: 1px; }
.hc-notif-item.is-unread { background: var(--hc-primary-tint); }
.hc-notif-item.is-unread:hover { background: var(--hc-primary-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-primary); box-shadow: 0 0 0 3px var(--hc-primary-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-primary-darker); 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-primary-tint); color: var(--hc-primary-darker); 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-ink); color: #fff; font-size: 17px; font-weight: 700; text-transform: uppercase; }
.hc-vignette__avatar--square { border-radius: 10px; background: var(--hc-primary-tint); color: var(--hc-primary-darker); 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-primary-darker); 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-ink-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-ink-3);color:var(--hc-accent);border:1px solid var(--hc-accent-tint);}
.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-*)
   ============================================================ */

/* ── 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-primary);
    box-shadow: var(--hc-shadow-hover);
}
.di-type-card:focus-visible {
    outline: 2px solid var(--hc-primary);
    outline-offset: 2px;
}
.di-type-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--hc-primary-50);
    border-radius: var(--hc-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.di-type-icon i { color: var(--hc-primary); 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-primary); }
.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-primary);
    background: var(--hc-primary-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-primary-50);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.di-record-icon i { color: var(--hc-primary); 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-panel);
    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); color: var(--hc-text-primary); }
.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-primary);
    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-primary-50); color: var(--hc-primary); }
.field-suggestions__empty { padding: 10px; font-size: 13px; color: var(--hc-text-muted, #7a8699); text-align: center; }

/* RCOMP-11 — chevron déclencheur d'autocomplete (injecté par window.bindAutocomplete), style « liste
   déroulante ». Toujours visible à droite ; la croix d'effacement, quand présente, se place à sa gauche. */
.field-o2toit .hc-input, .field-o2toit .form-control { padding-right: 34px; }
.field-o2toit .hc-input.has-clear, .field-o2toit .form-control.has-clear { padding-right: 58px; }
.field-o2toit .field-input-clear { right: 32px; }
.field-autocomplete-trigger {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer; padding: 0; line-height: 1;
    font-size: 18px; color: var(--hc-text-muted, #7a8699); border-radius: 6px;
}
.field-autocomplete-trigger:hover { background: var(--hc-bg); color: var(--hc-text-primary); }

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

/* Drawer presque pleine page — génération de document (éditeur du texte final) */
.hc-filter-drawer--xwide { width: min(1180px, 96vw); max-width: 96vw; }

/* 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-primary-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-primary); color: var(--hc-primary-darker); background: var(--hc-primary-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-primary-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-primary); font-weight: 700; }
.hc-cal__day.is-active { background: var(--hc-ink); border-color: var(--hc-ink); 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-primary); }
.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-primary-darker); background: var(--hc-primary-tint);
    border-radius: var(--hc-radius-pill); 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: var(--hc-radius-pill); flex: 1; }
.hc-comment-send {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
    border: none; background: var(--hc-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hc-comment-send:hover { background: var(--hc-primary-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-primary-darker); 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-primary-darker); }

/* 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-primary-tint); border-color: var(--hc-primary); }
.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: var(--hc-radius-pill);
}
.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-primary-tint); border-color: var(--hc-primary); }
.hc-actu__file > i:first-child { font-size: 18px; color: var(--hc-primary-darker); 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: var(--hc-radius-pill);
    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-primary); }
.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: var(--hc-radius-pill);
    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-primary-tint);
    outline: 2px dashed var(--hc-primary);
    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: var(--hc-radius-pill);
    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;
}

/* ============================================================
   QUICK ADD FAB — bouton flottant + speed-dial (RCOMP-10 #11 / design-system §7.11)
   Raccourci global de saisie (app RH). Vert marque, croix par rotation à l'ouverture,
   ombre multi-couches (exception §3 documentée). z-index sous les overlays (backdrop 1050).
   ============================================================ */
.hc-quick-add {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    /* Le menu masqué (visibility:hidden) occupe l'espace et étire la boîte du
       wrapper vers le haut : sans ceci, cette zone fantôme intercepte les clics
       du bouton Enregistrer situé dessous. On ne capte que sur le toggle + items. */
    pointer-events: none;
}

/* Menu des actions (déployé vers le haut) */
.hc-quick-add__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.hc-quick-add.is-open .hc-quick-add__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Pilule d'action */
.hc-quick-add__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px 0 10px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-pill);
    background: var(--hc-paper);
    color: var(--hc-text-primary);
    font-family: var(--hc-font);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: var(--hc-shadow-hover);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.hc-quick-add__item:hover {
    background: var(--hc-primary-tint);
    border-color: var(--hc-primary);
    transform: translateX(-2px);
}
.hc-quick-add__item-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--hc-ink);
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

/* Bouton principal (toggle rond) */
.hc-quick-add__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--hc-primary);
    color: var(--hc-ink);
    font-size: 28px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 6px 16px rgba(11, 12, 14, 0.24), 0 2px 6px rgba(11, 12, 14, 0.16);
    transition: background 0.18s, color 0.18s;
}
.hc-quick-add__toggle:hover { background: var(--hc-primary-deep); color: #fff; }
.hc-quick-add__toggle i { transition: transform 0.25s ease; line-height: 1; }
.hc-quick-add.is-open .hc-quick-add__toggle { background: var(--hc-ink); color: #fff; }
.hc-quick-add.is-open .hc-quick-add__toggle i { transform: rotate(45deg); }

/* Le FAB flotte en bas-droite (fixed, 56px + bottom 24px) et recouvrait la barre
   d'action (Enregistrer) en bas des formulaires. On réserve l'espace bas de la zone
   de contenu pour qu'elle reste toujours cliquable au-dessus du FAB. */
.content { padding-bottom: 100px !important; }

@media (max-width: 575.98px) {
    .hc-quick-add { right: 16px; bottom: 16px; }
    .hc-quick-add__toggle { width: 52px; height: 52px; font-size: 26px; }
    .content { padding-bottom: 88px !important; }   /* FAB réduit : 52px + bottom 16px */
}