:root{
  --poppy:#C8102E; --poppy-dark:#8c0d22; --ink:#23262e; --muted:#7b8089;
  --soft:#fbeceb; --soft2:#fdf6f5; --line:#e7e3e1; --navy:#3a3f5c; --grey:#9a9a9a;
  --bg:#f4f5f7; --card:#ffffff;
  --ok:#1f9d57; --warn:#e08a00; --bad:#d23b2e; --info:#3a6ea5; --violet:#7a3ea5;
  --sh:0 1px 3px rgba(20,20,40,.06),0 4px 14px rgba(20,20,40,.05);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.hidden{display:none !important;}

/* ---- LOGIN ---- */
#login{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 80% -10%, #fbeceb 0%, #f4f5f7 55%);}
.login-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:30px 30px 26px;width:380px;max-width:92vw;text-align:center;}
.login-card img{height:74px;margin-bottom:6px;}
.login-card h1{font-size:18px;margin:4px 0 2px;color:var(--poppy-dark);}
.login-card p{color:var(--muted);font-size:12.5px;margin:0 0 18px;}
.login-card .field{text-align:left;}
.login-demo{font-size:11px;color:var(--muted);margin-top:14px;}

/* ---- APP SHELL ---- (scopé body>.app pour ne pas entrer en collision avec .ev.app du calendrier) */
body>.app{display:grid;grid-template-columns:250px 1fr;grid-template-rows:60px 1fr;height:100vh;}
.top{grid-column:1/3;display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--line);padding:0 16px;z-index:20;}
.top .logo{height:40px;width:auto;}
.top .ttl{font-weight:800;color:var(--poppy-dark);line-height:1.1;}
.top .ttl small{display:block;font-weight:600;color:var(--muted);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;}
.top .spacer{flex:1;}
.searchbox{position:relative;}
.searchbox input{width:300px;max-width:36vw;border:1px solid var(--line);border-radius:22px;padding:8px 14px 8px 34px;font-size:13px;background:var(--bg);}
.searchbox input:focus{outline:none;border-color:var(--poppy);background:#fff;}
.searchbox::before{content:"⌕";position:absolute;left:12px;top:7px;color:var(--muted);font-size:15px;}
.rolesel{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12.5px;background:#fff;color:#444;}
.bell{position:relative;font-size:18px;color:#555;cursor:pointer;}
.bell .cnt{position:absolute;top:-6px;right:-7px;background:var(--poppy);color:#fff;font-size:9px;font-weight:700;border-radius:10px;padding:1px 5px;}
.badge-demo{background:var(--soft);color:var(--poppy-dark);border:1px solid #f0c8c2;border-radius:20px;padding:4px 11px;font-size:11px;font-weight:700;white-space:nowrap;}
.user{display:flex;align-items:center;gap:9px;cursor:pointer;}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--poppy),var(--poppy-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.user .meta{font-size:12px;line-height:1.2;}
.user .meta b{font-weight:700;display:block;}
.user .meta span{color:var(--muted);}
.burger{display:none;font-size:22px;background:none;border:0;cursor:pointer;color:#444;}

/* ---- SIDEBAR ---- */
.side{background:#fff;border-right:1px solid var(--line);padding:10px 10px 30px;overflow:auto;}
.side .grp{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:14px 10px 6px;font-weight:700;}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav button{display:flex;align-items:center;gap:11px;background:none;border:0;cursor:pointer;width:100%;text-align:left;
  padding:9px 12px;border-radius:9px;color:#3a3d44;font-size:13.5px;font-weight:600;}
.nav button .ic{width:20px;text-align:center;font-size:15px;opacity:.85;}
.nav button:hover{background:var(--soft2);}
.nav button.active{background:var(--poppy);color:#fff;box-shadow:0 2px 8px rgba(200,16,46,.28);}

/* ---- MAIN ---- */
.main{overflow:auto;padding:22px 26px 40px;}
.ph{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.ph h1{font-size:21px;margin:0;font-weight:800;}
.ph .sub{color:var(--muted);font-size:13px;margin-top:3px;}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap;}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.toolbar .sp{flex:1;}

/* ---- BUTTONS ---- */
.btn{background:var(--poppy);color:#fff;border:0;border-radius:8px;padding:9px 15px;font-weight:700;font-size:13px;cursor:pointer;}
.btn:hover{background:var(--poppy-dark);}
.btn.ghost{background:#fff;color:var(--poppy-dark);border:1px solid #f0c8c2;}
.btn.ghost:hover{background:var(--soft2);}
.btn.neutral{background:#eef0f3;color:#3a3d44;}
.btn.neutral:hover{background:#e3e6ea;}
.btn.danger{background:var(--bad);}
.btn.sm{padding:5px 11px;font-size:12px;}
.btn.tiny{padding:3px 9px;font-size:11px;border-radius:6px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---- CARDS / KPI ---- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;border-top:4px solid var(--poppy);box-shadow:var(--sh);}
.kpi .l{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;}
.kpi .n{font-size:25px;font-weight:800;margin-top:6px;}
.kpi .d{font-size:11.5px;margin-top:4px;color:var(--muted);}
.up{color:var(--ok);} .down{color:var(--bad);}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px;box-shadow:var(--sh);}
.panel h2{font-size:14px;margin:0 0 12px;font-weight:800;display:flex;align-items:center;gap:8px;}
.panel h2 .tag{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600;}

/* ---- TABLES ---- */
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
th.sortable{cursor:pointer;user-select:none;}
th.sortable:hover{color:var(--poppy);}
th .ar{font-size:9px;opacity:.6;}
td{padding:9px 10px;border-bottom:1px solid #f1eeec;vertical-align:middle;}
tr:last-child td{border-bottom:0;}
tbody tr.click{cursor:pointer;}
tbody tr.click:hover{background:var(--soft2);}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:13px;}

/* ---- BADGES / CHIPS ---- */
.b{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;}
.b.green{background:#e6f6ec;color:var(--ok);} .b.orange{background:#fff2dc;color:var(--warn);}
.b.red{background:#fde7e4;color:var(--bad);} .b.blue{background:#e7f0fb;color:var(--info);}
.b.grey{background:#eee;color:#666;} .b.navy{background:#e6e8f2;color:var(--navy);}
.b.violet{background:#efe6f6;color:var(--violet);}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{background:var(--soft2);border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-size:11.5px;color:#555;}
.chip.on{background:var(--poppy);color:#fff;border-color:var(--poppy);cursor:pointer;}
.chip.sel{cursor:pointer;} .chip.sel:hover{border-color:var(--poppy);}
.stars{color:var(--warn);letter-spacing:1px;}
.flag{display:inline-flex;align-items:center;gap:6px;background:#eef7f1;border:1px solid #c9e9d5;color:#177a44;border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:700;}
.flag.info{background:#eef3fb;border-color:#cfe0ef;color:#2f5d8a;}
.note{color:var(--muted);font-size:12px;}

/* ---- FORMS ---- */
.field{margin-bottom:13px;}
.field>label{display:block;font-size:12px;font-weight:700;color:#4a4d54;margin-bottom:5px;}
.input,.select,.textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink);}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--poppy);box-shadow:0 0 0 3px rgba(200,16,46,.10);}
.textarea{min-height:74px;resize:vertical;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-row.three{grid-template-columns:1fr 1fr 1fr;}
.help{font-size:11px;color:var(--muted);margin-top:4px;}

/* ---- MODAL ---- */
#modal-root{position:fixed;inset:0;z-index:50;display:none;}
#modal-root.open{display:block;}
.modal-back{position:absolute;inset:0;background:rgba(20,20,35,.42);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto;}
.modal{background:#fff;border-radius:16px;width:560px;max-width:96vw;box-shadow:0 18px 60px rgba(0,0,0,.3);animation:pop .18s ease;}
.modal.wide{width:880px;}
@keyframes pop{from{transform:translateY(10px) scale(.99);opacity:0;}to{transform:none;opacity:1;}}
.modal-h{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line);}
.modal-h h3{margin:0;font-size:15.5px;font-weight:800;}
.modal-x{margin-left:auto;background:none;border:0;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;}
.modal-b{padding:18px;max-height:74vh;overflow:auto;}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid var(--line);background:#fafafa;border-radius:0 0 16px 16px;}

/* ---- TOAST ---- */
#toast-root{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:8px;}
.toast{background:#23262e;color:#fff;padding:10px 15px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(10px);transition:.25s;}
.toast.show{opacity:1;transform:none;}
.toast.bad{background:var(--bad);} .toast.warn{background:var(--warn);} .toast.ok{background:var(--ok);}

/* ---- TABS ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap;}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:9px 14px;font-weight:700;color:var(--muted);cursor:pointer;font-size:13px;}
.tabs button.active{color:var(--poppy-dark);border-bottom-color:var(--poppy);}
.tabpane{display:none;} .tabpane.active{display:block;}
.kv{display:grid;grid-template-columns:190px 1fr;gap:9px 14px;font-size:13px;}
.kv .k{color:var(--muted);font-weight:600;}

/* ---- FICHE ---- */
.frm{display:flex;gap:14px;align-items:center;margin-bottom:14px;}
.frm .av{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#c9ccd6,#9a9a9a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;}
.fcard{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px;box-shadow:var(--sh);}
.fcard .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#c9ccd6,#9a9a9a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;}

/* ---- PROGRESS ---- */
.prog{height:9px;border-radius:6px;background:#eee;overflow:hidden;}
.prog>i{display:block;height:100%;background:var(--poppy);}
.ring{--p:0;width:54px;height:54px;border-radius:50%;background:conic-gradient(var(--poppy) calc(var(--p)*1%), #eee 0);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
.ring span{background:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* ---- KANBAN ---- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px;}
.kcol{background:#f0f1f4;border-radius:12px;padding:10px;min-height:120px;}
.kcol h3{font-size:12px;margin:2px 4px 10px;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.4px;color:#555;}
.kcol h3 .cnt{margin-left:auto;background:#fff;border-radius:10px;padding:0 7px;font-size:11px;}
.kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:9px;box-shadow:var(--sh);cursor:grab;}
.kcard.drag{opacity:.5;}
.kcol.over{outline:2px dashed var(--poppy);outline-offset:-4px;}
.kcard b{font-size:13px;} .kcard .m{font-size:11.5px;color:var(--muted);margin-top:3px;}

/* ---- CALENDAR ---- */
.cal{width:100%;border-collapse:collapse;table-layout:fixed;}
.cal th{text-align:center;}
.cal td{height:92px;vertical-align:top;border:1px solid #efeae8;padding:5px;}
.cal td.off{background:#fafafa;}
.cal .dn{font-size:11px;color:var(--muted);font-weight:700;}
.cal td.today{background:#fff6f5;outline:2px solid var(--poppy);outline-offset:-2px;}
.ev{display:block;font-size:10.5px;border-radius:5px;padding:2px 6px;margin-top:3px;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;}
.ev.conflict{box-shadow:0 0 0 2px #ffd23f;}
.ev.inter{background:#3a6ea5;} .ev.intra{background:#1f9d57;} .ev.jp{background:#e08a00;}
.ev.app{background:#7a3ea5;} .ev.aube{background:#C8102E;} .ev.col{background:#3a3f5c;}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;color:#555;}
.legend span{display:flex;align-items:center;gap:6px;}
.sq{width:12px;height:12px;border-radius:3px;display:inline-block;}

/* ---- CHARTS ---- */
.bars{display:flex;align-items:flex-end;gap:12px;padding-top:10px;}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;height:100%;}
.bar .bcol{width:66%;min-height:3px;background:linear-gradient(180deg,var(--poppy),#e8607a);border-radius:6px 6px 0 0;transition:height .4s;}
.bar .bl{font-size:11px;color:var(--muted);}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.donut{border-radius:50%;position:relative;}
.donut::after{content:"";position:absolute;inset:24%;background:#fff;border-radius:50%;}
.donut-leg{font-size:12.5px;display:flex;flex-direction:column;gap:6px;}
.donut-leg .dl{display:flex;align-items:center;gap:8px;}
.donut-leg .dl i{width:12px;height:12px;border-radius:3px;display:inline-block;}

/* ---- DOC PREVIEW ---- */
.doc{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 30px;font-size:12.5px;line-height:1.6;box-shadow:var(--sh);max-width:640px;margin:auto;}
.doc h4{color:var(--poppy-dark);margin:0 0 4px;}
.doc .doc-head{display:flex;justify-content:space-between;border-bottom:2px solid var(--poppy);padding-bottom:8px;margin-bottom:14px;}
.doc .sig{margin-top:24px;display:flex;justify-content:space-between;color:var(--muted);}
.xmlbox{background:#1e2230;color:#cfe3ff;font-family:Consolas,monospace;font-size:11px;border-radius:8px;padding:12px;white-space:pre;overflow:auto;max-height:260px;}

/* ---- RESPONSIVE ---- */
@media(max-width:880px){
  body>.app{grid-template-columns:1fr;}
  .side{position:fixed;top:60px;bottom:0;left:0;width:240px;z-index:30;transform:translateX(-100%);transition:.25s;}
  body.side-open .side{transform:none;}
  .burger{display:block;}
  .searchbox input{width:150px;}
  .cards{grid-template-columns:1fr 1fr;}
  .grid2,.grid3,.form-row,.form-row.three{grid-template-columns:1fr;}
  .user .meta{display:none;}
}