:root { --brand:#1d5fa8; --brand-d:#163f6e; --accent:#3aa655; --bg:#f4f6f9; --line:#dfe3ea; }
body { background:var(--bg); font-size:14px; color:#1f2937; }
.app { display:flex; min-height:100vh; }
.sidebar { width:230px; background:var(--brand-d); color:#cfd8e3; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; flex-shrink:0; }
.sidebar .brand { display:flex; gap:10px; align-items:center; padding:16px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar .brand img { width:52px; height:auto; background:#fff; border-radius:6px; padding:2px; }
.sidebar .brand b { color:#fff; display:block; font-size:16px; }
.sidebar .brand small { font-size:11px; opacity:.75; }
.sidebar nav { flex:1; padding:10px 0; overflow:auto; }
.sidebar nav a { display:flex; gap:10px; align-items:center; padding:9px 18px; color:#cfd8e3; text-decoration:none; border-left:3px solid transparent; }
.sidebar nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar nav a.active { background:rgba(255,255,255,.1); color:#fff; border-left-color:var(--accent); }
.sidebar .me { padding:12px 16px; font-size:12px; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:6px; align-items:center; }
.sidebar .me a { margin-left:auto; color:#cfd8e3; font-size:16px; }
.content { flex:1; padding:22px 26px; min-width:0; }
.page-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.page-head h1 { font-size:20px; margin:0; font-weight:600; }
.page-head .tools { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.card { border:1px solid var(--line); box-shadow:none; }
.card-header { background:#fff; font-weight:600; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.kpi .v { font-size:24px; font-weight:700; line-height:1.1; }
.kpi .l { font-size:12px; color:#6b7280; }
.table thead th { background:#eef2f7; font-size:12px; font-weight:600; white-space:nowrap; }
.badge-dot { display:inline-block; width:8px; height:8px; border-radius:50%; }

/* Grille planning */
.grid-wrap { overflow:auto; max-height:calc(100vh - 170px); background:#fff; border:1px solid var(--line); border-radius:8px; }
table.grid { border-collapse:separate; border-spacing:0; font-size:12px; }
table.grid th, table.grid td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; }
table.grid thead th { position:sticky; top:0; z-index:3; background:#eef2f7; padding:6px 4px; text-align:center; min-width:118px; }
table.grid th.c-week, table.grid th.c-day { position:sticky; left:0; z-index:4; background:#f8fafc; min-width:0; }
table.grid td.c-week { position:sticky; left:0; z-index:2; background:#f8fafc; font-size:11px; color:#475569; text-align:center; vertical-align:middle; width:62px; min-width:62px; padding:2px; font-weight:600; }
table.grid td.c-day { position:sticky; left:62px; z-index:2; background:#f8fafc; padding:4px 6px; white-space:nowrap; width:96px; min-width:96px; }
table.grid thead th.c-day { left:62px; }
table.grid tr.we td.c-day { color:#b91c1c; }
table.grid tr.wk-start td { border-top:2px solid #94a3b8; }
table.grid td.cell { position:relative; }
table.grid td.cell select { width:100%; border:0; background:transparent; font-size:12px; padding:5px 18px 5px 6px; appearance:none; cursor:pointer; }
table.grid td.cell select:focus { outline:2px solid var(--brand); }
table.grid td.cell select.garde { font-size:11px; padding:2px 18px 2px 6px; border-top:1px dashed #cbd5e1; font-style:italic; }
table.grid td.cell .sd { position:absolute; right:4px; top:4px; width:7px; height:7px; border-radius:50%; }
.sd.pending { background:#f59e0b; } .sd.ok { background:#16a34a; } .sd.error { background:#dc2626; }
table.grid td.today-row { box-shadow: inset 0 0 0 9999px rgba(29,95,168,.05); }
.legend span { display:inline-flex; align-items:center; gap:4px; margin-right:12px; font-size:12px; }
.legend i { width:14px; height:14px; border-radius:3px; display:inline-block; border:1px solid #cbd5e1; }

/* Statuts présence */
.st-Présent { color:#166534; } .st-Retard, .st-Départ { color:#92400e; } .st-Absent { color:#b91c1c; font-weight:600; }
tr.r-Absent td { background:#fef2f2; } tr.r-Retard td { background:#fffbeb; } tr.r-Incomplet td { background:#eff6ff; }

/* Impression */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { background:#fff; font-size:10px; }
  .content { padding:0; }
  .grid-wrap { max-height:none; overflow:visible; border:0; }
  table.grid thead th, table.grid td.c-week, table.grid td.c-day { position:static; }
}
.login-box { max-width:380px; margin:10vh auto; background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px; }
table.grid td.cell select.garde option[value=""] { color:#9ca3af; }
table.grid td.cell select.garde.empty { color:#9ca3af; }