:root {
  --font-sans: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  
  /* Dark Mode (Deep Space Blue) - Default */
  --bg: oklch(0.12 0.025 270);
  --s1: oklch(0.14 0.025 270 / 0.8);
  --s2: oklch(0.16 0.02 270 / 0.6);
  --s3: oklch(0.22 0.02 270 / 0.7);
  --text: oklch(0.95 0.01 270);
  --muted: oklch(0.55 0.02 270);
  --border: oklch(0.30 0.02 270 / 0.5);
  
  --acc: oklch(0.82 0.25 130); /* neon-green */
  --acc2: oklch(0.72 0.22 330); /* neon-pink */
  --acc3: oklch(0.68 0.18 230); /* neon-blue */
  --acc4: oklch(0.65 0.20 300); /* neon-purple */
  
  --green: oklch(0.82 0.25 130);
  --red: oklch(0.55 0.22 25);
  --yellow: oklch(0.75 0.20 80);
  
  --glass-bg: oklch(0.18 0.02 270 / 0.5);
  --glass-border: oklch(0.35 0.02 270 / 0.3);
}

body.light {
  /* Light Mode (Frosted White) */
  --bg: oklch(0.97 0.005 270);
  --s1: oklch(0.96 0.005 270 / 0.8);
  --s2: oklch(0.98 0.003 270 / 0.7);
  --s3: oklch(0.92 0.01 270 / 0.8);
  --text: oklch(0.15 0.02 270);
  --muted: oklch(0.45 0.02 270);
  --border: oklch(0.85 0.01 270 / 0.5);
  
  --acc: oklch(0.65 0.22 145);
  --acc2: oklch(0.75 0.15 330);
  --acc3: oklch(0.65 0.18 200);
  --acc4: oklch(0.60 0.20 280);
  
  --green: oklch(0.65 0.22 145);
  --red: oklch(0.55 0.22 25);
  --yellow: oklch(0.70 0.20 80);
  
  --glass-bg: oklch(0.98 0.003 270 / 0.6);
  --glass-border: oklch(0.90 0.01 270 / 0.3);
}


body.light .nav{background:rgba(244,244,248,.96);}
body.light .fi{color:var(--text);}
body.light .fi option{background:#fff;}
*{margin:0;padding:0;box-sizing:border-box;}
html{overflow:hidden;width:100%;height:100%;position:fixed;}
body{overflow-y:auto;overflow-x:hidden;width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);padding-bottom:80px;overscroll-behavior:none;-webkit-overflow-scrolling:touch;}

/* === NAVIGATION === */
/* === NAV 3D FLOTTANTE === */
.nav{
  position:sticky;top:8px;z-index:300;
  display:flex;align-items:center;
  margin:8px 12px 0;
  padding:4px;
  border-radius:20px;
  background:oklch(0.16 0.025 270 / 0.75);
  backdrop-filter:blur(32px) saturate(1.8);
  -webkit-backdrop-filter:blur(32px) saturate(1.8);
  border:1px solid oklch(0.40 0.04 270 / 0.35);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.35),
    0 1px 0 oklch(0.60 0.04 270 / 0.30) inset,
    0 -2px 0 rgba(0,0,0,0.5) inset;
  transform-style:preserve-3d;
  transform:perspective(800px) rotateX(2deg);
}
body.light .nav{
  background:oklch(0.97 0.005 270 / 0.88);
  border-color:oklch(0.85 0.01 270 / 0.5);
  box-shadow:
    0 10px 32px rgba(0,0,0,0.14),
    0 3px 8px rgba(0,0,0,0.09),
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -2px 0 rgba(0,0,0,0.07) inset;
}

/* === ONGLETS 3D === */
.nt{
  flex:1;padding:9px 2px 7px;text-align:center;
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);cursor:pointer;
  border-radius:14px;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  /* relief 3D inactif subtil */
  background:transparent;
  box-shadow:none;
}
.nt svg{
  width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:all .2s;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}
