:root{
  color-scheme:light;
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#EAEEF4; --surface-3:#F7F8FB;
  --border:#DCE3EC; --border-strong:#C7D0DD;
  --text:#151C29; --text-2:#4B5768; --text-muted:#8993A4;
  --accent:#4A3AA7; --accent-strong:#372C80; --accent-soft:#ECE9F9; --accent-ink:#FFFFFF;
  --accent-2:#7A4FC9;
  --ntl:#2A78D6; --ntl-soft:#E2EDFA;
  --gpi:#1BAF7A; --gpi-soft:#DFF6ED;
  --tek:#EB6834; --tek-soft:#FCE7DD;
  --sdb:#B6871A; --sdb-soft:#F3ECDA;
  --homme:#4A3AA7; --femme:#D5518E;
  --good:#0CA30C; --warn:#B9770E; --crit:#D03B3B; --crit-soft:#FBE7E7;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.06);
  --shadow-lg:0 8px 24px rgba(16,24,40,.10),0 2px 6px rgba(16,24,40,.06);
  --topbar-glass:rgba(255,255,255,.78);
  --aurora-1:rgba(74,58,167,.10); --aurora-2:rgba(27,175,122,.09); --aurora-3:rgba(235,104,52,.08);
  --scrollbar-thumb:#C7D0DD; --scrollbar-track:transparent;
  --font-display:'Sora',ui-sans-serif,'Segoe UI',sans-serif;
  --font-body:'IBM Plex Sans',ui-sans-serif,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B0F17; --surface:#141B29; --surface-2:#1A2233; --surface-3:#10161F;
    --border:#28324a; --border-strong:#3A465B;
    --text:#EDF1F7; --text-2:#AEB7C6; --text-muted:#78859A;
    --accent:#A79CF5; --accent-strong:#C3BAF9; --accent-soft:rgba(167,156,245,.16); --accent-ink:#161029;
    --accent-2:#7A6EE8;
    --ntl:#69A6EE; --ntl-soft:rgba(105,166,238,.15);
    --gpi:#37D69B; --gpi-soft:rgba(55,214,155,.14);
    --tek:#F4996A; --tek-soft:rgba(244,153,106,.14);
    --sdb:#E0B44A; --sdb-soft:rgba(224,180,74,.15);
    --homme:#A79CF5; --femme:#E88CBB;
    --good:#3ED67E; --warn:#EFB44E; --crit:#F0797B; --crit-soft:rgba(240,121,123,.15);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.35);
    --shadow-lg:0 14px 34px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.3);
    --topbar-glass:rgba(20,27,41,.72);
    --aurora-1:rgba(167,156,245,.14); --aurora-2:rgba(55,214,155,.10); --aurora-3:rgba(244,153,106,.08);
    --scrollbar-thumb:#324058; --scrollbar-track:transparent;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B0F17; --surface:#141B29; --surface-2:#1A2233; --surface-3:#10161F;
  --border:#28324a; --border-strong:#3A465B;
  --text:#EDF1F7; --text-2:#AEB7C6; --text-muted:#78859A;
  --accent:#A79CF5; --accent-strong:#C3BAF9; --accent-soft:rgba(167,156,245,.16); --accent-ink:#161029;
  --accent-2:#7A6EE8;
  --ntl:#69A6EE; --ntl-soft:rgba(105,166,238,.15);
  --gpi:#37D69B; --gpi-soft:rgba(55,214,155,.14);
  --tek:#F4996A; --tek-soft:rgba(244,153,106,.14);
  --sdb:#E0B44A; --sdb-soft:rgba(224,180,74,.15);
  --homme:#A79CF5; --femme:#E88CBB;
  --good:#3ED67E; --warn:#EFB44E; --crit:#F0797B; --crit-soft:rgba(240,121,123,.15);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.35);
  --shadow-lg:0 14px 34px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.3);
  --topbar-glass:rgba(20,27,41,.72);
  --aurora-1:rgba(167,156,245,.14); --aurora-2:rgba(55,214,155,.10); --aurora-3:rgba(244,153,106,.08);
  --scrollbar-thumb:#324058; --scrollbar-track:transparent;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  background-color:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.45;margin:0;
  background-image:
    radial-gradient(900px 480px at 12% -8%, var(--aurora-1), transparent 60%),
    radial-gradient(760px 420px at 100% 0%, var(--aurora-2), transparent 60%),
    radial-gradient(700px 460px at 30% 100%, var(--aurora-3), transparent 62%);
  background-attachment:fixed;background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
button{font-family:inherit;}
a{color:var(--accent);}
[hidden]{display:none!important;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--scrollbar-track);}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:100px;border:2px solid transparent;background-clip:padding-box;}
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

body,.topbar,.sidebar,.login-card,.kpi-card,.panel,.table-wrap,.modal,.drawer,.drawer-head,
.nav-item,.btn,.icon-btn,input,select,.search,.account-row,thead th,tbody td,.scope-banner,.dhero{
  transition:background-color .22s ease,border-color .22s ease,color .18s ease,box-shadow .22s ease;
}

/* ---------- bascule de thème ---------- */
.theme-toggle{
  position:relative;width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);
}
.theme-toggle:hover{background:var(--accent-soft);color:var(--accent-strong);border-color:transparent;}
.theme-toggle svg{position:absolute;transition:opacity .25s ease,transform .35s cubic-bezier(.4,1.6,.5,1);}
.theme-toggle .ic-sun{opacity:0;transform:rotate(-60deg) scale(.5);}
.theme-toggle .ic-moon{opacity:1;transform:rotate(0) scale(1);}
:root[data-theme="dark"] .theme-toggle .ic-sun{opacity:1;transform:rotate(0) scale(1);}
:root[data-theme="dark"] .theme-toggle .ic-moon{opacity:0;transform:rotate(60deg) scale(.5);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{opacity:1;transform:rotate(0) scale(1);}
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{opacity:0;transform:rotate(60deg) scale(.5);}
}
.login-theme-toggle{position:absolute;top:18px;right:18px;}
/* #refreshBtn réutilise .theme-toggle (même look) — seule l'icône change, avec une rotation
   pendant la resynchronisation (resyncAll() dans app.js). */
