:root{--ink:#111;--paper:#ecebe6;--paper2:#e2e1db;--paper3:#f3f2ed;--code:#dddcd5;--grey:#8a8984;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font:400 15px/1.6 var(--mono);-webkit-font-smoothing:none;overflow:hidden}
#app{display:flex;height:100vh}
button,input,textarea{font-family:var(--mono);color:var(--ink)}
/* nav */
#nav{width:190px;flex:none;border-right:2px solid var(--ink);display:flex;flex-direction:column;background:var(--paper)}
.brand{font-weight:700;padding:16px 14px;border-bottom:2px solid var(--ink);letter-spacing:.03em}
.brand i{font-style:normal;background:var(--ink);color:var(--paper);padding:0 5px;margin-left:5px}
#nav button{background:none;border:0;border-bottom:2px solid var(--ink);padding:13px 14px;text-align:left;font:700 13px var(--mono);cursor:pointer}
#nav button:hover:not(.on){background:var(--paper2)}
#nav button.on{background:var(--ink);color:var(--paper)}
#due-badge:not(:empty){border:2px solid currentColor;padding:0 5px;margin-left:4px;font-size:11px}
.spacer{flex:1}
#nav #mini-timer{display:block;width:calc(100% - 20px);margin:10px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);text-align:left;padding:8px 10px;box-shadow:3px 3px 0 var(--grey)}
#nav #mini-timer[hidden]{display:none}
#nav #mini-timer:hover:not(.on){background:#333}
#mini-timer .lab{display:block;margin:0 0 2px;font-size:11px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mt-time{display:block;font-size:30px;font-weight:700;line-height:1.1}
#mini-timer.paused #mt-time{opacity:.55}
.mt-bar{display:block;height:6px;border:1.5px solid var(--paper);margin-top:6px}
.mt-bar i{display:block;height:100%;background:var(--paper);width:0}
.vault{font-size:11px;color:#555;padding:10px 14px;word-break:break-all}
main{flex:1;overflow:auto;padding:28px 32px 60px;position:relative}
.view{display:none}.view.on{display:block}
h1{font-size:24px;margin-bottom:18px}
h1 small{font-size:13px;color:#555;font-weight:400;margin-left:8px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:980px){.cols{grid-template-columns:1fr}}
.box{border:2px solid var(--ink);padding:18px;background:var(--paper3);box-shadow:5px 5px 0 var(--ink)}
.lab{font-size:12px;font-weight:700;letter-spacing:.06em;margin-bottom:10px}
.note{font-size:12px;color:#555;margin-top:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.btn{background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:8px 16px;font:700 13px var(--mono);cursor:pointer;box-shadow:3px 3px 0 var(--grey)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--grey)}
.btn.o{background:transparent;color:var(--ink);box-shadow:none}
.btn.o:hover,.btn.o.on{background:var(--ink);color:var(--paper)}
.btn.s{padding:3px 10px}
input[type=text],textarea{width:100%;border:2px solid var(--ink);background:var(--paper);padding:9px 10px;font-size:15px;outline:0}
input:focus,textarea:focus{outline:3px solid var(--grey)}
form.inline{display:flex;gap:10px;margin-top:14px}
form.inline input{flex:1}
#card-form{display:flex;flex-direction:column;gap:10px}
#card-form textarea,#d-text{height:110px;resize:vertical}
/* accueil */
.hero{padding:26px 24px;margin-bottom:22px;background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--grey)}
.hero h2{font-size:26px;line-height:1.25;margin:2px 0 16px}
.hero .lab{opacity:.75}
.hero input{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:3px 3px 0 var(--grey)}
.hero .btn.o{background:transparent;color:var(--paper)}
.hero .btn.o:hover{background:var(--paper);color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
@media (max-width:980px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;gap:4px;text-align:left;border:2px solid var(--ink);background:var(--paper3);padding:14px 16px;cursor:pointer;font:400 14px var(--mono);color:var(--ink);min-width:0}
button.tile:hover{background:var(--paper2)}
.tile b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile span:last-child{color:#555;font-size:13px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tile.cap{cursor:default}
.tile.cap input{margin-top:6px}
.sugg{margin-top:12px}
/* tâches */
.task{display:flex;gap:12px;align-items:center;padding:9px 0;border-top:2px dashed var(--grey)}
.task:first-child{border-top:0}
.cb{width:22px;height:22px;border:2.5px solid var(--ink);background:none;cursor:pointer;flex:none}
.task.done .cb{background:var(--ink)}
.task.done .tt{text-decoration:line-through;color:var(--grey)}
.tt{flex:1;word-break:break-word}
.task .mini{border:2px solid var(--ink);background:none;font:700 12px var(--mono);padding:1px 8px;cursor:pointer}
.task .mini:hover{background:var(--ink);color:var(--paper)}
.empty{color:#555;font-size:14px;padding:6px 0}
/* énergie */
.lvls{display:flex;gap:8px;margin-bottom:14px}
.lvls button{flex:1;height:54px;border:3px solid var(--ink);background:none;font:700 19px var(--mono);cursor:pointer}
.lvls button:hover:not(.on){background:var(--paper2)}
.lvls button.on{background:var(--ink);color:var(--paper)}
.adv{border:2px solid var(--ink);background:var(--paper2);padding:11px 13px}
.hist{display:flex;align-items:flex-end;gap:6px;height:80px;border-bottom:3px solid var(--ink)}
.hist i{flex:1;background:var(--ink)}
.hist i.none{background:none;border:2px dashed var(--grey);border-bottom:0;height:8px}
/* focus */
.focus{text-align:center;max-width:620px;padding:34px 20px}
.focus h2{font-size:22px;margin:4px 0 12px}
.time{font-size:80px;font-weight:700;line-height:1;margin:6px 0 20px;letter-spacing:-.03em}
.prog{height:14px;border:2px solid var(--ink);max-width:420px;margin:0 auto 20px}
.prog i{display:block;height:100%;background:var(--ink);width:0}
.focus .row{justify-content:center}
/* révision */
.card{border:3px solid var(--ink);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;cursor:pointer;background:var(--paper);margin-bottom:14px}
.card .q{font-size:18px;font-weight:700;white-space:pre-wrap}
.card .a{display:none;margin-top:12px;white-space:pre-wrap;max-width:36em}
.card.flip .a{display:block}
.card.none{cursor:default}
/* vidage */
#d-list{margin-top:16px}
.item{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:2px dashed var(--grey)}
.item span.l{flex:1;min-width:160px;word-break:break-word}
.item button{font:700 11px var(--mono);border:2px solid var(--ink);background:none;padding:2px 8px;cursor:pointer}
.item button:hover{background:var(--ink);color:var(--paper)}
.tag{font-size:12px;font-weight:700;background:var(--ink);color:var(--paper);padding:0 8px}
/* écriture */
.write{display:flex;gap:26px;height:calc(100vh - 88px)}
#notelist{width:220px;flex:none;display:flex;flex-direction:column;gap:12px;overflow:auto}
#notes,.blist{list-style:none}
#notelist .lab{margin:6px 0 0}
.drop-hint{font-size:12px;color:#555}
.bpath{font-size:11px;color:#555;word-break:break-all;margin-bottom:4px}
.blist li{padding:6px 10px;border:2px solid transparent;cursor:pointer;word-break:break-word;font-size:13.5px}
.blist li:hover{background:var(--paper2)}
.blist li.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.blist li.dir{font-weight:700}
.blist li.empty{cursor:default;color:#555}
#browser{border:2px solid var(--ink);padding:8px;background:var(--paper3)}
#browser:empty{display:none}
#notes li{padding:8px 10px;border:2px solid transparent;cursor:pointer;word-break:break-word;font-size:14px}
#notes li:hover{background:var(--paper2)}
#notes li.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.page{flex:1;display:flex;flex-direction:column;min-width:0;align-items:center}
.crumb,.wfoot{width:100%;max-width:64ch;display:flex;justify-content:space-between;font-size:12.5px;color:#555;gap:12px}
.crumb{padding-bottom:10px}
.wfoot{padding-top:10px;border-top:2px solid var(--ink);margin-top:auto}
#note-state::before{content:"■ "}
#editor{flex:1;width:100%;max-width:64ch;border:0;background:transparent;font-size:17px;line-height:1.75;padding:0;resize:none;outline:0}
#editor:focus{outline:0}
#editor::selection{background:var(--ink);color:var(--paper)}
#reader{display:none;flex:1;width:100%;max-width:64ch;overflow:auto;font-size:17px;line-height:1.75}
.reading #editor{display:none}.reading #reader{display:block}
#reader h1{font-size:26px;margin-bottom:.6em;border-bottom:3px solid var(--ink);padding-bottom:.2em}
#reader h2{font-size:19px;margin:1.3em 0 .4em;background:var(--ink);color:var(--paper);display:inline-block;padding:0 8px}
#reader p{margin:.5em 0}
#reader ul{list-style:none}#reader li{padding-left:1.6em;position:relative}
#reader li::before{content:"□";position:absolute;left:0}
#reader li.done{text-decoration:line-through;color:var(--grey)}#reader li.done::before{content:"■";color:var(--ink)}
#reader code{background:var(--code);padding:0 5px;border:1px solid var(--ink)}
#reader pre{border:2px solid var(--ink);padding:10px 12px;margin:.8em 0;overflow:auto;font-size:15px;line-height:1.5;box-shadow:4px 4px 0 var(--ink)}
#reader pre code{background:none;border:0;padding:0}
#reader blockquote{border-left:4px solid var(--ink);padding-left:14px;margin:.8em 0}
.mini-b{border:2px solid var(--ink);background:none;font:700 12px var(--mono);padding:0 8px;cursor:pointer;margin-right:8px}
.mini-b:hover{background:var(--ink);color:var(--paper)}
.selcard{width:100%;max-width:64ch;border:2px solid var(--ink);background:var(--paper3);padding:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px;box-shadow:4px 4px 0 var(--ink)}
.selcard[hidden]{display:none}
.selcard textarea{height:80px;resize:vertical}
/* bilan */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{border:2px solid var(--ink);padding:10px 12px;background:var(--paper)}
.stat b{display:block;font-size:26px;line-height:1.1}
.stat span{font-size:12px;color:#555}
.done-list{list-style:none}
.done-list li{padding:4px 0 4px 1.6em;position:relative}
.done-list li::before{content:"■";position:absolute;left:0}
#b-form{display:flex;flex-direction:column;gap:8px}
#b-form .lab{margin:8px 0 0}
#b-form .btn{margin-top:14px;align-self:flex-start}
/* toast */
#toast{position:fixed;right:20px;bottom:20px;background:var(--ink);color:var(--paper);padding:8px 14px;box-shadow:3px 3px 0 var(--grey);font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
#toast.on{opacity:1}

/* dispositions */
:root[data-theme="encre"]{--ink:#ecebe6;--paper:#111;--paper2:#1f1f1e;--paper3:#181817;--code:#262625;--grey:#77766f}
:root[data-theme="encre"] .hero{background:var(--ink);color:var(--paper)}
:root[data-size="grand"] body{font-size:17px}
:root[data-size="grand"] #editor,:root[data-size="grand"] #reader{font-size:20px}
:root[data-width="large"] .crumb,:root[data-width="large"] .wfoot,:root[data-width="large"] #editor,:root[data-width="large"] #reader,:root[data-width="large"] .selcard{max-width:100ch}
.dispo{padding:8px 10px;border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:6px}
.dispo .grp{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.dispo .grp span{font-size:11px;font-weight:700;width:100%;letter-spacing:.06em}
#nav .dispo button{border:2px solid var(--ink);padding:2px 7px;font:700 11px var(--mono);flex:none}
#nav .dispo button.on{background:var(--ink);color:var(--paper)}
select{width:100%;border:2px solid var(--ink);background:var(--paper);padding:7px 8px;font:400 13.5px var(--mono);color:var(--ink)}
/* assistant de planification */
#wiz{position:fixed;inset:0;background:rgba(17,17,17,.55);display:none;align-items:center;justify-content:center;z-index:20;padding:20px}
#wiz.on{display:flex}
.wizbox{background:var(--paper3);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);width:100%;max-width:560px;max-height:92vh;overflow:auto}
.wizbox .bar{background:var(--ink);color:var(--paper);padding:6px 14px;font-weight:700;font-size:13px;display:flex;justify-content:space-between}
.wizbox .in{padding:22px}
.wizbox h2{font-size:22px;margin-bottom:6px}
.wizbox p.sub{color:#555;font-size:14px;margin-bottom:16px}
.trow{display:flex;gap:8px;margin-bottom:10px}
.trow input{flex:1}
.trow .dif{border:2px solid var(--ink);background:none;font:700 12px var(--mono);padding:0 10px;cursor:pointer;min-width:74px}
.trow .dif.hard{background:var(--ink);color:var(--paper)}
.order{list-style:none;counter-reset:o}
.order li{counter-increment:o;padding:8px 0 8px 2em;border-top:2px dashed var(--grey);position:relative}
.order li::before{content:counter(o);position:absolute;left:0;font-weight:700}
.order small{display:block;color:#555}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border:2px solid var(--paper)}.dots i.on{background:var(--paper)}

/* ── adoucissement : moins de noir plein, moins de traits épais ── */
#nav{width:172px;border-right:1px solid var(--grey)}
.brand{border-bottom:1px solid var(--grey)}
#nav button{border-bottom:1px solid var(--paper2);font-weight:400;font-size:13px;padding:11px 14px 11px 18px;background:none;color:var(--ink)}
#nav button:hover:not(.on){background:var(--paper2)}
#nav button.on{background:var(--paper2);color:var(--ink);font-weight:700;box-shadow:inset 4px 0 0 var(--ink)}
.dispo{border-top:1px solid var(--grey)}
#nav .dispo button{border:1px solid var(--grey);background:none;padding:1px 6px}
#nav .dispo button.on{background:var(--ink);color:var(--paper);box-shadow:none}
.box,.tile,.selcard,.wizbox,#browser,.card,.adv,.stat{box-shadow:none;border:1px solid var(--grey)}
.hero{background:var(--paper3);color:var(--ink);box-shadow:none;border:1px solid var(--grey)}
.hero .lab{opacity:1;color:#555}
.hero h2{font-weight:700}
.hero input{background:var(--paper);color:var(--ink);border-color:var(--grey)}
.hero .btn{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:none}
.hero .btn.o{background:transparent;color:var(--ink);border-color:var(--grey)}
.hero .btn.o:hover{background:var(--paper2)}
:root[data-theme="encre"] .hero{background:var(--paper3);color:var(--ink)}
.btn{box-shadow:none;padding:7px 14px}
.btn.o{border-color:var(--grey)}
input[type=text],textarea,select{border:1px solid var(--grey)}
.lvls button{border:1px solid var(--grey);height:46px}
.lvls button.on{border-color:var(--ink)}
.cb{border:2px solid var(--ink)}
.task{border-top:1px dashed var(--grey)}
.wizbox{box-shadow:0 0 0 1px var(--ink)}
.wizbox .bar,.bar{background:transparent;color:var(--ink);border-bottom:1px solid var(--grey)}
#nav #mini-timer{background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none}
#nav #mini-timer:hover:not(.on){background:var(--paper2)}
.mt-bar{border-color:var(--ink)}.mt-bar i{background:var(--ink)}
.wfoot{border-top:1px solid var(--grey)}
#toast{box-shadow:none}

/* accueil : icônes e-paper */
.hhead{margin-bottom:22px}
.hhead h1{margin-bottom:4px}
.hhead p{color:#555;font-size:14px}
.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.hgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.hgrid{grid-template-columns:repeat(2,1fr)}}
.htile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:1px solid var(--grey);background:var(--paper3);padding:18px 16px 16px;cursor:pointer;outline:0;min-height:152px}
.htile svg{width:54px;height:54px;margin-bottom:10px}
.htile b{font-size:14px;letter-spacing:.04em}
.htile span{font-size:12.5px;color:#555}
.htile:hover{background:var(--paper2)}
.htile.sel{border:2px solid var(--ink);padding:17px 15px 15px;background:var(--paper2)}
.hb{position:absolute;top:12px;right:12px;font-style:normal;font-weight:700;font-size:12px;border:1px solid var(--ink);padding:0 6px;display:none}
.hb.on{display:block}

/* croix directionnelle */
#dpad{position:fixed;bottom:0;left:172px;right:0;height:58px;display:flex;justify-content:center;align-items:center;gap:8px;border-top:1px solid var(--grey);background:var(--paper);z-index:5}
#dpad button{height:38px;min-width:46px;border:1px solid var(--ink);background:var(--paper);font:700 15px var(--mono);cursor:pointer;color:var(--ink)}
#dpad button:hover{background:var(--ink);color:var(--paper)}
#dpad button:active{transform:translateY(1px)}
#dpad #dp-ok{min-width:84px}
main{padding-bottom:84px}
.write{height:calc(100vh - 150px)}
#toast{bottom:74px}

/* commandes façon nano */
.nano{width:100%;max-width:64ch;display:grid;grid-template-columns:repeat(6,1fr);gap:2px 8px;font-size:11.5px;margin-top:8px;color:#444}
.nano span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nano kbd,.nano-help{font-family:var(--mono)}
.nano kbd{background:var(--ink);color:var(--paper);padding:0 4px;margin-right:4px;font-size:11px}
.findbar{width:100%;max-width:64ch;display:flex;gap:10px;align-items:center;border:1px solid var(--ink);padding:6px 10px;margin-bottom:8px;background:var(--paper3);font-size:13px}
.findbar[hidden],.nano-help[hidden]{display:none}
.findbar input{flex:1;border:0;background:transparent;padding:2px 4px;font-size:14px;outline:0}
.findbar input:focus{outline:0}
#find-info{color:#555;font-size:12px}
.nano-help{width:100%;max-width:64ch;border:1px solid var(--grey);background:var(--paper3);padding:10px 12px;font-size:12px;line-height:1.5;margin-bottom:8px;white-space:pre-wrap}
:root[data-width="large"] .nano,:root[data-width="large"] .findbar,:root[data-width="large"] .nano-help{max-width:100ch}
@media (max-width:760px){.nano{grid-template-columns:repeat(3,1fr)}}

/* menu repliable */
html{--navw:172px}
html.navc{--navw:46px}
#nav{width:var(--navw);transition:width .12s steps(3)}
#dpad{left:var(--navw)}
.brand{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px}
#nav-toggle{border:1px solid var(--grey)!important;background:none;width:28px;height:28px;padding:0!important;text-align:center!important;font:700 14px var(--mono);cursor:pointer;flex:none}
#nav-toggle:hover{background:var(--ink)!important;color:var(--paper)!important}
#nav>button{display:flex;align-items:center;gap:10px}
.ni{width:20px;height:20px;flex:none}
#nav .nl{flex:1;white-space:nowrap}
html.navc .brand{padding:10px 8px}
html.navc .bt,html.navc .nl,html.navc .dispo,html.navc .vault{display:none}
html.navc #nav>button{justify-content:center;padding:11px 0}
html.navc #nav>button.on{box-shadow:inset 3px 0 0 var(--ink)}
html.navc #nav #mini-timer{width:calc(100% - 8px);margin:6px 4px;padding:4px 0;text-align:center;justify-content:center}
html.navc #mini-timer .lab,html.navc .mt-bar{display:none}
html.navc #mt-time{font-size:11px}
html.navc #due-badge{display:none}
html.listc #notelist{display:none}
/* barre d'outils des notes : icônes */
.tools{display:flex;gap:6px;align-items:stretch}
.tools .btn{flex:1;padding:6px 10px}
.ib{width:36px;border:1px solid var(--grey);background:var(--paper3);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.ib:hover{background:var(--ink);color:var(--paper)}
.ib svg{width:20px;height:20px}
.crumb .cl{display:flex;align-items:center;gap:6px;min-width:0}
.crumb #note-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* réglages : engrenage + panneau */
#nav #gear{margin-top:auto;border-top:1px solid var(--grey)}
#settings{position:fixed;left:calc(var(--navw) + 8px);bottom:12px;width:320px;max-width:calc(100vw - var(--navw) - 20px);max-height:calc(100vh - 24px);overflow:auto;background:var(--paper3);border:1px solid var(--ink);z-index:15}
#settings[hidden]{display:none}
#settings .sbar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;border-bottom:1px solid var(--grey);font-size:13px}
#settings .sbar button{border:1px solid var(--grey);background:none;width:24px;height:24px;font:700 15px var(--mono);cursor:pointer;line-height:1;color:var(--ink)}
#settings .sbar button:hover{background:var(--ink);color:var(--paper)}
#settings .ssec{padding:10px 12px;border-bottom:1px solid var(--paper2)}
#settings .ssec:last-child{border-bottom:0}
#settings .slab{font-size:11px;font-weight:700;letter-spacing:.08em;color:#555;margin-bottom:8px}
#settings .grp{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
#settings .grp span{font-size:11px;font-weight:700;width:100%;letter-spacing:.04em}
#settings .grp button{border:1px solid var(--grey);background:none;padding:2px 9px;font:700 12px var(--mono);cursor:pointer;color:var(--ink)}
#settings .grp button:hover{background:var(--paper2)}
#settings .grp button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#settings .vault{padding:0;font-size:11.5px;color:#555;word-break:break-all}

/* bibliothèque de fiches */
.lib{margin-top:22px}
.libbar{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.libbar .lab span{font-weight:400;color:#555}
.libbar input{flex:1;min-width:120px;width:auto;padding:6px 8px;font-size:13.5px}
.libbar .ib{width:34px;height:32px}
.liblist{list-style:none;max-height:300px;overflow:auto;border-top:1px solid var(--grey)}
.liblist li{display:flex;gap:10px;align-items:center;padding:7px 4px;border-bottom:1px dashed var(--grey);font-size:14px}
.liblist .q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.liblist .st{font-size:12px;color:#555;flex:none;min-width:70px;text-align:right}
.liblist .st.now{color:var(--ink);font-weight:700}
.liblist .mk{width:12px;height:12px;border:2px solid var(--ink);flex:none}
.liblist .mk.now{background:var(--ink)}
.liblist .go{border:1px solid var(--grey);background:none;font:700 12px var(--mono);padding:0 8px;cursor:pointer;color:var(--ink)}
.liblist .go:hover{background:var(--ink);color:var(--paper)}
.liblist li.bad .q{text-decoration:underline dotted}
#scan{border:1px solid var(--ink);padding:10px;margin-bottom:12px;background:var(--paper)}
#scan[hidden]{display:none}
#scan .sh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;font-size:13px}
#scan .sh .sp{flex:1}
#scan ul{list-style:none;max-height:220px;overflow:auto;border-top:1px solid var(--grey)}
#scan li{display:flex;gap:8px;align-items:center;padding:4px 2px;font-size:13px;border-bottom:1px dashed var(--grey)}
#scan li input{width:auto;accent-color:var(--ink)}
#scan li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* colonne des notes compacte */
#notelist{width:172px;gap:8px}
.write{gap:18px}
#notelist .lab{margin:4px 0 0;font-size:10.5px;color:#555}
#notelist .tools{gap:4px}
#notelist .tools .btn{padding:5px 6px;font-size:12px}
#notelist .ib{width:30px}
#notelist .ib svg{width:17px;height:17px}
.tplsel{width:26px!important;padding:0!important;flex:none;appearance:none;-webkit-appearance:none;cursor:pointer;color:transparent!important;
  background:var(--paper3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center/10px 6px;
  border:1px solid var(--grey)!important}
.tplsel option{color:var(--ink);background:var(--paper)}
#notes li,.blist li{padding:3px 6px;font-size:12.5px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;border-left:3px solid transparent}
#notes li:hover,.blist li:hover{background:var(--paper2)}
#notes li.on,.blist li.on{background:var(--paper2);color:var(--ink);border-left-color:var(--ink);font-weight:700}
#browser{padding:6px}
.bpath{font-size:10.5px}

/* éditeur plein bloc : liste des notes en tiroir, page sans marge ni plafond de largeur */
body[data-view="write"] main{padding:10px 16px 66px}
body[data-view="write"] .write{height:calc(100vh - 86px);gap:0;position:relative}
#notelist{position:absolute;left:0;top:0;bottom:0;width:236px;z-index:6;background:var(--paper);border:1px solid var(--ink);padding:10px;box-shadow:6px 0 0 rgba(17,17,17,.12)}
.page{width:100%}
:root[data-width="large"] .crumb,:root[data-width="large"] .wfoot,:root[data-width="large"] #editor,:root[data-width="large"] #reader,
:root[data-width="large"] .selcard,:root[data-width="large"] .nano,:root[data-width="large"] .findbar,:root[data-width="large"] .nano-help{max-width:none}
:root[data-width="large"] #editor{padding:0 4px}
.crumb{padding-bottom:6px}

/* ── console à cartouches : étagère, parking, tunnel, sprint, atterrissage ── */
:root{--ghost:#b3b1a9}
:root[data-theme="encre"]{--ghost:#5d5c57}
html.eink{filter:invert(1)}
.toolslab{margin:26px 0 10px}
.shelf{margin-bottom:6px}
.slot{display:flex;align-items:center;justify-content:center;width:100%;min-height:120px;border:3px dashed var(--ink);background:none;font:700 20px var(--mono);letter-spacing:.06em;cursor:pointer;color:var(--ink)}
.slot:hover{background:var(--paper2)}
.slot.in{border-style:solid;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;padding:18px 20px;cursor:default;background:var(--paper3);box-shadow:5px 5px 0 var(--ink)}
.slot.in:hover{background:var(--paper3)}
.clabel b{display:inline-block;background:var(--ink);color:var(--paper);font-size:22px;padding:2px 14px;margin-right:12px}
.clabel span{font-size:14px;color:#555}
.slot.in .row{display:flex;gap:10px;flex-wrap:wrap}
.slot.in .eject{margin-left:auto}
.carts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:14px}
.cart{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:2px solid var(--ink);background:var(--paper3);padding:12px 14px 10px;cursor:pointer;font:400 13px var(--mono);color:var(--ink);clip-path:polygon(0 0,88% 0,100% 18%,100% 100%,0 100%);min-width:0}
.cart b{font-size:16px;word-break:break-word}
.cart span{color:#555}
.cart i{font-style:normal;font-size:11px;color:var(--grey)}
.cart:hover,.cart:focus{background:var(--paper2);outline:0}
.cart:focus{border-width:3px}
.cart.gone{opacity:.55}
.cart.add{border-style:dashed;justify-content:center;font-weight:700;clip-path:none;color:#555}
.newcart{margin-top:12px}
.parkbar{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);width:min(720px,calc(100vw - 40px));display:flex;align-items:center;gap:12px;border:3px solid var(--ink);background:var(--paper3);padding:10px 14px;box-shadow:6px 6px 0 var(--ink);z-index:30}
.parkbar[hidden]{display:none}
.parkbar input{flex:1}
.holdbar{position:fixed;left:50%;top:40%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font:700 16px var(--mono);padding:14px 22px;letter-spacing:.06em;z-index:40;white-space:nowrap}
.holdbar[hidden]{display:none}
.tbar{display:none}
:root.tunnel .tbar{display:block;position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper);font:400 13px var(--mono);padding:8px 18px;z-index:12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovl{position:fixed;inset:0;background:rgba(17,17,17,.55);display:none;align-items:center;justify-content:center;z-index:25;padding:20px}
.ovl.on{display:flex}
.ovbox{max-width:640px}
.ovbox h2{font-size:21px;margin-bottom:14px}
.sp-mode{display:flex;gap:10px;align-items:center;margin:18px 0 8px}
.sp-mode span{font-weight:700;font-size:12px;letter-spacing:.06em}
.sp-mode button{border:2px solid var(--ink);background:none;font:700 13px var(--mono);padding:6px 12px;cursor:pointer;color:var(--ink)}
.sp-mode button.on{background:var(--ink);color:var(--paper)}
.plist{display:flex;flex-direction:column;margin:8px 0 6px}
.prow{display:flex;align-items:center;gap:8px;border-bottom:2px solid var(--ink);padding:9px 0}
.prow .pt{font-size:12px;color:#555;flex:none}
.prow .px{flex:1;min-width:0;word-break:break-word}
.prow button{font:700 11px var(--mono);border:2px solid var(--ink);background:none;padding:3px 8px;cursor:pointer;flex:none;color:var(--ink)}
.prow button:hover{background:var(--ink);color:var(--paper)}
.plist .empty{color:#555;padding:8px 0}
.breath{font-size:17px;border-top:2px solid var(--ink);padding-top:14px;margin:18px 0 14px}
.edwrap{flex:1;width:100%;max-width:64ch;position:relative;display:flex;min-height:0}
:root[data-width="large"] .edwrap{max-width:100ch}
.reading .edwrap{display:none}
.edwrap #editor{max-width:none}
#tmirror{display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;font-family:var(--mono);color:var(--ink)}
:root.tunnel #nav,:root.tunnel #notelist,:root.tunnel .crumb,:root.tunnel .nano,:root.tunnel .wfoot,:root.tunnel #dpad,:root.tunnel #nano-help,:root.tunnel #findbar,:root.tunnel #sel-card{display:none!important}
:root.tunnel main{padding:56px 32px 60px}
:root.tunnel .write{height:calc(100vh - 116px)}
:root.tunnel .edwrap{max-width:70ch}
:root.tunnel #editor,:root.tunnel #tmirror{font-size:22px;line-height:1.75;padding:0;border:0;scrollbar-gutter:stable;letter-spacing:0}
:root.tunnel #editor{color:transparent;caret-color:var(--ink);position:relative;z-index:1;background:transparent}
:root.tunnel #tmirror{display:block}
#tmirror .ghost{color:var(--ghost)}
#tmirror .now{color:var(--ink)}
:root.tunnel #editor::selection{background:var(--ink);color:var(--paper)}
:root.locked #editor{cursor:default}