:root{
  --bg:#fff; --bg-side:#f7f7f5; --bg-hover:rgba(55,53,47,.06); --bg-soft:rgba(55,53,47,.03);
  --txt:rgb(55,53,47); --txt-2:rgba(55,53,47,.65); --txt-3:rgba(55,53,47,.4);
  --line:rgba(55,53,47,.09); --line-2:rgba(55,53,47,.16);
  --blue:#2383e2; --shadow:0 0 0 1px rgba(15,15,15,.05),0 3px 6px rgba(15,15,15,.1),0 9px 24px rgba(15,15,15,.2);
  --r:5px; --side-w:260px;
  --c-gray:rgba(120,119,116,.2);   --c-gray-t:rgb(120,119,116);
  --c-brown:rgba(159,107,83,.2);   --c-brown-t:rgb(159,107,83);
  --c-orange:rgba(217,115,13,.2);  --c-orange-t:rgb(217,115,13);
  --c-yellow:rgba(203,145,47,.2);  --c-yellow-t:rgb(203,145,47);
  --c-green:rgba(68,131,97,.2);    --c-green-t:rgb(68,131,97);
  --c-blue:rgba(51,126,169,.2);    --c-blue-t:rgb(51,126,169);
  --c-purple:rgba(144,101,176,.2); --c-purple-t:rgb(144,101,176);
  --c-pink:rgba(193,76,138,.2);    --c-pink-t:rgb(193,76,138);
  --c-red:rgba(212,76,71,.2);      --c-red-t:rgb(212,76,71);
}
html[data-theme="dark"]{
  --bg:#191919; --bg-side:#202020; --bg-hover:rgba(255,255,255,.055); --bg-soft:rgba(255,255,255,.03);
  --txt:rgba(255,255,255,.81); --txt-2:rgba(255,255,255,.46); --txt-3:rgba(255,255,255,.28);
  --line:rgba(255,255,255,.094); --line-2:rgba(255,255,255,.16);
  --shadow:0 0 0 1px rgba(255,255,255,.07),0 5px 10px rgba(0,0,0,.4),0 15px 40px rgba(0,0,0,.5);
  --c-gray:rgba(155,155,155,.25); --c-gray-t:rgba(255,255,255,.55);
  --c-brown:rgba(184,131,105,.25); --c-brown-t:rgb(186,133,111);
  --c-orange:rgba(233,126,40,.25); --c-orange-t:rgb(217,133,86);
  --c-yellow:rgba(202,152,73,.25); --c-yellow-t:rgb(202,152,73);
  --c-green:rgba(82,158,114,.25);  --c-green-t:rgb(82,158,114);
  --c-blue:rgba(78,152,197,.25);   --c-blue-t:rgb(94,159,199);
  --c-purple:rgba(157,116,190,.25);--c-purple-t:rgb(157,116,190);
  --c-pink:rgba(205,90,150,.25);   --c-pink-t:rgb(205,90,150);
  --c-red:rgba(223,88,83,.25);     --c-red-t:rgb(223,88,83);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
a{color:inherit}
::selection{background:rgba(35,131,226,.28)}

/* ------------------------------------------------------------- connexion */
#login{position:fixed;inset:0;display:none;place-items:center;background:var(--bg);z-index:100}
#login.on{display:grid}
.login-card{width:340px;text-align:center}
.login-card .emo{font-size:52px}
.login-card .pdp{width:76px;height:76px;border-radius:50%;object-fit:cover;display:block;margin:0 auto;box-shadow:0 0 0 1px var(--line-2)}
.login-card h1{font-size:22px;margin:14px 0 4px}
.login-card p{color:var(--txt-2);font-size:14px;margin:0 0 22px}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-soft);outline:none;text-align:center}
.login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(35,131,226,.2)}
.login-card button{width:100%;margin-top:10px;padding:11px;background:var(--blue);color:#fff;border-radius:var(--r);font-weight:500}
.login-err{color:var(--c-red-t);font-size:13px;height:18px;margin-top:10px}

/* -------------------------------------------------------------- ossature */
#app{display:none;height:100%}
#app.on{display:flex}
#side{
  width:var(--side-w);flex:0 0 var(--side-w);background:var(--bg-side);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:margin-left .2s ease;
}
#side.hidden{margin-left:calc(var(--side-w) * -1)}
.side-top{display:flex;align-items:center;gap:6px;padding:10px 10px 6px}
.ws{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:var(--r);flex:1;min-width:0}
.ws:hover{background:var(--bg-hover)}
.ws .av{width:22px;height:22px;border-radius:4px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;flex:0 0 22px}
.ws .nm{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{width:26px;height:26px;border-radius:var(--r);display:grid;place-items:center;color:var(--txt-2);flex:0 0 26px}
.icon-btn:hover{background:var(--bg-hover);color:var(--txt)}
.side-scroll{flex:1;overflow-y:auto;padding:6px 8px 40px}
.side-sec{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--txt-3);padding:16px 8px 4px}
.nav{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:var(--r);font-size:14px;color:var(--txt-2);cursor:pointer;user-select:none}
.nav:hover{background:var(--bg-hover)}
.nav.on{background:var(--bg-hover);color:var(--txt);font-weight:500}
.nav .ic{font-size:15px;width:18px;text-align:center;flex:0 0 18px}
.nav .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.nav .x{opacity:0;color:var(--txt-3);font-size:15px;padding:0 2px;border-radius:3px}
.nav:hover .x{opacity:1}
.nav .x:hover{background:var(--line-2);color:var(--txt)}
.side-btn{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:var(--r);font-size:14px;color:var(--txt-2);width:100%}
.side-btn:hover{background:var(--bg-hover)}

