/* preparer.css — la vue Préparer : défilement libre, c'est de la préparation.
 *
 * Elle remplace l'onglet Réglages, qui mêlait sans le dire deux choses de
 * rythmes très différents : ce qu'on bascule DEVANT du public (la banque de
 * sons, l'instrument — on compare à l'oreille, sur le même accord) et ce qu'on
 * règle une fois pour toutes (les neuf curseurs, la sauvegarde dans
 * config.yaml). Les seconds sont maintenant derrière un repli, hors du chemin
 * de scène.
 */
 #vue_preparer{flex:1;overflow-y:auto;padding:1.2rem 1.5rem;max-width:720px;
               width:100%;margin:0 auto}
 #vue_preparer[hidden]{display:none}

 /* La rangée du haut : le retour à l'accueil, et le titre de la vue. */
 .preparer_entete{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
 .preparer_entete h1{margin:0}
 #tiroir_fermer{display:none;margin-left:auto}

 /* ── Le tiroir ─────────────────────────────────────────────────────────
    Préparer descendu du haut, par-dessus la vue qu'on garde en dessous —
    morceau ou jeu libre (vues.js). Il laisse voir une bande de cette vue : on
    sait qu'on n'en est pas sorti. Sous le karaoké (z-index 40), au-dessus de
    tout le reste. */
 #vue_preparer.tiroir{position:fixed;top:0;left:0;right:0;z-index:31;
     max-height:85vh;background:#16181d;border:1px solid #3c4043;border-top:0;
     border-radius:0 0 14px 14px;box-shadow:0 10px 30px rgba(0,0,0,.6);
     animation:tiroir .18s ease-out}
 @keyframes tiroir{from{transform:translateY(-12%);opacity:0}}
 #vue_preparer.tiroir #accueil_preparer{display:none}
 /* La section Manche ne disparaît que dans le COULOIR (vues.js pose la classe) :
    là seulement la grille appartient au morceau, et la choisir ici le
    refermerait (manche.js). En jeu libre, elle reste — c'est la grille de
    l'utilisateur, et c'est justement ce qu'on vient parfois changer ici. */
 #vue_preparer.tiroir.couloir #sec_manche{display:none}
 #vue_preparer.tiroir #tiroir_fermer{display:inline-flex}
 #tiroir_voile{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.5)}
 #tiroir_voile[hidden]{display:none}

 /* Une section par question : le manche, le son, le matériel. Le titre porte
    la question, la ligne en dessous dit à quoi ça sert — sans elle, « Whammy »
    ne veut rien dire pour qui ne connaît pas la barre. */
 .section{margin:0 0 1.8rem}
 .section > h2{font-size:.78rem;font-weight:700;text-transform:uppercase;
     letter-spacing:.08em;color:#9aa0a6;margin:0 0 .15rem}
 .section > p{margin:0 0 .6rem;color:#5f6368;font-size:.8rem}

 .r{margin:1.1rem 0}
 .r label{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.35rem}
 .r b{color:#8ab4f8;font-variant-numeric:tabular-nums;font-weight:600}
 input[type=range]{width:100%;accent-color:#8ab4f8}
 .row{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
 .row button{flex:1;min-width:90px;padding:.6rem}
 .jeu{flex:1 1 150px;text-align:left;line-height:1.3;position:relative;
     padding-right:3.6rem}
 .jeu small{display:block;opacity:.7;font-size:.72rem;font-weight:400}
 .jeu .actions{position:absolute;top:.3rem;right:.3rem;display:flex;gap:.2rem}
 .jeu .actions span{width:1.5rem;height:1.5rem;display:flex;align-items:center;
     justify-content:center;border-radius:5px;font-size:.8rem;opacity:.6}
 .jeu .actions span:active{opacity:1;background:rgba(255,255,255,.15)}
 /* Les actions qui portent sur la LISTE, pas sur un jeu en particulier. */
 .row.liens{gap:1.2rem;margin-top:.4rem}
 .row.liens button{flex:0 0 auto;min-width:0;padding:.2rem 0;text-align:left}
 .lien{background:none;border:none;color:#8ab4f8;cursor:pointer;font:inherit;
     padding:.2rem 0}
 .formulaire{background:#1c1e23;border:1px solid #3c4043;border-radius:8px;
     padding:.9rem;margin:.6rem 0}
 .formulaire input{width:100%;box-sizing:border-box;padding:.5rem;margin-bottom:.5rem;
     font:inherit}
 .erreur{color:#f28b82;font-size:.85rem;min-height:1.2em;margin-top:.3rem}
 #msg{color:#81c995;font-size:.85rem;min-height:1.3em;margin-top:.5rem}

 /* ── Ajouter un écran ─────────────────────────────────────────────────
    Le QR est sur FOND BLANC quoi qu'il arrive, et avec sa marge blanche : un
    lecteur de code cherche du sombre sur du clair, et l'inverse ne se lit pas
    de façon fiable. C'est le seul endroit de l'interface qui échappe au thème
    sombre, et c'est pour une raison optique, pas esthétique. */
 .ecran_partage{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
 .ecran_qr{background:#fff;padding:10px;border-radius:10px;line-height:0;
     flex:0 0 auto}
 .ecran_qr svg{display:block;width:176px;height:176px}
 .ecran_lien{flex:1 1 220px;min-width:0}
 /* L'adresse doit pouvoir être SÉLECTIONNÉE au doigt : la remise à zéro
    globale interdit la sélection partout, et c'est le seul recours quand le
    presse-papier n'est pas accessible (une page en http n'est pas un contexte
    sûr, et navigator.clipboard n'y existe pas). */
 #ecran_url{display:inline-block;user-select:text;-webkit-user-select:text;
     color:#8ab4f8;font-size:1.05rem;font-weight:600;word-break:break-all;
     text-decoration:none}
 #ecran_msg{color:#81c995;font-size:.82rem;min-height:1.2em;margin-top:.3rem}
 #ecran_msg.err{color:#f28b82}

 /* ── Le repli de lutherie ──────────────────────────────────────────────
    <details> natif : le repli est la seule chose qu'on demande, et le
    navigateur la fait déjà. Une bascule en JavaScript n'aurait rien ajouté,
    sinon un état de plus à tenir. */
 .lutherie{border:1px solid #3c4043;border-radius:12px;padding:0 1rem;
     margin:2rem 0 1rem;background:#16181d}
 .lutherie > summary{cursor:pointer;padding:.9rem .2rem;font-weight:600;
     list-style:none;display:flex;align-items:center;gap:.5rem}
 .lutherie > summary::-webkit-details-marker{display:none}
 .lutherie > summary::before{content:'▸';color:#9aa0a6;font-size:.9rem}
 .lutherie[open] > summary::before{content:'▾'}
 .lutherie > summary small{color:#5f6368;font-weight:400;font-size:.78rem}
 .lutherie_corps{padding:0 .2rem 1rem}

/* ── La liste des pupitres (Préparer › Matériel) ─────────────────────────────
   Une ligne par instrument branché. Volontairement sobre : c'est un écran de
   préparation, pas de jeu — on y vient une fois, avant de commencer. */
#pupitres { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0; }

.pupitre {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .5rem .7rem; border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}
.pup_titre { display: flex; align-items: baseline; gap: .5rem; }
.pup_titre small { color: #8b93a3; font-variant-numeric: tabular-nums; }
.pup_etat { flex: 1; min-width: 8rem; font-size: .9rem; }
.pup_ok { color: #4ade80; }
.pup_ko { color: #fbbc04; }
.pup_actions { display: flex; gap: .6rem; }

#pup_modele {
  background: rgba(255, 255, 255, .06); color: inherit;
  border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px;
  padding: .2rem .4rem;
}
/* Le whammy partage la section « Matériel » avec les pupitres : un filet le
   sépare, sinon les deux sujets se lisent comme un seul. */
.section p.apres {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Le pupitre qu'on règle. Un liseré plutôt qu'un fond : la ligne active ne
   doit pas peser plus lourd que les autres, elle doit juste se trouver. */
.pupitre.actif {
  box-shadow: inset 3px 0 0 #4ade80;
  background: rgba(255, 255, 255, .07);
}