/* Pianovera · lecteur sur partition.
   Deux étages :
   1. LE MOTEUR (indispensable) : zone de partition à hauteur fixe qui défile à l'intérieur, unités (lignes ou pages), cadre, voile des mains, mode lecture, bouton « Revenir à la lecture ».
   2. L'HABILLAGE PAR DÉFAUT (.lp-ui, facultatif) : titre, barre de commandes, pied. Avec data-ui="aucune" il n'est pas construit et la page habille elle-même.
   Réglages du site : --lp-hauteur (hauteur de la zone ; défaut 70 % de l'écran), --lp-bleu, --lp-cadre (voir plus bas). */

/* ======================================================= 1. MOTEUR */
.lp{--lp-hauteur:clamp(320px,70vh,920px);--lp-bleu:var(--blue,#2563eb);--lp-cadre:#2563eb;display:block;position:relative;-webkit-text-size-adjust:100%}
@supports (height:1dvh){.lp{--lp-hauteur:clamp(320px,70dvh,920px)}}
@media (max-width:720px){.lp{--lp-hauteur:clamp(300px,56vh,620px)}@supports (height:1dvh){.lp{--lp-hauteur:clamp(300px,56dvh,620px)}}}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp [hidden]{display:none!important}
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lp-ic{flex:none;display:block}
.lp-vue{position:relative;min-height:0}
.lp-zone{position:relative;height:var(--lp-hauteur);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;outline:0;scrollbar-width:thin}
.lp-zone:focus-visible{outline:3px solid #0ea5e9;outline-offset:-3px}
.lp-lignes{position:relative}
.lp-unite{position:relative;background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden}
.lp-unite+.lp-unite{border-top:1px solid #e3e9f5}
.lp-unite img{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.lp-unite .lp-calque{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none}   /* calque des doigtés : posé exactement sur la base (mêmes dimensions) */
.lp-unite.lp-sans .lp-calque{visibility:hidden}
@supports not (aspect-ratio:1){
  .lp-unite::before{content:"";display:block;padding-top:calc(100% * var(--h) / var(--w))}
  .lp-unite img{position:absolute;left:0;top:0}
}
.lp-bande{position:absolute;z-index:1;pointer-events:none;background:rgba(37,99,235,.06);border-radius:4px}
.lp-cadre{position:absolute;z-index:3;pointer-events:none;border:2.5px solid var(--lp-cadre);background:rgba(37,99,235,.13);border-radius:9px;box-shadow:0 0 0 3px rgba(37,99,235,.16);
  transition:left .09s linear,width .09s linear,top .14s,height .14s;will-change:left,width}
.lp-cadre.saut{transition:none}
.lp-voile{position:absolute;left:0;right:0;z-index:2;pointer-events:none;background:rgba(255,255,255,.82)}
.lp-focus{display:none;position:absolute;z-index:2;pointer-events:none;box-shadow:0 0 0 4000px rgba(223,231,246,.66)}
.lp-retour{position:absolute;left:50%;transform:translateX(-50%);top:12px;z-index:60;font:800 15px/1.1 var(--font,"Nunito","Segoe UI",system-ui,-apple-system,sans-serif);min-height:44px;padding:11px 20px;border-radius:12px;border:1.5px solid #0a1430;background:#0a1430;color:#fff;cursor:pointer;white-space:nowrap;box-shadow:0 10px 28px rgba(10,20,48,.4)}
.lp-retour:hover{background:#14307a;border-color:#14307a}
.lp-retour:focus-visible{outline:3px solid #7dd3fc;outline-offset:2px}

/* mode lecture : plein écran (réel ou simulé : iPhone). L'unité jouée est NETTE, les autres s'estompent. */
html.lp-verrou{overflow:hidden}
.lp-lecture{position:fixed!important;inset:0;z-index:2147483000;margin:0!important;width:100%;height:100%;display:flex;flex-direction:column;background:#dfe7f6;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.lp-lecture .lp-vue{flex:1 1 auto}
.lp-lecture .lp-zone{height:100%;background:transparent}
.lp-lecture .lp-lignes{max-width:1060px;margin:0 auto;padding:16px 16px 42vh}
.lp-lecture .lp-unite{border:1px solid #cbd5e6;border-radius:14px;margin:0 0 14px;opacity:.36;transition:opacity .3s}
.lp-lecture .lp-unite+.lp-unite{border-top:1px solid #cbd5e6}
.lp-lecture .lp-unite.is-cur{opacity:1;box-shadow:0 14px 34px rgba(20,33,61,.2)}
.lp-lecture .lp-focus{display:block}
@media (max-width:720px){.lp-lecture .lp-lignes{padding:10px 6px 42vh}.lp-lecture .lp-unite{border-radius:10px;margin-bottom:10px}}
@media (prefers-reduced-motion:reduce){.lp-cadre{transition:none}.lp-lecture .lp-unite{transition:none}}

/* ======================================================= 2. HABILLAGE PAR DÉFAUT (sobre) */
.lp-ui{--lp-txt:var(--txt,#14213d);--lp-mut:var(--mut,#4c5c7c);--lp-line:var(--line2,#cbd5e6);--lp-line1:var(--line,#dfe5f1);--lp-blue2:var(--blue2,#1d4ed8);
  --lp-grad:var(--grad,linear-gradient(135deg,#2563eb,#0ea5e9));--lp-font:var(--font,"Nunito","Segoe UI",system-ui,-apple-system,sans-serif);--lp-droite:#10b981;--lp-gauche:#2563eb;
  color:var(--lp-txt);font-family:var(--lp-font);margin:0 0 22px;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--lp-line);border-radius:18px;box-shadow:0 10px 30px rgba(20,33,61,.08),0 2px 6px rgba(20,33,61,.05);overflow:hidden}
.lp-ui .lp-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:13px 18px;border-bottom:1px solid var(--lp-line1);background:#f6f8fd}
.lp-ui .lp-h2{margin:0!important;font-size:20px;line-height:1.25;color:var(--lp-txt)}
.lp-ui .lp-info{margin:0;font-size:14px;font-weight:700;color:var(--lp-mut)}
.lp-ui .lp-quit{display:none}
.lp-ui .lp-pied{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;padding:11px 18px;border-top:1px solid var(--lp-line1);background:#f6f8fd;font-size:14px;font-weight:700;color:var(--lp-mut);line-height:1.45}
.lp-err{margin:0;padding:34px 18px;text-align:center;font-weight:800;color:#4c5c7c}
.lp-ui .lp-bar{background:#fff;border-bottom:1px solid var(--lp-line1)}
.lp-prog{position:relative;height:10px;background:#dbe5f7;cursor:pointer;touch-action:none;overflow:hidden}
.lp-prog::before{content:"";position:absolute;inset:-14px 0}
.lp-prog:focus-visible{outline:3px solid #0ea5e9;outline-offset:-3px}
.lp-fill{position:absolute;inset:0;background:linear-gradient(90deg,#2563eb,#0ea5e9);transform:scaleX(var(--lp-p,0));transform-origin:left}
.lp-rang{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"c1 c3" "c2 c2";align-items:center;gap:8px 14px;padding:9px 12px}
.lp-c{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.lp-c1{grid-area:c1}.lp-c2{grid-area:c2}.lp-c3{grid-area:c3;justify-self:end}
.lp-btn,.lp-grp button{font:800 15px/1.1 var(--lp-font);color:var(--lp-txt);background:#fff;border:1.5px solid var(--lp-line);border-radius:12px;padding:9px 13px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.lp-btn:hover,.lp-grp button:hover{border-color:var(--lp-bleu);color:var(--lp-bleu);background:#eef4ff}
.lp-btn:focus-visible,.lp-grp button:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px}
.lp-ib{padding:9px 10px;min-width:44px}
.lp-play{background:var(--lp-grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(37,99,235,.28);min-width:140px;font-size:16px}
.lp-play:hover{color:#fff;background:var(--lp-grad);filter:brightness(1.07)}
.lp-play>span{display:inline-flex;align-items:center;gap:8px}
.lp-t-pause,.lp-t-load{display:none!important}
.lp-joue .lp-t-play{display:none!important}.lp-joue .lp-t-pause{display:inline-flex!important}
.lp-charge .lp-t-play,.lp-charge .lp-t-pause{display:none!important}.lp-charge .lp-t-load{display:inline-flex!important}
.lp-temps{font:800 14.5px/1 var(--lp-font);color:var(--lp-mut);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:84px;text-align:center}
.lp-mes{font:800 14px/1 var(--lp-font);color:var(--lp-mut);white-space:nowrap;min-width:78px}
.lp-mes b{color:var(--lp-txt);font-variant-numeric:tabular-nums}
.lp-grp{display:inline-flex;align-items:center;border:1.5px solid var(--lp-line);border-radius:13px;background:#fff;padding:2px}
.lp-grp button{border:0;border-radius:10px;padding:8px 12px;min-height:40px;white-space:nowrap}
.lp-grp button[aria-pressed="true"]{background:var(--lp-bleu);color:#fff}
.lp-grp button[aria-pressed="true"]:hover{background:var(--lp-blue2);color:#fff}
.lp-dot{width:11px;height:11px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1.5px #475569;flex:none}
.lp-dot.d{background:var(--lp-droite)}.lp-dot.g{background:var(--lp-gauche)}
.lp-sw{gap:9px}
.lp-sw::before{content:"";flex:none;width:38px;height:22px;border-radius:99px;background:#cbd5e6 radial-gradient(circle at 11px 11px,#fff 8px,transparent 9px) no-repeat;box-shadow:inset 0 0 0 1px #94a3b8;transition:background-color .15s}
.lp-sw[aria-pressed="true"],.lp-sw2[aria-pressed="true"],.lp-plein[aria-pressed="true"]{border-color:var(--lp-bleu);background:#eef4ff;color:#1e3a8a}
.lp-sw[aria-pressed="true"]::before{background:var(--lp-bleu) radial-gradient(circle at 27px 11px,#fff 8px,transparent 9px) no-repeat}
.lp-ico-son{display:inline-flex}.lp-ico-son svg+svg{display:none}.lp-sw2[aria-pressed="true"] .lp-ico-son svg:first-child{display:none}.lp-sw2[aria-pressed="true"] .lp-ico-son svg+svg{display:block}
.lp-t2{display:none}.lp-sw2[aria-pressed="true"] .lp-t1{display:none}.lp-sw2[aria-pressed="true"] .lp-t2{display:inline}
.lp-plein .lp-ico-p{display:inline-flex}

/* encart « notes qui tombent » (habillage par défaut) */
.lp-encart{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:center;margin:0 0 22px;padding:24px 26px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#0a1430,#14307a);box-shadow:0 24px 60px rgba(20,33,61,.16);font-family:var(--font,"Nunito","Segoe UI",system-ui,sans-serif)}
.lp-encart:not(:has(.lp-enc-img)){grid-template-columns:1fr}
.lp-encart h3{margin:0 0 8px;color:#fff;font-size:24px;line-height:1.25}
.lp-encart p{margin:0 0 16px;color:#dbe5f7;font-weight:600;font-size:16px;line-height:1.5}
.lp-enc-b{display:flex;flex-wrap:wrap;gap:10px}
.lp-lien{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border-radius:12px;background:#fff;color:#0a1430;font:800 16px/1.2 var(--font,"Nunito","Segoe UI",system-ui,sans-serif);text-decoration:none}
.lp-lien:hover{background:#eaf2ff}
.lp-lien:focus-visible{outline:3px solid #7dd3fc;outline-offset:2px}
.lp-lien-1{background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff}
.lp-enc-img{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.lp-enc-img img{display:block;width:100%;height:auto}
@media (max-width:760px){.lp-encart{grid-template-columns:1fr;padding:20px 18px}.lp-encart h3{font-size:21px}.lp-lien{flex:1 1 100%}}

/* écrans étroits (téléphone, y compris à l'horizontale) : les commandes passent sur des lignes pleines */
@media (max-width:900px){.lp-rang{display:flex;flex-wrap:wrap}.lp-c{width:100%}.lp-c3{flex-wrap:nowrap;justify-self:auto}.lp-c3>.lp-btn{flex:1 1 0;min-width:0}.lp-c2{justify-content:space-between}}
/* téléphone */
@media (max-width:720px){
  .lp-ui{border-radius:12px}
  .lp-ui .lp-tete{padding:11px 14px}
  .lp-rang{display:flex;flex-wrap:wrap;gap:6px 8px;padding:7px 8px}
  .lp-c{gap:6px;width:100%}
  .lp-c1{flex-wrap:nowrap}
  .lp-c1 .lp-play{flex:1 1 auto;min-width:0}
  .lp-c1 .lp-mes{display:none}
  .lp-temps{min-width:0;font-size:13.5px}
  .lp-c2{flex-wrap:nowrap;justify-content:space-between}
  .lp-grp button{padding:8px 8px;font-size:13.5px;min-height:42px}
  .lp-mains{flex:1 1 auto}.lp-mains button{flex:1 1 auto}
  .lp-c3{flex-wrap:nowrap}
  .lp-c3>.lp-btn{flex:1 1 0;min-width:0;padding:7px 6px;font-size:13.5px}
  .lp-sw{gap:6px}.lp-sw::before{width:28px;height:17px;background-image:radial-gradient(circle at 8.5px 8.5px,#fff 6.5px,transparent 7.5px)}
  .lp-sw[aria-pressed="true"]::before{background-image:radial-gradient(circle at 19.5px 8.5px,#fff 6.5px,transparent 7.5px)}
  .lp-txt-son{display:none}.lp-sw2{flex:0 0 46px!important}
  .lp-ico-p{display:none}
  .lp-retour{font-size:14px;padding:10px 16px}
}
@media (max-width:420px){.lp-dot{display:none}.lp-grp button{padding:8px 6px;font-size:13px}.lp-c1 .lp-ib{min-width:40px;padding:9px 8px}}

/* mode lecture dans l'habillage par défaut : bandeau du haut + commandes en bas */
.lp-ui.lp-lecture{border:0;border-radius:0;box-shadow:none;overflow:visible}
.lp-ui.lp-lecture .lp-tete{order:1;flex:none;align-items:center;flex-wrap:nowrap;padding:9px 16px;background:#0a1430;border:0}
.lp-ui.lp-lecture .lp-h2{font-size:17px;color:#fff}
.lp-ui.lp-lecture .lp-info,.lp-ui.lp-lecture .lp-pied{display:none}
.lp-ui.lp-lecture .lp-quit{display:inline-flex;min-height:40px;padding:6px 14px;margin-left:auto;background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.lp-ui.lp-lecture .lp-quit:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
.lp-ui.lp-lecture .lp-vue{order:2}
.lp-ui.lp-lecture .lp-bar{order:9;flex:none;border:0;border-top:1.5px solid var(--lp-line);box-shadow:0 -8px 28px rgba(20,33,61,.16);padding-bottom:env(safe-area-inset-bottom)}
.lp-ui.lp-lecture .lp-rang{max-width:1100px;margin:0 auto;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.lp-ui.lp-lecture .lp-plein{display:none}
.lp-ui.lp-lecture .lp-btn,.lp-ui.lp-lecture .lp-grp button{min-height:48px;font-size:16px}
@media (max-width:720px){.lp-ui.lp-lecture .lp-btn,.lp-ui.lp-lecture .lp-grp button{min-height:44px;font-size:14px}.lp-ui.lp-lecture .lp-tete{padding:8px 12px}.lp-ui.lp-lecture .lp-h2{font-size:15px}}
@media (max-height:560px){.lp-ui.lp-lecture .lp-tete{display:none}.lp-ui.lp-lecture .lp-plein{display:inline-flex}.lp-lecture .lp-lignes{padding-top:8px}}
@media (prefers-reduced-motion:reduce){.lp-sw::before{transition:none}}
.lp-lecture.lp-nosuivi .lp-unite{opacity:1}
/* « Agrandir » (partition sans suivi sur téléphone) : la page à 2× sa largeur, la zone défile dans les deux sens, au doigt */
.lp-agrandi .lp-zone{overflow-x:auto;touch-action:pan-x pan-y}
.lp-agrandi .lp-lignes{width:200%}
.lp-lecture.lp-agrandi .lp-lignes{width:200%;max-width:none;margin:0}