/* saz/commun/mus.css */
/* Partitions et outils communs (chant, composition, guitare, saz). Prefixe mus-.
   COPIE IDENTIQUE dans chant/commun, composition/commun, guitare/commun et saz/commun : modifier celle du chant,
   puis lancer « node dev/chant-copier-commun.js ». Couleurs : roles du site (--ink, --surface, --line...) et encre
   de la matiere de la page (--m aplat, --m-texte texte, --m-doux fond pale, --m-sur texte sur l'aplat), justes dans
   les 9 themes (public/css/fondations). Focus : --focus. */
.mus{
  color:var(--ink);font-family:var(--body)
}
.mus *{box-sizing:border-box}
.mus [hidden]{display:none!important}
.mus-outil{display:grid;gap:var(--s4);min-width:0;max-width:100%}

/* Commandes : les outils prennent les composants communs (.btn, .field, .consent, .choix : public/css/outils.css).
   .mus-btn et .mus-case restent pour le lecteur de partitions (partition.js), au dessin des boutons communs. */
.mus-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:10px 18px;border-radius:var(--r-champ);
  border:2px solid var(--m);background:var(--m);color:var(--m-sur);font:600 var(--t-corps)/1.2 var(--body);cursor:pointer;
  transition:background-color var(--d-court) var(--courbe-sortie),transform var(--d-appui) var(--courbe-sortie)}
.mus-btn:active:not(:disabled){transform:scale(.97)}
.mus-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.mus-btn-doux{background:var(--surface);color:var(--m-texte);border-color:var(--m-texte)}
@media (hover:hover) and (pointer:fine){ .mus-btn-doux:hover{background:var(--m-doux)} }
.mus-btn:disabled{background:var(--surface-2);border-color:var(--line);color:var(--muted);cursor:not-allowed}
.mus-btn .ic{width:18px;height:18px;flex:none}
.mus-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mus-case{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-size:var(--t-petit);cursor:pointer}
.mus-case input{width:22px;height:22px;accent-color:var(--m-texte)}
.mus-champs{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.mus-tempo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);min-height:44px;font-weight:600}
.mus-tempo input{flex:1 1 160px;min-width:120px;max-width:320px}
.mus-tempo output{min-width:3ch;font:800 var(--t-titre-3)/1 var(--display);font-variant-numeric:tabular-nums}
.mus-aide{margin:0;max-width:var(--mesure);font-size:var(--t-petit);color:var(--muted)}
.mus-conseil{margin:0;max-width:var(--mesure);font-size:var(--t-petit);line-height:1.5}
.mus-erreur{margin:0;padding:10px 14px;border-radius:var(--r-champ);background:var(--bad-soft);color:var(--ink);font-size:var(--t-petit)}
.mus-titre{margin:0;font:600 var(--t-corps)/1.35 var(--body)}

