/* ══ Maestro v3 — styles ══ */
:root{
  --bg:#0d0c13; --sur:#17151f; --sur2:#211e2c; --sur3:#2b2739;
  --gold:#c9a84c; --gold-l:#e8cc7e; --gold-dim:rgba(201,168,76,.16);
  --tx:#eae6dc; --mut:#87819a; --dan:#e05c5c; --ok:#5ca87a;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --rad:14px;
  /* mouvement : ressort léger pour les apparitions, sortie douce pour le reste */
  --spring:cubic-bezier(.34,1.42,.5,1);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* surfaces flottantes — assez opaques pour rester lisibles au-dessus
     d'une page blanche comme d'une page inversée */
  --glass:rgba(18,16,25,.88);
  --hair:rgba(255,255,255,.1);
  --lift:0 12px 42px rgba(0,0,0,.55);
  --icon:#b3adc4;          /* icône au repos : contraste tenu sur --glass */
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--tx);
  font-family:var(--sans);font-size:16px;overscroll-behavior:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font-family:inherit;font-size:1rem;color:var(--tx)}
.hidden{display:none!important}
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;display:block;pointer-events:none}

.ghost-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:14px;color:var(--mut);flex-shrink:0;
  transition:background .15s,color .15s,transform .16s var(--spring)}
.ghost-btn:hover{background:var(--sur2);color:var(--tx)}
.ghost-btn:active{transform:scale(.9)}
.ghost-btn.on{color:var(--gold);background:var(--gold-dim)}
.btn-gold{background:var(--gold);color:#141208;border-radius:12px;padding:13px 22px;
  font-weight:700;font-size:1rem;transition:transform .1s,filter .15s}
.btn-gold:active{transform:scale(.97)}
.btn-gold:hover{filter:brightness(1.08)}
.btn-gold.small{padding:9px 14px;font-size:.9rem}
.btn-line{border:1px solid var(--sur3);border-radius:12px;padding:12px 20px;color:var(--tx)}
.btn-line:hover{border-color:var(--gold)}

/* ══ Setup ══ */
#v-setup{display:flex;align-items:center;justify-content:center;height:100%;padding:20px}
.setup-box{width:min(420px,100%);background:var(--sur);border:1px solid var(--sur3);
  border-radius:22px;padding:36px 32px;display:flex;flex-direction:column;gap:14px}
.setup-logo{font-size:3rem;text-align:center;color:var(--gold)}
.setup-box h1{font-family:var(--serif);text-align:center;font-size:1.9rem;letter-spacing:.04em}
.setup-box p{text-align:center;color:var(--mut);margin-bottom:8px}
.setup-box label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--mut)}
.setup-box input{background:var(--bg);border:1px solid var(--sur3);border-radius:10px;
  padding:12px 14px;outline:none}
.setup-box input:focus{border-color:var(--gold)}
#setup-err{color:var(--dan);font-size:.85rem;text-align:center;min-height:1.2em}

/* ══ Bibliothèque ══ */
#v-lib{display:flex;flex-direction:column;height:100%;overflow:hidden}
.lib-top{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid var(--sur3)}
.lib-brand{font-family:var(--serif);font-size:1.5rem;color:var(--gold);letter-spacing:.05em;margin-right:6px}
.searchbox{flex:1;display:flex;align-items:center;gap:10px;background:var(--sur);
  border:1px solid var(--sur3);border-radius:14px;padding:0 16px;height:52px;min-width:0}
.searchbox:focus-within{border-color:var(--gold)}
.searchbox .ic{width:19px;height:19px;color:var(--mut);flex-shrink:0}
.searchbox input{flex:1;background:none;border:none;outline:none;min-width:0}
.searchbox input::placeholder{color:var(--mut)}
#lib-body{flex:1;display:grid;grid-template-columns:280px 1fr;min-height:0;position:relative}
#lib-side{background:var(--sur);border-right:1px solid var(--sur3);overflow-y:auto;
  padding:10px 10px 30px;scrollbar-width:thin;scrollbar-color:var(--sur3) transparent}
