:root{
    --bg: #eef0f3;
    --surface: #ffffff;
    --surface-alt: #f6f7f9;
    --border: #d7dbe2;
    --border-strong: #b9bfc9;
    --text: #1e2330;
    --text-muted: #656d7a;
    --text-faint: #98a0ac;
    --primary: #2e5aac;
    --primary-dark: #1f4485;
    --primary-bg: #eaf0fb;
    --amber: #92650f;
    --amber-bg: #fbf1de;
    --green: #1f7a48;
    --green-bg: #e9f5ee;
    --red: #b3261e;
    --red-bg: #fbeceb;
    --radius: 3px;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --ui: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --topbar-1: #3b3f47;
    --topbar-2: #2c2f36;
    --topbar-border: #454952;
    --topbar-text: #e7e9ec;
    --topbar-text-muted: #c7cbd3;
    --topbar-text-faint: #7d828d;
    --overlay: rgba(20,22,28,.42);
    --scrollbar: #c6cad2;
    color-scheme: light;
  }
  html[data-theme="dark"]{
    --bg: #14161a;
    --surface: #1b1e24;
    --surface-alt: #22252c;
    --border: #32363f;
    --border-strong: #454a54;
    --text: #e7e9ee;
    --text-muted: #9ba1ac;
    --text-faint: #6c7178;
    --primary: #5b8def;
    --primary-dark: #8fb4f5;
    --primary-bg: #1c2c47;
    --amber: #e3b567;
    --amber-bg: #3a2f18;
    --green: #6fce97;
    --green-bg: #163625;
    --red: #ea8580;
    --red-bg: #3a201e;
    --topbar-1: #101216;
    --topbar-2: #0b0c0f;
    --topbar-border: #2c2f36;
    --scrollbar: #3a3e46;
    color-scheme: dark;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;}
  body{
    font-family:var(--ui);
    background:var(--bg);
    color:var(--text);
    font-size:13px;
    -webkit-font-smoothing:antialiased;
    transition:background .15s ease, color .15s ease;
  }
  button{font-family:inherit;font-size:inherit;cursor:pointer;}
  input,select{font-family:inherit;font-size:inherit;}

  /* ===== App shell ===== */
  .app{
    display:grid;
    grid-template-rows:38px 34px 1fr 22px;
    grid-template-columns:210px 1fr;
    grid-template-areas:
      "topbar topbar"
      "toolbar toolbar"
      "nav main"
      "status status";
    height:100vh;
  }

  /* Topbar */
  .topbar{
    grid-area:topbar;
    background:linear-gradient(var(--topbar-1),var(--topbar-2));
    color:var(--topbar-text);
    display:flex;
    align-items:center;
    padding:0 10px;
    gap:14px;
    font-size:12.5px;
  }
  .topbar .brand{
    font-weight:600;
    letter-spacing:.2px;
    color:#fff;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .brand .dot{width:7px;height:7px;border-radius:50%;background:#5b8def;display:inline-block;}
  .topbar nav{display:flex;gap:2px;flex:1;}
  .topbar nav a{
    color:var(--topbar-text-muted);
    text-decoration:none;
    padding:9px 10px;
    font-size:12.5px;
    border-bottom:2px solid transparent;
  }
  .topbar nav a.active{color:#fff;border-bottom-color:#5b8def;}
  .topbar nav a:hover{color:#fff;}
  .topbar .search{
    display:flex;align-items:center;gap:6px;
    background:rgba(0,0,0,.22);border:1px solid var(--topbar-border);border-radius:3px;
    padding:4px 8px;width:220px;
  }
  .topbar .search input{background:transparent;border:0;color:var(--topbar-text);outline:0;width:100%;font-size:12px;}
  .topbar .search input::placeholder{color:var(--topbar-text-faint);}
  .topbar .user{display:flex;align-items:center;gap:6px;color:var(--topbar-text-muted);}
  .avatar{width:20px;height:20px;border-radius:50%;background:#5b8def;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
  .theme-toggle{
    display:flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:4px;
    background:rgba(255,255,255,.06);border:1px solid var(--topbar-border);
    color:var(--topbar-text-muted);font-size:13px;flex-shrink:0;
  }
  .theme-toggle:hover{color:#fff;background:rgba(255,255,255,.12);}

  /* Toolbar */
  .toolbar{
    grid-area:toolbar;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:4px;
    padding:0 8px;
  }
  .tbtn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1px;
    border:1px solid transparent;
    background:transparent;
    padding:2px 8px;
    border-radius:var(--radius);
    color:var(--text);
    height:30px;
    min-width:52px;
  }
  .tbtn:hover{background:var(--surface-alt);border-color:var(--border);}
  .tbtn .ic{font-size:13px;line-height:1;}
  .tbtn .lb{font-size:9.5px;color:var(--text-muted);}
  .tbtn:disabled{opacity:.35;cursor:default;}
  .tbtn:disabled:hover{background:transparent;border-color:transparent;}
  .tsep{width:1px;align-self:stretch;margin:6px 4px;background:var(--border);}
  .tb-fill{flex:1;}
  .tb-sort{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-muted);}
  .tb-sort select{border:1px solid var(--border);border-radius:var(--radius);padding:3px 4px;background:var(--surface);}

  /* Nav rail */
  .nav{
    grid-area:nav;
    background:var(--surface);
    border-right:1px solid var(--border);
    overflow-y:auto;
    padding:8px 0;
  }
  .nav-group{margin-bottom:2px;}
  .nav-title{
    font-size:10px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--text-faint);padding:8px 14px 4px;
  }
  .nav a{
    display:flex;align-items:center;gap:8px;
    padding:6px 14px;
    color:var(--text);
    text-decoration:none;
    font-size:12.5px;
    border-left:3px solid transparent;
  }
  .nav a .ic{width:14px;text-align:center;color:var(--text-muted);font-size:11px;}
  .nav a:hover{background:var(--surface-alt);}
  .nav a.active{background:var(--primary-bg);border-left-color:var(--primary);color:var(--primary-dark);font-weight:600;}
  .nav a.active .ic{color:var(--primary-dark);}

  /* Main split */
  .main{
    grid-area:main;
    display:grid;
    grid-template-columns:360px 1fr;
    overflow:hidden;
  }

  /* List pane */
  .list-pane{
    border-right:1px solid var(--border);
    background:var(--surface);
    display:flex;flex-direction:column;
    overflow:hidden;
  }
  .list-head{
    padding:8px 10px 6px;
    border-bottom:1px solid var(--border);
  }
  .list-head h1{font-size:13px;margin:0 0 6px;font-weight:600;}
  .filters{display:flex;gap:6px;}
  .filters select{
    flex:1;border:1px solid var(--border);border-radius:var(--radius);
    padding:4px 5px;background:var(--surface);color:var(--text);font-size:11.5px;
  }
  .find{
    margin-top:6px;position:relative;
  }
  .find input{
    width:100%;border:1px solid var(--border);border-radius:var(--radius);
    padding:5px 7px 5px 24px;font-size:12px;
  }
  .find .ic{position:absolute;left:7px;top:6px;color:var(--text-faint);font-size:11px;}

  table.grid{width:100%;border-collapse:collapse;font-size:12px;}
  table.grid thead th{
    position:sticky;top:0;background:var(--surface-alt);
    text-align:left;font-weight:600;color:var(--text-muted);
    padding:6px 8px;border-bottom:1px solid var(--border);
    font-size:11px;text-transform:uppercase;letter-spacing:.3px;
    cursor:pointer;user-select:none;
  }
  table.grid thead th:hover{color:var(--text);}
  table.grid tbody td{padding:6px 8px;border-bottom:1px solid var(--border);}
  table.grid tbody tr{cursor:pointer;}
  table.grid tbody tr:hover{background:var(--surface-alt);}
  table.grid tbody tr.sel{background:var(--primary-bg);}
  table.grid tbody tr.sel td{color:var(--primary-dark);}
  .type-ic{width:16px;display:inline-flex;justify-content:center;color:var(--text-muted);}
  .ref-cell{font-family:var(--mono);font-size:11.5px;}
  .tag-sommeil{
    display:inline-block;margin-left:6px;font-size:9.5px;padding:1px 5px;
    background:var(--amber-bg);color:var(--amber);border-radius:2px;
  }
  .list-body{flex:1;overflow-y:auto;}
  .list-foot{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 10px;border-top:1px solid var(--border);
    font-size:11px;color:var(--text-muted);
  }
  .pager{display:flex;gap:2px;}
  .pager button{
    border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);
    width:22px;height:22px;font-size:11px;color:var(--text);
  }
  .pager button:hover{background:var(--surface-alt);}
  .pager button:disabled{opacity:.35;}

  /* Detail pane */
  .detail-pane{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);}
  .fiche-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    padding:10px 16px;border-bottom:1px solid var(--border);
    background:var(--surface);
  }
  .fiche-title{display:flex;flex-direction:column;gap:2px;}
  .fiche-title .kicker{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.4px;}
  .fiche-title h2{margin:0;font-size:15px;font-weight:600;}
  .fiche-title h2 .ref{font-family:var(--mono);color:var(--primary-dark);}
  .fiche-title .meta{font-size:11px;color:var(--text-muted);margin-top:2px;}
  .fiche-actions{display:flex;gap:6px;align-items:flex-start;}
  .btn{
    border:1px solid var(--border-strong);
    background:var(--surface);
    padding:5px 10px;
    border-radius:var(--radius);
    font-size:11.5px;
    color:var(--text);
    display:flex;align-items:center;gap:5px;
  }
  .btn:hover{background:var(--surface-alt);}
  .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;}
  .btn.primary:hover{background:var(--primary-dark);}
  .btn.danger{color:var(--red);border-color:#e3b9b6;}
  .btn.danger:hover{background:var(--red-bg);}

  /* Volets (tabs) — signature element: file-folder tab rail */
  .volets-shell{display:flex;flex:1;overflow:hidden;}
  .volets-rail{
    width:120px;
    background:var(--surface-alt);
    border-right:1px solid var(--border);
    padding:10px 0;
    flex-shrink:0;
  }
  .volet-tab{
    display:block;width:100%;text-align:left;
    background:transparent;border:0;
    padding:8px 12px;
    font-size:12px;color:var(--text-muted);
    border-left:3px solid transparent;
    position:relative;
  }
  .volet-tab:hover{color:var(--text);background:#eef0f3;}
  .volet-tab.active{
    background:var(--surface);
    color:var(--primary-dark);
    font-weight:600;
    border-left-color:var(--primary);
    box-shadow:inset 0 0 0 1px var(--border);
    border-right:1px solid var(--surface);
    margin-right:-1px;
  }

  .volet-panel{flex:1;overflow-y:auto;padding:16px 20px;display:none;}
  .volet-panel.active{display:block;}

  .field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px;max-width:820px;}
  .field-grid.two{grid-template-columns:repeat(2,1fr);}
  .field{display:flex;flex-direction:column;gap:3px;}
  .field.span2{grid-column:span 2;}
  .field.span3{grid-column:span 3;}
  .field label{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:4px;}
  .field label .req{color:var(--red);}
  .field input[type=text], .field input[type=number], .field select{
    border:1px solid var(--border);border-radius:var(--radius);
    padding:6px 7px;font-size:12.5px;color:var(--text);background:var(--surface);
  }
  .field input:disabled{background:var(--surface-alt);color:var(--text-muted);}
  .field .hint{font-size:10.5px;color:var(--text-faint);}
  .radio-row{display:flex;gap:12px;align-items:center;padding-top:4px;}
  .radio-row label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text);font-weight:400;}

  .section-title{
    font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
    color:var(--text-muted);margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--border);
    max-width:820px;
  }
  .section-title:first-child{margin-top:0;border-top:0;padding-top:0;}

  .check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px;max-width:600px;}
  .check-row{display:flex;align-items:center;gap:7px;font-size:12px;}
  .check-row input{width:14px;height:14px;}

  .mini-table-wrap{max-width:820px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
  table.mini{width:100%;border-collapse:collapse;font-size:11.5px;}
  table.mini th{background:var(--surface-alt);text-align:left;padding:6px 8px;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border);font-size:10.5px;text-transform:uppercase;}
  table.mini td{padding:5px 8px;border-bottom:1px solid var(--border);}
  table.mini tbody tr:last-child td{border-bottom:0;}
  table.mini input, table.mini select{width:100%;border:1px solid transparent;background:transparent;padding:3px 4px;font-size:11.5px;border-radius:2px;}
  table.mini input:hover, table.mini input:focus, table.mini select:hover{border-color:var(--border);background:var(--surface);}
  .mini-toolbar{display:flex;justify-content:flex-end;gap:6px;margin-top:8px;max-width:820px;}
  .link-btn{background:none;border:0;color:var(--primary);font-size:11.5px;padding:2px 0;}
  .link-btn:hover{text-decoration:underline;}

  .empty-note{
    max-width:520px;background:var(--surface-alt);border:1px dashed var(--border-strong);
    border-radius:var(--radius);padding:14px 16px;color:var(--text-muted);font-size:12px;
  }

  .subtabs{display:flex;gap:2px;margin-bottom:14px;border-bottom:1px solid var(--border);max-width:820px;}
  .subtab{padding:6px 12px;font-size:11.5px;color:var(--text-muted);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;}
  .subtab.active{color:var(--primary-dark);border-bottom-color:var(--primary);font-weight:600;}
  .subtab:hover{color:var(--text);}
  .subpanel{display:none;}
  .subpanel.active{display:block;}

  .chart-row{display:flex;gap:10px;align-items:flex-end;height:120px;max-width:520px;margin:10px 0 4px;padding:0 4px;border-bottom:1px solid var(--border);}
  .bar{flex:1;background:linear-gradient(#6f97d6,var(--primary));border-radius:2px 2px 0 0;position:relative;min-height:4px;}
  .bar span{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:9.5px;color:var(--text-muted);}
  .chart-labels{display:flex;gap:10px;max-width:520px;padding:0 4px;}
  .chart-labels div{flex:1;text-align:center;font-size:9.5px;color:var(--text-faint);}
  .graph-toggle{display:flex;gap:4px;margin-bottom:10px;}
  .graph-toggle button{border:1px solid var(--border);background:var(--surface);padding:4px 9px;font-size:11px;border-radius:var(--radius);}
  .graph-toggle button.active{background:var(--primary-bg);border-color:var(--primary);color:var(--primary-dark);}

  /* Status bar */
  .status{
    grid-area:status;
    background:var(--surface-alt);border-top:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 10px;font-size:10.5px;color:var(--text-muted);
  }
  .status .right{display:flex;gap:14px;}

  /* Modal */
  .modal-overlay{
    position:fixed;inset:0;background:var(--overlay);
    display:none;align-items:center;justify-content:center;z-index:50;
  }
  .modal-overlay.open{display:flex;}
  .modal{
    width:360px;background:var(--surface);border-radius:4px;
    box-shadow:0 12px 32px rgba(0,0,0,.28);
    overflow:hidden;
  }
  .modal-head{
    padding:10px 14px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    background:var(--surface-alt);
  }
  .modal-head h3{margin:0;font-size:12.5px;font-weight:600;}
  .modal-head button{background:none;border:0;color:var(--text-muted);font-size:14px;}
  .modal-body{padding:16px 14px;display:flex;flex-direction:column;gap:12px;}
  .modal-body .field label{font-size:11px;color:var(--text-muted);margin-bottom:3px;display:block;}
  .modal-body .field input{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:6px 7px;font-size:12.5px;}
  .modal-foot{padding:10px 14px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--surface-alt);}

  .toast{
    position:fixed;bottom:34px;right:16px;
    background:#242832;color:#fff;padding:9px 14px;border-radius:4px;
    font-size:12px;display:flex;align-items:center;gap:8px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    opacity:0;transform:translateY(6px);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
    z-index:60;
  }
  .toast.show{opacity:1;transform:translateY(0);}
  .toast .ok{color:#7fd99a;}

  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:5px;}
  ::-webkit-scrollbar-track{background:transparent;}

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
    outline:2px solid var(--primary);outline-offset:1px;
  }

