/* ==========================================================
   Atelier — identite visuelle : plaque d'ampli, laiton grave
========================================================== */
:root{
  --ink:#0e0d0c; --panel:#171614; --panel2:#1e1c19; --rule:#302c26;
  --brass:#c9a227; --brass2:#7a6318; --oxblood:#a8412f;
  --bone:#e9e2d4; --slate:#8a837a; --good:#6f8f5e;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Roboto Mono',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--ink);color:var(--bone);font-family:var(--sans);
  overflow-x:hidden;-webkit-user-select:none;user-select:none;
  background-image:linear-gradient(180deg,#1a1713 0,var(--ink) 300px);
}
#app{max-width:600px;margin:0 auto;padding-bottom:calc(80px + env(safe-area-inset-bottom))}
button{font-family:var(--sans);cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- plaque d'en-tete ---------- */
header{padding:16px 16px 0}
.plate{
  border:1px solid var(--rule);border-radius:2px;padding:13px 14px;
  background:linear-gradient(172deg,#221e1a,#131110);
  display:flex;align-items:center;gap:12px;
}
.pl-left{flex:1;min-width:0}
.mark{font-family:var(--serif);font-size:18px;letter-spacing:3.5px;text-transform:uppercase;color:var(--brass);line-height:1}
.sub{font-size:8.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--slate);margin-top:5px}
.gauges{display:flex;gap:13px;flex-shrink:0}
.gg{text-align:center}
.gv{display:block;font-family:var(--serif);font-size:16px;color:var(--bone);line-height:1}
.gl{display:block;font-size:7.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate);margin-top:3px}
.metpill{
  flex-shrink:0;background:var(--panel2);border:1px solid var(--brass2);border-radius:2px;
  color:var(--brass);padding:7px 9px;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.mp1{font-family:var(--serif);font-size:13px;line-height:1}
.mp2{font-size:7.5px;letter-spacing:1.1px;text-transform:uppercase}

main{padding:14px 16px 20px}
.view{display:none}
.view.on{display:block;animation:fi .16s ease}
@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- blocs ---------- */
.blk{background:var(--panel);border:1px solid var(--rule);border-radius:2px;padding:15px;margin-bottom:12px}
.blk-h{
  font-family:var(--serif);font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--brass);
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
}
.blk-h .aside{font-family:var(--sans);font-size:9.5px;letter-spacing:1.2px;color:var(--slate);text-transform:none}
.blk.rule{border-left:2px solid var(--brass2)}
.snote{font-size:12.5px;color:var(--slate);line-height:1.55}
.snote b{color:var(--bone);font-weight:600}
.snote.warn{color:var(--oxblood)}
.why{font-size:12px;color:var(--slate);line-height:1.5;font-style:italic;margin-bottom:12px;padding-bottom:11px;border-bottom:1px solid var(--rule)}
.void{text-align:center;color:var(--slate);font-size:12.5px;padding:24px 10px;line-height:1.6}

/* ---------- navigation de jour ---------- */
.daynav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.daynav button{
  padding:9px 13px;border:1px solid var(--rule);background:var(--panel2);color:var(--bone);
  border-radius:2px;font-size:16px;font-family:var(--mono);line-height:1;
}
.dn-mid{flex:1;text-align:center;min-width:0}
.dn-d{font-family:var(--serif);font-size:14.5px;color:var(--bone)}
.dn-w{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--slate);margin-top:3px}

.sumbar{
  display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--slate);padding:0 2px 10px;
}

/* ---------- carte d'etape ---------- */
.step{border-left:2px solid var(--brass2)}
.step.done{border-left-color:var(--good);opacity:.72}
.steph{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.role{font-family:var(--serif);font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--brass)}
.mins{font-size:9.5px;letter-spacing:1.2px;color:var(--slate)}
.sname{font-size:15.5px;color:var(--bone);line-height:1.3}
.ssub{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--slate);margin:5px 0 9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* ---------- pastilles de progression ---------- */
.pdots{display:inline-flex;gap:3px;align-items:center}
.pd{width:6px;height:6px;border-radius:50%;border:1px solid var(--brass2);display:inline-block}
.pd.f{background:var(--brass);border-color:var(--brass)}

/* ---------- tablature ---------- */
.tabwrap{
  background:#100f0d;border:1px solid var(--rule);border-left:2px solid var(--brass2);
  border-radius:2px;overflow-x:auto;padding:10px 11px;margin:10px 0 0;
  -webkit-overflow-scrolling:touch;
}
.tabwrap pre{margin:0;font-family:var(--mono);font-size:11px;line-height:1.7;white-space:pre;letter-spacing:.3px;color:var(--bone)}
.tabwrap pre b{color:var(--brass);font-weight:400}

