:root[data-theme="dark"] {
    --bg: #1b1d22;
    --bg-elevated: #23262d;
    --bg-hover: #2c2f38;
    --border: #33363f;
    --text: #e4e5ea;
    --text-muted: #8b8f9c;
    --accent: #6f8bff;
    --accent-contrast: #10121a;
    --danger: #e5675f;
    --success: #6fcf7a;
    --inherited: #b389f0;
    --code-bg: #14161b;
}

:root[data-theme="light"] {
    --bg: #f7f7f5;
    --bg-elevated: #ffffff;
    --bg-hover: #ececea;
    --border: #dcdcd8;
    --text: #1e1f22;
    --text-muted: #6a6d78;
    --accent: #3955d8;
    --accent-contrast: #ffffff;
    --danger: #c53a32;
    --success: #2e7d32;
    --inherited: #7b3fd4;
    --code-bg: #eeeeec;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ---------- Login ---------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2.5rem;
    width: 100%;
    max-width: 340px;
}
.login-card h1 { margin: 0 0 0.25rem; font-size: 1.6rem; }
.login-logo-wrap {
    display: flex; justify-content: center; margin: 0 0 1.2rem;
}
/* Nouveau logo (v4.56.7) : déjà pourvu de son propre fond mauve arrondi,
   contrairement à l'ancien — plus besoin d'une enveloppe blanche autour,
   qui le faisait paraître minuscule et perdu au milieu d'une grande zone
   vide. Affiché directement, à une taille généreuse. */
