/* ============================================================================
   LECTEUR KLIPA UNIFIÉ (.kp) — module partagé, un seul player partout
   Extrait de l'optimiseur (lab.html) pour réutilisation sur les pages-outils,
   la page résultat et l'optimiseur. Barre de contrôle fine en superposition.
   Accent figé (#7C3AED) pour un rendu identique quel que soit le contexte.
   ============================================================================ */
.kp{position:relative;display:block;width:auto;height:auto;margin:0 auto;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 12px 32px rgba(15,23,42,.18);line-height:0}
.kp-v{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.kpskel{display:flex;align-items:center;justify-content:center}
.kp-shade{position:absolute;left:0;right:0;bottom:0;height:62px;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));opacity:0;transition:opacity .18s;pointer-events:none}
.kp:hover .kp-shade,.kp.paused .kp-shade,.kp.kp-show .kp-shade{opacity:1}
.kp-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:999px;border:0;cursor:pointer;background:rgba(124,58,237,.92);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(124,58,237,.5);transition:opacity .18s,transform .12s}
.kp-center svg{width:26px;height:26px;margin-left:3px}
.kp-center:hover{transform:translate(-50%,-50%) scale(1.06)}
.kp:not(.paused) .kp-center{opacity:0;pointer-events:none}
.kp-ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:9px 12px;opacity:0;transition:opacity .18s;line-height:1}
.kp:hover .kp-ctrl,.kp.paused .kp-ctrl,.kp.kp-show .kp-ctrl{opacity:1}
.kp-ctrl button{border:0;background:transparent;color:#fff;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex:none;opacity:.92}
.kp-ctrl button:hover{opacity:1}
.kp-ctrl button svg{width:19px;height:19px;display:block}
.kp-seek{position:relative;flex:1;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.kp-seek::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:999px;background:rgba(255,255,255,.34)}
.kp-seek-fill{position:relative;height:4px;border-radius:999px;background:#7C3AED;width:0;pointer-events:none}
.kp-seek-fill::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);opacity:0;transition:opacity .15s}
.kp:hover .kp-seek-fill::after,.kp.kp-show .kp-seek-fill::after{opacity:1}
.kp-t{color:#fff;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.kp-volg{display:flex;align-items:center;flex:none}
.kp-vsl{position:relative;width:0;height:14px;display:flex;align-items:center;cursor:pointer;touch-action:none;transition:width .18s;flex:none;overflow:hidden}
.kp-volg:hover .kp-vsl,.kp.kp-show .kp-volg .kp-vsl{width:54px;margin-left:7px;overflow:visible}
.kp-vsl::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:999px;background:rgba(255,255,255,.34)}
.kp-vsl-fill{position:relative;height:4px;border-radius:999px;background:#fff;width:100%;pointer-events:none}
.kp-vsl-fill::after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.kp-tag{position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;letter-spacing:.5px;color:#fff;background:rgba(15,23,42,.78);border-radius:6px;padding:3px 8px;pointer-events:none;z-index:2}