/* Layout : panneau d'instrument. Rail d'étapes collant, carte des accords en héros, puis fiche d'accord, grille et ligne de basse ; barre de lecture fixe en bas. */
:root{
  --bg:#F1F2ED; --panel:#FBFBF8; --ink:#1A1E23; --muted:#59616C; --line:#D8DBD3; --line-strong:#AEB3A9;
  --tonic:#24508F; --dom:#A9560B; --sub:#7A3C97; --two:#1B7560;
  --tonic-tint:#DEE6F3; --dom-tint:#F6E5D2; --sub-tint:#EEE0F4; --two-tint:#D4ECE4;
  --on-fam:#FFFFFF;
  --z0:#E8E2D4; --z1:#DCE0E6; --z2:#E9DED6;
  --shadow:0 1px 0 rgba(26,30,35,.04), 0 10px 28px -18px rgba(26,30,35,.35);
  --f-display:'Gloock', 'Noto Music', Georgia, 'Times New Roman', serif;
  --f-body:'Figtree', 'Noto Music', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-chord:'Barlow Condensed', 'Noto Music', 'Arial Narrow', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111418; --panel:#181C21; --ink:#E7E9E4; --muted:#9BA3AD; --line:#272D35; --line-strong:#4A525D;
    --tonic:#8DB2EC; --dom:#F0A25C; --sub:#CB9AE3; --two:#5FCBAD;
    --tonic-tint:#22385C; --dom-tint:#4E3418; --sub-tint:#3F2A4E; --two-tint:#1A4538;
    --on-fam:#111418; --shadow:0 0 0 rgba(0,0,0,0);
    --z0:#2C281F; --z1:#22262D; --z2:#2E251F;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111418; --panel:#181C21; --ink:#E7E9E4; --muted:#9BA3AD; --line:#272D35; --line-strong:#4A525D;
  --tonic:#8DB2EC; --dom:#F0A25C; --sub:#CB9AE3; --two:#5FCBAD;
  --tonic-tint:#22385C; --dom-tint:#4E3418; --sub-tint:#3F2A4E; --two-tint:#1A4538;
  --on-fam:#111418; --shadow:0 0 0 rgba(0,0,0,0);
  --z0:#2C281F; --z1:#22262D; --z2:#2E251F;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--tonic); outline-offset:2px}

.f-tonic{--fam:var(--tonic); --tint:var(--tonic-tint)}
.f-dom{--fam:var(--dom); --tint:var(--dom-tint)}
.f-sub{--fam:var(--sub); --tint:var(--sub-tint)}
.f-two{--fam:var(--two); --tint:var(--two-tint)}

.page{max-width:1160px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:22px calc(104px + env(safe-area-inset-bottom,0px))}

/* En-tête */
.top{display:flex; flex-wrap:wrap; gap:16px 32px; align-items:flex-end; justify-content:space-between}
.intro{max-width:60ch; min-width:0}
.eyebrow{margin:0; font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
h1{font-family:var(--f-display); font-weight:400; font-size:clamp(2.2rem, 7vw, 3.3rem); line-height:1.02; letter-spacing:-.01em; margin:6px 0 10px; text-wrap:balance}
.lede{margin:0; color:var(--muted); max-width:58ch}
.settings{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.field{display:flex; flex-direction:column; gap:5px}
.field > span, .field > label{font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
select{font:600 15px var(--f-body); color:var(--ink); background:var(--panel); border:1px solid var(--line-strong); border-radius:10px; padding:8px 10px; min-height:40px}
.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:11px; padding:2px; background:var(--panel)}
.seg button{border:0; background:transparent; color:var(--muted); font-weight:600; font-size:14px; padding:8px 13px; border-radius:8px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--sel-bg); color:var(--sel-fg); box-shadow:var(--sel-edge)}

/* Rail d'étapes */
.steps{position:sticky; top:env(safe-area-inset-top,0px); z-index:8; background:var(--bg); display:flex; gap:6px; overflow-x:auto; padding-block:12px; margin-top:16px; scrollbar-width:none; border-bottom:1px solid var(--line)}
.steps::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); background:var(--panel); border-radius:999px; padding:7px 14px 7px 12px; font-weight:600; font-size:14px; line-height:1.1; cursor:pointer; white-space:nowrap}
.chip b{font-family:var(--f-chord); font-weight:700; font-size:15px; color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip[aria-pressed="true"] b{color:inherit; opacity:.7}

/* Grille principale */
.layout{display:grid; gap:30px; grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "map" "card" "sheet" "bass"; margin-top:22px; align-items:start}
@media (min-width:940px){
  .layout{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); grid-template-areas:"map head" "map card" "map sheet" "map bass"; column-gap:44px; row-gap:30px}
  .map-wrap{position:sticky; top:calc(env(safe-area-inset-top,0px) + 76px)}
}
.head{grid-area:head; min-width:0}
.step-no{margin:0; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.head h2{font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem, 4.6vw, 2.1rem); line-height:1.1; margin:4px 0 10px; text-wrap:balance}
.step-text{margin:0 0 12px; max-width:62ch}
.listen{margin:0; display:flex; gap:10px; align-items:baseline; max-width:62ch}
.listen .tag{flex:none; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tonic)}
.cn{font-family:var(--f-chord); font-weight:600; font-size:1.14em; letter-spacing:.01em; white-space:nowrap}