#refreshBtn.spinning svg{animation:refresh-spin .8s linear infinite;}
@keyframes refresh-spin{to{transform:rotate(360deg);}}

/* ---------- login ---------- */
.login-screen{
  min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;
  position:relative;overflow:hidden;
}
.login-screen::before,.login-screen::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;
}
.login-screen::before{
  width:520px;height:520px;top:-180px;left:-160px;
  background:radial-gradient(circle,var(--ntl-soft),transparent 70%);
}
.login-screen::after{
  width:480px;height:480px;bottom:-200px;right:-140px;
  background:radial-gradient(circle,var(--gpi-soft),transparent 70%);
}
.login-card{
  width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:32px 28px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 24px 60px rgba(16,24,40,.16);
  position:relative;overflow:hidden;z-index:1;animation:cardIn .5s cubic-bezier(.2,.9,.25,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.login-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--ntl),var(--gpi),var(--tek),var(--sdb));
}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.login-brand .brand-mark{width:46px;height:46px;border-radius:11px;padding:6px;}
.login-brand h1{font-size:17px;font-weight:700;}
.login-brand p{margin:1px 0 0;font-size:11.5px;color:var(--text-muted);}
.link-btn{
  background:none;border:none;padding:0;margin-top:12px;color:var(--accent);font-size:12.5px;
  font-weight:600;cursor:pointer;display:block;width:100%;text-align:center;font-family:inherit;
}
.link-btn:hover{text-decoration:underline;color:var(--accent-strong);}
.btn-first-login{width:100%;margin-top:16px;}
.reset-panel{animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:12px;font-weight:600;color:var(--text-2);}
.field input, .field select, .field textarea{
  border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:13.5px;background:var(--surface);
  color:var(--text);font-family:inherit;width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.field textarea{resize:vertical;min-height:44px;line-height:1.4;}
.field input:disabled, .field select:disabled, .field textarea:disabled{opacity:.7;background:var(--surface-2);cursor:not-allowed;}
.input-icon-wrap{position:relative;}
.input-icon-wrap input{padding-right:38px;}
.input-icon-btn{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);background:none;border:none;
  padding:7px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;
  border-radius:6px;
}
.input-icon-btn:hover{color:var(--text-2);background:var(--surface-2);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;
  border:1px solid transparent;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);width:100%;
  box-shadow:0 1px 2px rgba(16,24,40,.08),0 6px 16px -4px color-mix(in srgb,var(--accent) 55%,transparent);
}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 2px 4px rgba(16,24,40,.1),0 10px 22px -4px color-mix(in srgb,var(--accent) 60%,transparent);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;filter:none;box-shadow:none;}
.btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--border);}
.btn-secondary:hover{background:var(--surface-3);border-color:var(--border-strong);}
.btn-danger{background:var(--crit-soft);color:var(--crit);border-color:transparent;}
.btn-danger:hover{filter:brightness(.96);}
.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border);}
.btn-ghost:hover{background:var(--surface-2);color:var(--text);}
.alert{
  font-size:12.5px;padding:10px 12px;border-radius:9px;margin-bottom:14px;background:var(--crit-soft);color:var(--crit);
  border:1px solid transparent;
}
.alert.good{background:var(--gpi-soft);color:var(--good);}

/* ---------- shell ---------- */
.shell{display:flex;flex-direction:column;min-height:100%;}
.topbar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 20px;background:var(--topbar-glass);border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:var(--shadow-sm);
}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;}
.brand-mark{
  width:38px;height:38px;border-radius:10px;background:#fff;padding:5px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1px solid var(--border);box-shadow:0 1px 3px rgba(16,24,40,.10);overflow:hidden;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;}
.brand-text h1{
  font-size:16px;font-weight:800;letter-spacing:.2px;
  background:linear-gradient(90deg,var(--text),var(--accent-strong));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-text p{margin:0;font-size:11.5px;color:var(--text-muted);}

.user-chip{display:flex;align-items:center;gap:12px;}
.user-chip .who{text-align:right;}
.user-chip .who b{display:block;font-size:12.5px;font-weight:600;}
.user-chip .who span{font-size:11px;color:var(--text-muted);}
.user-avatar{
  width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;
  box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 45%,transparent);
}

.app{display:flex;flex:1;min-height:0;}
.sidebar{
  width:212px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  padding:18px 12px;display:flex;flex-direction:column;gap:4px;
}
.nav-item{
  position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 15px;border-radius:9px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--text-2);border:1px solid transparent;background:transparent;
  width:100%;text-align:left;font-family:inherit;
}
.nav-item svg{flex-shrink:0;opacity:.85;transition:opacity .15s ease,transform .15s ease;}
.nav-item:hover{background:var(--surface-2);}
.nav-item:hover svg{transform:translateX(1px);}
.nav-item.active{background:var(--accent-soft);color:var(--accent-strong);}
.nav-item.active::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:100px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.nav-item.active svg{opacity:1;}
.sidebar-note{
  margin-top:auto;padding:12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);
  font-size:11.5px;color:var(--text-muted);line-height:1.5;
}

.app-version{
  position:fixed;left:10px;bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:5;
  font-size:10px;color:var(--text-muted);opacity:.65;letter-spacing:.2px;pointer-events:none;
  user-select:none;
}

