/* 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; }
.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; }
.hide-instr .ng-duo { font-size: 0; } .hide-instr .ng-duo svg { width: 22px; height: 22px; }
/* 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; }
.hide-voice .ng-duo svg { display: none; }
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-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-part-h.vx-warm-only { margin-top: 0; } }
html.big-piano #view-voice > #ej-sec, html.big-piano #view-voice > .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-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-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-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; }