/* Hover — légère élévation */
.nt:hover{
  color:oklch(0.75 0.05 270);
  background:oklch(0.22 0.02 270 / 0.5);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.25),
    0 1px 0 oklch(0.45 0.03 270 / 0.3) inset;
  transform:translateY(-1px);
}
/* Appui — s'enfonce */
.nt:active{
  transform:translateY(2px) scale(0.93);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.3),
    0 -1px 0 rgba(0,0,0,0.4) inset;
}
/* Onglet actif — pilule 3D lumineuse */
.nt.on{
  color:oklch(0.08 0.01 270);
  background:linear-gradient(160deg, oklch(0.90 0.27 130), oklch(0.72 0.25 130));
  box-shadow:
    0 5px 18px oklch(0.82 0.25 130 / 0.55),
    0 2px 6px oklch(0.82 0.25 130 / 0.30),
    0 1px 0 oklch(0.95 0.20 130 / 0.6) inset,
    0 -2px 0 oklch(0.55 0.25 130 / 0.4) inset;
  text-shadow:0 1px 2px rgba(0,0,0,0.20);
  transform:translateY(-1px);
}
.nt.on svg{
  stroke:oklch(0.10 0.01 270);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.25));
}
body.light .nt.on{
  color:#fff;
  background:linear-gradient(160deg, oklch(0.72 0.25 130), oklch(0.55 0.22 130));
}

/* === MENU HAMBURGER — intégré dans la nav === */
.hbg-btn{
  flex:1;padding:9px 2px 7px;
  border-radius:14px;
  background:transparent;border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
  position:relative;top:auto;right:auto;z-index:auto;
  width:auto;height:auto;
  box-shadow:none;backdrop-filter:none;
}
.hbg-btn:hover{
  background:oklch(0.22 0.02 270 / 0.5);
  box-shadow:0 3px 8px rgba(0,0,0,0.25),0 1px 0 oklch(0.45 0.03 270 / 0.3) inset;
  transform:translateY(-1px);
}
.hbg-btn:active{transform:translateY(2px) scale(0.93);}
.hbg-btn span{display:block;width:16px;height:2px;background:var(--muted);border-radius:2px;transition:all .3s;filter:drop-shadow(0 1px 1px rgba(0,0,0,0.4));}
.hbg-btn::after{content:'Menu';display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:1px;}

.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:490;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
.drawer-overlay.open{opacity:1;visibility:visible;pointer-events:all;}

.drawer{position:fixed;top:0;left:0;bottom:0;width:300px;z-index:495;background:var(--bg);border-right:1px solid var(--border);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;transform:translateX(-100%);}
body.light .drawer{background:#f4f4f8;}
.drawer.open{transform:translateX(0);}

.drawer-profile{padding:40px 20px 20px;background:var(--glass-bg);border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:center;text-align:center;}
.drawer-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--s2),var(--s3));border:3px solid var(--acc);display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:12px;cursor:pointer;overflow:hidden;position:relative;}
.drawer-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.drawer-avatar-hint{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.5);font-size:9px;color:white;padding:3px 0;text-align:center;}
.drawer-name{font-size:17px;font-weight:700;color:var(--text);margin-bottom:2px;}
.drawer-emp{font-size:12px;color:var(--muted);}
.drawer-idcc{font-size:10px;color:var(--acc);margin-top:4px;font-family:var(--font-mono);}

.drawer-section{padding:16px 20px 8px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;}

.drawer-item{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent;}
.drawer-item:active{background:var(--s2);}
.drawer-item-left{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;}
.drawer-item-left svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.drawer-item-val{font-size:12px;color:var(--muted);font-family:var(--font-mono);}