.main{flex:1;min-width:0;padding:22px 26px 60px;}
.view{display:none;}
.view.active{display:block;animation:viewIn .35s cubic-bezier(.2,.9,.25,1);}
@keyframes viewIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.scope-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.scope-row .scope-banner{margin-bottom:0;flex:1;min-width:240px;}
.scope-filiale-select{
  width:auto;flex-shrink:0;border:1px solid var(--border);border-radius:10px;padding:9px 12px;
  background:var(--surface);color:var(--text);font-family:inherit;font-size:13px;font-weight:600;
}

.scope-banner{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;
  font-size:12.5px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);
}
.scope-banner b{color:var(--text);}
.scope-banner .chip{
  font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:2px 8px;border-radius:100px;color:#fff;flex-shrink:0;
  white-space:nowrap;
}
.filiale-logo{
  display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:6px;
  border:1px solid var(--border);overflow:hidden;flex-shrink:0;vertical-align:middle;
}
.filiale-logo img{width:100%;height:100%;object-fit:contain;padding:2px;display:block;}
.fil-cell{display:flex;align-items:center;gap:7px;}

.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.page-head h2{font-size:20px;}
.page-head p{margin:2px 0 0;color:var(--text-muted);font-size:12.5px;}
/* Sépare deux blocs indépendants au sein d'une même vue (ex. Formations & Missions : besoins
   en formation / missions effectuées) sans le poids d'un vrai page-head. */
.section-subhead{font-size:15px;font-weight:700;margin:0 0 10px;}

/* ---------- kpi cards ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
.kpi-card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:16px 16px 15px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.kpi-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:.9;
}
.kpi-card:nth-child(2)::before{background:linear-gradient(90deg,var(--ntl),var(--accent-2));}
.kpi-card:nth-child(3)::before{background:linear-gradient(90deg,var(--gpi),var(--ntl));}
.kpi-card:nth-child(4)::before{background:linear-gradient(90deg,var(--tek),var(--gpi));}
.kpi-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-strong);}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.kpi-icon{
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--accent-soft);color:var(--accent-strong);
}
.kpi-card:nth-child(2) .kpi-icon{background:var(--ntl-soft);color:var(--ntl);}
.kpi-card:nth-child(3) .kpi-icon{background:var(--gpi-soft);color:var(--gpi);}
.kpi-card:nth-child(4) .kpi-icon{background:var(--tek-soft);color:var(--tek);}
.kpi-label{font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.3px;text-transform:uppercase;}
.kpi-value{font-family:var(--font-mono);font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px;}
.kpi-sub{font-size:11.5px;color:var(--text-2);}

.grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-bottom:14px;align-items:stretch;}
.grid-2b{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;align-items:stretch;}

.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px 18px;
  box-shadow:var(--shadow);transition:box-shadow .2s ease,border-color .2s ease;
}
.panel:hover{box-shadow:var(--shadow-lg);}
.panel h3{font-size:13.5px;font-weight:700;}
.panel .panel-sub{font-size:11.5px;color:var(--text-muted);margin:2px 0 14px;}
.panel-empty{
  font-size:12.5px;color:var(--text-muted);padding:22px 6px;text-align:center;border:1px dashed var(--border-strong);
  border-radius:10px;
}

/* ---------- alertes RH ---------- */
#alertsList{display:flex;flex-direction:column;gap:8px;}
.alert-item{
  display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;padding:10px 12px;border-radius:10px;
  border-left:3px solid transparent;line-height:1.4;
}
.alert-item::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.alert-item-warn{background:color-mix(in srgb,var(--warn) 12%,transparent);border-left-color:var(--warn);color:var(--warn);}
.alert-item-warn::before{background:var(--warn);}
.alert-item-crit{background:color-mix(in srgb,var(--crit) 12%,transparent);border-left-color:var(--crit);color:var(--crit);}
.alert-item-crit::before{background:var(--crit);}
.alert-item-accent{background:var(--accent-soft);border-left-color:var(--accent);color:var(--accent-strong);}
.alert-item-accent::before{background:var(--accent);}
.alert-item-good{background:color-mix(in srgb,var(--good) 12%,transparent);border-left-color:var(--good);color:var(--good);}
.alert-item-good::before{background:var(--good);}

/* ---------- évolution de l'effectif ---------- */
.trend-wrap{display:grid;grid-template-columns:1fr 200px;gap:18px;align-items:stretch;}
.trend-wrap .filiale-bars{height:180px;}
.trend-wrap .dhero{justify-content:center;height:100%;}
@media (max-width:900px){ .trend-wrap{grid-template-columns:1fr;} .trend-wrap .dhero{height:auto;} }

.filiale-bars{display:flex;align-items:flex-end;gap:18px;height:170px;padding:0 6px;}
.fb-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.fb-val{font-family:var(--font-mono);font-size:12px;font-weight:600;}
.fb-bar{width:100%;max-width:56px;border-radius:8px 8px 3px 3px;min-height:3px;}
.fb-label{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--text-2);}
.fb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

.hbar-list{display:flex;flex-direction:column;gap:9px;}
.hbar-row{display:grid;grid-template-columns:104px 1fr 74px;align-items:center;gap:10px;}
.hbar-name{font-size:11.5px;color:var(--text-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hbar-track{height:11px;background:var(--surface-2);border-radius:100px;overflow:hidden;}
.hbar-fill{height:100%;background:var(--accent);border-radius:100px;min-width:2px;}
.hbar-val{font-family:var(--font-mono);font-size:11px;color:var(--text-2);text-align:right;white-space:nowrap;}

.donut-wrap{display:flex;align-items:center;gap:18px;}
.donut-figures{display:flex;flex-direction:column;gap:8px;flex:1;}
.donut-legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);}
.donut-legend-row .sw{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.donut-legend-row b{color:var(--text);font-family:var(--font-mono);font-variant-numeric:tabular-nums;margin-left:auto;}
/* Doublon texte du pourcentage femmes (voir renderDonut()) : invisible à l'écran (le SVG suffit),
   affiché uniquement à l'impression en remplacement du SVG — voir body.printing-dashboard
   #donutSvg / .donut-pct-print plus bas. */
.donut-pct-print{display:none;}

.pyramid{display:flex;flex-direction:column;gap:5px;}
.pyr-row{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;gap:8px;}
.pyr-h{display:flex;justify-content:flex-end;}
.pyr-f{display:flex;justify-content:flex-start;}
.pyr-bar{height:13px;border-radius:4px;min-width:2px;}
.pyr-band{font-size:10.5px;color:var(--text-muted);text-align:center;font-family:var(--font-mono);}
.pyr-axis{display:grid;grid-template-columns:1fr 56px 1fr;gap:8px;margin-top:2px;}
.pyr-axis span{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);}
.pyr-axis .l{text-align:right;}
.pyr-axis .r{text-align:left;}

