body { margin:0; padding:24px; font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif; color:#111; background:#fafafa; }
nav { display:flex; gap:16px; align-items:center; padding-bottom:12px; border-bottom:1px solid #ddd; margin-bottom:20px; }
nav a { color:#0b6; text-decoration:none; font-weight:600; }
nav .me { margin-left:auto; color:#666; font-size:13px; }
button.link { background:none; border:0; color:#c33; cursor:pointer; font:inherit; padding:0; }
h1 { font-size:20px; } h2 { font-size:16px; margin-top:28px; }
table { border-collapse:collapse; width:100%; background:#fff; font-size:14px; }
th,td { border:1px solid #e3e3e3; padding:6px 10px; text-align:left; }
th { background:#f0f0f0; }
.kpis { display:flex; gap:12px; flex-wrap:wrap; }
.kpis div { background:#fff; border:1px solid #e3e3e3; border-radius:10px; padding:14px 18px; min-width:130px; }
.kpis b { display:block; font-size:26px; } .kpis span { color:#666; font-size:13px; }
.card { max-width:340px; margin:8vh auto; background:#fff; padding:24px; border-radius:12px;
  border:1px solid #e3e3e3; display:flex; flex-direction:column; gap:12px; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:#444; }
input,select,textarea { padding:9px; border:1px solid #ccc; border-radius:7px; font:inherit; }
form.card button, form.grid button { padding:11px; background:#0b6; color:#fff; border:0; border-radius:8px;
  font-weight:600; cursor:pointer; }
.err { color:#c33; font-size:13px; } .ok { color:#0b6; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; background:#fff;
  padding:16px; border:1px solid #e3e3e3; border-radius:10px; margin-bottom:20px; }
code.tok { display:block; padding:12px; background:#111; color:#0f0; border-radius:8px; word-break:break-all; }

/* ------------------------------------------------ tableau de bord niveau 1 --
   La CSP du dashboard est `style-src 'self'` : aucun style en ligne n'est
   possible, donc pas de style="width:…". Les barres utilisent les classes
   .w0 à .w100 par paliers de 5 %, générées ci-dessous. */
h3 { font-size:14px; margin:0 0 8px; color:#444; }
.sub { font-weight:400; font-size:13px; color:#888; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.nowrap { white-space:nowrap; }
.na { color:#999; font-style:italic; }
.kpis div i { display:block; font-style:normal; font-size:12px; color:#0b6; font-weight:600; }
.kpis.small b { font-size:20px; }

.note { max-width:760px; font-size:13px; color:#555; background:#fff;
  border:1px solid #e3e3e3; border-left:3px solid #bbb; border-radius:0 8px 8px 0;
  padding:10px 14px; margin:10px 0 0; }
.note.warn { border-left-color:#e8a33d; background:#fffdf7; }
.note code { background:#f0f0f0; padding:1px 4px; border-radius:3px; }

.bar { display:block; width:100%; min-width:80px; height:10px; background:#eee;
  border-radius:5px; overflow:hidden; }
.bar i { display:block; height:100%; background:#0b6; border-radius:5px; }
.barcell { width:34%; }
.w0{width:0} .w5{width:5%} .w10{width:10%} .w15{width:15%} .w20{width:20%}
.w25{width:25%} .w30{width:30%} .w35{width:35%} .w40{width:40%} .w45{width:45%}
.w50{width:50%} .w55{width:55%} .w60{width:60%} .w65{width:65%} .w70{width:70%}
.w75{width:75%} .w80{width:80%} .w85{width:85%} .w90{width:90%} .w95{width:95%}
.w100{width:100%}

.hours td { padding:3px 10px; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:12px; }
.col { background:#fff; border:1px solid #e3e3e3; border-radius:10px; padding:14px; }
.col table { font-size:13px; }
.col th, .col td { border:0; border-bottom:1px solid #f0f0f0; padding:4px 6px; }
.col td.k { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:600; }
.t-ok  { background:#e6f7ef; color:#0a7a4f; }
.t-mid { background:#fff6e5; color:#8a5a00; }
.t-low { background:#f1f1f1; color:#666; }

table.kv th { width:200px; background:#f7f7f7; font-weight:600; }
table.kv, table.timeline { max-width:900px; }
td.ua { font:12px/1.5 ui-monospace,Consolas,monospace; word-break:break-all; max-width:640px; }

form.inline { display:inline; }