/* MusicBox (musicbox/musicbox.php, musicbox.js) */

.mb-app {
  --mb-bord: var(--sombre-bord, var(--gris1));
  --mb-fond-outil: var(--sombre-doux, #f3f5f9);
  --mb-actif: var(--bleu4);
  position: relative;
  margin-top: 15px;
}

/* Petits écrans : invitation à revenir depuis un ordinateur (l'application reste utilisable) */
.mb-mobile {
  display: none;
  padding: 10px 14px;
  border: 1px solid var(--sombre-bord-jaune, #f0d98c);
  border-radius: 8px;
  background: var(--sombre-jaune, #fff8e1);
  color: var(--sombre-texte, var(--text-color));
}

@media (max-width: 800px), (hover: none) and (pointer: coarse) {
  .mb-mobile {
    display: block;
  }
}

/* Réglages de l'œuvre (instrument, mesure, tempo) et écoute : à droite de la 1re ligne */
.mb-reglages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-left: auto;
}

.mb-reglages label {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  font-size: 14px;
}

.mb-reglages input,
.mb-reglages select {
  padding: 5px 8px;
  border: 1px solid var(--mb-bord);
  border-radius: 6px;
  background: var(--sombre-carte, #fff);
  color: inherit;
  font: inherit;
  font-weight: normal;
}

.mb-reglages input[type="number"] {
  width: 70px;
}

/* Barre d'outils */
.mb-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 0;
  border-top: 1px solid var(--mb-bord);
  border-bottom: 1px solid var(--mb-bord);
}

.mb-groupe {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Groupe calé à droite de sa ligne (crayon, métronome, piano roll) */
.mb-droite {
  margin-left: auto;
}

/* Annuler / rétablir : bien séparés des fichiers */
.mb-detache {
  margin-left: 14px;
}

/* 1re ligne (fichiers, réglages) : au-dessus de la barre d'outils, sans filet propre */
.mb-barre-haut {
  padding-top: 0;
  border-top: 0;
  border-bottom: 0;
}

.mb-lecture {
  min-width: 120px;
  margin: 0;
}

.mb-outil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid var(--mb-bord);
  border-radius: 7px;
  background: var(--mb-fond-outil);
  color: var(--sombre-texte, var(--primary-color));
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.mb-outil:hover:not(:disabled) {
  border-color: var(--mb-actif);
}

.mb-outil[aria-pressed="true"] {
  border-color: var(--mb-actif);
  background: var(--mb-actif);
  color: #fff;
}

.mb-outil:disabled {
  opacity: 0.4;
  cursor: default;
}

.mb-outil:focus-visible {
  outline: 2px solid var(--bleu2);
  outline-offset: 1px;
}

.mb-texte {
  font-size: 20px;
  line-height: 1;
}

.mb-mot {
  padding: 0 10px;
  font-weight: bold;
}

.mb-mot kbd {
  margin-left: 4px;
  font-family: inherit;
  font-size: 11px;
  opacity: 0.7;
}

.mb-message {
  margin: 8px 0 0;
  font-weight: bold;
  color: var(--sombre-texte-bleu, var(--bleu4));
}

.mb-message.mb-erreur {
  color: var(--sombre-texte-rouge, var(--rouge3));
}

/* Menu des exemples, sous son bouton */
.mb-exemples {
  position: relative;
  display: inline-flex;
}

.mb-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--mb-bord);
  border-radius: 8px;
  background: var(--sombre-carte, #fff);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.mb-menu[hidden] {
  display: none;
}

.mb-menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.mb-menu button:hover,
.mb-menu button:focus-visible {
  background: var(--mb-fond-outil);
}

.mb-menu button span {
  font-size: 12px;
  opacity: 0.7;
}

/* Partition : toujours sur papier blanc, comme une vraie feuille (aussi en thème sombre) */
.mb-papier {
  position: relative;
  /* Hauteur fixe, en lignes de portée entières (--mb-lignes, musicbox.js : ajustePapier ; 270 = HAUTEUR_LIGNE) : une
     longue partition défile dans son cadre et le clavier reste en place */
  height: calc(var(--mb-lignes, 1) * 270px + 42px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Place de la barre de défilement réservée : la largeur de la partition ne change pas quand elle apparaît */
  scrollbar-gutter: stable;
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--mb-bord);
  border-radius: 6px;
  background: #fff;
  color: #000;
  cursor: crosshair;
  user-select: none;
  touch-action: manipulation;
}

.mb-papier svg {
  display: block;
}

.mb-papier .mb-joue path,
.mb-papier .mb-joue rect {
  fill: #d1402e;
  stroke: #d1402e;
}

/* Note fantôme : à l'endroit où le clic la posera (musicbox.js, pointermove) ; repère placé à l'abscisse de la note,
   en haut de la partition */
.mb-fantome {
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  pointer-events: none;
}

.mb-fantome span {
  position: absolute;
}

.mb-f-tete {
  left: 0;
  width: 13px;
  height: 10px;
  border-radius: 50%;
  background: rgba(46, 111, 209, 0.6);
  transform: rotate(-20deg);
}

.mb-f-ligne {
  left: -5px;
  width: 23px;
  height: 0;
  border-top: 1.5px solid rgba(46, 111, 209, 0.6);
}

.mb-f-insertion {
  width: 0;
  height: 64px;
  border-left: 2px dashed rgba(46, 111, 209, 0.55);
}

.mb-f-cadre {
  left: -5px;
  width: 22px;
  height: 88px;
  border: 2px solid rgba(46, 111, 209, 0.55);
  border-radius: 5px;
}

.mb-papier.mb-mode-curseur {
  cursor: text;
}

.mb-f-nom {
  left: -8px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #2e6fd1;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}

/* Piano roll (bouton clavier) : grille qui défile dans les deux sens, clavier vertical collé à gauche. La portée
   au-dessus passe en lecture seule et se fait plus petite */
.mb-app.mb-vue-roll .mb-papier {
  height: 300px;
  cursor: text;
}

.mb-roll {
  --mb-r-fond: var(--sombre-carte, #fff);
  --mb-r-noire: var(--sombre-doux, #f1f3f7);
  --mb-r-ligne: var(--sombre-bord, #e6e9f0);
  --mb-r-temps: var(--gris2);
  --mb-r-mesure: var(--gris4);
  --mb-r-note: var(--bleu3);
  --mb-r-note-bord: var(--bleu5);
  display: grid;
  grid-template-columns: 52px max-content;
  max-height: max(240px, calc(100vh - 480px));
  margin-bottom: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--mb-bord);
  border-radius: 6px;
  user-select: none;
}

.mb-roll[hidden] {
  display: none;
}

.mb-r-touches {
  position: sticky;
  left: 0;
  z-index: 3;
  display: grid;
  grid-auto-rows: 14px;
  background: #fff;
  border-right: 1px solid var(--mb-bord);
}

.mb-r-touche {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  border-bottom: 1px solid #e3e3e3;
  background: #fff;
  color: #555;
  font-size: 9px;
  line-height: 1;
}

.mb-r-touche.mb-r-do {
  color: #000;
  font-weight: bold;
}

.mb-r-touche.mb-r-noire {
  margin-right: 16px;
  border-radius: 0 3px 3px 0;
  background: #2b2b2b;
}

.mb-r-grille {
  position: relative;
  cursor: crosshair;
  touch-action: none;
}

.mb-r-grille.mb-mode-curseur {
  cursor: text;
}

.mb-r-grille.mb-r-bord {
  cursor: ew-resize;
}

.mb-r-grille canvas {
  display: block;
}

.mb-r-note,
.mb-r-fantome {
  position: absolute;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid var(--mb-r-note-bord);
  border-radius: 3px;
  background: var(--mb-r-note);
}

.mb-r-note.mb-r-choisie {
  background: #2e6fd1;
}

.mb-r-note.mb-joue {
  border-color: #d1402e;
  background: #d1402e;
}

.mb-r-fantome {
  z-index: 2;
  opacity: 0.5;
  pointer-events: none;
}

.mb-r-fantome::after {
  content: attr(data-nom);
  position: absolute;
  left: 0;
  bottom: 14px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #2e6fd1;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}

.mb-r-curseur {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #2e6fd1;
  pointer-events: none;
}

/* Clavier : piano et barre d'espace (pédale) en colonne, pavé des octaves à droite */
.mb-jeu[hidden] {
  display: none;
}

.mb-jeu {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  max-width: 100%;
}

.mb-piano {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mb-espace {
  width: 62%;
  height: 34px;
  border: 1px solid var(--mb-bord);
  border-radius: 7px;
  background: var(--mb-fond-outil);
  color: var(--sombre-texte, var(--primary-color));
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 2px 0 var(--mb-bord);
}

.mb-espace kbd {
  margin-left: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: normal;
  opacity: 0.7;
}

.mb-espace.mb-pedale-active {
  border-color: var(--mb-actif);
  background: var(--mb-actif);
  color: #fff;
  box-shadow: none;
  transform: translateY(2px);
}

/* Pavé numérique : 7 (aigu) en haut, puis 4, 1 et 0 (très grave) en bas */
.mb-pave {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mb-pave-touche {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 46px;
  border: 1px solid var(--mb-bord);
  border-radius: 7px;
  background: var(--mb-fond-outil);
  color: var(--sombre-texte, var(--primary-color));
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--mb-bord);
}

.mb-pave-touche kbd {
  font-family: inherit;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.1;
}

.mb-pave-touche span {
  font-size: 10px;
  opacity: 0.8;
}

.mb-pave-touche[aria-pressed="true"] {
  border-color: var(--mb-actif);
  background: var(--mb-actif);
  color: #fff;
}

.mb-clavier {
  --mb-blanche: 30px;
  --mb-noire: 20px;
  position: relative;
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
  user-select: none;
  touch-action: none;
}

.mb-touche {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0 6px;
  border: 1px solid #555;
  font-family: inherit;
  cursor: pointer;
}

.mb-blanche {
  flex: 0 0 var(--mb-blanche);
  height: 150px;
  border-radius: 0 0 6px 6px;
  background: #fff;
  color: #333;
}

.mb-noire {
  position: absolute;
  top: 0;
  z-index: 1;
  width: var(--mb-noire);
  height: 92px;
  border-radius: 0 0 4px 4px;
  background: #222;
  color: #ddd;
}

/* Octave choisie (zone du clavier de l'ordinateur) : filet bleu en haut des touches */
.mb-zone {
  box-shadow: inset 0 4px 0 var(--bleu3);
}

.mb-blanche.mb-enfoncee,
.mb-blanche.mb-allumee {
  background: var(--bleu1);
}

.mb-noire.mb-enfoncee,
.mb-noire.mb-allumee {
  background: var(--bleu4);
}

.mb-lettre {
  font-size: 13px;
  font-weight: bold;
}

.mb-nom {
  font-size: 10px;
  opacity: 0.7;
}

/* Impression (bouton PDF) : seulement la partition, avec titre et compositeur */
.mb-impression {
  display: none;
}

@media print {
  /* Rien d'autre que la partition : le reste de la page est retiré (pas seulement caché, il ajoutait des pages) */
  html,
  body {
    background: #fff !important;
  }

  body > *:not(main),
  main > *:not(.mb-impression) {
    display: none !important;
  }

  main {
    margin: 0 !important;
    padding: 0 !important;
  }

  .mb-impression {
    display: block;
    color: #000;
    background: #fff;
  }

  .mb-imp-titre {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  }

  .mb-imp-compositeur {
    margin: 0 0 16px;
    font-style: italic;
    text-align: right;
  }

  /* Une ligne de portée par bloc : jamais coupée entre deux pages */
  .mb-imp-ligne {
    margin-bottom: 14px;
    break-inside: avoid;
  }

  .mb-imp-ligne svg {
    display: block;
  }

  .mb-imp-titre:empty,
  .mb-imp-compositeur:empty {
    display: none;
  }

  @page {
    margin: 15mm;
  }
}

/* Import (admin) : fenêtre plus large que les autres, texte en police fixe */
.mb-import {
  width: min(640px, 92vw);
}

.mb-import textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--sombre-bord, #d5dee8);
  border-radius: 8px;
  background: var(--sombre-doux, #fafcfe);
  color: inherit;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.85rem;
  resize: vertical;
}

.mb-import .mb-message {
  margin: 0;
}

/* Titre et compositeur (avant d'enregistrer ou de faire le PDF) */
.mb-fenetre-infos label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: bold;
  font-size: 14px;
}