/* ---------- employees view ---------- */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.search{
  flex:1;min-width:180px;display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:9px 12px;transition:border-color .15s ease,box-shadow .15s ease;
}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.search svg{flex-shrink:0;color:var(--text-muted);}
.search input{border:none;outline:none;background:transparent;font-size:13px;color:var(--text);width:100%;font-family:inherit;}
.search input::placeholder{color:var(--text-muted);}

.salary-range{
  display:flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:7px 10px;transition:border-color .15s ease,box-shadow .15s ease;
}
.salary-range:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.salary-range-sep{color:var(--text-muted);font-size:12px;flex-shrink:0;}
.salary-range input{
  border:none;outline:none;background:transparent;font-size:13px;color:var(--text);width:92px;font-family:inherit;
  -moz-appearance:textfield;
}
.salary-range input::-webkit-outer-spin-button,
.salary-range input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.salary-range input::placeholder{color:var(--text-muted);}
@media (max-width:560px){
  .salary-range input{width:76px;}
}

#resetFiltersBtn{display:inline-flex;align-items:center;gap:6px;}

/* Indicateurs de synthèse sous le tableau des employés (voir renderTableSummary() dans app.js) —
   reflètent la liste actuellement affichée, donc tous les filtres actifs. */
/* ---------- entités du groupe (fiches d'identification) ---------- */
.entites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.entite-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column;
}
.entite-card-top{height:4px;}
.entite-card-head{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;}
.entite-card-head h3{font-size:15px;margin:0;}
.entite-card-head p{margin:1px 0 0;font-size:11.5px;color:var(--text-muted);}
.entite-card-body{padding:2px 16px 4px;display:flex;flex-direction:column;flex:1;}
.entite-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--border);}
.entite-row:last-child{border-bottom:none;}
.entite-row-label{color:var(--text-muted);flex-shrink:0;}
.entite-row-value{text-align:right;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.entite-card-empty{padding:0 16px 14px;font-size:12.5px;color:var(--text-muted);flex:1;}
.entite-card-foot{padding:12px 16px;border-top:1px solid var(--border);margin-top:auto;}
/* Fiche imprimable d'une entité — invisible à l'écran, affichée uniquement pendant
   l'impression (body.printing-entite), voir printEntite() dans app.js. */
.entite-print-sheet{display:none;}

.table-summary{
  display:flex;flex-wrap:wrap;gap:0;margin-top:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);
}
.table-summary:empty{display:none;}
.table-summary-item{
  flex:1;min-width:150px;padding:12px 16px;border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:3px;
}
.table-summary-item:last-child{border-right:none;}
.table-summary-label{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--text-muted);}
.table-summary-value{font-size:16px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
@media (max-width:700px){
  .table-summary-item{min-width:45%;border-right:none;border-bottom:1px solid var(--border);}
}

/* En-tête et méta-ligne réservés à l'impression / export PDF de la liste des employés
   (voir exportEmployeesPDF() dans app.js) — invisibles à l'écran. */
.employees-print-header{display:none;}
.print-only{display:none;}

.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
/* Défilement propre au tableau (et non à toute la page) dès qu'il devient long, avec l'en-tête
   qui reste visible pendant le défilement — comme des volets figés sur la ligne d'en-tête. */
.table-scroll{overflow-x:auto;overflow-y:auto;max-height:min(62vh,620px);}
table{width:100%;border-collapse:collapse;min-width:640px;}
thead th{
  position:sticky;top:0;z-index:2;
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);
  padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface-3);white-space:nowrap;
}
tbody td{padding:11px 14px;font-size:12.5px;border-bottom:1px solid var(--border);white-space:nowrap;transition:background-color .12s ease;}
tbody tr{cursor:pointer;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--surface-2);}
tbody tr:active td{background:var(--accent-soft);}
.name-cell{display:flex;align-items:center;gap:9px;}
.avatar{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:#fff;flex-shrink:0;
}
.name-cell div b{font-weight:600;font-size:12.5px;}
.name-cell div p{margin:0;font-size:11px;color:var(--text-muted);}
.fil-chip{
  font-size:10px;font-weight:700;letter-spacing:.3px;padding:3px 8px;border-radius:100px;color:#fff;display:inline-block;
}
.salaire-cell{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.statut-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--good);}
.statut-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent);}
.statut-chip.inactive{color:var(--text-muted);}
.statut-chip.inactive .dot{background:var(--text-muted);box-shadow:0 0 0 3px color-mix(in srgb,var(--text-muted) 20%,transparent);}
/* Statut intermédiaire (ex. Planifié, En cours) — Formations & Missions : ni terminé (vert),
   ni simplement identifié/à faire (gris), un troisième palier visuellement distinct. */
.statut-chip.warn{color:var(--warn);}
.statut-chip.warn .dot{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent);}
.empty-row td{text-align:center;color:var(--text-muted);padding:30px 14px;font-size:12.5px;}
.row-actions{display:flex;gap:6px;}
.icon-btn{
  width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text);transform:translateY(-1px);}