/* ------------------------------------------------------------------- main */
#main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#top{height:45px;display:flex;align-items:center;gap:8px;padding:0 12px;flex:0 0 45px}
.crumb{font-size:14px;color:var(--txt-2);padding:3px 6px;border-radius:var(--r);display:flex;align-items:center;gap:5px}
.crumb:hover{background:var(--bg-hover)}
.spacer{flex:1}
.presence{display:flex;gap:-6px;padding-right:6px}
.pav{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;border:2px solid var(--bg);margin-left:-6px}
.saved{font-size:12px;color:var(--txt-3);padding-right:6px;min-width:64px;text-align:right}
#scroll{flex:1;overflow-y:auto}
.doc{max-width:900px;margin:0 auto;padding:0 96px 40vh}
.doc.wide{max-width:1400px}
.page-icon{font-size:78px;line-height:1;margin:20px 0 4px;cursor:pointer;display:inline-block;border-radius:8px;padding:2px 6px}
.page-icon:hover{background:var(--bg-hover)}
h1.title{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 10px;outline:none}
[contenteditable]:empty:before{content:attr(data-ph);color:var(--txt-3);pointer-events:none}
h1.title:empty:before{content:"Sans titre";color:var(--txt-3)}

/* ------------------------------------------------------------------ blocs */
.blk{position:relative;display:flex;align-items:flex-start;margin:1px 0}
.blk .handles{position:absolute;left:-46px;top:2px;display:flex;gap:1px;opacity:0;transition:opacity .1s}
.blk:hover .handles{opacity:1}
.handles button{width:20px;height:24px;border-radius:3px;color:var(--txt-3);display:grid;place-items:center;font-size:15px}
.handles button:hover{background:var(--bg-hover);color:var(--txt-2)}
.ct{flex:1;min-width:0;outline:none;padding:3px 2px;line-height:1.5;word-break:break-word}
.blk.h1 .ct{font-size:30px;font-weight:600;line-height:1.3;padding-top:26px;letter-spacing:-.01em}
.blk.h2 .ct{font-size:24px;font-weight:600;line-height:1.3;padding-top:20px;letter-spacing:-.01em}
.blk.h3 .ct{font-size:19px;font-weight:600;line-height:1.3;padding-top:14px}
.blk.bullet,.blk.num,.blk.todo{padding-left:2px}
.blk .mark{flex:0 0 auto;width:24px;padding:3px 0;display:flex;justify-content:center;color:var(--txt);user-select:none}
.blk.num .mark{font-variant-numeric:tabular-nums;color:var(--txt)}
.blk.todo .mark input{width:16px;height:16px;margin-top:4px;accent-color:var(--blue);cursor:pointer}
.blk.todo.done .ct{color:var(--txt-3);text-decoration:line-through}
.blk.quote{margin:6px 0}
.blk.quote .ct{border-left:3px solid currentColor;padding-left:14px;font-size:15px}
.blk.code .ct{background:var(--bg-soft);border-radius:var(--r);padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;white-space:pre-wrap;line-height:1.45}
.blk.divider{padding:10px 0}
.blk.divider .ct{height:1px;background:var(--line-2);padding:0}
.blk.callout .ct{display:flex;gap:10px;padding:16px;border-radius:var(--r);background:var(--c-gray)}
.blk.callout .cal-ic{font-size:18px;line-height:1.4;flex:0 0 auto}
.blk.callout .cal-tx{flex:1;outline:none}
.blk.image .ct{padding:4px 0}
.blk.image img{max-width:100%;border-radius:var(--r);display:block}
.blk.file a{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;font-size:14px}
.blk.file a:hover{background:var(--bg-hover)}
.cal-purple{background:var(--c-purple)!important}.cal-blue{background:var(--c-blue)!important}
.cal-green{background:var(--c-green)!important}.cal-yellow{background:var(--c-yellow)!important}
.cal-red{background:var(--c-red)!important}.cal-orange{background:var(--c-orange)!important}
.cal-gray{background:var(--c-gray)!important}.cal-pink{background:var(--c-pink)!important}

