@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --paper:#F4F3EE; --ink:#141412; --sea:#2C5B57; --grey:#6B6A64; --line:#D8D6CF;
  --card:#FBFAF7; --sel:#2C5B57; --danger:#8C3B3B;
  --font:"Libre Caslon Text", Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased}
a{color:var(--sea)}
button,input,select,textarea{font:inherit;color:inherit}
.wm{font-size:12px;letter-spacing:.42em;color:var(--sea);text-decoration:none;white-space:nowrap}
.muted{color:var(--grey)}
.it{font-style:italic}
.hidden{display:none !important}

/* boutons */
.btn{background:transparent;border:1px solid var(--line);border-radius:2px;padding:6px 12px;cursor:pointer;line-height:1.2;white-space:nowrap}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary:hover{background:#2a2a27}
.btn.ghost{border-color:transparent}
.btn.ghost:hover{border-color:var(--line)}
.btn:disabled{opacity:.4;cursor:default}
.icon-btn{width:32px;height:32px;padding:0;display:inline-grid;place-items:center}

input[type=text],input[type=password],input[type=url],input[type=search]{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 0;outline:none;border-radius:0;font-size:16px}
input:focus{border-bottom-color:var(--sea)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login form{width:min(340px,100%);display:grid;gap:18px}
.login h1{font-weight:400;font-size:26px;margin:28px 0 4px}
.login .err{color:var(--danger);font-style:italic;min-height:1.3em;margin:0}
.login label{font-style:italic;color:var(--sea);font-size:13px}

/* portail */
.top{display:flex;align-items:center;gap:16px;padding:18px clamp(16px,4vw,40px);border-bottom:1px solid var(--line)}
.top .grow{flex:1}
.portal{max-width:880px;margin:0 auto;padding:40px 16px 80px}
.portal h1{font-weight:400;font-size:30px;margin:0 0 6px}
.portal h2{font-weight:400;font-size:17px;margin:40px 0 12px;padding-top:10px;border-top:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{display:block;background:var(--card);border:1px solid var(--line);padding:18px;text-decoration:none;color:var(--ink);min-height:110px}
.card:hover{border-color:var(--sea)}
.card .t{font-size:18px;margin-bottom:10px}
.card .m{font-size:12.5px;font-style:italic;color:var(--grey)}
.newmap{display:flex;gap:10px;align-items:flex-end;margin-top:16px;max-width:480px}

/* éditeur */
.editor{display:grid;grid-template-rows:auto 1fr;height:100vh;overflow:hidden}
.bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper);flex-wrap:wrap;position:relative;z-index:5}
.bar .title{font-size:17px;border:0;border-bottom:1px solid transparent;background:transparent;padding:4px 2px;min-width:120px;max-width:340px;width:auto}
.bar .title:hover{border-bottom-color:var(--line)}
.bar .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.bar .grow{flex:1}
.status{font-size:12.5px;font-style:italic;color:var(--grey);white-space:nowrap}
.status.err{color:var(--danger)}
.search{width:180px}
.search input{font-size:14px;padding:5px 0}

.stage{position:relative;overflow:hidden;cursor:grab;touch-action:none;background:var(--paper)}
.stage.panning{cursor:grabbing}
.world{position:absolute;left:0;top:0;transform-origin:0 0}
.edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.edges path{fill:none;stroke-width:1.6}

.node{position:absolute;white-space:nowrap;padding:3px 4px 5px;border-bottom:1.6px solid currentColor;cursor:pointer;user-select:none;line-height:1.3;font-size:14.5px;color:var(--ink)}
.node .tx{color:var(--ink);outline:none;display:inline-block;min-width:4px}
.node.l1 .tx{letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.node.root{border:1.6px solid var(--ink);border-radius:3px;padding:10px 18px;background:var(--card);font-size:17px;letter-spacing:.3em}
.node.root .tx{text-transform:uppercase}
.node.sel{background:rgba(44,91,87,.10);border-radius:2px 2px 0 0}
.node.root.sel{box-shadow:0 0 0 3px rgba(44,91,87,.25)}
.node.editing{cursor:text;user-select:text;background:#fff}
.node.editing .tx{min-width:40px}
.node .lk{display:inline-block;margin-left:6px;text-decoration:none;font-size:12px;color:var(--sea);vertical-align:1px;padding:0 2px}
.node .lk:hover{color:var(--ink)}
.node .nt{display:inline-block;margin-left:4px;font-size:11px;color:var(--grey);font-style:italic}
.node .col{position:absolute;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:1.3px solid currentColor;background:var(--paper);font-size:10px;display:grid;place-items:center;color:inherit;cursor:pointer;line-height:1}
.node .col span{color:var(--ink)}
.node.hit{background:rgba(214,180,70,.28)}
.node.drop-in{outline:2px dashed var(--sea);outline-offset:3px}
.node.drop-before{box-shadow:0 -3px 0 var(--sea)}
.node.drop-after{box-shadow:0 3px 0 var(--sea)}
.node.dragging{opacity:.35}
.dragghost{position:fixed;pointer-events:none;z-index:50;background:var(--card);border:1px solid var(--sea);padding:3px 8px;font-size:14px;opacity:.9}

.zoom{position:absolute;right:14px;bottom:14px;display:flex;gap:6px;z-index:4}
.zoom .btn{background:var(--paper)}
.help{position:absolute;left:14px;bottom:14px;font-size:12px;color:var(--grey);font-style:italic;z-index:4;max-width:70vw;background:rgba(244,243,238,.85);padding:4px 6px}

/* panneau latéral */
.panel{position:absolute;right:0;top:0;bottom:0;width:min(360px,92vw);background:var(--paper);border-left:1px solid var(--line);z-index:6;padding:18px;overflow:auto;box-shadow:-10px 0 30px -20px rgba(0,0,0,.3)}
.panel h3{font-weight:400;font-size:17px;margin:0 0 14px;display:flex;align-items:center;justify-content:space-between}
.panel label{display:block;font-style:italic;color:var(--sea);font-size:13px;margin:16px 0 2px}
.panel textarea{width:100%;min-height:110px;background:transparent;border:1px solid var(--line);padding:8px;font-size:14px;resize:vertical;outline:none}
.panel textarea:focus{border-color:var(--sea)}
.panel .row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.hist-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}

.banner{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 14px;z-index:8;display:flex;gap:10px;align-items:center;font-size:14px;max-width:92vw;flex-wrap:wrap}
.banner .btn{border-color:#555;color:var(--paper)}

.menu{position:absolute;top:100%;right:10px;background:var(--paper);border:1px solid var(--line);display:grid;min-width:220px;z-index:9;box-shadow:0 10px 30px -18px rgba(0,0,0,.4)}
.menu button{background:none;border:0;text-align:left;padding:10px 14px;cursor:pointer}
.menu button:hover{background:var(--card)}

@media (max-width:700px){
  .help{display:none}
  .search{width:120px}
  .bar .hide-sm{display:none}
}
.node .col.open{display:none}
.node:hover .col.open,.node.sel .col.open{display:grid}
.node .col{transform:translateY(-50%)}