/* ==========================================================
   Kin Ambiance — Page Live améliorée (STANTECH, 24/10/2026)
   Préfixe .kl- : n'interfère pas avec les styles existants.
   ========================================================== */

/* 1. Plus de faux commentaires ni de faux cœurs « Ambiance Live » */
.kin-live-ambience,
.kin-live-fake-comment,
.kin-immersive-comment.is-ambience{display:none!important}

/* 2. Le P qui tombe du ciel sur l'avatar de l'animateur (toutes les 5 s) */
@keyframes klFall{0%{transform:translateY(-150%) rotate(-14deg);opacity:0}6%{opacity:1}18%{transform:translateY(0) rotate(0) scale(1.14,.8)}24%{transform:translateY(-14%) scale(.95,1.07)}30%{transform:translateY(0) scale(1)}86%{transform:translateY(0);opacity:1}95%{transform:translateY(0);opacity:0}100%{transform:translateY(-150%);opacity:0}}
@keyframes klImpact{0%,16%{box-shadow:0 0 0 0 rgba(255,200,119,0)}19%{box-shadow:0 0 0 4px rgba(255,200,119,.6)}34%,100%{box-shadow:0 0 0 16px rgba(255,200,119,0)}}
@keyframes klWiggle{0%,17%,31%,100%{transform:rotate(0)}21%{transform:rotate(-16deg)}26%{transform:rotate(11deg)}}
@keyframes klSpark{0%,17%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}32%,100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1)}}
.kh .kh__ini{display:inline-flex;align-items:baseline;line-height:1}
.kh .kh__fall{display:inline-block;color:#FFC877;transform-origin:50% 100%;animation:klFall 5s cubic-bezier(.3,0,.25,1) infinite}
.kh .kh__initials{animation:klImpact 5s linear infinite}
.kh .kh__avatar>.kh__mic{animation:klWiggle 5s ease-in-out infinite}
.kh .kh__avatar>.kh__spark{position:absolute;z-index:2;left:56%;top:58%;width:6px;height:6px;border-radius:50%;background:#FFC877;opacity:0;pointer-events:none;animation:klSpark 5s ease-out infinite}
.kh .kh__avatar>.kh__spark--a{--sx:-24px;--sy:-18px}
.kh .kh__avatar>.kh__spark--b{--sx:22px;--sy:-20px;width:5px;height:5px;background:#FF6B74}
.kh .kh__avatar>.kh__spark--c{--sx:26px;--sy:6px;width:4px;height:4px;background:#8FA6FF}
.kh .kh__avatar>.kh__drop{position:absolute;z-index:2;left:-4px;top:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0B1939;border:2px solid #FFC877;color:#FFC877;font:800 13px/1 'Bricolage Grotesque',Inter,sans-serif;animation:klFall 5s cubic-bezier(.3,0,.25,1) infinite}
@media(prefers-reduced-motion:reduce){.kh .kh__fall,.kh .kh__initials,.kh .kh__avatar>.kh__mic,.kh .kh__avatar>.kh__spark,.kh .kh__avatar>.kh__drop{animation:none!important}.kh .kh__avatar>.kh__spark{display:none}}

/* 3. Lecteur : reculer de 30 s, économie de données, écran verrouillé */
.club-live-actions .kl-back30{display:inline-flex;align-items:center;gap:6px}
.kl-back30 svg{flex:0 0 auto}
.kl-eco{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.kl-eco__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.kl-eco__text strong{font-size:14.5px;color:#fff}
.kl-eco__text small{font-size:12.5px;color:#A9B4CC}
.kl-switch{position:relative;flex:0 0 auto;width:52px;height:30px;padding:0;border:0;border-radius:999px;background:#33406A;cursor:pointer;transition:background .2s}
.kl-switch span{position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.kl-switch[aria-checked="true"]{background:#1F8F4E}
.kl-switch[aria-checked="true"] span{transform:translateX(22px)}
.kl-switch:focus-visible{outline:3px solid #FFC877;outline-offset:3px}
.kl-lock,.club-live-content>.kl-lock{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:#8E9AB6}
.club-live-content>.kl-eco{text-align:left}

/* 4. Réactions + partage */
.kl-react{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px}
.kl-react__label{font-size:13px;font-weight:700;color:#A9B4CC;margin-right:2px}
.kl-react__btn{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font:700 13px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:transform .12s,border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.kl-react__btn:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.09)}
.kl-react__btn:active{transform:scale(.94)}
.kl-react__btn.is-pop{animation:klPop .35s ease-out}
.kl-react__btn b{font-variant-numeric:tabular-nums}
.kl-react__wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:#1F8F4E;color:#fff!important;font:700 13px/1 Inter,system-ui,sans-serif;text-decoration:none}
.kl-react__wa:hover{background:#23A35A}
.kl-float{position:fixed;z-index:2147483000;pointer-events:none;font-size:26px;line-height:1;animation:klFloat 1.6s ease-out forwards}
@keyframes klPop{40%{transform:scale(1.12)}}
@keyframes klFloat{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-140px) scale(1.15)}}

/* 5. Onglets Commentaires · Dédicaces · Programme */
.kl-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:18px 0 16px;padding:4px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.kl-tabs button{min-height:44px;padding:0 8px;border:0;border-radius:10px;background:transparent;color:#C7D0E4;font:700 14px/1.1 Inter,system-ui,sans-serif;cursor:pointer}
.kl-tabs button[aria-selected="true"]{background:#fff;color:#070F24}
.kl-tabs button:focus-visible{outline:3px solid #FFC877;outline-offset:2px}
.kl-panel[hidden]{display:none!important}
.kl-card{padding:20px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09)}
.kl-h{margin:0;font:800 22px/1.15 'Bricolage Grotesque',Inter,sans-serif;color:#fff}
.kl-lead{margin:6px 0 14px;font-size:14px;line-height:1.5;color:#A9B4CC}

.kl-pinned{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:linear-gradient(120deg,rgba(243,18,31,.16),rgba(10,35,237,.12));border:1px solid rgba(243,18,31,.3)}
.kl-pinned span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FF8A92}
.kl-pinned p{margin:5px 0 0;font-size:14px;line-height:1.5;color:#F4F6FB}

/* Dédicaces */
.kl-ded-form{display:flex;flex-direction:column;gap:10px}
.kl-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kl-ded-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:#C7D0E4}
.kl-ded-form input[type=text],.kl-ded-form textarea{width:100%;box-sizing:border-box;min-height:46px;padding:11px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:#0B1939;color:#fff;font:15px/1.35 Inter,system-ui,sans-serif;resize:vertical}
.kl-ded-form input:focus,.kl-ded-form textarea:focus{outline:none;border-color:#FFC877;box-shadow:0 0 0 3px rgba(255,200,119,.22)}
.kl-ded-form .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.kl-ded-send{min-height:48px;border:0;border-radius:12px;background:#FFC877;color:#2A1A05;font:800 15px/1 Inter,system-ui,sans-serif;cursor:pointer}
.kl-ded-send:disabled{opacity:.6;cursor:progress}
.kl-status{min-height:1.2em;font-size:13px;color:#A9B4CC}
.kl-status.is-ok{color:#7EF0A8}.kl-status.is-error{color:#FF8A92}
.kl-ded-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.kl-ded-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.04)}
.kl-ded-who{font-size:13.5px;line-height:1.35;color:#DDE3F3;min-width:0;overflow-wrap:anywhere}
.kl-ded-who b{color:#fff}
.kl-badge{flex:0 0 auto;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap}
.kl-badge--lue{background:rgba(31,143,78,.22);color:#7EF0A8}
.kl-badge--attente{background:rgba(255,200,119,.16);color:#FFC877}

/* Programme */
.kl-now{margin-top:14px;padding:13px 14px;border-radius:14px;background:rgba(243,18,31,.12);border:1px solid rgba(243,18,31,.32)}
.kl-now span{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FF8A92}
.kl-now p{margin:5px 0 0;font-size:15px;font-weight:700;color:#fff}
.kl-now--replay{background:rgba(47,75,255,.12);border-color:rgba(143,166,255,.3)}
.kl-now--replay span{color:#B9C7FF}
.kl-kicker{margin:18px 0 6px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8FA6FF}
.kl-prog{list-style:none;margin:0;padding:0}
.kl-prog li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}
.kl-date{flex:0 0 auto;display:grid;place-items:center;align-content:center;width:52px;height:52px;border-radius:12px;background:#16244A;text-align:center;line-height:1.05;font-size:11px;font-weight:700;color:#A9B4CC}
.kl-date b{display:block;font:800 18px/1 'Bricolage Grotesque',Inter,sans-serif;color:#fff}
.kl-prog__txt{flex:1;min-width:0}
.kl-prog__txt strong{display:block;font-size:14.5px;color:#fff}
.kl-prog__txt small{font-size:12.5px;color:#A9B4CC}
.kl-remind{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:10px;border:1px solid rgba(255,255,255,.18);color:#fff!important;font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.kl-remind:hover{border-color:#FFC877;color:#FFC877!important}
.kl-note{margin:10px 0 0;font-size:12.5px;color:#8E9AB6}
.kl-empty{padding:16px;border-radius:14px;border:1px dashed rgba(255,255,255,.18);text-align:center}
.kl-empty p{margin:0 0 8px;color:#C7D0E4}
.kl-empty a{color:#7EF0A8;font-weight:700}

/* 6. Mini-lecteur collant (mobile) */
.kl-mini{position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:70;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:16px;background:#16244A;border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 40px rgba(0,0,0,.55);color:#fff;transform:translateY(140%);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
.kl-mini.is-visible{transform:none;opacity:1;pointer-events:auto}
body.kv-v6 .kl-mini{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}
.kl-mini__cover{flex:0 0 auto;width:42px;height:42px;border-radius:10px;object-fit:cover;background:linear-gradient(140deg,#0A23ED,#F3121F)}
.kl-mini__txt{flex:1;min-width:0;display:flex;flex-direction:column;text-decoration:none;color:#fff}
.kl-mini__txt strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-mini__txt small{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#FF8A92}
.kl-mini__txt small i{width:6px;height:6px;border-radius:50%;background:#F3121F}
.kl-mini__play{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#070F24;cursor:pointer}
@media(min-width:821px){.kl-mini{right:auto;left:24px;bottom:24px;width:360px}body.kv-v6 .kl-mini{bottom:24px}}

@media(max-width:560px){
  .kl-react{gap:6px}
  .kl-react__label{width:100%}
  .kl-react__btn{padding:0 12px}
  .kl-react__name{display:none}
  .kl-react__wa{flex:1;justify-content:center}
  .kl-row2{grid-template-columns:1fr}
  .kl-card{padding:16px}
  .kl-tabs button{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.kl-react__btn.is-pop,.kl-float{animation:none}.kl-float{display:none}.kl-mini{transition:none}}