/* Console dans la brume : barre de transport, séquenceur, éditeur de notes ; une couleur par voie. */
:root {
  --bg: #e6ebee; --panel: #f6f8f9; --ink: #1d2730; --muted: #5a6875; --line-ui: #c9d2d9;
  --accent: #2f6f8f; --accent-ink: #ffffff;
  --p1: #c0533a; --p2: #b07a1c; --tri: #2f8a55; --noise: #6a5aa8;
  --grid: #dfe5e9; --cell: #e9eef1; --cell-on: #f8fafb; --tonic: #e3eef4; --line: #d6dde2; --beat: #b3bfc8;
  --selection: #cfe0ea; --playhead: #e0a21b; --rec: #d23c3c;
  --rack: #232c34; --rack-line: #3a4752; --rack-ink: #e6edf1; --rack-muted: #9fb0bc; --rack-cap: #2d3842; --rack-led-off: #1a2128; --led-on: #ffb347; --key-white: #ffffff; --key-black: #2a3640; --key-label: #5a6875; --note-edge: rgba(255,255,255,.7); --note-ink: #ffffff;
  --display: 'Silkscreen', 'Courier New', monospace;
  --body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1418; --panel: #172027; --ink: #dfe7ec; --muted: #8d9ba7; --line-ui: #2c3a45;
  --accent: #6db3d3; --accent-ink: #0d1418;
  --p1: #ef7d62; --p2: #e2b04f; --tri: #6cc28c; --noise: #a593f0;
  --grid: #10171c; --cell: #141c22; --cell-on: #1c262e; --tonic: #1d3140; --line: #1f2a32; --beat: #34444f;
  --selection: #1e3a4a; --playhead: #f2c14e; --rec: #ff6b6b;
  --rack: #0c1116; --rack-line: #2f3c47; --rack-ink: #e6edf1; --rack-muted: #8d9ba7; --rack-cap: #1b242c; --rack-led-off: #0a0e12; --led-on: #ffb347; --key-white: #cfd8de; --key-black: #0b1014; --key-label: #3e4c57; --note-edge: rgba(0,0,0,.45); --note-ink: #0d1418;
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0f1418; --panel: #172027; --ink: #dfe7ec; --muted: #8d9ba7; --line-ui: #2c3a45;
  --accent: #6db3d3; --accent-ink: #0d1418;
  --p1: #ef7d62; --p2: #e2b04f; --tri: #6cc28c; --noise: #a593f0;
  --grid: #10171c; --cell: #141c22; --cell-on: #1c262e; --tonic: #1d3140; --line: #1f2a32; --beat: #34444f;
  --selection: #1e3a4a; --playhead: #f2c14e; --rec: #ff6b6b;
  --rack: #0c1116; --rack-line: #2f3c47; --rack-ink: #e6edf1; --rack-muted: #8d9ba7; --rack-cap: #1b242c; --rack-led-off: #0a0e12; --led-on: #ffb347; --key-white: #cfd8de; --key-black: #0b1014; --key-label: #3e4c57; --note-edge: rgba(0,0,0,.45); --note-ink: #0d1418;
  color-scheme: dark }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--body); padding-inline: 16px; padding-block: 0 32px; }
