/* Pianovera · pages MIDI : aperçu en lecture seule (viewer.js), encadré des boutons de l'application et fenêtre « Windows sur téléphone ».
   Les variables (--line, --blue, --grad…) viennent de site-2.css. */

/* ---------- aperçu : une image fixe, puis la scène au premier clic ---------- */
.pvv{position:relative;border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:#02050b;box-shadow:var(--shadow2);margin:0 0 10px}
.pvv-stage{position:relative;aspect-ratio:1.9;background:#02050b;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pvv-stage:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
@media (max-width:640px){ .pvv-stage{aspect-ratio:1.28} }
.pvv-posterbox{position:absolute;inset:0;display:block;transition:opacity .35s ease}
.pvv-posterbox.gone{opacity:0;visibility:hidden;pointer-events:none}
.pvv-poster{display:block;width:100%;height:100%;object-fit:cover}
.pvv-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.pvv-canvas[hidden]{display:none}
.pvv-big{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;font-size:30px;line-height:1;color:#fff;background:var(--grad);box-shadow:0 14px 44px rgba(37,99,235,.55),0 0 0 8px rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;padding:0 0 0 5px;transition:transform .15s ease,box-shadow .15s ease}
.pvv-big:hover{transform:translate(-50%,-50%) scale(1.06)}
.pvv-big:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pvv-big[hidden]{display:none}
@media (max-width:640px){ .pvv-big{width:68px;height:68px;font-size:24px;top:36%} }
.pvv-load{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;background:rgba(5,10,22,.82);color:#eaf2ff;font:800 14px var(--font);border:1.5px solid rgba(90,140,240,.45);border-radius:999px;padding:10px 18px;white-space:nowrap}
.pvv-load[hidden]{display:none}
.pvv-load::before{content:"";width:14px;height:14px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;animation:pvvspin .8s linear infinite}
@keyframes pvvspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .pvv-load::before{animation:none} .pvv-posterbox{transition:none} }

/* fin du morceau */
.pvv-end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,5,11,.72);padding:16px;cursor:default}
.pvv-end[hidden]{display:none}
.pvv-end-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;max-width:560px}
.pvv-end-t{margin:0;color:#fff;font-weight:900;font-size:clamp(17px,2.6vw,24px);line-height:1.25;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.pvv-end-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pvv-end-actions .btn{white-space:normal;text-align:center;justify-content:center}
.pvv-again{border:1.5px solid rgba(255,255,255,.45);background:transparent;color:#fff;border-radius:10px;cursor:pointer;font:800 14px var(--font);padding:8px 16px}
.pvv-again:hover{background:rgba(255,255,255,.12)}
@media (max-width:640px){ .pvv-end-actions{flex-direction:column;align-items:stretch;width:100%} .pvv-end{padding:10px} .pvv-end-card{gap:10px} }

/* barre de commandes */
.pvv-ui{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);background:#fff}
.pvv-play,.pvv-speed,.pvv-mute{border:1.5px solid var(--line2);background:#fff;color:var(--txt);border-radius:10px;cursor:pointer;font:800 14px var(--font);padding:7px 12px;line-height:1;transition:.14s}
.pvv-play:hover,.pvv-speed:hover,.pvv-mute:hover{border-color:var(--blue);color:var(--blue);background:#eef4ff}
.pvv-bar{flex:1;height:8px;border-radius:99px;background:#e2e8f0;cursor:pointer;touch-action:none;position:relative}
.pvv-bar:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.pvv-fill{height:100%;width:0;border-radius:99px;background:var(--grad);pointer-events:none}
.pvv-time{color:var(--mut);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pvv-note{color:var(--mut2);font-size:13.5px;margin:0 0 20px;font-weight:600}
.pvv-note a{color:var(--blue);font-weight:800}
@media (max-width:560px){ .pvv-time{display:none} .pvv-ui{gap:8px;padding:9px 10px} }

/* ---------- boutons sous l'aperçu : MIDI, PDF, application ---------- */
.dl-row .btn-app{border-color:var(--blue);color:var(--blue);background:#eef4ff}
.dl-row .btn-app:hover{background:#dfeaff}

/* ---------- encadré « Ouvrez ce morceau dans Pianovera » ---------- */
.pv-app{background:#fff;border:1.5px solid var(--line2);border-radius:var(--r);padding:20px 22px;margin:22px 0 4px;box-shadow:var(--shadow);scroll-margin-top:90px}
.pv-app p{margin:0 0 14px;color:var(--txt);font-size:15.5px;font-weight:600}
.pv-app .dl-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 12px}
.pv-app .dl-fine{margin:0;color:var(--mut2);font-size:13.5px;line-height:1.5}
@media (max-width:640px){ .pv-app{padding:16px} .pv-app .dl-actions{flex-direction:column;align-items:stretch} .pv-app .dl-actions .btn,.pv-app .dl-actions .play-badge{width:100%;justify-content:center} .pv-app .dl-actions .play-badge{order:-1} }

/* ---------- partition : aperçu de la gravure ---------- */
.pv-score{margin:0 0 26px}
.pv-score a.pv-score-img{display:block;position:relative;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.pv-score img{display:block;width:100%;height:auto}
.pv-score-cap{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between;color:var(--mut2);font-size:13.5px;font-weight:600;margin:8px 2px 0}
.pv-score-cap a{color:var(--blue);font-weight:800}
.pv-score-hint{display:none}
@media (max-width:640px){   /* téléphone : la gravure garde une taille lisible, on la fait glisser au doigt */
  .pv-score a.pv-score-img{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .pv-score img{width:900px;max-width:none}
  .pv-score-hint{display:block;flex-basis:100%;color:var(--mut2);font-weight:700}
}

/* ---------- partition qui suit la lecture (morceaux qui ont leurs données de suivi) ---------- */
.pv-follow{margin:0 0 26px;background:#fff;border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.pvf-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 16px 2px}
.pvf-head b{font-size:15px;font-weight:800;color:var(--txt)}
.pvf-mes{font-size:13.5px;font-weight:700;color:var(--mut2);font-variant-numeric:tabular-nums}
.pvf-x{overflow:hidden;padding:0 8px}
.pvf-win{position:relative;overflow:hidden;transition:height .55s cubic-bezier(.22,.7,.2,1)}
.pvf-rail{will-change:transform;transition:transform .55s cubic-bezier(.22,.7,.2,1)}
.pvf-win.no-anim,.pvf-win.no-anim .pvf-rail{transition:none}
.pvf-row{position:relative;margin:0 0 4px;cursor:pointer;opacity:.5;transition:opacity .45s}
.pvf-row.is-cur{opacity:1}
.pvf-row img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}
.pvf-hl{position:absolute;pointer-events:none;border-radius:6px;background:rgba(37,99,235,.12);box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.38);transition:left .1s linear,width .1s linear}
.pvf-line{position:absolute;left:0;width:3px;margin-left:-1.5px;border-radius:3px;background:#2563eb;box-shadow:0 0 9px 2px rgba(37,99,235,.5);pointer-events:none;will-change:transform}
.pvf-cap{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between;padding:6px 16px 12px;color:var(--mut2);font-size:13.5px;font-weight:600}
.pvf-cap a{color:var(--blue);font-weight:800}
@media (max-width:640px){
  .pvf-x{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
  .pvf-win{width:900px}
}
@media (prefers-reduced-motion:reduce){ .pvf-win,.pvf-rail,.pvf-row,.pvf-hl{transition:none} }

/* ---------- fenêtre « Windows sur téléphone » (reprise de l'accueil, 23/09/2026) ---------- */
.zipm{position:fixed;inset:0;z-index:100;background:rgba(20,33,61,.55);display:flex;align-items:flex-end;justify-content:center;padding:14px}
.zipm[hidden]{display:none}
.zipm-card{position:relative;background:#fff;border-radius:20px;box-shadow:var(--shadow2);padding:24px 20px 18px;width:100%;max-width:440px;text-align:center}
.zipm-card h3{font-size:19px;line-height:1.3;margin:0 26px 8px}
.zipm-lead{color:var(--mut);font-size:15px;margin:0 0 16px}
.zipm-card .btn{display:flex;width:100%;margin:0 0 8px;white-space:normal;text-align:center;justify-content:center;line-height:1.25}
.zipm-note{color:var(--mut);font-size:13px;margin:-2px 0 12px}
.zipm-msg{color:#047857;font-weight:800;font-size:14px;margin:4px 0 6px;min-height:1px;word-break:break-all}
.zipm-small{font-size:13.5px;color:var(--mut2);margin:8px 0 0}
.zipm-small a{color:var(--blue);font-weight:800}
.zipm-x{position:absolute;top:8px;right:10px;width:40px;height:40px;border:0;background:transparent;font-size:28px;line-height:1;color:var(--mut);cursor:pointer;border-radius:10px}
.zipm-x:focus-visible{outline:2px solid var(--blue)}
@media (min-width:600px){ .zipm{align-items:center} }

.hub-how{scroll-margin-top:90px}

@media (min-width:641px){ .dl-row .btn-lg{padding:15px 22px;font-size:16.5px} }

/* navigateurs sans aspect-ratio (Safari avant 15) : la hauteur de la scène par le remplissage du haut */
@supports not (aspect-ratio:1){
  .pvv-stage{height:0;padding-top:52.63%}
  @media (max-width:640px){ .pvv-stage{padding-top:78.125%} }
}
/* échec de chargement du moteur : message à la place de l'indicateur */
.pvv-error .pvv-load::before{display:none}