/* Page Mix : console verticale (SSL / Logic). Reste dans la teinte bleue du site. */
.mixpage{display:none}
body.view-mix.loaded .ws{display:none}
body.view-mix.loaded .mixpage{display:flex;flex-direction:column;gap:10px;padding:10px 14px;height:calc(100vh - 66px);height:calc(100dvh - 66px)}
.mx-top{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap}
.mx-top h2{margin:0 6px 0 4px;font-size:20px}
.mx-hint{font-size:12px;max-width:520px;line-height:1.3}
.mx-body{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto clamp(320px,26vw,400px);gap:10px}
.mx-strips{display:flex;gap:5px;overflow:auto;padding:2px 2px 0;min-width:0;align-items:stretch}
.mx-master{display:flex;overflow-y:auto;min-height:0}

/* tranche */
.cs{--th:200;flex:0 0 126px;display:flex;flex-direction:column;gap:6px;padding:0 7px 9px;border:1px solid oklch(0.3 0.04 var(--h));border-radius:12px;min-height:min-content;
  background:linear-gradient(180deg,oklch(0.235 0.03 var(--h)),oklch(0.17 0.03 var(--h)));
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .07),0 8px 22px #0006}
.cs.master{flex-basis:168px;border-color:oklch(0.5 0.1 var(--h))}
.cs.sel{border-color:oklch(0.8 0.14 var(--th));box-shadow:inset 0 1px 0 oklch(1 0 0 / .08),0 0 0 1px oklch(0.8 0.14 var(--th)),0 10px 28px oklch(0.5 0.15 var(--th) / .3)}
.cs.mutedst>.mx-sec,.cs.mutedst>.fdwrap{opacity:.45}
.cs-head{display:block;position:relative;margin:0 -7px;padding:9px 8px 7px;border:0;border-bottom:1px solid oklch(0.3 0.04 var(--h));border-radius:12px 12px 0 0;background:transparent;text-align:left;color:var(--text);cursor:pointer;min-width:0}
.cs-bar{position:absolute;left:0;right:0;top:0;height:4px;border-radius:12px 12px 0 0;background:oklch(0.76 0.15 var(--th))}
.cs-nm{display:block;font:700 13px var(--display,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-ty{display:block;font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* sections sérigraphiées */
.mx-sec{position:relative;display:grid;gap:5px;padding:14px 6px 6px;border:1px solid oklch(0.29 0.03 var(--h));border-radius:9px;background:oklch(0.14 0.025 var(--h) / .55)}
.mx-sn{position:absolute;top:3px;left:7px;font:700 8.5px var(--display,inherit);letter-spacing:.14em;color:oklch(0.65 0.05 var(--h))}
.mx-sec .row{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0}
.mx-sec .row.k3,.mx-sec .row.k2{justify-content:space-around}
.mx-sec .row.eqb{border-top:1px solid oklch(0.26 0.03 var(--h));padding-top:4px}
.mx-sec .row.eqb b{width:26px;font:700 9px var(--display,inherit);letter-spacing:.04em}
.mx-sec .row.pan{justify-content:center;gap:6px}
.lr{font:800 13px var(--display,inherit);color:var(--mute)}
.eqmini{width:100%;height:44px;border-radius:6px;background:oklch(0.1 0.025 var(--h));display:block;border:1px solid oklch(0.26 0.03 var(--h))}

/* interrupteurs à LED */
.sw{display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border-radius:6px;border:1px solid oklch(0.32 0.04 var(--h));background:linear-gradient(180deg,oklch(0.27 0.03 var(--h)),oklch(0.2 0.03 var(--h)));color:var(--mute);font:700 9px var(--display,inherit);letter-spacing:.05em;cursor:pointer;white-space:nowrap}
.sw .led{width:7px;height:7px;border-radius:50%;background:oklch(0.3 0.03 var(--h));box-shadow:inset 0 0 2px #000}
.sw.on{color:var(--text);border-color:var(--c)}
.sw.on .led{background:var(--c);box-shadow:0 0 8px var(--c)}

/* potards */
.kn{--c:var(--accent);display:grid;justify-items:center;gap:1px;touch-action:none;cursor:ns-resize;user-select:none;flex:none}
.kd{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.kd::before{content:"";position:absolute;inset:3.5px;border-radius:50%;background:radial-gradient(circle at 34% 28%,oklch(0.5 0.03 var(--h)),oklch(0.2 0.025 var(--h)) 70%);box-shadow:0 2px 4px #000a,inset 0 1px 0 oklch(1 0 0 / .18)}
.kd i{position:absolute;inset:0;display:block}
.kd i::after{content:"";position:absolute;left:50%;top:6px;width:2.5px;height:9px;margin-left:-1.25px;border-radius:2px;background:#fff;box-shadow:0 0 5px var(--c)}
.kn.big .kd{width:46px;height:46px}.kn.big .kd i::after{top:8px;height:12px;width:3px}
.kn.act .kd{filter:brightness(1.25)}
.kl{font:600 8.5px var(--body,inherit);color:var(--mute);letter-spacing:.02em;line-height:1}
.kv{font:600 9.5px var(--body,inherit);font-style:normal;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1;min-height:11px}
.row.k3 .kd{width:30px;height:30px}.row.k3 .kd i::after{top:5px;height:8px}

/* réduction de gain */
.grm{flex:1;height:7px;border-radius:4px;background:oklch(0.1 0.025 var(--h));overflow:hidden;display:flex;justify-content:flex-end}
.grm i{display:block;height:100%;width:0;background:#ffb454;border-radius:4px}

/* fader + vumètre LED */
.fdwrap{flex:1 1 0;min-height:150px;display:flex;justify-content:center;padding:6px 0 0}
.fd{position:relative;display:flex;gap:6px;align-items:stretch;height:100%;touch-action:none;cursor:ns-resize}
.fd-sc{display:flex;flex-direction:column;justify-content:space-between;font:600 8.5px var(--body,inherit);color:var(--mute);text-align:right;padding:4px 0}
.fd-sc i{font-style:normal}
.fd-m{width:9px;border-radius:5px;background:oklch(0.09 0.02 var(--h));display:flex;align-items:flex-end;overflow:hidden;
  -webkit-mask:repeating-linear-gradient(0deg,#000 0 3px,transparent 3px 4px);mask:repeating-linear-gradient(0deg,#000 0 3px,transparent 3px 4px)}
.fd-m i{display:block;width:100%;height:0;background:linear-gradient(0deg,oklch(0.78 0.17 155),oklch(0.86 0.17 100) 72%,oklch(0.66 0.23 25))}
.fd-tr{position:relative;width:12px;border-radius:6px;background:linear-gradient(90deg,#02060e,oklch(0.2 0.03 var(--h)));box-shadow:inset 0 0 0 1px oklch(0.3 0.04 var(--h))}
.fd-cap{position:absolute;left:50%;width:34px;height:26px;margin-left:-17px;border-radius:5px;
  background:linear-gradient(180deg,oklch(0.55 0.03 var(--h)),oklch(0.3 0.03 var(--h)) 48%,oklch(0.24 0.03 var(--h)) 52%,oklch(0.38 0.03 var(--h)));box-shadow:0 3px 8px #000b,inset 0 1px 0 oklch(1 0 0 / .25)}
.fd-cap::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;margin-top:-1px;background:oklch(0.85 0.14 var(--th));box-shadow:0 0 6px oklch(0.85 0.14 var(--th))}
.cs.auto .fd-tr{opacity:.55}
.fdv{text-align:center;font:700 12px var(--body,inherit);font-variant-numeric:tabular-nums;padding:3px 0;border-radius:6px;background:oklch(0.1 0.025 var(--h))}
.cs-ms{display:flex;justify-content:center;gap:6px;align-items:center}
.cs-ms button{width:40px;height:28px;border-radius:7px;border:1px solid oklch(0.32 0.04 var(--h));background:linear-gradient(180deg,oklch(0.27 0.03 var(--h)),oklch(0.2 0.03 var(--h)));font-weight:800;color:var(--mute);cursor:pointer}
.cs-m.on{background:oklch(0.7 0.18 40);color:#120d24;border-color:transparent}
.cs-s.on{background:oklch(0.86 0.17 95);color:#120d24;border-color:transparent}
.lufs select{width:100%;padding:5px;font-size:11px;border-radius:7px;border:1px solid var(--line);background:oklch(0.12 0.025 var(--h));color:var(--text)}

/* inspecteur */
.mx-insp{display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-width:0}
.mx-insp h3{margin:2px 2px 0;font:700 18px var(--display,inherit)}.mx-insp>p{margin:0 2px}
.mx-card{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:10px}
.mx-ch{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:6px;flex-wrap:wrap}.mx-ch b{font-size:14px}.mx-ch .muted{font-size:11px}
#mx-eq{width:100%;height:250px;display:block;border-radius:10px;background:oklch(0.11 0.025 var(--h));touch-action:none}
#mx-comp{width:100%;height:170px;display:block;border-radius:10px;background:oklch(0.11 0.025 var(--h))}
.eqtab{display:grid;gap:3px;margin-top:8px;font-size:12px}
.eqtab .th,.eqtab .tr{display:grid;grid-template-columns:42px 1fr 1fr 1fr;gap:6px;align-items:center}
.eqtab .th{color:var(--mute);font-size:10.5px}
.eqtab input{width:100%;padding:5px 6px;border-radius:7px;border:1px solid var(--line);background:oklch(0.13 0.025 var(--h));color:var(--text);font-variant-numeric:tabular-nums}
.eqtab b{font:700 11px var(--display,inherit)}

@media (max-width:1100px){
  body.view-mix.loaded{overflow:auto}
  body.view-mix.loaded .mixpage{height:auto}
  .mx-body{grid-template-columns:1fr}
  .mx-strips{max-height:none}
  .mx-hint{display:none}
}

.kn.nl .kl{display:none}
.kd{width:30px;height:30px}.kd i::after{top:5px;height:8px}
.eqmini{height:36px;width:100%}
.mx-sec{padding:13px 6px 5px;gap:4px}
.mx-sec .row.eqb{padding-top:3px}
.fdwrap{min-height:130px}

.cs{padding-bottom:0}
.cs-bot{position:sticky;bottom:0;z-index:2;margin:auto -7px 0;padding:10px 7px 9px;display:flex;flex-direction:column;gap:6px;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,oklch(0.17 0.03 var(--h) / 0),oklch(0.17 0.03 var(--h)) 16px)}
.cs-bot .fdwrap{flex:none;height:150px;min-height:0}
.cs-bot .mx-sec{background:oklch(0.14 0.025 var(--h))}
.mx-sec .row:not(.eqb):not(.k3):not(.k2):not(.pan) .kn.nl{grid-auto-flow:column;align-items:center;gap:5px}
.mx-sec .row:not(.eqb):not(.k3):not(.k2):not(.pan) .kn.nl .kd{width:26px;height:26px}
.mx-sec .row:not(.eqb):not(.k3):not(.k2):not(.pan) .kn.nl .kd i::after{top:4px;height:7px}
.row.eqb .kd{width:27px;height:27px}.row.eqb .kd i::after{top:4px;height:7px}
.row.k3 .kd,.row.k2 .kd{width:27px;height:27px}.row.k3 .kd i::after,.row.k2 .kd i::after{top:4px;height:7px}

.mx-sec .row:not(.eqb):not(.k3):not(.k2):not(.pan) .kn.nl .kv{display:none}
@media (max-width:1100px){
  .mx-body{flex:none;display:flex;flex-direction:column}
  .mx-strips{height:82vh;flex:none}
  .mx-master{flex:none;height:82vh}
  .mx-insp{overflow:visible}
}