/* ============================================================================
   LECTEUR KLIPA UNIFIÉ v2 (.kp) — design validé « Lecteur » (Claude Design).
   LE SEUL lecteur du site. Accent figé #2563EB : rendu identique partout.

   Sécurisation CSS : le lecteur peut être monté dans n'importe quel contenu
   hôte (carte outil, admin, éditeur...). Pour ne jamais être influencé par du
   CSS externe (ni en fuir vers l'extérieur), sans jamais recourir à
   !important :
   1) reset interne scopé (.kp *) qui neutralise typographie/couleurs/listes
      héritées du contexte hôte AVANT nos propres règles ;
   2) chaque sélecteur est ancré sous ".kp " (jamais de classe nue type
      ".kp-bar") pour qu'une règle externe de même spécificité ne puisse
      jamais l'emporter, quel que soit l'ordre de chargement des feuilles ;
   3) isolation:isolate crée une pile d'empilement propre (z-index internes
      jamais perturbés par le contexte hôte, et inversement).

   Deux sections :
   1) NOUVEAU markup (.kp-bar) — construit par kplayer.js v2.
   2) COMPAT Optimiseur (.kp-ctrl legacy) — lab.html construit encore l'ancien
      markup avec son propre contrôleur A/B ; on le garde stylé (recoloré).
   ============================================================================ */

/* ---------- reset interne (neutralise le CSS hérité du contenu hôte) ---------- */
/* text-align n'est PAS ici : .kp-errbox le centre pour ses enfants (icône,
   titre, sous-titre) via l'héritage normal — un reset générique casserait ça. */
.kp,.kp *,.kp *::before,.kp *::after{box-sizing:border-box}
.kp *{margin:0;padding:0;border:0;font:inherit;color:inherit;list-style:none;background:none;text-decoration:none;-webkit-tap-highlight-color:transparent}