#lib-content{overflow-y:auto;padding:14px 22px 60px;scrollbar-width:thin;
  scrollbar-color:var(--sur3) transparent;min-width:0}
#side-veil{display:none}
#lib-tabs{display:none}
@media (max-width:860px){
  #lib-body{grid-template-columns:1fr}
  #lib-side{position:absolute;top:0;bottom:0;left:0;width:min(320px,86vw);z-index:40;
    transform:translateX(-105%);transition:transform .3s var(--ease);box-shadow:12px 0 40px rgba(0,0,0,.5)}
  #v-lib.side-open #lib-side{transform:none}
  #v-lib.side-open #side-veil{display:block;position:absolute;inset:0;z-index:39;
    background:rgba(5,4,8,.55);animation:fade .25s ease}
  /* le tiroir ne sert plus qu'aux dossiers : les vues sont dans les onglets */
  #lib-side .side-it{display:none}
  /* barre d'onglets : cibles larges, à portée du pouce */
  #lib-tabs{display:flex;align-items:stretch;gap:2px;flex-shrink:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid var(--hair)}
  .ltab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;height:58px;border-radius:14px;color:var(--mut);
    transition:color .16s,background .16s,transform .16s var(--spring)}
  .ltab .ic{width:23px;height:23px;transition:transform .22s var(--spring)}
  .ltab span{font-size:.66rem;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;max-width:100%}
  .ltab:active{transform:scale(.92)}
  .ltab.on{color:var(--gold);background:var(--gold-dim)}
  .ltab.on .ic{transform:translateY(-1px) scale(1.1)}
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* entrées de la barre latérale */
.side-sec{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  margin:18px 12px 6px}
.side-it{display:flex;align-items:center;gap:12px;width:100%;padding:14px 12px;min-height:52px;
  border-radius:12px;color:var(--tx);font-size:1rem;text-align:left;cursor:pointer;
  border:none;background:none;transition:background .15s,color .15s}
.side-it .ic{width:20px;height:20px;color:var(--mut);flex-shrink:0}
.side-it:hover{background:var(--sur2)}
.side-it.on{background:var(--gold-dim);color:var(--gold-l)}
.side-it.on .ic{color:var(--gold)}
.side-it .scount{margin-left:auto;color:var(--mut);font-size:.78rem}
.tree-it{display:flex;align-items:center;gap:6px;width:100%;padding:5px 8px;min-height:48px;
  border-radius:10px;color:var(--tx);font-size:.95rem;cursor:pointer;border:none;background:none;
  text-align:left;transition:background .15s,color .15s}
.tree-it:hover{background:var(--sur2)}
.tree-it.on{background:var(--gold-dim);color:var(--gold-l)}
.tree-it .tw{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--mut);border-radius:10px}
.tree-it .tw:hover{background:var(--sur3);color:var(--tx)}
.tree-it .tw .ic{width:16px;height:16px;transition:transform .22s var(--spring)}
.tree-it.exp .tw .ic{transform:rotate(90deg)}
.tree-it .tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-it .scount{color:var(--mut);font-size:.75rem}

/* lignes de partitions */
.rows{display:flex;flex-direction:column}
.lrow{display:flex;align-items:center;gap:14px;padding:9px 10px;border-radius:16px;
  cursor:pointer;min-height:74px;transition:background .15s,transform .16s var(--spring)}
