/* Piano Flow — onglet Solfège (préfixe sf-). S'appuie sur les jetons de css/app.css.
   Les portées sont dessinées sur un « papier » ivoire : on s'habitue à lire comme sur une vraie partition. */

.sf-root { --paper: #f5f0e6; --ink: #151922; --ink-2: #3a3f4b; --ink-soft: #5b6170;
  --n-rh: #7444ec; --n-lh: #0c8f85; --n-good: #0f9a5f; --n-bad: #dd512d; --n-hint: #b77c00; }

/* ── Accueil ── */
.sf-head { margin-bottom: 8px; }
.sf-head-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.sf-sec { margin: 22px 0 10px; }
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.sf-grid-ex { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.sf-card {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; min-height: 64px;
  padding: 13px 14px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(22, 32, 57, 0.92), rgba(13, 20, 37, 0.92)); color: var(--text);
  transition: border-color 0.15s, transform 0.12s, background 0.15s;
}
.sf-card:hover { border-color: var(--line-2); background: linear-gradient(160deg, rgba(28, 40, 70, 0.95), rgba(15, 23, 42, 0.95)); }
.sf-card:active { transform: scale(0.985); }
.sf-card.done { border-color: rgba(78, 230, 160, 0.35); }
.sf-num {
  flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  font-weight: 850; font-size: 15px; background: var(--surface-3); color: var(--text); border: 1px solid var(--line-2);
}
.sf-card.done .sf-num { background: var(--good-soft); color: var(--good); border-color: rgba(78, 230, 160, 0.45); }
.sf-num.ex { background: linear-gradient(140deg, rgba(46, 230, 211, 0.22), rgba(177, 140, 255, 0.28)); font-size: 18px; }
.sf-num.big { width: 48px; height: 48px; border-radius: 14px; font-size: 20px; background: var(--accent); color: #0a0f1d; border: 0; }
.sf-num.big.ex { font-size: 24px; }
.sf-card-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sf-card-t { font-weight: 750; font-size: 15px; }
.sf-card-s { font-size: 13px; color: var(--muted); line-height: 1.4; }
.sf-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sf-card-chips .chip { font-size: 11px; padding: 2px 7px; }
.sf-foot { font-size: 12px; margin-top: 22px; }

/* ── Leçon ── */
.sf-back { margin: -6px 0 8px -8px; }
.sf-lesson-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.sf-lesson-head h1 { font-size: clamp(22px, 3vw, 30px); margin-top: 2px; }
.sf-lesson-body { display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.sf-p { margin: 0; color: #d3dcef; line-height: 1.65; max-width: 760px; }
.sf-p b { color: var(--text); }
.sf-p.small { font-size: 13px; color: var(--muted); }
.sf-illus { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); min-width: 0; }
.sf-lesson-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 980px; }
.sf-legend .chip { font-size: 11px; }
.sf-caption { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; letter-spacing: 0.02em; }
.sf-notebtns { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-notebtns .btn { min-width: 58px; }

/* ── Clavier SVG ── */
.sf-kb-wrap { overflow-x: auto; overflow-y: hidden; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #0b1122, #070c18); border: 1px solid var(--line); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.sf-kb { display: block; width: 100%; height: auto; margin: 0 auto; touch-action: pan-x; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sf-wk { fill: #f3f6fc; stroke: #8792a8; stroke-width: 1; cursor: pointer; transition: fill 0.12s; }
.sf-bk { fill: #182032; stroke: #04070d; stroke-width: 1; cursor: pointer; transition: fill 0.12s; }
@media (hover: hover) {
  .sf-wk:hover { fill: #e4eaf7; }
  .sf-bk:hover { fill: #26314b; }
}
.sf-wk.sf-pressed { fill: #d2dbee; }
.sf-bk.sf-pressed { fill: #34415f; }
.sf-wk.sf-m-rh { fill: #d8c7ff; }
.sf-wk.sf-m-lh { fill: #a8f0e7; }
.sf-wk.sf-m-good { fill: #b5efd0; }
.sf-wk.sf-m-bad { fill: #ffc8b6; }
.sf-wk.sf-m-hint { fill: #ffe29a; }
.sf-bk.sf-m-rh { fill: #8b5cf6; }
.sf-bk.sf-m-lh { fill: #0fb5a3; }
.sf-bk.sf-m-good { fill: #1f9d68; }
.sf-bk.sf-m-bad { fill: #d9603f; }
.sf-bk.sf-m-hint { fill: #c99a1e; }
.sf-wk.sf-f-bad { fill: #ff9c7f !important; }
.sf-bk.sf-f-bad { fill: #e0532f !important; }
.sf-wk.sf-f-play { fill: #fff0a8 !important; }
.sf-bk.sf-f-play { fill: #e0b52a !important; }
.sf-kb-labels, .sf-kb-marks { pointer-events: none; }
.sf-kb-lab { font: 650 11px var(--font); fill: #56617a; }
.sf-kb-lab.on-black { fill: #c9d3ea; font-size: 8.5px; }
.sf-mk { font: 850 14px var(--font); fill: #1c1340; }
.sf-mk.on-black { fill: #fff; font-size: 12px; }
.sf-reveal { display: none; }
.sf-reveal.show { display: block; }

/* ── Portée (papier) ── */
.sf-paper { background: var(--paper); border-radius: 14px; padding: 6px 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 26px rgba(0, 0, 0, 0.35); }
.sf-staff { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; color: var(--ink); }
.sf-line, .sf-ledger, .sf-bar { stroke: var(--ink-2); }
.sf-line { stroke-width: 1.1; }
.sf-ledger { stroke-width: 1.4; }
.sf-bar { stroke-width: 1.4; }
.sf-clef { fill: var(--ink); }
.sf-time { font: 800 25px Georgia, "Times New Roman", serif; fill: var(--ink); }
.sf-n { color: var(--ink); }
.sf-n.rh { color: var(--n-rh); }
.sf-n.lh { color: var(--n-lh); }
.sf-n.good { color: var(--n-good); }
.sf-n.bad { color: var(--n-bad); }
.sf-n.hint { color: var(--n-hint); }
.sf-head { fill: currentColor; }
.sf-head-o { fill: none; stroke: currentColor; stroke-width: 2.1; }
.sf-head-o.sf-whole { stroke-width: 2.7; }
.sf-stem { stroke: currentColor; stroke-width: 1.6; }
.sf-flag { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sf-dotn { fill: currentColor; }
.sf-rest-path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sf-rest-path.thin { stroke-width: 2.1; }
.sf-acc { font: 400 20px "Segoe UI Symbol", "Apple Symbols", "Noto Music", serif; fill: var(--ink); }
.sf-acc.rh { fill: var(--n-rh); }
.sf-acc.lh { fill: var(--n-lh); }
.sf-acc.good { fill: var(--n-good); }
.sf-acc.hint { fill: var(--n-hint); }
.sf-note-label { font: 750 13px var(--font); fill: var(--ink-soft); }
.sf-note-label.rh { fill: var(--n-rh); }
.sf-note-label.lh { fill: var(--n-lh); }
.sf-note-label.good { fill: var(--n-good); }
.sf-note-label.hint { fill: var(--n-hint); }
.sf-beam { fill: var(--ink); }
.sf-tiepath { fill: none; stroke: var(--ink); stroke-width: 2; }
.sf-beatnum { font: 750 13px var(--font); fill: #7b8190; }
.sf-cursor { stroke: var(--n-bad); stroke-width: 2.5; stroke-linecap: round; }
.sf-fig { max-width: 96px; }
.sf-tie { max-width: 260px; }
.sf-rhythm { max-width: 460px; }

/* ── Leçons : blocs spécifiques ── */
.sf-names { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 620px; }
.sf-name { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.sf-name b { font-size: 16px; }
.sf-name span { font-size: 13px; color: var(--lh); font-weight: 750; }
.sf-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.sf-figcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); text-align: center; transition: border-color 0.15s, box-shadow 0.15s; }
.sf-figcard svg { background: var(--paper); border-radius: 9px; }
.sf-figcard.playing { border-color: var(--rh); box-shadow: 0 0 0 3px rgba(177, 140, 255, 0.2); }
.sf-figname { font-weight: 750; font-size: 14px; }
.sf-figval { font-size: 12px; color: var(--muted); }
.sf-figone { max-width: 140px; }
.sf-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sf-timecard { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.sf-metro { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.sf-metro-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-bpm-box { display: flex; align-items: baseline; gap: 5px; min-width: 92px; justify-content: center; }
.sf-bpm { font-family: var(--font-display); font-size: 34px; font-weight: 850; }
.sf-bpm-box small { color: var(--muted); font-weight: 700; }
.sf-beats { display: flex; gap: 10px; }
.sf-beat { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--muted); background: var(--surface-3); border: 1px solid var(--line-2); transition: transform 0.06s, background 0.06s; }
.sf-beat.acc { border-color: rgba(177, 140, 255, 0.55); }
.sf-beat.on { background: var(--lh); color: #04201d; transform: scale(1.12); }
.sf-beat.acc.on { background: var(--rh); color: #1a0d3d; }
.sf-ivl { display: flex; flex-direction: column; gap: 6px; }
.sf-ivl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.sf-ivl-name { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; }
.sf-ivl-name span { font-size: 12px; color: var(--muted); }
.sf-scales { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.sf-scale { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.sf-steps { display: flex; gap: 4px; flex-wrap: wrap; }
.sf-steps .chip { min-width: 30px; justify-content: center; }
.sf-chords { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; }
.sf-chord { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.sf-chord .muted { font-size: 13px; }
.sf-hands { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.sf-hand { width: 150px; height: auto; display: block; }
.sf-palm { fill: rgba(255, 255, 255, 0.06); stroke: var(--line-2); stroke-width: 1.5; }
.sf-hand.rh .sf-finger { fill: var(--rh-soft); stroke: var(--rh); stroke-width: 1.6; }
.sf-hand.lh .sf-finger { fill: var(--lh-soft); stroke: var(--lh); stroke-width: 1.6; }
.sf-fnum { font: 850 14px var(--font); fill: var(--text); }
.sf-sets { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-setbtn { display: flex; gap: 4px; }

/* ── Exercices ── */
.sf-levels-wrap { overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.sf-levels-wrap::-webkit-scrollbar { display: none; }
.sf-levels button { min-height: 38px; }
.sf-lvbest { font-size: 10px; color: var(--good); font-weight: 800; }
.sf-mic { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sf-quiz { display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.sf-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sf-intro p { margin: 0; }
.sf-q-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-dots { display: flex; gap: 5px; }
.sf-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line-2); }
.sf-dot.cur { border-color: var(--text); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); }
.sf-dot.ok { background: var(--good); border-color: var(--good); }
.sf-dot.ko { background: var(--bad); border-color: var(--bad); }
.sf-q-score { font-size: 14px; color: var(--muted); }
.sf-q-score b { color: var(--text); font-size: 16px; }
.sf-streak { color: var(--warn); font-weight: 750; }
.sf-q-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-fb { min-height: 22px; font-size: 15px; line-height: 1.5; padding: 0 2px; }
.sf-fb.good { color: #bff7da; }
.sf-fb.bad { color: #ffd2c3; }
.sf-fb:not(:empty) { padding: 10px 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.sf-fb.good:not(:empty) { background: var(--good-soft); border-color: rgba(78, 230, 160, 0.35); }
.sf-fb.bad:not(:empty) { background: var(--bad-soft); border-color: rgba(255, 143, 107, 0.4); }
.sf-q-foot { display: flex; gap: 8px; flex-wrap: wrap; }
.sf-prompt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sf-prompt.small { font-size: 16px; font-weight: 650; color: #dbe3f3; }
.sf-prompt-lab { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.sf-prompt-note { font-family: var(--font-display); font-size: 40px; font-weight: 850; letter-spacing: -0.02em; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf-read { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.sf-read .sf-paper { max-width: 420px; width: 100%; }
.sf-read .sf-staff { max-height: 300px; }
.sf-read-side { display: flex; flex-direction: column; gap: 10px; }
.sf-answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.sf-answers.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-ans { min-height: 48px; font-size: 16px; font-weight: 750; }
.sf-ans.wide { white-space: normal; }
.sf-ans.sf-good { border-color: var(--good); background: var(--good-soft); color: #c9f9e1; }
.sf-ans.sf-bad { border-color: var(--bad); background: var(--bad-soft); color: #ffd4c6; animation: sf-shake 0.3s; }
.sf-ans.sf-correct { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.35); color: #ffe7ad; }
.sf-accseg { flex-wrap: wrap; }
@keyframes sf-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sf-result { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; text-align: center; }
.sf-result-score { font-family: var(--font-display); font-size: 54px; font-weight: 850; line-height: 1; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf-result-score small { font-size: 24px; }
.sf-result-msg { font-size: 18px; font-weight: 700; }

/* Rythme */
.sf-rhythm-wrap { position: relative; max-width: 480px; }
.sf-count { position: absolute; right: 14px; top: 6px; font-family: var(--font-display); font-size: 36px; font-weight: 850; color: var(--n-bad); pointer-events: none; }
.sf-tap {
  width: 100%; max-width: 480px; min-height: 84px; border-radius: 18px; border: 0; cursor: pointer;
  font: 850 22px var(--font-display); letter-spacing: 0.2em; color: #0a0f1d; background: var(--accent);
  box-shadow: 0 10px 30px rgba(143, 125, 255, 0.3); touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.sf-tap.hit { animation: sf-hit 0.18s ease-out; }
@keyframes sf-hit { 0% { transform: scale(0.96); filter: brightness(1.25); } 100% { transform: none; filter: none; } }
.sf-verdicts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Petits écrans ── */
@media (max-width: 700px) {
  .sf-read { grid-template-columns: 1fr; }
  .sf-names { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-prompt-note { font-size: 34px; }
  .sf-lesson-foot .btn { flex: 1 1 auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .sf-prompt-note { font-size: 30px; }
  .sf-lesson-head { margin-bottom: 8px; }
  .sf-num.big { width: 40px; height: 40px; font-size: 17px; }
  .sf-ans { min-height: 42px; }
  .sf-tap { min-height: 64px; }
  .sf-read .sf-staff { max-height: 64vh; }
  .sf-staff { max-height: 70vh; }
  .sf-kb { max-height: 46vh; }
}