/* ---------- cadre ---------- */
.kp{position:relative;display:block;width:auto;height:auto;margin:0 auto;border-radius:12px;overflow:hidden;background:#0E1116;box-shadow:0 4px 12px rgba(16,24,40,.16);line-height:0;outline:none;user-select:none;-webkit-user-select:none;font-family:'Manrope',system-ui,sans-serif;text-align:left;isolation:isolate}
.kp:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.4),0 4px 12px rgba(16,24,40,.16)}
.kp .kp-v{display:block;width:100%;height:100%;object-fit:contain;background:#0E1116}
@keyframes kp-spin{to{transform:rotate(360deg)}}

/* ---------- badge hôte (coin haut-gauche, posé par l'écran) ---------- */
.kp .kp-tag{position:absolute;top:12px;left:12px;z-index:6;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:7px;background:#2563EB;color:#fff;font-size:12px;font-weight:800;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none}
.kp .kp-tag svg{width:12px;height:12px;flex:none}

/* ---------- bouton central lecture / revoir ---------- */
.kp .kp-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8;width:62px;height:62px;border-radius:999px;border:0;cursor:pointer;background:#2563EB;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(37,99,235,.45);transition:opacity .18s,transform .12s,background .15s}
.kp .kp-center svg{width:26px;height:26px;margin-left:3px}
.kp.kp-ended .kp-center svg{margin-left:0}
.kp .kp-center:hover{background:#1D4ED8;transform:translate(-50%,-50%) scale(1.05)}
.kp:not(.paused) .kp-center,.kp.kp-wait .kp-center,.kp.kp-error .kp-center{opacity:0;pointer-events:none}

/* ---------- attente / mémoire tampon ---------- */
.kp .kp-buf{position:absolute;inset:0;z-index:7;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(14,17,22,.45);pointer-events:none;line-height:1.4}
.kp.kp-wait .kp-buf{display:flex}
.kp .kp-spin{width:36px;height:36px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:999px;animation:kp-spin .7s linear infinite}
.kp .kp-buf p{margin:12px 0 0;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.9)}

/* ---------- erreur de lecture ---------- */
.kp .kp-errbox{position:absolute;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(14,17,22,.82);padding:24px;text-align:center;line-height:1.4}
.kp.kp-error .kp-errbox{display:flex}
.kp.kp-error .kp-bar{opacity:0;pointer-events:none}
.kp .kp-err-ic{width:56px;height:56px;border-radius:16px;background:rgba(220,38,38,.15);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:#F87171}
.kp .kp-err-ic svg{width:28px;height:28px}
.kp .kp-err-t{margin:0;font-size:16px;font-weight:700;color:#fff}
.kp .kp-err-s{margin:6px 0 0;font-size:13px;font-weight:500;color:rgba(255,255,255,.7);max-width:280px}
.kp .kp-retry{margin-top:16px;height:40px;padding:0 18px;border:0;border-radius:10px;background:#2563EB;color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;box-shadow:0 4px 12px rgba(37,99,235,.35)}
.kp .kp-retry:hover{background:#1D4ED8}
.kp .kp-retry svg{width:16px;height:16px}

/* ---------- indicateurs double-toucher ±10 s ---------- */
.kp .kp-hint{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:9;display:none;flex-direction:column;align-items:center;gap:4px;pointer-events:none;line-height:1}
.kp .kp-hint-b{left:22%}.kp .kp-hint-f{left:78%}
.kp.kp-hb .kp-hint-b,.kp.kp-hf .kp-hint-f{display:flex}
.kp .kp-hint-c{width:52px;height:52px;border-radius:999px;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff}
.kp .kp-hint-c svg{width:24px;height:24px}
.kp .kp-hint b{font-size:11px;font-weight:800;color:#fff}

/* ---------- barre de contrôles (progression + boutons) ---------- */
.kp .kp-bar{position:absolute;left:0;right:0;bottom:0;z-index:9;padding:8px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;line-height:1}
.kp.paused .kp-bar,.kp.kp-show .kp-bar,.kp.kp-ended .kp-bar{opacity:1;transform:none;pointer-events:auto}

.kp .kp-bar .kp-seek{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none;margin-bottom:2px}
.kp .kp-bar .kp-seek::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:999px;background:rgba(255,255,255,.28)}
.kp .kp-bar .kp-seek-fill{position:relative;height:4px;border-radius:999px;background:#2563EB;width:0;pointer-events:none}
.kp .kp-knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:999px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);left:0;pointer-events:none}
.kp .kp-tip{position:absolute;bottom:22px;transform:translateX(-50%);background:rgba(14,17,22,.92);color:#fff;font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
.kp .kp-bar .kp-seek:hover .kp-tip{opacity:1}

.kp .kp-row{display:flex;align-items:center;gap:2px}
.kp .kp-row button{border:0;background:transparent;color:#fff;cursor:pointer;padding:0;width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;transition:background .15s}
.kp .kp-row button:hover{background:rgba(255,255,255,.12)}
.kp .kp-row button svg{width:20px;height:20px;display:block}
.kp .kp-row .kp-pp{background:#2563EB;box-shadow:0 2px 8px rgba(37,99,235,.4)}
.kp .kp-row .kp-pp:hover{background:#1D4ED8}
.kp .kp-bar .kp-t{margin:0 8px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.kp .kp-t i{font-style:normal;color:rgba(255,255,255,.5)}
.kp .kp-flex{flex:1}

.kp .kp-spd{position:relative;flex:none;display:inline-flex}
.kp .kp-row .kp-spd-b{width:auto;min-width:40px;height:34px;padding:0 8px;background:rgba(255,255,255,.14);border-radius:8px;font-family:inherit;font-size:12px;font-weight:800}
.kp .kp-row .kp-spd-b:hover{background:rgba(255,255,255,.22)}
.kp .kp-menu{position:absolute;bottom:42px;right:0;background:rgba(20,24,31,.98);border-radius:10px;padding:5px;box-shadow:0 8px 24px rgba(0,0,0,.4);display:none;flex-direction:column;gap:2px;min-width:70px}
.kp .kp-spd.open .kp-menu{display:flex}
.kp .kp-row .kp-menu button{width:100%;height:auto;padding:8px 10px;border-radius:7px;justify-content:flex-start;font-family:inherit;font-size:13px;font-weight:700}
.kp .kp-row .kp-menu button.on{background:rgba(37,99,235,.9)}

.kp .kp-volg{display:inline-flex;align-items:center;flex:none}
.kp .kp-vr{-webkit-appearance:none;appearance:none;width:70px;height:4px;border-radius:999px;background:rgba(255,255,255,.35);accent-color:#2563EB;cursor:pointer;margin:0 4px;padding:0;border:0}
.kp .kp-vr::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:999px;background:#fff;cursor:pointer}
.kp .kp-vr::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:999px;background:#fff;cursor:pointer}

/* largeurs étroites : contrôles secondaires retirés (classes posées par kplayer.js) */
.kp.kp-narrow .kp-b10,.kp.kp-narrow .kp-f10,.kp.kp-narrow .kp-spd{display:none}
.kp.kp-tiny .kp-vr{display:none}
.kp.kp-tiny .kp-t i{display:none}
/* Palier le plus étroit (aperçu vertical) : le minuteur disparaît à son tour.
   L'ordre de sacrifice suit l'utilité — d'abord les sauts de 10 s et la vitesse,
   puis le curseur de volume et la durée totale, enfin le minuteur. Restent les
   trois commandes qu'on ne peut pas remplacer : lecture, son, plein écran ; la
   position, elle, reste lisible sur la barre de progression juste au-dessus. */
.kp.kp-tiny .kp-t{display:none}

/* ============================================================================
   2) COMPAT Optimiseur — ancien markup (.kp-ctrl en ligne), contrôleur propre
   de lab.html. Recoloré à l'accent unique du lecteur, même scoping défensif.
   ============================================================================ */
.kp .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 .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 .kp-ctrl button:hover{opacity:1}
.kp .kp-ctrl button svg{width:19px;height:19px;display:block}
.kp .kp-ctrl .kp-seek{position:relative;flex:1;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.kp .kp-ctrl .kp-seek::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:999px;background:rgba(255,255,255,.34)}
.kp .kp-ctrl .kp-seek-fill{position:relative;height:4px;border-radius:999px;background:#2563EB;width:0;pointer-events:none}
.kp .kp-ctrl .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-ctrl .kp-seek-fill::after,.kp.kp-show .kp-ctrl .kp-seek-fill::after{opacity:1}
.kp .kp-ctrl .kp-t{margin:0;color:#fff;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}