.lrow:hover{background:var(--sur)}
.lrow:active{background:var(--sur2);transform:scale(.985)}
.lrow .rthumb{width:48px;height:64px;border-radius:7px;background:#efece4;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.lrow .rthumb img{width:100%;height:100%;object-fit:cover;display:block}
.lrow .rthumb .ph{font-family:var(--serif);font-size:1.3rem;color:#b4ac97}
.lrow .rmain{flex:1;min-width:0}
.lrow .rtitle{font-size:1.05rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.lrow .rsub{font-size:.8rem;color:var(--mut);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lrow .rstar{color:var(--gold);flex-shrink:0}
.lrow .rstar .ic{width:17px;height:17px;fill:var(--gold);stroke:none}
.lrow .rmenu{width:50px;height:50px;border-radius:14px;color:var(--mut);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.lrow .rmenu:hover{background:var(--sur3);color:var(--tx)}
.letter-head{font-family:var(--serif);color:var(--gold);font-size:1.1rem;
  padding:18px 10px 6px;border-bottom:1px solid var(--sur3);margin-bottom:6px}
.view-title{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.view-title h2{font-family:var(--serif);font-size:1.5rem;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view-title .vcount{color:var(--mut);font-size:.9rem}
.empty-note{color:var(--mut);text-align:center;padding:60px 20px;font-style:italic}
.side-empty{color:var(--mut);font-size:.85rem;font-style:italic;padding:8px 12px}

/* Setlists */
.sl-item{display:flex;align-items:center;gap:14px;background:var(--sur);border:1px solid var(--sur3);
  border-radius:15px;padding:16px 18px;margin-bottom:10px;cursor:pointer;transition:border-color .15s}
.sl-item:hover{border-color:var(--gold)}
.sl-item .ic{color:var(--gold)}
.sl-name{flex:1;font-weight:600;font-size:1.05rem}
.sl-count{color:var(--mut);font-size:.85rem}
.sl-piece{display:flex;align-items:center;gap:12px;background:var(--sur);border:1px solid var(--sur3);
  border-radius:13px;padding:12px 14px;margin-bottom:8px}
.sl-piece .num{color:var(--gold);font-family:var(--serif);width:24px;text-align:center;flex-shrink:0}
.sl-piece .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.sl-piece .ghost-btn{width:36px;height:36px}

/* ══ Lecteur ══ */
#v-reader{position:fixed;inset:0;background:#000;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#stage{position:absolute;inset:0;overflow:hidden}
#strip{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform}
.spread{height:100%;display:flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;
  will-change:transform}
.pcell{position:relative;background:#fff;box-shadow:0 6px 40px rgba(0,0,0,.75)}
.pcell img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;
  -webkit-user-drag:none}
.pcell canvas.anno{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pcell .labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pcell .lspin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#efece4}
.lspin::after{content:'';width:28px;height:28px;border-radius:50%;border:3px solid #d8d2c2;
  border-top-color:var(--gold);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#v-reader.inverted .pcell{background:#141414}
#v-reader.inverted .pcell img{filter:invert(.93) hue-rotate(180deg)}
#v-reader.inverted .lspin{background:#141414}

#vscroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;
  scrollbar-width:none}
#vscroll .pcell{margin:8px auto}

.label-item{position:absolute;transform:translate(-2px,-50%);pointer-events:none;white-space:nowrap;
  line-height:1;user-select:none;font-family:var(--serif)}
/* Un « mf » fait ~13×27 px à l'écran : impossible à attraper d'un doigt pressé.
   Cette pastille invisible lui donne une prise d'au moins 34 px sans rien
   déplacer. Elle n'existe que quand l'étiquette est saisissable, puisqu'elle
   hérite du pointer-events du parent (none au repos). */
.label-item::before{content:'';position:absolute;left:50%;top:50%;
  width:max(100%,34px);height:max(100%,34px);transform:translate(-50%,-50%)}
#v-reader.editing .label-item,.label-item.sel{pointer-events:auto;cursor:grab}
.label-item.sel{filter:drop-shadow(0 0 5px rgba(201,168,76,.9))}
.label-item.pulse{animation:lpulse .5s ease}
@keyframes lpulse{0%{transform:translate(-2px,-50%) scale(1.7)}100%{transform:translate(-2px,-50%) scale(1)}}
.sel-pill{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  display:flex;gap:2px;background:var(--sur);border:1px solid var(--sur3);border-radius:24px;
  padding:4px;box-shadow:0 6px 24px rgba(0,0,0,.5);white-space:nowrap}
.sel-pill button{width:44px;height:44px;border-radius:50%;color:var(--tx);font-size:1.05rem;
  display:flex;align-items:center;justify-content:center}
.sel-pill button:active{background:var(--sur3)}
.sel-pill .ic{width:20px;height:20px}
/* En cours de déplacement : bien visible (elle était à 75 % d'opacité, soit
   l'inverse de ce qu'on veut quand on cherche justement à la placer). Pas de
   mise à l'échelle : la poignée est son enfant, elle glisserait sous le doigt. */
.label-item.dragging{cursor:grabbing;z-index:60;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.5)) drop-shadow(0 0 7px rgba(201,168,76,.95))}
/* pendant le déplacement, la pastille masquerait la portée juste au-dessus,
   c'est-à-dire exactement ce qu'on cherche à viser */
.label-item.dragging .sel-pill{opacity:0;pointer-events:none}

/* Poignée de déplacement : on la tient, le doigt reste sous l'annotation */
.sel-grip{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50%;background:var(--sur);
  border:1.5px solid var(--gold);color:var(--gold);display:flex;align-items:center;
  justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.55);cursor:grab;
  touch-action:none;pointer-events:auto}
.sel-grip .ic{width:22px;height:22px}
.sel-grip::before{content:'';position:absolute;left:50%;bottom:100%;width:1.5px;height:12px;
  transform:translateX(-50%);background:var(--gold);opacity:.65}
.label-item.dragging .sel-grip{cursor:grabbing;background:var(--gold);color:#141208}
/* au ras du bas de page : poignée au-dessus, pastille en dessous */
.label-item.flip .sel-grip{top:auto;bottom:calc(100% + 12px)}
.label-item.flip .sel-grip::before{bottom:auto;top:100%}
.label-item.flip .sel-pill{bottom:auto;top:calc(100% + 12px)}
.label-item svg{display:block;overflow:visible}
.label-item .dyn{font-style:italic;font-weight:700;font-family:var(--serif)}

/* Barres du lecteur */
.rd-bar{position:absolute;left:0;right:0;display:flex;align-items:center;gap:2px;z-index:30;
  padding:calc(6px + env(safe-area-inset-top)) 10px 6px;
  background:linear-gradient(rgba(10,9,14,.92),rgba(10,9,14,.75) 70%,transparent);
  transition:opacity .25s,transform .25s}
#rd-top{top:0}
#v-reader.chrome-hidden #rd-top{opacity:0;transform:translateY(-12px);pointer-events:none}
#rd-title-wrap{flex:1;min-width:0;padding:0 6px}
#rd-title{font-family:var(--serif);font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rd-sub{font-size:.72rem;color:var(--gold);margin-top:1px}
#rd-sub:empty{display:none}
#sync-dot{width:8px;height:8px;border-radius:50%;background:var(--mut);margin:0 6px;flex-shrink:0;transition:background .3s}
#sync-dot.pending{background:var(--gold)}
#sync-dot.err{background:var(--dan)}

/* Dock flottant : les commandes du lecteur, en gros et sous la main */
#rd-dock{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:4px;padding:6px;
  border-radius:22px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid var(--hair);box-shadow:var(--lift);max-width:calc(100vw - 16px);
  transition:opacity .3s var(--ease),transform .34s var(--spring)}
#v-reader.chrome-hidden #rd-dock{opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(20px) scale(.94)}
#v-reader.editing #rd-dock{display:none}
.dock-btn{--d:clamp(48px,12.8vw,60px);width:var(--d);height:var(--d);border-radius:17px;
  display:flex;align-items:center;justify-content:center;color:var(--icon);flex-shrink:0;
  transition:background .16s,color .16s,transform .16s var(--spring)}
.dock-btn .ic{width:26px;height:26px}
.dock-btn:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.dock-btn:active{transform:scale(.88)}
.dock-btn.on{color:var(--gold);background:var(--gold-dim)}
.dock-btn.prim{color:var(--gold-l)}
.dock-btn.prim.on{background:var(--gold);color:#141208}
.dock-pages{width:auto;min-width:76px;padding:0 13px;gap:8px;color:var(--tx);font-size:.88rem;
  font-variant-numeric:tabular-nums}
.dock-pages .ic{width:21px;height:21px;color:var(--icon)}
.dock-pages.on .ic{color:var(--gold)}
@media (max-width:560px){ #rd-crop{display:none} }  /* → disponible dans le menu ⋯ */
@media (max-width:380px){ .dock-pages .ic{display:none} .dock-pages{min-width:0;padding:0 10px} }

#rd-nextpiece{position:absolute;bottom:calc(92px + env(safe-area-inset-bottom));right:14px;z-index:25;
  background:var(--gold-dim);border:1px solid var(--gold);color:var(--gold-l);
  padding:11px 18px;border-radius:20px;font-size:.85rem;cursor:pointer;backdrop-filter:blur(6px);
  transition:opacity .25s,transform .16s var(--spring)}
#rd-nextpiece:active{transform:scale(.95)}
#v-reader.chrome-hidden #rd-nextpiece{opacity:0;pointer-events:none}

/* ancré sous le ⋯ de la barre du haut */
#rd-menu{position:absolute;top:calc(58px + env(safe-area-inset-top));right:10px;z-index:40;
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid var(--hair);border-radius:16px;padding:6px;min-width:250px;
  box-shadow:var(--lift);transform-origin:top right;animation:popdown .2s var(--spring)}
@keyframes popdown{from{opacity:0;transform:scale(.9) translateY(-8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(8px)}to{opacity:1;transform:none}}
.menu-it{display:flex;align-items:center;gap:12px;padding:14px 14px;border-radius:11px;
  cursor:pointer;font-size:.92rem;width:100%;text-align:left;min-height:50px}
.menu-it:hover{background:var(--sur2)}
.menu-it .ic{width:19px;height:19px;color:var(--mut);flex-shrink:0}

/* Édition */
#ed-bar{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom));left:8px;right:8px;
  z-index:35;display:flex;align-items:center;gap:4px;padding:6px;
  justify-content:safe center;  /* « safe » : rien ne devient inatteignable au scroll */
  overflow-x:auto;scrollbar-width:none;border-radius:22px;
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid var(--hair);box-shadow:var(--lift);animation:dockup .3s var(--spring)}
#ed-bar::-webkit-scrollbar{display:none}
@keyframes dockup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.tool{display:flex;align-items:center;justify-content:center;min-width:56px;height:56px;
  border-radius:16px;color:var(--icon);flex-shrink:0;
  transition:background .15s,color .15s,transform .16s var(--spring)}
.tool .ic{width:26px;height:26px}
.tool:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.tool:active{transform:scale(.88)}
.tool.on{color:var(--gold);background:var(--gold-dim)}
.tool.ed-done{color:var(--ok)}
.tool.ed-done.on,.tool.ed-done:hover{background:rgba(92,168,122,.16)}
.ed-sep{width:1px;height:32px;background:var(--sur3);margin:0 5px;flex-shrink:0}
#ed-colors{display:flex;gap:6px;flex-shrink:0}
.cw{width:38px;height:38px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;
  flex-shrink:0;transition:transform .16s var(--spring),border-color .15s}
.cw:active{transform:scale(.88)}
.cw.on{border-color:#fff;transform:scale(1.12)}
#ed-size{width:120px;accent-color:var(--gold);flex-shrink:0;height:38px}

/* Symboles */
#sym-sheet{position:absolute;bottom:calc(84px + env(safe-area-inset-bottom));left:8px;right:8px;
  z-index:34;background:var(--glass);backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid var(--hair);border-radius:20px;max-height:44vh;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:var(--lift);transform-origin:bottom center;animation:pop .24s var(--spring)}
#sym-tabs{display:flex;border-bottom:1px solid var(--sur3);overflow-x:auto;scrollbar-width:none}
#sym-tabs button{padding:11px 16px;color:var(--mut);font-size:.85rem;white-space:nowrap}
#sym-tabs button.on{color:var(--gold);box-shadow:inset 0 -2px var(--gold)}
#sym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;
  padding:14px;overflow-y:auto}
.sym-it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  height:76px;background:var(--sur2);border-radius:13px;cursor:pointer;border:1px solid transparent}
.sym-it:hover{border-color:var(--gold)}
.sym-it.on{border-color:var(--gold);background:var(--gold-dim)}
.sym-it .glyph{font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--tx)}
.sym-it .glyph svg{display:block}
.sym-it .lbl{font-size:.6rem;color:var(--mut)}

/* Tiroir de pages */
#thumbs-drawer{position:absolute;bottom:calc(88px + env(safe-area-inset-bottom));left:8px;right:8px;
  z-index:36;background:var(--glass);backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid var(--hair);border-radius:20px;padding:12px 12px 8px;box-shadow:var(--lift);
  transform-origin:bottom center;animation:pop .24s var(--spring)}
#thumbs-grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.th-it{flex-shrink:0;cursor:pointer;text-align:center}
.th-it img{height:120px;border-radius:6px;border:2px solid transparent;display:block;background:#efece4;min-width:85px}
.th-it.cur img{border-color:var(--gold)}
.th-it .tn{font-size:.7rem;color:var(--mut);margin-top:4px}
.th-it.cur .tn{color:var(--gold)}
#thumbs-slider{width:100%;accent-color:var(--gold)}

/* Métronome */
#metro-panel{position:absolute;bottom:calc(92px + env(safe-area-inset-bottom));right:10px;z-index:40;
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid var(--hair);border-radius:18px;padding:16px;width:250px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--lift);
  transform-origin:bottom right;animation:pop .22s var(--spring)}
