/* Métronome en ligne */
.o-metronome-temps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 46px; max-width: 100%; }
.o-metronome-pastille {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--bord); background: var(--surface-2); color: var(--texte-2);
  font: 700 .95rem var(--police); font-variant-numeric: tabular-nums; transition: transform .06s ease-out, background-color .06s;
}
.o-metronome-pastille.accent { border-color: var(--marque); color: var(--marque); }
.o-metronome-pastille.actif { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); transform: scale(1.18); }
.o-metronome-pastille.accent.actif { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marque) 30%, transparent); }
.o-metronome.muet .o-metronome-pastille.actif { background: var(--surface-2); color: var(--marque); border-style: dashed; }
.o-metronome-compteur { margin: 0; min-height: 1.3em; font-size: .85rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.o-metronome-tempo { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: var(--texte); }
.o-metronome-bpm { font: 800 clamp(3.6rem, 14vw, 6.5rem)/1 var(--police); font-variant-numeric: tabular-nums; letter-spacing: -.03em; min-width: 3ch; text-align: right; }
.o-metronome-unite { font-size: 1.2rem; font-weight: 700; color: var(--texte-2); }
.o-metronome-nom { margin: 0; color: var(--texte); line-height: 1.4; }
.o-metronome-nom strong { font-size: 1.25rem; font-style: italic; color: var(--marque); }
.o-metronome-nom span, .o-metronome-nom small { color: var(--texte-2); }
.o-metronome-reglage { display: flex; align-items: center; gap: 8px; width: min(100%, 620px); }
.o-metronome-reglage input[type="range"] { flex: 1; min-width: 0; accent-color: var(--marque); min-height: 32px; }
.o-metronome-reglage .btn { min-width: 46px; padding-inline: 8px; font-variant-numeric: tabular-nums; }
.o-metronome-commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; width: 100%; }
.o-metronome-commandes .tirage-bouton { min-width: 160px; }
.o-metronome .tirage-message { display: block; min-height: 1.4em; }
.o-metronome .reglages select { min-height: 42px; }
.o-metronome-progressif { margin: 18px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--bord); min-width: 0; }
.o-metronome-progressif legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; grid-column: 1 / -1; }
.o-metronome-progressif legend label.case { min-height: 0; font-weight: 600; }
.o-metronome-progressif input:disabled { opacity: .55; }
@media (max-width: 480px) {
  .o-metronome-reglage { flex-wrap: wrap; justify-content: center; }
  .o-metronome-reglage input[type="range"] { order: -1; flex-basis: 100%; }
  .o-metronome-reglage .btn { flex: 1 1 0; }
  .o-metronome-commandes .tirage-bouton { min-width: 0; flex: 1 1 130px; padding-inline: 16px; }
  .o-metronome-pastille { width: 34px; height: 34px; }
}