/* Mon App Musique — styles (mobile d'abord, iPhone et Android) */
:root {
  --bg: #ffffff;   /* V5.48 : fond de base blanc (avant #edf0f3, bleu clair) */
  --surface: #ffffff;
  --surface-2: #e1e6ec;
  --ink: #14202b;
  --muted: #586775;
  --line: #cad2db;
  --accent: #1c58a4;
  --accent-soft: #d9e5f4;
  --accent-ink: #ffffff;
  --good: #16895a;
  --warn: #b97d0c;
  --bad: #c33f2d;
  --key-white: #fbfcfd;
  --key-white-down: #cddcef;
  --key-black: #18212b;
  --key-black-down: #3a5f8f;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e141a;
    --surface: #17202a;
    --surface-2: #222d39;
    --ink: #e7edf3;
    --muted: #92a1af;
    --line: #2d3a47;
    --accent: #6aa5ee;
    --accent-soft: #1d3149;
    --accent-ink: #0a1522;
    --good: #3cc48a;
    --warn: #e2ac3a;
    --bad: #f06f5d;
    --key-white: #d9e0e7;
    --key-white-down: #8fb4e3;
    --key-black: #0a0f14;
    --key-black-down: #3b6aa6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e141a;
  --surface: #17202a;
  --surface-2: #222d39;
  --ink: #e7edf3;
  --muted: #92a1af;
  --line: #2d3a47;
  --accent: #6aa5ee;
  --accent-soft: #1d3149;
  --accent-ink: #0a1522;
  --good: #3cc48a;
  --warn: #e2ac3a;
  --bad: #f06f5d;
  --key-white: #d9e0e7;
  --key-white-down: #8fb4e3;
  --key-black: #0a0f14;
  --key-black-down: #3b6aa6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 var(--font);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.app { height: 100%; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }

/* En-tête */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px 6px;
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-logo { width: 40px; height: 40px; border-radius: 10px; flex: none; box-shadow: 0 0 0 1px var(--line); }
.brand { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.view-title { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); display: grid; place-items: center; flex: none;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 16px 12px; }
.view { display: flex; flex-direction: column; gap: 18px; }

/* Barre d'onglets : ordre Métronome → Accordeur → Mes progrès → Sons */
.tabbar {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 6px 4px 8px;
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 0; background: none; padding: 6px 2px; color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: 0; border-radius: 10px; min-width: 0;
}
.tab-label { white-space: nowrap; }
@media (max-width: 350px) { .tab { font-size: 10px; } .tabbar { padding-inline: 0; } }
.tab svg { width: 26px; height: 26px; }
.tab[aria-selected="true"] { color: var(--accent); }

/* Éléments communs */
.group { display: flex; flex-direction: column; gap: 10px; }
.group-title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.hint { font-size: 14px; color: var(--muted); margin: 0; }
.btn {
  min-height: 48px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 600;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.big { min-height: 60px; font-size: 19px; }
.btn.danger-text { border: 0; background: none; color: var(--bad); padding-inline: 0; min-height: 40px; }
.btn:active { transform: scale(.98); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 600; font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip small { font-weight: 500; opacity: .75; margin-left: 4px; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-2); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { min-height: 44px; border: 0; border-radius: 9px; background: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.stepper { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; }
.stepper button { height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 26px; font-weight: 500; line-height: 1; }
.stepper output { text-align: center; font: 700 26px/1 var(--font-num); font-variant-numeric: tabular-nums; }

select, input[type="number"], textarea {
  min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 8px 12px; width: 100%;
}
textarea { min-height: 120px; font: 13px/1.4 ui-monospace, Menlo, monospace; }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 36px; }

/* ——— Métronome ——— */
/* (rgba avant color-mix : couleur de secours pour les iPhone sous iOS 15 et les anciens Android) */
.range-row { display: grid; grid-template-columns: auto 1fr 3.5em; align-items: center; gap: 12px; font-weight: 600; }
.range-row output { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.beats { display: flex; justify-content: center; gap: 12px; min-height: 30px; align-items: center; padding-top: 8px; }
.beat { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line); transition: transform .06s, background .06s; }
.beat.first { width: 26px; height: 26px; }
.beat.on { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.beat.first.on { background: var(--bad); border-color: var(--bad); }

.tempo-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.bpm-box { display: grid; justify-items: center; gap: 2px; }
.arrow {
  width: 76px; height: 64px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; user-select: none; -webkit-user-select: none; touch-action: none;
}
.arrow svg { width: 30px; height: 30px; }
.arrow:active, .arrow.held { background: var(--accent-soft); border-color: var(--accent); }
.bpm { font: 800 clamp(44px, 14vw, 66px)/1 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.bpm-meta { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 8px; align-items: baseline; color: var(--muted); font-weight: 600; font-size: 13px; }
.bpm-meta .tempo-name { color: var(--ink); font-style: italic; font-weight: 600; }
/* Métronome sur un seul écran : du battement (haut) au bouton Démarrer / Arrêter (bas) */
.view.metro { min-height: 100%; gap: 14px; }
.view.metro .metro-actions { margin-top: auto; }
.group.tight { gap: 6px; }
.view.metro .seg button { min-height: 42px; }
.view.metro .range-row input[type="range"] { height: 30px; }
.metro-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.view.metro .btn.big { min-height: 54px; }

/* ——— Accordeur ——— */
.dial { position: relative; }
.dial svg { display: block; width: 100%; height: auto; }
.dial .tick { stroke: var(--muted); stroke-width: 1.5; }
.dial .tick.major { stroke: var(--ink); stroke-width: 2.5; }
.dial .zone { fill: none; stroke: var(--good); stroke-width: 10; opacity: .28; }
.dial .lbl { fill: var(--muted); font: 600 11px var(--font); text-anchor: middle; }
.dial .needle { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; transition: stroke .15s; }
.dial .hub { fill: var(--ink); }
.dial.good .needle { stroke: var(--good); }
.dial.warn .needle { stroke: var(--warn); }
.dial.bad .needle { stroke: var(--bad); }
.dial.idle .needle { stroke: var(--line); }

.note-read { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: -6px; }
.t-note { font: 800 38px/1 var(--font-num); letter-spacing: -.02em; }
.t-note-en { font-size: 18px; color: var(--muted); font-weight: 600; }
.readouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.readouts div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; text-align: center; }
.readouts dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.readouts dd { margin: 2px 0 0; font: 700 17px/1.2 var(--font-num); font-variant-numeric: tabular-nums; }
.cents.good { color: var(--good); } .cents.warn { color: var(--warn); } .cents.bad { color: var(--bad); }
.status-line { font-size: 14px; color: var(--muted); text-align: center; margin: 0; min-height: 20px; text-wrap: pretty; }

/* ——— Mes progrès ——— */
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sum-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.sum-card h3 { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sum-card .big { font: 800 26px/1.1 var(--font-num); font-variant-numeric: tabular-nums; }
.sum-card .sub { font-size: 14px; color: var(--muted); }
.cal-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.cal-head h2 { margin: 0; text-align: center; font-size: 18px; text-transform: capitalize; }
.cal-dow, .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow span { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.day {
  aspect-ratio: 1 / 1.05; max-width: 100%; border-radius: 10px; border: 1px solid transparent; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; gap: 1px;
  font-variant-numeric: tabular-nums;
}
.day .d { font-weight: 700; font-size: 15px; line-height: 1; }
.day .m { font-size: 10.5px; font-weight: 600; color: var(--muted); line-height: 1; min-height: 11px; }
.day.empty { background: none; pointer-events: none; }
.day.l1 { background: rgba(28,88,164,.18); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.day.l2 { background: rgba(28,88,164,.38); background: color-mix(in srgb, var(--accent) 38%, var(--surface)); }
.day.l3 { background: rgba(28,88,164,.62); background: color-mix(in srgb, var(--accent) 62%, var(--surface)); }
.day.l3 .m, .day.l3 .d { color: var(--accent-ink); }
.day.today { border-color: var(--ink); }
.day[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 1px; }
.chips.mini { flex-wrap: nowrap; gap: 6px; }
.chips.mini .chip { min-height: 32px; padding: 2px 4px; font-size: 13px; flex: 1 1 0; min-width: 0; white-space: nowrap; }
.dur-row { display: grid; gap: 2px; }
.dur-head { display: flex; justify-content: space-between; align-items: baseline; }
.dur-head label { font-size: 13px; color: var(--muted); }
.dur-head output { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.dur-ctl { display: flex; align-items: center; gap: 8px; }
.dur-ctl input[type="range"] { flex: 1; }
.icon-btn.small { width: 36px; height: 36px; min-width: 36px; font-size: 20px; font-weight: 700; }
.other-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.other-row .btn { justify-self: start; }
.other-row label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; }
.encourage { text-align: center; color: var(--muted); font-size: 15px; margin: 0; }

/* ——— Sons ——— */
.now { text-align: center; padding-block: 4px; }
.s-note { font: 800 48px/1.05 var(--font-num); }
.s-freq { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; min-height: 22px; }
.kbd-head { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; }
.kbd-head span { text-align: center; font-weight: 700; }
.kbd-mid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.keyboard {
  position: relative; height: 210px; display: flex; gap: 3px; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.key { border: 0; padding: 0 0 10px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 1px; }
.key.white {
  flex: 1; background: var(--key-white); border-radius: 0 0 10px 10px; color: #3a4652;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.08), 0 0 0 1px var(--line);
}
.key.white .fr { font-size: 12px; font-weight: 700; }
.key.white .en { font-size: 10px; opacity: .7; }
.key.black {
  position: absolute; top: 0; height: 58%; background: var(--key-black); border-radius: 0 0 8px 8px; z-index: 2; color: #cfd8e2;
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
}
.key.black .fr { font-size: 9px; font-weight: 700; }
.key.black .en { display: none; }
.key.white.down { background: var(--key-white-down); }
.key.black.down { background: var(--key-black-down); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch { position: relative; width: 56px; height: 34px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); transition: background .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::after { transform: translateX(22px); }
.switch input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.context-line { font-size: 14px; color: var(--muted); text-align: center; margin: 0; }
.context-line b { color: var(--ink); }

@media (min-width: 480px) {
  .keyboard { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Petits écrans (iPhone SE…) : métronome resserré pour tenir sur une page */
@media (max-height: 620px) {
  .view.metro { gap: 8px; }
  .view.metro .arrow { height: 54px; }
  .view.metro .seg button { min-height: 38px; }
  .view.metro .btn.big { min-height: 48px; }
  .beats { padding-top: 2px; min-height: 26px; }
}

/* Boutons compacts */
.btn.small { min-height: 40px; padding: 6px 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.btn.small svg { width: 18px; height: 18px; }
.btn.small.recording { background: var(--bad); color: #fff; border-color: var(--bad); }

/* Commentaire du jour */
.note-box { display: flex; flex-direction: column; gap: 6px; }
.note-box label { font-weight: 600; font-size: 14px; }
.note-box textarea { min-height: 84px; font: 15px/1.4 var(--font); }
.note-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.day.has-note::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.day { position: relative; }

/* Aide micro */
.mic-help { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.mic-help summary { font-weight: 700; cursor: pointer; min-height: 28px; }
.mic-help ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.mic-help b { font-weight: 700; }

/* Version gratuite / complète */
.tab { position: relative; }
.tab-lock { position: absolute; top: 4px; right: calc(50% - 22px); width: 13px !important; height: 13px !important; color: var(--muted); }
body.premium .tab-lock, .premium .tab-lock { display: none; }
.lock-card { align-items: center; text-align: center; gap: 12px; padding: 24px 20px; }
.lock-big { width: 44px; height: 44px; color: var(--accent); }
.lock-title { margin: 0; font-size: 22px; }
.lock-card p { margin: 0; }
.lock-list { text-align: left; margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.lock-card .btn[disabled] { opacity: .6; }

/* Accordeur compact : tout sur un écran */
.view.tuner { gap: 8px; }
.view.tuner .dial svg { max-height: clamp(130px, 25vh, 230px); width: auto; max-width: 100%; margin: 0 auto; }
.view.tuner .readouts div { padding: 5px 8px; }
.view.tuner .readouts dd { font-size: 15px; }
.view.tuner #tuner-toggle { min-height: 48px; }
.view.tuner .status-line { min-height: 0; }
.tune-set { display: flex; flex-direction: column; gap: 8px; }
.a4-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stepper.small { grid-template-columns: 44px 92px 44px; gap: 6px; }
.stepper.small button { height: 40px; font-size: 22px; }
.stepper.small output { font-size: 18px; }
.chips.compact { flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
.chips.compact .chip { min-height: 36px; padding: 4px 12px; font-size: 15px; flex: 1 0 auto; }
.sel-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; }
.sel-row label { display: block; margin-bottom: 3px; }
.sel-row select { min-height: 44px; padding: 6px 8px; font-size: 15px; }
#temp-desc { font-size: 13px; }
.view.tuner .mic-help { margin-top: auto; }
.view.tuner { min-height: 100%; }
@media (max-height: 620px) {
  .view.tuner { gap: 6px; }
  .t-note { font-size: 36px; }
}

.view.tuner .readouts dt { font-size: 10px; }
.view.tuner .readouts dd { margin-top: 0; }
.view.tuner .mic-help { padding: 6px 12px; }
.view.tuner .mic-help summary { min-height: 24px; font-size: 14px; }
.view.tuner #temp-desc { line-height: 1.3; }
@media (max-height: 700px) {
  .view.tuner #temp-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Écrans de hauteur moyenne ou petite : en-tête réduit pour tout voir d'un coup d'œil */
@media (max-height: 760px) {
  .brand { display: none; }
  .app-logo { width: 34px; height: 34px; border-radius: 8px; }
  .topbar { padding-top: 6px; padding-bottom: 2px; }
  .view.tuner #tuner-toggle { min-height: 44px; }
  .stepper.small button { height: 36px; }
  .chips.compact .chip { min-height: 34px; }
  .sel-row select { min-height: 40px; }
}
@media (max-height: 680px) {
  .view.tuner .dial svg { max-height: 155px; }
  .t-note { font-size: 32px; }
  .view.tuner { gap: 6px; }
}
@media (max-height: 600px) {
  .view.tuner #temp-desc { -webkit-line-clamp: 1; }
  .view.tuner .readouts div { padding: 3px 6px; }
}

.account-link { color: var(--accent) !important; min-height: 36px; }

/* Cadran agrandi (V2.0) : la description du tempérament passe en petit texte repliable */
@media (max-height: 820px) {
  .view.tuner #temp-desc { display: none; }
}
@media (max-height: 600px) {
  .view.tuner .dial svg { max-height: 110px; }
}
@media (max-height: 650px) {
  .view.tuner .dial svg { max-height: 128px; }
}
@media (max-height: 600px) {
  .view.tuner .dial svg { max-height: 100px; }
  .view.tuner .mic-help { display: none; }
}

/* Badge « Powered by Netlify » (offre gratuite) : il se plaçait par-dessus les onglets Mes progrès et Sons.
   Bloqué par l'en-tête de sécurité (_headers) ; cette règle sert de filet de sécurité. */
#nl-badge-frame { display: none !important; }

/* Liens vers les pages d'information (conditions, confidentialité, contact) */
.legal-links { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.legal-links a { color: var(--accent); }

/* Choix de la langue */
.sel-row.single { grid-template-columns: 1fr; }

/* Version gratuite : ligne d'information cliquable et touches réservées */
.free-line { display: block; width: 100%; margin: 0; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 10px;
  background: none; color: var(--muted); font: inherit; font-size: 13px; line-height: 1.35; text-align: left; }
.free-line b { color: var(--accent); font-weight: 700; white-space: nowrap; }
.key.locked { opacity: .35; }
.offer-title { margin: 4px 0 0; font-size: 17px; }
select option:disabled { color: var(--muted); }
.free-line.one { display: flex; align-items: center; gap: 8px; padding: 5px 10px; min-height: 34px; }
.free-line.one span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Histoire (Complete) */
.chips.mini.wrap { flex-wrap: wrap; }
.chips.mini.wrap .chip { flex: 0 0 auto; padding: 4px 10px; }
.h-search { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 16px; background: var(--surface); color: inherit; }
.h-list { display: flex; flex-direction: column; gap: 6px; }
.h-row { display: grid; grid-template-columns: 1fr auto 14px; align-items: center; gap: 8px; width: 100%; text-align: left;
  min-height: 46px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; font-size: 15px; }
.h-row.plain { display: block; color: var(--muted); }
.h-dates { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.chev { color: var(--muted); font-size: 18px; }
.h-back { align-self: flex-start; }
.h-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.h-name { margin: 0 0 4px; font-size: 20px; }
.h-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; }
.h-facts dt { color: var(--muted); font-size: 14px; }
.h-facts dd { margin: 0; }
.h-post { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.h-post-head { display: flex; justify-content: space-between; gap: 8px; }
.h-post-head span { color: var(--muted); font-variant-numeric: tabular-nums; }
.h-source { font-style: italic; }
.link-btn { border: 0; background: none; padding: 4px 0; color: var(--accent); font-weight: 600; text-align: left; font-size: 15px; text-decoration: none; }
.orn-row { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.orn-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.orn-music { display: flex; gap: 10px; align-items: flex-start; }
.orn-music figure { margin: 0; }
.orn-music figure.grow { flex: 1; min-width: 0; }
.orn-music figcaption { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.orn-scroll { overflow-x: auto; }
.orn-ref { font-size: 13px; color: var(--muted); margin: 0; }
.notation { display: block; color: var(--text); }
.notation .st { stroke: currentColor; stroke-width: .8; opacity: .7; }
.notation .clef, .notation .nh, .notation .beam { fill: currentColor; }
.notation .nh.open { fill: none; stroke: currentColor; stroke-width: 1.4; }
.notation .stem { stroke: currentColor; stroke-width: 1.1; }
.notation .flag { fill: none; stroke: currentColor; stroke-width: 1.6; }
.notation .orn-tr { font: italic 700 13px Georgia, serif; fill: currentColor; }
.notation .orn-plus { font: 700 15px sans-serif; fill: currentColor; }
.notation .orn-wavy { fill: none; stroke: currentColor; stroke-width: 1.5; }
.notation .acc { font-size: 13px; fill: currentColor; }

/* Fonctions non activées : écran visible en gris, bandeau vers l'offre */
.grey-banner { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.grey-banner p { margin: 0; font-size: 14px; }
.grey-banner .btn { flex: 0 0 auto; }
.view.greyed { filter: grayscale(1); opacity: .45; pointer-events: none; user-select: none; }
.greyed-item { filter: grayscale(1); opacity: .45; }
.tab.is-locked { opacity: .55; }

/* ---------- Guide du micro (V4.7) ---------- */
.mg { position: fixed; inset: 0; z-index: 60; background: rgba(8, 14, 20, .55); display: flex; align-items: flex-end; justify-content: center; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.mg[hidden] { display: none; }
html.mg-open, html.mg-open body { overflow: hidden; }
.mg-card { position: relative; width: 100%; max-width: 460px; max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--surface); color: var(--ink); border-radius: 22px; padding: 22px 18px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 12px; }
@media (min-height: 700px) { .mg { align-items: center; } }
.mg-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; color: var(--muted); cursor: pointer; }
.mg-icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 32px; font-weight: 700; }
.mg-icon.ok { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.mg-icon.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.mg-title { margin: 0; text-align: center; font-size: 23px; line-height: 1.2; }
.mg-lead { margin: 0; font-size: 18px; line-height: 1.4; text-align: center; }
.mg-lead.small { font-size: 16px; }
.mg-center { text-align: center; }
.mg-or { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.mg-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: mg; display: flex; flex-direction: column; gap: 10px; }
.mg-steps li { counter-increment: mg; position: relative; padding: 10px 12px 10px 48px; background: var(--surface-2); border-radius: 12px; font-size: 16.5px; line-height: 1.4; }
.mg-steps li::before { content: counter(mg); position: absolute; left: 10px; top: 9px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.mg-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.mg-wide { width: 100%; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.mg-mock { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); padding: 14px; font-size: 15px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.mg-mock-t { margin-bottom: 12px; line-height: 1.35; }
.mg-mock-b { display: flex; justify-content: flex-end; gap: 10px; }
.mg-mock-b.col { flex-direction: column; align-items: stretch; gap: 6px; }
.mg-mock-b span { padding: 8px 14px; border-radius: 20px; color: var(--muted); text-align: center; }
.mg-mock-b .mg-hit { background: var(--accent); color: var(--accent-ink); font-weight: 700; position: relative; animation: mg-pulse 1.4s ease-in-out infinite; }
.mg-mock-b .mg-hit::after { content: '👆'; position: absolute; right: -6px; bottom: -18px; font-size: 22px; }
.mg-mock-b.col .mg-hit::after { right: 8px; bottom: -14px; }
@keyframes mg-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .mg-mock-b .mg-hit { animation: none; } }
.mg-wait { margin: 0; display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--muted); }
.mg-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: mg-blink 1.2s infinite; }
@keyframes mg-blink { 50% { opacity: .2; } }
.mg-actions .btn:disabled { opacity: .6; }

/* ---------- Roulette du tempo (V4.8) ---------- */
.knob { position: relative; justify-self: center; width: min(190px, calc(100vw - 230px), 26dvh); min-width: 140px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--surface) 0 58%, var(--surface-2) 100%);
  border: 1px solid var(--line); box-shadow: 0 3px 10px rgba(0,0,0,.12), inset 0 -3px 6px rgba(0,0,0,.06);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; display: grid; place-items: center; }
.knob.turning { cursor: grabbing; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 3px 10px rgba(0,0,0,.12); }
.knob-dial { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from -1deg, var(--muted) 0 2deg, transparent 2deg 12deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 13px), #000 calc(100% - 12px) calc(100% - 5px), transparent calc(100% - 4px));
          mask: radial-gradient(circle closest-side, transparent calc(100% - 13px), #000 calc(100% - 12px) calc(100% - 5px), transparent calc(100% - 4px));
  opacity: .55; }
.knob-grip { display: none; }
.knob::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 22px, var(--accent) 0 6px, transparent 7px); transform: rotate(var(--knob-rot, 0deg)); }
.knob .bpm-box { position: relative; z-index: 1; pointer-events: none; padding: 0 14px; }
.knob .bpm-meta { font-size: 12px; max-width: 120px; line-height: 1.25; }
.tempo-row { gap: 8px; }
@media (max-height: 620px) { .knob { width: 122px; min-width: 0; } .knob .bpm { font-size: 42px; } .knob .bpm-meta { font-size: 11px; } }

/* ---------- Glissière du clavier (V4.14) ---------- */
.kbd-strip { position: relative; height: 34px; border-radius: 8px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: ew-resize; background: var(--key-white); box-shadow: 0 0 0 1px var(--line); }
.kbd-strip .sw { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--line); }
.kbd-strip .sw.c { border-left: 1px solid var(--muted); }
.kbd-strip .sb { position: absolute; top: 0; height: 58%; background: var(--key-black); border-radius: 0 0 2px 2px; }
.kbd-strip .sw-win { position: absolute; top: 0; bottom: 0; border: 3px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 22%, transparent); transition: left .08s; }
.kbd-strip.locked { opacity: .4; cursor: default; }

/* ---------- Do central et clavier en paysage (V4.15) ---------- */
.key.white.mid-c { background: linear-gradient(to top, var(--accent-soft) 0 30%, var(--key-white) 30%); }
.key.white.mid-c .fr::before { content: ''; display: block; width: 8px; height: 8px; margin: 0 auto 3px; border-radius: 50%; background: var(--accent); }
.key.white.mid-c.down { background: var(--key-white-down); }
.kbd-strip .sw.mid-c { background: var(--accent); }
.keyboard.two .key.white .en { display: none; }
.keyboard.two .key.white .fr { font-size: 11px; }
.keyboard.two .key.black .fr { display: none; }
@media (orientation: landscape) and (min-width: 560px) {
  html[data-view="sounds"] .app { max-width: none; }
  html[data-view="sounds"] #view-sounds { gap: 10px; }
  html[data-view="sounds"] .now { display: flex; gap: 14px; align-items: baseline; justify-content: center; }
  html[data-view="sounds"] .s-note { font-size: 26px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  /* V4.16 : téléphone tourné → bandeaux du haut et du bas cachés, Son tenu juste sous le clavier */
  html[data-view="sounds"] .topbar, html[data-view="sounds"] .tabbar { display: none; }
  html[data-view="sounds"] main { padding-top: 6px; padding-bottom: max(8px, env(safe-area-inset-bottom)); padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  html[data-view="sounds"] .keyboard { height: max(110px, calc(100dvh - 185px)); }
  html[data-view="sounds"] #view-sounds > * { order: 5; }
  html[data-view="sounds"] #view-sounds > .now { order: 1; }
  html[data-view="sounds"] #view-sounds > .kbd-head { order: 2; }
  html[data-view="sounds"] #view-sounds > .keyboard { order: 3; }
  html[data-view="sounds"] #view-sounds > .panel { order: 4; display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 6px 12px; }
  html[data-view="sounds"] #view-sounds > .panel > div:not(.switch-row) { flex: 1; display: flex; align-items: center; gap: 10px; }
  html[data-view="sounds"] #view-sounds > .panel > div:not(.switch-row) input { flex: 1; }
  html[data-view="sounds"] #view-sounds > .panel .switch-row { flex: none; gap: 10px; }
  html[data-view="sounds"] #view-sounds > .panel .switch-row .hint, html[data-view="sounds"] #view-sounds > .panel .switch-row br { display: none; }
  html[data-view="sounds"] #view-sounds > .panel .btn { flex: none; min-height: 40px; }
  html[data-view="sounds"] .s-freq { min-height: 0; }
  html[data-view="sounds"] .kbd-mid { flex-direction: row; align-items: center; gap: 12px; }
  html[data-view="sounds"] .kbd-mid span { flex: none; min-width: 110px; }
  html[data-view="sounds"] .kbd-strip { flex: 1; }
  html[data-view="sounds"] .kbd-head .icon-btn { width: 42px; height: 42px; }
  html[data-view="sounds"] .kbd-strip { height: 26px; }
}

/* ---------- Histoire : tri (V4.18) ---------- */
.h-sortrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.seg.small button { min-height: 34px; font-size: 13px; padding: 0 10px; }
.h-letter { margin: 10px 0 2px; font-size: 15px; color: var(--accent); font-weight: 800; }
.h-source a { color: var(--accent); }

/* ---------- Mes instruments (V4.18) ---------- */
.inst-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 2px 8px; }
.inst-row > label { grid-column: 1 / -1; }
.inst-row select { min-height: 40px; padding-block: 4px; font-weight: 600; }
.inst-row .icon-btn { width: 40px; height: 40px; }
.view.tuner .dial svg { max-height: clamp(56px, 9vh, 230px); }
@media (max-height: 650px) { .view.tuner #a4-quick { display: none; } }
.inst-row select { min-width: 0; }
.inst-sheet .mg-card { max-width: 520px; }
#inst-list { display: flex; flex-direction: column; gap: 10px; }
.inst-card { border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.inst-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.inst-name { font: inherit; font-weight: 700; font-size: 17px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.inst-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.inst-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 0; }
.inst-grid select, .inst-grid input { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px; min-width: 0; width: 100%; box-sizing: border-box; }
.inst-hz { display: grid; grid-template-columns: 28px 1fr 28px; gap: 2px; }
.inst-hz button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; color: var(--ink); font-size: 16px; }
.inst-hz input { text-align: center; padding: 6px 0; -moz-appearance: textfield; }
.inst-hz input::-webkit-outer-spin-button, .inst-hz input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inst-btns { display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 400px) { .inst-grid { grid-template-columns: 1fr 1fr; } .inst-grid label:first-child { grid-column: 1 / -1; } }

/* ---------- Connexion par code (V4.19) ---------- */
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form input { font: inherit; font-size: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.login-form .code-input { text-align: center; font: 700 32px/1.2 var(--font-num); letter-spacing: .35em; padding: 12px 0 12px .35em; }
.inst-pick { font: inherit; font-weight: 700; font-size: 16px; padding: 10px; border-radius: 12px; border: 2px solid var(--accent); background: var(--surface); color: var(--ink); width: 100%; }
.inst-card { cursor: pointer; }
.inst-hz button { touch-action: none; user-select: none; -webkit-user-select: none; }

/* Sons : Égal · 440 / Mes tempéraments (V4.23) */
.inst-s { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.inst-s .btn { min-height: 44px; }
#s-reset[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#a4-quick .chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
#a4-quick .chip small { font-size: 9px; font-weight: 600; opacity: .75; letter-spacing: .02em; }
.view.tuner .tune-set { gap: 6px; }
.view.tuner .sel-row .group-title, .inst-row > label { margin-bottom: 0; line-height: 1.2; }
@media (max-height: 680px) { .view.tuner .readouts div { padding: 3px 8px; } .view.tuner #tuner-toggle { min-height: 44px; } }

/* Accordeur : 3 sections de couleurs légèrement différentes (V4.28) */
.tsec { border-radius: 12px; padding: 4px 8px; display: flex; flex-direction: column; gap: 5px; }
.tsec.inst-row { display: grid; }
.sec-a4 { background: color-mix(in srgb, #2f7fd8 9%, var(--bg)); }
.sec-temp { background: color-mix(in srgb, #2fa36b 10%, var(--bg)); }
.sec-inst { background: color-mix(in srgb, #c98a1c 11%, var(--bg)); }
.view.tuner .tune-set { gap: 5px; }
@media (max-height: 680px) { .view.tuner .note-read { min-height: 0; } .view.tuner .t-note { font-size: 26px; } .view.tuner .status-line { font-size: 13px; } }
/* V4.29 : section Diapason un peu plus grande (la pastille bleue ne touche plus le bord), aide du micro rapprochée */
.sec-a4 { padding: 7px 9px 9px; gap: 7px; }
.view.tuner .mic-help { margin-top: 6px; }
/* V4.30 : section Tempérament plus grande ; le cadre bleu du menu choisi ne recouvre plus le titre */
.sec-temp { padding: 8px 9px 10px; }
.sec-temp .sel-row .group-title { display: block; margin-bottom: 6px; }
.sec-temp select:focus, .sec-temp select:focus-visible { outline-offset: 0; }
.view.tuner .sec-temp .sel-row > div { display: flex; flex-direction: column; gap: 7px; }
.view.tuner .sec-temp .sel-row .group-title { margin: 0; }
@media (max-height: 680px) { .view.tuner { gap: 4px; } .view.tuner .readouts dt { font-size: 9px; } } @media (max-height: 600px) { .view.tuner .status-line { display: none; } }
.view.tuner .sec-temp .sel-row > div { gap: 12px; } .view.tuner .sec-temp { padding-top: 10px; }
/* V4.32 : menus uniformes ; cadre bleu de sélection collé au menu ; même espace titre → menu */
.view.tuner .inst-row select { font-weight: 400; font-size: 15px; min-height: 44px; padding: 6px 8px; }
.view.tuner .inst-row { row-gap: 12px; }
.view.tuner .tune-set select:focus-visible, .view.tuner .tune-set select:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-height: 700px) { .view.tuner .inst-row select, .view.tuner .sel-row select { min-height: 40px; } .view.tuner .inst-row .icon-btn { width: 40px; height: 40px; } }
.view.tuner .sec-inst { padding: 10px 9px 10px; }
@media (max-height: 700px) { .view.tuner .readouts div { padding: 2px 8px; } .view.tuner #tuner-toggle { min-height: 40px; } .view.tuner .mic-help { padding: 4px 12px; } }

/* Accordage pour programme (V4.34) */
.pg-open { min-height: 44px; width: 100%; padding: 4px 8px; font-size: 14px; line-height: 1.15; background: color-mix(in srgb, #7a4fc4 12%, var(--surface)); border-color: color-mix(in srgb, #7a4fc4 40%, var(--line)); }
.pg-sheet .mg-card { max-width: 560px; }
.pg-list { display: flex; flex-direction: column; gap: 6px; }
.pg-row { display: grid; grid-template-columns: 14px 1.2fr 1fr 28px; gap: 6px; align-items: center; }
.pg-n { font-size: 10px; color: var(--muted); text-align: right; }
.pg-row input, .pg-row select, .pg-manual select { font: inherit; font-size: 15px; padding: 7px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-width: 0; }
.pg-del { border: 0; background: none; color: var(--bad); font-size: 22px; }
.pg-sum p { margin: 4px 0; }
.pg-prog { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-k, .pg-c { border-radius: 8px; padding: 4px 8px; font-size: 13px; font-weight: 600; }
.pg-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pg-c { text-align: center; font-size: 12px; padding: 5px 2px; }
.pg-c.in { outline: 2px solid var(--ink); outline-offset: -2px; }
.g { background: color-mix(in srgb, #2fa36b 28%, var(--surface)); }
.o { background: color-mix(in srgb, #e39b2d 30%, var(--surface)); }
.r { background: color-mix(in srgb, #d0503c 28%, var(--surface)); }
.pg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 6px; vertical-align: middle; }
.pg-dot.g { background: #2fa36b; } .pg-dot.o { background: #e39b2d; } .pg-dot.r { background: #d0503c; }
.pg-manual summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); }
.pg-manual select { margin-top: 6px; width: 100%; }
.pg-choice { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px 20px; }
.pg-choice .chip { min-height: 34px; font-size: 13px; padding: 0 10px; }

.temp-style { font-style: italic; opacity: .85; }
.pg-carac { margin: 18px 0 2px; }
.pg-carac + .pg-legend { margin: 0 0 6px; }

/* Assistant pour vents historiques (V4.42) */
.inst-row { grid-template-columns: minmax(0, 1.15fr) 40px minmax(0, 1fr); }
.inst-row > label { grid-column: 1 / 3; grid-row: 1; }
.inst-row > select { grid-column: 1; grid-row: 2; } .inst-row > .icon-btn { grid-column: 2; grid-row: 2; }
.hw-open { grid-column: 3; grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
  padding: 4px 8px; text-align: left; line-height: 1.12;
  background: color-mix(in srgb, #2a7f8f 12%, var(--surface)); border-color: color-mix(in srgb, #2a7f8f 40%, var(--line)); }
.hw-open b { font-size: 12.5px; } .hw-open small { font-size: 10px; color: var(--muted); font-weight: 400; }
.hw-chips { margin-bottom: 6px; } .hw-chips .chip { min-height: 34px; font-size: 13px; padding: 0 10px; }
.hw-in { width: 100%; font: inherit; font-size: 15px; padding: 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); margin-bottom: 6px; }
.hw-live { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); margin: 6px 0; }
.hw-hz { font-variant-numeric: tabular-nums; color: var(--muted); }
.hw-bar { flex: 1 1 100%; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hw-bar i { display: block; height: 100%; background: #2fa36b; transition: width .1s linear; }
.hw-notes { display: flex; flex-wrap: wrap; gap: 4px; }
.hw-notes span { font-size: 13px; padding: 3px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.hw-notes small, .hw-map small { display: block; font-size: 10px; font-weight: 400; }
.hw-map { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.hw-err { color: var(--bad); }
.view.tuner .inst-row { row-gap: 4px; }
.view.tuner .sec-inst { padding-top: 7px; padding-bottom: 7px; }
.inst-row { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.15fr); column-gap: 6px; }
.hw-open small { font-size: 9.5px; }
.hw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* Assistant vents historiques : hiérarchie des titres (V4.47) */
.hw-sheet .hw-step { display: block; margin: 16px 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.hw-sheet .hw-step.hw-grey { color: var(--muted); }
.hw-sheet .hw-sub { margin: 8px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
.hw-sheet .hw-chips .chip { min-height: 28px; font-size: 12px; padding: 0 8px; }
.hw-btns { display: flex; flex-wrap: nowrap; gap: 6px; }
.hw-btns .btn { flex: 1 1 auto; min-height: 34px; padding: 4px 8px; font-size: 12.5px; line-height: 1.15; }
.hw-opts .chip { min-height: 30px; font-size: 12px; padding: 0 8px; }
.hw-save { display: block; margin: 12px auto 0; min-height: 36px; padding: 6px 16px; font-size: 14px; }
.hw-sheet .mg-actions { justify-content: center; }
.hw-close { min-height: 34px; padding: 4px 18px; font-size: 14px; }
.hw-sheet .mg-actions .hw-close { width: auto; flex: 0 0 auto; }
.hw-sheet .hw-save { width: auto; }
.hw-sheet .hw-step.hw-grey { font-weight: 400; font-size: 14px; color: color-mix(in srgb, var(--muted) 75%, var(--bg)); margin-bottom: 0; }
.hw-why { margin: 0 0 6px; font-size: 12px; }
.hw-a4 { font-size: 18px; margin: 10px 0 4px; }
.hw-cap { margin: 8px 0 4px; font-size: 13px; color: var(--muted); }
.hw-sheet .mg-actions { align-items: center; }
.pg-add { align-self: flex-start; margin-top: 6px; min-height: 34px; padding: 4px 12px; font-size: 13px; }
.pg-intro { font-size: 12.5px; margin: 0 0 4px; }
.pg-ex { min-height: 32px; font-size: 12.5px; }
.pg-sheet .hw-save { margin-top: 18px; }
.pg-sheet .pg-manual { margin-top: 16px; }

/* V4.50 : accordeur — cadran plus grand, mesures et bouton micro compacts */
.inst-row > .hw-title { grid-column: 3; grid-row: 1; margin: 0; line-height: 1.2; }
.hw-open { grid-row: 2; font-size: 11.5px; font-weight: 600; line-height: 1.15; min-height: 44px; }
.view.tuner #tuner-toggle { min-height: 30px !important; padding: 4px 14px; font-size: 13px; align-self: center; width: auto; }
.view.tuner .readouts { gap: 6px; }
.view.tuner .readouts div { padding: 1px 6px !important; border-radius: 9px; display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.view.tuner .readouts dt { font-size: 8.5px !important; letter-spacing: .03em; }
.view.tuner .readouts dd { font-size: 13px !important; margin: 0; }
.view.tuner .dial svg { max-height: var(--dialh, 200px); }
.view.tuner { position: relative; }
.view.tuner #tuner-toggle { position: absolute; top: 2px; right: 0; z-index: 2; min-height: 28px !important; padding: 3px 10px; font-size: 12px; }
.view.tuner .status-line { position: absolute; top: 34px; right: 0; z-index: 2; max-width: 34%; margin: 0; font-size: 11px; line-height: 1.2; text-align: right; display: block !important; }
.view.tuner .mic-help { padding: 2px 10px !important; font-size: 12.5px; }
.view.tuner .mic-help > summary { min-height: 0; padding: 2px 0; font-size: 12.5px; }
:root { --dialh: clamp(100px, calc(100vh - 528px), 300px); }

.pg-sheet .pg-list { gap: 3px; }
.pg-sheet .pg-row input, .pg-sheet .pg-row select { height: 38px; min-height: 38px; padding: 4px 8px; box-sizing: border-box; font-size: 14.5px; }
.pg-sheet .pg-choice { padding-top: 0; padding-bottom: 2px; }
.pg-need { margin: 4px 0 0; font-size: 12px; }
.pg-cexp { font-size: 12px; margin: 4px 0 0; }
.pg-ex { display: block; margin-top: 14px; min-height: 28px !important; font-size: 11.5px !important; padding: 0 10px !important; }
.pg-exl { font-size: 12px; margin: 4px 0 0; }
.pg-exc { opacity: 1 !important; text-decoration: line-through; color: var(--muted) !important; background: transparent !important; border-style: dashed !important; }
.pg-exc small { text-decoration: none; display: inline-block; margin-left: 4px; font-weight: 400; }

/* V4.57 : micro à droite de la note, titres noirs, couleurs des boutons */
.view.tuner .note-read { position: relative; min-height: 32px; }
.view.tuner .note-read #tuner-toggle { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.view.tuner .note-read .status-line { position: absolute; top: 50%; left: 0; transform: translateY(-50%); max-width: 30%; text-align: left; }
.view.tuner .tune-set .group-title, .view.tuner .inst-row > label, .view.tuner .hw-title { color: var(--ink); }
.pg-open { background: color-mix(in srgb, #2f8a5b 22%, var(--surface)); border-color: color-mix(in srgb, #2f8a5b 55%, var(--line)); }
.hw-open { background: color-mix(in srgb, #c98a1c 30%, var(--surface)); border-color: color-mix(in srgb, #c98a1c 60%, var(--line)); }
:root { --dialh: clamp(100px, calc(100vh - 532px), 300px); }
.inst-lbl { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.inst-det { margin-top: 4px; min-height: 28px; font-size: 11.5px; padding: 2px 8px; }
.inst-det small { font-weight: 400; color: var(--muted); }
.inst-grid label:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-items: center; grid-column: 1 / -1; }
.inst-grid label:first-child > .inst-hz { grid-column: 1; }
.inst-grid label:first-child > .inst-det { grid-column: 2; margin-top: 0; min-height: 40px; max-width: 150px; line-height: 1.15; text-align: center; }
.inst-grid { grid-template-columns: 1fr 1fr; }

/* V4.63 · Programme, partie 3 : légende sous le titre, blocs de couleurs plus espacés */
.pg-sheet .pg-legend.pg-leg3 { margin: 0 0 12px; }
.pg-sheet .pg-sum { margin: 0 0 16px; }
.pg-sheet .pg-prog { gap: 8px; }
.pg-sheet .pg-map { gap: 8px; margin: 0 0 16px; }
.pg-sheet .pg-kl { margin: 0 0 10px; }
.pg-sheet .pg-kl + .hw-save { margin-top: 16px; }

/* V4.64 · Programme, partie 3 : tempérament choisi en bleu, sous-titres */
.pg-sheet .pg-tsel { color: var(--accent); }
.pg-sheet .pg-sub { margin: 4px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.pg-sheet .pg-prog { margin: 0 0 16px; }

/* V4.65 · bouton micro de l'accordeur : carré sur deux lignes (étroit dans toutes les langues) */
.view.tuner .note-read #tuner-toggle { width: 88px; max-width: 88px; min-height: 46px !important; padding: 4px 6px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; overflow-wrap: break-word; hyphens: auto; border-radius: 12px; }

/* V4.67 · Assistant vents : 3) comme 2), A et tempérament choisi en bleu, légende sous B, explication sous C */
.hw-sheet .hw-blue { color: var(--accent); }
.hw-sheet .pg-legend.hw-legB { margin: 0 0 6px; }
.hw-sheet .hw-cexp { margin: 0 0 6px; }

/* ================= V4.68-ESSAI : accueil, menu à deux lignes, séance ================= */
.top-right { display: flex; align-items: center; gap: 8px; flex: none; }
.ses-chip { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ses-chip[hidden] { display: none; }
.ses-chip.paused { background: var(--accent-soft); color: var(--accent); }
.ses-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: sesblink 1.2s infinite; }
.ses-chip.paused .ses-dot { animation: none; opacity: .5; }
@keyframes sesblink { 50% { opacity: .25; } }
.ses-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: inherit; font-size: 13px; line-height: 1; display: grid; place-items: center; padding: 0; }
.ses-chip.paused .ses-btn { background: var(--surface); }

.tabbar.tabbar2 { display: block; padding: 2px 4px 6px; }
.nav-groups { display: grid; grid-template-columns: repeat(5, 1fr); }
.ng { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; padding: 4px 1px 3px; color: var(--muted); font-size: 10.5px; font-weight: 600; border-radius: 10px; min-width: 0; }
.ng .tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ng-ico { font-size: 19px; line-height: 1.15; filter: grayscale(.35); }
.ng[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); }
.ng[aria-selected="true"] .ng-ico { filter: none; }
.ng.is-locked { opacity: .55; }
.ng .tab-lock { top: 1px; right: calc(50% - 20px); }
.nav-items { display: flex; justify-content: space-around; gap: 4px; margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--line); }
.nav-items[hidden] { display: none; }
.nav-items .tab { flex: 1 1 0; flex-direction: row; justify-content: center; gap: 6px; padding: 6px 4px; font-size: 12px; }
.nav-items .tab svg { width: 20px; height: 20px; flex: none; }
.nav-items .tab .tab-label { white-space: normal; line-height: 1.1; text-align: left; }
.nav-items .tab .tab-lock { top: 2px; right: 4px; }
.nav-items .tab[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); }
:root { --dialh: clamp(90px, calc(100vh - 552px), 300px); }
.one-row { --dialh: clamp(90px, calc(100vh - 532px), 300px); }

.view.home { gap: 16px; padding-top: 6px; }
.home-hello { font-size: 26px; font-weight: 700; margin: 0; }
.home-inst { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px 14px; font-size: 15.5px; font-weight: 600; color: var(--accent); }
.home-inst::before { content: '🎻 '; }
.home-ses { display: flex; flex-direction: column; gap: 8px; }
.home-ses .ses-main { font-variant-numeric: tabular-nums; }
.home-ses .ses-end[hidden] { display: none; }
.home-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.home-quick .btn { padding-inline: 4px; }
.home-week { margin: 0; font-size: 15px; font-weight: 600; text-align: center; }
.home-resume { justify-content: center; }
.home-resume[hidden], .home-trial[hidden] { display: none; }
.prog-ses { margin-bottom: 2px; }
.ses-sheet textarea { width: 100%; box-sizing: border-box; min-height: 80px; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ses-total { font-size: 28px; font-weight: 700; text-align: center; margin: 2px 0 10px; color: var(--accent); }
.s-sub { margin: 4px 0 0; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.plans { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.plans-title { margin: 4px 0 0; font-size: 16px; }
.plan { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; }
.plan span { color: var(--muted); font-size: 13px; }
.plan-main { border-color: var(--accent); }
.plans-note { font-size: 12px; }

/* ================= V4.69 : accueil (choix instrument / accordeur), page Mes instruments ================= */
.home-q { margin: -8px 0 0; font-size: 17px; font-weight: 600; }
.home-choices { display: flex; flex-direction: column; gap: 10px; }
.home-choice { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px 14px; color: var(--ink); font: inherit; }
.home-choice svg { width: 30px; height: 30px; flex: none; color: var(--accent); }
.home-choice span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-choice b { font-size: 16px; }
.home-choice small { font-size: 13px; color: var(--accent); font-weight: 600; }
.home-choice::after { content: '›'; margin-left: auto; font-size: 22px; color: var(--muted); }
.inst-page { gap: 14px; }
.inst-intro { margin: 0; font-size: 13.5px; }
.inst-page #inst-list { display: flex; flex-direction: column; gap: 8px; }
.inst-page .inst-card { padding: 7px 8px; gap: 5px; border-radius: 12px; }
.inst-page .inst-name { font-size: 15px; padding: 5px 8px; }
.inst-page .inst-lbl { gap: 1px; font-size: 11px; }
.inst-page .inst-grid { gap: 5px 6px; }
.inst-page .inst-grid label { font-size: 11px; gap: 2px; }
.inst-page .inst-grid select, .inst-page .inst-grid input { font-size: 14px; padding: 4px 5px; }
.inst-page .inst-hz { grid-template-columns: 30px 1fr 30px; }
.inst-page .inst-det { min-height: 32px !important; font-size: 11px; }
.inst-page .inst-btns .btn { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.inst-page .inst-pick { font-size: 15px; padding: 8px; }

/* V4.70 · Mes instruments : titres comme les étapes 1) 2) 3) des assistants */
.inst-page .inst-h { display: block; margin: 6px 0 2px; font-size: 16px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.nav-items .tab[data-act="winds"] .tab-label { font-size: 11px; }

/* V4.71 · Assistant vents : notes libres (La d'abord) */
.hw-grid12 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 6px 0 2px; }
.hw-grid12 span { text-align: center; font-size: 13px; font-weight: 600; padding: 6px 2px; border-radius: 8px; border: 1px dashed var(--line); color: var(--muted); }
.hw-grid12 span.on { border: 1px solid #2fa36b; background: color-mix(in srgb, #2fa36b 18%, var(--surface)); color: var(--ink); }
.hw-grid12 span.ref { box-shadow: inset 0 0 0 2px var(--accent); }
.hw-count { margin: 2px 0 6px; font-size: 12.5px; }
.hw-warn { color: #b26a00; font-weight: 600; }
.hw-oct { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.hw-oct + .hw-grid12 { margin-top: 2px; }
.hw-grid12 span { font-size: 12px; }

/* V4.74 · grille des notes entendues : petites cases, bleu ciel (le vert reste réservé aux notes justes) */
.hw-grid12 { grid-template-columns: repeat(12, 1fr); gap: 2px; margin: 2px 0 0; }
.hw-grid12 span { font-size: 9.5px; font-weight: 600; padding: 3px 0; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); line-height: 1.1; letter-spacing: -.02em; }
.hw-grid12 span.on { border: 1px solid #7fb8ea; background: #d6ebfb; color: #12406e; }
.hw-grid12 span.ref { box-shadow: inset 0 0 0 1.5px var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hw-grid12 span.on { background: #1d3b57; color: #cfe6fb; border-color: #3f78a8; } }
.hw-oct { margin: 4px 0 0; font-size: 11px; }

/* V4.74 · fiabilité du résultat (notes libres) */
.hw-a4.hw-lv.r { color: #c0392b; }
.hw-a4.hw-lv.o { color: #b8860b; }
.hw-a4.hw-lv.g { color: #2f8a5b; }
.hw-miss { margin: 0 0 6px; font-size: 12.5px; }
.hw-howto p { margin: 0 0 4px; }
.hw-howto ol { margin: 0 0 4px; padding-left: 22px; }
.hw-howto li { margin: 1px 0; }

/* V4.79 · Mes tempéraments */
.ut-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.ut-grid label { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; font-weight: 600; color: var(--muted); min-width: 0; }
.ut-grid input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; text-align: center; padding: 4px 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); -moz-appearance: textfield; }
.ut-grid input::-webkit-outer-spin-button, .ut-grid input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ut-grid input:disabled { opacity: .6; }
.ut-copy { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ut-copy select { font: inherit; font-size: 13px; padding: 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
#view-temps > .btn.primary { margin-top: 4px; }

/* V4.82 · octaves élargies dans l'Accordeur */
.stretch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.stretch-row select { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
:root { --dialh: clamp(90px, calc(100vh - 580px), 300px); }
.one-row { --dialh: clamp(90px, calc(100vh - 560px), 300px); }
.stretch-fx { margin: 2px 0 0; font-size: 11.5px; }

/* V4.86 : Bourdon & sons — pas de trait avant la première touche, « Garder la note » juste sous le clavier */
.s-note:empty { display: none; }
.s-hold { margin-top: 2px; }

/* V4.88 : envoyer le travail de la semaine */
.send-week { width: 100%; }
.send-sheet .mg-card input, .send-sheet .mg-card textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.send-sheet .mg-card textarea { min-height: 150px; font-size: 14px; line-height: 1.4; }
.send-sheet .group-title { margin: 4px 0 -6px; }
.send-sheet .mg-card .btn { min-height: 46px; }

/* V4.90 : bouton « Le micro ne démarre pas ? » à la place du texte d'état, à gauche de « Activer le micro » */
.view.tuner .note-read .mic-help-btn { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 104px; max-width: 30%; min-height: 46px; padding: 4px 6px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; }
.mic-help-sheet .mg-card.mic-help { border: 0; padding: 22px 18px 18px; font-size: 15.5px; }
.mic-help-sheet .mic-help ol { line-height: 1.4; }
#tuner-msg[hidden] { display: none !important; }
.mic-help-sheet .mg-title { padding: 0 34px; }

/* V4.91 : Bourdon & sons — explication en haut du cadre, puis Son tenu et Volume côte à côte */
.s-hold { gap: 10px; }
.s-hold-hint { margin: 0; }
.s-hold-row { display: flex; align-items: stretch; gap: 14px; }
.s-hold-row .switch-row { flex: none; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.s-hold-row .s-vol { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.s-hold-row .s-vol .group-title { margin: 0; }
.s-hold-row .s-vol input { width: 100%; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] .s-hold-hint { display: none; }
  html[data-view="sounds"] #view-sounds > .panel.s-hold > .s-hold-row { flex: 1; }
}
.s-hold-row .switch-row { align-items: center; }

/* ================= V4.93 : Bourdons & sons — page compacte ================= */
#view-sounds .s-intro { margin: -2px 0 0; font-size: 13px; line-height: 1.35; text-align: center; }
#view-sounds .s-now { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; padding-block: 0; }
#view-sounds .s-play { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
#view-sounds .s-play .s-note { font-size: 30px; }
#view-sounds .s-play .s-freq { min-height: 0; }
#view-sounds .s-ctx { flex: none; text-align: right; font-size: 12.5px; line-height: 1.3; }
.s-ctl { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.s-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 6px; }
.s-lab { font-size: 12px; font-weight: 700; color: var(--muted); }
.s-ctl .seg.small { padding: 3px; gap: 3px; }
.s-ctl .seg.small button { min-height: 34px; font-size: 12.5px; padding: 0 5px; white-space: nowrap; }
.s-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.s-line .s-mode { flex: none; }
.s-line input[type="range"] { flex: 1; min-width: 50px; }
.s-stop { flex: none; min-height: 34px !important; padding: 0 10px; font-size: 13px; font-weight: 700; }
.s-ctl .inst-s { gap: 6px; }
.s-ctl .inst-s { grid-template-columns: auto 1fr; }
.s-ctl .inst-s .btn { min-height: 34px; font-size: 12.5px; padding: 0 8px; white-space: nowrap; }
@media (max-width: 340px) { .s-row { grid-template-columns: 1fr; gap: 3px; } }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] #view-sounds .s-sub, html[data-view="sounds"] #view-sounds .s-intro { display: none; }
  html[data-view="sounds"] #view-sounds > .s-now { order: 1; }
  html[data-view="sounds"] #view-sounds > .panel.s-ctl { order: 4; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 5px 10px; }
  html[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row { display: flex; flex: none; gap: 6px; }
  html[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row:nth-child(2) { flex: 1; }
  html[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row:nth-child(2) .s-line { flex: 1; }
  html[data-view="sounds"] #view-sounds .s-lab { display: none; }
  html[data-view="sounds"] #view-sounds .s-ctl .seg.small button, html[data-view="sounds"] #view-sounds .s-ctl .inst-s .btn { min-height: 30px; }
}
.s-vol-ic { flex: none; width: 18px; height: 18px; margin-right: -4px; color: var(--muted); }

/* V4.95 : fenêtre « Envoyer mon travail » */
.send-sheet input.bad { border-color: var(--bad); }
.sw-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sw-dates label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 700; color: var(--muted); }
.sw-check { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.send-sheet .sw-check input { width: 22px; height: 22px; padding: 0; flex: none; accent-color: var(--accent); }
.sw-audio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sw-audio .btn { min-height: 44px; font-size: 14px; display: flex; align-items: center; justify-content: center; text-align: center; }
#sw-rec.on { color: var(--bad); border-color: var(--bad); font-variant-numeric: tabular-nums; }
.sw-audio-on { display: flex; flex-direction: column; gap: 4px; }
.sw-audio-on[hidden] { display: none; }
.sw-audio-on audio { width: 100%; }
.sw-audio-on .btn { min-height: 36px !important; align-self: flex-start; }
.sw-dates input { min-width: 0; max-width: 100%; }
.sw-dates label { min-width: 0; }
/* V4.96 : ligne Mode avec « Stop » */
.s-line { gap: 5px; }
.s-line .s-mode button { font-size: 12px; padding: 0 4px; }
.s-line input[type="range"] { min-width: 34px; }
.s-stop { padding: 0 8px !important; }
.s-vol-ic { margin-right: -2px; }
.s-ctl .s-line .seg.small button { font-size: 12px; padding: 0 5px; }
.s-ctl .s-row { grid-template-columns: 78px minmax(0, 1fr); }
.s-ctl .s-lab { font-size: 11.5px; }

/* V4.97 : chronomètre de séance visible seulement dans « Jouer » (Accordeur, Métronome, Bourdons & Sons) */
#ses-chip { display: none !important; }   /* V5.15 : chronomètre seulement en bas à gauche du menu */
/* Bourdons & Sons : sous-titre en noir, plus grand, plus près de l'explication ; espace avant le menu du bas */
#view-sounds .s-sub { color: var(--ink); font-size: 16.5px; font-weight: 700; margin: 2px 0 -6px; }
#view-sounds { padding-bottom: 16px; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] main { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  html[data-view="sounds"] .keyboard { height: max(110px, calc(100dvh - 195px)); }
}

/* ================= V4.98 : Bourdons & Sons tient sur un écran ================= */
#view-sounds { gap: 8px; padding-bottom: 10px; }
#view-sounds .s-top { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: -6px; }
#view-sounds .s-top .s-sub { margin: 0; }
.s-howto { min-height: 30px !important; padding: 2px 12px; font-size: 13px; border-radius: 999px; }
#view-sounds .s-play .s-note { font-size: 19px; }
#view-sounds .s-play .s-freq { font-size: 13px; }
#view-sounds .s-play { gap: 8px; }
#view-sounds .kbd-head { grid-template-columns: 44px 1fr 44px; gap: 6px; }
#view-sounds .kbd-head .icon-btn { width: 44px; height: 44px; }
#view-sounds .kbd-mid { gap: 3px; }
#view-sounds .kbd-strip { height: 30px; }
#view-sounds .keyboard { height: clamp(130px, calc(100dvh - 560px), 240px); }
.s-ctl { gap: 5px; padding: 6px 10px; }
.s-ctl .s-mode { width: 100%; }
.s-ctl .s-line input[type="range"] { flex: 1; min-width: 60px; }
.s-ctl .s-row { grid-template-columns: 92px minmax(0, 1fr); }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] #view-sounds .s-top { display: none; }
  html[data-view="sounds"] #view-sounds .keyboard { height: max(110px, calc(100dvh - 160px)); }
  html[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row:nth-child(2) { flex: none; }
  html[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row:nth-child(3) { flex: 1; }
  html[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row:nth-child(3) .s-line { flex: 1; }
  html[data-view="sounds"] #view-sounds .s-ctl .s-mode { width: auto; }
  html[data-view="sounds"] #view-sounds > .s-now { margin-bottom: -4px; }
  html[data-view="sounds"] #view-sounds .s-play .s-note { font-size: 17px; }
}
#view-sounds .keyboard { height: clamp(100px, calc(100dvh - 585px), 280px); }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] #view-sounds .keyboard { height: max(100px, calc(100dvh - 190px)); }
  html[data-view="sounds"] #view-sounds { gap: 6px; padding-bottom: 4px; }
}
#view-sounds .keyboard { height: clamp(100px, calc(100dvh - 540px), 280px); }

/* V4.99 : ligne « Mode » en premier : Solfège / Étudiant (440 Hz) ou Mes tempéraments */
.s-ctl .inst-s { grid-template-columns: 1fr 1fr; }
.s-ctl .s-solf { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; white-space: normal !important; padding: 2px 6px !important; }
.s-ctl .s-solf small { font-size: 10.5px; font-weight: 600; opacity: .85; }
.s-ctl .inst-s .btn { min-height: 38px; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row { flex: none !important; }
  html[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row-vol { flex: 1 !important; }
  html[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row-vol .s-line { flex: 1; }
  html[data-view="sounds"] #view-sounds .s-ctl .s-solf { flex-direction: row; gap: 4px; white-space: nowrap !important; }
  html[data-view="sounds"] #view-sounds .s-ctl .inst-s .btn { min-height: 32px; }
}
#view-sounds .keyboard { height: clamp(90px, calc(100dvh - 555px), 280px); }
.s-ctl .inst-s { grid-template-columns: 1.2fr 1fr; }
.s-ctl .s-solf span { white-space: nowrap; }
.s-ctl .inst-s .btn:not(.s-solf) { white-space: normal; line-height: 1.15; }
.s-ctl .s-row { grid-template-columns: 70px minmax(0, 1fr); }
.s-ctl .inst-s { grid-template-columns: 1fr 1fr; }
.s-ctl .inst-s .btn { padding: 2px 4px !important; }
.s-ctl .inst-s .btn:not(.s-solf) { white-space: nowrap; }
@media (max-width: 380px) { .s-ctl .inst-s .btn { font-size: 11.5px; } }

/* V5.00 : Bourdons & Sons — en-tête : sous-titre à gauche (note jouée à droite),
   dessous « Fonctionnement » à gauche et le diapason sur une seule ligne ; paysage : une seule ligne */
#view-sounds .s-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sub sub play" "how ctx ctx"; align-items: center; column-gap: 10px; row-gap: 6px; margin-top: -6px; }
#view-sounds .s-head .s-sub { grid-area: sub; margin: 0; text-align: left; }
#view-sounds .s-head .s-play { grid-area: play; display: flex; align-items: baseline; gap: 6px; justify-self: end; }
#view-sounds .s-head .s-play .s-note { font-size: 16px; }
#view-sounds .s-head .s-play .s-freq { font-size: 12px; min-height: 0; }
#view-sounds .s-head .s-howto { grid-area: how; justify-self: start; }
#view-sounds .s-head .s-ctx { grid-area: ctx; text-align: center; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] #view-sounds > .s-head { order: 1; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "how ctx play"; margin: 0; }
  html[data-view="sounds"] #view-sounds .s-head .s-sub { display: none; }
  html[data-view="sounds"] #view-sounds .s-head .s-howto { min-height: 28px !important; font-size: 12px; }
}
#view-sounds .keyboard { height: clamp(90px, calc(100dvh - 515px), 290px); }
#view-sounds .keyboard { height: clamp(90px, calc(100dvh - 525px), 290px); }
#view-sounds .s-head .s-sub { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#view-sounds .s-head { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; }
#view-sounds .s-head .s-play .s-note { font-size: 14px; }
#view-sounds .s-head .s-play .s-freq { font-size: 11px; }
#view-sounds .s-head .s-howto { min-height: 30px !important; padding: 2px 10px; font-size: 12.5px; }
#view-sounds .s-head .s-ctx { font-size: 12px; white-space: normal; text-align: center; line-height: 1.25; }
/* V5.01 : bouton « Mon diapason & mon tempérament » sur deux lignes si besoin */
.s-ctl .inst-s .btn:not(.s-solf) { white-space: normal; line-height: 1.15; text-wrap: balance; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] #view-sounds .s-ctl .inst-s { display: flex; gap: 6px; }
  html[data-view="sounds"] #view-sounds .s-ctl .inst-s .btn { flex: none; }
  html[data-view="sounds"] #view-sounds .s-ctl .s-solf { flex-direction: column !important; gap: 0; }
  html[data-view="sounds"] #view-sounds .s-ctl .inst-s .btn:not(.s-solf) { max-width: 150px; font-size: 12px; }
  html[data-view="sounds"] #view-sounds .s-ctl .inst-s .btn { min-height: 38px; }
}

/* V5.02 : Mes progrès — Enregistrer, Mes enregistrements, Envoyer mon travail */
.rec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rec-row .btn { min-height: 46px; }
.rec-btn.on { color: var(--bad); border-color: var(--bad); font-variant-numeric: tabular-nums; }
.rec-msg { margin: -4px 0 0; }
.rec-msg[hidden] { display: none; }
.send-week { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; }
.send-week small { font-size: 12px; font-weight: 600; color: var(--muted); }
.rl-items { display: flex; flex-direction: column; gap: 10px; }
.rl-item { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.rl-item.kept { border-color: var(--accent); }
.rl-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.rl-item audio { width: 100%; height: 40px; }
.rl-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.rl-acts .btn { min-height: 36px; font-size: 12.5px; padding: 2px 4px; }
.sw-recs { display: flex; flex-direction: column; gap: 6px; }
.sw-rec-item { font-size: 14px !important; font-weight: 500 !important; }
.sw-picked { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.sw-picked[hidden] { display: none; }
.sw-pick { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; font-size: 14px; }
.rec-row .btn { font-size: 15px; min-height: 44px; padding: 6px 8px; white-space: nowrap; }
@media (max-width: 370px) { .rec-row .btn { font-size: 13.5px; } }
.send-week span { font-size: 16px; }

/* V5.03 : Bourdons & Sons — diapason en bleu, bouton « Mon diapason & mon tempérament » actif en bleu,
   plus d'espace entre la glissière et le clavier ; touches noires : dièse et bémol */
#view-sounds .s-head .s-ctx { color: var(--accent); font-size: 13.5px; font-weight: 600; }
#view-sounds .s-head .s-ctx b { color: var(--accent); font-weight: 800; }
#s-temps[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#view-sounds .kbd-head { margin-bottom: 10px; }
.key.black { padding-bottom: 6px; gap: 0; }
.key.black .bn { display: block; font-size: 9px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.key.black .bn.i { font-weight: 500; opacity: .75; font-size: 8px; }
.key.black .bn.off { opacity: .35; font-weight: 500; }
.key.black .bn.on { color: #fff; }
.key.black .bn-sep { display: block; height: 3px; }
.keyboard.two .key.black .fr { display: block; }
/* V5.03 : note jouée sur sa propre ligne, centrée, sous le diapason */
#view-sounds .s-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sub sub" "how ctx" "play play"; row-gap: 4px; }
#view-sounds .s-head .s-sub { white-space: normal; }
#view-sounds .s-head .s-play { justify-self: center; min-height: 18px; }
#view-sounds .s-head .s-play .s-note { font-size: 14px; }
#view-sounds .s-head .s-play .s-freq { font-size: 12px; }
#view-sounds .s-head .s-howto { padding: 2px 9px; font-size: 12px; min-height: 28px !important; }
#view-sounds .s-head .s-ctx { font-size: 12.5px; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] #view-sounds > .s-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "how ctx play"; }
  html[data-view="sounds"] #view-sounds .s-head .s-play { justify-self: end; }
}
#view-sounds .s-head .s-ctx { font-size: 12px; letter-spacing: -0.1px; }
#view-sounds .keyboard { height: clamp(90px, calc(100dvh - 550px), 290px); }

/* V5.04 : prénom ; enregistrer depuis la fenêtre d'envoi */
.acct-name-row { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.acct-name-row input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.login-form input#login-name { margin-bottom: 4px; }
.sw-rec-now { min-height: 44px; }
.sw-rec-now.on { color: var(--bad); border-color: var(--bad); font-variant-numeric: tabular-nums; }
.rec-row { grid-template-columns: 1.15fr 1fr; }

/* ================= V5.05 : Mes progrès réorganisé ================= */
#view-progress { gap: 10px; }
.p-intro { display: flex; align-items: center; gap: 10px; margin-top: -6px; }
.p-intro .hint { flex: 1; margin: 0; font-size: 13px; line-height: 1.3; }
.p-intro .s-howto { flex: none; min-height: 30px !important; padding: 2px 10px; font-size: 12.5px; border-radius: 999px; }
#day-panel { gap: 8px; padding: 10px 12px; }
.day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-head .group-title { margin: 0; }
.day-clear { min-height: 28px !important; padding: 2px 6px; font-size: 12.5px; }
#day-panel .chips.mini { flex-wrap: nowrap; gap: 6px; }
#day-panel .chips.mini .chip { flex: 1; min-height: 32px; padding: 2px 4px; font-size: 13.5px; }
#day-panel .dur-row { display: flex; flex-direction: column; gap: 6px; }
.note-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.note-head label { font-weight: 700; }
.note-head .btn { min-height: 30px; padding: 2px 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.note-head .btn svg { width: 16px; height: 16px; }
#day-panel .note-box { display: flex; flex-direction: column; gap: 4px; }
#day-panel textarea { min-height: 54px; }
#note-status:empty { display: none; }
.p-actions { gap: 8px; padding: 10px 12px; }
.ses-line { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13.5px; color: var(--muted); }
.ses-line .ses-ic { width: 18px; height: 18px; flex: none; }
.ses-line-lab { font-weight: 600; }
.ses-line-time { flex: 1; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.ses-line.run .ses-line-time { color: var(--accent); }
.ses-line .btn { min-height: 30px !important; padding: 2px 10px; font-size: 13px; }
.ses-line .btn[hidden] { display: none; }
.howto-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.4; text-align: left; }
.s-howto-sheet .mg-lead { text-align: left; }
.s-howto-sheet .hint:empty { display: none; }
.p-actions .rec-row { grid-template-columns: 1fr 1fr; }
.p-actions .rec-row .btn { font-size: 14px; white-space: nowrap; padding: 6px 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .p-actions .rec-row .btn { font-size: 12.5px; } }
.ses-line .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.ses-line-lab { white-space: nowrap; }
.p-actions .rec-row .btn { overflow: visible; text-overflow: clip; font-size: 14.5px; }
@media (max-width: 380px) { .p-actions .rec-row .btn { font-size: 13px; } }
.p-actions .rec-row .btn { font-size: 14px; }

/* ================= V5.06 : chronomètre permanent dans le menu ; Mes progrès compact et harmonisé ================= */
.nav-row { display: flex; align-items: stretch; gap: 4px; margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--line); }
.nav-rows { flex: 1; min-width: 0; }
.nav-rows .nav-items { margin-top: 0; padding-top: 0; border-top: 0; }
.nav-ses { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 2px; font-size: 11px; border-radius: 12px; }
.nav-ses svg { width: 20px; height: 20px; }
.nav-ses .tab-label { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.nav-ses.run { color: var(--accent); background: var(--accent-soft); }
.nav-ses.paused { color: var(--ink); }
#view-progress { gap: 8px; }
.p-intro { justify-content: flex-start; margin-top: -10px; }
#day-panel { gap: 6px; padding: 8px 12px; }
#day-panel .day-head .group-title { font-size: 14.5px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
#day-panel .s-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 6px; }
#day-panel .s-lab { font-size: 12px; font-weight: 700; color: var(--muted); }
#day-panel .chips.mini .chip { min-height: 30px; font-size: 12.5px; padding: 2px 2px; }
.day-min { font-size: 15px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
#day-panel .dur-ctl { display: flex; align-items: center; gap: 6px; }
#day-panel .dur-ctl .icon-btn { width: 32px; height: 32px; }
#day-panel .dur-ctl input { flex: 1; }
#day-panel textarea { min-height: 44px; font-size: 14px; padding: 6px 10px; }
.note-head .btn { min-height: 28px; font-size: 12.5px; }
.p-actions { gap: 6px; padding: 8px 12px; }
.p-actions .rec-row .btn { min-height: 38px; font-size: 13.5px; }
.send-week { min-height: 44px; padding: 4px 8px; }
.send-week span { font-size: 14.5px; }
.send-week small { font-size: 11.5px; }
.ses-line { padding: 2px 10px; font-size: 12.5px; }
.ses-line .btn { min-height: 28px !important; font-size: 12.5px; }
.p-intro { margin-top: -2px; }
#view-progress .sum-card { padding: 8px 12px; }
#view-progress .sum-card .big { font-size: 20px; }
#view-progress .sum-card .sub { font-size: 12.5px; }
#view-progress .sum-card h3 { font-size: 11px; }

/* V5.07 : Mes progrès — Fonctionnement à gauche, Semaine / Mois à droite ; Séance terminée : dictée + bouton détaillé */
.p-intro { display: flex; align-items: stretch; gap: 8px; margin-top: -4px; }
.p-intro .s-howto { align-self: center; }
.p-intro .summary { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#view-progress .p-intro .sum-card { padding: 5px 9px; }
#view-progress .p-intro .sum-card h3 { font-size: 10px; margin: 0 0 1px; }
#view-progress .p-intro .sum-card .big { font-size: 16px; line-height: 1.15; }
#view-progress .p-intro .sum-card .sub { font-size: 11px; }
.ses-save { flex-direction: column; gap: 1px; line-height: 1.2; }
.ses-save small { font-size: 11.5px; font-weight: 500; opacity: .9; }
.ses-sheet .note-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ses-sheet .note-head .btn { min-height: 30px; padding: 2px 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.ses-sheet .note-head .btn svg { width: 16px; height: 16px; }
.ses-sheet .note-head .btn.recording { color: var(--bad); border-color: var(--bad); }
#ses-note-status:empty { display: none; }

/* V5.08 : Assistant pour vents historiques en page */
.hw-page { display: flex; flex-direction: column; gap: 4px; }
.hw-page > .hint:first-child { margin: -4px 0 0; }

/* V5.09 : chronomètre discret — dans le menu seulement pendant une séance, en gris ; accueil : bouton simple */
.nav-ses[hidden] { display: none; }
.nav-ses { width: 54px; color: var(--muted); background: none !important; }
.nav-ses.run, .nav-ses.paused { color: var(--muted); background: none !important; }
.nav-ses svg { width: 17px; height: 17px; opacity: .8; }
.nav-ses .tab-label { font-size: 10.5px; font-weight: 600; }
.home-chrono { gap: 2px; }
.home-chrono-row { display: flex; gap: 8px; justify-content: center; }
.home-chrono .ses-main { min-height: 40px; padding: 4px 16px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-chrono .ses-end { min-height: 40px; padding: 4px 14px; font-size: 14px; }
.home-chrono .ses-end[hidden] { display: none; }
.home-chrono-hint { margin: 0; text-align: center; font-size: 12.5px; }

/* V5.10 : sous-page Mes enregistrements */
#view-recs { gap: 10px; }
#view-recs .rec-row { grid-template-columns: 1fr; }
#view-recs .rec-btn { min-height: 46px; font-size: 16px; }
.rl-info { margin: 0; font-size: 12.5px; }

/* V5.11 : Mes progrès — titre « Mon travail » sous Fonctionnement, aligné sur le bas des cartes ; « Chronomètre » bien visible */
.p-left { flex: none; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 6px; }
.p-left .s-howto { align-self: flex-start; }
.p-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.ses-line { padding: 4px 10px; gap: 6px; }
.ses-line .ses-ic { width: 22px; height: 22px; color: var(--ink); }
.ses-line-lab { font-size: 17px; font-weight: 800; color: var(--ink); }
.ses-line-time { font-size: 15px; }
.ses-line .btn { min-height: 26px !important; padding: 1px 8px; font-size: 12px; }
#view-progress .p-intro .sum-card h3 { white-space: nowrap; letter-spacing: .02em; font-size: 9.5px; }
.ses-line { gap: 5px; padding: 4px 8px; }
.ses-line-time { flex: 1; min-width: 0; font-size: 14px; }
.ses-line .btn { padding: 1px 6px; font-size: 11.5px; }
#view-progress .p-intro .sum-card .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  #day-panel .s-row { grid-template-columns: 58px minmax(0, 1fr); }
  #day-panel .chips.mini { gap: 4px; }
  #day-panel .chips.mini .chip { font-size: 11.5px; }
  .p-title { font-size: 20px; }
  #view-progress .p-intro .sum-card .sub { font-size: 10px; }
}

/* V5.12 : étoile « Garder » plus visible, bouton « Enregistrer sur mon téléphone » ; chronomètre du menu séparé par un trait */
.rl-acts { grid-template-columns: 0.9fr 1.5fr 0.9fr; }
.rl-acts .btn { line-height: 1.15; }
.rl-keep { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.rl-star { font-size: 24px; line-height: 1; color: var(--accent); }
.rl-keep.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.nav-ses { border-right: 1px solid var(--line); border-radius: 0; padding-right: 6px; margin-right: 2px; }

/* V5.13 : titres de sections (Calendrier), Envoyer plus grand, carte Chronomètre à l'accueil */
.p-sec { margin: 4px 0 -4px; font-size: 17px; font-weight: 800; color: var(--ink); }
.send-week { min-height: 56px; }
.send-week span { font-size: 17px; font-weight: 700; }
.send-week small { font-size: 12px; }
.home-chrono { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: default; }
.home-chrono .hc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.home-chrono .hc-text b { color: var(--ink); }
.home-chrono .hc-text small { color: var(--muted); font-weight: 500; }
.home-chrono-row { display: flex; gap: 6px; flex: none; }
.home-chrono-row .btn { min-height: 34px; padding: 2px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.home-chrono-row .ses-end[hidden] { display: none; }
.home-chrono::after { content: none; }
.home-chrono .home-chrono-row { flex-direction: row; }
.home-chrono svg { color: var(--accent); }
.home-choice.home-chrono { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: center; text-align: left; }
.home-chrono .hc-text { align-items: flex-start; }
.home-chrono .home-chrono-row { grid-column: 2; justify-content: flex-start; }

/* V5.15 : accueil — deux chronomètres (séance de travail, pièce) */
.home-chrono .hc-line { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.home-chrono .hc-lab { display: flex; flex-direction: column; gap: 1px; font-weight: 700; font-size: 14.5px; color: var(--ink); min-width: 0; }
.home-chrono .hc-lab small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.home-chrono .hc-line .home-chrono-row { grid-column: auto; flex: none; }
#piece-btn.on { color: var(--accent); border-color: var(--accent); }
.home-chrono .hc-lab { flex: 1; }
.home-chrono .hc-line .btn { padding: 2px 9px; font-size: 12.5px; }

/* V5.17 : accueil — grand affichage coloré des chronomètres ; choix et valeurs en bleu */
.home-chrono .hc-big { display: block; margin-top: 4px; font-size: 32px; font-weight: 800; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.home-chrono .hc-big[hidden] { display: none; }
.home-chrono .hc-big.paused { color: var(--muted); }
.home-chrono .hc-line { align-items: flex-end; }
.home-chrono .home-chrono-row { flex-wrap: wrap; justify-content: flex-end; }
#piece-reset[hidden] { display: none; }
.home-week b { color: var(--accent); }
.home-resume { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; display: block; text-align: center; }
.home-resume b { color: var(--accent); }
.home-chrono .hc-line { flex-wrap: wrap; align-items: center; row-gap: 6px; }
.home-chrono .hc-lab { flex: 1 1 100%; }
.home-chrono .hc-line .hc-big { margin-top: 0; flex: 1; }
.home-chrono .hc-line .home-chrono-row { margin-left: auto; }
/* V5.18 : titre de page sur une seule ligne */
.view-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-left > div { min-width: 0; }

/* V5.19 : Mes enregistrements — titre + nombre, numéro, couleur alternée, renommer */
.rl-title { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; }
.rl-count { color: var(--accent); font-weight: 700; font-size: 0.9em; font-variant-numeric: tabular-nums; }
.rl-send, .rl-dl { margin: 0 0 8px; font-size: 13px; }
.rl-dl { margin-top: 10px; }
.rl-dl[hidden] { display: none; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); font-weight: 700; cursor: pointer; text-align: left; }
.linkbtn::after { content: ' ›'; }
.rl-item.rl-odd { background: var(--accent-soft); }
.rl-item.rl-even { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.rl-item.kept { border-color: var(--accent); border-width: 2px; }
.rl-head { align-items: center; }
.rl-num { flex: none; min-width: 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; background: var(--accent); font-variant-numeric: tabular-nums; }
.rl-even .rl-num { background: var(--warn); }
.rl-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rl-nm { color: var(--accent); overflow-wrap: anywhere; }
.rl-date { font-size: 12px; }
.rl-dur { flex: none; }
.rl-ren { flex: 1; display: flex; gap: 6px; min-width: 0; }
.rl-input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--bg, #fff); color: inherit; }
.rl-ren .btn { min-height: 36px; padding: 4px 12px; }
.rl-acts { grid-template-columns: 1fr 1fr 1fr; }
.rl-acts .btn { white-space: nowrap; }
@media (max-width: 380px) { .rl-acts .btn { font-size: 12px; } .rl-star { font-size: 20px; } }

/* V5.21 : Assistant pour vents historiques — même trompette que la 1re ligne, en gris (bleuté quand la page est ouverte) */
.nav-items .tab .tab-emo { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; filter: grayscale(1) contrast(1.3) brightness(0.7); opacity: 1; }
.nav-items .tab[aria-selected="true"] .tab-emo { filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(3) brightness(0.8); opacity: 1; }
.home-choice .home-emo { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 25px; line-height: 1; filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(3) brightness(0.8); }

/* V5.22 : Explorer › Rythme */
.rh-ctl { position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rh-row { display: flex; align-items: center; gap: 8px; }
.rh-lab { font-weight: 600; font-size: 15px; }
.rh-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.rh-pm { min-width: 38px; min-height: 36px; padding: 0; font-size: 20px; }
.rh-tv { color: var(--accent); font-size: 20px; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.rh-tv small { font-size: 12px; font-weight: 500; margin-left: 2px; }
.rh-opts .chip { min-height: 36px; }
.rh-stop { margin-left: auto; min-height: 36px; padding: 4px 16px; color: var(--bad); border-color: var(--bad); font-weight: 700; }
.rh-stop[hidden] { display: none; }
.rh-hint { margin: 0; font-size: 12.5px; }
.rh-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.rh-card { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; text-align: left; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px 4px; cursor: pointer; font: inherit; }
.rh-card.playing { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.rh-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.rh-num { flex: none; min-width: 22px; height: 22px; border-radius: 11px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rh-card.playing .rh-num { background: var(--accent); color: var(--accent-ink); }
.rh-svg { width: 100%; max-width: 460px; height: auto; display: block; }
.rh-line { stroke: var(--ink); stroke-width: 1.1; }
.rh-ts { font: 700 17px Georgia, 'Times New Roman', serif; fill: var(--ink); }
.rh-bar { stroke: var(--ink); stroke-width: 1.2; }
.rh-barh { fill: var(--ink); }
.rh-rep { fill: var(--ink); display: none; }
.rh-list.looping .rh-rep { display: inline; }
.rh-nh { fill: var(--ink); }
.rh-nh.open { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.rh-stem { stroke: var(--ink); stroke-width: 1.3; }
.rh-flag { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.rh-beam { fill: var(--ink); }
.rh-tri { font: italic 700 12px Georgia, serif; fill: var(--ink); }
.rh-rest { fill: var(--ink); stroke: var(--ink); stroke-width: 1.6; }
.rh-rest path { fill: none; }
.rh-rest.q { stroke-width: 0.8; stroke-linejoin: round; }
.rh-beat circle { fill: var(--surface-2); stroke: var(--line); transition: fill .06s; }
.rh-beat text { font-size: 10px; font-weight: 700; fill: var(--muted); }
.rh-beat.on circle { fill: var(--warn); stroke: var(--warn); }
.rh-beat.on text { fill: #fff; }
.rh-n.on .rh-nh:not(.open), .rh-n.on .rh-rest { fill: var(--accent); }
.rh-n.on .rh-nh.open, .rh-n.on .rh-stem, .rh-n.on .rh-flag, .rh-n.on .rh-rest { stroke: var(--accent); }
.rh-cursor { stroke: var(--accent); stroke-width: 2.4; opacity: 0; }
.rh-card.playing .rh-cursor { opacity: .85; }
.rh-card.counting .rh-cursor { opacity: .35; }
.rh-sub { margin-bottom: 10px; }   /* V5.36 : même style que les autres textes d’introduction (.inst-intro) */
.rh-sec { margin: 14px 2px 2px; }
.rh-brk { fill: none; stroke: var(--ink); stroke-width: 1; }
.rh-ctl { top: 0; }
.sw-sendtext[hidden] { display: none; }
.sw-sendtext { margin-top: 6px; }
.rh-secs { margin-bottom: 10px; }
.rh-secs button { font-size: 15px; color: inherit; }
.sw-how { margin: 4px 0 2px; font-size: 13.5px; line-height: 1.4; color: var(--ink); background: var(--accent-soft); border-radius: 10px; padding: 8px 10px; }

/* V5.30 : « Transmettre » — grande enveloppe à gauche (même taille que l'icône du chronomètre) */
.send-week { flex-direction: row !important; align-items: center !important; justify-content: flex-start; gap: 10px !important; text-align: left; padding: 6px 12px !important; }
.send-week .sw-ic { flex: none; width: 22px; height: 22px; color: var(--ink); }
.send-week .sw-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: inherit !important; }
.send-week .sw-txt b { font-size: 17px; font-weight: 800; color: var(--ink); }
.send-week .sw-txt small { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.25; }

/* V5.33 : Mes instruments / Mes tempéraments — numéro et couleur alternée */
.inst-card.nc-odd { background: var(--accent-soft); }
.inst-card.nc-even { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.inst-card.on { border-color: var(--accent); border-width: 2px; }
.nc-head { display: flex; align-items: center; gap: 8px; }
.nc-head .rl-num { align-self: center; }
.nc-head .inst-lbl, .nc-head .inst-name { flex: 1; min-width: 0; }
.inst-card.nc-even .rl-num { background: var(--warn); }
.inst-h .rl-count { margin-left: 4px; }
.hw-need { margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 16%, var(--surface)); font-weight: 600; font-size: 14px; }
.hw-btns .btn[disabled] { opacity: .5; }
.rh-opts { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.rh-opts .chip { line-height: 1.2; padding: 6px 10px; }

/* V5.38 : Réglages ordonnés comme le menu — titres de partie lisibles, une carte par réglage */
#view-settings { display: flex; flex-direction: column; gap: 10px; }
.set-sec { margin: 14px 2px 0; font-size: 19px; font-weight: 800; color: var(--accent); padding-bottom: 4px; border-bottom: 2px solid var(--accent-soft); }
#view-settings > .set-sec:first-child { margin-top: 2px; }
.set-h { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; text-transform: none; }
.set-card { padding: 12px 14px; gap: 8px; }
.set-card .switch-row b { font-size: 16px; color: var(--ink); }

/* V5.39 : pages cachées selon la modalité */
.hide-rhythm .tab[data-view="rhythm"] { display: none !important; }
.hide-winds .tab[data-view="winds"], .hide-winds .hw-title, .hide-winds #hw-open, .hide-winds .inst-det { display: none !important; }

/* V5.40 : Métronome — points des temps bien écartés et plus grands */
.metro .beats { gap: 36px; min-height: 38px; }
.metro .beat { width: 22px; height: 22px; }
.metro .beat.first { width: 30px; height: 30px; }
.metro .beats:has(.beat:nth-child(5)) { gap: 22px; }

/* V5.42 : métronome 9/8 et 12/8 */
.metro .beats:has(.beat:nth-child(9)) { gap: 9px; }
.metro .beats:has(.beat:nth-child(9)) .beat { width: 17px; height: 17px; }
.metro .beats:has(.beat:nth-child(9)) .beat.first { width: 23px; height: 23px; }
#meters button { padding: 0 2px; min-width: 0; }
@media (max-width: 380px) { #meters button { font-size: 14px; } }
/* V5.42 : Bourdons & Sons — diapason choisi à la même taille que « Fonctionnement » */
#view-sounds .s-head .s-howto { font-size: 13.5px !important; }
#view-sounds .s-head .s-ctx { font-size: 13.5px !important; font-weight: 600; white-space: normal; line-height: 1.25; }
/* V5.42 : sous-texte du Chronomètre (Mon travail), même taille que celui de « Transmettre » */
.ses-line-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ses-line-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.25; }
/* V5.42 : Rythmes — 6 mesures sur deux rangées, boutons d'écoute plus discrets */
.rh-secs { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.rh-secs button { min-height: 38px; font-size: 14.5px; }
.rh-opts .chip { font-size: 13px; font-weight: 500; }
.rh-sub { margin: 0 2px 8px !important; }
/* V5.42 : Compositeurs — total sous le titre, « Liste : » devant l'ordre */
.comp-total { margin: 0 0 4px; font-size: 14px; }
.h-sortrow { justify-content: flex-start; }
.comp-list-lab { font-weight: 700; font-size: 14px; color: var(--ink); }
#comp-count[hidden] { display: none; }
/* V5.42 : « Déterminer mon diapason + tempérament » à la même hauteur que le champ du diapason */
.inst-grid label:first-child { align-items: stretch; }
.inst-grid label:first-child > .inst-hz, .inst-grid label:first-child > .inst-det { height: 46px; min-height: 46px !important; }
.inst-grid label:first-child > .inst-det { max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 11.5px; line-height: 1.1; padding: 2px 6px; }
.inst-det small { font-size: 9.5px; display: block; }
/* V5.42 : Sauvegardes — deux boutons côte à côte */
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-row .btn { min-height: 44px; font-size: 14px; padding: 6px 8px; line-height: 1.2; }
.inst-grid label:first-child { grid-template-columns: minmax(118px, 1fr) minmax(0, 1.25fr); }
.inst-grid label:first-child > .inst-det { white-space: normal; text-align: center; }
.ses-line-time { flex: none !important; min-width: 3.2em; }
.ses-line-txt { flex: 1; }

/* V5.43 : Mon travail — Chronomètre puis Transmettre, même forme arrondie */
#view-progress .p-actions { background: none; border: 0; padding: 0; }
#view-progress .ses-line, #view-progress .send-week { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); padding: 8px 12px !important; min-height: 56px; box-shadow: none; }
#view-progress .ses-line .ses-ic, #view-progress .send-week .sw-ic { width: 22px; height: 22px; }
.note-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.note-actions .btn { min-height: 34px; padding: 4px 16px; }
.note-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.note-list[hidden] { display: none; }
.note-list li { display: flex; align-items: flex-start; gap: 8px; background: var(--accent-soft); border-radius: 10px; padding: 6px 8px 6px 10px; font-size: 14px; color: var(--accent); }
.note-list li span { flex: 1; white-space: pre-wrap; }
.note-del { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; }
/* Compositeurs : un peu plus d'espace avant « Liste : » */
.h-sortrow { margin-top: 10px; }
/* V5.43 : accueil — carte Chronomètre moins haute (texte à gauche, bouton à droite) */
.home-chrono { padding-top: 10px !important; padding-bottom: 10px !important; row-gap: 4px !important; }
.home-chrono .hc-line { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px; padding: 6px 0 !important; }
.home-chrono .hc-lab { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.2; }
.home-chrono .hc-lab small { display: block; font-size: 11.5px; line-height: 1.25; margin-top: 1px; }
.home-chrono .home-chrono-row { flex: none; justify-content: flex-end; }
.home-chrono .home-chrono-row .btn { min-height: 36px !important; padding: 3px 12px !important; font-size: 14px; }
.home-chrono .hc-big { font-size: 22px !important; }
.home-resume-card[hidden] { display: none; }
/* V5.43 : Rythmes — groupes « Cellules rythmiques » et « Récapitulation des rythmes de base » (Me tester) */
.rh-grp { margin: 6px 2px 6px; font-size: 15px; font-weight: 800; color: var(--ink); }
.rh-tests { margin-bottom: 10px; }
.rh-tests button { font-size: 13.5px !important; }
.rh-test-hint { margin: 0 2px 8px; font-size: 13px; }
.rh-test-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.rh-test-btns .btn { min-height: 44px; }
.rh-test { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px 8px; margin-bottom: 12px; }
.rh-trow { position: relative; border-radius: 10px; }
.rh-trow.playing { background: var(--accent-soft); }
.rh-tnum { position: absolute; left: 2px; top: 2px; font-size: 10px; font-weight: 700; color: var(--muted); }
.rh-trow.playing .rh-cursor { opacity: .85; }
.rh-trow.counting .rh-cursor { opacity: .35; }
.view.tuner .sec-temp .sel-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.view.tuner .pg-open { font-size: 11.5px; line-height: 1.12; padding: 2px 6px; min-height: 44px; }
.note-actions #note-status { flex: 1; min-width: 0; }
.note-actions .btn { flex: none; }

/* V5.44 : Rythmes — tout plus serré en hauteur, boutons des mesures non gras */
#view-rhythm .rh-sub { margin: 0 2px 4px !important; }
#view-rhythm .rh-grp { margin: 4px 2px 3px; font-size: 14px; }
#view-rhythm .rh-secs { padding: 3px; gap: 3px; margin-bottom: 6px; }
#view-rhythm .rh-secs button { min-height: 30px !important; font-size: 13.5px !important; font-weight: 500; padding: 0 2px; }
#view-rhythm .rh-secs button[aria-checked="true"] { font-weight: 700; }
#view-rhythm .rh-ctl { padding: 8px 10px; gap: 6px; margin-bottom: 6px; }
#view-rhythm .rh-ctl .rh-pm { min-height: 32px; min-width: 34px; }
#view-rhythm .rh-opts .chip { min-height: 32px; padding: 3px 8px; }
#view-rhythm .rh-hint { font-size: 12px; }
#view-rhythm .rh-sec { margin: 6px 2px 2px; font-size: 16px; }
#view-rhythm { gap: 4px !important; row-gap: 4px !important; }
#view-rhythm .rh-secs { margin-bottom: 4px; }
#view-rhythm .rh-grp { margin-top: 6px; }

/* V5.45 : Mon travail — Chronométrer mon travail en premier ; explications non grasses ; chiffre et boutons plus grands */
#view-progress .ses-line-sub, #view-progress .send-week .sw-txt small { font-weight: 400 !important; }
#view-progress .ses-line-time { font-size: 22px !important; font-weight: 800; color: var(--ink); min-width: 3.4em; }
#view-progress .ses-line.run .ses-line-time { color: var(--accent); }
#view-progress .ses-line .btn { min-height: 38px !important; padding: 4px 12px !important; font-size: 14.5px !important; font-weight: 600; }
.note-list { display: none !important; }
#view-progress .ses-line { flex-wrap: wrap; row-gap: 4px; }
#view-progress .ses-line-txt { flex: 1 1 calc(100% - 34px) !important; }
#view-progress .ses-line-time { margin-left: 30px; }
#view-progress .ses-line-main { margin-left: auto; }
/* V5.46 : trois boutons d'écoute côte à côte ; Stop sur sa propre ligne */
#view-rhythm .rh-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#view-rhythm .rh-opts .chip { font-size: 12px !important; line-height: 1.15; padding: 3px 5px; min-height: 40px; }
#view-rhythm .rh-opts .rh-stop { grid-column: 1 / -1; margin-left: 0; }

/* V5.47 : Réglages et Chronomètre dans une colonne à droite, séparée du reste du menu par une barre verticale */
.nav-groups { grid-template-columns: repeat(4, minmax(0, 1fr)) 66px; }
.ng[data-g="reglages"] { border-radius: 0; box-shadow: inset 1px 0 0 var(--line); }
.nav-row { gap: 0; }
.nav-ses { order: 2; width: 66px !important; border-right: 0 !important; margin: 0 !important; padding: 4px 2px !important; box-shadow: inset 1px 0 0 var(--line); border-radius: 0 !important; }
.nav-rows { padding-right: 4px; }
/* V5.47 : colonne Réglages + Chrono légèrement teintée */
.ng[data-g="reglages"]:not([aria-selected="true"]), .nav-ses { background: color-mix(in srgb, var(--accent) 7%, transparent) !important; }

/* ===== V5.48 ===== */
/* Fonctionnement : même couleur que le fond du logo, toujours sous le logo */
.s-howto, #view-sounds .s-head .s-howto, .p-intro .s-howto { background: #f3ebdd !important; border-color: color-mix(in srgb, #c9b896 70%, var(--line)) !important; color: var(--ink) !important; }
/* Bourdons & Sons : 1re ligne Fonctionnement + Notes – Intervalles – Accords ; 2e ligne diapason en bleu ; puis le piano */
#view-sounds .s-head, html[data-view="sounds"] #view-sounds > .s-head { grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-areas: "how sub sub" "ctx ctx play" !important; column-gap: 10px; row-gap: 4px; margin-top: 0; }
#view-sounds .s-head .s-sub, html[data-view="sounds"] #view-sounds .s-head .s-sub { display: block !important; grid-area: sub; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-sounds .s-head .s-howto { grid-area: how; justify-self: start; }
#view-sounds .s-head .s-ctx { grid-area: ctx; text-align: left !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
#view-sounds .s-head .s-play { grid-area: play; justify-self: end; min-height: 0; }

/* Mes enregistrements : couleurs très légères, cartes basses, numéros sur fond blanc */
.rl-items { gap: 6px; }
.rl-item { padding: 5px 8px; gap: 4px; border-radius: 10px; font-size: 13px; }
.rl-item.rl-odd { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.rl-item.rl-even { background: color-mix(in srgb, var(--warn) 6%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 25%, var(--line)); }
.rl-item.kept { border-color: var(--accent); border-width: 1.5px; }
.rl-num, .inst-card .rl-num { min-width: 22px; height: 22px; border-radius: 11px; font-size: 12.5px; background: #fff !important; color: var(--accent); border: 1.5px solid var(--accent); }
.rl-even .rl-num, .inst-card.nc-even .rl-num { color: var(--warn); border-color: var(--warn); }
.rl-nm { font-size: 13.5px; }
.rl-date, .rl-dur { font-size: 11.5px; }
.rl-item audio { height: 32px; }
.rl-acts { gap: 6px; }
.rl-acts .btn { min-height: 30px !important; padding: 2px 6px; font-size: 12px; }
.rl-acts .rl-star { font-size: 15px; }
.rl-head { gap: 8px; }

/* Mes instruments et Mes tempéraments : cartes plus petites, différence bleu / jaune adoucie */
.inst-page .inst-card { padding: 5px 7px; gap: 4px; }
.inst-card.nc-odd { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.inst-card.nc-even { background: color-mix(in srgb, var(--warn) 6%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 25%, var(--line)); }
.inst-card.on { border-color: var(--accent); border-width: 1.5px; }
.inst-page .inst-card label, .inst-page .inst-card .inst-lbl { font-size: 11.5px; }
.inst-page .inst-card input, .inst-page .inst-card select { min-height: 34px; font-size: 14px; padding-top: 2px; padding-bottom: 2px; }
.inst-page .inst-card .btn { min-height: 30px; font-size: 12.5px; }
.inst-grid label:first-child > .inst-hz, .inst-grid label:first-child > .inst-det { height: 38px; min-height: 38px !important; }
.inst-page .inst-card .inst-hz button { min-height: 34px; }

/* Accès bien visible à l'assistant pour vents historiques, en haut de Mes instruments */
.inst-winds { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; margin: 4px 0 12px; padding: 8px 12px; text-align: left; line-height: 1.25; background: color-mix(in srgb, #c98a1c 22%, var(--surface)); border-color: color-mix(in srgb, #c98a1c 55%, var(--line)); }
.inst-winds b { font-size: 14.5px; color: var(--ink); }
.inst-winds span { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.hide-winds #inst-winds { display: none !important; }

/* Compositeurs : un peu plus d'espace avant la recherche */
.comp-total { margin-bottom: 12px !important; }

/* Rythmes : boutons jamais en gras, notes jouées en orange comme le tempo */
#view-rhythm .rh-secs button, #view-rhythm .rh-secs button[aria-checked="true"], #view-rhythm .rh-tests button, #view-rhythm .rh-tests button[aria-checked="true"], #view-rhythm .rh-tests button[aria-pressed="true"] { font-weight: 500 !important; }
.rh-n.on .rh-nh:not(.open), .rh-n.on .rh-rest { fill: var(--warn); }
.rh-n.on .rh-nh.open, .rh-n.on .rh-stem, .rh-n.on .rh-flag, .rh-n.on .rh-rest { stroke: var(--warn); }

/* Accueil : carte Chronomètre beaucoup moins haute */
.home-choice.home-chrono { padding-top: 6px !important; padding-bottom: 6px !important; row-gap: 0 !important; }
.home-chrono > svg { width: 20px; height: 20px; }
.home-chrono .hc-text b { font-size: 14.5px; }
.home-chrono .hc-line { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "lab big row" "sm sm sm"; column-gap: 8px; row-gap: 1px; align-items: center !important; padding: 4px 0 !important; }
.home-chrono .hc-lab { grid-area: lab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px !important; line-height: 1.2; }
.home-chrono .hc-sm { grid-area: sm; font-size: 11px; line-height: 1.2; color: var(--muted); font-weight: 500; min-width: 0; }
.home-chrono .hc-big { grid-area: big; margin: 0 !important; font-size: 18px !important; }
.home-chrono .home-chrono-row { grid-area: row; margin: 0 !important; }
.home-chrono .home-chrono-row .btn { min-height: 30px !important; padding: 2px 10px !important; font-size: 13px; }
/* Accueil : choisir ma page d'accueil */
.home-start-btn { display: block; margin: 10px auto 0; min-height: 34px; padding: 4px 16px; font-size: 13.5px; border-radius: 999px; }
.home-start { margin-top: 8px; padding: 10px; }
.home-start .hint { margin: 0 0 6px; font-size: 12.5px; }
.home-start .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.home-start .chip { min-height: 32px; font-size: 13px; }
.home-start .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.home-choice.home-chrono { padding-left: 12px !important; padding-right: 12px !important; }
.home-chrono .hc-lab { font-size: 13px !important; }
.home-chrono .home-chrono-row .btn { padding: 2px 8px !important; font-size: 12.5px !important; }
.inst-page .inst-card input, .inst-page .inst-card select { min-height: 34px !important; height: 34px; }
.inst-page .inst-card .inst-hz button { min-height: 34px !important; height: 34px; }
.inst-grid label:first-child > .inst-hz { height: 34px !important; min-height: 34px !important; }
.inst-grid label:first-child > .inst-det { height: 34px !important; min-height: 34px !important; }

/* V5.48 — Accordeur : Tempérament | Programme et Mes instruments | Assistant, chacun la moitié de la largeur */
.view.tuner .sec-temp .sel-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 10px !important; }
.view.tuner .sec-temp .sel-row > div:last-child .group-title { text-align: right; }
.view.tuner .tsec.inst-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 10px !important; row-gap: 12px; align-items: center; }
.view.tuner .inst-row > label { grid-column: 1 !important; grid-row: 1 !important; }
.view.tuner .inst-row > select { grid-column: 1 !important; grid-row: 2 !important; justify-self: start; width: calc(100% - 46px) !important; min-width: 0; }
.view.tuner .inst-row > .icon-btn { grid-column: 1 !important; grid-row: 2 !important; justify-self: end; margin: 0 !important; }
.view.tuner .inst-row > .hw-title { grid-column: 2 !important; grid-row: 1 !important; text-align: right; justify-self: stretch; }
.view.tuner .inst-row > .hw-open { grid-column: 2 !important; grid-row: 2 !important; }
/* Les deux boutons (vert et jaune) : même taille, texte d'explication plus petit, pas en gras */
.view.tuner .pg-open, .view.tuner .hw-open { width: 100% !important; height: 52px !important; min-height: 52px !important; padding: 3px 8px !important; margin: 0 !important; display: flex !important; align-items: center; justify-content: center; text-align: center; font-size: 11.5px !important; font-weight: 400 !important; line-height: 1.2 !important; align-self: center !important; }
.view.tuner .sec-temp .sel-row select, .view.tuner .inst-row > select { height: 52px; min-height: 52px !important; }
.view.tuner .inst-row > .icon-btn { height: 52px !important; width: 40px !important; }
@media (max-width: 370px) { .view.tuner .pg-open, .view.tuner .hw-open { font-size: 10.5px !important; padding: 2px 5px !important; line-height: 1.15 !important; } }
/* V5.48 — Accordeur : titre de l'assistant plus petit, titres plus proches des boutons, bouton micro crème */
.view.tuner .inst-row > .hw-title { font-size: 10.5px !important; letter-spacing: 0.3px !important; line-height: 1.15 !important; align-self: end; }
.view.tuner .inst-row > label { align-self: end; }
.view.tuner .tsec.inst-row { row-gap: 5px !important; }
.view.tuner .sec-temp .sel-row > div { gap: 5px !important; }
.mic-help-btn { background: #f3ebdd !important; border-color: color-mix(in srgb, #c9b896 70%, var(--line)) !important; color: var(--ink) !important; }
/* V5.48 — Accordeur : cadre Mes instruments en rose très clair (le bouton du micro reste crème) */
.view.tuner .sec-inst { background: color-mix(in srgb, #d9708a 10%, var(--bg)) !important; }
/* V5.48 — Accordeur : Programme dans un vert plus soutenu, Assistant dans un rose un peu plus foncé que le cadre */
.view.tuner .pg-open { background: color-mix(in srgb, #2f8a5b 32%, var(--surface)) !important; border-color: color-mix(in srgb, #2f8a5b 65%, var(--line)) !important; color: var(--ink) !important; }
.view.tuner .hw-open { background: color-mix(in srgb, #d9708a 26%, var(--surface)) !important; border-color: color-mix(in srgb, #d9708a 55%, var(--line)) !important; color: var(--ink) !important; }
/* V5.48 — fond blanc : jours du calendrier encadrés pour rester visibles */
.cal .day { border: 1px solid var(--line); }
.cal .day:disabled, .cal .day[disabled] { border-color: color-mix(in srgb, var(--line) 50%, transparent); }
/* V5.48 — bouton « Le micro ne démarre pas ? » plus petit, texte plus petit et non gras */
.view.tuner .mic-help-btn { min-height: 30px !important; height: auto !important; padding: 3px 9px !important; font-size: 11.5px !important; font-weight: 400 !important; line-height: 1.15 !important; }
.cal .day:empty { border: 0; background: transparent; }
/* V5.48 — encadré Assistant de Mes instruments : même rose que le bouton de l'Accordeur */
.inst-winds { background: color-mix(in srgb, #d9708a 26%, var(--surface)) !important; border-color: color-mix(in srgb, #d9708a 55%, var(--line)) !important; }

/* ===== V5.49 : Rythmes / Tonalités ===== */
#view-rhythm .rh-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 10px; margin-bottom: 6px; }
#view-rhythm .rh-top .rh-sub { margin: 0 !important; }
.rh-values { min-height: 32px !important; padding: 3px 12px; font-size: 12.5px; font-weight: 500; border-radius: 999px; white-space: nowrap; background: #f3ebdd; border-color: color-mix(in srgb, #c9b896 70%, var(--line)); color: var(--ink); }
.rh-keys { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; margin: 2px 0 10px; padding: 7px 12px; text-align: left; line-height: 1.25;
  background: color-mix(in srgb, #7a4fc4 13%, var(--surface)); border-color: color-mix(in srgb, #7a4fc4 45%, var(--line)); }
.rh-keys b { font-size: 14.5px; color: var(--ink); }
.rh-keys span { font-size: 12.5px; font-weight: 400; color: var(--ink); }
/* fenêtres */
.th-card { gap: 8px; }
.th-lead { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.th-h { margin: 8px 0 0; font-size: 16px; color: var(--accent); }
.th-order { margin: 0; font-size: 13.5px; }
.th-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.th-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.th-table td { padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; }
.th-table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.th-arm .th-n { display: block; font-weight: 700; font-size: 14px; }
.th-arm small { display: block; font-size: 11px; color: var(--muted); line-height: 1.2; }
.th-maj { font-weight: 600; }
.th-min { color: var(--ink); }
.th-tips { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.4; }
.th-tips li { margin: 3px 0; }
.th-svg { width: 100%; height: auto; display: block; flex: none; }
.th-tree { stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1; }
.th-sep { stroke: var(--line); stroke-width: .6; stroke-dasharray: 2 3; }
.th-sl { stroke: var(--ink); stroke-width: 1.2; }
.th-rf { fill: var(--ink); }
.th-name { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.th-rname { font-size: 10px; fill: var(--muted); }
.th-close { align-self: center; min-height: 38px; padding: 4px 22px; }
.th-rel { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #7a4fc4 9%, var(--surface)); border: 1px solid color-mix(in srgb, #7a4fc4 35%, var(--line)); font-size: 13.5px; line-height: 1.4; }
.th-rel p { margin: 0; }
.th-rel .th-ex { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.th-trick { margin: 0; padding: 5px 8px; border-radius: 8px; background: #f3ebdd; font-size: 13px; line-height: 1.35; }
.inst-fl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inst-opt { font-size: 10px; font-weight: 400; color: var(--muted); } .hw-target { margin: 4px 0 0; font-size: 12.5px; }
/* V5.50 — fiche instrument : Diapason | Note fondamentale, puis Tempérament ; plus de bouton « Déterminer… » ; choix non gras */
.inst-page .inst-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.inst-page .inst-grid label:first-child { display: flex !important; flex-direction: column; grid-column: auto !important; }
.inst-page .inst-grid label.inst-temp { grid-column: 1 / -1; }
.inst-page .inst-card select, .inst-page .inst-card input[type="number"] { font-weight: 400 !important; }
/* V5.50 — Accueil : titre en gras + parenthèse en petit sur la même ligne, puis temps et bouton en dessous à droite */
.home-chrono .hc-line { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "txt txt" "big row" !important; row-gap: 3px !important; }
.home-chrono .hc-txt { grid-area: txt; min-width: 0; line-height: 1.25; }
.home-chrono .hc-txt .hc-lab { display: inline; white-space: normal; overflow: visible; font-size: 14px !important; font-weight: 700; color: var(--ink); }
.home-chrono .hc-txt .hc-sm { display: inline; font-size: 11px; color: var(--muted); font-weight: 500; }
.home-chrono .hc-big { grid-area: big; justify-self: start; }
.home-chrono .home-chrono-row { grid-area: row; justify-self: end; }
/* V5.50 — Accueil : ma semaine en 7 ronds, compositeur du jour */
.home-weekbox { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; }
.home-weekbox .home-week { margin: 0 0 8px; }
.home-dots { display: flex; justify-content: space-between; gap: 4px; max-width: 320px; margin: 0 auto; }
.home-dots .hd { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.home-dots .hd i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: block; }
.home-dots .hd.on i { background: var(--warn); border-color: var(--warn); box-shadow: inset 0 0 0 3px var(--surface); }
.home-dots .hd.today i { border-color: var(--accent); border-width: 2.5px; }
.home-dots .hd.fut i { opacity: .45; }
.home-dots .hd small { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.home-dots .hd.today small { color: var(--accent); }
.home-streak { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--warn); }
.home-comp { margin-top: 12px; background: color-mix(in srgb, #f3ebdd 70%, var(--surface)); }
.home-comp .hc-kicker { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }
.home-comp b { display: block; }
.note-dict-hint { margin: -2px 0 4px; font-size: 11px; text-align: right; }

/* ===== V5.51 ===== */
/* Bourdons & Sons : plus d'air sous l'en-tête, diapason centré, place réservée à la note jouée avant le petit piano */
#view-sounds .s-head, html[data-view="sounds"] #view-sounds > .s-head { grid-template-columns: auto minmax(0, 1fr) !important; grid-template-areas: "how sub" "ctx ctx" "play play" !important; row-gap: 8px !important; margin-bottom: 6px; }
#view-sounds .s-head .s-ctx { text-align: center !important; justify-self: center; }
#view-sounds .s-head .s-play { justify-self: center !important; min-height: 18px; }
#view-sounds .s-ctl { background: color-mix(in srgb, var(--accent) 6%, var(--surface)) !important; border-color: color-mix(in srgb, var(--accent) 22%, var(--line)) !important; }

/* Mon travail : trois couleurs et plus compact (le titre Calendrier visible sans descendre) */
#view-progress .p-intro { margin-bottom: 6px; }
#view-progress .ses-line { background: color-mix(in srgb, var(--warn) 9%, var(--surface)) !important; border-color: color-mix(in srgb, var(--warn) 35%, var(--line)) !important; min-height: 0 !important; padding: 6px 10px !important; margin-bottom: 8px; }
#view-progress .ses-line-time { font-size: 20px !important; }
#view-progress .ses-line .btn { min-height: 34px !important; padding: 3px 10px !important; font-size: 13.5px !important; }
#view-progress #day-panel { background: color-mix(in srgb, #2f8a5b 8%, var(--surface)) !important; border-color: color-mix(in srgb, #2f8a5b 30%, var(--line)) !important; padding: 8px 10px !important; margin-bottom: 8px; }
#view-progress #day-panel textarea { min-height: 54px; }
#view-progress .send-week { background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important; border-color: color-mix(in srgb, var(--accent) 28%, var(--line)) !important; min-height: 0 !important; padding: 6px 12px !important; }
#view-progress .p-actions { margin-bottom: 8px; }

/* Compositeurs : recherche et époques réunies dans un cadre bleu très clair */
.comp-filter { padding: 8px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.comp-filter .h-search { min-height: 40px; }
.comp-filter #comp-eras { margin: 0; }

/* Réglages : plus compact, une couleur par partie */
#view-settings .set-sec { font-size: 16px; margin: 14px 0 6px; }
#view-settings .set-card { padding: 8px 10px !important; margin-bottom: 6px; gap: 4px; }
#view-settings .set-card .set-h { font-size: 14px; margin: 0 0 2px; }
#view-settings .set-card select, #view-settings .set-card input[type="text"] { min-height: 38px; padding-top: 4px; padding-bottom: 4px; font-size: 15px; }
#view-settings .set-card .hint { font-size: 12.5px; margin: 2px 0; }
#view-settings .set-card .btn { min-height: 36px; padding: 4px 12px; font-size: 14px; }
#view-settings .acct-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#view-settings .acct-row .hint { margin: 0; flex: 1; min-width: 0; }
#view-settings .acct-out { min-height: 30px !important; padding: 2px 10px !important; font-size: 12.5px !important; flex: none; }
#view-settings .acct-out[hidden] { display: none; }
#view-settings .acct-name-row input { min-height: 36px; }
.set-card.sc-general, .set-card.sc-about { background: color-mix(in srgb, var(--ink) 4%, var(--surface)) !important; }
.set-card.sc-profile { background: color-mix(in srgb, #e6c34a 11%, var(--surface)) !important; border-color: color-mix(in srgb, #e6c34a 40%, var(--line)) !important; }
.set-card.sc-play { background: color-mix(in srgb, var(--accent) 6%, var(--surface)) !important; border-color: color-mix(in srgb, var(--accent) 22%, var(--line)) !important; }
.set-card.sc-backup { background: color-mix(in srgb, #e6c34a 18%, var(--surface)) !important; border-color: color-mix(in srgb, #e6c34a 45%, var(--line)) !important; }
.set-card.sc-inst { background: color-mix(in srgb, #d9708a 9%, var(--surface)) !important; border-color: color-mix(in srgb, #d9708a 35%, var(--line)) !important; }

/* Rythmes / Tonalités : deux boutons de même taille (vert : valeurs, violet : tonalités) */
#view-rhythm .rh-top { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 8px; margin: 0 0 8px; align-items: stretch; }
#view-rhythm .rh-values, #view-rhythm .rh-keys { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; width: 100%; height: 100%; min-height: 50px !important; margin: 0; padding: 6px 10px; border-radius: 14px; text-align: left; line-height: 1.2; white-space: normal; color: var(--ink); }
#view-rhythm .rh-values { background: color-mix(in srgb, #2f8a5b 15%, var(--surface)); border-color: color-mix(in srgb, #2f8a5b 45%, var(--line)); }
#view-rhythm .rh-values b, #view-rhythm .rh-keys b { font-size: 13.5px; }
#view-rhythm .rh-values span, #view-rhythm .rh-keys span { font-size: 11.5px; font-weight: 400; }
#view-rhythm .rh-sub { margin: 0 2px 6px !important; }
.rh-ex { font-size: 11.5px; font-weight: 400; color: var(--muted); }
#view-settings { gap: 6px !important; }
#view-settings .set-sec { margin: 10px 0 2px !important; }
#view-settings .set-card:has(> label.set-h + select:last-child) { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: center; column-gap: 10px; }
#view-settings .set-card:has(> label.set-h + select:last-child) .set-h { margin: 0; }
#view-settings .set-card { margin-bottom: 0 !important; }
#view-settings .set-card:has(> label[for="lang-select"]) { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: center; column-gap: 10px; }
#view-settings .set-card:has(> label[for="lang-select"]) .set-h { margin: 0; }
#view-settings .set-card .sel-row.single select { min-height: 38px; }
#view-settings .acct-name-row span { font-size: 14px; font-weight: 600; }
#view-settings .acct-name-row { gap: 8px; }

/* ===== V5.52 : Métronome — accents réglables, Tap tempo, accélération, Mes tempos ===== */
.metro .beat { padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.metro .beat.lv2 { width: 30px; height: 30px; background: color-mix(in srgb, var(--bad) 22%, var(--surface)); border-color: var(--bad); }
.metro .beat.lv1 { width: 24px; height: 24px; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border-color: var(--accent); }
.metro .beat.lv0 { width: 19px; height: 19px; }
.metro .beat.lvm { width: 19px; height: 19px; background: transparent; border: 2px dashed var(--muted); opacity: .7; }
.metro .beats:has(.beat:nth-child(9)) .beat.lv2 { width: 24px; height: 24px; }
.metro .beats:has(.beat:nth-child(9)) .beat.lv1 { width: 20px; height: 20px; }
.metro .beats:has(.beat:nth-child(9)) .beat.lv0, .metro .beats:has(.beat:nth-child(9)) .beat.lvm { width: 15px; height: 15px; }
.metro .beat.lvm.on { background: transparent; border-color: var(--muted); transform: scale(1.15); }
.beats-hint { margin: 2px 0 4px; text-align: center; font-size: 11.5px; }
.beats-hint .linkbtn { font-size: 11.5px; }
.metro-tap-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; margin: 4px 0 8px; }
.metro-tap { min-height: 40px; padding: 4px 16px; border-radius: 999px; font-weight: 700; background: color-mix(in srgb, #2f8a5b 15%, var(--surface)); border-color: color-mix(in srgb, #2f8a5b 45%, var(--line)); touch-action: manipulation; user-select: none; }
.metro-tap.hit { background: color-mix(in srgb, #2f8a5b 40%, var(--surface)); }
.metro-tap-row .hint { margin: 0; font-size: 12px; line-height: 1.3; }
.metro-more { border: 1px solid var(--line); border-radius: 14px; padding: 0 10px; margin: 0 0 8px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.metro-more > summary { cursor: pointer; padding: 9px 0; font-weight: 700; font-size: 14.5px; list-style: none; display: flex; align-items: center; gap: 6px; }
.metro-more > summary::-webkit-details-marker { display: none; }
.metro-more > summary::after { content: "›"; margin-left: auto; font-size: 20px; color: var(--muted); transition: transform .15s; }
.metro-more[open] > summary::after { transform: rotate(90deg); }
.metro-more[open] { padding-bottom: 10px; }
#ramp-box.on > summary { color: #2f8a5b; }
.ramp-on { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.ramp-on input { width: 20px; height: 20px; }
.ramp-grid { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ramp-grid input { width: 4.2em; min-height: 34px; padding: 2px 6px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--accent); text-align: center; }
.metro-more .hint { margin: 6px 0 0; font-size: 12px; }
.tempo-save { display: flex; gap: 6px; margin: 6px 0; }
.tempo-save input { flex: 1; min-width: 0; min-height: 36px; padding: 4px 8px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; }
.tempo-list { display: flex; flex-direction: column; gap: 5px; }
.tempo-item { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.tempo-item.on { border-color: var(--accent); }
.tempo-use { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tempo-use b { font-size: 14px; color: var(--accent); }
.tempo-use span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tempo-del { border: 0; background: none; width: 38px; font-size: 20px; color: var(--muted); cursor: pointer; }
.metro .metro-actions { position: sticky; bottom: 0; z-index: 3; padding: 8px 0 6px; margin-top: 4px; background: linear-gradient(to bottom, transparent, var(--bg) 35%); }
.metro .metro-more { margin-bottom: 0; }
/* V5.52 : Rythmes — 7 mesures sur 4 colonnes ; C barré */
#view-rhythm .rh-secs, #view-rhythm .rh-tests { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
#view-rhythm .rh-secs button, #view-rhythm .rh-tests button { font-size: 12px !important; padding: 0 1px !important; white-space: nowrap; letter-spacing: -0.2px; }
.rh-cut { fill: none; stroke: var(--ink); stroke-width: 3.2; }
/* V5.52 : Mon travail — Chronométrer en lilas pâle (pas la couleur du logo ni de Fonctionnement) */
#view-progress .ses-line { background: color-mix(in srgb, #7a4fc4 8%, var(--surface)) !important; border-color: color-mix(in srgb, #7a4fc4 30%, var(--line)) !important; }
/* V5.53 : Rythmes — signe C barré dans le titre, choix du niveau des exercices */
.rh-cut-ic { width: 0.85em; height: 1.05em; vertical-align: -0.17em; margin: 0 1px; }
.rh-level { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 6px; margin: 0 0 6px; }
.rh-level button { min-height: 36px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; line-height: 1.15; }
.rh-level button small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; }
.rh-level button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.rh-level button[aria-checked="true"] small { color: rgba(255,255,255,.85); }

/* ===== V5.55 : Accueil plus compact, cadres blancs sur fond gris très clair ===== */
html[data-view="home"] #main, html[data-view="home"] body { background: #f2f3f5; }
html[data-view="home"] .home-choice, html[data-view="home"] .home-weekbox { background: #fff !important; border-color: #e1e4e8 !important; box-shadow: 0 1px 3px rgba(20, 32, 43, .06); }
.home-chrono .hc-text b { font-size: 16px !important; }
.home-choice.home-chrono { row-gap: 2px !important; }
/* « Chronométrer une pièce (durée d’une pièce) » et Démarrer sur la même ligne ; le temps en dessous seulement quand il tourne */
.home-chrono .hc-line:last-child { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "txt row" "big big" !important; }
.home-chrono .hc-line:last-child .hc-big[hidden] { display: none; }
.home-choices { gap: 8px; }
html[data-view="home"] .home-choice { padding-top: 10px; padding-bottom: 10px; }
.home-comp .home-emo { filter: none; }
.home-chrono .hc-line { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "txt row" "big big" !important; column-gap: 10px !important; }
.home-chrono .hc-line .home-chrono-row { align-self: center; }
.home-chrono .hc-big:not([hidden]) { margin-top: 2px !important; }
html[data-view="home"] .home-weekbox { padding: 8px 10px; margin-top: 8px; }
.home-weekbox .home-week { margin: 0 0 6px; }
.home-dots .hd i { width: 24px; height: 24px; }
html[data-view="home"] .home-hello { margin-bottom: 2px; }
.home-chrono .hc-line:has(.hc-big:not([hidden])) { grid-template-areas: "txt txt" "big row" !important; }
/* V5.57 : Accueil — « Reprendre ma session précédente » et « Choisir ma page d'accueil » côte à côte */
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.home-split .home-choice { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 10px 12px !important; min-height: 0; text-align: left; margin: 0; }
.home-split .home-choice::after { display: none; }
.home-split .home-choice svg { width: 24px; height: 24px; flex: none; color: var(--accent); }
.home-split .home-choice b { font-size: 14.5px !important; line-height: 1.2; display: block; }
.home-split .home-choice small { font-size: 12.5px; line-height: 1.2; display: block; margin-top: 2px; }
.home-split .home-start-card[aria-expanded="true"] { border-color: var(--accent) !important; }
.home-start { margin: 0 0 8px !important; }
.home-split .home-choice { flex-direction: row !important; align-items: center !important; gap: 8px !important; }
.home-split .home-choice svg { width: 22px; height: 22px; }
/* V5.58 : la carte « Page de départ » s'illumine quand on arrive depuis l'Accueil */
#view-settings .set-card.flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent) !important; transition: box-shadow .3s; }
/* V5.59 : trait bleu foncé au-dessus du menu, avec l'étiquette « Menu », pour le séparer de la page */
.tabbar.tabbar2 { position: relative; border-top: 2px solid #1d3f73 !important; box-shadow: 0 -2px 8px rgba(20, 32, 43, .08); overflow: visible; }
.nav-menu-lab { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 0 8px; height: 16px; line-height: 16px; border-radius: 8px; background: #1d3f73; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; pointer-events: none; z-index: 2; }
.tabbar.tabbar2 { padding-top: 7px !important; } .nav-menu-lab { top: -10px; }
/* V5.60 : Accordeur — un peu plus d'air entre l'accordeur, le diapason, le tempérament et Mes instruments */
.view.tuner .tune-set { gap: 12px !important; margin-top: 10px; }
.view.tuner .tsec { padding-top: 8px !important; padding-bottom: 8px !important; }
/* Menu : Réglages et Chrono en gris (et non plus bleu clair) */
.ng[data-g="reglages"]:not([aria-selected="true"]), .nav-ses { background: color-mix(in srgb, var(--ink) 6%, var(--surface)) !important; }
/* V5.61 : menu — le choix est en bleu soutenu (1re ligne et page choisie) ; les autres pages du même groupe en bleu très clair */
.ng[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 24%, var(--surface)) !important; color: var(--accent) !important; font-weight: 700; }
.nav-items:not([hidden]) .tab { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.nav-items .tab[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 24%, var(--surface)) !important; color: var(--accent) !important; font-weight: 700; }
.nav-items { gap: 4px; }
/* V5.62 : Réglages et Chrono dans le menu : couleur crème du fond du logo (comme Fonctionnement) */
.ng[data-g="reglages"]:not([aria-selected="true"]), .nav-ses { background: #f3ebdd !important; }
/* V5.63 : menu plus sobre — groupe choisi entouré de bleu foncé (sans fond) ; seule la page choisie est en bleu ; les autres pages restent blanches */
.ng[aria-selected="true"] { background: var(--surface) !important; box-shadow: inset 0 0 0 2px #1d3f73 !important; color: #1d3f73 !important; }
.nav-items:not([hidden]) .tab { background: transparent !important; }
.nav-items .tab[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 20%, var(--surface)) !important; }
.nav-items:not([hidden]) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #1d3f73 55%, transparent); border-radius: 12px; }
/* V5.64 : menu — page choisie en gris, à l'intérieur du filet (le trait reste visible) ; Réglages et Chrono en carrés arrondis crème, entourés de brun quand on les choisit */
.nav-items:not([hidden]) { padding: 3px !important; }
.nav-items .tab { border-radius: 9px !important; }
.nav-items .tab[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 10%, var(--surface)) !important; color: var(--ink) !important; }
.nav-items .tab[aria-selected="true"] svg { color: var(--ink); }
.ng[data-g="reglages"], .nav-ses { border-radius: 12px !important; margin: 2px 2px 2px 4px !important; box-shadow: none !important; }
.ng[data-g="reglages"]:not([aria-selected="true"]), .nav-ses { background: #f3ebdd !important; }
.ng[data-g="reglages"][aria-selected="true"] { background: #f3ebdd !important; box-shadow: inset 0 0 0 2px #8a6236 !important; color: #6e4b26 !important; }
html[data-view="settings"] .nav-row .nav-ses, .nav-ses.run { box-shadow: none !important; }
/* V5.65 : filet plus fin autour du groupe choisi ; Réglages et Chrono exactement de la même taille */
.ng[aria-selected="true"]:not([data-g="reglages"]) { box-shadow: inset 0 0 0 1.2px #1d3f73 !important; }
.ng[data-g="reglages"][aria-selected="true"] { box-shadow: inset 0 0 0 1.2px #8a6236 !important; }
.nav-ses { width: 60px !important; min-width: 60px !important; max-width: 60px !important; margin: 2px 2px 2px 6px !important; box-sizing: border-box; }
.ng[data-g="reglages"], .nav-ses { min-height: 44px !important; }
.ng[data-g="reglages"], .nav-ses { height: 44px !important; min-height: 44px !important; }
/* V5.66 : accordage pour programme — choix de l'époque */
.pg-era { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; font-size: 13px; }
.pg-era label { color: var(--ink); font-weight: 600; }
.pg-era select { flex: 1; min-width: 180px; min-height: 36px; padding: 4px 8px; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--accent); }
/* V5.67 : Accordage pour programme — Fonctionnement (en haut à gauche), méthode et sources, « Pourquoi ce tempérament ? » */
.pg-sheet .pg-howto { position: absolute; top: 12px; left: 12px; z-index: 2; }
.pg-sheet .mg-title { margin-top: 30px; }
.pg-howbox { padding: 10px 12px; border-radius: 12px; background: #f3ebdd; border: 1px solid color-mix(in srgb, #c9b896 70%, var(--line)); font-size: 13px; line-height: 1.4; }
.pg-howh { margin: 4px 0 6px; font-size: 14.5px; color: var(--ink); }
.pg-howl, .pg-src { margin: 0 0 6px; padding-left: 18px; }
.pg-howl li, .pg-src li { margin: 3px 0; }
.pg-src li { font-size: 12.5px; }
.pg-why { margin: 6px 0 2px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, #2f8a5b 8%, var(--surface)); font-size: 13px; line-height: 1.4; color: var(--ink); }
.pg-eras { margin-top: 4px; flex-wrap: wrap; } .pg-eras .chip { font-size: 12px; min-height: 30px; }
.pg-choice .pg-eras { display: flex !important; flex-wrap: wrap; gap: 5px; width: 100%; } .pg-row .pg-name::placeholder { font-size: 12.5px; }
/* V5.69 : Accordage pour programme en page — Fonctionnement sous le titre, à gauche */
.pg-page .pg-howto { position: static !important; margin: 0 0 8px; }
.pg-page .pg-howbox { margin-bottom: 10px; }
.pg-page .pg-intro { margin: 0 0 8px; }
.pg-page .pg-back { display: block; margin: 16px auto 8px; min-height: 38px; padding: 4px 16px; border-radius: 999px; }
.pg-page .hw-step:first-child { margin-top: 4px; }
/* ===== V5.50 : Ma voix (mise en voix pour chanteurs) ===== */
.vx-page { display: flex; flex-direction: column; gap: 18px; }
.vx-page[hidden] { display: none; }
.vx-col { display: flex; flex-direction: column; gap: 8px; }
.vx-h { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; font-weight: 700; }
.vx-p { margin: 0; font-size: 15px; }
.vx-tip { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
.vx-test { border: 1.5px dashed var(--accent); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.vx-test-h { color: var(--accent); }
.vx-range { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.vx-range b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.vx-check { display: flex; gap: 6px; align-items: center; }
.vx-hint { color: var(--muted); font-size: 14px; font-style: italic; }
.vx-player { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.vx-status { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 14px; }
.vx-big { font-family: var(--font-num); font-size: 54px; font-weight: 300; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.vx-voice-res { font-size: 38px; color: var(--accent); font-weight: 400; }
.vx-res { text-align: center; font-size: 15px; }
.vx-span { text-align: center; color: var(--muted); font-size: 14px; margin-top: -4px; }
.vx-phase { text-align: center; font-weight: 700; min-height: 1.4em; }
.vx-phase.sing { color: var(--accent); }
.vx-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.vx-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.vx-row3 { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.vx-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vx-limit { color: var(--warn); text-align: center; font-size: 14px; }
#vx-tempo { width: 100%; accent-color: var(--accent); }
.vx-care { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; margin: 0; }
.vx-care strong { color: var(--ink); }
.vx-pill { font: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); cursor: pointer; }
.vx-pill::after { content: "i"; font-style: italic; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 11px; }
.vx-piano { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border-top: 1px solid var(--line); margin-inline: -4px; padding: 6px 4px 8px; box-shadow: 0 -6px 14px -10px rgba(0,0,0,.25); }
.vx-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.vx-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.vx-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.vx-sw.mel { background: var(--accent); } .vx-sw.acc { background: var(--key-white-down); } .vx-sw.user { background: var(--warn); }
.vx-kbd-scroll { overflow-x: auto; touch-action: pan-x; scrollbar-width: thin; }
.vx-kbd { position: relative; height: 110px; margin: 0 auto; }
.vx-k { position: absolute; top: 0; border: 1px solid var(--line); border-radius: 0 0 5px 5px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.vx-k.w { height: 110px; background: var(--key-white); z-index: 1; }
.vx-k.b { height: 66px; background: var(--key-black); border-color: var(--key-black); z-index: 2; }
.vx-k.on-acc { background: var(--key-white-down); }
.vx-k.b.on-acc { background: var(--key-black-down); }
.vx-k.on-mel { background: var(--accent); }
.vx-k.on-user { background: var(--warn); }
.vx-k span { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 10px; color: #586775; pointer-events: none; }
.vx-veil { position: fixed; inset: 0; z-index: 60; background: rgba(10, 20, 30, .5); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.vx-veil[hidden] { display: none; }
.vx-sheet { background: var(--surface); color: var(--ink); border-radius: var(--radius); max-width: 560px; width: 100%; max-height: 85%; overflow: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; margin-bottom: env(safe-area-inset-bottom, 0px); }
.vx-sheet h3 { margin: 0; font-size: 20px; }
.vx-sheet p { margin: 0; font-size: 15px; }
.vx-sheet .vx-warn { font-weight: 700; color: var(--bad); }
.vx-sheet a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .vx-bar i { transition: none; } }
.vx-coupon { margin: 0; padding: 8px 12px; border: 1.5px dashed var(--good); border-radius: 10px; font-size: 15px; text-align: center; }
.vx-coupon b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px; letter-spacing: .08em; color: var(--good); user-select: all; -webkit-user-select: all; }
/* V5.71 : Ma voix — Fonctionnement à gauche sous le titre, « Découvrir votre tessiture » à droite */
.vx-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 10px; }
.vx-tq-open { min-height: 32px; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); }
.vx-tq-open[aria-expanded="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.vx-how-card { gap: 6px; }
.vx-how-card h3 { margin: 8px 0 2px; font-size: 15px; color: var(--accent); }
.vx-how-card ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.4; }
.vx-how-card li { margin: 3px 0; }
.vx-how-lead { margin: 0; font-size: 14px; line-height: 1.4; }
.vx-how-close { align-self: center; min-height: 38px; padding: 4px 22px; margin-top: 6px; }

/* ===== V5.72 : Ma voix, téléphone tourné (paysage) ===== */
.vx-info, .vx-ctl { display: contents; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] { --vxph: clamp(130px, 46dvh, 300px); }
  html[data-view="voice"] .topbar, html[data-view="voice"] .tabbar { display: none; }
  html[data-view="voice"] .app { max-width: none; }
  html[data-view="voice"] main { padding: 8px 12px calc(var(--vxph) + 14px) max(14px, env(safe-area-inset-left)); }
  /* colonne de gauche (défile) : tessiture, voix, exercices, réglages */
  html[data-view="voice"] #view-voice { width: calc(50vw - 26px - env(safe-area-inset-left, 0px)); gap: 12px; }
  /* colonne de droite (fixe) : la note et les boutons */
  html[data-view="voice"] .vx-player {
    position: fixed; z-index: 6; top: 8px; left: 50vw; right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--vxph) + 8px); overflow-y: auto; padding: 10px 12px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: center;
  }
  html[data-view="voice"] .vx-info { display: flex; flex-direction: column; gap: 5px; }
  html[data-view="voice"] .vx-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  html[data-view="voice"] .vx-ctl > * { grid-column: 1 / -1; order: 6; }
  html[data-view="voice"] .vx-ctl > .vx-row3 { display: contents; }
  html[data-view="voice"] #vx-go-down, html[data-view="voice"] #vx-replay, html[data-view="voice"] #vx-go-up, html[data-view="voice"] #vx-stop { grid-column: auto; }
  html[data-view="voice"] #vx-go-down { order: 1; } html[data-view="voice"] #vx-go-up { order: 2; }
  html[data-view="voice"] #vx-replay { order: 3; } html[data-view="voice"] #vx-stop { order: 4; }
  html[data-view="voice"] .vx-status { font-size: 13px; flex-direction: column; gap: 0; text-align: center; }
  html[data-view="voice"] .vx-big { font-size: 38px; }
  html[data-view="voice"] .vx-span { font-size: 12px; margin-top: 0; }
  html[data-view="voice"] .vx-phase { font-size: 14px; }
  html[data-view="voice"] .vx-ctl .btn { min-height: 40px; padding-block: 4px; }
  html[data-view="voice"] .vx-ctl .btn { min-width: 0; padding-inline: 4px; font-size: 14px; }
  html[data-view="voice"] .vx-limit { font-size: 13px; }
  /* piano : toute la largeur, en bas, grand */
  html[data-view="voice"] .vx-piano {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; height: var(--vxph); box-sizing: border-box;
    padding: 4px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  html[data-view="voice"] .vx-legend { margin-bottom: 3px; font-size: 11px; }
  html[data-view="voice"] .vx-kbd, html[data-view="voice"] .vx-k.w { height: calc(var(--vxph) - 34px); }
  html[data-view="voice"] .vx-k.b { height: calc((var(--vxph) - 34px) * .6); }
}
@media (orientation: landscape) and (max-height: 350px) {
  html[data-view="voice"] .vx-big { font-size: 30px; }
  html[data-view="voice"] .vx-status { font-size: 12px; }
  html[data-view="voice"] .vx-phase { font-size: 13px; }
  html[data-view="voice"] .vx-info { gap: 3px; }
}

/* ===== V5.73 : Ma voix, pastilles plus petites et étapes guidées ===== */
#vx-voices, #vx-exs { gap: 6px; }
#vx-voices .chip, #vx-exs .chip { min-height: 30px; padding: 2px 10px; font-size: 14px; }
.vx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vx-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--muted); padding: 4px 8px; border-radius: 10px; border: 1px solid transparent; }
.vx-steps li b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 1.5px solid var(--line); color: var(--muted); background: var(--surface); }
.vx-steps li.now { color: var(--ink); font-weight: 700; background: var(--accent-soft); border-color: var(--accent); }
.vx-steps li.now b { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vx-steps li.done b { background: var(--surface-2); }
.vx-steps li.done b::before { content: "✓"; } .vx-steps li.done b { font-size: 0; } .vx-steps li.done b::before { font-size: 12px; }
.vx-steps li.skip { opacity: .55; }
.vx-skip-note { display: none; font-weight: 400; }
.vx-steps li.skip .vx-skip-note { display: inline; }
.vx-steps:not([hidden]) ~ .vx-phase:not(.vx-phase-idle) { display: none; }
.vx-status { flex-wrap: wrap; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] #vx-voices .chip, html[data-view="voice"] #vx-exs .chip { min-height: 30px; font-size: 13px; padding: 2px 9px; }
  html[data-view="voice"] .vx-player { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  /* note à gauche, palier et étendue à droite */
  html[data-view="voice"] .vx-info { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 5px; align-items: center; }
  html[data-view="voice"] .vx-big { grid-row: 1 / span 2; font-size: 36px; }
  html[data-view="voice"] .vx-status { grid-column: 2; text-align: left; align-self: end; }
  html[data-view="voice"] .vx-span { grid-column: 2; text-align: left; align-self: start; }
  html[data-view="voice"] .vx-bar, html[data-view="voice"] .vx-steps, html[data-view="voice"] .vx-phase { grid-column: 1 / -1; }
  /* étapes : 4 pastilles numérotées sur une ligne, le texte de l'étape en cours dessous */
  html[data-view="voice"] .vx-steps { flex-direction: row; justify-content: center; gap: 8px; }
  html[data-view="voice"] .vx-steps li { padding: 0; border: 0; background: none; }
  html[data-view="voice"] .vx-steps li span { display: none; }
  html[data-view="voice"] .vx-steps li b { width: 24px; height: 24px; }
  html[data-view="voice"] .vx-steps:not([hidden]) ~ .vx-phase { display: block; }
  html[data-view="voice"] .vx-phase { font-size: 13px; line-height: 1.25; }
}
@media (orientation: landscape) and (max-height: 350px) {
  html[data-view="voice"] .vx-player { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html[data-view="voice"] .vx-ctl .btn { font-size: 13px; padding-inline: 2px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] #vx-dir { display: none; }
}
@media (orientation: landscape) and (max-height: 350px) {
  html[data-view="voice"] .vx-player { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding-inline: 8px; gap: 8px; }
  html[data-view="voice"] .vx-info { column-gap: 6px; }
}

/* ===== V5.74 : Ma voix, deux « Suivant » (en montant / en descendant) ===== */
.vx-row3 { grid-template-columns: 1.3fr 1fr 1.3fr; }
.vx-go { display: flex; align-items: center; justify-content: center; gap: 6px; padding-inline: 6px; line-height: 1.1; }
.vx-arr { font-size: 22px; font-weight: 700; flex: none; }
.vx-gl { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.vx-gl small { font-size: 12px; font-weight: 500; opacity: .85; }
.vx-go:disabled { opacity: .35; }
.vx-steps li { text-align: left; }
.vx-gl { text-align: left; white-space: nowrap; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] .vx-ctl .vx-go { flex-direction: column; gap: 0; padding: 3px 2px; min-height: 52px; }
  html[data-view="voice"] .vx-arr { font-size: 16px; line-height: 1; }
  html[data-view="voice"] .vx-gl { align-items: center; text-align: center; }
  html[data-view="voice"] .vx-gl small { font-size: 11px; }
  html[data-view="voice"] .vx-limit { display: none; }
}
@media (orientation: landscape) and (max-height: 350px) {
  html[data-view="voice"] .vx-player { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html[data-view="voice"] .vx-gl { white-space: normal; }
  html[data-view="voice"] .vx-gl small { font-size: 10px; line-height: 1.05; }
}

/* ===== V5.75 : Ma voix, voix plus petites, exercices visibles en paysage, Do central ===== */
#vx-voices { gap: 5px; }
#vx-voices .chip { min-height: 26px; padding: 1px 8px; font-size: 13px; }
.vx-k.w.mid::after { content: ""; position: absolute; left: 50%; bottom: 20px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px var(--key-white); pointer-events: none; }
.vx-sw.mid { border-radius: 50%; background: var(--accent); border-color: var(--accent); width: 9px; height: 9px; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] #vx-voices .chip { min-height: 24px; font-size: 12px; padding: 0 7px; }
  html[data-view="voice"] #vx-exs .chip { min-height: 28px; font-size: 13px; padding: 1px 9px; }
  /* les exercices en haut de la colonne de gauche : visibles pendant qu'on chante */
  html[data-view="voice"] #view-voice > * { order: 3; }
  html[data-view="voice"] #view-voice > .vx-top { order: 0; }
  html[data-view="voice"] #view-voice #vx-ex-sec { order: 1; gap: 5px; }
  html[data-view="voice"] #view-voice #vx-voice-sec { order: 2; }
  html[data-view="voice"] #view-voice { gap: 10px; }
  html[data-view="voice"] .vx-hint { font-size: 13px; }
  html[data-view="voice"] .vx-k.w.mid::after { bottom: 18px; width: 8px; height: 8px; margin-left: -4px; }
}

/* ===== V5.76 : Ma voix, plus compact ; menu Mes instruments = trompette + tête ===== */
.ng-duo { display: inline-flex; align-items: center; gap: 1px; }
.ng-duo svg { width: 19px; height: 19px; }
#vx-voices { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#vx-voices .chip { flex: 1 1 auto; min-width: 0; min-height: 26px; padding: 0 6px; font-size: 13px; white-space: nowrap; }
.vx-range { flex-wrap: nowrap; justify-content: space-between; gap: 8px; font-size: 13px; }
.vx-range b { color: var(--accent); font-weight: 700; }
.vx-check { flex: none; font-size: 13px; }
.vx-hint { font-style: normal; color: var(--ink); font-size: 14px; }
.vx-hint b { color: var(--muted); font-weight: 700; }
.vx-player.vx-idle { padding: 12px 14px; gap: 8px; }
.vx-idle .vx-big, .vx-idle .vx-span, .vx-idle .vx-bar, .vx-idle #vx-dir { display: none; }
.vx-idle .vx-status { color: var(--ink); font-size: 14px; }
.vx-idle .vx-phase { font-weight: 400; color: var(--muted); font-size: 13px; min-height: 0; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] #vx-voices .chip { min-height: 24px; font-size: 12px; padding: 0 5px; }
  html[data-view="voice"] .vx-idle .vx-status { grid-column: 1 / -1; text-align: center; }
}
.vx-range b { white-space: nowrap; }
.vx-range > span:first-child { flex: none; }
.vx-check { flex: 0 1 auto; text-align: right; }
/* V5.77 */
.vx-ex-note { margin: -2px 0 2px; font-size: 13px; color: var(--accent); font-weight: 600; }
/* V5.79 : renvoi vers le test de tessiture */
.vx-voice-note { margin: -2px 0 4px; font-size: 13px; line-height: 1.4; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 8px; padding: 6px 10px; color: var(--ink); }
.vx-link { font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ===== V5.80 : Chanter juste — titres, deux parties, solfège chanté ===== */
.vx-sec-h { margin: 0; font-size: 19px; font-weight: 800; color: var(--accent); padding-bottom: 4px; border-bottom: 2px solid var(--accent-soft); }
.vx-part-h { margin: 6px 0 0; font-size: 21px; font-weight: 800; color: var(--ink); padding-bottom: 4px; border-bottom: 2px solid var(--accent); }
.vx-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--surface-2); padding: 4px; border-radius: 14px; }
.vx-part { font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; padding: 9px 6px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.vx-part[aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.12), inset 0 0 0 1.5px var(--accent); }
#view-voice[data-part="ear"] .vx-warm-only, #view-voice[data-part="warm"] .vx-ear-only { display: none !important; }
.ej-lead { margin: 0; font-size: 14px; }
#ej-levels { gap: 6px; }
#ej-levels .chip { min-height: 32px; padding: 2px 11px; font-size: 14px; }
.ej-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ej-score { text-align: right; font-size: 13px; color: var(--good); font-weight: 700; min-height: 0; }
.ej-score:empty { display: none; }
.ej-instr { text-align: center; font-size: 20px; font-weight: 700; line-height: 1.3; }
.ej-meter { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.ej-z { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; font-weight: 700; font-size: 15px; color: var(--muted); background: var(--surface-2); border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.ej-lo::before { content: "↓ "; white-space: pre; } .ej-hi::after { content: " ↑"; white-space: pre; }
.ej-ok { width: 58px; min-height: 58px; border-radius: 50%; background: none; }
.ej-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--line); transition: background .15s, transform .15s; }
.ej-meter[data-s="lo"] .ej-lo, .ej-meter[data-s="hi"] .ej-hi { background: #fbe7cf; color: #8a4b00; border-color: var(--warn); }
.ej-meter[data-s="ok"] .ej-dot { background: var(--good); transform: scale(1.15); box-shadow: 0 0 0 6px rgba(22,137,90,.18); }
.ej-msg { text-align: center; font-size: 16px; min-height: 1.4em; color: var(--muted); }
.ej-msg.good { color: var(--good); font-weight: 800; font-size: 20px; }
.ej-msg.bad { color: var(--bad); }
.ej-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ej-ctl .btn { min-height: 44px; }
.vx-k.on-ok { background: var(--good) !important; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] #view-voice > .vx-parts { order: 0; }
  html[data-view="voice"] #view-voice #ej-sec { order: 1; gap: 6px; }
  html[data-view="voice"] .vx-part { padding: 6px 4px; font-size: 13px; }
  html[data-view="voice"] .vx-part-h { font-size: 17px; }
  html[data-view="voice"] .ej-card {
    position: fixed; z-index: 6; top: 8px; left: 50vw; right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--vxph) + 8px); overflow-y: auto; padding: 8px 12px; gap: 6px; justify-content: center;
  }
  html[data-view="voice"] .ej-instr { font-size: 16px; }
  html[data-view="voice"] .ej-z { min-height: 34px; font-size: 13px; }
  html[data-view="voice"] .ej-ok { width: 40px; min-height: 40px; }
  html[data-view="voice"] .ej-dot { width: 28px; height: 28px; }
  html[data-view="voice"] .ej-msg { font-size: 14px; } html[data-view="voice"] .ej-msg.good { font-size: 16px; }
  html[data-view="voice"] .ej-ctl { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  html[data-view="voice"] .ej-ctl .btn { min-height: 38px; font-size: 12px; padding: 2px 3px; line-height: 1.1; }
}
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] .vx-part-h, html[data-view="voice"] #view-voice .vx-ex-note, html[data-view="voice"] .ej-lead { display: none; }
}

/* ===== V5.81 : test de tessiture compact ; chaîne des notes intermédiaires ===== */
.vx-test { padding: 10px 12px; gap: 6px; }
.vx-test .vx-p { font-size: 14px; }
.vx-tq-who { display: flex; flex-direction: column; gap: 4px; }
.vx-tq-row { display: grid; grid-template-columns: auto 1fr; gap: 6px; }
.vx-tq-row .chip { min-height: 32px; padding: 2px 10px; font-size: 14px; white-space: nowrap; }
#vx-tq-setup { gap: 8px; }
.vx-tq-go { min-height: 38px; font-size: 15px; }
.ej-chain { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; }
.ej-n { font-weight: 800; font-size: 17px; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted); background: var(--surface); }
.ej-n.ref { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.ej-n.now { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ej-n.ok { background: var(--good); border-color: var(--good); color: #fff; }
.ej-ar { font-style: normal; color: var(--muted); font-weight: 700; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] .ej-n { font-size: 13px; padding: 1px 7px; }
}
@media (max-width: 370px) { .vx-tq-row .chip { font-size: 13px; padding: 2px 7px; } }
.ej-instr { font-size: 18px; }
.ej-card[data-end] .ej-instr { color: #d19a00; font-size: 36px; letter-spacing: 4px; }

/* ===== V5.83 : Chanter juste — portée, mélange, prudence, jours chantés ===== */
.vx-veil { z-index: 80; }
.vx-care { font-size: 13px; padding-top: 8px; }
.vx-care-full { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.ej-staff { display: flex; flex-direction: column; align-items: center; }
.ej-staff .notation { width: 190px; height: auto; color: var(--ink); }
.ej-staff-lbl { display: flex; justify-content: space-between; width: 190px; padding: 0 22px 0 52px; box-sizing: border-box; font-weight: 800; color: var(--accent); }
.ej-staff-lbl span:first-child { color: var(--muted); }
.ej-mix { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.ej-mix-row { display: flex; flex-wrap: wrap; gap: 5px; }
.ej-mix-row .chip { min-height: 28px; padding: 1px 10px; font-size: 13px; }
.ej-inter { font-size: 13px; }
.cal .day.sang::before { content: "🎤"; position: absolute; top: 2px; left: 3px; font-size: 10px; line-height: 1; }
.cal-sing { margin: 6px 2px 0; font-size: 13px; color: var(--muted); }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] .ej-staff .notation { width: 130px; }
  html[data-view="voice"] .ej-staff-lbl { width: 130px; padding: 0 14px 0 36px; font-size: 13px; }
}
/* V5.84 */
.vx-range { flex-wrap: wrap; row-gap: 2px; }
.vx-check { white-space: nowrap; }

/* ===== V5.85 : Chanter juste plus compact ===== */
#view-voice.vx-page { gap: 12px; }
.vx-voice-note { font-size: 12.5px; padding: 5px 9px; line-height: 1.35; }
.vx-sec-h { font-size: 17px; padding-bottom: 2px; }
.vx-part-h { font-size: 17px; margin-top: 0; padding-bottom: 2px; }
.vx-parts { padding: 3px; gap: 4px; }
.vx-part { font-size: 13px; padding: 6px 4px; }
.vx-ex-note, .ej-lead { font-size: 12.5px; }
#ej-sec, #vx-ex-sec { gap: 6px; }
#ej-levels { gap: 4px; }
#ej-levels .chip { min-height: 27px; padding: 0 8px; font-size: 13px; }
.vx-hint { font-size: 13px; }
.ej-card { padding: 10px 12px; gap: 8px; }
.ej-msg:empty, .ej-score:empty { display: none; }
.ej-card:not([data-end]) .ej-instr { font-size: 16px; }
#ej-start { min-height: 44px; font-size: 17px; }
.ej-z { min-height: 40px; }
.ej-ok { width: 50px; min-height: 50px; } .ej-dot { width: 34px; height: 34px; }
.ej-ctl .btn { min-height: 40px; font-size: 15px; }
.vx-player { padding: 10px 12px; gap: 8px; }
#vx-start { min-height: 44px; font-size: 17px; }
.vx-big { font-size: 46px; }
.ej-card:not([data-end]) .ej-instr:only-of-type { }
.ej-card.ej-idle .ej-instr { font-size: 14px; font-weight: 500; color: var(--muted); }
.vx-seg { gap: 5px; }
.vx-seg .chip { min-height: 34px; padding: 2px 8px; font-size: 14px; line-height: 1.15; }
#vx-ex-sec .chip, #vx-exs .chip { min-height: 28px; padding: 0 9px; font-size: 13px; }
.vx-steps li { padding: 3px 8px; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] .ej-card { justify-content: flex-start; }
  html[data-view="voice"] .ej-card > :first-child { margin-top: auto; }
  html[data-view="voice"] .ej-card > :last-child { margin-bottom: auto; }
  html[data-view="voice"] .ej-score { position: absolute; top: 4px; right: 10px; font-size: 11px; }
  html[data-view="voice"] .ej-card { position: fixed; }
}
@media (orientation: landscape) and (max-height: 350px) {
  html[data-view="voice"] .ej-card { gap: 4px; padding: 6px 8px; }
  html[data-view="voice"] .ej-instr { font-size: 14px; }
  html[data-view="voice"] .ej-z { min-height: 28px; font-size: 12px; }
  html[data-view="voice"] .ej-ok { width: 32px; min-height: 32px; } html[data-view="voice"] .ej-dot { width: 22px; height: 22px; }
  html[data-view="voice"] .ej-msg { font-size: 12px; min-height: 0; } html[data-view="voice"] .ej-msg.good { font-size: 14px; }
  html[data-view="voice"] .ej-ctl .btn { min-height: 32px; font-size: 11px; }
  html[data-view="voice"] .ej-n { font-size: 12px; padding: 0 6px; }
}
/* paysage : carte en deux colonnes (consigne + justesse à gauche, boutons à droite) */
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] .ej-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, .55fr); grid-auto-flow: row dense; column-gap: 10px; row-gap: 4px; align-content: center; padding: 6px 10px; }
  html[data-view="voice"] .ej-card > * { grid-column: 1; margin: 0 !important; }
  html[data-view="voice"] .ej-card > #ej-ctl, html[data-view="voice"] .ej-card > #ej-start { grid-column: 2; grid-row: 1 / span 7; align-self: center; }
  html[data-view="voice"] .ej-score { position: static; text-align: left; font-size: 11px; }
  html[data-view="voice"] .ej-ctl { grid-template-columns: 1fr; gap: 4px; }
  html[data-view="voice"] .ej-ctl .btn { min-height: 30px; font-size: 12px; padding: 1px 4px; }
  html[data-view="voice"] .ej-instr { font-size: 14px; }
  html[data-view="voice"] .ej-meter { gap: 5px; }
  html[data-view="voice"] .ej-z { min-height: 28px; font-size: 12px; }
  html[data-view="voice"] .ej-ok { width: 32px; min-height: 32px; } html[data-view="voice"] .ej-dot { width: 22px; height: 22px; }
  html[data-view="voice"] .ej-msg { font-size: 12px; min-height: 0; } html[data-view="voice"] .ej-msg.good { font-size: 14px; }
  html[data-view="voice"] .ej-staff .notation { width: 120px; } html[data-view="voice"] .ej-staff-lbl { width: 120px; padding: 0 12px 0 34px; font-size: 12px; }
  html[data-view="voice"] .ej-card.ej-idle { grid-template-columns: minmax(0, 1fr) minmax(120px, .7fr); }
}
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] .ej-card { align-content: start; align-content: safe center; }
  html[data-view="voice"] .ej-instr { font-size: 13px; line-height: 1.25; }
  html[data-view="voice"] .ej-z { white-space: nowrap; font-size: 11px; padding: 0 4px; }
  html[data-view="voice"] .ej-staff .notation { width: 104px; } html[data-view="voice"] .ej-staff-lbl { width: 104px; padding: 0 10px 0 30px; font-size: 11px; }
  html[data-view="voice"] #ej-start { font-size: 15px; min-height: 40px; padding: 4px 8px; }
  html[data-view="voice"] .ej-n { font-size: 12px; padding: 0 6px; }
  html[data-view="voice"] .ej-chain { gap: 2px 4px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] .ej-card:not([data-end]) .ej-instr { font-size: 13px; line-height: 1.25; }
  html[data-view="voice"] .ej-card.ej-idle .ej-instr { font-size: 12.5px; }
}

/* ===== V5.87 : Accueil plus compact (voir la semaine sur le premier écran) ===== */
html[data-view="home"] #view-home { gap: 10px; }
.home-hello { font-size: 23px; line-height: 1.15; }
.home-q { margin: -6px 0 0; font-size: 15.5px; }
html[data-view="home"] .home-choices { gap: 7px; }
html[data-view="home"] .home-choice { padding-top: 7px; padding-bottom: 7px; }
.home-choice b { font-size: 15px; line-height: 1.2; }
.home-choice small { font-size: 12px; line-height: 1.25; font-weight: 600; }
.home-emo { font-size: 22px; }
/* Reprendre (plus large) | Choisir ma page d'accueil (plus étroit), tous deux plats */
.home-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 6px; }
.home-split .home-choice { padding: 6px 10px !important; gap: 7px !important; }
.home-split .home-choice b { font-size: 13.5px !important; line-height: 1.15; }
.home-split .home-choice small { font-size: 11.5px; margin-top: 1px; }
.home-split .home-choice svg { width: 20px; height: 20px; }
.home-split .home-start-card b { font-size: 12.5px !important; }
html[data-view="home"] .home-chrono { padding-top: 6px !important; padding-bottom: 6px !important; gap: 0 !important; }
html[data-view="home"] .home-chrono .hc-line { padding-top: 5px; gap: 6px; }
html[data-view="home"] .home-chrono .hc-txt .hc-lab { font-size: 13.5px !important; }
html[data-view="home"] .home-chrono .hc-txt .hc-sm { font-size: 10.5px !important; }
html[data-view="home"] .home-chrono-row .btn { min-height: 32px !important; font-size: 12.5px !important; padding: 2px 9px !important; }
html[data-view="home"] .home-choice small { font-size: 12px !important; }
html[data-view="home"] .home-choice > span > b, html[data-view="home"] .home-choices > .home-choice b { font-size: 15px !important; }
html[data-view="home"] .home-split .home-choice b { font-size: 13px !important; }
html[data-view="home"] .home-split .home-choice small { font-size: 11.5px !important; }
html[data-view="home"] .home-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
html[data-view="home"] .home-split .home-start-card b { font-size: 12.5px !important; }

/* ===== V5.88 : Accueil en couleurs (reprises des pages) + compositeur du jour visible ===== */
html[data-view="home"] .home-choices > [data-go="instruments"] { background: color-mix(in srgb, #d9708a 10%, #fff) !important; border-color: color-mix(in srgb, #d9708a 30%, #e1e4e8) !important; }
html[data-view="home"] .home-choices > [data-go="tuner"] { background: color-mix(in srgb, #2f7fd8 9%, #fff) !important; border-color: color-mix(in srgb, #2f7fd8 26%, #e1e4e8) !important; }
html[data-view="home"] #home-start-btn { background: #f3ebdd !important; border-color: #e3d6bf !important; }
html[data-view="home"] .home-chrono { background: color-mix(in srgb, #7a4fc4 8%, #fff) !important; border-color: color-mix(in srgb, #7a4fc4 28%, #e1e4e8) !important; }
html[data-view="home"] .home-chrono .hc-line { border-top-color: color-mix(in srgb, #7a4fc4 22%, #e1e4e8); }
html[data-view="home"] #home-weekbox { background: color-mix(in srgb, #2f8a5b 8%, #fff) !important; border-color: color-mix(in srgb, #2f8a5b 28%, #e1e4e8) !important; }
html[data-view="home"] .home-choices > [data-go="instruments"] small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
/* encore plus compact pour voir le compositeur du jour */
.home-hello { font-size: 21px; }
.home-q { font-size: 14.5px; margin-top: -8px; }
html[data-view="home"] #view-home { gap: 8px; }
html[data-view="home"] #home-weekbox { padding: 6px 10px !important; gap: 4px; }
html[data-view="home"] .home-week { font-size: 14px; }
html[data-view="home"] .home-dots { gap: 4px; }
html[data-view="home"] #home-comp { padding-top: 6px !important; padding-bottom: 6px !important; }
/* Mon travail : Transmettre en crème (fond de Réglages) */
#view-progress .send-week { background: #f3ebdd !important; border-color: #e3d6bf !important; }
/* Mes instruments : bleu très clair et rose extrêmement clair (au lieu de jaune) */
.inst-card.nc-even { background: color-mix(in srgb, #d9708a 6%, var(--surface)) !important; border-color: color-mix(in srgb, #d9708a 25%, var(--line)) !important; }
.inst-card.nc-even .rl-num { border-color: #d9708a !important; color: #b04e69 !important; }
html[data-view="home"] .home-weekbox { margin-top: 0 !important; }
html[data-view="home"] .home-comp { margin-top: 0 !important; }
html[data-view="home"] .home-chrono { margin-top: 0 !important; margin-bottom: 0 !important; }
.home-hello { font-size: 20px; }
html[data-view="home"] .home-chrono .hc-line { padding-top: 4px; }
html[data-view="home"] .home-chrono > svg { width: 20px; height: 20px; }
/* V5.89 : « Choisir ma page d'accueil » de nouveau en blanc */
html[data-view="home"] #home-start-btn { background: #fff !important; border-color: #e1e4e8 !important; }

/* ===== V5.89 : tenir sur un écran de natel ===== */
/* Accordeur : les trois pavés (bleu, vert, rose) plus serrés */
.view.tuner .tsec { padding: 7px 10px !important; }
.view.tuner .sec-a4, .view.tuner .sec-temp, .view.tuner .sec-inst { margin-top: 0; }
.view.tuner .sec-a4 .group-title, .view.tuner .sec-temp .group-title, .view.tuner .sec-inst .group-title { font-size: 12.5px; }
.view.tuner .sec-a4 .chip, .view.tuner .sec-a4 .chips button { min-height: 32px !important; padding-top: 1px !important; padding-bottom: 1px !important; }
.view.tuner .sec-a4 .icon-btn { width: 38px; height: 38px; }
.view.tuner .sec-temp .sel-row select, .view.tuner .inst-row > select { height: 44px !important; min-height: 44px !important; }
.view.tuner .pg-open, .view.tuner .hw-open { padding-top: 4px !important; padding-bottom: 4px !important; font-size: 12.5px !important; line-height: 1.25 !important; }
.view.tuner .sec-temp .sel-row > div { gap: 4px !important; }
/* Bourdons : moins d'espace au-dessus du clavier */
#view-sounds { gap: 8px; }
.view.tuner .pg-open, .view.tuner .hw-open { height: auto !important; min-height: 44px !important; padding: 4px 8px !important; }
/* Mes instruments : alternance bleu très clair / blanc (plus de rose) */
.inst-card.nc-even { background: var(--surface) !important; border-color: var(--line) !important; }
.inst-card.nc-even .rl-num { border-color: var(--accent) !important; color: var(--accent) !important; }
.view.tuner { gap: 8px !important; }
.view.tuner .pg-open, .view.tuner .hw-open { font-size: 12px !important; line-height: 1.15 !important; min-height: 40px !important; }
.view.tuner .tsec { padding: 6px 10px !important; }
.view.tuner .sec-inst .inst-row { row-gap: 2px !important; }
#view-sounds { gap: 6px !important; }
#view-sounds .s-head { gap: 2px !important; row-gap: 2px !important; }
#view-sounds .panel.s-ctl { padding-top: 6px !important; padding-bottom: 6px !important; row-gap: 6px !important; gap: 6px !important; }

/* ===== V5.90 : Accueil, chronomètre compact (2 lignes d'une ligne chacune) ===== */
html[data-view="home"] .home-chrono .hc-text { display: block; line-height: 1.2; }
html[data-view="home"] .home-chrono .hc-text b { display: inline; font-size: 15px; }
html[data-view="home"] .home-chrono .hc-title-sm { display: inline; font-size: 10.5px; color: var(--muted); font-weight: 500; }
html[data-view="home"] .home-chrono .hc-line .hc-sm { display: none !important; }
html[data-view="home"] .home-chrono .hc-txt .hc-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; font-size: 13.5px !important; }
html[data-view="home"] .home-chrono .hc-txt { overflow: hidden; }
html[data-view="home"] .home-chrono .hc-line { padding-top: 4px; align-items: center !important; }
html[data-view="home"] .home-chrono-row .btn { min-height: 30px !important; }
/* Accordeur : la rangée 440 / 442 / 415… reste toujours visible */
.view.tuner .pg-open, .view.tuner .hw-open { height: 50px !important; min-height: 50px !important; max-height: 50px; overflow: hidden; line-height: 1.15 !important; display: flex !important; align-items: center; justify-content: center; text-align: center; }
@media (max-height: 650px) {
  .view.tuner .sec-a4.a4-open #a4-quick { display: flex !important; }
  .view.tuner .sec-a4 .a4-toggle { cursor: pointer; }
  .view.tuner .sec-a4 .a4-toggle::after { content: " ▾"; color: var(--accent); }
  .view.tuner .sec-a4.a4-open .a4-toggle::after { content: " ▴"; }
}
html[data-view="home"] .home-chrono .hc-line { padding-top: 3px !important; }
html[data-view="home"] .home-chrono .hc-text b { font-size: 14.5px; }
/* V5.91 : jour travaillé = smiley */
.home-dots .hd.on i { background: none !important; border: 0 !important; box-shadow: none !important; }
.home-dots .hd.on i svg { width: 100%; height: 100%; display: block; }
.home-dots .hd.on.today i svg circle:first-child { stroke: var(--accent); stroke-width: 1.2; }

/* ===== V5.93 : « Grand piano » sur ordinateur / tablette = disposition « téléphone tourné » (règles paysage reprises) ===== */
html.big-piano[data-view="sounds"] .topbar, html.big-piano[data-view="sounds"] .tabbar { display: none; }
html.big-piano[data-view="sounds"] main { padding-top: 6px; padding-bottom: max(8px, env(safe-area-inset-bottom)); padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
html.big-piano[data-view="sounds"] .keyboard { height: max(110px, calc(100dvh - 185px)); }
html.big-piano[data-view="sounds"] #view-sounds > * { order: 5; }
html.big-piano[data-view="sounds"] #view-sounds > .now { order: 1; }
html.big-piano[data-view="sounds"] #view-sounds > .kbd-head { order: 2; }
html.big-piano[data-view="sounds"] #view-sounds > .keyboard { order: 3; }
html.big-piano[data-view="sounds"] #view-sounds > .panel { order: 4; display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 6px 12px; }
html.big-piano[data-view="sounds"] #view-sounds > .panel > div:not(.switch-row) { flex: 1; display: flex; align-items: center; gap: 10px; }
html.big-piano[data-view="sounds"] #view-sounds > .panel > div:not(.switch-row) input { flex: 1; }
html.big-piano[data-view="sounds"] #view-sounds > .panel .switch-row { flex: none; gap: 10px; }
html.big-piano[data-view="sounds"] #view-sounds > .panel .switch-row .hint, html.big-piano[data-view="sounds"] #view-sounds > .panel .switch-row br { display: none; }
html.big-piano[data-view="sounds"] #view-sounds > .panel .btn { flex: none; min-height: 40px; }
html.big-piano[data-view="sounds"] .s-freq { min-height: 0; }
html.big-piano[data-view="sounds"] .kbd-mid { flex-direction: row; align-items: center; gap: 12px; }
html.big-piano[data-view="sounds"] .kbd-mid span { flex: none; min-width: 110px; }
html.big-piano[data-view="sounds"] .kbd-strip { flex: 1; }
html.big-piano[data-view="sounds"] .kbd-head .icon-btn { width: 42px; height: 42px; }
html.big-piano[data-view="sounds"] .kbd-strip { height: 26px; }
html.big-piano[data-view="sounds"] .s-hold-hint { display: none; }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-hold > .s-hold-row { flex: 1; }
html.big-piano[data-view="sounds"] #view-sounds .s-sub, html.big-piano[data-view="sounds"] #view-sounds .s-intro { display: none; }
html.big-piano[data-view="sounds"] #view-sounds > .s-now { order: 1; }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-ctl { order: 4; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 5px 10px; }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row { display: flex; flex: none; gap: 6px; }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row:nth-child(2) { flex: 1; }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row:nth-child(2) .s-line { flex: 1; }
html.big-piano[data-view="sounds"] #view-sounds .s-lab { display: none; }
html.big-piano[data-view="sounds"] #view-sounds .s-ctl .seg.small button, html.big-piano[data-view="sounds"] #view-sounds .s-ctl .inst-s .btn { min-height: 30px; }
html.big-piano[data-view="sounds"] main { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
html.big-piano[data-view="sounds"] .keyboard { height: max(110px, calc(100dvh - 195px)); }
html.big-piano[data-view="sounds"] #view-sounds .s-top { display: none; }
html.big-piano[data-view="sounds"] #view-sounds .keyboard { height: max(110px, calc(100dvh - 160px)); }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row:nth-child(2) { flex: none; }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row:nth-child(3) { flex: 1; }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row:nth-child(3) .s-line { flex: 1; }
html.big-piano[data-view="sounds"] #view-sounds .s-ctl .s-mode { width: auto; }
html.big-piano[data-view="sounds"] #view-sounds > .s-now { margin-bottom: -4px; }
html.big-piano[data-view="sounds"] #view-sounds .s-play .s-note { font-size: 17px; }
html.big-piano[data-view="sounds"] #view-sounds .keyboard { height: max(100px, calc(100dvh - 190px)); }
html.big-piano[data-view="sounds"] #view-sounds { gap: 6px; padding-bottom: 4px; }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row { flex: none !important; }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row-vol { flex: 1 !important; }
html.big-piano[data-view="sounds"] #view-sounds > .panel.s-ctl > .s-row-vol .s-line { flex: 1; }
html.big-piano[data-view="sounds"] #view-sounds .s-ctl .s-solf { flex-direction: row; gap: 4px; white-space: nowrap !important; }
html.big-piano[data-view="sounds"] #view-sounds .s-ctl .inst-s .btn { min-height: 32px; }
html.big-piano[data-view="sounds"] #view-sounds > .s-head { order: 1; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "how ctx play"; margin: 0; }
html.big-piano[data-view="sounds"] #view-sounds .s-head .s-sub { display: none; }
html.big-piano[data-view="sounds"] #view-sounds .s-head .s-howto { min-height: 28px !important; font-size: 12px; }
html.big-piano[data-view="sounds"] #view-sounds .s-ctl .inst-s { display: flex; gap: 6px; }
html.big-piano[data-view="sounds"] #view-sounds .s-ctl .inst-s .btn { flex: none; }
html.big-piano[data-view="sounds"] #view-sounds .s-ctl .s-solf { flex-direction: column !important; gap: 0; }
html.big-piano[data-view="sounds"] #view-sounds .s-ctl .inst-s .btn:not(.s-solf) { max-width: 150px; font-size: 12px; }
html.big-piano[data-view="sounds"] #view-sounds .s-ctl .inst-s .btn { min-height: 38px; }
html.big-piano[data-view="sounds"] #view-sounds > .s-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "how ctx play"; }
html.big-piano[data-view="sounds"] #view-sounds .s-head .s-play { justify-self: end; }
html.big-piano[data-view="voice"] { --vxph: clamp(130px, 46dvh, 300px); }
html.big-piano[data-view="voice"] .topbar, html.big-piano[data-view="voice"] .tabbar { display: none; }
html.big-piano[data-view="voice"] .app { max-width: none; }
html.big-piano[data-view="voice"] main { padding: 8px 12px calc(var(--vxph) + 14px) max(14px, env(safe-area-inset-left)); }
html.big-piano[data-view="voice"] #view-voice { width: calc(50vw - 26px - env(safe-area-inset-left, 0px)); gap: 12px; }
html.big-piano[data-view="voice"] .vx-player {
    position: fixed; z-index: 6; top: 8px; left: 50vw; right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--vxph) + 8px); overflow-y: auto; padding: 10px 12px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: center;
  }
html.big-piano[data-view="voice"] .vx-info { display: flex; flex-direction: column; gap: 5px; }
html.big-piano[data-view="voice"] .vx-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html.big-piano[data-view="voice"] .vx-ctl > * { grid-column: 1 / -1; order: 6; }
html.big-piano[data-view="voice"] .vx-ctl > .vx-row3 { display: contents; }
html.big-piano[data-view="voice"] #vx-go-down, html.big-piano[data-view="voice"] #vx-replay, html.big-piano[data-view="voice"] #vx-go-up, html.big-piano[data-view="voice"] #vx-stop { grid-column: auto; }
html.big-piano[data-view="voice"] #vx-go-down { order: 1; }
html.big-piano[data-view="voice"] #vx-go-up { order: 2; }
html.big-piano[data-view="voice"] #vx-replay { order: 3; }
html.big-piano[data-view="voice"] #vx-stop { order: 4; }
html.big-piano[data-view="voice"] .vx-status { font-size: 13px; flex-direction: column; gap: 0; text-align: center; }
html.big-piano[data-view="voice"] .vx-big { font-size: 38px; }
html.big-piano[data-view="voice"] .vx-span { font-size: 12px; margin-top: 0; }
html.big-piano[data-view="voice"] .vx-phase { font-size: 14px; }
html.big-piano[data-view="voice"] .vx-ctl .btn { min-height: 40px; padding-block: 4px; }
html.big-piano[data-view="voice"] .vx-ctl .btn { min-width: 0; padding-inline: 4px; font-size: 14px; }
html.big-piano[data-view="voice"] .vx-limit { font-size: 13px; }
html.big-piano[data-view="voice"] .vx-piano {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; height: var(--vxph); box-sizing: border-box;
    padding: 4px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
html.big-piano[data-view="voice"] .vx-legend { margin-bottom: 3px; font-size: 11px; }
html.big-piano[data-view="voice"] .vx-kbd, html.big-piano[data-view="voice"] .vx-k.w { height: calc(var(--vxph) - 34px); }
html.big-piano[data-view="voice"] .vx-k.b { height: calc((var(--vxph) - 34px) * .6); }
html.big-piano[data-view="voice"] #vx-voices .chip, html.big-piano[data-view="voice"] #vx-exs .chip { min-height: 30px; font-size: 13px; padding: 2px 9px; }
html.big-piano[data-view="voice"] .vx-player { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
html.big-piano[data-view="voice"] .vx-info { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 5px; align-items: center; }
html.big-piano[data-view="voice"] .vx-big { grid-row: 1 / span 2; font-size: 36px; }
html.big-piano[data-view="voice"] .vx-status { grid-column: 2; text-align: left; align-self: end; }
html.big-piano[data-view="voice"] .vx-span { grid-column: 2; text-align: left; align-self: start; }
html.big-piano[data-view="voice"] .vx-bar, html.big-piano[data-view="voice"] .vx-steps, html.big-piano[data-view="voice"] .vx-phase { grid-column: 1 / -1; }
html.big-piano[data-view="voice"] .vx-steps { flex-direction: row; justify-content: center; gap: 8px; }
html.big-piano[data-view="voice"] .vx-steps li { padding: 0; border: 0; background: none; }
html.big-piano[data-view="voice"] .vx-steps li span { display: none; }
html.big-piano[data-view="voice"] .vx-steps li b { width: 24px; height: 24px; }
html.big-piano[data-view="voice"] .vx-steps:not([hidden]) ~ .vx-phase { display: block; }
html.big-piano[data-view="voice"] .vx-phase { font-size: 13px; line-height: 1.25; }
html.big-piano[data-view="voice"] #vx-dir { display: none; }
html.big-piano[data-view="voice"] .vx-ctl .vx-go { flex-direction: column; gap: 0; padding: 3px 2px; min-height: 52px; }
html.big-piano[data-view="voice"] .vx-arr { font-size: 16px; line-height: 1; }
html.big-piano[data-view="voice"] .vx-gl { align-items: center; text-align: center; }
html.big-piano[data-view="voice"] .vx-gl small { font-size: 11px; }
html.big-piano[data-view="voice"] .vx-limit { display: none; }
html.big-piano[data-view="voice"] #vx-voices .chip { min-height: 24px; font-size: 12px; padding: 0 7px; }
html.big-piano[data-view="voice"] #vx-exs .chip { min-height: 28px; font-size: 13px; padding: 1px 9px; }
html.big-piano[data-view="voice"] #view-voice > * { order: 3; }
html.big-piano[data-view="voice"] #view-voice > .vx-top { order: 0; }
html.big-piano[data-view="voice"] #view-voice #vx-ex-sec { order: 1; gap: 5px; }
html.big-piano[data-view="voice"] #view-voice #vx-voice-sec { order: 2; }
html.big-piano[data-view="voice"] #view-voice { gap: 10px; }
html.big-piano[data-view="voice"] .vx-hint { font-size: 13px; }
html.big-piano[data-view="voice"] .vx-k.w.mid::after { bottom: 18px; width: 8px; height: 8px; margin-left: -4px; }
html.big-piano[data-view="voice"] #vx-voices .chip { min-height: 24px; font-size: 12px; padding: 0 5px; }
html.big-piano[data-view="voice"] .vx-idle .vx-status { grid-column: 1 / -1; text-align: center; }
html.big-piano[data-view="voice"] #view-voice > .vx-parts { order: 0; }
html.big-piano[data-view="voice"] #view-voice #ej-sec { order: 1; gap: 6px; }
html.big-piano[data-view="voice"] .vx-part { padding: 6px 4px; font-size: 13px; }
html.big-piano[data-view="voice"] .vx-part-h { font-size: 17px; }
html.big-piano[data-view="voice"] .ej-card {
    position: fixed; z-index: 6; top: 8px; left: 50vw; right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--vxph) + 8px); overflow-y: auto; padding: 8px 12px; gap: 6px; justify-content: center;
  }
html.big-piano[data-view="voice"] .ej-instr { font-size: 16px; }
html.big-piano[data-view="voice"] .ej-z { min-height: 34px; font-size: 13px; }
html.big-piano[data-view="voice"] .ej-ok { width: 40px; min-height: 40px; }
html.big-piano[data-view="voice"] .ej-dot { width: 28px; height: 28px; }
html.big-piano[data-view="voice"] .ej-msg { font-size: 14px; }
html.big-piano[data-view="voice"] .ej-msg.good { font-size: 16px; }
html.big-piano[data-view="voice"] .ej-ctl { grid-template-columns: repeat(4, 1fr); gap: 5px; }
html.big-piano[data-view="voice"] .ej-ctl .btn { min-height: 38px; font-size: 12px; padding: 2px 3px; line-height: 1.1; }
html.big-piano[data-view="voice"] .vx-part-h, html.big-piano[data-view="voice"] #view-voice .vx-ex-note, html.big-piano[data-view="voice"] .ej-lead { display: none; }
html.big-piano[data-view="voice"] .ej-n { font-size: 13px; padding: 1px 7px; }
html.big-piano[data-view="voice"] .ej-staff .notation { width: 130px; }
html.big-piano[data-view="voice"] .ej-staff-lbl { width: 130px; padding: 0 14px 0 36px; font-size: 13px; }
html.big-piano[data-view="voice"] .ej-card { justify-content: flex-start; }
html.big-piano[data-view="voice"] .ej-card > :first-child { margin-top: auto; }
html.big-piano[data-view="voice"] .ej-card > :last-child { margin-bottom: auto; }
html.big-piano[data-view="voice"] .ej-score { position: absolute; top: 4px; right: 10px; font-size: 11px; }
html.big-piano[data-view="voice"] .ej-card { position: fixed; }
html.big-piano[data-view="voice"] .ej-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, .55fr); grid-auto-flow: row dense; column-gap: 10px; row-gap: 4px; align-content: center; padding: 6px 10px; }
html.big-piano[data-view="voice"] .ej-card > * { grid-column: 1; margin: 0 !important; }
html.big-piano[data-view="voice"] .ej-card > #ej-ctl, html.big-piano[data-view="voice"] .ej-card > #ej-start { grid-column: 2; grid-row: 1 / span 7; align-self: center; }
html.big-piano[data-view="voice"] .ej-score { position: static; text-align: left; font-size: 11px; }
html.big-piano[data-view="voice"] .ej-ctl { grid-template-columns: 1fr; gap: 4px; }
html.big-piano[data-view="voice"] .ej-ctl .btn { min-height: 30px; font-size: 12px; padding: 1px 4px; }
html.big-piano[data-view="voice"] .ej-instr { font-size: 14px; }
html.big-piano[data-view="voice"] .ej-meter { gap: 5px; }
html.big-piano[data-view="voice"] .ej-z { min-height: 28px; font-size: 12px; }
html.big-piano[data-view="voice"] .ej-ok { width: 32px; min-height: 32px; }
html.big-piano[data-view="voice"] .ej-dot { width: 22px; height: 22px; }
html.big-piano[data-view="voice"] .ej-msg { font-size: 12px; min-height: 0; }
html.big-piano[data-view="voice"] .ej-msg.good { font-size: 14px; }
html.big-piano[data-view="voice"] .ej-staff .notation { width: 120px; }
html.big-piano[data-view="voice"] .ej-staff-lbl { width: 120px; padding: 0 12px 0 34px; font-size: 12px; }
html.big-piano[data-view="voice"] .ej-card.ej-idle { grid-template-columns: minmax(0, 1fr) minmax(120px, .7fr); }
html.big-piano[data-view="voice"] .ej-card { align-content: start; align-content: safe center; }
html.big-piano[data-view="voice"] .ej-instr { font-size: 13px; line-height: 1.25; }
html.big-piano[data-view="voice"] .ej-z { white-space: nowrap; font-size: 11px; padding: 0 4px; }
html.big-piano[data-view="voice"] .ej-staff .notation { width: 104px; }
html.big-piano[data-view="voice"] .ej-staff-lbl { width: 104px; padding: 0 10px 0 30px; font-size: 11px; }
html.big-piano[data-view="voice"] #ej-start { font-size: 15px; min-height: 40px; padding: 4px 8px; }
html.big-piano[data-view="voice"] .ej-n { font-size: 12px; padding: 0 6px; }
html.big-piano[data-view="voice"] .ej-chain { gap: 2px 4px; }
html.big-piano[data-view="voice"] .ej-card:not([data-end]) .ej-instr { font-size: 13px; line-height: 1.25; }
html.big-piano[data-view="voice"] .ej-card.ej-idle .ej-instr { font-size: 12.5px; }
/* écran haut (ordinateur) : hauteurs plafonnées */
html.big-piano[data-view="voice"] { --vxph: clamp(160px, 42dvh, 340px); }
html.big-piano[data-view="sounds"] .keyboard { height: clamp(140px, calc(100dvh - 240px), 470px) !important; }
/* bouton Grand piano / Quitter */
.bigpiano-btn { display: none; position: fixed; z-index: 70; top: 14px; right: 74px; font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent); cursor: pointer; }
@media (min-width: 700px) and (min-height: 601px), (min-width: 700px) and (orientation: portrait) {
  html[data-view="sounds"] .bigpiano-btn, html[data-view="voice"] .bigpiano-btn { display: block; }
}
html.big-piano .bigpiano-btn { top: 8px; right: 12px; background: var(--accent); color: var(--accent-ink); }
html.big-piano[data-view="voice"] .vx-player, html.big-piano[data-view="voice"] .ej-card { top: 48px !important; }
html.big-piano[data-view="voice"] main, html.big-piano[data-view="sounds"] main { padding-top: 46px !important; }
/* V5.94 : modalité chanter juste — pages liées à l'instrument cachées */
.hide-instr .tab[data-view="tuner"], .hide-instr .tab[data-view="instruments"], .hide-instr .home-choices > [data-go="instruments"], .hide-instr .home-choices > [data-go="tuner"] { display: none !important; }
/* V5.95 : rappel « tournez le natel » (natel tenu droit seulement) */
.rot-hint { display: none; font-size: 12px; color: var(--accent); font-weight: 600; }
.rot-hint-s { margin: 0; text-align: center; }
@media (orientation: portrait) and (max-width: 699px) { .rot-hint { display: inline-flex; gap: 4px; } .rot-hint-s { display: block; } .vx-legend .rot-hint { flex-basis: 100%; justify-content: center; } }
@media (orientation: portrait) and (max-width: 699px) {
  #view-sounds .s-head .rot-hint-s { grid-area: play; justify-self: center; }
  #view-sounds .s-head:has(#s-note:not(:empty)) .rot-hint-s { display: none; }
  #view-sounds .s-head:not(:has(#s-note:not(:empty))) .s-play { display: none; }
}
@media (orientation: portrait) and (max-width: 699px) { #view-sounds .s-head, html[data-view="sounds"] #view-sounds > .s-head { row-gap: 3px !important; margin-bottom: 0 !important; } }
/* V5.96 : modalité pro sans Chanter juste ; accueil réparti sur toute la hauteur en modalité chanter juste */
.hide-voice .tab[data-view="voice"] { display: none !important; }
html[data-view="home"] #view-home { gap: 8px !important; }
html[data-view="home"] #view-home > .home-choices { margin-top: calc(var(--hgap, 8px) - 8px); }
html[data-view="home"] #view-home > .home-chrono, html[data-view="home"] #view-home > .home-weekbox, html[data-view="home"] #view-home > .home-comp { margin-top: calc(var(--hgap, 8px) - 8px) !important; }
/* V5.97 : trois cases blanches sur une ligne (Reprendre · Page d'accueil · Modalité) */
html[data-view="home"] .home-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: 5px !important; }
html[data-view="home"] .home-split .home-choice { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; padding: 6px 8px !important; }
html[data-view="home"] .home-split .home-choice svg { width: 18px; height: 18px; }
html[data-view="home"] .home-split .home-choice b { font-size: 12.5px !important; line-height: 1.15; }
html[data-view="home"] .home-split .home-choice small { font-size: 11px !important; }
html[data-view="home"] #home-mode-btn { background: #fff !important; border-color: #e1e4e8 !important; }

/* ===== V5.98 ===== */
html[data-view="home"] #main, html[data-view="home"] body, html[data-view="home"] main { background: var(--bg) !important; }
#stop-all { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
.sw-how { background: #f3ebdd !important; border: 1px solid #e3d6bf; }
.set-mods { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--ink); }

/* ===== V6.02 ===== */
.sw-alt { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.sw-alt .hint { font-size: 13px; margin: 0; }
.sw-alt-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sw-alt-row .btn { flex: 1 1 0; min-height: 40px; padding: 6px 8px; font-size: 14px; }
.hw-adv { margin: 6px 0 4px; padding: 8px 10px; border-radius: 10px; background: #f3ebdd; border: 1px solid #e3d6bf; }
.hw-adv .hw-adv-btn { min-height: 30px; font-size: 12.5px; padding: 0 10px; }
.hw-adv .hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; }
.ts-h { font-size: 14px; margin: 12px 0 4px; color: var(--accent); }
.ts-list li { font-size: 13px; line-height: 1.4; }
.ts-list a { color: var(--accent); }
.ts-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#view-temps .ts-open { margin-top: 10px; align-self: flex-start; }
/* V6.02 Chanter juste : mise en page resserrée */
.vx-tq-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.vx-tq-row .chip { min-height: 28px; padding: 1px 9px; font-size: 13px; }
.vx-tq-row .vx-tq-go { min-height: 28px; padding: 1px 12px; font-size: 13px; border-radius: 999px; margin-left: auto; }
@media (max-width: 370px) { .vx-tq-row .chip, .vx-tq-row .vx-tq-go { font-size: 12px; padding: 1px 6px; } }
.vx-tested .vx-tq-open { min-height: 26px; padding: 1px 9px; font-size: 12px; font-weight: 600; opacity: .85; }
.vx-tested .vx-tq-open::before { content: '✓ '; color: var(--ok, #2e7d32); }
.vx-tested .vx-voice-note { display: none; }
#view-voice .vx-parts { margin-top: 14px; border-radius: 14px 14px 0 0; padding-bottom: 0; }
#view-voice .vx-part[aria-selected="true"] { border-radius: 10px 10px 0 0; background: var(--accent-soft); box-shadow: inset 0 1.5px 0 var(--accent), inset 1.5px 0 0 var(--accent), inset -1.5px 0 0 var(--accent); }
#view-voice .vx-part-h { margin: 0 0 4px; padding: 5px 10px 6px; font-size: 16px; color: var(--accent); background: var(--accent-soft); border: 1.5px solid var(--accent); border-top: 0; border-radius: 0 0 12px 12px; }
.vx-link.vx-how-link { font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.vx-setrow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); align-items: center; gap: 6px; margin: 2px 0; }
.vx-setrow .hint { font-size: 12.5px; line-height: 1.2; margin: 0; }
.vx-setrow .vx-seg .chip { min-height: 28px; padding: 1px 6px; font-size: 12.5px; }
.vx-iv-open { margin: 2px 0 6px; }
/* V6.02 : Les intervalles */
#view-rhythm .rh-top { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 6px; }
#view-rhythm .rh-ivs { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; width: 100%; height: 100%; min-height: 50px !important; margin: 0; padding: 6px 10px; border-radius: 14px; text-align: left; line-height: 1.2; white-space: normal; color: var(--ink); background: color-mix(in srgb, #d08a2c 16%, var(--surface)); border-color: color-mix(in srgb, #d08a2c 45%, var(--line)); }
#view-rhythm .rh-ivs b { font-size: 13.5px; }
#view-rhythm .rh-ivs span { font-size: 11.5px; font-weight: 400; }
@media (max-width: 400px) { #view-rhythm .rh-values, #view-rhythm .rh-keys, #view-rhythm .rh-ivs { padding: 5px 7px; } #view-rhythm .rh-values b, #view-rhythm .rh-keys b, #view-rhythm .rh-ivs b { font-size: 12.5px; } #view-rhythm .rh-values span, #view-rhythm .rh-keys span, #view-rhythm .rh-ivs span { font-size: 10.5px; } }
.iv-pi { margin: 6px 0 2px; }
.iv-svg { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
.iv-w { fill: #fff; stroke: #333; stroke-width: 1; }
.iv-b { fill: #1b1f27; stroke: #1b1f27; }
.iv-w.mid { fill: #d6e4f5; } .iv-b.mid { fill: #6f8fbf; }
.iv-w.on { fill: #1f5fa8; } .iv-b.on { fill: #1f5fa8; stroke: #0d3a70; }
.iv-nm { font-size: 11px; text-anchor: middle; fill: #555; }
.iv-w.on + .iv-nm { fill: #fff; }
.iv-num { font-size: 12px; font-weight: 700; text-anchor: middle; fill: #1f5fa8; }
.iv-num.blk { fill: #fff; font-size: 11px; }
.iv-num.end { fill: #fff; }
.iv-tap { font-size: 12.5px; margin: 2px 0 6px; }
.iv-table td, .iv-table th { font-size: 12.5px; padding: 4px 5px; }
.iv-c { text-align: center; }
.iv-row { cursor: pointer; }
.iv-row.on td { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-weight: 700; }
/* V6.02 : chrono en marche → orange bien visible dans le menu ; en pause → ocre clair */
.nav-ses.run, html .nav-row .nav-ses.run { background: #f2a03d !important; color: #fff !important; }
.nav-ses.run svg { opacity: 1; }
.nav-ses.paused, html .nav-row .nav-ses.paused { background: #fbe3c2 !important; color: #8a5a12 !important; }
.ng-duo svg.head-ico, .ng-duo svg.head-ico * { stroke: #9a7148 !important; }
/* V6.02 Mes instruments : Fonctionnement à gauche, Assistant en petite pastille rose à droite */
.inst-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; }
.inst-winds.inst-winds-pill { display: inline-flex; width: auto; margin: 0; min-height: 32px; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; }
@media (max-width: 370px) { .inst-winds.inst-winds-pill { font-size: 12px; padding: 3px 9px; white-space: normal; } }
.inst-fl { white-space: normal !important; overflow: visible !important; line-height: 1.15; }
#view-voice .vx-panel > .vx-part-h.vx-warm-only, #view-voice #ej-sec { margin-top: -12px; }
#view-voice > .vx-parts { padding-bottom: 0; }
#view-voice section.vx-col:has(#vx-tempo) { gap: 4px !important; }
#view-voice section.vx-col:has(#vx-tempo) .vx-h { margin: 0 0 2px; font-size: 12px; }
#vx-tempo-lbl, #vx-tuning { font-size: 12px !important; margin: 0 !important; line-height: 1.3; }
#vx-tempo { margin: 0 0 2px; height: 22px; }
.vx-setrow { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.7fr); }
.vx-setrow .hint { font-size: 12px; }
.vx-setrow .vx-seg .chip { min-height: 26px; font-size: 12px; line-height: 1.1; padding: 1px 4px; white-space: nowrap; }
@media (max-width: 370px) { .vx-setrow .vx-seg .chip { white-space: normal; font-size: 11.5px; } }
.inst-winds.inst-winds-pill { white-space: normal !important; max-width: 60%; text-align: center; justify-content: center; font-size: 12.5px; line-height: 1.15; padding: 4px 12px; }
.ts-sheet .mg-title { font-size: 20px; padding: 0 30px; }
@media (orientation: landscape) and (max-height: 500px) { #view-voice #ej-sec, #view-voice .vx-panel > .vx-part-h.vx-warm-only { margin-top: 0; } }
html.big-piano #view-voice #ej-sec, html.big-piano #view-voice .vx-panel > .vx-part-h.vx-warm-only { margin-top: 0; }
/* V6.03 : un seul titre sous les onglets (celui de l'onglet choisi), sans sous-titre « Exercices » */
#view-voice .vx-panel > .vx-part-h.vx-warm-only + #vx-ex-sec, #view-voice #ej-sec > .vx-part-h + .vx-ex-note { margin-top: 4px; }
#view-voice .vx-part-h { font-size: 18px; padding: 8px 12px 9px; }
.tester-in { display: block; margin-top: 6px; width: 160px; padding: 4px 8px; font-size: 14px; }
/* V6.04 Chanter juste (natel vertical) : petit piano fixe beaucoup plus bas, légende sur une ligne, sans barre de progression */
.vx-bar { display: none !important; }
@media (orientation: portrait) {
  html[data-view="voice"] .vx-piano { padding: 3px 4px 4px; }
  html[data-view="voice"] .vx-legend { flex-wrap: nowrap; justify-content: center; gap: 0 8px; font-size: 10.5px; line-height: 1.2; margin-bottom: 2px; white-space: nowrap; overflow: hidden; }
  html[data-view="voice"] .vx-legend .vx-sw { width: 9px; height: 9px; }
  html[data-view="voice"] .vx-legend .rot-hint { flex-basis: auto !important; font-size: 10.5px; }
  html[data-view="voice"] .vx-legend .rot-hint { display: none !important; }
  html[data-view="voice"] .vx-kbd, html[data-view="voice"] .vx-k.w { height: 82px !important; }
  html[data-view="voice"] .vx-k.b { height: 50px !important; }
  html[data-view="voice"] .vx-k span { font-size: 9px; bottom: 2px; }
  html[data-view="voice"] .vx-k.w.mid::after { bottom: 15px; width: 7px; height: 7px; margin-left: -3.5px; }
}
/* V6.07 : volume du piano dans Chanter juste */
.vx-vol { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.vx-vol label { white-space: nowrap; }
.vx-vol input[type="range"] { flex: 1; min-width: 0; height: 22px; }
/* V6.08 Chanter juste : onglets en pastilles arrondies (comme Basse, Baryton…), titre séparé en dessous */
#view-voice > .vx-parts { display: flex !important; gap: 8px; background: none !important; padding: 0 !important; margin-top: 16px; border-radius: 0 !important; }
#view-voice .vx-part { flex: 1 1 0; border-radius: 999px !important; border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--ink) !important; box-shadow: none !important; padding: 7px 10px !important; font-size: 13.5px !important; font-weight: 600; min-height: 38px; }
#view-voice .vx-part[aria-selected="true"] { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
#view-voice .vx-panel > .vx-part-h.vx-warm-only, #view-voice #ej-sec { margin-top: 6px !important; }
#view-voice .vx-part-h { margin: 6px 0 2px !important; padding: 0 0 4px !important; background: none !important; border: 0 !important; border-bottom: 2px solid var(--accent) !important; border-radius: 0 !important; color: var(--ink) !important; font-size: 19px !important; }
/* V6.08 Réglages */
.set-mods-lab { font-weight: 600; line-height: 1.35; }
.set-mods-lab .set-mods-p { font-weight: 400; font-size: inherit; color: inherit; }
.sc-profile .set-mods { display: none; }
#view-settings .ts-row { display: block !important; padding-top: 10px !important; padding-bottom: 10px !important; }
#view-settings .ts-row .ts-head { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
#view-settings .ts-row .ts-open { min-height: 26px !important; padding: 1px 12px !important; font-size: 12.5px !important; }
#view-settings .ts-row .hint { display: block; margin: 2px 0 0; line-height: 1.3; }
#view-settings .switch-row label .hint, #view-settings .switch-row label b { line-height: 1.3; }
#view-settings .switch-row label br { line-height: 1.3; }
#view-settings .switch-row > label:first-child { line-height: 1.3; }
#view-settings .switch-row > label:first-child { line-height: 1.4 !important; }
#view-settings .switch-row > label:first-child .hint { display: inline-block; line-height: 1.4 !important; margin-top: 2px; }
/* V6.09 Ornements : tables originales */
.orn-h { margin: 4px 0 2px; font-size: 18px; }
.orn-intro p, #orn-card .h-card p { font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
.orn-intro a, #orn-card a { color: var(--accent); }
#orn-list .h-row small { font-weight: 400; color: var(--muted); }
.orn-title { margin: -4px 0 8px; color: var(--muted); }
.orn-table { margin: 10px 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.orn-table img { display: block; width: 100%; height: auto; border-radius: 6px; }
.orn-table figcaption { font-size: 12.5px; color: var(--muted); margin: 6px 4px 2px; }
/* V6.11 Bourdons & Sons : boutons Mode de même largeur, le choix s'affiche à droite */
.s-ctl .inst-s { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.s-ctl .inst-s .btn { white-space: normal !important; line-height: 1.15; padding: 3px 8px !important; font-size: 12.5px; }
.s-ctl #s-temps .s-cur { font-weight: 700; }
#view-sounds .s-ctx { font-size: 14px !important; line-height: 1.3; }
#view-sounds .s-play { margin-top: 2px; }
.s-ctl .inst-s .btn span, .s-ctl .inst-s .btn small { white-space: normal !important; text-align: center; overflow-wrap: anywhere; }
.s-ctl .s-solf .s-back { font-size: 11.5px; line-height: 1.15; display: block; } .s-ctl .s-solf .s-back small { font-size: 10px; }
#view-sounds .s-ctl .inst-s .btn { min-height: 34px !important; }
/* V6.12 : cadres du Mode de taille fixe, le texte s'adapte (tailles relatives) */
#view-sounds .s-ctl .inst-s .btn { height: 42px !important; min-height: 42px !important; max-height: 42px !important; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#view-sounds .s-ctl .inst-s .btn small { font-size: 0.82em !important; }
#view-sounds .s-ctl .s-solf .s-back { font-size: 0.95em !important; }
#view-sounds .s-ctl .s-solf .s-back small { font-size: 0.85em !important; }
/* V6.13 : valeurs pointées */
.th-dots { display: flex; flex-direction: column; }
.th-dot-row { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); }
.th-dot-row:first-child { border-top: 0; }
.th-dot-row.grp { border-top: 1.5px solid var(--ink); padding-top: 10px; }
.th-dot-svg { width: 112px; height: auto; display: block; }
.th-dot-row b { font-size: 13.5px; }
.th-dot-row span { font-size: 12.5px; color: var(--muted); }
.th-eq { font-size: 14px; font-weight: 700; fill: var(--ink); }
.th-foot { font-size: 13px; }
.th-dot-row > div { line-height: 1.35; }
/* V6.20 : trois portes */
.hide-myinst .tab[data-view="instruments"], .hide-myinst .home-choices > [data-go="instruments"] { display: none !important; }
.hide-hist .tab[data-view="history"] { display: none !important; }
.door-student .home-choices > [data-go="instruments"], .door-student .home-choices > [data-go="tuner"],
.door-sing .home-choices > [data-go="instruments"], .door-sing .home-choices > [data-go="tuner"] { display: none !important; }
.home-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 4px; }
.home-tile { display: flex; align-items: center; gap: 8px; text-align: left; min-height: 48px; padding: 6px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--ink); font: inherit; cursor: pointer; }
.home-tile .home-emo { font-size: 22px; flex: none; }
.home-tile b { display: block; font-size: 13.5px; line-height: 1.2; }
.home-tile small { display: block; font-size: 11px; color: var(--muted); line-height: 1.2; }
.door-card { gap: 10px; }
.door-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); font: inherit; color: var(--ink); cursor: pointer; margin: 0 0 8px; }
.door-btn .home-emo { font-size: 30px; flex: none; }
.door-btn b { display: block; font-size: 17px; }
.door-btn small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.door-all { width: 100%; }
/* V6.20 Chanter juste : niveaux, parcours, affichage simple, bourdon */
.ej-path { margin: 2px 0 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.ej-grp { margin: 0 0 8px; }
.ej-grp-h { display: block; font-size: 13.5px; font-weight: 800; margin: 0 0 4px; color: var(--ink); }
.ej-grp .chips { gap: 5px; }
.ej-grp .chip { min-height: 34px; padding: 3px 11px; font-size: 13.5px; }
.ej-grp .chip small { font-size: 11px; margin-left: 2px; }
.ej-st { color: #d29a00; letter-spacing: -1px; }
.ej-lock { opacity: .55; }
.ej-recbtn:not([aria-pressed="true"]) { border-color: var(--accent); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent); }
.ej-disp { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
.ej-disp .chip { min-height: 30px; padding: 2px 12px; font-size: 13px; }
.ej-big { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0; }
.ej-big-note { font-size: 52px; font-weight: 800; line-height: 1; color: var(--accent); }
.ej-big-st { font-size: 22px; font-weight: 800; min-height: 30px; }
.ej-big-st[data-s="ok"] { color: var(--good, #2e7d32); }
.ej-big-st[data-s="lo"], .ej-big-st[data-s="hi"] { color: #b45309; }
.ej-simple .ej-meter { display: none !important; }
.ej-bigon .ej-msg { display: none; }
.vx-part-sub { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.vx-drone-open { width: 100%; margin: 2px 0 6px; justify-content: flex-start; text-align: left; background: color-mix(in srgb, #2f8a5b 12%, var(--surface)); border-color: color-mix(in srgb, #2f8a5b 40%, var(--line)); }
.vx-dr-notes { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.vx-dr-ctl { margin: 4px 0 8px; }
.vx-dr-ctl .btn { width: 100%; }
.vx-dr-list { padding-left: 20px; margin: 0 0 10px; }
.vx-dr-list li { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.vx-dr-scale { display: block; font-weight: 700; color: var(--accent); font-size: 13.5px; }
.vx-range-res { font-size: 34px !important; }
.vx-type-res { font-size: 13px; color: var(--muted); }
/* V6.20 : accueil des portes Élève / Je chante plus compact */
.door-student .home-split > #home-resume-card, .door-student .home-split > #home-start-btn,
.door-sing .home-split > #home-resume-card, .door-sing .home-split > #home-start-btn { display: none !important; }
.door-student .home-split, .door-sing .home-split { display: block !important; }
.door-student #home-mode-btn, .door-sing #home-mode-btn { width: 100%; min-height: 0 !important; padding: 6px 12px !important; flex-direction: row !important; align-items: center; gap: 8px; }
.door-student #home-mode-btn span, .door-sing #home-mode-btn span { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.door-student #home-mode-btn svg, .door-sing #home-mode-btn svg { width: 18px; height: 18px; flex: none; }
.home-tile { min-height: 42px; padding: 4px 8px; gap: 6px; }
.home-tile .home-emo { font-size: 19px; }
.home-tile b { font-size: 12.5px; }
.home-tile small { font-size: 10.5px; }
.door-student .home-hc .hc-sm, .door-sing .home-chrono .hc-sm { display: none; }
.door-student #home-mode-btn, .door-sing #home-mode-btn { display: flex !important; flex-direction: row !important; height: auto !important; min-height: 36px !important; }
.door-student #home-mode-btn > span, .door-sing #home-mode-btn > span { display: inline !important; }
.door-student #home-mode-btn b, .door-sing #home-mode-btn b, .door-student #home-mode-btn small, .door-sing #home-mode-btn small { display: inline !important; margin: 0 6px 0 0; }
.door-student .home-chrono .hc-sm, .door-sing .home-chrono .hc-sm { display: none !important; }
.vx-drone-sheet .mg-title { font-size: 20px; padding: 0 30px; }
.door-sing #home-comp { display: none !important; }

/* V6.21 — modale de bienvenue + carte Chanter juste plus compacte */
.door-sub { margin: -4px 0 8px; font-size: 14px; color: var(--muted); text-align: center; }
html[data-view="voice"] .ej-card:not([data-end]) .ej-instr { font-size: 14px !important; line-height: 1.2; }
html[data-view="voice"] .ej-big { margin: 2px 0; gap: 0; }
html[data-view="voice"] .ej-big-note { font-size: 32px; }
html[data-view="voice"] .ej-big-st { font-size: 15px; min-height: 20px; }
@media (orientation: portrait) {
  html[data-view="voice"] .ej-ctl { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
  html[data-view="voice"] .ej-ctl .btn { min-height: 32px !important; font-size: 11.5px !important; padding: 2px 3px !important; line-height: 1.1 !important; }
}

/* V6.26 — pastille du profil à côté du bouton Accueil (V6.27 : couleurs propres aux profils, absentes du reste de l’app : turquoise, graphite, fuchsia) */
.prof-badge { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 7px; border-radius: 999px; border: 0; color: #fff; font: 700 12.5px/1 var(--font, inherit); letter-spacing: .2px; box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: pointer; flex: none; }
.prof-badge[hidden] { display: none; }
.prof-badge .pb-emo { font-size: 15px; line-height: 1; }
.prof-badge[data-p="student"] { background: #08788b; }
.prof-badge[data-p="pro"] { background: #2f343c; }
.prof-badge[data-p="sing"] { background: #b0207f; }
@media (max-width: 360px) { .prof-badge .pb-txt { display: none; } .prof-badge { padding: 0 7px; } }

/* V6.27 — la fenêtre de bienvenue reprend les couleurs des pastilles de profil */
.door-btn[data-door="student"] { --pc: #08788b; }
.door-btn[data-door="pro"] { --pc: #2f343c; }
.door-btn[data-door="sing"] { --pc: #b0207f; }
.door-btn[data-door] { border: 2px solid var(--pc) !important; border-left-width: 8px !important; background: color-mix(in srgb, var(--pc) 7%, var(--surface)) !important; }
.door-btn[data-door] b { color: var(--pc); }
.door-btn[data-door] .home-emo { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: #fff; box-shadow: 0 0 0 3px var(--pc); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prof-badge[data-p="pro"] { background: #5a6370; }
  :root:not([data-theme="light"]) .door-btn[data-door="pro"] { --pc: #8d97a5; }
  :root:not([data-theme="light"]) .door-btn[data-door="student"] { --pc: #2bb3c8; }
  :root:not([data-theme="light"]) .door-btn[data-door="sing"] { --pc: #e05bb5; }
}
:root[data-theme="dark"] .prof-badge[data-p="pro"] { background: #5a6370; }
:root[data-theme="dark"] .door-btn[data-door="pro"] { --pc: #8d97a5; }
:root[data-theme="dark"] .door-btn[data-door="student"] { --pc: #2bb3c8; }
:root[data-theme="dark"] .door-btn[data-door="sing"] { --pc: #e05bb5; }
.prof-badge .pb-emo { width: 21px; height: 21px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
/* V6.29 — profil Élève : pas de « Programme » (choix du tempérament pour un concert) dans l’Accordeur */
.door-student .pg-col { display: none !important; }
.door-student .sec-temp .sel-row { display: block !important; }
.door-student .sec-temp .sel-row > div:first-child { width: 100% !important; max-width: none !important; }
.door-student .sec-temp .sel-row #temp-select { width: 100% !important; }

/* V6.30 — tests de lecture et de tonalités */
#view-rhythm .rh-drills { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 0 0 8px; }
#view-rhythm .rh-dr { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; width: 100%; min-height: 50px; margin: 0; padding: 6px 10px; text-align: left; line-height: 1.2; background: color-mix(in srgb, #c98a1c 14%, var(--surface)); border-color: color-mix(in srgb, #c98a1c 45%, var(--line)); }
#view-rhythm .rh-dr b { font-size: 13.5px; color: var(--ink); } #view-rhythm .rh-dr span { font-size: 11.5px; font-weight: 400; color: var(--ink); }
.dr-menu { display: flex; flex-direction: column; gap: 8px; }
.dr-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; min-height: 56px; }
.dr-pick b { font-size: 15px; } .dr-pick span { font-size: 12.5px; font-weight: 400; color: var(--muted); line-height: 1.3; }
.dr-head { display: flex; justify-content: space-between; margin: 0; font-size: 13px; color: var(--muted); } .dr-head b { color: var(--accent); }
.dr-fig { display: flex; justify-content: center; } .dr-staff { width: 100%; max-width: 330px; height: auto; }
.dr-staff .clef { fill: var(--ink); } .dr-staff .st { stroke: var(--ink); stroke-width: 1; } .dr-staff .nh.open { fill: var(--surface); stroke: var(--ink); stroke-width: 2.2; }
.dr-staff .dr-acc { font-size: 17px; fill: var(--ink); } .dr-staff .dr-lbl { font-size: 13px; font-weight: 700; fill: var(--accent); }
.dr-key { font-size: 26px; font-weight: 800; text-align: center; margin: 6px 0; color: var(--accent); }
.dr-ask { text-align: center; font-weight: 700; margin: 4px 0; }
.dr-opts { display: grid; gap: 6px; } .dr-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dr-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dr-arm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dr-opt { min-height: 44px; font-size: 15px; font-weight: 700; padding: 4px; }
.dr-arm .dr-opt { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px; } .dr-arm .dr-opt span { font-size: 13px; }
.dr-arm .dr-staff { max-width: 140px; }
.dr-opt.ok { background: color-mix(in srgb, var(--good) 22%, var(--surface)) !important; border-color: var(--good) !important; }
.dr-opt.ko { background: color-mix(in srgb, var(--bad) 18%, var(--surface)) !important; border-color: var(--bad) !important; }
.dr-fb { text-align: center; font-weight: 800; font-size: 16px; margin: 4px 0; } .dr-fb.ok { color: var(--good); } .dr-fb.ko { color: var(--bad); }
.dr-next { width: 100%; } .dr-back { width: 100%; background: none; border-color: transparent; color: var(--accent); }
.dr-end { text-align: center; } .dr-big { font-size: 44px; font-weight: 800; color: var(--accent); margin: 6px 0; } .dr-bravo { font-weight: 700; color: var(--good); }

/* ===== V6.34 : Solfège (menu), Théorie (thèmes + tests), fenêtres et tests Solfa ===== */
.sf-menu { display: flex; flex-direction: column; gap: 8px; }
.sf-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; min-height: 60px; border-radius: 14px; }
.sf-item .sf-emo { font-size: 25px; flex: none; }
.sf-item .sf-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sf-item b { font-size: 15.5px; color: var(--ink); }
.sf-item .sf-txt > span { font-size: 12.5px; color: var(--muted); font-weight: 400; line-height: 1.3; }
.sf-i1 { background: color-mix(in srgb, #2f8a5b 13%, var(--surface)); border-color: color-mix(in srgb, #2f8a5b 45%, var(--line)); }
.sf-i2 { background: color-mix(in srgb, #c98a1c 13%, var(--surface)); border-color: color-mix(in srgb, #c98a1c 45%, var(--line)); }
.sf-i3 { background: color-mix(in srgb, #b2432f 11%, var(--surface)); border-color: color-mix(in srgb, #b2432f 45%, var(--line)); }
.sf-i4 { background: color-mix(in srgb, #7a4fc4 12%, var(--surface)); border-color: color-mix(in srgb, #7a4fc4 45%, var(--line)); }
.sf-i5 { background: color-mix(in srgb, #b0207f 10%, var(--surface)); border-color: color-mix(in srgb, #b0207f 45%, var(--line)); }
.sf-i6 { background: color-mix(in srgb, #08788b 12%, var(--surface)); border-color: color-mix(in srgb, #08788b 45%, var(--line)); }
.hide-rhythm #sf-rhythm, .hide-voice #sf-voice { display: none; }
.tht { display: flex; flex-direction: column; gap: 12px; margin: 0 0 10px; }
.tht-row { display: flex; flex-direction: column; gap: 5px; }
.tht-open { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 50px; padding: 7px 11px; border-radius: 14px; text-align: left; line-height: 1.25; }
.tht-open b { font-size: 14px; color: var(--ink); }
.tht-open span { font-size: 12px; color: var(--muted); font-weight: 400; }
.tht-tests { display: flex; gap: 6px; flex-wrap: wrap; }
.tht-test { min-height: 30px !important; padding: 3px 12px; font-size: 12.5px; border-radius: 999px; }
.tht-open.c0 { background: color-mix(in srgb, #2f8a5b 13%, var(--surface)); border-color: color-mix(in srgb, #2f8a5b 45%, var(--line)); }
.tht-open.c1 { background: color-mix(in srgb, #b2432f 11%, var(--surface)); border-color: color-mix(in srgb, #b2432f 45%, var(--line)); }
.tht-open.c2 { background: color-mix(in srgb, #c98a1c 13%, var(--surface)); border-color: color-mix(in srgb, #c98a1c 45%, var(--line)); }
.tht-open.c3 { background: color-mix(in srgb, #7a4fc4 12%, var(--surface)); border-color: color-mix(in srgb, #7a4fc4 45%, var(--line)); }
.tht-open.c4 { background: color-mix(in srgb, #2f6b8a 13%, var(--surface)); border-color: color-mix(in srgb, #2f6b8a 45%, var(--line)); }
.tht-open.c5 { background: color-mix(in srgb, #08788b 12%, var(--surface)); border-color: color-mix(in srgb, #08788b 45%, var(--line)); }
.tht-open.c6 { background: color-mix(in srgb, #8a5a2f 13%, var(--surface)); border-color: color-mix(in srgb, #8a5a2f 45%, var(--line)); }
.tht-open.c7 { background: color-mix(in srgb, #c2572f 12%, var(--surface)); border-color: color-mix(in srgb, #c2572f 45%, var(--line)); }
.tht-open.c8 { background: color-mix(in srgb, #5d7a1e 13%, var(--surface)); border-color: color-mix(in srgb, #5d7a1e 45%, var(--line)); }
.tht-open.c9 { background: color-mix(in srgb, #5b6b78 12%, var(--surface)); border-color: color-mix(in srgb, #5b6b78 45%, var(--line)); }   /* V6.40 : le fuchsia revient à « Chanter juste » */
.tht-open.c11 { background: color-mix(in srgb, #b0207f 10%, var(--surface)); border-color: color-mix(in srgb, #b0207f 45%, var(--line)); }   /* V6.40 : même couleur que « Chanter juste » ailleurs dans l’app */
.tht-open.c10 { background: color-mix(in srgb, #4a4f8a 13%, var(--surface)); border-color: color-mix(in srgb, #4a4f8a 45%, var(--line)); }
/* fenêtres Solfa */
.sf-staff { max-width: 340px; flex: none; }
.sf-staff .sf-acc { font-size: 13px; fill: var(--ink); }
.sf-staff .sf-fig { font-size: 11px; font-weight: 700; fill: var(--ink); }
.sf-staff .sf-lab { font-size: 10.5px; fill: var(--muted); font-style: italic; }
.sf-card .th-table td:first-child { white-space: nowrap; }
.sf-m { font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-alt { font-weight: 400; color: var(--muted); font-size: 12px; }
.sf-blk { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sf-blk-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-blk-h b { font-size: 14.5px; }
.sf-play { min-height: 30px !important; padding: 3px 12px; font-size: 12.5px; border-radius: 999px; flex: none; }
.sf-playrow { display: flex; justify-content: center; }
.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
.sf-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.sf-cell b { font-size: 13px; }
.sf-cell .dr-staff { width: 100%; max-width: 120px; }
.sf-small { font-size: 12px !important; color: var(--muted) !important; }
.sf-src { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.sf-src a { color: var(--accent); }
.sf-fbtable td { font-size: 13px; }
/* tests Solfa */
.sf-big { font-size: 44px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; line-height: 1.05; padding: 6px 0; }
.sf-figbig { font-size: 36px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 22px; }
.sf-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-opts .dr-opt { font-size: 13.5px; font-weight: 600; min-height: 48px; }
.sf-fb .okc { color: var(--good); } .sf-fb .koc { color: var(--bad); }
.sf-sub, .sf-sub2 { margin-top: 0; }
.dr-fig .sf-staff { max-width: 210px; }
.sf-sheet .mg-title { font-size: 20px; padding-right: 26px; }

/* V6.35 : chiffrages empilés (jamais de slash), symboles C et C barré, exemple de basse chiffrée */
.sf-vf { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.02; font-weight: 700; vertical-align: middle; font-variant-numeric: tabular-nums; }
.sf-big.sf-bigvm { padding: 2px 0 6px; }
.sf-bigvm .sf-vf { font-size: 40px; }
.sf-optvm .sf-vf { font-size: 19px; }
.th-table .sf-vf { font-size: 15px; }
.sf-sym { font-size: 23px; font-weight: 800; }
.sf-symwrap { display: inline-flex; flex-direction: column; align-items: center; margin-left: 6px; vertical-align: middle; line-height: 1.1; font-weight: 400; color: var(--muted); }
.sf-symwrap small { font-size: 10px; }
.sf-symwrap .sf-sym { color: var(--ink); }
.sf-fbtable td.sf-m { white-space: normal; }
.sf-lablft { font-size: 10.5px; fill: var(--muted); }
.sf-rom { font-size: 13px; font-weight: 800; fill: var(--ink); font-style: normal; }
.sf-fbex { max-width: 352px; }
.ng-ico > svg { width: 22px; height: 22px; display: block; }
.nav-items .tab[data-view="solfa"] svg:first-child path { stroke: none; }
/* V6.36 : icônes épurées dans les tuiles de l'accueil */
.home-emo > svg { width: 26px; height: 26px; display: block; color: var(--muted); }
/* V6.36 : C et C barré dessinés, basse chiffrée non grasse, do du milieu en noir, aide des intervalles */
.sf-csym { width: 22px; height: 30px; display: block; color: var(--ink); }
.sf-symwrap { margin-left: 12px !important; }
.sf-symwrap small { margin-top: 1px; }
.th-table .sf-m .sf-vf { font-size: 15px; }
.sf-fbtable td.sf-fbfig { font-weight: 400; white-space: nowrap; }
.sf-fbtable td.sf-fbfig .sf-vf { font-weight: 400; font-size: 14.5px; }
.sf-accbig { font-size: 1.3em; line-height: 1; }
.sf-staff .sf-fig.sf-fignb { font-weight: 400; font-size: 12px; }
.sf-staff .sf-rom { font-style: italic; font-weight: 400; font-size: 13px; }
.sf-center { display: flex; justify-content: center; }
.sf-staff .nh.sf-black { fill: var(--ink); stroke: var(--ink); stroke-width: 1.2; }
.sf-staff .sf-labsm { font-size: 9.5px; }
.sf-hint { margin: -4px 0 4px; font-size: 12.5px; font-weight: 400; color: var(--muted); text-align: center; line-height: 1.35; }
/* V6.37 */
.hm-pre { font-weight: 600; color: var(--muted); margin-right: 2px; }
.home-quick { grid-auto-rows: 1fr; }
.home-quick .home-tile { height: 100%; }
.home-emo.hc-staff > svg { width: 30px; height: 30px; display: block; color: var(--muted); }
.sf-staff .nh.sf-hl { stroke: #c2572f; stroke-width: 2.6; }
.sf-staff .sf-dash { stroke: var(--ink); stroke-width: 1.1; }
.sf-hico { display: flex; align-items: flex-start; gap: 6px; }
.sf-staffico { width: 20px; height: 20px; flex: none; margin-top: 2px; }
/* Menu : tout le texte à la même taille que « Jouer », libellés sur plusieurs lignes resserrés */
.nav-items .tab, .nav-items .tab .tab-label, .nav-items .tab[data-act="winds"] .tab-label { font-size: 10.5px !important; font-weight: 600; }
.nav-items .tab[aria-selected="true"] { font-weight: 700; }
.nav-items .tab .tab-label { line-height: 1.05; }
.home-choice .hm-pre { display: inline !important; }
/* V6.38 : « Mon profil : J’apprends la musique » sur une ligne */
#home-mode-btn .hm-line { display: block; }
#home-mode-btn .hm-line b, #home-mode-btn .hm-line small { display: inline !important; }
#home-mode-btn .hm-line b { font-weight: 600; color: var(--muted); }
#view-sounds .s-head .s-how-wrap { grid-area: how; justify-self: start; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bigpiano-btn.bp-inline { position: static; top: auto; right: auto; font-size: 12.5px; padding: 3px 12px; }
.hide-rhythm .nav-items .tab[data-view="solfa"] { display: none; }
/* V6.38 : pas de surlignage bleu sur les boutons de la mise en voix */
#vx-go-down, #vx-replay, #vx-go-up, #vx-stop { -webkit-tap-highlight-color: transparent; outline: none !important; box-shadow: none !important; }
#vx-go-down:focus, #vx-replay:focus, #vx-stop:focus { background: var(--surface); }
/* V6.38 : chronomètre de l'accueil plus compact (le compositeur du jour reste visible) */
#view-home .home-chrono { padding-top: 6px !important; padding-bottom: 6px !important; row-gap: 2px !important; }
#view-home .home-chrono .hc-text small { font-size: 11.5px; line-height: 1.25; }
#view-home .home-chrono-row .btn { min-height: 30px !important; padding: 1px 10px !important; font-size: 12.5px !important; }
#view-sounds .s-head .s-how-wrap { margin-right: 12px; }

/* ===== V6.39 : Vue chronologique des époques (Explorer › Compositeurs) ===== */
:root {
  --era-medieval: #8c6d3f; --era-renaissance: #3f7f32; --era-baroque: #b9561f; --era-classique: #2a66a3;
  --era-romantique: #a03466; --era-xx: #5a49a0; --era-xxi: #1f7f7a;
  --era-medieval-bg: #ece3d2; --era-renaissance-bg: #e0ecdb; --era-baroque-bg: #f6e3d6; --era-classique-bg: #dbe7f3;
  --era-romantique-bg: #f1dde7; --era-xx-bg: #e5e3f0; --era-xxi-bg: #d8eeec;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --era-medieval: #d4b07a; --era-renaissance: #8fcc7e; --era-baroque: #f0955f; --era-classique: #79b2ec;
  --era-romantique: #ea86b4; --era-xx: #a99cf0; --era-xxi: #6fd3cb;
  --era-medieval-bg: #231f17; --era-renaissance-bg: #18221a; --era-baroque-bg: #271b14; --era-classique-bg: #151e29;
  --era-romantique-bg: #26171f; --era-xx-bg: #1c1a2a; --era-xxi-bg: #132423;
} }
:root[data-theme="dark"] {
  --era-medieval: #d4b07a; --era-renaissance: #8fcc7e; --era-baroque: #f0955f; --era-classique: #79b2ec;
  --era-romantique: #ea86b4; --era-xx: #a99cf0; --era-xxi: #6fd3cb;
  --era-medieval-bg: #231f17; --era-renaissance-bg: #18221a; --era-baroque-bg: #271b14; --era-classique-bg: #151e29;
  --era-romantique-bg: #26171f; --era-xx-bg: #1c1a2a; --era-xxi-bg: #132423;
}
.tl-card { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; }
.tl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.tl-card-head .chev { color: var(--muted); font-size: 20px; line-height: 1; }
.tl-card canvas { display: block; width: 100%; height: 86px; border-radius: 8px; }
.tl-card-hint { font-size: 12px; color: var(--muted); }
body.tl-open { overflow: hidden; }
.tl-view { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tl-view[hidden] { display: none !important; }
.tl-head { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.tl-top { display: flex; align-items: center; gap: 10px; }
.tl-title { flex: 1; font-size: 16px; min-width: 0; }
.tl-year { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--muted); white-space: nowrap; }
.tl-x { font: inherit; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; flex: none; }
.tl-ctrl { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tl-ctrl::-webkit-scrollbar { display: none; }
.tl-eras { display: contents; }
.tl-btn, .tl-era { font: inherit; font-size: 13px; white-space: nowrap; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.tl-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tl-era { background: transparent; border-color: currentColor; font-weight: 700; }
.tl-btn:focus-visible, .tl-era:focus-visible, .tl-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-stage { flex: 1; position: relative; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.tl-canvas { position: relative; }
.tl-band { position: absolute; top: 0; bottom: 0; }
.tl-bandlab { position: sticky; top: 26px; display: block; padding: 4px 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.tl-axis { position: sticky; top: 0; height: 24px; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); }
.tl-tick { position: absolute; top: 0; height: 24px; border-left: 1px solid var(--line); font-size: 11px; color: var(--muted); padding: 5px 0 0 3px; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.tl-grid { position: absolute; top: 24px; bottom: 0; border-left: 1px dashed var(--line); opacity: .7; }
.tl-c { position: absolute; display: block; text-align: left; background: none; border: 0; padding: 0; margin: 0; font: inherit; line-height: 1.1; cursor: pointer; }
.tl-n { display: block; font-weight: 700; white-space: nowrap; }
.tl-d { display: block; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-bar { display: block; margin-top: 2px; height: 5px; border-radius: 3px; opacity: .85; }
.tl-c.alive .tl-bar { -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent); mask-image: linear-gradient(90deg, #000 75%, transparent); }
.tl-c:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tl-info { position: absolute; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 5; max-width: 440px; margin-inline: auto;
  display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.tl-info[hidden] { display: none !important; }
.tl-info-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-info-txt span { color: var(--muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .tl-stage { scroll-behavior: auto; } }

/* V6.40 : « Ma tessiture » */
.vx-mine-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.vx-mine-note[hidden] { display: none; }
#vx-voices .chip[data-k="mine"] { font-weight: 700; }
.dr-snd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px; }
.dr-snd .chip { min-height: 32px; font-size: 13px; padding: 2px 10px; }
.dr-snd .dr-replay { min-height: 32px; }
/* V6.40 : altérations et gamme chromatique (théorie) */
.sf-alt { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 4px; }
.sf-alt li { display: flex; gap: 10px; align-items: baseline; }
.sf-altsym { flex: none; width: 1.6em; text-align: center; font-size: 1.25em; line-height: 1; }
.sf-chrom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; font-weight: 600; margin: 6px 0 10px; }
.sf-chn { white-space: nowrap; padding: 2px 5px; border-radius: 6px; }
.sf-chn.pair { background: var(--surface-2); }
.sf-chd { color: var(--muted); padding: 0 2px; }
.sf-golink { display: inline; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.iv-aug { margin-top: 10px; }
/* V6.40 : avec « Ma tessiture », 7 voix → deux lignes plutôt que des noms coupés */
#vx-voices { flex-wrap: wrap; overflow-x: visible; }
#vx-voices .chip { flex: 0 0 auto; }
.sf-alt li { font-size: 14px; line-height: 1.4; color: var(--ink); }
/* V6.41 */
.tht-open.c12 { background: color-mix(in srgb, #6b6f76 10%, var(--surface)); border-color: color-mix(in srgb, #6b6f76 40%, var(--line)); }
.sf-staff .sf-rowlab { font-size: 10px; font-weight: 700; fill: var(--muted); }
.iv-tri-head td { border-bottom: 0 !important; }
.iv-trirow td { padding: 2px 10px 10px; }
.iv-tri { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); font-weight: 400; }
.iv-tri b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }
.iv-tri a { color: var(--accent); }
.th-relmid { margin: -6px 0 -2px; }
.th-relarrow { display: block; width: 100%; height: auto; }
.th-relarrow .th-arrt { font-size: 12px; font-weight: 700; fill: #b0207f; }
.th-relarrow .th-arr { stroke: #b0207f; stroke-width: 2.4; }
.th-relarrow .th-arrh { fill: #b0207f; }
.sf-lex { margin: 6px 0; display: grid; gap: 10px; }
.sf-lexi dt { font-weight: 700; color: var(--ink); }
.sf-lexi dd { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.sf-flash { animation: sfFlash 1.6s ease-out; border-radius: 6px; }
@keyframes sfFlash { 0% { background: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .sf-flash { animation: none; } }
.vx-dr-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.vx-dr-modes .chips { gap: 6px; }
.vx-dr-modes .chip { min-height: 30px; font-size: 13px; padding: 2px 10px; }
.vx-dr-mhint { margin: 6px 0 0; font-size: 13px; }
/* V6.42 : tempéraments, battements */
.tht-open.c13 { background: color-mix(in srgb, #7a5c2e 11%, var(--surface)); border-color: color-mix(in srgb, #7a5c2e 42%, var(--line)); }
.sf-beats { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.sf-beatbtn { min-height: 34px; font-size: 13px; padding: 4px 12px; }
.tp-wrap { overflow-x: auto; flex: none; min-height: min-content; }
.tp-table td, .tp-table th { font-size: 12.5px; padding: 6px 5px; }
.tp-table .tp-pure { color: var(--good); font-weight: 700; }
.tp-table .tp-far { color: var(--bad); }
.sf-mini { min-height: 28px; padding: 0 8px; }
.sf-srcsmall { font-size: 11.5px; line-height: 1.35; }
.vx-dr-h { margin: 16px 0 4px; font-size: 16px; }
.vx-dr-golink { display: block; margin: 2px 0 10px; text-decoration: underline; }
/* V6.42 : index */
.sf-idxnav { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.sf-idxl { font: inherit; font-weight: 700; font-size: 13px; min-width: 28px; min-height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.sf-idxh { margin-top: 14px; }
.lex-meta { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.lex-meta .sf-golink { font-size: 13px; }
.lex-src { font-size: 11px; color: var(--muted); text-decoration: underline; }
.tp-table th { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.tp-table td small { color: var(--muted); font-size: 11px; }
.comp-filter-h { display: block; font-size: 15px; margin: 0 0 6px; color: var(--ink); }
/* V6.43 : têtes de notes « blanches » creuses — la ligne (portée ou ligne supplémentaire) traverse la note */
.sf-staff .nh.open, .dr-staff .nh.open { fill: none !important; }
.sf-armnote { color: var(--accent) !important; font-size: 12.5px !important; }
/* V6.43 : C barré et C à la hauteur des chiffres empilés ; « alla breve » glissé dessous sans agrandir la ligne */
.th-table td.sf-m { white-space: nowrap; }
.th-table td.sf-m > .sf-vf, .th-table td.sf-m > .sf-alt { vertical-align: middle; }
.sf-symwrap { position: relative; margin-left: 8px !important; }
.sf-symwrap small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; margin-top: 0; font-size: 9.5px !important; line-height: 1; }
.sf-csym { width: 20px; height: 31px; }
.th-table tr:has(.sf-symwrap small) td { padding-bottom: 12px; }
/* V6.43 : tests de lecture — mise en page stable */
.dr-card .dr-ask { margin: 2px 0 0; }
.dr-card .dr-fig { margin: -4px 0 -6px; }
.dr-foot { display: flex; flex-direction: column; gap: 6px; }
.dr-foot.dr-wait .dr-fb { visibility: hidden; }
/* V6.43 : Rythmes — deux onglets côte à côte */
.rh-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 8px; }
.rh-mode button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; padding: 5px 8px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: center; line-height: 1.2; cursor: pointer; }
.rh-mode button b { font-size: 13.5px; }
.rh-mode button small { font-size: 11.5px; color: var(--muted); }
.rh-mode button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rh-mode button[aria-selected="true"] small { color: var(--accent-ink); opacity: .85; }
#view-rhythm[data-rhm="cells"] .rh-only-test, #view-rhythm[data-rhm="test"] .rh-only-cells { display: none !important; }
/* V6.43 : Chanter juste guidé par des numéros (comme l'assistant pour vents historiques) */
.vx-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 800; line-height: 1; }
.vx-numh { display: flex; align-items: center; gap: 9px; }
.vx-sec-h.vx-numh { color: var(--ink) !important; font-size: 17px !important; border-bottom: 0 !important; padding-bottom: 0; }
.vx-part-h.vx-numh { font-size: 17px !important; border-bottom: 0 !important; padding-bottom: 0; }
.vx-parts { background: none !important; padding: 0 !important; border-bottom: 2px solid var(--line); border-radius: 0 !important; gap: 0 !important; }
.vx-part { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--muted); font-size: 15px !important; padding: 8px 4px 9px !important; margin-bottom: -2px; border-bottom: 3px solid transparent !important; }
.vx-part .vx-num { background: var(--muted); }
.vx-part[aria-selected="true"] { color: var(--ink) !important; border-bottom-color: var(--accent) !important; }
.vx-part[aria-selected="true"] .vx-num { background: var(--accent); }
/* V6.43 : modèle joué au piano en rose (le do central reste marqué en bleu) */
:root { --vx-model: #c2418f; }
.vx-k.on-mel, .vx-k.b.on-mel { background: var(--vx-model) !important; }
.vx-sw.mel { background: var(--vx-model) !important; }
.ej-path-chips { gap: 6px; }
.ej-step { display: inline-flex; align-items: center; gap: 5px; }
.ej-sn { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 800; }
.ej-step[aria-pressed="true"] .ej-sn { background: var(--accent-ink); color: var(--accent); }
.vx-go:disabled { opacity: .5 !important; }
/* V6.43 : bourdon pour instrumentistes, retour vers la page de départ */
.vx-drone-sheet:not(.vx-dr-inst) .vx-inst-only { display: none !important; }
.vx-drone-sheet.vx-dr-inst .vx-sing-only { display: none !important; }
.vx-dr-tunbox { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.vx-dr-tunbox .hint { margin: 0; }
.vx-dr-tunbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-dr-tunbtns .btn { min-height: 34px !important; padding: 3px 10px; font-size: 13px; }
.vx-dr-tunnote { font-size: 11.5px !important; }
.vx-dr-pcs { gap: 5px; }
.vx-dr-pcs .chip { min-width: 46px; justify-content: center; }
.vx-dr-oct { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.vx-dr-oct .btn { min-height: 32px !important; width: 40px; padding: 0; font-size: 18px; }
.vx-dr-oct b { min-width: 56px; text-align: center; font-size: 16px; }
.ret-bar { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 8px; min-height: 40px; font-weight: 700; background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
.ret-bar[hidden] { display: none !important; }
.s-drone { min-height: 30px !important; padding: 2px 10px; font-size: 12.5px; border-radius: 999px; background: color-mix(in srgb, #2f8a5b 14%, var(--surface)) !important; border-color: color-mix(in srgb, #2f8a5b 45%, var(--line)) !important; color: var(--ink) !important; }
/* V6.43 (priorité) : onglets numérotés façon titres */
#view-voice > .vx-parts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; border-bottom: 2px solid var(--line); margin-top: 14px; }
#view-voice .vx-part { display: flex !important; align-items: center; justify-content: center; gap: 8px; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; background: none !important; color: var(--muted) !important; box-shadow: none !important; font-size: 15px !important; font-weight: 800; padding: 8px 4px 9px !important; margin-bottom: -2px; text-align: left; line-height: 1.15; }
#view-voice .vx-part[aria-selected="true"] { color: var(--ink) !important; border-bottom-color: var(--accent) !important; background: none !important; }
#view-voice .vx-part-h.vx-numh { border-bottom: 0 !important; padding: 0 !important; font-size: 17px !important; color: var(--ink) !important; }
#view-voice .vx-sec-h.vx-numh { color: var(--ink) !important; }
.th-table td.sf-m { display: flex !important; align-items: center; gap: 2px; flex-wrap: nowrap; }
.th-table td.sf-m .sf-alt { display: inline-flex !important; align-items: center; }
.dr-card .dr-fig { margin-bottom: -18px !important; }
html.mg-open .bigpiano-btn.bp-inline { visibility: hidden; }

/* V6.45 : tableau comparatif des ornements */
.orn-mode { margin-top: 6px; }
.ot-row { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 6px; margin: 0 0 12px; }
.ot-name { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 8px; }
.ot-ex { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border-radius: 10px; padding: 6px 4px 2px; }
.ot-ex figure { margin: 0; text-align: center; }
.ot-ex img { display: block; height: 80px; width: auto; max-width: 100%; }
.ot-ex figcaption { font-size: 11.5px; color: #555; margin-top: 1px; }
.ot-arrow { font-size: 20px; color: #888; }
.ot-exsrc { font-size: 12.5px; color: var(--muted); margin: 5px 0 8px; text-align: center; }
.ot-exsrc .link-btn { font-size: 12.5px; }
.ot-names { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 8px; }
.ot-names th { text-align: left; font-weight: 600; width: 92px; padding: 4px 8px 4px 0; vertical-align: top; color: var(--muted); }
.ot-names td { padding: 4px 0; border-bottom: 1px solid var(--line); }
.ot-names tr:last-child td { border-bottom: 0; }
.ot-text p { font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
.ot-text a { color: var(--accent); }

/* V6.46 : volume du bourdon */
.vx-dr-vol { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; font-size: 14px; }
.vx-dr-vol label { white-space: nowrap; font-weight: 600; }
.vx-dr-vol input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.vx-dr-vol output { min-width: 42px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* V6.47 : bouton « Retour » toujours visible (rouge, collé en haut de la fenêtre) */
.mg-backbar { position: sticky; top: -22px; z-index: 5; display: flex; justify-content: flex-start; margin: -22px -18px 0; padding: 12px 18px 8px; background: var(--surface, #fff); border-radius: 22px 22px 0 0; }
.mg-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 6px 16px; border: 0; border-radius: 999px; background: #c62828; color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.mg-back:hover { background: #a71d1d; }
.mg-back:focus-visible { outline: 3px solid #ffb4b4; outline-offset: 2px; }

/* fenêtre de l'index */
.aix-card { max-width: 560px; }
.aix-search { position: sticky; top: 38px; z-index: 4; background: var(--surface); padding: 4px 0 6px; display: flex; flex-direction: column; gap: 2px; }
.aix-search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.aix-search input:focus { outline: none; border-color: var(--accent); }
.aix-list { list-style: none; margin: 0; padding: 0; }
.aix-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; border-radius: 8px; padding: 7px 8px; }
.aix-row:hover, .aix-row:focus-visible { background: var(--accent-soft, #e8eef8); }
.aix-row small { color: var(--muted); font-size: 11.5px; }
.aix-l0 { font-weight: 800; font-size: 16px; margin-top: 10px; color: #1d3f73; border-top: 1px solid var(--line); border-radius: 0; padding-top: 10px; }
.aix-l1 { font-weight: 700; font-size: 15px; padding-left: 18px; }
.aix-l2 { font-size: 14px; padding-left: 36px; }
.aix-h { font-weight: 800; color: #1d3f73; margin: 12px 0 2px; padding-left: 8px; }
.aix-none { color: var(--muted); padding: 8px; }
.aix-flash { animation: aixFlash 1.8s ease; border-radius: 10px; }
@keyframes aixFlash { 0%, 45% { background: #fff36b; box-shadow: 0 0 0 4px #ffe600; } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } }

/* V6.48 : bouton « ‹ Retour » global (en haut, à côté de la maison) */
.nav-back { min-height: 38px; padding: 6px 14px; border: 0; border-radius: 999px; background: #c62828; color: #fff; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.18); white-space: nowrap; }
.nav-back:hover { background: #a71d1d; }
.nav-back[hidden] { display: none !important; }

/* V6.49 : menu aux couleurs du logo (bleu nuit #1f2a44, crème #f3ebdd, point orange #c0562a) */
.nav-menu-lab, .nav-index { background: #1f2a44 !important; color: #f3ebdd !important; }
.nav-menu-lab::before, .nav-index::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #e0703f; margin-right: 4px; vertical-align: 1px; }
/* « Index » : même pastille que « Menu », sur la ligne du haut, tout à droite (au-dessus de Réglages) */
.tabbar.tabbar2 { position: relative; }
.nav-index { position: absolute; top: -10px; right: 8px; z-index: 3; height: 16px; padding: 0 8px; border: 0; border-radius: 8px; display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; line-height: 16px; cursor: pointer; }
.nav-index svg { width: 9px; height: 9px; flex: none; }
.nav-index::before { display: none; }
.nav-index .tab-label { font-size: 9.5px; line-height: 1; color: inherit; }
.nav-index:hover { background: #2c3a5c !important; }
/* Réglages et Chrono : même allure que les autres boutons, libellé entier */
.ng[data-g="reglages"]:not([aria-selected="true"]), .nav-ses, html .nav-row .nav-ses { background: transparent !important; }
.ng[data-g="reglages"] .tab-label, .nav-ses .tab-label { font-size: 10px !important; white-space: nowrap; overflow: visible; text-overflow: clip; letter-spacing: -.1px; }
.ng[data-g="reglages"] { overflow: visible !important; }
.ng[data-g="reglages"][aria-selected="true"] { background: #f3ebdd !important; }
/* Chrono en marche : seulement le petit signe et le temps en couleur vive (plus tout le bouton orange) */
.nav-ses.run, html .nav-row .nav-ses.run { background: transparent !important; color: #e0703f !important; }
.nav-ses.run svg { color: #e0703f; opacity: 1; stroke-width: 2.4; }
.nav-ses.paused, html .nav-row .nav-ses.paused { background: transparent !important; color: #b07a2a !important; }
/* boutons rouges « Retour » plus petits */
.mg-back { min-height: 28px; padding: 3px 11px; font-size: 13px; }
.nav-back { min-height: 28px; padding: 3px 11px; font-size: 13px; }
.mg-backbar { padding: 10px 18px 6px; }
/* Bourdon : plus compact pour que « Lancer le bourdon » soit visible plus haut */
#vx-drone-sheet .mg-card { gap: 8px; }
.vx-dr-pcs .chip, #vx-dr-notes .chip { min-width: 0 !important; min-height: 30px !important; padding: 2px 9px !important; font-size: 13.5px !important; }
.vx-dr-oct { gap: 12px; margin-top: 4px; align-items: flex-start; }
.vx-dr-octb { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.vx-dr-octb small { font-size: 10px; color: var(--muted); line-height: 1.1; white-space: nowrap; }
.vx-dr-oct .btn { min-height: 28px !important; width: 34px; font-size: 16px; }
.vx-dr-oct b { padding-top: 4px; }
.vx-dr-modes { flex-wrap: nowrap; align-items: baseline; margin-top: 4px; }
.vx-dr-modes > .hint { flex: none; margin: 0; }
.vx-dr-modes .chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.vx-dr-modes .chip { min-height: 26px; font-size: 12.5px; padding: 1px 9px; }
.vx-dr-mhint { margin: 2px 0 0; font-size: 12.5px; }
.vx-dr-tunbox { padding: 6px 8px; gap: 4px; }
.vx-dr-tunbtns { display: flex; flex-wrap: wrap; gap: 5px; }
.vx-dr-tunbtns .btn { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.vx-dr-tunnote { font-size: 11.5px; }
.vx-dr-ctl { margin: 2px 0 4px; }
.vx-dr-start { margin-top: 10px; }

/* V6.50 : menu sur le fond du logo, colonne de droite (Index, Réglages, Chrono) séparée par une ligne bleu nuit */
.tabbar.tabbar2 { display: flex !important; align-items: stretch; gap: 0; background: #f3ebdd !important; border-top: 2px solid #1f2a44 !important; padding: 9px 4px 6px !important; box-shadow: 0 -2px 10px rgba(31,42,68,.12); }
.tabbar.tabbar2 .nav-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tabbar.tabbar2 .nav-row { margin-top: 3px !important; padding-top: 3px !important; border-top: 1px solid #d9cdb8 !important; }
.tabbar.tabbar2 .nav-side { flex: none; width: 66px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-left: 6px; padding-left: 6px; border-left: 2px solid #1f2a44; }
.nav-side .nav-index { position: static !important; height: 22px; width: 100%; justify-content: center; border-radius: 8px !important; background: #e4d7c1 !important; color: #1f2a44 !important; font-size: 9.5px; letter-spacing: .5px; }
.nav-side .nav-index svg { color: #c0562a; width: 10px; height: 10px; }
.nav-side .nav-index:hover { background: #dacbb1 !important; }
.nav-side .ng[data-g="reglages"], .nav-side .nav-ses, html .nav-side .nav-ses { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; height: auto !important; min-height: 40px !important; flex: 1 1 auto; border-radius: 10px !important; background: #e4d7c1 !important; box-shadow: none !important; border: 0 !important; color: #1f2a44 !important; padding: 3px 2px !important; }
.nav-side .ng[data-g="reglages"] .ng-ico { filter: sepia(1) saturate(4) hue-rotate(-18deg) brightness(.95); }
.nav-side .nav-ses svg { color: #c0562a; opacity: 1; }
.nav-side .ng[data-g="reglages"][aria-selected="true"] { background: #dbe6f5 !important; box-shadow: inset 0 0 0 1.5px #1d3f73 !important; color: #1d3f73 !important; }
.nav-side .nav-ses.run { background: #e4d7c1 !important; color: #c0562a !important; }
.nav-side .nav-ses.run svg { color: #e0703f; stroke-width: 2.4; }
.nav-side .nav-ses.paused { background: #e4d7c1 !important; color: #8a5a12 !important; }
/* éléments choisis dans le menu : bleu pâle, comme ailleurs dans l'app */
.tabbar .ng[aria-selected="true"]:not([data-g="reglages"]), .tabbar .nav-items .tab[aria-selected="true"] { background: #dbe6f5 !important; box-shadow: inset 0 0 0 1.5px #1d3f73 !important; color: #1d3f73 !important; }
.tabbar .nav-items .tab[aria-selected="true"] svg { color: #1d3f73 !important; }
.tabbar .ng:not([aria-selected="true"]):not([data-g="reglages"]), .tabbar .nav-items .tab:not([aria-selected="true"]) { background: transparent !important; }
.tabbar .nav-rows, .tabbar .nav-items { background: transparent !important; }
.nav-menu-lab { left: calc(50% - 36px) !important; }
/* V6.50 : boutons « Arrêter / Stop » en rouge foncé, sans agressivité */
button.is-stop, .btn.is-stop, .btn.primary.is-stop { background: #9b3a36 !important; border-color: #9b3a36 !important; color: #fff !important; }
button.is-stop:hover { background: #87312e !important; }
/* Bourdon : bouton Arrêter beaucoup plus grand ; ligne du volume plus courte */
#vx-dr-play.is-stop { min-height: 64px; font-size: 20px; letter-spacing: .3px; }
.vx-dr-vol { justify-content: flex-start; }
.vx-dr-vol input[type="range"] { flex: 0 1 150px; max-width: 150px; }

/* V6.51 : trompette du menu en gris foncé (plus visible) */
.tabbar .ng-duo, .tabbar .tab-emo { filter: grayscale(1) brightness(.42) contrast(1.4); }
/* V6.51 : la colonne Index / Réglages / Chrono a exactement la hauteur des deux lignes du menu */
.tabbar.tabbar2 { display: grid !important; grid-template-columns: minmax(0, 1fr) 72px; }
.tabbar.tabbar2 > .nav-menu-lab { position: absolute; }
.tabbar.tabbar2 .nav-side { width: auto; height: 0; min-height: 100%; box-sizing: border-box; overflow: hidden; gap: 3px; }
.nav-side .nav-index { flex: 0 0 18px !important; height: 18px !important; }
.nav-side .ng[data-g="reglages"], .nav-side .nav-ses, html .nav-side .nav-ses { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; gap: 0 !important; padding: 1px 2px !important; }
.nav-side .ng[data-g="reglages"] .ng-ico { font-size: 15px; line-height: 1; }
.nav-side .nav-ses svg { width: 15px; height: 15px; }
.tabbar.tabbar2 { grid-template-columns: minmax(0, 1fr) 78px; }
.nav-side .ng[data-g="reglages"] .tab-label, .nav-side .nav-ses .tab-label { font-size: 9.5px !important; letter-spacing: -.2px; }

/* V6.52 : menu plus aéré ; colonne de droite plus large ; petits signes gris foncé (Chrono en couleur seulement en marche) */
.tabbar.tabbar2 { grid-template-columns: minmax(0, 1fr) 86px; padding: 10px 6px 8px !important; }
.tabbar .nav-groups { gap: 4px; }
.tabbar .ng { padding: 6px 2px 5px !important; min-height: 50px; }
.tabbar .nav-row { margin-top: 6px !important; padding-top: 6px !important; }
.tabbar .nav-items .tab { min-height: 40px; }
.tabbar.tabbar2 .nav-side { gap: 5px; margin-left: 8px; padding-left: 8px; }
.nav-side .nav-index { flex: 0 0 22px !important; height: 22px !important; font-size: 10px !important; }
.nav-side .ng[data-g="reglages"] .tab-label, .nav-side .nav-ses .tab-label { font-size: 10px !important; letter-spacing: 0; }
.nav-side .nav-index svg, .nav-side .nav-ses svg { color: #2f3540 !important; opacity: 1; }
.nav-side .ng[data-g="reglages"] .ng-ico { filter: grayscale(1) brightness(.42) contrast(1.4) !important; }
.nav-side .nav-ses:not(.run):not(.paused) { color: #2f3540 !important; }
.nav-side .nav-ses.run svg { color: #e0703f !important; }
.nav-side .nav-ses.paused svg { color: #b07a2a !important; }
/* sous-menu : contour un peu plus foncé, les trois choix sur un fond plus clair */
.tabbar .nav-items:not([hidden]) { box-shadow: inset 0 0 0 1.5px #1f2a44 !important; background: #fbf7f0 !important; border-radius: 12px; }
.tabbar .nav-groups { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.tabbar .nav-groups .ng { width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; margin: 0 !important; }
.tabbar .nav-groups .ng .tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 599px) { .tabbar.tabbar2 { grid-template-columns: minmax(0, 1fr) 74px; padding-left: 4px !important; padding-right: 4px !important; } .tabbar.tabbar2 .nav-side { margin-left: 5px; padding-left: 5px; } .tabbar .nav-groups .ng .tab-label { font-size: 10px; letter-spacing: -.2px; } }
@media (max-width: 599px) { .nav-side .ng[data-g="reglages"] .tab-label, .nav-side .nav-ses .tab-label { font-size: 9px !important; letter-spacing: -.25px; } .nav-side .nav-index { font-size: 9px !important; letter-spacing: .3px; } }

/* V6.53 : choix du sous-menu simplement en bleu (sans contour) ; largeur des 4 groupes adaptée à leur nom */
.tabbar .nav-items .tab[aria-selected="true"] { box-shadow: none !important; }
.tabbar .nav-groups { display: flex !important; gap: 2px; }
.tabbar .nav-groups .ng { flex: 1 1 auto !important; min-width: 0 !important; padding-left: 3px !important; padding-right: 3px !important; }

/* V6.54 : même couleur de texte partout dans le menu, le choix en bleu ; « Index » en écriture normale ; plus de point à côté de « Menu » */
.tabbar .ng, .tabbar .nav-items .tab, .nav-side .nav-index, .nav-side .ng[data-g="reglages"], .nav-side .nav-ses:not(.run):not(.paused) { color: #2f3540 !important; }
.tabbar .ng .tab-label, .tabbar .nav-items .tab .tab-label, .nav-side .tab-label { color: inherit !important; font-weight: 600 !important; }
.tabbar .nav-items .tab svg { color: #2f3540 !important; }
.tabbar .ng[aria-selected="true"], .tabbar .nav-items .tab[aria-selected="true"], .nav-side .ng[data-g="reglages"][aria-selected="true"] { color: #1d3f73 !important; }
.tabbar .ng[aria-selected="true"] .tab-label, .tabbar .nav-items .tab[aria-selected="true"] .tab-label, .tabbar .nav-items .tab[aria-selected="true"] svg { color: #1d3f73 !important; font-weight: 700 !important; }
.nav-side .nav-index { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; font-size: 10px !important; }
.nav-side .nav-index svg { width: 12px !important; height: 12px !important; stroke-width: 2.8; color: #1f232b !important; }
.nav-menu-lab::before { display: none !important; }
/* point rouge « enregistrement en cours » (ligne fine en haut de la colonne de droite) */
.nav-side .nav-rec { flex: 0 0 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 4px; border: 0; border-radius: 8px; background: #f6dcda; color: #9b3a36; font: inherit; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.nav-side .nav-rec[hidden] { display: none; }
.nav-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #d32f2f; animation: navRecBlink 1.2s ease-in-out infinite; }
@keyframes navRecBlink { 50% { opacity: .3; } }
@media (max-width: 599px) { .nav-side .nav-index { font-size: 9.5px !important; } }

/* V6.55 : roue des Réglages plus petite + drapeau de la langue choisie */
.nav-side .ng-setico { display: inline-flex !important; align-items: center; gap: 4px; filter: none !important; }
.nav-side .ng-setico .ng-gear { font-size: 13px; line-height: 1; filter: grayscale(1) brightness(.42) contrast(1.4); }
.nav-side .ng[data-g="reglages"] .ng-ico { filter: none !important; }
.nav-flag { display: inline-block; width: 17px; height: 11px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.25); line-height: 0; }
.nav-flag svg { width: 100%; height: 100%; display: block; }

/* V6.56 : envoi sur ordinateur — E-mail et WhatsApp en boutons principaux */
.send-sheet.sw-desk .sw-alt-row .btn { min-height: 48px; font-size: 16px; font-weight: 700; background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.send-sheet.sw-desk .sw-alt-row .btn[data-w="copy"] { background: var(--surface); color: var(--ink); border-color: var(--line); font-weight: 600; flex-basis: 100%; min-height: 38px; font-size: 14px; }
.sw-how { font-size: 12.5px; }
/* V6.56 : fin de séance en deux étapes */
.ses-how { display: flex; gap: 8px; margin: 4px 0 6px; }
.ses-how-b { flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
.ses-how-b svg { width: 18px; height: 18px; }
.ses-save small { display: block; font-size: 11.5px; font-weight: 400; opacity: .9; }

/* V6.57 : envoi en deux étapes (audio, puis commentaire) */
.sw-sep { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: #f6efe2; color: #5a4320; font-size: 13.5px; font-weight: 600; }
.sw-step { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: 16px; }
.send-sheet .sw-alt-row .btn { min-height: 46px; font-size: 15.5px; font-weight: 700; background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.send-sheet .sw-alt-row .btn.sw-dim { opacity: .45; }
.sw-aud-none { margin: 0; font-size: 12.5px; }
.sw-copy { min-height: 36px; font-size: 13.5px; }
.ot-ex { flex-wrap: wrap; row-gap: 4px; }

/* V6.58 : accueil — salutation et question sur une ligne ; « Chronomètres » ; tuiles plus serrées */
.home-hello-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; margin: 0 0 2px !important; }
.home-hello-line .home-q { margin: 0 !important; font-size: 14px !important; font-weight: 600; color: var(--muted); }
html[data-view="home"] .home-chrono .hc-line .hc-sm.hc-ses-sm { display: block !important; font-size: 10.5px !important; line-height: 1.25; margin-top: 1px; }
.hc-cal { padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; }
.home-split .home-choice b { font-size: 13px; line-height: 1.15; letter-spacing: -.2px; }
.home-split .home-choice small { font-size: 11.5px; }
html[data-view="home"] .home-choice { padding-top: 7px; padding-bottom: 7px; }
html[data-view="home"] .home-weekbox { padding-top: 6px; padding-bottom: 6px; }
.home-hello-line #home-hello { font-size: 19px; }
html[data-view="home"] .home-chrono .hc-lab { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.home-split .home-choice b { font-size: 12px !important; letter-spacing: -.3px; }
.home-split .home-choice { padding-left: 7px !important; padding-right: 5px !important; }
.home-split .home-choice svg { width: 16px; height: 16px; margin-bottom: 0; }
html[data-view="home"] .home-choice small { line-height: 1.2; }
html[data-view="home"] .home-weekbox .home-week { margin: 0 0 2px; }
html[data-view="home"] .home-dots { margin: 0; }
html[data-view="home"] .home-chrono { padding-top: 6px !important; padding-bottom: 4px !important; }
html[data-view="home"] .home-chrono .hc-line { padding-top: 4px !important; padding-bottom: 4px !important; }
html[data-view="home"] .home-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.05fr) minmax(0, .95fr) !important; }
html[data-view="home"] .home-split .home-choice b { font-size: 11.5px !important; letter-spacing: -.25px; line-height: 1.15; }
html[data-view="home"] .home-split .home-choice { padding: 5px 6px !important; }
.home-hello-line #home-hello { font-size: 18px; }
.home-hello-line .home-q { font-size: 13px !important; }
html[data-view="home"] .home-chrono .hc-lab { font-size: 13.5px !important; }

/* V6.58 : le menu reste caché quand le téléphone est tourné (Bourdons & Sons, Chanter juste) et en grand piano — corrige V6.50 */
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] .tabbar.tabbar2, html[data-view="voice"] .tabbar.tabbar2 { display: none !important; }
}
html.big-piano[data-view="sounds"] .tabbar.tabbar2, html.big-piano[data-view="voice"] .tabbar.tabbar2 { display: none !important; }

/* V6.58 : Bourdons & Sons — « Fonctionnement » puis « Travailler ma justesse » sur une ligne ; diapason plus grand ; Son et Durée plus plats */
#view-sounds .s-how-wrap { display: flex !important; flex-wrap: nowrap; gap: 6px; align-items: stretch; justify-content: center; }
#view-sounds .s-how-wrap .btn { min-height: 32px; padding: 4px 10px; font-size: 13px; line-height: 1.15; }
#view-sounds .s-how-wrap .s-drone { flex: 0 1 auto; white-space: normal; }
#view-sounds .s-how-wrap .s-howto { flex: none; }
#view-sounds .s-ctx { font-size: 16.5px !important; margin-top: 4px !important; }
#view-sounds .rot-hint-s { margin-top: 10px !important; }
#view-sounds .s-row:not(.s-row-mode):not(.s-row-vol) .seg button, #view-sounds #waves button, #view-sounds #s-mode button { min-height: 30px !important; padding-top: 3px !important; padding-bottom: 3px !important; font-size: 13.5px !important; }
#view-sounds .s-row:not(.s-row-mode):not(.s-row-vol) { padding-top: 2px !important; padding-bottom: 2px !important; min-height: 0 !important; }
#view-sounds .s-ctl { row-gap: 4px !important; }
/* en-tête de Bourdons & Sons : 1 colonne en portrait (boutons, diapason, note) ; une seule ligne téléphone tourné */
#view-sounds .s-head, html[data-view="sounds"] #view-sounds > .s-head { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "how" "ctx" "play" !important; justify-items: center; }
#view-sounds .s-head .s-sub { display: none !important; }
#view-sounds .s-head .s-how-wrap { justify-self: center !important; margin-right: 0 !important; }
#view-sounds .s-head .s-ctx { text-align: center !important; white-space: normal !important; }
@media (orientation: landscape) and (max-height: 600px) {
  #view-sounds .s-head, html[data-view="sounds"] #view-sounds > .s-head { grid-template-columns: auto auto minmax(0, 1fr) !important; grid-template-areas: "how ctx play" !important; justify-items: start; column-gap: 14px !important; }
  #view-sounds .s-head .s-how-wrap { justify-self: start !important; }
  #view-sounds .s-head .s-ctx { justify-self: start !important; text-align: left !important; font-size: 17px !important; white-space: nowrap !important; }
  #view-sounds .s-head .s-play { justify-self: start !important; }
  #view-sounds .s-head .rot-hint-s { display: none !important; }
}
html #view-sounds .s-head .s-how-wrap { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; width: auto; max-width: 100%; }
html #view-sounds .s-head .s-how-wrap .btn { white-space: nowrap; }
html #view-sounds .s-head .s-sub, html[data-view="sounds"] #view-sounds .s-head .s-sub { display: none !important; }
html #view-sounds .s-head .s-ctx { width: 100%; }
@media (orientation: landscape) and (max-height: 600px) {
  html #view-sounds .s-head .s-ctx { width: auto; }
  html #view-sounds .s-head .s-how-wrap .bigpiano-btn { display: none; }
}
@media (max-width: 520px) { html #view-sounds .s-head .s-how-wrap .btn { font-size: 12px !important; padding: 3px 8px !important; } html #view-sounds .s-head .s-how-wrap .s-drone { white-space: normal !important; line-height: 1.1; text-align: center; } }
html #view-sounds .s-head .s-play { white-space: nowrap; }
@media (orientation: landscape) and (max-height: 600px) { html #view-sounds .s-head .s-ctx { font-size: 16px !important; } }
html #view-sounds #waves button, html #view-sounds #s-mode button { min-height: 28px !important; height: 28px; padding: 0 6px !important; font-size: 13.5px !important; }
html #view-sounds #waves, html #view-sounds #s-mode { padding: 2px !important; min-height: 0 !important; }
html #view-sounds .s-ctl .s-row { margin: 0 !important; }
html #view-sounds #stop-all.is-stop { background: #9b3a36 !important; border-color: #9b3a36 !important; color: #fff !important; }

/* V6.58 : Accordeur — « Égal / moderne » à côté du tempérament */
.temp-pick { display: flex; align-items: center; gap: 6px; }
.temp-pick select { flex: 1 1 auto; min-width: 0; }
.temp-eq { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 44px; border-radius: 22px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; line-height: 1.05; }
.temp-eq b { font-size: 13px; }
.temp-eq small { font-size: 9.5px; color: var(--muted); }
.temp-eq[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.temp-eq[aria-pressed="true"] small { color: #e6eefb; }
.temp-eq { width: auto; min-width: 58px; padding: 0 9px; } .temp-eq b { font-size: 12.5px; }

/* V6.58 : Mon travail — plus compact pour voir le début du calendrier */
#view-progress .sum-card { box-shadow: inset 0 0 0 1.5px #1f2a44 !important; border-color: transparent !important; }
#view-progress .ses-line { padding-top: 6px !important; padding-bottom: 6px !important; }
#view-progress .ses-line-sub { font-size: 11.5px !important; }
#view-progress .day-min { font-size: 26px !important; font-weight: 800 !important; color: var(--accent) !important; min-width: 70px; }
.note-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.note-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.note-titles .note-dict-hint { margin: 0; font-size: 11px; line-height: 1.2; }
.note-edit { display: flex; gap: 6px; align-items: stretch; }
.note-edit textarea { flex: 1 1 auto; min-width: 0; }
.note-btns { display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.note-btns .btn { min-height: 32px; padding: 3px 10px; font-size: 13px; }
.note-btns .note-cancel { background: #9b3a36 !important; border-color: #9b3a36 !important; color: #fff !important; }
#view-progress .note-actions:has(#note-status:empty) { display: none; }
#view-progress .send-week { padding-top: 6px !important; padding-bottom: 6px !important; min-height: 0 !important; }
#view-progress .send-week small { font-size: 11.5px !important; }
#view-progress #day-panel { padding-top: 8px !important; padding-bottom: 8px !important; }
/* V6.58 : Mes enregistrements — cadre bleu autour du nouvel enregistrement et de son explication */
#view-recs .p-actions { box-shadow: inset 0 0 0 1.5px #1f2a44 !important; border-color: transparent !important; }
/* V6.58 : fin de séance — 2 × 2 boutons */
#ses-p1 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
#ses-p1 .btn { width: auto !important; min-height: 48px; font-size: 14px; line-height: 1.2; padding: 6px 8px; white-space: normal; }
#ses-p1 .btn.danger-text { border: 1.5px solid #9b3a36; color: #9b3a36; }
.note-titles .note-dict-hint { text-align: left !important; }

/* V6.58 : Solfège — 5 boutons de sections, titres plus grands en bleu */
.sf-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.sf-jumpb { flex: 1 1 auto; min-height: 34px; padding: 4px 10px; font-size: 13px; font-weight: 700; color: #1d3f73; background: #eef3fb; border: 1.5px solid #1f2a44; border-radius: 999px; }
#view-theoria .sf-h { font-size: 18px !important; color: #1d3f73 !important; margin: 14px 0 6px !important; text-transform: none !important; letter-spacing: 0 !important; scroll-margin-top: 70px; }
#view-theoria .sf-h#sf-sec-bases { margin-top: 8px !important; }
#view-theoria .inst-intro { margin-bottom: 4px; }

/* ===== V6.58 : Chanter juste — onglets 2-3-4, cadran bleu clair, volume sous le cadran ===== */
.vx-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vx-part { display: flex; align-items: center; justify-content: center; gap: 5px; text-align: left; }
.vx-part > .vx-num { flex: none; }
.vx-part-drone { color: var(--muted); }
.vx-range-again { margin-left: 10px; font-size: 13px; }
.ej-lead i { font-weight: 700; }
.ej-prog-h { margin: 6px 0 0; font-size: 18px; font-weight: 800; color: var(--accent); }
.ej-prog-sub { margin: 0; font-size: 12.5px; color: var(--muted); }
html #view-voice .ej-card { background: #eaf1fb; border-color: #b9cbe8; }
html[data-theme="dark"] #view-voice .ej-card { background: #1c2a40; border-color: #34507a; }
#view-voice .vx-vol { padding: 0 4px; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] #view-voice .vx-vol { order: 2; }
  html[data-view="voice"] .ej-prog-sub { display: none; }
}
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) #view-voice .ej-card { background: #1c2a40; border-color: #34507a; } }
/* V6.58 : Compositeurs — même espace sous le titre que sous « Vue chronologique des époques » */
html #comp-browse .comp-filter-h { margin-bottom: -2px; }
/* V6.58 : Mes instruments — titre du choix sur une ligne */
html .inst-page label.inst-h[for="inst-pick"] { font-size: clamp(12.5px, 3.75vw, 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
html .inst-winds-pill { line-height: 1.15; }
html .inst-page .inst-h .rl-count { white-space: nowrap; display: inline-block; }
html .inst-page .inst-h { font-size: clamp(12.5px, 3.75vw, 16px); }
html #view-voice > .vx-parts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html #view-voice .vx-part { font-size: 13px !important; gap: 5px; padding: 8px 2px 9px !important; hyphens: auto; }
html #view-voice .vx-part .vx-num { width: 20px; height: 20px; font-size: 12px; }
@media (min-width: 700px) { html #view-voice .vx-part { font-size: 15px !important; } }
html #view-voice .vx-part > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.vx-dr-scl { display: block; margin-top: 2px; } .vx-dr-scl > span:first-child { display: inline-block; min-width: 4.6em; font-weight: 600; }

/* ===== V6.59 : Chanter juste — onglet choisi bleu clair relié à un cadre bleu clair ===== */
:root { --vxp-bg: #eef4fc; --vxp-line: #b9cbe8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vxp-bg: #1a2638; --vxp-line: #34507a; } }
:root[data-theme="dark"] { --vxp-bg: #1a2638; --vxp-line: #34507a; }
html #view-voice > .vx-parts { border-bottom: 0 !important; margin-bottom: -12px; position: relative; z-index: 1; align-items: stretch; }
html #view-voice .vx-part { border: 1px solid transparent !important; border-bottom: 0 !important; border-radius: 12px 12px 0 0 !important; margin-bottom: -1px; }
html #view-voice .vx-part[aria-selected="true"] { background: var(--vxp-bg) !important; border-color: var(--vxp-line) !important; color: var(--accent) !important; }
html #view-voice .vx-part[aria-selected="true"] .vx-num { background: var(--accent); color: #fff; }
.vx-panel { display: flex; flex-direction: column; gap: 12px; background: var(--vxp-bg); border: 1px solid var(--vxp-line); border-radius: 0 0 14px 14px; padding: 12px 12px 14px; }
html #view-voice .vx-panel #ej-sec, html #view-voice .vx-panel .vx-part-h.vx-warm-only { margin-top: 0 !important; }
html #view-voice .vx-panel .ej-card { background: #dfeaf8; border-color: var(--vxp-line); }
:root[data-theme="dark"] #view-voice .vx-panel .ej-card { background: #22324a; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] #view-voice .vx-panel { display: contents; }
  html[data-view="voice"] #view-voice .vx-panel > * { order: 3; }
  html[data-view="voice"] #view-voice > .vx-parts { margin-bottom: 0; }
}
html.big-piano[data-view="voice"] #view-voice .vx-panel { display: contents; }
html.big-piano[data-view="voice"] #view-voice .vx-panel > * { order: 3; }
#vx-voices .chip[data-k="mine"] { border: 1.5px dashed var(--accent); font-weight: 700; }
/* V6.59 : l’indication « tournez le natel » seulement sur téléphone en portrait */
@media (orientation: landscape), (min-width: 700px) { html .rot-hint, html .rot-hint-s { display: none !important; } }
@media (pointer: fine) { html .rot-hint, html .rot-hint-s { display: none !important; } }
/* V6.59 : pastille Retour plus petite ; cadran d’exercice moins haut en paysage / grand piano */
html .nav-back { min-height: 24px; padding: 2px 10px; font-size: 12.5px; }
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="voice"] .ej-card { bottom: auto !important; max-height: calc(100vh - var(--vxph) - 20px); justify-content: flex-start !important; align-content: start !important; }
}
html.big-piano[data-view="voice"] .ej-card { bottom: auto !important; max-height: calc(100vh - var(--vxph) - 20px); justify-content: flex-start !important; align-content: start !important; }
html.menu-off body > .nav-back { position: fixed; z-index: 90; top: max(6px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); }
html.menu-off.big-piano body > .nav-back { top: 12px; left: 14px; }
html.menu-off .nav-back.nb-inline { position: static; flex: none; align-self: center; margin-right: 6px; }
/* V6.59 : pastilles du haut sur une ligne, même hauteur (le texte s’adapte) */
html .vx-top > .btn, html .inst-top > .btn, html #view-sounds .s-how-wrap > .btn { white-space: nowrap !important; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: clip; min-height: 32px !important; height: 32px; padding: 0 12px !important; line-height: 1 !important; display: inline-flex; align-items: center; justify-content: center; }
html .inst-top .inst-winds-pill { line-height: 1 !important; }
html body #view-sounds .s-head .s-how-wrap > .btn { white-space: nowrap !important; min-height: 32px !important; height: 32px; padding: 0 11px !important; line-height: 1 !important; font-size: 13px !important; }
html body .vx-top > .btn, html body .inst-top > .btn { font-size: 13.5px; }
html body .vx-top > .btn.s-howto, html body .inst-top > .btn.s-howto, html body #view-sounds .s-head .s-how-wrap > .btn.s-howto { flex: none; }
html body .inst-top > .btn.inst-winds-pill { font-size: 13.5px; }
/* V6.59 : logo à la hauteur des deux lignes « MusiCompanion » + titre de la page */
html .app-logo { width: 46px; height: 46px; border-radius: 11px; }
@media (max-height: 760px) { html .app-logo { width: 38px; height: 38px; border-radius: 9px; } }
/* V6.59 : 2e ligne du menu — largeur selon le texte (« Mes enregistrements » en entier), clé de sol plus grande et plus proche */
html .tabbar .nav-items:not([hidden]) .tab { flex: 1 1 auto !important; width: auto !important; min-width: 0; padding-left: 4px !important; padding-right: 4px !important; gap: 4px !important; }
html .tabbar .nav-items:not([hidden]) .tab[data-view="solfa"] { flex: 0 1 auto !important; gap: 1px !important; }
html .tabbar .nav-items .tab[data-view="solfa"] svg { width: 25px !important; height: 25px !important; margin-right: -2px; }
html .tabbar .nav-items .tab .tab-label { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* V6.59 : chronomètre d’une pièce — ligne fine clignotante tout en haut */
.piece-line { position: fixed; z-index: 120; top: 0; left: 0; right: 0; height: 3px; background: #e0703f; animation: navRecBlink 1.2s ease-in-out infinite; pointer-events: none; }
.piece-line[hidden] { display: none; }
.nav-side .nav-ses.piece-run:not(.run) svg { color: #e0703f !important; }
/* V6.59 : bouton Accueil bleu au-dessus de la colonne Index / Réglages / Chrono */
.tabbar.tabbar2 .nav-side { position: relative; overflow: visible; }
.nav-side .nav-home { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); z-index: 2; width: 30px; height: 18px; padding: 0; border: 0; border-radius: 9px; background: #1d3f73; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nav-side .nav-home svg { width: 12px; height: 12px; }
html[data-view="home"] .nav-side .nav-home { background: #c0562a; }
@media (max-width: 599px) {
html .tabbar .nav-items:not([hidden]) { justify-content: space-between !important; }
html .tabbar .nav-items:not([hidden]) .tab { flex: 0 1 auto !important; padding-left: 6px !important; padding-right: 6px !important; }
}
html .tabbar .nav-items:not([hidden]) .tab[data-view="solfa"] { margin: 0 2px; }
/* Réglages et Chrono : contenu centré verticalement, un peu d’air entre les icônes et le texte */
html .nav-side .ng[data-g="reglages"], html .nav-side .nav-ses { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding-top: 2px !important; padding-bottom: 2px !important; }
html .nav-side .nav-ses .tab-label, html .nav-side .nav-ses:not(.run):not(.paused):not(.piece-run) svg { color: #2f3540 !important; opacity: 1 !important; }
html .tabbar .nav-items .tab[data-view="progress"] .tab-label { max-width: 8.4em; }
/* V6.59 : Mon travail — calendrier dans un cadre bleu clair, mois à droite, jours plus plats */
#view-progress .cal-box { background: var(--vxp-bg) !important; border: 1px solid var(--vxp-line) !important; border-radius: 14px; padding: 8px 10px 10px !important; gap: 4px; }
#view-progress .cal-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#view-progress .cal-ttl { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
#view-progress .cal-ic { width: 22px; height: 22px; flex: none; }
#view-progress .cal-h { font-size: 16px; font-weight: 800; }
#view-progress .cal-head { grid-template-columns: 32px auto 32px; gap: 2px; }
#view-progress .cal-head .icon-btn { width: 32px; height: 32px; min-height: 0; }
#view-progress .cal-head .icon-btn svg { width: 16px; height: 16px; }
#view-progress .cal-head h2 { font-size: 15px; font-weight: 700; min-width: 7.6em; }
#view-progress .cal-dow span { font-size: 11px; }
#view-progress .cal { gap: 3px; margin-top: 2px !important; }
#view-progress .cal .day { aspect-ratio: auto; height: 34px; border-radius: 8px; }
#view-progress .cal .day .d { font-size: 13.5px; }
#view-progress .cal .day .m { font-size: 9.5px; min-height: 0; }
#view-progress .cal .day.today { border: 1.5px solid var(--accent); }
/* Envoi : même filet que les autres cadres */
html #view-progress .send-week { border: 1px solid #cdb994 !important; }
/* commentaires : texte d’exemple plus petit */
#day-note::placeholder { font-size: 12.5px; }
/* Cette semaine / Ce mois : entourés de bleu */
html body #view-progress .sum-card { border: 1.5px solid var(--accent) !important; box-shadow: none !important; }
html body #view-progress .sum-card h3 { color: var(--accent) !important; }
/* V6.59 : fin de séance — fenêtre plus petite */
.ses-sheet .ses-card { max-width: 360px; padding: 14px 14px 12px !important; }
.ses-sheet .ses-card .mg-title { font-size: 19px; margin: 2px 0 2px; }
.ses-sheet .ses-total { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.ses-sheet .ses-total b { font-size: 20px; color: var(--accent); }
html #ses-p1 .btn { min-height: 40px; font-size: 13.5px; }
html #ses-p1 .btn.ses-w { grid-column: 1 / -1; }
@media (min-width: 700px) { .ses-sheet { align-items: center; } }
/* V6.59 : Mes enregistrements — cadre bleu clair (le bouton reste blanc) */
html #view-recs .p-actions { background: var(--vxp-bg) !important; box-shadow: none !important; border: 1px solid var(--vxp-line) !important; }
html #view-recs .p-actions .btn { background: var(--surface) !important; }
/* V6.59 : Accordeur — tout à la même hauteur (44 px) de gauche à droite, pastilles carrées au milieu, textes plus petits */
html body .view.tuner .sec-temp .sel-row select, html body .view.tuner .inst-row > select { height: 44px !important; min-height: 44px !important; }
html body .view.tuner .temp-eq { height: 44px; min-width: 46px; width: 46px; padding: 0 2px; border-radius: 10px; }
html body .view.tuner .temp-eq b { font-size: 11.5px; line-height: 1.1; }
html body .view.tuner .temp-eq small { font-size: 8.5px; line-height: 1.1; }
html body .view.tuner .inst-row > .icon-btn { height: 44px !important; width: 46px !important; border-radius: 10px !important; }
html body .view.tuner .pg-open, html body .view.tuner .hw-open { height: 44px !important; min-height: 44px !important; max-height: 44px !important; font-size: 10.5px !important; line-height: 1.15 !important; padding: 2px 7px !important; border-radius: 10px !important; overflow: hidden; }
html body .view.tuner .inst-row > .hw-title { white-space: nowrap !important; justify-self: end; text-align: right; overflow: visible; }
/* Micro : les deux boutons de la même taille, alignés */
html body .view.tuner #mic-help-btn, html body .view.tuner #tuner-toggle { min-height: 40px !important; height: 40px; padding: 0 12px !important; font-size: 13px !important; line-height: 1.15 !important; align-self: center; white-space: normal; }
html body .view.tuner #mic-help-btn, html body .view.tuner #tuner-toggle { width: 132px; max-width: 34vw; font-size: 12px !important; padding: 0 6px !important; }
html body .view.tuner .inst-row > .hw-title { letter-spacing: 0 !important; }
html body .view.tuner .note-read #mic-help-btn, html body .view.tuner .note-read #tuner-toggle { width: 132px !important; min-width: 0 !important; max-width: 34vw !important; flex: none !important; }
/* V6.59 : Bourdons & Sons — titre de la page (comme dans le menu) quand l’en-tête est caché : paysage, grand piano */
#view-sounds .s-ttl { display: none; }
@media (orientation: landscape) and (max-height: 600px) { html[data-view="sounds"] #view-sounds .s-how-wrap .s-ttl { display: inline-block; } }
html.big-piano[data-view="sounds"] #view-sounds .s-how-wrap .s-ttl { display: inline-block; }
#view-sounds .s-how-wrap .s-ttl { margin-left: 22px; padding-left: 14px; border-left: 2px solid var(--line); font-size: 14px; color: var(--ink); white-space: nowrap; align-self: center; }
#view-sounds .s-how-wrap .s-ttl b { color: var(--accent); }
@media (orientation: landscape) and (max-height: 600px) {
  html body[class] #view-sounds .s-head, html body #view-sounds .s-head, html[data-view="sounds"] body #view-sounds > .s-head { grid-template-columns: auto minmax(0, 1fr) !important; grid-template-areas: "how how" "ctx play" !important; row-gap: 2px !important; }
  html[data-view="sounds"] #view-sounds .s-how-wrap .s-ttl { font-size: 13px; margin-left: 12px; padding-left: 10px; }
}
/* V6.59 : Accueil — « Chronométrer ma séance de travail » sur toute la ligne, Démarrer en dessous à droite */
html[data-view="home"] .home-chrono .hc-line:has(.hc-ses-sm) { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "lab lab" "sm row" "big big" !important; row-gap: 2px !important; }
html[data-view="home"] .home-chrono .hc-line:has(.hc-ses-sm) .hc-txt { display: contents !important; }
html[data-view="home"] .home-chrono .hc-line:has(.hc-ses-sm) .hc-lab { grid-area: lab; }
html[data-view="home"] .home-chrono .hc-line:has(.hc-ses-sm) .hc-ses-sm { grid-area: sm; margin-top: 0 !important; }
html[data-view="home"] .home-chrono .hc-line:has(.hc-ses-sm) .hc-big { grid-area: big; }
html[data-view="home"] .home-chrono .hc-line:has(.hc-ses-sm) .home-chrono-row { grid-area: row; align-self: end; }
/* Mon profil : même présentation que les deux autres tuiles, fond couleur du logo */
html[data-view="home"] #home-mode-btn { background: #f3ebdd !important; border-color: #e3d6bf !important; }
html[data-view="home"] #home-mode-btn .hm-line { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
html[data-view="home"] #home-mode-btn .hm-line b { font-weight: 700 !important; color: var(--ink) !important; font-size: 11.5px !important; }
html[data-view="home"] #home-mode-btn .hm-line small { display: block !important; line-height: 1.2 !important; margin: 0 !important; }
/* V6.60 : colonne Index / Réglages / Chrono jamais écrasée (page Réglages, sans 2e ligne de menu) */
html .tabbar.tabbar2 .nav-side .ng[data-g="reglages"], html .tabbar.tabbar2 .nav-side .nav-ses { min-height: 40px; flex: 1 0 auto !important; }
html .tabbar.tabbar2 .nav-side { min-height: 108px; }
.app-logo-link { display: inline-flex; flex: none; border-radius: 11px; } .app-logo-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ===== V6.61 ===== */
/* Boutons d’arrêt « doux » (micro, dictée, enregistrement, séance, Annuler) : blanc, texte et bord rouges */
html body button.is-stop-soft, html body .btn.is-stop-soft, html body .btn.primary.is-stop-soft, html body .note-btns .note-cancel, html body #ses-p1 .btn.danger-text { background: var(--surface) !important; border: 1.5px solid #9b3a36 !important; color: #9b3a36 !important; font-weight: 600 !important; box-shadow: none !important; }
html body button.is-stop-soft:hover, html body .note-btns .note-cancel:hover { background: #fbeceb !important; }
/* Retour : même rouge foncé que les boutons Stop */
html body .nav-back, html body .mg-back, html body .ret-bar { background: #9b3a36 !important; border-color: #9b3a36 !important; }
html body .nav-back:hover, html body .mg-back:hover { background: #87312e !important; }
/* Accueil : explication des chronomètres dans une pastille brune à droite du titre */
html .home-chrono .hc-text { flex: none; }
html .home-chrono .hc-note { flex: 1 1 0; min-width: 0; font-size: 10.5px; line-height: 1.25; color: #5f4526; background: #efe2cc; border: 1px solid #dcc7a4; border-radius: 14px; padding: 4px 10px; font-weight: 500; }
/* Bourdons & Sons (paysage, grand piano) : boutons du mode pas plus hauts que Piano / Orgue */
@media (orientation: landscape) and (max-height: 600px) {
  html[data-view="sounds"] body #view-sounds #s-reset, html[data-view="sounds"] body #view-sounds #s-temps { height: 34px !important; min-height: 34px !important; max-height: 34px; padding: 0 8px !important; line-height: 1.1 !important; overflow: hidden; }
}
html.big-piano[data-view="sounds"] body #view-sounds #s-reset, html.big-piano[data-view="sounds"] body #view-sounds #s-temps { height: 34px !important; min-height: 34px !important; max-height: 34px; padding: 0 8px !important; line-height: 1.1 !important; overflow: hidden; }
/* Menu : Home dans la colonne de droite, comme Index ; 4 boutons espacés régulièrement ; « Menu » centré et cliquable */
html .tabbar.tabbar2 .nav-side { min-height: 112px; gap: 4px !important; justify-content: space-between; }
html .nav-side .nav-home { position: static !important; transform: none !important; flex: 0 0 20px !important; height: 20px !important; width: 100%; border-radius: 8px !important; background: #e4d7c1 !important; color: #1f2a44 !important; display: inline-flex; align-items: center; justify-content: center; gap: 3px; font: inherit; font-size: 10px; font-weight: 600; padding: 0; border: 0; cursor: pointer; }
html .nav-side .nav-home svg { width: 11px; height: 11px; color: #2f3540; }
html[data-view="home"] .nav-side .nav-home { background: #dbe6f5 !important; box-shadow: inset 0 0 0 1.5px #1d3f73; color: #1d3f73 !important; }
html .nav-side .nav-index { flex: 0 0 20px !important; height: 20px !important; }
html .tabbar.tabbar2 .nav-side .ng[data-g="reglages"], html .tabbar.tabbar2 .nav-side .nav-ses { min-height: 30px; flex: 1 1 0 !important; }
html .nav-menu-lab { pointer-events: auto !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; height: 17px; padding-top: 1px; }
/* Menu, 2e ligne : 3 cases bien réparties, contenu centré dans la pastille, même taille et même graisse de texte partout */
html body .tabbar .nav-items:not([hidden]) { display: grid !important; grid-template-columns: repeat(3, minmax(0, auto)) !important; justify-content: space-evenly !important; align-items: stretch; column-gap: 4px !important; }
html body .tabbar .nav-items:not([hidden]) .tab { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 3px 7px !important; min-width: 0; width: auto !important; margin: 0 !important; }
html body .tabbar .nav-items .tab .tab-label, html body .tabbar .nav-items .tab[aria-selected="true"] .tab-label { font-size: 10.5px !important; font-weight: 600 !important; text-align: left; }
html body .tabbar .nav-items .tab[data-view="progress"] .tab-label { max-width: 6.9em; }
@media (min-width: 600px) {
  html body .tabbar .nav-items:not([hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; justify-content: stretch !important; }
  html body .tabbar .nav-items .tab .tab-label, html body .tabbar .nav-items .tab[aria-selected="true"] .tab-label { font-size: 12px !important; }
  html body .tabbar .nav-items .tab[data-view="progress"] .tab-label { max-width: none; }
}
@media (max-width: 599px) {
  html body .tabbar .nav-items:not([hidden]) { column-gap: 2px !important; padding-left: 2px !important; padding-right: 2px !important; }
  html body .tabbar .nav-items:not([hidden]) .tab { padding: 3px 4px !important; gap: 3px !important; }
  html body .tabbar .nav-items .tab svg, html body .tabbar .nav-items .tab .tab-emo { flex: none; }
}
html .tabbar.tabbar2 .nav-side { min-height: 122px; }
html .nav-side .nav-ses svg { width: 15px !important; height: 15px !important; }
/* Accordeur : « Mes instruments » et le titre de l’Assistant sur la même ligne de base */
html body .view.tuner .inst-row > label, html body .view.tuner .inst-row > .hw-title { align-self: end !important; line-height: 1.2 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* Chanter juste : le cadre bleu clair entoure seulement le titre de la partie et son explication (relié à l’onglet) */
html body #view-voice .vx-panel { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
html body #view-voice > .vx-parts { margin-bottom: -13px !important; }
#view-voice .vx-phead { display: flex; flex-direction: column; gap: 6px; background: var(--vxp-bg); border: 1px solid var(--vxp-line); border-radius: 0 0 14px 14px; padding: 10px 12px 12px; }
#view-voice .vx-phead > * { margin: 0 !important; }
html #view-voice .vx-panel .ej-card { background: #eaf1fb; }
@media (orientation: landscape) and (max-height: 600px) { html[data-view="voice"] #view-voice .vx-phead { display: none !important; } }
html.big-piano[data-view="voice"] #view-voice .vx-phead { display: none !important; }
/* Cadran d’exercice en paysage / ordinateur : consigne centrée en hauteur, alignée à gauche */
@media (orientation: landscape) and (max-height: 600px) { html[data-view="voice"] #view-voice .ej-card .ej-instr { text-align: left !important; align-self: center !important; } }
html.big-piano[data-view="voice"] #view-voice .ej-card .ej-instr { text-align: left !important; align-self: center !important; }
html .vx-top > .vx-tq-open { margin-left: auto; } html.menu-off .vx-top { justify-content: flex-start; gap: 8px; }
html .home-chrono .hc-note { flex: 1 1 150px !important; }
html body .view.tuner .temp-eq { width: auto !important; min-width: 46px; padding: 0 4px !important; }
html body .view.tuner .temp-eq b { font-size: 11px; }
html body .home-choice.home-chrono { grid-template-columns: 30px auto minmax(0, 1fr) !important; }
html body .home-chrono .hc-note { grid-column: 3; justify-self: stretch; }
html body .home-chrono .hc-note { margin-left: 6px; }
/* ===== V6.62 ===== */
/* Chronomètres : pastille « Fonctionnement » (comme en haut des pages) qui affiche l’explication */
html body .home-choice.home-chrono { grid-template-columns: 30px auto 1fr !important; }
html body .home-chrono .hc-how { grid-column: 3; justify-self: end; min-height: 26px !important; height: 26px; padding: 0 10px !important; font-size: 12px !important; background: #f3ebdd !important; border-color: #e3d6bf !important; color: var(--ink) !important; }
html body .home-chrono .hc-note { grid-column: 1 / -1 !important; margin: 0 !important; background: #f8f3ea; border-color: #e3d6bf; color: var(--ink); font-size: 11.5px; }
html body .home-chrono .hc-note[hidden] { display: none !important; }
/* Accordeur : plus de place pour le choix du tempérament, pastilles verte et rose plus petites */
html body .view.tuner .sec-temp .sel-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; column-gap: 8px !important; }
html body .view.tuner .inst-row { grid-template-columns: minmax(0, 1.4fr) 46px minmax(0, 1fr) !important; column-gap: 6px !important; }
html body .view.tuner .pg-open, html body .view.tuner .hw-open { font-size: 9.5px !important; padding: 2px 5px !important; }
html body .view.tuner #temp-select, html body .view.tuner .inst-row > select { font-size: 13px !important; padding-left: 6px !important; padding-right: 2px !important; }
html body .view.tuner .temp-eq { padding: 0 5px !important; }
html body .view.tuner .temp-eq b { font-size: 10.5px; }
/* Micro : boutons plus petits et moins larges, même hauteur */
html body .view.tuner .note-read #mic-help-btn, html body .view.tuner .note-read #tuner-toggle { width: 108px !important; height: 34px !important; min-height: 34px !important; max-height: 34px; font-size: 11px !important; font-weight: 600 !important; padding: 0 5px !important; line-height: 1.1 !important; overflow: hidden; }
/* Bourdons & Sons : titre en noir, un peu plus grand ; « notes, intervalles, accords » inchangé */
html body #view-sounds .s-how-wrap .s-ttl b { color: var(--ink) !important; font-size: 16px; font-weight: 800; }
/* Chanter juste : même police pour les deux explications (13 px, noir) */
html body #view-voice .vx-phead .ej-lead, html body #view-voice .vx-phead .vx-part-sub { font-size: 13px !important; color: var(--ink) !important; line-height: 1.4; }
html body #view-voice .vx-phead .vx-ex-note { font-size: 12.5px !important; }
/* Chanter juste / piano en bas : fond qui cache ce qui défile derrière (côtés, dessous) et léger voile au-dessus */
html[data-view="voice"] #view-voice .vx-piano { box-shadow: 0 0 0 100vmax rgba(255,255,255,.94), 0 -14px 14px -4px rgba(255,255,255,.85) !important; clip-path: inset(-26px -100vmax -100vmax -100vmax); }
html[data-theme="dark"][data-view="voice"] #view-voice .vx-piano { box-shadow: 0 0 0 100vmax rgba(20,24,32,.94) !important; }
/* Petite flèche bleue « il y a encore du contenu plus bas » */
.scroll-hint { position: fixed; z-index: 60; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer; padding: 0; opacity: .9; }
.scroll-hint svg { width: 16px; height: 16px; }
.scroll-hint[hidden] { display: none !important; }
/* Menu, icônes — 1re ligne : brun foncé, en couleur seulement quand le groupe est choisi (trompette plus foncée) ;
   2e ligne : bleu foncé comme le texte */
html body .tabbar .nav-groups .ng .ng-ico, html body .tabbar .nav-groups .ng .ng-duo { filter: grayscale(1) brightness(.38) sepia(1) saturate(1.8) !important; color: #4a3420; }
html body .tabbar .nav-groups .ng .ng-ico svg { color: #4a3420 !important; }
html body .tabbar .nav-groups .ng[aria-selected="true"] .ng-ico, html body .tabbar .nav-groups .ng[aria-selected="true"] .ng-duo { filter: saturate(1.15) brightness(.82) !important; }
html body .tabbar .nav-groups .ng[aria-selected="true"] .ng-ico svg { color: #1d3f73 !important; }
html body .tabbar .nav-items .tab svg { color: #1d3f73 !important; }
html body .tabbar .nav-items .tab svg * { stroke: currentColor; }
html body .tabbar .nav-items .tab[data-view="solfa"] svg path { fill: #1d3f73 !important; stroke: none !important; }
html body .tabbar .nav-items .tab .tab-emo { filter: brightness(0) invert(19%) sepia(36%) saturate(2079%) hue-rotate(196deg) brightness(93%) contrast(92%) !important; }
/* Colonne de droite : pas plus haute que le menu ; Chrono sur une ligne, comme Home et Index ; Réglages compact */
html .tabbar.tabbar2 .nav-side { min-height: 0 !important; height: auto; gap: 4px !important; justify-content: space-between; }
html .tabbar.tabbar2 .nav-side .nav-ses { flex: 0 0 20px !important; min-height: 20px !important; height: 20px !important; flex-direction: row !important; gap: 3px !important; padding: 0 !important; }
html .nav-side .nav-ses svg { width: 11px !important; height: 11px !important; }
html .nav-side .nav-ses .tab-label { font-size: 10px !important; line-height: 1 !important; }
html .tabbar.tabbar2 .nav-side .ng[data-g="reglages"] { flex: 1 1 auto !important; min-height: 34px !important; gap: 1px !important; padding: 2px 0 !important; }
html .nav-side .ng[data-g="reglages"] .tab-label { line-height: 1 !important; margin-top: 0 !important; }
/* Grand piano (ordinateur) : « Quitter le grand piano » dans la ligne du haut ; cadran d’exercice plus bas, texte centré en hauteur */
html.big-piano .bigpiano-btn.bp-inline { position: static !important; background: var(--accent-soft) !important; color: var(--accent) !important; font-size: 12px; padding: 3px 10px; }
html.big-piano[data-view="voice"] body #view-voice .ej-card { top: 64px !important; }
html.big-piano[data-view="voice"] body #view-voice .ej-card .ej-instr, html.big-piano[data-view="voice"] body #view-voice .ej-card #ej-start { align-self: center !important; }
html.big-piano[data-view="voice"] body main, html.big-piano[data-view="sounds"] body main { padding-top: 10px !important; }
html.big-piano[data-view="voice"] body #view-voice .ej-card, html.big-piano[data-view="voice"] body #view-voice .vx-player { top: 56px !important; }
/* ===== V6.62 : unité typographique de l’application =====
   Titres de page (dans le contenu) : 16 px, gras, noir · Titres de section : 15 px, gras, bleu
   Explications : 13 px, normal, noir · Petites indications : 11,5 px, gris. En cas de doute : plus petit. */
html body .view .p-sec, html body #view-voice .vx-sec-h, html body #view-voice .vx-part-h.vx-numh, html body #view-progress .cal-h,
html body .view .rh-sec, html body #view-winds .hw-step, html body #view-history .comp-filter-h { font-size: 16px !important; font-weight: 800 !important; color: var(--ink) !important; }
html body .view .sf-h, html body #view-voice .ej-prog-h, html body #view-settings .set-sec, html body .view .rh-grp { font-size: 15px !important; font-weight: 800 !important; color: var(--accent) !important; }
html body .view p.hint, html body .view .mg-lead, html body .view .th-lead, html body .view .inst-intro, html body .view .vx-voice-note, html body .view .ej-lead, html body .view .vx-care, html body .mg .mg-lead { font-size: 13px !important; font-weight: 400 !important; line-height: 1.4; }
html body .view p.hint, html body .view .inst-intro, html body .view .vx-care { color: var(--ink) !important; }
html body .view:not(#view-home) :not(button):not(.chip):not(.btn):not(label) > small:not(.hc-kicker):not(.ej-rec), html body .view span.hint, html body .view .ses-line-sub, html body .view .ej-prog-sub, html body .view .note-dict-hint { font-size: 11.5px !important; color: var(--muted); }
html body #view-progress .encourage { font-size: 13px !important; }
html body .view .vx-ex-note { font-size: 12.5px !important; }
/* ===== V6.64 ===== */
/* Solfège : Index d’abord (pastille), puis les sections en mots gris cliquables */
html body .sf-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html body .sf-jump .sf-jump-idx { flex: none; min-height: 30px; padding: 2px 16px; }
html body .sf-jumpw { flex: 1 1 200px; font-size: 13px; color: var(--muted); line-height: 1.6; }
html body .sf-jumpl { border: 0; background: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent); text-underline-offset: 2px; }
html body .sf-jumpl:hover { color: var(--ink); }
/* Réglages : explication du profil entre parenthèses, en petit */
html body #view-settings .set-mods-why { font-size: 11.5px !important; color: var(--muted) !important; margin: 2px 0 6px; }
/* Chanter juste : l’explication de la voix sur fond gris (seul le lien reste bleu) */
html body #view-voice .vx-voice-note { background: var(--surface-2) !important; border-left-color: var(--line) !important; color: var(--ink) !important; }
/* Accordeur : « Programme » en sous-titre, à la taille du titre de l’Assistant */
html body .view.tuner .pg-col > .group-title { font-size: 10.5px !important; letter-spacing: 0 !important; }
/* Menu : maison de Home en bleu foncé ; « Menu » au milieu de la largeur ; sous-menu centré sous le menu principal */
html .nav-side .nav-home svg { color: #1d3f73 !important; }
html body .tabbar.tabbar2 > .nav-menu-lab { left: 50% !important; transform: translateX(-50%) !important; }
@media (max-width: 599px) {
  html body .tabbar.tabbar2 { padding-left: 6px !important; }
  html body .tabbar .nav-items:not([hidden]) { margin-right: 0 !important; margin-left: 0 !important; }
  html body .tabbar.tabbar2 .nav-side { margin-left: 4px !important; padding-left: 5px !important; }
}
@media (max-width: 599px) { html body .tabbar .nav-items:not([hidden]) { margin-right: -3px !important; } }
/* ===== V6.65 ===== */
/* Réglages : explications des cadres à la taille de « D’où viennent les tempéraments… » (sauf « Qui utilise ») */
html body #view-settings .set-card:not(.sc-child) p.hint, html body #view-settings .set-card:not(.sc-child) .hint, html body #view-settings .set-card:not(.sc-child) small, html body #view-settings .set-mods-why { font-size: 12.5px !important; color: var(--muted) !important; line-height: 1.35; }
/* Solfège : la pastille Index en blanc */
html body .sf-jump .sf-jump-idx { background: var(--surface) !important; color: #1d3f73 !important; }
/* Menu : maison de Home brune comme les autres icônes, bleue quand on est sur l’accueil */
html .nav-side .nav-home svg { color: #4a3420 !important; }
html[data-view="home"] .nav-side .nav-home svg { color: #1d3f73 !important; }
/* Chanter juste : « Votre tessiture » plus foncé (bleu, comme le résultat) ; le numéro 1 gris sauf pendant le test */
html body #view-voice .vx-range > span:first-child > span:first-child { color: var(--accent) !important; font-weight: 600; }
html body #view-voice .vx-sec-h.vx-numh .vx-num { background: #8a94a0 !important; }
html body #view-voice:has(#vx-test:not([hidden])) .vx-sec-h.vx-numh .vx-num { background: var(--accent) !important; }
#vx-voices .chip[data-k="mine"] { margin-left: 6px; }
/* Piano du bas : le fond ne recouvre plus le menu ni la pastille « Menu » */
html[data-view="voice"] #view-voice .vx-piano { clip-path: inset(-26px -100vmax 0 -100vmax) !important; }
html body .tabbar.tabbar2 { z-index: 60; }
/* Accordeur : plus d’air dans les cadres bleu, vert et rose pour utiliser la hauteur du natel */
@media (max-width: 599px) and (min-height: 700px) {
  html body .view.tuner .tsec { padding: 12px 12px !important; }
  html body .view.tuner .tune-set { gap: 12px !important; margin-top: 14px !important; }
  html body .view.tuner .readouts { margin-top: 8px; }
}
/* ===== V6.66 ===== */
/* Chanter juste : la consigne est dans le cadran bleu clair (plus de ligne « Consigne » au-dessus) */
html body #view-voice #ej-hint { display: none !important; }
html body #view-voice .ej-card .ej-instr { font-size: 14px !important; font-weight: 400 !important; line-height: 1.4; text-align: left; }
html body #view-voice .ej-card .ej-instr b { font-weight: 700; }
/* Chanter juste : numéro 1 comme les numéros des onglets (même taille, même gris) */
html body #view-voice .vx-sec-h.vx-numh .vx-num, html body #view-voice:has(#vx-test:not([hidden])) .vx-sec-h.vx-numh .vx-num { width: 20px !important; height: 20px !important; min-width: 20px; font-size: 12px !important; background: rgb(88, 103, 117) !important; color: #fff !important; }
/* Accordeur : petits titres (Programme, Assistant…) centrés sur la ligne des grands titres */
html body .view.tuner .inst-row > label, html body .view.tuner .inst-row > .hw-title { line-height: 16px !important; height: 16px; display: flex !important; align-items: center; align-self: end !important; }
html body .view.tuner .sel-row .group-title { line-height: 16px !important; display: block; }
html body .view.tuner .pg-col > .group-title { height: 16px; display: flex !important; align-items: center; justify-content: flex-end; }
html body .view.tuner .inst-row > .hw-title { justify-content: flex-end; }
/* ===== V6.67 ===== */
#view-settings .sc-feedback { display: flex; flex-direction: column; gap: 8px; }
#view-settings .sc-feedback .fb-btn { justify-content: flex-start; text-align: left; min-height: 40px; }

/* ---------- V6.70 : menu à cinq groupes — Jouer · Mon travail · Apprendre · Instruments · Explorer ---------- */
.tabbar .nav-groups { gap: 1px !important; }
.tabbar .nav-groups .ng { padding-left: 1px !important; padding-right: 1px !important; flex: 1 1 0 !important; }
.tabbar .nav-groups .ng .tab-label { font-size: 10px; letter-spacing: -.25px; }
@media (min-width: 600px) { .tabbar .nav-groups { gap: 3px !important; } .tabbar .nav-groups .ng .tab-label { font-size: 12px; letter-spacing: 0; } }
/* Apprendre : clé de sol seule */
.ng-learn { display: inline-flex !important; align-items: center; justify-content: center; gap: 1px; }
html body .tabbar .ng-learn > svg.clef-ico { width: 9.4px !important; height: 22px !important; display: block; color: #4a3420; }
html body .tabbar .nav-groups .ng[aria-selected="true"] .ng-learn > svg.clef-ico { color: #1d3f73 !important; }
/* profils : groupes cachés */
.door-student .tabbar .ng[data-g="instruments"],
.door-pro .tabbar .ng[data-g="apprendre"],
.door-sing .tabbar .ng[data-g="instruments"], .door-sing .tabbar .ng[data-g="explorer"] { display: none !important; }
.door-pro .tab[data-view="solfa"] { display: none !important; }

/* V6.70 : plan du menu (ex-plan de l'application) — arborescence horizontale (groupe → pages) */
.aix-plan { margin: 4px 0 14px; }
.aix-sec { font-size: 15px; font-weight: 700; color: #1d3f73; margin: 6px 0 2px; }
.pl-tree { position: relative; padding-left: 12px; display: flex; flex-direction: column; gap: 7px; }
.pl-tree::before { content: ""; position: absolute; left: 3px; top: 18px; bottom: 18px; width: 2px; background: #c9b18f; border-radius: 1px; }
.pl-row { position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; }
.pl-row::before { content: ""; position: absolute; left: -9px; top: 50%; width: 9px; height: 2px; background: #c9b18f; }
.pl-g, .pl-t { font: inherit; cursor: pointer; display: flex; align-items: center; gap: 5px; text-align: left; border-radius: 10px; }
.pl-g { flex-direction: column; justify-content: center; gap: 2px; text-align: center; padding: 5px 3px; min-height: 52px; background: #f3ebdd; border: 1.5px solid #c9b18f; color: #2f3540; font-size: 11.5px; font-weight: 700; line-height: 1.15; }
.pl-g .pl-ico { display: inline-flex; align-items: center; gap: 1px; font-size: 18px; line-height: 1; filter: grayscale(1) brightness(.38) sepia(1) saturate(1.8); color: #4a3420; }
.pl-g .pl-ico > svg { width: 20px; height: 20px; }
.pl-g .pl-learn > svg { width: 8.5px; height: 20px; }
.pl-g.is-cur { background: #dbe6f5; border-color: #1d3f73; color: #1d3f73; }
.pl-subs { position: relative; list-style: none; margin: 0 0 0 16px; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 4px; }
.pl-subs::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: #b9cbe8; border-radius: 1px; }
.pl-subs li { position: relative; }
.pl-subs li::before { content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 2px; background: #b9cbe8; }
.pl-row > .pl-subs::after { content: ""; position: absolute; left: -16px; top: 50%; width: 16px; height: 2px; background: #b9cbe8; }
.pl-t { width: 100%; padding: 4px 8px; min-height: 28px; background: #eef4fc; border: 1px solid #b9cbe8; color: #1d3f73; font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.pl-t .pl-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 17px; font-size: 14px; line-height: 1; }
.pl-t .pl-ico > svg { width: 16px; height: 16px; }
.pl-t.is-cur { background: #dbe6f5; border-color: #1d3f73; box-shadow: inset 0 0 0 1px #1d3f73; }
.pl-side { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 0 0; }
.pl-side-h { flex: 1 0 100%; font-size: 11.5px; color: var(--muted); }
.pl-side .pl-s { width: auto; background: #f3ebdd; border-color: #c9b18f; color: #2f3540; }
.pl-side .pl-s .pl-ico { filter: grayscale(1) brightness(.38) sepia(1) saturate(1.8); color: #4a3420; }
@media (max-width: 599px) { .tabbar .nav-groups .ng .tab-label { letter-spacing: -.4px; } }
.pl-t .pl-ico:not(:has(svg)) { filter: brightness(0) invert(19%) sepia(36%) saturate(2079%) hue-rotate(196deg) brightness(93%) contrast(92%); }
/* V6.70 : les pages cachées par le profil restent cachées dans la 2e ligne du menu */
html body .hide-instr .tabbar .nav-items .tab[data-view="tuner"], html body .hide-instr .tabbar .nav-items .tab[data-view="instruments"],
html body .hide-myinst .tabbar .nav-items .tab[data-view="instruments"], html body .hide-winds .tabbar .nav-items .tab[data-view="winds"],
html body .hide-voice .tabbar .nav-items .tab[data-view="voice"], html body .hide-rhythm .tabbar .nav-items .tab[data-view="rhythm"],
html body .hide-hist .tabbar .nav-items .tab[data-view="history"], html body .door-pro .tabbar .nav-items .tab[data-view="solfa"],
html body .door-student .tabbar .nav-items .tab[data-view="programme"], html body .door-sing .tabbar .nav-items .tab[data-view="programme"] { display: none !important; }

/* ---------- V6.71 : Mon travail — minutes en vert (25′), légende du point bleu, cadre de la durée plus court ---------- */
#view-progress .cal .day .m { color: #1f7a4a !important; font-weight: 800; font-size: 10px; }
#view-progress .cal .day.l3 .m { color: #d6f7e2 !important; }
.cal-note { margin: 4px 2px 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.cal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle; margin: 0 4px 2px 2px; }
#view-progress .cal-sing { margin-bottom: 0; }
/* durée : nombre de minutes sur une ligne, barre plus courte */
#view-progress #day-panel .s-row:has(> .day-min) { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
#view-progress .day-min { font-size: 20px !important; white-space: nowrap; min-width: 64px !important; }
#view-progress #day-panel .dur-ctl { max-width: 230px; justify-self: end; width: 100%; }
#view-progress #day-panel .day-head { align-items: center; }
#view-progress #day-panel .day-clear { font-size: 11.5px !important; max-width: 128px; line-height: 1.2; padding: 4px 8px !important; }

/* V6.72 : pastilles « Plan du menu » · « Index » en haut de la page */
.aix-tabs { display: flex; justify-content: center; gap: 8px; margin: 4px 0 10px; }
.aix-tab { font: inherit; font-size: 15px; font-weight: 700; padding: 7px 16px; border-radius: 999px; border: 1.5px solid #b9cbe8; background: #fff; color: #1d3f73; cursor: pointer; }
.aix-tab[aria-selected="true"] { background: #dbe6f5; border-color: #1d3f73; box-shadow: inset 0 0 0 1px #1d3f73; }
.aix-part[hidden] { display: none !important; }
/* V6.73 : légende « 15′ = nombre de minutes de travail » */
.cal-min { display: inline-block; font-size: 12px; font-weight: 800; color: #1f7a4a; margin: 0 4px 0 2px; }
#view-progress .cal-minl { margin-top: 6px; }
#view-progress .cal-sing { margin-top: 2px; }
.sf-lex dt .ex-tag { font-weight: 400; color: var(--muted); font-size: .85em; }
/* V6.74 : index sur trois niveaux bien visibles (groupe › page › parties et exercices) */
.aix-list .aix-l1 { padding-left: 20px; }
.aix-list .aix-l2 { padding-left: 46px; font-size: 13.5px; position: relative; }
.aix-list .aix-l2::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 2px; background: #b9cbe8; }
/* V6.77 : « Je veux voir tous les outils » — contour plus foncé */
.door-sheet .door-all { border: 2px solid #3a3f47 !important; color: #1f2a44; font-weight: 700; }
/* V6.78 : parenthèse sous « Envoyer mon audio » */
.sw-aud-copy { margin: 4px 2px 6px; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.sw-copy-ic { width: 15px; height: 15px; vertical-align: -3px; margin: 0 1px; color: #1d3f73; }
/* V6.79 : parenthèse collée sous le bouton WhatsApp de l’audio, à gauche seulement */
.send-sheet .sw-aud { align-items: flex-start; }
.sw-wa-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.send-sheet .sw-wa-col > .btn { flex: none !important; width: 100%; }
.sw-aud > .btn[data-w="aud-mail"] { align-self: flex-start; }
.sw-aud-copy { margin: 3px 2px 0 !important; font-size: 11px !important; line-height: 1.25 !important; }
.send-sheet .sw-aud > .sw-wa-col, .send-sheet .sw-aud > .btn { flex: 0 0 calc(50% - 3px) !important; max-width: calc(50% - 3px); box-sizing: border-box; }
/* V6.80 : « Ajouter un instrument » à côté du titre de la liste, pas sur toute la largeur */
.inst-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 2px; }
.inst-list-head .inst-h { margin: 0 !important; flex: 1 1 auto; min-width: 0; }
.inst-page .inst-add-top { flex: none; width: auto !important; min-height: 32px; padding: 4px 12px !important; font-size: 13px !important; white-space: nowrap; }
.inst-page .inst-add-top { font-size: 12px !important; padding: 3px 10px !important; min-height: 30px; }
html .inst-page .inst-list-head .inst-h { font-size: clamp(12.5px, 3.6vw, 16px); }
/* V6.81 : Assistant vents — Fonctionnement en haut à gauche, export PDF */
#view-winds .hw-top { display: flex; justify-content: flex-start; margin: 0 0 6px; }
.hw-how-lead { font-size: 13px; margin: 0 0 6px; }
.hw-how-list { padding-left: 20px; }
.hw-pdf-row { margin: 6px 0 2px; }
.hw-pdf { width: auto !important; }
/* V6.83 : roulette du diapason pour le PDF du scan justesse */
.hw-pa-pick { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.hw-pa-pick select { width: auto !important; min-width: 120px; font-size: 15px; padding: 4px 8px; }
/* V6.85 : « Votre diapason » comme une pastille, dans la rangée des diapasons */
.hw-pa .hw-pa-sel { width: auto !important; appearance: none; -webkit-appearance: none; background-image: none; padding-right: 12px; cursor: pointer; font: inherit; }
.hw-pa .hw-pa-sel[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
.hw-pdf-row { margin-top: 6px; }
.hw-pa .hw-pa-sel { font-weight: 700; }
/* V6.86 : titre de page toujours entier */
.pb-compact .prof-badge .pb-txt { display: none; }
.pb-compact .prof-badge { padding: 0 5px !important; }
.view-title.vt-wrap { white-space: normal !important; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }
.topbar-left > div { min-width: 0; }
/* V6.89 : essai « Scanner une partition » */
.sc-sheet .sc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.sc-sheet .sc-pick { cursor: pointer; }
.sc-sheet .sc-lab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; margin: 6px 0; }
.sc-sheet .sc-lab input[type="text"] { width: 140px; }
.sc-sheet .sc-lab input[type="range"] { flex: 1 1 140px; }
.sc-sheet .sc-h { font-size: 15px; font-weight: 700; color: #1d3f73; margin: 10px 0 2px; }
.sc-sheet .sc-msg.sc-bad { color: #b3261e; }
.sc-sheet .sc-pos { font-weight: 700; color: #1d3f73; }

/* V6.93 : compte obligatoire à la première ouverture (fenêtre de bienvenue) et code membre fondateur */
.login-gate .mg-x, .login-gate .mg-backbar { display: none; }
.login-gate .mg-card { max-height: calc(100dvh - 24px); overflow-y: auto; gap: 8px; }
.gate-logo { display: block; width: 64px; height: 64px; margin: 0 auto 2px; border-radius: 14px; }
.login-gate .mg-title { margin-bottom: 8px; }   /* V6.94 : espace avant le texte */
.login-gate .mg-lead.gate-lead { font-size: 14px; line-height: 1.28; }
.login-gate #login-msg:empty { display: none; }
.gate-list { margin: 2px 0 6px; padding-left: 18px; font-size: 13px; line-height: 1.28; color: var(--ink); text-align: left; }
.gate-list li { margin: 1px 0; }
.gate-sub { font-size: 11.5px; line-height: 1.3; color: var(--muted, #6b6b6b); margin: 4px 0 0; text-align: left; }
.login-gate .login-form { gap: 6px; }
.login-gate .login-form input { font-size: 16px; padding: 9px 12px; }
.gate-founder-lab span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.login-form input#login-founder { letter-spacing: .06em; text-transform: uppercase; }
.gate-send { min-height: 52px; height: auto; padding: 10px 14px; font-size: 15px; line-height: 1.25; white-space: normal; text-align: center; margin-top: 6px; }
.acct-founder { margin-top: 10px; }
.acct-founder-row { display: flex; gap: 8px; align-items: center; }
.acct-founder-row input { flex: 1; min-width: 0; font: inherit; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }

/* V6.95 : « Mon travail », version enfant — objectif de la semaine, étoiles, série en semaines, petite fête, page allégée */
.kid-only { display: none !important; }
html.kid .kid-only { display: block !important; }
html.kid #view-progress .ses-line-sub, html.kid #note-dict-hint { display: none !important; }
.kid-goal { border: 2px solid #f4b400; background: #fffaf0; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.kid-goal.done { background: #fff4d6; }
.kg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kg-title { font-size: 15px; font-weight: 700; color: #1f5aa6; }
.kg-edit { font-size: 12px; min-height: 30px; padding: 4px 10px; }
.kg-txt { margin: 0; font-size: 13px; color: var(--ink); }
.kg-set { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; }
.kg-set label { display: flex; align-items: center; gap: 6px; }
.kg-set select { font: inherit; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.kg-hint { margin: 0; width: 100%; font-size: 11.5px; color: var(--muted); }
.kg-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.kgd { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 5px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); }
.kgd small { font-size: 11px; font-weight: 700; color: var(--muted); }
.kgd i { font-style: normal; font-size: 18px; line-height: 20px; height: 20px; font-weight: 800; color: #1f7a4a; }
.kgd.ok { background: #fff1c2; border-color: #f4b400; }
.kgd.ok i { color: #e0a000; }
.kgd.part { background: #eaf5ee; border-color: #9ccfb0; }
.kgd.today { box-shadow: 0 0 0 2px var(--accent) inset; }
.kgd.future { opacity: .45; }
.kg-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, #f4b400 18%, var(--surface)); overflow: hidden; }
.kg-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #f4b400, #f08c00); transition: width .5s ease; }
.kg-count { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 13px; }
.kg-streak { color: #b07a00; font-weight: 700; }
#view-progress .cal .day .m .ks { font-style: normal; color: #e0a000; margin-right: 1px; }
#view-progress .cal .day.l3 .m .ks { color: #ffd34d; }
.cal-star { color: #e0a000; font-weight: 800; font-size: 14px; margin-right: 4px; }
.kid-party { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: auto; overflow: hidden; }
.kid-party:not(.big) { pointer-events: none; place-items: start center; padding-top: 18vh; }
.kp-msg { position: relative; z-index: 2; max-width: 86vw; padding: 14px 20px; border-radius: 18px; background: #fff; color: #1d2733; font-size: 18px; font-weight: 800; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); border: 3px solid #f4b400; animation: kp-pop .45s cubic-bezier(.2,1.6,.4,1) both; }
.kid-party:not(.big) .kp-msg { font-size: 15px; padding: 10px 16px; }
.kid-party i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: kp-fall 2.6s linear forwards; }
@keyframes kp-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes kp-fall { from { transform: translateY(0) rotate(var(--r, 0deg)); } to { transform: translateY(105vh) rotate(calc(var(--r, 0deg) + 540deg)); } }
@media (prefers-color-scheme: dark) { .kid-goal { background: #2a2414; } .kid-goal.done { background: #3a2f10; } .kgd.ok { background: #4a3a10; } .kgd.part { background: #1d3527; } .kp-msg { background: #1d2733; color: #fff; } }


/* V7.02 : Mon travail — « Effacer la durée » retiré, objectif A ou B, calendrier jaune (enfant), page plus compacte */
#min-clear { display: none !important; }
.ses-piece { margin-left: 8px; vertical-align: middle; font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px; border: 1px solid #b9a3e0; background: #fff; color: #5b3fa0; cursor: pointer; white-space: nowrap; }
.kid-goal { gap: 4px; padding: 7px 10px; }
.kg-head { flex-wrap: wrap; gap: 2px 8px; }
.kg-txt { font-size: 12.5px; color: var(--ink); flex: 1 1 auto; }
.kg-edit { min-height: 28px; padding: 2px 10px; }
.kg-set { flex-direction: column; align-items: stretch; gap: 4px; }
.kg-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.kg-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kg-opt b { color: #1f5aa6; }
.kg-mix { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); margin-left: auto; }
.kg-hint { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.kgd { padding: 2px 0 3px; gap: 0; }
.kgd i { height: 22px; line-height: 22px; }
.kg-bar { height: 8px; }
.kg-count { font-size: 12.5px; }
/* calendrier enfant : même jaune que l’objectif ; jours travaillés en jaune foncé, autres en blanc */
html.kid #view-progress .cal-box { background: #fffaf0; border: 2px solid #f4b400; }
html.kid #view-progress .cal .day { background: #fff; border-color: #e8dcc0; color: var(--ink); }
html.kid #view-progress .cal .day.kworked { background: #fff1c2 !important; border-color: #f4b400 !important; }
html.kid #view-progress .cal .day.kworked .m { color: #1f7a4a !important; }
html.kid #view-progress .cal .day .m .ks { color: #e0a000; }
/* page plus compacte */
#view-progress #day-panel { padding-top: 8px; padding-bottom: 8px; }
#view-progress #day-panel .s-row { margin-top: 4px; }
#view-progress #day-panel .note-box { margin-top: 4px; }
#view-progress #day-panel #day-note { min-height: 44px; }
html.kid #view-progress .ses-line { padding-top: 6px; padding-bottom: 6px; }
@media (prefers-color-scheme: dark) { html.kid #view-progress .cal-box { background: #2a2414; } html.kid #view-progress .cal .day { background: #1d2733; } html.kid #view-progress .cal .day.kworked { background: #4a3a10 !important; } }
html.kid #view-progress .panel.cal-box { background: #fffaf0 !important; border: 2px solid #f4b400 !important; }
html.kid #view-progress .cal .day.empty { background: transparent !important; border: 0 !important; }
/* V7.02 : page Mon travail plus compacte (on voit le haut du calendrier) */
#view-progress > .panel, #view-progress > .ses-line { margin-top: 6px; margin-bottom: 0; }
#view-progress #day-panel .s-row { min-height: 0; }
#view-progress #min-value { font-size: 20px; }
#view-progress #day-panel .icon-btn.small { width: 34px; height: 34px; min-height: 34px; }
#view-progress #day-note { min-height: 38px !important; height: 38px; font-size: 14px; }
#view-progress .note-btns .btn { min-height: 30px; padding: 3px 10px; font-size: 13px; }
#view-progress .note-head .btn.small { min-height: 30px; padding: 3px 10px; }
#view-progress .summary .sum-card { padding-top: 4px; padding-bottom: 4px; }
#view-progress .summary .sum-card .big { font-size: 18px; }

.kg-head { flex-wrap: nowrap; }
.kg-txt { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.kgd { padding: 1px 0 2px; border-radius: 8px; }
.kgd small { font-size: 10px; line-height: 12px; }
.kgd i { height: 20px; line-height: 20px; font-size: 16px; }
.kg-count { line-height: 1.25; }
.ses-piece { margin: 0 6px; align-self: center; }
#view-progress #day-panel { gap: 4px; }
#view-progress #day-panel .day-head { margin-bottom: 0; }
/* V7.02 : encore plus compact */
#view-progress .ses-line { min-height: 0 !important; row-gap: 2px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
#view-progress .ses-line .btn { min-height: 30px !important; padding: 2px 10px !important; font-size: 13px !important; }
#view-progress .ses-line-time { font-size: 18px !important; margin-left: 30px; }
#view-progress .ses-line-lab { font-size: 16px !important; }
.kid-goal { gap: 3px; padding: 6px 10px; }
.kg-title { font-size: 15px; }
#view-progress #day-panel { padding: 6px 10px !important; }
#view-progress #day-panel .group-title { font-size: 15px; margin: 0; }
#view-progress #day-panel .s-row { margin-top: 2px !important; }
#view-progress .day-min { font-size: 20px !important; }
#view-progress .note-box { gap: 2px; }
#view-progress .note-btns { gap: 4px; }
#view-progress .note-btns .btn { min-height: 28px !important; padding: 2px 8px !important; font-size: 12.5px !important; line-height: 1.15; }
.p-intro { margin-bottom: 0; }
.kg-now { margin: 0; font-size: 12.5px; }
.kg-now .kg-txt { color: var(--ink); font-weight: 700; font-size: 12.5px; }
.kg-edit { min-height: 28px !important; height: 28px; padding: 0 10px !important; font-size: 13px; }
.kg-count { flex-wrap: nowrap; }
.kg-streak { font-size: 12px; white-space: nowrap; }
#view-progress .ses-line-time { margin-left: 30px !important; min-width: 0 !important; }
#view-progress .ses-piece { font-size: 11px; padding: 3px 7px; margin: 0 4px; }
#view-progress .ses-line .ses-line-main { margin-left: auto; }
@media (max-width: 400px) { #view-progress .ses-line-time { margin-left: 4px !important; } }
/* V7.02 : réglages de l'objectif compacts (A sur une ligne, B sur la deuxième) */
#kid-goal .kg-opt { flex-wrap: nowrap; white-space: nowrap; }
#kid-goal .kg-set select { width: auto !important; min-width: 0 !important; max-width: none; height: 28px; min-height: 0; padding: 0 4px; font-size: 13px; display: inline-block; flex: 0 0 auto; }
#kid-goal .kg-line { flex-wrap: wrap; }
#kid-goal .kg-mix { white-space: normal; max-width: 150px; line-height: 1.2; }
#kid-goal .kg-mix { max-width: none; white-space: nowrap; margin-left: 30px; }
/* V7.02 : commentaires — Dicter, Enregistrer, Effacer en colonne à droite ; plus de ligne de titre */
#view-progress { gap: 8px; }
#view-progress .note-edit { align-items: stretch; }
#view-progress #day-note { height: auto !important; min-height: 88px !important; }
#view-progress .note-btns { display: flex; flex-direction: column; gap: 3px; width: 128px; flex: 0 0 128px; }
#view-progress .note-btns .btn { width: 100%; min-height: 27px !important; padding: 2px 6px !important; font-size: 12px !important; justify-content: center; }
#view-progress .note-btns #note-dictate svg { width: 14px; height: 14px; }
#view-progress #day-panel .icon-btn.small { width: 30px; height: 30px; min-height: 30px; }
#view-progress .summary { margin-bottom: 0; }
#view-progress.view { gap: 8px !important; }
#view-progress .note-btns { width: 142px; flex-basis: 142px; }
#view-progress .note-btns .btn { white-space: nowrap; font-size: 11.5px !important; min-height: 26px !important; }
#view-progress #day-note { min-height: 84px !important; }
#view-progress > * { margin-top: 0 !important; margin-bottom: 0 !important; }
#view-progress #day-panel .s-row + .s-row { min-height: 0; height: 32px; }
#view-progress .summary .sum-card { padding-top: 2px !important; padding-bottom: 2px !important; }
#view-progress .note-head .s-lab { display: none; }
#view-progress .note-head { min-height: 0 !important; margin: 0 !important; }
#view-progress #day-panel .note-btns .btn { font-size: 11.5px !important; padding: 2px 4px !important; letter-spacing: -0.1px; }
#view-progress #note-dictate { display: inline-flex; align-items: center; gap: 4px; }
#view-progress #note-dictate[hidden] { display: none; }
#view-progress #note-dictate.recording { background: var(--surface); color: var(--bad); border-color: var(--bad); }
#view-progress .note-btns { width: 152px; flex-basis: 152px; }
/* V7.02 : page ouverte depuis la recherche — mise en évidence d'une demi-seconde */
.aix-page { animation: aixPage .7s ease; border-radius: 8px; }
@keyframes aixPage { 0%, 60% { background: #fff36b; box-shadow: 0 0 0 4px #ffe600; } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } }
.aix-page-box { animation: aixPageBox .7s ease; }
@keyframes aixPageBox { 0%, 60% { box-shadow: inset 0 0 0 4px #ffe600; } 100% { box-shadow: inset 0 0 0 0 transparent; } }
/* V7.03 : « Chanter une mélodie » — une vraie page */
.vx-part-melo { grid-column: 1 / -1; }
.melo-sheet { padding: 0 !important; align-items: stretch !important; background: var(--bg, #f6f8fb); }
.melo-sheet .mg-card.ml-card { max-width: 760px; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; box-shadow: none; gap: 5px; padding: 6px 14px max(14px, env(safe-area-inset-bottom)); margin: 0 auto; }
.ml-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2; padding-right: 36px; }
.ml-top { display: flex; align-items: flex-start; gap: 8px; }
.ml-top .s-howto { flex: none; min-height: 26px !important; padding: 1px 10px; font-size: 12px; }
.tip-pill { display: inline-flex; align-items: baseline; gap: 6px; text-align: left; font: inherit; font-size: 12px; line-height: 1.3; background: #fff6d6; border: 1px solid #f1d27a; border-radius: 999px; padding: 3px 11px; color: var(--ink); cursor: pointer; min-height: 26px; }
.tip-pill > b { color: #c0362c; font-weight: 800; }
.tip-pill .tip-body { display: none; }
.tip-pill[aria-expanded="true"] { border-radius: 12px; display: block; }
.tip-pill[aria-expanded="true"] .tip-body { display: inline; }
.ml-howbox { background: #f3ebdd; border-radius: 12px; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; }
.ml-howbox ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.ml-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ml-lab { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ml-gs { flex-wrap: nowrap; gap: 5px; }
.ml-gs .chip { min-height: 28px; padding: 2px 10px; font-size: 13px; }
.ml-ds .chips { flex-wrap: nowrap; gap: 4px; }
.ml-ds .chip { min-width: 34px; min-height: 28px; padding: 2px 8px; font-size: 13px; }
.ml-lvtxt { margin: 0; font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.ml-staff { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 2px 4px 0; }
.ml-count { position: absolute; top: 2px; right: 8px; font-size: 30px; font-weight: 900; color: #1f5aa6; line-height: 1; background: rgba(255,255,255,.85); border-radius: 8px; padding: 0 6px; z-index: 1; }
.ml-count:empty { display: none; }
.ml-svg { display: block; width: 100%; height: auto; }
.ml-svg .st { stroke: #3a4250; stroke-width: 1; }
.ml-svg .bar { stroke: #3a4250; stroke-width: 1.2; }
.ml-svg .barfin { fill: #3a4250; }
.ml-svg .clef, .ml-svg .nh, .ml-svg .dot { fill: #1d2733; }
.ml-svg .nh.open { fill: #fff; stroke: #1d2733; stroke-width: 1.5; }
.ml-svg .stem { stroke: #1d2733; stroke-width: 1.3; }
.ml-svg .flag { stroke: #1d2733; stroke-width: 1.8; fill: none; }
.ml-svg .beam { stroke: #1d2733; stroke-width: 3.4; }
.ml-svg .acc { font: 700 15px serif; fill: #1d2733; }
.ml-svg .tsig { font: 900 15px Georgia, serif; fill: #1d2733; }
.ml-svg .ml-name { font: 700 9.5px var(--font, sans-serif); fill: #1f5aa6; }
.ml-svg .ml-cur { fill: #ffe9a8; }
.ml-svg .p-ok { fill: #1f9a52; } .ml-svg .nh.open.p-ok { fill: #fff; stroke: #1f9a52; stroke-width: 2.2; }
.ml-svg .p-hi, .ml-svg .p-lo { fill: #e08a00; } .ml-svg .nh.open.p-hi, .ml-svg .nh.open.p-lo { fill: #fff; stroke: #e08a00; stroke-width: 2.2; }
.ml-svg .p-bad { fill: #d0342c; } .ml-svg .nh.open.p-bad { fill: #fff; stroke: #d0342c; stroke-width: 2.2; }
.ml-svg .p-none { fill: #9aa3ad; } .ml-svg .nh.open.p-none { fill: #fff; stroke: #9aa3ad; stroke-width: 2.2; }
.ml-svg .stem.p-ok, .ml-svg .flag.p-ok { stroke: #1f9a52; } .ml-svg .stem.p-hi, .ml-svg .stem.p-lo, .ml-svg .flag.p-hi, .ml-svg .flag.p-lo { stroke: #e08a00; } .ml-svg .stem.p-bad, .ml-svg .flag.p-bad { stroke: #d0342c; } .ml-svg .stem.p-none, .ml-svg .flag.p-none { stroke: #9aa3ad; }
.ml-svg .ml-rr { font: 800 11px sans-serif; fill: #1d2733; } .ml-svg .r-ok { fill: #1f9a52; }
.ml-svg .ml-miss { fill: none; stroke: #d0342c; stroke-width: 1.8; }
.ml-tools { flex-wrap: nowrap; gap: 6px; }
.ml-bpmw { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; }
.ml-bpm-n { font-weight: 700; white-space: nowrap; }
.ml-tools select { font: inherit; font-size: 14px; width: auto; min-height: 0; height: 32px; padding: 0 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ml-vol { display: inline-flex; align-items: center; gap: 3px; }
.ml-vol-b { display: inline-flex; flex-direction: column; gap: 1px; }
.ml-vol-b button { width: 26px; height: 15px; padding: 0; font-size: 9px; line-height: 1; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 5px; cursor: pointer; }
.ml-vol-b button:disabled { opacity: .35; }
.ml-tools .ml-metro { margin-left: auto; min-height: 32px; white-space: nowrap; padding-inline: 10px; }
.ml-trio { flex-wrap: nowrap; gap: 5px; }
.ml-trio > .btn { flex: 1 1 0; min-height: 34px; font-size: 12.5px; line-height: 1.15; padding: 2px 5px; white-space: normal; }
.melo-sheet .btn.ml-green, html body .melo-sheet .btn.ml-green { background: #1f9a52 !important; border-color: #1f9a52 !important; color: #fff !important; }
.ml-steps-t { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ml-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ml-steps .chip { min-height: 32px; padding: 2px 6px; font-size: 11.5px; line-height: 1.15; white-space: normal; text-align: left; justify-content: flex-start; border-radius: 10px; }
.ml-steps .chip b { font-size: 13px; margin-right: 2px; }
.ml-how { margin: 0; font-size: 12.5px; line-height: 1.3; color: #1f5aa6; font-weight: 600; }
.ml-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.ml-act > .btn { flex: 1 1 140px; min-height: 40px; }
.ml-pad { flex: 1 1 100%; min-height: 96px; border-radius: 16px; border: 2px dashed #1f5aa6; background: #eef4fc; color: #1f5aa6; font: inherit; font-size: 18px; font-weight: 800; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ml-pad:disabled { opacity: .45; }
.ml-pad.hit { animation: ml-hit .18s ease-out; }
@keyframes ml-hit { from { background: #bcd6f7; transform: scale(.98); } to { background: #eef4fc; transform: none; } }
.ml-msg { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.ml-msg:empty, .ml-legend:empty { display: none; }
.ml-legend { margin: 0; font-size: 11.5px; color: var(--ink); line-height: 1.35; }
.ml-legend .lg-ok { color: #1f9a52; font-weight: 700; } .ml-legend .lg-near { color: #e08a00; font-weight: 700; } .ml-legend .lg-bad { color: #d0342c; font-weight: 700; } .ml-legend .lg-none { color: #8a939d; font-weight: 700; }
.ml-legend .lg-miss { display: inline-block; width: 8px; height: 8px; border: 1.8px solid #d0342c; border-radius: 50%; vertical-align: -1px; }
@media (prefers-color-scheme: dark) { .tip-pill { background: #3a2f10; border-color: #6b5520; } .ml-pad { background: #1d2a3d; } .ml-howbox { background: #2a2620; } .ml-how { color: #8fb8f0; } }
.melo-sheet .mg-card.ml-card { padding-top: max(10px, env(safe-area-inset-top)); }
@media (max-width: 370px) { .ml-tools > .ml-lab { display: none; } .ml-vol > .ml-lab { font-size: 11.5px; } }
html body .melo-sheet .btn.ml-hide { background: var(--surface) !important; border: 1.5px solid #9b3a36 !important; color: #c0362c !important; font-weight: 600; }
.tip-pill > b { margin-right: 6px; }
.melo-sheet .mg-x { z-index: 6; }
/* V7.04 : écouter chaque gamme dans les tableaux des tonalités */
.th-kplay { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--accent); font-size: 10px; cursor: pointer; vertical-align: middle; }
.th-kplay:active { background: var(--accent-soft); }
.th-table td.th-maj, .th-table td.th-min { white-space: nowrap; }
/* V7.04 : Solfège — onglets Théorie | Exercices, familles d'exercices */
.sf-tabs { display: flex; background: #eef2f6; border-radius: 12px; padding: 3px; margin: 2px 0 4px; }
.sf-tabs button { flex: 1; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; padding: 8px 0; border-radius: 10px; color: var(--muted); cursor: pointer; }
.sf-tabs button[aria-selected="true"] { background: var(--surface); color: #1f5aa6; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sf-pane[data-pane="ex"] { display: flex; flex-direction: column; gap: 8px; }
.sf-pane[data-pane="ex"][hidden] { display: none; }
.sf-cont { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; border-radius: 14px; padding: 9px 12px; background: #1f9a52; color: #fff; font: inherit; cursor: pointer; }
.sf-cont-ic { font-size: 20px; }
.sf-cont b { display: block; font-size: 14px; } .sf-cont small { display: block; font-size: 12px; opacity: .92; }
.sf-fam { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.sf-fam-h { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; padding: 10px 12px; cursor: pointer; }
.sf-fam-em { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: #eef4fc; flex: none; }
.sf-fam[data-fam="rythme"] .sf-fam-em { background: #fdeedd; } .sf-fam[data-fam="oreille"] .sf-fam-em { background: #eaf6ee; } .sf-fam[data-fam="chanter"] .sf-fam-em { background: #f6eaf6; } .sf-fam[data-fam="ecrit"] .sf-fam-em { background: #f3ebdd; }
.sf-fam-t b { display: block; font-size: 15px; } .sf-fam-t small { display: block; font-size: 12px; color: var(--muted); line-height: 1.25; }
.sf-fam-n { margin-left: auto; font-size: 20px; color: var(--muted); transition: transform .15s; }
.sf-fam-h[aria-expanded="true"] .sf-fam-n { transform: rotate(90deg); }
.sf-fam-l { display: flex; flex-direction: column; gap: 5px; padding: 0 12px 10px; }
.sf-fam-l[hidden] { display: none; }
.sf-fam-l .tht-test { justify-content: flex-start; text-align: left; min-height: 36px; font-size: 13.5px; }
.sf-goex { align-self: flex-start; margin: 2px 0 0 4px; border: 0; background: none; color: #1f5aa6; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 2px 4px; }
@media (prefers-color-scheme: dark) { .sf-tabs { background: #1d2733; } }

/* V7.04 : exercices de rythme — une page entière */
.rx-sheet { padding: 0 !important; align-items: stretch !important; background: var(--bg, #fff); }
.rx-sheet .mg-card.rx-card { max-width: 760px; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; box-shadow: none; gap: 0; padding: max(10px, env(safe-area-inset-top)) 0 0; margin: 0 auto; display: flex; flex-direction: column; }
.rx-sheet .mg-x { z-index: 6; }
.rx-body { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 0 14px 14px; }
.rx-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.rx-foot[hidden] { display: none; }
.rx-title { margin: 0; font-size: 16px; font-weight: 700; padding-right: 36px; }
.rx-sub { margin: -5px 0 0; font-size: 12.5px; color: var(--muted); }
.rx-lat { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--ink); border: 2px solid #f4b400; background: #fffaf0; border-radius: 14px; padding: 9px 11px; cursor: pointer; }
.rx-lat.done { border-width: 1px; border-color: #e6cf8a; }
.rx-lat-ic { font-size: 22px; }
.rx-lat-t { flex: 1; font-size: 12px; line-height: 1.3; } .rx-lat-t b { font-size: 14px; } .rx-lat-t small { font-size: 11px; color: var(--muted); } .rx-lat-t > span { display: block; color: var(--muted); }
.rx-lat-go { background: #f4b400; color: #1d2733; font-weight: 800; border-radius: 999px; padding: 6px 11px; font-size: 13px; white-space: nowrap; }
.rx-lat.done .rx-lat-go { background: #fff1c2; }
.rx-parts { display: flex; flex-direction: column; gap: 4px; }
.rx-part { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.rx-part i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: #e8eef6; color: #1f5aa6; display: grid; place-items: center; font-size: 12px; flex: none; }
.rx-part.on { background: #1f5aa6; color: #fff; border-color: #1f5aa6; } .rx-part.on i { background: #fff; }
.rx-ext { margin-left: auto; color: var(--muted); }
.rx-list { display: flex; flex-direction: column; }
.rx-ser { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 8px 2px; cursor: pointer; }
.rx-ic2 { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: #c5ced8; flex: none; }
.rx-ic2.cur { background: #1f5aa6; } .rx-ic2.done { background: #1f9a52; }
.rx-st b { display: block; font-size: 14px; } .rx-st small { display: block; font-size: 12px; color: var(--muted); }
.rx-sc { margin-left: auto; text-align: right; font-size: 11.5px; color: var(--muted); white-space: nowrap; } .rx-sc i { display: block; font-style: normal; font-weight: 800; color: #b98500; font-size: 13px; }
.rx-hint { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }
.rx-how { margin: 0; font-size: 12.5px; line-height: 1.32; color: #1f5aa6; font-weight: 600; background: #eef4fc; border-left: 4px solid #1f5aa6; border-radius: 8px; padding: 6px 9px; }
.rx-pills { display: flex; gap: 6px; align-items: flex-start; }
.rx-pills .s-howto { min-height: 26px !important; padding: 1px 10px; font-size: 12px; flex: none; }
.rx-howbox { background: #f3ebdd; border-radius: 12px; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; } .rx-howbox ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.rx-set { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; }
.rx-set .l, .rx-tools .l { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 60px; }
.rx-dur { display: inline-flex; align-items: center; gap: 2px; font: inherit; font-size: 12px; color: var(--ink); background: var(--surface); border: 1px dashed var(--line); border-radius: 999px; padding: 1px 9px 1px 3px; cursor: pointer; opacity: .55; min-height: 28px; }
.rx-dur.on { opacity: 1; border: 1.5px solid #1f5aa6; background: #e8f0fb; }
.rx-dur.na { text-decoration: line-through; }
.rx-chip { font: inherit; font-size: 12.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; min-height: 28px; cursor: pointer; }
.rx-chip.on { background: #1f5aa6; color: #fff; border-color: #1f5aa6; }
.rx-chip:disabled { opacity: .35; border-style: dashed; cursor: default; }
.rx-ic { width: 20px; height: 26px; flex: none; }
.rx-ic .ic-f { fill: var(--ink); } .rx-ic .ic-o { fill: none; stroke: var(--ink); stroke-width: 1.4; } .rx-ic .ic-s { stroke: var(--ink); stroke-width: 1.3; fill: none; } .rx-ic .ic-s.w2 { stroke-width: 2; } .rx-ic .ic-l { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.rx-dur.on .rx-ic .ic-f, .rx-key .rx-ic .ic-f { fill: var(--ink); }
.rx-staff { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.rx-lab { margin: 2px 4px 0; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.rx-svg { display: block; width: 100%; height: auto; }
.rx-svg .rx-line { stroke: #1d2733; stroke-width: 1.1; } .rx-svg .rx-bar { stroke: #1d2733; stroke-width: 1.3; } .rx-svg .rx-bar.ghost { stroke: #9fb6d6; stroke-dasharray: 3 3; }
.rx-svg .rx-ts { font: 700 16px Georgia, 'Times New Roman', serif; fill: #1d2733; }
.rx-svg .rx-nh, .rx-svg .rx-dot, .rx-svg .rx-beam { fill: #1d2733; } .rx-svg .rx-nh.open { fill: #fff; stroke: #1d2733; stroke-width: 1.6; }
.rx-svg .rx-stem { stroke: #1d2733; stroke-width: 1.3; } .rx-svg .rx-flag, .rx-svg .rx-tie { fill: none; stroke: #1d2733; stroke-width: 1.7; }
.rx-svg .rx-rest { fill: #1d2733; stroke: #1d2733; stroke-width: 1.6; } .rx-svg .rx-rest path { fill: none; } .rx-svg .rx-rest.q { stroke-width: .8; stroke-linejoin: round; } .rx-svg .rx-restf { fill: #1d2733; }
.rx-svg .bad .rx-nh, .rx-svg .bad .rx-dot, .rx-svg .rx-beam.bad, .rx-svg .bad .rx-restf, .rx-svg .bad .rx-rest { fill: #c33f2d; } .rx-svg .bad .rx-nh.open { fill: #fff; stroke: #c33f2d; } .rx-svg .bad .rx-stem, .rx-svg .bad .rx-flag, .rx-svg .bad .rx-rest { stroke: #c33f2d; }
.rx-svg .rx-ghost { fill: none; stroke: #9fb6d6; stroke-dasharray: 4 3; }
.rx-svg .rx-mk { font: 800 13px sans-serif; fill: #1d2733; } .rx-svg .rx-mk.ok { fill: #1f9a52; } .rx-svg .rx-miss { fill: none; stroke: #c33f2d; stroke-width: 1.8; }
.rx-svg .rx-count { font: 900 22px sans-serif; fill: #1f5aa6; }
.rx-tools { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.rx-tools .l { min-width: 0; }
.rx-bpmn { font-weight: 700; }
.rx-tools select { font: inherit; font-size: 14px; height: 32px; min-height: 0; width: auto; padding: 0 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); margin-right: 6px; }
.rx-vol { display: inline-flex; flex-direction: column; gap: 1px; }
.rx-vol button { width: 26px; height: 15px; padding: 0; font-size: 9px; line-height: 1; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 5px; cursor: pointer; } .rx-vol button:disabled { opacity: .35; }
.btn.rx-big { min-height: 48px; font-size: 17px; font-weight: 800; }
html body .rx-sheet .btn.rx-green { background: #1f9a52 !important; border-color: #1f9a52 !important; color: #fff !important; }
html body .rx-sheet .btn.rx-red { background: var(--surface) !important; border: 1.5px solid #c33f2d !important; color: #c33f2d !important; font-weight: 700; }
.rx-pad { min-height: 96px; border-radius: 16px; border: 2px dashed #1f5aa6; background: #eef4fc; color: #1f5aa6; font: inherit; font-size: 18px; font-weight: 800; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.rx-pad:disabled { opacity: .45; }
.rx-pad.hit, .rx-latpad.hit { animation: ml-hit .18s ease-out; }
.rx-two { display: flex; gap: 8px; } .rx-two > .btn { flex: 1 1 0; min-height: 42px; font-size: 14px; }
.rx-res { text-align: center; } .rx-res b { display: block; font-size: 20px; } .rx-res span { font-size: 13px; color: var(--muted); }
.rx-res.ok b { color: #1f9a52; } .rx-res.big { padding: 18px 0; }
.rx-legend { margin: 0; font-size: 11.5px; text-align: center; } .rx-legend .g { color: #1f9a52; font-weight: 700; } .rx-legend .r { color: #c33f2d; font-weight: 700; }
.rx-o { display: inline-block; width: 8px; height: 8px; border: 1.8px solid #c33f2d; border-radius: 50%; vertical-align: -1px; }
.rx-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.rx-key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 52px; padding: 2px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.rx-key small { font-size: 10.5px; line-height: 1.1; color: var(--muted); text-align: center; }
.rx-key.rest { background: #f6f8fa; }
.rx-key.del span { font-size: 20px; color: #c33f2d; font-weight: 800; line-height: 1; } .rx-key.del small { color: #c33f2d; font-size: 9.5px; }
.rx-key:active { background: #e8f0fb; }
.rx-msg { margin: 0; font-size: 12.5px; font-weight: 700; text-align: center; } .rx-msg.bad { color: #c33f2d; }
.rx-cnt { font-weight: 800; font-size: 14px; }
.rx-dots { display: flex; gap: 3px; } .rx-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c5ced8; } .rx-dots i.ok { background: #1f9a52; } .rx-dots i.ko { background: #c33f2d; } .rx-dots i.cur { background: #1f5aa6; }
.rx-lk { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: #1f5aa6; cursor: pointer; margin-left: auto; white-space: nowrap; }
.rx-nx { border: 0; font: inherit; font-size: 14px; font-weight: 800; background: #1f5aa6; color: #fff; border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap; }
.rx-nx.ghost { background: none; color: #1f5aa6; padding: 8px 0; margin-left: auto; }
.rx-latpad { width: 150px; height: 150px; border-radius: 50%; margin: 6px auto; border: 3px solid #1f5aa6; background: #eef4fc; color: #1f5aa6; font: inherit; font-size: 20px; font-weight: 800; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.rx-latpad.on { background: #dce9fb; }
.rx-beats { display: flex; gap: 6px; justify-content: center; } .rx-beats i { width: 22px; height: 8px; border-radius: 4px; background: #c5ced8; } .rx-beats i.ok { background: #1f9a52; }
.rx-man { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: var(--muted); }
@media (prefers-color-scheme: dark) { .rx-lat { background: #2a2414; } .rx-how { background: #1d2a3d; color: #8fb8f0; } .rx-howbox { background: #2a2620; } .rx-pad, .rx-latpad { background: #1d2a3d; } .rx-key.rest { background: #1d2733; } }
.rx-sheet .mg-card.rx-card { padding-top: 0; }
.rx-sheet .rx-card > .mg-backbar, .melo-sheet .ml-card > .mg-backbar { position: sticky; top: 0; margin: 0 -14px 0; padding: max(10px, env(safe-area-inset-top)) 14px 6px; border-radius: 0; }
.rx-sheet .rx-card > .mg-backbar { margin: 0; }
.rx-sheet .mg-x, .melo-sheet .mg-x { top: max(6px, env(safe-area-inset-top)); }
.melo-sheet .mg-card.ml-card { padding-top: 0; }
.rx-legend .lg-g { color: #1f9a52; font-weight: 700; } .rx-legend .lg-r { color: #c33f2d; font-weight: 700; }
.rx-keys { grid-template-columns: repeat(5, 1fr); }
/* V7.05 : un peu d'air entre « Fonctionnement / Conseil », les réglages et la portée */
.rx-pills { margin-bottom: 8px; }
.rx-staff { margin-top: 6px; }
@media (max-height: 700px) { .rx-pills { margin-bottom: 2px; } .rx-staff { margin-top: 0; } }
.rx-foot { gap: 8px; padding-left: 12px; padding-right: 12px; }
.rx-dots { gap: 2px; } .rx-dots i { width: 6px; height: 6px; }
.rx-nx { font-size: 13.5px; padding: 8px 12px; } .rx-lk { font-size: 13.5px; }
.rx-dots { gap: 1.5px; } .rx-dots i { width: 5px; height: 5px; }
.rx-nx { font-size: 13px; padding: 8px 10px; } .rx-lk { font-size: 13px; }
.rx-foot { gap: 6px; }
/* V7.06 : Chanter juste — « 1 Choisir ou définir votre voix » repliable, 2 à 5 sur une ligne */
#view-voice .vx-voice-tog { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; padding: 4px 0; cursor: pointer; margin: 0; }
#view-voice .vx-voice-tog > span:nth-child(2) { font-size: 16px; font-weight: 700; }
#view-voice .vx-voice-cur { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: right; line-height: 1.2; }
#view-voice .vx-voice-chev { font-size: 18px; color: var(--muted); transition: transform .15s; }
#view-voice .vx-voice-tog[aria-expanded="true"] .vx-voice-chev { transform: rotate(90deg); }
#view-voice .vx-voice-body[hidden] { display: none !important; }
#view-voice .vx-voice-body { display: flex; flex-direction: column; gap: 6px; }
#view-voice .vx-parts { grid-template-columns: repeat(4, 1fr) !important; gap: 3px !important; margin-top: 6px !important; }
#view-voice .vx-parts .vx-part { font-size: 11.5px !important; padding: 5px 3px !important; line-height: 1.15; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
#view-voice .vx-parts .vx-part .vx-num { margin: 0; }
#view-voice .vx-parts .vx-part[aria-selected="true"] { color: var(--accent); }
#view-voice .vx-parts .vx-part-melo { grid-column: auto; }
#view-voice .vx-parts .vx-part-drone[aria-selected="true"], #view-voice .vx-parts .vx-part-melo[aria-selected="true"] { color: var(--accent); }
html body #view-voice > .vx-parts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html body #view-voice > .vx-parts .vx-part-melo { grid-column: auto !important; }
.ml-svg .tsig { font: 900 18px Georgia, 'Times New Roman', serif; }
/* V7.06 : Travailler ma justesse — consignes plus petites, la note du piano en bleu, boutons sur une ligne */
#view-voice .ej-lead, #view-voice .ej-prog-sub { font-size: 13px; }
#view-voice #ej-hint { font-size: 13px; line-height: 1.35; }
html body #view-voice .ej-card .ej-instr { font-size: 15px !important; }
html body #view-voice .ej-card.ej-idle .ej-instr { font-size: 13px !important; }
.ej-n.ref0:not(.ok) { background: var(--accent-soft); color: var(--accent); }
.ej-n.ref0.now { border-color: var(--accent); }
html body #view-voice .ej-ctl { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px !important; }
html body #view-voice .ej-ctl .btn { min-height: 38px; font-size: 12px; padding: 2px 3px; line-height: 1.1; }
html body #view-voice .ej-ctl .btn[hidden] { display: none; }
.ej-inter-h { font-size: 11.5px; color: var(--muted); }
/* V7.06 : tests de lecture — le nom sous la note reste visible ; « Cacher la note » */
html body .dr-card .dr-fig { margin-bottom: 2px !important; }
.dr-staff .dr-hid { font: 800 28px sans-serif; fill: var(--accent); }
.dr-earnote { margin: 4px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.dr-snd { flex-wrap: wrap; }
/* V7.06 : Rythme — A B C, « Choisir ci-dessous », séries grisées pour « Écouter », tempo bien lisible, durées impossibles grisées */
.rx-part i { font-weight: 800; }
.rx-choose { margin: 4px 0 0 18px; font-size: 13px; font-weight: 700; color: #1f5aa6; }
.rx-choose.off { color: var(--muted); font-weight: 500; font-size: 12px; }
.rx-list { margin-left: 18px; }
.rx-list.off { opacity: .4; pointer-events: none; }
.rx-bpmn { font-size: 20px; font-weight: 900; color: var(--ink); }
html body .rx-dur.na { opacity: .35 !important; background: none !important; border: 1px dashed var(--line) !important; text-decoration: line-through; }
.sf-lat { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--ink); border: 1.5px solid #f4b400; background: #fffaf0; border-radius: 14px; padding: 8px 12px; cursor: pointer; }
.sf-lat > span:first-child { font-size: 20px; } .sf-lat b { font-size: 14px; } .sf-lat small { font-size: 11.5px; color: var(--muted); }
.sf-lat-go { margin-left: auto; font-size: 20px; color: var(--muted); }
@media (prefers-color-scheme: dark) { .sf-lat { background: #2a2414; } }
.sf-ud { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); } .sf-bass { color: #1f5aa6; }
.lex-def .lex-more { font-size: inherit; font-weight: 600; color: var(--accent); }