/* Oboluaire / Obolary — styles. Thème sombre unique, voulu. */
/* Layout: reliquary index of skills on the left, a ledger-like work panel on the right, status band on top. Deliberately single dark theme. */
:root{
  color-scheme: dark;
  --bg:#070605; --panel:#0c0a08; --panel2:#12100d; --line:#6f6858; --line2:#a69f8c; --bone:#d9d0bd;
  --fg:#d9d0bd; --muted:#a69f8c; --faint:#8a8372;
  --blood:#b3281c; --bloodtx:#e0705c; --blood-dim:#3a110c; --soul:#e8dcc0; --soul-dim:#1c1a15;
  --poison:#a9b88f; --gold:#f1e9d6;
  --display:'IM Fell English SC', 'Iowan Old Style', Georgia, serif;
  --fraktur:'UnifrakturCook', 'IM Fell English SC', serif;
  --body:'IM Fell DW Pica', Georgia, serif;
  --r:0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:max(var(--pt),calc(16.5px * var(--tx,1)));line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:12px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--soul);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.wrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:12px}

/* Status band */
.band{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.band h1{font-size:max(var(--pt),calc(1.6rem * var(--tx,1)));color:var(--fg);margin-right:auto}
.band h1 small{display:block;font-family:var(--body);font-size:calc(.72rem * var(--tx,1));letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.stat{display:flex;flex-direction:column;gap:3px;min-width:130px}
.stat label{font-size:max(var(--pt),calc(.7rem * var(--tx,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bar{height:8px;background:#0b080d;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:var(--blood)}
.bar.soul>i{background:var(--soul)}
.bar.xp>i{background:var(--gold)}
.bar.poison>i{background:var(--poison)}
.bar.endu>i{background:#3d8ad8}   /* Endurance : bleu */
.bar.thick{height:12px}
.gold{color:var(--gold)}
.now{font-size:max(var(--pt),calc(.85rem * var(--tx,1)));color:var(--muted);min-width:180px}
.now b{color:var(--fg);font-weight:500}

/* Main grid */
.grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;align-items:start}
nav{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px;display:flex;flex-direction:column;gap:2px;position:sticky;top:12px}
nav h4{margin:10px 8px 4px;font-size:max(var(--pt),calc(.68rem * var(--tx,1)));letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:500}
nav h4:first-child{margin-top:4px}
.nv{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:4px;padding:6px 8px;text-align:left}
.nv:hover{background:var(--panel2)}
.nv.on{background:var(--panel2);box-shadow:inset 2px 0 0 var(--blood)}
.sig{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:calc(.8rem * var(--tx,1));border:1px solid var(--line2);color:var(--fg);background:#150f17}
.nv .lv{margin-left:auto;font-size:max(var(--pt),calc(.8rem * var(--tx,1)));color:var(--muted)}
.nv .dot{width:6px;height:6px;border-radius:50%;background:var(--blood);margin-left:6px;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.nv .dot{animation:none}}

main{min-width:0;display:flex;flex-direction:column;gap:12px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end}
.head h2{font-size:max(var(--pt),calc(1.9rem * var(--tx,1)))}
.heroface{width:112px;height:112px;object-fit:cover;flex:none;align-self:center;border:2px solid var(--line);border-radius:var(--r);background:var(--panel2);box-shadow:0 3px 8px #000a}
.head .meta{font-size:max(var(--pt),calc(.85rem * var(--tx,1)));color:var(--muted)}
.xpline{flex:1 1 240px;display:flex;flex-direction:column;gap:4px;font-size:max(var(--pt),calc(.8rem * var(--tx,1)));color:var(--muted)}
.lore{color:var(--muted);font-style:italic;margin:6px 0 0;max-width:65ch}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px}
.card.active{border-color:var(--bloodtx)}
.card.locked{opacity:.55}
.card h3{font-size:max(var(--pt),calc(1.1rem * var(--tx,1)))}
.kv{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:max(var(--pt),calc(.82rem * var(--tx,1)));color:var(--muted)}
.kv b{color:var(--fg);font-weight:500}
.io{font-size:max(var(--pt),calc(.82rem * var(--tx,1)));display:flex;flex-direction:column;gap:2px}
.io .miss{color:var(--bloodtx)}
.btn{background:#140f16;border:1px solid var(--line2);border-radius:4px;padding:6px 12px;font-size:max(var(--pt),calc(.88rem * var(--tx,1)))}
.btn:hover:not(:disabled){border-color:var(--fg)}
.btn.red{background:var(--blood-dim);border-color:var(--bloodtx)}
.btn.blue{background:var(--soul-dim);border-color:var(--soul)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:3px 8px;font-size:max(var(--pt),calc(.8rem * var(--tx,1)))}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tag{font-size:max(var(--pt),calc(.7rem * var(--tx,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* Combat */
.arena{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.fighter{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px}
.fighter h3{font-size:max(var(--pt),calc(1.25rem * var(--tx,1)))}
.pill{display:inline-block;font-size:max(var(--pt),calc(.72rem * var(--tx,1)));padding:1px 7px;border-radius:10px;border:1px solid var(--line2);color:var(--muted)}
.pill.weak{border-color:var(--gold);color:var(--gold)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden}
.seg button{background:none;border:0;padding:4px 10px;font-size:max(var(--pt),calc(.82rem * var(--tx,1)));border-right:1px solid var(--line2)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--blood-dim);color:var(--fg)}
.zones{display:flex;flex-direction:column;gap:10px}
.zone{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--panel2)}
.zone h3{font-size:max(var(--pt),calc(1.05rem * var(--tx,1)))}
.mons{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:8px}
.mon{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:#160f18;font-size:max(var(--pt),calc(.85rem * var(--tx,1)))}
.log{font-size:max(var(--pt),calc(1rem * var(--tx,1)));max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:2px;color:var(--muted)}
.log .lvup{color:var(--gold)}
.log .bad{color:var(--bloodtx)}
.log .good{color:var(--poison)}
select,textarea{background:#140f16;color:var(--fg);border:1px solid var(--line2);border-radius:4px;padding:4px 6px;font:inherit;font-size:max(var(--pt),calc(.85rem * var(--tx,1)))}
textarea{width:100%;min-height:80px;font-family:ui-monospace,monospace;font-size:max(var(--pt),calc(.75rem * var(--tx,1)))}

/* Bank */
.bank{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.slot{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:8px;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:0}
.slot.on{border-color:var(--gold)}
.slot .q{font-size:max(var(--pt),calc(1.1rem * var(--tx,1)))}
.slot .nm{font-size:max(var(--pt),calc(.82rem * var(--tx,1)));color:var(--muted);overflow-wrap:anywhere}
.t-Ressource{--tc:#8c7a68}.t-Graine{--tc:var(--poison)}.t-Matériau{--tc:#a58156}.t-Arme{--tc:var(--blood)}.t-Armure{--tc:var(--soul)}.t-Nourriture{--tc:#d08a4a}.t-Ossements{--tc:#d9cfbf}.t-Consommable{--tc:#9a7fd0}
.slot{border-left:3px solid var(--tc,var(--line))}
.t-Outil{--tc:var(--gold)}
.t-Gemme{--tc:#c25a6e}
.t-Appât{--tc:#c48a8a}
.t-Potion{--tc:#9a6ac0}
.seeds{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;margin-top:8px}
.seedc{display:flex;align-items:center;gap:8px;padding:6px 8px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:4px;font-size:max(var(--pt),calc(.82rem * var(--tx,1)));min-width:0}
.seedc b{font-weight:500;font-size:max(var(--pt),calc(.88rem * var(--tx,1)))}
.seedc.on{border-color:var(--poison);box-shadow:inset 3px 0 0 var(--poison)}
.seedc.locked{opacity:.45;cursor:not-allowed}
.seedc:hover:not(:disabled){border-color:var(--fg)}
.tierh{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:8px 0 -2px;font-family:var(--display);font-weight:400;font-size:max(var(--pt),calc(1.15rem * var(--tx,1)))}
.tierh .muted{font-family:var(--body);font-size:max(var(--pt),calc(.78rem * var(--tx,1)))}
.tierdot{width:12px;height:12px;border-radius:3px;border:1px solid;flex:none}
.ico{display:inline-block;flex:none;vertical-align:middle}
.miss{color:var(--bloodtx)}
.ah{display:inline-flex;align-items:center;gap:8px}
h3.ah{display:flex}
.ioi{display:flex;align-items:center;gap:6px}
.hicon{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:50%;background:#150f17}
.slot{flex-direction:row;align-items:center;gap:8px}
.sl{display:flex;flex-direction:column;min-width:0}
.doll{position:relative;height:250px;max-width:300px;margin:10px auto 18px}
.sil{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:120px;height:220px}
.eqslot{position:absolute;width:64px;height:64px;padding:0;display:grid;place-items:center;border:1px dashed var(--line2);border-radius:6px;background:#140f16}
.eqslot.full{border-style:solid}
.eqslot.on{border:1px solid var(--gold);box-shadow:0 0 0 2px rgba(205,166,80,.18)}
.eqslot:hover{border-color:var(--fg)}
.eqslot .plus{color:var(--faint);font-size:max(var(--pt),calc(1.4rem * var(--tx,1)));line-height:1}
.eqn{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:max(var(--pt),calc(.66rem * var(--tx,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.eqrow{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--panel2)}
.eqrow.on{border-color:var(--gold)}
.eqt{display:flex;flex-direction:column;min-width:0;flex:1;font-size:max(var(--pt),calc(.85rem * var(--tx,1)))}
.eqt b{font-weight:500}
.eqlist{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.toolline{margin-top:10px;font-size:max(var(--pt),calc(.88rem * var(--tx,1)));display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.toolline.miss{color:var(--bloodtx)}
.linkbtn{background:none;border:0;padding:0;color:var(--soul);text-decoration:underline;text-underline-offset:2px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 14px;font-family:var(--display);font-size:max(var(--pt),calc(1.05rem * var(--tx,1)));color:var(--muted);white-space:nowrap}
.tabs button:hover{color:var(--fg)}
.tabs button.on{color:var(--fg);border-bottom-color:var(--bloodtx)}
.tbl{width:100%;border-collapse:collapse;font-size:max(var(--pt),calc(.88rem * var(--tx,1)))}
.tbl td,.tbl th{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left}
.tbl th{font-weight:500;color:var(--muted);font-size:max(var(--pt),calc(.75rem * var(--tx,1)));letter-spacing:.08em;text-transform:uppercase}
.tblw{overflow-x:auto}
.big{font-family:var(--display);font-size:max(var(--pt),calc(3rem * var(--tx,1)));line-height:1}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}

/* Toasts & modal */
.toasts{position:fixed;right:calc(16px + env(safe-area-inset-right, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;gap:6px;z-index:20;pointer-events:none}
.toast{background:var(--panel2);border:1px solid var(--gold);color:var(--gold);padding:8px 14px;border-radius:4px;font-family:var(--display);font-size:max(var(--pt),calc(1rem * var(--tx,1)))}
.modal{position:fixed;inset:0;background:rgba(5,3,6,.75);display:grid;place-items:center;z-index:30;padding:16px}
.modal .panel{max-width:460px;width:100%}
.modal[hidden]{display:none}

@media (max-width:760px){
  .grid{grid-template-columns:minmax(0,1fr)}
  nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}
  nav h4{display:none}
  .nv{width:auto;padding:4px 8px;border:1px solid var(--line)}
  .nv .lv{margin-left:4px}
  .band h1{font-size:max(var(--pt),calc(1.3rem * var(--tx,1)));width:100%}
}

/* Écran de connexion */
[hidden]{display:none!important}
.authwrap{min-height:100%;display:grid;place-items:center;padding-block:24px}
.authcard{width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px}
.authtitle{font-size:max(var(--pt),calc(2.1rem * var(--tx,1)))}
.authcard form{display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:max(var(--pt),calc(.78rem * var(--tx,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input{background:#140f16;color:var(--fg);border:1px solid var(--line2);border-radius:4px;padding:9px 10px;font:inherit}
.field input:focus-visible{outline:2px solid var(--soul);outline-offset:1px}
.authlinks{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:max(var(--pt),calc(.88rem * var(--tx,1)))}
.notice{border:1px solid var(--line2);border-radius:4px;padding:10px 12px;font-size:max(var(--pt),calc(.9rem * var(--tx,1)));background:var(--panel2)}
.notice.bad{border-color:var(--bloodtx);color:#f0c8c2}
.notice.good{border-color:var(--poison)}
.notice a{color:var(--soul);word-break:break-all}
.offline{border:1px solid var(--blood);background:var(--blood-dim);border-radius:var(--r);padding:8px 12px;font-size:max(var(--pt),calc(.88rem * var(--tx,1)))}
.toast.bad{border-color:var(--bloodtx);color:#f0c8c2;font-family:var(--body);font-size:max(var(--pt),calc(.9rem * var(--tx,1)))}

/* Expédition */
.runwrap{display:flex;flex-direction:column;gap:10px;min-width:0}
.runtop{display:grid;grid-template-columns:minmax(150px,1.2fr) repeat(3,minmax(110px,1fr)) auto;gap:10px 16px;align-items:end;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.runzone{display:flex;flex-direction:column}.runzone b{font-family:var(--display);font-weight:400;font-size:max(var(--pt),calc(1.15rem * var(--tx,1)))}
.runprog{display:flex;flex-direction:column;gap:3px;min-width:0}
.runlabel{display:flex;justify-content:space-between;gap:6px;font-size:max(var(--pt),calc(.75rem * var(--tx,1)));color:var(--muted)}
.runbtns{display:flex;align-items:center;gap:10px}
.runstage{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0b080d}
.runstage canvas{display:block;width:100%;height:300px}
.runcards,.runend{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px;background:rgba(8,6,10,.72);backdrop-filter:blur(2px);overflow:auto}
.runcards[hidden],.runend[hidden]{display:none}
.runcardtitle{text-align:center}.runcardtitle h3{font-size:max(var(--pt),calc(1.4rem * var(--tx,1)))}
.runcardrow{display:grid;grid-template-columns:repeat(3,minmax(0,210px));gap:12px;width:100%;justify-content:center}
.runcard{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 12px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;min-height:220px;transition:transform .12s,border-color .12s}
.runcard:hover{transform:translateY(-4px);border-color:var(--fg)}
.runcard.spell{border-top:3px solid #9a6ac0}.runcard.buff{border-top:3px solid var(--gold)}.runcard.heal{border-top:3px solid var(--poison)}
.runcard b{font-family:var(--display);font-weight:400;font-size:max(var(--pt),calc(1.1rem * var(--tx,1)))}
.runcardtag{font-size:max(var(--pt),calc(.68rem * var(--tx,1)));letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.runcarddesc{font-size:max(var(--pt),calc(.84rem * var(--tx,1)));color:var(--fg);display:flex;flex-direction:column;gap:6px}
.runcardstat{font-size:max(var(--pt),calc(.78rem * var(--tx,1)));color:var(--muted)}
.runbottom{display:flex;flex-direction:column;gap:6px}
.runchips{display:flex;flex-wrap:wrap;gap:6px}
.runchip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 4px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;font-size:max(var(--pt),calc(.8rem * var(--tx,1)))}
.runchip.buff{border-color:#4a3e28}
.runchip b{color:var(--gold);font-weight:500}
.runendbox{max-width:560px;width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px}
.runendbox h3{font-size:max(var(--pt),calc(1.6rem * var(--tx,1)))}.runendbox.victory h3{color:var(--gold)}.runendbox.death h3{color:var(--bloodtx)}
.runendcols{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:max(var(--pt),calc(.88rem * var(--tx,1)))}
@media (max-width:720px){
  .runtop{grid-template-columns:1fr 1fr}.runbtns{grid-column:1/-1;justify-content:space-between}
  .runcardrow{grid-template-columns:1fr;max-width:340px}.runcard{min-height:0;flex-direction:row;flex-wrap:wrap;text-align:left;justify-content:flex-start}
  .runcarddesc{flex-basis:100%}.runendcols{grid-template-columns:1fr}
  .runcards,.runend{position:static;background:var(--panel);backdrop-filter:none}
  .runcard{padding:10px;gap:4px 8px}
}
.potinfo{display:flex;flex-direction:column;gap:3px;margin-top:4px;padding-top:6px;border-top:1px dashed var(--line);font-size:max(var(--pt),calc(.84rem * var(--tx,1)))}
/* V0.0.11 : éléments et Enchantement */
.eltag{display:inline-block;padding:0 6px;border:1px solid;border-radius:8px;font-size:max(var(--pt),calc(.75rem * var(--tx,1)));line-height:1.5;background:rgba(10,8,12,.5)}
.enchgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:6px}
.enchel{display:flex;gap:8px;align-items:center;padding:8px;border:1px solid;border-radius:8px;background:var(--panel2)}

/* Arène (V0.0.26) */
.runstage canvas{height:460px}
.runboss{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:min(420px,70%);display:flex;flex-direction:column;gap:3px;align-items:center;font-family:var(--display);text-shadow:0 1px 3px #000;pointer-events:none}
.runboss[hidden]{display:none}.runboss .bar{width:100%;height:8px}.runboss .bar>i{background:var(--blood)}
.metagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px}
.metacard{display:flex;flex-direction:column;gap:5px;padding:10px;background:var(--panel2);border:1px solid var(--line);border-radius:6px}
.metacard.full{border-color:#4a3e28}.metacard .btn{align-self:flex-start}
.zone.closed{opacity:.6}

.runauto{display:flex;align-items:center;gap:6px;font-size:max(var(--pt),calc(.85rem * var(--tx,1)));cursor:pointer;white-space:nowrap}
.runauto input{accent-color:#8a4fd0}
.enstat{width:100%;border-collapse:collapse;margin:6px 0;font-size:max(var(--pt),calc(.9rem * var(--tx,1)))}
.enstat th,.enstat td{padding:4px 6px;text-align:right;border-bottom:1px solid var(--line)}
.enstat th{font-weight:400;color:var(--muted);font-size:max(var(--pt),calc(.75rem * var(--tx,1)));text-transform:uppercase;letter-spacing:.06em}
.enstat th:first-child,.enstat td:first-child{text-align:left;color:var(--muted)}

/* ---------- Combat idle (V0.0.77) ---------- */
.heropick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}
.herocard{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px;background:var(--panel2);border:2px solid var(--line);border-radius:var(--r);color:var(--fg);cursor:pointer}
.herocard:hover{filter:brightness(1.15)}
.herocard img{width:100%;max-width:200px;height:260px;object-fit:contain}
.herocard b{font-family:var(--display);font-size:max(var(--pt),calc(1.4rem * var(--tx,1)))}
.fightpanel{display:flex;flex-direction:column;gap:10px}
.fscene{container-type:inline-size;display:flex;justify-content:space-around;align-items:flex-end;gap:10px;aspect-ratio:1000/300;min-height:170px;padding:0 4% 2.2%;border-radius:var(--r);border:1px solid var(--line);background-size:cover;background-position:center;overflow:hidden}
.fside{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;width:34%;max-width:260px;height:100%}
.fside .bar{width:100%}
.fhero,.fmon{height:min(22cqw,200px);max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 6px #000a)}
.fmon.dead{opacity:.25;filter:grayscale(1)}
.fbt{background:#000a;padding:1px 8px;border-radius:8px;font-size:max(var(--pt),calc(.8rem * var(--tx,1)));text-align:center}
.fkv{font-size:max(var(--pt),calc(.85rem * var(--tx,1)))}
.maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.mapcard{border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--panel2)}
.mapimg{height:120px;border-radius:var(--r);background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;padding:8px;box-shadow:inset 0 -60px 40px -20px #000c}
.mapimg b{font-family:var(--display);font-size:max(var(--pt),calc(1.25rem * var(--tx,1)));text-shadow:0 1px 3px #000}
.monpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.monbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--fg);cursor:pointer;font-size:max(var(--pt),calc(.82rem * var(--tx,1)))}
.monbtn:hover{border-color:var(--bloodtx)}.monbtn.on{border-color:var(--gold)}
.monbtn img{height:84px;object-fit:contain}
.enemies{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:10px}
.enimg{height:84px;object-fit:contain}
.spells{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.spcard{display:flex;flex-direction:column;gap:5px;padding:10px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r)}
.spcard .btn{align-self:flex-start;margin-top:auto}.spcard.locked{opacity:.55}.spcard.on{background:#1d1426}


/* ==================================================================
   V0.1.23 — Thème « Cathédrale de cendre » : ardoise, ivoire, pierre gravée, bleu de vitrail, braise
   Kit : public/assets/cendre (bannières, ornements, textures, icônes). Chargé en dernier : il redéfinit l'habillage sans toucher à la structure.
   ================================================================== */
:root{
  --ardoise:#1b2028; --ivoire:#eee4d6; --secondaire:#c1bfca; --pierre:#666c78; --bleu:#435e89; --braise:#c76e3d; --xp:#b9a5da;
  --bg:#1b2028; --panel:#161b23; --panel2:#1d232c; --inset:#12161d;
  --line:#666c78; --line2:#8a909c; --bone:#eee4d6; --fg:#eee4d6; --muted:#c1bfca; --faint:#a3a1b0;
  --blood:#a43f34; --bloodtx:#efa87f; --blood-dim:#3b1d19; --soul:#cdd9ff; --soul-dim:#232b3a; --poison:#a9c08f; --gold:#eee4d6;
  --titre:'UnifrakturCook','Old English Text MT',Georgia,serif; --fraktur:var(--titre);
  --display:Georgia,'Times New Roman',serif; --body:Georgia,'Times New Roman',serif;
  --r:6px;
  --cd:/assets/cendre;
}
body{background:var(--ardoise) url("/assets/cendre/textures/ardoise.webp") repeat;padding:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);font-size:max(var(--pt),calc(16px * var(--tx,1)));line-height:1.4}
::selection{background:var(--bleu);color:var(--ivoire)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:0}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid #cdd9ff;outline-offset:3px}

/* coquille de pierre */
.wrap{max-width:1700px;gap:0;border-inline:8px solid #4f5158;border-image:url("/assets/cendre/textures/pierre.png") 16 round;background:none}
.wrap>*{margin:0}
.wrap::after{content:"";display:block;flex:none;height:1.65rem;background:url("/assets/cendre/ornements/frise.webp") left top/auto 100% repeat-x}
.offline{margin:8px 12px}

/* bandeau d'état */
.band{position:relative;display:grid;grid-template-columns:minmax(max-content,1.6fr) 1fr 1fr auto minmax(170px,1fr);align-items:center;gap:.6rem 1.5rem;min-height:76px;padding:.65rem 3.4rem;
  background:none;border:0;border-bottom:5px ridge var(--pierre);border-radius:0}
.band::before,.band::after{content:"";position:absolute;top:0;left:0;width:3rem;height:100%;background:url("/assets/cendre/ornements/angle.webp") left top/contain no-repeat;opacity:.75;pointer-events:none}
.band::after{left:auto;right:0;transform:scaleX(-1)}
.band h1{margin:0;font-family:var(--titre);font-weight:700;font-size:max(var(--pt),calc(clamp(1.7rem,3.1vw,3.2rem) * var(--tx,1)));line-height:1.05;color:var(--ivoire)}
.band h1 small{font-family:var(--display);font-size:calc(.68rem * var(--tx,1));font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--secondaire);margin-bottom:2px}
.stat{min-width:0;gap:.25rem}
.stat label{font-family:var(--display);font-size:max(var(--pt),calc(1rem * var(--tx,1)));letter-spacing:0;text-transform:none;color:var(--ivoire);font-variant-numeric:tabular-nums}
.bar{height:.75rem;background:#20202d;border:1px solid var(--secondaire);border-radius:3px}
.bar.thick{height:.9rem}
.bar>i{background:var(--blood)}
.bar.endu>i{background:#4369b3}
.bar.xp>i{background:var(--xp)}
.bar.soul>i{background:var(--soul)}
.bar.poison>i{background:var(--poison)}
.gold{color:var(--ivoire)}
#goldIco .ico{width:2.65rem;height:2.65rem}
.stat .ah{gap:.45rem}
.band .stat:has(#goldIco){flex-direction:row;align-items:center;gap:.45rem}
.band .stat:has(#goldIco) label{display:block;line-height:1.1}
.now{color:var(--secondaire);font-style:italic}
.now b{color:var(--ivoire)}

/* corps : navigation en pierre à gauche, travail à droite */
.grid{display:grid;grid-template-columns:clamp(190px,18vw,280px) minmax(0,1fr);gap:0;align-items:stretch;background:none}
.grid>main{display:flex;flex-direction:column;gap:14px;padding:0 0 22px}
.grid>main>*:not(.banniere){margin-inline:1rem}
nav{position:relative;top:0;display:block;padding:clamp(2.7rem,5vw,4.8rem) 1.15rem 6.5rem;border:0;border-right:6px ridge var(--pierre);border-radius:0;
  background:url("/assets/cendre/ornements/fronton.webp") center top/100% auto no-repeat}
nav::before{content:"Table des matières";display:block;font-family:var(--display);font-weight:700;font-size:max(var(--pt),calc(clamp(1rem,1.52vw,1.45rem) * var(--tx,1)));text-align:center;color:var(--ivoire);padding-bottom:.55rem;margin-bottom:.2rem;border:0}
html[lang=en] nav::before{content:"Table of contents"}
nav::after{content:"";position:absolute;bottom:.4rem;left:.65rem;width:5rem;height:6rem;background:url("/assets/cendre/ornements/chandelles.webp") left bottom/contain no-repeat;pointer-events:none}
nav h4{margin:1.15rem 0 .25rem;border-bottom:1px solid var(--pierre);color:var(--secondaire);font-size:max(var(--pt),calc(.85rem * var(--tx,1)));font-weight:400;letter-spacing:.15em;text-transform:uppercase}
nav h4:first-child{margin-top:.4rem}
.nv{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;width:100%;padding:.2rem .65rem;font-family:var(--body);font-size:max(var(--pt),calc(1rem * var(--tx,1)));letter-spacing:0;background:none;border:1px solid transparent;border-radius:8px 14px 14px 8px;color:var(--ivoire);text-align:left}
.nv .sig{display:none}
.nv:hover{background:rgba(67,94,137,.28)}
.nv.on{border-color:#9bafd3;background:var(--bleu) url("/assets/cendre/textures/vitrail.png") repeat;color:var(--ivoire);box-shadow:none}
.nv .lv{flex:none;margin-left:auto;font-size:max(var(--pt),calc(.9rem * var(--tx,1)));color:var(--secondaire);font-variant-numeric:tabular-nums}
.nv .lv::before{display:none}
.nv.on .lv{color:var(--ivoire)}
.nv .dot{background:var(--braise);margin-left:.4rem;align-self:center}

/* bannière peinte et en-tête de compétence */
.banniere{display:block;width:100%;height:auto;margin:0}
.panel.competence{display:grid;grid-template-columns:clamp(5rem,10vw,10rem) minmax(0,1fr);align-items:center;gap:1.35rem;padding:.7rem .6rem;margin-inline:1rem;background:none;border:0;border-bottom:1px solid var(--pierre);border-radius:0}
.medaillon{display:grid;place-items:center;aspect-ratio:379/464;background:url("/assets/cendre/ornements/medaillon.webp") center/contain no-repeat}
.medaillon .ico{width:68%;height:68%}
.competence-ligne{display:grid;grid-template-columns:auto minmax(10rem,1fr);gap:1.5rem;align-items:center}
.competence h2{font-family:var(--titre);font-weight:700;font-size:max(var(--pt),calc(clamp(1.7rem,3.1vw,3.2rem) * var(--tx,1)));line-height:1.05;color:var(--ivoire)}
.competence .meta{font-size:max(var(--pt),calc(1rem * var(--tx,1)));font-style:italic;color:var(--secondaire)}
.competence .lore{margin:.3rem 0;color:var(--ivoire);max-width:none}
.competence .toolline{margin-top:.3rem}
.xpline{font-family:var(--body);font-size:max(var(--pt),calc(.95rem * var(--tx,1)));color:var(--ivoire);gap:.25rem;font-variant-numeric:tabular-nums}
.competence .xpline .bar{border-color:var(--secondaire)}

/* panneaux */
.panel{background:rgba(14,18,25,.72);border:3px ridge var(--pierre);border-radius:var(--r);padding:16px 18px}
.tag{font-family:var(--display);font-size:max(var(--pt),calc(.74rem * var(--tx,1)));letter-spacing:.18em;color:var(--secondaire)}
.head h2{font-family:var(--titre);font-weight:700;font-size:max(var(--pt),calc(2.4rem * var(--tx,1)));line-height:1.05;color:var(--ivoire)}
.head .meta{font-style:italic;color:var(--secondaire)}
.lore{color:var(--secondaire)}
.head+.lore::first-letter{font:inherit;float:none;padding:0;color:inherit}
.hicon{border:0;background:none}
.heroface{border:3px ridge var(--pierre);background:var(--inset);box-shadow:none}
.miss,.alerte,.toolline.miss,.io .miss{color:var(--bloodtx)}
.toolline{font-size:max(var(--pt),calc(.95rem * var(--tx,1)))}
.ico{filter:none}

/* cartes de ressource : fronton de pierre, spécimen, bouton braise */
.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;border-top:0;padding-top:.2rem}
.card{position:relative;isolation:isolate;min-width:0;gap:.35rem;padding:clamp(2.4rem,3.7vw,3.8rem) .8rem .8rem;background:rgba(12,16,22,.62);border:3px ridge var(--pierre);border-radius:6px;color:var(--ivoire)}
.card::before{content:"";position:absolute;inset:-6px 0 auto;height:clamp(3rem,5.3vw,5.3rem);background:url("/assets/cendre/ornements/fronton.webp") center top/100% 100% no-repeat;z-index:-1;pointer-events:none}
.card h3{text-align:center;font-family:var(--display);font-weight:700;font-size:max(var(--pt),calc(clamp(1rem,1.55vw,1.45rem) * var(--tx,1)));line-height:1.15;color:var(--ivoire)}
.card.active{border-color:#9bafd3;box-shadow:0 0 0 1px #4a6aa5,0 0 14px rgba(67,94,137,.55);background:rgba(20,28,42,.7);color:var(--ivoire);--fg:var(--ivoire);--muted:var(--secondaire);--line:var(--pierre);--line2:var(--pierre)}
.card.active h3{color:var(--ivoire)}
.card.active .bar{background:#20202d;border-color:var(--secondaire)}
.card.active .bar>i{background:var(--braise)}
.card.locked{opacity:1;background:rgba(12,16,22,.62);border:3px ridge var(--pierre);color:var(--secondaire)}
.card.locked h3{color:var(--secondaire)}
.card.plot{padding-top:clamp(3.4rem,5.4vw,5.4rem)}
.card.plot h3{text-align:left}
.card.locked .specimen .ico{opacity:.72;filter:saturate(.7)}
.specimen{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:end;gap:.25rem;height:clamp(4.5rem,7vw,7rem);margin-bottom:.2rem}
.specimen .ico{width:100%;height:100%;min-height:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
.niveau{align-self:end;margin-bottom:.25rem;padding:0 .35rem;border:1px solid var(--pierre);background:rgba(0,0,0,.28);font-size:max(var(--pt),calc(.9rem * var(--tx,1)));font-variant-numeric:tabular-nums;white-space:nowrap}
.kv{display:flex;flex-wrap:wrap;gap:.15rem .6rem;font-size:max(var(--pt),calc(.95rem * var(--tx,1)));color:var(--ivoire);font-variant-numeric:tabular-nums}
.kv b{color:var(--ivoire);font-weight:400}
.fail{margin:0;font-size:max(var(--pt),calc(.95rem * var(--tx,1)))}
.fail.muted{color:var(--secondaire)}
.io{font-size:max(var(--pt),calc(.95rem * var(--tx,1)));gap:.15rem}
.io>.tag{font-family:var(--body);font-size:max(var(--pt),calc(.95rem * var(--tx,1)));letter-spacing:0;text-transform:none;color:var(--bloodtx)}
.ioi{align-items:center;gap:.3rem}
.ioi .ico{width:1.4rem;height:1.4rem}
.pill{border:1px solid var(--pierre);border-radius:4px;color:var(--secondaire);font-size:max(var(--pt),calc(.75rem * var(--tx,1)))}
.row.actrow{margin-top:auto;padding-top:.4rem;flex-wrap:wrap}
.row.actrow .btn.action{flex:1 1 auto}
.row.actrow .repsel{flex:none}

/* boutons : pierre par défaut, braise pour les actions disponibles, bleu de vitrail pour le choix courant */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-height:2.3rem;padding:.25rem .8rem;font-family:var(--body);font-size:max(var(--pt),calc(.95rem * var(--tx,1)));letter-spacing:0;text-transform:none;color:var(--ivoire);
  background:#232a35;border:2px ridge #b4a18d;border-radius:7px}
.btn:hover:not(:disabled){background:#2d3643;color:var(--ivoire);border-color:#b4a18d;filter:brightness(1.15)}
.btn.red,.btn.action{background:#883d21 url("/assets/cendre/textures/braise.png") repeat;border:2px ridge #b4a18d;color:var(--ivoire)}
.btn.red:hover:not(:disabled),.btn.action:hover:not(:disabled){background:#883d21 url("/assets/cendre/textures/braise.png") repeat;border-color:#b4a18d;color:var(--ivoire);filter:brightness(1.25)}
.btn.blue{background:var(--bleu) url("/assets/cendre/textures/vitrail.png") repeat;border:2px ridge #9bafd3;color:var(--ivoire)}
.btn:disabled{opacity:1;color:#ded8d0;border-color:var(--pierre);background:#252631 url("/assets/cendre/textures/verrouille.png") repeat;cursor:default}
.btn.sm{min-height:1.9rem;padding:.1rem .6rem;font-size:max(var(--pt),calc(.85rem * var(--tx,1)))}
.btn .lock,.btn img.lock{width:1rem;height:1rem;flex:none}
.linkbtn{color:#cdd9ff}
.card.active .btn{background:#883d21 url("/assets/cendre/textures/braise.png") repeat;color:var(--ivoire);border-color:#b4a18d}
.card.active .btn:hover:not(:disabled){background:#883d21 url("/assets/cendre/textures/braise.png") repeat}
select,textarea,.field input,.field select{background:var(--inset);border:1px solid var(--pierre);border-radius:4px;color:var(--ivoire)}
select{min-height:2.3rem}
.field label{font-family:var(--display);letter-spacing:.14em;color:var(--secondaire)}

/* onglets, segments, tableaux */
.tabs{border-bottom:3px ridge var(--pierre);gap:.3rem}
.tabs button{font-family:var(--body);font-size:max(var(--pt),calc(1.02rem * var(--tx,1)));padding:.35rem 1rem;color:var(--secondaire);border:1px solid transparent;border-bottom:0;border-radius:8px 14px 0 0}
.tabs button:hover{color:var(--ivoire)}
.tabs button.on{background:var(--bleu) url("/assets/cendre/textures/vitrail.png") repeat;border-color:#9bafd3;color:var(--ivoire)}
.seg{border:2px ridge var(--pierre)}
.seg button{border-right-color:var(--pierre)}
.seg button.on{background:var(--bleu) url("/assets/cendre/textures/vitrail.png") repeat;color:var(--ivoire)}
.tbl th{font-family:var(--body);color:var(--secondaire)}
.tierh{font-family:var(--display);font-weight:700;font-size:max(var(--pt),calc(1.3rem * var(--tx,1)));color:var(--ivoire)}

/* combat, listes, banque : mêmes pierres, même ardoise */
.fighter,.zone,.mapcard,.metacard,.spcard,.herocard,.monbtn,.mon,.eqrow,.slot,.seedc,.runcard,.enchel,.runtop,.runendbox,.notice{background:var(--panel2);border:2px ridge var(--pierre);border-radius:6px}
.fighter,.zone,.mapcard,.herocard{border-width:3px}
.fighter h3,.zone h3,.mapimg b,.herocard b{font-family:var(--display);font-weight:700}
.fighter h3{font-size:max(var(--pt),calc(1.5rem * var(--tx,1)))}
.slot.on,.eqrow.on,.monbtn.on,.eqslot.on,.seedc.on{border-color:#9bafd3;box-shadow:0 0 10px rgba(67,94,137,.55)}
.seedc.locked,.monbtn.locked{opacity:.55}
.spcard.on{background:#1b2638;border-color:#9bafd3}
.eqslot,.hicon{background:var(--inset);border-color:var(--pierre)}
.eqslot{border-radius:8px}
.fscene{border:3px ridge var(--pierre)}
.mon{background:var(--inset)}
.log{font-size:max(var(--pt),calc(1rem * var(--tx,1)))}
.log .good{color:var(--poison)}
.histbox{border-top:5px ridge var(--pierre);padding-top:12px}

/* connexion : cadre de pierre sous un fronton */
.authwrap{background:none}
.authcard{position:relative;isolation:isolate;max-width:460px;padding:4.6rem 1.8rem 1.8rem;background:rgba(14,18,25,.86);border:3px ridge var(--pierre);border-radius:6px;outline:0}
.authcard::before{content:"";position:absolute;inset:-6px 0 auto;height:5.2rem;background:url("/assets/cendre/ornements/fronton.webp") center top/100% 100% no-repeat;z-index:-1;pointer-events:none}
.authtitle{font-family:var(--titre);font-weight:700;font-size:max(var(--pt),calc(2.5rem * var(--tx,1)));line-height:1.05;color:var(--ivoire);text-align:center}

@media (max-width:1100px){
  .band{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem 1rem;padding-inline:2.6rem}
  .band h1{grid-column:1/-1}
  .band .now{display:none}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding-top:3rem}
  .card::before{height:4.25rem}
}
@media (max-width:760px){
  .band::before,.band::after{display:none}
  .band{padding-inline:.8rem}
  .grid{grid-template-columns:minmax(0,1fr)}
  nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;padding:.6rem 1rem;border-right:0;border-bottom:3px ridge var(--pierre);background:none}
  nav::before,nav::after,nav h4{display:none}
  .nv{width:auto;border:1px solid var(--pierre);padding:.2rem .6rem}
  .nv .lv{margin-left:.35rem}
  .panel.competence{grid-template-columns:4.5rem minmax(0,1fr);gap:.8rem;margin-inline:.8rem}
  .competence-ligne{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .grid>main>*:not(.banniere){margin-inline:.8rem}
  .authcard{padding-top:4rem}
}
@media (max-width:540px){ .cards{grid-template-columns:minmax(0,1fr)} }

/* V0.0.121 : double authentification */
.qrbox{display:flex;justify-content:center;margin:6px 0}
.qrbox svg{border:2px solid var(--line2);max-width:100%;height:auto}
.keybox{display:block;padding:8px 10px;border:1px dashed var(--line2);letter-spacing:.12em;word-break:break-all;user-select:all}
.reccodes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.reccodes code{padding:6px 8px;border:1px dashed var(--line2);text-align:center;letter-spacing:.1em;user-select:all}

.authlang{margin:4px 0 0;text-align:center;font-size:max(var(--pt),calc(.85rem * var(--tx,1)))}

/* V0.0.127 : historique des actions sous la boîte de compétence */
.histbox{padding-top:12px;padding-bottom:12px}
.histbox .log.hist{font-size:max(var(--pt),calc(.92rem * var(--tx,1)));line-height:1.5;gap:2px;margin-top:6px;box-sizing:content-box;height:calc(4 * 1.5em + 3 * 2px);max-height:none;overflow-y:auto;overflow-x:hidden}
.histbox .log.hist>*{flex:none;height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.histbox .log.hist svg{vertical-align:-3px;margin-right:3px}

.repsel{font-size:max(var(--pt),calc(.85rem * var(--tx,1)))}
.row.actrow{justify-content:center;align-items:center}

.tsbox{margin:8px 0;min-height:0}
/* Chat (V0.0.150) : boîte en bas à gauche */
.chat{position:fixed;left:calc(12px + env(safe-area-inset-left, 0px));bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:15;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:calc(100vw - 24px)}
.chat[hidden]{display:none}
.chat-tog{background:var(--panel2);border:1px solid var(--line2);color:var(--fg);padding:7px 14px;border-radius:4px;font-family:var(--display);font-size:max(var(--pt),calc(1rem * var(--tx,1)));cursor:pointer}
.chat-tog .badge{background:var(--blood);color:#fff;border-radius:9px;padding:0 6px;font-size:calc(.78rem * var(--tx,1));margin-left:4px}
.chat-box{position:relative;width:360px;max-width:calc(100vw - 24px);height:340px;max-height:60vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:4px;box-shadow:0 4px 18px rgba(0,0,0,.6)}
.chat-box[hidden]{display:none}
.chat-tabs{display:flex;border-bottom:1px solid var(--line)}
.chat-tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:7px 4px;font-size:max(var(--pt),calc(.85rem * var(--tx,1)));cursor:pointer;position:relative}
.chat-tabs button.on{color:var(--fg);border-bottom-color:#3d8ad8}
.chat-tabs .dot{background:var(--blood);color:#fff;border-radius:8px;padding:0 5px;font-size:calc(.7rem * var(--tx,1));margin-left:4px}
.chat-body{flex:1;overflow-y:auto;padding:8px;font-size:max(var(--pt),calc(var(--cfs,.88rem) * var(--tx,1)));line-height:1.35;overflow-wrap:anywhere}
.cm{margin:0 0 4px}.cm-t{color:var(--faint);font-size:max(var(--pt),calc(.75rem * var(--tx,1)))}.cm.me .cm-w{color:#8ec0f0}.cm.adm .cm-w,.cm.adm .cm-x{color:var(--gold)}
.cm-empty{margin:6px 0}.cm-peers{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;align-items:center}.cm-new input{width:120px}
.cm-pseudo p{margin:0 0 8px}.cm-err{color:var(--bloodtx);font-size:max(var(--pt),calc(.82rem * var(--tx,1)));margin-top:4px}
.chat-form{border-top:1px solid var(--line);padding:6px 8px;display:flex;flex-wrap:wrap;gap:4px}
.chat-form input{flex:1;min-width:0;font-size:max(var(--pt),calc(var(--cfs,.88rem) * var(--tx,1)))}.chat-form[hidden]{display:none}.chat-form .cm-err{flex-basis:100%}
@media (max-width:700px){.chat-box{height:50vh}}

/* V0.0.157 : fenêtre du chat déplaçable et redimensionnable */
.chat-bar{display:flex;align-items:center;gap:4px;padding:3px 22px 3px 8px;border-bottom:1px solid var(--line);cursor:move;touch-action:none;user-select:none;-webkit-user-select:none}
.chat-ttl{flex:1;color:var(--muted);font-size:max(var(--pt),calc(.8rem * var(--tx,1)));letter-spacing:.06em;text-transform:uppercase}
.chat-bar button{background:none;border:1px solid var(--line2);color:var(--fg);border-radius:3px;padding:0 6px;font-size:max(var(--pt),calc(.78rem * var(--tx,1)));line-height:1.5;cursor:pointer}
.chat-bar button:hover{background:var(--panel2)}
.chat-grip{position:absolute;top:0;right:0;width:18px;height:18px;cursor:nesw-resize;touch-action:none;z-index:2;background:linear-gradient(225deg,var(--line2) 0 2px,transparent 2px 5px,var(--line2) 5px 7px,transparent 7px 10px,var(--line2) 10px 12px,transparent 12px)}

#maintBar{position:sticky;top:0;z-index:50;background:#7a3b00;color:#ffe3b8;text-align:center;padding:6px 10px;font-size:max(var(--pt),calc(.85rem * var(--tx,1)))}

/* V0.1.9 : la zone « action en cours » prend la place restante et garde une largeur stable (elle ne saute plus à la ligne selon le texte) */
.band .now{flex:1 1 220px;min-width:200px;overflow-wrap:anywhere}

/* V0.1.13 : maps et ennemis verrouillés, boss */
.mapcard.locked .mapimg{filter:grayscale(.85) brightness(.6)}
.monbtn.locked{opacity:.5;cursor:not-allowed;filter:grayscale(.8)}
.monbtn.locked:hover{border-color:var(--line)}
.lockpill{color:var(--bloodtx);border-color:var(--bloodtx)}

/* V0.1.22 : pied de page et pages d'information */
.sitefoot{max-width:1100px;margin:18px auto 8px;padding:12px 8px;border-top:1px solid var(--line);text-align:center;font-size:max(var(--pt),calc(.85rem * var(--tx,1)));color:var(--muted)}
.sitefoot a,.legal a{color:var(--poison);text-decoration:underline;text-underline-offset:2px}
.sitefoot a:hover,.legal a:hover{color:var(--soul)}
.legalwrap{max-width:780px;margin:0 auto;padding:8px 0 24px}
.legalhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.legalbrand{font-family:var(--fraktur);font-weight:700;font-size:max(var(--pt),calc(1.7rem * var(--tx,1)));color:#f6eedb;text-decoration:none}
.legal{padding:22px 26px}
.legal h1{font-family:var(--fraktur);font-weight:700;font-size:max(var(--pt),calc(2.2rem * var(--tx,1)));margin:0 0 4px;color:#f6eedb}
.legal h2{font-family:var(--display);font-weight:normal;font-size:max(var(--pt),calc(1.15rem * var(--tx,1)));letter-spacing:.5px;margin:22px 0 6px;color:var(--bone)}
.legal p,.legal li{line-height:1.55}
.legal ul{padding-left:20px}
.legal code{background:var(--soul-dim);padding:1px 5px}
.legal table{border-collapse:collapse;width:100%;margin:8px 0;font-size:max(var(--pt),calc(.92rem * var(--tx,1)))}
.legal th,.legal td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
.legal th{background:var(--soul-dim)}
.legal .muted{color:var(--muted);margin:0 0 6px}
.authwrap{min-height:calc(100dvh - 104px)}

/* V0.1.23 : habillage « Cathédrale de cendre » du chat, du pied de page et des pages d'information (après leurs règles de base) */
/* fenêtres, avis, notifications, chat */
.toast{background:var(--panel2);border:2px ridge #b4a18d;color:var(--ivoire);border-radius:6px}
.toast.bad{border-color:var(--bloodtx);color:#f3d2c0}
.modal{background:rgba(8,10,14,.82)}
.modal .panel{border:4px ridge var(--pierre);outline:0;background:#161b23}
.notice.bad{border-color:var(--bloodtx)}
.offline{background:var(--blood-dim);border:1px solid var(--blood)}
.chat-tog{background:var(--bleu) url("/assets/cendre/textures/vitrail.png") repeat;border:2px ridge #9bafd3;border-radius:7px}
.chat-box{background:#161b23;border:3px ridge var(--pierre);border-radius:6px}
.chat-tabs button.on{border-bottom-color:#9bafd3}
.chat-bar button{border-color:var(--pierre)}

/* pied de page et pages d'information */
.sitefoot{border-top:5px ridge var(--pierre);color:var(--secondaire);max-width:none;margin:0;padding:.7rem 1.2rem}
.sitefoot a,.legal a{color:#cdd9ff}
.legalbrand,.legal h1{font-family:var(--titre);font-weight:700;color:var(--ivoire)}
.legal{background:rgba(14,18,25,.8);border:3px ridge var(--pierre);border-radius:6px}
.legal h2{font-family:var(--display);font-weight:700;color:var(--ivoire)}
.legal th,.legal code{background:var(--soul-dim)}



/* ==================================================================
   V0.1.27 — Cathédrale de cendre sur tout le site, avec le kit de raccords (public/assets/cendre/raccords, découpes de la maquette cible)
   Remplace les passes V0.1.24 à V0.1.26. Géométrie (bureau) : rail extérieur --rail | menu --menu (dont le fût intérieur de 31 px) | contenu | rail.
   Pièces : angle-haut (coins du bandeau), traverse-haute (sous les compteurs), chapiteau/fût/socle extérieurs et intérieurs, ogive-menu,
   separateur-menu, ogive-selection (cartouche actif), chandelles-bas, cadre-carte (bordure en 9 zones : 81 12 23 12), cadre-panneau
   (dérivé de cadre-carte sans l'arc), cadres de boutons braise / verrou (9 18 9 18), textures des jauges, traverse-basse, angle-journal, frise-journal.
   ================================================================== */
:root{
  --ardoise:#21232b;--fond-hud:#1c1f26;--fond-carte:#1b1f25;--ivoire:#e7ddd0;--secondaire:#c4bdbe;--pierre:#66666e;--ombre-pierre:#363942;
  --bleu:#364a66;--braise:#924024;--alerte:#ed8867;--verrou:#2b2c30;--xp:#c4b1d8;--fond-xp:#2f3142;
  --fg:var(--ivoire);--bone:var(--ivoire);--muted:var(--secondaire);--bloodtx:var(--alerte);--panel:var(--fond-carte);--panel2:#23262e;--inset:#17191f;--line:var(--pierre);--line2:#858189;
  --rail:clamp(17px,1.7vw,26px);--menu:clamp(210px,18.4vw,282px);--bandh:76px;
  --R:/assets/cendre/raccords;
}
body{margin:0;padding:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);font-size:max(var(--pt),calc(16.5px * var(--tx,1)));color:var(--ivoire);
  background:linear-gradient(#16191f55,#16191f55),url("/assets/cendre/raccords/ardoise-cible.webp") repeat;background-color:var(--ardoise)}
.wrap{position:relative;max-width:1700px;margin:0 auto;gap:0;border:0;border-image:none;background:none;overflow:visible;overflow-x:clip}
.wrap>*{margin:0}
.wrap::after{display:none}
.haut{position:relative;display:flex;flex-direction:column;isolation:isolate}

/* ---------- montants extérieurs : chapiteau sous le bandeau, fût répété à sa largeur, socle sur la traverse basse ---------- */
.pilier{position:absolute;top:0;bottom:0;z-index:0;width:var(--rail);border:0;border-image:none;pointer-events:none;
  background:url("/assets/cendre/raccords/chapiteau-exterieur.webp") left calc(var(--bandh) - 4px)/auto 74px no-repeat,
    url("/assets/cendre/raccords/socle-exterieur.webp") left bottom/auto 67px no-repeat,
    url("/assets/cendre/raccords/fut-exterieur.webp") center top/100% auto repeat-y}
.pilier.g{left:0}.pilier.d{right:0;transform:scaleX(-1)}

/* ---------- bandeau : texture d'ardoise, traverse haute sous les compteurs, arcs aux coins ---------- */
.band{position:relative;z-index:3;display:grid;grid-template-columns:minmax(max-content,1.55fr) minmax(0,.85fr) minmax(0,.95fr) minmax(105px,.65fr) minmax(145px,.75fr);
  align-items:center;gap:0 1.2rem;box-sizing:border-box;height:auto;min-height:var(--bandh);margin:0;padding:.35rem calc(var(--rail) + 2rem) .65rem calc(var(--rail) + 4.2rem);border:0;border-radius:0;border-image:none;
  background:url("/assets/cendre/raccords/traverse-haute.webp") left bottom/auto 9px repeat-x,url("/assets/cendre/raccords/ardoise-hud.webp") left top repeat;background-color:var(--fond-hud)}
.band::before,.band::after{content:"";position:absolute;top:0;left:0;width:108px;height:77px;aspect-ratio:auto;opacity:1;z-index:0;transform:none;pointer-events:none;
  background:url("/assets/cendre/raccords/angle-haut.webp") left top/100% 100% no-repeat}
.band::after{left:auto;right:0;transform:scaleX(-1)}
.band>*{position:relative;z-index:1}
.band h1{margin:0;font-family:var(--titre);font-weight:700;font-size:max(var(--pt),calc(clamp(1.6rem,3vw,3rem) * var(--tx,1)));line-height:1;color:var(--ivoire);white-space:nowrap;text-shadow:0 2px 3px rgba(0,0,0,.6)}
.band h1 small{position:absolute;left:.1rem;bottom:100%;display:block;margin:0 0 -.1rem;font-family:var(--display);font-size:calc(.56rem * var(--tx,1));font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--secondaire);opacity:.75}
.band>.stat,.band>.now{align-self:center;padding-left:.85rem;border-left:1px solid #858189}
.band>.stat::before,.band>.now::before{display:none}
.band>.stat{display:flex;flex-direction:column;justify-content:center;gap:.25rem;min-width:0}
.stat label{font-family:var(--display);font-size:max(var(--pt),calc(clamp(.85rem,1.15vw,1.1rem) * var(--tx,1)));line-height:1.1;letter-spacing:0;text-transform:none;color:var(--ivoire);white-space:nowrap;font-variant-numeric:tabular-nums}
.band .stat:has(#goldIco){display:grid;grid-template-columns:auto auto;grid-template-areas:"i l" "i v";column-gap:.55rem;row-gap:0;align-items:center;justify-content:start}
.band .stat:has(#goldIco) .ah{display:contents}
.band #goldIco{grid-area:i;display:block}
.band .stat:has(#goldIco) label{grid-area:l;align-self:end;display:block}
.band #gold{grid-area:v;align-self:start;font-size:max(var(--pt),calc(clamp(1.1rem,1.6vw,1.6rem) * var(--tx,1)))!important;line-height:1.05;text-align:center;color:var(--ivoire)}
.band #goldIco .ico,.band .obole{width:2.6rem;height:2.6rem;object-fit:contain}
.now{color:var(--secondaire);font-style:italic;font-size:max(var(--pt),calc(clamp(.85rem,1.05vw,1.02rem) * var(--tx,1)))}
.now b{color:var(--ivoire)}

/* ---------- jauges : piste XP, remplissages texturés (vie, endurance) ---------- */
.bar{height:.8rem;border:1px solid var(--xp);border-radius:2px;background:var(--fond-xp) url("/assets/cendre/raccords/xp-cible.webp") left center/auto 100% repeat-x;box-shadow:inset 0 1px 2px rgba(0,0,0,.55)}
.bar>i{background:var(--braise) url("/assets/cendre/raccords/braise-cible.webp") left center/auto 100% repeat-x}
#hpB,.bar>i[data-hp]{background:#703739 url("/assets/cendre/raccords/vie-cible.webp") left center/auto 100% repeat-x}
#enB,.bar.endu>i{background:#4263cd url("/assets/cendre/raccords/endurance-cible.webp") left center/auto 100% repeat-x}
.bar.xp>i{background:var(--xp);background-image:linear-gradient(#d9cbe9,#a995c6)}
.bar.soul>i{background:var(--soul)}.bar.poison>i{background:var(--poison)}
.band .bar{height:.85rem;border-color:#a9a2ad}

/* ---------- corps : menu (avec le fût intérieur) | contenu ---------- */
.grid{position:relative;container-type:inline-size;display:grid;grid-template-columns:var(--menu) minmax(0,1fr);gap:0;align-items:stretch;padding-inline:var(--rail);background:none;z-index:1}
/* fût intérieur : chapiteau au bas de la bannière (ou sous le bandeau sans bannière), socle sur la traverse basse */
.grid::before{content:"";position:absolute;z-index:2;top:calc((100cqw - var(--menu))*321/1246);bottom:0;left:calc(var(--rail) + var(--menu) - 31px);width:31px;height:auto;border:0;border-image:none;pointer-events:none;
  background:url("/assets/cendre/raccords/chapiteau-interieur.webp") center top/auto 59px no-repeat,
    url("/assets/cendre/raccords/socle-interieur.webp") center bottom/auto 78px no-repeat,
    url("/assets/cendre/raccords/fut-interieur.webp") left top/31px auto repeat-y}
.grid:not(:has(>main>.banniere))::before{top:0}
/* chandelles au pied du montant gauche, posées sur la traverse basse */
.grid::after{content:"";position:absolute;z-index:2;left:0;bottom:0;width:127px;height:140px;background:url("/assets/cendre/raccords/chandelles-bas.webp") left bottom/contain no-repeat;pointer-events:none}
.grid>nav{grid-column:1;grid-row:1}
.grid>main{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:.7rem;min-width:0;padding:0 0 1.4rem}
.grid>main>*{margin-inline:.6rem}
.grid>main>.banniere{display:block;width:100%;max-width:none;height:auto;margin:0;clip-path:none;position:relative;z-index:1}
.grid>main>.panel:first-child{margin-top:.8rem}

/* ---------- menu : ogive, titre, séparateur sculpté, cartouche actif, groupes ---------- */
nav{position:relative;top:0;display:block;min-width:0;border:0;border-radius:0;padding:88px 40px 9.5rem 27px;
  background:url("/assets/cendre/raccords/ogive-menu.webp") left top/calc(100% - 24px) 94px no-repeat}
nav::before{content:"Table des matières";display:block;margin:0 0 .2rem;padding:0 0 17px;border:0;font-family:var(--display);font-weight:700;font-size:max(var(--pt),calc(clamp(1rem,1.35vw,1.28rem) * var(--tx,1)));
  white-space:nowrap;text-align:center;color:var(--ivoire);background:url("/assets/cendre/raccords/separateur-menu.webp") center bottom/100% auto no-repeat}
html[lang=en] nav::before{content:"Table of contents"}
nav::after{display:none}
nav h4{margin:.85rem 0 .15rem;padding:0 0 .1rem .1rem;border-bottom:1px solid #6b6b74;color:var(--secondaire);font-family:var(--display);font-size:max(var(--pt),calc(.82rem * var(--tx,1)));font-weight:400;letter-spacing:.2em;text-transform:uppercase}
.nv{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:.4rem;width:100%;min-height:1.75rem;box-sizing:border-box;margin:0;padding:.12rem .55rem .12rem .6rem;
  font-family:var(--body);font-size:max(var(--pt),calc(clamp(.92rem,1.08vw,1.03rem) * var(--tx,1)));background:none;border:0;border-image:none;border-radius:0;clip-path:none;box-shadow:none;color:var(--ivoire);text-align:left}
.nv .sig{display:none}
.nv:hover{background:rgba(54,74,102,.35)}
.nv .lv{flex:none;margin-left:auto;font-size:max(var(--pt),calc(.9rem * var(--tx,1)));color:var(--secondaire);font-variant-numeric:tabular-nums}
.nv .lv::before{display:none}
.nv .dot{background:var(--braise);margin-left:.4rem;align-self:center}
.nv.on{padding-left:1.05rem;color:var(--ivoire);text-shadow:0 1px 2px rgba(0,0,0,.6);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234a6188'/%3E%3Cstop offset='1' stop-color='%232c3c56'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,15 5,1 94,1 99.5,50 94,99 0,99' fill='url(%23g)' stroke='%23a9bbdc' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.nv.on::before{display:none}
.nv.on::after{content:"";position:absolute;z-index:1;left:-17px;top:-6px;width:28px;height:calc(100% + 12px);max-height:72px;background:url("/assets/cendre/raccords/ogive-selection.webp") left top/100% 100% no-repeat;pointer-events:none}
.nv.on .lv{color:var(--ivoire)}

/* ---------- bloc de compétence : médaillon | titre et niveau | jauge ; description et outil ---------- */
.banniere{display:block;width:100%;height:auto;margin:0}
.panel.competence{display:grid;grid-template-columns:clamp(5rem,7.7vw,7.9rem) minmax(0,1fr);align-items:center;gap:0 1.2rem;margin:-.25rem .6rem 0;padding:.3rem 1rem .5rem;background:none;border:0;border-image:none;border-bottom:1px solid #565b67;border-radius:0}
.medaillon{display:grid;place-items:center;width:100%;aspect-ratio:379/464;background:url("/assets/cendre/ornements/medaillon.webp") center/contain no-repeat;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
.medaillon .ico{width:62%;height:62%}
.competence .cbody{min-width:0}
.competence-ligne{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(10rem,1.15fr);gap:1.4rem;align-items:center}
.competence-ligne>div:first-child{padding-left:1.25rem;border-left:1px solid #7b8090}
.competence h2{margin:0;font-family:var(--display);font-weight:700;font-size:max(var(--pt),calc(clamp(1.7rem,3.15vw,3.05rem) * var(--tx,1)));line-height:1.02;color:var(--ivoire);text-shadow:0 2px 3px rgba(0,0,0,.55)}
.competence .meta{margin-left:.6rem;font-size:max(var(--pt),calc(clamp(.9rem,1.15vw,1.12rem) * var(--tx,1)));font-style:italic;color:var(--secondaire)}
.xpline{font-family:var(--body);color:var(--ivoire);gap:.3rem;font-variant-numeric:tabular-nums}
.competence .xpline .row{font-size:max(var(--pt),calc(clamp(.88rem,1.1vw,1.08rem) * var(--tx,1)))}
.competence .xpline .bar{height:.85rem}
.competence .lore{margin:.35rem 0 .1rem;font-style:italic;font-size:max(var(--pt),calc(clamp(.88rem,1.12vw,1.06rem) * var(--tx,1)));color:var(--ivoire);max-width:none}
.competence .toolline{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;margin:.15rem 0 0;font-size:max(var(--pt),calc(clamp(.85rem,1.08vw,1rem) * var(--tx,1)))}
.competence .toolline.miss .tag{display:none}
.competence .toolline .ico{width:1.5rem;height:1.5rem}
.miss,.alerte,.toolline.miss,.io .miss{color:var(--alerte)}

/* ---------- cadre réutilisable « carte » : cadre-carte en 9 zones (ressources, recettes, équipements) ---------- */
.cards{container-type:inline-size;--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:.7rem;padding-top:.1rem;border:0}
.card,.card.active,.card.locked,.card.plot,.cadre{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:.15rem;min-width:0;margin:0;
  padding:51px 1.1rem 20px;border:0;border-image:none;border-radius:0;box-shadow:none;filter:none;color:var(--ivoire);
  background:linear-gradient(#11131830,#11131830),url("/assets/cendre/raccords/ardoise-cible.webp") repeat;background-color:var(--fond-carte)}
.card::before,.cadre::before{content:"";position:absolute;inset:0;z-index:0;display:block;width:auto;height:auto;margin:0;aspect-ratio:auto;pointer-events:none;background:none;
  border-style:solid;border-width:81px 12px 23px 12px;border-image:url("/assets/cendre/raccords/cadre-carte.webp") 81 12 23 12/81px 12px 23px 12px stretch}
.card::after{display:none}
.card>*,.cadre>*{position:relative;z-index:1}
.card h3{display:flex;align-items:center;justify-content:center;min-height:1.25em;margin:0;font-family:var(--display);font-weight:700;font-size:max(var(--pt),calc(clamp(1rem,1.45vw,1.42rem) * var(--tx,1)));line-height:1.12;
  text-align:center;text-wrap:balance;color:var(--ivoire);text-shadow:0 2px 2px rgba(0,0,0,.7)}
.card.plot h3{justify-content:flex-start;text-align:left}
.card.avail{box-shadow:inset 0 0 0 2px #6f89af}
.card.active{box-shadow:inset 0 0 0 2px #9bb2da,0 0 14px rgba(67,94,137,.55)}
.card.locked{color:var(--secondaire)}
.card.locked h3{color:var(--ivoire)}
.card.locked .specimen .ico{opacity:.85;filter:saturate(.8) drop-shadow(0 4px 5px rgba(0,0,0,.6))}
.specimen{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:end;gap:.2rem;height:clamp(3.6rem,5.9vw,6rem);margin:0 0 .15rem}
.specimen .ico,.specimen .ico.art{width:100%;height:100%;min-height:0;filter:drop-shadow(0 4px 5px rgba(0,0,0,.6))}
.niveau{align-self:end;margin-bottom:.2rem;padding:0 .35rem;border:1px solid var(--pierre);background:rgba(0,0,0,.3);font-size:max(var(--pt),calc(.88rem * var(--tx,1)));white-space:nowrap;font-variant-numeric:tabular-nums}
.kv{display:flex;flex-wrap:wrap;gap:.1rem .7rem;font-size:max(var(--pt),calc(clamp(.82rem,1.02vw,.97rem) * var(--tx,1)));color:var(--ivoire);font-variant-numeric:tabular-nums;line-height:1.28}
.card .kv{flex-wrap:nowrap;justify-content:space-between;white-space:nowrap}
.kv b{color:var(--ivoire);font-weight:400}
.fail{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.1rem .4rem;margin:0;font-size:max(var(--pt),calc(clamp(.82rem,1.02vw,.97rem) * var(--tx,1)));line-height:1.28}
.fail.muted{color:var(--secondaire)}
.fail .pill{margin:0;padding:0 .3rem;font-size:max(var(--pt),calc(.72rem * var(--tx,1)));line-height:1.35}
.io{gap:.05rem;font-size:max(var(--pt),calc(clamp(.82rem,1.02vw,.97rem) * var(--tx,1)));line-height:1.28}
.io>.tag{font-family:var(--body);font-size:inherit;letter-spacing:0;text-transform:none;color:var(--alerte)}
.ioi{align-items:center;gap:.3rem}
.ioi .ico{width:1.35rem;height:1.35rem}
.io .muted,.card .potinfo{font-size:max(var(--pt),calc(.8rem * var(--tx,1)));line-height:1.25}
.pill{border:1px solid var(--pierre);border-radius:4px;color:var(--secondaire);font-size:max(var(--pt),calc(.75rem * var(--tx,1)))}
.row.actrow{margin-top:auto;padding-top:.35rem;flex-wrap:nowrap;gap:.4rem}
.row.actrow .btn.action{flex:1 1 auto;min-width:0}
.row.actrow .repsel{flex:0 1 5.6rem;min-width:4.2rem;max-width:5.6rem;min-height:2.5rem;padding-inline:.25rem}
.row.actrow:has(>.btn.action:disabled:only-child){margin:auto 0 0;padding-top:.35rem}
.card .btn.action:disabled{width:100%}
.cards>.tierh{grid-column:1/-1;margin:.35rem 0 -.2rem}

/* ---------- cadre réutilisable « panneau » : cadre-panneau en 9 zones (inventaire, listes, fenêtres, combat) ---------- */
.panel,.fighter,.zone,.mapcard,.herocard,.runcard,.runtop,.runendbox,.modal .panel,.chat-box{border:0;border-radius:0;border-style:solid;border-width:18px 10px;
  border-image:url("/assets/cendre/raccords/cadre-panneau.webp") 23 12 23 12/18px 10px stretch;
  background:linear-gradient(#11131840,#11131840),url("/assets/cendre/raccords/ardoise-cible.webp") repeat;background-color:var(--fond-carte);outline:0;box-shadow:none}
.panel{padding:4px 10px}
.panel.competence{border-image:none}
.tag{font-family:var(--display);font-size:max(var(--pt),calc(.74rem * var(--tx,1)));letter-spacing:.18em;color:var(--secondaire)}
.head h2{font-family:var(--display);font-weight:700;font-size:max(var(--pt),calc(clamp(1.6rem,2.4vw,2.3rem) * var(--tx,1)));line-height:1.05;color:var(--ivoire)}
.head .meta{font-style:italic;color:var(--secondaire)}
.lore{color:var(--secondaire)}
.heroface{border:3px ridge var(--pierre);background:var(--inset);box-shadow:none}
/* petites pièces (objets de la banque, équipement, graines, ennemis, sorts…) : cadre de pierre fin, sélection en vitrail */
.slot,.eqrow,.seedc,.monbtn,.spcard,.metacard,.enchel,.eqslot,.notice,.mon{border:0;border-radius:0;border-style:solid;border-width:6px 11px;
  border-image:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp") 9 18 9 18/6px 11px stretch;background:var(--fond-carte);box-shadow:none}
.slot{padding:6px 4px;box-shadow:inset 3px 0 0 var(--tc,transparent)}
.slot:hover,.eqrow:hover,.seedc:hover:not(:disabled),.monbtn:hover:not(:disabled){background:#262a33}
.slot.on,.eqrow.on,.seedc.on,.monbtn.on,.eqslot.on,.spcard.on,.mapcard.on{background:var(--bleu) url("/assets/cendre/textures/vitrail.png") repeat;box-shadow:0 0 10px rgba(67,94,137,.55)}
.seedc.locked,.monbtn.locked{opacity:.6}

/* ---------- boutons : braise (action disponible), verrou (désactivé), pierre (neutre) ; libellé réel, focus visible ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:2.3rem;padding:.2rem 20px;font-family:var(--body);font-size:max(var(--pt),calc(.95rem * var(--tx,1)));letter-spacing:0;text-transform:none;color:var(--ivoire);
  border:0;border-radius:0;border-style:solid;border-width:9px 18px;border-image:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp") 9 18 9 18/9px 18px stretch;
  background:#30333b padding-box;box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.6);padding:0 4px}
.btn:hover:not(:disabled){background:#3a3e48 padding-box;filter:none;color:var(--ivoire)}
.btn.red,.btn.action{border-image-source:url("/assets/cendre/raccords/cadre-bouton-braise.webp");background:var(--braise) url("/assets/cendre/raccords/braise-cible.webp") padding-box repeat;color:#fff3e6}
.btn.red:hover:not(:disabled),.btn.action:hover:not(:disabled){background:var(--braise) url("/assets/cendre/raccords/braise-cible.webp") padding-box repeat;filter:brightness(1.18)}
.btn.blue{border-image-source:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp");background:var(--bleu) url("/assets/cendre/textures/vitrail.png") padding-box repeat}
.btn:disabled,.btn.red:disabled,.btn.action:disabled{opacity:1;cursor:default;color:var(--ivoire);filter:none;border-image-source:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp");
  background:var(--verrou) url("/assets/cendre/raccords/verrou-cible.webp") padding-box repeat}
.card .btn.action,.card .btn{min-height:2.65rem;font-size:max(var(--pt),calc(clamp(.9rem,1.15vw,1.12rem) * var(--tx,1)))}
.btn.sm{min-height:1.7rem;border-width:6px 12px;border-image-width:6px 12px;font-size:max(var(--pt),calc(.85rem * var(--tx,1)))}
.btn .lock,.btn img.lock{width:1.05rem;height:1.05rem;flex:none}
.btn:focus-visible,.nv:focus-visible,.jhead:focus-visible,.slot:focus-visible{outline:2px solid #cdd9ff;outline-offset:3px}
.linkbtn{color:#cdd9ff}
.card.active .btn{border-image-source:url("/assets/cendre/raccords/cadre-bouton-braise.webp");background:var(--braise) url("/assets/cendre/raccords/braise-cible.webp") padding-box repeat}
select,textarea,.field input,.field select{background:var(--inset);border:1px solid var(--pierre);border-radius:3px;color:var(--ivoire)}

/* ---------- onglets, segments, tableaux ---------- */
.tabs{gap:.3rem;border:0;padding-bottom:9px;background:url("/assets/cendre/raccords/traverse-haute.webp") left bottom/auto 9px repeat-x}
.tabs button{font-family:var(--body);font-size:max(var(--pt),calc(1.02rem * var(--tx,1)));padding:.35rem 1rem;color:var(--secondaire);background:none;border:1px solid transparent;border-bottom:0;border-radius:8px 14px 0 0}
.tabs button:hover{color:var(--ivoire);background:rgba(54,74,102,.3)}
.tabs button.on{background:var(--bleu) url("/assets/cendre/textures/vitrail.png") repeat;border-color:#9bafd3;color:var(--ivoire)}
.grid>main>.tabs{margin-top:-.1rem}
.seg{border:1px solid var(--pierre)}
.seg button.on{background:var(--bleu) url("/assets/cendre/textures/vitrail.png") repeat;color:var(--ivoire)}
.tbl th{font-family:var(--body);color:var(--secondaire)}
.tierh{font-family:var(--display);font-weight:700;font-size:max(var(--pt),calc(1.3rem * var(--tx,1)));color:var(--ivoire)}

/* ---------- journal : traverse basse, angle, frise ; zone sombre pour le texte ; case réservée au bouton Chat ---------- */
.journal{position:sticky;bottom:0;z-index:6;min-height:69px;box-sizing:border-box;padding:24px calc(var(--rail) + 1rem) .45rem 0;border:0;border-image:none;
  background:url("/assets/cendre/raccords/angle-journal.webp") left top/auto 100% no-repeat,url("/assets/cendre/raccords/traverse-basse.webp") left top/auto 20px repeat-x,
    url("/assets/cendre/raccords/frise-journal.webp") 30rem bottom/auto 50px repeat-x;background-color:#14161b}
.journal.bare{background:url("/assets/cendre/raccords/angle-journal.webp") left top/auto 100% no-repeat,url("/assets/cendre/raccords/traverse-basse.webp") left top/auto 20px repeat-x,url("/assets/cendre/raccords/frise-journal.webp") 8rem bottom/auto 50px repeat-x;background-color:#14161b}
.journal[hidden]{display:none}
.journal::before{content:"";position:absolute;top:20px;bottom:6px;left:82px;width:min(30rem,55%);z-index:0;background:linear-gradient(to right,#191b22 85%,#191b2200);pointer-events:none}
.journal::after{display:none}
.journal>*{position:relative;z-index:1}
.jhead{display:flex;align-items:center;gap:1rem;width:100%;min-height:2.2rem;margin:0;padding:.15rem 0 .15rem 11.5rem;background:none;border:0;border-image:none;border-radius:0;color:var(--ivoire);font-family:var(--body);font-size:max(var(--pt),calc(.97rem * var(--tx,1)));text-align:left;cursor:pointer}
.jhead:hover{filter:none;background:none}
.jhead:hover .tag{text-decoration:underline}
.jhead .tag{flex:none;padding-right:1rem;border-right:1px solid #858189;font-family:var(--body);font-size:max(var(--pt),calc(1.12rem * var(--tx,1)));letter-spacing:0;text-transform:none;color:var(--xp)}
.jlast{flex:0 1 auto;max-width:min(19rem,calc(55% - 11rem));min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-style:italic}
.jlast>div{display:inline}
.jchev{flex:none;margin-left:auto;width:.6rem;height:.6rem;border-right:2px solid var(--secondaire);border-bottom:2px solid var(--secondaire);transform:rotate(-135deg) translate(-2px,-2px);transition:transform .15s}
.journal.open .jchev{transform:rotate(45deg)}
.journal.open .jlast{display:none}
.journal .log.hist{margin:0 0 .2rem 9rem;padding:.4rem .8rem;max-height:9.5rem;overflow:auto;gap:2px;font-size:max(var(--pt),calc(.92rem * var(--tx,1)));background:#191b22ee;border:1px solid #3c3f48}
.journal .log.hist>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* bouton Chat : dans la zone sombre du journal, à gauche du libellé (jamais sur le texte ni sur la sculpture) */
.chat{left:max(calc(88px + env(safe-area-inset-left,0px)),calc((100vw - 1700px)/2 + 88px));bottom:calc(9px + env(safe-area-inset-bottom,0px))}
.chat-tog{min-height:2rem;padding:.1rem .75rem;font-size:max(var(--pt),calc(.92rem * var(--tx,1)));border:0;border-style:solid;border-width:6px 12px;border-image:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp") 9 18 9 18/6px 12px stretch;border-radius:0;background:var(--bleu) url("/assets/cendre/textures/vitrail.png") padding-box repeat}
.chat-box{padding:0}
.chat-tabs button.on{border-bottom-color:#9bafd3}
.sitefoot{max-width:none;margin:0;padding:.55rem 1rem;border-top:0;background:rgba(0,0,0,.4)}
.modal{background:rgba(8,10,14,.82)}
.toast{background:var(--fond-carte);border:0;border-style:solid;border-width:6px 11px;border-image:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp") 9 18 9 18/6px 11px stretch;border-radius:0}
.toast.bad{color:#f3d2c0}

/* ---------- largeurs moyennes : rien n'est masqué ---------- */
@media (max-width:1280px){
  .cards{--cols:3}
  .band{grid-template-columns:max-content minmax(7rem,1fr) minmax(7rem,1fr) max-content;row-gap:.25rem}
  .band h1{grid-row:1/3}
  .band>.now{grid-column:2/-1;grid-row:2;border-left:0;padding-left:0}
}
@media (max-width:1100px){
  .band{padding-inline:calc(var(--rail) + 1rem);grid-template-columns:repeat(3,minmax(0,1fr))}
  .band::before,.band::after{display:none}
  .band h1{grid-column:1/-1;grid-row:auto;margin-top:.6rem}
  .band>.stat:first-of-type{border-left:0;padding-left:0}
  .band>.now{grid-column:1/-1;grid-row:auto}
  .competence-ligne{grid-template-columns:minmax(0,1fr)}
  .competence-ligne>div:first-child{border-left:0;padding-left:0}
}
@media (max-width:1020px){.cards{--cols:2}}
/* ---------- mobile : menu replié en pastilles, sans montants ---------- */
@media (max-width:760px){
  .pilier,.grid::before,.grid::after{display:none}
  .grid{padding-inline:0;grid-template-columns:minmax(0,1fr);container-type:normal}
  .grid>nav,.grid>main{grid-column:1;grid-row:auto}
  .band{padding:.5rem .8rem .8rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .band h1{font-size:max(var(--pt),calc(2rem * var(--tx,1)))}
  .band>.stat,.band>.now{border-left:0;padding-left:0}
  nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;padding:.6rem .8rem;background:none;border-bottom:1px solid var(--pierre)}
  nav::before,nav h4{display:none}
  .nv{width:auto;padding:.15rem .6rem;border:1px solid var(--pierre);border-radius:8px 14px 14px 8px}
  .nv.on{border-color:#9bafd3;padding-left:.6rem;background:var(--bleu) url("/assets/cendre/textures/vitrail.png") repeat}
  .nv.on::after{display:none}
  .grid>main>*{margin-inline:.5rem}
  .grid>main>.banniere{margin:0}
  .panel.competence{grid-template-columns:4.5rem minmax(0,1fr);padding-inline:.3rem}
  .cards{--cols:2}
  .journal{padding-right:.8rem;background:url("/assets/cendre/raccords/traverse-basse.webp") left top/auto 20px repeat-x;background-color:#14161b}
  .journal.bare{background:url("/assets/cendre/raccords/traverse-basse.webp") left top/auto 20px repeat-x;background-color:#14161b}
  .journal::before{display:none}
  .jhead{padding-left:6.4rem}
  .jlast{max-width:none;flex:1}
  .journal .log.hist{margin-left:.5rem}
  .chat{left:calc(10px + env(safe-area-inset-left,0px))}
}
@media (max-width:520px){
  .cards{--cols:1;grid-template-columns:minmax(0,380px);justify-content:center}
}
/* cadres de boutons : déclarés en entier sur chaque état (les règles V0.1.23 plus spécifiques posaient encore une bordure « ridge ») */
.btn,.btn.red,.btn.action,.btn.blue,.btn:disabled,.card.active .btn,.chat-tog{border:0 solid transparent;border-width:9px 18px;border-radius:0;
  border-image:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp") 9 18 9 18/9px 18px stretch}
.btn.red,.btn.action,.card.active .btn{border-image-source:url("/assets/cendre/raccords/cadre-bouton-braise.webp")}
.btn:disabled,.btn.red:disabled,.btn.action:disabled{border-image-source:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp")}
.btn.sm{border-width:6px 12px;border-image-width:6px 12px}
.chat-tog{border-width:6px 12px;border-image-width:6px 12px}
.jhead{padding-left:12.6rem}
.repsel,select.repsel{border:0 solid transparent;border-width:6px 10px;border-radius:0;border-image:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp") 9 18 9 18/6px 10px stretch;background-color:#30333b;color:var(--ivoire)}
/* journal à 945 px sur un écran de 1024 ; chandelles collées au pied du menu, au-dessus du journal, posées sur la traverse en fin de page */
:root{--jh:79px}
.journal{min-height:var(--jh);padding-top:28px;padding-bottom:.7rem}
.journal::before{top:22px}
.grid::after{display:none}
@media (min-width:761px){
  nav{display:flex;flex-direction:column;padding-bottom:0}
  nav>*{flex:none}
  nav::after{content:"";display:block;position:sticky;bottom:var(--jh);flex:none;margin:auto 0 0 calc(-1*var(--rail) - 27px);width:127px;height:140px;padding-top:1rem;box-sizing:content-box;
    background:url("/assets/cendre/raccords/chandelles-bas.webp") left bottom/127px 140px no-repeat;pointer-events:none;z-index:2}
}
@media (min-width:761px){nav::after{z-index:0}nav>.nv,nav>h4{position:relative;z-index:1}}
/* V0.1.28 : le fût intérieur prolonge la colonnette peinte au bord gauche de la bannière (comme sur la maquette) : il est posé au début
   du contenu, le menu va jusqu'à lui (plus de bande vide), et le contenu sous la bannière commence après lui.
   Chandelles : version sans la colonne peinte (chandelles-seules.webp), posées contre le fût du montant gauche, pour garder une seule largeur de colonne. */
:root{--menu:clamp(200px,16.6vw,256px);--fi:34px}
@media (min-width:761px){
  .grid::before{left:calc(var(--rail) + var(--menu));width:var(--fi);background-size:100% auto,100% auto,100% auto;background-position:center top,center bottom,left top}
  .grid>main>*:not(.banniere){margin-left:calc(var(--fi) + .7rem);margin-right:.6rem}
  .grid>main>.panel.competence{margin-left:calc(var(--fi) + .4rem)}
  nav{padding-right:12px;background-size:100% 94px;background-position:left top}
  nav::after{margin-left:-27px;width:98px;height:140px;background:url("/assets/cendre/raccords/chandelles-seules.webp") left bottom/98px 140px no-repeat}
}
/* V0.1.29 : le fût intérieur est calé sur la colonnette peinte de la bannière, à toutes les largeurs :
   centre à 23/1246 de la largeur de la bannière, largeurs du kit relevées sur la maquette (bannière de 1210 px : fût 31, chapiteau 44, socle 55).
   --bw = largeur de la bannière = largeur du contenu (unités du conteneur .grid). Chapiteau, fût et socle sont centrés sur le même axe. */
@media (min-width:761px){
  .grid{--bw:calc(100cqw - var(--menu));--fx:calc(var(--bw)*23/1246);--fw:calc(var(--bw)*55/1210)}
  .grid::before{left:calc(var(--rail) + var(--menu) + var(--fx) - var(--fw)/2);width:var(--fw);
    background:url("/assets/cendre/raccords/chapiteau-interieur.webp") center top/80% auto no-repeat,
      url("/assets/cendre/raccords/socle-interieur.webp") center bottom/100% auto no-repeat,
      url("/assets/cendre/raccords/fut-interieur.webp") center top/56.4% auto repeat-y}
  .grid>main>*:not(.banniere){margin-left:calc(var(--fx) + var(--bw)*31/2420 + .7rem)}
  .grid>main>.panel.competence{margin-left:calc(var(--fx) + var(--bw)*31/2420 + .4rem)}
}
/* V0.1.29 (suite) : sous la bannière, la colonne reprend exactement la colonnette peinte : fût découpé dans la bannière HD (même couleur, même dessin),
   chapiteau tiré du chapiteau peint de la bannière (rendu symétrique), socle détouré ; tout est centré sur l'axe du fût peint (45/2172 de la largeur). */
@media (min-width:761px){
  .grid{--fx:calc(var(--bw)*45/2172);--fw:calc(var(--bw)*80/2172)}
  .grid::before{left:calc(var(--rail) + var(--menu) + var(--fx) - var(--fw)/2);width:var(--fw);
    background:url("/assets/cendre/raccords/chapiteau-banniere.webp") center top/100% auto no-repeat,
      url("/assets/cendre/raccords/socle-banniere.webp") center bottom/72% auto no-repeat,
      url("/assets/cendre/raccords/fut-banniere.webp") center top/47.5% auto repeat-y}
  .grid>main>*:not(.banniere){margin-left:calc(var(--fx) + var(--fw)/2 + .6rem)}
  .grid>main>.panel.competence{margin-left:calc(var(--fx) + var(--fw)/2 + .3rem)}
}
/* V0.1.30 : mesures prises sur la bannière réellement affichée (cimetiere-maquette, 1246 px) et non sur la version HD, cadrée autrement :
   fût peint de x 9 à 30 → axe 19/1246, largeur 21/1246 ; chapiteau 48/1246 (fût = 43,75 % du chapiteau). */
@media (min-width:761px){
  .grid{--fx:calc(var(--bw)*19.5/1246);--fw:calc(var(--bw)*48/1246)}
  .grid::before{background-size:100% auto,72% auto,43.75% auto}
}
/* V0.1.31 : haut du menu repris de la maquette (raccords/cadre-menu.webp, découpé dans maquette-cible : montant gauche, grande ogive à quadrilobe
   dont la retombée droite rejoint la colonnette de la bannière). Posé du bord gauche de la page jusqu'au bord de la bannière, sous le bandeau. */
@media (min-width:761px){
  .grid{--mf:calc(var(--rail) + var(--menu))}
  .grid::after{content:"";display:block;position:absolute;z-index:1;left:0;top:0;width:var(--mf);height:calc(var(--mf)*146/278);bottom:auto;
    background:url("/assets/cendre/raccords/cadre-menu.webp") left top/100% 100% no-repeat;pointer-events:none}
  nav{background:none;padding-top:calc(var(--mf)*84/278)}
  nav>*,nav::before{position:relative;z-index:2}
  nav::before{padding-bottom:16px;margin-bottom:.3rem}
}
/* V0.1.32 : tout le menu est habillé avec la maquette : haut (cadre-menu) puis corps répété (menu-fut : montant gauche fin + panneau),
   même teinte de bout en bout, du bord gauche de la page jusqu'à la bannière. Le montant gauche du cadre remplace le fût du kit sur cette hauteur. */
@media (min-width:761px){
  .grid::after{height:auto;bottom:0;
    background:url("/assets/cendre/raccords/cadre-menu.webp") left top/100% auto no-repeat,
      url("/assets/cendre/raccords/menu-fut.webp") left top/100% auto repeat-y}
}
@media (min-width:761px){nav>*,nav>.nv,nav>h4,nav::before{position:relative;z-index:3}nav::after{z-index:3}}

/* ==================================================================
   V0.1.33 — Ardoise unie et recalage sur la maquette (image cible de l'utilisateur, 1536 × 1024)
   1. Fond : une seule ardoise unie #1C2027 pour le menu, la zone principale, les cartes et les panneaux, sur tout le site (Admin et pages
      d'information comprises, par les variables). Plus aucune texture de fond sur ces surfaces. Les pièces de pierre qui portaient un
      rectangle d'ancien fond sont détourées (tools/detoure.py) : cadre-menu et menu-fut (recoupés dans la maquette à fond uni),
      chapiteau-exterieur, cadre-carte, cadre-panneau. Illustrations, ornements, boutons, bandeau du haut et journal ne changent pas.
   2. Texte : EB Garamond (Google Fonts, repli Georgia) ; font-size-adjust garde la même hauteur d'œil que Georgia, donc les tailles
      ci-dessous valent pour les deux polices. Tailles relevées sur la maquette.
   ================================================================== */
:root{--ardoise:#1C2027;--fond-carte:#1C2027;--panel:#1C2027;--bg:#1C2027;
  --display:'EB Garamond',Georgia,'Times New Roman',serif;--body:'EB Garamond',Georgia,'Times New Roman',serif}
body{background:#1C2027;font-size-adjust:.481}
.band h1,.authtitle,.legalbrand,.legal h1{font-size-adjust:none}
.card,.card.active,.card.locked,.card.plot,.cadre,.panel,.fighter,.zone,.mapcard,.herocard,.runcard,.runtop,.runendbox,.modal .panel,.chat-box,.legal,.toast{background:#1C2027}
.panel.competence{background:none}
.grid,.grid>nav,.grid>main{background:none}

/* bandeau : titre plus grand, sans la mention de version (déplacée au pied de page), compteurs à la taille de la maquette */
.band h1{font-size:max(var(--pt),calc(clamp(1.6rem,3.2vw,3.2rem) * var(--tx,1)))}
.stat label{font-size:max(var(--pt),calc(clamp(.9rem,1.25vw,1.2rem) * var(--tx,1)))}
.band #gold{font-size:max(var(--pt),calc(clamp(1.2rem,1.95vw,1.9rem) * var(--tx,1)))!important}
.now{font-size:max(var(--pt),calc(clamp(.9rem,1.2vw,1.15rem) * var(--tx,1)))}
.sitefoot .ver{color:var(--secondaire)}

/* menu : titre, groupes et entrées aux tailles de la maquette (titre à y 182, entrées tous les 29 px, texte à x 70) */
@media (min-width:761px){
  nav{padding-top:calc(var(--mf)*90/278)}
  nav::before{font-weight:500;font-size:max(var(--pt),calc(clamp(1.05rem,1.6vw,1.54rem) * var(--tx,1)))}
  nav h4{margin:.8rem 0 .25rem;font-size:max(var(--pt),calc(clamp(.76rem,.98vw,.94rem) * var(--tx,1)));letter-spacing:.24em}
  .nv{min-height:1.8rem;padding-left:1rem;font-size:max(var(--pt),calc(clamp(.98rem,1.24vw,1.19rem) * var(--tx,1)))}
  .nv.on{padding-left:1.45rem}
  .nv .lv{font-size:max(var(--pt),calc(clamp(.92rem,1.1vw,1.06rem) * var(--tx,1)));color:var(--ivoire)}
}
/* chandelles : collées au-dessus du journal, mais jamais plus haut que la fin du menu (top = bas de « Prière », mesuré : 818 px à 1536, 745 px à 1376,
   712 px sous 1280) : sur un écran court elles passent derrière le journal au lieu de recouvrir « Prière ». */
@media (min-width:761px){nav::after{top:clamp(720px,45.6vw + 121px,823px);padding-top:0;width:86px;height:123px;background-size:86px 123px}}

/* bloc de compétence : titre, « Niveau n », « x / y XP » aligné à droite au-dessus de la jauge, description, outil requis */
.competence h2{font-weight:600;font-size:max(var(--pt),calc(clamp(1.8rem,3.55vw,3.4rem) * var(--tx,1)))}
.competence .meta{margin:.1rem 0 0 .65rem;font-size:max(var(--pt),calc(clamp(.95rem,1.4vw,1.34rem) * var(--tx,1)))}
.competence .meta b{font-weight:400}
.xpline .xpnum{justify-content:flex-end;padding-right:.3rem}
.competence .xpline .row{font-size:max(var(--pt),calc(clamp(.95rem,1.4vw,1.34rem) * var(--tx,1)))}
.competence .lore{font-size:max(var(--pt),calc(clamp(.92rem,1.27vw,1.22rem) * var(--tx,1)))}
.competence .toolline{font-size:max(var(--pt),calc(clamp(.9rem,1.2vw,1.15rem) * var(--tx,1)))}
.toolline .req{color:var(--alerte)}
.toolline .hint{margin-left:.9rem;color:var(--ivoire)}
.toolline .hint .linkbtn{color:inherit;text-decoration:none}
.toolline .hint .linkbtn:hover{text-decoration:underline}

/* cartes : titre, chiffres et bouton aux tailles de la maquette */
.card h3{font-weight:600;font-size:max(var(--pt),calc(clamp(1.05rem,1.68vw,1.6rem) * var(--tx,1)))}
.niveau{font-size:max(var(--pt),calc(clamp(.86rem,1.05vw,1rem) * var(--tx,1)))}
.kv,.fail,.io{font-size:max(var(--pt),calc(clamp(.86rem,1.14vw,1.09rem) * var(--tx,1)))}
.io>.tag{font-weight:700;letter-spacing:.04em}
.io .muted,.card .potinfo{font-size:max(var(--pt),calc(clamp(.78rem,.95vw,.9rem) * var(--tx,1)))}
.card .btn.action,.card .btn{font-size:max(var(--pt),calc(clamp(.95rem,1.32vw,1.27rem) * var(--tx,1)))}
.card .btn.action:disabled{font-size:max(var(--pt),calc(clamp(.9rem,1.16vw,1.11rem) * var(--tx,1)))}
.jhead .tag{font-size:max(var(--pt),calc(clamp(1.1rem,1.4vw,1.34rem) * var(--tx,1)))}
.jhead{font-size:max(var(--pt),calc(clamp(.95rem,1.14vw,1.09rem) * var(--tx,1)))}
/* V0.1.33 (suite) : pas du menu de 29 px à 1536 (proportionnel à la largeur), cartes resserrées pour tenir au-dessus du journal,
   liseré bleu de la carte disponible posé le long du cadre (sous le fronton) et non plus en rectangle autour de la carte. */
:root{--pas:clamp(1.5rem,1.89vw,1.8125rem)}
@media (min-width:761px){
  .nv{min-height:var(--pas);padding-block:0;line-height:1.15}
  nav h4{margin:calc(var(--pas)*.42) 0 calc(var(--pas)*.2)}
}
.card,.card.active,.card.locked,.card.plot{padding-top:47px;padding-bottom:17px}
.specimen{height:clamp(3.3rem,5.2vw,5rem)}
.kv,.fail,.io{line-height:1.3}
.ioi{font-size:max(var(--pt),calc(clamp(.84rem,1.05vw,1rem) * var(--tx,1)))}
.io .muted,.card .potinfo{line-height:1.2}
.card .btn.action:disabled{font-size:max(var(--pt),calc(clamp(.84rem,1.05vw,1rem) * var(--tx,1)));line-height:1.1}
.card.avail,.card.active{box-shadow:none}
.card.avail::after,.card.active::after{content:"";display:block;position:absolute;z-index:0;inset:62px 4px 5px 4px;border:2px solid #6f89af;border-top:0;border-radius:0 0 3px 3px;pointer-events:none;
  -webkit-mask:linear-gradient(#0000,#000 40px);mask:linear-gradient(#0000,#000 40px)}
.card.active::after{border-color:#9bb2da;box-shadow:0 0 12px rgba(67,94,137,.5)}
@media (min-width:761px){nav{gap:0}}
.card .btn.action:disabled{font-size:max(var(--pt),calc(clamp(.8rem,1vw,.96rem) * var(--tx,1)))}
/* V0.1.33 (fin) : rouge de la maquette pour « Produit » et « Hache requise. », liseré bleu de la maquette, jauge d'XP plus large (57 % de la ligne) */
:root{--alerte:#ee6f4a}
.card.avail::after{border-color:#8999c9}
@media (min-width:1101px){.competence-ligne{grid-template-columns:minmax(max-content,.72fr) minmax(10rem,1fr)}}
.competence .xpline .bar{height:.9rem;border-color:#e9e3f0;background:#292a3e;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
/* écran de connexion : le texte commence sous le fronton (il passait dessous) */
.authcard{padding:5.2rem 1.6rem 1.4rem}

/* ==================================================================
   V0.1.34 — Décor refait avec des pièces découpées dans la maquette à fond uni (tools/pieces-maquette.py). Bureau seulement.
   - Montant gauche : cadre-menu (haut, jusqu'au bas de son chapiteau) + fut-gauche (tuile en miroir, sans couture) + socle-gauche. Plus de chandelles en bas à gauche.
   - Colonne sous la bannière et montant droit (en miroir) : colonne-chapiteau, colonne-fut, colonne-socle (68 px de large, axe au centre).
   - Boutons : cadres recoupés (bordure 11 22 11 22), plus aucun rectangle d'ancien fond ; bouton neutre ou verrouillé = contour seul, intérieur transparent.
   - Journal : une seule image pour toute la bande (journal-maquette), étirée à la largeur, plus de motif répété ; bouton Chat comme les autres boutons.
   Géométrie à 1536 : rail 34 px, menu 248 px (rail + menu = 282 → bannière), colonne centrée à 20 px du bord gauche de la bannière.
   ================================================================== */
:root{--rail:clamp(22px,2.2vw,34px);--menu:clamp(196px,16.1vw,248px);--mf:calc(var(--rail) + var(--menu));--jh:86px}
@media (min-width:761px){
  .pilier.g{background:none}
  .grid{--mf:calc(var(--rail) + var(--menu));--fx:calc(var(--bw)*20/1209);--fw:calc(var(--bw)*68/1209)}
  .grid::after{background:url("/assets/cendre/raccords/cadre-menu.webp") left top/100% auto no-repeat,
      url("/assets/cendre/raccords/socle-gauche.webp") left bottom/calc(var(--mf)*40/278) auto no-repeat,
      url("/assets/cendre/raccords/fut-gauche.webp") left top/calc(var(--mf)*40/278) auto repeat-y}
  nav{padding-left:22px;padding-bottom:1.5rem}
  nav::after{display:none}
  .nv{padding-left:.75rem}
  .nv.on{padding-left:1.2rem}
  .grid::before{left:calc(var(--rail) + var(--menu) + var(--fx) - var(--fw)/2);width:var(--fw);top:calc((100cqw - var(--menu))*321/1246 - 3px);
    background:url("/assets/cendre/raccords/colonne-chapiteau.webp") center top/100% auto no-repeat,
      url("/assets/cendre/raccords/colonne-socle.webp") center bottom/100% auto no-repeat,
      url("/assets/cendre/raccords/colonne-fut.webp") center top/100% auto repeat-y}
  .grid:not(:has(>main>.banniere))::before{top:0}
  .grid>main>*:not(.banniere){margin-left:calc(var(--fx) + var(--fw)*.3 + 5px);margin-right:.9rem}
  .grid>main>.panel.competence{margin-left:calc(var(--fx) + var(--fw)*.3 + 5px)}
  .pilier.d{width:calc(var(--rail)*2);right:calc(var(--rail)*-.5);
    background:url("/assets/cendre/raccords/colonne-chapiteau.webp") center calc(var(--bandh) - 2px)/100% auto no-repeat,
      url("/assets/cendre/raccords/colonne-socle.webp") center bottom/100% auto no-repeat,
      url("/assets/cendre/raccords/colonne-fut.webp") center top/100% auto repeat-y}
}
/* boutons : cadres recoupés dans la maquette ; neutre et verrouillé sans fond */
.btn,.btn.red,.btn.action,.btn.blue,.btn:disabled,.card.active .btn,.chat-tog{border-width:11px 22px;border-image:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp") 11 22 11 22/11px 22px stretch;background:none;padding:0 2px}
.btn:hover:not(:disabled){background:rgba(255,255,255,.07) padding-box}
.btn.red,.btn.action,.card.active .btn{border-image-source:url("/assets/cendre/raccords/cadre-bouton-braise.webp");background:var(--braise) url("/assets/cendre/raccords/braise-cible.webp") padding-box repeat}
.btn.red:hover:not(:disabled),.btn.action:hover:not(:disabled){background:var(--braise) url("/assets/cendre/raccords/braise-cible.webp") padding-box repeat;filter:brightness(1.18)}
.btn.blue{background:var(--bleu) url("/assets/cendre/textures/vitrail.png") padding-box repeat}
.btn:disabled,.btn.red:disabled,.btn.action:disabled{border-image-source:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp");background:none;filter:none}
.btn.sm,.chat-tog{border-width:7px 14px;border-image-width:7px 14px}
.chat-tog{background:none}
.chat-tog:hover{background:rgba(255,255,255,.07) padding-box}
.repsel,select.repsel{border-width:7px 12px;border-image:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp") 11 22 11 22/7px 12px stretch;background-color:transparent}
select option{background:#1C2027;color:var(--ivoire)}
.slot,.eqrow,.seedc,.monbtn,.spcard,.metacard,.enchel,.eqslot,.notice,.mon,.toast{border-image:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp") 11 22 11 22/6px 11px stretch;background-color:transparent}
.toast{background-color:#1C2027;background-clip:padding-box}
.slot:hover,.eqrow:hover,.seedc:hover:not(:disabled),.monbtn:hover:not(:disabled){background:rgba(255,255,255,.06) padding-box}
.slot.on,.eqrow.on,.seedc.on,.monbtn.on,.eqslot.on,.spcard.on,.mapcard.on{background-clip:padding-box;box-shadow:none}
/* onglets : filet simple (plus de moulure répétée) */
.tabs{background:none;border-bottom:1px solid #565b67;padding-bottom:0}
/* journal : la bande du bas de la maquette, d'une seule pièce */
.journal,.journal.bare{min-height:var(--jh);padding:22px calc(var(--rail) + 1rem) 0 0;background:#0f1215 url("/assets/cendre/raccords/journal-maquette.webp") left top/100% 86px no-repeat}
.journal::before{display:none}
.jhead{min-height:40px;padding:0 0 0 14.4rem}
.journal .log.hist{margin:.5rem 0 .6rem 7.5rem}
@media (min-width:761px){.chat{left:max(calc(120px + env(safe-area-inset-left,0px)),calc((100vw - 1700px)/2 + 120px));bottom:calc(27px + env(safe-area-inset-bottom,0px))}}
/* petite ogive du cartouche actif : taille réelle de la maquette (39 × 92), elle descend sous la ligne comme sur la maquette */
@media (min-width:761px){.nv.on::after{left:-27px;top:-9px;width:39px;height:92px;max-height:none;background-size:100% 100%}}
@media (min-width:761px){.nv.on::after{height:62px;background-size:100% 92px;background-position:left top;-webkit-mask:linear-gradient(#000 55%,#0000);mask:linear-gradient(#000 55%,#0000)}}
/* bas de page (bureau) : le journal reste collé au bas de l'écran même sur une page courte (les colonnes descendent jusqu'à sa corniche) ;
   les liens du pied de page sont dans la bande du journal (sous la ligne de texte), plus de bandeau séparé sous le jeu ; le bouton Chat reste aligné. */
#game.wrap:not([hidden]){display:flex;flex-direction:column;min-height:100vh}
.haut{flex:1 0 auto}
.haut>.grid{flex:1 0 auto}
.bas{position:sticky;bottom:0;z-index:6}
.bas>.journal{position:relative;bottom:auto}
.piedjeu{position:absolute;left:0;right:0;bottom:1px;height:17px;margin:0;padding:0;border:0;background:none;font-size:max(var(--pt),calc(.7rem * var(--tx,1)));line-height:17px;text-align:center;color:var(--secondaire);opacity:.8}
.piedjeu a{color:var(--secondaire)}
.journal.open{padding-bottom:20px}
#game:not([hidden])~#sitefoot{display:none}
.piedjeu{z-index:7}
.card .btn{border-width:11px 16px;border-image-width:11px 16px}

/* ==================================================================
   V0.1.36 — Textes plus petits sur la version bureau (demande de l'utilisateur, 9 novembre 2026).
   Toutes les tailles de texte de ce fichier sont multipliées par --tx (calc(... * var(--tx,1))) ;
   les styles en ligne de public/app.js aussi. --tx = 1 sur mobile (inchangé), 0,88 sur bureau.
   Pour régler la taille de tout le texte d'un coup, changer seulement cette valeur.
   ================================================================== */
@media (min-width:761px){:root{--tx:.88}}

/* V0.1.37 — Titre du site (« Royaume de la Mort ») en UnifrakturMaguntia (Google Fonts, une seule graisse : 400), à la demande de l'utilisateur.
   Seulement le nom du site : bandeau du jeu (.band h1), écran de connexion (.authtitle), en-tête des pages d'information (.legalbrand).
   Les autres titres gardent leur police. */
.band h1,.authtitle,.legalbrand{font-family:'UnifrakturMaguntia','UnifrakturCook','Old English Text MT',Georgia,serif;font-weight:400;font-synthesis:none;letter-spacing:.01em}

/* ==================================================================
   V0.1.40 — Page de connexion « Cathédrale de cendre » (kit cathedrale-de-cendre-connexion, 9 novembre 2026).
   Images : /assets/connexion/*.webp (découpes de la maquette). Structure dans index.html : #auth.cnx =
   .cnx-band (titre + version à gauche, langues à droite) + .cnx-entree (portail 55 % | .cnx-panneau > .cnx-cadre) + .cnx-pied (liens légaux).
   Le formulaire (#authBody), les messages (#authNotice) et les liens restent ceux de app.js : seuls les styles changent.
   --tx vaut 1 ici : les tailles sont celles de la maquette (1536 × 1024).
   ================================================================== */
.cnx{--tx:1;--cx:/assets/connexion;--cnx-champ:#15181e;--cnx-ivoire:#f1e6dc;--cnx-lien:#d0e0fc;--cnx-filet:#a5a4a7;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:#1C2027;color:var(--cnx-ivoire);
  font-family:var(--body);font-size:max(var(--pt),calc(clamp(1rem,1.45vw,1.4rem) * var(--tx,1)));line-height:1.35}
.cnx *{box-sizing:border-box}
.cnx h1,.cnx h2,.cnx p{margin:0}
.cnx a,.cnx .linkbtn{color:var(--cnx-lien);text-decoration:underline;text-underline-offset:.16em;font:inherit;cursor:pointer}
.cnx a:focus-visible,.cnx input:focus-visible,.cnx button:focus-visible{outline:2px solid #aac5f4;outline-offset:3px}
.cnx-band{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;min-height:102px;padding:.2rem clamp(1.5rem,6vw,6.4rem) 1rem;
  background:url("/assets/connexion/coin-bandeau-gauche.webp") left bottom/auto 102px no-repeat,
    url("/assets/connexion/coin-bandeau-droit.webp") right bottom/auto 102px no-repeat,
    url("/assets/connexion/couronnement-bandeau.webp") center bottom 12px/auto 90px no-repeat,
    url("/assets/connexion/traverse-bandeau.webp") left bottom/auto 19px repeat-x,
    #1C2027 url("/assets/connexion/pierre-bandeau.webp") repeat}
.cnx-id .authtitle{font-size:max(var(--pt),calc(clamp(1.7rem,3.25vw,3rem) * var(--tx,1)));line-height:1.05;color:var(--cnx-ivoire);text-align:left;text-shadow:0 2px 3px rgba(0,0,0,.6)}
.cnx-id p{color:#d2c8bc;line-height:1.25}
.cnx nav{all:unset}
.cnx nav::before,.cnx nav::after{content:none;display:none}
.cnx nav.cnx-lang{display:block;padding-top:.9rem;white-space:nowrap}
.cnx-lang .linkbtn{color:var(--cnx-ivoire);text-decoration:none;background:none;border:0;padding:0}
.cnx-lang .linkbtn[aria-current]{text-decoration:underline}
.cnx-lang .linkbtn:hover{text-decoration:underline}
.cnx-entree{display:grid;grid-template-columns:55.34% minmax(0,1fr);align-items:stretch;flex:1;gap:0;background:url("/assets/connexion/dalle-panneau.webp") left bottom/auto 24px repeat-x}
.cnx-portail{width:100%;height:auto;display:block;align-self:center}
.cnx-panneau{display:grid;align-items:center;padding:8px clamp(56px,5.2vw,82px) 36px clamp(18px,2vw,33px);
  background:url("/assets/connexion/pilier-droit-chapiteau.webp") right top no-repeat,
    url("/assets/connexion/pilier-droit-socle.webp") right bottom no-repeat,
    url("/assets/connexion/pilier-droit-fut.webp") right top repeat-y}
.cnx-cadre{position:relative;isolation:isolate;padding:clamp(76px,6.5vw,100px) clamp(22px,3vw,46px) clamp(2rem,4vw,3.9rem)}
.cnx-cadre::before{content:"";position:absolute;inset:0;z-index:-1;border:0 solid transparent;pointer-events:none;
  border-image:url("/assets/connexion/cadre-connexion.webp") 105 16 27 16/105px 16px 27px 16px stretch}
.cnx-cadre h2{font-family:var(--display);font-weight:600;font-size:max(var(--pt),calc(clamp(1.85rem,3.3vw,3.15rem) * var(--tx,1)));text-align:center;line-height:1.15;margin-bottom:.7rem;color:var(--cnx-ivoire);letter-spacing:0}
.cnx-cadre .lore{font-style:italic;color:var(--cnx-ivoire);max-width:none;margin:0 0 1.15rem}
.cnx .notice{--coupe:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);--bord:var(--cnx-filet);
  position:relative;isolation:isolate;clip-path:var(--coupe);background:var(--bord);border:0;border-image:none;border-radius:0;
  padding:.55rem .9rem;margin:0 0 1.05rem;font-size:inherit;color:var(--cnx-ivoire);overflow-wrap:anywhere}
.cnx .notice::before{content:"";position:absolute;inset:1px;z-index:-1;clip-path:var(--coupe);background:#1C2027}
.cnx .notice.bad{--bord:#ed8867;color:#ffd9cc}
.cnx .notice.good{--bord:#8fb98a}
.cnx .notice a{color:var(--cnx-lien);word-break:break-all}
.cnx-cadre form{display:grid;gap:0}
.cnx-cadre .field{display:grid;gap:0}
.cnx-cadre .field label{font-family:var(--body);font-size:max(var(--pt),calc(.76em * var(--tx,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--cnx-ivoire);margin-bottom:.3rem}
.cnx-cadre .field input{min-width:0;width:100%;min-height:clamp(44px,3.8vw,58px);font:inherit;color:inherit;background:var(--cnx-champ);border:1px solid var(--cnx-filet);border-radius:3px;margin-bottom:1.05rem;padding:0 .65rem}
.cnx-cadre .tsbox{margin:0}
.cnx-cadre .tsbox:not(:empty){margin:0 0 .6rem}
.cnx-cadre form .btn{display:block;width:100%;font:inherit;color:var(--cnx-ivoire);min-height:clamp(46px,3.6vw,55px);margin-top:clamp(.6rem,1.85vw,1.8rem);padding:.25rem 24px;
  border:0 solid transparent;border-radius:0;clip-path:none;box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.6);cursor:pointer;
  border-image:url("/assets/connexion/cadre-bouton-braise.webp") 10 22 10 22/10px 22px 10px 22px stretch;
  background:#924024 url("/assets/connexion/braise-connexion.webp") repeat}
.cnx-cadre form .btn:hover:not(:disabled){background:#924024 url("/assets/connexion/braise-connexion.webp") repeat;filter:brightness(1.12)}
.cnx-cadre form .btn:disabled{filter:grayscale(.6) brightness(.8);cursor:default}
.cnx .authlinks{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem clamp(.6rem,3vw,3.5rem);margin-top:.9rem;font-size:inherit}
.cnx .authlinks .linkbtn{background:none;border:0;padding:.15rem 0}
.cnx #authBody .muted{color:#d2c8bc;margin-bottom:.6rem}
.cnx-pied{min-height:112px;display:grid;place-items:center;padding:.8rem clamp(1rem,20vw,20rem) 2.1rem;
  background:url("/assets/connexion/frise-pied-gauche.webp") left center/auto 112px no-repeat,
    url("/assets/connexion/frise-pied-droite.webp") right center/auto 112px no-repeat,
    url("/assets/connexion/traverse-pied-haute.webp") left top/auto 17px repeat-x,
    url("/assets/connexion/traverse-pied-basse.webp") left bottom/auto 26px repeat-x}
.cnx .cnx-pied nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 0}
.cnx-pied a{color:var(--cnx-ivoire);white-space:nowrap}
.cnx-pied a+a::before{content:"·";display:inline-block;width:1.65em;text-align:center;text-decoration:none;color:var(--cnx-ivoire)}
@media (max-width:1120px){
  .cnx-band{background:url("/assets/connexion/traverse-bandeau.webp") left bottom/auto 19px repeat-x,#1C2027 url("/assets/connexion/pierre-bandeau.webp") repeat}
  .cnx-panneau{padding-right:24px;background:none}
  .cnx-entree{background:none}
  .cnx-cadre::before{border-image-width:75px 16px 27px 16px}
  .cnx-pied{padding-inline:1rem;background:url("/assets/connexion/traverse-pied-haute.webp") left top/auto 17px repeat-x,url("/assets/connexion/traverse-pied-basse.webp") left bottom/auto 26px repeat-x}
}
@media (max-width:780px){
  .cnx-entree{grid-template-columns:minmax(0,1fr);align-content:start}
  .cnx-portail{height:clamp(135px,33vw,230px);object-fit:cover;object-position:center 53%}
  .cnx-band{flex-wrap:wrap;min-height:80px;gap:.3rem;padding-inline:1rem}
  .cnx nav.cnx-lang{padding-top:.25rem;font-size:max(var(--pt),calc(.9em * var(--tx,1)))}
  .cnx-panneau{padding:10px 16px 20px}
  .cnx-cadre{width:min(100%,550px);margin:auto}
  .cnx-cadre .field input{font-size:max(var(--pt),calc(16px * var(--tx,1)))}
  .cnx .cnx-pied nav{gap:.3rem 1.1rem}
  .cnx-pied a+a::before{content:none}
}

/* V0.1.41 — Le bouton Chat reste en place ; la boîte ouverte est en position fixe (placée par applyUi() de chat.js) */
.chat-box{position:fixed;z-index:15}

/* V0.1.41 — Icônes peintes : proportions gardées et centrage dans leur case (obole, cadenas ; les SVG utilisent preserveAspectRatio « meet ») */
img.ico,img.lock,.obole{object-fit:contain;object-position:center}

/* V0.1.43 — Bouton braise (Ramasser, Commencer…) : cadre sans l'ombre noire du bas et sans le mot « Ramasser » cuit dans l'image ;
   le centre est tiré du cadre lui-même (mot-clé « fill ») pour que le fond du texte ait exactement la couleur du bouton. */
.btn.red,.btn.action,.card.active .btn{border-image-source:url("/assets/cendre/raccords/cadre-bouton-braise-fond.webp");border-image-slice:11 22 fill;background:none}
.btn.red:hover:not(:disabled),.btn.action:hover:not(:disabled){background:none;filter:brightness(1.18)}
.btn.red:disabled,.btn.action:disabled{border-image-source:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp");border-image-slice:11 22;background:none;filter:none}

/* V0.1.44 — Page Héros, tableau des compétences : texte un peu plus grand (+20 %) et icônes proportionnelles (1,7 × la taille du texte) */
.tbl-comp{font-size:max(var(--pt),calc(1.05rem * var(--tx,1)))}
.tbl-comp th{font-size:max(var(--pt),calc(.86rem * var(--tx,1)))}
.tbl-comp td,.tbl-comp th{padding:7px 8px}
.tbl-comp .ah{gap:.6em}
.tbl-comp .ah .ico{width:1.7em;height:1.7em}

/* ===== V0.1.45 — Alegreya, police de texte commune (titre du site resté gothique) ===== */
:root{--pt:12.5px;
  --display:'Alegreya',Georgia,'Times New Roman',serif;--body:'Alegreya',Georgia,'Times New Roman',serif;
  --titre:'Alegreya',Georgia,'Times New Roman',serif;--fraktur:'Alegreya',Georgia,'Times New Roman',serif}
@media (max-width:760px){:root{--pt:13px}}
/* titre du site : gothique conservé */
.band h1,.authtitle,.legalbrand{font-family:'UnifrakturMaguntia','UnifrakturCook','Old English Text MT',Georgia,serif;font-weight:400}
/* titres de cartes, titres de page et boutons : semi-gras */
.card h3,.fighter h3,.zone h3,.mapimg b,.herocard b,.competence h2,.head h2,.legal h1,.cnx-cadre h2,
.btn,.btn *,button.btn,.chat-tog,.cnx-cadre form .btn{font-family:var(--body);font-weight:600;font-style:normal}
.competence h2,.head h2,.legal h1{letter-spacing:0;font-size-adjust:none}
/* descriptions d'ambiance en italique */
.lore,.ambiance,.muted.lore{font-style:italic}

/* ===== V0.1.46 — Journal : zone de texte élargie, dégradé sombre → transparent, ouverture sans casser la bande ===== */
.journal::before,.journal.bare::before{display:block;content:"";position:absolute;left:0;top:22px;bottom:19px;width:78%;z-index:0;pointer-events:none;
  background:linear-gradient(to right,#050608 0,#050608 52%,rgba(5,6,8,.72) 74%,rgba(5,6,8,0) 100%)}
.journal>*{position:relative;z-index:1}
.jhead{padding-left:min(14.4rem,22vw)}
.jlast{flex:1 1 auto;min-width:0;max-width:calc(100% - 3rem)}
.jlast>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat{z-index:16}
/* ouvert : le journal grandit vers le haut, la ligne « Chat · Journal » reste au même endroit au bas de la bande */
.journal.open{display:flex;flex-direction:column-reverse;min-height:var(--jh);padding:0 calc(var(--rail) + 1rem) 24px 0;
  background:#050608 url("/assets/cendre/raccords/journal-maquette.webp") left bottom/100% 86px no-repeat}
.journal.open::before{top:0}
.journal.open .jhead{flex:none;min-height:40px}
.journal.open .log.hist{margin:0 0 0 min(14.4rem,22vw);padding:1.7rem .4rem .1rem 0;max-height:12rem;background:none;border:0;gap:3px}
@media (max-width:760px){
  .journal,.journal.bare,.journal.open{background-color:#050608}
  .jhead{padding-left:6.6rem}
  .journal.open .log.hist{margin-left:6.6rem}
  .journal::before,.journal.bare::before{width:100%}
}
.journal.open{background:url("/assets/cendre/raccords/traverse-basse.webp") left top/auto 20px repeat-x,url("/assets/cendre/raccords/journal-maquette.webp") left bottom/100% 86px no-repeat,#050608}
.journal.open::before{top:20px}
@media (max-width:760px){.journal.open{background-color:#050608}.journal,.journal.bare{background-color:#050608}}

/* ===== V0.1.46b — Journal : une seule ligne (dernière action), non cliquable ===== */
.jhead{cursor:default;pointer-events:none;flex-wrap:nowrap}
.jhead .tag{text-decoration:none!important}
.jlast{display:block;flex:1 1 0;min-width:0;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jlast>div{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jlast>div>*{white-space:nowrap}
.jchev{display:none}

/* ===== V0.1.49 — Boutons : fond uni #1C2027 (celui des pages), sans texture ni ombre ; seuls la braise (action) et l'état sélectionné gardent leur couleur ===== */
.btn:not(.red):not(.action):not(.blue),.btn:disabled,.btn.sm:not(.blue),.chat-tog,select,select.repsel,.repsel{
  background-color:#1C2027;background-image:none;background-clip:padding-box;box-shadow:none;text-shadow:none}
.btn:not(.red):not(.action):not(.blue):hover:not(:disabled),.chat-tog:hover{background-color:#232830;filter:none}

/* ===== V0.1.52 — liste « Infini / Une fois / N fois » : assez large pour ne plus couper le texte (FR et EN) ===== */
.row.actrow .repsel,.row.actrow select.repsel{flex:0 0 auto;width:auto;min-width:6.2rem;max-width:none;padding-inline:.3rem;text-overflow:clip}
.row.actrow .btn{flex:1 1 0;min-width:0;white-space:nowrap}

/* ===== V0.1.56 — entrée active du menu : petite icône icone-menu-actif.svg dans la ligne, à la place de la grande ogive ===== */
@media (min-width:761px){
  .nv,.nv.on{gap:0;justify-content:flex-start;padding-left:.6rem}                /* même retrait pour toutes les entrées : les libellés ne bougent plus */
  .nv::before,.nv.on::before{content:"";display:block;flex:none;width:17px;height:17px;margin-right:8px;align-self:center;background:none}   /* place réservée, vide si inactive */
  .nv.on::before{background:url("/assets/cendre/ornements/icone-menu-actif.svg") center/17px 17px no-repeat}
  .nv.on::after{display:none}                            /* plus d'ogive qui déborde sous la ligne */
  .nv .lv{padding-left:.4rem}
}

/* ===== V0.1.57 — onglets en tête de page (Combat…) : plus cachés par la moulure du bandeau du haut ===== */
@media (min-width:761px){#main>.tabs:first-child{margin-top:16px}}

/* ===== V0.1.58 — Banque : légende des couleurs de type ===== */
.bank-leg{margin:0 0 10px}
.bank-leg p{margin:0 0 6px}
.bank-leg .legs{display:flex;flex-wrap:wrap;gap:6px 14px}
.bank-leg .leg{display:inline-flex;align-items:center;gap:6px;font-size:max(var(--pt),calc(.85rem * var(--tx,1)));color:var(--secondaire,var(--muted))}
.bank-leg .leg::before{content:"";width:3px;height:1.05em;background:var(--tc,var(--line))}

/* ===== V0.1.59 — fumée (shader WebGL, public/fumee.js) dans les boîtes des cristaux de l'Enchantement ===== */
.enchel{position:relative;isolation:isolate;overflow:hidden}
.enchel>canvas.fumee{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;image-rendering:auto}
.enchel>:not(canvas.fumee){position:relative;z-index:1}
.enchel b,.enchel .num,.enchel .muted{text-shadow:0 1px 3px rgba(0,0,0,.85)}

/* ===== V0.1.60 — Joaillerie : chaque anneau et amulette dans une boîte avec la fumée de son élément (public/fumee.js) ===== */
.specimen.jbox{position:relative;isolation:isolate;overflow:hidden;padding:.25rem .35rem;box-sizing:border-box;
  border-style:solid;border-width:6px 11px;border-image:url("/assets/cendre/raccords/cadre-bouton-verrou-net.webp") 11 22 11 22/6px 11px stretch;background:#1C2027}
.specimen.jbox>canvas.fumee{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.specimen.jbox>:not(canvas.fumee){position:relative;z-index:1}
.specimen.jbox .niveau{text-shadow:0 1px 3px rgba(0,0,0,.85)}
.specimen.jbox{height:clamp(4.4rem,6.6vw,6.6rem)}

/* V0.1.63 — illustrations encadrées des sorts */
.spcard .spart{display:block;width:100%;height:auto;margin:0 auto 2px;object-fit:contain}
/* V0.1.64 — fumée jaune-verte (shader WebGL de fumee.js) à l'intérieur du cadre des sorts, par-dessus l'image */
.spartbox{position:relative;width:100%}
.spartbox>.spart{margin:0}
.spartbox>canvas.fumee{position:absolute;left:17.4%;top:18.1%;width:65%;height:62.1%;opacity:.55;pointer-events:none}
/* V0.1.65 — les sorts verrouillés ne sont plus assombris : même aspect que les sorts déverrouillés (le bouton « Verrouillé » reste grisé) */
.spcard.locked{opacity:1;filter:none}
/* V0.1.69 — bouton « Arrêter » (carte d'activité active) : au survol, le fond reste transparent ; seul le cadre braise s'éclaircit */
.card.active .btn:hover:not(:disabled){background:none;filter:brightness(1.18)}

/* ===== V0.1.72 — logo du jeu sur la bannière peinte (Obolary / Oboluaire selon la langue) =====
   .banniere est un cadre (position:relative) : l'image peinte (.banimg) donne la hauteur, le logo (.banlogo) est centré par-dessus. */
.banniere{position:relative}
.banniere>.banimg{display:block;width:100%;height:auto;margin:0}
.banniere>.banlogo{position:absolute;left:50%;top:50%;width:40.8%;height:auto;transform:translate(-50%,-50%);pointer-events:none;
  filter:drop-shadow(0 .4vw .8vw rgba(0,0,0,.65))}
/* V0.1.75 : ombre plus forte tout autour du logo (halo sombre) pour qu'il ressorte de la bannière */
.banniere>.banlogo{filter:drop-shadow(0 0 .5vw rgba(0,0,0,.95)) drop-shadow(0 0 1.6vw rgba(0,0,0,.85)) drop-shadow(0 .6vw 1.2vw rgba(0,0,0,.7))}

/* ===== V0.1.74 — bandeau du haut sans le titre : Vie, Endurance, Oboles et l'état du héros occupent toute la largeur =====
   Le titre h1 reste dans la page pour les lecteurs d'écran, mais n'est plus affiché. */
.band h1{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.band{grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr) minmax(max-content,.7fr) minmax(0,1fr);column-gap:1.6rem}
.band>.stat:first-of-type{border-left:0;padding-left:0}
.band>.now{grid-column:auto;grid-row:auto}
@media (max-width:760px){
  .band{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .band>.now{grid-column:1/-1}
}

/* ===== V0.2.4 — tablette et mobile =====
   1. L'état du héros (« Le héros se repose » / action en cours) restait masqué sous 1100 px par une ancienne règle (.band .now{display:none}). */
.band>.now{display:block}
/* 2. Tablette (761–1099 px) : le bouton Chat chevauchait le mot « Journal » ; il se place juste à sa gauche. */
@media (min-width:761px) and (max-width:1099px){.chat{left:calc(74px + env(safe-area-inset-left,0px))}}
/* 3. Mobile : le pied de page (version + liens) était coupé à droite et passait sous le bouton Chat.
   Il passe sous la bande du journal, sur une ou deux lignes ; le bouton Chat reste à hauteur du mot « Journal ». */
@media (max-width:760px){
  .piedjeu{position:static;box-sizing:border-box;min-height:44px;height:auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:.3em;padding:.15rem .7rem calc(.3rem + env(safe-area-inset-bottom,0px));line-height:1.35;white-space:normal;background:#050608;opacity:1}
  .chat{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
/* 4. Mobile : les onglets (Combat, Héros, Sorts, Profil, Ennemis…) passent à la ligne au lieu de déborder à droite. */
@media (max-width:760px){.tabs{flex-wrap:wrap;overflow-x:visible}}
/* 5. Mobile : le tableau des effets de l'Enchantement (4 colonnes, la dernière était coupée) devient une fiche par élément. */
.tbl-ench .tlbl{display:none}
@media (max-width:760px){
  .tbl-ench thead{display:none}
  .tbl-ench,.tbl-ench tbody,.tbl-ench tr,.tbl-ench td{display:block;width:auto}
  .tbl-ench tr{padding:.55rem 0;border-bottom:1px solid #565b67}
  .tbl-ench td{border:0;padding:.15rem 0}
  .tbl-ench .tlbl{display:block;font-size:max(var(--pt),calc(.72rem * var(--tx,1)));letter-spacing:.12em;text-transform:uppercase;color:var(--secondaire)}
}
/* 6. Mobile : tableaux Attaque / Défense (Combat › Héros) — l'explication « D'où ça vient » passe sous chaque ligne au lieu d'une 5e colonne coupée. */
@media (max-width:760px){
  .tbl-sum,.tbl-sum thead,.tbl-sum tbody{display:block}
  .tbl-sum tr{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));column-gap:.35rem;border-bottom:1px solid var(--line)}
  .tbl-sum td,.tbl-sum th{border:0;padding:.3rem .1rem}
  .tbl-sum tr>:nth-child(5){grid-column:1/-1;padding-top:0;font-size:max(var(--pt),calc(.8rem * var(--tx,1)))}
  .tbl-sum thead tr>:nth-child(5){display:none}
  .tbl-sum tr>:only-child{grid-column:1/-1}
}
/* 7. Petits écrans : cellules de tableau plus serrées (tableau des compétences du Héros, Boutique). */
@media (max-width:760px){
  .tbl td,.tbl th{padding-left:4px;padding-right:4px}
  .tbl th{letter-spacing:.03em}
}
@media (max-width:400px){
  .panel.tblw{padding-left:.6rem;padding-right:.6rem}
  .tbl th{letter-spacing:0}
}
@media (max-width:400px){.tbl-comp td,.tbl-comp th,.tbl td,.tbl th{font-size:12.5px}}

/* ===== V0.2.5 — logo partout, en-tête des activités sur mobile =====
   Logo selon la langue de la page (html[lang] est posé par i18n.js dans le jeu et par legal.js sur les pages d'information). */
html[lang=en] .logo-fr,html:not([lang=en]) .logo-en{display:none}
/* Écran de connexion : le logo par-dessus l'image du portail, dans le ciel. */
.cnx-portailbox{position:relative;align-self:center;min-width:0}
.cnx-logo{position:absolute;left:50%;top:31%;width:62%;height:auto;transform:translate(-50%,-50%);pointer-events:none;
  filter:drop-shadow(0 0 .5vw rgba(0,0,0,.95)) drop-shadow(0 0 1.6vw rgba(0,0,0,.85)) drop-shadow(0 .6vw 1.2vw rgba(0,0,0,.7))}
@media (max-width:760px){.cnx-logo{top:50%;width:min(62%,320px)}}
/* Pages d'information : bannière peinte avec le logo au-dessus du texte. */
.legalban{margin:0 0 14px;border:3px ridge var(--pierre);border-bottom:0;overflow:hidden}
.legalban+.legal{margin-top:0}
/* Mobile : dans l'en-tête des activités, le médaillon monte à côté du titre ; la barre d'XP, la description et la ligne d'outil prennent toute la largeur. */
@media (max-width:760px){
  .panel.competence{align-items:start;row-gap:.45rem}
  .competence .cbody,.competence .competence-ligne{display:contents}
  .competence .medaillon{grid-column:1;grid-row:1;align-self:center}
  .competence-ligne>div:first-child{grid-column:2;grid-row:1;align-self:center;min-width:0}
  .competence .cbody>*:not(.competence-ligne),.competence-ligne>:not(:first-child){grid-column:1/-1}
  .competence .lore,.competence .toolline{margin-top:0}
}

/* ===== V0.2.7 — fumée bleu glacé (shader WebGL de fumee.js) derrière le logo =====
   Le canevas est plus large que le logo (il dépasse un peu sur les côtés) et monte jusqu'au haut de la bannière : la fumée sort par-dessus le logo. */
/* V0.2.11 : la fumée est découpée par un masque (les 3 ouvertures du décor) : elle passe par-dessus le cimetière mais derrière les colonnes, les arcs et les vitraux en pierre. */
.banniere>canvas.fumee-logo{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.8;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask:url(/assets/cendre/bannieres/cimetiere-ouvertures.png) 0 0/100% 100% no-repeat;mask:url(/assets/cendre/bannieres/cimetiere-ouvertures.png) 0 0/100% 100% no-repeat}
.cnx-portailbox>canvas.fumee-cnx{position:absolute;left:0;top:3%;width:100%;height:56%;opacity:.8;mix-blend-mode:screen;pointer-events:none;
  /* le masque couvre toute l'image du portail, le canevas n'en couvre que 56 % (de 3 % à 59 % de la hauteur) : le masque est agrandi et décalé en conséquence */
  -webkit-mask:url(/assets/connexion/portail-ouvertures.png) 0 6.82%/100% 178.57% no-repeat;mask:url(/assets/connexion/portail-ouvertures.png) 0 6.82%/100% 178.57% no-repeat}
@media (max-width:760px){.cnx-portailbox>canvas.fumee-cnx{top:22%;-webkit-mask-position:0 50%;mask-position:0 50%}}
/* Le halo sombre du logo est allégé pour laisser voir la fumée qui sort de derrière lui. */
.banniere>canvas.fumee-logo~.banlogo,.cnx-portailbox>canvas.fumee-cnx~.cnx-logo{filter:drop-shadow(0 0 .3vw rgba(0,0,0,.7)) drop-shadow(0 .5vw 1vw rgba(0,0,0,.5))}

/* V0.2.17 — seconde fumée, rouge, qui reste basse : elle monte du sol du décor jusqu'à peu près le bas du logo (réglages vitesse / taille / opacité / couleur dans l'Admin).
   Même masque que la fumée bleue : le canevas ne couvre que le bas (de 62 % à 100 % de la bannière), le masque est donc agrandi (100 / 38 = 263 %) et calé en bas. */
.banniere>canvas.fumee-rouge{top:62%;height:38%;-webkit-mask-size:100% 263.16%;mask-size:100% 263.16%;-webkit-mask-position:0 100%;mask-position:0 100%}
/* Écran de connexion : de 46 % à 98 % de la hauteur du portail (le logo y occupe le haut) ; hauteur 52 % → masque 192,31 %, décalé de 0,46/0,48 = 95,83 %. Masquée sur téléphone (le portail y est recadré en bandeau). */
.cnx-portailbox>canvas.fumee-cnx-rouge{top:46%;height:52%;-webkit-mask-size:100% 192.31%;mask-size:100% 192.31%;-webkit-mask-position:0 95.83%;mask-position:0 95.83%}
@media (max-width:760px){.cnx-portailbox>canvas.fumee-cnx-rouge{display:none}}

/* V0.2.19 — fumée grise qui monte à l'intérieur du médaillon de chaque page de compétence (Récolte, Production, Prière…). Elle est découpée par le masque de l'intérieur du cadre
   (medaillon-interieur.png, même taille que medaillon.webp) : elle reste dans le médaillon, derrière l'icône de la page, et ne touche pas la pierre du cadre. */
.medaillon{position:relative}
.medaillon>canvas.fumee-med{position:absolute;inset:0;width:100%;height:100%;opacity:.85;pointer-events:none;z-index:1;
  -webkit-mask:url(/assets/cendre/ornements/medaillon-interieur.png) center/100% 100% no-repeat;mask:url(/assets/cendre/ornements/medaillon-interieur.png) center/100% 100% no-repeat}
.medaillon>.ico{position:relative;z-index:2}

/* V0.2.25 — fumée bleue DANS la plaque du logo : devant le fond d'ardoise du cadre, derrière le texte. Le logo est maintenant un groupe de 3 calques empilés
   (même taille 900 × 374, alignés) : .lg-base = logo complet (cadre, fond, crânes, sang, texte) ; canvas.fumee-plaque = fumée découpée par plaque-interieur.png
   (intérieur du cadre, sans le sang qui retombe) ; .lg-txt = le texte seul (texte-deathmon.webp depuis la V0.2.66, tiré des calques fournis et recalés sur le logo) qui repasse par-dessus la fumée. */
.banlogo>.lg-base,.cnx-logo>.lg-base{display:block;width:100%;height:auto}
.banlogo>canvas.fumee-plaque,.cnx-logo>canvas.fumee-plaque,.banlogo>.lg-txt,.cnx-logo>.lg-txt{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.banlogo>canvas.fumee-plaque,.cnx-logo>canvas.fumee-plaque{mix-blend-mode:screen;opacity:.6;
  -webkit-mask:url(/assets/logo/plaque-interieur.png) 0 0/100% 100% no-repeat;mask:url(/assets/logo/plaque-interieur.png) 0 0/100% 100% no-repeat}

/* V0.2.27 — contour noir autour du texte du logo (Admin › Interface › Fumées du logo › Contour). --ow (px, selon la largeur du logo) et --oc (couleur + opacité) sont posées par fumee.js ;
   quatre ombres nettes décalées de haut en bas et de gauche à droite dessinent un trait continu autour des lettres. */
.banlogo>.lg-txt,.cnx-logo>.lg-txt{filter:drop-shadow(var(--ow,1.5px) 0 0 var(--oc,#000)) drop-shadow(calc(var(--ow,1.5px) * -1) 0 0 var(--oc,#000)) drop-shadow(0 var(--ow,1.5px) 0 var(--oc,#000)) drop-shadow(0 calc(var(--ow,1.5px) * -1) 0 var(--oc,#000))}

/* V0.2.30 — option de compte « Fumée désactivée » : plus aucun canevas de fumée (la classe est posée par public/fumee.js). */
html.fumee-off canvas.fumee{display:none!important}