/* ---------- rangees de boutons ---------- */
.srow{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.mini{
  padding:8px 12px;border:1px solid var(--rule);background:var(--panel2);color:var(--slate);
  border-radius:2px;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
}
.mini.lit{color:var(--brass);border-color:var(--brass2)}
.mini:active{background:var(--rule)}

.btn{
  width:100%;padding:13px;border:1px solid var(--rule);background:var(--panel2);color:var(--bone);
  border-radius:2px;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
}
.btn.key{background:var(--brass);color:#14120f;border-color:var(--brass);font-weight:700}
.btn.key.live{background:var(--oxblood);border-color:var(--oxblood);color:var(--bone)}
.btn.danger{color:var(--oxblood)}
.btn.ghost{background:none;color:var(--slate);margin-top:9px}
.btn:active{opacity:.72}
.row2{display:flex;gap:8px}
.row2>*{flex:1}

/* ---------- formulaire de passe ---------- */
.passbox{margin-top:2px}
.passform{margin-top:11px;padding-top:11px;border-top:1px solid var(--rule)}
.pfrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.pfrow label{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--slate)}
.pfq{display:flex;gap:7px}
.pfq .q{
  flex:1;padding:11px 4px;border-radius:2px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  border:1px solid var(--rule);background:var(--panel2);color:var(--slate);
}
.pfq .q.ok{color:var(--good);border-color:#3f5236}
.pfq .q.mid{color:var(--brass);border-color:var(--brass2)}
.pfq .q.bad{color:var(--oxblood);border-color:#5c2a20}
.pfq .q:active{opacity:.7}
.pfhint{font-size:11px;color:var(--slate);line-height:1.5;margin-top:10px}
.pfhint b{color:var(--bone)}
.pfhint b.good{color:var(--good)}
.pfhint b.bad{color:var(--oxblood)}

input[type=number],input[type=text]{
  background:var(--panel2);color:var(--bone);border:1px solid var(--rule);border-radius:2px;
  padding:10px;font-size:15px;font-family:var(--mono);width:100%;
}
.pfrow input[type=number]{width:96px;text-align:center}
select{
  background:var(--panel2);color:var(--bone);border:1px solid var(--rule);border-radius:2px;
  padding:9px;font-size:13px;font-family:var(--sans);width:100%;
}
input[type=range]{-webkit-appearance:none;width:100%;height:2px;background:var(--rule);margin:14px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:2px;background:var(--brass);border:2px solid var(--ink)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:2px;background:var(--brass);border:2px solid var(--ink)}

/* ---------- parcours ---------- */
.pl{padding:13px 0;border-bottom:1px solid var(--rule)}
.pl:last-child{border-bottom:none}
.pl.lock{opacity:.45}
.pl.got .pln{color:var(--good)}
.plh{display:flex;justify-content:space-between;align-items:center;gap:9px}
.pln{font-size:14px;color:var(--bone);line-height:1.3}
.pls{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--slate);margin-top:4px}
.badge{
  font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--good);
  border:1px solid #3f5236;padding:3px 7px;border-radius:2px;flex-shrink:0;
}
.lockico{font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--slate);flex-shrink:0}
.req{font-size:10.5px;color:var(--slate);margin-top:7px;letter-spacing:.4px}
.reqok{color:var(--good)}
.reqno{color:var(--oxblood)}

/* ---------- chips ---------- */
.chips{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}
.chips button{
  flex-shrink:0;padding:8px 13px;border:1px solid var(--rule);background:var(--panel2);color:var(--slate);
  border-radius:2px;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
}
.chips button.on{background:var(--brass);color:#14120f;border-color:var(--brass)}

/* ---------- grille d'accords ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cell{
  padding:14px 4px;text-align:center;border:1px solid var(--rule);background:var(--panel2);
  border-radius:2px;font-family:var(--serif);font-size:14px;color:var(--slate);transition:all .1s;
}
.cell.hot{background:var(--brass);color:#14120f;border-color:var(--brass)}
.jamctl{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule)}
.bignum{font-family:var(--serif);font-size:24px;color:var(--brass);line-height:1}
.chk{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--slate);margin:4px 0 13px}
.chk input{width:17px;height:17px;accent-color:var(--brass)}

/* ---------- oreille ---------- */
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:12px}
.opts.wide{grid-template-columns:repeat(4,1fr)}
.opts button{
  padding:11px 4px;border:1px solid var(--rule);background:var(--panel2);color:var(--bone);
  border-radius:2px;font-size:11.5px;
}
.opts button:active{background:var(--rule)}
.fretq{display:flex;gap:9px;align-items:baseline;justify-content:center;padding:14px 0 4px}
.fq1{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--slate)}
.fq2{font-family:var(--serif);font-size:26px;color:var(--brass)}

/* ---------- statistiques ---------- */
.stats{display:flex;gap:8px;margin-bottom:12px}
.stat{flex:1;background:var(--panel);border:1px solid var(--rule);padding:13px 6px;text-align:center;border-radius:2px}
.stat .n{font-family:var(--serif);font-size:21px;color:var(--brass);line-height:1}
.stat .l{font-size:8px;letter-spacing:1.3px;text-transform:uppercase;color:var(--slate);margin-top:5px}

