/* LA BARRE DES VERSETS (sourate-barre.js ; Myriam, 07/10) : sur le bord droit, une piste fine, une POIGNÉE dorée ⇅ et sa bulle « Verset
   142 » (les chiffres 1, 2, 3), visibles seulement pendant un défilement à la main et 2,5 s après. Au-dessus du texte, sous le lecteur
   collé (45) et la barre du site (50). La poignée se prend au doigt (sa prise : 44 × 72 px ; un simple toucher passe au mot qu'elle
   recouvre) ; la piste aussi, sur une bande de 24 px tout au bord — les mots arrivent à 30 px du bord d'un téléphone —, et seulement tant
   que la barre est là. */
#sourate .vbarre { position:fixed; top:0; right:0; z-index:44; pointer-events:none; opacity:0; transition:opacity .25s; }
#sourate .vbarre.vue { opacity:1; }
#sourate .vbarre.sans-fondu { transition:none; }
/* la piste : une bande de 24 px qu'on peut toucher, au bord ; son trait, 4 px, dans l'axe de la poignée */
#sourate .vb-piste { position:fixed; right:0; width:24px; touch-action:none; }
#sourate .vb-piste::before { content:''; position:absolute; top:0; bottom:0; right:17px; width:4px; border-radius:2px; background:rgba(169,107,31,.28); }
#sourate .vbarre.vue .vb-piste, #sourate .vbarre.vue .vb-curseur { pointer-events:auto; }
/* la poignée : 30 × 52 px, dorée, ⇅ en son milieu ; sa prise, 44 × 72, collée au bord */
#sourate .vb-curseur { position:fixed; top:0; right:0; width:44px; height:72px; touch-action:none; cursor:grab; will-change:transform; }      /* sa place : un translateY (sourate-barre.js) */
#sourate .vbarre.tenue .vb-curseur { cursor:grabbing; }
#sourate .vb-curseur::after { content:'⇅'; position:absolute; right:4px; top:10px; width:30px; height:52px; display:grid; place-items:center; border-radius:15px;
  background:var(--or, #d68f35); color:var(--nuit, #29231d); font:700 17px/1 'Jost',sans-serif; box-shadow:0 2px 8px rgba(41,35,29,.35); }
#sourate .vbarre.tenue .vb-curseur::after { background:#e9ac52; transform:scale(1.08); }
#sourate .vb-bulle { position:absolute; right:40px; top:50%; transform:translateY(-50%); padding:7px 14px; border-radius:999px; background:var(--nuit, #29231d);
  color:#f6e7c9; font:600 15px/1.2 'Jost',sans-serif; white-space:nowrap; box-shadow:0 2px 10px rgba(41,35,29,.3); pointer-events:none; }
#sourate .vbarre.tenue .vb-bulle { font-size:17px; padding:9px 16px; }
@media (prefers-reduced-motion:reduce) { #sourate .vbarre, #sourate .vb-curseur::after { transition:none; } }