/* ── Variables ─────────────────────────────────────────── */
html {
    --bg:        #ffffff;
    --bg2:       #f6f6f7;
    --bg3:       #ebebed;
    --border:    #dde1e6;
    --text:      #1a1a1a;
    --text2:     #555e6b;
    --accent:    #7c3aed;
    --accent2:   #a78bfa;
    --link:      #6d28d9;
    --tag-bg:    #ede9fe;
    --tag-text:  #5b21b6;
    --code-bg:   #f0f0f5;
    --callout-note:    #3b82f6;
    --callout-warn:    #f59e0b;
    --callout-danger:  #ef4444;
    --callout-tip:     #10b981;
    --callout-info:    #6366f1;
    --shadow:    0 2px 8px rgba(0,0,0,.08);
    --radius:    6px;
    --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono: "Fira Code", "Cascadia Code", monospace;
    --sidebar-w: 260px;
    --props-w:   240px;
  }

  html.dark {
    --bg:        #1e1e2e;
    --bg2:       #181825;
    --bg3:       #313244;
    --border:    #45475a;
    --text:      #cdd6f4;
    --text2:     #a6adc8;
    --accent:    #cba6f7;
    --accent2:   #b4befe;
    --link:      #cba6f7;
    --tag-bg:    #313244;
    --tag-text:  #cba6f7;
    --code-bg:   #181825;
    --callout-note:    #89b4fa;
    --callout-warn:    #f9e2af;
    --callout-danger:  #f38ba8;
    --callout-tip:     #a6e3a1;
    --callout-info:    #b4befe;
    --shadow:    0 2px 8px rgba(0,0,0,.4);
  }

  /* legacy alias */
  body.dark { color: var(--text); background: var(--bg); }
  
  /* ── Reset ─────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; overflow: hidden; }
  body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 15px; }
  
  /* ── Scrollbar ──────────────────────────────────────────── */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  
  /* ── Layout ─────────────────────────────────────────────── */
  #app { display: flex; height: 100vh; }
  
  #sidebar {
    width: var(--sidebar-w); min-width: 180px; max-width: 400px;
    background: var(--bg2); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; overflow: hidden;
    transition: width .2s ease;
  }
  #sidebar.collapsed { width: 0; min-width: 0; }
  
  #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
  
  #topbar {
    height: 44px; background: var(--bg2); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; padding: 0 12px; gap: 8px;
    flex-shrink: 0;
  }
  
  #md-host { flex: 1; overflow: hidden; min-height: 0; position: relative; }

  #content { height: 100%; overflow-y: auto; padding: 32px 40px; }
  #content > * { max-width: 860px; margin-left: auto; margin-right: auto; }
  
  #props-panel {
    width: var(--props-w); background: var(--bg2); border-left: 1px solid var(--border);
    overflow-y: auto; padding: 16px; transition: width .2s ease;
    flex-shrink: 0;
  }
  #props-panel.hidden { width: 0; padding: 0; overflow: hidden; }
  
  /* ── Topbar buttons ─────────────────────────────────────── */
  .tb-btn {
    background: none; border: none; cursor: pointer; color: var(--text2);
    padding: 4px 8px; border-radius: var(--radius); font-size: 18px;
    display: flex; align-items: center; transition: background .15s, color .15s;
  }
  .tb-btn:hover { background: var(--bg3); color: var(--text); }
  #breadcrumb { flex: 1; font-size: 13px; color: var(--text2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  /* ── Indicateurs frontmatter (images / PDF / liens) ─────── */
  #props-indicators { display: flex; align-items: center; gap: 2px; }
  .prop-ind { font-size: 15px; gap: 3px; }
  .ind-badge {
    font-size: 10px; font-weight: 600; line-height: 1;
    background: var(--accent); color: #fff;
    border-radius: 8px; padding: 2px 5px; min-width: 16px; text-align: center;
  }

  /* ── Popup rétroliens (topbar) ───────────────────────────── */
  #btn-backlinks { gap: 3px; }
  #backlinks-popup {
    position: absolute; top: 48px; right: 8px; z-index: 50;
    width: min(85vw, 320px); max-height: 60vh; overflow-y: auto;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 10px;
  }
  #backlinks-popup.hidden { display: none; }
  #backlinks-popup h4 {
    font-size: .8em; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text2); margin-bottom: .6em;
  }
  .bl-pop-item {
    display: block; padding: 6px 8px; border-radius: var(--radius);
    color: var(--link); font-size: .9em; text-decoration: none;
  }
  .bl-pop-item:hover { background: var(--bg3); }
  .bl-pop-path { display: block; font-size: .75em; color: var(--text2); }
  .bl-pop-empty { font-size: .85em; color: var(--text2); margin: 4px 0; }
  
  /* ── Sidebar search ─────────────────────────────────────── */
  #search-wrap { padding: 10px 10px 6px; flex-shrink: 0; }
  #search-input {
    width: 100%; padding: 6px 10px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg3);
    color: var(--text); font-size: 13px; outline: none;
  }
  #search-input:focus { border-color: var(--accent); }
  
  /* ── Tags section ───────────────────────────────────────── */
  #tags-section { padding: 6px 10px; flex-shrink: 0; border-top: 1px solid var(--border); }
  #tags-section summary { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; padding: 4px 0; }
  #tags-wrap { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0; }
  .tag-pill {
    font-size: 11px; padding: 2px 8px; border-radius: 12px;
    background: var(--tag-bg); color: var(--tag-text); cursor: pointer;
    border: 1px solid transparent; transition: border-color .15s;
  }
  .tag-pill:hover, .tag-pill.active { border-color: var(--accent); }
  
  /* ── Webix tree overrides ───────────────────────────────── */
  #tree-wrap { flex: 1; min-height: 0; overflow: hidden; position: relative; }
  #tree-wrap .webix_view { height: 100% !important; }
  .nav-tree .webix_tree_item.webix_selected > span,
  .webix_tree_item.webix_selected > span {
    background: var(--accent) !important; color: #fff !important; border-radius: var(--radius);
  }
  .nav-tree .webix_tree_item > span,
  .webix_tree_item > span { color: var(--text) !important; }
  .webix_tree_item > span:hover { background: var(--bg3) !important; border-radius: var(--radius); }
  .webix_view { background: var(--bg2) !important; color: var(--text) !important; border-color: var(--border) !important; }
  .webix_scroll_cont { background: var(--bg2) !important; }
  .webix_tree .webix_scroll_cont { background: var(--bg2) !important; }

  html.dark .webix_view,
  html.dark .webix_layout_line,
  html.dark .webix_cell,
  html.dark .webix_tree_item,
  html.dark .webix_scroll_cont {
    background-color: var(--bg2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }
  html.dark .webix_tree_item > span { color: var(--text) !important; }
  html.dark .webix_tree_item.webix_selected > span { color: #fff !important; }
  html.dark .webix_layout_space { background: var(--bg) !important; }
  
  /* ── Markdown content ───────────────────────────────────── */
  #content h1 { font-size: 2em; font-weight: 700; margin: .2em 0 .6em; border-bottom: 2px solid var(--border); padding-bottom: .3em; }
  #content h2 { font-size: 1.5em; font-weight: 600; margin: 1.4em 0 .5em; border-bottom: 1px solid var(--border); padding-bottom: .2em; }
  #content h3 { font-size: 1.2em; font-weight: 600; margin: 1.2em 0 .4em; }
  #content h4,h5,h6 { font-size: 1em; font-weight: 600; margin: 1em 0 .3em; }
  #content p  { line-height: 1.75; margin: .6em 0; }
  #content a  { color: var(--link); text-decoration: none; }
  #content a:hover { text-decoration: underline; }
  #content ul, #content ol { padding-left: 1.6em; margin: .5em 0; }
  #content li { margin: .25em 0; line-height: 1.7; }
  #content blockquote { border-left: 3px solid var(--border); padding: .4em 1em; color: var(--text2); margin: .8em 0; }
  #content code { font-family: var(--font-mono); font-size: .88em; background: var(--code-bg); padding: .15em .4em; border-radius: 3px; }
  #content pre  { background: var(--code-bg); border-radius: var(--radius); padding: 1em 1.2em; overflow-x: auto; margin: .8em 0; }
  #content pre code { background: none; padding: 0; }
  #content table { border-collapse: collapse; width: 100%; margin: .8em 0; }
  #content th, #content td { border: 1px solid var(--border); padding: .4em .8em; text-align: left; }
  #content th { background: var(--bg3); font-weight: 600; }
  #content img { max-width: 100%; border-radius: var(--radius); margin: .4em 0; }
  #content hr  { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
  #content input[type=checkbox] { margin-right: .4em; }
  
  /* ── Wikilink ────────────────────────────────────────────── */
  a.wikilink { color: var(--accent); border-bottom: 1px dashed var(--accent2); }
  a.wikilink.broken { color: var(--text2); border-bottom-color: var(--border); }
  a.attachment-link { color: var(--link); border-bottom: 1px dotted var(--link); cursor: pointer; }
  a.attachment-link::before { content: "📎 "; }

  /* ── Viewer de pièces jointes (PDF / image / média) ──────── */
  .att-full { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
  .att-bar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg2); }
  .att-name { flex: 1; font-size: 13px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .att-action { font-size: 12px; color: var(--link); text-decoration: none; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); white-space: nowrap; background: transparent; cursor: pointer; }
  .att-action:hover { background: var(--bg3); }
  .att-body { flex: 1; min-height: 0; overflow: auto; }
  .att-pdf { display: flex; }
  .att-pdf object, .att-pdf iframe { width: 100%; height: 100%; border: 0; }
  .att-image { display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
  .att-image img { max-width: 100%; height: auto; border-radius: var(--radius); }
  .att-media { display: flex; align-items: center; justify-content: center; padding: 16px; }
  .att-media video { max-width: 100%; max-height: 100%; }
  .att-other { display: flex; align-items: center; justify-content: center; color: var(--text2); }
  
  /* ── Callouts ────────────────────────────────────────────── */
  .callout { border-radius: var(--radius); padding: .8em 1em; margin: .8em 0; border-left: 4px solid; }
  .callout-title { font-weight: 700; font-size: .9em; margin-bottom: .3em; display: flex; align-items: center; gap: .4em; }
  .callout[data-type="note"]    { border-color: var(--callout-note);   background: color-mix(in srgb, var(--callout-note) 10%, var(--bg)); }
  .callout[data-type="warning"] { border-color: var(--callout-warn);   background: color-mix(in srgb, var(--callout-warn) 10%, var(--bg)); }
  .callout[data-type="danger"]  { border-color: var(--callout-danger); background: color-mix(in srgb, var(--callout-danger) 10%, var(--bg)); }
  .callout[data-type="tip"]     { border-color: var(--callout-tip);    background: color-mix(in srgb, var(--callout-tip) 10%, var(--bg)); }
  .callout[data-type="info"]    { border-color: var(--callout-info);   background: color-mix(in srgb, var(--callout-info) 10%, var(--bg)); }
  
  /* ── Dataview (blocs non exécutables : masqués) ──────────── */
  .dataviewjs-block { display: none; }

  /* ── Note sans contenu visible : propriétés mises en avant ── */
  .note-empty-hint {
    font-size: .85em; color: var(--text2);
    background: var(--bg2); border: 1px dashed var(--border);
    border-radius: var(--radius); padding: .6em 1em; margin: .8em 0;
  }
  .note-props-card {
    border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: var(--radius); background: var(--bg2);
    padding: 1em 1.2em; margin: .8em 0; box-shadow: var(--shadow);
  }
  .note-props-card h4 {
    font-size: .8em; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text2); margin-bottom: .8em;
  }
  .note-props-card .prop-row { margin-bottom: .7em; }
  .note-props-card .prop-key { font-size: .75em; color: var(--text2); font-weight: 600; }
  .note-props-card .prop-val { font-size: .95em; word-break: break-word; }

  /* ── Embed ───────────────────────────────────────────────── */
  .embed-note { border: 1px solid var(--border); border-radius: var(--radius); padding: .8em 1em; margin: .8em 0; background: var(--bg2); }
  .embed-note .embed-title { font-size: .8em; color: var(--text2); margin-bottom: .5em; font-weight: 600; }
  
  /* ── Backlinks ───────────────────────────────────────────── */
  #backlinks { margin-top: 3em; padding-top: 1em; border-top: 1px solid var(--border); }
  #backlinks h4 { font-size: .85em; text-transform: uppercase; letter-spacing: .07em; color: var(--text2); margin-bottom: .6em; }
  .bl-item { font-size: .9em; padding: .2em 0; }
  .bl-item a { color: var(--link); }
  
  /* ── Props panel ─────────────────────────────────────────── */
  #props-panel h4 { font-size: .8em; text-transform: uppercase; letter-spacing: .07em; color: var(--text2); margin-bottom: .8em; }
  .prop-row { margin-bottom: .6em; }
  .prop-key { font-size: .75em; color: var(--text2); font-weight: 600; }
  .prop-val { font-size: .85em; word-break: break-word; }
  
  /* ── Welcome ─────────────────────────────────────────────── */
  #welcome { text-align: center; padding: 4em 2em; color: var(--text2); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  #welcome svg { opacity: .3; margin-bottom: 1em; }

  /* ── Boot error / loading ────────────────────────────────── */
  #boot-error, #boot-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100vh; gap: 1em; color: var(--text2); background: var(--bg);
  }
  #boot-error.hidden, #boot-loading.hidden { display: none; }
  #app.hidden { display: none; }
  #boot-error button {
    padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--bg2); color: var(--text); cursor: pointer;
  }
  #boot-error button:hover { background: var(--bg3); }
  #boot-progress {
    width: min(320px, 80vw); height: 6px; background: var(--bg3);
    border-radius: 3px; overflow: hidden;
  }
  #boot-progress-bar {
    height: 100%; width: 0; background: var(--accent); transition: width .3s ease;
  }

  /* ── Responsive mobile ───────────────────────────────────── */
  @media (max-width: 768px) {
    #sidebar {
      position: fixed; top: 44px; bottom: 0; left: 0; z-index: 40;
      width: min(85vw, 320px); max-width: none;
      box-shadow: var(--shadow);
      transition: transform .2s ease;
    }
    #sidebar.collapsed { width: min(85vw, 320px); transform: translateX(-105%); }
    #props-panel {
      position: fixed; top: 44px; bottom: 0; right: 0; z-index: 40;
      width: min(85vw, 300px); box-shadow: var(--shadow);
    }
    #content { padding: 16px; }
    #content table { display: block; overflow-x: auto; }
    .tb-btn { padding: 8px 10px; }
  }