/* ==========================================================
   DJ Audyo
   ========================================================== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- bascule de modes (barre du haut) ---------- */
.mode-switch {
  display: flex; gap: 3px; padding: 4px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.mode-switch button {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font-weight: 800; font-size: 14px;
  transition: background-color .18s ease, color .18s ease;
}
.mode-switch button .ico { width: 18px; height: 18px; }
.mode-switch button:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.mode-switch button.active { color: #fff; background: linear-gradient(135deg, #ff8a1f, #ff4757 55%, #a855f7); box-shadow: 0 4px 14px rgba(255, 71, 87, .35); }
body.mode-dj .mode-title { background: linear-gradient(90deg, #22d3ee, #ff8a1f); -webkit-background-clip: text; background-clip: text; }

/* ---------- bouton de lancement DJ (barre latérale) ---------- */
.dj-launch {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 84px; padding: 14px 16px;
  border: 2px solid transparent; border-radius: 18px; text-align: left; color: #fff;
  background:
    radial-gradient(120px 80px at 20% 50%, rgba(34, 211, 238, .25), transparent 70%) padding-box,
    linear-gradient(135deg, #0a1033, #220a3f 60%, #0a1033) padding-box,
    conic-gradient(from var(--ang), #22d3ee, #3b82f6, #a855f7, #ff4757, #ff8a1f, #22d3ee) border-box;
  animation: djBorder 4s linear infinite;
  box-shadow: 0 10px 28px rgba(34, 211, 238, .25);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dj-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(168, 85, 247, .45); }
.dj-launch:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dj-launch .pl-text strong {
  font-size: 26px;
  background: linear-gradient(90deg, #67e8f9, #c084fc, #ffb86b); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.dj-launch .pl-text small { color: #c7d2fe; }
.dj-disc {
  position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%;
  background: repeating-radial-gradient(circle, #16182a 0 1.4px, #07080f 1.4px 3px);
  box-shadow: 0 0 0 2px #2b2f4a, 0 6px 16px rgba(0, 0, 0, .5);
  animation: spin 1.8s linear infinite;
}
.dj-disc::after { content: ""; position: absolute; top: 4px; left: 50%; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 2px; background: #22d3ee; }
.dj-disc-label { position: absolute; inset: 31%; border-radius: 50%; background: conic-gradient(#ff8a1f, #ff4757, #a855f7, #22d3ee, #ff8a1f); box-shadow: 0 0 0 2px #07080f; }
.dj-fader { position: relative; flex: none; width: 46px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
.dj-fader i { position: absolute; top: -6px; width: 12px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, #fff, #c7d2fe); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); animation: xfSlide 3s ease-in-out infinite; }
@keyframes djBorder { to { --ang: 360deg; } }
@keyframes xfSlide { 0%, 100% { left: 0; } 50% { left: 34px; } }

/* ---------- vue DJ : style « console de club » sombre et sobre ----------
   Fonds anthracite, contrôles plats, couleur réservée à l'information :
   platine A bleue, platine B orange, formes d'onde 3 bandes, voyants. */
body.mode-dj { background: #09090b; }
body.mode-dj .topbar { background: #111114; border-bottom-color: #232328; }
body.mode-dj .copyright { background: #0d0d10; color: #5c5c64; }
body.mode-dj .topbar::after { background: linear-gradient(90deg, var(--deckA, #3ea6ff), #2a2a30 30% 70%, #ff8c1a); opacity: .7; }
body.mode-dj .party-btn { background: linear-gradient(180deg, #2a2a2f, #1f1f23); border: 1px solid #3a3a42; box-shadow: none; color: #e8e8ec; }
body.mode-dj .party-btn:hover { border-color: #50505a; background: linear-gradient(180deg, #33333a, #26262b); }
.dj {
  --deckA: #3ea6ff; --deckB: #ff8c1a;
  --rb-bg: #0c0c0e; --rb-panel: #161619; --rb-panel2: #1d1d21; --rb-panel3: #26262b;
  --rb-line: #2a2a30; --rb-line2: #3a3a42;
  --rb-text: #ececef; --rb-muted: #9b9ba3; --rb-dim: #64646c;
  --rb-blue: #2f8cff; --rb-amber: #ffa424; --rb-green: #3fd16b; --rb-red: #ff3b30;
  --rb-cond: 'Barlow Condensed', 'Arial Narrow', var(--font-ui);
  --rb-font: 'Barlow', var(--font-ui);
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: grid; grid-template-rows: auto auto minmax(170px, 1fr); gap: 6px;
  font-family: var(--rb-font); color: var(--rb-text);
  scrollbar-width: thin; scrollbar-color: var(--rb-panel3) transparent;
}
.dj[hidden] { display: none; }
.dj button { cursor: pointer; font-family: var(--rb-cond); }
.dj button:focus-visible, .dj select:focus-visible, .dj input:focus-visible { outline: 2px solid var(--rb-blue); outline-offset: 1px; }
.dj select {
  height: 28px; padding: 0 6px; border-radius: 3px; border: 1px solid var(--rb-line2);
  background: #1a1a1e; color: var(--rb-text); font: 600 13px var(--rb-cond);
}

/* boutons plats communs */
.dj .ctl-row button, .bpm-tools button, .bend button, .wave-zoom button, .q-btn, .pfl, .automix, .fondu, .t-sync, .ld, .studio-tabs button {
  border: 1px solid var(--rb-line2); border-radius: 3px;
  background: linear-gradient(180deg, #2a2a2f, #1f1f23); color: #cfcfd5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dj .ctl-row button:hover, .bpm-tools button:hover, .bend button:hover, .wave-zoom button:hover, .q-btn:hover, .pfl:hover, .automix:hover, .t-sync:hover, .studio-tabs button:hover {
  color: #fff; border-color: #50505a; background: linear-gradient(180deg, #33333a, #26262b);
}

/* ---------- formes d'onde défilantes ---------- */
.dj-waves {
  position: relative; display: grid; gap: 0; padding: 0 50px 0 0;
  border-radius: 6px; background: #000; border: 1px solid var(--rb-line);
  overflow: clip; /* et non « hidden » : un conteneur défilant laisserait la grille écraser la rangée à 0 */
}
.wave-lane { position: relative; height: 72px; background: #000; }
.wave-lane canvas { width: 100%; height: 100%; display: block; }
.lane-tag {
  position: absolute; left: 0; top: 0; min-width: 22px; padding: 2px 6px; text-align: center;
  font: 700 15px var(--rb-cond); color: #000; border-radius: 0 0 4px 0;
}
.lane-A .lane-tag { background: var(--deckA); }
.lane-B .lane-tag { background: var(--deckB); }
.lane-A { box-shadow: inset 2px 0 0 var(--deckA); }
.lane-B { box-shadow: inset 2px 0 0 var(--deckB); }
/* indicateur de phase : 4 temps par platine */
.phase { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 3px 8px; background: #0b0b0d; border-block: 1px solid #1c1c20; }
.ph { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.ph i { height: 5px; border-radius: 1px; background: #26262b; transition: background-color .06s linear; }
.ph-A i.on { background: var(--deckA); box-shadow: 0 0 6px var(--deckA); }
.ph-B i.on { background: var(--deckB); box-shadow: 0 0 6px var(--deckB); }
.ph i:first-child { background: #3a2526; }
.ph-A i.on:first-child, .ph-B i.on:first-child { background: var(--rb-red); box-shadow: 0 0 6px var(--rb-red); }
.wave-zoom { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
.wave-zoom button { width: 36px; height: 36px; font: 700 18px var(--rb-cond); }

.dj-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); gap: 6px; align-items: stretch; }

/* ---------- platine ---------- */
.deck {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 12px 12px; border-radius: 6px;
  background: linear-gradient(180deg, #1b1b1f, #141417 140px);
  border: 1px solid var(--rb-line); border-top: 2px solid #2e2e34;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.deck.on-air { border-top-color: var(--dc); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dc) 30%, transparent); }
.deck-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.deck-letter { font: 700 40px/0.9 var(--rb-cond); color: var(--dc); min-width: 24px; text-align: center; }
.deck-cover { width: 50px; height: 50px; border-radius: 3px; overflow: hidden; background: #0d0d10; border: 1px solid var(--rb-line2); }
.deck-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-track { min-width: 0; }
.deck-title { font: 600 18px/1.2 var(--rb-font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-artist { font: 500 13.5px var(--rb-font); color: var(--rb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-key {
  min-width: 46px; padding: 4px 6px; border-radius: 3px; text-align: center;
  font: 700 17px var(--rb-cond); color: var(--kc, var(--rb-muted));
  background: #0d0d10; border: 1px solid color-mix(in srgb, var(--kc, #ffffff) 40%, #2a2a30);
}
.deck-bpm { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 3px; justify-items: end; }
.deck-bpm b { font: 700 34px/0.95 var(--rb-cond); color: #fff; font-variant-numeric: tabular-nums; }
.deck-bpm small { font: 600 11px var(--rb-cond); color: var(--rb-muted); letter-spacing: .5px; }
.deck-bpm .pitch-val { grid-column: 1 / -1; font: 600 13px var(--rb-cond); color: var(--dc); font-variant-numeric: tabular-nums; }
.bpm-tools { grid-column: 1 / -1; display: flex; gap: 3px; margin-top: 3px; }
.bpm-tools button { min-height: 22px; padding: 0 6px; font: 600 11px var(--rb-cond); }

.deck-times { display: flex; justify-content: space-between; align-items: center; font: 600 22px var(--rb-cond); font-variant-numeric: tabular-nums; }
.deck-times [data-r="remain"] { color: var(--dc); }
.deck-times [data-r="remain"].warn { color: var(--rb-red); animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.deck-flags { display: flex; gap: 4px; }
.deck-flags i { font-style: normal; font: 700 11px var(--rb-cond); letter-spacing: .6px; padding: 2px 7px; border-radius: 2px; color: var(--rb-dim); border: 1px solid var(--rb-line2); }
.deck-flags i.on { color: #000; border-color: transparent; }
.deck-flags i[data-r="fLoop"].on { background: var(--rb-amber); }
.deck-flags i[data-r="fSync"].on { background: var(--rb-blue); color: #fff; }
.deck-flags i[data-r="fMaster"].on { background: #ff6a00; }
.deck-ov { width: 100%; height: 46px; display: block; border-radius: 2px; background: #000; cursor: pointer; border: 1px solid #222227; }

.deck-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 206px 54px; grid-template-areas: "side jog pitch"; gap: 10px; align-items: center; }
.deck-B .deck-body { grid-template-columns: 54px 206px minmax(0, 1fr); grid-template-areas: "pitch jog side"; }
.deck-side { grid-area: side; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jog-wrap { grid-area: jog; display: grid; place-items: center; }
.pitch { grid-area: pitch; }

/* hot cues A–H : touche sombre, voyant de couleur en bas */
.pads { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.pad {
  height: 34px; border-radius: 3px; border: 1px solid #34343a;
  background: linear-gradient(180deg, #232327, #1a1a1d);
  color: #8d8d95; font: 700 14px var(--rb-cond);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--pc) 35%, #1a1a1d);
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, transform .08s ease;
}
.pad:hover { color: #fff; box-shadow: inset 0 -3px 0 var(--pc); }
.pad:active { transform: translateY(1px); }
.pad.set { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 70%, #000), color-mix(in srgb, var(--pc) 45%, #000)); border-color: var(--pc); box-shadow: inset 0 -3px 0 var(--pc), 0 0 10px color-mix(in srgb, var(--pc) 45%, transparent); }

.ctl-row { display: flex; gap: 4px; align-items: center; }
.dj .ctl-row button { flex: 1; min-width: 0; min-height: 30px; padding: 0 3px; font: 600 13px var(--rb-cond); letter-spacing: .4px; }
.dj .ctl-row button.on { color: #000; background: var(--rb-amber); border-color: var(--rb-amber); box-shadow: 0 0 8px rgba(255, 164, 36, .45); }
.dj .ctl-row.fx button.on { background: var(--rb-blue); border-color: var(--rb-blue); color: #fff; box-shadow: 0 0 8px rgba(47, 140, 255, .5); }
.ctl-row.fx .knob-wrap { flex: none; }
.ctl-row.fx .knob-wrap .knob-label { display: none; }

/* plateau : disque photographié (Higgsfield) qui tourne, couronne de position à la couleur de la platine */
.jog {
  position: relative; width: 200px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #050506 62%, #1c1c20 70%, #0b0b0d 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6), inset 0 1px 1px rgba(255, 255, 255, .08), 0 0 calc(var(--beat, 0) * 22px) color-mix(in srgb, var(--dc) 40%, transparent);
  cursor: grab; touch-action: none; user-select: none;
}
.jog:active { cursor: grabbing; }
.jog-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--dc) var(--p, 0%), rgba(255, 255, 255, .06) 0);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px));
          mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px));
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--dc) 70%, transparent));
}
.platter {
  position: absolute; inset: 8px; border-radius: 50%;
  background: url("../assets/dj/jog-platter.webp") center / cover no-repeat;
}
.platter-label {
  position: absolute; inset: 35%; border-radius: 50%; overflow: hidden;
  background: #0b0b0d; box-shadow: 0 0 0 2px #050506, 0 0 0 3px color-mix(in srgb, var(--dc) 55%, #000);
}
.platter-label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.platter-mark { display: none; }
.jog-center { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fafafa, #77777f); box-shadow: 0 1px 3px rgba(0, 0, 0, .8); pointer-events: none; }
.jog.touch .platter { filter: brightness(1.25); }
.jog.touch .jog-ring { filter: drop-shadow(0 0 10px var(--dc)); }
.deck:not(.loaded) .jog { opacity: .5; cursor: default; }

/* tempo */
.pitch { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pitch-lbl { font: 700 11px var(--rb-cond); color: var(--rb-muted); letter-spacing: 1px; }
input[type="range"].pitch-fader { writing-mode: vertical-lr; direction: rtl; width: 34px; height: 132px; margin: 0; }
input[type="range"].pitch-fader::-webkit-slider-runnable-track {
  width: 6px; border-radius: 1px; background: #000;
  box-shadow: inset 0 0 0 1px #2e2e34, 0 0 0 4px #141417, 0 -1px 0 4px #26262b;
}
input[type="range"].pitch-fader::-webkit-slider-thumb {
  width: 30px; height: 18px; margin-left: -12px; border-radius: 2px; border: 0;
  background: linear-gradient(180deg, #e9e9ec, #a9a9b0 45%, #6c6c74 50%, #b9b9c0 55%, #dcdce0);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .6);
}
input[type="range"].pitch-fader::-moz-range-thumb { width: 26px; height: 16px; border-radius: 2px; border: 0; background: #c9c9cf; }
.pitch select { width: 56px; }
.bend { display: flex; gap: 3px; }
.bend button { width: 26px; height: 26px; font: 700 15px var(--rb-cond); }
.bend button:active { background: var(--dc); color: #000; }

/* transport : CUE et PLAY ronds à voyant, comme sur une platine CD de club */
.deck-transport { display: grid; grid-template-columns: 60px 60px minmax(0, 1fr); gap: 10px; align-items: center; }
.deck-B .deck-transport { grid-template-columns: minmax(0, 1fr) 60px 60px; }
.deck-B .t-sync { order: -1; }
.t-cue, .t-play {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #2a2a2f, #151518 70%);
  font: 700 15px var(--rb-cond); letter-spacing: 1px;
  transition: box-shadow .15s ease, color .15s ease, transform .08s ease;
}
.t-cue { border: 3px solid #5a3a12; color: var(--rb-amber); }
.t-play { border: 3px solid #1c4a2a; color: var(--rb-green); }
.t-cue.on { border-color: var(--rb-amber); box-shadow: 0 0 14px rgba(255, 164, 36, .65), inset 0 0 10px rgba(255, 164, 36, .25); }
.t-play.on { border-color: var(--rb-green); box-shadow: 0 0 calc(8px + var(--beat, 0) * 16px) rgba(63, 209, 107, .7), inset 0 0 10px rgba(63, 209, 107, .25); }
.t-cue:active, .t-play:active { transform: scale(.96); }
.t-sync { min-height: 40px; font: 700 15px var(--rb-cond); letter-spacing: 1.5px; }
.deck:not(.loaded) .deck-transport button { opacity: .45; }

.deck-loading {
  position: absolute; inset: 0; z-index: 3; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(8, 8, 10, .82); backdrop-filter: blur(3px);
  font: 600 17px var(--rb-cond); letter-spacing: .5px;
}
.deck-loading[hidden] { display: none; }
.deck-drop {
  position: absolute; inset: 0; z-index: 2; border-radius: 6px; display: none;
  align-items: center; justify-content: center;
  border: 2px dashed var(--dc); background: color-mix(in srgb, var(--dc) 12%, rgba(8, 8, 10, .8));
  font: 700 22px var(--rb-cond); color: var(--dc); pointer-events: none;
}
.deck.drop .deck-drop { display: flex; }

/* ---------- table de mixage ---------- */
.mixer {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 6px;
  background: linear-gradient(180deg, #19191c, #121214); border: 1px solid var(--rb-line);
}
.mix-strips { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 6px; flex: 1; }
.strip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 4px; border-radius: 4px; background: #0f0f11; border: 1px solid #202024;
  border-top: 2px solid var(--dc);
}
.strip-knobs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 2px; width: 100%; }
.kcol { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.kcol .pfl { margin-top: 6px; }
.strip-id { font: 700 18px var(--rb-cond); color: var(--dc); }

/* boutons rotatifs : capuchon photographié (Higgsfield), arc de réglage discret */
.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.knob {
  position: relative; width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: conic-gradient(from -135deg, #26262b 0 var(--a0), var(--c) var(--a0) var(--a1), #26262b var(--a1) 270deg, transparent 270deg);
  cursor: ns-resize; touch-action: none;
}
.knob-face {
  position: absolute; inset: 4px; border-radius: 50%;
  background: url("../assets/dj/knob.webp") center / cover no-repeat;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}
.knob-face i { display: none; }
.knob.active .knob-face, .knob:hover .knob-face { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), 0 2px 5px rgba(0, 0, 0, .7); }
.knob:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.knob-wrap.sm .knob { width: 34px; height: 34px; }
.knob-wrap.sm .knob-face { inset: 3px; }
.knob-label { font: 600 11.5px var(--rb-cond); color: var(--rb-muted); letter-spacing: .6px; white-space: nowrap; }
button.knob-label { border: 0; background: transparent; padding: 1px 5px; border-radius: 2px; min-height: 18px; color: var(--rb-muted); }
button.knob-label:hover { color: #fff; background: #26262b; }
button.knob-label[aria-pressed="true"] { color: #fff; background: var(--rb-red); box-shadow: 0 0 8px rgba(255, 59, 48, .55); }

.pfl { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 8px; font: 700 12px var(--rb-cond); letter-spacing: .6px; }
.pfl[aria-pressed="true"] { background: var(--rb-amber); color: #000; border-color: var(--rb-amber); box-shadow: 0 0 10px rgba(255, 164, 36, .5); }
.fader-wrap { display: flex; gap: 7px; align-items: stretch; height: 96px; margin-top: auto; }
.vu { position: relative; width: 7px; border-radius: 1px; overflow: hidden; background: #050506; box-shadow: inset 0 0 0 1px #222227; }
.vu-fill { position: absolute; inset: 0; background: linear-gradient(0deg, #2fbf5a, #2fbf5a 55%, #e7d93a 75%, #ff9a1a 88%, #ff3b30); clip-path: inset(100% 0 0 0); }
input[type="range"].ch-fader { writing-mode: vertical-lr; direction: rtl; width: 32px; height: 96px; margin: 0; }
input[type="range"].ch-fader::-webkit-slider-runnable-track { width: 4px; border-radius: 1px; background: #000; box-shadow: inset 0 0 0 1px #2e2e34; }
input[type="range"].ch-fader::-webkit-slider-thumb {
  width: 28px; height: 20px; margin-left: -12px; border-radius: 2px; border: 0;
  background: linear-gradient(180deg, #3a3a40, #1c1c20 45%, #f2f2f4 47% 53%, #1c1c20 55%, #2c2c31);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .65), inset 0 0 0 1px #4a4a52;
}
input[type="range"].ch-fader::-moz-range-thumb { width: 24px; height: 16px; border-radius: 2px; border: 0; background: #2c2c31; }

.mix-center { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; }
.mc-title { display: inline-flex; align-items: center; gap: 4px; font: 700 11.5px var(--rb-cond); color: var(--rb-muted); letter-spacing: 1px; }
.mc-title .ico { width: 13px; height: 13px; }
.master-vu { display: flex; gap: 4px; height: 84px; }
.master-vu .vu { width: 9px; }
.q-btn { width: 40px; height: 30px; font: 700 15px var(--rb-cond); }
.q-btn[aria-pressed="true"] { background: var(--rb-blue); border-color: var(--rb-blue); color: #fff; }

/* crossfader */
.xf-zone { display: flex; align-items: center; gap: 8px; padding: 1px 6px; border-radius: 4px; background: #0f0f11; border: 1px solid #202024; }
.xf-l, .xf-r { font: 700 18px var(--rb-cond); }
.xf-l { color: var(--deckA); } .xf-r { color: var(--deckB); }
#djXf { flex: 1; height: 34px; }
#djXf::-webkit-slider-runnable-track { height: 4px; border-radius: 1px; background: #000; box-shadow: inset 0 0 0 1px #2e2e34, 0 0 0 4px #141417; }
#djXf::-webkit-slider-thumb {
  width: 20px; height: 32px; margin-top: -14px; border-radius: 2px; border: 0;
  background: linear-gradient(90deg, #3a3a40, #1c1c20 40%, #f2f2f4 46% 54%, #1c1c20 60%, #2c2c31);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .7), inset 0 0 0 1px #4a4a52;
}
#djXf::-moz-range-track { height: 4px; background: #000; }
#djXf::-moz-range-thumb { width: 18px; height: 28px; border-radius: 2px; border: 0; background: #2c2c31; }

.trans-zone { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.fondu { position: relative; overflow: hidden; min-height: 38px; color: #fff; }
.fondu-fill { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--deckA) 55%, transparent), color-mix(in srgb, var(--deckB) 55%, transparent)); transform-origin: left; transform: scaleX(0); }
.fondu-txt { position: relative; display: inline-flex; align-items: center; gap: 8px; font: 700 17px var(--rb-cond); letter-spacing: 1.5px; }
.fondu:hover { border-color: #50505a; }
.fondu.running { border-color: var(--rb-red); color: #fff; }
.automix { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 38px; font: 700 14px var(--rb-cond); letter-spacing: 1px; grid-row: 1; grid-column: 2; }
.automix[aria-pressed="true"] { color: #000; background: var(--rb-green); border-color: var(--rb-green); box-shadow: 0 0 12px rgba(63, 209, 107, .5); }
.trans-opts { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.trans-opts select { flex: 0 1 auto; min-width: 0; }
.chk { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--rb-cond); color: var(--rb-muted); white-space: nowrap; letter-spacing: .3px; }
.chk input { width: 16px; height: 16px; accent-color: var(--rb-blue); }

/* ---------- bas : bibliothèque (navigateur de morceaux) + studio ---------- */
.dj-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 6px; min-height: 0; }
.lib, .studio { min-height: 0; display: flex; flex-direction: column; border-radius: 6px; background: #111113; border: 1px solid var(--rb-line); overflow: hidden; }
.lib-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px; background: #18181b; border-bottom: 1px solid var(--rb-line); }
.lib-head h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 700 17px var(--rb-cond); letter-spacing: .6px; text-transform: uppercase; color: #fff; }
.lib-head h2 small { font: 500 13px var(--rb-font); color: var(--rb-muted); text-transform: none; letter-spacing: 0; }
.lib-tools { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.lib-tools .pill { min-height: 30px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--rb-line2); background: linear-gradient(180deg, #2a2a2f, #1f1f23); color: #d4d4da; font: 600 13.5px var(--rb-cond); letter-spacing: .3px; box-shadow: none; }
.lib-tools .pill:hover { color: #fff; border-color: #50505a; }
.lib-search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: 3px; border: 1px solid var(--rb-line2); background: #0a0a0c; color: var(--rb-muted); }
.lib-search:focus-within { border-color: var(--rb-blue); }
.lib-search input { width: 200px; border: 0; outline: none; background: transparent; color: var(--rb-text); font: 500 14px var(--rb-font); }
.lib-cols, .lib-row { display: grid; grid-template-columns: 24px 32px minmax(0, 1fr) 62px 66px 56px 52px 96px; gap: 8px; align-items: center; }
.lib-cols { padding: 5px 10px; background: #1a1a1d; border-bottom: 1px solid var(--rb-line); font: 600 12px var(--rb-cond); color: var(--rb-muted); letter-spacing: .8px; text-transform: uppercase; }
.lib-cols button { border: 0; background: transparent; padding: 2px 0; text-align: left; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.lib-cols button:hover, .lib-cols button.sorted { color: var(--rb-blue); }
.lib-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 100px; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--rb-panel3) transparent; }
.lib-row { padding: 3px 10px; min-height: 38px; cursor: grab; background: #131315; border-bottom: 1px solid #19191c; transition: background-color .12s ease; }
.lib-row:nth-child(even) { background: #17171a; }
.lib-row:hover { background: #222227; }
.lib-row:focus-visible, .lib-row:focus-within { background: #17406f; outline: none; }
.lib-row.played { opacity: .5; }
.lib-row.failed .lib-name b { color: #fda4af; text-decoration: line-through; }
.lib-state { display: grid; place-items: center; color: var(--rb-dim); }
.lib-state b { width: 20px; height: 20px; border-radius: 2px; display: grid; place-items: center; font: 700 13px var(--rb-cond); color: #000; }
.lib-state .on-A { background: var(--deckA); } .lib-state .on-B { background: var(--deckB); }
.lib-cover { width: 30px; height: 30px; border-radius: 2px; overflow: hidden; display: grid; place-items: center; background: #0b0b0d; color: var(--rb-dim); }
.lib-cover img { width: 100%; height: 100%; object-fit: cover; }
.lib-name { min-width: 0; display: flex; flex-direction: column; }
.lib-name b { font: 600 14px var(--rb-font); color: #f2f2f4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-name small { font: 500 12.5px var(--rb-font); color: var(--rb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-bpm, .lib-dur { font: 600 14.5px var(--rb-cond); color: var(--rb-text); font-variant-numeric: tabular-nums; }
.lib-dur { color: var(--rb-muted); }
.lib-bpm.match { color: var(--rb-green); }
.lib-key { display: inline-flex; align-items: baseline; gap: 4px; font: 700 14.5px var(--rb-cond); color: var(--kc, var(--rb-muted)); }
.lib-key small { font: 500 11px var(--rb-cond); color: var(--rb-dim); }
.lib-key.match::after { content: "✓"; color: var(--rb-green); font-size: 12px; }
.lib-ext { font: 600 11px var(--rb-cond); letter-spacing: .5px; color: #d9c27a; padding: 1px 5px; border-radius: 2px; background: #1f1f23; justify-self: start; }
.lib-load { display: flex; gap: 4px; }
.ld { width: 32px; height: 26px; font: 700 13px var(--rb-cond); }
.ld-A { color: var(--deckA); border-color: color-mix(in srgb, var(--deckA) 45%, #3a3a42); }
.ld-B { color: var(--deckB); border-color: color-mix(in srgb, var(--deckB) 45%, #3a3a42); }
.ld-A:hover { background: var(--deckA); color: #000; } .ld-B:hover { background: var(--deckB); color: #000; }
.ld:active { transform: translateY(1px); }
.mini-spin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rb-line2); border-top-color: var(--rb-blue); animation: spin .8s linear infinite; }
.lib-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--rb-muted); padding: 14px; margin: 10px; border: 1px dashed var(--rb-line2); border-radius: 4px; }
.lib-empty[hidden] { display: none; }
.lib-empty > .ico { color: var(--rb-blue); }
.lib-empty p { margin: 0; font-size: 14px; line-height: 1.55; }
.lib-empty b { color: var(--rb-text); }
body.dragging.mode-dj .lib { box-shadow: 0 0 0 2px var(--rb-blue), 0 0 24px rgba(47, 140, 255, .3); }

.studio { padding: 0 10px 10px; }
.studio-tabs { display: flex; gap: 0; margin: 0 -10px 10px; border-bottom: 1px solid var(--rb-line); background: #18181b; }
.dj .studio-tabs button { flex: 1; min-height: 38px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--rb-muted); font: 600 14px var(--rb-cond); letter-spacing: .4px; border-bottom: 2px solid transparent; }
.dj .studio-tabs button:hover { background: #202024; }
.dj .studio-tabs button.active { color: #fff; border-bottom-color: var(--rb-blue); background: transparent; }
.studio .tab { flex: 1; min-height: 0; overflow-y: auto; }
.studio .tab[hidden] { display: none; }
.smp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.smp {
  min-height: 54px; border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid #34343a; background: linear-gradient(180deg, #232327, #1a1a1d);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--pc) 60%, #1a1a1d);
  color: #fff; transition: transform .08s ease, box-shadow .15s ease;
}
.smp b { font: 600 14px var(--rb-cond); letter-spacing: .3px; }
.smp small { font: 600 11px var(--rb-cond); color: var(--pc); }
.smp:active { transform: translateY(1px); }
.smp.hit { animation: smpHit .45s ease-out; }
@keyframes smpHit { from { box-shadow: inset 0 -3px 0 var(--pc), 0 0 20px var(--pc); background: color-mix(in srgb, var(--pc) 55%, #000); } }
.smp-vol { margin-top: 8px; }
.studio .knob-wrap { margin-top: 8px; }
.rec-box { display: flex; gap: 14px; align-items: flex-start; }
.rec-btn {
  flex: none; width: 74px; height: 74px; border-radius: 50%; border: 3px solid #5a1c1a;
  background: radial-gradient(circle at 50% 35%, #2a2a2f, #151518 70%); color: var(--rb-red);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 700 13px var(--rb-cond);
}
.rec-btn.on { border-color: var(--rb-red); color: #fff; box-shadow: 0 0 16px rgba(255, 59, 48, .6); animation: pulse 1.2s ease-in-out infinite; }
.rec-time { font: 600 30px var(--rb-cond); color: var(--rb-red); font-variant-numeric: tabular-nums; }
.rec-note { margin: 4px 0 0; font-size: 13.5px; color: var(--rb-muted); line-height: 1.5; }
.rec-actions { display: grid; gap: 8px; }
.phones-sel { display: grid; gap: 6px; margin-top: 10px; font: 600 14px var(--rb-cond); color: var(--rb-muted); }
.keys-tab { display: grid; gap: 4px; }
.keys-tab div { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--rb-muted); }
.keys-tab span { margin-left: auto; color: var(--rb-text); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1440px) {
  .dj-main { grid-template-columns: minmax(0, 1fr) 336px minmax(0, 1fr); }
  .deck-body { grid-template-columns: minmax(0, 1fr) 176px 50px; }
  .deck-B .deck-body { grid-template-columns: 50px 176px minmax(0, 1fr); }
  .jog { width: 172px; }
  .pads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dj-bottom { grid-template-columns: minmax(0, 1fr) 336px; }
}
@media (max-width: 1240px) {
  .dj-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "mix mix"; }
  .deck-A { grid-area: a; } .deck-B { grid-area: b; } .mixer { grid-area: mix; }
  .mixer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .dj-bottom { grid-template-columns: minmax(0, 1fr); }
  .lib { min-height: 320px; }
}
@media (max-width: 960px) {
  .dj-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "mix" "b"; }
  .mixer { grid-template-columns: minmax(0, 1fr); }
  .lib-cols, .lib-row { grid-template-columns: 22px 0 minmax(0, 1fr) 54px 54px 0 0 72px; }
  .lib-cover, .lib-ext, .lib-dur, .lib-cols span:nth-child(7) { display: none; }
  .mode-switch button { padding: 0 10px; }
  .mode-title { display: none; }
  .wave-lane { height: 64px; }
}
@media (max-width: 520px) {
  .deck-body, .deck-B .deck-body { grid-template-columns: minmax(0, 1fr) 54px; grid-template-areas: "jog pitch" "side side"; }
  .jog { width: min(220px, 62vw); }
  .deck-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .deck-cover, .deck-key { display: none; }
  .deck-B .deck-transport { grid-template-columns: 60px 60px minmax(0, 1fr); }
  .deck-B .t-sync { order: 0; }
  .mode-switch button .ico { display: none; }
  .wave-lane { height: 58px; }
  .lib-search input { width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-times [data-r="remain"].warn, .rec-btn.on { animation: none; }
  .ph i { transition: none; }
}

input[type="range"].pitch-fader::-moz-range-track, input[type="range"].ch-fader::-moz-range-track { width: 4px; background: #000; }
input[type="range"].ch-fader::-moz-range-progress { width: 4px; background: var(--dc); }
input[type="range"].pitch-fader::-moz-range-progress { background: transparent; }
.deck-cover:empty { width: 0; border: 0; margin-left: -10px; }

/* ---------- fond animé (option « Visuels ») : panneaux translucides par-dessus ---------- */
.dj-bg { position: fixed; z-index: 0; pointer-events: none; border-radius: 6px; transition: opacity .4s ease; }
.dj-bg[hidden] { display: none; }
.dj > *:not(.dj-bg) { position: relative; z-index: 1; }
body.dj-bg-on .deck,
body.dj-bg-on .lib,
body.dj-bg-on .studio,
body.dj-bg-on .mixer { background: rgba(18, 18, 21, .88); backdrop-filter: blur(14px) saturate(1.1); }
.vis-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font: 600 14px var(--rb-cond); color: var(--rb-muted); letter-spacing: .3px; }
.vis-row select { max-width: 60%; }
.vis-row input[type="range"] { max-width: 55%; }
.party-btn.wide { width: 100%; justify-content: center; margin-top: 8px; min-height: 46px; font-size: 15px; }

.ld-x { width: 26px; height: 26px; border-radius: 3px; border: 0; background: transparent; color: var(--rb-dim); display: grid; place-items: center; opacity: 0; transition: opacity .15s ease, background-color .15s ease, color .15s ease; }
.lib-row:hover .ld-x, .lib-row:focus-within .ld-x { opacity: 1; }
.ld-x:hover { background: rgba(255, 59, 48, .2); color: var(--rb-red); }
.lib-head h2 .save-state { flex-basis: auto; margin: 0 0 0 8px; }

/* ---------- vidéo (onglet « Vidéo », miniature sur la platine) ---------- */
.deck-cover.has-video { width: 89px; }
.deck-cover video, .deck-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.vid-tab { display: flex; flex-direction: column; gap: 6px; }
.vid-tab:not([hidden]) { display: flex; }
.vid-tab > * { flex: none; } /* sinon l'aperçu (overflow: hidden) se tasse à 0 px dans l'onglet défilant */
.vid-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: #000; border: 1px solid var(--rb-line2); }
.vid-stage canvas { width: 100%; height: 100%; display: block; }
.vid-stage:fullscreen { border: 0; border-radius: 0; display: grid; place-items: center; }
.vid-stage:fullscreen canvas { width: 100vw; height: 100vh; object-fit: contain; }
.vid-live { position: absolute; top: 6px; left: 6px; padding: 1px 7px; border-radius: 2px; background: var(--rb-red); color: #fff; font: 700 12px var(--rb-cond); letter-spacing: 1px; animation: blink 1s steps(2) infinite; }
.vid-live[hidden] { display: none; }
.vid-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 8px; font: 600 14px var(--rb-cond); color: var(--rb-muted); letter-spacing: .3px; }
.vid-tab .vis-row { padding: 2px 0; }
.vid-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.vid-btns button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 4px;
  border: 1px solid var(--rb-line2); border-radius: 3px; background: linear-gradient(180deg, #2a2a2f, #1f1f23);
  color: #d4d4da; font: 600 13px var(--rb-cond); letter-spacing: .3px; white-space: nowrap;
}
.vid-btns button:hover { color: #fff; border-color: #50505a; }
.vid-btns button .ico { width: 15px; height: 15px; flex: none; }
.vid-btns button.on { border-color: var(--rb-blue); color: #fff; box-shadow: 0 0 8px rgba(47, 140, 255, .45); }
.vid-btns #djVidRec.on { border-color: var(--rb-red); box-shadow: 0 0 8px rgba(255, 59, 48, .5); }
.lib-ext.vid { display: inline-flex; align-items: center; gap: 3px; color: #8fc7ff; }
.lib-ext.vid .ico { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .vid-live { animation: none; } }

/* ---------- logo du DJ sur les platines ---------- */
.dj.has-logo:not(.logo-label) .platter { background: var(--dj-logo) center / 97% no-repeat, url("../assets/dj/jog-platter.webp") center / cover no-repeat; }
.dj.has-logo:not(.logo-label) .platter-label { display: none; }
.dj.has-logo:not(.logo-label) .platter-mark { display: block; position: absolute; top: 2px; left: 50%; width: 4px; height: 13px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px var(--dc); }
.dj.has-logo.logo-label .platter-label { background: #050506 var(--dj-logo) center / contain no-repeat; }
.dj.has-logo.logo-label .platter-label img { display: none; }
.logo-box { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--rb-line); }
.logo-prev {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--dj-logo, none) center / contain no-repeat, url("../assets/dj/jog-platter.webp") center / cover no-repeat;
  box-shadow: 0 0 0 1px var(--rb-line2), 0 6px 16px rgba(0, 0, 0, .6);
}
.logo-side b { font: 700 16px var(--rb-cond); letter-spacing: .4px; color: #fff; }
.logo-side .rec-note { font-size: 12.5px; margin: 2px 0 6px; }
.logo-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.logo-btns button {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px;
  border: 1px solid var(--rb-line2); border-radius: 3px; background: linear-gradient(180deg, #2a2a2f, #1f1f23);
  color: #d4d4da; font: 600 13.5px var(--rb-cond); letter-spacing: .3px;
}
.logo-btns button:hover { color: #fff; border-color: #50505a; }
.logo-btns button .ico { width: 15px; height: 15px; }
.logo-btns button.danger:hover { color: var(--rb-red); border-color: var(--rb-red); }
.logo-btns button[hidden] { display: none; }