:root{--petrol:#12354A;--petrol-2:#1D4A63;--petrol-3:#2A6283;--steel:#EEF1F3;--surface:#fff;--ink:#1A2328;--muted:#5B6B73;--line:#D9DFE3;--signal:#F2B705;--signal-soft:#FFF4CC;--ok:#2E7D4F;--danger:#B3261E;
  --c-atelier:#12354A;--c-atelier-bg:#E2ECF3;--c-ecran:#8A6100;--c-ecran-bg:#FFF1C2;--c-rh:#2E7D4F;--c-rh-bg:#DFF1E6;--c-gestion:#5A4A9C;--c-gestion-bg:#ECE8F8;--c-public:#4D5B63;--c-public-bg:#E9EDEF;
  font-family:"Bahnschrift","DIN Alternate","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--steel)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--petrol-3)}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.ico{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.logo-bg{fill:var(--signal)}.logo-bar{fill:var(--petrol)}.logo-text{fill:var(--petrol);font:800 15px/1 "Bahnschrift","Segoe UI",system-ui,sans-serif;letter-spacing:.5px}
header.bar{background:var(--petrol);color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:4px solid var(--signal)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font-size:18px;font-weight:700;letter-spacing:.02em}
.brand-text small{font-size:12px;opacity:.75;letter-spacing:.08em}
header.bar nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.navbtn{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);background:transparent;border-radius:20px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
.navbtn:hover{background:rgba(255,255,255,.1)}
main{max-width:1080px;margin:0 auto;padding:24px 20px 64px}
h1{font-size:26px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:19px;font-weight:600;margin:30px 0 12px}
p.lead{color:var(--muted);margin:0 0 20px}
.hello{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:8px}
.hello .date{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.hello .who{display:flex;align-items:center;gap:14px}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--signal-soft);color:var(--petrol);display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}
.cat-head{display:flex;align-items:center;gap:10px;margin:30px 0 12px}
.cat-head h2{margin:0}
.cat-head .count{font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1px 8px}
.chipico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tag{position:relative;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;min-height:118px;transition:border-color .15s,transform .15s}
.tag:hover{border-color:var(--petrol-3);transform:translateY(-2px)}
.tag .badgeico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.tag strong{display:block;font-size:16px;font-weight:600;line-height:1.25}
.tag span.sub{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.tag .out{position:absolute;top:14px;right:14px;color:var(--muted)}
.cat-atelier .chipico,.cat-atelier .badgeico{background:var(--c-atelier-bg);color:var(--c-atelier)}
.cat-ecran .chipico,.cat-ecran .badgeico{background:var(--c-ecran-bg);color:var(--c-ecran)}
.cat-rh .chipico,.cat-rh .badgeico{background:var(--c-rh-bg);color:var(--c-rh)}
.cat-gestion .chipico,.cat-gestion .badgeico{background:var(--c-gestion-bg);color:var(--c-gestion)}
.cat-public .chipico,.cat-public .badgeico{background:var(--c-public-bg);color:var(--c-public)}
@media (prefers-reduced-motion:reduce){.tag{transition:none}.tag:hover{transform:none}}
body.auth-page{background:linear-gradient(var(--petrol) 0 300px,var(--steel) 300px);min-height:100vh}
.auth{max-width:430px;margin:40px auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto;padding-top:36px;color:#fff;text-align:center}
.auth-logo b{font-size:20px;letter-spacing:.02em}
.auth-logo small{opacity:.75;font-size:13px;letter-spacing:.1em}
.auth h1{display:flex;align-items:center;gap:8px;font-size:22px}
label{display:block;font-size:14px;color:var(--muted);margin:14px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=search]{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus{border-color:var(--petrol-3)}
button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--petrol);background:var(--petrol);color:#fff;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button:hover{background:var(--petrol-2)}
button.ghost{background:transparent;color:var(--petrol)}
button.ghost:hover{background:var(--c-atelier-bg)}
button.small{padding:6px 11px;font-size:14px;border-radius:8px}
button.danger{background:var(--danger);border-color:var(--danger)}
button:disabled{opacity:.5;cursor:default}
.full{width:100%;margin-top:20px}
.msg{margin-top:14px;font-size:15px;min-height:1.2em}
.msg.err{color:var(--danger)}.msg.ok{color:var(--ok)}
.hint{font-size:14px;color:var(--muted)}
.qr{display:block;margin:16px auto;border:1px solid var(--line);padding:6px;background:#fff;border-radius:8px}
code.key{display:block;word-break:break-all;background:var(--steel);padding:8px;border-radius:8px;font-size:14px;text-align:center}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.tabs button{border-radius:22px;padding:8px 14px}
.tabs button[aria-selected=true]{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.tabs button[aria-selected=false]{background:var(--surface);border-color:var(--line);color:var(--petrol)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.row{border-bottom:1px solid var(--line);padding:14px 0;display:grid;gap:8px}
.row:last-child{border-bottom:0}
.row .who{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:13px;padding:2px 9px;border-radius:12px;background:var(--steel);color:var(--ink)}
.badge.pending{background:#FDF0C4;color:#6B4E00}.badge.active{background:#DCEFE3;color:#1E5435}.badge.suspended,.badge.rejected{background:#F6DAD8;color:#7A1A14}
.checks{display:flex;flex-wrap:wrap;gap:6px 16px}
.checks label{display:flex;gap:6px;align-items:center;margin:0;color:var(--ink);font-size:15px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.log{font-size:14px;overflow-x:auto}
.log table{border-collapse:collapse;width:100%;min-width:560px}
.log td,.log th{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.hidden{display:none!important}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.toolbar select,.toolbar input,.panel select,.panel input[type=date],.panel input[type=number],.panel input[type=month],.panel textarea,.auth select,.auth textarea,.auth input[type=date],.auth input[type=number],.auth input[type=file]{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);max-width:100%}
.panel textarea,.auth textarea{width:100%;min-height:70px}
.auth select,.auth input[type=date],.auth input[type=number]{width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink);padding:5px 11px;border-radius:14px;font-size:14px}
.chip:hover{background:var(--steel)}
.chip[aria-pressed=true]{background:var(--signal);border-color:var(--signal)}
.grid{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.grid table{border-collapse:collapse;font-size:13px}
.grid th,.grid td{border:1px solid var(--line);padding:0;text-align:center;min-width:30px;height:30px}
.grid th{background:var(--steel);font-weight:600;padding:2px 4px}
.grid th.name,.grid td.name{position:sticky;left:0;background:#fff;text-align:left;padding:4px 8px;min-width:150px;white-space:nowrap;z-index:1}
.grid td button{all:unset;display:block;width:100%;height:30px;line-height:30px;cursor:pointer;text-align:center}
.grid td.rest{background:#EEF0F1;color:var(--muted)}
.grid td.ferie{background:#FDF0C4}
.grid td.abs{background:#F6DAD8;color:#7A1A14;font-weight:600}
.grid td.req{background:#DCE9F5;color:#12354A;font-weight:600}
.grid td.ww{background:#FBE3C9;color:#8A4B08;font-weight:700}
.grid td.wwrest{background:#E3EEF7;color:#12354A}
.grid th.we{color:var(--muted)}
.legend{font-size:13px;color:var(--muted);margin:8px 0 0}
.card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:#fff}
.card h3{margin:0 0 4px;font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}
.req-type{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.req-type .ico{color:var(--petrol-3)}
.sum{overflow-x:auto}
.sum table{border-collapse:collapse;width:100%;min-width:700px;font-size:14px}
.sum th,.sum td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right}
.sum th{background:var(--steel)}
.sum th:first-child,.sum td:first-child{text-align:left}
.warn{display:inline-flex;align-items:center;gap:4px;color:#6B4E00;background:#FDF0C4;padding:2px 7px;border-radius:6px;font-size:13px}
.box-secret{background:var(--signal-soft);border:1px dashed var(--c-ecran);padding:10px;border-radius:10px;word-break:break-all;margin-top:8px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px}
.form-grid label input,.form-grid label select{display:block;width:100%;margin-top:4px}
.perm-tree{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:6px}
.perm-tree h4{margin:0 0 6px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
.perm-tree strong{display:block;margin-top:8px;font-size:14px}
.ww-box{border-left:6px solid var(--signal)}
.ww-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.ww-line span{min-width:200px}
.page-title{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.page-title .chipico{width:44px;height:44px;border-radius:12px}
@media (max-width:560px){.auth{margin:24px 12px;padding:22px}main{padding:18px 14px 56px}.brand-text small{display:none}.navbtn span.lbl{display:none}h1{font-size:22px}}
.kpi{--k-bg:#ECEBE6;--k-surface:#FAFAF7;--k-line:#D6D4CC;--k-ink:#18202B;--k-muted:#6B7079;--k-yellow:#F2C200;--k-green:#2E8550;--k-red:#BF3B28;--k-orange:#C87410;--k-blue:#2F6DB5;
  --cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;--kbody:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  font:400 16px/1.45 var(--kbody);color:var(--k-ink);background:var(--k-bg);margin:-18px;padding:16px;border-radius:14px}
.kpi button{font-family:inherit}
.kpi .period{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.kpi .seg{display:inline-flex;background:var(--k-surface);border:1px solid var(--k-line);border-radius:12px;padding:3px}
.kpi .seg button{border:0;background:none;padding:7px 14px;border-radius:9px;font-weight:600;color:var(--k-muted)}
.kpi .seg button:hover{background:none}
.kpi .seg button[aria-pressed=true]{background:var(--k-yellow);color:#18202B}
.kpi .nav{display:inline-flex;gap:4px}
.kpi .nav button{width:38px;height:38px;border-radius:10px;border:1px solid var(--k-line);background:var(--k-surface);color:var(--k-ink);font-size:20px;line-height:1;padding:0}
.kpi .btn{border:1px solid var(--k-line);background:var(--k-surface);color:var(--k-ink);border-radius:10px;padding:8px 14px;font-weight:600}
.kpi select.garage{appearance:none;background:var(--k-surface);border:1px solid var(--k-line);border-radius:10px;padding:9px 14px;font-weight:600;color:var(--k-ink)}
.kpi .plabel{font:600 24px/1.1 var(--cond);margin:12px 0 2px}
.kpi .pnote{font-size:13px;color:var(--k-muted);margin:0 0 14px}
.kpi h2{font:700 20px/1.1 var(--cond);margin:24px 0 10px}
.kpi .now{background:var(--k-surface);border:1px solid var(--k-line);border-radius:16px;padding:14px}
.kpi .nowhead{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:10px}
.kpi .big{font:700 40px/1 var(--cond)}
.kpi .big span{display:block;font:500 13px/1.3 var(--kbody);color:var(--k-muted);margin-top:2px}
.kpi .big.good{color:var(--k-green)}.kpi .big.bad{color:var(--k-red)}.kpi .big.mid{color:var(--k-orange)}.kpi .big.blue{color:var(--k-blue)}
.kpi .crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.kpi .mate{border:1px solid var(--k-line);border-radius:12px;padding:10px 12px;position:relative;overflow:hidden;background:var(--k-bg)}
.kpi .mate b{font:700 18px/1.1 var(--cond);letter-spacing:.3px;display:block}
.kpi .mate .soc{font-size:12.5px;color:var(--k-muted)}
.kpi .mate .st{font-size:13px;margin-top:3px;display:flex;align-items:center;gap:6px}
.kpi .mate .st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.kpi .mate.travail .st,.kpi .mate.extra .st{color:var(--k-green)}
.kpi .mate.repos .st,.kpi .mate.ferie .st,.kpi .mate.out .st{color:var(--k-muted)}
.kpi .mate.repos,.kpi .mate.ferie,.kpi .mate.out{opacity:.75}
.kpi .mate.conge .st{color:var(--k-blue)}
.kpi .mate.alerte{border-color:var(--k-orange)}.kpi .mate.alerte .st{color:var(--k-orange)}
.kpi .mate.absent{border-color:var(--k-red);padding-left:18px}.kpi .mate.absent .st{color:var(--k-red)}
.kpi .mate.absent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:repeating-linear-gradient(-45deg,var(--k-yellow) 0 6px,#18202B 6px 12px)}
.kpi .wk{overflow-x:auto;background:var(--k-surface);border:1px solid var(--k-line);border-radius:16px}
.kpi .wk table{border-collapse:collapse;width:100%;font-size:13px}
.kpi .wk th{font:600 12px/1.2 var(--kbody);color:var(--k-muted);padding:8px 4px;border-bottom:1px solid var(--k-line);text-align:center;white-space:nowrap}
.kpi .wk th.we{color:#9AA0A8}
.kpi .wk th.tod{color:var(--k-ink);box-shadow:inset 0 -3px 0 var(--k-yellow)}
.kpi .wk td{padding:6px 4px;border-bottom:1px solid var(--k-line);text-align:center}
.kpi .wk td.tod{background:color-mix(in srgb,var(--k-yellow) 10%,var(--k-surface))}
.kpi .wk tr:last-child td{border-bottom:0}
.kpi .wk .name{text-align:left;position:sticky;left:0;background:var(--k-surface);min-width:150px;padding-left:12px;z-index:1}
.kpi .wk .name b{font:700 16px/1.1 var(--cond);display:block}
.kpi .wk .name small{font-size:11.5px;color:var(--k-muted)}
.kpi .pill{display:inline-block;min-width:44px;padding:4px 6px;border-radius:7px;font:700 13px/1 var(--cond);letter-spacing:.2px}
.kpi .wk.mois .pill{min-width:22px;height:22px;padding:4px 2px;font-size:11.5px}
.kpi .wk.mois td{padding:4px 2px}
.kpi .pill.travail{background:color-mix(in srgb,var(--k-green) 16%,var(--k-surface));color:var(--k-green)}
.kpi .pill.extra{background:var(--k-green);color:#fff}
.kpi .pill.repos{background:#E4E2DB;color:var(--k-muted)}
.kpi .pill.ferie{background:color-mix(in srgb,var(--k-yellow) 30%,var(--k-surface));color:#5A4700}
.kpi .pill.conge{background:color-mix(in srgb,var(--k-blue) 15%,var(--k-surface));color:var(--k-blue)}
.kpi .pill.absent{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--k-red) 14%,var(--k-surface)) 0 5px,color-mix(in srgb,var(--k-red) 24%,var(--k-surface)) 5px 10px);color:var(--k-red)}
.kpi .pill.alerte{background:color-mix(in srgb,var(--k-orange) 18%,var(--k-surface));color:var(--k-orange)}
.kpi .pill.out{color:var(--k-muted)}
.kpi .leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 2px 0;font-size:12.5px;color:var(--k-muted)}
.kpi .leg span{display:inline-flex;align-items:center;gap:5px}
.kpi .leg .pill{min-width:14px;height:14px;padding:0;border-radius:4px}
.kpi .stuck{background:var(--k-surface);border:1px solid var(--k-line);border-radius:16px;padding:2px 14px;margin-top:22px}
.kpi details.sg summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 0;font:700 19px/1.1 var(--cond)}
.kpi details.sg summary::-webkit-details-marker{display:none}
.kpi details.sg summary::after{content:"\203A";margin-left:auto;font-size:22px;color:var(--k-muted);transition:transform .15s}
.kpi details.sg[open] summary::after{transform:rotate(90deg)}
.kpi details.sg summary small{font:400 12.5px var(--kbody);color:var(--k-muted)}
.kpi .restrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--k-line)}
.kpi .restrow b{font:700 17px/1.1 var(--cond);display:block}
.kpi .restrow small{font-size:12px;color:var(--k-muted)}
.kpi .days{display:flex;gap:4px}
.kpi .dayt{width:34px;height:34px;padding:0;border-radius:9px;border:1px solid var(--k-line);background:color-mix(in srgb,var(--k-green) 14%,var(--k-surface));color:var(--k-green);font:700 15px/1 var(--cond)}
.kpi .dayt:hover{background:color-mix(in srgb,var(--k-green) 22%,var(--k-surface))}
.kpi .dayt[aria-pressed=true]{background:#E4E2DB;color:var(--k-muted)}
.kpi .dayt:disabled{opacity:.7;cursor:default}
@media (max-width:560px){.kpi .big{font-size:32px}.kpi .nowhead{gap:16px}}