/* ------------------------------------------------------------- menu slash */
.pop{position:absolute;z-index:200;background:var(--bg);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;min-width:230px;max-height:340px;overflow-y:auto}
.pop .lbl{font-size:11px;font-weight:600;color:var(--txt-3);padding:6px 8px 4px;letter-spacing:.04em}
.pop .it{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r);font-size:14px;cursor:pointer;width:100%;text-align:left}
.pop .it:hover,.pop .it.sel{background:var(--bg-hover)}
.pop .it .ic{width:26px;height:26px;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center;font-size:14px;flex:0 0 26px}
.pop .it .sub{font-size:12px;color:var(--txt-3)}
.pop .sep{height:1px;background:var(--line);margin:5px 2px}

/* --------------------------------------------------------------- vues BDD */
.view{margin:8px 0 26px}
.view-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;min-height:32px}
.view-name{font-size:14px;font-weight:600;padding:4px 6px;border-radius:var(--r)}
.view-tabs{display:flex;gap:2px}
.vtab{font-size:14px;color:var(--txt-2);padding:4px 8px;border-radius:var(--r)}
.vtab:hover{background:var(--bg-hover)}
.vtab.on{color:var(--txt);font-weight:500;box-shadow:inset 0 -2px 0 var(--txt)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-weight:400;color:var(--txt-2);font-size:13px;padding:6px 8px;border:1px solid var(--line);border-left:0;white-space:nowrap}
.tbl th:last-child{border-right:0}
.tbl th:first-child,.tbl td:first-child{width:42%}
.tbl td .tag{margin:1px 0}
.tbl td{padding:5px 8px;border:1px solid var(--line);border-left:0;vertical-align:top}
.tbl td:last-child{border-right:0}
.tbl tr:hover td{background:var(--bg-soft)}
.cell-title{display:flex;align-items:center;gap:6px;cursor:pointer}
.cell-title .open{opacity:0;font-size:11px;color:var(--txt-2);border:1px solid var(--line);border-radius:4px;padding:1px 6px;margin-left:auto;white-space:nowrap}
tr:hover .cell-title .open{opacity:1}
.tag{white-space:nowrap;display:inline-flex;align-items:center;border-radius:3px;padding:1px 7px;font-size:13px;line-height:1.4;background:var(--c-gray);color:var(--txt);max-width:100%}
.add-row{display:flex;align-items:center;gap:6px;padding:7px 8px;color:var(--txt-3);font-size:14px;width:100%;text-align:left}
.add-row:hover{color:var(--txt-2);background:var(--bg-soft)}
.empty{color:var(--txt-3);font-size:14px;padding:14px 8px}