.top, main { max-width: 1280px; margin-inline: auto; }
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.top { z-index: 5; background: var(--bg); display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding-block: 12px; }
h1 { font: 400 1.5rem/1 var(--display); margin: 0; letter-spacing: .02em; }
h2 { font: 400 .95rem/1 var(--display); margin: 0; letter-spacing: .04em; color: var(--c, var(--ink)); }
h3 { font: 700 .95rem var(--body); margin: 18px 0 6px; }
.transport, .file, .bar-tools, .group { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.group { gap: 6px; color: var(--muted); font-size: .85rem; }
.pos { font: 600 1rem var(--mono); font-variant-numeric: tabular-nums; white-space: pre; background: var(--panel); border: 1px solid var(--line-ui); border-radius: 4px; padding: 4px 10px; min-width: 7.5ch; }

.panel { background: var(--panel); border: 1px solid var(--line-ui); border-radius: 6px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; overflow: hidden; }
label { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: .85rem; }
input, select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line-ui); border-radius: 4px; padding: 4px 8px; }
#title { width: 14em; }
input[type=range] { padding: 0; accent-color: var(--accent); width: 90px; }
input[type=checkbox] { accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn { font: 600 .85rem var(--body); color: var(--ink); background: transparent; border: 1px solid var(--line-ui); border-radius: 4px; padding: 6px 12px; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.small { padding: 3px 9px; font-size: .8rem; }
.btn.icon { padding: 5px 10px; min-width: 2.2em; }
.btn.play { min-width: 7.5em; }
.btn[aria-pressed=true]:not(.play) { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.pat-num { font: 600 .95rem var(--mono); min-width: 2ch; text-align: center; color: var(--ink); }
.info { margin: 0; color: var(--muted); font-size: .82rem; }

/* Séquenceur : en-têtes fixes à gauche, grille défilante à droite (hauteurs alignées sur le canevas). */
.seq-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); border: 1px solid var(--line-ui); border-radius: 4px; overflow: hidden; background: var(--grid); }
.heads-col { border-right: 1px solid var(--line-ui); background: var(--panel); }
.heads-ruler { height: 22px; font: .7rem var(--mono); color: var(--muted); padding: 4px 8px; }
.head { height: 46px; display: grid; grid-template-columns: 5.6rem 6.6rem 3.4rem auto auto; gap: 4px; align-items: center; padding: 0 6px; border-left: 4px solid var(--c); }
.head.current { background: var(--cell-on); }
.head-name { font: 400 .72rem var(--display); color: var(--c); background: none; border: 0; text-align: left; cursor: pointer; padding: 0; }
.head select { font-size: .78rem; padding: 2px 4px; width: 100%; }
.head-inst { font-size: .78rem; color: var(--muted); padding-left: 4px; }
.toggle { font: 600 .72rem var(--mono); width: 24px; height: 24px; border: 1px solid var(--line-ui); background: transparent; color: var(--muted); border-radius: 3px; cursor: pointer; }
.toggle.mute[aria-pressed=true] { background: var(--p1); border-color: var(--p1); color: var(--panel); }
.toggle.solo[aria-pressed=true] { background: var(--playhead); border-color: var(--playhead); color: #1d2730; }
.seq-box { overflow-x: auto; overflow-y: hidden; }
#seq { display: block; cursor: pointer; }
@media (min-width: 720px) { .top { position: sticky; top: env(safe-area-inset-top, 0px); } }
@media (max-width: 640px) {
  .head { grid-template-columns: 4.2rem auto auto; }
  .head select, .head-inst, .head .pan { display: none; }
}

/* Éditeur de notes. */
.editor { border-top: 3px solid var(--c, var(--accent)); }
.roll-ruler { display: block; width: 100%; height: 20px; cursor: text; }
.roll-box.drums { height: auto; }
.lane-tools { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: -4px; }
.lane-tools select { font-size: .8rem; padding: 2px 6px; }
.lane { display: block; height: 58px; border: 1px solid var(--line-ui); border-radius: 4px; touch-action: none; }
.head .pan { width: 100%; accent-color: var(--c); opacity: .55; }
.head .pan.off-center, .head .pan:hover, .head .pan:focus-visible { opacity: 1; }
.roll-box { height: min(56vh, 520px); overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line-ui); border-radius: 4px; outline: none; }
#roll { display: block; touch-action: pan-y; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--panel); padding: 8px 16px; border-radius: 4px; font-size: .85rem; z-index: 10; max-width: calc(100% - 32px); }

.help { max-width: 620px; width: calc(100% - 32px); background: var(--panel); color: var(--ink); border: 1px solid var(--line-ui); border-radius: 8px; padding: 22px; }
.help::backdrop { background: rgba(10, 16, 20, .55); }
.help h2 { font-size: 1.1rem; margin-bottom: 10px; }
.help p, .help ol { margin: 6px 0; }
.help table { border-collapse: collapse; width: 100%; font-size: .85rem; margin-bottom: 12px; }
.help td { padding: 4px 6px; border-bottom: 1px solid var(--line-ui); vertical-align: top; }
.help td:first-child { white-space: nowrap; color: var(--muted); }
.c-p1 { color: var(--p1); } .c-tri { color: var(--tri); } .c-noise { color: var(--noise); }
kbd { font: .78rem var(--mono); background: var(--bg); border: 1px solid var(--line-ui); border-radius: 3px; padding: 0 4px; }
.linkish { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* Piano : tiroir collé en bas de l’écran. */
.piano { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 4; border-top: 3px solid var(--c, var(--accent)); box-shadow: 0 -8px 24px rgba(10, 16, 20, .18); max-height: 88vh; overflow-y: auto; }

/* Barre d’ouverture du piano : pleine largeur, sous le séquenceur. */
.piano-bar { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; border: 1px solid var(--line-ui); border-left: 5px solid var(--accent); border-radius: 6px; background: var(--panel); color: var(--ink); cursor: pointer; text-align: left; }
.piano-bar:hover { border-color: var(--accent); }
.piano-bar[aria-pressed=true] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.piano-bar-label { font: 400 1.05rem var(--display); letter-spacing: .05em; }
.piano-bar-sub { font-size: .85rem; opacity: .8; }
.piano-icon { width: 46px; height: 24px; flex: none; border: 2px solid currentColor; border-radius: 3px;
  background: linear-gradient(90deg, transparent 0 calc(25% - 1px), currentColor calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), currentColor calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), currentColor calc(75% - 1px) 75%, transparent 75%); position: relative; }