/* Partitions des cours */
.mus-partition{margin:16px 0;padding:12px 0;background:none;border:0;border-block:1px solid var(--line);border-radius:0;display:grid;gap:8px}
.mus-partition-barre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
/* Travailler le morceau (travail.js) : vitesse, en boucle, passage de quelques mesures */
.mus-travail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:var(--t-petit)}
.mus-vitesse,.mus-passage{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.mus-vitesse input[type=range]{width:min(180px,40vw);accent-color:var(--m-texte);min-height:44px}
.mus-vitesse-val{min-width:7.5em;font-variant-numeric:tabular-nums}
.mus-pas{min-width:44px;min-height:44px;padding:0;font-size:1.2em}
.mus-passage select{min-height:44px;padding:0 8px}
.mus-passage[hidden],.mus-tout[hidden]{display:none}
.mus-partition-dessin{color:var(--ink);overflow:hidden}
.mus-partition-dessin svg{display:block;max-width:100%}
/* Guitare, vues avec tablature : une ligne plus large que l'ecran defile de cote (abcjs ne la replie pas) */
.mus-partition-dessin.mus-defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mus-partition-dessin.mus-defile svg{max-width:none}
.mus-partition .abcjs-note,.mus-partition .abcjs-rest{cursor:pointer}
/* Guitare, vue « Tablature » (tab-dessin.js) : le style des tablatures des cours (t-line, t-bar, t-bg, t-n, t-s, t-ly
   de course.css), chiffres un peu plus grands, accords sur leur rangee dans la couleur de la matiere */
.mus-tab{display:grid;gap:6px;padding:4px 0}
.mus-tab svg{display:block;max-width:100%;height:auto;overflow:visible}
.mus-tab .t-n{font:700 14px var(--mono,ui-monospace,monospace);fill:var(--ink)}
.mus-tab .t-ly{font:400 13px var(--body);fill:var(--ink)}
.mus-tab .t-s{fill:var(--muted)}
.mus-tab .t-line{stroke:var(--muted);stroke-opacity:.55}
.mus-tab .mus-tab-lie{fill:var(--muted);font-weight:500}
.mus-tab-acc{font:700 15px var(--body);fill:var(--m-texte)}
.mus-tab-annot{font:italic 500 12px var(--body);fill:var(--muted)}
.mus-tab-volta{fill:none;stroke:var(--muted);stroke-width:1.2}
.mus-tab-point{fill:var(--ink)}
.mus-tab-chiffrage{font:700 20px/1 var(--display);fill:var(--ink)}
.mus-tab-note{cursor:pointer}
.mus-tab-note .t-bg{transition:fill .12s}
@media (hover:hover) and (pointer:fine){ .mus-tab-note:hover .t-bg{fill:var(--m-doux)} }
.mus-partition .mus-tab-note.mus-joue{fill:inherit}
/* Ecoute (suivi.js) : bande sur la note jouee, colonne allumee dans la tablature */
.mus-curseur{fill:color-mix(in srgb,var(--m) 24%,transparent);stroke:color-mix(in srgb,var(--m) 55%,transparent);stroke-width:1;pointer-events:none;transition:transform .1s linear}
.mus-tab-note.mus-joue .mus-tab-zone{fill:color-mix(in srgb,var(--m) 24%,transparent);stroke:color-mix(in srgb,var(--m) 55%,transparent);stroke-width:1}
.mus-tab-note.mus-joue .t-bg{fill:var(--surface);stroke:var(--m-texte);stroke-width:1.5}
.mus-tab-note.mus-joue .t-n,.mus-tab-note.mus-joue .t-ly{fill:var(--m-texte)}
.mus-tab-silence{cursor:default}
.mus-tab-zone{fill:transparent}
/* Guitare, vue « Les deux » (tab-retouche.js) : chiffres de la tablature d'abcjs dans le style des cours */
.mus-guitare text.abcjs-tab-number{font-family:var(--mono,ui-monospace,monospace);font-weight:700}
.mus-guitare .mus-tab-fond{fill:var(--bg)}
.mus-guitare text.abcjs-chord{font-weight:700;fill:var(--m-texte)}
.mus-guitare text.abcjs-annotation{font-style:italic;fill:var(--muted)}
.mus-cache{position:absolute;left:-99999px;top:0;width:900px;visibility:hidden;pointer-events:none}
.mus-partition .mus-joue,.mus-partition .mus-joue path{fill:var(--m-texte)}

@media (prefers-reduced-motion:reduce){.mus *{transition:none!important}}
@media print{.mus-partition{border:0;padding:0}.mus-partition .mus-joue,.mus-partition .mus-joue path{fill:currentColor}}

/* saz/saz.css */
/* Saz : outils (accordeur, manche, verificateur, metronome) et tablatures des cours. Prefixe saz-.
   Commandes : composants communs (.btn, .btn-matiere, .field, .choix, .cadran, .temps-case, .outil-reglages :
   public/css/outils.css). Ici : la mise en page des outils et le dessin du manche, dont le bois garde ses couleurs
   (jetons --saz-* ci-dessous, fixes dans tous les themes). Encre de la matiere : --m (moutarde), --m-texte, --m-doux. */
.saz-outil,.saz-tab,.saz-tab-erreur{color:var(--ink);font-family:var(--body)}
/* Jetons du dessin du manche (fixes : le bois reste du bois dans tous les themes) */
.saz-manche-cadre{--saz-bois:#8A5A34; --saz-bois2:#5E3B22; --saz-frette:#DCD3C2; --saz-corde:#EDE6D6; --saz-nom:#FFF8EC; --saz-survol:rgb(244 217 168 / .22)}
.saz-outil{display:grid;gap:var(--s4);min-width:0;max-width:100%}
.saz-outil *,.saz-tab *{box-sizing:border-box}
.saz-outil [hidden],.saz-tab [hidden]{display:none!important}
.saz-outil .row-actions{margin-top:0}
.saz-outil > .flash{margin:0}

/* Reglages (panneau plie, outil-reglages) : hauteur hors liste */
.saz-transpo{display:flex;align-items:center;gap:var(--s3)}
.saz-transpo-val{min-width:10ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.saz-resume{margin:0;color:var(--muted);font-size:var(--t-petit)}
.saz-fin > summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--accent);font-size:var(--t-petit);font-weight:600}
.saz-fin[open]{display:grid;gap:var(--s3)}

/* Accordeur : une ligne par choeur, separees par un filet (plus de cartes bordees dans la feuille : revue finale du
   06/10) ; le choeur choisi prend la surimpression sous son nom, « Ecouter » a droite ; puis le cadran (puits teinte) */
.saz-choeurs{display:grid;gap:0;border-top:1px solid var(--line);max-width:40rem}
.saz-choeur{display:flex;align-items:center;gap:var(--s2) var(--s3);padding:var(--s1) 0;border-bottom:1px solid var(--line)}
/* Marque du choix (la meme que .choix-btn) : la surimpression sous le nom du choeur */
.saz-choeur-choix[aria-pressed="true"] .saz-choeur-nom{text-decoration:underline;text-decoration-color:var(--marque);text-decoration-thickness:var(--surimp-ep);
  text-underline-offset:var(--surimp-dec);text-decoration-skip-ink:none}
.saz-choeur-choix{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;column-gap:var(--s3);row-gap:2px;min-height:56px;padding:6px 0;
  border:0;border-radius:var(--r-champ);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:transform var(--d-appui) var(--courbe-sortie)}
.saz-choeur-choix:active{transform:scale(.985)}
.saz-choeur-rang{grid-row:1/3;width:28px;height:28px;border-radius:var(--r-petit);display:grid;place-items:center;background:var(--m);color:var(--m-sur);
  font:700 var(--t-legende)/1 var(--body)}
.saz-choeur-nom{grid-area:1/2;justify-self:start;font-weight:700}
.saz-choeur-etat{grid-area:1/2;justify-self:end;padding:1px 8px;border-radius:var(--r-petit);background:var(--ok);color:var(--dot-ink);font:700 var(--t-legende)/1.4 var(--body)}
.saz-choeur-etat:empty{display:none}
.saz-choeur-info{grid-area:2/2;color:var(--muted);font-size:var(--t-legende)}
.saz-choeur-note{grid-row:1/3;grid-column:3;font:800 var(--t-titre-2)/1 var(--display);font-stretch:var(--large-titre);color:var(--m-texte)}
.saz-choeur .play-btn{flex:none;align-self:center;margin:0}
@media (hover:hover) and (pointer:fine){ .saz-choeur-choix:hover .saz-choeur-nom{text-decoration:underline;text-decoration-color:var(--bord);text-underline-offset:.25em} }
/* Micro eteint : la note visee, a l'encre douce (plus de tiret geant) */
.saz-cadran.is-repos .cadran-note{color:var(--muted)}

/* Manche : noms des choeurs fixes a gauche, manche qui defile (cases de 44 px au doigt : manche.js) */
.saz-manche-cadre{display:flex;border:1.5px solid var(--champ-bord);border-radius:var(--r-bloc);background:var(--surface);overflow:hidden;min-width:0}
.saz-manche-noms{flex:none;width:52px;display:grid;grid-auto-rows:50px;padding-top:26px;background:var(--surface-2);border-right:1px solid var(--line);
  font:700 var(--t-legende)/1 var(--body)}
.saz-manche-noms span{display:grid;place-items:center}
.saz-manche-defil{flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-color:var(--bord) transparent}
.saz-manche-svg{display:block;max-width:none}
.saz-bois{fill:var(--saz-bois)}
.saz-vide{fill:var(--saz-bois2)}
.saz-sillet{fill:var(--nut)}
.saz-frette{stroke:var(--saz-frette);stroke-width:2}
.saz-frette.is-octave{stroke:var(--m);stroke-width:3.5}
.saz-corde{stroke:var(--saz-corde);stroke-width:1;opacity:.7}
.saz-corde.is-bam{stroke-width:2.4}
.saz-num{font:600 12px var(--body);fill:var(--muted);text-anchor:middle;font-variant-numeric:tabular-nums}
.saz-num.is-vide{font-size:11px}
.saz-case{cursor:pointer;outline:none}
.saz-case .saz-zone{fill:transparent;transition:fill var(--d-appui) var(--courbe-sortie)}
@media (hover:hover) and (pointer:fine){ .saz-case:hover .saz-zone{fill:var(--saz-survol)} }
/* Focus : double anneau sur le bois (creme dans la case, encre de focus autour), lisible dans les 9 themes */
.saz-case:focus-visible{outline:var(--focus-epaisseur) solid var(--focus);outline-offset:2px}
.saz-case:focus-visible .saz-zone{stroke:var(--creme);stroke-width:3}
.saz-case.is-on .saz-zone{fill:var(--m);transition:none}
/* Nom de la note : 13 px sur une pastille couleur bois qui masque les cordes (manche.js) */
.saz-pastille{fill:var(--saz-bois);pointer-events:none}
.saz-case[data-k="0"] .saz-pastille{fill:var(--saz-bois2)}
.saz-case.is-on .saz-pastille{fill:var(--m)}
.saz-case text{font:700 13px var(--body);fill:var(--saz-nom);text-anchor:middle;pointer-events:none}
.saz-case.is-on text{fill:var(--m-sur)}
.saz-manche-info{margin:0;min-height:1.5em;font-size:var(--t-petit)}

/* Verificateur : le defi en grand, les choix, le verdict */
.saz-choix{display:grid;gap:0}
.saz-defi{display:grid;gap:var(--s1);padding:var(--s5) var(--s4);border-radius:var(--r-bloc);background:var(--surface-2);text-align:center}
.saz-defi-perde{font:800 var(--t-titre-1)/1.05 var(--display);font-stretch:var(--large-titre);color:var(--m-texte)}
.saz-defi-sur{font-size:var(--t-grand);font-weight:600}
.saz-verdict{margin:var(--s2) 0 0;min-height:3em;padding:var(--s2) var(--s3);border-radius:var(--r-champ);line-height:1.4}
.saz-verdict.is-bon{background:var(--ok-soft);color:var(--ok);font-weight:700}
.saz-verdict.is-presque{background:var(--m-doux)}
.saz-score{margin:0;color:var(--muted);font-size:var(--t-petit)}
.saz-score:empty{display:none}

/* Metronome des rythmes boiteux : les temps groupes comme on les compte (2+2+3) */
.saz-metro.is-fixe{max-width:560px;margin:var(--s4) 0;padding:var(--s4) 0;border-block:1px solid var(--line)}
.saz-metro-titre{margin:0;font-weight:600;line-height:1.4}
.saz-rythme{max-width:320px}
.saz-temps{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s4) var(--s3);border-radius:var(--r-bloc);background:var(--surface-2)}
/* Un groupe de temps (2+2+3) : les cases serrees, un large blanc entre les groupes (pas de plaque blanche : 2 niveaux) */
.saz-temps{column-gap:var(--s4)}
@media (min-width:600px){ .saz-temps{column-gap:var(--s6)} }
.saz-groupe{display:flex;align-items:center;gap:var(--s1);padding:0;background:none}
.saz-temps-case.niveau-2{width:44px;height:44px;font-size:var(--t-corps)}
.saz-tempo{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:var(--s2) var(--s3);max-width:440px}
.saz-tempo-lire{display:grid;justify-items:center;text-align:center}
.saz-tempo-val{font:800 var(--t-titre-1)/1 var(--display);font-stretch:var(--large-titre);font-variant-numeric:tabular-nums}
.saz-tempo-unite{color:var(--muted);font-size:var(--t-legende)}
.saz-tempo input[type=range]{grid-column:1/-1;width:100%}

