@font-face { font-family: 'SSP'; src: url('../fonts/SourceSansPro-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SSP'; src: url('../fonts/SourceSansPro-ExtraLight.otf') format('opentype'); font-weight: 200; font-display: swap; }

:root {
  --bg0: #151b22;
  --bg1: #222b35;
  --slate: #3c4959;
  --slate2: #697d91;
  --mist: #859aab;
  --lime: #c9d200;
  --text: #eef3f7;
  --muted: #9fb0c0;
  --line: rgba(255, 255, 255, .09);
  --card: rgba(255, 255, 255, .045);
  --c0: #b2c900; --c1: #dfde00; --c2: #fefc00; --c3: #ffd400; --c4: #f8ae00; --c5: #f29500;
  --energy: 0;
  --head: 196px;
  --gap: 6px;
  --r: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'SSP', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg0);
  background-image:
    radial-gradient(120% 70% at 50% -10%, #4b5c6f 0%, #2c3744 38%, var(--bg0) 75%);
  background-attachment: fixed;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}
/* Halo qui respire avec la grosse caisse */
body::before {
  content: '';
  position: fixed; inset: -20%;
  pointer-events: none;
  background: radial-gradient(40% 35% at 50% 45%, color-mix(in srgb, var(--c2) 40%, transparent), transparent 70%);
  opacity: calc(var(--energy) * .55);
  transform: scale(calc(.9 + var(--energy) * .15));
  z-index: 0;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible, input:focus-visible, .cell:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
svg { width: 1em; height: 1em; flex: none; }
kbd { font: 11px/1 'SSP', monospace; opacity: .55; }

#app { position: relative; z-index: 1; width: 100%; padding: 18px clamp(16px, 2vw, 40px) 32px; }

/* ---------- En-tête ---------- */
.top {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
}
.brand img { display: block; height: 52px; width: auto; }

.transport { display: flex; align-items: center; gap: 18px; margin-inline: auto; } /* centré entre logo et visualiseur */
.play-btn {
  position: relative; width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #4d5d70, #263039);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 24px rgba(0,0,0,.35);
  color: var(--lime); font-size: 30px;
  transition: transform .15s;
}
.play-btn:active { transform: scale(.94); }
.play-btn .ring {
  position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(var(--c0), var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c0));
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
          mask: radial-gradient(circle, transparent 58%, #000 60%);
  opacity: .55;
}
.play-btn.on .ring { animation: spin 2s linear infinite; opacity: 1; }
.play-btn .ico-play { margin-left: 4px; }
.play-btn .ico-stop, .play-btn.on .ico-play { display: none; }
.play-btn.on .ico-stop { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.lbl { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bpm { text-align: center; }
.bpm-row { display: flex; align-items: center; gap: 4px; }
#bpmOut {
  display: inline-block; min-width: 2.6ch; font-size: 40px; font-weight: 200; line-height: 1;
  cursor: ns-resize; touch-action: none; font-variant-numeric: tabular-nums;
}
.mini { width: 26px; height: 26px; border-radius: 8px; background: var(--card); font-size: 18px; line-height: 1; }
.mini:hover { background: rgba(255,255,255,.1); }
.tap {
  margin-top: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 12px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted);
}
.tap.flash { background: var(--lime); color: #1b222b; border-color: var(--lime); }

/* Visualiseur discret : il remplit l'espace libre sans s'étaler. */
#viz { flex: 1 1 140px; min-width: 100px; max-width: 320px; height: 46px; display: block; margin-inline: 0 auto; opacity: .9; }

.actions { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(8px, 1.2vw, 20px); justify-content: flex-end; flex: none; }
.act-pair { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.mini-act { width: 34px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; color: var(--text); background: rgba(255,255,255,.05); }
.mini-act:hover { background: rgba(255,255,255,.12); }
.mini-act[disabled] { opacity: .3; pointer-events: none; }
.lang-btn {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; margin-left: 6px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--muted); font-size: 12px; letter-spacing: .08em;
}
.lang-btn svg { font-size: 16px; color: var(--text); }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: var(--card); color: var(--text); }
.act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 58px; padding: 7px 6px; border-radius: 10px;
  font-size: 9.5px; line-height: 1.15; text-align: center; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  transition: background .15s, color .15s;
}
.act svg { font-size: 22px; color: var(--text); }
.act:hover { background: var(--card); color: var(--text); }
.act:active { transform: scale(.95); }
.act[disabled] { opacity: .3; pointer-events: none; }
.menu-wrap { position: relative; }
.popmenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 20; margin-top: 6px;
  background: #27313c; border: 1px solid var(--line); border-radius: 12px; padding: 6px; min-width: 160px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.popmenu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; text-align: left; font-size: 15px; }
.popmenu button:hover { background: rgba(255,255,255,.08); }
.popmenu button svg { font-size: 18px; color: var(--muted); }
.popmenu button.on { color: var(--lime); }
.popmenu.right { left: auto; right: 0; transform: none; min-width: 190px; }
.popmenu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 6px; }
.popmenu i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.rotate-hint { display: none; }