.metro-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
#mt-bpm{font-family:var(--serif);font-size:2.1rem;color:var(--gold);min-width:80px;text-align:center}
#mt-bpm.tick{color:var(--gold-l)}
#mt-slider{width:100%;accent-color:var(--gold)}
#mt-beats{background:var(--sur2);border:1px solid var(--sur3);border-radius:9px;padding:8px}
#mt-start.running{background:var(--dan);color:#fff}

/* ══ Roue radiale ══ */
/* Le pointage se fait par secteur angulaire : la direction suffit, la distance
   n'a pas d'importance. On vise « vers » l'outil, on ne le touche pas. */
#wheel{position:fixed;inset:0;z-index:70;touch-action:none}
#wheel .veil{position:absolute;inset:0;background:rgba(5,4,8,.42);
  backdrop-filter:blur(3px);animation:fade .2s ease}
.wheel-hub{position:absolute;transform:translate(-50%,-50%)}
/* le disque clair du milieu = la zone morte : y revenir annule */
.wheel-ring{position:absolute;left:50%;top:50%;border-radius:50%;
  background:radial-gradient(circle,rgba(23,21,31,.5) 0 26%,rgba(23,21,31,.93) 27%,rgba(23,21,31,.93) 99%,transparent 100%);
  border:1px solid rgba(201,168,76,.22);box-shadow:0 12px 60px rgba(0,0,0,.65);
  transform:translate(-50%,-50%);animation:ringin .3s var(--spring)}