.icon-btn.danger:hover{background:var(--crit-soft);color:var(--crit);border-color:transparent;}

/* ---------- modal ---------- */
.scrim{
  position:fixed;inset:0;background:rgba(10,14,22,.38);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:29;
}
.scrim.open{opacity:1;pointer-events:auto;}
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:min(480px,92vw);max-height:88vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg),0 20px 60px rgba(10,14,22,.22);z-index:30;
  opacity:0;pointer-events:none;transition:opacity .16s ease, transform .16s ease;padding:22px 22px 20px;
}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);}
.modal h3{font-size:16px;margin-bottom:4px;}
.modal .modal-sub{font-size:12px;color:var(--text-muted);margin-bottom:16px;}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
/* Intertitre à l'intérieur d'un formulaire (ex. « Personne à contacter en cas d'urgence ») :
   regroupe visuellement quelques champs liés sans découper le formulaire en plusieurs blocs. */
.form-subhead{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);margin:6px 0 10px;padding-top:12px;border-top:1px solid var(--border);
}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
.modal-close{
  position:absolute;top:16px;right:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-2);
}
/* Variante plus large — réservée aux modaux qui ont besoin de place pour un aperçu tabulaire
   (ex. importModal : aperçu des lignes d'un fichier Excel avant import). */
.modal.modal-lg{width:min(760px,94vw);}
/* Barre de progression simple (import en masse) — pas d'animation, juste une largeur qui
   avance en pourcentage via JS (voir importProgressFill dans app.js). */
.progress-bar{height:8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;margin-top:6px;}
.progress-bar-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .15s ease;}

/* ---------- drawer ---------- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,94vw);background:var(--surface);z-index:30;
  box-shadow:-12px 0 40px rgba(10,14,22,.16);transform:translateX(100%);transition:transform .25s cubic-bezier(.2,.9,.25,1);
  display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);
}
.drawer.open{transform:translateX(0);}
.print-header{display:none;}
.drawer-head{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:20px 26px 22px;border-bottom:1px solid var(--border);
  background:linear-gradient(160deg,var(--accent-soft),transparent 130%);
}
.drawer-head-top{position:absolute;top:14px;right:16px;display:flex;gap:6px;}
.drawer-avatar{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;font-family:var(--font-display);color:#fff;flex-shrink:0;
  box-shadow:0 3px 10px rgba(16,24,40,.16);margin-bottom:6px;
}
.drawer-head h3{font-size:19px;font-weight:700;}
.drawer-head p{margin:2px 0 0;font-size:12.5px;color:var(--text-2);font-weight:600;}
.drawer-meta{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;}
.fil-tag{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.2px;
  color:#fff;padding:4px 10px 4px 6px;border-radius:100px;
}
.fil-tag img{width:16px;height:16px;border-radius:50%;background:#fff;object-fit:contain;padding:1.5px;}
.drawer-close{background:var(--surface);border:1px solid var(--border);border-radius:8px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-2);flex-shrink:0;}
.drawer-head-top .icon-btn{background:var(--surface);}
.drawer-body{padding:20px 26px 30px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;}

.dhero{
  display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);
}
.dhero-label{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text-muted);}
.dhero-value{font-family:var(--font-mono);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-strong);}

.dsection h4{
  margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);
}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.dfield{display:flex;flex-direction:column;gap:3px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;}
.dfield span{color:var(--text-muted);font-size:11.5px;}
.dfield b{font-weight:600;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
/* champ texte libre (ex. motif de sortie) : prend toute la largeur de la grille et garde une
   police normale — le rendu "chiffres alignés" du mono ne convient pas à une phrase. */
.dfield-wide{grid-column:1/-1;}
.dfield-wide b{font-family:inherit;font-variant-numeric:normal;font-weight:500;line-height:1.45;}

/* ---------- rémunération au rendement (chauffeurs) ----------
   Remplace le .dhero habituel en tête de fiche pour un chauffeur : même traitement visuel
   (fond, bordure, coins), complété par une ligne de statistiques et, plus bas dans la fiche,
   un historique mensuel éditable. */
.rendement-box{
  display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);
}
.rendement-stats{display:flex;gap:22px;margin-top:10px;flex-wrap:wrap;}
.rstat{display:flex;flex-direction:column;gap:2px;}
.rstat span{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;}
.rstat b{font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--text);}

/* Liste en rangées flex plutôt qu'un <table> : un tableau HTML, même avec
   table-layout:fixed, garde un min-content calculé sur ses cellules (ici montant + badge
   de variation) qui peut dépasser la largeur fixe du tiroir — lequel ne défile pas
   horizontalement, donc le dépassement est juste invisible, hors champ. Une rangée flex se
   contraint naturellement à la largeur de son parent. */
.hist-head{display:flex;justify-content:space-between;gap:10px;padding:0 0 8px;border-bottom:1px solid var(--border);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);}
.hist-list{display:flex;flex-direction:column;}
.hist-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.hist-row:last-child{border-bottom:none;}
.hist-mois{flex-shrink:1;min-width:0;}
.hist-amt{
  text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;
}
/* En bloc sous le montant plutôt qu'en ligne à sa suite : garde chaque ligne compacte et
   évite le même risque de débordement pour la variation d'un mois sur l'autre. */
.hist-delta{font-size:11px;font-family:var(--font-body);font-weight:500;}
.hist-delta-up{color:var(--good);}
.hist-delta-down{color:var(--crit);}
.hist-add-row{display:flex;gap:8px;align-items:center;margin-top:12px;}
.hist-month-input{
  border:1px solid var(--border);border-radius:9px;padding:9px 11px;font-size:13px;
  background:var(--surface);color:var(--text);font-family:inherit;flex-shrink:0;width:150px;
}
.hist-add-row input[type="number"]{
  flex:1;border:1px solid var(--border);border-radius:9px;padding:9px 11px;font-size:13.5px;
  background:var(--surface);color:var(--text);font-family:var(--font-mono);min-width:0;
}
.hist-add-row input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.hist-note{font-size:11.5px;color:var(--text-muted);margin:8px 0 0;}
@media (max-width:480px){ .hist-add-row{flex-wrap:wrap;} .hist-month-input{width:100%;} }

