/* =========================================================
   Portée virtuelle Musiclic - V0.16
   ========================================================= */

.pv{
  --pv-blue:#2f6fb5;
  --pv-blue-dark:#255d98;
  --pv-border:#d9dde2;
  --pv-soft:#f6f7f8;
  --pv-text:#202428;
  --pv-muted:#686f77;
  margin:18px 0 28px;
  color:var(--pv-text);
  font-family:Arial, Helvetica, sans-serif;
}

.pv *{box-sizing:border-box;}

.pv-intro{
  margin:0 0 16px;
  padding:13px 15px;
  background:#f6f6f6;
  border:1px solid #e2e2e2;
}
.pv-intro p{margin:0;line-height:1.55;}

.pv-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:12px 16px;
  margin-bottom:16px;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--pv-border);
}

.pv-field,
.pv-volume{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.pv-field label,
.pv-volume label,
.pv-fieldset legend{
  font-size:13px;
  font-weight:bold;
  color:#333;
}

.pv-field select{
  min-width:145px;
  height:36px;
  padding:0 30px 0 9px;
  border:1px solid #cfd4da;
  background:#fff;
  color:#222;
  font-size:14px;
}

.pv-fieldset{
  margin:0;
  padding:0;
  border:0;
}
.pv-fieldset legend{margin-bottom:5px;}

.pv-segment{display:flex;}
.pv-segment-btn{
  min-width:46px;
  height:36px;
  padding:0 10px;
  border:1px solid #cfd4da;
  border-right:0;
  background:#fff;
  color:#222;
  cursor:pointer;
  font-size:14px;
}
.pv-segment-btn:last-child{border-right:1px solid #cfd4da;}
.pv-segment-btn:hover,
.pv-segment-btn:focus{background:#f4f6f8;}
.pv-segment-btn.is-active{
  background:#edf3f9;
  border-color:#88a8c8;
  color:#173f68;
  font-weight:bold;
}

.pv-check{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  font-size:14px;
  cursor:pointer;
}
.pv-check input{width:17px;height:17px;margin:0;}

.pv-volume{min-width:170px;}
.pv-volume input{width:170px;}

.pv-workspace{display:block;}

.pv-staff-card,
.pv-keyboard-card{
  margin:0 0 12px;
  padding:13px 14px;
  border:1px solid var(--pv-border);
  background:#fff;
}

.pv-card-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:10px;
}
.pv-card-heading h2{
  margin:0 0 4px;
  padding:0;
  font-size:19px;
  color:#111;
}
.pv-card-heading p{
  margin:0;
  color:var(--pv-muted);
  font-size:13px;
  line-height:1.45;
}

.pv-reset,
.pv-secondary{
  padding:7px 11px;
  border:1px solid #cfd4da;
  background:#fff;
  color:#333;
  cursor:pointer;
  font:inherit;
  font-size:13px;
}
.pv-reset:hover,
.pv-reset:focus,
.pv-secondary:hover,
.pv-secondary:focus{background:#f5f5f5;}
.pv-secondary:disabled{
  color:#9ba0a5;
  background:#fafafa;
  cursor:default;
}

/* V0.6 : portée courte, sélection visible, manipulation directe et système piano rapproché. */
.pv-staff-wrap{
  width:100%;
  max-width:360px;
  margin:0 auto;
}

.pv-staff-shell{
  position:relative;
  min-height:132px;
  overflow:hidden;
  border:1px solid #e0e3e6;
  background:#fff;
}
.pv-staff-shell.is-grand{min-height:188px;}

.pv-staff{
  width:100%;
  min-height:132px;
}
.pv-staff-shell.is-grand .pv-staff{min-height:188px;}
.pv-staff svg{display:block;width:100%;height:132px;}
.pv-staff-shell.is-grand .pv-staff svg{height:188px;}

.pv-pointer-layer{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  top:0;
  bottom:0;
  cursor:crosshair;
  touch-action:none;
  outline:none;
}
.pv-pointer-layer:focus-visible{box-shadow:inset 0 0 0 2px var(--pv-blue);}
.pv-pointer-layer.is-note-hover{cursor:grab;}
.pv-pointer-layer.is-dragging{cursor:grabbing;}

/* La note active est matérialisée par un repère discret.
   Le repère n'intercepte jamais les clics : toute la manipulation reste
   gérée par la couche interactive située au-dessus de la portée. */
.pv-active-marker{
  position:absolute;
  z-index:6;
  width:30px;
  height:22px;
  margin-left:-15px;
  margin-top:-11px;
  border:1px solid #7da1c4;
  border-radius:50%;
  background:rgba(237,243,249,.42);
  pointer-events:none;
}

.pv-note-panel{
  display:grid;
  grid-template-columns:minmax(130px,.65fr) minmax(230px,1.4fr) auto;
  gap:8px 18px;
  align-items:center;
  margin-top:12px;
  padding:11px 13px;
  background:var(--pv-soft);
  border:1px solid #e1e4e7;
}
.pv-note-main{display:flex;flex-direction:column;gap:2px;}
.pv-note-label{font-size:12px;color:var(--pv-muted);}
.pv-note-main strong{font-size:20px;color:#111;}
.pv-note-detail{font-size:13px;line-height:1.45;color:#444;}
.pv-note-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;}

.pv-selected-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:9px;
  padding:9px 11px;
  border:1px solid #e1e4e7;
  background:#fff;
}
.pv-selected-row[hidden]{display:none;}
.pv-selected-title{
  flex:0 0 auto;
  padding-top:5px;
  font-size:12px;
  font-weight:bold;
  color:#555;
}
.pv-note-chips{display:flex;flex-wrap:wrap;gap:6px;}
.pv-note-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:3px 7px 3px 9px;
  border:1px solid #ccd3da;
  background:#fff;
  color:#333;
  font-size:13px;
  cursor:pointer;
}
.pv-note-chip.is-active{
  border-color:#7da1c4;
  background:#edf3f9;
  color:#173f68;
  font-weight:bold;
}
.pv-note-chip-remove{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  color:#777;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}

.pv-analysis{
  margin-top:9px;
  padding:11px 13px;
  border-left:3px solid #aab9c7;
  background:#f8f9fa;
  font-size:13px;
  line-height:1.5;
  color:#3e4348;
}
.pv-analysis-label{
  display:block;
  margin-bottom:2px;
  color:#222;
  font-size:12px;
  font-weight:bold;
}
.pv-analysis strong{color:#111;}

.pv-audio-status{
  min-height:18px;
  margin-top:7px;
  color:#6d747b;
  font-size:12px;
}

.pv-card-heading-keyboard{margin-bottom:12px;}
.pv-keyboard-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
}

.pv-keyboard{
  position:relative;
  width:100%;
  min-width:820px;
  height:188px;
  user-select:none;
  -webkit-user-select:none;
}
.pv-white-keys{
  position:absolute;
  inset:0;
  display:flex;
  height:188px;
}
.pv-key{
  position:relative;
  border:1px solid #bfc3c7;
  cursor:pointer;
  transition:background .08s ease, box-shadow .08s ease;
}
.pv-key-white{
  flex:1 1 0;
  height:188px;
  margin-left:-1px;
  background:#fff;
  z-index:1;
}
.pv-key-white:first-child{margin-left:0;}
.pv-key-white:hover{background:#f7f7f7;}

.pv-black-keys{
  position:absolute;
  inset:0;
  height:122px;
  pointer-events:none;
  z-index:3;
}
.pv-key-black{
  position:absolute;
  top:0;
  width:2.05%;
  min-width:15px;
  max-width:24px;
  height:118px;
  transform:translateX(-50%);
  background:#202124;
  border:1px solid #0e0e0f;
  border-radius:0 0 3px 3px;
  pointer-events:auto;
  z-index:4;
}
.pv-key-black:hover{background:#2b2d30;}

.pv-key.is-selected{
  background:#dceaf8;
  box-shadow:inset 0 0 0 1px var(--pv-blue);
}
.pv-key-black.is-selected{
  background:#456f9a;
  box-shadow:inset 0 0 0 1px #8eb3d8;
}
.pv-key.is-current{
  box-shadow:inset 0 0 0 2px #255d98;
}
.pv-key-black.is-current{
  background:#365f88;
  box-shadow:inset 0 0 0 2px #a8c6e3;
}
.pv-key.is-playing{background:#e7eef5;}
.pv-key-black.is-playing{background:#4d5965;}

.pv-key-label{
  position:absolute;
  left:2px;
  right:2px;
  bottom:8px;
  text-align:center;
  font-size:11px;
  line-height:1.15;
  color:#555;
  pointer-events:none;
}
.pv-key-black .pv-key-label{
  bottom:7px;
  color:#fff;
  font-size:9px;
}
.pv-key-label.is-hidden{display:none;}

.pv-help-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:4px;
}
.pv-help-item{
  padding:12px 14px;
  border:1px solid #e2e3e5;
  background:#fafafa;
}
.pv-help-item h3{margin:0 0 6px;font-size:15px;color:#222;}
.pv-help-item p{margin:0;font-size:13px;line-height:1.5;color:#555;}

.pv-credit{
  margin:10px 0 0;
  font-size:11px;
  color:#777;
  text-align:right;
}

/* =========================================================
   V0.9 - Poste de travail horizontal
   Portée à gauche, informations à droite, piano juste dessous.
   ========================================================= */
.pv-card-heading-compact{
  align-items:center;
  margin-bottom:8px;
}
.pv-staff-heading-line{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.pv-staff-heading-line h2{margin:0;}
.pv-staff-heading-line p{margin:0;}

.pv-main-row{
  display:grid;
  grid-template-columns:minmax(300px,360px) minmax(0,1fr);
  gap:16px;
  align-items:stretch;
}

.pv-staff-column{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.pv-main-row .pv-staff-wrap{
  width:100%;
  max-width:360px;
  margin:0;
}

.pv-info-panel{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid #dfe3e7;
  background:#f7f8f9;
}

.pv-info-top{
  display:grid;
  grid-template-columns:minmax(210px,.8fr) minmax(300px,1.2fr);
  min-width:0;
  border-bottom:1px solid #dfe3e7;
}

.pv-info-panel .pv-dashboard-block{
  min-width:0;
  margin:0;
  padding:10px 13px;
  background:transparent;
  border:0;
}

.pv-info-panel .pv-dashboard-active{
  border-right:1px solid #dfe3e7;
}

.pv-dashboard-label{
  display:block;
  margin-bottom:5px;
  color:#6b7279;
  font-size:11px;
  font-weight:bold;
}

.pv-active-name{
  display:block;
  color:#111;
  font-size:20px;
  line-height:1.1;
}

/* Information pédagogique : ne jamais tronquer la position de la note. */
.pv-active-position{
  display:block;
  margin-top:5px;
  overflow:visible;
  color:#4d5359;
  font-size:12px;
  line-height:1.35;
  text-overflow:clip;
  white-space:normal;
  word-break:normal;
}

.pv-info-panel .pv-selected-row{
  display:block;
  margin:0;
  padding:10px 13px;
  background:transparent;
  border:0;
}
.pv-info-panel .pv-selected-row[hidden]{display:none;}

.pv-info-panel .pv-note-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  overflow:visible;
  padding:0;
}

.pv-info-panel .pv-note-chip{
  flex:0 0 auto;
  min-width:66px;
  min-height:30px;
  padding:4px 8px 4px 10px;
  justify-content:space-between;
  font-size:13px;
  white-space:nowrap;
}

.pv-info-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  min-width:0;
  flex:1 1 auto;
}

.pv-info-panel .pv-analysis{
  margin:0;
  padding:10px 13px;
  border:0;
  border-left:0;
  background:transparent;
  color:#353a3f;
  font-size:12px;
  line-height:1.4;
}
.pv-info-panel .pv-analysis strong{font-size:13px;}

.pv-dashboard-actions{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  min-width:112px;
  padding:9px;
  border-left:1px solid #dfe3e7;
}

.pv-dashboard-actions .pv-secondary{
  width:100%;
  padding:7px 9px;
  white-space:nowrap;
  font-size:12px;
}

.pv-info-panel .pv-audio-status{
  min-height:0;
  margin:0;
  padding:6px 13px 7px;
  border-top:1px solid #e4e7ea;
  color:#6d747b;
  font-size:11px;
  line-height:1.3;
}

.pv-card-heading-keyboard{margin-bottom:8px;}

@media screen and (max-width:980px){
  .pv-main-row{
    grid-template-columns:minmax(285px,330px) minmax(0,1fr);
    gap:12px;
  }
  .pv-main-row .pv-staff-wrap{max-width:330px;}
  .pv-info-top{
    grid-template-columns:minmax(185px,.8fr) minmax(235px,1.2fr);
  }
  .pv-info-panel .pv-note-chip{min-width:62px;}
}

@media screen and (max-width:760px){
  .pv-staff-shell,.pv-staff{min-height:132px;}
  .pv-staff svg{height:132px;}
  .pv-staff-shell.is-grand,.pv-staff-shell.is-grand .pv-staff{min-height:188px;}
  .pv-staff-shell.is-grand .pv-staff svg{height:188px;}
  .pv-main-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  .pv-main-row .pv-staff-wrap{
    max-width:360px;
    margin:0 auto;
  }
  .pv-info-top{
    grid-template-columns:minmax(175px,.8fr) minmax(0,1.2fr);
  }
  .pv-info-panel .pv-note-chips{flex-wrap:wrap;}
}

@media screen and (max-width:520px){
  .pv-staff-shell,.pv-staff{min-height:128px;}
  .pv-staff svg{height:128px;}
  .pv-staff-shell.is-grand,.pv-staff-shell.is-grand .pv-staff{min-height:184px;}
  .pv-staff-shell.is-grand .pv-staff svg{height:184px;}
  .pv-card-heading-compact{display:flex;}
  .pv-card-heading-compact .pv-reset{margin-top:0;}
  .pv-staff-heading-line p{display:none;}
  .pv-main-row .pv-staff-wrap{max-width:330px;}
  .pv-info-top{grid-template-columns:1fr;}
  .pv-info-panel .pv-dashboard-active{
    border-right:0;
    border-bottom:1px solid #dfe3e7;
  }
  .pv-info-bottom{grid-template-columns:1fr;}
  .pv-dashboard-actions{
    flex-direction:row;
    justify-content:flex-start;
    min-width:0;
    border-left:0;
    border-top:1px solid #dfe3e7;
  }
  .pv-dashboard-actions .pv-secondary{width:auto;}
  .pv-active-position{font-size:12px;}
}


/* =========================================================
   V0.11 - Panneau d'informations rééquilibré
   - le statut audio quitte le tableau de bord et passe sous le piano ;
   - la zone "Note active" gagne de la hauteur pour afficher entièrement
     la position de la note ;
   - la colonne d'actions conserve assez de place pour les deux boutons ;
   - le statut audio est placé juste à gauche de "Noms des notes".
   ========================================================= */

/* V0.17 - bandeau visiteur corrigé et compact sur une seule ligne.
   Le cadenas est émis en entité numérique ASCII pour éviter tout mojibake
   dans Classic ASP / IIS. La liste Portée gagne encore un peu de largeur.

   V0.16 - bandeau compact et stable sur une seule ligne.
   La portée gagne assez de largeur pour afficher "Système piano" en entier.
   Le volume est volontairement réduit pour libérer l'espace nécessaire. */
.pv-toolbar{
  flex-wrap:nowrap;
  align-items:flex-end;
  gap:10px;
  padding:10px 14px;
}
.pv-toolbar .pv-field{min-width:0;}
.pv-toolbar .pv-field select{min-width:0;width:100%;}
.pv-toolbar .pv-field-clef{flex:0 0 190px;}
.pv-toolbar .pv-field-notation{flex:0 0 150px;}
.pv-toolbar .pv-field-mode{flex:0 0 170px;}
.pv-toolbar .pv-fieldset{flex:0 0 auto;}
.pv-toolbar .pv-volume{
  flex:0 0 88px;
  min-width:88px;
  max-width:88px;
}
.pv-toolbar .pv-volume input{width:88px;}

/* Le poste de travail garde une hauteur fixe sur ordinateur.
   Le statut audio ayant été déplacé sous le piano, l'espace libéré est
   redistribué à la zone supérieure afin que des libellés comme
   "Clef de sol - 2e interligne de la portée" restent entièrement lisibles. */
.pv-main-row{min-height:188px;}
.pv-info-panel{
  height:188px;
  min-height:188px;
  overflow:hidden;
}
.pv-info-top{
  flex:0 0 102px;
  min-height:102px;
  max-height:102px;
  overflow:hidden;
}
.pv-info-bottom{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.pv-info-panel .pv-analysis{
  min-height:0;
  overflow:hidden;
}

/* Les deux actions doivent toujours rester entièrement visibles. */
.pv-dashboard-actions{
  gap:5px;
  padding:8px;
}
.pv-dashboard-actions .pv-secondary{
  padding:6px 9px;
}

/* Ligne directement liée au clavier : statut audio puis noms des notes.
   Le groupe est aligné à droite sous le piano ; le statut reste donc
   immédiatement à gauche de la case à cocher. */
.pv-keyboard-options{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:18px;
  min-height:30px;
  margin-top:7px;
}
.pv-keyboard-options .pv-check{
  flex:0 0 auto;
  min-height:28px;
  margin:0;
}
.pv-audio-status-keyboard{
  min-height:0;
  margin:0;
  padding:0;
  color:#6d747b;
  font-size:11px;
  line-height:1.3;
  text-align:right;
  white-space:normal;
}

/* À largeur intermédiaire, on autorise la barre de réglages à se répartir
   sur deux lignes plutôt que de comprimer les champs. */
@media screen and (max-width:860px){
  .pv-toolbar{flex-wrap:wrap;}
  .pv-toolbar .pv-field,
  .pv-toolbar .pv-field-clef,
  .pv-toolbar .pv-field-notation,
  .pv-toolbar .pv-field-mode{flex:1 1 145px;}
  .pv-toolbar .pv-volume{flex:1 1 110px;min-width:110px;max-width:none;}
  .pv-toolbar .pv-volume input{width:100%;}
}

/* Sur mobile, la priorité est la lisibilité : les blocs reprennent leur
   hauteur naturelle et la ligne sous le clavier peut se replier. */
@media screen and (max-width:520px){
  .pv-main-row{min-height:0;}
  .pv-info-panel{
    height:auto;
    min-height:0;
    overflow:visible;
  }
  .pv-info-top{
    flex:0 0 auto;
    min-height:0;
    max-height:none;
    overflow:visible;
  }
  .pv-info-bottom{overflow:visible;}
  .pv-info-panel .pv-analysis{overflow:visible;}
  .pv-keyboard-options{
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    flex-wrap:wrap;
  }
  .pv-audio-status-keyboard{
    flex:1 1 180px;
    text-align:left;
  }
}

/* =========================================================
   V0.14 - Ajustements de lisibilité
   - panneau d'informations légèrement plus haut pour laisser respirer
     les boutons "Enharmonie" et "Écouter" ;
   - statut audio en bas à gauche du clavier ;
   - "Noms des notes" en bas à droite, avec la même taille de police ;
   - libellés des touches noires recentrés d'1 px vers la gauche.
   ========================================================= */

@media screen and (min-width:521px){
  .pv-main-row{min-height:202px;}
  .pv-info-panel{
    height:202px;
    min-height:202px;
  }
}

.pv-keyboard-options{
  justify-content:space-between;
}

.pv-audio-status-keyboard{
  font-size:14px;
  text-align:left;
}

.pv-keyboard-options .pv-check{
  font-size:14px;
}

.pv-key-black .pv-key-label{
  transform:translateX(-1px);
}

@media screen and (max-width:520px){
  .pv-keyboard-options{
    justify-content:space-between;
  }
  .pv-audio-status-keyboard{
    font-size:14px;
    text-align:left;
  }
}


/* =========================================================
   V0.14 - Doubles altérations
   ========================================================= */
.pv-segment-btn.pv-accidental-double{
  min-width:40px;
  padding-left:8px;
  padding-right:8px;
  font-weight:bold;
}