/* Carte */
.map-wrap{grid-area:map; min-width:0; display:flex; flex-direction:column; gap:12px}
.map-panel{background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:6px; box-shadow:var(--shadow); max-width:600px; width:100%; margin:0 auto}
svg.map{display:block; width:100%; max-width:100%; height:auto}
.map .ring{fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 5}
.map .edge{fill:none; stroke:var(--line-strong); stroke-width:1.1; opacity:.55; transition:stroke .2s, stroke-width .2s, opacity .2s}
.map .edge.on{stroke:var(--ink); stroke-width:2; opacity:1; marker-end:url(#ah-on)}
.map .edge.now{stroke-width:3.6}
.map .edge.now.f-tonic{stroke:var(--tonic); marker-end:url(#ah-tonic)}
.map .edge.now.f-dom{stroke:var(--dom); marker-end:url(#ah-dom)}
.map .edge.now.f-sub{stroke:var(--sub); marker-end:url(#ah-sub)}
.map .edge.now.f-two{stroke:var(--two); marker-end:url(#ah-two)}
.map .ah-on{fill:var(--ink)} .map .ah-tonic{fill:var(--tonic)} .map .ah-dom{fill:var(--dom)} .map .ah-sub{fill:var(--sub)} .map .ah-two{fill:var(--two)}
.map .node{cursor:pointer; outline:none}
.map .node .shape{fill:var(--panel); stroke:var(--fam); stroke-width:1.8; transition:fill .2s}
.map .node.in .shape{fill:var(--tint); stroke-width:2.4}
.map .node.out{opacity:.36}
.map .node.dashed .shape{stroke-dasharray:4 3}
.map .node .halo{fill:none; stroke:var(--ink); stroke-width:1.6; visibility:hidden}
.map .node.sel .halo{visibility:visible}
.map .node:focus-visible .halo{visibility:visible; stroke:var(--tonic); stroke-dasharray:3 3}
.map .node:hover .shape{stroke-width:3}
.map .node.now .shape{fill:var(--fam); transform-box:fill-box; transform-origin:center; animation:pop .32s ease-out}
.map .node.now text{fill:var(--on-fam)}
.map .lab{fill:var(--ink); font-family:var(--f-chord); font-weight:600}
.map .k-T .lab{font-size:23px} .map .k-T .q{font-size:15px}
.map .k-P .lab{font-size:17px} .map .k-P .q{font-size:14px}
.map .q{font-weight:500}
.map .d{font-weight:600}
.map .k-T .d{font-size:22px} .map .k-P .d{font-size:16px}
.map .ghost{font-family:var(--f-body); font-weight:600; font-size:13px; fill:var(--muted); opacity:0; transition:opacity .2s}
.map .ghost.show{opacity:1}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}

.legend{list-style:none; margin:0 auto; padding:0 4px; display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--muted); max-width:600px; width:100%}
.legend li{display:inline-flex; align-items:center; gap:7px}
.sw{display:inline-block; width:22px; height:12px; border-radius:6px; border:2px solid var(--fam); background:var(--tint)}
.sw.sw-c{width:14px; height:14px; border-radius:50%}
.sw.dashed{border-style:dashed}
.map-note{margin:0 auto; padding:0 4px; font-size:13px; color:var(--muted); max-width:600px; width:100%}

/* Fiche accord */
.card{grid-area:card; min-width:0; display:flex; flex-direction:column; gap:12px; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow)}
.card-top{display:flex; gap:14px; justify-content:space-between; align-items:flex-start}
.card-id{min-width:0; display:flex; flex-direction:column; gap:6px}
.fam-tag{margin:0; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fam)}
.fam-tag .dot{width:10px; height:10px; border-radius:50%; background:var(--fam); flex:none}
.card.dashed .fam-tag .dot{background:transparent; border:2px dashed var(--fam)}
.card-name{margin:0; font-family:var(--f-chord); font-weight:600; font-size:52px; line-height:.95; letter-spacing:-.005em; overflow-wrap:anywhere}
.card-name .cq{font-size:.6em; font-weight:500; margin-left:2px}
.card-fn{margin:0; font-weight:600; font-size:14px; color:var(--muted)}
.card-role{margin:0}
.tones{list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap}
.tones li{display:flex; flex-direction:column; align-items:center; min-width:48px; padding:6px 9px 5px; border:1px solid var(--line); border-radius:10px; background:var(--bg)}
.tones .tn{font-family:var(--f-chord); font-weight:600; font-size:20px; line-height:1}
.tones .ti{font-weight:600; font-size:11px; line-height:1.4; color:var(--muted); white-space:nowrap}
.tones li.is-bass{border-color:var(--fam); background:var(--tint)}
.tones li.is-bass .ti::after{content:" · basse"}
.res{margin:0; font-size:15px; max-width:60ch}
.card-actions{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ink); background:transparent; border-radius:999px; padding:8px 15px 8px 12px; font-weight:600; font-size:14px; cursor:pointer}
.btn svg{width:14px; height:14px}
.btn:hover{background:var(--ink); color:var(--bg)}
.where{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; color:var(--muted)}
.mini{border:1px solid var(--line-strong); background:transparent; border-radius:999px; padding:4px 10px; font-weight:600; font-size:12px; cursor:pointer}
.mini.cur{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.diagram{margin:0; flex:none; display:flex; flex-direction:column; align-items:center; gap:2px}
.diagram figcaption{font-family:var(--f-chord); font-weight:600; font-size:14px; letter-spacing:.08em; color:var(--muted)}
.diag{width:118px; max-width:100%; height:auto; display:block}
.diag .fl, .diag .stl{stroke:var(--line-strong); stroke-width:1.2}
.diag .nut{fill:var(--ink)}
.diag .dt{fill:var(--ink)} .diag .dt.root{fill:var(--fam)}
.diag .dtl{fill:var(--bg); font-family:var(--f-chord); font-weight:700; font-size:10px}
.diag .dtl.root{fill:var(--on-fam)}
.diag .op{fill:none; stroke:var(--ink); stroke-width:1.5} .diag .op.root{stroke:var(--fam); stroke-width:2.2}
.diag .mx{fill:var(--muted); font-family:var(--f-body); font-size:12px; font-weight:600}
.diag .frn{fill:var(--muted); font-family:var(--f-chord); font-weight:600; font-size:13px}
.diag .nmn{fill:var(--muted); font-family:var(--f-chord); font-weight:600; font-size:11px}

/* Sections */
.sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px}
.sec-h h3{margin:0; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.sec-h span{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right}
.sheet-wrap{grid-area:sheet; min-width:0}
.bass-wrap{grid-area:bass; min-width:0}

/* Grille façon partition */
.sheet{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line)}
.bar{display:flex; min-width:0; gap:2px; padding:5px 4px; min-height:72px; position:relative; border-left:1.5px solid var(--ink); border-bottom:1px solid var(--line)}
.bar:nth-child(4n), .bar:last-child{border-right:1.5px solid var(--ink)}
.sheet-wrap{container-type:inline-size}
@container (max-width:680px){
  .sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bar:nth-child(2n){border-right:1.5px solid var(--ink)}
}
.bar.rep-s{border-left-width:4px; padding-left:14px}
.bar.rep-e{border-right-width:4px !important; padding-right:14px}
.bar.rep-s::before, .bar.rep-e::after{content:""; position:absolute; top:calc(50% - 7px); width:4px; height:4px; border-radius:50%; background:var(--ink); box-shadow:0 10px 0 var(--ink)}
.bar.rep-s::before{left:5px}
.bar.rep-e::after{right:5px}
.ch{flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px; text-align:left; background:transparent; border:0; border-radius:10px; padding:8px 7px; cursor:pointer}
.ch .nm{font-family:var(--f-chord); font-weight:600; font-size:21px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ch .nm .cq{font-size:.74em; font-weight:500}
.ch .fn{font-weight:600; font-size:11.5px; line-height:1.2; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ch .fn::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--fam); margin-right:5px; vertical-align:1px}
.ch:hover{background:var(--tint)}
.ch.sel:not(.now){box-shadow:inset 0 0 0 1.5px var(--fam)}
.ch.now{background:var(--fam); color:var(--on-fam)}
.ch.now .fn{color:var(--on-fam)}
.ch.now .fn::before{background:var(--on-fam)}

/* Ligne de basse */
svg.bass{display:block; width:100%; max-width:100%; height:auto}
.bass .bk{fill:var(--line); opacity:.5}
.bass .bl{stroke:var(--line-strong); stroke-width:1; stroke-dasharray:1 3}
.bass .cx{stroke:var(--line-strong); stroke-width:1.2; stroke-dasharray:2 2}
.bass .cx.half{stroke:var(--ink); stroke-width:2.6; stroke-dasharray:none; stroke-linecap:round}
.bass .sl{stroke:var(--fam); stroke-width:6; stroke-linecap:round; transition:stroke-width .15s}
.bass .seg.sel .sl{stroke-width:8}
.bass .seg.now .sl{stroke-width:10}
.bass .nl{font-family:var(--f-chord); font-weight:600; font-size:12.5px; fill:var(--ink)}
.bass .hit{fill:transparent; cursor:pointer}
.bass .ghost-seg .sl{stroke:var(--muted); stroke-width:3; stroke-dasharray:3 4}
.bass .ghost-seg .nl{fill:var(--muted)}
.caption{margin:8px 0 0; font-size:13px; color:var(--muted); max-width:62ch}

/* Improviser */
.impro{grid-area:impro; min-width:0; display:flex; flex-direction:column; gap:0}
.guides-wrap{grid-area:guides; min-width:0}
.impro-body{display:flex; flex-direction:column; gap:12px}
.imp-scale{margin:0; font-family:var(--f-display); font-size:clamp(1.45rem, 4.4vw, 1.8rem); line-height:1.1}
.imp-alias{margin:2px 0 0; font-weight:600; font-size:14px; color:var(--muted)}
.imp-tip{margin:0; max-width:62ch}
.scale-notes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px}
.scale-notes li{display:flex; flex-direction:column; align-items:center; padding:7px 2px 6px; border-radius:10px; border:1px solid var(--line); background:var(--panel); position:relative; min-width:0}
.scale-notes .tn{font-family:var(--f-chord); font-weight:600; font-size:19px; line-height:1}
.scale-notes .ti{font-weight:600; font-size:11px; line-height:1.4; color:var(--muted); white-space:nowrap}
.scale-notes li.r-root{background:var(--fam); border-color:var(--fam); color:var(--on-fam)}
.scale-notes li.r-root .ti{color:var(--on-fam)}
.scale-notes li.r-ct{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.scale-notes li.r-ct .ti{color:var(--bg); opacity:.8}
.scale-notes li.r-avoid{border-style:dashed; color:var(--muted)}
.scale-notes li.out::after{content:""; position:absolute; top:-4px; right:-4px; width:10px; height:10px; border-radius:50%; background:var(--dom); border:2px solid var(--bg)}
.imp-targets{margin:0; font-size:15px}
.neck-box{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:8px 6px 4px}
svg.neck{display:block; width:100%; max-width:100%; height:auto}
.neck .nk-str{stroke:var(--line-strong); stroke-width:1}
.neck .nk-fret{stroke:var(--line-strong); stroke-width:1.4}
.neck .nk-nut{stroke:var(--ink); stroke-width:3.5}
.neck .nk-inlay{fill:var(--line)}
.neck .nk-num{fill:var(--muted); font-family:var(--f-chord); font-weight:600; font-size:10px}
.neck .nk-sname{fill:var(--muted); font-family:var(--f-chord); font-weight:600; font-size:10px}
.neck .nk-shape{fill:var(--tint); stroke:var(--fam); stroke-width:1}
.neck .d-root{fill:var(--fam)} .neck .t-root{fill:var(--on-fam)}
.neck .d-ct{fill:var(--ink)} .neck .t-ct{fill:var(--bg)}
.neck .d-ten{fill:var(--panel); stroke:var(--ink); stroke-width:1.3} .neck .t-ten{fill:var(--ink)}
.neck .d-avoid{fill:var(--panel); stroke:var(--line-strong); stroke-width:1.2; stroke-dasharray:2 2} .neck .t-avoid{fill:var(--muted)}
.neck .nk-out{fill:none; stroke:var(--dom); stroke-width:1.8}
.neck .nk-t{font-family:var(--f-chord); font-weight:700; font-size:8.6px}
.neck-legend{list-style:none; margin:8px 2px 2px; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--muted)}
.neck-legend li{display:inline-flex; align-items:center; gap:6px}
.lg{display:inline-block; width:12px; height:12px; border-radius:50%}
.lg-root{background:var(--fam)} .lg-ct{background:var(--ink)} .lg-ten{border:1.3px solid var(--ink)} .lg-avoid{border:1.2px dashed var(--line-strong)}
.lg-out{border:2px solid var(--dom); width:14px; height:14px} .lg-shape{border-radius:3px; background:var(--tint); border:1px solid var(--fam)}
.impro-ctrl{display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:14px}
.seg-sm button{font-size:13px; padding:7px 11px}
.guides .gl{stroke-width:5; stroke-linecap:round}
.guides .gv0{stroke:var(--fam)}
.guides .gv1{stroke:var(--fam); opacity:.55}
.guides .gn{font-family:var(--f-chord); font-weight:600; font-size:12px; fill:var(--ink)}
.guides .gd{font-family:var(--f-body); font-weight:600; font-size:9px; fill:var(--muted)}
.guides .cx.common{stroke:none}

/* Liens vers la théorie */
.link{display:inline; border:0; background:none; padding:0; color:var(--tonic); font-weight:600; font-size:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.link::after{content:" →"}
.step-links{margin:12px 0 0}

/* Triades dans le volet Improviser */
.triads{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (max-width:460px){ .triads{grid-template-columns:minmax(0,1fr)} }
.tri-row{min-width:0; display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
.tri-h{margin:0; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.tri-name{margin:0; font-size:17px; font-weight:600}
.tri-notes{list-style:none; margin:0; padding:0; display:flex; gap:5px}
.tri-notes li{display:flex; flex-direction:column; align-items:center; min-width:44px; padding:5px 8px 4px; border-radius:9px; border:1px solid var(--line); background:var(--bg)}
.tri-notes .tn{font-family:var(--f-chord); font-weight:600; font-size:18px; line-height:1}
.tri-notes .ti{font-weight:600; font-size:11px; line-height:1.4; color:var(--muted)}
.tri-desc{margin:0; font-size:14px; color:var(--muted)}
.tri-act{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.btn-sm{padding:6px 12px 6px 10px; font-size:13px}
.btn-sm[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.neck-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 4px 8px}
.neck-head p{margin:0; font-size:13px; font-weight:600; color:var(--muted)}
.neck .nk-box{fill:var(--tint); stroke:var(--fam); stroke-width:1.2; opacity:.8}
.neck .nk-inv{fill:var(--fam); font-family:var(--f-body); font-weight:700; font-size:8px}

/* Enchaînement de triades */
.chain-wrap{grid-area:chain; min-width:0}
.chain{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:6px}
.tri-item{min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 6px; border:1px solid var(--line); border-radius:12px; background:var(--panel); cursor:pointer}
.tri-item .nm{font-family:var(--f-chord); font-weight:600; font-size:17px; line-height:1.1; white-space:nowrap}
.tri-item .nm .cq{font-size:.74em; font-weight:500}
.tri-item .sub{font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap}
.tri-item svg{width:58px; height:auto; display:block}
.tri-item.sel{border-color:var(--fam); box-shadow:inset 0 0 0 1px var(--fam)}
.tri-item.now{background:var(--tint); border-color:var(--fam)}
.mini .m-str{stroke:var(--line-strong); stroke-width:1}
.mini .m-fret{stroke:var(--line-strong); stroke-width:1}
.mini .m-nut{fill:var(--ink)}
.mini .m-dot{fill:var(--ink)} .mini .m-dot.root{fill:var(--fam)}
.mini .m-fn{fill:var(--muted); font-family:var(--f-chord); font-weight:600; font-size:10px}

/* Comprendre */
.theory{min-width:0}
.theory-intro{margin:0 0 12px; font-size:14px; color:var(--muted); max-width:62ch}
.lessons{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.lesson{border-bottom:1px solid var(--line); scroll-margin-top:calc(env(safe-area-inset-top,0px) + 76px)}
.lesson summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 12px; align-items:baseline; padding:14px 2px}
.lesson summary::-webkit-details-marker{display:none}
.lesson .ln{font-family:var(--f-chord); font-weight:700; font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums}
.lesson .lt{font-family:var(--f-display); font-size:1.2rem; line-height:1.2}
.lesson .ls{grid-column:2; font-size:13px; color:var(--muted)}
.lesson .chev{grid-row:1; grid-column:3; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s; align-self:center}
.lesson[open] .chev{transform:rotate(225deg)}
.lesson-body{padding:0 2px 18px; display:flex; flex-direction:column; gap:10px; max-width:64ch}
.lesson-body p{margin:0}
.lesson-body ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px}
.ltable-wrap{overflow-x:auto}
.ltable{border-collapse:collapse; font-size:14px; min-width:100%}
.ltable th, .ltable td{padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
.ltable th{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700}
.ltable td.num{font-variant-numeric:tabular-nums; font-family:var(--f-chord); font-weight:600}
.lesson-go{display:flex; flex-wrap:wrap; gap:8px}

/* Vues */
[hidden]{display:none !important}
/* Rythme */

/* Parcours */
.pc{display:flex; flex-direction:column; gap:14px}
.pc-cycles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.pc-chip{display:flex; align-items:flex-start; gap:10px; text-align:left; padding:10px 12px; border-radius:14px; border:1px solid var(--line-strong); background:var(--panel); cursor:pointer; min-width:0}
.pc-chip .pc-n{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-chord); font-weight:700; font-size:15px; background:var(--bg); border:1px solid var(--line-strong)}
.pc-chip .pc-txt{display:flex; flex-direction:column; min-width:0}
.pc-chip .pc-st{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pc-chip .pc-t{font-size:14px; font-weight:600; line-height:1.25}
.pc-chip[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.pc-chip.cur .pc-n{background:var(--dom-tint); border-color:var(--dom)}
.pc-chip.ok .pc-n{background:var(--two); border-color:var(--two); color:var(--on-fam)}
.pc-cycle{display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:20px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow)}
.pc-title{margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(1.5rem,4.6vw,1.9rem); line-height:1.12; text-wrap:balance}
.pc-goal{margin:0; font-size:16px; font-weight:600; max-width:62ch}
.pc-box{display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:14px; background:var(--bg)}
.pc-box p{margin:0}
.pc-box ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px}
.pc-phs{list-style:none; padding:0 !important}
.pc-ph{display:flex; align-items:baseline; gap:10px; width:100%; text-align:left; padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:var(--panel); cursor:pointer}
.pc-ph:hover{border-color:var(--ink)}
.pc-phn{flex:none; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pc-pht{flex:1; font-weight:600}
.pc-defi .check{margin-top:4px}
.pc-slist{list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px}
.pc-slist button{display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 8px; width:100%; text-align:left; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:var(--panel); cursor:pointer}
.pc-slist .pc-sn{grid-row:1 / span 2; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-chord); font-weight:700; background:var(--bg); border:1px solid var(--line-strong); align-self:center}
.pc-slist .pc-stt{font-size:13.5px; font-weight:600; line-height:1.25}
.pc-slist .pc-sw{font-size:11.5px; color:var(--muted)}
.pc-slist li.done .pc-sn{background:var(--two); border-color:var(--two); color:var(--on-fam)}
.pc-slist li.sel button{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.pc-start, .pc-run{display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:20px; border:1.5px solid var(--ink); background:var(--panel)}
.pc-start .play{align-self:flex-start}
.pc-msg{margin:0; padding:10px 12px; border-radius:12px; background:var(--two-tint); font-weight:600}
.pc-sttl{margin:0; font-family:var(--f-display); font-size:1.35rem; line-height:1.2}
.pc-plan, .pc-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.pc-plan li, .pc-steps li{display:flex; gap:10px; align-items:baseline; font-size:15px}
.pc-min{flex:none; min-width:4.2em; font-family:var(--f-chord); font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.pc-steps li.done{color:var(--muted); text-decoration:line-through}
.pc-steps li.cur{font-weight:700}
.pc-steps li.cur .pc-min{color:var(--ink)}
.pc-runh{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
.pc-block{display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px; background:var(--bg)}
.pc-bno{margin:0; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pc-bt{margin:0; font-family:var(--f-display); font-weight:400; font-size:1.5rem}
.pc-bw{margin:0; font-size:16px; max-width:62ch}
.pc-bg{margin:0; font-size:15px; color:var(--two)}
.pc-bg b{color:var(--two)}
.pc-act{align-self:flex-start; text-align:left}
.pc-timer{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pc-clock{font-family:var(--f-chord); font-weight:600; font-size:38px; line-height:1; font-variant-numeric:tabular-nums; min-width:3.2ch}
.pc-next{background:var(--ink); color:var(--bg)}
.pc-done{margin:0; padding:10px 12px; border-radius:12px; background:var(--dom-tint); font-weight:700}
.link-plain::after{content:""}
/* Phrase */
.ph{display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:20px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); scroll-margin-top:16px}
.ph-title{margin:0; font-family:var(--f-display); font-size:1.5rem; line-height:1.15}
.ph-desc{margin:0; max-width:64ch}
.ph-bars{display:grid; grid-template-columns:minmax(0,1fr); gap:2px 0; background:var(--bg); border-radius:12px; padding:8px 6px}
@media (min-width:600px){ .ph-bars{grid-template-columns:repeat(2,minmax(0,1fr))} }
svg.tab{display:block; width:100%; height:auto}
.tab .tb-l{stroke:var(--line-strong); stroke-width:1}
.tab .tb-bar{stroke:var(--ink); stroke-width:1.4}
.tab .tb-sn{fill:var(--muted); font-family:var(--f-chord); font-weight:600; font-size:8.5px}
.tab .tb-ch{fill:var(--ink); font-family:var(--f-chord); font-weight:700; font-size:13px}
.tab .tb-f{fill:var(--ink); font-family:var(--f-chord); font-weight:700; font-size:11.5px; paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round}
.tab .tb-lab{fill:var(--tonic); font-family:var(--f-chord); font-weight:600; font-size:10px}
.tab .tb-c{fill:var(--muted); font-family:var(--f-body); font-size:8.5px}
.tab .tb-c.b{fill:var(--ink); font-weight:700}
.tab .tb-n.on .tb-f{fill:var(--dom); font-size:13px}
.tab .tb-n.on .tb-lab{fill:var(--dom)}
.ph-ctrl{display:flex; flex-wrap:wrap; gap:10px}
.ph-status{margin:0; font-weight:700; min-height:1.4em; color:var(--dom)}
.tab .tb-art{fill:var(--sub); font-family:var(--f-chord); font-weight:700; font-size:9px}
.ph-legend{margin:0; font-size:13px; color:var(--muted); max-width:64ch}
.ph-legend b{font-family:var(--f-chord); color:var(--ink)}
.sx-enh{font-size:.6em; color:var(--muted)}
.ph-keyf select{max-width:100%}
.view-main input[type=text], .view-main input[type=number]{font:inherit; font-size:16px; padding:8px 10px; border-radius:10px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); min-width:0}
.pc-l2{margin:0; padding:10px 12px; border-radius:12px; background:var(--sub-tint); font-size:15px}
.pc-l2.sm{font-size:14px; padding:8px 10px}
.pc-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px}
.pc-more summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--muted); padding:4px 0}
.pc-more[open] summary{margin-bottom:6px}
.pc-note{display:flex; flex-direction:column; gap:6px}
.pc-note label{font-weight:600; font-size:14px}
.pc-note-row{display:flex; gap:8px}
.pc-note-row input{flex:1}
.jump{display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 0 4px; margin-bottom:-14px; scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump button{flex:none; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); border-radius:999px; padding:7px 13px; font-weight:600; font-size:13.5px; cursor:pointer}
.jump button:hover{border-color:var(--ink)}
#view-train > section{scroll-margin-top:14px}
.quiz-opts.many{grid-template-columns:repeat(3,minmax(0,1fr))}
.quiz-opts.many button{font-size:13.5px; padding:10px 4px}
.quiz-sol{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:12px; background:var(--bg)}
.quiz-sol p{margin:0}
.qd-notes{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.qd-notes li{display:flex; flex-direction:column; align-items:center; min-width:54px; padding:6px 8px; border-radius:10px; background:var(--panel); border:1px solid var(--line)}
.qd-notes .tn{font-family:var(--f-chord); font-weight:700; font-size:17px}
.qd-notes .ti{font-size:12px; color:var(--tonic); font-weight:700}
.quiz-sub{margin:0; font-weight:700}
.vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px}
.rl{display:flex; flex-direction:column; gap:12px}
.rl-load{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.rl-load label.btn{cursor:pointer}
.vh:focus-visible + label{outline:2px solid var(--ink); outline-offset:2px}
.rl-name{font-size:14px; color:var(--muted); overflow-wrap:anywhere}
.rl-msg{margin:0; padding:10px 12px; border-radius:12px; background:var(--dom-tint); font-weight:600; font-size:14px}
.rl-ui{display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:18px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow)}
.rl-wave-wrap{position:relative; border-radius:12px; background:var(--bg); overflow:hidden}
.rl-wave{display:block; width:100%; height:112px; touch-action:pan-y; cursor:crosshair}
.rl-head{position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px; background:var(--ink); pointer-events:none}
.rl-axis{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:-6px}
.rl-row{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap}
.rl-time{font-family:var(--f-chord); font-weight:600; font-size:22px; font-variant-numeric:tabular-nums; min-width:4.5ch}
.rl-ab{display:flex; flex-direction:column; gap:8px}
.rl-pt{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.rl-pl{font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); min-width:4.6em}
.rl-pt output{font-family:var(--f-chord); font-weight:600; min-width:4.4em; font-variant-numeric:tabular-nums}
.rl-set{display:flex; gap:10px 24px; flex-wrap:wrap; align-items:center}
.rl-g{display:flex; align-items:center; gap:4px}
.rl-u{font-size:12px; font-weight:700; color:var(--muted)}
.rl-how{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; max-width:64ch}
.rp{display:flex; flex-direction:column; gap:12px}
.rp-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.rp-it{border:1px solid var(--line); border-radius:14px; background:var(--panel)}
.rp-it summary{display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; padding:12px 14px; cursor:pointer; list-style:none}
.rp-it summary::-webkit-details-marker{display:none}
.rp-n{font-weight:700; flex:1 1 10em; min-width:0}
.rp-sum{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px}
.rp-it .chev{flex:none; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s; margin:0 2px 3px 4px}
.rp-it[open] .chev{transform:rotate(225deg); margin-bottom:-3px}
.rp-b{padding:3px 9px; border-radius:999px; font-weight:700; background:var(--bg); border:1px solid var(--line-strong)}
.rp-b.s1{background:var(--dom-tint); border-color:var(--dom)}
.rp-b.s2{background:var(--tonic-tint); border-color:var(--tonic)}
.rp-b.s3{background:var(--two); border-color:var(--two); color:var(--on-fam)}
.rp-k{color:var(--muted)}
.rp-body{display:flex; flex-direction:column; gap:12px; padding:0 14px 14px}
.rp-who{margin:0; color:var(--muted); font-size:14px}
.rp-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.rp-row input[type=number]{width:7em}
.rp-keys{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px}
.rp-key{border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); border-radius:8px; padding:7px 2px; font-weight:600; font-size:13px; cursor:pointer}
.rp-key[aria-pressed="true"]{background:var(--two); border-color:var(--two); color:var(--on-fam)}
.rp-add{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
.rp-add .field{flex:1 1 12em}
.rp-msg{margin:0; font-size:14px; color:var(--dom); font-weight:600}
.jr{display:flex; flex-direction:column; gap:12px}
.jr-card{display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:18px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow)}
.jr-chart{display:block; width:100%; height:auto; max-width:560px}
.jr-bar{fill:var(--tonic); opacity:.7}
.jr-bar.ok{fill:var(--two); opacity:1}
.jr-v{fill:var(--ink); font-family:var(--f-chord); font-weight:600; font-size:10px}
.jr-x{fill:var(--muted); font-size:9.5px}
.jr-x.cur{fill:var(--ink); font-weight:700}
.jr-goal{stroke:var(--muted); stroke-dasharray:3 3; stroke-width:1}
.jr-gl{fill:var(--muted); font-size:9px}
.jr-base{stroke:var(--line-strong); stroke-width:1}
.jr-streak{margin:0; font-size:14.5px}
.jr-form{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.jr-form .jr-nf{flex:1 1 14em}
.jr-form input[type=number]{width:5.5em}
.jr-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.jr-list li{display:grid; grid-template-columns:4.4em minmax(0,1fr) auto auto; gap:8px; align-items:baseline; padding:9px 0; border-top:1px solid var(--line)}
.jr-list li:first-child{border-top:0}
.jr-d{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.jr-l{display:flex; flex-direction:column; gap:2px; min-width:0}
.jr-l b{font-weight:600; font-size:14.5px}
.jr-n{font-size:13.5px; color:var(--muted); overflow-wrap:anywhere}
.jr-m{font-family:var(--f-chord); font-weight:600; font-size:14px; white-space:nowrap}
.jr-del{border:0; background:transparent; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; padding:2px 6px}
.jr-del:hover{color:var(--ink)}
.jr-list li.jr-empty{display:block; color:var(--muted); font-size:14px}
/* Navigation : onglets, sous-onglets, accueil */
.subnav{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.subnav button{border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); border-radius:999px; padding:7px 14px; font-weight:600; font-size:13.5px; cursor:pointer}
.subnav button[aria-pressed="true"]{background:var(--sel-bg); color:var(--sel-fg); box-shadow:var(--sel-edge); border-color:var(--sel-fg)}
.home-today{display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:20px; border:1.5px solid var(--ink); background:var(--panel); box-shadow:var(--shadow)}
.home-today p{margin:0}
.home-today .eyebrow{margin:0}
.ht-title{font-family:var(--f-display); font-size:clamp(1.4rem,4.4vw,1.75rem); line-height:1.15}
.ht-plan{color:var(--muted); font-size:15px}
.home-find{display:flex; flex-direction:column; gap:14px}
.home-find input[type=search]{font:inherit; font-size:16px; padding:11px 14px; border-radius:12px; border:1.5px solid var(--line-strong); background:var(--panel); color:var(--ink); width:100%}
.home-find input[type=search]:focus{border-color:var(--ink); outline:none}
.hg{display:flex; flex-direction:column; gap:8px}
.hg-h{margin:0; display:flex; align-items:baseline; gap:10px}
.hg-h b{font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.hg-h span{font-size:13px; color:var(--muted)}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px}
.tile{display:flex; flex-direction:column; gap:3px; text-align:left; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer}
.tile:hover{border-color:var(--ink)}
.tile b{font-size:15.5px}
.tile span{font-size:13.5px; color:var(--muted); line-height:1.35}
.home-none{margin:0; color:var(--muted)}
.home-tiles{display:flex; flex-direction:column; gap:22px}
.tu-card{display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:18px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow)}
.tu-card p{margin:0}
/* Backing tracks */
.bt{display:flex; flex-direction:column; gap:12px}
.bt-player{display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:20px; background:var(--panel); border:1.5px solid var(--ink); box-shadow:var(--shadow)}
.bt-player .eyebrow{margin:0}
.bt-title{margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(1.45rem,4.4vw,1.8rem); line-height:1.12}
.bt-deg{margin:0; font-family:var(--f-chord); font-weight:600; font-size:16px; color:var(--muted)}
.bt-run{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap}
.bt-st{font-size:14.5px; font-variant-numeric:tabular-nums}
.bt-tips{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:14px; background:var(--bg); font-size:15px; max-width:66ch}
.bt-tips p{margin:0}
.bt-ctrl{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end}
.bt-ctrl .field{min-width:0; max-width:100%}
.bt-ctrl select{max-width:100%}
.bt-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px}
.bt-it{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; width:100%; text-align:left; padding:11px 13px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer}
.bt-it:hover{border-color:var(--ink)}
.bt-it.sel{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.bt-n{font-weight:700; font-size:15px}
.bt-d{grid-column:1; font-family:var(--f-chord); font-weight:600; font-size:13.5px; color:var(--muted)}
.bt-m{grid-column:1; font-size:12px; color:var(--muted)}
.bt-lv{grid-column:2; grid-row:1; font-size:10px; letter-spacing:1px; color:var(--dom); white-space:nowrap}
/* Diagrammes d’accords */
.gd{display:flex; flex-direction:column; gap:12px}
.gd-ctrl{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end}
.gd-tr{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.gd-tip{margin:0; padding:10px 12px; border-radius:12px; background:var(--bg); font-size:14px; max-width:64ch}
.gd-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.cd-card{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 6px; border-radius:14px; background:var(--panel); border:1px solid var(--line); min-width:0}
.cd-card.bad{justify-content:center; min-height:120px; color:var(--muted)}
.cd-btn{display:flex; flex-direction:column; align-items:center; gap:0; width:100%; border:0; background:transparent; padding:0; cursor:pointer; color:inherit}
.cd-btn:hover .cd-s{stroke:var(--ink)}
.cd-btn.on svg .cd-d{fill:var(--dom)}
.cd-name{margin:0; font-family:var(--f-chord); font-weight:700; font-size:17px; line-height:1.1; text-align:center; overflow-wrap:anywhere}
.cd-sub{margin:0; font-size:11.5px; color:var(--muted); text-align:center; line-height:1.25}
.cd-more{font-size:11.5px}
svg.cd{display:block; width:100%; max-width:104px; height:auto}
.cd .cd-s{stroke:var(--muted); stroke-width:1}
.cd .cd-f{stroke:var(--line-strong); stroke-width:1}
.cd .cd-f.nut{stroke:var(--ink); stroke-width:3.4}
.cd .cd-pos{fill:var(--ink); font-family:var(--f-chord); font-weight:700; font-size:10.5px}
.cd .cd-f.nut.capo{stroke:var(--dom); stroke-width:4.2}
.cd .cd-x{fill:var(--muted); font-size:10px; font-weight:700}
.cd .cd-o{fill:none; stroke:var(--ink); stroke-width:1.3}
.cd .cd-barre{fill:var(--ink); opacity:.16}
.cd .cd-d{fill:var(--ink)}
.cd .cd-d.root{fill:var(--tonic)}
.cd .cd-t{fill:var(--bg); font-family:var(--f-chord); font-weight:700; font-size:7.6px}
.cd .cd-t.sm{font-size:6.2px}
.cd .cd-ot{fill:var(--muted); font-family:var(--f-chord); font-weight:600; font-size:7px}
.dico{display:flex; flex-direction:column; gap:12px}
.dc-ctrl{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end}
.dc-ctrl #dc-in{width:8.5em; font-family:var(--f-chord); font-weight:600}
.dc-notes{margin:0; font-size:15px}
.dc-r{font-size:12px; color:var(--tonic); font-weight:700}
.dc-g{display:flex; flex-direction:column; gap:6px}
.dc-g .tri-h{margin:0}
.dc-msg{margin:0; color:var(--dom); font-weight:600; font-size:14px}
/* Accordeur */
.tu-open svg{width:15px; height:15px}
.tu-back{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
@media (min-width:640px){ .tu-back{align-items:center} }
body.tu-lock{overflow:hidden}
.tu{width:100%; max-width:460px; max-height:calc(100vh - 24px); overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:22px; background:var(--panel); color:var(--ink); box-shadow:0 18px 48px -18px rgba(0,0,0,.6)}
.tu-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.tu-top h2{margin:0; font-family:var(--f-display); font-weight:400; font-size:1.6rem}
.tu-disp{display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 10px 12px; border-radius:16px; background:var(--bg); transition:background .2s}
.tu-disp.near{background:var(--dom-tint)}
.tu-disp.ok{background:var(--two-tint)}
.tu-note{margin:0; display:flex; align-items:baseline; gap:8px; line-height:1}
#tu-n{font-family:var(--f-display); font-size:3.2rem}
.tu-oct{font-family:var(--f-chord); font-weight:600; font-size:1.1rem; color:var(--muted)}
.tu-gauge{width:100%; max-width:340px}
.tu-gauge svg{display:block; width:100%; height:auto}
.tu-gauge .tk{stroke:var(--muted); stroke-width:1}
.tu-gauge .tk.big{stroke:var(--ink); stroke-width:1.6}
.tu-gauge .zone{fill:var(--two); opacity:.22}
.tu-gauge .tl{fill:var(--muted); font-size:10px; font-family:var(--f-chord)}
#tu-needle{transition:transform .09s linear}
#tu-needle rect{fill:var(--dom)}
.tu-disp.ok #tu-needle rect{fill:var(--two)}
.tu-cents{margin:0; font-family:var(--f-chord); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums}
.tu-hint{margin:0; font-weight:700; min-height:1.3em; text-align:center}
.tu-disp.ok .tu-hint{color:var(--two)}
.tu-strings{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px}
.tu-s{position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 2px; border-radius:11px; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); cursor:pointer}
.tu-s.auto{justify-content:center; font-weight:700; font-size:12.5px}
.tu-s .tu-sn{font-size:10px; color:var(--muted); font-weight:700}
.tu-s .tu-sl{font-family:var(--f-chord); font-weight:700; font-size:17px}
.tu-s .tu-ck{position:absolute; top:2px; right:4px; font-size:10px; color:var(--two); display:none}
.tu-s.done .tu-ck{display:block}
.tu-s.cur{border-color:var(--dom); box-shadow:inset 0 0 0 1px var(--dom)}
.tu-s[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.tu-s[aria-pressed="true"] .tu-sn{color:inherit; opacity:.7}
.tu-row{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap}
.tu ol{margin:6px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:5px; font-size:14.5px}
/* Bandeau de séance */
.pc-banner{position:fixed; left:0; right:0; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:21; display:flex; justify-content:center; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); pointer-events:none}
.pc-banner.above{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
.pc-bin{pointer-events:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:640px; width:100%; padding:8px 10px 8px 14px; border-radius:16px; background:var(--ink); color:var(--bg); box-shadow:0 8px 24px -12px rgba(0,0,0,.5)}
.pc-bl{flex:1; min-width:0; font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pc-bclock{font-family:var(--f-chord); font-weight:700; font-size:18px; font-variant-numeric:tabular-nums}
.pc-banner.over .pc-bclock{color:var(--dom)}
.pc-bbtn{border:1px solid var(--bg); background:transparent; color:var(--bg); border-radius:999px; padding:6px 12px; font-weight:700; font-size:13px; cursor:pointer}
.pc-bbtn.strong{background:var(--bg); color:var(--ink)}
body.has-pc .page{padding-block-end:calc(170px + env(safe-area-inset-bottom,0px))}

.neck-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
.neck-scroll .neck{min-width:520px}
.neck-scroll .sx-neck{min-width:600px}
.scroll-hint{display:none; margin:4px 2px 0; font-size:12px; color:var(--muted)}
@media (max-width:620px){ .scroll-hint{display:block} }
.neck .nk-t{font-size:10px}
.neck .nk-t1{font-size:9.4px}
.neck .nk-t2{font-size:7px; font-weight:600}
.btn.is-playing{background:var(--ink); color:var(--bg)}
.neck-lab{display:flex; align-items:center; gap:10px; padding:2px 4px 8px; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.drill-run{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.drill-prog{font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}

.rh-vamp{margin:0; font-size:14px}
.rh-bars{color:var(--muted); font-size:12px}
.rh-sub{display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:12px; background:var(--bg)}
.rh-tip{margin:0; font-size:15px}
.rh-mix{display:flex; flex-wrap:wrap; gap:6px 18px}
.rh-mix .check{margin:0}
.rh-drums summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--tonic)}
.dg{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 10px; align-items:center; margin-top:10px}
.dg-n{font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap}
.dg-r{display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:2px}
.dg-c{display:block; height:14px; border-radius:3px; background:var(--line); opacity:.6}
.dg-c.b{opacity:1}
.dg-c.X{background:var(--dom); opacity:1} .dg-c.x{background:var(--ink); opacity:.75} .dg-c.g{background:var(--ink); opacity:.3}
.rh-fb{display:flex; flex-direction:column; gap:12px; padding-top:8px; border-top:1px solid var(--line)}
.rh-fbintro{margin:0; font-size:14px; color:var(--muted); max-width:62ch}
.rh-pad{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:132px; border-radius:20px; border:2px solid var(--ink); background:var(--panel); color:var(--ink); cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; transition:background .12s}
.rh-pad .rh-padl{font-family:var(--f-display); font-size:1.6rem}
.rh-pad .rh-padv{font-weight:700; font-size:15px; color:var(--muted)}
.rh-pad:active{transform:scale(.99)}
.rh-pad.ok{background:var(--two-tint); border-color:var(--two)} .rh-pad.ok .rh-padv{color:var(--two)}
.rh-pad.near{background:var(--dom-tint); border-color:var(--dom)} .rh-pad.near .rh-padv{color:var(--dom)}
.rh-pad.off{background:var(--sub-tint); border-color:var(--sub)} .rh-pad.off .rh-padv{color:var(--sub)}
.rh-tlsvg{display:block; width:100%; max-width:100%; height:auto}
.rh-tlsvg .tl-off{fill:var(--sub-tint)} .rh-tlsvg .tl-near{fill:var(--dom-tint)} .rh-tlsvg .tl-ok{fill:var(--two-tint)}
.rh-tlsvg .tl-mid{stroke:var(--ink); stroke-width:1.5}
.rh-tlsvg .tl-lab{fill:var(--muted); font-family:var(--f-body); font-size:11px; font-weight:600}
.rh-tlsvg .tl-dot{fill:var(--ink)} .rh-tlsvg .tl-dot.sil{fill:var(--dom)}
.rh-stats{margin:0; font-size:14px; font-variant-numeric:tabular-nums}
.rh-verdict{margin:0; font-weight:600}
.rh-chal{display:flex; flex-direction:column; gap:8px; padding-top:8px; border-top:1px solid var(--line)}
.chal-list{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; max-width:64ch}
.rhythm{display:flex; flex-direction:column; gap:12px}
.rhythm .quiz-modes{margin:0}
.rh-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); container-type:inline-size}
.rh-title{margin:0; font-family:var(--f-display); font-size:1.45rem; line-height:1.15}
.rh-style{margin:2px 0 0; font-weight:600; font-size:14px; color:var(--muted)}
.rh-desc{margin:0; max-width:62ch}
.rh-pos{margin:0; font-weight:700; color:var(--dom)}
.rh-pos:empty{display:none}
.rh-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
@container (max-width:520px){ .rh-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rh-beat{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; padding:4px; border-radius:10px; background:var(--bg); border:1px solid var(--line)}
.rh-cell{display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 0 4px; border-radius:7px; min-width:0}
.rh-cell .rh-c{font-family:var(--f-chord); font-weight:700; font-size:13px; color:var(--muted); line-height:1}
.rh-cell:first-child .rh-c{color:var(--ink)}
.rh-cell .rh-s{font-size:19px; line-height:1.1; height:1.15em; color:var(--ink)}
.rh-cell .rh-d{font-size:12px; line-height:1; height:1em; color:var(--muted)}
.rh-cell.k-A .rh-s{color:var(--dom)}
.rh-cell.k-x .rh-s{color:var(--muted)}
.rh-cell.k-h .rh-s{color:var(--dom); opacity:.55}
.rh-cell.now{background:var(--ink)}
.rh-cell.now .rh-c, .rh-cell.now .rh-s, .rh-cell.now .rh-d{color:var(--bg); opacity:1}
.rh-legend{margin:0; font-size:12.5px; color:var(--muted)}
.rh-gapmsg{margin:0; padding:10px 12px; border-radius:10px; background:var(--dom-tint); font-weight:700}
.rh-play{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.rh-ctrl .field select{max-width:100%}
.rh-ctrl{align-items:flex-end}

/* Manche des gammes */
.sx{display:flex; flex-direction:column; gap:12px}
.sx-intro{margin:0; font-size:14px; color:var(--muted); max-width:62ch}
.sx-ctrl{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end}
.sx-drone{margin-top:0}
.sx-modes{display:flex; flex-wrap:wrap; gap:6px}
.sx-body{display:flex; flex-direction:column; gap:12px}
.sx-title{margin:0; font-family:var(--f-display); font-size:1.6rem; line-height:1.1}
.sx-desc{margin:0; max-width:64ch}
.sx-cc{color:var(--dom)}
.sx-notes li.sx-c{background:var(--dom); border-color:var(--dom); color:var(--on-fam)}
.sx-notes li.sx-c .ti{color:var(--on-fam)}
.sx-neck .sx-root{fill:var(--tonic)} .sx-neck .sx-col{fill:var(--dom)} .sx-neck .sx-sc{fill:var(--panel); stroke:var(--ink); stroke-width:1.3}
.sx-neck .sx-t{font-family:var(--f-chord); font-weight:700}
.sx-neck .sx-t-root, .sx-neck .sx-t-col{fill:var(--on-fam)} .sx-neck .sx-t-sc{fill:var(--ink)}
.sx-neck .sxd.dim{opacity:.16}
.sx-lg-root{background:var(--tonic)} .sx-lg-col{background:var(--dom)}

/* Leçons guidées */
.tabx{margin:0; padding:10px 12px; border-radius:10px; background:var(--bg); border:1px solid var(--line); font:600 14px/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; overflow-x:auto; white-space:pre}
.ex-row{display:flex; gap:8px; flex-wrap:wrap}
.ex-task{padding:12px; border-radius:12px; background:var(--two-tint)}
.mode-list{list-style:none; margin:0; padding:0 !important; display:flex; flex-direction:column; gap:10px}
.mode-list li{display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
.mode-list .ex-row{align-self:flex-start}
.mode-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.mode-n{font-family:var(--f-display); font-size:1.2rem}
.mode-d{font-weight:600; color:var(--muted); font-size:14px}
.mode-m{margin:0; font-size:14px}
.mode-m b{color:var(--dom)}
svg.strip{display:block; width:100%; max-width:100%; height:auto}
.strip .st-str{stroke:var(--ink); stroke-width:1.4}
.strip .st-fret{stroke:var(--line-strong); stroke-width:1.2}
.strip .st-nut{stroke:var(--ink); stroke-width:3.5}
.strip .st-num{fill:var(--muted); font-family:var(--f-chord); font-weight:600; font-size:9px}
.strip .st-dot{fill:var(--panel); stroke:var(--ink); stroke-width:1.3}
.strip .st-dot.home{fill:var(--ink)}
.strip .st-dot.col{fill:var(--dom); stroke:var(--dom)}
.strip .st-t{fill:var(--ink); font-family:var(--f-chord); font-weight:700; font-size:7.6px}
.strip .st-t.inv{fill:var(--bg)}

/* Mode d'emploi, progression, sections repliables */
.guide-card{margin-top:16px; padding:18px; border-radius:18px; background:var(--panel); border:1.5px solid var(--tonic); display:flex; flex-direction:column; gap:10px; max-width:760px}
.guide-title{margin:0; font-family:var(--f-display); font-weight:400; font-size:1.4rem}
.guide-steps{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px}
.guide-steps b{color:var(--tonic)}
.guide-foot{margin:0; font-size:14px; color:var(--muted)}
.guide-card .btn{align-self:flex-start}
.progress{margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); display:flex; flex-direction:column; gap:8px}
.progress .ph{margin:0; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.progress label{display:flex; align-items:flex-start; gap:10px; font-size:15px; cursor:pointer}
.progress input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--two); flex:none}
.progress .pd{display:block; font-size:13px; color:var(--muted)}
.progress .pnext{margin:2px 0 0; font-size:14px; font-weight:600; color:var(--two)}
.chip.done::before{content:"✓"; font-weight:800; color:var(--two)}
.chip.done[aria-pressed="true"]::before{color:inherit}
.folds{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.fold{border-bottom:1px solid var(--line)}
.fold > summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:center; padding:14px 2px}
.fold > summary::-webkit-details-marker{display:none}
.fold .fold-t{font-family:var(--f-display); font-size:1.2rem; line-height:1.2}
.fold .fold-s{grid-column:1; font-size:13px; color:var(--muted)}
.fold > summary .chev{grid-row:1 / span 2; grid-column:2; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s}
.fold[open] > summary .chev{transform:rotate(225deg)}
.fold-body{padding:0 0 20px; display:flex; flex-direction:column; gap:12px; min-width:0}
.fold-body.impro-ctrl{flex-direction:row; flex-wrap:wrap; margin:0}
.step-lesson{margin-top:14px; border-top:1px solid var(--line)}
.step-lesson .lesson-body{padding-bottom:4px}
.p-now{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.p-now .card-name{font-size:46px}

.f-other{--fam:var(--muted); --tint:var(--line)}
.views{display:flex; gap:2px; margin-top:18px; padding:4px; border:1px solid var(--line-strong); border-radius:14px; background:var(--panel); width:100%; max-width:640px}
.views button{flex:1 1 auto; border:0; background:transparent; color:var(--muted); font-weight:700; font-size:13px; padding:10px 4px; border-radius:10px; cursor:pointer; white-space:nowrap; min-width:0}
.badge{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; background:var(--two-tint); color:var(--two); font-family:var(--f-body); font-size:11px; font-weight:700; vertical-align:3px}
.views button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.view-main{max-width:760px; margin:26px auto 0; display:flex; flex-direction:column; gap:34px}
.chain-ctrl{margin:0 0 12px}
.neck-head .seg{flex-wrap:wrap}
.neck-head .seg button{padding:6px 9px}

/* Vocabulaire */
.vocab{display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
.encl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.encl li{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between}
.encl .seqn{font-family:var(--f-chord); font-weight:600; font-size:19px; letter-spacing:.01em}
.encl .seqn b{color:var(--fam); font-weight:700}
.encl .seqn i{font-style:normal; color:var(--muted); font-size:.8em; padding:0 3px}
.encl .lab{font-size:13px; color:var(--muted)}
.neck .pair{stroke:var(--line-strong); stroke-width:2.2}
.neck .pair.strong{stroke:var(--fam); stroke-width:3}
.lg-pair{width:16px; height:4px; border-radius:2px; background:var(--fam)}



/* Quiz */
.quiz-modes{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.quiz-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow)}
.quiz-prompt{margin:0; font-family:var(--f-display); font-size:1.35rem; line-height:1.2}
.quiz-opts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.quiz-opts button{border:1.5px solid var(--line-strong); background:var(--bg); border-radius:12px; padding:12px 10px; font-weight:700; font-size:15px; cursor:pointer; text-align:center}
.quiz-opts button.ok{border-color:var(--two); background:var(--two-tint)}
.quiz-opts button.ko{border-color:var(--dom); background:var(--dom-tint)}
.quiz-opts button:disabled{cursor:default}
.quiz-fb{margin:0; padding:12px; border-radius:12px; background:var(--bg); font-size:15px}
.quiz-act{display:flex; gap:10px; flex-wrap:wrap}
.check{display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:14px; color:var(--muted); cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--two)}

/* Manche */
.drill-ctrl{display:flex; flex-wrap:wrap; gap:12px 18px; margin-bottom:12px}
.drill-prompt{margin:0 0 10px; font-family:var(--f-display); font-size:1.3rem; line-height:1.25; min-height:1.6em}
.drill-neck .hitc{fill:transparent; cursor:pointer}
.drill-neck .hitc:hover{fill:var(--tint)}
.drill-neck .q-dot{fill:var(--tonic)}
.drill-neck .ans{fill:var(--two)} .drill-neck .bad{fill:var(--dom)}
.drill-neck .ans-t{fill:var(--on-fam); font-family:var(--f-chord); font-weight:700; font-size:10px}
.drill-names{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-top:10px}
.drill-names:empty{display:none}
.drill-neck .q-dot, .drill-neck .ans, .drill-neck .bad, .drill-neck .ans-t, .drill-neck text{pointer-events:none}
.drill-names button{border:1.5px solid var(--line-strong); background:var(--panel); border-radius:10px; padding:9px 2px; font-family:var(--f-chord); font-weight:600; font-size:16px; cursor:pointer; line-height:1.1}
.drill-names button.ok{border-color:var(--two); background:var(--two-tint)}
.drill-names button.ko{border-color:var(--dom); background:var(--dom-tint)}
.drill-fb{margin:10px 0 0; min-height:1.5em; font-weight:600}

/* Mes grilles */
#g-text{width:100%; font:600 17px/1.5 var(--f-chord); letter-spacing:.02em; color:var(--ink); background:var(--panel); border:1px solid var(--line-strong); border-radius:12px; padding:12px; resize:vertical}
.g-help{margin:8px 0 12px; font-size:13px; color:var(--muted)}
.g-row{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.g-status{margin:10px 0 0; font-size:14px; color:var(--muted)}
.g-status b{color:var(--ink)}
.g-detail{grid-area:auto}
.g-sheet-wrap, .p-top{container-type:inline-size}
.g-sheet-wrap .sheet{margin-bottom:10px}

/* Barre de lecture */
.transport{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--panel); border-top:1px solid var(--line); padding-top:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.transport-in{max-width:1160px; margin:0 auto; display:flex; align-items:center; gap:12px}
.play{display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:var(--bg); border:0; border-radius:999px; padding:11px 18px 11px 15px; font-weight:700; font-size:15px; cursor:pointer; flex:none}
.play svg{width:15px; height:15px}
.now-txt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums}
.now-txt .cn{color:var(--ink)}
.tempo{display:flex; align-items:center; gap:4px; flex:none}
.tempo button{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; font-size:18px; line-height:1; cursor:pointer}
.tempo output{font-family:var(--f-chord); font-weight:600; font-size:19px; min-width:2.4ch; text-align:center; font-variant-numeric:tabular-nums}
.tempo .unit{font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--muted); margin-right:2px}
.switch{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; cursor:pointer; flex:none}
.switch input{appearance:none; -webkit-appearance:none; width:38px; height:22px; border-radius:11px; background:var(--line-strong); position:relative; margin:0; cursor:pointer; transition:background .2s}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--panel); transition:transform .2s}
.switch input:checked{background:var(--two)}
.switch input:checked::after{transform:translateX(16px)}
.credits{margin-top:40px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); max-width:80ch}
.credits p{margin:0}
.credits a{color:inherit}
.play[data-loading="true"]{opacity:.75}
.audio-msg{max-width:1160px; margin:0 auto 10px; padding:8px 12px; border-radius:10px; background:var(--dom-tint); color:var(--ink); font-size:14px; font-weight:600}
@media (max-width:520px){ .now-txt{display:none} .transport-in{justify-content:space-between} }
@media (max-width:380px){ .tempo .unit{display:none} .play{padding:10px 14px 10px 12px} }

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ---------- Impro : morceaux, grille dessinée, plans, solos ---------- */
.songs-wrap{display:flex; flex-direction:column; gap:12px}
.songs{display:flex; flex-direction:column; gap:10px}
.sg-h{margin:8px 0 0; display:flex; align-items:baseline; gap:10px}
.sg-h b{font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.sg-h span{font-size:13px; color:var(--muted)}
.song{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; width:100%; height:100%; text-align:left; padding:12px 13px 11px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer}
.song:hover{border-color:var(--ink)}
.song.sel{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.sg-n{font-weight:700; font-size:15.5px; line-height:1.25}
.sg-lv{grid-column:2; grid-row:1; font-size:10px; letter-spacing:1px; color:var(--dom); white-space:nowrap; align-self:center}
.sg-d{grid-column:1 / -1; font-size:13px; color:var(--muted); line-height:1.35}
.sg-strip{grid-column:1 / -1; display:flex; gap:1px; height:8px; margin:6px 0 3px; border-radius:3px; overflow:hidden}
.sg-strip i{display:block; min-width:2px; background:var(--fam)}
.sg-m{grid-column:1 / -1; font-size:12px; color:var(--muted)}
.sg-m b{color:var(--two); font-weight:700}

/* La page d’un morceau */
.tp-back{margin-bottom:-24px}
.bt-cyc{margin:0; font-size:13.5px; font-weight:600; color:var(--two)}
.bt-run{align-items:flex-end}
.bt-run .play[disabled]{opacity:.45; cursor:default}
.bt-st{margin:0}
.bt-st:empty{display:none}
.bt-advice{display:flex; flex-direction:column; gap:12px}
.bt-advice .sec-h{margin-bottom:0}
.bt-more{display:flex; flex-direction:column; gap:8px}
.bt-mh{margin:0; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.bt-chips{display:flex; flex-wrap:wrap; gap:6px}
.bt-chips .btn svg{width:12px; height:12px}
.bt-chips .btn{border-radius:14px; text-align:left}
.bt-chips .btn[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.bt-sol{margin:0; padding-left:18px; font-size:14.5px; display:flex; flex-direction:column; gap:4px}
#bt-set-body .bt-ctrl + .bt-ctrl{margin-top:-4px}
.g-save{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-top:14px}
.g-save .field{flex:1 1 12em}
.g-input .sec-h{margin-bottom:0}

/* La grille dessinée : 4 mesures par ligne, 16 colonnes de temps */
.chart-wrap{container-type:inline-size; min-width:0}
.chart{display:flex; flex-direction:column; gap:6px}
.chart-empty{margin:0; padding:22px 16px; border:1.5px dashed var(--line-strong); border-radius:14px; color:var(--muted); text-align:center; font-size:14.5px}
.crow{display:grid; grid-template-columns:21px repeat(16,minmax(0,1fr)); align-items:stretch}
.crow.sec{margin-top:12px}
.cnum{grid-column:1; grid-row:2; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding-top:6px}
.cnum b{display:grid; place-items:center; min-width:19px; height:19px; padding:0 3px; border-radius:5px; background:var(--ink); color:var(--bg); font-size:11.5px; font-weight:800; line-height:1}
.cnum i{font-style:normal; font-size:10px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; padding-left:1px}
.cbar{grid-row:2; min-height:58px; border-left:1.5px solid var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cbar.last{border-right:1.5px solid var(--ink)}
.cbar.rep-s{border-left-width:4px}
.cbar.rep-e{border-right-width:4px}
.crow .ch{grid-row:2; z-index:1; flex:none; margin:4px 2px; padding:5px 5px 4px; gap:2px; min-width:0; background:var(--tint); border-radius:8px}
.crow .ch:hover{background:var(--tint); box-shadow:inset 0 0 0 1.5px var(--fam)}
.crow .ch.dashed{background:repeating-linear-gradient(135deg,var(--tint) 0 6px,transparent 6px 9px)}
.crow .ch .nm{font-size:19px}
.crow .ch.b2{margin:4px 1px; padding:5px 3px 4px}
.crow .ch.b1{margin:4px 1px; padding:5px 2px 4px}
.crow .ch.b2 .nm{font-size:15px; letter-spacing:-.01em}
.crow .ch.b2 .nm .cq{font-size:.66em}
.crow .ch.b1 .nm{font-size:12.5px}
.crow .ch.b2.lg .nm{font-size:13px}
.crow .ch.b4.lg .nm{font-size:16px}
.crow .ch.b1.lg .nm{font-size:11px}
.crow .ch .nm .cq{font-size:.72em}
.crow .ch .fn{font-family:var(--f-chord); font-weight:600; font-size:12px; letter-spacing:.01em; color:var(--muted)}
.crow .ch.b1 .fn{font-size:10px}
.crow .ch .fn::before{display:none}
.crow .ch.sel:not(.now){box-shadow:inset 0 0 0 2px var(--fam)}
.crow .ch.now{background:var(--fam); color:var(--on-fam)}
.crow .ch.now .fn{color:var(--on-fam)}
.zone{grid-row:1; min-width:0; margin:0 2px 4px; padding:3px 7px; border-radius:6px; background:var(--z); color:var(--ink); font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zone.z0{--z:var(--z0)} .zone.z1{--z:var(--z1)} .zone.z2{--z:var(--z2)}
.zone.cont{color:var(--muted); font-weight:600}
.brk{--brk:var(--two); grid-row:3; position:relative; min-width:0; height:25px; margin:0 5px}
.brk::before{content:""; position:absolute; left:0; right:0; top:2px; height:8px; border:2px solid var(--brk); border-top:0; border-radius:0 0 6px 6px}
.brk.cont-l{margin-left:0} .brk.cont-l::before{border-left:0; border-bottom-left-radius:0}
.brk.cont-r{margin-right:0} .brk.cont-r::before{border-right:0; border-bottom-right-radius:0}
.brk.sub{--brk:var(--sub)} .brk.sub::before{border-style:dashed; border-top:0}
.brk i{position:absolute; left:-6px; right:-6px; top:11px; text-align:center; font-style:normal; font-weight:700; font-size:11px; line-height:1.2; color:var(--brk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brk.arr::before{border-right:0; border-bottom-right-radius:0; right:8px}
.brk.arr::after{content:""; position:absolute; right:0; top:4px; border-left:9px solid var(--brk); border-top:5px solid transparent; border-bottom:5px solid transparent}
.brk.lone{--brk:var(--dom); height:16px; margin:0 3px 0 45%}
.brk.lone::before{border:0; border-bottom:2px solid var(--brk); border-radius:0}
.brk.lone.sub{--brk:var(--sub)} .brk.lone.sub::before{border-bottom-style:dashed}
.brk.lone.run{margin-left:22%}
.brk.lone.bk{--brk:var(--dom)} .brk.lone.bk::before{border-bottom-style:dashed}
@container (min-width:560px){
  .crow{grid-template-columns:30px repeat(16,minmax(0,1fr))}
  .crow .ch, .crow .ch.b2, .crow .ch.b1{margin:5px 3px; padding:7px 8px 6px}
  .crow .ch .nm{font-size:23px}
  .crow .ch.b2 .nm{font-size:19px}
  .crow .ch.b2 .nm .cq{font-size:.72em}
  .crow .ch.b2.lg .nm{font-size:16px}
  .crow .ch.b4.lg .nm{font-size:20px}
  .crow .ch.b1 .nm{font-size:15px}
  .crow .ch .fn{font-size:13px}
  .cbar{min-height:66px}
  .zone{font-size:11px}
}
.chart-help{margin-top:12px}
.chart-help summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--tonic)}
.ch-legend{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; max-width:66ch}
.ch-legend li{display:grid; grid-template-columns:86px minmax(0,1fr); gap:12px; align-items:start}
.lg-cells{display:flex; gap:3px; flex-wrap:wrap; padding-top:3px}
.lg-cells .sw{width:14px; height:14px; border-radius:4px}
.lg-zone{justify-self:start; padding:2px 6px; border-radius:6px; background:var(--z0); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.lg-num{justify-self:start; font-family:var(--f-chord); font-weight:600; font-size:15px; color:var(--muted)}
.lg-brk{display:block; width:62px; height:10px; margin-top:5px; border:2px solid var(--two); border-top:0; border-radius:0 0 6px 6px}
.lg-arr{display:block; position:relative; width:62px; height:2px; margin-top:10px; background:var(--dom)}
.lg-arr::after{content:""; position:absolute; right:-2px; top:-4px; border-left:9px solid var(--dom); border-top:5px solid transparent; border-bottom:5px solid transparent}
.lg-sec{display:grid; place-items:center; width:19px; height:19px; border-radius:5px; background:var(--ink); color:var(--bg); font-size:11.5px; font-weight:800}

/* Plan d’impro en cours : reste visible pendant qu’on lit la grille */
.plan-run{position:sticky; top:calc(env(safe-area-inset-top,0px) + 8px); z-index:6; display:flex; flex-direction:column; gap:7px; padding:12px 14px; border-radius:18px; background:var(--panel); border:1.5px solid var(--two); box-shadow:0 14px 30px -18px rgba(0,0,0,.5)}
.plan-run[hidden]{display:none}
.pr-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; min-width:0}
.pr-top .link{font-size:13px}
.pr-title{margin:0; min-width:0; font-weight:700; font-size:14.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pr-title span{font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--two); margin-right:4px}
.pr-dots{list-style:none; margin:2px 0 0; padding:0; display:flex; gap:4px}
.pr-dots li{flex:1; height:4px; border-radius:2px; background:var(--line)}
.pr-dots li.done{background:var(--two)}
.pr-dots li.cur{background:var(--ink)}
.pr-step{margin:0; font-size:14px}
.pr-step span{color:var(--muted); font-variant-numeric:tabular-nums}
.pr-txt{margin:0; font-size:14.5px; line-height:1.45; max-width:66ch}
.pr-ic{padding:6px 12px; font-size:15px}
.pr-mute{margin:0; padding:7px 10px; border-radius:10px; background:var(--dom-tint); font-size:13.5px; font-weight:600}
.pr-nav{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.pr-nav .btn svg{width:12px; height:12px}
.pr-nav .btn[disabled]{opacity:.4; cursor:default}
.pr-msg{margin:0; font-size:13.5px; color:var(--two); font-weight:600; min-height:1.2em}

/* Liste des plans */
.plans{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.plan{border-bottom:1px solid var(--line); scroll-margin-top:12px}
.plan > summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; align-items:center; padding:14px 2px}
.plan > summary::-webkit-details-marker{display:none}
.pl-n{font-family:var(--f-display); font-size:1.15rem; line-height:1.2}
.pl-m{grid-column:1; font-size:13px; color:var(--muted)}
.plan .chev{grid-row:1 / span 2; grid-column:2; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s}
.plan[open] .chev{transform:rotate(225deg)}
.pl-body{padding:0 0 20px; display:flex; flex-direction:column; gap:12px; font-size:15px}
.pl-body p{margin:0; max-width:66ch}
.pl-steps{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; max-width:66ch}
.pl-tag{display:inline-block; margin-left:4px; padding:1px 8px; border-radius:999px; background:var(--dom-tint); color:var(--dom); font-size:11.5px; font-weight:700; vertical-align:1px}

/* Solos à étudier */
.so-method{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; font-size:15px; max-width:66ch}
.solos{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; margin-top:12px}
.solo{display:flex; flex-direction:column; gap:7px; padding:15px; border-radius:16px; border:1px solid var(--line); background:var(--panel); scroll-margin-top:16px; transition:box-shadow .3s}
.solo p{margin:0; font-size:14.5px}
.solo .eyebrow{font-size:11px}
.so-t{margin:0; font-family:var(--f-display); font-weight:400; font-size:1.25rem; line-height:1.15}
.solo .so-who{color:var(--muted); font-size:13.5px}
.solo .ex-row{margin-top:auto; padding-top:4px}
.solo.flash{box-shadow:0 0 0 2.5px var(--two)}

/* ---------- Plans à jouer ---------- */
.licks{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; align-items:start}
.licks .sg-h{grid-column:1 / -1}
.licks .ph{grid-column:1 / -1; margin:2px 0 8px; border-color:var(--ink)}
.lk{min-width:0}
.lk-h{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; width:100%; text-align:left; padding:12px 13px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer}
.lk-h:hover{border-color:var(--ink)}
.lk-h[aria-expanded="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.lk-t{font-weight:700; font-size:15.5px; line-height:1.25}
.lk-c{grid-column:1 / -1; font-family:var(--f-chord); font-weight:600; font-size:14px; color:var(--muted)}
.lk-mini{grid-column:1 / -1; display:block; width:100%; max-width:220px; height:auto; margin-top:6px}
.lk-mini line{stroke:var(--line-strong); stroke-width:1}
.lk-mini line.fr{stroke:var(--line)}
.lk-mini circle{fill:var(--tonic)}
.bt-licks{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px}
.lk-chip{display:flex; flex-direction:column; gap:2px; text-align:left; padding:10px 11px; border-radius:12px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); cursor:pointer}
.lk-chip:hover{border-color:var(--ink)}
.lk-chip b{font-size:14px; line-height:1.25}
.lk-chip span{font-size:12px; color:var(--muted)}
.lk-chip .lk-mini{max-width:150px; margin-top:4px}
.ph-k{display:inline-block; margin-left:2px; font-size:13.5px; color:var(--muted)}
.ph-desc b.cn{font-family:var(--f-chord)}
/* Le plan sur le manche */
.ph-neck{overflow-x:auto; -webkit-overflow-scrolling:touch}
.ph-neck:empty{display:none}
svg.ph-neckv{display:block; width:100%; min-width:300px; max-width:560px; height:auto}
.ph-neckv .st{stroke:var(--line-strong); stroke-width:1.2}
.ph-neckv .fr{stroke:var(--line-strong); stroke-width:1}
.ph-neckv .nut{stroke:var(--ink); stroke-width:4}
.ph-neckv .fn{fill:var(--muted); font-size:11px; font-weight:600; font-family:var(--f-body)}
.ph-neckv .sn{fill:var(--muted); font-size:10px; font-weight:700; font-family:var(--f-chord)}
.ph-neckv .pn-d circle{fill:var(--panel); stroke:var(--tonic); stroke-width:1.8}
.ph-neckv .pn-d text{fill:var(--tonic); font-family:var(--f-chord); font-weight:700; font-size:10.5px}
.ph-neckv .pn-d.ct circle{fill:var(--tonic)}
.ph-neckv .pn-d.ct text{fill:var(--on-fam)}
.ph-neckv .pn-d.on circle{fill:var(--dom); stroke:var(--dom)}
.ph-neckv .pn-d.on text{fill:var(--on-fam)}

/* v34 : manche sombre partagé et « Quoi jouer » */
:root{--nk-bg:#1C1915;--nk-bg2:#26221D;--nk-fret:#6A6055;--nk-str:#C7B38E;--nk-inl:#3A332C;--nk-txt:#A99E90;--nk-rt:#E5484D;--nk-ct:#F2A93B;--nk-sc:#4C8DF0;--nk-on:#FFFFFF}
.ph-neck{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.ph-neckv{border-radius:14px}
.ph-neckv .nk-bg{fill:var(--nk-bg)}
.ph-neckv .nk-inl{fill:var(--nk-inl)}
.ph-neckv .st{stroke:var(--nk-str); stroke-width:1.1; opacity:.85}
.ph-neckv .fr{stroke:var(--nk-fret); stroke-width:1.4}
.ph-neckv .nut{stroke:#E9E2D6; stroke-width:4}
.ph-neckv .fn{fill:var(--nk-txt)}
.ph-neckv .sn{fill:var(--nk-txt)}
.ph-neckv .pn-d circle{fill:var(--nk-sc); stroke:var(--nk-bg); stroke-width:1.5}
.ph-neckv .pn-d text{fill:#fff}
.ph-neckv .pn-d.ct circle{fill:var(--nk-ct)}
.ph-neckv .pn-d.ct text{fill:#1C1915}
.ph-neckv .pn-d.rt circle{fill:var(--nk-rt)}
.ph-neckv .pn-d.rt text{fill:#fff}
.ph-neckv .pn-d.on circle{stroke:var(--nk-on); stroke-width:3.2; filter:drop-shadow(0 0 5px rgba(255,214,140,.9))}
.ph-neckv .pn-d.on text{font-size:12px}
.gi .field{margin-top:4px}
.gi-grid{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px}
.gi-bar{font-family:var(--f-chord); font-weight:700; font-size:13px; padding:5px 9px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--muted)}
.gi-bar.on{color:var(--ink); border-color:var(--ink)}
.gi-opts{display:flex; flex-direction:column; gap:10px; margin:12px 0 14px}
.gi-opt{display:flex; flex-direction:column; gap:5px}
.gi-ol{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.gi-opt .seg{flex-wrap:wrap}
.gi-write{width:100%; justify-content:center}
.gi-err{color:var(--off); font-weight:600; margin:10px 0 0}
.gi-list{display:flex; flex-direction:column; gap:14px; margin-top:14px}
.gi-card{border:1px solid var(--line); background:var(--panel); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:9px; scroll-margin-top:12px}
.gi-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.gi-h b{font-size:16px}
.gi-l{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--nk-ct); color:#1C1915; font-weight:800; font-size:13px}
.gi-src{font-size:12.5px; color:var(--muted)}
.gi-roll{display:block; width:100%; height:auto}
.gi-roll .gr-bg{fill:var(--nk-bg)}
.gi-roll .gr-bar{stroke:var(--nk-fret); stroke-width:1}
.gi-roll .gr-ch{fill:#E9E2D6; font-family:var(--f-chord); font-weight:700; font-size:10.5px}
.gi-roll .gr-n.rt{fill:var(--nk-rt)} .gi-roll .gr-n.ct{fill:var(--nk-ct)} .gi-roll .gr-n.sc{fill:var(--nk-sc)}
.gi-roll .gr-n.on{stroke:#fff; stroke-width:1.6}
.gi-why,.gi-try{margin:0; font-size:14.5px; line-height:1.45}
.gi-st{margin:0; font-size:13px; color:var(--muted)}
.gi-act{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.gi-go{display:inline-flex; align-items:center; gap:8px}
.gi-go svg{width:14px; height:14px}
.gi-k{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.gi-k::before{content:""; width:10px; height:10px; border-radius:50%; display:inline-block}
.gi-k.rt::before{background:var(--nk-rt)} .gi-k.ct::before{background:var(--nk-ct)} .gi-k.sc::before{background:var(--nk-sc)}
#view-idees .ph{margin-top:-4px}
.sh-msg{margin:0; padding:8px 14px; background:#FDECD9; color:#7A3B06; font-size:13.5px; font-weight:600}
/* v42 : le Studio */
body.sh-on{overflow:hidden}
.shell{position:fixed; inset:0; z-index:35; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); padding-top:env(safe-area-inset-top,0px)}
.sh-top{flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px max(14px,env(safe-area-inset-left,0px)) 6px}
.sh-logo{font-family:var(--f-display); font-size:22px; letter-spacing:-.01em; color:#C2410C} .sh-logo span{display:block; font-family:var(--f-body); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:-3px}
.sh-icons{display:flex; gap:6px; align-items:center}
.sh-ic{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); display:grid; place-items:center; cursor:pointer}
.sh-ic svg{width:16px; height:16px}
.sh-more{min-height:36px; padding:6px 13px; border-radius:999px; border:1px solid var(--ink); background:var(--ink); color:var(--bg); font:inherit; font-size:13px; font-weight:700; cursor:pointer}
.sh-neck{flex:none; position:relative; z-index:3}
#shell .stage{position:relative; top:auto; margin:0; padding:4px 0 6px; border-bottom:1px solid var(--line); background:var(--bg)}
#shell .stage-opt{position:absolute; left:0; right:0; top:100%; z-index:6; background:var(--bg); box-shadow:0 14px 26px -14px rgba(0,0,0,.4); border-bottom:1px solid var(--line); max-height:55vh; padding-bottom:12px}
#shell .stage-tip{display:none}
.sh-panel{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:12px max(14px,env(safe-area-inset-left,0px)) 24px}
.sh-tabs{flex:none; display:flex; border-top:1px solid var(--line); background:var(--panel); padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px))}
.sh-tabs button{flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:2px; min-height:50px; justify-content:center; border:0; background:transparent; color:var(--muted); font:inherit; font-size:11.5px; font-weight:700; cursor:pointer}
.sh-tabs svg{width:22px; height:22px}
.sh-tabs button[aria-pressed="true"]{color:var(--ink)} .sh-tabs button[aria-pressed="true"] svg{color:#C2410C}
.sh-back{position:fixed; top:calc(8px + env(safe-area-inset-top,0px)); right:12px; z-index:34; min-height:36px; padding:6px 14px; border-radius:999px; border:0; background:#C2410C; color:#fff; font:inherit; font-size:13px; font-weight:800; box-shadow:0 6px 18px -6px rgba(0,0,0,.4); cursor:pointer}
.sh-sec{display:flex; flex-direction:column; gap:10px; margin-bottom:22px}
.sh-row{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end}
.sh-chips{display:flex; flex-wrap:wrap; gap:6px}
.sh-scroll{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px} .sh-scroll::-webkit-scrollbar{display:none} .sh-scroll .chip{flex:none}
.sh-tip,.sh-meta{margin:0; font-size:13px; color:var(--muted)}
.sh-h{margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)} .sh-h span{letter-spacing:0; text-transform:none; font-weight:600; margin-left:6px}
.sh-big{display:inline-flex; align-items:center; gap:8px}
.sh-card{all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--panel); cursor:pointer}
.sh-card b{font-size:15px} .sh-card span{font-size:13px; color:var(--muted)}
.sh-card.hot{background:var(--nk-bg); border-color:var(--nk-bg); color:#F4EEE4} .sh-card.hot b{color:var(--nk-ct)} .sh-card.hot span{color:#D8CFC2}
.sh-links{display:flex; flex-wrap:wrap; gap:6px}
.sh-glist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.sh-g{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:11px 12px 10px}
.sh-g.sel{border-color:#C2410C}
.sh-gh{display:flex; flex-direction:column} .sh-gh b{font-size:15px} .sh-gh span{font-size:12.5px; color:var(--muted)}
.sh-g .stg-chips{padding:7px 0 6px}
.sh-g .stg-gi{display:none}
.sh-ga{display:flex; gap:8px; align-items:center}
.sh-sm{min-height:36px; padding:6px 14px; display:inline-flex; align-items:center; gap:6px; font-size:14px}
.sh-sm svg{width:12px; height:12px}
.sh-jh{display:flex; justify-content:space-between; align-items:flex-start; gap:10px} .sh-jh b{display:block; font-size:16px} .sh-jh span{font-size:12.5px; color:var(--muted)}
.sh-jc{display:flex; flex-wrap:wrap; gap:6px}
.sh-jcc{font-family:var(--f-chord); font-weight:700; font-size:15px; min-width:44px; text-align:center; padding:8px 10px; border-radius:10px; border:1px solid var(--line-strong); background:var(--panel); transition:background .12s}
.sh-jcc.on{background:var(--nk-ct); border-color:var(--nk-ct); color:#1C1915}
.sh-tr{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.sh-play{min-width:140px}
.sh-grid4{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px}
.sh-grid4 .field select{width:100%}
.sh-write{flex:1 1 auto; justify-content:center}
.sh-ideas{display:flex; flex-direction:column; gap:12px}
.sh-idea{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:11px 12px; display:flex; flex-direction:column; gap:8px}
.sh-idea.due{border-color:var(--nk-ct); background:rgba(242,169,59,.08)}
.sh-ih{display:flex; align-items:center; gap:8px} .sh-ih b{font-size:15px}
.sh-due{margin:0; font-size:13.5px}
.sh-ok{font-size:12.5px; color:var(--muted)}
.chip.ok{border-color:#3FA46A}
.sh-tab{overflow-x:auto}
.gi-voc{display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--line); padding-top:9px}
.gi-voc p{margin:0}
.gi-voc.due{background:rgba(242,169,59,.12); border:1px solid var(--nk-ct); border-radius:12px; padding:10px}
.gi-know{align-self:flex-start}
.gi-home-w{margin-bottom:4px}
.gi-home{all:unset; box-sizing:border-box; width:100%; display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; background:var(--nk-bg); color:#F4EEE4; cursor:pointer}
.gi-home b{font-size:15.5px; color:var(--nk-ct)} .gi-home span{font-size:13.5px; opacity:.9}
.gi-home.calm b{color:#F4EEE4}
.gi-home:focus-visible{outline:2px solid var(--nk-ct); outline-offset:2px}
.gi-chk{display:flex; flex-direction:column; gap:6px; margin-top:6px}
.gi-chk-r{margin:0; font-size:14.5px; padding:9px 11px; border-radius:10px; background:var(--panel); border:1px solid var(--line)}
.gi-chk-r.ok{border-color:#3FA46A} .gi-chk-r.mid{border-color:var(--nk-ct)} .gi-chk-r.ko{border-color:var(--off)}
.gi-chk-m{margin:0; font-size:13.5px; color:var(--muted)}
/* v36 : barre d’onglets en bas, quatre modes */
:root{--tb:60px}
body:not(.fo) .views{position:fixed; left:0; right:0; bottom:0; z-index:30; margin:0; max-width:none; width:auto; border:0; border-top:1px solid var(--line); border-radius:0; background:var(--panel); gap:0;
  padding:5px max(6px, env(safe-area-inset-left,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(6px, env(safe-area-inset-right,0px)); box-shadow:0 -6px 18px -12px rgba(0,0,0,.25)}
.views button{flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:50px; padding:4px 2px; font-size:11.5px; font-weight:700; color:var(--muted); background:transparent; border-radius:12px}
.views button svg{width:22px; height:22px; flex:none}
.views button[aria-pressed="true"]{background:transparent; color:var(--ink)}
.views button[aria-pressed="true"] svg{color:var(--nk-ct)}
body:not(.fo) .transport{bottom:calc(var(--tb) + env(safe-area-inset-bottom,0px)); padding-bottom:10px}
body:not(.fo) .pc-banner{bottom:calc(var(--tb) + 10px + env(safe-area-inset-bottom,0px))}
body:not(.fo) .pc-banner.above{bottom:calc(var(--tb) + 74px + env(safe-area-inset-bottom,0px))}
body:not(.fo) .m-mini{bottom:calc(var(--tb) + 14px + env(safe-area-inset-bottom,0px))}
body:not(.fo) .page{padding-block-end:calc(176px + env(safe-area-inset-bottom,0px))}
.top .lede{display:none}
body[data-v="idees"] .top .settings .field:not(:has(#instr)), body[data-v="plans"] .top .settings .field:not(:has(#instr)), body[data-v="solos"] .top .settings .field:not(:has(#instr)), body[data-v="tools"] .top .settings .field{display:none}
#tools-open[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
/* v37 : la scène (grand manche fixe), en-tête compact, aide repliée */
.stage{position:sticky; top:env(safe-area-inset-top,0px); z-index:15; background:var(--bg); margin:6px calc(-1 * max(16px, env(safe-area-inset-left,0px))) 4px; padding:6px 0; border-bottom:1px solid var(--line)}
.stage-cap{display:flex; gap:8px; align-items:baseline; padding:0 16px 4px; min-height:22px; white-space:nowrap; overflow:hidden}
#stage-t{font-size:14.5px; font-family:var(--f-chord)}
#stage-s{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.stage-neck{overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; padding:0 10px; scrollbar-width:none}
.stage-neck::-webkit-scrollbar{display:none}
svg.neck.stg-svg{width:auto; max-width:none; height:auto; display:block}
.stg-svg .stg-hit{fill:transparent; cursor:pointer}
.stg-svg .stg-hit.tap{fill:rgba(255,236,200,.18)}
.stg-svg .pn-d{pointer-events:none}
.stg-svg .pn-d circle{fill:var(--nk-sc); stroke:var(--nk-bg); stroke-width:1.5}
.stg-svg .pn-d text{fill:#fff; font-family:var(--f-chord); font-weight:700; font-size:10px}
.stg-svg .pn-d.ct circle{fill:var(--nk-ct)} .stg-svg .pn-d.ct text{fill:#1C1915}
.stg-svg .pn-d.rt circle{fill:var(--nk-rt)} .stg-svg .pn-d.rt text{fill:#fff}
.stg-svg .pn-d.dim{opacity:.35}
.stg-svg .pn-d.on circle{stroke:#fff; stroke-width:3.2; filter:drop-shadow(0 0 6px rgba(255,214,140,.95))}
.stage-lg{display:flex; gap:12px; align-items:center; padding:5px 16px 0; font-size:12px; color:var(--muted); flex-wrap:wrap}
.stage-tip{margin-left:auto}
.stage.opt-open{position:relative}
.stage-btns{margin-left:auto; display:flex; gap:6px; flex:none}
.stg-b{font:inherit; font-size:12.5px; font-weight:700; min-height:32px; padding:4px 10px; border-radius:999px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); cursor:pointer}
.stg-b[aria-expanded="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.stage-opt{padding:8px 16px 2px; display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow:auto}
.so-row{display:flex; flex-direction:column; gap:4px}
.so-row .seg{flex-wrap:wrap}
.so-nav{flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap}
.so-nav b{min-width:56px; text-align:center; font-size:13px}
.so-msg{margin:0; font-size:13px; color:var(--off); min-height:0}
.so-msg:empty{display:none}
.mx-row{display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; margin:8px 0}
.mx-row label{grid-column:1/-1; font-weight:600; font-size:14px}
.mx-row input{width:100%; accent-color:var(--nk-ct); min-height:32px}
.mx-row output{font-variant-numeric:tabular-nums; font-size:13px; color:var(--muted); min-width:48px; text-align:right}
.stage-cap #stage-s{flex:1 1 auto; min-width:0}
body.stg-on #ph-neck{display:none}
.stg-chips{display:flex; flex-wrap:wrap; gap:6px; padding:8px 2px 12px}
.bt-list li{display:flex; flex-direction:column} .bt-list li > .song{height:auto; flex:1 1 auto}
html:has(body.stg-on){scroll-padding-top:calc(215px + env(safe-area-inset-top,0px))}
body.stg-on .gi-card, body.stg-on #phrase{scroll-margin-top:calc(215px + env(safe-area-inset-top,0px))}
.stg-ch{font-family:var(--f-chord); font-weight:700; font-size:13.5px; min-height:36px; padding:6px 11px; border-radius:9px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); cursor:pointer}
.stg-ch.on{background:var(--nk-ct); border-color:var(--nk-ct); color:#1C1915}
.stg-gi{font-family:var(--f-body); font-size:13px; color:var(--ink); border-style:dashed}
.gi-rollb{all:unset; display:block; cursor:pointer; border-radius:10px}
.gi-rollb:focus-visible{outline:2px solid var(--nk-ct); outline-offset:2px}
.bt-q{width:100%; font:inherit; min-height:44px; padding:8px 12px; border-radius:12px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); margin:4px 0 10px; box-sizing:border-box}
/* En-tête sur une ligne */
.top{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding-bottom:2px}
.top .intro{flex:1 1 auto; min-width:0}
.top .eyebrow{display:none}
.top h1{font-size:24px; line-height:1.1; margin:0}
.top .settings{display:flex; flex-wrap:wrap; gap:6px; align-items:flex-end}
.top .tu-open{min-height:40px; padding:8px 11px}
.top .tu-open span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
#help-btn{font-weight:800; min-width:40px; justify-content:center}
.top .intro{flex:1 1 0} .top h1{font-size:20px; white-space:nowrap}
.top .tu-open{min-height:36px; min-width:36px; padding:6px 8px; justify-content:center}
#help-btn{min-width:36px}
.top .settings{gap:5px}
#help-btn[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
body[data-v="idees"] .top .settings .field, body[data-v="songs"] .top .settings .field, body[data-v="plans"] .top .settings .field, body[data-v="solos"] .top .settings .field, body[data-v="tools"] .top .settings .field{display:none!important}
/* L’aide : repliée tant qu’on ne touche pas « ? » */
body:not(.help) #view-idees .sx-intro, body:not(.help) #gi-empty, body:not(.help) .gi-why, body:not(.help) .gi-try,
body:not(.help) #view-songs ol.how, body:not(.help) #view-songs .caption, body:not(.help) #view-plans ol.how,
body:not(.help) #view-solos .so-method, body:not(.help) #view-solos .sx-intro, body:not(.help) #phrase > .caption{display:none}
body:not(.help) .sx-intro, body:not(.help) #view-home .pf-why, body:not(.help) #view-home .ho-sub, body:not(.help) #co-where-d .caption{display:none}
/* v35 : un seul manche — le même manche sombre et les mêmes couleurs dans tout l’outil
   rouge = fondamentale (sur la carte : la couleur de la fonction), or = note de l’accord, bleu = autre note de la gamme */
svg.neck, svg.imp-neck{background:var(--nk-bg); border-radius:12px}
.neck .nk-str, .imp-st{stroke:var(--nk-str); opacity:.85}
.neck .nk-fret, .imp-fr{stroke:var(--nk-fret)}
.neck .nk-nut, .imp-fr.nut{stroke:#E9E2D6}
.neck .nk-inlay{fill:var(--nk-inl)}
.neck .nk-num, .neck .nk-sname, .imp-fn, .imp-sn{fill:var(--nk-txt)}
.neck .nk-shape, .neck .nk-box{fill:rgba(242,169,59,.16); stroke:var(--nk-ct)}
.neck .nk-inv{fill:var(--nk-ct)}
.neck .d-ct{fill:var(--nk-ct)} .neck .t-ct{fill:#1C1915}
.neck .d-ten{fill:var(--nk-sc); stroke:none} .neck .t-ten{fill:#fff}
.neck .d-avoid{fill:transparent; stroke:#8A8075} .neck .t-avoid{fill:var(--nk-txt)}
.neck .pair{stroke:rgba(233,226,214,.35)} .neck .pair.strong{stroke:var(--nk-ct)}
.sx-neck .sx-root{fill:var(--nk-rt)} .sx-neck .sx-col{fill:var(--nk-ct)} .sx-neck .sx-sc{fill:var(--nk-sc); stroke:none}
.sx-neck .sx-t-root{fill:#fff} .sx-neck .sx-t-col{fill:#1C1915} .sx-neck .sx-t-sc{fill:#fff}
.neck rect[style*="--tint"]{fill:rgba(242,169,59,.10)!important}
.neck .d-root{fill:var(--nk-rt)} .neck .t-root{fill:#fff} .lg-root{background:var(--nk-rt)}
.sx-lg-root{background:var(--nk-rt)} .sx-lg-col{background:var(--nk-ct)}
.lg-ct{background:var(--nk-ct)} .lg-ten{background:var(--nk-sc); border:0} .lg-avoid{border-color:#8A8075}
.lg-shape{background:rgba(242,169,59,.25); border-color:var(--nk-ct)} .lg-pair{background:var(--nk-ct)}
.drill-neck .hitc:hover{fill:rgba(255,255,255,.08)} .drill-neck .q-dot{fill:var(--nk-rt)} .drill-neck .ans{fill:var(--nk-ct)} .drill-neck .ans-t{fill:#1C1915} .drill-neck .bad{fill:#FF7A59}
.imp-d{fill:var(--nk-sc); stroke:none} .imp-d.col{fill:var(--nk-ct); stroke:none} .imp-d.root{fill:var(--nk-rt)}
.imp-dl, .imp-dl.root{fill:#fff} .imp-dl.col{fill:#1C1915}
/* ---------- Notes guides : une carte par accord ---------- */
.gt{display:flex; flex-direction:column; gap:8px}
.gt-head{display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12.5px; color:var(--muted); align-items:center}
.gt-k{display:inline-flex; align-items:center; gap:6px}
.gt-k.v0::before, .gt-k.v1::before{content:""; width:12px; height:12px; border-radius:4px; background:var(--tonic-tint); border:1.5px solid var(--tonic)}
.gt-k.v1::before{background:var(--dom-tint); border-color:var(--dom)}
.gt-k b{font-weight:800}
.gt-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.gt-c{display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:0; padding:8px 6px 6px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; text-align:left}
.gt-c:hover{border-color:var(--fam)}
.gt-c.sel{box-shadow:inset 0 0 0 1.5px var(--fam)}
.gt-c.now{border-color:var(--fam); box-shadow:inset 0 0 0 2px var(--fam)}
.gt-ch{font-family:var(--f-chord); font-weight:700; font-size:15px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gt-n{display:flex; align-items:baseline; gap:3px; min-width:0; padding:3px 5px; border-radius:7px; font-family:var(--f-chord)}
.gt-n.v0{background:var(--tonic-tint)} .gt-n.v1{background:var(--dom-tint)}
.gt-n b{font-size:16px; font-weight:700}
.gt-n i{font-style:normal; font-size:11px; color:var(--muted); font-weight:600}
.gt-n .mv{margin-left:auto; font-size:11px; font-weight:800; white-space:nowrap}
.mv.half, .gt-k b.half{color:var(--two)} .mv.hold, .gt-k b.hold{color:var(--muted)} .mv.step{color:var(--tonic)} .mv.jump{color:var(--dom)}
svg.gt-dia{display:block; width:100%; max-width:64px; height:auto; align-self:center; margin-top:2px}
.gt-dia line{stroke:var(--line-strong); stroke-width:1}
.gt-dia .gt-fr{fill:var(--muted); font-size:8px; font-weight:700}
.gt-dia circle.v0{fill:var(--tonic)} .gt-dia circle.v1{fill:var(--dom)}
@media (min-width:640px){ .gt-row{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))} }
.bt-one{margin:0; font-size:15px; max-width:66ch}
.bt-xd summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--tonic)}
.bt-xd[open] summary{margin-bottom:10px}
.gd-more summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--tonic)}
.gd-more[open] summary{margin-bottom:12px}
.gd-more > .triads{margin-bottom:12px}
.how{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
.how li{display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:12px; background:var(--panel); border:1px solid var(--line); font-size:13.5px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; hyphens:auto}
.how b{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--bg); font-size:12px}
.dotc{display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--fam); margin:0 4px 0 2px; vertical-align:-1px}
/* ---------- v24 : S’entraîner en parties ---------- */
.tsub{margin:0 0 16px}
#view-train[data-tsub="prog"] > [data-tsub]:not([data-tsub="prog"]){display:none !important}
#view-train[data-tsub="folk"] > [data-tsub]:not([data-tsub="folk"]){display:none !important}
#view-train[data-tsub="groove"] > [data-tsub]:not([data-tsub="groove"]){display:none !important}
#view-train[data-tsub="ear"] > [data-tsub]:not([data-tsub="ear"]){display:none !important}
#view-train[data-tsub="rel"] > [data-tsub]:not([data-tsub="rel"]){display:none !important}
/* boutons bascule */
.tog{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); border-radius:999px; padding:8px 13px; font-weight:600; font-size:13.5px; cursor:pointer; min-height:40px}
.tog::before{content:''; width:14px; height:14px; border-radius:4px; border:1.5px solid var(--line-strong); flex:none}
.tog[aria-pressed="true"]{border-color:var(--ink)}
.tog[aria-pressed="true"]::before{background:var(--ink); border-color:var(--ink); box-shadow:inset 0 0 0 2.5px var(--panel)}
.lv{font-style:normal; font-size:9px; letter-spacing:1px; color:var(--dom); margin-left:4px; vertical-align:1px}
.quiz-modes button[aria-pressed="true"] .lv{color:inherit}
.tg{font-style:normal; font-size:11px; font-weight:500; opacity:.7; margin-left:6px}

/* ---------- Métronome ---------- */
.metro{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:18px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px}
.m-top{display:grid; grid-template-columns:44px 40px minmax(0,1fr) 40px 44px; align-items:center; gap:5px}
.m-top button{height:48px; padding:0; border-radius:14px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); font-weight:700; font-size:15px; cursor:pointer; font-variant-numeric:tabular-nums}
.m-bpm{display:flex; flex-direction:column; align-items:center; line-height:1}
.m-bpm b{font-family:var(--f-chord); font-size:58px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.m-bpm span{font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--muted)}
#m-range{width:100%; accent-color:var(--ink); height:32px}
.m-lights{display:flex; gap:5px; justify-content:center; flex-wrap:nowrap; min-height:40px; align-items:flex-end}
.m-l{display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; max-width:46px}
.m-l i{display:block; width:100%; height:12px; border-radius:6px; background:var(--line); transition:background .05s}
.m-l.b i{height:22px}
.m-l.one i{height:30px}
.m-l.b2 i{height:26px}
.m-l em{font-style:normal; font-size:11px; font-weight:700; color:var(--muted); font-family:var(--f-chord)}
.m-l.on i{background:var(--ink)}
.m-l.one.on i{background:var(--dom)}
.m-lights.silent .m-l i{background:transparent; border:1.5px dashed var(--line-strong)}
.m-go .play{min-width:150px; justify-content:center; padding-top:14px; padding-bottom:14px; font-size:16px}
.m-row{display:flex; flex-direction:column; gap:6px}
.m-row > span{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.m-row .seg{flex-wrap:wrap}
.m-more summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--tonic)}
.m-more[open] summary{margin-bottom:10px}
.m-opt{display:block; font-size:14.5px; line-height:2.1}
.m-opt select, .m-opt input[type=number]{font:inherit; font-weight:600; padding:3px 6px; border-radius:8px; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink)}
.m-opt input[type=number]{width:4.2em}
.m-opt input[type=checkbox]{width:18px; height:18px; vertical-align:-3px; accent-color:var(--ink); margin-right:4px}
.m-mini{position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:40; display:flex; align-items:center; gap:2px; background:var(--ink); color:var(--bg); border-radius:999px; padding:4px; box-shadow:0 8px 24px -8px rgba(0,0,0,.45)}
.m-mini.lift{bottom:calc(86px + env(safe-area-inset-bottom))}
.m-mini button{border:0; background:transparent; color:inherit; font-weight:700; font-size:14px; padding:9px 12px; border-radius:999px; cursor:pointer; font-variant-numeric:tabular-nums}
.m-mini button + button{background:rgba(255,255,255,.14)}

/* ---------- Rythmique et accords ---------- */
.fk{display:flex; flex-direction:column; gap:14px}
.fk-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); min-width:0}
.fk-card h4{margin:0; font-size:17px; font-weight:700}
.fk-card .sec-h{margin-bottom:0; flex-wrap:wrap}
.fk-card .sec-h span{text-align:left}
.fk-card .tri-h{margin:4px 0 6px}
.fk-card .quiz-modes{margin-bottom:4px}
.fk-grid{display:grid; gap:4px; grid-template-columns:repeat(8,minmax(0,1fr))}
.fk-grid.n6{grid-template-columns:repeat(6,minmax(0,1fr))}
.fk-grid.n16{grid-template-columns:repeat(8,minmax(0,1fr)); row-gap:8px}
.fk-c{display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0 5px; border-radius:9px; background:var(--bg); min-width:0; border:1px solid transparent}
.fk-c.bt{border-color:var(--line)}
.fk-c em{font-style:normal; font-family:var(--f-chord); font-weight:700; font-size:13px; color:var(--muted); line-height:1}
.fk-c.bt em{color:var(--ink)}
.fk-c b{font-size:24px; line-height:1.05; height:1.1em; font-weight:500; color:var(--ink)}
.fk-c.s-A b{font-weight:900; color:var(--dom)}
.fk-c.s-u b{opacity:.55}
.fk-c.s-X b{color:var(--muted); font-weight:700}
.fk-c.s-B b, .fk-c.s-P b{font-family:var(--f-chord); font-weight:700; font-size:19px; color:var(--two)}
.fk-c.pk b{font-family:var(--f-chord); font-weight:700; font-size:20px}
.fk-c.pk i{font-style:normal; font-size:11px; color:var(--muted); font-weight:700; line-height:1}
.fk-c.now{background:var(--ink); border-color:var(--ink)}
.fk-c.now em, .fk-c.now b, .fk-c.now i{color:var(--bg); opacity:1}
.fk-now{min-height:0; display:flex; align-items:baseline; gap:10px}
.fk-now:empty{display:none}
.fk-now b, .cg-big b{font-family:var(--f-chord); font-weight:700; font-size:40px; line-height:1}
.fk-now span, .cg-big span{font-size:14px; color:var(--muted)}
.fk-progs button{font-family:var(--f-chord); font-size:15px}
.fk-dgs{display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:6px}
.fk-dgs.big{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.fk-dg{display:flex; flex-direction:column; align-items:center; padding:6px 4px 2px; border-radius:12px; border:1.5px solid var(--line); background:var(--bg); cursor:pointer; transition:border-color .08s, background .08s}
.fk-dg b{font-family:var(--f-chord); font-weight:700; font-size:17px}
.fk-dg svg{width:100%; max-width:110px; height:auto}
.fk-dg.now{border-color:var(--dom); background:var(--dom-tint)}
.cg-big{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0; min-height:0; text-align:center}
.cg-big:empty{display:none}
.cg-big b{font-size:56px}
.fk-eval{border-top:1px solid var(--line); padding-top:12px; display:flex; flex-direction:column; gap:10px}
.fk-q{margin:0; font-weight:600; font-size:15px}
.fk-ev{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
.fk-ev button{display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); border-radius:12px; padding:10px; cursor:pointer; min-height:64px}
.fk-ev button b{font-size:14px}
.fk-ev button span{font-size:12px; color:var(--muted); line-height:1.25}
.fk-ev button[data-fk-eval="ok"]{border-color:var(--two)}
.fk-num{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.fk-num output{font-family:var(--f-chord); font-weight:700; font-size:40px; min-width:2.2ch; text-align:center; font-variant-numeric:tabular-nums}
.fk-num .btn{width:44px; height:44px; justify-content:center; padding:0; font-size:20px}
.fk-opts{display:flex; flex-wrap:wrap; gap:8px; align-items:center}

/* ---------- Sauvegarde ---------- */
.bk{display:flex; flex-direction:column; gap:10px}
.bk p{margin:0}
#bk-paste summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--tonic)}
#bk-text{width:100%; font:12px/1.4 ui-monospace, Menlo, monospace; border-radius:10px; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); padding:8px; margin:8px 0}
@media (max-width:380px){ .m-bpm b{font-size:50px} .m-top{grid-template-columns:40px 36px minmax(0,1fr) 36px 40px} .fk-c b{font-size:21px} }

.fk-card .chip .lv{margin-left:2px}
.chip .tg{font-weight:500}
/* v25 : accueil centre de pilotage, coach, parcours acoustique */
.home-today .ht-title{margin:0}
.co-time{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.co-tl{font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.co-time .seg button{min-height:44px; min-width:64px; font-size:15px}
.co-opt{display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:14px; background:var(--tonic-tint)}
.co-opt p{margin:0}
.co-pct{font-weight:700; font-size:16px}
.co-or{margin:0; font-size:14.5px; color:var(--muted)}
.co-blocks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.co-blocks li{display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; align-items:start; padding:10px 0; border-top:1px solid var(--line)}
.co-blocks li:first-child{border-top:0}
.co-min{font-weight:700; font-variant-numeric:tabular-nums; font-size:14px; padding-top:1px}
.co-bt{margin:0; font-size:15.5px}
.co-why{margin:2px 0 0; font-size:14px; color:var(--muted); line-height:1.45}
.src{display:inline-block; margin-left:2px; padding:1px 7px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap; vertical-align:1px; border:1px solid var(--line-strong); color:var(--muted); background:transparent}
.src.s-mes{border-color:var(--two); color:var(--two)}
.src.s-auto,.src.s-saisi{border-color:var(--tonic); color:var(--tonic)}
.src.s-est{border-style:dashed}
.co-sec{display:flex; flex-direction:column; gap:10px; margin-top:22px}
.co-sec .sec-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.co-sec .sec-h h3{margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase}
.co-sec .sec-h span{font-size:13.5px; color:var(--muted)}
.co-days{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
.co-day{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0 6px; border-radius:12px; border:1px solid var(--line); background:var(--panel)}
.co-day b{font-size:13px}
.co-day i{font-style:normal; font-size:11px; color:var(--muted); min-height:14px}
.co-day.on{background:var(--two-tint); border-color:var(--two)}
.co-day.today{outline:2px solid var(--ink); outline-offset:1px}
.co-goal{margin:0; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--panel); font-size:14.5px; line-height:1.45}
.co-bilan, .co-pil{border:1px solid var(--line); border-radius:14px; background:var(--panel)}
.co-bilan summary, .co-pil summary{cursor:pointer; list-style:none; padding:12px 14px; min-height:44px}
.co-bilan summary::-webkit-details-marker, .co-pil summary::-webkit-details-marker{display:none}
.co-bilan summary{font-weight:700}
.co-bilan > :not(summary){margin:0 14px 12px}
.co-facts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:14px}
.co-notions{font-size:14px}
.co-pils{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.co-pil summary{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center}
.co-pn{font-weight:700; font-size:15.5px}
.co-st{justify-self:end; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap; background:var(--bg); border:1px solid var(--line-strong)}
.co-st.st-weak{background:var(--dom-tint); border-color:var(--dom); color:var(--dom)}
.co-st.st-rev{background:var(--sub-tint); border-color:var(--sub); color:var(--sub)}
.co-st.st-prog{background:var(--tonic-tint); border-color:var(--tonic); color:var(--tonic)}
.co-st.st-ok{background:var(--two-tint); border-color:var(--two); color:var(--two)}
.co-ph{grid-column:1 / -1; font-size:13.5px; color:var(--muted); line-height:1.4}
.co-pb{display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:0 14px 14px}
.co-last{margin:0; font-size:13.5px; color:var(--muted)}
.co-rows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.co-row{width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; text-align:left; padding:11px 14px; min-height:48px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; font:inherit}
.co-row:hover{border-color:var(--ink)}
.co-row b{font-size:15px}
.co-row span{grid-column:1; font-size:13.5px; color:var(--muted)}
.co-row i{grid-column:2; grid-row:1 / span 2; align-self:center; font-style:normal}
.co-tools{display:flex; flex-wrap:wrap; gap:8px}
.co-tools .btn{min-height:44px; padding:10px 16px}
.home-find{margin-top:26px}
.pc-runh{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
#pc-tracks button{min-height:40px}
.pc-top{display:flex; flex-wrap:wrap; gap:8px}
.pc-chip.lock{border-style:dashed}
.co-req .co-reql{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:14.5px}
.co-req li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:6px}
.co-req li.ok .co-rq{color:var(--two); font-weight:700}
.co-lock{background:var(--dom-tint)}
@media (min-width:760px){ .co-sec-row{display:grid; grid-template-columns:1fr 1fr; gap:22px} }
.co-opt .play{max-width:100%; white-space:normal; text-align:left}

/* v26 : labo de l’accord, versions de grille, carte A/B, studio */
.lb{display:flex; flex-direction:column; gap:12px}
.lb-ctl{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end}
.lb-lead{margin:0; font-size:15px; line-height:1.5}
.lb-invs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px}
.lb-inv{display:flex; flex-direction:column; gap:2px; text-align:left; padding:10px 12px; min-height:48px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font:inherit; cursor:pointer}
.lb-inv b{font-size:14.5px}
.lb-inv span{font-size:13px; color:var(--muted)}
.lb-inv[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.lb-sets button{min-height:40px}
.lb-path{fill:none; stroke:var(--ink); stroke-width:2; stroke-dasharray:4 4; opacity:.55}
.sxd.dim{opacity:.28}
.gl{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.gl .seg button{min-height:42px}
.gl-mod{display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:14px; background:var(--sub-tint)}
.gl-mod p{margin:0}
.gl-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.gl-list li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; padding:10px 0; border-top:1px solid var(--line)}
.gl-list li:first-child{border-top:0}
.gl-t{margin:0; font-size:15px}
.gl-w{margin:2px 0 0; font-size:13.5px; color:var(--muted); line-height:1.45}
.cmp{display:flex; flex-direction:column; gap:6px; margin-top:10px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--panel)}
.cmp-h{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.cmp .seg button{min-height:40px}
.cmp-row{margin:0; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; font-size:14.5px}
.cmp-row > span{min-width:64px; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.cmp-new{color:var(--dom)}
.st{display:flex; flex-direction:column; gap:12px; margin-top:18px}
.st-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.st-steps li{display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:var(--panel); font-size:14px}
.st-steps li.cur{border-color:var(--ink)}
.st-steps li.done{opacity:.7}
.st-tempo{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.st-tempo .seg button{min-height:40px}
.st-secs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px}
.st-sec{display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--panel)}
.st-sec.s1{border-color:var(--tonic)} .st-sec.s2{border-color:var(--two); background:var(--two-tint)} .st-sec.sel{box-shadow:inset 0 0 0 1px var(--ink)}
.st-h{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.st-h span{font-size:13px; color:var(--muted)}
.st-r{display:grid; grid-template-columns:minmax(0,1fr) 76px auto; gap:6px; align-items:center}
.st-r select,.st-r input{font:inherit; font-size:15px; min-height:40px; padding:6px 8px; border-radius:10px; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); min-width:0}
.st-run{margin:0}
#st-note{font:inherit; font-size:15px; width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink)}
#g-sheet .ch.inloop{outline:2.5px solid var(--ink); outline-offset:-2px}

/* v30 : accueil d’un écran, mode séance */
body[data-v="home"] .top .settings .field, body[data-v="home"] .top .lede{display:none}
#co-now:empty{display:none}
.ho-tr, .ho-min{display:flex; width:100%}
.ho-tr button, .ho-min button{flex:1 1 0; min-height:44px; padding:8px 6px; text-align:center}
.ho-plan{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.ho-head{margin:0; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.ho-plan .ht-title{margin:0}
.ho-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-top:1px solid var(--line)}
.ho-steps li{display:flex; gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line)}
.ho-m{flex:none; width:52px; font-variant-numeric:tabular-nums; color:var(--muted); font-size:14px}
.ho-t{font-size:15.5px; line-height:1.35}
.ho-t b{font-weight:700}
.ho-go{display:flex}
.play.ho-big{width:100%; justify-content:center; min-height:54px; font-size:17px}
.ho-links{margin:0; font-size:14px; color:var(--muted); text-align:center}
.ho-sub{margin:0; color:var(--muted)}
.ho-why{font-size:14px; color:var(--muted)}
.ho-why summary{cursor:pointer; min-height:32px; display:flex; align-items:center}
.ho-why ul{margin:6px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
.ho-fold{border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:0 16px}
.ho-fold > summary{cursor:pointer; min-height:52px; display:flex; align-items:center; font-weight:700; font-size:16px}
.ho-fold[open]{padding-bottom:16px}
.ho-fold .home-find{border:0; padding:0; background:none; box-shadow:none}
#co-where .ho-fold .sec-h{display:none}

/* Mode séance : un seul outil à l’écran */
body.fo .top, body.fo #views, body.fo #subnav, body.fo #steps, body.fo #guide, body.fo #tsub, body.fo .jump, body.fo .credits, body.fo #pc-banner, body.fo .tp-back{display:none !important}
.fo-hide{display:none !important}
.fo-target{scroll-margin-top:84px}
.fo-head{position:sticky; top:0; z-index:30; margin:0 calc(-1 * max(16px, env(safe-area-inset-left,0px))); padding:10px max(16px, env(safe-area-inset-left,0px)); background:var(--bg); border-bottom:1px solid var(--line)}
.fo-hin{display:flex; align-items:center; gap:10px; max-width:1100px; margin:0 auto}
.fo-n{font-weight:800; font-size:18px; font-variant-numeric:tabular-nums}
.fo-n i{font-style:normal; font-weight:600; color:var(--muted); font-size:14px}
.fo-clock{font-variant-numeric:tabular-nums; font-weight:700; font-size:18px; margin-right:auto}
.fo-head.over .fo-clock{color:var(--dom)}
.fo-b{min-height:44px; padding:8px 14px; border-radius:999px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); font:inherit; font-weight:700; font-size:15px; cursor:pointer}
.fo-b.fo-next{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.fo-head.over .fo-next{box-shadow:0 0 0 3px var(--tonic-tint)}
.fo-card{display:flex; flex-direction:column; gap:8px; padding:16px 18px; margin:12px 0; border-radius:18px; border:1.5px solid var(--ink); background:var(--panel)}
.fo-t{margin:0; font-family:var(--f-display); font-size:clamp(1.25rem,4.2vw,1.6rem); line-height:1.2}
.fo-w{margin:0; font-size:16px; line-height:1.5}
.fo-g{margin:0; font-size:15px; color:var(--muted)}
.fo-more{font-size:14px}
.fo-more summary{cursor:pointer; min-height:36px; display:flex; align-items:center; color:var(--muted); font-weight:600}
.fo-steps{list-style:none; margin:4px 0 10px; padding:0; display:flex; flex-direction:column; gap:4px}
.fo-steps li{display:flex; gap:10px; color:var(--muted)}
.fo-steps li span:first-child{width:48px; flex:none; font-variant-numeric:tabular-nums}
.fo-steps li.cur{color:var(--ink); font-weight:700}
.fo-steps li.done span:last-child{text-decoration:line-through}
.fo-more .ho-links{text-align:left}
/* en séance, l’étape a déjà choisi l’exercice : on retire les sélecteurs et les modes d’emploi */
body.fo #fk-pats, body.fo #fk-progs, body.fo #fk-strum .tri-h:has(+ #fk-progs),
body.fo #fk-chg > .seg, body.fo #cg-items,
body.fo #rh-pats, body.fo .rh-drums, body.fo .rh-ctrl, body.fo .rh-fbintro, body.fo #rh-calibinfo, body.fo .rh-chal,
body.fo .ex-row:has(> #rh-use), body.fo .ex-row:has(> #rh-calib), body.fo .drill-ctrl, body.fo #sx .sx-ctrl, body.fo #sx-modes,
body.fo .fo-target > .quiz-modes, body.fo .fo-target .sx-intro, body.fo .fo-target p.caption{display:none !important}
body.fo.fo-notap .rh-fb{display:none !important}
@media (max-width:350px){ .views button{font-size:12px; padding:10px 2px} }
/* v32 */
.fo-prev{padding:8px 12px}
.fo-prev:disabled{opacity:.35; cursor:default}
.fo-steps button{display:flex; gap:10px; width:100%; text-align:left; border:0; background:none; padding:6px 0; font:inherit; color:inherit; cursor:pointer; min-height:36px}
.fo-steps button span:first-child{width:48px; flex:none; font-variant-numeric:tabular-nums}
.fo-listen{display:flex; flex-direction:column; gap:6px}
.fo-ll{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.fo-ll a{text-decoration:none}
.ho-other{font-size:14px}
.ho-other summary{cursor:pointer; min-height:40px; display:flex; align-items:center; justify-content:center; color:var(--ink); font-weight:600}
.ho-sl{list-style:none; margin:4px 0 8px; padding:0; display:flex; flex-direction:column; border-top:1px solid var(--line)}
.ho-sl button{display:flex; gap:12px; align-items:center; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:none; padding:10px 0; font:inherit; font-size:15px; color:var(--ink); cursor:pointer; min-height:44px}
.ho-sl i{font-style:normal; color:var(--muted)}
.ho-sn{flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; font-weight:700; font-size:13px}
.imp{display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:14px; background:var(--tonic-tint); font-size:15px; line-height:1.45}
.imp p{margin:0}
.imp-h{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.imp-tip{color:var(--muted); font-size:14px}
.imp-how{font-size:14px}
.imp-neck{width:100%; max-width:360px; height:auto; margin:4px 0}
.imp-st{stroke:var(--line-strong); stroke-width:1}
.imp-fr{stroke:var(--line-strong); stroke-width:1}
.imp-fr.nut{stroke:var(--ink); stroke-width:3}
.imp-fn, .imp-sn{font-size:9px; fill:var(--muted); text-anchor:middle; font-family:var(--f-body)}
.imp-d{fill:var(--panel); stroke:var(--ink); stroke-width:1.2}
.imp-d.col{stroke:var(--dom); stroke-width:2}
.imp-d.root{fill:var(--ink)}
.imp-dl{font-size:7.5px; font-weight:700; text-anchor:middle; fill:var(--ink); font-family:var(--f-body)}
.imp-dl.root{fill:var(--bg)}
.tu-lvl{width:100%; height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.tu-lvl i{display:block; height:100%; width:0; background:var(--ok, #1B7560); transition:width .1s linear}
.fo-cpin{width:100%; margin-top:6px; font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:10px; background:var(--panel); color:var(--ink)}
.ho-lvl{display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:14px; background:var(--tonic-tint); font-size:15px}
.ho-lvl p{margin:0}
.ho-lvl .btn{align-self:flex-start}
.lv-ev{display:flex; flex-direction:column; gap:8px; padding-top:4px}
.lv-q{margin:0; font-weight:700}
.lv-b{display:flex; flex-wrap:wrap; gap:8px}
.lv-b .btn{flex:1 1 0; min-width:96px; min-height:46px}
.lv-crit{margin:0; padding-left:18px; color:var(--muted); font-size:15px; display:flex; flex-direction:column; gap:4px}
.ho-jam{width:100%; min-height:48px; justify-content:center}
.voc-l{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; border-top:1px solid var(--line)}
.voc-l li{display:flex; align-items:center; gap:10px; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line)}
.voc-l li div{display:flex; flex-direction:column; gap:2px; min-width:0}
.voc-l li span{font-size:13px; color:var(--muted)}
.voc-l .btn{flex:none}
.voc-add{display:flex; flex-direction:column; gap:6px; font-size:14px}
.voc-row{display:flex; gap:8px}
.voc-row select{flex:1 1 auto; min-width:0; font:inherit; min-height:40px; padding:6px 8px; border-radius:10px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink)}
.voc-ok{color:var(--ok, #1B7560); font-weight:600}
.mm{margin-bottom:4px}
.mm-parts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-top:1px solid var(--line)}
.mm-parts button{display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:none; padding:10px 0; font:inherit; font-size:15.5px; color:var(--ink); cursor:pointer; min-height:46px}
.mm-parts i{margin-left:auto; font-style:normal; font-size:13px; color:var(--muted)}
.mm-dot{flex:none; width:14px; height:14px; border-radius:50%; border:2px solid var(--line-strong)}
.mm-parts .st1 .mm-dot{border-color:var(--ink); background:linear-gradient(90deg,var(--ink) 33%,transparent 33%)}
.mm-parts .st2 .mm-dot{border-color:var(--ink); background:linear-gradient(90deg,var(--ink) 66%,transparent 66%)}
.mm-parts .st3 .mm-dot{border-color:var(--ink); background:var(--ink)}
.mm-parts .cur button{font-weight:700}
.mm-b .btn.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.mm .ho-why p{margin:6px 0}
.mm-busy{display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:14px; border:1.5px solid var(--dom); background:var(--panel)}
.mm-busy p{margin:0}
.mm-dots{display:inline-flex; gap:4px; margin-left:6px; vertical-align:middle}
.mm-dots i{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--ink)}
.mm-dots i.on{background:var(--ink)}
.mm-sub{margin:0; font-size:13px; color:var(--muted)}
.mm-week{display:flex; flex-direction:column; gap:4px}
.ho-more{margin-top:4px}
.ho-more[open]{padding-bottom:12px}
.ho-more > section, .ho-more > .ho-fold{margin-top:12px}
.ec{display:flex; flex-direction:column; gap:12px}
.ec-res{display:flex; flex-direction:column; gap:10px}
.ec-card{padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; gap:4px}
.ec-card p{margin:0}
.ec-big{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums}
.ec-big small{font-size:14px; font-weight:500; color:var(--muted)}
.ec-adv ul{margin:4px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px}
.ec-hist{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:14px}
.ec-hist li{display:flex; gap:10px}
.ec-hist li span:first-child{width:64px; flex:none; color:var(--muted)}
/* la couleur de fonction toujours visible : une barre en haut de chaque case */
.crow .ch{box-shadow:inset 0 4px 0 var(--fam)}
.crow .ch .fn::before{display:inline-block}
/* Mon prof */
.pf-why{margin:0; font-size:15.5px; line-height:1.5}
.pf-path{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.pf-path li{display:flex; gap:10px; align-items:flex-start; color:var(--muted)}
.pf-path li span:last-child{display:flex; flex-direction:column}
.pf-path li i{font-style:normal; font-size:13px}
.pf-path li.cur{color:var(--ink)}
.pf-n{flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; font-weight:700; font-size:13px}
.pf-path li.cur .pf-n{border-color:var(--ink); background:var(--ink); color:var(--bg)}
.pf-tab{margin:10px 0}
.pf-tab table{border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:15px}
.pf-tab th,.pf-tab td{padding:4px 10px; border-bottom:1px solid var(--line); text-align:center}
.pf-tab tbody th{text-align:left; color:var(--muted); font-weight:600}
.pf-tab thead th{font-size:12px; color:var(--muted); font-weight:700}
.pf-crit{display:flex; flex-direction:column; gap:8px}
.pf-crit p{margin:0}
.pf-note{width:100%; font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:10px; background:var(--panel); color:var(--ink); margin-top:6px}
.pf-lesson p{margin:8px 0}

/* v44 */
.pf-new{margin:0; font-size:14.5px; padding:8px 10px; border-radius:10px; background:var(--bg)}
.pf-prog{margin:2px 0 0; font-weight:700; font-size:14.5px; color:var(--muted)}
.pf-bar{height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin:6px 0 2px}
.pf-bar span{display:block; height:100%; background:var(--ink); border-radius:3px}
.pf-why1{margin:8px 0 0; font-size:16px}
.pf-how{margin:6px 0 0; font-size:13.5px; color:var(--muted); text-align:center}
.pf-q{margin:0 0 6px; font-weight:700}
.pf-crit .caption{margin:6px 0 0}
.pf-det .pf-lesson{margin-top:6px}

/* v44 : « Aujourd’hui » en tête du Studio */
.sh-today{border:1px solid var(--line-strong); border-radius:16px; padding:14px; background:var(--panel); gap:6px}
.sh-tt{font-size:19px; line-height:1.25}
.sh-start{width:100%; justify-content:center; min-height:52px; margin-top:6px}
/* pendant une séance guidée, le bouton « Studio » ne recouvre plus « Suivant » */
body.fo .sh-back{display:none}

/* v39 : méthode Triades, code couleur de la méthode (1 rouge, 3 vert, 3m violet, 5 noir) */
:root{--tr1:#D2342A; --tr3:#1C8A45; --tr3m:#8B3FC7; --tr5:#1A1E23}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--tr1:#F0625A; --tr3:#4CC57E; --tr3m:#B784EE; --tr5:#E7E9E4} }
:root[data-theme="dark"]{--tr1:#F0625A; --tr3:#4CC57E; --tr3m:#B784EE; --tr5:#E7E9E4}
.tr-block{margin:12px 0 4px}
.tr-figs{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:flex-start}
.tr-fig{margin:0; width:96px; display:flex; flex-direction:column; align-items:center; gap:2px}
.tr-svg{width:94px; height:auto; display:block}
.tr-fig figcaption{font-size:11.5px; line-height:1.25; color:var(--muted); text-align:center}
.tr-fret{stroke:var(--line-strong); stroke-width:1}
.tr-str{stroke:var(--muted); stroke-width:1.1}
.tr-str.off{opacity:.3}
.tr-nut{fill:var(--ink)}
.tr-rn{fill:var(--muted); font-size:10px; font-weight:700}
.tr-d1{fill:var(--tr1)} .tr-d3{fill:var(--tr3)} .tr-d3m{fill:var(--tr3m)} .tr-d5{fill:var(--tr5)}
.tr-dt{fill:#fff; font-size:7px; font-weight:800; pointer-events:none}
.tr-dt.inv{fill:var(--bg)}
.tr-leg{display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0 0; font-size:12.5px; color:var(--muted)}
.tr-leg span{display:inline-flex; align-items:center; gap:5px}
.tr-dot{display:inline-block; width:10px; height:10px; border-radius:50%}
.tr-dot.tr-d1{background:var(--tr1)} .tr-dot.tr-d3{background:var(--tr3)} .tr-dot.tr-d3m{background:var(--tr3m)} .tr-dot.tr-d5{background:var(--tr5)}
.tr-pair{display:flex; align-items:center; gap:2px}
.tr-arr{color:var(--muted); font-weight:700; padding-bottom:18px}
.tr-zc{margin:6px 0}
.tr-zh{margin:0 0 2px; font-weight:700}
.tr-oct{display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; margin:4px 0; font-size:13.5px; color:var(--muted)}
.tr-on{display:inline-flex; align-items:center; gap:5px; color:var(--ink); white-space:nowrap}
.tr-on b{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 3px; border-radius:11px; color:#fff; font-size:11.5px}
.tr-o1 b{background:var(--tr1)} .tr-o3 b{background:var(--tr3)} .tr-o3m b{background:var(--tr3m)} .tr-o5 b{background:var(--tr5); color:var(--bg)}
.tr-in{margin:4px 0 8px}
.tr-dr{border:1px solid var(--line-strong); border-radius:14px; padding:12px 14px; margin:10px 0; display:flex; flex-direction:column; gap:8px; background:var(--panel)}
.tr-dr .tri-h{margin:0}
.tr-p{margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.tr-k{font-size:1.6rem; font-weight:800; line-height:1.1}
.tr-l{font-size:1.05rem; font-weight:700; color:var(--muted)}
.tr-s{margin:0; font-size:15px}
.tr-t{margin:0; font-weight:600}
.tr-st{margin:0; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.tr-b{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tr-b .play{min-height:48px}
.tr-set .btn-sm{min-height:40px; min-width:44px}
.tr-ans{padding-top:2px}
.pf-pts{margin:8px 0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.pf-src{margin-top:10px}
.pf-back{margin:0}
.pf-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:2px}
.pf-list button{all:unset; box-sizing:border-box; width:100%; display:flex; gap:10px; align-items:flex-start; padding:8px 6px; border-radius:10px; cursor:pointer; min-height:44px}
.pf-list button:hover{background:var(--bg)}
.pf-list button:focus-visible{outline:2px solid var(--ink); outline-offset:1px}
.pf-list li.cur button{background:var(--bg)}
.pf-list span:last-child{display:flex; flex-direction:column}
.pf-list i{font-style:normal; font-size:12.5px; color:var(--muted)}
.pf-s{flex:none; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; font-size:12px; font-weight:800}
.pf-s2{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.tr-dt.sm{font-size:5.6px}
.tr-ans .tr-fig,.tr-dr>.tr-figs .tr-fig{width:128px}
.tr-ans .tr-svg,.tr-dr>.tr-figs .tr-svg{width:126px}
.pf-new{margin:0; font-size:14.5px; padding:8px 10px; border-radius:10px; background:var(--bg)}