:root {
  --fond: #14161c;
  --fond2: #1d2029;
  --fond3: #262a35;
  --trait: #333845;
  --texte: #e9ecf2;
  --fin: #99a0b0;
  --or: #ffc94d;
  --vert: #3ddc84;
  --ambre: #ffb02e;
  --rouge: #ff5a52;
  --r: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

.barre {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 20;
}
.barre h1 {
  font-size: 1.12rem; margin: 0; letter-spacing: .02em; font-weight: 700;
  display: flex; align-items: center; gap: .5rem;
}
.marque { width: 1.5rem; height: 1.5rem; flex: none; object-fit: contain; }
.barre h1 .deux { color: var(--or); }
.demenagement { border-color: var(--or); margin-bottom: 14px; }
.demenagement ol { text-align: left; padding-left: 1.2rem; margin: .4rem 0; }
.demenagement li { margin: .45rem 0; }
.demenagement a { color: var(--or); }

button {
  font: inherit; color: var(--texte);
  background: var(--fond3); border: 1px solid var(--trait);
  border-radius: 10px; padding: .55rem .85rem; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: translateY(1px); }
button.primaire { background: #2f5ad6; border-color: #3d6ae8; font-weight: 600; }
button.rouge { background: #b8302a; border-color: #d4433c; font-weight: 600; }
button.gros { padding: .95rem 1.4rem; font-size: 1.05rem; border-radius: 14px; min-width: 14rem; }
button.icone { background: none; border: none; font-size: 1.3rem; padding: .3rem .5rem; color: var(--fin); }

/* ── pictos : une seule famille, 24×24, trait 1.8, couleur du texte ── */
.i {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
button.icone .i { width: 1.35rem; height: 1.35rem; }

/* ── les outils du pupitre : une grille, pas une bouillie de pastilles ── */
.outils-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.outils-grille button {
  flex-direction: column; gap: 2px; padding: .34rem .1rem;
  background: var(--fond3); border: 1px solid var(--trait); color: var(--fin);
  border-radius: 10px; min-height: 45px;
}
.outils-grille button .i { width: 1.2rem; height: 1.2rem; }
.outils-grille button span { font-size: .6rem; line-height: 1.05; text-align: center; }
button.majeur-ecoute { flex: 1 1 auto; min-height: 40px; font-size: .98rem; }
button.pastille { padding: .4rem .6rem; border-radius: 9px; min-width: 2.6rem; }
button.pastille.large { min-width: auto; }
button.bascule[aria-pressed="true"] { background: var(--or); color: #1a1a1a; border-color: var(--or); font-weight: 600; }
button[disabled] { opacity: .45; cursor: default; }

select:disabled, input:disabled { opacity: .4; }
input, select {
  font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: 10px; padding: .5rem .6rem;
}
input[type=number] { width: 4.6rem; text-align: center; }


/* Barre de navigation EN BAS : à bout de pouce sur un téléphone tenu en main.
   ⚠️ elle flotte au-dessus du contenu — d'où le rembourrage bas de <main>,
   sans quoi le dernier bouton d'un écran passe dessous et devient incliquable. */
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center; gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: rgba(20, 22, 28, .97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--trait);
}
.onglets button {
  flex: 1 1 0; max-width: 150px;
  background: none; border: none; border-radius: 10px;
  color: var(--fin); padding: .35rem .1rem;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.onglets button i { font-style: normal; font-size: 1.15rem; line-height: 1; }
.onglets button span { font-size: .63rem; white-space: nowrap; }
.onglets button.actif { color: var(--or); font-weight: 600; }
.onglets button.actif i { transform: scale(1.08); }

main { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); max-width: 980px; margin: 0 auto; }
.ecran { display: none; }
/* ⚠️ la barre d'onglets est FIXE en bas : un écran court laissait un grand vide
   entre son dernier élément et elle. Chaque écran prend donc la hauteur
   disponible, et place lui-même ce qui doit descendre (.bas-ecran, .vide-ecran). */
.ecran.actif { display: flex; flex-direction: column; min-height: calc(100vh - 215px); }
@supports (height: 100dvh) { .ecran.actif { min-height: calc(100dvh - 215px); } }
[hidden] { display: none !important; }

/* le bloc d'action d'un écran, posé sous le pouce juste au-dessus des onglets */
.bas-ecran { margin-top: auto; padding-top: 16px; }
/* le geste principal d'un écran : grande cible, au bout du pouce */
button.majeur { width: 100%; max-width: 320px; min-height: 68px; font-size: 1.15rem; }

/* état vide : on montre les actions, on ne se contente pas de les nommer */
.vide-ecran {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 16px 6px;
}
.vide-signe { font-size: 3.4rem; color: var(--trait); line-height: 1; }
.vide-texte { color: var(--fin); margin: 0; }
.vide-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; }
.vide-actions button { width: 100%; }
/* la liste prend la hauteur quand elle est vide, pour centrer son message */
#l-liste.liste-vide { flex: 1 1 auto; display: flex; flex-direction: column; }

.carte {
  background: var(--fond2); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 14px; margin-bottom: 14px;
}
.carte h2 { font-size: 1rem; margin: 0 0 .7rem; color: var(--fin); text-transform: uppercase; letter-spacing: .05em; }

.rangee { display: flex; gap: 10px; align-items: center; justify-content: center; margin: .7rem 0; }
.rangee.serre { gap: 7px; }
.rangee.enroule { flex-wrap: wrap; }
.rangee.entre { justify-content: space-between; }
/* à gauche : les boutons se tassent au lieu de se répartir en escalier */
.rangee.gauche { justify-content: flex-start; }
.message { color: var(--fin); font-size: .9rem; text-align: center; margin: .4rem 0 0; min-height: 1.2em; }
.message.alerte { color: var(--rouge); }
.astuce { color: var(--fin); font-size: .85rem; margin: .6rem 0 0; }
.etiquette { color: var(--fin); font-size: .85rem; }
.sep { width: 1px; height: 1.4rem; background: var(--trait); }
.fin { color: var(--fin); }

/* ── accordeur ── */
/* Les trois blocs se répartissent la hauteur : sans ça l'écran se tasse en haut
   et laisse un grand vide au-dessus de la barre d'onglets. */
.accordeur { text-align: center; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; flex: 1 1 auto; }
.acc-bloc { flex: 0 0 auto; }
.note-grande { margin: 10px 0 6px; }
#j-nom { font-size: clamp(3.6rem, 19vw, 6rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
/* au repos, le tiret ne doit pas ressembler à une barre blanche posée là */
#j-nom.repos { font-size: 2.6rem; color: var(--trait); }
#j-nom.juste { color: var(--vert); }
#j-nom.proche { color: var(--ambre); }
#j-detail { font-size: .95rem; margin-top: .45rem; min-height: 1.3em; }

.jauge { position: relative; height: 62px; margin: 14px auto 2px; max-width: 460px; }
.jauge-graduations { position: absolute; inset: 14px 0 auto; height: 22px; }
.jauge-graduations span { position: absolute; top: 0; width: 2px; height: 14px; background: var(--trait); transform: translateX(-1px); }
.jauge-graduations span.centre { height: 22px; background: var(--fin); }
.jauge-zone {
  position: absolute; left: 44%; width: 12%; top: 14px; height: 22px;
  background: rgba(61, 220, 132, .14); border-left: 1px solid rgba(61,220,132,.4); border-right: 1px solid rgba(61,220,132,.4);
}
.aiguille {
  position: absolute; top: 6px; left: 50%; width: 4px; height: 38px;
  background: var(--or); border-radius: 2px; transform: translateX(-2px);
  transition: left .07s linear, background .15s;
  box-shadow: 0 0 10px rgba(255,201,77,.5);
}
.aiguille.juste { background: var(--vert); box-shadow: 0 0 12px rgba(61,220,132,.6); }
.jauge-legende { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; color: var(--fin); font-size: .75rem; }

.pos-manche { min-height: 1.5em; color: var(--or); font-size: 1rem; letter-spacing: .04em; margin-top: .4rem; }

.niveau { height: 7px; background: var(--fond3); border-radius: 4px; overflow: hidden; max-width: 460px; margin: 14px auto; }
.niveau > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--vert), var(--or)); transition: width .08s linear; }