.piano-icon::before, .piano-icon::after { content: ''; position: absolute; top: 0; width: 7px; height: 60%; background: currentColor; }
.piano-icon::before { left: calc(25% - 4px); } .piano-icon::after { left: calc(75% - 4px); }

/* Accords et arpégiateur. */
.chord-tools { display: grid; gap: 8px; padding-block: 4px; border-top: 1px dashed var(--line-ui); }
.tool-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.row-title { font: 400 .75rem var(--display); color: var(--muted); letter-spacing: .05em; }
.chord-pads { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; flex: 1 1 520px; min-width: 0; }
.chord-pad { display: grid; justify-items: center; gap: 1px; padding: 6px 4px; border: 1px solid var(--c, var(--accent)); border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.chord-pad .deg { font: 600 .7rem var(--mono); color: var(--muted); }
.chord-pad .name { font: 700 .95rem var(--body); }
.chord-pad kbd { font-size: .6rem; padding: 0 3px; opacity: .7; }
.chord-pad:hover { background: var(--cell-on); }
.chord-pad.on { background: var(--c, var(--accent)); color: var(--panel); }
.chord-pad.on .deg { color: var(--panel); }
.arp-switch { font-weight: 700; color: var(--ink); }
.arp-opts.off { opacity: .45; }
.pkey.flash { box-shadow: inset 0 -10px 0 var(--playhead); }
.rec-target b { color: var(--c); font: 400 .8rem var(--display); }
.btn.rec { color: var(--rec); border-color: var(--rec); min-width: 9.5em; }
.btn.rec[aria-pressed=true] { background: var(--rec); color: #fff; border-color: var(--rec); }
.btn.close { margin-left: auto; }
body.recording .pos { color: var(--rec); border-color: var(--rec); }
body.recording #piano-toggle { border-color: var(--rec); }
.piano-keys { position: relative; display: flex; height: 132px; user-select: none; -webkit-user-select: none; touch-action: none; }
.pkey { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; padding-bottom: 6px; cursor: pointer; }
.pkey.white { flex: 1 1 0; min-width: 0; background: var(--key-white); border: 1px solid var(--line-ui); border-radius: 0 0 5px 5px; }
.pkey.black { position: absolute; top: 0; width: calc(100% / 15 * .62); height: 60%; background: var(--key-black); border-radius: 0 0 4px 4px; z-index: 1; }
.pkey.on.white { background: var(--c, var(--accent)); }
.pkey.on.black { background: var(--c, var(--accent)); }
.pkey-name { font: .62rem var(--mono); color: var(--key-label); }
.pkey kbd { font-size: .62rem; padding: 0 3px; opacity: .8; }
.pkey.black kbd { background: transparent; border-color: rgba(255,255,255,.3); color: #cfd8de; }
.piano-keys.pads { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.pkey.pad.ambient { border-style: dashed; }
.pkey.pad { border: 1px solid var(--noise); border-radius: 6px; color: var(--noise); justify-content: center; }
.pkey.pad .pkey-name { font: 400 .72rem var(--display); color: var(--noise); text-align: center; }
.pkey.pad.on { background: var(--noise); }
.pkey.pad.on .pkey-name { color: var(--panel); }
@media (max-width: 640px) {
  .pkey kbd { display: none; }
  .piano-keys { height: 96px; }
  .piano { padding: 10px; gap: 8px; }
  .piano .bar-tools { gap: 6px 10px; font-size: .8rem; }
  .piano .bar-tools label { font-size: .78rem; }
  .pkey.pad .pkey-name { font-size: .62rem; text-align: center; }
  .piano-keys.pads { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .chord-pads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chord-pad kbd { display: none; }
  .piano-bar-sub { display: none; }
}

/* Avertissement téléphone / tablette. */
.mobile-warn { border-top: 4px solid var(--rec); }
.mobile-warn h2 { color: var(--rec); }
.mobile-url { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mobile-url code { font: .8rem var(--mono); background: var(--bg); border: 1px solid var(--line-ui); border-radius: 4px; padding: 4px 8px; overflow-wrap: anywhere; min-width: 0; user-select: all; }

/* Effets : barre d’ouverture et rack de modules à potentiomètres. */
.fx-bar { border-left-color: var(--noise); }
.fx-bar[aria-pressed=true] { background: var(--noise); border-color: var(--noise); color: var(--panel); }
.fx-icon { width: 26px; height: 26px; flex: none; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.fx-icon::after { content: ''; position: absolute; left: 50%; top: 2px; width: 2px; height: 9px; margin-left: -1px; background: currentColor; transform-origin: 1px 9px; transform: rotate(40deg); }
.fx { gap: 12px; }
.fx-top { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.fx-tracks { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: .85rem; }
.fx-chip { font: 600 .78rem var(--body); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--c); background: transparent; color: var(--c); cursor: pointer; }
.fx-chip[aria-pressed=true] { background: var(--c); color: var(--panel); }
.fx-rack { display: flex; flex-wrap: wrap; gap: 10px; }
.fx-unit { flex: 1 1 214px; min-width: 0; }
.fx-unit[data-fx=filter] { flex: 1.3 1 286px; }
.fx-unit { --led: var(--muted); background: var(--rack); border: 1px solid var(--rack-line); border-radius: 8px; padding: 10px 12px 12px; display: grid; gap: 4px; align-content: start; color: var(--rack-ink); }
.fx-unit.on { --led: var(--led-on); border-color: var(--led-on); }
.fx-head { display: flex; align-items: center; gap: 8px; }
.fx-head h3 { margin: 0; font: 400 .85rem var(--display); letter-spacing: .06em; }
.fx-led { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rack-line); background: var(--rack-led-off); cursor: pointer; padding: 0; flex: none; }
.fx-unit.on .fx-led { background: var(--led-on); box-shadow: 0 0 8px var(--led-on); border-color: var(--led-on); }
.fx-about { margin: 0 0 4px; font-size: .75rem; color: var(--rack-muted); }
.fx-knobs { display: flex; flex-wrap: wrap; gap: 6px 0; justify-content: space-around; }
.knob { display: grid; justify-items: center; width: 60px; cursor: ns-resize; user-select: none; -webkit-user-select: none; touch-action: none; border-radius: 6px; outline-offset: 1px; }
.knob svg { width: 48px; height: 48px; display: block; }
.knob-track { fill: none; stroke: var(--rack-line); stroke-width: 5; stroke-linecap: round; }
.knob-arc { fill: none; stroke: var(--led); stroke-width: 5; stroke-linecap: round; }
.knob-cap { fill: var(--rack-cap); stroke: var(--rack-line); stroke-width: 1.5; }
.knob-needle { stroke: var(--rack-ink); stroke-width: 3; stroke-linecap: round; }
.knob-value { font: 600 .6rem var(--mono); font-variant-numeric: tabular-nums; color: var(--rack-ink); white-space: nowrap; }
.knob-label { font-size: .7rem; color: var(--rack-muted); max-width: 100%; text-align: center; line-height: 1.15; hyphens: auto; overflow-wrap: anywhere; }
.knob:focus-visible { outline: 2px solid var(--accent); }

.about { max-width: 480px; border-top: 4px solid var(--accent); }

.foot { max-width: 1280px; margin: 20px auto 0; display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; color: var(--muted); font-size: .82rem; }
.foot .version { font-family: var(--mono); font-size: .78rem; }
.foot a, .contact a { color: var(--accent); font-weight: 700; }

/* Choix du thème. */
.theme { display: inline-flex; border: 1px solid var(--line-ui); border-radius: 4px; overflow: hidden; }
.theme-opt { font: 600 .78rem var(--body); padding: 6px 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.theme-opt + .theme-opt { border-left: 1px solid var(--line-ui); }
.theme-opt[aria-checked=true] { background: var(--ink); color: var(--panel); }

/* Styles et rythmes. */
.style-bar { border-left-color: var(--tri); }
.style-bar[aria-pressed=true] { background: var(--tri); border-color: var(--tri); color: var(--panel); }
.style-icon { width: 30px; height: 22px; flex: none; position: relative;
  background: linear-gradient(currentColor, currentColor) 0 100% / 5px 40% no-repeat, linear-gradient(currentColor, currentColor) 8px 100% / 5px 90% no-repeat,
    linear-gradient(currentColor, currentColor) 16px 100% / 5px 60% no-repeat, linear-gradient(currentColor, currentColor) 24px 100% / 5px 100% no-repeat; }
.styles { gap: 12px; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.style-card { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 8px 10px; border: 1px solid var(--line-ui); border-radius: 6px; background: var(--bg); color: var(--ink); cursor: pointer; }
.style-card:hover { border-color: var(--tri); }
.style-card[aria-checked=true] { border-color: var(--tri); background: var(--tri); color: var(--panel); }
.style-name { font: 700 .88rem var(--body); }
.style-meta { font: .68rem var(--mono); opacity: .75; }
.style-parts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: .85rem; }

/* Menu contextuel du séquenceur. */
.ctx-menu { position: fixed; z-index: 20; min-width: 210px; display: grid; padding: 4px; background: var(--panel); border: 1px solid var(--line-ui); border-radius: 6px; box-shadow: 0 8px 24px rgba(10, 16, 20, .28); }
.ctx-item { display: flex; justify-content: space-between; gap: 18px; align-items: center; font: 400 .85rem var(--body); color: var(--ink); background: none; border: 0; border-radius: 4px; padding: 6px 10px; cursor: pointer; text-align: left; }
.ctx-item:hover:not(:disabled), .ctx-item:focus-visible { background: var(--selection); outline: none; }
.ctx-item:disabled { opacity: .4; cursor: default; }
.ctx-item kbd { color: var(--muted); }

/* Mode Simple : les réglages détaillés (.adv) sont masqués, jamais supprimés du projet. */
[data-mode="simple"] .adv { display: none !important; }
[data-mode="advanced"] .simple-only { display: none !important; }
[data-mode="simple"] .head { grid-template-columns: 5.6rem 6.6rem auto auto; }

/* PURE / ENHANCED : réglage d’écoute. */
.fx-body { display: grid; gap: 12px; }
.fx-body.pure { opacity: .4; }
.head .pan:disabled { opacity: .25; cursor: default; }

/* Langue, lien vers le guide, bandeau de bienvenue. */
.brand { display: flex; align-items: center; gap: 12px; }
.lang { font: 600 .78rem var(--body); padding: 5px 6px; }
a.btn { display: inline-block; text-decoration: none; line-height: normal; }
.welcome { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--accent); border-left: 5px solid var(--accent); border-radius: 6px; }
.welcome p { margin: 0; flex: 1 1 320px; }
.welcome-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 400 1rem var(--display); }