/* Otoolia — Métronome (styles limités à .mt / .mt-*) */
.mt-head h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: .2em; }
.mt h2 { font-size: 1.05rem; margin: 0 0 10px; }
.mt-main { display: grid; gap: var(--ot-space); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .mt-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.mt-main > * { min-width: 0; }
.mt-dial { position: relative; text-align: center; padding: 10px 0 4px; overflow: hidden; border-radius: var(--ot-radius); }
.mt-flash { position: absolute; inset: 0; background: var(--ot-logo-orange); opacity: 0; pointer-events: none; border-radius: inherit; }
.mt-flash.is-on { animation: mtflash .25s ease-out; }
@keyframes mtflash { from { opacity: .35; } to { opacity: 0; } }
.mt-bpmv { font-size: clamp(3.4rem, 13vw, 5.4rem); font-weight: 800; line-height: 1; color: var(--ot-logo-blue); font-variant-numeric: tabular-nums; }
.mt-unit { font-size: .9rem; color: var(--ot-text-soft); }
.mt-name { font-weight: 700; color: var(--ot-text-soft); min-height: 1.4em; }
.mt-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center; margin: 8px 0; }
.mt-row.mt-l { justify-content: flex-start; align-items: flex-end; }
.mt-row[hidden] { display: none; }
#mt-bpm { width: 100%; }
.mt-step { min-width: 46px; min-height: 40px; padding: 0 8px; }
.mt-go { min-height: 52px; min-width: 170px; font-size: 1.1rem; }
.mt-go.is-on { background: var(--ot-surface-2); color: var(--ot-text); border: 1px solid var(--ot-border); }
.mt-tap { min-height: 52px; min-width: 90px; font-size: 1.05rem; }
.mt-tap.is-on { transform: scale(.95); }
.mt-beats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 6px; }
.mt-beat { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ot-border); background: var(--ot-surface); color: var(--ot-text); font-weight: 700; cursor: pointer; position: relative; padding: 0; }
.mt-beat[data-l="3"] { background: var(--ot-logo-blue); color: #fff; border-color: var(--ot-logo-blue); }
.mt-beat[data-l="2"] { background: color-mix(in srgb, var(--ot-logo-blue) 35%, var(--ot-surface)); }
.mt-beat[data-l="1"] { background: color-mix(in srgb, var(--ot-logo-blue) 12%, var(--ot-surface)); }
.mt-beat[data-l="0"] { border-style: dashed; color: var(--ot-text-soft); }
.mt-beat.mt-gs { margin-left: 10px; }
.mt-beat.is-now { box-shadow: 0 0 0 4px var(--ot-logo-orange); transform: scale(1.1); }
.mt-bar { text-align: center; font-size: .86rem; color: var(--ot-text-soft); min-height: 1.3em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.mt-f { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 600; color: var(--ot-text-soft); }
.mt-f .ot-input, .mt-f .ot-select { min-height: 36px; padding: 4px 8px; font-size: .92rem; width: auto; }
.mt-f input[type=number] { width: 76px; }
.mt-ck { display: flex; gap: 6px; align-items: center; font-size: .9rem; font-weight: 600; margin: 12px 0 4px; }
.mt-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-presets button { min-height: 32px; padding: 2px 12px; font-size: .85rem; }
.mt-explain { font-size: .88rem; color: var(--ot-text-soft); background: var(--ot-surface-2); border-radius: var(--ot-radius-s); padding: 8px 12px; margin: 10px 0 0; }
.mt-help { font-size: .8rem; color: var(--ot-text-soft); margin: 4px 0 0; }
.mt-about { margin-top: calc(var(--ot-space) * 2); }