.field-hint{font-size:11px;color:var(--text-muted);margin:6px 0 0;line-height:1.4;}

/* ---------- parcours (historique de carrière) ---------- */
.parcours-list{display:flex;flex-direction:column;position:relative;padding-left:4px;}
.parcours-item{display:flex;gap:12px;position:relative;padding-bottom:16px;}
.parcours-item:last-child{padding-bottom:0;}
.parcours-item::before{
  content:"";position:absolute;left:5px;top:16px;bottom:-2px;width:1.5px;background:var(--border-strong);
}
.parcours-item:last-child::before{display:none;}
.parcours-dot{
  width:11px;height:11px;border-radius:50%;flex-shrink:0;margin-top:3px;background:var(--accent);
  border:2px solid var(--surface);box-shadow:0 0 0 1.5px var(--accent);position:relative;z-index:1;
}
.parcours-embauche .parcours-dot{background:var(--good);box-shadow:0 0 0 1.5px var(--good);}
.parcours-sortie .parcours-dot{background:var(--crit);box-shadow:0 0 0 1.5px var(--crit);}
.parcours-modification .parcours-dot{background:var(--accent-2);box-shadow:0 0 0 1.5px var(--accent-2);}
.parcours-body{flex:1;min-width:0;}
.parcours-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;}
.parcours-top b{font-weight:600;}
.parcours-top span{font-size:11px;color:var(--text-muted);white-space:nowrap;}
.parcours-detail{margin-top:3px;font-size:11.5px;color:var(--text-2);line-height:1.55;}
.parcours-by{margin-top:3px;font-size:10.5px;color:var(--text-muted);font-style:italic;}