.heat{width:100%;height:120px;display:block}
.radar{width:100%;height:230px;display:block}
.bars{width:100%;height:110px;display:block}
.axis{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate);margin-top:7px}

.rec{display:flex;justify-content:space-between;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--rule)}
.rec:last-child{border-bottom:none}
.rec .a{font-size:13px;color:var(--bone)}
.rec .b{font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--slate);margin-top:3px}
.rr{font-family:var(--serif);font-size:18px;color:var(--brass);flex-shrink:0}
.rr small{font-size:8.5px;color:var(--slate);margin-left:3px;letter-spacing:1px}
.barout{height:3px;background:var(--rule);margin-top:7px;border-radius:2px;overflow:hidden}
.barout i{display:block;height:100%;background:var(--brass)}

.jal{display:flex;justify-content:space-between;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--rule);opacity:.4}
.jal:last-child{border-bottom:none}
.jal.got{opacity:1}
.jal .a{font-size:13px;color:var(--bone)}
.jal.got .a{color:var(--brass)}
.jal .b{font-size:10.5px;color:var(--slate);margin-top:3px}
.jd{font-family:var(--mono);font-size:10.5px;color:var(--slate);flex-shrink:0}

/* ---------- accordeur ---------- */
.tnote{text-align:center;padding:4px 0}
.tnote .n{font-family:var(--serif);font-size:66px;color:var(--brass);line-height:1}
.tnote .f{font-family:var(--mono);font-size:10.5px;color:var(--slate);margin-top:8px;letter-spacing:.8px}
.gauge{height:4px;background:var(--rule);position:relative;margin:24px 6px}
.gauge .ctr{position:absolute;left:50%;top:-7px;width:1px;height:18px;background:var(--brass2)}
.needle{position:absolute;top:-9px;width:3px;height:22px;background:var(--oxblood);left:50%;transform:translateX(-50%);transition:left .09s linear,background .09s}
.needle.ok{background:var(--good)}
.strs{display:flex;gap:5px;margin-top:20px}
.strs div{
  flex:1;text-align:center;padding:9px 0;border:1px solid var(--rule);background:var(--panel2);
  font-family:var(--mono);font-size:11.5px;color:var(--slate);border-radius:2px;
}
.strs div.hot{border-color:var(--brass);color:var(--brass)}

/* ---------- panneau metronome ---------- */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  transform:translateY(102%);transition:transform .24s cubic-bezier(.3,.8,.3,1);
  max-width:600px;margin:0 auto;
}
.sheet.open{transform:translateY(0)}
.sh-in{
  background:linear-gradient(178deg,#221e1a,#141210);
  border:1px solid var(--rule);border-bottom:none;border-radius:4px 4px 0 0;
  padding:6px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 40px rgba(0,0,0,.6);
}
.sh-grab{display:flex;justify-content:center;padding:6px 0 10px}
.sh-grab span{width:36px;height:3px;background:var(--rule);border-radius:2px}
.mface{text-align:center}
.mn{font-family:var(--serif);font-size:52px;color:var(--brass);line-height:1;font-variant-numeric:tabular-nums}
.ml{font-size:8.5px;letter-spacing:3px;text-transform:uppercase;color:var(--slate);margin-top:4px}
.pulse{display:flex;justify-content:center;gap:8px;margin:14px 0 4px}
.pulse i{width:10px;height:10px;border-radius:50%;background:var(--rule);border:1px solid var(--brass2);transition:transform .04s,background .04s}
.pulse i.hit{background:var(--brass);transform:scale(1.35)}
.pulse i.one.hit{background:var(--oxblood)}
.knobs{display:flex;justify-content:center;gap:9px;margin:12px 0 0}
.knob{width:52px;height:42px;border:1px solid var(--rule);background:var(--panel2);color:var(--bone);border-radius:2px;font-size:14px;font-family:var(--mono)}
.knob:active{background:var(--rule)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.mgrid label{font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate);display:block}
.mgrid select{margin-top:5px}

/* ---------- nav ---------- */
nav{
  position:fixed;bottom:0;left:0;right:0;max-width:600px;margin:0 auto;z-index:60;
  background:rgba(19,17,15,.97);backdrop-filter:blur(12px);border-top:1px solid var(--rule);
  display:flex;padding-bottom:env(safe-area-inset-bottom);
}
nav button{
  flex:1;background:none;border:none;color:var(--slate);padding:10px 1px 8px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:7.5px;letter-spacing:.8px;text-transform:uppercase;
}
nav button .g{font-family:var(--serif);font-size:15px;line-height:1}
nav button.on{color:var(--brass)}

.toast{
  position:fixed;bottom:94px;left:50%;transform:translateX(-50%);
  background:var(--brass);color:#14120f;padding:11px 17px;border-radius:2px;
  font-size:12px;font-weight:700;letter-spacing:.4px;line-height:1.4;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:100;
  max-width:86%;text-align:center;
}
.toast.up{opacity:1}

@media(max-width:360px){
  .gauges{gap:9px}
  .gv{font-size:14px}
  nav button{font-size:7px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}