/* Lecture (tablature.js, cours) : boutons et vitesses du lecteur de tablature, au dessin des composants communs */
.saz-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:10px 18px;border:2px solid var(--m);border-radius:var(--r-champ);
  background:var(--m);color:var(--m-sur);font:600 var(--t-corps)/1.2 var(--body);cursor:pointer;transition:transform var(--d-appui) var(--courbe-sortie)}
.saz-btn:active{transform:scale(.97)}
.saz-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.saz-erreur{margin:0;padding:10px 14px;border-radius:var(--r-champ);background:var(--bad-soft);color:var(--ink);font-size:var(--t-petit)}

/* Tablature des cours */
.saz-tab{display:grid;gap:10px;min-width:0;margin:16px 0;padding:12px 0;border:0;border-block:1px solid var(--line);border-radius:0;background:none}
.saz-tab-barre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.saz-tab-tempo{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.saz-tab-tempo input{width:110px;min-height:44px;accent-color:var(--accent)}
.saz-tab-tempo output{min-width:3ch;font-weight:700;color:var(--ink)}
.saz-tab-dessin{display:grid;gap:2px;min-width:0}
.saz-tab-svg{display:block;max-width:100%;height:auto}
.saz-tab-ligne{stroke:var(--muted);stroke-width:1;opacity:.5}
.saz-tab-mesure{stroke:var(--muted);stroke-width:1.5}
.saz-tab-lettre{font:700 13px var(--body);fill:var(--muted)}
.saz-tab-fond{fill:var(--bg);transition:fill .1s}
.saz-tab-perde{font:700 15px var(--body);fill:var(--ink);text-anchor:middle}
.saz-tab-coup{font:700 17px var(--body);fill:var(--accent);text-anchor:middle}
.saz-tab-ev.is-on .saz-tab-fond{fill:var(--m)}
.saz-tab-ev.is-on .saz-tab-perde{fill:var(--ink)}
.saz-tab-accord{margin:0;font-size:13px;color:var(--muted)}
.saz-tab-source{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:pre}
.saz-tab-erreur{margin:6px 0 12px;padding:10px 14px;border-radius:var(--r-bloc);background:var(--bad-soft);font-size:14px}

/* Ecrans larges */
@media (prefers-reduced-motion:reduce){
  .saz-case .saz-zone,.saz-tab-fond{transition:none}
}
@media print{
  .saz-tab-barre,.saz-outil{display:none}
  .saz-tab{border:0;padding:0}
}

/* saz/vues.css */
/* Saz : trois affichages des morceaux (9-vues.js), tablature dessinee dans le style des cours (8-tab-dessin.js),
   rangees de tablature sous la portee (8-tab-sous.js). Couleurs : roles du site et encre de la matiere (--m :
   moutarde) ; chiffre joue : aplat --m et chiffre --m-sur (contraste au moins 4,5 dans les 9 themes). */


/* Figure du morceau */
.saz-mus .saz-dessin{display:grid;gap:6px}
.saz-mus .saz-zone-abc:empty,.saz-mus .saz-zone-tab:empty{display:none}
.saz-mus .saz-zone-abc svg{display:block;max-width:100%}
.saz-sous{display:block;max-width:100%;height:auto;margin:0 0 10px;overflow:visible}
.saz-info,.saz-legende{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.saz-avis{margin:4px 0;padding:8px 12px;background:var(--m-doux);border-radius:var(--r-bloc);
  font-size:14px;line-height:1.45;color:var(--ink)}
.saz-tab-texte{margin:0;padding:10px;overflow-x:auto;font:500 14px/1.5 var(--mono,ui-monospace,monospace);color:var(--ink);white-space:pre}

/* Tablature dessinee : choeurs, perdes sur fond, trait de duree, coups de tezene, paroles */
.saz-tabd{display:grid;gap:8px;padding:2px 0;min-width:0}
.saz-t-svg{display:block;max-width:100%;height:auto;overflow:visible}
.saz-t-corde{stroke:var(--muted);stroke-opacity:.6;stroke-width:1}
.saz-t-barre{stroke:var(--ink);stroke-width:1.4}
.saz-t-barre.saz-t-fin{stroke-width:3.2}
.saz-t-nom{font:600 12px var(--body,"Inter",system-ui,sans-serif);fill:var(--muted)}
.saz-sous-nom{font:600 10px var(--body,"Inter",system-ui,sans-serif);fill:var(--muted);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.saz-t-fond{fill:var(--surface);transition:fill .12s}
.saz-t-fond.saz-t-quart{stroke:var(--m-texte);stroke-width:1.5;stroke-dasharray:3 2}
.saz-t-perde{font:700 14px var(--mono,ui-monospace,monospace);fill:var(--ink)}
.saz-t-perde.saz-sous-perde{font-size:12.5px}
.saz-t-duree{fill:var(--m-texte);fill-opacity:.5}
.saz-t-coup{fill:none;stroke:var(--m-texte);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.saz-t-parole{font:400 13px var(--body,"Inter",system-ui,sans-serif);fill:var(--ink)}
.saz-t-acc{font:700 15px var(--body,"Inter",system-ui,sans-serif);fill:var(--m-texte)}
.saz-t-zone{fill:transparent}
.saz-t-note{cursor:pointer}
@media (hover:hover) and (pointer:fine){ .saz-t-note:hover .saz-t-fond{fill:var(--m-doux)} }
/* Ecoute (8-suivi.js) : la colonne jouee s'allume */
.saz-t-note.is-joue .saz-t-zone{fill:var(--m-doux);stroke:var(--m);stroke-width:1}
.saz-t-note.is-joue .saz-t-fond{fill:var(--m)}
.saz-t-note.is-joue .saz-t-perde{fill:var(--m-sur)}
.saz-t-note.is-joue .saz-t-duree{fill-opacity:1}
.saz-sous .mus-curseur,.saz-mus .mus-curseur{pointer-events:none}

@media (prefers-reduced-motion:reduce){.saz-t-fond{transition:none}}
@media print{
  .saz-mus .saz-legende,.saz-mus .mus-aide{display:none}
  .saz-t-note.is-joue .saz-t-fond{fill:var(--papier-blanc)}
}