/* ── cordes à vide ── */
.cordes { display: flex; gap: 8px; justify-content: center; }
.cordes button {
  flex: 1 1 0; max-width: 96px; min-height: 64px;
  background: var(--fond2); border: 1px solid var(--trait); border-radius: 12px;
  color: var(--texte); padding: .45rem .2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.cordes button .n { font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.cordes button .o { font-size: .7rem; color: var(--fin); }
.cordes button .e { font-size: .72rem; color: var(--fin); min-height: 1.1em; font-variant-numeric: tabular-nums; }
.cordes button.vise { border-color: var(--or); background: rgba(255, 201, 77, .08); }
.cordes button.vise .e { color: var(--or); }
.cordes button.ok { border-color: var(--vert); }
.cordes button.ok .e { color: var(--vert); }
.aide-cordes { color: var(--fin); font-size: .78rem; margin: .5rem 0 0; }

/* ── bascule à deux positions (Choisir / Saisir) ──
   ⚠️ PAS « .bascule » : cette classe sert déjà aux boutons Clic / Accords. */
.choix-mode { display: inline-flex; background: var(--fond3); border: 1px solid var(--trait); border-radius: 10px; padding: 2px; gap: 2px; }
.choix-mode button { background: none; border: none; color: var(--fin); border-radius: 8px; padding: .3rem .7rem; font-size: .85rem; }
.choix-mode button.actif { background: var(--or); color: #1a1205; font-weight: 600; }
.tete-carte { align-items: center; margin-bottom: .6rem; }
.tete-carte .etiquette { margin: 0; }

/* ── piano d'une octave : on touche une note, on l'entend, on choisit l'accord ──
   Les noires sont posées en absolu par-dessus les blanches, aux vrais écarts
   d'un clavier (pas à intervalles réguliers : il n'y a pas de noire entre Mi-Fa
   ni entre Si-Do). */
.piano { position: relative; height: 112px; margin: 2px 0 4px; user-select: none; -webkit-user-select: none; }
.piano .blanches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; height: 100%; }
.piano .blanche {
  background: #eceff5; border: 1px solid #c3c8d4; border-radius: 0 0 8px 8px;
  color: #2a2f3a; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 1px; padding-bottom: 6px;
}
.piano .blanche b { font-size: .95rem; font-weight: 700; }
.piano .blanche i { font-style: normal; font-size: .62rem; color: #6a7183; }
.piano .noire {
  position: absolute; top: 0; height: 62%; width: 9.5%;
  background: #23272f; border: 1px solid #0d0f13; border-radius: 0 0 6px 6px;
  color: #e9ecf2; font-size: .62rem; font-weight: 600;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .45);
}
.piano button:active, .piano button.sonne { filter: brightness(.82); }
.piano .noire:active, .piano .noire.sonne { filter: brightness(1.6); }

/* ── modale d'accord ── */
.alterations { display: flex; gap: 6px; justify-content: center; margin-bottom: .8rem; }
.alterations button { flex: 1 1 0; max-width: 90px; background: var(--fond3); border: 1px solid var(--trait); border-radius: 9px; color: var(--texte); padding: .35rem 0; font-size: 1.05rem; }
.alterations button.actif { border-color: var(--or); color: var(--or); }
.qualites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.qualites button {
  background: var(--fond3); border: 1px solid var(--trait); border-radius: 10px;
  color: var(--texte); padding: .5rem .3rem; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.qualites button b { font-size: 1.05rem; font-weight: 600; }
.qualites button i { font-style: normal; font-size: .68rem; color: var(--fin); }
.qualites.deplie { max-height: 42vh; overflow-y: auto; }
/* le « + » rond se lisait comme « ajouter » : c'est « voir d'autres accords » */
.plus-accords { width: 100%; margin-top: 8px; color: var(--fin); font-size: .85rem; }
.etiquette-bloc { color: var(--fin); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin: 1.1rem 0 .5rem; }
#d-ac-actions .vide-actions { max-width: none; }
#d-ac-actions .vide-actions button { font-size: .88rem; }

/* ── ruban des notes entendues ── */
.ligne-item.ouverte { border-color: var(--or); }
.ligne-item .badge { background: var(--or); color: #1a1205; border-radius: 6px; padding: .1rem .4rem; font-size: .66rem; font-weight: 700; margin-left: .4rem; white-space: nowrap; }

.ruban-tete { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--fin); font-size: .78rem; margin-bottom: .2rem; }
.ruban-tete button { background: none; border: none; color: var(--fin); text-decoration: underline; padding: .2rem .3rem; font-size: .78rem; }

.ruban { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 16px; min-height: 2.4rem; }
.ruban span {
  background: var(--fond3); border: 1px solid var(--trait); border-radius: 8px;
  padding: .3rem .55rem; font-size: .95rem; font-variant-numeric: tabular-nums;
}
.ruban span b { color: var(--or); font-weight: 600; }

/* ── enregistrement ── */
.champ-tempo { text-align: center; }
.champ-tempo > label { display: block; color: var(--fin); font-size: .85rem; margin-bottom: .3rem; }
.unite { color: var(--fin); font-size: .85rem; }
.grille-reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: .9rem; }
.grille-reglages label { display: flex; flex-direction: column; gap: .3rem; color: var(--fin); font-size: .85rem; }
.grille-reglages select, .grille-reglages input { color: var(--texte); }

.temoin { text-align: center; }
.temps { display: flex; gap: 10px; justify-content: center; margin-bottom: .8rem; }
.temps i {
  width: 16px; height: 16px; border-radius: 50%; background: var(--fond3);
  border: 1px solid var(--trait); display: block;
}
.temps i.on { background: var(--or); border-color: var(--or); }
.temps i.on.decompte { background: var(--rouge); border-color: var(--rouge); }
.compteur { font-size: 2.6rem; font-weight: 300; line-height: 1.1; }
.live { font-size: 1.3rem; color: var(--or); min-height: 1.5em; }

/* ── partition ── */
.titre-champ { width: 100%; font-size: 1.1rem; font-weight: 600; margin-bottom: .6rem; }
/* la rangée d'actions précède la partition : elle ne doit rien voler à la musique */
.carte.actions { padding: 8px 10px; margin-bottom: 8px; }
.carte.actions .rangee { margin: 0; }
.carte.actions .message:empty { display: none; }

/* réglages repliés : fermés, ils ne coûtent qu'une ligne */
.repli > summary {
  cursor: pointer; color: var(--fin); font-size: .9rem;
  list-style: none; padding: .1rem 0; user-select: none;
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::before { content: '▸ '; color: var(--or); }
.repli[open] > summary::before { content: '▾ '; }
.repli[open] > summary { margin-bottom: .3rem; }
.papier {
  background: #fff; border-radius: var(--r); padding: 4px;
  overflow-x: auto; margin-bottom: 10px;
}
.papier svg { max-width: 100%; height: auto; }
.transpo b { min-width: 2.2rem; text-align: center; display: inline-block; font-size: 1.1rem; color: var(--or); }
.capo { color: var(--fin); font-size: .85rem; display: inline-flex; gap: .4rem; align-items: center; }

/* ── mes lignes ── */
.ligne-item { background: var(--fond2); border: 1px solid var(--trait); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.ligne-item .haut { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ligne-item .nom { font-weight: 600; }
.ligne-item .meta { color: var(--fin); font-size: .82rem; }
.ligne-item .actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: .6rem; }
.ligne-item .actions button { padding: .4rem .7rem; font-size: .9rem; }

@media (max-width: 520px) {
  button.gros { min-width: 11rem; }
  .rangee { flex-wrap: wrap; }
  main { padding-left: 8px; padding-right: 8px; }
  .carte { padding: 12px 10px; }
  .papier { padding: 2px; margin-left: -4px; margin-right: -4px; }
}

/* ── écran Générer ── */
textarea {
  width: 100%; font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: 10px; padding: .6rem; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem;
}
code { background: var(--fond3); border-radius: 5px; padding: .05rem .3rem; font-size: .85em; }
.carte.interne { background: var(--fond3); margin: .8rem 0 0; }

.grille-accords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .8rem; }
.mesure-accords {
  display: flex; align-items: center; gap: 4px;
  background: var(--fond3); border: 1px solid var(--trait);
  border-radius: 10px; padding: .25rem .4rem;
}
.mesure-accords .num { color: var(--fin); font-size: .72rem; min-width: 1rem; text-align: center; }
.mesure-accords button {
  background: none; border: none; padding: .3rem .45rem; border-radius: 7px;
  font-weight: 600; color: var(--or); font-size: .98rem;
}
.mesure-accords button.choisi { background: var(--or); color: #1a1a1a; }
.mesure-accords.faux { border-color: var(--rouge); }

.champ-niveau { margin-top: 1rem; }
.champ-niveau > label { display: block; color: var(--fin); font-size: .85rem; margin-bottom: .4rem; }
.champ-niveau > label b { color: var(--texte); }
.champ-niveau input[type=range] { width: 100%; accent-color: var(--or); }
.echelle { display: flex; justify-content: space-between; color: var(--fin); font-size: .75rem; }

/* ── fenêtre « nommer » ── */
dialog {
  border: none; padding: 0; background: none; color: var(--texte);
  max-width: min(26rem, 92vw); width: 100%;
}
dialog::backdrop { background: rgba(0, 0, 0, .62); }
dialog .feuille {
  background: var(--fond2); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 1rem 1rem 1.1rem;
}
dialog h2 { margin: 0 0 .7rem; font-size: 1.05rem; }
dialog .titre-champ { margin-bottom: .5rem; }
dialog .astuce { margin: 0 0 .9rem; }
dialog .astuce:empty { display: none; }
dialog .rangee { justify-content: flex-end; }

/* ── seconde rangée d'actions : présente, mais pas au même rang ── */
.rangee.secondaire { margin-top: 7px; gap: 5px; }
/* huit outils tiennent en deux lignes : la partition commence plus haut */
.rangee.secondaire button { font-size: .8rem; padding: .34rem .46rem; color: var(--fin); }
.rangee.secondaire button.bascule[aria-pressed="true"] { color: #1a1a1a; }

/* ── bilan de comparaison ── */
.resume { margin: .6rem 0; line-height: 1.5; }
.legende-jeu { display: flex; flex-wrap: wrap; gap: 12px; color: var(--fin); font-size: .82rem; margin-bottom: .6rem; }
.legende-jeu span { display: inline-flex; align-items: center; gap: 5px; }
.pj { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pj.ok { background: #2e9e5b; }
.pj.limite { background: #e2a005; }
.pj.decale { background: #d8382f; }
.pj.fausse { background: #6a4fd8; }
.pj.manquee { background: none; border: 1.5px solid #999; }

.mesures-bilan { display: flex; flex-wrap: wrap; gap: 6px; }
.mesures-bilan .mb {
  background: var(--fond3); border: 1px solid var(--trait); border-radius: 9px;
  padding: .3rem .5rem; font-size: .82rem; min-width: 4.2rem; text-align: center;
}
.mesures-bilan .mb b { display: block; color: var(--fin); font-weight: 400; font-size: .72rem; }
.mesures-bilan .mb.bon { border-color: #2e9e5b; }
.mesures-bilan .mb.moyen { border-color: #e2a005; }
.mesures-bilan .mb.mauvais { border-color: #d8382f; }

/* ── plein écran (classes « pupitre », cf. app.js) : lire en jouant ── */
#pupitre {
  position: fixed; inset: 0; z-index: 60;
  background: #fff; display: flex; flex-direction: column;
}
#pupitre[hidden] { display: none; }
.pupitre-barre {
  display: flex; align-items: center; gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 14px 8px;
  background: var(--fond); color: var(--texte); flex: none;
}
.pupitre-barre .etiquette { flex: 1; }
.pupitre-barre .icone { color: var(--texte); }
.pupitre-feuille {
  flex: 1; overflow-y: auto; background: #fff;
  padding: 6px 6px calc(20px + env(safe-area-inset-bottom));
  scroll-behavior: smooth;
}
.pupitre-feuille svg { max-width: 100%; height: auto; display: block; }

/* ── les gammes dans l'onglet Jouer ── */
#j-gamme .tete-carte { margin-bottom: .5rem; }
#j-gamme .tete-carte b { display: inline-flex; align-items: center; gap: .4rem; }
#j-gamme .etiquette-bloc { margin: .2rem 0; min-width: 4.4rem; }
#j-gamme .grille-reglages { margin-top: .4rem; }
#j-gamme-quoi { color: var(--or); font-weight: 600; }
/* la fondamentale choisie reste visible quand on relâche la touche */
.piano .blanche.choisie { box-shadow: inset 0 0 0 2px var(--or); }
.piano .noire.choisie { box-shadow: inset 0 0 0 2px var(--or); }

/* ── la barre de groupe sur le pupitre ── */
.set-barre {
  display: flex; align-items: center; gap: 8px;
  background: var(--fond2); border: 1px solid var(--or); border-radius: var(--r);
  padding: 7px 9px; margin-bottom: 10px;
}
.set-barre .set-quoi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.set-barre .set-quoi b { font-size: .92rem; }
.set-barre .set-quoi span { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-barre button[disabled] { opacity: .35; }

/* ── un groupe dans la liste ── */
.groupe-item .set-lignes { list-style: none; margin: .6rem 0 0; padding: 0; counter-reset: s; }
.groupe-item .set-lignes li {
  display: flex; align-items: center; gap: 8px; counter-increment: s;
  padding: .3rem 0; border-top: 1px solid var(--trait);
}
.groupe-item .set-lignes li::before {
  content: counter(s) "."; color: var(--fin); font-size: .78rem; min-width: 1.3rem;
}
.groupe-item .set-nom { flex: 1; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groupe-item .set-boutons { display: flex; gap: 4px; flex-shrink: 0; }
.groupe-item .set-boutons button { padding: .15rem .45rem; font-size: .85rem; min-height: 0; }
#d-groupe-liste button { flex-direction: column; align-items: flex-start; gap: .1rem; }
#d-groupe-liste button i { font-style: normal; font-size: .72rem; color: var(--fin); }

/* ── les quatre postes de l'onglet de travail ── */
.choix-travail { margin-bottom: 4px; }
.choix-travail button.actif { background: var(--or); color: #1a1205; border-color: var(--or); font-weight: 600; }
.choix-travail button.actif span { color: inherit; }

/* ── le clic qui s'efface ── */
.compteur {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: var(--fond3); border: 1px solid var(--or); border-radius: var(--r);
  padding: .8rem; margin: .7rem 0;
}

.compteur span { color: var(--or); font-size: .9rem; }
/* ⚠️ pendant le silence, rien ne doit BATTRE : on change la couleur, pas le
   rythme, sinon on suit l'écran au lieu de tenir le tempo */
.compteur.muet { border-color: var(--trait); }
.compteur.muet span { color: var(--fin); }

/* ── la grille relue dans le poste Accords ── */
.grille-lue {
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
  margin: .2rem 0 .6rem;
}
.grille-lue .mes {
  flex: 1 1 4.6rem; min-height: 64px; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  gap: .3rem; background: var(--fond3); border: 1px solid var(--trait); border-radius: 10px;
  padding: .35rem .4rem; font-weight: 600;
}
/* la mesure en cours pendant qu'on joue : le seul repère quand on improvise */
.grille-lue .mes.en-cours { border-color: var(--or); background: #3a2f12; color: var(--or); }
.grille-lue .mes i { font-style: normal; font-weight: 400; font-size: .82rem; color: var(--fin); }
.grille-lue .mes.en-cours i { color: inherit; }
#a-plein { display: flex; flex-direction: column; flex: 1 1 auto; }
#a-plein .tete-grille { align-items: center; margin: .6rem 0 .5rem; }
#a-plein .tete-grille .etiquette-bloc { margin: 0; }
#a-vide .vide-signe .i { width: 3.4rem; height: 3.4rem; }
#p-faibles { margin-top: .3rem; }
/* ⚠️ Un poste qui n'a qu'une carte laisserait tout le bas vide — le défaut déjà
   corrigé ailleurs. Plutôt que de centrer (ce qui déplace le trou en haut), on
   fait porter le vide par l'élément qui y gagne : le cadran, la grille. */
[data-poste="metronome"] .acc-bloc,
[data-poste="accords"] .acc-bloc { display: flex; flex-direction: column; flex: 1 1 auto; }
#m-compteur { flex: 0 1 auto; min-height: 130px; justify-content: center; }
/* le geste principal reste sous le pouce, pas flottant au milieu d'un écran court */
.bas-carte { margin-top: auto; padding-top: .4rem; }
.compteur b { font-size: 2rem; letter-spacing: .01em; }