:root{
  --bg: #0b0c10; /* sombre par défaut */
  --panel: #121419;
  --muted: #8a9099;
  --text: #e6e8eb;
  --brand: #5ac8fa;
  --accent: #64d2ff;
  --card: #151923;
  --border: #232938;
}

:root[data-theme="light"]{
  --bg: #f8fafc;
  --panel: #ffffff;
  --muted: #5b616e;
  --text: #0f172a;
  --brand: #0ea5e9;
  --accent: #38bdf8;
  --card: #ffffff;
  --border: #e5e7eb;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--text);
}

.site-header{
  position: sticky; top:0; z-index: 20; backdrop-filter: blur(4px);
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding: .8rem 1rem; border-bottom:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
}
.brand{ display:flex; gap:.8rem; align-items:center; }
.logo{ font-size:1.6rem; }
.titles h1{ font-size:1.1rem; margin:.1rem 0; }
.subtitle{ margin:0; font-size:.85rem; color:var(--muted); }

.search{ position:relative; display:flex; align-items:center; gap:.4rem; }
.search input{
  width:min(60vw, 520px); padding:.6rem .8rem; border-radius:10px; outline:none;
  border:1px solid var(--border); background: var(--panel); color:var(--text);
}
.search .ghost{ background:transparent; border:1px solid var(--border); color:var(--text);
  padding:.45rem .65rem; border-radius:10px; cursor:pointer; }
.search-results{ position:absolute; left:0; right:0; top:110%; background:var(--panel);
  border:1px solid var(--border); border-radius:12px; display:none; max-height:55vh; overflow:auto; }
.search-results.visible{ display:block; }
.search-results a{ display:block; padding:.6rem .8rem; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; }
.search-results a:hover{ background: color-mix(in oklab, var(--panel) 70%, var(--brand)); }

.layout{ display:grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 64px); }
.sidebar{ border-right:1px solid var(--border); padding:1rem; background: var(--panel); }
.sidebar h2{ margin-top:0; font-size:1rem; }
.sidebar h3{ margin-top:1.2rem; font-size:.95rem; color:var(--muted); }
.sidebar ul{ list-style:none; padding:0; margin:.4rem 0; }
.sidebar li a{ display:block; padding:.45rem .6rem; border-radius:8px; color:var(--text); text-decoration:none; }
.sidebar li a:hover{ background: color-mix(in oklab, var(--panel) 70%, var(--brand)); }
.sidebar-footer{ margin-top:2rem; border-top:1px solid var(--border); padding-top:1rem; font-size:.9rem; color:var(--muted); }
.theme-toggle{ display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.theme-toggle input{ accent-color: var(--brand); }

.content{ padding: 1.2rem min(4vw, 32px); }
.hero{ border:1px solid var(--border); background:var(--card); padding:1rem; border-radius:14px; }
.cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.card{ border:1px solid var(--border); background:var(--card); border-radius:14px; padding: .9rem; display:flex; flex-direction:column; gap:.5rem; }
.card h4{ margin:.2rem 0; font-size:1rem; }
.card p{ margin:0; color:var(--muted); font-size:.9rem; }
.card a{ text-decoration:none; color:var(--brand); font-weight:600; }

.list{ margin:.4rem 0; padding-left: 1rem; }
.list li{ margin:.25rem 0; }
.list a{ color:var(--brand); text-decoration:none; }

.doc-view{ line-height:1.6; }
.doc-view h1, .doc-view h2, .doc-view h3{ scroll-margin-top: 80px; }
.doc-view pre, .doc-view code{ background: color-mix(in oklab, var(--panel) 80%, black 0%); border:1px solid var(--border); }
.doc-view pre{ padding: .8rem; border-radius:10px; overflow:auto; }
.doc-view code{ padding: .15rem .3rem; border-radius:6px; }
.doc-view a{ color: var(--accent); }

.toast{ position: fixed; bottom: 16px; right: 16px; padding:.6rem .8rem; border-radius:10px; background: var(--panel); border:1px solid var(--border); color:var(--text); opacity:0; transform: translateY(10px); transition: .25s; }
.toast.show{ opacity:1; transform: translateY(0); }

@media (max-width: 920px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position: sticky; top: 64px; z-index:10; }
}