:root{--bg:#eef0f5;--fg:#1c2733;--mut:#667085;--line:#e1e4ec;--pri:#000938;--pri-d:#1a2780;--cy:#00fdff;--ok:#1d9a5b;--ko:#d64545;--side:#000938;--card:#fff}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg)}
h1{font-size:22px;margin:0 0 4px}h2{font-size:17px;margin:0 0 10px}h3{font-size:14px;margin:0 0 6px}
#shell{display:flex;min-height:100vh}
#side{width:230px;flex:none;background:var(--side);color:#cdd8e6;display:flex;flex-direction:column;padding:14px 10px;position:sticky;top:0;height:100vh;overflow:auto}
#side .logo{font-weight:700;font-size:16px;color:#fff;padding:4px 10px 14px;display:flex;gap:8px;align-items:center}
#side .logo i{display:inline-block;width:26px;height:26px;border-radius:7px;background:var(--cy);color:var(--side);text-align:center;line-height:26px;font-style:normal}
#side .grp{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7f93ab;margin:14px 10px 4px}
#side button{display:flex;width:100%;align-items:center;gap:8px;text-align:left;border:0;background:transparent;color:#cdd8e6;border-radius:8px;padding:8px 10px;font:inherit;cursor:pointer}
#side button:hover{background:#0d1a55}
#side button.on{background:#0d1a55;color:var(--cy);box-shadow:inset 3px 0 0 var(--cy)}
#side .badge{margin-left:auto;background:var(--cy);color:var(--side) !important;color:#fff;border-radius:10px;padding:0 7px;font-size:12px;font-weight:700}
#side .foot{margin-top:auto;padding:10px;font-size:12px;color:#7f93ab}
#content{flex:1;min-width:0;display:flex;flex-direction:column}
#top{display:flex;align-items:center;gap:10px;padding:10px 20px;background:#fff;border-bottom:1px solid var(--line)}
#top .sp{flex:1}
.avatar{width:34px;height:34px;border-radius:50%;background:#e3e6f6;color:var(--pri);font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.banner{background:#fff6dc;border-bottom:1px solid #f0dc9c;padding:4px 20px;font-size:12px;color:#7a5b00}
main{padding:20px;flex:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,40,70,.04)}
.grid{margin-bottom:14px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kpi{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.kpi .v{font-size:28px;font-weight:700;line-height:1.1}.kpi .l{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
progress{width:100%;height:8px;accent-color:var(--pri);margin-top:6px}
button,.btn{font:inherit;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;color:var(--fg)}
button:hover{border-color:#b9c4d4}
button.pri{background:var(--pri);color:#fff;border-color:var(--pri)}button.pri:hover{background:var(--pri-d)}
button.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
button.ko{background:var(--ko);color:#fff;border-color:var(--ko)}
button.sm{padding:3px 8px;font-size:12px}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.row.c{align-items:center}
.grow{flex:1}
label{display:flex;flex-direction:column;font-size:12px;color:var(--mut);gap:3px}
label.chk{flex-direction:row;align-items:center;gap:6px;color:var(--fg);font-size:14px}
input,select,textarea{font:inherit;padding:7px 9px;border:1px solid #cfd7e3;border-radius:8px;background:#fff;color:var(--fg);min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid #7fe9ff;border-color:var(--pri)}
input:disabled{background:#f3f5f9;color:#41505f}
table{border-collapse:collapse;width:100%}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{background:#f6f8fc;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);position:sticky;top:0}
.tbl tr:hover td{background:#fafcff}
.scroll{overflow:auto;max-height:68vh}
.msg{padding:10px 12px;border-radius:8px;margin:8px 0}
.msg.err{background:#fde8e6;border:1px solid #f4b4ae;color:#9b1c13}
.msg.warn{background:#fff4d6;border:1px solid #f0d58a}
.msg.ok{background:#e3f5ea;border:1px solid #a7dbbd;color:#14653b}
.tag{white-space:nowrap;display:inline-block;padding:2px 9px;border-radius:12px;font-size:12px;font-weight:600}
.s-en_attente{background:#ffe2b8;color:#7a4300}.s-valide{background:#d6f1e1;color:#14653b}
.s-refuse{background:#fbd9d6;color:#9b1c13}.s-annule{background:#e6e9ee;color:#4b5663}
.s-annulation_demandee{background:#ffe0d6;color:#8a2a10}.s-parti{background:#e6e9ee;color:#4b5663}
.s-en_poste{background:#d6f1e1;color:#14653b}.s-a_venir{background:#dfe9ff;color:#1d4fb0}
.mut{color:var(--mut)}.small{font-size:12px}
.chip{display:inline-block;padding:2px 10px;border-radius:12px;background:#eef2f8;margin:2px 4px 2px 0;font-size:13px}
.login{max-width:380px;margin:12vh auto 0}
.fgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* ---------- planning */
.pl-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.pl-bar .title{font-size:18px;font-weight:700;min-width:170px;text-align:center}
.seg button{border-radius:0;margin-left:-1px}.seg button:first-child{border-radius:8px 0 0 8px;margin:0}.seg button:last-child{border-radius:0 8px 8px 0}
.seg button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;margin:6px 0 10px}
.legend span.k{display:inline-block;padding:2px 9px;border-radius:5px;border:1px solid rgba(0,0,0,.08)}
.pl-wrap{max-height:calc(100vh - 290px);min-height:360px;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
table.pl{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%}
table.pl.year{table-layout:auto;width:auto}
table.pl th,table.pl td{border-right:1px solid #e8ecf3;border-bottom:1px solid #e8ecf3;padding:0;text-align:center;font-weight:500}
table.pl .namecol{position:sticky;left:0;z-index:3;width:210px;min-width:210px;max-width:210px;text-align:left;padding:3px 10px;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.pl thead th{position:sticky;background:#f1f4f9;z-index:2;font-size:12px}
table.pl thead tr.r1 th{top:0;height:26px;background:#e4eaf4}
table.pl thead tr.r2 th{top:26px;height:40px;line-height:1.15}
table.pl thead tr.r3 th{top:66px;height:18px;font-size:10px;color:#2b6b6b}
table.pl thead th.namecol{z-index:4;background:#e4eaf4}
table.pl.year .d{min-width:30px;width:30px}
td.d{height:38px;vertical-align:top}
.dn{display:block;font-weight:700;font-size:14px}.dw{display:block;font-size:10px;color:var(--mut);text-transform:uppercase}
.h{display:block;height:19px;line-height:19px;font-size:11px;font-weight:700;overflow:hidden;white-space:nowrap}
.h.full{height:38px;line-height:38px;font-size:12px}
table.pl.year .h{font-size:0}
.c-TT{background:#8fd9ab}.c-CP{background:#93bdf7}.c-RTT{background:#c9afef}.c-CSE{background:#c4c8cf}.c-A{background:#f1d28b}
.c-pend{background:repeating-linear-gradient(45deg,#ffad4d,#ffad4d 6px,#ffc27f 6px,#ffc27f 12px);color:#4a2b00}
td.sv,th.sv{background:#eaf7f7}
td.hol,th.hol{background:#fbdcdc !important}
td.today,th.today{background:#fff3c4 !important;box-shadow:inset 2px 0 0 #f0a800,inset -2px 0 0 #f0a800}
thead th.today{background:#f5b82e !important;color:#222}
.sch{background:#7fd1d1 !important}
tr.sorted-sep td{border-top:2px solid #cfd7e3}
.nm b{font-weight:600}.nm small{display:block;color:var(--mut);font-size:11px;line-height:1.1}
tfoot td{position:sticky;bottom:0;z-index:2;background:#f8fafc;font-size:11px;color:var(--mut);height:22px}
tfoot td.a1{background:#fff1d6}tfoot td.a2{background:#ffd9a3}tfoot td.a3{background:#ffb35c;color:#000}
@media(max-width:860px){#shell{flex-direction:column}#side{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap}#side .grp,#side .foot{display:none}}

tfoot td.namecol{z-index:4}
.tbl td .sm{margin:1px 0}
/* ---------- popup */
.ov{position:fixed;inset:0;background:rgba(15,30,50,.45);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:50;overflow:auto}
.modal{background:#fff;border-radius:14px;width:100%;max-width:640px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .mh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal .mh h2{margin:0;flex:1}.modal .mb{padding:16px 18px}
button.x{border:0;background:transparent;font-size:16px;padding:4px 8px}
.kvs{display:grid;gap:4px}.kv{display:flex;gap:10px}.kv span{width:170px;flex:none;color:var(--mut)}.kv b{font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0}.kpis .big{font-size:22px}
.scroll.short{max-height:260px}
button.lnk{display:block;width:100%;text-align:left;border:0;background:transparent;padding:2px 4px;border-radius:6px}
button.lnk:hover{background:#eef0f8}
.kpi.click{cursor:pointer}.kpi.click:hover{border-color:var(--pri);box-shadow:0 2px 8px rgba(47,111,237,.15)}
/* sélection dans le planning */
table.pl{user-select:none}
table.pl tr.ent td.d{cursor:cell}table.pl td.d.has{cursor:pointer}
table.pl td.sel{outline:2px solid var(--pri);outline-offset:-2px;background:#dbe7ff !important}
table.pl tr.ent:hover td.d:not(.today):not(.hol){background-image:linear-gradient(rgba(47,111,237,.06),rgba(47,111,237,.06))}
/* reporting */
.tbl .num,.rp .num{text-align:right}.rp .k{display:inline-block;padding:1px 8px;border-radius:5px;color:#222;text-transform:none;letter-spacing:0}
.rp tfoot td{font-weight:700;background:#f6f8fc;position:static}
.mt{margin-top:18px}
/* organigramme */
.org-wrap{overflow:auto;padding:10px 0}
.org{display:flex;justify-content:center;min-width:max-content}
.node{display:flex;flex-direction:column;align-items:center;position:relative}
.kids{display:flex;gap:18px;align-items:flex-start;padding-top:22px;position:relative}
.kids::before{content:"";position:absolute;top:0;left:50%;height:11px;border-left:2px solid #c3cddc}
.kids>.node{position:relative;padding-top:11px}
.kids>.node::before{content:"";position:absolute;top:0;left:0;right:0;border-top:2px solid #c3cddc}
.kids>.node:first-child::before{left:50%}.kids>.node:last-child::before{right:50%}.kids>.node:only-child::before{display:none}
.kids>.node::after{content:"";position:absolute;top:0;left:50%;height:11px;border-left:2px solid #c3cddc}
.ocard{display:flex;gap:10px;align-items:center;width:200px;padding:9px 11px;background:#fff;border:1px solid var(--line);border-left:4px solid #9fb4d3;border-radius:10px;box-shadow:0 1px 3px rgba(20,40,70,.08);margin-bottom:0}
.ocard.r-manager{border-left-color:var(--pri)}.ocard.r-team_leader{border-left-color:#8a63d2}
.ocard.mv{cursor:grab}.ocard.drg{opacity:.4}.ocard.over{outline:3px dashed var(--ok);background:#effaf3}
.ocard .ot{min-width:0}.ocard b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.kids.v{flex-direction:column;gap:8px;align-items:flex-start;padding:8px 0 0 0;margin-left:20px;border-left:2px solid #c3cddc}
.kids.v::before{display:none}
.kids.v>.node{padding-top:0;align-items:flex-start;padding-left:14px}
.kids.v>.node::before{display:none}
.kids.v>.node::after{top:22px;left:0;width:14px;height:0;border-left:0;border-top:2px solid #c3cddc}
.org-wrap{padding-bottom:20px}
.ocard.bad{outline:3px dashed var(--ko);background:#fff1f0}

/* ---------- charte Groupe Faubourg : bleu nuit #000938, cyan #00FDFF, fond gris clair */
#side .logo{flex-direction:column;align-items:flex-start;gap:8px}
#side .logo .brand-row{display:flex;gap:8px;align-items:center}
img.brand{display:block;max-width:100%;height:auto;max-height:46px}
.brands{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-bottom:10px}
.login .brands img.brand{max-height:54px;filter:none}
.login{border-top:4px solid var(--cy);background:#fff}
.login h1{color:var(--pri)}
h1,h2{color:var(--pri)}
.banner{background:#e6fdff;border-bottom:1px solid #a6f3f5;color:#00505a}
.seg button.on{background:var(--pri);border-color:var(--pri)}
button.pri{background:var(--pri);border-color:var(--pri)}
button.pri:hover{background:var(--pri-d);border-color:var(--pri-d)}
#top{border-bottom:2px solid var(--cy)}
.kpi.click:hover{border-color:var(--pri);box-shadow:0 2px 8px rgba(0,9,56,.15)}
progress{accent-color:var(--pri)}
body.anon{background:var(--pri)}
.login{background:var(--pri);color:#fff;border:1px solid #1a2780;border-top:4px solid var(--cy)}
.login h1,.login h2{color:#fff}.login .mut,.login label{color:#b8c2ee}
.login button.pri{background:var(--cy);border-color:var(--cy);color:var(--pri);font-weight:700}
.login button.pri:hover{background:#7ffeff;border-color:#7ffeff}

.brandbox{background:#fff;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-bottom:6px}
.brandbox:empty{display:none}
.brandbox img.brand{max-height:44px;width:auto;max-width:100%}
.login .brandbox{width:auto;display:inline-flex;margin-bottom:14px;padding:10px 16px}
.login .brandbox img.brand{max-height:60px}