/* ---------- admin (comptes) ---------- */
.account-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:12.5px;
  transition:background-color .15s ease;
}
.account-row:hover{background:var(--surface-2);}
.account-row:last-child{border-bottom:none;}
.account-row .who{flex:1;min-width:0;}
.account-row .who b{display:block;font-size:13px;}
.account-row .who span{color:var(--text-muted);font-size:11.5px;}
.role-pill{font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:3px 9px;border-radius:100px;background:var(--accent-soft);color:var(--accent-strong);}
.role-pill.pending{background:rgba(185,119,14,.14);color:var(--warn);}
.list-section-label{
  padding:10px 14px 4px;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .grid-2,.grid-2b{grid-template-columns:1fr;}
  .modal-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .app{flex-direction:column;}
  .sidebar{width:100%;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:10px 12px;}
  .sidebar-note{display:none;}
  .main{padding:18px 16px 50px;}
  .topbar{padding:10px 14px;}
  .user-chip .who{display:none;}
  thead th:nth-child(4),tbody td:nth-child(4){display:none;}
}
/* ---------- impression fiche salarié ---------- */
@media print{
  /* Le fond décoratif de l'écran (dégradés radiaux en background-attachment:fixed) n'est
     jamais retiré par les règles "visibility" ci-dessous (elles ne ciblent que les enfants
     de body, pas body lui-même) : il restait donc actif à l'impression. Au mieux ça gâche de
     l'encre pour rien, au pire certains pilotes d'impression PDF (notamment « Microsoft Print
     to PDF » sous Windows) gèrent mal un dégradé en position fixe sur un document de plusieurs
     pages et peuvent produire un fichier vide (0 octet) au lieu d'échouer proprement. On
     neutralise donc ce fond dès l'entrée en mode impression, pour tous les cas (tableau de
     bord, employés, fiche entité, fiche salarié).
  */
  body{background:#fff!important;background-image:none!important;background-attachment:scroll!important;}
  /* Même logique pour la barre du haut : l'effet de verre (backdrop-filter) et sa position
     "sticky" sont un autre point faible classique des pilotes d'impression PDF Windows sur un
     document de plusieurs pages — on les neutralise même si la barre est de toute façon rendue
     invisible juste après, par précaution plutôt que de s'y fier. */
  .topbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;position:static!important;}
  body *{visibility:hidden;}
  body:not(.printing-dashboard):not(.printing-employees):not(.printing-entite) .drawer, body:not(.printing-dashboard):not(.printing-employees):not(.printing-entite) .drawer *{visibility:visible;}
  body:not(.printing-dashboard):not(.printing-employees):not(.printing-entite) .drawer{
    position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;
    box-shadow:none;transform:none!important;background:#fff;color:#111;padding-top:0;
  }
  /* Deux volets coexistent désormais (fiche salarié et fiche candidat, voir le module
     Recrutement) : la règle ci-dessus rend visible ".drawer" sans distinction, ce qui
     superposerait les deux sur la feuille. Seul celui qui est réellement ouvert s'imprime. */
  .drawer:not(.open){display:none!important;}
  .no-print{display:none!important;}
  /* L'en-tête figé et le défilement interne du tableau sont un confort d'écran uniquement —
     à l'impression / export PDF, tout le tableau doit apparaître, sans zone tronquée. */
  .table-scroll{max-height:none!important;overflow:visible!important;}
  thead th{position:static!important;}
  .print-header{
    display:flex;align-items:center;gap:14px;padding:0 24px 16px;margin-bottom:6px;border-bottom:2px solid #111;
  }
  .print-header img{width:52px;height:52px;object-fit:contain;}
  .print-header h2{font-size:18px;margin:0;}
  .print-header p{margin:2px 0 0;font-size:11px;color:#444;}
  .drawer-head{padding:0 24px 14px;border-bottom:1px solid #ccc;background:#fff!important;align-items:flex-start;}
  .drawer-avatar{box-shadow:none;}
  .drawer-head p{color:#444;}
  .fil-tag{color:#fff;}
  .statut-chip{color:#111;}
  .drawer-body{padding:14px 24px 24px;gap:14px;}
  .dhero{background:#fff;border:1px solid #ccc;}
  .dhero-value{color:#111;}
  .rendement-box{background:#fff;border:1px solid #ccc;}
  .rendement-box .dhero-value,.rstat b{color:#111;}
  .dsection h4{color:#666;}
  .dfield{border-bottom:1px solid #ddd;}
  .scrim{display:none!important;}

  /* ---------- impression tableau de bord ---------- */
  body.printing-dashboard #view-dashboard,
  body.printing-dashboard #view-dashboard *{visibility:visible;}
  body.printing-dashboard #view-dashboard{
    position:absolute;top:0;left:0;width:100%;padding:18px 24px;background:#fff;color:#111;
  }
  body.printing-dashboard .page-head{border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:14px;}
  body.printing-dashboard .panel,
  body.printing-dashboard .kpi-card{
    box-shadow:none!important;border:1px solid #ccc!important;background:#fff!important;color:#111!important;
    break-inside:avoid;
  }
  body.printing-dashboard .kpi-row,body.printing-dashboard .grid-2,body.printing-dashboard .grid-2b{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
  }
  body.printing-dashboard .panel:hover{box-shadow:none;}

  /* ---------- impression du tableau de bord Recrutement ----------
     Même principe que le tableau de bord RH ci-dessus : seule la vue imprimée reste visible,
     les contrôles d'écran (sélecteurs, boutons) disparaissent via .no-print. */
  body.printing-recrutement *{visibility:hidden;}
  body.printing-recrutement #view-recrutement,
  body.printing-recrutement #view-recrutement *{visibility:visible;}
  body.printing-recrutement #view-recrutement{
    position:absolute;top:0;left:0;width:100%;padding:18px 24px;background:#fff;color:#111;
  }
  body.printing-recrutement .drawer,body.printing-recrutement .modal{display:none!important;}
  body.printing-recrutement .page-head{border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:14px;}
  body.printing-recrutement .panel,
  body.printing-recrutement .kpi-card{
    box-shadow:none!important;border:1px solid #ccc!important;background:#fff!important;color:#111!important;
    break-inside:avoid;
  }
  body.printing-recrutement .kpi-row,body.printing-recrutement .grid-2{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
  }
  body.printing-recrutement .dhero{background:#fff;border:1px solid #ccc;}
  body.printing-recrutement .dhero-value,body.printing-recrutement .kpi-value{color:#111!important;}
  body.printing-dashboard .dhero{background:#fff;border:1px solid #ccc;}
  body.printing-dashboard .dhero-value,body.printing-dashboard .kpi-value{color:#111!important;}
  body.printing-dashboard .alert-item{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  /* Le donut Hommes/Femmes est le seul graphique du tableau de bord construit en SVG inline
     (les autres sont de simples <div> avec height/background) ; à l'impression, on le remplace
     par son équivalent texte déjà présent (donutFigures) pour éliminer toute dépendance au
     rendu SVG dans le document imprimé — voir le commentaire dans renderDonut() (app.js) pour
     le contexte : ce donut utilisait aussi var(--homme)/var(--femme) directement dans des
     attributs stroke=/fill=, point commun à écarter du chemin d'impression du tableau de bord. */
  body.printing-dashboard #donutSvg{display:none!important;}
  body.printing-dashboard .donut-pct-print{display:flex!important;}

  /* ---------- impression / export PDF liste des employés ---------- */
  body.printing-employees *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body.printing-employees #view-employees,
  body.printing-employees #view-employees *{visibility:visible;}
  body.printing-employees #view-employees{
    position:absolute;top:0;left:0;width:100%;padding:14px 22px 24px;background:#fff;color:#111;
  }
  /* en-tête / letterhead avec le logo du groupe */
  body.printing-employees .employees-print-header{
    display:flex;align-items:center;gap:14px;padding:0 0 14px;margin-bottom:10px;border-bottom:2.5px solid #4A3AA7;
  }
  body.printing-employees .employees-print-header img{width:46px;height:46px;object-fit:contain;}
  body.printing-employees .employees-print-header h2{font-size:17px;margin:0;color:#20163f;letter-spacing:.2px;}
  body.printing-employees .employees-print-header p{margin:2px 0 0;font-size:10.5px;color:#666;}
  body.printing-employees .page-head{border-bottom:none;padding-bottom:4px;margin-bottom:14px;}
  body.printing-employees .page-head h2{font-size:15px;}
  body.printing-employees #empSub{display:none;}
  body.printing-employees .print-only{
    display:block;font-size:10.5px;color:#555;margin-top:3px;line-height:1.5;
  }
  body.printing-employees .toolbar{display:none!important;}
  /* tableau : en-tête coloré, lignes zébrées, bordures fines — rendu "professionnel" */
  body.printing-employees .table-wrap{box-shadow:none!important;border:1px solid #d7d2ee!important;background:#fff!important;border-radius:8px;overflow:hidden;}
  body.printing-employees table{color:#1c1730;font-size:10.5px;border-collapse:collapse;}
  body.printing-employees thead th{
    background:#4A3AA7;color:#fff!important;font-size:9px;letter-spacing:.3px;
    border-bottom:none;padding:8px 10px;
  }
  body.printing-employees tbody td{border-bottom:1px solid #ece9f7;padding:6px 10px;}
  body.printing-employees tbody tr:nth-child(even){background:#F6F4FC;}
  body.printing-employees tbody tr:nth-child(odd){background:#fff;}
  body.printing-employees .avatar{width:22px;height:22px;font-size:9px;color:#fff!important;}
  body.printing-employees .salaire-cell{font-variant-numeric:tabular-nums;font-weight:600;}
  body.printing-employees .statut-chip{border:1px solid #d7d2ee;padding:2px 7px;border-radius:20px;font-size:9px;}
  body.printing-employees #empActionsHead, body.printing-employees td:last-child:has(button){display:none!important;}
  /* indicateurs de synthèse (effectif / masse salariale / etc.) sous le tableau — repris dans
     l'export PDF avec le même habillage que l'en-tête, pour rester cohérent et "présentable" */
  body.printing-employees .table-summary{
    margin-top:12px;border:1px solid #d7d2ee!important;background:#fff!important;box-shadow:none!important;
  }
  body.printing-employees .table-summary-item{border-right:1px solid #ece9f7;padding:9px 12px;}
  body.printing-employees .table-summary-label{color:#7a7391;}
  body.printing-employees .table-summary-value{color:#20163f;}
  /* note de bas de document (CSS n'offre pas de pied de page répété fiable sur chaque page) */
  body.printing-employees #view-employees::after{
    content:"SIRH Mobikisi — document confidentiel à usage interne";
    display:block;margin-top:14px;font-size:9px;color:#999;text-align:center;
  }

  /* ---------- impression / export PDF fiche entité (identification légale) ---------- */
  body.printing-entite *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body.printing-entite .entite-print-sheet,
  body.printing-entite .entite-print-sheet *{visibility:visible;}
  body.printing-entite .page-head{display:none;}
  body.printing-entite .entites-grid{display:none;}
  body.printing-entite .entite-print-sheet{
    display:block;position:absolute;top:0;left:0;width:100%;padding:14px 26px 24px;background:#fff;color:#111;
  }
  /* en-tête / letterhead avec le logo du groupe */
  .entite-print-header{
    display:flex;align-items:center;gap:14px;padding:0 0 14px;margin-bottom:16px;border-bottom:2.5px solid #4A3AA7;
  }
  .entite-print-header img{width:46px;height:46px;object-fit:contain;}
  .entite-print-header h2{font-size:17px;margin:0;color:#20163f;letter-spacing:.2px;}
  .entite-print-header p{margin:2px 0 0;font-size:10.5px;color:#666;}
  .entite-print-header .entite-print-date{margin-left:auto;font-size:10px;color:#777;align-self:flex-start;}
  /* bandeau filiale : logo + raison sociale, coloré selon la filiale */
  .entite-print-band{
    display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:18px;border-radius:9px;
    background:#F6F4FC;border:1px solid #d7d2ee;
  }
  .entite-print-band img{width:36px;height:36px;object-fit:contain;}
  .entite-print-band h3{font-size:15px;margin:0;color:#20163f;}
  .entite-print-band p{margin:2px 0 0;font-size:11px;color:#555;}
  /* grille bordée des champs d'identification, façon fiche officielle */
  .entite-print-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #d7d2ee;border-radius:8px;overflow:hidden;
  }
  .entite-print-field{
    padding:10px 16px;border-bottom:1px solid #ece9f7;border-right:1px solid #ece9f7;
  }
  .entite-print-field:nth-child(2n){border-right:none;}
  .entite-print-label{display:block;font-size:9px;letter-spacing:.3px;text-transform:uppercase;color:#7a7391;margin-bottom:3px;}
  .entite-print-value{display:block;font-size:12px;color:#1c1730;font-weight:600;}
  .entite-print-obs{margin-top:16px;padding:12px 16px;border:1px solid #d7d2ee;border-radius:8px;background:#fff;}
  .entite-print-obs h4{margin:0 0 5px;font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:#7a7391;}
  .entite-print-obs p{margin:0;font-size:11.5px;color:#1c1730;line-height:1.5;white-space:pre-wrap;}
  body.printing-entite .entite-print-sheet::after{
    content:"SIRH Mobikisi — document confidentiel à usage interne";
    display:block;margin-top:18px;font-size:9px;color:#999;text-align:center;
  }
}

@media (max-width:480px){
  .kpi-row{grid-template-columns:1fr 1fr;}
  thead th:nth-child(5),tbody td:nth-child(5){display:none;}
}

/* ==================== bandeau nouvelle version ==================== */
.update-banner{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:10px 44px 10px 16px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);font-family:var(--font-body);font-size:13.5px;font-weight:600;
  box-shadow:0 4px 16px rgba(16,24,40,.18);
}
.update-banner .btn{width:auto;padding:6px 16px;font-size:12.5px;box-shadow:none;}
.update-banner .btn:hover{transform:none;filter:brightness(1.12);}
.update-banner-dismiss{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;color:var(--accent-ink);font-size:20px;line-height:1;
  cursor:pointer;opacity:.8;padding:4px 8px;font-family:inherit;
}
.update-banner-dismiss:hover{opacity:1;}
body:has(#updateBanner:not([hidden])) .login-screen,
body:has(#updateBanner:not([hidden])) .shell{margin-top:44px;}
@media (max-width:560px){
  .update-banner{text-align:center;padding-right:40px;}
}

/* ==================== menu déroulant "Exporter" ==================== */
.export-dropdown{position:relative;}
.export-dropdown .btn{display:inline-flex;align-items:center;gap:6px;}
.export-dropdown .btn svg{transition:transform .15s ease;}
.export-dropdown.open .btn svg{transform:rotate(180deg);}
.export-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:230px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px;
}
.export-menu-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  background:none;border:none;border-radius:8px;padding:8px 10px;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--text);
}
.export-menu-item:hover, .export-menu-item:focus-visible{background:var(--surface-2);}
.export-menu-item-label{font-size:13px;font-weight:600;}
.export-menu-item-sub{font-size:11px;color:var(--text-muted);}
@media (max-width:560px){
  .export-menu{right:auto;left:0;}
}