.note-lab,.note-lab *{box-sizing:border-box}
.note-lab{width:100%;max-width:1080px;margin:24px auto;padding:0 16px 40px}
.note-lab .note-lab-title{margin:0 0 5px;color:#244b70;font-size:30px;text-align:center}
.note-lab .intro{margin:0 0 20px;color:#66717d;text-align:center}
.note-tabs{display:flex;border:1px solid #d7e0e8;border-top:0; border-radius:0;overflow:hidden}
.note-tab{
    flex:none;
    min-height:48px;
    border:0;
    border-right:1px solid #d7e0e8;
    background:#f8fafc;
    color:#244b70;
    cursor:pointer;
    font-size:17px;
    font-weight:bold;
}

.note-tab:nth-child(1),.note-tab:nth-child(2),.note-tab:nth-child(3){width:33.333333%;}
.note-tab:last-child{border-right:0}.note-tab.active{background:#336699;color:#fff}
.note-main{display:grid;grid-template-columns:30% 30% 40%;border:1px solid #d7e0e8;border-radius:7px 7px 0 0;background:#fff}
.score-panel,.summary-panel,.about-panel{min-width:0;padding:18px}.score-panel{min-height:270px}
.score-panel,.summary-panel{border-right:1px solid #e2e8ee}
#score{height:235px;display:flex;align-items:center;justify-content:center;position:relative;overflow:visible}
.score-center{min-width:0;position:relative}

#score{cursor:ns-resize;touch-action:pan-x}
#score.dragging{cursor:grabbing}
.anatomy-stage{position:relative;margin-top:15px;border:1px solid #e0e6eb;background:#fff;min-height:190px;overflow:hidden}
#anatomyScore{height:185px;display:flex;align-items:center;justify-content:center}
#anatomyScore svg{max-width:100%;height:auto}

.score-help{text-align:center;margin-top:-10px;color:#333;font-size:14px;line-height:1.45}.about-actions{margin-top:25px;text-align:center}
#score svg{max-width:100%;height:auto}
.music-btn{min-height:42px;padding:9px 15px;border:1px solid #336699;border-radius:5px;background:#fff;color:#336699;font-size:14px;font-weight:bold;cursor:pointer}
.music-btn.primary{background:#336699;color:#fff}
.summary-panel h2,.about-panel h2,.interactive-panel h2,.piano-section h2{margin:0 0 13px;color:#244b70;font-size:17px}
.summary-grid{display:grid;grid-template-columns:90px 1fr;gap:9px 10px;font-size:14px}
.summary-grid .label{color:#687888}.summary-grid .value{font-weight:bold}
.about-panel{background:#fbfcfd}.about-box{padding:13px;border-left:4px solid #336699;background:#f1f6fa;line-height:1.48;font-size:14px}
.interactive-panel{border:1px solid #d7e0e8;border-top:0;padding:20px}
.panel-lead{margin:-4px 0 16px;color:#555;line-height:1.45}


.discover-intro{margin:0;color:#444;line-height:1.6}

.name-compact{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,.8fr);gap:18px;align-items:start}
.name-left{min-width:0}
.name-modes{margin-bottom:10px}
.name-left .demo-box{margin-top:10px;padding:10px 12px}
.name-clefs{border-left:1px solid #e0e6eb;padding-left:18px}
.mini-title{display:block;color:#244b70;font-size:13px;margin-bottom:8px}
.clef-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.clef-grid .control-btn{width:100%;padding:7px 8px;min-height:40px}
.anatomy-compact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:20px;align-items:start}
.anatomy-controls{min-width:0}
.anatomy-title{margin-top:15px}
.anatomy-controls .duration-row{gap:6px}
.anatomy-controls .duration-row .control-btn{padding:7px 10px;min-height:40px}
.anatomy-controls .demo-box{margin-top:12px;padding:10px 12px;min-height:0;height:auto;box-sizing:border-box}
.anatomy-stage{margin-top:0;height:270px;min-height:270px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
#anatomyScore{height:250px;width:100%;display:flex;align-items:center;justify-content:center}

.combined-readout{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin:0 0 14px}
.combined-readout div{padding:11px 13px;border:1px solid #d7e0e8;background:#fafcfd;border-radius:5px}
.combined-readout span{display:block;color:#687888;font-size:12px;margin-bottom:4px}
.combined-readout strong{color:#244b70;font-size:15px}

.controls,.duration-row,.pitch-controls,.anatomy-grid{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.control-btn{min-height:42px;padding:8px 13px;border:1px solid #c8d4df;border-radius:5px;background:#fff;color:#333;cursor:pointer;font-size:14px}
.control-btn.active{border-color:#336699;background:#eef5fa;color:#244b70;font-weight:bold}
.name-mode-note{margin-bottom:12px;color:#5f6d79;font-size:13px}.demo-box{margin-top:15px;padding:13px;border:1px solid #e0e6eb;background:#fafafa;line-height:1.5}
.discover-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:14px}
.discover-card{border:1px solid #e0e6eb;padding:14px;background:#fafcfd}
.discover-card h3{margin:0 0 11px;color:#244b70;font-size:16px}
.small-note{color:#6a7783;font-size:13px;margin-top:12px}
.piano-section{border:1px solid #d7e0e8;border-top:0;border-radius:0 0 7px 7px;padding:20px}
.piano-lead{margin:-5px 0 13px;color:#5f6d79;font-size:14px}
.piano-wrap{width:100%;overflow:visible;padding-bottom:30px}
.piano{position:relative;width:100%;height:145px;min-width:0;border:1px solid #aeb8c1;background:#fff;user-select:none;touch-action:manipulation}
.white-key{position:absolute;top:0;height:143px;border:0;border-right:1px solid #777;background:#fff;cursor:pointer;padding:0}
.white-key.current{background:#e6f2fb}
.white-key.middle-c{box-shadow:inset 0 -5px 0 #9aa7b2}
.black-key{position:absolute;top:0;height:88px;border:1px solid #111;background:#222;z-index:2;cursor:pointer;padding:0}
.black-key.current{background:#336699}
.key-label{position:absolute;top:148px;white-space:nowrap;color:#244b70;font-size:12px;font-weight:bold;text-align:center;transform:none;display:flex;flex-direction:column;align-items:center}
.key-label span{display:block;width:100%;color:#66717d;font-weight:normal;text-align:center}
@media(max-width:780px){
.note-main{grid-template-columns:1fr 1fr}.score-panel{grid-column:1/3;border-right:0;border-bottom:1px solid #e2e8ee}.summary-panel{border-right:1px solid #e2e8ee}
.discover-grid{grid-template-columns:1fr}

.discover-intro{margin:0;color:#444;line-height:1.6}

.name-compact{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,.8fr);gap:18px;align-items:start}
.name-left{min-width:0}
.name-modes{margin-bottom:10px}
.name-left .demo-box{margin-top:10px;padding:10px 12px}
.name-clefs{border-left:1px solid #e0e6eb;padding-left:18px}
.mini-title{display:block;color:#244b70;font-size:13px;margin-bottom:8px}
.clef-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.clef-grid .control-btn{width:100%;padding:7px 8px;min-height:40px}
.anatomy-compact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:20px;align-items:start}
.anatomy-controls{min-width:0}
.anatomy-title{margin-top:15px}
.anatomy-controls .duration-row{gap:6px}
.anatomy-controls .duration-row .control-btn{padding:7px 10px;min-height:40px}
.anatomy-controls .demo-box{margin-top:12px;padding:10px 12px;min-height:0;height:auto;box-sizing:border-box}
.anatomy-stage{margin-top:0;height:270px;min-height:270px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
#anatomyScore{height:250px;width:100%;display:flex;align-items:center;justify-content:center}

.combined-readout{grid-template-columns:1fr}
}
/* Fermeture de la zone supérieure */
.note-main{
    border-bottom:1px solid #c5cdd5;
}

.note-tabs{
    margin-top:16px;
    border-top:1px solid #d7e0e8;
}

.note-tab{
    flex:1 1 0;
}

@media(max-width:560px){

  .note-tabs{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
  }

  .note-tab,
  .note-tab:nth-child(1),
  .note-tab:nth-child(2),
  .note-tab:nth-child(3){
    width:100%;
    min-width:0;
    min-height:52px;
    padding:6px 4px;
    border-right:1px solid #d7e0e8;
    border-bottom:0;
    font-size:14px;
    line-height:1.2;
  }

  .note-tab:last-child{
    border-right:0;
  }

  .note-main{
    display:block;
  }

  .score-panel,
  .summary-panel{
    border-right:0;
    border-bottom:1px solid #e2e8ee;
  }

  .about-panel{
    border-bottom:0;
  }

  #score{
    height:225px;
  }

  .interactive-panel,
  .piano-section{
    padding:15px;
  }
}

/* Responsive final */
@media(max-width:780px){
  .note-lab{padding-left:12px;padding-right:12px}
  .note-main{grid-template-columns:1fr 1fr}
  .score-panel{grid-column:1/3;border-right:0;border-bottom:1px solid #e2e8ee}
  .summary-panel{border-right:1px solid #e2e8ee}
  .name-compact,.anatomy-compact{grid-template-columns:1fr}
  .name-clefs{border-left:0;border-top:1px solid #e0e6eb;padding-left:0;padding-top:14px}
  .combined-readout{grid-template-columns:1fr 1.4fr}
  .anatomy-controls .demo-box{min-height:0}
  .anatomy-stage{height:170px;min-height:170px}
  .piano-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:30px}
  .piano{width:930px;min-width:930px}
}
@media(max-width:560px){
  .about-actions{margin-top:12px;}
  .note-lab{margin-top:12px;padding:0 8px 24px}
  .note-lab .note-lab-title{font-size:23px;line-height:1.15}
  .note-lab .intro{font-size:14px;margin-bottom:14px}
  .note-tabs{display:grid;grid-template-columns:1fr}
  .note-tab{width:100%;min-height:44px;border-right:0;border-bottom:1px solid #d7e0e8}
  .note-tab:last-child{border-bottom:0}
  .note-main{display:block}
  .score-panel,.summary-panel{border-right:0;border-bottom:1px solid #e2e8ee}
  .score-panel,.summary-panel,.about-panel{padding:14px}
  .score-panel{min-height:245px}
  #score{height:215px}
  .summary-grid{grid-template-columns:78px 1fr}
  .interactive-panel,.piano-section{padding:14px}
  .interactive-panel h2,.piano-section h2{font-size:18px}
  .combined-readout{grid-template-columns:1fr}
  .name-modes,.duration-row,.anatomy-grid{display:grid;grid-template-columns:1fr 1fr}
  .name-modes .control-btn,.duration-row .control-btn,.anatomy-grid .control-btn{width:100%}
  .clef-grid{grid-template-columns:1fr 1fr}
  .anatomy-compact{gap:14px}
  .anatomy-stage{height:155px;min-height:155px}
  #anatomyScore{height:140px}
  .music-btn.primary{max-width:100%;white-space:normal}
  .piano-lead{line-height:1.4}
  .piano-wrap{margin-left:0;margin-right:0;overflow-x:auto;overflow-y:hidden}
  .piano{width:930px;min-width:930px}
}

.anatomy-stage svg{display:block;flex:none}
@media (max-width:700px){
  .anatomy-controls .demo-box{min-height:0}
  .anatomy-stage{height:170px;min-height:170px}
}

@media (max-width:780px){
  .anatomy-stage{height:250px;min-height:250px}
  #anatomyScore{height:235px}
}
@media (max-width:560px){
  .anatomy-stage{height:235px;min-height:235px}
  #anatomyScore{height:220px}
}

/* Onglets places sous la note : bordure continue avec le panneau suivant. */
.note-main{border-bottom:1px solid #c5cdd5}
.note-tabs{border-top:1px solid #d7e0e8}
.note-tab{flex:1 1 0}
@media(max-width:560px){
  .note-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .note-tab,.note-tab:nth-child(1),.note-tab:nth-child(2),.note-tab:nth-child(3){width:100%;min-height:52px;padding:6px 4px;border-right:1px solid #d7e0e8;border-bottom:0;font-size:14px;line-height:1.2}
  .note-tab:last-child{border-right:0}
}

/* Indication du déplacement de la note */
.note-lab .score-help{font-weight:600;}
.note-lab .score-help-arrow{display:inline-block;color:#336699;font-size:19px;vertical-align:-1px;margin-right:4px;}
@media (hover:hover) and (pointer:fine){
  .note-lab #score svg .vf-notehead,
  .note-lab #score svg .vf-notehead *{cursor:ns-resize;}
  .note-lab #score svg .vf-notehead:hover,
  .note-lab #score svg .vf-notehead:hover *{filter:drop-shadow(0 0 2px rgba(51,102,153,.55));}
}

/* Anatomie : titre et introduction a gauche, portee alignee en haut a droite. */
.anatomy-compact{grid-template-columns:minmax(0,7fr) minmax(0,3fr);align-items:start}
.anatomy-compact .anatomy-controls .panel-lead{margin-bottom:18px}
.anatomy-compact .anatomy-stage{margin-top:12px}
.anatomy-controls #anatomyText{min-height:62px;height:auto}
@media(max-width:780px){
  .anatomy-compact{grid-template-columns:1fr}
  .anatomy-compact .anatomy-stage{margin-top:0}
}