.board{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.col{flex:0 0 264px;display:flex;flex-direction:column;gap:8px}
.col-head{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px 2px}
.col-head .n{color:var(--txt-3);font-size:12px}
.col-body{display:flex;flex-direction:column;gap:8px;min-height:60px;border-radius:var(--r);padding:2px}
.col-body.over{background:var(--bg-hover)}
.card{background:var(--bg);border-radius:var(--r);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(15,15,15,.08);padding:8px 10px;cursor:pointer}
.card:hover{background:var(--bg-hover)}
.card .ttl{font-size:14px;font-weight:500;margin-bottom:5px;line-height:1.35}
.card .meta{display:flex;flex-wrap:wrap;gap:4px}
.card .dt{font-size:12px;color:var(--txt-3);margin-top:4px}

.cal{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cal-top{display:flex;align-items:center;gap:8px;padding:6px 8px}
.cal-top .mo{font-size:14px;font-weight:600;flex:1;text-transform:capitalize}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-dow{font-size:11px;color:var(--txt-3);padding:4px 6px;text-align:right;border-top:1px solid var(--line);text-transform:uppercase}
.cal-day{min-height:104px;border-top:1px solid var(--line);border-left:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:3px}
.cal-day:nth-child(7n+1){border-left:0}
.cal-day.out{background:var(--bg-soft)}
.cal-day .d{font-size:12px;color:var(--txt-2);text-align:right;padding:1px 3px}
.cal-day.today .d{background:var(--c-red-t);color:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;margin-left:auto}
.cal-ev{font-size:12px;padding:2px 6px;border-radius:3px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--c-gray)}
.cal-ev:hover{filter:brightness(.95)}
.cal-day.over{background:var(--bg-hover)}

.lst{display:flex;flex-direction:column}
.lst-it{display:flex;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px}
.lst-it:hover{background:var(--bg-soft)}
.lst-it .dt{margin-left:auto;color:var(--txt-3);font-size:13px;white-space:nowrap}

/* ----------------------------------------------------------------- fiche */
#peek{position:fixed;inset:0;background:rgba(15,15,15,.4);z-index:70;display:none;justify-content:flex-end}
#peek.on{display:flex}
.peek-box{width:min(720px,86vw);background:var(--bg);height:100%;overflow-y:auto;box-shadow:var(--shadow);animation:slide .18s ease}
@keyframes slide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.peek-top{position:sticky;top:0;background:var(--bg);display:flex;align-items:center;gap:6px;padding:8px 12px;z-index:2}
.props{margin:8px 0 18px}
.prow{display:flex;align-items:flex-start;gap:8px;padding:2px 0;min-height:32px}
.pname{flex:0 0 190px;display:flex;align-items:center;gap:7px;font-size:14px;color:var(--txt-2);padding:6px;border-radius:var(--r)}
.pname:hover{background:var(--bg-hover)}
.pval{flex:1;padding:6px;border-radius:var(--r);font-size:14px;cursor:pointer;min-height:32px}
.pval:hover{background:var(--bg-hover)}
.pval.empty{color:var(--txt-3)}

/* ------------------------------------------------------------ discussion */
.cmts{border-top:1px solid var(--line);margin-top:40px;padding-top:18px}
.cmts h4{font-size:14px;margin:0 0 12px;color:var(--txt-2)}
.cmt{display:flex;gap:9px;margin-bottom:14px}
.cmt .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;flex:0 0 24px}
.cmt .bd{flex:1;font-size:14px}
.cmt .hd{font-size:13px;margin-bottom:1px}
.cmt .hd b{font-weight:500}.cmt .hd span{color:var(--txt-3);margin-left:6px;font-size:12px}
.cmt .del{opacity:0;color:var(--txt-3);font-size:12px}
.cmt:hover .del{opacity:1}
.cmt-new{display:flex;gap:9px;align-items:flex-start}
.cmt-new .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;flex:0 0 24px}
.cmt-new textarea{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;resize:vertical;min-height:38px;background:var(--bg-soft);outline:none;font-size:14px}
.cmt-new textarea:focus{border-color:var(--line-2)}

/* ---------------------------------------------------------------- divers */
#search{position:fixed;inset:0;background:rgba(15,15,15,.4);z-index:80;display:none;justify-content:center;padding-top:12vh}
#search.on{display:flex}
.sbox{width:min(620px,92vw);height:max-content;max-height:64vh;background:var(--bg);border-radius:8px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.sbox input{width:100%;border:0;border-bottom:1px solid var(--line);padding:15px 18px;outline:none;font-size:16px;background:none}
.sres{overflow-y:auto;padding:6px}
.sres .it{display:block;padding:8px 10px;border-radius:var(--r);cursor:pointer}
.sres .it:hover,.sres .it.sel{background:var(--bg-hover)}
.sres .it .t{font-size:14px;display:flex;gap:7px;align-items:center}
.sres .it .e{font-size:12px;color:var(--txt-3);margin-left:25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toast{z-index:300;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--txt);color:var(--bg);padding:8px 16px;border-radius:var(--r);font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
@media (max-width:820px){
  .doc{padding:0 20px 40vh}
  #side{position:fixed;z-index:50;height:100%;box-shadow:var(--shadow)}
  .blk .handles{display:none}
  .pname{flex:0 0 130px}
}