/* Accordeur en ligne */
.o-accordeur-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 12px; border-radius: var(--rayon-petit); background: var(--ok-fond); color: var(--ok-texte); }
.o-accordeur-prive { margin: 0; flex: 1 1 260px; font-size: .92rem; }
.o-accordeur-arreter { flex: none; }
.o-accordeur .o-accordeur-arreter:not(:disabled) { border-color: var(--erreur-texte); color: var(--erreur-texte); background: var(--surface); font-weight: 700; }
.o-accordeur-message { display: block; margin: 10px 0 0; padding: 8px 12px; border-radius: var(--rayon-petit); background: var(--surface-2); color: var(--texte); font-size: .95rem; }
.o-accordeur-message:empty { display: none; }
.o-accordeur-message.erreur { background: var(--erreur-fond); color: var(--erreur-texte); }

.o-accordeur-ecran { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 520px; margin: 16px auto 0; text-align: center; }
.o-accordeur-note { margin: 0; font: 800 clamp(3.4rem, 15vw, 5rem)/1 var(--police); color: var(--texte); letter-spacing: -.02em; min-height: 1em; }
.o-accordeur-note sub { font-size: .42em; font-weight: 700; vertical-align: baseline; margin-left: .06em; color: var(--texte-2); }
.o-accordeur-lettre { margin: 0; min-height: 1.4em; font: 600 1rem var(--mono); color: var(--texte-2); }
.o-accordeur-cadran { display: block; width: 100%; max-width: 380px; height: auto; overflow: visible; }
.o-accordeur-arc { fill: none; stroke: var(--bord); stroke-width: 6; stroke-linecap: round; }
.o-accordeur-zone-juste { fill: none; stroke: var(--ok-texte); stroke-width: 8; }
.o-accordeur-graduation { stroke: var(--texte-2); stroke-width: 1.5; }
.o-accordeur-graduation.forte { stroke: var(--texte); stroke-width: 2.5; }
.o-accordeur-borne { fill: var(--texte-2); font: 12px var(--police); }
.o-accordeur-aiguille { transform-box: view-box; transform-origin: 110px 120px; transition: transform .12s linear; }
.o-accordeur-aiguille line { stroke: var(--texte); stroke-width: 3.5; stroke-linecap: round; }
.o-accordeur-aiguille circle { fill: var(--texte); }
.o-accordeur[data-etat="juste"] .o-accordeur-aiguille line, .o-accordeur[data-etat="juste"] .o-accordeur-aiguille circle { stroke: var(--ok-texte); fill: var(--ok-texte); }
.o-accordeur[data-etat="attente"] .o-accordeur-aiguille { opacity: .35; }
.o-accordeur-etat { display: block; min-width: 12em; padding: 6px 16px; border-radius: 999px; background: var(--surface-2); color: var(--texte-2); font-weight: 700; font-size: 1.1rem; }
.o-accordeur[data-etat="juste"] .o-accordeur-etat { background: var(--ok-fond); color: var(--ok-texte); }
.o-accordeur[data-etat="bas"] .o-accordeur-etat, .o-accordeur[data-etat="haut"] .o-accordeur-etat { background: var(--erreur-fond); color: var(--erreur-texte); }
.o-accordeur-mesures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 8px 0 0; }
.o-accordeur-mesures div { background: var(--surface-2); border-radius: var(--rayon-petit); padding: 8px 4px; min-width: 0; }
.o-accordeur-mesures dt { font-size: .8rem; color: var(--texte-2); }
.o-accordeur-mesures dd { margin: 2px 0 0; font: 700 clamp(.95rem, 4vw, 1.2rem)/1.2 var(--police); font-variant-numeric: tabular-nums; color: var(--texte); overflow-wrap: anywhere; }
.o-accordeur-commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.o-accordeur-commandes [hidden] { display: none; }

.o-accordeur-bloc { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord); }
.o-accordeur-bloc h2 { margin: 0 0 6px; font-size: 1.15rem; }
.o-accordeur-aide { margin: 0 0 10px; color: var(--texte-2); font-size: .92rem; }
.o-accordeur-cordes { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 16px; }
.o-accordeur .o-accordeur-corde { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: 64px; }
.o-accordeur-corde strong { font-size: 1.25rem; line-height: 1.1; }
.o-accordeur-corde sub { font-size: .7em; vertical-align: baseline; margin-left: 1px; }
.o-accordeur-corde small { font-size: .78rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.o-accordeur .o-accordeur-corde.proche { border-color: var(--marque); background: var(--marque); color: var(--sur-marque); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--marque); }
.o-accordeur .o-accordeur-corde.proche small { color: var(--sur-marque); }
.o-accordeur .reglages select, .o-accordeur .reglages input { width: 100%; min-width: 0; }
.o-accordeur .prereglages [aria-pressed="true"] { border-color: var(--marque); color: var(--marque); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .o-accordeur-aiguille { transition: none; } }
@media (max-width: 420px) {
  .o-accordeur-arreter { width: 100%; }
  .o-accordeur-cordes { grid-template-columns: repeat(3, 1fr); }
}