/* AUDIO STUDIO EQ PRO (lk-eq.js) : fenêtre flottante de l'égaliseur, néon rose / violet / cyan de Lykhubs. Refonte 14/11/2026 */
.lkeq { --pk: #ff2d78; --pk2: #e40046; --vi: #a855f7; --cy: #22d3ee; --ink: #fff; --mut: rgba(236,226,255,.62); --line: rgba(255,255,255,.08);
  position: fixed; z-index: 10070; display: flex; flex-direction: column; min-width: 820px; min-height: 560px; color: var(--ink);
  font-family: Poppins, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 13px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, rgba(34,10,48,.97), rgba(14,6,26,.97) 45%, rgba(10,6,30,.98));
  box-shadow: 0 0 0 1px rgba(255,120,200,.22), 0 0 0 1px rgba(255,255,255,.04) inset, 0 50px 110px -30px rgba(0,0,0,.9), 0 0 80px -20px rgba(255,45,120,.45), 0 0 120px -40px rgba(124,58,237,.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); animation: lkeqIn .24s cubic-bezier(.2,.8,.2,1); user-select: none; }
.lkeq::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, rgba(255,45,120,.75), rgba(168,85,247,.25) 35%, rgba(34,211,238,.15) 60%, rgba(255,45,120,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lkeq-glow { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px); }
.lkeq-glow.a { left: -120px; top: -140px; width: 520px; height: 300px; background: radial-gradient(closest-side, rgba(255,45,120,.45), transparent); }
.lkeq-glow.b { right: -160px; bottom: -120px; width: 600px; height: 340px; background: radial-gradient(closest-side, rgba(124,58,237,.5), transparent); }
@keyframes lkeqIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.lkeq.is-flash { animation: lkeqFlash .3s; } @keyframes lkeqFlash { 50% { box-shadow: 0 0 0 2px var(--pk), 0 50px 110px -30px rgba(0,0,0,.9); } }
.lkeq.is-max { left: 10px !important; top: 10px !important; width: calc(100vw - 20px) !important; height: calc(100vh - 20px) !important; }
.lkeq *, .lkeq *::before, .lkeq *::after { box-sizing: border-box; }
.lkeq button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.lkeq button:focus-visible, .lkeq [tabindex]:focus-visible { outline: 2px solid var(--pk); outline-offset: 2px; }
/* ---- en-tête ---- */
.lkeq-hd { display: flex; align-items: center; gap: 16px; padding: 14px 16px 12px 20px; cursor: grab; } .lkeq-hd:active { cursor: grabbing; } .lkeq.is-max .lkeq-hd { cursor: default; }
.lkeq-brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; } .lkeq-brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(168,85,247,.6)); } .lkeq-brand b { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.lkeq-sep { width: 1px; height: 34px; background: linear-gradient(transparent, rgba(255,255,255,.22), transparent); flex: 0 0 auto; }
.lkeq-tt { min-width: 0; flex: 0 1 auto; } .lkeq-tt b { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; white-space: nowrap; } .lkeq-tt em { font-style: normal; color: var(--pk); text-shadow: 0 0 18px rgba(255,45,120,.6); }
.lkeq-pro { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 7px; background: rgba(168,85,247,.25); color: #e9d5ff; box-shadow: inset 0 0 0 1px rgba(192,132,252,.6); }
.lkeq-tt small { display: block; font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lkeq-tabs { margin: 0 auto; display: flex; gap: 4px; padding: 5px; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); }
.lkeq-tabs button { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px; border-radius: 12px; font-weight: 600; font-size: 13.5px; color: rgba(255,255,255,.85); transition: background .15s, color .15s; white-space: nowrap; }
.lkeq-tabs button i { font-size: 13px; opacity: .9; } .lkeq-tabs button:hover { background: rgba(255,255,255,.07); }
.lkeq-tabs button.is-on { color: #fff; background: linear-gradient(135deg, rgba(255,45,120,.55), rgba(228,0,70,.35)); box-shadow: inset 0 0 0 1px rgba(255,90,160,.9), 0 0 22px -4px rgba(255,45,120,.75); }
.lkeq-win { display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); flex: 0 0 auto; }
.lkeq-win button { width: 36px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; color: rgba(255,255,255,.85); } .lkeq-win button:hover { background: rgba(255,255,255,.1); color: #fff; }
/* ---- corps ---- */
.lkeq-bd { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr) 284px; gap: 14px; padding: 2px 16px 12px; }
.lkeq-pan { min-height: 0; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.075), inset 0 1px 0 rgba(255,255,255,.06); }
.lkeq-pr, .lkeq-ad { padding: 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.lkeq-h { display: flex; align-items: center; gap: 10px; margin: 2px 2px 14px; font-size: 15.5px; font-weight: 600; } .lkeq-h > i { color: #f9a8d4; font-size: 15px; }
.lkeq-plus { margin-left: auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); } .lkeq-plus:hover { background: rgba(255,255,255,.12); }
/* préréglages */
.lkeq-pl, .lkeq-my { display: flex; flex-direction: column; gap: 7px; }
.lkeq-p { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; text-align: left; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: background .15s, box-shadow .15s, transform .12s; }
.lkeq-p .pi { flex: 0 0 26px; height: 26px; display: grid; place-items: center; font-size: 15px; color: #c4b5fd; }
.lkeq-p:nth-child(3n+1) .pi { color: #f9a8d4; } .lkeq-p:nth-child(3n+2) .pi { color: #c4b5fd; } .lkeq-p:nth-child(3n) .pi { color: #a5b4fc; }
.lkeq-p .pn { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 14px; } .lkeq-p .ok { opacity: 0; font-size: 13px; }
.lkeq-p:hover { background: rgba(255,255,255,.08); transform: translateX(2px); }
.lkeq-p.is-on { background: linear-gradient(135deg, rgba(255,45,120,.62), rgba(196,0,90,.42)); box-shadow: inset 0 0 0 1px rgba(255,120,180,.95), 0 0 24px -6px rgba(255,45,120,.95); } .lkeq-p.is-on .pi { color: #fff; } .lkeq-p.is-on .ok { opacity: 1; }
.lkeq-my { margin-top: 10px; } .lkeq-myh { margin: 6px 4px 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.lkeq-myp .del { opacity: .45; font-size: 12px; padding: 5px; border-radius: 7px; } .lkeq-myp .del:hover { opacity: 1; background: rgba(255,255,255,.14); }
.lkeq-empty { margin: 6px 4px 0; font-size: 11.5px; line-height: 1.5; color: var(--mut); }
.lkeq-mybtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; margin-top: 14px; border-radius: 12px; font-weight: 600; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); } .lkeq-mybtn:hover { background: rgba(255,255,255,.1); }
.lkeq-new { display: flex; gap: 6px; margin: -4px 0 12px; } .lkeq-new input { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px; border: 0; border-radius: 11px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 13.5px; outline: none; } .lkeq-new input:focus { box-shadow: 0 0 0 2px rgba(255,45,120,.65); }
.lkeq-new button { flex: 0 0 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #ff3d7f, #e40046); }
/* ---- zone centrale ---- */
.lkeq-mn { display: flex; flex-direction: column; min-width: 0; padding: 12px; }
.lkeq-v { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; } .lkeq-v[hidden] { display: none; }
.lkeq-tb { display: flex; align-items: center; gap: 10px; }
.lkeq-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px var(--line); }
.lkeq-seg button { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: 13px; color: rgba(255,255,255,.75); } .lkeq-seg button:hover { color: #fff; background: rgba(255,255,255,.06); }
.lkeq-seg button.is-on { color: #fff; background: linear-gradient(135deg, rgba(255,45,120,.5), rgba(228,0,70,.3)); box-shadow: inset 0 0 0 1px rgba(255,100,170,.85), 0 0 18px -6px rgba(255,45,120,.9); }
.lkeq-seg button[data-a="off"].is-on { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.lkeq-tb-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lkeq-live { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 11px; font-weight: 600; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); color: var(--mut); }
.lkeq-live i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); }
.lkeq-live.on { color: #fff; background: rgba(255,45,120,.14); box-shadow: inset 0 0 0 1px rgba(255,45,120,.55); } .lkeq-live.on i { background: var(--pk); animation: lkeqPing 1.6s infinite; }
@keyframes lkeqPing { 0% { box-shadow: 0 0 0 0 rgba(255,45,120,.75); } 70% { box-shadow: 0 0 0 7px rgba(255,45,120,0); } 100% { box-shadow: 0 0 0 0 rgba(255,45,120,0); } }
.lkeq-dd { position: relative; } .lkeq-dd > button { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px 0 14px; border-radius: 11px; font-size: 12.5px; font-weight: 500; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); } .lkeq-dd > button i { font-size: 10px; opacity: .7; }
.lkeq-ddm { position: absolute; right: 0; top: 40px; z-index: 5; min-width: 170px; padding: 6px; border-radius: 12px; background: rgba(28,12,40,.98); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 18px 40px -10px rgba(0,0,0,.8); display: flex; flex-direction: column; }
.lkeq-ddm[hidden] { display: none; } .lkeq-ddm button { text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 13px; } .lkeq-ddm button:hover { background: rgba(255,45,120,.2); }
.lkeq-sq { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); } .lkeq-sq:hover { background: rgba(255,255,255,.1); }
.lkeq-sp { position: relative; flex: 1 1 50%; min-height: 160px; border-radius: 14px; overflow: hidden; background: radial-gradient(70% 80% at 50% 110%, rgba(124,58,237,.22), transparent 70%), linear-gradient(180deg, rgba(8,3,18,.6), rgba(8,3,18,.35)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.lkeq-sp.is-big { flex: 1 1 auto; }
.lkeq-sp canvas { position: absolute; inset: 0; display: block; touch-action: none; }
.lkeq-hint { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); padding: 8px 16px; border-radius: 999px; background: rgba(8,3,18,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: 12.5px; color: var(--mut); pointer-events: none; white-space: nowrap; }
.lkeq-hint[hidden] { display: none; }
/* 20 bandes */
.lkeq-bands { container-type: inline-size; flex: 1 1 50%; min-height: 230px; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 2px; padding: 12px 6px 8px; border-radius: 14px; background: linear-gradient(180deg, rgba(8,3,18,.35), rgba(8,3,18,.2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.lkeq-b { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.lkeq-b output { min-width: 40px; text-align: center; font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; white-space: nowrap; transition: all .15s; }
.lkeq-b output.up { background: rgba(255,45,120,.16); box-shadow: inset 0 0 0 1px rgba(255,80,150,.85), 0 0 12px -4px rgba(255,45,120,.9); color: #ffd0e2; }
.lkeq-b output.dn { background: rgba(99,102,241,.16); box-shadow: inset 0 0 0 1px rgba(129,140,248,.85), 0 0 12px -4px rgba(99,102,241,.9); color: #dbe1ff; }
.lkeq-b label { font-size: 10.5px; color: rgba(255,255,255,.7); white-space: nowrap; font-weight: 500; }
.lkeq-vs { --f: .5; position: relative; flex: 1 1 auto; width: 30px; min-height: 80px; cursor: ns-resize; touch-action: none; border-radius: 8px; }
.lkeq-vs .rl { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 6px; margin-left: -3px; border-radius: 6px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.lkeq-vs .fl { position: absolute; left: 50%; width: 6px; margin-left: -3px; border-radius: 6px; bottom: calc(6px + (100% - 12px) * .5); height: 0; }
.lkeq-vs.is-up .fl { bottom: calc(6px + (100% - 12px) * .5); height: calc((100% - 12px) * (var(--f) - .5)); background: linear-gradient(to top, #c026d3, #ff2d78); box-shadow: 0 0 12px rgba(255,45,120,.85); }
.lkeq-vs.is-dn .fl { bottom: calc(6px + (100% - 12px) * var(--f)); height: calc((100% - 12px) * (.5 - var(--f))); background: linear-gradient(to bottom, #a855f7, #6366f1); box-shadow: 0 0 12px rgba(129,140,248,.85); }
.lkeq-vs .th { position: absolute; left: 50%; width: 30px; height: 14px; margin: 0 0 -7px -15px; bottom: calc(6px + (100% - 12px) * var(--f)); border-radius: 7px; background: linear-gradient(180deg, #fff, #f3e8ff); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 16px rgba(255,45,120,.85), 0 4px 10px rgba(0,0,0,.6); transition: transform .12s; }
.lkeq-vs.is-dn .th { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 16px rgba(129,140,248,.9), 0 4px 10px rgba(0,0,0,.6); }
.lkeq-vs:hover .th, .lkeq-vs:focus-visible .th { transform: scale(1.08); }
.lkeq-vs::after { content: ""; position: absolute; left: 50%; width: 14px; height: 1px; margin-left: -7px; bottom: calc(6px + (100% - 12px) * .5); background: rgba(255,255,255,.25); }
/* cartes (Effets, Spatial, Mastering) */
.lkeq-cards { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 0; } .lkeq-cards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lkeq-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); min-height: 0; }
.lkeq-card-h { align-self: stretch; display: flex; align-items: center; gap: 10px; } .lkeq-card-h b { font-size: 15px; font-weight: 600; margin-right: auto; }
.lkeq-card p { margin: auto 0 0; font-size: 12px; line-height: 1.5; color: var(--mut); text-align: center; }
.lkeq-card canvas { flex: 1 1 auto; width: 100%; min-height: 160px; display: block; }
.lkeq-gonio, .lkeq-meters { position: relative; } .lkeq-gonio > div:not(.lkeq-card-h), .lkeq-meters > div:not(.lkeq-card-h) { display: none; }
.lkeq-gonio canvas, .lkeq-meters canvas { position: relative; }
.lkeq-master { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; min-height: 0; }
.lkeq-mctl { align-items: stretch; } .lkeq-mctl .lkeq-sl, .lkeq-mctl .lkeq-lim { margin-top: 0; }
.lkeq-meters { align-items: stretch; } .lkeq-meters p { text-align: center; font-variant-numeric: tabular-nums; }
/* analyse */
.lkeq-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lkeq-stats span { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); } .lkeq-stats small { display: block; font-size: 11px; color: var(--mut); } .lkeq-stats b { display: block; margin-top: 3px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #fff, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---- traitement avancé ---- */
.lkeq-fxs { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 14px; background: rgba(0,0,0,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.lkeq-fx { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 56px; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; }
.lkeq-fx + .lkeq-fx { box-shadow: 0 -1px 0 rgba(255,255,255,.05); }
.lkeq-fx-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; color: #f9a8d4; background: radial-gradient(circle at 50% 30%, rgba(255,45,120,.28), rgba(255,45,120,.08)); box-shadow: inset 0 0 0 1px rgba(255,90,160,.45), 0 0 14px -4px rgba(255,45,120,.7); }
.is-off > .lkeq-fx-ic, .is-off .lkeq-card-h .lkeq-fx-ic { color: rgba(255,255,255,.55); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.lkeq-fx-l { font-weight: 600; font-size: 13.5px; line-height: 1.25; } .lkeq-fx-l small { display: block; font-weight: 500; font-size: 11px; color: var(--mut); }
.lkeq-sw { position: relative; flex: 0 0 auto; width: 44px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.14) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .18s; }
.lkeq-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.2,.8,.2,1); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.lkeq-sw[aria-checked="true"] { background: linear-gradient(135deg, #ff4d8d, #e40046) !important; box-shadow: 0 0 16px -3px rgba(255,45,120,.95), inset 0 0 0 1px rgba(255,140,190,.6); } .lkeq-sw[aria-checked="true"]::after { transform: translateX(20px); }
.lkeq-knob { position: relative; display: grid; place-items: center; cursor: ns-resize; touch-action: none; border-radius: 50%; --k: 0; }
.lkeq-knob svg { display: block; overflow: visible; } .lkeq-knob path { fill: none; stroke-linecap: round; }
.lkeq-knob .tr { stroke: rgba(255,255,255,.1); stroke-width: 4; } .lkeq-knob .vl { stroke-width: 4; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--k))); filter: drop-shadow(0 0 5px rgba(255,45,120,.85)); }
.lkeq-knob .dot { fill: #fff; filter: drop-shadow(0 0 4px rgba(255,45,120,.9)); }
.lkeq-knob b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: -.02em; color: rgba(255,255,255,.9); padding-top: 3px; }
.lkeq-knob.is-big .tr, .lkeq-knob.is-big .vl { stroke-width: 7; } .lkeq-knob.is-big b { font-size: 20px; }
.lkeq-knob::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.12), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.35); }
.lkeq-knob.is-off .vl { stroke: rgba(255,255,255,.35) !important; filter: none; } .lkeq-knob.is-off .dot { fill: rgba(255,255,255,.6); filter: none; }
.lkeq-sl { margin-top: 12px; padding: 12px 14px 10px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.lkeq-sl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-weight: 600; font-size: 13.5px; } .lkeq-sl-h i { color: #f9a8d4; margin-right: 9px; } .lkeq-sl-h b { color: #fff; font-variant-numeric: tabular-nums; } .lkeq-sl-h b.is-neg { color: #ff7aa8; }
.lkeq-hs { --p: 50%; position: relative; display: block; height: 20px; cursor: pointer; touch-action: none; }
.lkeq-hs .tk { position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; } .lkeq-hs .fl { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: linear-gradient(90deg, #ff2d78, #c026d3, #a855f7); box-shadow: 0 0 10px rgba(255,45,120,.8); }
.lkeq-hs .th { position: absolute; top: 50%; left: var(--p); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,45,120,.25), 0 0 14px rgba(255,45,120,.9), 0 3px 8px rgba(0,0,0,.5); }
.lkeq-hs.sm { height: 16px; } .lkeq-hs.sm .th { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.lkeq-lim { margin-top: 12px; grid-template-columns: 34px minmax(0, 1fr) auto; padding: 10px 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important; border-radius: 14px; }
/* ---- barre de lecture ---- */
.lkeq-ft { display: grid; grid-template-columns: 52px minmax(120px, 220px) auto minmax(160px, 1fr) auto auto; align-items: center; gap: 16px; margin: 0 16px 14px; padding: 10px 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.lkeq-cv { width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg, #3b0f4f, #1a0b2e) center / cover no-repeat; box-shadow: 0 6px 16px -6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1); }
.lkeq-cv.is-empty { background-image: linear-gradient(135deg, rgba(255,45,120,.5), rgba(124,58,237,.55)); }
.lkeq-ti { min-width: 0; } .lkeq-ti b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lkeq-ti small { display: block; font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lkeq-tr { display: flex; align-items: center; gap: 12px; }
.lkeq-tr button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: rgba(255,255,255,.88); } .lkeq-tr button:hover { background: rgba(255,255,255,.08); } .lkeq-tr button:disabled { opacity: .35; cursor: default; }
.lkeq-tr button.is-on { color: var(--pk); }
.lkeq-tr .pp { width: 50px; height: 50px; font-size: 17px; color: #fff; background: radial-gradient(circle at 50% 35%, rgba(255,45,120,.35), rgba(255,45,120,.08)); box-shadow: inset 0 0 0 2px #ff2d78, 0 0 22px -2px rgba(255,45,120,.85); } .lkeq-tr .pp:hover { background: radial-gradient(circle at 50% 35%, rgba(255,45,120,.55), rgba(255,45,120,.15)); }
.lkeq-pg { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lkeq-pgb { --p: 0%; position: relative; flex: 1 1 auto; height: 18px; cursor: pointer; touch-action: none; }
.lkeq-pgb::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(255,255,255,.12); }
.lkeq-pgb .fl { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: var(--p); border-radius: 4px; background: linear-gradient(90deg, #ff2d78, #e639c7); box-shadow: 0 0 10px rgba(255,45,120,.8); }
.lkeq-pgb .th { position: absolute; top: 50%; left: var(--p); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255,45,120,.95); }
.lkeq-tm { font-size: 12px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lkeq-vol { display: flex; align-items: center; gap: 10px; } .lkeq-vol button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; } .lkeq-vol button:hover { background: rgba(255,255,255,.08); }
.lkeq-vol .lkeq-hs { width: 110px; } .lkeq-vol b { min-width: 42px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.lkeq-ftr button { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; } .lkeq-ftr button.is-on { color: #fff; background: rgba(255,45,120,.18); box-shadow: inset 0 0 0 1px rgba(255,90,160,.85), 0 0 18px -6px rgba(255,45,120,.9); }
/* coupé (contourné) */
.lkeq.is-off .lkeq-bands, .lkeq.is-off .lkeq-fxs, .lkeq.is-off .lkeq-ad .lkeq-sl, .lkeq.is-off .lkeq-cards { opacity: .45; filter: saturate(.5); }
/* coin de redimensionnement */
.lkeq-rs { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 58%, transparent 58%, transparent 70%, rgba(255,255,255,.28) 70%, rgba(255,255,255,.28) 78%, transparent 78%); border-radius: 0 0 20px 0; }
.lkeq.is-max .lkeq-rs { display: none; }
/* fenêtres plus étroites */
@media (max-width: 1360px) { .lkeq-brand b, .lkeq-sep { display: none; } .lkeq-tabs button { padding: 0 12px; } }
@media (max-width: 1180px) { .lkeq-tt small { display: none; } .lkeq-tabs button { font-size: 0; gap: 0; width: 40px; justify-content: center; padding: 0; } .lkeq-tabs button i { font-size: 15px; } .lkeq-bd { grid-template-columns: 200px minmax(0, 1fr) 256px; } .lkeq-b label { font-size: 9px; } .lkeq-b output { min-width: 0; font-size: 10px; padding: 2px 4px; } }
/* téléphone : plein écran */
@media (max-width: 760px) {
  .lkeq { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100dvh !important; min-width: 0; min-height: 0; border-radius: 0; }
  .lkeq-hd { cursor: default; flex-wrap: wrap; gap: 10px; } .lkeq-brand, .lkeq-sep, .lkeq-tt small { display: none; } .lkeq-tabs { order: 3; width: 100%; overflow-x: auto; } .lkeq-tabs button { font-size: 12.5px; width: auto; padding: 0 12px; gap: 6px; } .lkeq-rs { display: none; }
  .lkeq-bd { grid-template-columns: 1fr; overflow-y: auto; } .lkeq-pl { flex-direction: row; overflow-x: auto; } .lkeq-p { flex: 0 0 auto; width: auto; }
  .lkeq-mn { min-height: 560px; } .lkeq-bands { overflow-x: auto; grid-template-columns: repeat(20, 40px); } .lkeq-cards, .lkeq-cards.is-3, .lkeq-master, .lkeq-stats { grid-template-columns: 1fr; }
  .lkeq-ft { grid-template-columns: 44px minmax(0, 1fr) auto; } .lkeq-pg, .lkeq-vol, .lkeq-ftr { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lkeq, .lkeq-live.on i { animation: none; } }
/* bouton « EQ » dans la barre du lecteur */
.lk-ap-act-eq.is-on .lk-ap-act-ico { color: #ff3d7f; } .lk-ap-act-eq.is-on .lk-ap-act-ico i { filter: drop-shadow(0 0 6px rgba(255,45,120,.8)); }
.lykhubs-audioplayer-modal:not(.is-expanded) .lk-ap-act-eq .lk-ap-act-label { display: none; }

/* libellés des bandes : « 20 Hz » / « 1,6 kHz » quand il y a la place, sinon « 20 » / « 1,6k » ; pastilles plus petites */
.lkeq-b label small.k { display: none; }
@container (max-width: 980px) { .lkeq-b label small { display: none; } .lkeq-b label small.k { display: inline; } .lkeq-b output { min-width: 0; font-size: 10px; padding: 2px 4px; } }
@container (max-width: 720px) { .lkeq-b output { font-size: 9px; padding: 2px 2px; letter-spacing: -.03em; } .lkeq-b label { font-size: 9.5px; } .lkeq-vs .th { width: 24px; margin-left: -12px; } }

/* Cadres des toiles (scène stéréo, vumètres) : taille donnée par la carte, la toile s'y place sans la pousser */
.lkeq-cvw { position: relative; flex: 1 1 auto; align-self: stretch; min-height: 160px; display: block; }
.lkeq-cvw canvas { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.lkeq-card canvas { flex: none; }
/* Textes affinés (14/11/2026) */
.lkeq { font-size: 12px; }
.lkeq-brand img { width: 28px; height: 28px; } .lkeq-brand b { font-size: 17px; }
.lkeq-tt b { font-size: 15px; gap: 7px; } .lkeq-pro { font-size: 10px; padding: 1px 7px; } .lkeq-tt small { font-size: 10.5px; }
.lkeq-tabs { padding: 4px; } .lkeq-tabs button { height: 32px; padding: 0 13px; font-size: 12.5px; font-weight: 500; gap: 8px; } .lkeq-tabs button i { font-size: 12px; }
.lkeq-win button { width: 32px; height: 30px; font-size: 12.5px; }
.lkeq-h { font-size: 13.5px; margin-bottom: 12px; } .lkeq-h > i { font-size: 13px; }
.lkeq-p { height: 38px; gap: 10px; } .lkeq-p .pn { font-size: 12.5px; font-weight: 500; } .lkeq-p .pi { font-size: 13px; flex-basis: 22px; }
.lkeq-mybtn { height: 38px; font-size: 12.5px; font-weight: 500; }
.lkeq-seg button { height: 30px; font-size: 12px; font-weight: 500; padding: 0 12px; } .lkeq-live, .lkeq-dd > button, .lkeq-sq { height: 30px; font-size: 11.5px; } .lkeq-sq { width: 30px; }
.lkeq-fx { grid-template-columns: 30px minmax(0, 1fr) auto 46px; gap: 8px; padding: 7px 5px; } .lkeq-fx-ic { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
.lkeq-fx-l { font-size: 12px; font-weight: 500; } .lkeq-fx-l small { font-size: 10px; }
.lkeq-sw { width: 38px; height: 21px; } .lkeq-sw::after { width: 15px; height: 15px; } .lkeq-sw[aria-checked="true"]::after { transform: translateX(17px); }
.lkeq-knob:not(.is-big) svg { width: 46px; height: 46px; } .lkeq-knob b { font-size: 9px; font-weight: 600; } .lkeq-knob.is-big b { font-size: 17px; }
.lkeq-sl { padding: 10px 12px 8px; } .lkeq-sl-h { font-size: 12px; font-weight: 500; margin-bottom: 8px; } .lkeq-sl-h b { font-weight: 600; }
.lkeq-card-h b { font-size: 13px; font-weight: 600; } .lkeq-card p { font-size: 11px; }
.lkeq-b output { font-size: 10px; font-weight: 600; } .lkeq-b label { font-size: 9.5px; font-weight: 500; }
.lkeq-stats b { font-size: 15px; } .lkeq-stats small { font-size: 10.5px; }
.lkeq-ti b { font-size: 13px; font-weight: 500; } .lkeq-ti small { font-size: 11px; } .lkeq-tm, .lkeq-vol b { font-size: 11px; }
.lkeq-tr .pp { width: 44px; height: 44px; font-size: 15px; } .lkeq-tr button { width: 32px; height: 32px; font-size: 13px; } .lkeq-cv { width: 46px; height: 46px; } .lkeq-ft { grid-template-columns: 46px minmax(120px, 220px) auto minmax(160px, 1fr) auto auto; padding: 8px 12px; }
/* Curseurs des bandes, façon maquette (14/11/2026) : rail fin éclairé du bas jusqu'au curseur, petit curseur blanc lumineux,
   rose au-dessus de 0, violet en dessous, magenta à 0 ; pastilles fines au liseré coloré */
.lkeq-vs { --c: #d63bd8; --cg: rgba(214,59,216,.55); width: 26px; }
.lkeq-vs.is-up { --c: #ff2d78; --cg: rgba(255,45,120,.6); } .lkeq-vs.is-dn { --c: #9b5cff; --cg: rgba(155,92,255,.6); }
.lkeq-vs .rl { width: 4px; margin-left: -2px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.lkeq-vs .fl, .lkeq-vs.is-up .fl, .lkeq-vs.is-dn .fl { bottom: 6px; width: 4px; margin-left: -2px; height: calc((100% - 12px) * var(--f)); border-radius: 4px;
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 25%, transparent), var(--c)); box-shadow: 0 0 10px var(--cg), 0 0 2px var(--c); }
.lkeq-vs .th, .lkeq-vs.is-dn .th { width: 22px; height: 10px; margin: 0 0 -5px -11px; border-radius: 5px; background: linear-gradient(180deg, #fff, #f1e6ff);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 12px var(--cg), 0 2px 6px rgba(0,0,0,.55); }
.lkeq-vs:hover .th, .lkeq-vs:focus-visible .th { transform: scale(1.12); }
.lkeq-vs::after { display: none; }
.lkeq-b output, .lkeq-b output.up, .lkeq-b output.dn { min-width: 34px; padding: 2px 6px; font-size: 10px; font-weight: 600; border-radius: 999px; background: rgba(20,8,32,.6); color: #e9d5ff; box-shadow: inset 0 0 0 1px rgba(168,85,247,.55); }
.lkeq-b output.up { color: #ffd6e6; box-shadow: inset 0 0 0 1px rgba(255,60,140,.85), 0 0 10px -4px rgba(255,45,120,.9); }
.lkeq-b output.dn { color: #e4dcff; box-shadow: inset 0 0 0 1px rgba(155,92,255,.85), 0 0 10px -4px rgba(155,92,255,.9); }
@container (max-width: 980px) { .lkeq-b output, .lkeq-b output.up, .lkeq-b output.dn { min-width: 0; padding: 2px 4px; font-size: 9.5px; } }