.drawer-foot{margin-top:auto;padding:16px 20px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);text-align:center;}
.drawer-foot span{color:var(--acc);font-weight:700;}
.releve-wrap{background:white;color:#111;font-family:'Space Grotesk',system-ui,sans-serif;border-radius:16px;padding:24px;}
.releve-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #1a5fb4;padding-bottom:14px;margin-bottom:18px;}
.releve-co{font-size:16px;font-weight:800;color:#1a5fb4;}
.releve-co2{font-size:10px;color:#888;margin-top:2px;}
.releve-right{text-align:right;}
.releve-title{font-size:13px;font-weight:800;color:#111;}
.releve-period{font-size:11px;color:#666;margin-top:3px;}
.releve-emp{font-size:12px;font-weight:700;color:#1a5fb4;margin-top:4px;}
.releve-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px;}
.releve-sb{background:#f0f4ff;border-radius:8px;padding:10px;text-align:center;}
.releve-sv{font-size:16px;font-weight:800;color:#1a5fb4;font-family:'JetBrains Mono',monospace;}
.releve-sl{font-size:9px;color:#888;margin-top:2px;text-transform:uppercase;}
table.releve-table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:14px;}
table.releve-table th{background:#1a5fb4;color:white;padding:6px 8px;text-align:left;font-size:9px;font-weight:700;text-transform:uppercase;}
table.releve-table th:nth-child(n+3){text-align:right;}
table.releve-table td{padding:5px 8px;border-bottom:1px solid #eee;vertical-align:middle;}
table.releve-table td:nth-child(n+3){text-align:right;font-family:'JetBrains Mono',monospace;}
table.releve-table tr.weekend td{background:#fafafa;color:#bbb;}
table.releve-table tr.repos td{background:#f0f8ff;color:#aaa;}
table.releve-table tr.worked td{background:white;}
table.releve-table tr.worked td:first-child{font-weight:600;}
table.releve-table tr.cp td{background:#f8f0ff;color:#6633cc;}
table.releve-table tr.maladie td{background:#fff0f0;color:#c0392b;}
table.releve-table tr.ferie td{background:#fffbe6;color:#b8860b;}
table.releve-table tr.totline td{background:#1a5fb4;color:white;font-weight:800;font-size:12px;padding:8px;}
.releve-foot{display:flex;justify-content:space-between;font-size:10px;color:#aaa;border-top:1px solid #eee;padding-top:10px;margin-top:4px;}
.releve-sign{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.releve-sign-box{border-top:1px solid #ccc;padding-top:8px;font-size:10px;color:#888;}
.releve-mention{font-size:9px;color:#aaa;text-align:center;margin-top:12px;padding-top:8px;border-top:1px solid #eee;}

.pg{display:none;padding:14px;}
.pg.on{display:block;}

/* === CONFIG & GENERIC CARD === */
.card{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:18px;padding:20px;margin-bottom:12px;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.35),
    0 2px 6px rgba(0,0,0,0.25),
    0 1px 0 oklch(0.45 0.03 270 / 0.25) inset,
    0 -2px 0 rgba(0,0,0,0.35) inset;
}
body.light .card{
  box-shadow:
    0 4px 16px rgba(0,0,0,0.10),
    0 1px 4px rgba(0,0,0,0.07),
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(0,0,0,0.05) inset;
}
.ct{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.ct svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
@keyframes pulse-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulse-ant{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@keyframes pulse-blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(0.08)}}
@keyframes mic-pulse-ring{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.08)}}
@keyframes pulse-dot{0%,100%{opacity:.3}50%{opacity:1}}
.info-btn{font-size:13px;cursor:pointer;color:var(--acc3);opacity:.7;font-style:normal;text-transform:none;letter-spacing:0;vertical-align:middle;}

.fld{margin-bottom:12px;}
.fld label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:700;letter-spacing:.3px;}
.fi{width:100%;background:oklch(0.20 0.02 270 / 0.5);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:var(--font-mono);font-size:14px;padding:10px 14px;outline:none;transition:border-color .15s,box-shadow .15s;}
.fi:focus{border-color:var(--acc);box-shadow:0 0 0 2px oklch(0.82 0.25 130 / 0.15);}
.fi option{background:var(--s2);}
body.light .fi{background:oklch(0.95 0.005 270 / 0.7);}
body.light .fi option{background:#fff;}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}

/* Toggle */
.tw{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);}
.tw:last-child{border-bottom:none;}
.tw-lbl{font-size:13px;font-weight:500;}
.tw-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.tgl{width:44px;height:25px;background:var(--s3);border-radius:13px;position:relative;cursor:pointer;border:none;flex-shrink:0;transition:background .2s;}
.tgl.on{background:var(--acc);}
.tgl::after{content:'';position:absolute;width:19px;height:19px;background:var(--bg);border-radius:50%;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.25);}
.tgl.on::after{transform:translateX(19px);}

/* === DASHBOARD === */
.hero{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border:1px solid oklch(0.40 0.04 270 / 0.35);
  border-radius:24px;padding:24px;margin-bottom:12px;overflow:hidden;
  box-shadow:
    0 10px 40px rgba(0,0,0,0.50),
    0 4px 12px rgba(0,0,0,0.35),
    0 1px 0 oklch(0.50 0.04 270 / 0.30) inset,
    0 -3px 0 rgba(0,0,0,0.45) inset;
}
body.light .hero{
  border-color:oklch(0.85 0.01 270 / 0.5);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 -2px 0 rgba(0,0,0,0.06) inset;
}
.hero::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:oklch(0.65 0.22 145 / 0.12);border-radius:50%;filter:blur(60px);pointer-events:none;}
.hero::after{content:'';position:absolute;bottom:-20px;left:-20px;width:120px;height:120px;background:oklch(0.72 0.22 330 / 0.1);border-radius:50%;filter:blur(50px);pointer-events:none;}
.h-date{font-size:11px;color:var(--muted);font-family:var(--font-mono);margin-bottom:4px;}
.h-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:6px;}
.h-net{font-family:var(--font-sans);font-size:48px;font-weight:800;color:var(--acc);line-height:1.05;margin:4px 0 6px;text-shadow:0 0 30px oklch(0.82 0.25 130 / 0.4);}
.h-sub{font-size:12px;color:var(--muted);}

.dash-alert{border-radius:14px;padding:12px 14px;margin-bottom:8px;font-size:13px;display:flex;align-items:center;gap:10px;border-left:3px solid;}
.aw{background:oklch(0.75 0.20 80 / 0.08);border-color:oklch(0.75 0.20 80 / 0.6);color:var(--yellow);}
.ai{background:oklch(0.68 0.18 230 / 0.08);border-color:oklch(0.68 0.18 230 / 0.6);color:var(--acc3);}
.ag{background:oklch(0.82 0.25 130 / 0.08);border-color:oklch(0.82 0.25 130 / 0.6);color:var(--green);}

.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.kpi{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:18px;padding:16px;
  transition:transform .2s, box-shadow .2s;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.38),
    0 2px 6px rgba(0,0,0,0.28),
    0 1px 0 oklch(0.42 0.03 270 / 0.28) inset,
    0 -2px 0 rgba(0,0,0,0.38) inset;
}
body.light .kpi{
  box-shadow:
    0 4px 14px rgba(0,0,0,0.10),
    0 1px 4px rgba(0,0,0,0.07),
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(0,0,0,0.05) inset;
}
.kpi:active{transform:scale(0.98);}
.kpi-ico{font-size:18px;margin-bottom:6px;opacity:.85;}
.kv{font-family:var(--font-mono);font-size:22px;font-weight:700;margin:4px 0 2px;}
.kv.green{color:var(--acc);}
.kv.pink{color:var(--acc2);}
.kv.blue{color:var(--acc3);}
.kv.purple{color:var(--acc4);}
.kl{font-size:11px;color:var(--muted);}

.card-section{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:18px;padding:20px;margin-bottom:12px;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.35),
    0 2px 6px rgba(0,0,0,0.25),
    0 1px 0 oklch(0.45 0.03 270 / 0.25) inset,
    0 -2px 0 rgba(0,0,0,0.35) inset;
}
body.light .card-section{
  box-shadow:
    0 4px 16px rgba(0,0,0,0.10),
    0 1px 4px rgba(0,0,0,0.07),
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(0,0,0,0.05) inset;
}
.card-title{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.card-title svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}

.cp-badge{font-size:10px;font-weight:700;color:var(--acc4);margin-bottom:8px;}
.grow{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:5px;}
.grow span:last-child{font-family:var(--font-mono);color:var(--text);}
.gauge{height:5px;background:var(--s3);border-radius:3px;margin-bottom:10px;}
.gf{height:100%;border-radius:3px;transition:width .5s;}
.gf.gc{background:var(--acc);}
.gf.gm{background:var(--acc2);}
.gf.ga{background:var(--acc3);}
.gf.gp{background:var(--acc4);}

/* === POINTAGE === */
.pbar{
  background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:16px;padding:14px;margin-bottom:12px;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.38),
    0 2px 6px rgba(0,0,0,0.28),
    0 1px 0 oklch(0.45 0.03 270 / 0.25) inset,
    0 -2px 0 rgba(0,0,0,0.38) inset;
}
body.light .pbar{
  box-shadow:
    0 4px 14px rgba(0,0,0,0.10),
    0 1px 4px rgba(0,0,0,0.07),
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(0,0,0,0.05) inset;
}
.pbar input[type=date]{background:oklch(0.20 0.02 270 / 0.5);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--font-mono);font-size:12px;padding:7px 10px;outline:none;flex:1;color-scheme:dark;}
.pbar input[type=date]:focus{border-color:var(--acc);}
body.light .date-inp{background:#fff!important;color:#111!important;border-color:#ccc!important;color-scheme:light!important;}
/* Fix inputs relevé mode clair */
body.light #rel-s, body.light #rel-e{background:#fff!important;color:#111!important;border-color:#ccc!important;color-scheme:light!important;}
.pbar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.pbar-row:last-child{margin-bottom:0;}
.pbar-lbl{font-size:11px;min-width:56px;}

.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;}
.sb{
  background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:14px;padding:12px 6px;text-align:center;
  box-shadow:
    0 5px 18px rgba(0,0,0,0.35),
    0 2px 5px rgba(0,0,0,0.25),
    0 1px 0 oklch(0.42 0.03 270 / 0.25) inset,
    0 -2px 0 rgba(0,0,0,0.35) inset;
}
body.light .sb{
  box-shadow:
    0 3px 12px rgba(0,0,0,0.09),
    0 1px 3px rgba(0,0,0,0.06),
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(0,0,0,0.04) inset;
}
.sv{font-family:var(--font-mono);font-size:17px;font-weight:700;color:var(--acc);}
.sl{font-size:9px;color:var(--muted);text-transform:uppercase;margin-top:3px;letter-spacing:.5px;}

.whdr{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:7px;margin-top:14px;display:flex;justify-content:space-between;align-items:center;}
.sbdg{font-family:var(--font-mono);font-size:11px;padding:3px 8px;border-radius:6px;}
.sbdg.over{background:oklch(0.55 0.22 25 / 0.15);color:var(--acc2);}
.sbdg.ok{background:oklch(0.82 0.25 130 / 0.1);color:var(--green);}
.sbdg.warn{background:oklch(0.75 0.20 80 / 0.1);color:var(--yellow);}

.dr{background:var(--glass-bg);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:18px;margin-bottom:8px;overflow:hidden;transition:all .2s;position:relative;border-left:3px solid transparent;}
.dr.dw{border-left-color:var(--acc);}
.dr.dc{border-left-color:var(--acc4);}
.dr.dm{border-left-color:var(--acc2);}
.dr.dat{border-left-color:var(--acc3);}
.dr.drec{border-left-color:var(--acc3);}
.dr.drp{border-left-color:var(--border);}
.dr.today{box-shadow:0 0 0 1.5px oklch(0.82 0.25 130 / 0.5);}

.dt{display:flex;align-items:center;padding:13px 14px;gap:12px;cursor:pointer;}
.dnum{font-family:var(--font-mono);font-size:20px;font-weight:800;min-width:32px;color:var(--muted);}
.dr.dw .dnum{color:var(--acc);}
.dr.dc .dnum{color:var(--acc4);}
.dr.dm .dnum{color:var(--acc2);}
.dr.dat .dnum,.dr.drec .dnum,.dr.drp .dnum{color:var(--acc3);}
.dtxt{flex:1;}
.dname{font-size:11px;color:var(--muted);font-weight:500;}
.dsum{font-size:13px;color:var(--text);margin-top:2px;font-family:var(--font-mono);font-weight:600;}
.dr.dw .dsum{color:var(--acc);}

@keyframes db-pop{0%{transform:scale(1)}35%{transform:scale(0.78)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.dbtns{display:flex;gap:6px;align-items:center;}
.db{width:42px;height:42px;border-radius:14px;border:1.5px solid var(--border);background:var(--s2);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--text);transition:all .15s;box-shadow:0 2px 8px rgba(0,0,0,0.18);-webkit-tap-highlight-color:transparent;}
.db.ow{background:var(--acc);border-color:var(--acc);color:var(--bg);box-shadow:0 4px 14px oklch(0.82 0.25 130 / 0.45);}
.db.oc{background:var(--acc4);border-color:var(--acc4);color:white;}
.db.om{background:var(--acc2);border-color:var(--acc2);color:white;}
.db.pop{animation:db-pop .32s cubic-bezier(.34,1.56,.64,1);}

.dpanel{display:none;padding:14px;border-top:1px solid var(--border);background:oklch(0.14 0.02 270 / 0.3);}
body.light .dpanel{background:oklch(0.96 0.005 270 / 0.4);}
.dpanel.open{display:block;}
.trow{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.trow label{font-size:11px;color:var(--muted);min-width:44px;font-weight:600;}
.mini{background:var(--s2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--font-mono);font-size:13px;padding:7px 10px;width:100px;text-align:center;outline:none;color-scheme:dark;}
.mini:focus{border-color:var(--acc);}
body.light .mini{background:#fff;color:#111;border-color:#ccc;color-scheme:light;}
input[type=time]{color-scheme:dark;}
body.light input[type=time]{color-scheme:light;background:#fff;color:#111;}
input[type=number]{color-scheme:dark;}
body.light input[type=number]{color-scheme:light;}
.bok{background:var(--acc);color:var(--bg);border:none;border-radius:10px;padding:8px 16px;font-family:var(--font-sans);font-weight:700;font-size:12px;cursor:pointer;}

.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px;}
.ci{
  background:var(--s2);border:1px solid var(--border);
  border-radius:12px;padding:10px;display:flex;align-items:center;gap:8px;cursor:pointer;
  transition:all .2s;
  box-shadow:
    0 3px 10px rgba(0,0,0,0.28),
    0 1px 3px rgba(0,0,0,0.20),
    0 1px 0 oklch(0.38 0.02 270 / 0.20) inset,
    0 -1px 0 rgba(0,0,0,0.30) inset;
}
.ci.acp{background:oklch(0.65 0.20 300 / 0.12);border-color:oklch(0.65 0.20 300 / 0.4);}
.ci.aml{background:oklch(0.55 0.22 25 / 0.1);border-color:oklch(0.55 0.22 25 / 0.3);}
.ci.aat{background:oklch(0.68 0.18 230 / 0.1);border-color:oklch(0.68 0.18 230 / 0.3);}
.ci.arc{background:oklch(0.75 0.20 80 / 0.1);border-color:oklch(0.75 0.20 80 / 0.3);}
.ci.afr{background:oklch(0.82 0.25 130 / 0.1);border-color:oklch(0.82 0.25 130 / 0.3);}
.cbox{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--muted);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;transition:all .2s;}
.ci.acp .cbox{background:var(--acc4);border-color:var(--acc4);color:white;}
.ci.aml .cbox{background:var(--acc2);border-color:var(--acc2);color:white;}
.ci.aat .cbox{background:var(--acc3);border-color:var(--acc3);color:var(--bg);}
.ci.arc .cbox{background:var(--yellow);border-color:var(--yellow);color:var(--bg);}
.ci.afr .cbox{background:var(--green);border-color:var(--green);color:var(--bg);}
.cl{font-size:12px;font-weight:500;}
.cs{font-size:10px;color:var(--muted);}
.nota{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--font-sans);font-size:12px;padding:8px 10px;outline:none;resize:none;}
body.light .nota{background:#fff;color:#111;border-color:#ccc;}

/* Primes */
.prow{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:11px;margin-bottom:7px;display:flex;align-items:center;gap:10px;}
.pi{flex:1;}
.pn{font-size:13px;font-weight:600;}
.pd{font-size:10px;color:var(--muted);margin-top:2px;}
.pa{font-family:var(--font-mono);font-size:15px;color:var(--acc);}
.bdel{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--red);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;}
.badd{width:100%;background:var(--s2);border:1px dashed var(--border);border-radius:10px;color:var(--muted);padding:10px;cursor:pointer;font-family:inherit;font-size:13px;transition:all .15s;}
.badd:hover{border-color:var(--acc);color:var(--acc);}

/* Bulletin */
.neth{
  background:linear-gradient(135deg,#1a3a1a,#0d200d);
  border:1px solid rgba(74,222,128,.35);
  border-radius:18px;padding:22px;text-align:center;margin-bottom:14px;
  box-shadow:
    0 10px 36px rgba(0,0,0,0.55),
    0 4px 10px rgba(0,0,0,0.35),
    0 1px 0 rgba(74,222,128,0.20) inset,
    0 -3px 0 rgba(0,0,0,0.50) inset;
}
.nl{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:rgba(74,222,128,.6);}
.nv{font-family:var(--font-sans); font-weight: 700;font-size:40px;font-weight:800;color:var(--green);margin:6px 0;}
.ns{font-size:12px;color:rgba(74,222,128,.5);}
.abrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.abtn{padding:13px;border-radius:12px;border:none;cursor:pointer;font-family:var(--font-sans);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .15s;}
.abtn:hover{transform:translateY(-1px);}
.ab1{background:var(--acc);color:var(--bg);}
.ab2{background:var(--s2);color:var(--text);border:1px solid var(--border);}

/* Bulletin printable */
.bul{background:white;color:#111;border-radius:16px;padding:22px;font-family:var(--font-sans);}
.bh{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #1a5fb4;padding-bottom:14px;margin-bottom:16px;}
.bco{font-size:18px;font-weight:800;color:#1a5fb4;}
.bco2{font-size:11px;color:#888;margin-top:2px;}
.br{text-align:right;}
.bt{font-size:14px;font-weight:800;}
.bp{font-size:11px;color:#666;margin-top:2px;}
.be{font-size:13px;font-weight:700;margin-top:4px;color:#1a5fb4;}
.brg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.brb{background:#f0f4ff;border-radius:8px;padding:10px;text-align:center;}
.brv{font-size:18px;font-weight:800;color:#1a5fb4;font-family:var(--font-mono);}
.brl{font-size:9px;color:#888;margin-top:2px;text-transform:uppercase;}
table.bt2{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:14px;}
table.bt2 th{background:#1a5fb4;color:white;padding:7px 8px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;}
table.bt2 th:last-child,table.bt2 td:last-child{text-align:right;}
table.bt2 td{padding:6px 8px;border-bottom:1px solid #eee;}
table.bt2 .sec td{background:#e8f0fe;font-weight:700;color:#1a5fb4;font-size:10px;text-transform:uppercase;padding:4px 8px;}
table.bt2 .tot td{background:#1a5fb4;color:white;font-weight:800;font-size:13px;}
table.bt2 .net td{background:#e8f5e9;color:#1b5e20;font-weight:800;font-size:14px;}
table.bt2 .ded td{color:#c62828;}
.bcp{background:#f8f9ff;border:1px solid #ddd;border-radius:8px;padding:12px;margin-bottom:12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;}
.bfoot{display:flex;justify-content:space-between;font-size:10px;color:#aaa;border-top:1px solid #eee;padding-top:10px;margin-top:10px;}

/* === HISTORIQUE === */
.hi{background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:16px;padding:16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;transition:transform .2s;}
.hi:first-child{border-color:oklch(0.82 0.25 130 / 0.3);background:oklch(0.82 0.25 130 / 0.04);}
.hm{font-size:11px;font-weight:700;color:var(--muted);min-width:54px;text-align:center;line-height:1.4;}
.hin{flex:1;}
.hn{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--text);}
.hi:first-child .hn{color:var(--acc);text-shadow:0 0 20px oklch(0.82 0.25 130 / 0.4);}
.hd{font-size:11px;color:var(--muted);margin-top:2px;}
.hbar{height:3px;background:var(--s3);border-radius:2px;margin-top:8px;overflow:hidden;}
.hbf{height:100%;background:var(--muted);border-radius:2px;}
.hi:first-child .hbf{background:var(--acc);}

.hist-stats{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;}
.hist-stat-v{font-family:var(--font-mono);font-size:16px;font-weight:700;}
.hist-stat-l{font-size:10px;color:var(--muted);margin-top:2px;}

/* Modal */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;display:none;align-items:flex-end;}
.ov.open{display:flex;}
.modal{background:var(--s1);border-radius:20px 20px 0 0;padding:20px;width:100%;border-top:1px solid var(--border);}
.modal h3{margin-bottom:14px;font-size:16px;}

/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--acc);color:var(--bg);padding:10px 20px;border-radius:10px;font-weight:700;font-size:13px;transition:transform .3s;z-index:999;pointer-events:none;}
.toast.show{transform:translateX(-50%) translateY(0);}

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;700&display=swap');

/* Glassmorphism Utilities */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
}

.glass-strong {
  background: var(--glass-bg);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border);
}

.glow-green {
  box-shadow: 0 0 20px oklch(0.82 0.25 130 / 0.4), 
              0 0 40px oklch(0.82 0.25 130 / 0.2);
}

.glow-pink {
  box-shadow: 0 0 20px oklch(0.72 0.22 330 / 0.4), 
              0 0 40px oklch(0.72 0.22 330 / 0.2);
}

.text-glow-green {
  text-shadow: 0 0 10px oklch(0.82 0.25 130 / 0.6),
               0 0 20px oklch(0.82 0.25 130 / 0.4);
}

.text-glow-pink {
  text-shadow: 0 0 10px oklch(0.72 0.22 330 / 0.6),
               0 0 20px oklch(0.72 0.22 330 / 0.4);
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.1); }
}

@keyframes slide-in-chat {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes bubble-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 1.5s ease-in-out infinite; }
.animate-blink { animation: blink 4s ease-in-out infinite; }
.animate-slide-in-chat { animation: slide-in-chat 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-bubble-pop { animation: bubble-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Background Effects */
.bg-effects {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.bg-effect-1 {
  position: absolute;
  top: 0;
  left: 25%;
  width: 24rem;
  height: 24rem;
  background: oklch(0.65 0.22 145 / 0.1);
  border-radius: 50%;
  filter: blur(100px);
}
.bg-effect-2 {
  position: absolute;
  bottom: 25%;
  right: 0;
  width: 20rem;
  height: 20rem;
  background: oklch(0.75 0.15 330 / 0.1);
  border-radius: 50%;
  filter: blur(100px);
}
.bg-effect-3 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16rem;
  height: 16rem;
  background: oklch(0.65 0.18 200 / 0.1);
  border-radius: 50%;
  filter: blur(80px);
}

@keyframes ob-cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes ob-btn-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.ob-btn{
  background:rgba(212,255,71,.08);
  border:1px solid rgba(212,255,71,.3);
  border-radius:12px;
  color:#d4ff47;
  padding:13px 18px;
  font-size:13px;
  font-family:'DM Sans',sans-serif;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:all .2s;
  animation:ob-btn-in .4s ease both;
}
.ob-btn:hover{background:rgba(212,255,71,.15);border-color:rgba(212,255,71,.6);}

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;700&display=swap');

/* Glassmorphism Utilities */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
}

.glass-strong {
  background: var(--glass-bg);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border);
}

.glow-green {
  box-shadow: 0 0 20px oklch(0.82 0.25 130 / 0.4), 
              0 0 40px oklch(0.82 0.25 130 / 0.2);
}

.glow-pink {
  box-shadow: 0 0 20px oklch(0.72 0.22 330 / 0.4), 
              0 0 40px oklch(0.72 0.22 330 / 0.2);
}

.text-glow-green {
  text-shadow: 0 0 10px oklch(0.82 0.25 130 / 0.6),
               0 0 20px oklch(0.82 0.25 130 / 0.4);
}

.text-glow-pink {
  text-shadow: 0 0 10px oklch(0.72 0.22 330 / 0.6),
               0 0 20px oklch(0.72 0.22 330 / 0.4);
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.1); }
}

@keyframes slide-in-chat {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes bubble-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 1.5s ease-in-out infinite; }
.animate-blink { animation: blink 4s ease-in-out infinite; }
.animate-slide-in-chat { animation: slide-in-chat 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-bubble-pop { animation: bubble-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Background Effects */
.bg-effects {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.bg-effect-1 {
  position: absolute;
  top: 0;
  left: 25%;
  width: 24rem;
  height: 24rem;
  background: oklch(0.65 0.22 145 / 0.1);
  border-radius: 50%;
  filter: blur(100px);
}
.bg-effect-2 {
  position: absolute;
  bottom: 25%;
  right: 0;
  width: 20rem;
  height: 20rem;
  background: oklch(0.75 0.15 330 / 0.1);
  border-radius: 50%;
  filter: blur(100px);
}
.bg-effect-3 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16rem;
  height: 16rem;
  background: oklch(0.65 0.18 200 / 0.1);
  border-radius: 50%;
  filter: blur(80px);
}