/* jouer.css — le jeu libre : le manche, les paires de frettes, les rangées de
 * mode et de transposition, et le sélecteur de jeu en plein écran.
 */
 /* ── Jeu libre : occupe tout l'écran, jamais de scroll ───────────────── */
 #vue_jouer{flex:1;display:flex;flex-direction:column;gap:.6rem;
            padding:.7rem;min-height:0}
 #vue_jouer[hidden]{display:none}

 /* Le retour à l'accueil est SORTI du bandeau, et pas glissé dedans : tout le
    bandeau est cliquable pour changer de jeu, un bouton à l'intérieur aurait
    ouvert le sélecteur en même temps qu'il ramène à l'accueil. */
 .jouer_entete{flex:0 0 auto;display:flex;align-items:stretch;gap:.5rem}
 /* Comme #ch_reglages côté morceau : ni collé à l'accueil, ni collé au récap —
    entre les deux, où le pouce le retrouve sans avoir à viser un coin. */
 #jl_reglages{flex:0 0 auto}
 .recap_jeu{flex:1;min-width:0;display:flex;align-items:center;
            justify-content:space-between;
            background:#1a1c21;border-radius:12px;padding:.7rem 1rem;gap:.6rem}
 .recap_jeu .label{font-size:.72rem;color:#9aa0a6;text-transform:uppercase;letter-spacing:.04em}
 .recap_jeu .nom{font-size:1.35rem;font-weight:700;line-height:1.2}
 .recap_jeu button{padding:.7rem 1.1rem;font-size:1rem;font-weight:600;white-space:nowrap}

 .frettes_jouer{flex:1 1 auto;min-height:0;display:grid;
                grid-template-columns:repeat(5,1fr);gap:.6rem}
 .fc{border-radius:16px;color:#14161a;display:flex;flex-direction:column;
     align-items:center;justify-content:center;text-align:center;padding:.4rem;
     min-width:0}
 .fc .principal{font-weight:800;font-size:clamp(1.3rem,4.6vw,2.6rem);line-height:1.05}
 .fc .en{font-weight:500;opacity:.75;font-size:clamp(.85rem,2vw,1.3rem)}
 .fc .libelle{font-weight:500;opacity:.7;font-size:.75rem;text-transform:uppercase;
     letter-spacing:.03em;margin-top:.3rem}

 /* Paires de frettes : rangée basse, plus courte — ce sont les accords de
    passage, ils ne doivent pas voler la place des cinq principaux. */
 .combos_jouer{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);
               gap:.5rem}
 .combos_jouer[hidden]{display:none}
 .combos_jouer .fc{min-height:64px;border-radius:12px}
 .combos_jouer .fc .principal{font-size:clamp(1rem,3.4vw,1.7rem)}
 .combos_jouer .fc .en{font-size:.8rem}
 .combos_jouer .fc .libelle{font-size:.62rem;margin-top:.15rem}

 .rangee{flex:0 0 auto;display:flex;gap:.5rem}
 .rangee[hidden]{display:none}
 .rangee button{flex:1;min-height:60px;font-size:1.05rem;font-weight:600}
 .rangee.transpo button{flex:0 0 4rem;min-height:60px;font-size:1.4rem;font-weight:700}
 .rangee.transpo b{flex:1;text-align:center;font-size:1.3rem;color:#8ab4f8;
     font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center}
 .rangee.transpo button.petit{flex:0 0 5.5rem;font-size:.95rem;font-weight:500}

 /* ── Sélecteur de jeu en plein écran (overlay tactile) ───────────────── */
 .picker{position:fixed;inset:0;background:#0f1013;z-index:20;display:flex;
         flex-direction:column;padding:.7rem}
 .picker[hidden]{display:none}
 .picker_entete{flex:0 0 auto;display:flex;justify-content:space-between;
     align-items:center;padding:.5rem .3rem 1rem;font-size:1.1rem;font-weight:700}
 .picker_liste{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}
 .picker_liste button{text-align:left;padding:1rem 1.1rem;border-radius:12px;
     min-height:64px}
 .picker_liste button .desc{display:block;font-weight:400;opacity:.7;
     font-size:.8rem;margin-top:.15rem}

/* ── À qui vont les boutons qu'on a sous les doigts ──────────────────────────
   Absent à un seul pupitre (l'élément est `hidden`), donc invisible pour qui
   joue seul — c'est-à-dire presque tout le monde. */
.pup_barre {
  display: flex; align-items: center; gap: .5rem;
  margin: .2rem 0 .6rem; font-size: .9rem; color: #8b93a3;
}
.pup_barre select {
  background: rgba(255, 255, 255, .06); color: #e8eaed;
  border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px;
  padding: .25rem .5rem; font-size: .95rem;
}