/* ===== Authentification ===== */
.auth-shell{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
}
.auth-card{
  width:340px;background:var(--surface);border:1px solid var(--border);
  border-radius:4px;box-shadow:0 8px 28px rgba(0,0,0,.10);
  overflow:hidden;
}
.auth-card .auth-head{
  background:linear-gradient(var(--topbar-1),var(--topbar-2));
  color:var(--topbar-text);padding:20px 22px 16px;
}
.auth-card .auth-head .dot{width:7px;height:7px;border-radius:50%;background:#5b8def;display:inline-block;margin-right:6px;}
.auth-card .auth-head h1{font-size:14px;margin:0;font-weight:600;letter-spacing:.2px;}
.auth-card .auth-head p{margin:4px 0 0;font-size:11px;color:var(--topbar-text-muted);}
.auth-body{padding:20px 22px;display:flex;flex-direction:column;gap:14px;}
.auth-field label{font-size:11px;color:var(--text-muted);display:block;margin-bottom:4px;}
.auth-field input{
  width:100%;border:1px solid var(--border);border-radius:3px;
  padding:8px 9px;font-size:13px;color:var(--text);background:var(--surface);
}
.auth-field input:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
.auth-error{font-size:11px;color:var(--red);background:var(--red-bg);border-radius:3px;padding:6px 8px;}
.auth-remember{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted);}
.auth-submit{
  width:100%;border:1px solid var(--primary);background:var(--primary);color:#fff;
  padding:8px;border-radius:3px;font-size:12.5px;font-weight:600;
}
.auth-submit:hover{background:var(--primary-dark);}
.auth-foot{padding:12px 22px;border-top:1px solid var(--border);background:var(--surface-alt);
  font-size:10.5px;color:var(--text-faint);text-align:center;}