/* ---------- Séquenceur ---------- */
.seq {
  margin-top: 18px; padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
}
.leds, .row { display: grid; grid-template-columns: var(--head) 1fr; gap: 12px; }
.leds { margin-bottom: 8px; }
.leds .steps i { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); transition: background .08s, box-shadow .08s; }
.leds .steps i.beat { background: rgba(255,255,255,.18); }
.leds .steps i.on { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.steps { display: grid; grid-template-columns: repeat(var(--steps, 16), minmax(0, 1fr)); gap: var(--gap); position: relative; }
.row + .row { margin-top: var(--gap); }
.row.drop .steps { outline: 2px dashed var(--c); outline-offset: 3px; border-radius: 8px; }

.head {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 0 6px 0 0;
}
.swatch {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: var(--c); box-shadow: 0 0 0 0 var(--c);
  display: grid; place-items: center; color: rgba(0,0,0,.55); font-size: 12px; font-weight: 700;
  transition: transform .08s;
}
.swatch:active { transform: scale(.9); }
.swatch.hit { animation: swatchHit .25s ease-out; }
@keyframes swatchHit { 0% { box-shadow: 0 0 0 0 var(--c); transform: scale(1.12); } 100% { box-shadow: 0 0 0 10px transparent; transform: scale(1); } }
.tname {
  flex: 1; min-width: 0; text-align: left; font-size: 15px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tname small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.ms { display: flex; gap: 3px; }
.ms button {
  width: 22px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.07); color: var(--muted);
}
.ms button.on[data-k="mute"] { background: #e0473b; color: #fff; }
.ms button.on[data-k="solo"] { background: var(--lime); color: #1b222b; }
.row.muted .cell { filter: saturate(.15) brightness(.7); }

.cell {
  aspect-ratio: 1; max-height: clamp(44px, 3.2vw, 64px); border-radius: 8px;
  background: rgba(255,255,255,.075);
  position: relative; touch-action: none; cursor: pointer;
  transition: background .12s, box-shadow .12s, transform .08s;
}
.cell.alt { background: rgba(255,255,255,.04); }
.cell:hover { background: rgba(255,255,255,.14); }
.cell.v1 { background: color-mix(in srgb, var(--c) 42%, #2b3541); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 30%, transparent); }
.cell.v2 { background: var(--c); box-shadow: 0 0 9px color-mix(in srgb, var(--c) 70%, transparent); }
.cell.v3 { background: var(--c); box-shadow: 0 0 16px var(--c), inset 0 0 0 3px rgba(255,255,255,.75); }
.cell.v1::after, .cell.v3::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%;
  transform: translate(-50%, -50%); border-radius: 50%;
}
.cell.v1::after { background: rgba(255,255,255,.35); width: 14%; height: 14%; }
.cell.v3::after { background: rgba(255,255,255,.9); }
.cell.ph { background-color: rgba(255,255,255,.2); }
.cell.ph.v1, .cell.ph.v2, .cell.ph.v3 { background: #fff; box-shadow: 0 0 22px #fff, 0 0 40px var(--c); }

/* ---------- Barre du séquenceur : pas, triolets, mode ---------- */
.seq-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -2px 0 12px; }
.seq-bar .mini-seg { margin: 0; }
#tripBtn b { font-size: 15px; line-height: 1; }
#tripBtn.on { background: var(--c3); color: #1b222b; }
#modeSeg button.on[data-m="prob"] { background: var(--c4); }
.seq-hint { font-size: 12px; color: var(--muted); flex: 1 1 220px; }

/* 32 pas : cases plus fines */
.seq.dense { --gap: 3px; }
.seq.dense .cell { border-radius: 5px; }
.seq.dense .cell.v3 { box-shadow: 0 0 10px var(--c), inset 0 0 0 2px rgba(255,255,255,.75); }

/* Zone hors boucle d'une piste */
.cell.beyond, .bcell.beyond {
  pointer-events: none; opacity: .28; box-shadow: none !important;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 3px, transparent 3px 7px);
}

/* Probabilité : la part hachurée du haut = la chance de ne pas jouer */
.cell.p1::before, .cell.p2::before, .cell.p3::before, .bcell.p1::before, .bcell.p2::before, .bcell.p3::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; border-radius: inherit;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  background: repeating-linear-gradient(135deg, rgba(21,27,34,.72) 0 3px, rgba(21,27,34,.5) 3px 6px);
}
.cell.p1::before, .bcell.p1::before { height: 25%; }
.cell.p2::before, .bcell.p2::before { height: 50%; }
.cell.p3::before, .bcell.p3::before { height: 75%; }
.bcell { position: relative; }
.prob-mode .cell:not(.v1):not(.v2):not(.v3), .prob-mode .bcell:not(.on) { opacity: .35; cursor: default; }
.prob-mode .cell.v1, .prob-mode .cell.v2, .prob-mode .cell.v3, .prob-mode .bcell.on { cursor: ns-resize; outline: 1px dashed rgba(255,255,255,.55); outline-offset: 1px; }

/* Poignée de longueur en bout de ligne */
.lenh {
  --L: 16;
  position: absolute; top: -3px; bottom: -3px; width: 16px; z-index: 3;
  left: calc((100% + var(--gap)) * var(--L) / var(--steps, 16) - var(--gap) / 2 - 8px);
  cursor: ew-resize; touch-action: none; opacity: .3; transition: opacity .15s;
}
.lenh::before { content: ''; position: absolute; left: 6px; width: 4px; top: 0; bottom: 0; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.lenh b {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 18px; padding: 1px 4px; border-radius: 6px;
  background: var(--c); color: #1b222b; font-size: 10px; text-align: center; opacity: 0; transition: opacity .15s;
}
.row:hover .lenh, .bass:hover .lenh { opacity: .75; }
.lenh.short, .lenh.drag, .lenh:hover { opacity: 1; }
.lenh.short b, .lenh.drag b, .lenh:hover b { opacity: 1; }
#bassGrid .lenh { bottom: auto; height: calc(var(--bh, 181px) + 6px); }

/* ---------- Ligne de basse ---------- */
.bass { --c: var(--cb); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.bass-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.bass-bar .head { flex: none; padding: 0; }
.bass-bar .tname { flex: none; overflow: visible; }
.bass-sw { font-size: 18px; color: rgba(0,0,0,.55); }
#bassToggle { cursor: pointer; }
#bassToggle span::after { content: ' ▾'; font-size: 11px; color: var(--muted); display: inline-block; transition: transform .2s; }
.bass.closed #bassToggle span::after { transform: rotate(-90deg); }
#bassToggle small { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 11px; }
.bass-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sel { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sel select {
  font: 14px 'SSP', sans-serif; color: var(--text); background: rgba(255,255,255,.07); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.sel select option { background: #27313c; }
.mini-seg { margin: 0; }
.mini-seg button { padding: 4px 10px; font-size: 13px; }
.small-knob { display: flex; align-items: center; gap: 4px; }
.small-knob svg { width: 34px !important; height: 34px !important; margin: 0 !important; }
.bass .knob .val { stroke: var(--cb); }
#bLegato.on { background: var(--cb); color: #1b222b; }
#bassGrid { margin-top: 10px; display: grid; gap: 3px; }
.bass.closed #bassGrid { display: none; }
.brow { gap: 12px; }
.brow + .brow { margin-top: 0; }
.brow .steps { gap: var(--gap); }
.blabel { text-align: right; padding-right: 8px; font-size: 11px; color: var(--muted); align-self: center; font-variant-numeric: tabular-nums; }
.brow.root .blabel { color: var(--cb); font-weight: 700; }
.bcell {
  height: 20px; border-radius: 5px; background: rgba(255,255,255,.06); cursor: pointer; touch-action: none;
  transition: background .1s, box-shadow .1s;
}
.bcell.alt { background: rgba(255,255,255,.035); }
.brow.root .bcell { background: rgba(255,255,255,.1); }
.brow.root .bcell.alt { background: rgba(255,255,255,.065); }
.bcell:hover { background: rgba(255,255,255,.16); }
.bcell.on { background: var(--cb) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--cb) 70%, transparent); }
.bcell.ph { background-color: rgba(255,255,255,.17); }
.bcell.ph.on { background: #fff !important; box-shadow: 0 0 16px #fff, 0 0 26px var(--cb); }
.bass.muted #bassGrid { filter: saturate(.15) brightness(.7); }
.bass [data-bk="mute"].on { background: #e0473b; color: #fff; }
.bass [data-bk="solo"].on { background: var(--lime); color: #1b222b; }

/* ---------- Pupitre ---------- */
.deck {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(250px, 1.1fr) minmax(240px, 1fr) minmax(360px, 1.6fr);
  gap: 14px;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 16px;
}
.card h2 {
  margin: 0 0 10px; font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
}
.card h2:not(:first-child) { margin-top: 14px; }

.patterns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pat {
  position: relative; border-radius: 10px; padding: 6px 6px 4px; background: rgba(255,255,255,.06);
  border: 1px solid transparent; text-align: left;
}
.pat b { font-size: 18px; font-weight: 400; }
.pat canvas { display: block; width: 100%; height: 22px; margin-top: 2px; }
.pat.on { border-color: var(--lime); background: rgba(201,210,0,.12); }
.pat.queued { animation: blink .5s steps(2) infinite; border-color: var(--lime); }
.pat.target { border-style: dashed; border-color: #fff; }
@keyframes blink { 50% { border-color: transparent; } }

.row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.row-btns.center { justify-content: center; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px;
  background: rgba(255,255,255,.07); font-size: 14px; cursor: pointer; transition: background .15s;
}
.pill svg { font-size: 16px; }
.pill:hover { background: rgba(255,255,255,.13); }
.pill.on { background: var(--lime); color: #1b222b; }
.pill.accent { background: var(--lime); color: #1b222b; font-weight: 700; }
.pill.accent:hover { filter: brightness(1.08); }
.pill.small { font-size: 12px; padding: 6px 11px; }

.demos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.demos button {
  aspect-ratio: 1; border-radius: 9px; background: #7d93a8; font-size: 20px; font-weight: 700;
  transition: transform .08s, background .15s;
}
.demos button:hover { background: #8fa6bb; }
.demos button.on { background: var(--c5); box-shadow: 0 0 10px var(--c5); }
.demos button:active { transform: scale(.92); }

.kits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kits button {
  position: relative; padding: 7px 6px; border-radius: 10px; font-size: 14px;
  background: color-mix(in srgb, var(--lime) 18%, transparent); border: 1px solid color-mix(in srgb, var(--lime) 30%, transparent);
  overflow: hidden;
}
.kits button small { display: block; font-size: 10px; opacity: .55; }
.kits button:hover { background: color-mix(in srgb, var(--lime) 30%, transparent); }
.kits button.synth small { color: var(--c3); opacity: .85; letter-spacing: .1em; text-transform: uppercase; }
.kits button.on { background: #fff; color: #2a3440; box-shadow: 0 0 12px rgba(255,255,255,.6); border-color: #fff; }
.kits button.loading::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%;
  background: var(--lime); animation: load 0.9s ease-in-out infinite;
}
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

.pads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pad span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pad {
  position: relative; aspect-ratio: 1.7; border-radius: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 85%, #fff 15%), color-mix(in srgb, var(--c) 70%, #000 30%));
  color: rgba(0,0,0,.6); font-size: 12px; font-weight: 700; text-align: left; padding: 7px 9px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.3);
  touch-action: none; transition: transform .06s, filter .06s;
}
.pad kbd { align-self: flex-end; opacity: .6; font-size: 13px; }
.pad.hit { transform: scale(.94); filter: brightness(1.35); box-shadow: 0 0 26px var(--c); }
.rec-live {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  background: rgba(255,255,255,.07); font-size: 11px; letter-spacing: .1em; color: var(--muted);
}
.rec-live i, .cap i { width: 9px; height: 9px; border-radius: 50%; background: #e0473b; }
.rec-live.on { background: #e0473b; color: #fff; }
.rec-live.on i { background: #fff; animation: blink .8s steps(2) infinite; }
.c-pads .pill { margin-top: 12px; }
.pill.cap.on { background: #e0473b; color: #fff; }
.pill.cap.on i { background: #fff; animation: blink .8s steps(2) infinite; }

.fx-wrap { display: grid; grid-template-columns: minmax(150px, 1fr) 1.15fr; gap: 14px; }
.xy {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; touch-action: none; cursor: crosshair;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 25% 25%,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 25% 25%,
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--c3) 25%, transparent), transparent 60%),
    #1a2129;
  border: 1px solid var(--line);
}
.xy canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.xy-hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 11px; color: var(--muted); pointer-events: none; transition: opacity .3s; }
.xy.active .xy-hint { opacity: 0; }
.xy-read { position: absolute; top: 7px; left: 9px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.knobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.knob { text-align: center; touch-action: none; cursor: ns-resize; }
.knob svg { width: 52px; height: 52px; display: block; margin: 0 auto 2px; }
.knob .track { stroke: rgba(255,255,255,.1); }
.knob .val { stroke: var(--lime); transition: stroke-dasharray .05s; }
.knob .dot { fill: #fff; }
.knob .lbl { font-size: 10px; letter-spacing: .08em; }
.transport .knob svg { width: 46px; height: 46px; }
.rolls { margin-top: 12px; }
.roll-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 5px; }
.roll-btns button {
  display: flex; flex-direction: column; align-items: center; padding: 8px 0 5px; border-radius: 10px;
  background: rgba(255,255,255,.07); font-size: 17px; touch-action: none;
}
.roll-btns button.on { background: var(--c4); color: #1b222b; box-shadow: 0 0 14px var(--c4); }
.roll-btns small { font-size: 13px; line-height: 20px; }

/* ---------- Dialogues ---------- */
.dlg {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px);
  border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px 28px;
  background: linear-gradient(90deg, #3c4959 0%, #55677a 30%, #697d91 50%, #55677a 70%, #3c4959 100%);
  color: var(--text); box-shadow: 0 40px 80px rgba(0,0,0,.5);
  overflow-x: hidden; overflow-y: auto;
}
.dlg.wide { width: min(900px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(10, 14, 18, .62); backdrop-filter: blur(4px); }
.dlg[open] { animation: pop .28s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.dlg h3 { margin: 0 0 6px; font-size: 26px; font-weight: 200; }
.dlg h4 { margin: 20px 0 8px; font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dlg .sub { color: #d5dee6; margin: 4px 0 14px; font-size: 15px; }
.dlg-close { position: absolute; top: 12px; right: 12px; margin: 0; }
.dlg-close button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: rgba(0,0,0,.18); }
.center { text-align: center; }
.field {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.22); color: var(--text); font: inherit; user-select: text; -webkit-user-select: text;
}

.sliders { display: grid; gap: 10px; }
.sliders label { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; font-size: 14px; }
.sliders output { text-align: right; font-variant-numeric: tabular-nums; color: #dce5ed; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: rgba(0,0,0,.25); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--tc, var(--lime)); box-shadow: 0 0 8px var(--tc, var(--lime)); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--tc, var(--lime)); }
.euclid { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; }
.euclid .sliders label { grid-template-columns: 80px 1fr 30px; }
.euclid .pill { justify-self: start; }
.euclid-ring { position: relative; width: 130px; height: 130px; }
.euclid-ring i {
  position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: rgba(0,0,0,.25);
  transition: background .15s, box-shadow .15s;
}
.euclid-ring i.on { background: var(--tc); box-shadow: 0 0 8px var(--tc); }
.track-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

.voice-tracks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 8px; background: rgba(255,255,255,.1); border-radius: 8px; }
.voice-tracks button {
  aspect-ratio: 1; border-radius: 6px; background: var(--c); color: #3c4857; font-size: clamp(12px, 2vw, 17px); font-weight: 700;
  transition: box-shadow .15s, transform .1s; padding: 4px;
}
.voice-tracks button.on { box-shadow: inset 0 0 0 6px #fff; }
.voice-tracks button small { display: block; font-size: 10px; font-weight: 400; }
.voice-stage { text-align: center; margin-top: 18px; }
#voiceWave { width: 100%; height: 90px; display: block; border-radius: 10px; background: rgba(0,0,0,.15); margin-bottom: 16px; }
.rec-btn { position: relative; width: 120px; height: 120px; display: inline-block; }
.rec-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rec-ring circle { fill: none; stroke: #fff; stroke-width: 5; }
.rec-ring .fill { stroke: #3c4857; stroke-dasharray: 384; stroke-dashoffset: 384; }
.rec-btn.recording .rec-ring .fill { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, 1.6s) linear; }
.rec-btn .dot {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px; border-radius: 50%; background: #e0001e;
  transition: all .3s cubic-bezier(.05, .58, .32, 1.35);
}
.rec-btn.recording .dot { width: 50px; height: 50px; margin: -25px; border-radius: 8px; }
.rec-btn.done .dot { opacity: 0; transform: scale(.5); }
.rec-btn .check { position: absolute; left: 30px; top: 30px; width: 60px; height: 60px; pointer-events: none; }
.rec-btn .check polyline { fill: none; stroke: var(--lime); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset .5s ease-in-out; }
.rec-btn.done .check polyline { stroke-dashoffset: 0; }
.voice-msg { min-height: 1.4em; font-size: 17px; margin: 10px 0 0; }

.palettes { display: grid; gap: 12px; margin-top: 18px; }
.palettes button {
  display: grid; grid-template-columns: 90px repeat(6, 1fr); gap: 4px; padding: 8px; align-items: center;
  border-radius: 10px; background: rgba(255,255,255,.1); text-align: left; font-size: 15px;
  transition: transform .15s, background .15s;
}
.palettes button:hover { transform: translateX(6px); background: rgba(255,255,255,.16); }
.palettes button.on { box-shadow: inset 0 0 0 2px #fff; }
.palettes i { height: 46px; border-radius: 4px; }

.seg { display: inline-flex; background: rgba(0,0,0,.2); border-radius: 99px; padding: 3px; margin-bottom: 16px; }
.seg button { padding: 6px 16px; border-radius: 99px; font-size: 15px; }
.seg button.on { background: var(--lime); color: #1b222b; }
.progress { height: 6px; border-radius: 3px; background: rgba(0,0,0,.25); overflow: hidden; margin-bottom: 6px; }
.progress i { display: block; height: 100%; width: 0; background: var(--lime); transition: width .3s; }

.save-form { display: flex; gap: 8px; margin: 12px 0 16px; }
.saves { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.saves li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.15); }
.saves li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saves li small { display: block; color: var(--muted); font-size: 12px; }
.saves .empty { background: none; color: #d5dee6; }

.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0 0; font-size: 15px; }
.keys dt { font-weight: 700; white-space: nowrap; }
.keys dt span { display: inline-block; padding: 1px 7px; border-radius: 6px; background: rgba(0,0,0,.25); }
.keys dd { margin: 0; color: #e3eaf0; }
.credits { list-style: none; padding: 12px 14px; margin: 14px 0; background: rgba(0,0,0,.15); border-radius: 10px; display: grid; gap: 4px; }
.credits b { font-weight: 700; }
.made-by { margin: 4px 0 0; text-align: center; font-size: 15px; }
.made-by a { color: var(--text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--lime) 70%, transparent); padding-bottom: 1px; transition: color .15s, border-color .15s; }
.made-by a:hover { color: var(--lime); border-color: var(--lime); }
.langs { margin: 6px 0 0; }

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 100;
  padding: 10px 18px; border-radius: 99px; background: rgba(20, 26, 33, .92); border: 1px solid var(--line);
  font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Chargement ---------- */
#loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(90% 70% at 50% 30%, #4b5c6f, #1a2129 75%);
  transition: opacity .7s ease, visibility .7s;
}
#loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
#loader.gone .loader-inner { transform: scale(1.08); filter: blur(4px); }
.loader-inner { text-align: center; padding: 16px; transition: transform .7s ease, filter .7s ease; }
.loader-inner img { width: min(260px, 64vw); height: auto; display: block; margin: 0 auto; }
.loader-eq { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 46px; margin: 18px 0 22px; }
.loader-eq i { width: 8px; border-radius: 4px; background: var(--c0); animation: bar 340ms ease-in-out infinite alternate; }
.loader-eq i:nth-child(2) { background: var(--c1); animation-duration: 300ms; animation-delay: -120ms; }
.loader-eq i:nth-child(3) { background: var(--c2); animation-duration: 380ms; animation-delay: -60ms; }
.loader-eq i:nth-child(4) { background: var(--c3); animation-duration: 320ms; animation-delay: -200ms; }
.loader-eq i:nth-child(5) { background: var(--c4); animation-duration: 360ms; animation-delay: -90ms; }
.loader-eq i:nth-child(6) { background: var(--c5); animation-duration: 310ms; animation-delay: -160ms; }
.loader-eq i:nth-child(7) { background: var(--c0); animation-duration: 350ms; animation-delay: -30ms; }
@keyframes bar { from { height: 5px; opacity: .35; } to { height: 46px; opacity: 1; } }
.loader-bar { width: min(240px, 60vw); height: 4px; margin: 0 auto; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.loader-bar i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--c0), var(--c2), var(--c5));
  box-shadow: 0 0 10px var(--c2); transition: width .25s ease;
}
.loader-msg { color: var(--muted); min-height: 1.4em; font-size: 13px; letter-spacing: .08em; margin: 12px 0 0; }

/* ---------- Adaptatif ---------- */
@media (max-width: 1240px) {
  .deck { grid-template-columns: 1fr 1fr; }
  .top { flex-wrap: wrap; row-gap: 14px; }
  .actions { width: 100%; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 820px) {
  :root { --head: 112px; --gap: 4px; }
  #app { padding: 12px 16px 28px; }
  .top { gap: 12px; }
  .brand img { height: 40px; }
  #viz { flex-basis: 100%; max-width: none; height: 40px; order: 3; }
  .actions { order: 4; }
  .act { min-width: 52px; }
  .seq { padding: 10px; border-radius: 14px; }
  .swatch { width: 28px; height: 28px; border-radius: 8px; }
  .tname { font-size: 13px; }
  .cell { border-radius: 5px; }
  .deck { grid-template-columns: 1fr; }
  .fx-wrap { grid-template-columns: 1fr; }
  .xy { max-width: 320px; width: 100%; justify-self: center; }
}
@media (max-width: 560px) {
  :root { --head: 30px; --gap: 3px; }
  .tname, .ms { display: none; }
  .leds, .row { gap: 6px; }
  .transport { gap: 10px; }
  .play-btn { width: 60px; height: 60px; font-size: 24px; }
  #bpmOut { font-size: 32px; }
  .transport .knob { display: none; }
  .actions { flex-wrap: nowrap; gap: 2px; }
  .act { width: 48px; min-width: 0; padding: 6px 1px; font-size: 8.5px; }
  .act-pair { padding: 0 2px; }
  .lang-btn { padding: 0 8px; margin-left: 2px; }
  .lang-btn b { display: none; }
  .cell { border-radius: 4px; aspect-ratio: .62; }
  .cell.v3 { box-shadow: 0 0 10px var(--c), inset 0 0 0 2px rgba(255,255,255,.75); }
  .bass-bar { grid-template-columns: 1fr; gap: 8px; }
  .bass .tname { display: block; }
  .bass .ms { display: flex; }
  .blabel { font-size: 8px; padding-right: 2px; }
  .bcell { height: 18px; border-radius: 3px; }
  .bass { --bh: 165px; }
  /* 32 pas sur téléphone : la grille défile horizontalement, les têtes de ligne restent visibles */
  .seq.dense { overflow-x: auto; }
  .seq.dense .steps { min-width: calc(var(--steps) * 15px); }
  .seq.dense .head, .seq.dense .blabel { position: sticky; left: 0; z-index: 4; background: #27313c; }
  .rotate-hint { display: block; margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
  .euclid { grid-template-columns: 1fr; justify-items: center; }
  .sliders label { grid-template-columns: 80px 1fr 38px; }
  .voice-tracks { grid-template-columns: repeat(3, 1fr); }
  .palettes button { grid-template-columns: 1fr repeat(6, 1fr); }
  .palettes button span { display: none; }
  .dlg { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}