.login-logo { display: block; height: 128px; width: auto; border-radius: 20px; }
.login-card .subtitle { margin: 0 0 1.5rem; color: var(--text-muted); font-size: 0.9rem; }
.login-card form { display: flex; flex-direction: column; gap: 0.4rem; }
.login-card label { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; }
.login-card input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
}
.login-card input:focus, button:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.login-card button {
    margin-top: 1.2rem;
    background: var(--accent);
    color: var(--accent-contrast);
    border: none;
    border-radius: 6px;
    padding: 0.6rem;
    font-size: 0.95rem;
    cursor: pointer;
}
.login-card .error {
    background: rgba(229, 103, 95, 0.15);
    color: var(--danger);
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* ---------- App shell ---------- */
.app-shell {
    display: flex;
    height: 100vh;
}

.sidebar {
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    width: 280px;
    min-width: 180px;
    max-width: 480px;
    flex-shrink: 0;
}
.sidebar-resizer {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    position: relative;
}
.sidebar-resizer:hover, .sidebar-resizer.resizing { background: var(--accent); opacity: 0.4; }
.editor-area { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sidebar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
}
.brand-block { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sidebar-header-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.version { font-weight: 400; font-size: 0.75rem; color: var(--text-muted); }
.sidebar-header .session-info { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
.vault-switcher { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
/* Capture rapide (v4.56.2) : réduite à une icône, positionnée dans la
   rangée +Nouveau/···, jamais reléguée dans un menu qui exigerait un
   second clic — voir .sidebar-actions plus bas. Le raccourci Alt+I
   fonctionne toujours indépendamment de la position visuelle du bouton. */
.quick-capture-wrap { display: flex; flex-direction: column; gap: 0.6rem; }
.quick-capture-textarea {
    width: 100%; padding: 0.6rem; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.95rem;
    resize: vertical;
}
.vault-switcher select {
    flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 0.35rem 0.5rem; font-size: 0.85rem;
}
.readonly-banner {
    margin: 0; padding: 0.5rem 1rem; background: rgba(229, 103, 95, 0.12);
    color: var(--danger); font-size: 0.82rem; border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; letter-spacing: 0.02em; }
.icon-btn {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn[hidden] { display: none; }
.icon-btn svg { display: block; }
.notif-bell-btn { position: relative; }
.notif-bell-badge {
    position: absolute; top: -2px; right: -4px; background: var(--danger); color: #fff;
    font-size: 0.62rem; font-weight: bold; line-height: 1; padding: 0.15rem 0.32rem;
    border-radius: 999px; min-width: 1.1rem; text-align: center;
}
.notif-bell-badge[hidden] { display: none; }

/* ---------------- Messagerie ---------------- */
.conversation-view { display: flex; flex-direction: column; gap: 0.6rem; }
.conversation-thread {
    max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.4rem; background: var(--bg); border-radius: 6px; border: 1px solid var(--border);
}
.message-bubble {
    align-self: flex-start; max-width: 85%; background: var(--bg-hover); border-radius: 8px;
    padding: 0.5rem 0.7rem; border: 1px solid var(--border);
}
.message-bubble.message-mine { align-self: flex-end; background: var(--accent); color: var(--accent-contrast); }
.message-bubble.message-mine .message-meta { color: var(--accent-contrast); opacity: 0.75; }
.message-text { white-space: pre-wrap; word-break: break-word; font-size: 0.88rem; }
.message-note-ref {
    display: inline-block; margin-top: 0.3rem; font-size: 0.78rem; color: inherit;
    text-decoration: underline; opacity: 0.85;
}
.message-meta { margin-top: 0.25rem; font-size: 0.7rem; color: var(--text-muted); }
.conversation-resolved-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; cursor: pointer; }
.conversation-reply-box {
    width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 0.5rem; font-size: 0.85rem; font-family: inherit; resize: vertical;
}
.conversation-list-row { display: block; cursor: pointer; }
.announce-picker-box { max-height: 30vh; overflow-y: auto; margin: 0.3rem 0; padding-left: 0.3rem; }
.announcement-item {
    border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem; margin-bottom: 0.5rem; background: var(--bg);
}
.announcement-item.announcement-retracted { opacity: 0.55; }

/* ---------------- Diffusion (broadcast) ---------------- */
.broadcast-modal-content { display: flex; flex-direction: column; gap: 0.6rem; }
.broadcast-body { max-height: 55vh; overflow-y: auto; padding: 0.6rem; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); }
.broadcast-ack-btn { align-self: center; margin-top: 0.4rem; }
.broadcast-user-list { list-style: none; margin: 0 0 0.8rem; padding: 0; font-size: 0.85rem; }
.broadcast-user-list li { padding: 0.15rem 0; }
.search-box { padding: 0.7rem 1rem 0; }
.search-box input {
    width: 100%; background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.45rem 0.6rem; color: var(--text); font-size: 0.85rem;
}
.sidebar-actions { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; }
/* "+ Nouveau" resserré (v4.56.2) : partage désormais sa rangée avec la
   capture rapide et "···", plus besoin d'occuper toute la largeur
   disponible comme lorsqu'il était seul sur sa ligne. */
.sidebar-actions-main { flex: 1 1 auto; padding-left: 0.5rem; padding-right: 0.5rem; min-width: 0; }
.sidebar-actions .btn-icon-only { flex: 0 0 auto; }
.sidebar-actions #quick-actions-menu-btn { flex: 0 0 auto; }
#create-menu-btn { flex: 1; }
#quick-actions-menu-btn { flex: 0 0 auto; min-width: 2.6rem; }
.display-mode-row { display: flex; gap: 0.4rem; padding: 0 1rem 0.6rem; align-items: center; }
.display-mode-row select {
    flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 0.3rem 0.4rem; font-size: 0.78rem;
}
#display-org-select { flex: 1; }
.btn-small {
    background: var(--bg-hover); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 0.35rem 0.6rem; font-size: 0.8rem; cursor: pointer;
}
.btn-small:hover { background: var(--border); }
.btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-icon-danger {
    background: transparent; border: 1px solid var(--danger); color: var(--danger);
    padding: 0.25rem 0.55rem; border-radius: 6px; cursor: pointer; font-size: 0.95rem; line-height: 1.2;
}
.btn-icon-danger:hover { background: var(--danger); color: #fff; }
.btn-small:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ghost { background: none; }

.file-tree { flex: 1; overflow-y: auto; padding: 0.4rem 0.5rem; font-size: 0.87rem; }

.smart-folders-section { padding: 0.3rem 0.5rem 0; font-size: 0.87rem; flex-shrink: 0; }
.smart-folders-header {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-muted); padding: 0.3rem 0.3rem 0.2rem;
}
.smart-folders-header .icon-btn { width: 1.3rem; height: 1.3rem; font-size: 0.9rem; line-height: 1; }
.smart-folder-item { border-bottom: 1px dashed var(--border); }
.smart-folder-item:last-child { border-bottom: none; margin-bottom: 0.3rem; }
.smart-folder-row { display: flex; align-items: center; }
.smart-folder-label { flex: 1; color: var(--accent); font-style: italic; }
.smart-folder-results { padding: 0.1rem 0 0.3rem 1.1rem; }
.smart-folder-result { font-style: normal; }
.tree-folder > .tree-label { font-weight: 500; }
.tree-row { display: flex; align-items: center; gap: 0.15rem; border-radius: 5px; }
.tree-row:hover { background: var(--bg-hover); }
.tree-label {
    display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0;
    padding: 0.3rem 0.4rem; border-radius: 5px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-label.active { background: var(--accent); color: var(--accent-contrast); }
.tree-label.dragging { opacity: 0.4; }
.tree-label.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--bg-hover); }
.tree-label.drop-target-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.tree-label.drop-target-after { box-shadow: inset 0 -2px 0 0 var(--accent); }
.tree-label.flash-highlight { animation: tree-flash 1.2s ease-out; }
.tree-label.has-broken-links { text-decoration: underline dotted var(--danger); text-underline-offset: 2px; }
@keyframes tree-flash {
    0% { background: var(--accent); color: var(--accent-contrast); }
    100% { background: transparent; }
}
.tree-item-actions { display: flex; gap: 0.15rem; padding-right: 0.3rem; }
/* Le bouton "⋮" est toujours visible (PC et tactile) : un menu contextuel
   par ligne, plutôt que des icônes dépendant du survol — inatteignables au
   doigt de toute façon, et encombrantes en permanence sur petit écran. */
@media (hover: none), (pointer: coarse) {
    .tree-row { min-height: 44px; }
    .btn-small { min-height: 40px; }
    .icon-btn { min-width: 40px; min-height: 40px; }
}
.tree-menu-btn {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 0.35rem 0.55rem; border-radius: 4px;
    min-width: 32px; min-height: 32px;
}
.tree-menu-btn:hover { background: var(--border); color: var(--text); }
.tree-children { margin-left: 0.9rem; border-left: 1px dashed var(--border); padding-left: 0.5rem; }
.tree-empty { color: var(--text-muted); font-size: 0.82rem; padding: 0.4rem; }

.sidebar-footer { padding: 0.7rem 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sidebar-footer-full { display: block; text-align: center; }

/* ---------- Editor ---------- */
.editor-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 1rem; border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}
.current-note-title { font-weight: 600; font-size: 0.95rem; }
.mobile-menu-btn { display: none; }
.mobile-menu-btn[hidden] { display: none; } /* [hidden] seul perdrait face à la règle mobile ci-dessous */
.sidebar-close-btn { display: none; }
.toolbar-actions { display: flex; align-items: center; gap: 0.6rem; }
.mode-switch { display: flex; }
.mode-switch[hidden] { display: none; }
.mode-btn {
    background: none; color: var(--text-muted); border: none;
    padding: 0.15rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.attach-btn { display: inline-flex; align-items: center; cursor: pointer; }
.attach-btn[hidden] { display: none; }

/* Icônes fournies par l'utilisateur (v4.51.0, découpées et harmonisées à
   110x110px en v4.51.1) remplaçant le texte des boutons de la barre
   d'outils de l'éditeur — objectif explicite : gagner la largeur perdue
   sur mobile au détriment de la source/l'aperçu. Chaque image porte déjà
   son propre habillage visuel (carré arrondi, couleur active/inactive) —
   le bouton qui la contient reste donc volontairement sans fond ni
   bordure propres (voir .btn-icon-only et .mode-btn ci-dessus) : un
   double encadrement écraserait la lisibilité au lieu de l'aider. */
.toolbar-icon { width: 28px; height: 28px; display: block; object-fit: contain; }
.btn-icon-only {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 0;
    padding: 0.15rem; min-width: 2rem;
}

.editor-panes { flex: 1; display: grid; overflow: hidden; min-height: 0; }
.editor-panes[hidden] { display: none; }
.editor-panes.mode-split { grid-template-columns: var(--split-left, 50%) 6px 1fr; grid-template-rows: 1fr; }
.editor-panes.mode-source { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.editor-panes.mode-live { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.editor-panes.mode-source .preview-pane, .editor-panes.mode-source .pane-resize-handle { display: none; }
.editor-panes.mode-live .source-pane, .editor-panes.mode-live .pane-resize-handle { display: none; }

.pane-resize-handle {
    cursor: col-resize; background: var(--border); touch-action: none;
    position: relative;
}
.pane-resize-handle::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; /* zone de préhension élargie, invisible */
}
.pane-resize-handle:hover, .pane-resize-handle.dragging { background: var(--accent); }

.source-pane {
    display: flex; overflow: hidden; min-height: 0; height: 100%;
    border-right: 1px solid var(--border); background: var(--bg);
}
.source-pane-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.source-pane-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.line-numbers {
    flex-shrink: 0; overflow: hidden; user-select: none; text-align: right;
    color: var(--text-muted); background: var(--bg);
    padding: 1.2rem 0.6rem 1.2rem 0.8rem; font-size: 0.95rem; line-height: 1.6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border-right: 1px solid var(--border);
}
.line-numbers[hidden] { display: none; }
.line-numbers div {
    white-space: nowrap;
    /* Une div VIDE (ligne sans numéro) n'a aucun contenu pour établir sa
       propre hauteur de ligne : sans cette hauteur minimale explicite,
       elle s'effondre à 0 pixel, décalant vers le haut toutes les divs
       suivantes d'une hauteur de ligne par ligne vide rencontrée — les
       numéros finissent alors en face de la MAUVAISE ligne du texte
       source. Doit correspondre exactement au line-height du texte
       source lui-même (voir .source-editor), jamais une valeur
       approximative. */
    min-height: 1.6em;
}

.source-editor {
    background: transparent; color: var(--text); border: none;
    padding: 1.2rem; font-size: 0.95rem; line-height: 1.6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    resize: none; height: 100%; width: 100%; min-height: 0;
    overflow-y: auto; position: relative; z-index: 1;
}
.source-editor-wrap { position: relative; flex: 1; min-height: 0; height: 100%; }

/* Calque de surlignage, superposé pile sous le textarea (devenu
   transparent) : même police, même remplissage au caractère près, pour
   que les rectangles <mark> tombent exactement sous le texte visible du
   textarea. Défile en JS de façon synchronisée avec lui. */
.source-highlight-layer {
    position: absolute; inset: 0; padding: 1.2rem; font-size: 0.95rem; line-height: 1.6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap; word-wrap: break-word; overflow: hidden;
    color: transparent; pointer-events: none; margin: 0; z-index: 0;
}
.source-highlight-layer mark.find-match { background: rgba(255, 214, 0, 0.38); border-radius: 2px; }
.source-highlight-layer mark.find-match-current { background: rgba(255, 140, 0, 0.65); }
.source-highlight-layer mark.list-numbering-warning { background: rgba(229, 103, 95, 0.28); border-bottom: 2px wavy var(--danger); border-radius: 2px; }

.find-replace-bar {
    flex-shrink: 0; z-index: 2;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    padding: 0.5rem 0.7rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.find-replace-bar[hidden] { display: none; }
.find-replace-row { display: flex; align-items: center; gap: 0.35rem; }
.find-replace-input {
    flex: 1; min-width: 6rem; background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 5px; padding: 0.3rem 0.5rem; font-size: 0.85rem;
}
.find-match-count { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.find-option-row {
    display: flex; align-items: center; gap: 0.2rem; font-size: 0.78rem; color: var(--text-muted);
    cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.preview-pane { padding: 1.2rem 1.6rem; overflow-y: auto; line-height: 1.65; min-height: 0; }
.preview-pane h1, .preview-pane h2, .preview-pane h3 { line-height: 1.3; }
.preview-pane code { background: var(--code-bg); padding: 0.1rem 0.3rem; border-radius: 4px; }
.preview-pane pre { background: var(--code-bg); padding: 0.8rem; border-radius: 6px; overflow-x: auto; }
.preview-pane pre code { background: none; padding: 0; }
.preview-pane blockquote {
    border-left: 3px solid var(--accent); margin: 0.6rem 0; padding: 0.2rem 0.9rem;
    color: var(--text-muted);
}
.callout {
    border-left: 4px solid var(--accent); background: var(--bg-hover);
    border-radius: 6px; margin: 0.8rem 0; padding: 0.6rem 0.9rem;
}
.callout-suggest {
    position: fixed; z-index: 60; background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); max-height: 260px; overflow-y: auto;
    min-width: 220px;
}
.callout-suggest-item { padding: 0.4rem 0.7rem; font-size: 0.85rem; cursor: pointer; }
.callout-suggest-item.highlighted, .callout-suggest-item:hover { background: var(--bg-hover); }
.callout-suggest-path { color: var(--text-muted); font-size: 0.78rem; margin-left: 0.3rem; }

.attachment-picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem;
    max-height: 60vh; overflow-y: auto;
}
.attachment-picker-cell {
    cursor: pointer; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
    background: var(--bg); display: flex; flex-direction: column;
}
.attachment-picker-cell:hover { border-color: var(--accent); }
.attachment-picker-cell img { width: 100%; height: 70px; object-fit: cover; display: block; }
.attachment-picker-icon { width: 100%; height: 70px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; position: relative; }
.attachment-picker-icon-pdf { background: #d94b3a1a; color: #d94b3a; }
.attachment-picker-ext-badge {
    position: absolute; bottom: 4px; right: 6px; font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.02em; color: var(--text-muted); background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: 3px; padding: 0.05rem 0.3rem;
}
.attachment-picker-icon-pdf .attachment-picker-ext-badge { color: #d94b3a; border-color: #d94b3a55; }
.attachment-picker-open-link {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 0.68rem; color: var(--accent); text-align: center;
    padding: 0.3rem 0.5rem; border-top: 1px solid var(--border); line-height: 1.3;
}
.attachment-picker-open-link:hover { background: var(--bg-hover); text-decoration: underline; }
.attachment-picker-name {
    font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.4rem 0; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attachment-picker-caption { font-size: 0.7rem; color: var(--text-muted); text-align: center; padding: 0.15rem 0.4rem; }
.attachment-picker-used-in {
    font-size: 0.68rem; color: var(--text-muted); text-align: center; padding: 0 0.4rem 0.35rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.callout-title { font-weight: 600; margin-bottom: 0.2rem; }
.callout p { margin: 0.2rem 0 0; color: var(--text); }
.callout-note, .callout-example { border-left-color: var(--accent); }
.callout-info, .callout-abstract { border-left-color: #4c9be8; }
.callout-tip, .callout-question { border-left-color: #2fb673; }
.callout-success { border-left-color: #2fb673; }
.callout-warning, .callout-todo { border-left-color: #e0a30d; }
.callout-danger { border-left-color: var(--danger); }
.callout-quote { border-left-color: #9b7fd4; }
.callout-default { border-left-color: var(--text-muted); }
.diff-view {
    max-height: 320px; overflow-y: auto; font-family: ui-monospace, Consolas, monospace;
    font-size: 0.82rem; border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0;
    background: var(--bg);
}
.diff-line { padding: 0.05rem 0.7rem; white-space: pre-wrap; word-break: break-word; }
.diff-line.diff-added { background: rgba(47, 182, 115, 0.15); color: #2fb673; }
.diff-line.diff-removed { background: rgba(224, 90, 90, 0.15); color: var(--danger); }
.diff-line.diff-same { color: var(--text-muted); }
.preview-pane .footnotes { margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted); }
.preview-pane .footnotes hr { border: none; border-top: 1px solid var(--border); margin-bottom: 0.6rem; }
.preview-pane .footnotes ol { padding-left: 1.2rem; }
.preview-pane .footnote-ref, .preview-pane .footnote-backref { color: var(--accent); text-decoration: none; }
.preview-pane .footnote-ref:hover, .preview-pane .footnote-backref:hover { text-decoration: underline; }
.preview-pane img { max-width: 100%; border-radius: 6px; }
.preview-pane table {
    border-collapse: collapse; width: 100%; margin: 0.8rem 0; font-size: 0.9rem;
    overflow-x: auto; display: block;
}
.preview-pane table thead { background: var(--bg-hover); }
.preview-pane table th, .preview-pane table td {
    border: 1px solid var(--border); padding: 0.45rem 0.7rem; text-align: left;
}
.preview-pane table th { font-weight: 600; }
.preview-pane table tbody tr:nth-child(even) { background: var(--bg-hover); }
.preview-pane a.wikilink { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.preview-pane a.tag-link { color: var(--accent); text-decoration: none; font-size: 0.85em; }
.preview-pane .broken-embed,
.preview-pane a.wikilink.broken-link { color: var(--danger); font-style: italic; }
.preview-pane a.wikilink.broken-link { border-bottom-color: var(--danger); }
.preview-pane .attachment-link { color: var(--accent); text-decoration: none; }
.preview-pane .attachment-link:hover { text-decoration: underline; }

/* Liens de mise en évidence d'interface (v4.65.0) — jamais confondus
   visuellement avec un lien vers une note, puisqu'ils ne mènent jamais
   à une autre note mais désignent un élément réel de l'écran. */
.preview-pane a.ui-pointer-link {
    color: #b5540a; text-decoration: none; border-bottom: 1px dashed #b5540a;
}
.preview-pane a.ui-pointer-link::before { content: '🎯 '; }

/* Encadré épais et vif, volontairement voyant — le but est d'attirer
   immédiatement l'œil vers l'élément désigné, pas de rester discret.
   outline (pas border) : ne modifie jamais la taille ni la position de
   l'élément encadré, quel qu'il soit (champ, bouton, item de menu). */
@keyframes ui-highlight-pulse {
    0%, 100% { outline-color: #ff0000; }
    50% { outline-color: #ff6666; }
}
.ui-highlight-target {
    outline: 4px solid #ff0000 !important;
    outline-offset: 2px;
    border-radius: 4px;
    animation: ui-highlight-pulse 1.2s ease-in-out infinite;
}
.preview-pane li.task-list-item { list-style: none; margin-left: -1.3em; }
.preview-pane input.task-checkbox { margin-right: 0.4em; cursor: pointer; vertical-align: middle; }

.lightbox-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 90;
    display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.lightbox-image { max-width: 92vw; max-height: 92vh; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.lightbox-counter { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.85rem; opacity: 0.8; }
.lightbox-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; opacity: 0.8; }
.lightbox-close:hover { opacity: 1; }
.preview-pane mark.search-highlight {
    border-radius: 2px; padding: 0 1px; color: #1e1f22;
}
/* Une couleur distincte par mot recherché (dans l'ordre d'apparition dans
   la requête), lisible dans les deux thèmes grâce à un fond clair et un
   texte sombre fixe — boucle au-delà de 6 mots. */
.preview-pane mark.search-highlight-0 { background: #ffe066; }
.preview-pane mark.search-highlight-1 { background: #8ce99a; }
.preview-pane mark.search-highlight-2 { background: #74c0fc; }
.preview-pane mark.search-highlight-3 { background: #f783ac; }
.preview-pane mark.search-highlight-4 { background: #ffa94d; }
.preview-pane mark.search-highlight-5 { background: #b197fc; }
.preview-pane mark.search-highlight.current {
    /* Un simple contour plutôt qu'un remplissage : reste visible et net
       par-dessus n'importe laquelle des couleurs ci-dessus, sans jamais
       la masquer. */
    outline: 3px solid #1e1f22; outline-offset: 1px;
}

.status-line {
    margin: 0; padding: 0.3rem 1rem; font-size: 0.78rem; color: var(--text-muted);
    min-height: 1.4em;
}
.status-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }

/* Suggestions de liens (v4.56.1) : bannière discrète après
   enregistrement, jamais bloquante — l'utilisateur choisit lui-même de
   les voir ou non. Fond teinté par la couleur d'accent (pas juste une
   bordure) pour vraiment attirer l'œil, un simple texte gris passait
   inaperçu selon le retour de l'utilisateur. */
.link-suggestions-banner {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem;
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
    border-bottom: 2px solid var(--accent); font-size: 0.85rem;
}
/* Bug réel corrigé (v4.56.2) : "display: flex" ci-dessus a exactement
   la même spécificité que la règle native du navigateur pour l'attribut
   "hidden" — sans cette redéfinition explicite, la bannière restait
   visible quoi que fasse le JavaScript sur cet attribut, puisque la
   règle de CE fichier CSS (chargé après la feuille de style native du
   navigateur) l'emportait silencieusement. */
.link-suggestions-banner[hidden] { display: none; }
.link-suggestions-banner span { flex: 1; color: var(--text); font-weight: 500; }
.source-highlight-layer mark.link-suggestion {
    background: rgba(120, 170, 255, 0.28); border-radius: 2px;
    /* Seule exception au "pointer-events: none" du calque parent : le clic
       doit atteindre CETTE surbrillance précise pour ouvrir sa popup,
       sans jamais gêner la frappe normale ailleurs dans le texte. */
    pointer-events: auto; cursor: pointer;
}
.source-highlight-layer mark.link-suggestion:hover { background: rgba(120, 170, 255, 0.5); }

/* Popup de suggestion (v4.56.1) : grande, redimensionnable (poignée
   classique en coin, comme un <textarea>), avec ascenseur — remplace la
   petite infobulle automatique au survol et la barre de sélection
   multiple, jugées peu compréhensibles par l'utilisateur. */
.link-suggestion-popup {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 20; width: 380px; height: 320px;
    min-width: 260px; min-height: 200px; max-width: 90%; max-height: 80%;
    resize: both; overflow: auto;
    padding: 1rem; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-elevated); box-shadow: 0 8px 28px rgba(0,0,0,0.4);
    font-size: 0.9rem; line-height: 1.5;
    display: flex; flex-direction: column; gap: 0.6rem;
}
/* Même correctif que .link-suggestions-banner ci-dessus (v4.56.2) :
   "display: flex" doit être explicitement neutralisé pour l'état caché,
   sinon l'attribut "hidden" natif n'a plus aucun effet sur cet élément. */
.link-suggestion-popup[hidden] { display: none; }
.link-suggestion-popup h3 { margin: 0; font-size: 1rem; }
.link-suggestion-popup-body { flex: 1; overflow-y: auto; white-space: pre-wrap; color: var(--text-muted); }
.link-suggestion-popup-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.status-line { justify-self: start; }
.clock-display { justify-self: center; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; padding: 0.3rem 1rem; }
.word-count { justify-self: end; }
.word-count { font-size: 0.78rem; color: var(--text-muted); padding: 0.3rem 1rem; white-space: nowrap; }
.word-count[hidden] { display: none; }

/* ---------- Backlinks ---------- */
.backlinks-toggle {
    background: var(--bg-elevated); border: none; border-top: 1px solid var(--border);
    color: var(--text-muted); text-align: left; padding: 0.4rem 1.2rem;
    font-size: 0.8rem; cursor: pointer;
}
.backlinks-toggle:hover { color: var(--text); }
.backlinks-panel {
    border-top: 1px solid var(--border); background: var(--bg-elevated);
    max-height: 160px; overflow-y: auto; padding: 0.5rem 1.2rem;
}
.backlinks-panel a {
    display: block; padding: 0.25rem 0; color: var(--accent); text-decoration: none;
    font-size: 0.85rem; cursor: pointer;
}
.backlinks-panel a:hover { text-decoration: underline; }
.backlinks-panel a.outlink-broken { color: var(--danger); font-style: italic; }

/* ---------- Canvas ---------- */
.canvas-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.canvas-view[hidden] { display: none; }
.canvas-toolbar {
    padding: 0.4rem 1rem; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.canvas-hint { font-size: 0.78rem; color: var(--text-muted); }
.canvas-surface {
    flex: 1; position: relative; overflow: auto; background: var(--bg);
    background-image: radial-gradient(var(--border) 1px, transparent 1px);
    background-size: 22px 22px;
    cursor: default;
}
.canvas-edges { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; }
.canvas-edge-line { stroke: var(--accent); stroke-width: 2; pointer-events: none; }
.canvas-edge-hit { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.canvas-edge-hit:hover + .canvas-edge-line, .canvas-edge-hit:hover { stroke: var(--danger); }
.canvas-edge-arrow { fill: var(--accent); }
.canvas-temp-edge { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.canvas-card {
    position: absolute; min-width: 160px; min-height: 90px;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); display: flex; flex-direction: column;
    resize: both; overflow: hidden; z-index: 1;
}
.canvas-card.note-card { border-color: var(--accent); }
.canvas-card.canvas-card-search-match { border-color: #ff9f1c; border-width: 2px; box-shadow: 0 0 0 2px #ff9f1c33, 0 2px 6px rgba(0,0,0,0.15); }
.canvas-card-header {
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem; display: flex; align-items: center; gap: 0.4rem;
    user-select: none;
}
.canvas-drag-zone {
    cursor: move; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; touch-action: none;
    background: none; border: none; font: inherit; color: inherit; text-align: left; padding: 0.1rem 0.2rem;
    border-radius: 3px;
}
.canvas-drag-zone:focus { outline: 1px solid currentColor; background: rgba(255,255,255,0.15); }
.canvas-connector-handle { cursor: crosshair; padding: 0 0.2rem; touch-action: none; }
.canvas-card-header button { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.8rem; opacity: 0.85; }
.canvas-card-header button:hover { opacity: 1; }
.canvas-color-swatch {
    width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.25);
    padding: 0; cursor: pointer; flex-shrink: 0; position: relative; overflow: hidden;
}
.canvas-color-swatch input[type="color"] {
    position: absolute; inset: -4px; width: 200%; height: 200%; border: none; padding: 0; cursor: pointer;
    opacity: 0; /* le rond coloré (background inline) sert de rendu visuel ; l'input reste invisible mais cliquable */
}
.canvas-title-edit {
    flex: 1; min-width: 0; background: rgba(255,255,255,0.25); border: 1px solid rgba(0,0,0,0.2);
    border-radius: 3px; font: inherit; color: #1a1a1a; padding: 0.05rem 0.3rem;
}
.canvas-card textarea {
    flex: 1; border: none; background: transparent; color: var(--text); resize: none;
    padding: 0.5rem; font-size: 0.85rem; font-family: inherit;
}
.canvas-note-card-body {
    flex: 1; display: flex; align-items: center; padding: 0.6rem;
    cursor: pointer; color: var(--accent); font-size: 0.88rem;
    overflow: hidden; text-overflow: ellipsis;
}
.canvas-note-card-body:hover { text-decoration: underline; }
.modal-filter-input {
    width: 100%; margin-bottom: 0.6rem; background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.4rem 0.6rem; color: var(--text); font-size: 0.85rem;
}

/* ---------- Modale générique ---------- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
    width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column;
}
.modal-box.graph-modal {
    max-width: 94vw; width: 1100px; height: 85vh; max-height: 85vh;
}
.modal-box.graph-modal .modal-body { padding: 0; overflow: hidden; flex: 1; }
/* Contenu riche (listes/tableaux à plusieurs colonnes ou métadonnées) —
   exploite une bien plus grande partie de l'écran disponible plutôt que
   de forcer un défilement horizontal sur des informations qui
   pourraient tenir à l'écran (v4.59.6, suite à une remarque d'ergonomie
   générale). Redimensionnable manuellement (coin bas-droit) pour
   s'adapter davantage encore si besoin. */
.modal-box.wide-modal {
    max-width: 96vw; width: 1400px; max-height: 90vh;
    resize: both; overflow: auto; min-width: 480px; min-height: 300px;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600;
}
.modal-body { padding: 1rem; overflow-y: auto; }
.modal-list-item {
    padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem;
    display: flex; justify-content: space-between; align-items: center;
    touch-action: manipulation; /* évite que le tap soit retardé/absorbé par la détection de double-tap-zoom */
}
.modal-list-item:hover { background: var(--bg-hover); }
.modal-list-item .count { color: var(--text-muted); font-size: 0.78rem; }
.filterable-list-input {
    width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border);
    color: var(--text); border-radius: 6px; padding: 0.5rem 0.6rem; font-size: 0.9rem; margin-bottom: 0.6rem;
}
.filterable-list-items { max-height: 320px; overflow-y: auto; }
.filterable-list-row.highlighted { background: var(--bg-hover); }
.special-char-row { display: flex; align-items: center; gap: 0.8rem; }
.special-char-glyph {
    font-size: 1.6rem; min-width: 2.2rem; text-align: center; flex-shrink: 0;
}
.special-char-info { color: var(--text-muted); font-size: 0.85rem; }

/* Mes images (v4.60.0) */
.my-images-toolbar {
    display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
    margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border);
}
.my-images-search { flex: 1; min-width: 200px; }
.my-images-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem; max-height: 60vh; overflow-y: auto; padding: 0.2rem;
}
.my-images-cell {
    position: relative; border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; cursor: pointer; background: var(--bg-elevated);
    transition: border-color 0.15s;
}
.my-images-cell:hover { border-color: var(--accent); }
.my-images-checkbox {
    position: absolute; top: 0.4rem; left: 0.4rem; z-index: 2;
    width: 1.2rem; height: 1.2rem; cursor: pointer;
}
.my-images-thumb { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--bg); }
.my-images-badge {
    position: absolute; top: 0.4rem; right: 0.4rem; background: var(--accent);
    color: #fff; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 4px;
}
.my-images-cell-info { padding: 0.5rem; }
.my-images-cell-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-images-cell-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
.my-images-cell-tags { font-size: 0.75rem; color: var(--accent); margin-top: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-images-detail-preview { max-width: 100%; max-height: 40vh; object-fit: contain; display: block; margin: 0 auto 1rem; border-radius: 6px; }

/* Éditeur d'import d'image (v4.60.0) : recadrage, rognage, filigrane */
.image-import-preview-container {
    position: relative; display: inline-block; max-width: 100%;
    margin: 0 auto 1rem; user-select: none;
}
.image-import-preview-img { max-width: 100%; max-height: 45vh; display: block; }
.image-import-crop-overlay {
    position: absolute; border: 2px dashed #fff;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.5); pointer-events: none;
}
.image-import-trim-overlay { position: absolute; inset: 0; pointer-events: none; }
.image-import-trim-band { position: absolute; background: rgba(220, 38, 38, 0.45); }
.image-import-trim-top { top: 0; left: 0; right: 0; height: 0; }
.image-import-trim-bottom { bottom: 0; left: 0; right: 0; height: 0; }
.image-import-trim-left { top: 0; bottom: 0; left: 0; width: 0; }
.image-import-trim-right { top: 0; bottom: 0; right: 0; width: 0; }
.image-import-watermark-marker {
    position: absolute; transform: translate(-50%, -50%); cursor: move;
    background: rgba(0,0,0,0.6); color: #fff; padding: 0.2rem 0.5rem;
    border-radius: 4px; font-size: 0.85rem; border: 1px dashed #fff;
    white-space: nowrap;
}
.image-import-section { margin: 1rem 0; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.image-import-section h4 { margin: 0 0 0.4rem; font-size: 0.9rem; }
.image-import-trim-inputs { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.modal-box.markdown-help-modal { max-width: 620px; width: 90vw; }
.about-content p { margin: 0.5rem 0; }
.about-content a { color: var(--accent); }
.audit-log-view {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 0.8rem; max-height: 65vh; overflow-y: auto; font-size: 0.8rem;
    font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word;
    color: var(--text);
}
.audit-filters { display: flex; gap: 0.5rem; margin: 0.6rem 0 0.3rem; }
.audit-filters input { flex: 1; padding: 0.4rem 0.6rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.audit-filters select { padding: 0.4rem 0.6rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.password-field-wrap { position: relative; display: flex; }
.password-field-wrap input { flex: 1; padding-right: 2.2rem; }
.password-toggle-btn {
    position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 0.95rem; padding: 0.2rem;
    color: var(--text-muted); line-height: 1;
}
.password-toggle-btn:hover { color: var(--text); }
.admin-default-password-row {
    display: flex; align-items: flex-end; gap: 0.6rem; margin: 0.6rem 0 1.2rem;
    padding: 0.8rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
}
.admin-default-password-field { flex: 1; margin: 0; }
.admin-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.admin-sortable:hover { color: var(--text); }
.admin-sort-active { color: var(--accent); }
.admin-path-cell { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-usage-link { display: block; color: var(--accent); text-decoration: none; margin-top: 0.1rem; }
.attachment-usage-link:hover { text-decoration: underline; }

.format-toolbar {
    display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem;
    border-bottom: 1px solid var(--border); background: var(--bg-elevated); flex-wrap: wrap;
}
.format-toolbar[hidden] { display: none; }
.fmt-btn {
    background: none; border: 1px solid transparent; border-radius: 5px; color: var(--text);
    padding: 0.25rem 0.55rem; font-size: 0.82rem; cursor: pointer; line-height: 1.2;
}
.fmt-btn:hover { background: var(--bg-hover); border-color: var(--border); }
.fmt-btn-menu { font-size: 0.78rem; color: var(--text-muted); }
.fmt-btn-active { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.fmt-btn-disabled, .fmt-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fmt-sep { width: 1px; height: 1.2rem; background: var(--border); margin: 0 0.2rem; }
.preview-pane .attachment-link.attachment-highlighted {
    background: rgba(224, 163, 13, 0.25); outline: 2px solid #e0a30d; border-radius: 4px; padding: 0.1rem 0.3rem;
}
.dropdown-menu {
    position: fixed; z-index: 70; background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); min-width: 180px; padding: 0.3rem;
    display: flex; flex-direction: column; gap: 0.1rem;
}
.dropdown-menu-item {
    display: block; width: 100%; box-sizing: border-box; text-align: left; background: none; border: none;
    color: var(--text); font-size: 0.85rem; padding: 0.5rem 0.6rem; border-radius: 5px; cursor: pointer;
    text-decoration: none; font: inherit;
}
.dropdown-menu-item:hover { background: var(--bg-hover); }
.dropdown-menu-separator { height: 1px; background: var(--border); margin: 0.25rem 0.2rem; }
.dropdown-menu-item.popularity-badge { font-size: 0.8rem; color: var(--text-muted); }
.dropdown-menu-item.popularity-badge:hover { color: var(--text); }
.modal-box.account-modal-box { max-width: 560px; width: 90vw; max-height: 85vh; overflow-y: auto; }
.modal-box.inbox-modal-box {
    max-width: 96vw; width: 900px; height: 640px; max-height: 90vh; min-width: 560px; min-height: 380px;
    resize: both; overflow: auto;
}
.modal-box.inbox-modal-box .modal-body { overflow: visible; display: flex; flex-direction: column; height: 100%; }
.inbox-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.inbox-table-scroll { flex: 1; max-height: none; min-height: 120px; }
.account-section-title { margin: 1.1rem 0 0.4rem; font-size: 0.95rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
.account-section-title:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.trash-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.trash-item-info { flex: 1 1 220px; min-width: 0; }
.trash-item-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.trash-item-meta.trash-item-alert { color: var(--danger); font-weight: 600; }
.trash-item-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; flex-shrink: 0; }
.trash-preview-textarea {
    width: 100%; min-height: 300px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); color: var(--text); resize: vertical;
}
.account-sort-row { display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0 0.4rem; font-size: 0.8rem; color: var(--text-muted); }
.markdown-help-category {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
    padding: 0.6rem 0.6rem 0.2rem;
}
.markdown-help-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; align-items: center; }
.markdown-help-label { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.1rem; }
.markdown-help-code {
    font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; color: var(--text);
    white-space: pre-wrap; word-break: break-word;
}
.markdown-help-preview { font-size: 0.88rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
    .markdown-help-row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ---------- Vue graphique interactive ---------- */
.local-graph-outer { display: flex; flex-direction: column; height: 100%; }
.graph-breadcrumb {
    flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem;
    padding: 0.4rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--bg-elevated);
    font-size: 0.8rem;
}
.graph-breadcrumb-item { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--accent); text-decoration: underline; }
.graph-breadcrumb-item.graph-breadcrumb-current { color: var(--text); text-decoration: none; cursor: default; font-weight: 600; }
.graph-breadcrumb-sep { color: var(--text-muted); }
.graph-path-tooltip {
    position: absolute; z-index: 5; pointer-events: none; background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: 5px; padding: 0.2rem 0.5rem; font-size: 0.78rem;
    color: var(--text); white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.graph-proximity-control {
    flex-shrink: 0; display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--bg-elevated);
}
.graph-proximity-text { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; min-width: 9rem; }
.graph-proximity-control input[type="range"] { flex: 1; accent-color: var(--accent); }
.local-graph-canvas-holder { flex: 1; min-height: 0; position: relative; }
.graph-canvas-wrap {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    background: var(--bg); cursor: grab; touch-action: none;
}
.graph-canvas-wrap.panning { cursor: grabbing; }
.graph-svg-full { width: 100%; height: 100%; display: block; }
.graph-node-circle { fill: var(--accent); cursor: pointer; stroke: var(--bg-elevated); stroke-width: 2px; touch-action: none; }
.graph-node:hover .graph-node-circle { fill: #ff9f1c; }
.graph-node-label { fill: var(--text); font-size: 12px; pointer-events: none; user-select: none; }
/* Nœud sur lequel le graphe local est actuellement centré : un anneau
   distinctif permanent (pas la même couleur que le survol, pour ne
   jamais confondre « c'est le centre » et « je le survole en ce
   moment ») ; le survol du centre lui-même se comporte normalement. */
.graph-node-circle-center { stroke: #ff9f1c; stroke-width: 3px; }
.graph-node-center:hover .graph-node-circle-center { fill: #ff9f1c; }
.graph-node-label-center { font-weight: 700; }
.graph-edge { stroke: var(--border); stroke-width: 1.2; }
.graph-hint {
    position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: var(--text-muted);
    pointer-events: none; background: rgba(0,0,0,0.35);
    padding: 0.2rem 0.5rem; border-radius: 4px;
}
.graph-zoom-controls {
    position: absolute; right: 12px; bottom: 10px; display: flex; flex-direction: column; gap: 0.3rem;
}
.graph-zoom-controls button {
    width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg-elevated); color: var(--text); cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.graph-zoom-controls button:hover { background: var(--bg-hover); }
.graph-size-mode-controls {
    position: absolute; right: 12px; top: 10px; display: flex; gap: 0.3rem;
}
.graph-size-mode-controls button {
    padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg-elevated); color: var(--text); cursor: pointer; font-size: 0.8rem;
}
.graph-size-mode-controls button:hover { background: var(--bg-hover); }
.graph-size-mode-controls button.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* ---------- Administration ---------- */
.admin-shell { max-width: 1000px; margin: 0 auto; padding: 1.5rem; }
.admin-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 1.2rem;
}
.admin-back { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; }
.admin-back:hover { color: var(--accent); }
.admin-header h1 { margin: 0.3rem 0 0; font-size: 1.4rem; }
.admin-header .session-info { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; color: var(--text-muted); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; }
.admin-tab {
    background: none; border: none; padding: 0.6rem 1rem; color: var(--text-muted);
    cursor: pointer; font-size: 0.9rem; border-bottom: 2px solid transparent;
    white-space: nowrap; flex-shrink: 0;
}
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

/* Illustrations partagées du vault-modèle (v4.64.0) */
.admin-subsection-title { margin: 1.5rem 0 0.4rem; font-size: 1rem; }
.onboarding-assets-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.onboarding-asset-card {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated);
}
.onboarding-asset-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; background: var(--bg); flex-shrink: 0; }
.onboarding-asset-info { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.onboarding-asset-name { font-weight: 600; font-size: 0.9rem; }
.onboarding-asset-meta { font-size: 0.8rem; color: var(--text-muted); }
.onboarding-asset-snippet { flex: 1; min-width: 200px; font-family: monospace; font-size: 0.8rem; }

/* Liste des liens de mise en évidence d'interface (v4.66.0) */
.ui-highlight-registry-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ui-highlight-registry-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.ui-highlight-registry-label { flex: 1; font-size: 0.9rem; }
.ui-highlight-registry-snippet { font-family: monospace; font-size: 0.8rem; width: 220px; }

/* Sélecteur de note d'ouverture automatique (v4.68.0) */
.opening-note-picker { display: flex; align-items: center; gap: 0.6rem; }
.opening-note-picker select { flex: 1; min-width: 200px; }

/* Sélecteur de lien de mise en évidence, dans le menu Insérer du vault-modèle (v4.69.0) */
.ui-link-picker { display: flex; flex-direction: column; gap: 0.6rem; }
.ui-link-picker-filter { width: 100%; }
.ui-link-picker-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.ui-link-picker-list .modal-list-item { display: flex; justify-content: space-between; gap: 0.6rem; cursor: pointer; }
.admin-panel-header h2 { margin: 0; font-size: 1.1rem; }
.admin-panel-header .header-actions { display: flex; gap: 0.5rem; align-items: center; }
.backups-summary-detail { font-size: 0.9rem; font-weight: 400; color: var(--text-muted); }
.backups-help-content p { margin: 0 0 0.7rem; line-height: 1.5; }
.backups-help-content ul { margin: 0 0 0.7rem; padding-left: 1.3rem; }
.backups-help-content li { margin-bottom: 0.3rem; line-height: 1.4; }

.inbox-toolbar { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.7rem; align-items: flex-end; }
.inbox-filter-field { display: flex; flex-direction: column; font-size: 0.75rem; color: var(--text-muted); gap: 0.15rem; }
.inbox-filter-field input { font-size: 0.85rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); }
.inbox-actions-bar { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.inbox-table-scroll { max-height: 360px; }
.stats-chart-section { margin-top: 1.2rem; }
.stats-chart-section select { margin-left: 0.5rem; }
#stats-chart-container { margin-top: 0.6rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem; }
.inbox-preview-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.inbox-preview-cell:hover { text-decoration: underline; }
.inbox-full-message { white-space: pre-wrap; word-break: break-word; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); }
.admin-table th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.admin-inline-select {
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 5px; padding: 0.25rem 0.4rem; font-size: 0.85rem;
}
.admin-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.admin-danger { color: var(--danger); }
.backup-next-deadline {
    background: var(--bg-elevated); border: 1px solid var(--accent); border-left: 4px solid var(--accent);
    border-radius: 6px; padding: 0.7rem 1rem; margin: 0.6rem 0; font-size: 0.95rem; font-weight: 600;
}
.backup-next-deadline.overdue { border-color: var(--danger); border-left-color: var(--danger); color: var(--danger); }
.backup-protected-badge { cursor: help; }
.backup-actions-cell { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.backup-synoptic-title { font-size: 1rem; margin: 0; flex: 1; }
.backup-synoptic-year { font-weight: 700; font-size: 1.05rem; min-width: 3.5rem; text-align: center; }
.backup-synoptic-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); margin: 0.3rem 0 0.6rem; }
.backup-synoptic-legend .dot-sample { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.3rem; vertical-align: middle; }
.dot-sample.dot-done { background: #00B050; }
.dot-sample.dot-missing { background: #fff; border: 2px solid #999; }
.dot-sample.dot-never { background: #FF0000; }
.dot-sample.dot-future { background: #5B9BD5; }
.backup-synoptic-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); margin-bottom: 1rem; }
.backup-synoptic-scroll svg { display: block; }
.synoptic-dot { cursor: default; }
.synoptic-dot.clickable { cursor: pointer; }
.synoptic-dot.clickable:hover { stroke: var(--text); stroke-width: 2; }

.backups-table-scroll { max-height: 380px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1rem; }
.backups-table-scroll table { margin: 0; }
.backups-table-scroll thead th { position: sticky; background: var(--bg-elevated); z-index: 2; }
.backups-table-scroll thead tr:first-child th { top: 0; z-index: 3; }
.admin-filter-row th { padding: 0.3rem 0.5rem; }
.admin-filter-row input { width: 100%; box-sizing: border-box; font-size: 0.78rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); }
.admin-sortable { cursor: pointer; user-select: none; }
.admin-sortable:hover { color: var(--accent); }
.admin-sort-active { color: var(--accent); }
.admin-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; font-size: 0.85rem; color: var(--text-muted); }
.admin-field input[type="text"], .admin-field input[type="password"], .admin-field select {
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 0.5rem 0.6rem; font-size: 0.9rem;
}
.admin-member-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 200px; overflow-y: auto; }
.admin-checkbox-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text); font-weight: normal; }
.admin-modal-submit { margin-top: 0.4rem; }

@media (max-width: 780px) {
    .app-shell { flex-direction: column; position: relative; overflow: hidden; }
    .mobile-menu-btn { display: inline-flex; font-size: 1.1rem; }
    .mobile-menu-btn[hidden] { display: none; }
    .sidebar-close-btn { display: inline-flex; }
    .sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 85vw;
        max-width: 340px;
        max-height: none;
        z-index: 40;
        border-right: 1px solid var(--border);
        border-bottom: none;
        box-shadow: 4px 0 16px rgba(0,0,0,0.3);
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-resizer { display: none; }
    .sidebar-scrim {
        display: none;
        position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 35;
    }
    .sidebar-scrim.visible { display: block; }
    .editor-toolbar { flex-wrap: wrap; gap: 0.5rem; }
    .current-note-title { order: -1; flex: 1 1 100%; }
    .toolbar-actions { flex-wrap: wrap; gap: 0.35rem; }
    .editor-panes.mode-split { grid-template-columns: 1fr; grid-template-rows: var(--split-left, 50%) 6px 1fr; }
    .source-pane { border-right: none; border-bottom: 1px solid var(--border); }
    .pane-resize-handle { cursor: row-resize; }
    .pane-resize-handle::after { top: -4px; bottom: -4px; left: 0; right: 0; }
}

/* ---------------- Arborescence des groupes (administration) ---------------- */
.groups-tree { margin-top: 0.8rem; }
.group-node { margin-bottom: 0.1rem; }
.group-row {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem;
    border-radius: 6px; cursor: pointer;
}
.group-row:hover { background: var(--bg-hover); }
.group-row.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--bg-hover); }
.group-node .tree-children { margin-left: 1.4rem; border-left: 1px dashed var(--border); padding-left: 0.8rem; }
.group-multiparent-badge {
    font-size: 0.72rem; font-weight: bold; color: var(--accent); background: var(--bg-hover);
    border: 1px solid var(--accent); border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: 0.5rem;
    cursor: pointer;
}
.group-multiparent-badge:hover { background: var(--accent); color: var(--accent-contrast); }
.group-empty-hint { margin: 0.2rem 0 0.4rem; font-size: 0.8rem; }