/* ==========================================================================
   Labo TX-1 : deux platines TX-1 + table de mixage (page privée)
   Dessin des platines repris du simulateur (échelle 3 px = 1 mm)
   v22 (19/10/2026, demande de Ben) : page refaite (en-tête, cartes, compétitions), anglais / français
   ========================================================================== */
:root {
  --bg: #0b0c0d; --panel: #121518; --panel2: #171b1f; --ink: #e7eaed; --muted: #9aa2ab; --dim: #6d7780; --line: #262b30; --line2: #343b42;
  --accent: #7cc6d9; --copper: #d98a5b; --gold: #e6c27a; --gold2: #f2c94c; --green: #6fdc8c; --red: #e0705f; --r: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "IBM Plex Sans", system-ui, sans-serif; }
body { background: radial-gradient(1200px 500px at 50% -200px, #1c1a16 0%, transparent 70%), var(--bg); min-height: 100vh; overflow-x: hidden; }
[hidden] { display: none !important; }
canvas { display: block; }
a { color: inherit; }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; font: 600 11px "IBM Plex Mono", monospace; text-align: center; color: var(--ink); background: #1d2227; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; }

/* ---------- En-tête : marque, profil, mode expert, langue, aide ---------- */
.lab-top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; max-width: 1800px; margin: 0 auto; padding: 16px 20px 12px; }
.lab-brand .eyebrow { font: 600 12px "Barlow Condensed", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); }
.lab-brand h1 { margin: 0; font: 700 36px/1 "Barlow Condensed", sans-serif; letter-spacing: .03em; }
.lab-brand h1 b { color: var(--copper); }
.lab-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lab-me { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 38px; padding: 6px 14px; font-size: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
.lab-me-k { font: 600 11px "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lab-me-link { font-size: 12px; color: var(--muted); text-underline-offset: 2px; }
.lab-me-link:hover { color: #fff; }
.lab-me-btn { font-weight: 600; color: var(--gold); text-decoration: none; }
.lab-me-btn:hover { text-decoration: underline; }
.expert-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 14px; font: 600 13px "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; user-select: none; }
.expert-switch input { width: 34px; height: 18px; margin: 0; appearance: none; -webkit-appearance: none; position: relative; background: #2a343b; border-radius: 999px; cursor: pointer; transition: background .2s; }
.expert-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #cfe6ee; border-radius: 50%; transition: transform .2s; }
.expert-switch input:checked { background: var(--copper); }
.expert-switch input:checked::after { transform: translateX(16px); }
.expert-switch input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.expert .expert-switch { color: #fff; border-color: var(--copper); box-shadow: 0 0 16px rgba(217,138,91,.25); }
.lang { display: inline-flex; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
.lang button { min-width: 38px; height: 30px; padding: 0 10px; font: 600 12px "IBM Plex Mono", monospace; color: var(--muted); background: none; border: 0; border-radius: 999px; cursor: pointer; }
.lang button.is-on { color: #0d0e0d; background: var(--ink); }
.lab-help-btn { min-height: 38px; padding: 6px 14px; font: 500 13px "IBM Plex Sans", sans-serif; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.lab-help-btn::before { content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; font: 700 11px "IBM Plex Mono", monospace; color: #0d0e0d; background: var(--muted); border-radius: 50%; }
.lab-help-btn.is-on { border-color: var(--line2); background: var(--panel2); }
.lab-help { max-width: 1800px; margin: 0 auto 12px; padding: 0 20px; }
.help-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.help-grid > div { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.help-grid h3 { margin: 0 0 4px; font: 700 15px "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.help-grid p { margin: 0; font-size: 13px; color: var(--muted); }
.help-grid b { color: var(--ink); }
.help-grid .keys { line-height: 2; }

/* Console : 2 platines (900 px) + table (390 px), mise à l'échelle de la fenêtre */
.stage { position: relative; width: 100%; max-width: 2300px; margin: 0 auto; padding: 0 12px; }
.console { position: absolute; left: 12px; top: 0; width: 2214px; height: 711px; display: grid; grid-template-columns: 900px 390px 900px; gap: 12px; transform-origin: 0 0; user-select: none; -webkit-user-select: none; touch-action: none; }

/* ---------- Platine TX-1 ---------- */
.device { position: relative; width: 900px; height: 711px; }
.chassis { position: absolute; inset: 0; border-radius: 24px; background: #191b1e; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.05) inset; }
.plate { position: absolute; inset: 0; border-radius: 24px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(180deg, #2c3034, #24272b 60%, #202326); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 3px rgba(0,0,0,.25); }
.silk { position: absolute; transform: translate(-50%, -50%); font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #aab1b8; font-size: 12px; white-space: nowrap; pointer-events: none; }
.silk.brand { font-size: 17px; letter-spacing: .3em; color: #d7dce0; }
.silk.brand b { color: #d9925f; font-weight: 700; }
.deck-letter { position: absolute; left: 92px; top: 46px; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 700 26px "Barlow Condensed", sans-serif; color: #0d0e0d; background: #d9925f; pointer-events: none; }

.bezel { position: absolute; left: 48px; top: 108px; width: 660px; height: 417px; border-radius: 6px; background: #050607; box-shadow: 0 0 0 1px #3a3f44, 0 1px 0 1px rgba(255,255,255,.06); }
.panel { position: absolute; left: 4.5px; top: 5px; width: 651px; height: 407px; background: #020304; overflow: hidden; }
.display { position: absolute; left: 0; top: 15.7px; width: 780px; height: 450px; transform: scale(.8346); transform-origin: 0 0; background: #06080a; overflow: hidden; color: #e8eef2; font-family: "IBM Plex Sans", sans-serif; }
.display.drop { box-shadow: inset 0 0 0 4px #d9925f; }
.hdr { height: 70px; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; border-bottom: 1px solid #1b2228; background: #0b0f12; }
.hdr .meta { min-width: 0; }
.hdr .ttl { font-size: 23px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 470px; line-height: 1.2; }
.hdr .art { font-size: 15px; color: #8fa3ae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 470px; }
.hdr .tempo { display: flex; align-items: center; gap: 16px; }
.icons { display: flex; flex-direction: column; gap: 3px; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .06em; color: #51606a; text-align: right; }
.icons .on { color: #7cc6d9; } .icons .mt.on { color: #6fe0b0; }
.bpmbox { text-align: right; border-left: 1px solid #1f282e; padding-left: 16px; }
.bpm { font: 600 34px/1 "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.bpmlab { font: 500 11px "IBM Plex Mono", monospace; color: #6d8290; letter-spacing: .1em; }
.pct { font: 500 13px "IBM Plex Mono", monospace; color: #d9925f; font-variant-numeric: tabular-nums; }
.pct.zero { color: #6d8290; }
.pctlab { display: none; font: 500 11px "IBM Plex Mono", monospace; color: #6d8290; letter-spacing: .1em; }

/* Mode expert : plus de BPM du titre en lecture, le pourcentage de pitch devient l'affichage principal */
.expert .bpm, .expert .bpmlab { display: none; }
.expert .pctlab { display: block; margin-bottom: 4px; }
.expert .pct { font: 600 30px/1 "IBM Plex Mono", monospace; }


/* Mode expert : écran de la platine en ambre (on voit d'un coup d'œil que le mode concours est actif) */
.expert .display { background: #0d0805; color: #f6e2cf; }
.expert .hdr { background: #160d07; border-bottom-color: #3a2213; }
.expert .hdr .art, .expert .crumb, .expert .pctlab { color: #b98a66; }
.expert .pct, .expert .pct.zero { color: #ffb070; }
.expert .bpmbox { border-left-color: #3a2213; }
.expert .display canvas { filter: hue-rotate(195deg) saturate(1.15); } /* forme d'onde et grille : bleu → ambre */
.expert .bezel { box-shadow: 0 0 0 1px #6b3f22, 0 0 18px rgba(217, 138, 91, .25); }
.view { position: absolute; left: 0; right: 0; top: 70px; bottom: 0; }
.times { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 6px; }
.t { font: 600 26px "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.t.rem { color: #d9925f; }
.tlab { font: 500 10px "IBM Plex Mono", monospace; color: #5d707c; letter-spacing: .14em; display: block; }
.chips { display: flex; gap: 8px; }
.chip { font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .12em; padding: 4px 10px; border-radius: 3px; border: 1px solid #2a3740; color: #8fa3ae; }
.chip.play { border-color: #3aa37a; color: #6fe0b0; } .chip.bendc { border-color: #d9925f; color: #f0b184; } .chip.cue { border-color: #e0a13a; color: #f5c26b; }
.chip.loop { border-color: #3aa37a; color: #8ff0c4; background: #0f2a20; } .chip.jog { border-color: #7cc6d9; color: #9fe3f2; } .chip.load { border-color: #7cc6d9; color: #9fe3f2; }
.zoom { width: 780px; height: 210px; }
.over { width: 744px; height: 52px; margin: 12px 18px 0; cursor: pointer; }
.vPlayer.jog .times { width: 426px; flex-wrap: wrap; }
.vPlayer.jog .chips { order: 3; width: 100%; justify-content: center; margin-top: 4px; }
.vPlayer.jog .zoom { width: 426px; height: 180px; }
.vPlayer.jog .over { width: 390px; }
.vPlayer.jog .foot { right: 354px; }
.jogc { position: absolute; left: 439px; top: 23px; width: 336px; height: 336px; touch-action: none; cursor: grab; }
.jogc:active { cursor: grabbing; }
.jogmode { position: absolute; z-index: 2; left: 713px; top: 5px; display: flex; flex-direction: column; gap: 2px; }
.jogmode button, .jogbtn { font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .1em; color: #4f616c; background: #0b0f12; border: 1px solid #1b2228; cursor: pointer; padding: 0; }
.jogmode button { width: 61px; height: 24px; border-radius: 4px; }
.jogmode button.on, .jogbtn.on { background: #16414d; border-color: #7cc6d9; color: #e8eef2; }
.jogbtn { position: absolute; z-index: 2; right: 12px; bottom: 4px; width: 75px; height: 27px; border-radius: 5px; color: #8fa3ae; }
.foot { position: absolute; left: 18px; right: 110px; bottom: 10px; display: flex; justify-content: space-between; font: 500 11px "IBM Plex Mono", monospace; color: #4f616c; letter-spacing: .06em; }
.empty-msg { position: absolute; inset: 60px 40px 80px; display: grid; place-items: center; text-align: center; font: 500 16px "IBM Plex Mono", monospace; color: #5d707c; line-height: 1.7; }
.crumb { padding: 12px 18px 8px; font: 500 12px "IBM Plex Mono", monospace; color: #6d8290; letter-spacing: .06em; display: flex; justify-content: space-between; }
.list { margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: 34px 1fr 62px 86px; align-items: center; height: 40px; padding: 0 18px; border-top: 1px solid #10171c; cursor: pointer; }
.row .n { font: 500 12px "IBM Plex Mono", monospace; color: #4f616c; }
.row .tt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.row .tt span { color: #7b8f9b; font-size: 13px; margin-left: 8px; }
.row .d { font: 500 13px "IBM Plex Mono", monospace; color: #7b8f9b; text-align: right; }
.row .b { font: 600 17px "IBM Plex Mono", monospace; text-align: right; color: #cfe6ee; font-variant-numeric: tabular-nums; }
.row.sel { background: #16414d; box-shadow: inset 3px 0 0 #7cc6d9; }
.row.loaded .n { color: #6fe0b0; }
.toast { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); background: #12303a; border: 1px solid #2e6676; color: #cfe6ee; font: 500 13px "IBM Plex Mono", monospace; padding: 6px 14px; border-radius: 3px; white-space: nowrap; z-index: 5; }

.hw { position: absolute; cursor: pointer; }
.usb { left: 60px; top: 22px; width: 160px; height: 50px; pointer-events: none; }
.usb .flange { position: absolute; left: 4px; top: -6px; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle, #1a1c1f 60%, #101113); box-shadow: inset 0 0 0 2px #3c4146; }
.ck { position: absolute; width: 52px; height: 50px; margin: -25px 0 0 -26px; border-radius: 5px; cursor: pointer; background: linear-gradient(#34383d, #26292d); box-shadow: 0 3px 0 #0b0c0e, inset 0 0 0 1px #4a5157; }
.ck.pressed, .ck:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b0c0e, inset 0 0 0 1px #7cc6d9; }
.ck.on { box-shadow: 0 3px 0 #0b0c0e, inset 0 0 0 1px #58e0a0, 0 0 12px rgba(88,224,160,.45); }
.led3 { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #1d3a2c; }
.led3.on { background: #6fe0b0; box-shadow: 0 0 8px #6fe0b0; }
.pitchcol { position: absolute; left: 747px; top: 219px; width: 138px; height: 324px; }
.slot { position: absolute; left: 64px; top: 6px; width: 12px; height: 312px; border-radius: 6px; background: #07080a; box-shadow: inset 0 0 0 1px #3c4248; cursor: ns-resize; }
.scale { position: absolute; left: 15px; top: 6px; width: 44px; height: 312px; }
.scale i { position: absolute; right: 0; height: 1px; background: #6e767d; }
.scale span { position: absolute; right: 16px; transform: translateY(-50%); font: 600 11px "Barlow Condensed", sans-serif; color: #9aa2a9; letter-spacing: .05em; }
.thumb { position: absolute; left: 34px; width: 72px; height: 42px; margin-top: -21px; border-radius: 5px; cursor: grab; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 6px), linear-gradient(180deg, #5f666d, #3b4046 50%, #2c3035); box-shadow: 0 6px 10px rgba(0,0,0,.5), inset 0 0 0 1px #737b83; }
.thumb::after { content: ""; position: absolute; left: 6px; right: 6px; top: 20px; height: 2px; background: #e8a06a; border-radius: 1px; }
.zeroled { position: absolute; left: 116px; top: 158px; width: 9px; height: 9px; border-radius: 50%; background: #2a2112; }
.zeroled.on { background: #6fe0b0; box-shadow: 0 0 8px #6fe0b0; }
.bend { position: absolute; width: 63px; height: 72px; margin: -36px 0 0 -31.5px; border-radius: 7px; cursor: pointer; background: linear-gradient(#3d4248, #2a2e33); box-shadow: 0 3px 0 #0b0c0e, inset 0 0 0 1px #555c63; color: #dfe4e8; font: 600 30px/72px "Barlow Condensed", sans-serif; text-align: center; }
.bend.pressed { transform: translateY(2px); box-shadow: 0 1px 0 #0b0c0e, inset 0 0 0 1px #d9925f, 0 0 14px rgba(217,146,95,.35); }
.keyv { font: 600 26px/1 "IBM Plex Mono", monospace; color: #c4a0ff; text-align: center; }
.keyn { font: 500 11px "IBM Plex Mono", monospace; color: #6d8290; text-align: center; letter-spacing: .06em; }
.big { position: absolute; width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 45% 38%, #474d54, #2b2f34 62%, #1f2226); box-shadow: 0 5px 0 #0a0b0c, 0 10px 18px rgba(0,0,0,.45), inset 0 0 0 1px #5c636a; display: grid; place-items: center; }
.big .ring { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid #2a2a26; pointer-events: none; }
.big .lbl { font: 700 20px "Barlow Condensed", sans-serif; letter-spacing: .14em; color: #e2e6ea; }
.big.cue .ring.on { border-color: #f0a53c; box-shadow: 0 0 14px rgba(240,165,60,.55); }
.big.play .ring.on { border-color: #58e0a0; box-shadow: 0 0 14px rgba(88,224,160,.5); }
.big.cue .ring.dim { border-color: #6a4c20; }
.big:active, .big.pressed { transform: translateY(3px); box-shadow: 0 2px 0 #0a0b0c, inset 0 0 0 1px #5c636a; }
.enc { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; cursor: ns-resize; touch-action: none; background: repeating-conic-gradient(from 0deg, #15171a 0 4deg, #2c3035 4deg 8deg); box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 0 2px #0b0c0e; }
.enc .cap { position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle at 42% 36%, #666d74, #3a3f45 55%, #262a2e); box-shadow: inset 0 0 0 1px #7a828a; }
.enc .mark { position: absolute; left: 50%; top: 6px; width: 4px; height: 15px; margin-left: -2px; border-radius: 2px; background: #e8a06a; }
.enc.pressed .cap { inset: 14px; }

/* ---------- Table de mixage ---------- */
.mixer { position: relative; width: 390px; height: 711px; border-radius: 24px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(180deg, #2c3034, #24272b 60%, #202326); box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 3px rgba(0,0,0,.25); padding: 22px 18px; }
.mx-title { text-align: center; font: 600 15px "Barlow Condensed", sans-serif; letter-spacing: .3em; color: #d7dce0; text-transform: uppercase; }
.mx-title b { color: #d9925f; }
.mx-cols { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 6px; margin-top: 12px; }
.mx-ch { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mx-ch .chname { font: 700 22px "Barlow Condensed", sans-serif; color: #d9925f; }
.knob { position: relative; width: 58px; height: 58px; cursor: ns-resize; touch-action: none; }
.knob .k { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 42% 36%, #666d74, #3a3f45 55%, #262a2e); box-shadow: 0 4px 8px rgba(0,0,0,.5), inset 0 0 0 1px #7a828a; }
.knob .k::after { content: ""; position: absolute; left: 50%; top: 3px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: #e8a06a; }
.knob .arc { position: absolute; inset: 0; border-radius: 50%; }
.knob-l { font: 600 11px "Barlow Condensed", sans-serif; letter-spacing: .16em; color: #aab1b8; text-transform: uppercase; margin-top: -2px; }
.knob.kill .k { box-shadow: 0 0 0 2px #e05555, 0 4px 8px rgba(0,0,0,.5); }
.mx-meters { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 34px; }
.vu { width: 12px; height: 200px; border-radius: 3px; background: #07080a; box-shadow: inset 0 0 0 1px #3c4248; position: relative; overflow: hidden; }
.vu i { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 0; background: linear-gradient(0deg, #58e0a0 0 65%, #f2d36b 65% 85%, #e05555 85%); border-radius: 2px; }
.vu-pair { display: flex; gap: 5px; }
.fader { position: relative; width: 44px; height: 150px; margin-top: 6px; touch-action: none; cursor: ns-resize; }
.fader .slot2 { position: absolute; left: 19px; top: 8px; bottom: 8px; width: 6px; border-radius: 3px; background: #07080a; box-shadow: inset 0 0 0 1px #3c4248; }
.fader .cap2 { position: absolute; left: 2px; width: 40px; height: 26px; margin-top: -13px; border-radius: 4px; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 6px), linear-gradient(180deg, #5f666d, #3b4046 50%, #2c3035); box-shadow: 0 5px 8px rgba(0,0,0,.5), inset 0 0 0 1px #737b83; }
.fader .cap2::after { content: ""; position: absolute; left: 5px; right: 5px; top: 12px; height: 2px; background: #e8e8e8; }
.xfader { position: relative; height: 44px; margin: 14px 26px 0; touch-action: none; cursor: ew-resize; }
.xfader .slot2 { position: absolute; top: 19px; left: 8px; right: 8px; height: 6px; border-radius: 3px; background: #07080a; box-shadow: inset 0 0 0 1px #3c4248; }
.xfader .cap2 { position: absolute; top: 2px; width: 26px; height: 40px; margin-left: -13px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 2px, transparent 2px 6px), linear-gradient(90deg, #5f666d, #3b4046 50%, #2c3035); box-shadow: 0 5px 8px rgba(0,0,0,.5), inset 0 0 0 1px #737b83; }
.xfader .cap2::after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 12px; width: 2px; background: #e8e8e8; }
.xlab { display: flex; justify-content: space-between; margin: 2px 26px 0; font: 700 16px "Barlow Condensed", sans-serif; color: #d9925f; }
.mx-master { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }

/* Filtre séparé de l'EQ pour ne pas le confondre avec LOW */
.mx-ch .knob[data-k="filter"] { margin-top: 18px; }
.mx-ch .knob[data-k="filter"]::before { content: ""; position: absolute; left: -14px; right: -14px; top: -12px; height: 1px; background: #3c4248; }

/* ==========================================================================
   Page : cartes (bibliothèque + coach côte à côte, compétitions, historique, explications)
   ========================================================================== */
.lab-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; max-width: 1800px; margin: 16px auto 0; padding: 0 20px; align-items: start; }
.card { max-width: 1800px; margin: 16px auto 0; padding: 16px 18px; background: linear-gradient(180deg, #14171a, #111316); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.7); }
.lab-main .card { margin: 0; }
.comp, .hist, .how { width: calc(100% - 40px); }
.how { margin-bottom: 40px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; }
.card h2 { margin: 0; font: 700 22px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.card-sub { font-size: 13px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font: 500 13px "IBM Plex Sans", sans-serif; color: var(--ink); text-decoration: none; background: #1b2025; border: 1px solid var(--line2); border-radius: 8px; cursor: pointer; }
.btn:hover { border-color: #56606a; }
.btn-ghost { background: none; color: var(--muted); }
.btn-gold { font-weight: 600; color: #0d0e0d; background: var(--gold); border-color: var(--gold); }
.btn-gold:hover { background: #f0d08f; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
/* Onglets segmentés */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: #0d0f11; border: 1px solid var(--line); border-radius: 10px; }
.seg button { padding: 6px 12px; font: 600 12px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: none; border: 0; border-radius: 7px; cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button.is-on { color: #0d0e0d; background: var(--gold); }
.seg button.seg-t { text-transform: none; letter-spacing: .02em; }
.seg button.seg-t.is-live:not(.is-on) { color: var(--gold); }
.seg-sm button { padding: 4px 10px; }
/* Tableaux : défilement horizontal dans leur cadre (jamais toute la page) */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl, .lib-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .lib-table th { padding: 7px 10px; text-align: left; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td, .lib-table td { padding: 9px 10px; border-bottom: 1px solid #1b1f23; white-space: nowrap; }
.tbl tbody tr:hover td, .lib-table tbody tr:hover td { background: #161a1e; }

/* ---------- Bibliothèque ---------- */
.lib-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lib-bar input[type=search] { flex: 1; min-width: 180px; padding: 10px 12px; font: inherit; color: #fff; background: #0d0f11; border: 1px solid var(--line2); border-radius: 8px; }
.lib-bar input[type=search]:focus { outline: none; border-color: var(--copper); }
.lib-bar label.file { padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--ink); background: #1b2025; border: 1px solid var(--line2); border-radius: 8px; cursor: pointer; }
.lib-bar label.file:hover { border-color: #56606a; }
.lib-bar label.file input { display: none; }
.lib-bar .file[hidden] { display: none; }
.lib-note { margin: 8px 0; color: var(--muted); font-size: 12px; }
.lib-scroll { max-height: 420px; overflow: auto; border-top: 1px solid var(--line); }
.lib-scroll thead th { position: sticky; top: 0; background: #131619; z-index: 1; }
.lib-table td:first-child { max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.lib-table td:nth-child(2) { max-width: 160px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.lib-table .ab { text-align: right; }
.lib-table button { margin-left: 4px; width: 34px; height: 28px; font: 700 14px "Barlow Condensed", sans-serif; color: #0d0e0d; background: var(--copper); border: 0; border-radius: 6px; cursor: pointer; }
.lib-table button:hover { background: #eba274; }
.lib-table .src { font: 500 11px "IBM Plex Mono", monospace; color: #7b8f9b; white-space: normal; }
.lib-table a { color: #fff; }
.lib-bought { color: #8fd18f; font-weight: 700; }

/* ---------- Coach : direct, résultat ---------- */
.coach-live { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; min-height: 64px; padding: 14px 16px; font-size: 14px; color: var(--muted); background: #0e1113; border: 1px solid var(--line); border-radius: var(--r); }
.coach-live.is-on { color: var(--ink); border-color: #3a4249; }
.coach-live.is-holding { border-color: #c9a227; }
.coach-live.is-locked { border-color: #3aa37a; box-shadow: 0 0 0 1px #3aa37a inset; }
.coach-live.is-expert { border-color: var(--copper); }
.coach-steps { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.coach-steps li { counter-increment: st; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.coach-steps li::before { content: counter(st); display: grid; place-items: center; flex: none; width: 22px; height: 22px; font: 700 12px "IBM Plex Mono", monospace; color: #0d0e0d; background: var(--copper); border-radius: 50%; }
.coach-dir { font: 700 15px "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); }
.coach-clock { font: 600 24px "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; color: #fff; }
.coach-clock.is-paused { color: #f1d36b; }
.coach-clock.is-synced { color: #8ff0c4; }
.coach-hint { color: var(--muted); }
.coach-val { display: inline-flex; flex-direction: column; font: 600 16px "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; color: #fff; }
.coach-val small { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.coach-meter { position: relative; width: 220px; max-width: 100%; height: 14px; background: linear-gradient(90deg, #3a1d1d, #2a2f34 38%, #1f3b30 47%, #1f3b30 53%, #2a2f34 62%, #3a1d1d); border-radius: 7px; }
.coach-meter b { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #8ff0c4; }
.coach-meter i { position: absolute; top: -4px; width: 4px; height: 22px; margin-left: -2px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,.6); }
.coach-state { font-weight: 600; }
.coach-warn { padding: 3px 8px; font: 600 12px "IBM Plex Mono", monospace; color: #f1d36b; border: 1px solid #6b5a22; border-radius: 4px; }
.coach-live.is-locked .coach-state { color: #8ff0c4; }
.coach-live.is-holding .coach-state { color: #f1d36b; }
.coach-result { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 12px; padding: 16px 18px; background: #0e1113; border: 1px solid #3a4249; border-radius: var(--r); }
.coach-result.is-fail { color: #f0b3a5; border-color: #6b3a32; }
.coach-grade { width: 64px; height: 64px; display: grid; place-items: center; font: 700 40px/1 "Barlow Condensed", sans-serif; color: #0d0e0d; background: var(--copper); border-radius: 50%; }
.grade-S .coach-grade { background: #f3d36b; box-shadow: 0 0 24px rgba(243,211,107,.35); } .grade-A .coach-grade { background: #8ff0c4; } .grade-B .coach-grade { background: #7cc6d9; } .grade-C .coach-grade { background: #d98a5b; } .grade-D .coach-grade { background: #b0646a; }
.coach-score b { font: 700 44px/1 "IBM Plex Mono", monospace; color: #fff; }
.coach-score small { font: 500 16px "IBM Plex Mono", monospace; color: var(--muted); margin-left: 2px; }
.coach-score span { display: block; font: 600 11px "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.coach-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; font: 600 15px "IBM Plex Mono", monospace; color: #fff; }
.coach-facts span { display: inline-flex; flex-direction: column; }
.coach-facts small { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.coach-facts em { font-style: normal; font-size: 12px; color: var(--muted); }
.coach-x { color: var(--copper); letter-spacing: .1em; }
.coach-unranked { flex-basis: 100%; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.coach-unranked a { color: #fff; }
.coach-sent { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: #e6a23c; }
.coach-sent.is-ok { color: var(--green); }
.coach-set-titles { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.coach-idx { font: 600 14px "IBM Plex Mono", monospace; }
.g { display: inline-block; min-width: 18px; padding: 0 4px; font: 700 12px "Barlow Condensed", sans-serif; text-align: center; color: #0d0e0d; border-radius: 3px; background: var(--copper); }
.g-S { background: #f3d36b; } .g-A { background: #8ff0c4; } .g-B { background: #7cc6d9; } .g-D { background: #b0646a; }
.coach-tt { max-width: 340px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.coach-empty { color: var(--muted); text-align: center; padding: 18px !important; white-space: normal !important; }
.coach-muted { color: var(--muted); }
.coach-ok { color: var(--green); font-weight: 700; }
/* Profils : artiste pro vérifié (doré), joueur (gris), étiquettes, lien Instagram */
.coach-pro { color: var(--gold2); }
.coach-player { color: #a5abb1; }
.coach-tag { margin-left: 2px; padding: 1px 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; font-size: 10px; letter-spacing: .04em; color: #9aa0a6; white-space: nowrap; }
.coach-soc { display: inline-block; margin-left: 4px; padding: 1px 5px; font: 700 10px/1.4 "IBM Plex Mono", monospace; color: var(--muted); text-decoration: none; border: 1px solid var(--line2); border-radius: 3px; vertical-align: 1px; }
.coach-soc:hover { color: #fff; border-color: #6a737b; }

/* ---------- Compétitions ---------- */
.comp { border-color: #3a3220; background: linear-gradient(180deg, #17150f, #111316 220px); }
.comp .card-head h2 { color: var(--gold); }
.comp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 14px; padding: 12px 16px; background: #1d1910; border: 1px solid #5a4a26; border-radius: var(--r); }
.comp-cta p { margin: 0; font-size: 14px; }
.comp-cta.is-closed { background: #121518; border-style: dashed; border-color: var(--line2); color: var(--muted); }
.comp-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; font: inherit; color: var(--ink); text-align: left; background: #121417; border: 1px solid var(--line2); border-radius: 12px; cursor: pointer; transition: border-color .15s, transform .15s; }
.tile:hover { border-color: #6a5a34; transform: translateY(-1px); }
.tile.is-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 10px 30px -18px rgba(230,194,122,.6); }
.tile-k { font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.tile-t { font-size: 14px; font-weight: 600; }
.tile-bar { height: 4px; margin: 6px 0 2px; background: #23282d; border-radius: 2px; overflow: hidden; }
.tile-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--copper), var(--gold)); }
.tile-left { font: 500 12px "IBM Plex Mono", monospace; color: var(--muted); }
.tile-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 6px; font-size: 13px; }
.tile-lead small { flex-basis: 100%; font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tile-sc { font: 600 13px "IBM Plex Mono", monospace; color: #fff; }
.tile-me { align-self: flex-start; margin-top: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600; color: #0d0e0d; background: var(--gold); border-radius: 999px; }
.comp-feat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.feat-k { margin-right: 4px; color: var(--muted); }
.feat-k b { color: var(--gold); }
.chip-link { padding: 4px 10px; color: var(--ink); text-decoration: none; background: #1a1d21; border: 1px solid var(--line2); border-radius: 999px; }
a.chip-link:hover { border-color: var(--gold); color: #fff; }
.comp-tours { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 14px; }
.tour { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #121417; border: 1px solid var(--line2); border-radius: 12px; }
.tour.is-live { border-color: #5a4a26; background: linear-gradient(180deg, #1b1810, #121417); }
.tour.is-on { box-shadow: 0 0 0 1px var(--gold) inset; }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour h3 { margin: 2px 0 0; font: 700 19px "Barlow Condensed", sans-serif; letter-spacing: .03em; }
.tour p { margin: 0; font-size: 13px; color: var(--muted); }
.tour .tour-prize { color: var(--ink); }
.tour .tour-mode b, .tour .tour-win { color: var(--ink); }
.tour a { color: var(--gold); }
.tour .btn { align-self: flex-start; margin-top: 4px; }
.tour-when { font: 500 12px "IBM Plex Mono", monospace; color: var(--muted); }
.pill { padding: 2px 9px; font: 700 11px "Barlow Condensed", sans-serif; letter-spacing: .14em; border-radius: 999px; }
.pill-live { color: #0d0e0d; background: var(--green); }
.pill-live::before { content: "● "; animation: blink 1.6s infinite; }
.pill-soon { color: #0d0e0d; background: var(--accent); }
.pill-ended { color: var(--muted); border: 1px solid var(--line2); }
@keyframes blink { 50% { opacity: .3; } }
.board { margin-top: 18px; }
.board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.board-note { margin: 10px 0 6px; font-size: 12px; color: var(--muted); }
.board-note a { color: var(--gold); }
.board-scroll.is-all { max-height: 480px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.board-scroll.is-all thead th { position: sticky; top: 0; background: #121417; }
.board .rank { width: 40px; font: 600 14px "IBM Plex Mono", monospace; }
.board tr.is-top td { background: rgba(230,194,122,.035); }
.board tr.is-me td { background: #2a2414; color: #fff; }
.board-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-size: 13px; }
.hall { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.hall-k { margin-bottom: 8px; font: 700 14px "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hall-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hall-chip { display: inline-flex; flex-direction: column; padding: 8px 12px; background: #121417; border: 1px solid var(--line2); border-radius: 10px; }
.hall-chip small { font-size: 11px; color: var(--muted); }
.hall-chip b { font-size: 15px; }
.hall-chip .coach-soc { align-self: flex-start; margin: 4px 0 0; }
.hall-y { border-color: #7a6326; background: linear-gradient(180deg, #221d10, #121417); }
.hall-y b { color: var(--gold2); }
.hall-note { margin: 10px 0 0; font-size: 12px; color: var(--dim); }

/* ---------- Historique, explications ---------- */
.hist-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hist-note { margin: 10px 0 0; font-size: 12px; color: var(--dim); }
.coach-how summary { cursor: pointer; font: 700 16px "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }
.how-grid h4 { margin: 0 0 6px; font: 700 14px "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.how-grid p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.how-grid b { color: var(--ink); }

/* ---------- Écrans moyens et téléphones ---------- */
@media (max-width: 1180px) {
  .lab-main { grid-template-columns: minmax(0, 1fr); }
  .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lab-top { padding: 12px 16px 10px; }
  .lab-brand h1 { font-size: 30px; }
  .lab-tools { width: 100%; }
  .lab-me { width: 100%; border-radius: 10px; }
  .lab-main, .lab-help { padding: 0 16px; }
  .comp, .hist, .how { width: calc(100% - 32px); }
  .card { padding: 14px; border-radius: 12px; }
  .help-grid { grid-template-columns: 1fr; }
  .comp-hero { grid-template-columns: 1fr; }
  .comp-tours { grid-template-columns: 1fr; }
  .coach-live { gap: 8px 14px; }
  .coach-score b { font-size: 36px; }
  .coach-tt { max-width: 180px; }
  .board-head { align-items: stretch; }
  .seg { max-width: 100%; }
}

/* ---------- Démo automatique (v23) ---------- */
.lab-demo-btn { min-height: 38px; padding: 6px 16px; font: 600 13px "IBM Plex Sans", sans-serif; color: #0d0e0d; background: var(--gold); border: 1px solid var(--gold); border-radius: 999px; cursor: pointer; }
.lab-demo-btn:hover { background: #f0d08f; }
.coach-demo { margin-left: auto; }
.demo-bar { position: fixed; left: 50%; bottom: 16px; z-index: 50; width: min(720px, calc(100% - 24px)); transform: translateX(-50%); padding: 14px 18px; background: rgba(18, 16, 11, .96); border: 1px solid #7a6326; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.demo-top { display: flex; align-items: center; gap: 10px; }
.demo-k { font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.demo-n { font: 500 12px "IBM Plex Mono", monospace; color: var(--muted); }
.demo-dots { display: flex; gap: 4px; margin-left: auto; }
.demo-dots i { width: 18px; height: 4px; background: #3a3424; border-radius: 2px; }
.demo-dots i.on { background: var(--gold); }
.demo-t { margin: 6px 0 2px; font: 700 22px "Barlow Condensed", sans-serif; letter-spacing: .03em; }
.demo-p { margin: 0; font-size: 14px; color: #d4d0c6; }
.demo-p b { color: #fff; }
.demo-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.demo-end { display: block; margin-top: 8px; }
/* commande mise en lumière (dans la console, mise à l'échelle) */
.demo-hl { outline: 6px solid var(--gold) !important; outline-offset: 6px; border-radius: 10px; animation: demoPulse 1.4s ease-in-out infinite; }
@keyframes demoPulse { 50% { outline-color: rgba(230,194,122,.25); } }
.demo-on .lab-main, .demo-on .comp, .demo-on .hist, .demo-on .how { opacity: .45; }
@media (max-width: 760px) { .demo-t { font-size: 18px; } .demo-p { font-size: 13px; } .demo-bar { bottom: 8px; padding: 12px 14px; } }
.coach-run { flex-basis: 100%; margin: 0 0 4px; font-size: 13px; color: var(--ink); }
.coach-run b { color: var(--gold); }

/* ==========================================================================
   Vue « mix mobile » (v25, d'après la capture de Ben) : deux colonnes verticales côte à côte, B en miroir de A
   ========================================================================== */
.mob { display: none; }
html.is-mob .stage { display: none; }
html.is-mob .mob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "coach coach" "a b" "xf xf"; gap: 6px; height: var(--mvh, 100svh); padding: 6px; user-select: none; -webkit-user-select: none; }
html.is-mob .lab-help { margin-bottom: 8px; }
.mmix-coach { grid-area: coach; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 12px; min-height: 30px; padding: 4px 8px; font: 500 12px "IBM Plex Mono", monospace; color: var(--ink); text-align: center; background: #101214; border: 1px solid var(--line); border-radius: 10px; }
.mmix-coach b { color: #fff; } .mmix-coach .ok { color: #8ff0c4; font-weight: 700; } .mmix-coach .dim { color: var(--muted); font-family: "IBM Plex Sans", sans-serif; font-size: 11px; }
.mcol { display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 0; padding: 7px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px), linear-gradient(180deg, #2a2e32, #1d2024); border: 1px solid #3a4046; border-radius: 12px; }
.mcol[data-deck="A"] { grid-area: a; } .mcol[data-deck="B"] { grid-area: b; }
.mcol-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mdeck-l { display: grid; place-items: center; flex: none; width: 24px; height: 24px; font: 700 15px "Barlow Condensed", sans-serif; color: #0d0e0d; background: var(--copper); border-radius: 50%; }
.mdeck-load { flex: none; width: 30px; height: 26px; padding: 0; font-size: 14px; color: var(--ink); background: #0d0f11; border: 1px solid var(--line2); border-radius: 7px; }
.mdeck-tt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.15; }
.mdeck-tt b, .mdeck-tt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdeck-tt b { font-size: 12px; }
.mdeck-tt small { font-size: 10px; color: var(--muted); }
.mdeck-info { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; font: 600 12px "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.mdeck-pct { font-size: 17px; color: #d9925f; }
.mdeck-pct.zero { color: #8a9aa5; }
.expert .mdeck-pct, .expert .mdeck-pct.zero { color: #ffb070; }
.mdeck-rem { font-size: 11px; color: #d9925f; }
.mdeck-bpm { min-height: 13px; margin-top: -4px; font: 500 11px "IBM Plex Mono", monospace; color: #9fb5c0; }
.mdeck-wave { display: flex; flex-direction: column; gap: 2px; }
.mdeck-wave canvas { width: 100%; height: clamp(26px, 6svh, 46px); border-radius: 4px; background: #06080a; }
.mdeck-wave .mdeck-over { height: 11px; }
.expert .mdeck-wave canvas { filter: hue-rotate(195deg) saturate(1.15); }
/* faders : pitch (grand, gradué) + volume avec vumètre ; B en miroir */
.mcol-faders { display: flex; gap: 6px; flex: 1; min-height: 0; }
.mcol[data-deck="B"] .mcol-faders { flex-direction: row-reverse; }
.mpitch { display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex: 1; min-width: 0; min-height: 0; }
.mpitch-r { height: 24px; font: 600 11px "IBM Plex Mono", monospace; color: var(--muted); background: #0d0f11; border: 1px solid var(--line2); border-radius: 6px; }
.mpitch-body { position: relative; display: flex; flex: 1; min-height: 100px; }
.mpitch-scale { position: relative; width: 28px; flex: none; margin: 18px 0; }
.mcol[data-deck="B"] .mpitch-body { flex-direction: row-reverse; }
.mpitch-scale i { position: absolute; right: 0; width: 6px; height: 1px; background: #8a9299; }
.mpitch-scale i.mj { width: 10px; }
.mpitch-scale span { position: absolute; right: 12px; transform: translateY(-50%); font: 600 10px "IBM Plex Mono", monospace; color: #c3c9ce; }
.mcol[data-deck="B"] .mpitch-scale i { right: auto; left: 0; }
.mcol[data-deck="B"] .mpitch-scale span { right: auto; left: 12px; }
.mpitch-track { position: relative; flex: 1; touch-action: none; background: #24272b; border: 1px solid #3a4046; border-radius: 8px; }
.mpitch-track::before { content: ""; position: absolute; left: 50%; top: 18px; bottom: 18px; width: 6px; margin-left: -3px; background: #07080a; border-radius: 3px; box-shadow: inset 0 0 0 1px #3c4248; }
.mpitch-led { position: absolute; left: -2px; top: 50%; width: 8px; height: 14px; margin-top: -7px; background: #1d3a2c; border-radius: 3px; }
.mcol[data-deck="B"] .mpitch-led { left: auto; right: -2px; }
.mpitch-led.on { background: #6fe0b0; box-shadow: 0 0 10px #6fe0b0, 0 0 18px rgba(111,224,176,.6); }
.mpitch-thumb { position: absolute; left: 4px; right: 4px; top: 50%; height: 36px; margin-top: -18px; border-radius: 6px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 6px), linear-gradient(180deg, #e6e9ec, #a9afb5 45%, #7d848b 55%, #c9ced2); box-shadow: 0 6px 10px rgba(0,0,0,.55), inset 0 0 0 1px #5f666d; }
.mpitch-thumb::after { content: ""; position: absolute; left: 6px; right: 6px; top: 17px; height: 2px; background: #2c3035; }
.mpitch-lab, .mvol-lab { font: 600 10px "Barlow Condensed", sans-serif; letter-spacing: .16em; color: var(--muted); text-align: center; }
.mvol { display: flex; flex-direction: column; gap: 4px; width: 38px; flex: none; }
.mvol-lab { height: 24px; line-height: 24px; }
.mvol-track { position: relative; flex: 1; min-height: 100px; background: #050607; border: 1px solid #2a2f34; border-radius: 6px; touch-action: none; overflow: hidden; }
.mvol-vu { position: absolute; left: 6px; right: 6px; top: 2px; bottom: 2px; background: linear-gradient(0deg, #58e0a0 0 65%, #f2d36b 65% 85%, #e05555 85%); border-radius: 2px; opacity: .85; clip-path: inset(calc((1 - var(--l, 0)) * 100%) 0 0 0); } /* vumètre : seule la partie allumée est visible */
.mvol-thumb { position: absolute; left: 2px; right: 2px; height: 26px; margin-top: -13px; top: calc(18px + (1 - var(--v, 1)) * (100% - 36px)); border-radius: 5px; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 6px), linear-gradient(180deg, #5f666d, #3b4046 50%, #2c3035); box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 0 0 1px #8a9299; pointer-events: none; }
.mvol-thumb::after { content: ""; position: absolute; left: 5px; right: 5px; top: 12px; height: 2px; background: #e8e8e8; }
.mvol { --v: 1; }
/* boutons : pitch bend − / +, CUE / PLAY */
.mcol-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mbtn, .mbend { white-space: nowrap; height: clamp(44px, 8svh, 64px); font: 700 17px "Barlow Condensed", sans-serif; letter-spacing: .1em; color: #e2e6ea; background: #121417; border: 2px solid #c9ced2; border-radius: 999px; box-shadow: inset 0 0 0 4px #121417, inset 0 0 0 30px #1d2024; touch-action: none; }
.mbend { font-size: 26px; letter-spacing: 0; }
.mbtn.mplay { font-size: 22px; }
.mbtn.mcue.on { border-color: #f0a53c; box-shadow: inset 0 0 0 4px #121417, inset 0 0 0 30px #2a1f10, 0 0 12px rgba(240,165,60,.45); color: #f5c26b; }
.mbtn.mplay.on { border-color: #58e0a0; box-shadow: inset 0 0 0 4px #121417, inset 0 0 0 30px #10261c, 0 0 12px rgba(88,224,160,.4); color: #8ff0c4; }
.mbtn.pressed, .mbend.pressed { transform: translateY(2px); border-color: #d9925f; }
.mcol.is-loading .mdeck-wave { opacity: .4; }
/* crossfader */
.mxf { grid-area: xf; display: flex; align-items: center; gap: 8px; padding: 2px 10px; background: #101214; border: 1px solid var(--line); border-radius: 10px; }
.mmix-k { font: 700 14px "Barlow Condensed", sans-serif; color: #d9925f; }
.mfader { position: relative; flex: 1; height: 40px; touch-action: none; }
.mfader::before { content: ""; position: absolute; left: 18px; right: 18px; top: 18px; height: 4px; background: #07080a; border-radius: 2px; box-shadow: inset 0 0 0 1px #3c4248; }
.mfader i { position: absolute; top: 4px; left: calc(18px + var(--v, .5) * (100% - 36px)); width: 30px; height: 32px; margin-left: -15px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 2px, transparent 2px 6px), linear-gradient(90deg, #8a6a4a, #5a4330 50%, #3b2c20); box-shadow: 0 4px 8px rgba(0,0,0,.5), inset 0 0 0 1px #9a7a5a; }
/* feuille de chargement (bibliothèque) */
.msheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: rgba(0,0,0,.55); }
.msheet-in { display: flex; flex-direction: column; width: 100%; max-height: 75svh; padding: 14px 14px 18px; background: #15181b; border-top: 1px solid var(--line2); border-radius: 16px 16px 0 0; }
.msheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 15px; }
.msheet-in input { padding: 10px 12px; font: inherit; color: #fff; background: #0d0f11; border: 1px solid var(--line2); border-radius: 8px; }
.msheet-in ul { margin: 8px 0 0; padding: 0; list-style: none; overflow: auto; }
.msheet-in li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 6px; border-bottom: 1px solid #1d2125; }
.msheet-in li span { display: flex; flex-direction: column; min-width: 0; }
.msheet-in li b, .msheet-in li small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msheet-in li small { font-size: 12px; color: var(--muted); }
.msheet-in li em { font: 600 13px "IBM Plex Mono", monospace; font-style: normal; color: #cfe6ee; }
.msheet-in li.msheet-empty { display: block; color: var(--muted); font-size: 13px; }
.msheet-in li a { color: var(--gold); }
/* démo sur téléphone : barre plus petite, en haut */
html.is-mob .demo-bar { top: 6px; bottom: auto; padding: 8px 12px; }
html.is-mob .demo-t { font-size: 15px; margin-top: 2px; }
html.is-mob .demo-p { font-size: 12px; }
html.is-mob .demo-btns { margin-top: 6px; }
html.is-mob .demo-btns .btn { padding: 4px 10px; font-size: 12px; }
html.is-mob .demo-hl { outline-width: 3px; outline-offset: 2px; }
/* paysage : mêmes colonnes, boutons un peu plus bas */
@media (orientation: landscape) {
  html.is-mob .mbtn, html.is-mob .mbend { height: clamp(36px, 12svh, 52px); }
  html.is-mob .mcol-btns { grid-template-columns: repeat(4, 1fr); }
  html.is-mob .mdeck-wave canvas { height: clamp(22px, 9svh, 40px); }
}

/* ---------- Vue mobile v26 (demandes de Ben) : barre de boutons, coach en bas, panneaux plein écran, écran fixé pendant le mix ---------- */
html.is-mob .mob { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "tools tools" "a b" "coach coach"; }
html.is-mob .lab-main, html.is-mob .comp, html.is-mob .hist, html.is-mob .how, html.is-mob .lab-help, html.is-mob #help-btn, html.is-mob .lab-demo-btn { display: none; }
html.is-mob .mpanel .comp, html.is-mob .mpanel .hist, html.is-mob .mpanel .how, html.is-mob .mpanel .lab-help, html.is-mob .mpanel .coach { display: block; width: auto; margin: 0 0 12px; padding: 0; }
.mtools { grid-area: tools; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mtools button { height: 38px; padding: 0 4px; font: 600 12px "IBM Plex Sans", sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #15181b; border: 1px solid var(--line2); border-radius: 10px; }
.mtools .mtools-demo { color: #0d0e0d; background: var(--gold); border-color: var(--gold); }
.mcoach { grid-area: coach; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 12px; min-height: 52px; padding: 6px 10px; font: 500 12px "IBM Plex Mono", monospace; color: var(--ink); text-align: center; background: #0e1113; border: 1px solid #3a4249; border-radius: 12px; }
.mcoach b { color: #fff; } .mcoach .ok { color: #8ff0c4; font-weight: 700; } .mcoach .dim { color: var(--muted); font: 12px "IBM Plex Sans", sans-serif; }
.mcoach .mc-k { font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); }
.mcoach .mc-clock { font-weight: 600; color: #fff; }
.mcoach .mc-grade { display: inline-grid; place-items: center; width: 30px; height: 30px; font: 700 18px "Barlow Condensed", sans-serif; color: #0d0e0d; background: var(--copper); border-radius: 50%; }
.mcoach .mc-grade.g-S { background: #f3d36b; } .mcoach .mc-grade.g-A { background: #8ff0c4; } .mcoach .mc-grade.g-B { background: #7cc6d9; } .mcoach .mc-grade.g-D { background: #b0646a; }
.mcoach .mc-sent { flex-basis: 100%; font: 12px "IBM Plex Sans", sans-serif; color: #e6a23c; } .mcoach .mc-sent.ok { color: var(--green); }
.mcoach .mc-more { font-size: 18px; color: var(--muted); }
/* bibliothèque : recherche + fichier du téléphone */
.msheet-tools { display: flex; gap: 8px; }
.msheet-tools input[type=search] { flex: 1; min-width: 0; }
.msheet-file { flex: none; white-space: nowrap; }
.msheet-file input { display: none; }
.msheet-file[hidden] { display: none; }
.msheet-in li small i.lib-bought { font-style: normal; }
/* panneaux plein écran (compétitions, historique, aide, coach) */
.mpanel { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--bg); }
.mpanel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font: 700 18px "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.mpanel-b { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 30px; }
.mpanel-b .card-head h2 { font-size: 18px; }
html.m-panel body { overflow: hidden; }
/* pendant le mix : vue fixée plein écran, sans défilement ni barre de boutons */
html.m-lock body { overflow: hidden; }
html.is-mob.m-lock .mob { position: fixed; inset: 0; z-index: 40; height: 100%; background: var(--bg); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "a b" "coach coach"; }
html.is-mob.m-lock .mtools { display: none; }
@media (orientation: landscape) { html.is-mob .mtools button { height: 32px; } html.is-mob .mcoach { min-height: 40px; } }
.mpanel .card-head h2 { display: none; } /* le titre est déjà dans l’en-tête du panneau */

/* ---------- Ordinateur v27 : bibliothèque à gauche, coach + historique à droite (plus de grand vide), même hauteur ---------- */
.lab-main { align-items: stretch; }
.lab-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lab-side .card, .lab-side .hist { width: auto; margin: 0; }
.lab-side .hist { flex: 1; }
.lab-main > .lib { display: flex; flex-direction: column; }
.lab-main > .lib .lib-scroll { flex: 1 1 0; min-height: 320px; max-height: none; }
.mcoach .mc-meter { flex-basis: 100%; display: flex; justify-content: center; }
.mcoach .mc-meter .coach-meter { width: 100%; max-width: 320px; }
.hall-n { display: flex; align-items: center; gap: 4px; } /* nom + IG sur une ligne */
html.is-mob .mob { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } .mcoach { padding-bottom: 8px; } /* aiguille jamais collée au bord (iPhone : barre du bas) */

/* ---------- v28 : coach centré (ordinateur), aides / BPM masquables ---------- */
.coach .coach-live { justify-content: center; text-align: center; min-height: 112px; padding: 18px 20px; gap: 12px 28px; }
.coach .coach-live.is-on .coach-meter { flex-basis: 100%; max-width: 420px; margin: 4px auto; } /* ligne 1 : sens + chrono + tempo + écart ; ligne 2 : aiguille ; ligne 3 : état */
.coach .coach-live.is-on .coach-state, .coach .coach-live.is-on .coach-hint { flex-basis: 100%; }
.coach .coach-live .coach-dir { font-size: 16px; }
.coach .coach-live .coach-clock { font-size: 34px; line-height: 1; }
.coach .coach-live .coach-val { align-items: center; font-size: 18px; }
.coach .coach-live .coach-meter { width: min(420px, 100%); height: 16px; }
.coach .coach-live .coach-state { font-size: 15px; }
.coach .coach-steps { justify-content: center; }
.coach .coach-run { text-align: center; }
.coach .coach-demo { margin: 4px auto 0; }
.coach .coach-result { justify-content: center; text-align: left; }
.coach-live.is-hidden-hints { border-color: #4a5560; }
.coach-hints { padding: 4px 10px; font: 500 12px "IBM Plex Sans", sans-serif; color: var(--muted); background: #0d0f11; border: 1px solid var(--line2); border-radius: 999px; cursor: pointer; }
.coach-hints:hover { color: #fff; border-color: #56606a; }
.coach-live.is-on:not(.is-expert) { cursor: pointer; }
.bpmbox { cursor: pointer; }
.mdeck-bpm { display: block; min-height: 20px; padding: 2px 0; cursor: pointer; }

/* ---------- v29 (ordinateur) : plus de crossfader, ÉCRAN DU COACH en bas de la table de mixage ---------- */
.mixer .xfader, .mixer .xlab { display: none; }
.mx-cols { margin-top: 8px; }
.mx-ch { gap: 2px; }
.mx-ch .chname { font-size: 20px; line-height: 1; }
.knob { width: 48px; height: 48px; }
.knob .k { inset: 5px; }
.knob .k::after { top: 2px; height: 11px; }
.knob-l { font-size: 10px; margin-top: -1px; }
.mx-ch .knob[data-k="filter"] { margin-top: 10px; }
.mx-ch .knob[data-k="filter"]::before { top: -7px; }
.fader { height: 104px; margin-top: 14px; }
.mx-meters { padding-top: 26px; }
.vu { height: 170px; }
.mx-coach { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 150px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px 16px; padding: 10px 12px; font: 500 17px "IBM Plex Mono", monospace; color: #cfe6ee; text-align: center; background: #06080a; border: 1px solid #2a3740; border-radius: 10px; box-shadow: inset 0 0 0 3px #020304, 0 1px 0 rgba(255,255,255,.05); cursor: pointer; }
.mx-coach.is-on { border-color: #3a5a66; }
.mx-coach b { color: #fff; }
.mx-coach .mc-k { flex-basis: 100%; font: 700 16px "Barlow Condensed", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #d9925f; }
.mx-coach .mc-clock { font-size: 24px; font-weight: 600; color: #fff; }
.mx-coach .ok { color: #8ff0c4; font-weight: 700; }
.mx-coach .dim { font: 16px "IBM Plex Sans", sans-serif; color: #6d8290; }
.mx-coach .mc-meter { flex-basis: 100%; display: flex; justify-content: center; margin-top: 4px; }
.mx-coach .mc-meter .coach-meter { width: 100%; height: 16px; }
.mx-coach .mc-grade { display: inline-grid; place-items: center; width: 44px; height: 44px; font: 700 28px "Barlow Condensed", sans-serif; color: #0d0e0d; background: var(--copper); border-radius: 50%; }
.mx-coach .mc-grade.g-S { background: #f3d36b; } .mx-coach .mc-grade.g-A { background: #8ff0c4; } .mx-coach .mc-grade.g-B { background: #7cc6d9; } .mx-coach .mc-grade.g-D { background: #b0646a; }
.mx-coach .mc-sent { flex-basis: 100%; font: 14px "IBM Plex Sans", sans-serif; color: #e6a23c; } .mx-coach .mc-sent.ok { color: var(--green); }
.expert .mx-coach { background: #0d0805; border-color: #6b3f22; color: #f6e2cf; }
/* sous les platines : le direct est dans la table de mixage ; la carte du coach garde les étapes et la note détaillée */
html:not(.is-mob) .coach .coach-live.is-on { display: none; }

/* ---------- v30 (ordinateur) : carte du coach retirée (tout est dans la table) ; table de mixage aux codes des platines ---------- */
html:not(.is-mob) #coach { display: none; }
/* sérigraphie et métal des platines, un seul accent cuivré */
.mx-title { margin-top: 2px; font: 600 15px "Barlow Condensed", sans-serif; letter-spacing: .3em; color: #d7dce0; }
.mx-cols { position: relative; margin-top: 12px; }
.mx-ch { position: relative; padding: 0 2px; }
.mx-cols::before, .mx-cols::after { content: ""; position: absolute; top: 4px; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, #3c4248 12%, #3c4248 88%, transparent); box-shadow: 1px 0 0 rgba(255,255,255,.04); }
.mx-cols::before { left: calc(50% - 34px); } .mx-cols::after { left: calc(50% + 34px); }
.mx-ch .chname { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mx-ch .chname span { display: grid; place-items: center; width: 30px; height: 30px; font: 700 18px "Barlow Condensed", sans-serif; color: #0d0e0d; background: #d9925f; border-radius: 50%; }
.mx-ch[data-ch="B"] .chname { flex-direction: row-reverse; }
.onair { width: 9px; height: 9px; border-radius: 50%; background: #1d3a2c; } /* comme la LED du zéro du pitch */
.onair.on { background: #6fe0b0; box-shadow: 0 0 8px #6fe0b0; }
.knob .k { box-shadow: 0 0 0 3px #15171a, 0 4px 8px rgba(0,0,0,.55), inset 0 0 0 1px #7a828a; }
.knob-l { font: 600 10px "Barlow Condensed", sans-serif; letter-spacing: .16em; color: #aab1b8; }
.mx-master .knob-l { color: #d7dce0; }
/* vumètres à LED segmentées (vert / jaune / rouge, comme sur une table de mixage) */
.vu { background: repeating-linear-gradient(0deg, #11161a 0 4px, #07080a 4px 6px); }
.vu i { top: 2px; bottom: 2px; height: auto !important; clip-path: inset(calc((1 - var(--l, 0)) * 100%) 0 0 0); -webkit-mask: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 6px); mask: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 6px); border-radius: 0; }
/* faders de voie : même capuchon que le pitch des platines (trait cuivré), graduation */
.fader .fscale { position: absolute; left: 0; right: 0; top: 8px; bottom: 8px; pointer-events: none; background: repeating-linear-gradient(180deg, #6e767d 0 1px, transparent 1px 12.5%) left / 8px 100% no-repeat, repeating-linear-gradient(180deg, #6e767d 0 1px, transparent 1px 12.5%) right / 8px 100% no-repeat; }
.fader .cap2 { left: 4px; width: 36px; height: 24px; margin-top: -12px; border-radius: 5px; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 6px), linear-gradient(180deg, #5f666d, #3b4046 50%, #2c3035); box-shadow: 0 6px 10px rgba(0,0,0,.5), inset 0 0 0 1px #737b83; }
.fader .cap2::after { left: 6px; right: 6px; top: 11px; background: #e8a06a; }
/* écran du coach : comme l'écran des platines (lunette, fond noir, texte bleuté) */
.mx-coach { box-shadow: 0 0 0 1px #3a3f44, inset 0 0 0 3px #020304, 0 1px 0 1px rgba(255,255,255,.06); border-color: #050607; }
/* bibliothèque et historique à leur hauteur naturelle (la liste défile au-delà de 460 px) */
.lab-main { align-items: start; }
.lab-main > .lib .lib-scroll { flex: none; min-height: 0; max-height: 460px; }
.lab-side .hist { flex: none; }
/* v31 : GAIN séparé de l'égaliseur (marge + trait, comme au-dessus du FILTER) ; état des aides sur l'écran du coach */
.mx-ch .knob[data-k="high"] { margin-top: 12px; }
.mx-ch .knob[data-k="high"]::before { content: ""; position: absolute; left: -14px; right: -14px; top: -8px; height: 1px; background: #3c4248; }
.fader { height: 92px; }
.mx-coach .mc-hint { flex-basis: 100%; margin-top: 6px; font: 600 13px "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8fa3ae; }
.mx-coach:hover { border-color: #3a5a66; }

/* v32 (ordinateur) : bibliothèque et historique de MÊME HAUTEUR (460 px, ~7-8 lignes), la liste défile dans la carte,
   en-têtes de colonnes fixes */
html:not(.is-mob) .lab-main { align-items: stretch; }
html:not(.is-mob) .lab-main > .lib, html:not(.is-mob) .lab-side .hist { height: 460px; display: flex; flex-direction: column; min-height: 0; }
html:not(.is-mob) .lab-side { height: 460px; }
html:not(.is-mob) .lab-side .hist { flex: 1; }
html:not(.is-mob) .lab-main > .lib .lib-scroll { flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; }
html:not(.is-mob) .lab-side .hist [data-c="histMix"], html:not(.is-mob) .lab-side .hist [data-c="histSet"] { flex: 1 1 0; min-height: 0; overflow: auto; border-top: 1px solid var(--line); }
html:not(.is-mob) .lab-side .hist thead th { position: sticky; top: 0; z-index: 1; background: #131619; }
html:not(.is-mob) .lab-side .hist .hist-note { flex: none; }
.lib-scroll::-webkit-scrollbar, .hist .tbl-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.lib-scroll::-webkit-scrollbar-thumb, .hist .tbl-wrap::-webkit-scrollbar-thumb { background: #2c3237; border-radius: 4px; }
.lib-scroll::-webkit-scrollbar-track, .hist .tbl-wrap::-webkit-scrollbar-track { background: transparent; }
html:not(.is-mob) .lib-table td { padding: 6px 10px; } html:not(.is-mob) .lib-table button { height: 26px; } /* une ligne de plus visible */
.lab-home { color: inherit; text-decoration: none; } .lab-home:hover { text-decoration: underline; }