@keyframes ringin{from{opacity:0;transform:translate(-50%,-50%) scale(.65)}
                  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* quartier de visée : rend visible la zone active, qui s'étend à l'infini */
.wheel-sect{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;z-index:1;
  opacity:0;background:conic-gradient(rgba(201,168,76,.2) 0 var(--span),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent var(--dead),#000 calc(var(--dead) + 1px));
  mask:radial-gradient(circle,transparent var(--dead),#000 calc(var(--dead) + 1px));
  transition:transform .14s var(--ease),opacity .14s}
.wheel-sect.vis{opacity:1}
.wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;
  border-radius:50%;background:var(--sur2);border:1.5px solid var(--gold);display:flex;
  align-items:center;justify-content:center;color:var(--gold);z-index:3;padding:5px;
  transition:transform .14s var(--spring),background .14s}
.wheel-center .ic{width:25px;height:25px}
.wheel-center.hot{transform:translate(-50%,-50%) scale(1.1);background:var(--gold-dim)}
.wheel-center .wc-lbl{font-size:.62rem;line-height:1.15;text-align:center;color:var(--gold-l);
  word-break:break-word;hyphens:auto}
.wheel-it{position:absolute;width:66px;height:66px;border-radius:50%;background:var(--sur2);
  border:1.5px solid var(--sur3);display:flex;flex-direction:column;align-items:center;
  justify-content:center;transform:translate(-50%,-50%);color:var(--tx);gap:1px;z-index:2;
  transition:transform .14s var(--spring),border-color .14s,background .14s,box-shadow .14s;
  animation:bloom .32s var(--spring) backwards}
@keyframes bloom{
  from{opacity:0;transform:translate(calc(-50% - var(--bx)),calc(-50% - var(--by))) scale(.35)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.wheel-it .glyph{font-family:var(--serif);font-size:1.3rem;line-height:1;pointer-events:none}
.wheel-it .glyph svg{display:block}
.wheel-it .wlbl{font-size:.52rem;color:var(--mut);pointer-events:none;max-width:60px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wheel-it.hot{transform:translate(-50%,-50%) scale(1.3);border-color:var(--gold);
  background:var(--gold-dim);z-index:4;
  box-shadow:0 0 0 4px rgba(201,168,76,.13),0 10px 28px rgba(0,0,0,.55)}
.wheel-it.hot .wlbl{color:var(--gold-l)}
/* pas de z-index : .wheel-hub est un contexte d'empilement (transform), un
   z-index ici passerait devant toute la roue au lieu de rester sous le moyeu */
.wheel-target{position:absolute;width:22px;height:22px;transform:translate(-50%,-50%);
  pointer-events:none}
.wheel-target::before,.wheel-target::after{content:'';position:absolute;background:var(--gold)}
.wheel-target::before{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)}
.wheel-target::after{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)}

/* Anneau de progression de l'appui long : le geste devient visible */
.press-ring{position:fixed;width:46px;height:46px;transform:translate(-50%,-50%);z-index:60;
  pointer-events:none;animation:fade .12s ease}
.press-ring svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.press-ring .trk{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2.5}
.press-ring .arc{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:113;stroke-dashoffset:113;animation:ringfill var(--dur) linear forwards}
@keyframes ringfill{to{stroke-dashoffset:0}}

/* ══ Modales ══ */
#modal-wrap{position:fixed;inset:0;z-index:100;background:rgba(5,4,8,.72);display:flex;
  align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}
#modal-box{background:var(--sur);border:1px solid var(--sur3);border-radius:20px;
  width:min(480px,100%);max-height:88vh;overflow-y:auto;padding:26px}
#modal-box h2{font-family:var(--serif);font-size:1.35rem;margin-bottom:16px;color:var(--gold-l)}
#modal-box label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--mut);margin-bottom:12px}
#modal-box input[type=text],#modal-box input[type=url],#modal-box input[type=password],#modal-box input[type=number],#modal-box select{
  background:var(--bg);border:1px solid var(--sur3);border-radius:10px;padding:11px 13px;outline:none;width:100%}
#modal-box input:focus{border-color:var(--gold)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:.95rem}
.set-row .hint{color:var(--mut);font-size:.78rem;margin-top:2px}
.switch{position:relative;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;z-index:2}
.switch .sl{position:absolute;inset:0;background:var(--sur3);border-radius:14px;transition:background .2s}
.switch .sl::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .2s}
.switch input:checked+.sl{background:var(--gold)}
.switch input:checked+.sl::after{transform:translateX(20px)}

#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);z-index:200;
  background:var(--sur2);border:1px solid var(--sur3);color:var(--tx);padding:12px 22px;
  border-radius:14px;font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
  max-width:86vw;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.5)}
#toast.vis{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  .lib-brand{display:none}
  .lib-top{padding-left:12px;padding-right:12px;gap:6px}
  #lib-content{padding:14px 14px 40px}
}