/* chant/chant.css */
/* Chant : outils « Chanter juste » et « Donner la note » (styles communs : commun/mus.css ; commandes et cadran :
   public/css/outils.css). Prefixe chant-. Encre de la matiere : --m (framboise), --m-texte, --m-doux, --m-sur ; le
   clavier garde ses couleurs d'instrument (jetons --chant-* ci-dessous, fixes dans tous les themes). */
.chant-clavier{
  --chant-ivoire:#FFFDF8; --chant-ivoire-2:#F1E8D8; --chant-filet:#B9A58C; --chant-nom:#6E5847; --chant-ebene:#221612; --chant-ebene-2:#3E2C25;
  --chant-cadre:#2E1F1A; --chant-point:#A8577A; --chant-point-clair:#E7B3C9; --chant-joue:#F6DDE8;
}
/* Chanter juste : reglages, suite de notes, cadran */
.chant-reglages{display:grid;gap:var(--s3)}
.chant-suite{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none}
.chant-note{position:relative;min-height:44px;min-width:64px;padding:8px 14px;border-radius:var(--r-champ);border:1.5px solid var(--champ-bord);background:var(--surface);
  color:var(--ink);font:700 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)}
.chant-note:active{transform:scale(.97)}
.chant-note.is-cible{border-color:var(--m-texte);border-width:2px;box-shadow:inset 0 -4px 0 var(--m)}
/* Reussie : coche dessinee au trait (pas de caractere) et encre du succes */
.chant-note.is-fait{border-color:var(--ok);background:var(--ok-soft);padding-right:34px}
.chant-note.is-fait::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:12px;margin-top:-8px;border:solid var(--ok);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.chant-note.is-joue{background:var(--m);border-color:var(--m);color:var(--m-sur);transition:none}
.chant-cadran .chant-jauge > b{left:25%;width:50%}
.chant-cadran.is-proche{box-shadow:inset 0 0 0 2px var(--m)}
.chant-cible{margin:0;font-weight:600;color:var(--m-texte)}
.chant-tenue{width:100%;max-width:420px;height:8px;border-radius:var(--r-petit);background:var(--surface);overflow:hidden}
.chant-tenue i{display:block;height:100%;width:100%;background:var(--ok);transform:scaleX(0);transform-origin:left center;transition:transform 100ms linear}
.chant-annonce{margin:0;min-height:1.4em;font-weight:700;font-size:var(--t-corps);color:var(--ok)}

/* Donner la note : clavier d'une octave et demie (dessin) */
.chant-affiche{margin:0;min-height:1.5em;font:800 var(--t-titre-3)/1.3 var(--display);color:var(--m-texte)}
.chant-clavier{padding:10px 6px 7px;border-radius:var(--r-bloc);background:var(--chant-cadre)}
.chant-touches{position:relative;height:clamp(140px,38vw,190px);border-top:3px solid var(--m);touch-action:manipulation;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.chant-touche{position:absolute;top:0;padding:0;border:0;cursor:pointer;font:inherit}
.chant-blanche{height:100%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding-bottom:8px;
  background:linear-gradient(180deg,var(--chant-ivoire) 0%,var(--chant-ivoire) 75%,var(--chant-ivoire-2) 100%);border:1px solid var(--chant-filet);border-top:0;
  border-radius:0 0 var(--r-champ) var(--r-champ)}
.chant-noire{height:60%;z-index:2;background:linear-gradient(180deg,var(--chant-ebene-2),var(--chant-ebene));border-radius:0 0 var(--r-champ) var(--r-champ);
  box-shadow:0 3px 4px rgb(0 0 0 / .35)}
.chant-touche-nom{font:700 13px/1 var(--body);color:var(--chant-nom);pointer-events:none;white-space:nowrap}
.chant-blanche.is-gamme::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--chant-point)}
.chant-noire.is-gamme::after{content:"";position:absolute;left:50%;bottom:10px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--chant-point-clair)}
.chant-blanche.is-tonique::before{width:12px;height:12px;background:var(--chant-ivoire);box-shadow:0 0 0 3px var(--chant-point)}
.chant-noire.is-tonique::after{box-shadow:0 0 0 2px var(--chant-ivoire)}
.chant-blanche.is-joue{background:linear-gradient(180deg,var(--chant-joue),var(--chant-point-clair))}
.chant-noire.is-joue{background:linear-gradient(180deg,var(--chant-point),var(--chant-ebene-2))}
/* Focus : double anneau dans la touche (le dessin ne prend pas l'anneau exterieur) : brun puis creme sur l'ivoire,
   creme puis brun sur l'ebene ; la couleur de fond de la touche est posee sous son degrade */
.chant-blanche{background-color:var(--chant-ivoire)}
.chant-noire{background-color:var(--chant-ebene)}
.chant-touche:focus-visible{outline:3px solid var(--brun);outline-offset:-3px;box-shadow:inset 0 0 0 6px var(--creme)}
.chant-noire:focus-visible{outline-color:var(--creme);box-shadow:inset 0 0 0 6px var(--brun)}

@media (max-width:360px){.chant-touche-nom{font-size:11px}}
@media (prefers-reduced-motion:reduce){.chant-tenue i{transition:none}}

/* chant/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}}