/* Pianovera · panneau piano (notes qui tombent + clavier) — voir LISEZ-MOI.md.
   Le panneau remplit son conteneur [data-panneau-piano] (hauteur donnée par la page) ; en mode compact (téléphone) il prend sa hauteur lui-même. */
[data-panneau-piano]{display:block;min-width:0;min-height:0;box-sizing:border-box}
.pp{--pp-fond:#0b1226;--pp-bord:#1e2a4a;--pp-barre:#0f1a36;--pp-txt:#e8efff;--pp-mut:#aebcdf;--pp-bleu:#2563eb;--pp-ligne:#3a4f86;
  display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;background:var(--pp-fond);border:1.5px solid var(--pp-bord);border-radius:16px;overflow:hidden;
  font:700 14px/1.2 var(--font,"Nunito","Segoe UI",system-ui,-apple-system,sans-serif);color:var(--pp-txt);-webkit-tap-highlight-color:transparent}
.pp *{box-sizing:border-box}
.pp-corps{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.pp-scene{position:relative;flex:1 1 auto;min-height:110px;background:#02050b;overflow:hidden}
.pp-scene:focus{outline:none}
.pp-scene:focus-visible{outline:3px solid #38bdf8;outline-offset:-3px}
.pp-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.pp-hit{position:absolute;left:0;right:0;bottom:0;touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}

/* tête (téléphone seulement) : bouton « Notes qui tombent » qui replie le panneau */
.pp-tete{display:none;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 4px;background:var(--pp-barre);border-bottom:1px solid var(--pp-bord)}
.pp-plie{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--pp-txt);font:800 16px/1 var(--font,"Nunito","Segoe UI",system-ui,sans-serif);cursor:pointer;border-radius:10px;flex:1 1 auto;text-align:left}
.pp-plie svg{flex:none;transition:transform .15s}
.pp-plie[aria-expanded="false"] svg{transform:rotate(-90deg)}
.pp-plie:focus-visible{outline:3px solid #38bdf8;outline-offset:-3px}

/* boutons de commande */
.pp-seg{display:inline-flex;align-items:center;border:1.5px solid var(--pp-ligne);border-radius:10px;overflow:hidden;background:#14244a;flex:none}
.pp-seg button{border:0;background:transparent;color:#dbe6ff;font:800 13px/1 var(--font,"Nunito","Segoe UI",system-ui,sans-serif);padding:0 10px;min-height:36px;cursor:pointer}
.pp-seg button+button{border-left:1.5px solid var(--pp-ligne)}
.pp-seg button[aria-pressed="true"]{background:var(--pp-bleu);color:#fff}
.pp-seg button:hover:not([aria-pressed="true"]){background:#1c3166;color:#fff}
.pp-seg button:focus-visible,.pp-b:focus-visible{outline:3px solid #38bdf8;outline-offset:-2px}
.pp-lbl{font:800 12px/1 var(--font,"Nunito","Segoe UI",system-ui,sans-serif);color:var(--pp-mut);padding:0 8px 0 10px;letter-spacing:.03em}
.pp-b{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--pp-ligne);border-radius:10px;background:#14244a;color:#dbe6ff;font:800 13px/1 var(--font,"Nunito","Segoe UI",system-ui,sans-serif);padding:0 10px;min-height:36px;cursor:pointer;flex:none}
.pp-b svg{fill:currentColor;flex:none}
.pp-b:hover{background:#1c3166;color:#fff}
.pp-b[aria-pressed="true"]{background:var(--pp-bleu);border-color:var(--pp-bleu);color:#fff}
.pp-b-absent{display:none}
.pp-outils{display:flex;flex-wrap:wrap;align-items:center;gap:6px 6px;padding:8px 10px;background:var(--pp-barre);border-top:1px solid var(--pp-bord);flex:none}
.pp-outils .pp-seg:first-child{margin-right:auto}
.pp-reg[aria-expanded="true"] svg{transform:rotate(180deg)}
.pp-plus{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 100%}
.pp-plus[hidden]{display:none}
.pp-etat{margin:0;padding:0 12px 9px;background:var(--pp-barre);font:700 12.5px/1.35 var(--font,"Nunito","Segoe UI",system-ui,sans-serif);color:var(--pp-mut);flex:none}
.pp-etat:empty{display:none}
.pp-etat[data-kind="error"]{color:#ffb4b4}
.pp-etat[data-kind="ok"]{color:#9ff0c8}

/* mode compact (téléphone en portrait) : tête visible, commandes de jeu masquées, hauteur propre */
[data-panneau-piano][data-compact="1"]{height:auto!important;flex:none!important;max-height:none!important;min-height:0!important}
[data-compact="1"] .pp{height:auto}
[data-compact="1"] .pp-tete{display:flex}
[data-compact="1"] .pp-outils,[data-compact="1"] .pp-etat{display:none}
[data-compact="1"] .pp-corps{flex:none}
[data-compact="1"] .pp-scene{flex:none;height:var(--pp-hauteur,124px);min-height:0}
.pp-replie .pp-corps{display:none}
.pp-replie .pp-tete{border-bottom:0}
.pp-replie .pp-tete .pp-seg{display:none}
@media (max-width:620px){.pp-hote{--pp-hauteur:124px}}
@media (max-height:520px) and (orientation:landscape){
  .pp-hote{--pp-hauteur:92px}
  .pp-tete{padding-top:2px;padding-bottom:2px}.pp-plie{min-height:40px}.pp-seg button{min-height:32px}
}
@media (prefers-reduced-motion:reduce){.pp-plie svg{transition:none}}
.pp-c{display:none}
.pp-etroit .pp-l{display:none}
.pp-etroit .pp-c{display:inline}