/* Otoolia — Accordeur (styles limités à .tu / .tu-*) */
.tu { --tu-ok: #2a9d8f; --tu-warn: #e7a13b; --tu-bad: #d62839; --tu-okbg: rgba(42,157,143,.16); --tu-grid: #d6d6e2; --tu-line: #1e6baf; }
:root[data-theme="dark"] .tu { --tu-grid: #3a3a50; --tu-line: #4a90d9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tu { --tu-grid: #3a3a50; --tu-line: #4a90d9; } }
.tu-head h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: .2em; }
.tu h2 { font-size: 1.05rem; margin: 0 0 10px; }
.tu-main { display: grid; gap: var(--ot-space); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 940px) { .tu-main { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.tu-main > * { min-width: 0; }
.tu-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin-bottom: 10px; }
.tu-row[hidden], .tu-f[hidden] { display: none; }
.tu-f { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 600; color: var(--ot-text-soft); min-width: 0; }
.tu-f .ot-input, .tu-f .ot-select { min-height: 38px; padding: 4px 8px; font-size: .95rem; width: auto; max-width: 100%; }
.tu-a4 { display: inline-flex; gap: 4px; align-items: center; }
.tu-a4 .ot-input { width: 76px; text-align: center; }
.tu-a4 button { min-width: 38px; min-height: 38px; padding: 0; }
.tu-ck { display: flex; gap: 6px; align-items: center; font-size: .88rem; margin: 6px 0; }
.tu-sm { min-height: 32px; padding: 4px 12px; font-size: .85rem; }

/* Écran principal */
.tu-disp { text-align: center; padding: 6px 0 4px; }
.tu-gauge { width: min(420px, 100%); height: auto; display: block; margin: 0 auto; overflow: visible; }
.tu-tick { stroke: var(--ot-text-soft); stroke-width: 1.5; } .tu-tick--b { stroke-width: 2.5; stroke: var(--ot-text); }
.tu-lab { font-size: 11px; fill: var(--ot-text-soft); text-anchor: middle; font-family: var(--ot-font); }
.tu-zone { fill: none; stroke: var(--tu-ok); stroke-width: 16; opacity: .35; }
#tu-needle { transform-origin: 150px 160px; transition: transform .09s linear, opacity .2s; }
.tu-needle { stroke: var(--tu-warn); stroke-width: 4; stroke-linecap: round; }
.tu-hub { fill: var(--ot-text); }
.tu.is-ok .tu-needle { stroke: var(--tu-ok); }
.tu-note { font-size: clamp(3rem, 12vw, 5.2rem); font-weight: 800; line-height: 1; margin: -8px 0 2px; letter-spacing: -.02em; color: var(--ot-text-soft); }
.tu-note sub { font-size: .38em; font-weight: 700; vertical-align: baseline; margin-left: 2px; }
.tu.is-sig .tu-note { color: var(--tu-warn); } .tu.is-ok .tu-note { color: var(--tu-ok); }
.tu-cents { font-size: 1.3rem; font-weight: 700; min-height: 1.6em; font-variant-numeric: tabular-nums; }
.tu-hint { font-weight: 700; min-height: 1.5em; margin: 2px 0 4px; }
.tu.is-ok .tu-hint { color: var(--tu-ok); }
.tu-sub { font-size: .86rem; color: var(--ot-text-soft); min-height: 1.3em; font-variant-numeric: tabular-nums; }
.tu-micbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 12px 0 6px; }
.tu-mic { min-height: 46px; padding: 8px 22px; font-size: 1rem; }
.tu.is-live .tu-mic { background: var(--ot-surface-2); color: var(--ot-text); border: 1px solid var(--ot-border); }
.tu-meter { width: 120px; height: 8px; border-radius: 99px; background: var(--ot-surface-2); overflow: hidden; }
.tu-meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--tu-ok), var(--tu-warn)); transition: width .08s; }
.tu-status { font-size: .88rem; color: var(--ot-text-soft); text-align: center; min-height: 1.3em; margin: 0; }
.tu-status.is-err { color: var(--tu-bad); font-weight: 600; }

/* Cordes */
.tu-strings { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 4px; }
.tu-str { position: relative; display: grid; grid-template-columns: auto auto; grid-template-areas: "n o" "f f"; align-items: baseline; justify-content: center; column-gap: 2px;
  min-width: 64px; padding: 8px 10px 6px; border: 1px solid var(--ot-border); border-radius: 12px; background: var(--ot-surface); color: var(--ot-text); font: inherit; cursor: pointer; }
.tu-str small { position: absolute; top: 3px; left: 6px; font-size: .66rem; color: var(--ot-text-soft); }
.tu-str b { grid-area: n; font-size: 1.15rem; } .tu-str i { grid-area: o; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--ot-text-soft); }
.tu-str em { grid-area: f; font-style: normal; font-size: .7rem; color: var(--ot-text-soft); }
.tu-str.is-on { border-color: var(--ot-logo-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ot-logo-blue) 35%, transparent); }
.tu-str.is-ok::after { content: "✓"; position: absolute; top: 2px; right: 6px; color: var(--tu-ok); font-weight: 800; font-size: .8rem; }
.tu-auto { align-items: center; font-weight: 700; display: inline-flex; }
.tu-done { text-align: center; color: var(--tu-ok); font-weight: 700; min-height: 1.3em; margin: 0; }
.tu-hist { width: 100%; height: 90px; display: block; margin-top: 6px; }
.tu-histl { font-size: .78rem; color: var(--ot-text-soft); margin: 10px 0 0; }
.tu-explain { font-size: .86rem; color: var(--ot-text-soft); background: var(--ot-surface-2); border-radius: var(--ot-radius-s); padding: 8px 12px; margin: 10px 0 0; }
.tu-help { font-size: .84rem; color: var(--ot-text-soft); margin: 6px 0 0; }
.tu-about { margin-top: calc(var(--ot-space) * 2); }