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

/* composition/composition.css */
/* Composition : outils « Grille d'accords » et « Boite a rythmes » (styles communs : commun/mus.css ; commandes :
   public/css/outils.css). Prefixe compo-. Encre de la matiere : --m (sarcelle), --m-texte, --m-doux, --m-sur ; les
   trois autres sons de la boite a rythmes prennent les encres de trois matieres pour se distinguer (series). */
/* Grille d'accords : tonalite, cartes des accords, cases de la grille, grilles types */
.compo-ton{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3) var(--s4)}
.compo-ton .field{flex:1 1 180px;max-width:280px}
.compo-accords{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,136px),1fr))}
.compo-accord{display:grid;grid-template-rows:1fr auto;gap:var(--s1);border:1.5px solid var(--champ-bord);border-radius:var(--r-bloc);background:var(--surface)}
.compo-accord .compo-ajouter{margin:0 var(--s2) var(--s2)}
.compo-accord-jouer{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px var(--s2);padding:var(--s3);border:0;border-radius:var(--r-bloc) var(--r-bloc) 0 0;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:88px;transition:background-color var(--d-court) var(--courbe-sortie)}
@media (hover:hover) and (pointer:fine){ .compo-accord-jouer:hover{background:var(--m-doux)} }
.compo-accord-jouer:active{background:var(--m-doux)}
.compo-degre{font:700 var(--t-petit)/1.2 var(--body);color:var(--m-texte)}
.compo-nom{font:800 var(--t-titre-3)/1.1 var(--display);font-stretch:var(--large-titre)}
.compo-sym{grid-column:2;color:var(--muted);font-size:var(--t-legende)}
.compo-role{grid-column:1/3;color:var(--m-texte);font:700 var(--t-legende)/1.3 var(--body)}
.compo-phrase{grid-column:1/3;color:var(--muted);font-size:var(--t-legende);line-height:1.35}
.compo-cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin:0;padding:0;list-style:none}
.compo-case{min-height:64px;border:1.5px solid var(--champ-bord);border-radius:var(--r-bloc);background:var(--surface);display:grid}
.compo-case.is-vide{border-style:dashed;background:transparent;place-items:center}
.compo-case.is-option{border-color:var(--line)}
.compo-case button{display:grid;align-content:center;justify-items:center;gap:2px;width:100%;min-height:60px;padding:6px 4px;border:0;border-radius:var(--r-bloc);
  background:none;color:inherit;font:inherit;cursor:pointer}
.compo-case .compo-nom{font-size:var(--t-titre-4)}
.compo-case-n{color:var(--muted);font-size:var(--t-legende);font-variant-numeric:tabular-nums}
/* Mesure jouee : l'aplat d'encre s'imprime sur la case (surimpression) */
.compo-case.is-joue{border-color:var(--m-texte);background:var(--m);color:var(--m-sur)}
.compo-case.is-joue .compo-degre,.compo-case.is-joue .compo-case-n{color:var(--m-sur)}
.compo-types{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.compo-type{display:grid;gap:2px;min-height:56px;padding:var(--s2) var(--s3);border:1.5px solid var(--champ-bord);border-radius:var(--r-champ);background:var(--surface);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--d-court) var(--courbe-sortie),transform var(--d-appui) var(--courbe-sortie)}
@media (hover:hover) and (pointer:fine){ .compo-type:hover{border-color:var(--ink)} }
.compo-type:active{transform:scale(.985)}
.compo-type strong{font-size:var(--t-corps)}
.compo-type span{color:var(--muted);font-size:var(--t-legende)}

/* Boite a rythmes : au telephone, les pas descendent (une colonne par son) ; en largeur, une ligne par son */
.compo-pas-cadre{container-type:inline-size}
.compo-pas{--pas:16;display:grid;gap:3px;grid-auto-flow:column;grid-template-rows:auto repeat(var(--pas),44px);
  grid-template-columns:28px repeat(4,minmax(0,1fr))}
.compo-pas-tete{display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px;border:0;border-radius:var(--r-champ);background:none;
  color:var(--ink);font:700 var(--t-legende)/1.15 var(--body);text-align:center;cursor:pointer}
@media (hover:hover) and (pointer:fine){ button.compo-pas-tete:hover{background:var(--m-doux)} }
.compo-pas-num{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--t-legende);border-radius:var(--r-champ)}
.compo-pas-num.is-temps{font-weight:700;color:var(--m-texte)}
.compo-case-pas{min-height:40px;padding:0;border:1.5px solid var(--champ-bord);border-radius:var(--r-petit);background:var(--surface);cursor:pointer;
  transition:transform var(--d-appui) var(--courbe-sortie)}
.compo-case-pas:active{transform:scale(.94)}
.compo-case-pas.is-pair{background:var(--surface-2)}
.compo-case-pas[aria-pressed="true"]{background:var(--m);border-color:var(--m-texte)}
.compo-case-pas.compo-son-cc[aria-pressed="true"]{background:var(--m-guitare);border-color:var(--m-guitare-texte)}
.compo-case-pas.compo-son-ch[aria-pressed="true"]{background:var(--m-saz);border-color:var(--m-saz-texte)}
.compo-case-pas.compo-son-clap[aria-pressed="true"]{background:var(--m-couture);border-color:var(--m-couture-texte)}
.compo-pas .is-joue{box-shadow:inset 0 0 0 3px var(--ink)}
.compo-pas-num.is-joue{background:var(--ink);color:var(--surface);box-shadow:none}
@container (min-width:620px){
  .compo-pas{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:118px repeat(var(--pas),minmax(0,1fr))}
  .compo-pas-tete{justify-content:flex-start;text-align:left}
  .compo-case-pas{min-height:48px}
}