*{box-sizing:border-box}
:root{
  /* charte Thiga : cramoisi #C50041, bordeaux #5E0028, indigo #1B0442, blanc chaud #FFFCF9 */
  --ink:#1a1a1a;--faint:#a8a29b;--faint2:#615c6b;--line:#eee7e0;--paper:#fffcf9;
  --accent:#c50041;--accent-deep:#5e0028;--accent-weak:#fae9f0;
  --sidebar:#f7f3ef;--hover:#efe7df;--sel:#fae9f0;--handle:#c8c1b8;
  --yellow:#fdf0d1;--red-bg:#fbe4e4;--blue-bg:#ddebf1;--green-bg:#dbeddb;--purple-bg:#eae4f2;
}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);font-size:16px}
#app{display:flex;height:100vh;overflow:hidden}

/* ============ SIDEBAR (façon Notion) ============ */
#side{width:260px;flex:0 0 260px;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;font-size:14px}
#side .ws{display:flex;align-items:center;gap:8px;padding:10px 12px 4px;font-weight:600;cursor:default}
#side .ws .logo{width:20px;height:20px;border-radius:5px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
#side .toprow{display:flex;align-items:center;gap:2px;padding:2px 10px 8px}
#side .toprow .home{flex:1;display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;font-weight:500;cursor:pointer}
#side .toprow .home:hover{background:var(--hover)}
#side .toprow .ico{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;color:var(--faint2);cursor:pointer;font-size:14px}
#side .toprow .ico:hover{background:var(--hover)}
#nav{overflow:auto;padding:2px 8px 40px;flex:1}
.cat{margin-top:10px}
.cat>.cat-h{display:flex;align-items:center;gap:3px;padding:2px 6px;font-size:12px;font-weight:600;color:var(--faint2);cursor:pointer;border-radius:5px;user-select:none;height:24px}
.cat>.cat-h:hover{background:var(--hover)}
.cat>.cat-h .tri{font-size:9px;transition:transform .12s;color:var(--faint);width:10px}
.cat.closed>.cat-h .tri{transform:rotate(-90deg)}
.cat.closed .pg{display:none}
.cat .add{margin-left:auto;opacity:0;font-size:15px;color:var(--faint);width:18px;text-align:center}
.cat>.cat-h:hover .add{opacity:1}
.pg{display:flex;align-items:center;gap:7px;padding:3px 6px 3px 22px;border-radius:6px;cursor:pointer;color:#5a5854;white-space:nowrap;overflow:hidden}
.pg:hover{background:var(--hover)}
.pg.active{background:var(--accent-weak);color:var(--accent-deep);font-weight:600}
.pg .ico{opacity:.85;flex:0 0 auto;width:18px;text-align:center}
.pg .t{overflow:hidden;text-overflow:ellipsis}
/* arbre imbriqué (logique orga Notion) */
.tnode .fold{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:6px;cursor:pointer;color:#5a5854;white-space:nowrap;overflow:hidden}
.tnode .fold:hover{background:var(--hover)}
.tnode .fold .tri{font-size:9px;color:var(--faint);width:10px;flex:0 0 auto;transition:transform .12s}
.tnode.folder.closed>.fold .tri{transform:rotate(-90deg)}
.tnode.folder.closed>.tchildren{display:none}
.tnode .fold .ic{width:17px;text-align:center;opacity:.85;flex:0 0 auto}
.tnode .fold .t{overflow:hidden;text-overflow:ellipsis}
#side .foot{border-top:1px solid var(--line);padding:8px 12px;display:flex;align-items:center;gap:8px;color:var(--faint2);font-size:13px}
#side .foot .who{margin-left:auto;font-size:11px;color:var(--faint)}

/* ============ MAIN ============ */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#top{height:45px;flex:0 0 45px;display:flex;align-items:center;gap:6px;padding:0 14px;font-size:14px;border-bottom:1px solid transparent}
#crumb{display:flex;align-items:center;gap:5px;flex:1;overflow:hidden;color:var(--faint2);white-space:nowrap}
#crumb .seg{display:flex;align-items:center;gap:5px;padding:2px 6px;border-radius:5px;cursor:default;overflow:hidden;text-overflow:ellipsis}
#crumb .seg.page{color:var(--ink);font-weight:500}
#crumb .sep{color:var(--faint)}
#top .modif{color:var(--faint);font-size:12.5px;margin-right:4px;white-space:nowrap}
#presence{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint2);margin-right:4px}
#presence .dot{width:8px;height:8px;border-radius:50%;background:#2ec27e;display:inline-block}
#top .tb{border:none;background:none;color:var(--faint2);width:30px;height:28px;border-radius:6px;cursor:pointer;font-size:15px}
#top .tb:hover{background:var(--hover)}
#share{display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:7px;font-weight:600;color:#fffcf9;background:var(--accent);cursor:pointer;font-size:13.5px}
#share:hover{background:var(--accent-deep)}

#doc{flex:1;overflow:auto;padding:0 0 30vh}
#page{max-width:900px;margin:0 auto;padding:0 96px}
#cover{height:12px}
#emoji{font-size:78px;line-height:1;margin:40px 0 2px;cursor:pointer;width:fit-content;border-radius:8px;padding:0 4px}
#emoji:hover{background:var(--hover)}
#ptitle{font-size:40px;font-weight:700;letter-spacing:-.01em;margin:2px 0 4px;outline:none;line-height:1.2}
#ptitle:empty:before{content:"Sans titre";color:#dcdbd8}
#meta{display:flex;align-items:center;gap:8px;color:var(--faint2);font-size:14px;margin:6px 0 2px}
#meta .av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-deep));display:grid;place-items:center;color:#fff;font-size:11px;font-weight:600}
#divhr{border:none;border-top:1px solid var(--line);margin:14px 0 20px}

/* ============ CONTENU / BLOCS ============ */
#body{outline:none;font-size:16px;line-height:1.5;color:var(--ink);position:relative}
#body>*{position:relative;padding:3px 0;margin:1px 0}
#body h1{font-size:30px;font-weight:700;margin:1.4em 0 .2em;line-height:1.3}
#body h2{font-size:24px;font-weight:600;margin:1.1em 0 .2em;line-height:1.3}
#body h3{font-size:20px;font-weight:600;margin:.9em 0 .2em;line-height:1.3}
#body p{margin:0}
#body ul,#body ol{margin:0;padding-left:1.6em}
#body li{margin:2px 0}
#body a{color:var(--ink);text-decoration:underline;text-decoration-color:#c9c8c4;cursor:pointer}
#body strong{font-weight:600}
#body code{background:#f1f0ee;color:#eb5757;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;padding:1px 5px;border-radius:4px}
#body hr.divider{border:none;border-top:1px solid var(--line);margin:6px 0}
#body blockquote{margin:4px 0;padding:2px 0 2px 14px;border-left:3px solid var(--ink);font-size:16px}
#body .callout{display:flex;gap:10px;background:var(--yellow);border-radius:6px;padding:14px 16px;margin:6px 0}
#body .callout .cico{font-size:18px;line-height:1.5}
#body .todo{display:flex;align-items:flex-start;gap:8px;margin:2px 0}
#body .todo input{margin-top:5px;width:15px;height:15px;cursor:pointer;flex:0 0 auto}
#body .todo.done .tx{color:var(--faint);text-decoration:line-through}
#body pre.codeblock{background:#f7f6f3;border:1px solid var(--line);border-radius:6px;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;overflow-x:auto;margin:6px 0;white-space:pre-wrap}
#body .toggle{margin:2px 0}
#body .toggle>summary{cursor:pointer;list-style:none;font-weight:500}
#body .toggle>summary::-webkit-details-marker{display:none}
#body .toggle>summary:before{content:"▸";display:inline-block;width:1em;color:var(--faint2);transition:transform .12s}
#body .toggle[open]>summary:before{transform:rotate(90deg)}
#body .toggle .tg-body{padding-left:1.4em}
/* couleurs de texte / surlignage (comme Notion) */
.c-gray{color:#9b9a97}.c-brown{color:#64473a}.c-orange{color:#d9730d}.c-yellow{color:#dfab01}.c-green{color:#0f7b6c}.c-blue{color:#0b6e99}.c-purple{color:#6940a5}.c-pink{color:#ad1a72}.c-red{color:#e03e3e}
.h-yellow{background:#fdf0d1}.h-green{background:#dbeddb}.h-blue{background:#ddebf1}.h-purple{background:#eae4f2}.h-pink{background:#f4dfeb}.h-red{background:#fbe4e4}.h-gray{background:#ebeced}

/* ============ POIGNÉES DE BLOC (+ et ⋮⋮) ============ */
#gutter{position:absolute;display:none;gap:1px;z-index:20}
#gutter.on{display:flex}
#gutter button{border:none;background:none;color:var(--handle);width:22px;height:24px;border-radius:5px;cursor:pointer;font-size:15px;display:grid;place-items:center}
#gutter button:hover{background:var(--hover);color:var(--faint2)}
#gutter .drag{cursor:grab}
.drop-line{height:0;border-top:2px solid var(--accent);margin:0}

/* ============ MENU SLASH "/" ============ */
#slash{position:absolute;display:none;z-index:60;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.14);width:300px;max-height:330px;overflow:auto;padding:6px}
#slash.on{display:block}
#slash .grp{font-size:11px;color:var(--faint);padding:6px 8px 2px;text-transform:uppercase;letter-spacing:.03em}
#slash .it{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;cursor:pointer}
#slash .it.sel,#slash .it:hover{background:var(--accent-weak)}
#slash .it .ic{width:34px;height:34px;border:1px solid var(--line);border-radius:5px;display:grid;place-items:center;font-size:16px;background:#fff;flex:0 0 auto}
#slash .it .nm{font-size:14px}
#slash .it .ds{font-size:12px;color:var(--faint2)}

/* ============ BARRE FLOTTANTE DE SÉLECTION ============ */
#fmt{position:absolute;display:none;z-index:70;background:#2b2a28;color:#fff;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.3);padding:4px;align-items:center;gap:1px}
#fmt.on{display:flex}
#fmt button{border:none;background:none;color:#fff;height:28px;min-width:28px;padding:0 7px;border-radius:5px;cursor:pointer;font-size:14px;display:grid;place-items:center}
#fmt button:hover{background:rgba(255,255,255,.16)}
#fmt .sep{width:1px;height:18px;background:rgba(255,255,255,.22);margin:0 3px}
#fmt select{background:#3a3937;color:#fff;border:none;border-radius:5px;height:26px;padding:0 4px;cursor:pointer;font-size:13px}
#fmt .swatch{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.3);display:inline-block}
.popmenu{position:absolute;display:none;z-index:80;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 26px rgba(0,0,0,.16);padding:6px;width:200px}
.popmenu.on{display:block}
.popmenu .h{font-size:11px;color:var(--faint);padding:4px 8px;text-transform:uppercase}
.popmenu .row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:14px}
.popmenu .row:hover{background:var(--hover)}
.popmenu .chip{width:20px;height:20px;border-radius:4px;border:1px solid var(--line);flex:0 0 auto;display:grid;place-items:center;font-size:12px;font-weight:700}

/* ============ RECHERCHE (Quick Find) ============ */
#qf-ov{position:fixed;inset:0;z-index:100;background:rgba(15,15,15,.32);display:none;align-items:flex-start;justify-content:center}
#qf-ov.on{display:flex}
#qf{margin-top:12vh;width:min(640px,92vw);background:#fff;border-radius:12px;box-shadow:0 16px 60px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
#qf-in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:17px;color:var(--faint2)}
#qf-in input{flex:1;border:none;outline:none;font-size:17px;color:var(--ink);background:none}
#qf-res{overflow:auto;padding:6px}
#qf-res .r{display:flex;align-items:flex-start;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer}
#qf-res .r.sel,#qf-res .r:hover{background:var(--hover)}
#qf-res .r .ic{font-size:18px;flex:0 0 auto;margin-top:1px}
#qf-res .r .tt{font-size:14.5px;font-weight:500;color:var(--ink)}
#qf-res .r .pa{font-size:12px;color:var(--faint);margin-top:1px}
#qf-res .r .sn{font-size:12.5px;color:var(--faint2);margin-top:3px;line-height:1.35}
#qf-res .r .sn b{color:var(--ink);background:#fdf0d1}
#qf-res .empty{padding:22px;text-align:center;color:var(--faint);font-size:14px}
#qf-foot{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}

/* toast + hint */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:#2b2a28;color:#fff;padding:9px 15px;border-radius:9px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;z-index:90}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#savehint{position:fixed;bottom:12px;right:16px;font-size:11.5px;color:var(--faint);z-index:40}