:root{
  --night:#14183a; --night2:#1f2552; --night3:#2c346e;
  --marble:#f5f0e6; --marble2:#ebe4d4; --card:#fffdf8; --ink:#1d2033; --muted:#666a80;
  --gold:#b8924a; --gold2:#d8b36a; --goldsoft:#efe2c2; --line:#ddd3bd;
  --ok:#2f7a55; --warn:#a8641c; --bad:#a43a3a;
  --r:14px; --serif:Georgia,"Palatino Linotype","Book Antiqua",Palatino,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;background:var(--marble);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:.2em 0 .4em;letter-spacing:.01em}
h1{font-size:1.7rem} h2{font-size:1.35rem} h3{font-size:1.1rem}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--night3)}
.boot{text-align:center;margin-top:30vh;font-family:var(--serif);color:var(--muted)}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:.82rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.stack>*+*{margin-top:.8rem}

/* ---- boutons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.45rem 1.1rem;border-radius:999px;border:1px solid var(--gold);background:var(--card);color:var(--night);cursor:pointer;font-weight:600;touch-action:manipulation}
.btn:hover{background:var(--goldsoft)}
.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));border-color:#9c7a38;color:#1b1608}
.btn.primary:hover{filter:brightness(1.06)}
.btn.dark{background:var(--night2);color:#f3ecd8;border-color:var(--gold)}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.small{min-height:34px;padding:.2rem .8rem;font-size:.85rem}
.btn.ghost{border-color:transparent;background:transparent}
.btn[disabled]{opacity:.5;cursor:default}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold2);outline-offset:2px}

/* ---- champs ---- */
label.f{display:block;font-size:.85rem;color:var(--muted);margin-top:.7rem}
input[type=text],input[type=password],input[type=email],select,textarea{width:100%;padding:.55rem .75rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:#1b1608;min-height:44px}
input::placeholder,textarea::placeholder{color:#6b6556;opacity:1}
textarea{min-height:110px;resize:vertical}
.check{display:flex;gap:.5rem;align-items:center;margin:.4rem 0}
.check input{width:22px;height:22px;accent-color:var(--gold)}

/* ---- cartes ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:0 1px 0 #fff inset,0 6px 20px -14px rgba(20,24,58,.5)}
.card+.card{margin-top:1rem}
.badge{display:inline-block;padding:.05rem .55rem;border-radius:999px;background:var(--goldsoft);font-size:.75rem;border:1px solid var(--line)}
.badge.warn{background:#f6e3c8;color:var(--warn)} .badge.bad{background:#f3d6d6;color:var(--bad)} .badge.ok{background:#d7ecdf;color:var(--ok)}
.meander{height:10px;background:
  repeating-linear-gradient(90deg,var(--gold) 0 2px,transparent 2px 10px),
  linear-gradient(var(--gold),var(--gold)) 0 0/100% 2px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 0 100%/100% 2px no-repeat;opacity:.55}

/* ---- connexion ---- */
.auth{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(1200px 700px at 50% -10%,var(--night3),var(--night) 60%)}
.auth .panel{width:min(440px,100%);background:var(--marble);border-radius:20px;padding:1.6rem 1.5rem 1.8rem;border:1px solid var(--gold);box-shadow:0 30px 80px -30px #000}
.auth .brand{text-align:center}
.auth .brand h1{font-size:2.1rem;margin:.2rem 0 0}
.auth .brand p{margin:.2rem 0 1rem;color:var(--muted);font-family:var(--serif);font-style:italic}
.auth .mini-orb{margin:.2rem auto .4rem}
.err{color:var(--bad);margin:.6rem 0;font-size:.95rem}

/* ---- ossature ---- */
.shell{min-height:100vh;display:flex;flex-direction:column}
.top{background:linear-gradient(180deg,var(--night2),var(--night));color:#f3ecd8;border-bottom:2px solid var(--gold);position:sticky;top:0;z-index:20}
.top .in{max-width:1500px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:.4rem 1rem;padding-top:calc(.4rem + env(safe-area-inset-top))}
.top .logo{font-family:var(--serif);font-size:1.25rem;letter-spacing:.04em;display:flex;align-items:center;gap:.5rem;color:#f3ecd8;text-decoration:none}
.top nav{display:flex;gap:.2rem;flex:1;justify-content:center;flex-wrap:wrap}
.top nav a{color:#d9d3c0;text-decoration:none;padding:.4rem .8rem;border-radius:999px;font-size:.95rem;position:relative}
.top nav a.on{background:rgba(216,179,106,.18);color:#fff;box-shadow:0 0 0 1px var(--gold) inset}
.top nav .dot{position:absolute;top:2px;right:2px;background:var(--gold2);color:#1b1608;border-radius:999px;font-size:.65rem;min-width:18px;text-align:center;font-weight:700}
.top .who{font-size:.85rem;color:#d9d3c0}
main{flex:1;width:100%;max-width:1500px;margin:0 auto;padding:1rem}
main.wide{padding:0;max-width:none}
@media(max-width:820px){
  html{font-size:17px}
  .top .in{flex-wrap:wrap;gap:.3rem}
  .top .who{display:none}
  .top nav{position:fixed;bottom:0;left:0;right:0;background:var(--night);border-top:2px solid var(--gold);justify-content:space-around;padding:.2rem .2rem calc(.2rem + env(safe-area-inset-bottom));z-index:30;flex-wrap:nowrap;overflow-x:auto}
  .top nav a{padding:.5rem .55rem;font-size:.82rem;white-space:nowrap}
  main{padding-bottom:5.5rem}
  main.wide{padding-bottom:3.6rem}
}

/* ---- scène Raconter ---- */
.stage{display:grid;grid-template-columns:var(--split,45%) 10px minmax(0,1fr);min-height:calc(100vh - 56px)}
.splitter{cursor:col-resize;background:linear-gradient(90deg,var(--night),var(--gold) 50%,var(--marble));opacity:.85;touch-action:none;position:relative}
.splitter::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:44px;margin:-22px 0 0 -2px;border-radius:3px;background:#fffdf7;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.splitter:hover,.splitter.drag,.splitter:focus-visible{opacity:1}
@media(max-width:1000px){.stage{grid-template-columns:1fr;min-height:0}.splitter{display:none}}
.mic-pause{min-width:150px;font-size:1.05rem}
.mic-pause.on{background:linear-gradient(180deg,var(--gold2),var(--gold))!important;color:#1b1608!important}
.admin-hint{margin:auto 0 0;font-size:.78rem;color:var(--gold2);text-align:center;max-width:520px;line-height:1.35;border-top:1px dashed rgba(255,255,255,.18);padding-top:.5rem}
.talk{background:radial-gradient(900px 600px at 50% 15%,var(--night3),var(--night) 65%);color:#f3ecd8;display:flex;flex-direction:column;align-items:center;padding:1.2rem 1rem 1rem;gap:.8rem;position:relative;overflow:hidden}
.talk .who-line{font-family:var(--serif);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--gold2);margin:0}
.orbwrap{width:min(46vh,300px);aspect-ratio:1;position:relative;cursor:pointer;flex:none;max-width:60vw}
.orb{position:absolute;inset:14%;border-radius:50%;background:
  radial-gradient(circle at 38% 32%,#fffaf0 0,#f6e3b2 22%,#d8b36a 55%,#8c6a2c 100%);
  box-shadow:0 0 40px 8px rgba(216,179,106,.35),0 0 120px 30px rgba(216,179,106,.15),inset -14px -18px 40px rgba(60,40,10,.45);
  animation:breathe 6s ease-in-out infinite;transition:box-shadow .4s}
.orbwrap .ring{position:absolute;inset:4%;border-radius:50%;border:1px solid rgba(216,179,106,.5);animation:spin 40s linear infinite}
.orbwrap .ring.r2{inset:0;border-style:dashed;border-color:rgba(216,179,106,.25);animation-direction:reverse;animation-duration:70s}
.orbwrap.listening .orb{animation:listen 1.6s ease-in-out infinite;box-shadow:0 0 50px 14px rgba(150,200,255,.35),0 0 140px 40px rgba(150,200,255,.15),inset -14px -18px 40px rgba(20,30,70,.5);background:radial-gradient(circle at 38% 32%,#fff 0,#dff0ff 20%,#a4c8ee 55%,#4d6f9f 100%)}
.orbwrap.thinking .orb{animation:think 1.2s ease-in-out infinite}
.orbwrap.speaking .orb{animation:speak .55s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes listen{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes think{0%,100%{filter:brightness(1)}50%{filter:brightness(.78)}}
@keyframes speak{0%,100%{transform:scale(1)}30%{transform:scale(1.07)}60%{transform:scale(.985)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.orb,.orbwrap .ring{animation:none!important}}
.state{min-height:1.5em;font-family:var(--serif);font-style:italic;color:#d9d3c0;text-align:center}
.chat{width:100%;max-width:560px;flex:1;min-height:90px;max-height:34vh;overflow:auto;display:flex;flex-direction:column;gap:.5rem;padding:.2rem .1rem;scroll-behavior:smooth}
@media(max-width:1000px){.chat{max-height:30vh}}
.msg{padding:.55rem .85rem;border-radius:14px;max-width:92%;font-size:1rem;white-space:pre-wrap}
.msg.g{background:rgba(255,255,255,.1);border:1px solid rgba(216,179,106,.35);align-self:flex-start;font-family:var(--serif);font-size:1.08rem}
.msg.u{background:var(--gold2);color:#1b1608;align-self:flex-end}
.controls{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;width:100%;max-width:560px}
.mic{width:76px;height:76px;border-radius:50%;border:2px solid var(--gold2);background:var(--night2);color:#f3ecd8;display:grid;place-items:center;cursor:pointer;font-size:1.8rem;touch-action:manipulation}
.mic.on{background:var(--gold2);color:#1b1608;animation:listen 1.4s infinite}
.say{display:flex;gap:.5rem;width:100%;max-width:560px}
.say input{background:rgba(255,255,255,.97);color:#1b1608}
.talk .btn{background:var(--night2);color:#f3ecd8}
.talk .btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1b1608}
.props{width:100%;max-width:560px;display:flex;flex-direction:column;gap:.5rem}
.prop{background:var(--card);color:var(--ink);border:1px solid var(--gold);border-radius:12px;padding:.6rem .8rem}
.prop .t{font-weight:600}
.prop input{margin-top:.3rem}
.side{display:flex;flex-direction:column;min-width:0;background:var(--marble)}
.tabs{display:flex;gap:.3rem;padding:.6rem .8rem 0;border-bottom:1px solid var(--line);background:var(--marble2)}
.tabs button{border:1px solid transparent;border-bottom:none;border-radius:12px 12px 0 0;background:transparent;padding:.5rem 1rem;cursor:pointer;font-weight:600;color:var(--muted)}
.tabs button.on{background:var(--marble);border-color:var(--line);color:var(--night);position:relative;top:1px}
.pane{flex:1;min-height:0;overflow:auto}
.flash{animation:flash 1.4s}
@keyframes flash{0%{box-shadow:0 0 0 4px var(--gold2)}100%{box-shadow:0 0 0 0 transparent}}

/* ---- arbre ---- */
.treebox{position:relative;width:100%;height:100%;min-height:420px;background:
  radial-gradient(circle at 20% 10%,#fffaf0,transparent 40%),var(--marble);touch-action:none;overflow:hidden}
.treebox svg{width:100%;height:100%;display:block;cursor:grab;user-select:none}
.treebox svg:active{cursor:grabbing}
.treebar{position:absolute;top:.6rem;left:.6rem;right:.6rem;display:flex;gap:.4rem;flex-wrap:wrap;pointer-events:none}
.treebar>*{pointer-events:auto}
.treebar input{max-width:220px;background:rgba(255,255,255,.95)}
.zoom{position:absolute;right:.7rem;bottom:.7rem;display:flex;flex-direction:column;gap:.35rem}
.zoom .btn{width:44px;padding:0}
.node rect{fill:var(--card);stroke:var(--gold);stroke-width:1.3;rx:10}
.node.dead rect{fill:#f1ebdc}
.node.sel rect{stroke:var(--night);stroke-width:3;fill:#fff7de}
.node.focus rect{stroke:var(--gold);stroke-width:4;filter:drop-shadow(0 0 8px var(--gold2))}
.node.me rect{fill:#e8ecff}
.node text{font-family:var(--serif);pointer-events:none}
.node .nm{font-size:14px;fill:var(--ink);font-weight:600}
.node .yr{font-size:11.5px;fill:var(--muted)}
.edge{fill:none;stroke:#9aa0bd;stroke-width:1.6}
.edge.sp{stroke:var(--gold);stroke-width:2.4}
.empty-tree{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;color:var(--muted)}

/* ---- fiche ---- */
.sheet{padding:1rem 1.1rem 2rem;max-width:860px;margin:0 auto}
.sheet header{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:.8rem}
.sheet h2{margin:0;font-size:1.7rem}
.sheet .dates{color:var(--muted);font-family:var(--serif)}
.sec{margin-top:1.3rem}
.sec>h3{display:flex;align-items:center;gap:.6rem;border-bottom:1px solid var(--goldsoft);padding-bottom:.2rem}
.sec>h3 .btn{margin-left:auto}
.kv{display:grid;grid-template-columns:150px 1fr;gap:.2rem .8rem}
.kv dt{color:var(--muted)} .kv dd{margin:0}
@media(max-width:520px){.kv{grid-template-columns:1fr}.kv dt{margin-top:.4rem}}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{border:1px solid var(--gold);background:var(--card);border-radius:999px;padding:.2rem .8rem;cursor:pointer;font-size:.92rem}
.chip:hover{background:var(--goldsoft)}
.media-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem}
.tile{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;display:flex;flex-direction:column}
.tile .th{aspect-ratio:1;background:var(--marble2);display:grid;place-items:center;cursor:pointer;overflow:hidden;font-size:2.2rem}
.tile .th img{width:100%;height:100%;object-fit:cover}
.tile .cap{padding:.3rem .5rem;font-size:.78rem;word-break:break-word}
.tile .acts{display:flex;justify-content:space-between;padding:0 .3rem .3rem}
.timeline{border-left:2px solid var(--gold);margin-left:.4rem;padding-left:1rem}
.ev{position:relative;margin:0 0 .9rem}
.ev::before{content:"";position:absolute;left:-1.37rem;top:.4rem;width:11px;height:11px;border-radius:50%;background:var(--gold2);border:2px solid var(--card)}
.ev .d{font-family:var(--serif);color:var(--muted);font-size:.9rem}
.story{border-left:4px solid var(--gold);padding:.4rem .9rem;background:var(--card);border-radius:0 12px 12px 0;margin:.6rem 0;white-space:pre-wrap;font-family:var(--serif);font-size:1.06rem}
.story.add{border-left-color:var(--night3);background:#f4f5fc}
.story .meta{font-family:var(--sans);font-size:.78rem;color:var(--muted);white-space:normal;margin-bottom:.3rem}
.notice{padding:.6rem .9rem;border-radius:12px;background:var(--goldsoft);border:1px solid var(--gold);font-size:.92rem}

/* ---- fenêtres ---- */
.modal-bg{position:fixed;inset:0;background:rgba(10,12,30,.6);display:grid;place-items:center;z-index:100;padding:1rem}
.modal{background:var(--marble);border:1px solid var(--gold);border-radius:18px;padding:1.2rem;width:min(560px,100%);max-height:92vh;overflow:auto}
.modal h3{margin-top:0}
.modal .foot{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem;flex-wrap:wrap}
#toasts{position:fixed;left:0;right:0;bottom:5rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;z-index:200;pointer-events:none}
.toast{background:var(--night);color:#f3ecd8;border:1px solid var(--gold);padding:.6rem 1rem;border-radius:999px;max-width:92vw;box-shadow:0 8px 30px -8px #000}
.toast.err{background:var(--bad);border-color:#fff}
.toast .btn{pointer-events:auto;margin-left:.6rem;min-height:30px;padding:.1rem .7rem}

table.t{width:100%;border-collapse:collapse;font-size:.92rem}
table.t th,table.t td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.page{max-width:980px;margin:0 auto}
.lvl-erreur{border-left:4px solid var(--bad)} .lvl-attention{border-left:4px solid var(--warn)} .lvl-info{border-left:4px solid var(--line)}
.issue{padding:.5rem .8rem;background:var(--card);border-radius:0 10px 10px 0;margin:.4rem 0;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

/* ---- page arbre ---- */
.treepage{display:flex;height:calc(100vh - 56px)}
.treemain{flex:1;min-width:0}
.sidesheet{width:min(520px,45vw);border-left:2px solid var(--gold);background:var(--marble);overflow:auto;display:flex;flex-direction:column}
.sidesheet .pane{overflow:visible}
@media(max-width:820px){
  .treepage{height:calc(100vh - 110px)}
  .sidesheet{position:fixed;inset:0;width:100%;z-index:60;border:none;padding-bottom:5rem}
}
.talk select{color:var(--ink)}

/* ---- arbre stylisé (cartes) ---- */
.treebox{background:radial-gradient(1400px 900px at 30% 0%,#fffdf6,#f4eee2 70%)}
.viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
.viewport:active{cursor:grabbing}
.world{position:absolute;left:0;top:0;transform-origin:0 0;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}
.links{position:absolute;overflow:visible;pointer-events:none}
.ln{fill:none;stroke:#b39a77;stroke-width:1.8;stroke-linecap:round}
.ln.sp{stroke:#9c8160}
.ln.far{stroke-dasharray:2 5}
.ln.adopt{stroke-dasharray:3 6;stroke-width:2.2}
.dot{fill:#fffaf0;stroke:#9c8160;stroke-width:1.6}
.tcard{position:absolute;background:#fffaf0;border:1px solid #e8dcc4;border-radius:18px;padding:12px 16px 14px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 30px -16px rgba(120,80,30,.38);
  cursor:pointer;user-select:none;font-family:Literata,var(--serif);color:#3b2f24;transition:box-shadow .25s,border-color .25s;box-sizing:border-box}
.tcard:hover{border-color:#d9b27a}
.tcard.sel,.tcard.me{background:#fff7e8;border:2px solid rgba(224,160,74,.85);padding:11px 15px 13px;box-shadow:0 0 0 7px rgba(224,160,74,.14),0 1px 0 rgba(255,255,255,.9) inset,0 12px 30px -12px rgba(120,80,30,.38)}
.tcard.focus{border:2px solid #4a63d8;padding:11px 15px 13px;box-shadow:0 0 0 4px rgba(74,99,216,.18),0 12px 30px -12px rgba(74,99,216,.4)}
.mourn{position:absolute;top:0;right:0;width:26px;height:26px;background:#1d1d22;clip-path:polygon(0 0,100% 0,100% 100%);border-top-right-radius:18px}
.tcard.dead{overflow:hidden}
.thead{display:flex;gap:10px;align-items:flex-start;padding-right:14px}
.tport{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #e0a04a}
.tname{font-weight:600;font-size:20px;line-height:1.15;color:#3b2f24}
.tborn{font-style:italic;font-size:14px;color:#6a5a49;margin-top:2px}
.tmeta{font-size:14.5px;color:#6a5a49;margin-top:4px;line-height:1.3}
.tkin{font-size:14.5px;color:#8a5a1f;margin-top:3px}
.tjob{font-size:14.5px;color:rgba(59,47,36,.8);margin-top:2px}
.tex{list-style:none;margin:10px -2px 0;padding:8px 0 0;border-top:1px solid #efe3cc;font-size:13.5px;color:rgba(59,47,36,.85);line-height:1.35}
.tex li{position:relative;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px;padding-left:12px}
.tex li::before{content:"•";position:absolute;left:0;top:0;color:#e0a04a}
.ttog{position:absolute;right:8px;bottom:-9px;width:20px;height:20px;border-radius:50%;border:1px solid #e8dcc4;background:#fffaf0;color:#6a5a49;font-size:14px;line-height:1;padding:0;cursor:pointer;box-shadow:0 2px 6px rgba(120,80,30,.2)}
.tfoot{position:absolute;left:14px;right:5.6rem;bottom:14px;display:flex;justify-content:space-between;gap:.5rem;pointer-events:none;z-index:4;flex-wrap:wrap}
.tfl,.tfr{display:flex;gap:10px;flex-wrap:wrap}
.tbtn{pointer-events:auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;border:1px solid #e8dcc4;background:rgba(255,250,240,.96);color:#3b2f24;font:500 14px Literata,var(--serif);cursor:pointer;box-shadow:0 6px 18px -10px rgba(120,80,30,.5)}
.tbtn:hover{border-color:#d9b27a}
.tbtn .ico{font-size:15px;color:#6a5a49}
.treebox.fullpage{position:fixed;inset:0;z-index:80}
.treebox:fullscreen{background:#fffaf0}


/* ---- fiche à bandeau ---- */
.fiche{padding:0 0 2rem;max-width:760px;background:#fffbf1}
.fiche .hero{position:relative}
.fiche .cover{height:170px;background:linear-gradient(135deg,#e9dfc9,#f7f1e3 45%,#e3d6bb);overflow:hidden;position:relative;border-radius:0}
.fiche .cover img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) saturate(.85)}
.fiche .cover.empty::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,255,255,.18) 0 2px,transparent 2px 22px)}
.fiche .close{z-index:3;position:absolute;top:.8rem;right:.8rem;border:none;background:rgba(255,253,247,.94);border-radius:999px;padding:.45rem 1rem;cursor:pointer;font-weight:600;box-shadow:0 4px 14px -6px rgba(0,0,0,.4)}
.fiche .pencil{z-index:3;position:absolute;right:.7rem;bottom:.7rem;width:36px;height:36px;border-radius:50%;border:1px solid #e6dcc8;background:#fffdf7;cursor:pointer;font-size:1rem;box-shadow:0 2px 8px -4px rgba(0,0,0,.4)}
.fiche .portrait{position:absolute;left:1.6rem;top:96px;width:106px;height:106px;border-radius:50%;border:4px solid #fffbf1;background:#e9e0cc;box-shadow:0 8px 24px -10px rgba(60,40,10,.6);display:grid;place-items:center;font-family:var(--serif);font-size:2rem;color:#8a7350}
.fiche .portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.fiche .portrait .pencil{right:-6px;bottom:-2px;width:32px;height:32px}
.fiche .ident{padding:4.4rem 1.6rem 0}
.fiche .ident h2{font-size:1.75rem;margin:0;color:#2b2618}
.fiche .born{font-family:var(--serif);font-style:italic;color:#6f6656}
.fiche .kin{font-family:var(--serif);color:#a3742d;margin-top:.5rem;font-size:1.05rem}
.fiche .line{font-family:var(--serif);color:#6f6656;margin-top:.2rem}
.fiche .sec{padding:0 1.6rem}
.fiche .sec>h3{font-family:var(--sans)}
.caps{text-transform:uppercase;letter-spacing:.09em;font-size:.78rem!important;color:#6f6656;border-top:1px solid #eadfca;padding-top:1rem;border-bottom:none!important}
.facts{list-style:none;padding:0;margin:.4rem 0 0}
.facts li{position:relative;padding-left:1.3rem;margin-bottom:1rem}
.facts li::before{content:"";position:absolute;left:0;top:.55rem;width:8px;height:8px;border-radius:50%;background:#d9a54a}
.facts .ft{font-family:var(--serif);font-size:1.08rem;color:#2b2618}
.facts .fp{font-family:var(--serif);font-size:.88rem;color:#8a7f6a;margin-top:.15rem}
.facts blockquote{margin:.35rem 0 0;padding:.1rem 0 .1rem .8rem;border-left:2px solid #e2c48a;font-family:var(--serif);font-style:italic;color:#4d4637}
.facts .fa{display:flex;gap:.2rem;opacity:.75}
.pick{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:1;background:none}
.pick img{width:100%;height:100%;object-fit:cover;display:block}
.pick.on{border-color:var(--gold)}
@media(max-width:520px){.fiche .ident,.fiche .sec{padding-left:1rem;padding-right:1rem}.fiche .portrait{left:1rem}}

/* ---- visage de Gabriel ---- */
.facewrap{width:min(40vh,290px);aspect-ratio:300/380;max-width:62vw;flex:none;cursor:pointer;position:relative}
.facewrap .face{width:100%;height:100%;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.facewrap.listening::after{content:"";position:absolute;inset:auto 25% -6px;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,#a4c8ee,transparent);animation:listen 1.4s infinite}
.facewrap.thinking .face{filter:drop-shadow(0 0 22px rgba(216,179,106,.45))}
.pending{background:rgba(255,255,255,.08);border:1px solid rgba(216,179,106,.4);border-radius:12px;padding:.5rem .8rem;color:#f3ecd8}
.pending ul{margin:.3rem 0 0;padding-left:1.1rem;font-size:.92rem}
.pending .btn{color:#f3ecd8;min-height:28px;padding:0 .4rem}
.facepreview{width:150px;height:190px;background:radial-gradient(circle at 50% 40%,#13245a,#060b22);border-radius:14px;flex:none}
.voices{display:flex;flex-direction:column;gap:.3rem}
.voice{display:flex;gap:.4rem;align-items:center;padding:.3rem .6rem;border:1px solid var(--line);border-radius:10px;background:#fff}
.voice.on{border-color:var(--gold);background:var(--goldsoft)}
@media(max-width:1000px){.facewrap{width:min(32vh,220px)}}
.treebox svg.links{width:auto;height:auto;cursor:auto}
.facewrap{width:min(30vh,250px)}
@media(min-width:1001px){.stage{height:calc(100vh - 56px)}.talk{min-height:0}.side{min-height:0}.chat{max-height:none;min-height:60px}}

/* ---- introduction ---- */
.intro{min-height:100vh;display:grid;grid-template-columns:1fr;background:radial-gradient(900px 600px at 50% 15%,var(--night3),var(--night) 65%);color:#f3ecd8}
.intro.with-tree,.intro .with-tree{grid-template-columns:1fr}
@media(min-width:1001px){.intro.with-tree{grid-template-columns:minmax(380px,5fr) 6fr}}
.intro-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:1.5rem 1rem;text-align:center}
.intro-main .who-line{font-family:var(--serif);letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);margin:0;font-size:.85rem}
.intro-face{width:min(48vh,460px,84vw);height:min(48vh,460px,84vw);aspect-ratio:auto;max-width:none;overflow:visible}
.intro-face .face{position:relative;z-index:1}
/* apparition : une étoile lointaine qui s'approche, avec un halo blanc très doux */
.intro-face.appear .face{animation:iface 5.2s cubic-bezier(.16,.8,.28,1) both}
.intro-face.appear::before{content:"";position:absolute;inset:-22%;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(214,232,255,.55) 22%,rgba(170,205,255,.22) 45%,rgba(170,205,255,0) 70%);animation:ihalo 5.2s cubic-bezier(.16,.8,.28,1) both}
@keyframes iface{0%{transform:scale(.02);opacity:0;filter:blur(14px) brightness(2.6)}18%{opacity:.55;filter:blur(9px) brightness(2)}55%{opacity:.95;filter:blur(2.5px) brightness(1.25)}100%{transform:scale(1);opacity:1;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}}
@keyframes ihalo{0%{transform:scale(.03);opacity:0}15%{opacity:1}45%{transform:scale(.9);opacity:.95}100%{transform:scale(1.05);opacity:.38}}
@media(prefers-reduced-motion:reduce){.intro-face.appear .face,.intro-face.appear::before{animation:none}}
.intro-sub{font-family:var(--serif);font-size:1.25rem;line-height:1.5;max-width:560px;min-height:7.5rem;margin:.2rem 0}
.intro-dots{display:flex;gap:.4rem}.intro-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}.intro-dots i.on{background:var(--gold2)}
.intro-ctl{justify-content:center}
.intro .btn{background:var(--night2);color:#f3ecd8}.intro .btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1b1608}.intro .btn.ghost{background:transparent;color:#d9d3c0;text-decoration:underline}
.intro .btn.big{font-size:1.15rem;padding:.8rem 1.6rem}
.intro-never{color:#d9d3c0;font-size:.9rem;justify-content:center}
.intro-tree{background:var(--marble);position:relative;min-height:360px;height:100%}
.intro-demo{position:absolute;z-index:5;bottom:.8rem;left:.8rem;background:#fffdf7;border:1px solid var(--gold);border-radius:999px;padding:.25rem .8rem;font-size:.8rem;color:#6f6656}
.design-row{align-items:center;padding:.4rem 0;border-bottom:1px solid #eadfc8;gap:.6rem}.design-row.off{opacity:.55}

.faces{display:flex;flex-wrap:wrap;gap:.7rem;margin:.6rem 0}.faceopt{width:150px;border:2px solid transparent;border-radius:12px;padding:.3rem;background:#0b1030}.faceopt.on{border-color:var(--gold2)}.faceopt img{width:100%;border-radius:8px;display:block}.faceopt .row{margin-top:.3rem;gap:.3rem;flex-wrap:wrap}
.refthumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid #d9c9a3}

.dict-row{display:flex;gap:.6rem;justify-content:center;margin-top:.4rem}
.talk .btn.dict{background:transparent;border:1px solid var(--gold2);color:var(--gold2)}
.talk .btn.dict.on{background:var(--gold2);color:#1b1608;animation:listen 1.4s infinite}

.holo-page{max-width:1500px}
.holo{display:grid;grid-template-columns:auto minmax(320px,1fr);gap:1rem;align-items:start}
.holo-scroll{overflow:auto;max-height:calc(100vh - 150px);max-width:100%;background:radial-gradient(circle at 50% 40%,#13245a,#060b22);border-radius:14px;position:sticky;top:.5rem}
.holo-host{position:relative;margin:0 auto}
.holo-host .face{display:block}
.holo-layer{position:absolute;inset:0;z-index:2}
.holo-pt{position:absolute;width:15px;height:15px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #1b1608;background:#ffd34d;cursor:grab;padding:0;touch-action:none;box-shadow:0 0 0 1px #fff8}
.holo-pt.on,.holo-pt:focus-visible{background:#fff;cursor:grabbing;outline:3px solid #ffd34d}
.holo-tests .btn{padding:.4rem .7rem}
@media(max-width:1000px){.holo{grid-template-columns:1fr}.holo-scroll{position:static;max-height:75vh}}

.viewbar{background:#7a2e2e;color:#fff;padding:.45rem 1rem;text-align:center;font-size:.92rem;position:sticky;top:0;z-index:50}
.viewbar .btn{margin-left:.6rem}


/* fiche : fenêtre centrée au-dessus de l'arbre flouté */
.treepage .sidesheet{position:fixed;inset:0;width:auto;z-index:70;border:none;padding:0;background:rgba(240,232,214,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);align-items:center;justify-content:center;overflow:auto}
.treepage .sidesheet>.pane{flex:none;width:min(460px,94vw);max-height:92vh;overflow:auto;background:#fffaf0;border-radius:20px;box-shadow:0 30px 80px -20px rgba(80,50,10,.5),0 0 0 1px #e8dcc4}
.treepage .sidesheet .fiche .cover{border-radius:20px 20px 0 0}

/* ---- barre d'outils de l'arbre : compacte, en haut à droite ---- */
.treetools{position:absolute;top:.6rem;right:.6rem;display:flex;gap:.4rem;align-items:center;z-index:5}
.treetools select{width:auto;min-height:36px;padding:.1rem .5rem;background:rgba(255,255,255,.95)}
.treetools .btn{min-height:36px;min-width:36px}
/* la page de l'arbre occupe exactement la hauteur restante (pas d'ascenseur même si le menu passe sur 2 lignes) */
body:has(main.wide) .shell{height:100vh;height:100dvh;min-height:0}
main.wide{flex:1;min-height:0;display:flex}
main.wide .treepage{flex:1;height:auto;min-height:0;width:100%}

/* ---- bouton rond « Discuter avec Gabrielle » ---- */
.orb-root{position:fixed;right:1rem;bottom:1rem;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.orb-btn{width:62px;height:62px;border-radius:50%;border:2px solid var(--gold);cursor:pointer;padding:0;
  background:radial-gradient(circle at 35% 30%,#fff6d8,#d8b36a 55%,#8a6a2a);box-shadow:0 6px 22px rgba(20,18,50,.45),0 0 0 6px rgba(216,179,106,.18);transition:transform .15s}
.orb-btn:hover{transform:scale(1.07)}
.orb-btn .orb-core{display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#2a2008;text-shadow:0 0 8px #fff8}
.orb-btn.on{box-shadow:0 6px 22px rgba(20,18,50,.45),0 0 0 8px rgba(216,179,106,.35)}
.orb-panel{width:min(380px,calc(100vw - 2rem));height:min(520px,calc(100vh - 7rem));display:flex;flex-direction:column;background:var(--marble,#fbf7ee);border:2px solid var(--gold);border-radius:18px;box-shadow:0 12px 40px rgba(20,18,50,.4);overflow:hidden}
.orb-panel.hidden{display:none}
.orb-head{display:flex;align-items:center;gap:.4rem;padding:.55rem .7rem;background:linear-gradient(180deg,var(--night2),var(--night));color:#f3ecd8}
.orb-head .grow{flex:1}
.orb-modes{display:flex;gap:.3rem;flex-wrap:wrap;padding:.4rem .6rem;border-bottom:1px solid #0001}
.orb-log{flex:1;overflow:auto;padding:.6rem;display:flex;flex-direction:column;gap:.45rem}
.orb-b{max-width:88%;padding:.5rem .7rem;border-radius:14px;line-height:1.35;font-size:.95rem;white-space:pre-wrap}
.orb-b.g{align-self:flex-start;background:#fff;border:1px solid #0002}
.orb-b.u{align-self:flex-end;background:#e9dcb8}
.orb-b.err{color:var(--bad)}
.orb-chips{display:flex;gap:.3rem;flex-wrap:wrap;padding:0 .6rem .3rem}
.orb-in{display:flex;gap:.35rem;padding:.5rem .6rem;border-top:1px solid #0001}
.orb-in input{flex:1;min-width:0}
.orb-in .btn.on{background:var(--bad);color:#fff}
@media(max-width:820px){.orb-root{bottom:4.2rem}.orb-panel{height:min(480px,calc(100vh - 11rem))}}
.chip.on{background:var(--gold);color:#2a2008;font-weight:600}

.top nav a{padding:.35rem .6rem;font-size:.9rem}
@media(max-width:1350px){.top .who{display:none}}

@media(max-width:700px){.tbtn{padding:0 11px;font-size:0;gap:0}.tbtn .ico{font-size:18px}.tfoot{right:5rem;left:8px}.tfl,.tfr{gap:6px}
  .treebar input{max-width:110px}.treetools select{max-width:150px}}

main.wide .stage{flex:1;width:100%;min-width:0}