/* Musiclic 1C3 / 1C4 uniquement : alignement vertical des notes et de leurs alterees.
   Les sept noms naturels restent en ligne 1. Chaque note alteree se place
   exactement sous sa note naturelle, en ligne 2. */
#entrainement-parcours-lecture-notes .ml-exercise-answer-zone .ml-note-answer-bank {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  justify-content: start;
  column-gap: 7px;
  row-gap: 7px;
  width: 100%;
  max-width: 450px;
  margin: 0;
}
#entrainement-parcours-lecture-notes .ml-exercise-answer-zone .ml-note-label {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 9px 3px;
  text-align: center;
  white-space: nowrap;
}
/* Les dièses sont alignés sous Do, Re, Fa, Sol, La. */
#entrainement-parcours-lecture-notes .ml-note-label[data-note-label="Do♯"] {grid-column:1;grid-row:2;}
#entrainement-parcours-lecture-notes .ml-note-label[data-note-label="Ré♯"] {grid-column:2;grid-row:2;}
#entrainement-parcours-lecture-notes .ml-note-label[data-note-label="Fa♯"] {grid-column:4;grid-row:2;}
#entrainement-parcours-lecture-notes .ml-note-label[data-note-label="Sol♯"] {grid-column:5;grid-row:2;}
#entrainement-parcours-lecture-notes .ml-note-label[data-note-label="La♯"] {grid-column:6;grid-row:2;}
/* Les bémols sont alignés sous Re, Mi, Sol, La, Si. */
#entrainement-parcours-lecture-notes .ml-note-label[data-note-label="Ré♭"] {grid-column:2;grid-row:2;}
#entrainement-parcours-lecture-notes .ml-note-label[data-note-label="Mi♭"] {grid-column:3;grid-row:2;}
#entrainement-parcours-lecture-notes .ml-note-label[data-note-label="Sol♭"] {grid-column:5;grid-row:2;}
#entrainement-parcours-lecture-notes .ml-note-label[data-note-label="La♭"] {grid-column:6;grid-row:2;}
#entrainement-parcours-lecture-notes .ml-note-label[data-note-label="Si♭"] {grid-column:7;grid-row:2;}
@media(max-width:600px){
  #entrainement-parcours-lecture-notes .ml-exercise-answer-zone .ml-note-answer-bank {column-gap:4px;row-gap:6px;}
  #entrainement-parcours-lecture-notes .ml-exercise-answer-zone .ml-note-label {padding:8px 1px;font-size:0.84rem;}
}
@media(max-width:360px){
  #entrainement-parcours-lecture-notes .ml-exercise-answer-zone .ml-note-answer-bank {column-gap:3px;}
  #entrainement-parcours-lecture-notes .ml-exercise-answer-zone .ml-note-label {font-size:0.76rem;padding:8px 0;}
}
/* Sur petit écran, les sept cases de réponse tiennent sans défilement horizontal.
   Cette règle ne concerne pas les interfaces de 1C1 et 1C2. */
@media(max-width:600px){
  #entrainement-parcours-lecture-notes .ml-exercise-answer-zone .ml-note-answer-slots {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:4px;
    overflow:visible;
  }
  #entrainement-parcours-lecture-notes .ml-exercise-answer-zone .ml-note-answer-slot {
    box-sizing:border-box;
    min-width:0;
    width:100%;
    min-height:43px;
    font-size:0.84rem;
    padding:6px 0;
  }
}