:root {
    --bg: #14181a;
    --panel: #1c2226;
    --border: #2a3438;
    --accent: #d99a4e;
    --accent-2: #4ea3d9;
    --text: #e8e8e0;
    --text-dim: #8a9498;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
}

#app-header {
    padding: 14px 20px 8px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

#btn-reset {
    position: absolute;
    top: 14px;
    right: 20px;
    background: rgba(255,255,255,0.06);
    color: #ff8888;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}

#btn-reset:hover {
    background: #3a2020;
    border-color: #ff8888;
}

#btn-help {
    position: absolute;
    top: 14px;
    right: 226px;
    background: rgba(255,255,255,0.06);
    color: var(--accent-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}

#btn-help:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-2);
}

#btn-about {
    position: absolute;
    top: 14px;
    right: 138px;
    background: rgba(255,255,255,0.06);
    color: var(--accent-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}

#btn-about:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-2);
}

#help-panel {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

#help-panel-inner {
    position: relative;
    max-width: 720px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}

#help-panel-inner h2 {
    margin: 0 0 14px;
    color: var(--accent);
}

#help-panel-inner h3 {
    margin: 18px 0 6px;
    color: var(--accent-2);
    font-size: 14px;
}

#help-panel-inner p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

#help-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
}

#help-close:hover {
    background: rgba(255,255,255,0.12);
}

#help-shortcuts {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 6px;
}

#help-shortcuts th {
    text-align: left;
    color: var(--accent);
    padding: 8px 6px 4px;
    border-bottom: 1px solid var(--border);
}

#help-shortcuts td {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: top;
}

#help-shortcuts td:first-child {
    white-space: nowrap;
    color: var(--accent-2);
    font-family: 'Consolas', monospace;
    font-weight: bold;
    padding-right: 14px;
}

#app-header h1 {
    margin: 0;
    font-size: 22px;
    color: var(--accent);
    letter-spacing: 1px;
}

#app-header .subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-dim);
}

.zone {
    margin: 14px 20px;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.zone h2 {
    margin: 0 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.placeholder {
    color: var(--text-dim);
    font-style: italic;
    font-size: 12px;
    margin: 0;
}

/* --- Zone 1 : timeline --- */
#timeline-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

#timeline-toolbar button {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}

#timeline-toolbar button:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-2);
}

#timeline-toolbar button.tl-rec-on {
    background: #d02020;
    border-color: #ff6b6b;
    color: #fff;
    animation: nabra-recpulse 1s ease-in-out infinite;
}

#tl-loop.active {
    background: var(--accent);
    border-color: #8a5f28;
    color: #14181a;
}

#tl-close {
    color: #ff8888;
}

#tl-close:hover {
    background: #3a2020;
    border-color: #ff8888;
}

/* --- Menu contextuel --- */
.ctx-menu {
    position: fixed;
    z-index: 9999;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

.hz-editor {
    position: fixed;
    z-index: 10000;
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--panel);
    border: 1px solid var(--accent-2);
    border-radius: 6px;
    padding: 6px 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

.hz-editor input {
    width: 80px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    text-align: right;
}

.hz-editor-unit {
    font-size: 11px;
    color: var(--text-dim);
}

.text-prompt-editor {
    position: fixed;
    z-index: 10000;
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--panel);
    border: 1px solid var(--accent-2);
    border-radius: 6px;
    padding: 6px 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

.text-prompt-editor input {
    width: 180px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
}

/* Modales génériques (bibliothèque d'instruments, réglages avancés) — même
   gabarit que #help-panel. */
.nabra-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nabra-modal-inner {
    position: relative;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}

.nabra-modal-inner h2 {
    margin: 0 0 14px;
    color: var(--accent);
}

.nabra-modal-inner h3 {
    margin: 18px 0 6px;
    color: var(--accent-2);
    font-size: 14px;
}

.nabra-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
}

.nabra-modal-close:hover {
    background: rgba(255,255,255,0.12);
}

.lib-hint {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}

.lib-empty {
    font-size: 13px;
    color: var(--text-dim);
}

.lib-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}

.lib-item-del {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
}

.lib-item-del:hover {
    background: rgba(220,60,60,0.25);
}

.fx-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
    font-size: 12px;
}

#fx-enabled-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-2);
    background: rgba(78,163,217,0.08);
    border: 1px solid rgba(78,163,217,0.3);
    border-radius: 6px;
    cursor: pointer;
}
#fx-enabled-row input[type="checkbox"] {
    accent-color: var(--accent-2);
    cursor: pointer;
}

.fx-row label {
    width: 130px;
    flex-shrink: 0;
    color: var(--text-dim);
}

.fx-row input[type="range"] {
    flex: 1;
}

.ctx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    background: transparent;
    color: var(--text);
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.ctx-item:hover {
    background: rgba(255,255,255,0.1);
}

.ctx-item:disabled {
    color: var(--text-dim);
    cursor: default;
}

.ctx-item:disabled:hover {
    background: transparent;
}

.ctx-shortcut {
    font-size: 10px;
    color: var(--text-dim);
}

.ctx-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
}

.cb-close {
    color: #ff8888;
}

.cb-close:hover {
    background: #3a2020;
    border-color: #ff8888;
}

@keyframes nabra-recpulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

#tl-filename {
    margin-left: 6px;
    font-size: 11px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tl-canvas {
    display: block;
    width: 100%;
    height: 130px;
    background: #0d1014;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: text;
}

#tl-scrollbar {
    position: relative;
    height: 10px;
    margin-top: 5px;
    background: #0d1014;
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
}

#tl-scroll-thumb {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0;
    width: 100%;
    background: var(--accent-2);
    opacity: 0.5;
    border-radius: 4px;
}

#tl-info {
    margin-top: 6px;
    font-size: 11px;
    color: var(--accent-2);
    font-family: Consolas, monospace;
    min-height: 1.1em;
}

/* --- Zone 2 : comparateur --- */
#compare-boxes {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.compare-box {
    flex: 1;
    min-height: 90px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.15s, background 0.15s;
}

.compare-box:hover {
    border-color: var(--accent-2);
}

.compare-box h3 {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--accent-2);
}

.cb-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.cb-toolbar button {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 4px 9px;
    cursor: pointer;
    font-size: 11px;
}

.cb-toolbar button:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-2);
}

.cb-toolbar button.cb-rec-on {
    background: #d02020;
    border-color: #ff6b6b;
    color: #fff;
}

.cb-wave {
    display: block;
    width: 100%;
    height: 50px;
    background: #0d1014;
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
}

.cb-info {
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--text-dim);
}

#effect-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

#effect-row .placeholder {
    padding: 4px 0;
}

#effect-row .fx-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 140px;
    padding: 6px 8px;
}

#btn-comparer {
    background: var(--accent) !important;
    color: #1a1208 !important;
    border: none !important;
    font-weight: bold;
    margin-left: 6px;
}

#btn-analyze {
    background: var(--accent-2) !important;
    color: #0a1a22 !important;
    border: none !important;
    font-weight: bold;
}

#analysis-results {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
}

#analysis-results h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: var(--accent-2);
}

.analysis-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.analysis-name {
    font-weight: bold;
    flex: 0 0 140px;
}

.analysis-count {
    font-size: 11px;
    color: var(--text-dim);
    flex: 0 0 100px;
}

.analysis-params {
    font-size: 11px;
    color: var(--text-dim);
    flex: 1 1 auto;
}

.analysis-add {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.analysis-add:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-2);
}

.analysis-close {
    margin-top: 10px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 4px 12px;
    font-size: 11px;
    cursor: pointer;
}

#btn-comparer:hover {
    filter: brightness(1.1);
}

/* --- Zone 3 : synthé --- */
#synth-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#led-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 10px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.led-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: radial-gradient(circle at 35% 30%, #3a3a3a, #161616);
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.led-btn:not(:disabled):hover {
    border-color: var(--accent-2);
}

.led-btn:disabled {
    cursor: default;
    opacity: 0.35;
}

.led-btn.led-active {
    background: radial-gradient(circle at 35% 30%, #ffd27a, var(--accent));
    border-color: var(--accent);
    box-shadow: 0 0 10px 2px rgba(217, 154, 78, 0.7);
}

.fx-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.fx-card:last-child {
    margin-bottom: 0;
}

.fx-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

.fx-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: bold;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fx-name:hover {
    border-color: var(--border);
}

.fx-name:focus {
    outline: none;
    background: rgba(255,255,255,0.06);
    border-color: var(--accent-2);
}

.fx-badge {
    flex: 0 0 auto;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid;
}

.fx-badge-attaque {
    color: var(--accent);
    border-color: var(--accent);
}

.fx-badge-modulation {
    color: var(--accent-2);
    border-color: var(--accent-2);
}

.fx-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.fx-dosage {
    flex: 1;
}

.fx-dosage-val {
    font-size: 10px;
    color: var(--text-dim);
    width: 34px;
    text-align: right;
}

.fx-row button {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 4px 9px;
    font-size: 11px;
    cursor: pointer;
}

.fx-row button:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-2);
}

.fx-del {
    flex: 0 0 auto;
}

.fx-param-label {
    font-size: 10px;
    color: var(--text-dim);
    flex: 0 0 60px;
    white-space: nowrap;
}

.fx-param {
    flex: 1;
}

.fx-param-val {
    font-size: 10px;
    color: var(--text-dim);
    width: 46px;
    text-align: right;
    white-space: nowrap;
}

.fx-row button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.synth-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.synth-header .adsr-controls {
    margin-left: auto;
}

#instrument-select,
#midi-device-select,
#scale-select,
#octave-select,
#tonic-select {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}

#midi-device-select {
    color: var(--accent-2);
    max-width: 240px; text-overflow: ellipsis;
    border-color: rgba(78,163,217,0.4);
}

#midi-transpose {
    width: 46px;
    background: rgba(255,255,255,0.06);
    color: var(--accent-2);
    border: 1px solid rgba(78,163,217,0.4);
    border-radius: 5px;
    padding: 5px 6px;
    font-size: 12px;
    text-align: center;
}

#midi-transpose-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-right: 4px;
}

#scale-select {
    max-width: 160px;
}

/* Le menu déroulant natif ignore le fond de l'appli : texte noir sur blanc
   pour rester lisible, comme demandé. */
#scale-select option,
#scale-select optgroup {
    background: #ffffff;
    color: #111111;
}

#scale-add-btn {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

#scale-add-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-2);
}

#scale-add-name,
#scale-add-group-name {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    width: 110px;
}

#scale-add-group {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    max-width: 140px;
}

#scale-add-group option {
    background: #ffffff;
    color: #111111;
}

#tonic-select {
    color: var(--accent);
    border-color: rgba(217,154,78,0.4);
    font-weight: bold;
}

#note-display {
    background: #000000;
    color: #33ff55;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Consolas', monospace;
    min-width: 90px;
    text-align: center;
    white-space: nowrap;
}

#mode-toggle-btn {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

#mode-toggle-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-2);
}

#mode-toggle-btn.pad-mode {
    color: var(--accent);
    border-color: rgba(217,154,78,0.5);
}

#btn-advanced-fx {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

#btn-advanced-fx:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-2);
}

/* --- Ligne microtonale (au-dessus du titre "Synthé") --- */
#micro-line-wrap {
    margin-bottom: 12px;
}

#micro-steps-row {
    position: relative;
    height: 30px;
    margin-bottom: 4px;
}

.micro-step {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.micro-step-label {
    font-size: 8px;
    color: var(--text-dim);
    white-space: nowrap;
}

.micro-step-input {
    width: 44px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 3px;
    font-size: 10px;
    text-align: center;
}

.micro-step-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#micro-line {
    position: relative;
    height: 26px;
    background: #0d1014;
    border: 1px solid var(--border);
    border-radius: 6px;
}

#micro-line-labels {
    position: relative;
    height: 14px;
    margin-top: 2px;
}

/* Notes naturelles : degrés fixes de la gamme, définis par les 7 intervalles
   éditables ci-dessus. */
.micro-natural {
    position: absolute;
    top: 3px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7cc4f0, var(--accent-2));
    border: 1px solid #2a6a8a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    cursor: ew-resize;
    z-index: 1;
}

.micro-natural.micro-tonic {
    background: radial-gradient(circle at 35% 30%, #ffd27a, var(--accent));
    border-color: #8a5f28;
    cursor: default;
    z-index: 2;
}

.micro-natural:focus,
.micro-sharp:focus {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

/* Note en cours de jeu sur le synthé — repère mis en surbrillance. */
.micro-natural.micro-active {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.7), 0 1px 3px rgba(0,0,0,0.6);
    filter: brightness(1.35);
}

/* Dièses : plus petits et figés par défaut (suivent le milieu de leur
   intervalle) — double-clic pour les libérer et les glisser indépendamment. */
.micro-sharp {
    position: absolute;
    top: 8px;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: #4a5560;
    border: 1px solid #2c343b;
    cursor: default;
    opacity: 0.75;
}

.micro-sharp-unlocked {
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    top: 6px;
    background: radial-gradient(circle at 35% 30%, #f0c47c, #c98a3a);
    border: 1px solid #8a5f28;
    cursor: ew-resize;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    z-index: 1;
}

.micro-sharp.micro-active {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.7);
    filter: brightness(1.4);
}

.micro-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--text-dim);
    white-space: nowrap;
}

.micro-label.micro-tonic {
    color: var(--accent);
    font-weight: bold;
}

.adsr-controls {
    display: flex;
    gap: 12px;
}

.adsr-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.adsr-slider label {
    font-size: 10px;
    color: var(--text-dim);
}

.adsr-slider input[type="range"] {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 18px;
    height: 50px;
    cursor: ns-resize;
    accent-color: var(--accent);
}

#synth-keyboard-wrap {
    position: relative;
    padding-top: 16px;
}

/* Curseur de justesse : suit en direct la note captée au micro, rouge par
   défaut, vert quand elle tombe juste sur une naturelle (Do Ré Mi Fa Sol La Si)
   de la gamme en cours. */
#mic-pitch-cursor {
    position: absolute;
    top: 0;
    width: 4px;
    height: 12px;
    margin-left: -2px;
    background: #e0453a;
    border-radius: 2px;
    display: none;
    z-index: 5;
    box-shadow: 0 0 5px rgba(224,69,58,0.85);
    pointer-events: none;
}

#mic-pitch-cursor.in-tune {
    background: #4caf50;
    box-shadow: 0 0 5px rgba(76,175,80,0.9);
}

.piano-keyboard {
    height: 140px;
    display: flex;
    position: relative;
    border-radius: 6px;
    overflow: visible;
}

.white-key {
    flex: 1;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: linear-gradient(180deg, #f5f5f0 0%, #d8d8d2 100%);
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 5px solid #777;
    border-radius: 0 0 4px 4px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.05s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 6px;
}

.key-label {
    font-size: 10px;
    font-weight: bold;
    color: #444;
    pointer-events: none;
    user-select: none;
}

/* Touche(s) portant la tonique de la gamme en cours — même jaune que la
   tonique sur la ligne microtonale. */
.white-key.key-tonic {
    background: linear-gradient(180deg, #f5f5f0 0%, color-mix(in srgb, var(--accent) 45%, #d8d8d2) 100%);
    border-bottom-color: var(--accent);
}

.black-key.key-tonic {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, #444) 0%, color-mix(in srgb, var(--accent) 60%, #111) 100%);
    border-bottom-color: var(--accent);
}

.white-key.playing {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, white) 0%, var(--accent) 100%);
    transform: translateY(3px);
    border-bottom: 2px solid #8a5f28;
}

/* Petit repère (mode Pad) : cette touche blanche porte un échantillon collé
   depuis la piste — se répète, transposé, sur les autres octaves. */
.white-key.has-pad-sample::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 3px rgba(78,163,217,0.8);
}

.black-key {
    position: absolute;
    top: 0;
    height: 60%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #444 0%, #111 100%);
    border: 1px solid #000;
    border-bottom: 3px solid #000;
    border-radius: 0 0 3px 3px;
    z-index: 2;
    cursor: pointer;
}

.black-key.playing {
    background: linear-gradient(180deg, var(--accent) 0%, #8a5f28 100%);
}

/* Aide : sous-titres, listes et encadrés (volet Déclencheurs) */
#help-panel-inner h4 { margin: 14px 0 5px; color: var(--accent); font-size: 13px; }
#help-panel-inner ol, #help-panel-inner ul { margin: 0 0 8px; padding-left: 22px; font-size: 13px; line-height: 1.5; color: var(--text); }
#help-panel-inner li { margin-bottom: 3px; }
#help-panel-inner .aide-astuce { margin: 6px 0 10px; padding: 8px 12px; font-size: 13px; line-height: 1.5;
    background: rgba(78,163,217,0.08); border-left: 3px solid var(--accent-2); border-radius: 4px; }

/* ==================== BOÎTE À RYTHME ==================== */
#btn-boite {
    position: absolute; top: 14px; right: 312px;
    width: 31px; height: 29px; padding: 0;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 6px;
    font-size: 16px; line-height: 1; cursor: pointer;
}
#btn-boite:hover { background: rgba(255,255,255,0.12); border-color: var(--accent); }
#btn-boite.actif { border-color: var(--accent); background: rgba(217,154,78,0.18); }
#btn-boite.joue { animation: br-pulse 1s ease-in-out infinite; }
@keyframes br-pulse { 50% { box-shadow: 0 0 0 3px rgba(217,154,78,0.45); } }

#boite-rythme {
    --br-echelle: 1; --br-acc: var(--accent);
    display: none; position: fixed; z-index: 950;
    flex-direction: column;
    min-width: 560px; min-height: 360px; max-width: 100vw; max-height: 100vh;
    background: #171c1f; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.65); color: var(--text);
}
#boite-rythme.ouvert { display: flex; }
#boite-rythme.plein { left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; max-width: none; max-height: none; border-radius: 0; }
#boite-rythme.plein .br-poignee { display: none; }
#boite-rythme .br-tete {
    display: flex; align-items: center; gap: 6px; flex: none;
    padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border);
    background: linear-gradient(#20272b, #1a2023); border-radius: 8px 8px 0 0;
    font-size: 13px; cursor: move; user-select: none;
}
#boite-rythme.plein .br-tete { border-radius: 0; }
#boite-rythme .br-titre { font-weight: 700; color: var(--br-acc); }
#boite-rythme .br-position { flex: 1; color: var(--text-dim); font-variant-numeric: tabular-nums; padding-left: 10px; }
#boite-rythme .br-tete button {
    background: none; border: 1px solid transparent; border-radius: 4px; color: var(--text-dim);
    cursor: pointer; font-size: 13px; min-width: 26px; height: 24px; padding: 0 4px;
}
#boite-rythme .br-tete button:hover { color: var(--text); border-color: var(--border); background: rgba(255,255,255,0.06); }
#boite-rythme .br-tete .br-fermer:hover { color: #fff; background: #c84040; border-color: #c84040; }

#boite-rythme .br-corps {
    font-size: calc(12px * var(--br-echelle));
    flex: 1; min-height: 0; overflow: auto;
    display: flex; flex-direction: column; gap: 0.6em; padding: 0.7em 0.9em;
}
#boite-rythme .br-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em 0.9em; flex: none; }
#boite-rythme .br-groupe { display: inline-flex; align-items: center; gap: 0.35em; }
#boite-rythme label { color: var(--text-dim); }
#boite-rythme .br-coche { display: inline-flex; align-items: center; gap: 0.3em; cursor: pointer; }
#boite-rythme .br-sep { width: 1px; align-self: stretch; background: var(--border); }
#boite-rythme input[type=range] { width: 7em; accent-color: var(--br-acc); }
#boite-rythme input[type=checkbox] { accent-color: var(--br-acc); }
#boite-rythme select, #boite-rythme input[type=text], #boite-rythme input[type=number] {
    background: #232b30; color: var(--text); border: 1px solid var(--border); border-radius: 5px;
    padding: 0.28em 0.45em; font-size: 1em;
}
#boite-rythme input[type=number] { width: 4.3em; }
#boite-rythme .br-chaine { width: 6.5em; text-transform: uppercase; letter-spacing: 0.1em; }
#boite-rythme .br-kit-nom { width: 8em; }
#boite-rythme .br-corps button {
    background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 5px;
    padding: 0.3em 0.65em; font-size: 1em; cursor: pointer; white-space: nowrap;
}
#boite-rythme .br-corps button:hover:not(:disabled) { background: rgba(255,255,255,0.13); }
#boite-rythme .br-corps button:disabled { opacity: 0.35; cursor: default; }
#boite-rythme .br-corps button.actif { background: var(--br-acc); border-color: var(--br-acc); color: #14181a; }
#boite-rythme .br-play, #boite-rythme .br-rec { font-size: 1.25em !important; min-width: 2.4em; }
#boite-rythme .br-rec { color: #ff6060 !important; }
#boite-rythme .br-rec.actif { background: #d83a3a !important; border-color: #d83a3a !important; color: #fff !important; animation: br-pulse 1s infinite; }
#boite-rythme .br-motif { min-width: 2.1em; padding: 0.3em 0.4em !important; font-weight: 700; }
#boite-rythme .br-motif.plein { border-color: rgba(217,154,78,0.6); color: var(--br-acc); }
#boite-rythme .br-motif.actif { background: var(--br-acc); color: #14181a; }
#boite-rythme .br-motif.joue { box-shadow: inset 0 -3px 0 #4ed99a; }
#boite-rythme .br-motif.attente { animation: br-clign 0.5s steps(2) infinite; }
@keyframes br-clign { 50% { background: rgba(217,154,78,0.4); } }

/* Séquenceur */
#boite-rythme .br-seq { flex: 1 1 16em; min-height: 15em; display: grid; grid-template-columns: 12em 1fr; gap: 0 0.4em; }
#boite-rythme .br-entetes { display: grid; grid-template-rows: repeat(8, 1fr); }
#boite-rythme .br-entete {
    display: flex; align-items: center; gap: 0.35em; padding: 0 0.4em; cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.35); min-height: 0; overflow: hidden;
}
#boite-rythme .br-entete.choisi { background: rgba(255,255,255,0.07); }
#boite-rythme .br-entete.muet { opacity: 0.45; }
#boite-rythme .br-entete-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#boite-rythme .br-entete button { padding: 0 0.35em !important; font-size: 0.85em !important; line-height: 1.5; }
#boite-rythme .br-pastille { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--c); flex: none; display: inline-block; margin-right: 0.3em; }
#boite-rythme .br-grille-vue { width: 100%; height: 100%; min-height: 0; background: #0f1315; border-radius: 4px; cursor: crosshair; display: block; }

/* Bas : pads, édition, micro */
#boite-rythme .br-bas { display: grid; grid-template-columns: auto minmax(15em, 1fr); gap: 1em; flex: none; align-items: start; }
#boite-rythme .br-micro { grid-column: 1 / -1; }
#boite-rythme.large .br-bas { grid-template-columns: auto minmax(16em, 1fr) minmax(16em, 1fr); }
#boite-rythme.large .br-micro { grid-column: auto; }
#boite-rythme .br-pads { display: grid; grid-template-columns: repeat(4, 5.6em); grid-auto-rows: 5.6em; gap: 0.5em; }
#boite-rythme .br-pad {
    --eclat: 0; position: relative; border-radius: 7px; cursor: pointer; user-select: none; overflow: hidden;
    background: linear-gradient(160deg, #2e373c, #20272b); border: 1px solid #3a464c;
    box-shadow: inset 0 -3px 0 var(--c), 0 2px 4px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 0.35em 0.4em;
}
#boite-rythme .br-pad:hover { border-color: var(--c); }
#boite-rythme .br-pad.choisi { border-color: var(--c); box-shadow: inset 0 -3px 0 var(--c), 0 0 0 2px var(--c); }
#boite-rythme .br-pad.muet { opacity: 0.5; }
#boite-rythme .br-pad.survol { outline: 2px dashed var(--c); }
#boite-rythme .br-pad.frappe::after {
    content: ""; position: absolute; inset: 0; background: var(--c); opacity: 0; pointer-events: none;
    animation: br-eclat 0.22s ease-out;
}
@keyframes br-eclat { from { opacity: calc(0.75 * var(--eclat)); } to { opacity: 0; } }
#boite-rythme .br-pad-num { position: absolute; top: 0.3em; left: 0.45em; font-weight: 700; color: var(--c); }
#boite-rythme .br-pad-touche { position: absolute; top: 0.3em; right: 0.45em; font-size: 0.85em; color: var(--text-dim); border: 1px solid #44525a; border-radius: 3px; padding: 0 0.3em; }
#boite-rythme .br-pad-nom { font-size: 0.85em; line-height: 1.15; max-height: 2.3em; overflow: hidden; position: relative; z-index: 1; }
#boite-rythme .br-pad-decl { position: absolute; top: 1.7em; right: 0.4em; font-size: 0.8em; color: #4ed99a; }
#boite-rythme .br-edition, #boite-rythme .br-micro {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 6px; padding: 0.5em 0.7em;
    display: flex; flex-direction: column; gap: 0.4em; min-width: 0;
}
#boite-rythme .br-sous-titre { font-weight: 700; display: flex; align-items: center; gap: 0.3em; }
#boite-rythme .br-sous-titre.br-petit { font-weight: 600; color: var(--text-dim); margin-top: 0.2em; }
#boite-rythme .br-ed-nom { flex: 1; min-width: 4em; margin-left: 0.4em; }
#boite-rythme .br-ligne { display: flex; align-items: center; gap: 0.45em; flex-wrap: wrap; }
#boite-rythme .br-ligne > label:first-child:not(.br-coche) { width: 6.3em; }
#boite-rythme .br-ligne input[type=range] { flex: 1; min-width: 5em; }
#boite-rythme .br-ligne > span { min-width: 3.6em; text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }
#boite-rythme .br-ed-source { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
#boite-rythme .br-niveau { flex: 1; min-width: 4em; height: 0.7em; background: rgba(0,0,0,0.4); border-radius: 4px; overflow: hidden; }
#boite-rythme .br-niveau div { height: 100%; width: 0; background: var(--br-acc); transition: width 60ms linear; }
#boite-rythme .br-dernier { min-height: 1.3em; color: var(--text-dim); }
#boite-rythme .br-dernier b { color: var(--text); }
#boite-rythme .br-info { flex: none; min-height: 1.3em; color: var(--accent-2); }

/* Poignées de redimensionnement */
#boite-rythme .br-poignee { position: absolute; z-index: 2; }
#boite-rythme .br-poignee[data-bord="n"]  { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
#boite-rythme .br-poignee[data-bord="s"]  { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
#boite-rythme .br-poignee[data-bord="w"]  { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
#boite-rythme .br-poignee[data-bord="e"]  { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
#boite-rythme .br-poignee[data-bord="nw"] { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
#boite-rythme .br-poignee[data-bord="se"] { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--text-dim) 50%, var(--text-dim) 58%, transparent 58%, transparent 70%, var(--text-dim) 70%, var(--text-dim) 78%, transparent 78%); }
#boite-rythme .br-poignee[data-bord="ne"] { top: -3px; right: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
#boite-rythme .br-poignee[data-bord="sw"] { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: nesw-resize; }

/* Boîte à rythme : Composer à l'oreille */
#boite-rythme .br-compo {
    display: none; position: absolute; inset: 0; z-index: 5;
    background: rgba(8,10,12,0.6); border-radius: inherit;
    align-items: flex-start; justify-content: center; overflow: auto; padding: 3em 1em;
    font-size: calc(12px * var(--br-echelle));
}
#boite-rythme .br-compo.ouvert { display: flex; }
#boite-rythme .br-compo-boite {
    width: min(46em, 100%); background: #1d2427; border: 1px solid #3a464c; border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6); padding: 0.9em 1.1em; display: flex; flex-direction: column; gap: 0.55em;
}
#boite-rythme .br-compo-tete { display: flex; align-items: center; font-weight: 700; font-size: 1.15em; color: var(--br-acc); }
#boite-rythme .br-compo-tete button { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1em; }
#boite-rythme .br-compo-tete button:hover { color: #fff; }
#boite-rythme .br-compo-aide { margin: 0; color: var(--text-dim); line-height: 1.45; }
#boite-rythme .br-compo .br-ligne > label:first-child:not(.br-coche) { width: 9em; }
#boite-rythme .br-compo button {
    background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 5px;
    padding: 0.35em 0.75em; font-size: 1em; cursor: pointer; white-space: nowrap;
}
#boite-rythme .br-compo button:hover { background: rgba(255,255,255,0.13); }
#boite-rythme .br-compo button.actif { background: #d83a3a; border-color: #d83a3a; color: #fff; animation: br-pulse 1s infinite; }
#boite-rythme .br-compo-rec { color: #ff7070 !important; }
#boite-rythme .br-compo-actions { padding-top: 0.3em; }
#boite-rythme .br-compo-temps { min-width: 3.5em; color: var(--text-dim); font-variant-numeric: tabular-nums; }
#boite-rythme .br-compo-etat { min-height: 1.3em; line-height: 1.45; }
#boite-rythme .br-compo-resultat { display: flex; flex-direction: column; gap: 0.4em; border-top: 1px solid var(--border); padding-top: 0.5em; }
#boite-rythme .br-compo-resultat:empty { display: none; }
#boite-rythme .br-compo-nom { min-width: 13em; }
#boite-rythme .br-compo-nom small { color: var(--text-dim); }
#boite-rythme .br-compo-pad { border-left: 4px solid var(--c) !important; }
#boite-rythme .br-compo-n { color: var(--text-dim); }
#boite-rythme .br-compo-ok { margin-left: auto; background: var(--br-acc) !important; color: #14181a !important; border-color: var(--br-acc) !important; font-weight: 700; }
#boite-rythme .br-composer, #boite-rythme .br-ed-composer { color: #b8a6ff !important; }

/* Boîte à rythme : charger un dossier de sons */
#boite-rythme .br-dossier-ligne { flex-wrap: nowrap; }
#boite-rythme .br-dossier-pad { min-width: 7.5em; display: inline-flex; align-items: center; color: var(--c); font-weight: 600; }
#boite-rythme .br-dossier-sel { flex: 1; min-width: 0; border-left: 4px solid var(--c) !important; }
#boite-rythme .br-dossier-kit { flex: 1; min-width: 6em; }
#boite-rythme .br-tete .br-reinit { color: #ff9a8a; padding: 0 8px; }
#boite-rythme .br-tete .br-reinit:hover { color: #fff; background: #8a2c2c; border-color: #c84040; }

/* ==================== FENÊTRE HARMONIQUES (harmoniques.js) ==================== */
#harmoniques {
    --hm-echelle: 1;
    display: none; position: fixed; z-index: 960;
    flex-direction: column;
    min-width: 620px; min-height: 420px; max-width: 100vw; max-height: 100vh;
    background: #171c1f; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.65); color: var(--text);
    font-size: calc(13px * var(--hm-echelle));
}
#harmoniques.ouvert { display: flex; }
#harmoniques.plein { left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; max-width: none; max-height: none; border-radius: 0; }
#harmoniques.plein .hm-poignee { display: none; }
#harmoniques .hm-tete {
    display: flex; align-items: center; gap: 6px; flex: none;
    padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border);
    background: linear-gradient(#20272b, #1a2023); border-radius: 8px 8px 0 0;
    cursor: move; user-select: none;
}
#harmoniques.plein .hm-tete { border-radius: 0; }
#harmoniques .hm-titre { font-weight: 700; color: var(--accent); }
#harmoniques .hm-source { flex: 1; color: var(--text-dim); font-variant-numeric: tabular-nums; padding-left: 10px; }
#harmoniques .hm-tete button {
    background: transparent; color: var(--text-dim); border: 1px solid transparent; border-radius: 4px;
    min-width: 28px; height: 24px; cursor: pointer; font-size: 13px;
}
#harmoniques .hm-tete button:hover { color: var(--text); border-color: var(--border); background: rgba(255,255,255,0.06); }
#harmoniques .hm-tete .hm-fermer:hover { color: #fff; background: #c84040; border-color: #c84040; }
#harmoniques .hm-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); flex: none; }
#harmoniques .hm-barre button, #harmoniques .hm-barre select {
    background: #232b2f; color: var(--text); border: 1px solid var(--border); border-radius: 5px;
    padding: 4px 10px; font-size: calc(13px * var(--hm-echelle)); cursor: pointer;
}
#harmoniques .hm-barre button:hover:not(:disabled) { border-color: var(--accent); }
#harmoniques .hm-barre button:disabled { opacity: .4; cursor: default; }
#harmoniques .hm-barre button.actif { background: var(--accent); color: #14181a; border-color: var(--accent); }
#harmoniques .hm-f0 { color: #4ed99a; font-weight: 700; min-width: 170px; }
#harmoniques .hm-groupe { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
#harmoniques .hm-corps { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 10px 12px 6px; }
#harmoniques .hm-graphes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#harmoniques .hm-barres { flex: 3; min-height: 160px; width: 100%; background: #12171a; border: 1px solid var(--border); border-radius: 6px; }
#harmoniques .hm-legende-temps { color: var(--text-dim); font-size: calc(11px * var(--hm-echelle)); padding-top: 4px; }
#harmoniques .hm-f0-courbe { flex: none; height: calc(56px * var(--hm-echelle)); width: 100%; background: #12171a; border: 1px solid var(--border); border-radius: 6px; cursor: crosshair; }
#harmoniques .hm-temps { flex: 2; min-height: 110px; width: 100%; background: #12171a; border: 1px solid var(--border); border-radius: 6px; cursor: crosshair; }
#harmoniques .hm-infos { width: calc(250px * var(--hm-echelle)); flex: none; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
#harmoniques .hm-chiffre { background: #1d2427; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; }
#harmoniques .hm-chiffre span { color: var(--text-dim); font-size: calc(11px * var(--hm-echelle)); }
#harmoniques .hm-chiffre b { font-size: calc(17px * var(--hm-echelle)); color: var(--text); }
#harmoniques .hm-chiffre i { color: var(--text-dim); font-size: calc(11px * var(--hm-echelle)); font-style: normal; }
#harmoniques .hm-aide { color: var(--text-dim); font-size: calc(12px * var(--hm-echelle)); line-height: 1.45; margin: 4px 0 0; }
#harmoniques .hm-aide b { color: var(--text); }
#harmoniques .hm-info { flex: none; padding: 5px 12px 8px; color: var(--text-dim); font-size: calc(12px * var(--hm-echelle)); border-top: 1px solid var(--border); }
#harmoniques .hm-poignee { position: absolute; z-index: 2; }
#harmoniques .hm-poignee[data-bord="n"]  { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
#harmoniques .hm-poignee[data-bord="s"]  { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
#harmoniques .hm-poignee[data-bord="w"]  { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
#harmoniques .hm-poignee[data-bord="e"]  { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
#harmoniques .hm-poignee[data-bord="nw"] { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
#harmoniques .hm-poignee[data-bord="se"] { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
#harmoniques .hm-poignee[data-bord="ne"] { top: -3px; right: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
#harmoniques .hm-poignee[data-bord="sw"] { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: nesw-resize; }

#harmoniques .hm-barre-modif { padding-top: 6px; padding-bottom: 6px; background: #1a2023; }
#harmoniques .hm-etiq { color: var(--text-dim); }
#harmoniques .hm-espace { flex: 1; }
#harmoniques .hm-barre button.modifie { border-color: #4ed99a; color: #4ed99a; }
#harmoniques .hm-barre .hm-appliquer:not(:disabled) { border-color: #4ed99a; }
#harmoniques .hm-barre .hm-appliquer:not(:disabled):hover { background: #4ed99a; color: #14181a; }
#harmoniques .hm-chiffre.hm-modif { border-color: #4ed99a; }
#harmoniques .hm-chiffre.hm-modif b { color: #4ed99a; }

#harmoniques .hm-nommer { display: none; align-items: center; gap: 4px; }
#harmoniques.nommer .hm-nommer { display: inline-flex; }
#harmoniques.nommer .hm-synthe { display: none; }
#harmoniques .hm-nom { width: 190px; background: #0f1416; color: var(--text); border: 1px solid #4ed99a; border-radius: 5px; padding: 4px 8px; font-size: calc(13px * var(--hm-echelle)); }
#harmoniques .hm-barre .hm-synthe:not(:disabled) { border-color: var(--accent); }
#harmoniques .hm-barre .hm-synthe:not(:disabled):hover { background: var(--accent); color: #14181a; }

/* --- 🎙 Entrée audio (entree-audio.js) --- */
#entree-audio-btn { background: rgba(255,255,255,0.06); color: var(--accent-2); border: 1px solid rgba(78,163,217,0.4); border-radius: 5px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
#entree-audio-btn:hover { border-color: var(--accent-2); }
#entree-audio-panel { position: fixed; z-index: 20001; width: 310px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text); }
#entree-audio-panel.hidden { display: none; }
#entree-audio-panel h4 { margin: 0 0 2px; color: var(--accent); font-size: 13px; }
#entree-audio-panel label { color: var(--text-dim); margin-top: 3px; }
#entree-audio-panel label b { color: var(--accent); }
#entree-audio-panel select { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; font-size: 12px; max-width: 100%; }
#entree-audio-panel select option { background: #3a3f44; color: #fff; }
#entree-audio-panel input[type=range] { accent-color: var(--accent); }
#ea-auto { color: var(--accent-2); font-size: 11.5px; min-height: 0; }
#ea-vu { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
#ea-vu i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4ed99a 0 70%, var(--accent) 70% 90%, #ff5a5a 90%); background-size: 282px 100%; }
#ea-vu i.sature { background: #ff5a5a; }
#ea-etat { color: var(--text-dim); font-size: 11px; }
#entree-audio-panel .ea-note { margin: 2px 0 0; color: var(--text-dim); font-size: 11px; line-height: 1.4; }

#btn-video {
    position: absolute; top: 14px; right: 352px;
    background: rgba(255,255,255,0.06); color: var(--accent-2); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 12px; font-size: 12px; cursor: pointer;
}
#btn-video:hover { background: rgba(255,255,255,0.12); border-color: var(--accent-2); }
/* --- ⏺ Vidéo : capture de l'écran (capture-video.js), aux couleurs de Nabra --- */
#btn-video.active { color: var(--accent); border-color: var(--accent); }
#btn-video.rec { color: #ff5a5a; border-color: #ff5a5a; animation: cap-cl 1s steps(2) infinite; }
@keyframes cap-cl { 50% { opacity: 0.45; } }
#capture-panneau { display: none; position: fixed; top: 64px; right: 16px; z-index: 20050; width: 390px; max-height: calc(100vh - 84px); overflow: auto;
    background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    font-size: 13px; padding: 0 12px 12px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#capture-panneau.on { display: block; }
#capture-panneau.cache { display: none !important; }
#capture-panneau .cp-tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -12px 10px; padding: 9px 12px;
    background: var(--panel); border-bottom: 1px solid var(--border); color: var(--accent); font-weight: 700; font-size: 14px; cursor: move; }
#capture-panneau button, #capture-panneau select, #capture-panneau input[type=number] { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 9px; font-size: 13px; cursor: pointer; }
#capture-panneau select { max-width: 100%; }
#capture-panneau select option { background: #3a3f44; color: #fff; }
#capture-panneau button:hover { border-color: var(--accent); }
#capture-panneau button:disabled { opacity: 0.45; cursor: default; }
#capture-panneau input[type=number] { width: 64px; }
#capture-panneau input[type=range] { accent-color: var(--accent); }
#capture-panneau input[type=checkbox], #capture-panneau input[type=radio] { accent-color: var(--accent); }
#capture-panneau fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 10px 0 0; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
#capture-panneau legend { color: var(--accent); padding: 0 4px; font-weight: 600; }
#capture-panneau label { color: var(--text); }
#capture-panneau .cp-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#capture-panneau .cp-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#capture-panneau .cp-apercu { background: #000; border: 1px solid var(--border); border-radius: 6px; display: flex; justify-content: center; align-items: center; height: 190px; margin-bottom: 8px; }
#capture-panneau .cp-apercu video { max-width: 100%; max-height: 100%; display: block; }
#capture-panneau .cp-taille, #capture-panneau .cp-detail { color: var(--text-dim); font-size: 12px; }
#capture-panneau .cp-reglage { display: grid; grid-template-columns: 100px 1fr 46px; align-items: center; gap: 6px; }
#capture-panneau .cp-reglage select { grid-column: span 2; min-width: 0; width: 100%; text-overflow: ellipsis; }
#capture-panneau { overflow-x: hidden; }
#capture-panneau fieldset { min-width: 0; }
#capture-panneau fieldset > select { width: 100%; min-width: 0; text-overflow: ellipsis; }
#capture-panneau .cp-reglage { min-width: 0; }
#capture-panneau .cp-reglage .cp-micro-voie { grid-column: span 1; }
#capture-panneau .cp-micro-voie-auto { color: var(--accent) !important; font-weight: 600; font-size: 10.5px !important; text-align: left !important; white-space: nowrap; }
#capture-panneau .cp-reglage .cp-note { grid-column: span 2; color: var(--text-dim); font-size: 11.5px; }
#capture-panneau .cp-reglage > span { color: var(--text-dim); }
#capture-panneau .cp-reglage b { color: var(--accent-2); text-align: right; font-size: 12px; }
#capture-panneau .cp-vu { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; margin: -2px 0 4px; }
#capture-panneau .cp-vu i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent) 0 70%, var(--accent-2) 70% 90%, #ff5a5a 90%); background-size: 390px 100%; }
#capture-panneau .cp-vu i.sature { background: #ff5a5a; }
#capture-panneau .cp-dossier { flex: 1; min-width: 0; color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
#capture-panneau .cp-rec { width: 100%; margin-top: 12px; padding: 10px; font-size: 15px; font-weight: 700; background: var(--accent); color: #1f160a; border-color: var(--accent); }
#capture-panneau .cp-rec:hover { filter: brightness(1.1); }
#capture-panneau .cp-rec.actif { background: #7a1616; color: #fff; border-color: #ff5a5a; }
#capture-panneau .cp-raccourcis { color: var(--text-dim); font-size: 11.5px; margin-top: 8px; line-height: 1.45; }
#capture-panneau .cp-raccourcis b { color: var(--text); }
#capture-panneau .cp-msg { color: var(--accent-2); background: rgba(78, 163, 217, 0.08); border: 1px solid rgba(78, 163, 217, 0.45); border-radius: 6px; padding: 6px 9px; white-space: pre-line; margin: 4px 0; }
#capture-panneau .cp-msg.erreur { color: #ff8a8a; border-color: #7a1616; background: rgba(255, 77, 77, 0.08); }
#capture-panneau .cp-resultat { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 8px; background: rgba(217, 154, 78, 0.08); display: flex; flex-direction: column; gap: 6px; }
#capture-panneau .cp-chemin { color: var(--text-dim); font-size: 11.5px; word-break: break-all; }
#capture-cadre { position: fixed; z-index: 20040; pointer-events: none; border: 2px dashed var(--accent); border-radius: 4px; box-sizing: border-box; }
#capture-cadre.rec { border-color: #ff5a5a; }
#capture-voile { position: fixed; inset: 0; z-index: 20060; cursor: crosshair; background: rgba(0, 0, 0, 0.35); }
#capture-voile .cv-aide { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--panel); color: var(--accent); border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; font-size: 13px; pointer-events: none; }
#capture-voile .cv-rect { display: none; position: absolute; border: 2px solid var(--accent); background: rgba(217, 154, 78, 0.08); color: var(--accent); font-size: 12px; font-weight: 700; padding: 3px 6px; box-sizing: border-box; }

/* ==================== 🎯 CALAGE : la version de l'artiste calée sur le master ==================== */
#btn-calage {
    position: absolute; top: 14px; right: 440px;
    background: rgba(255,255,255,0.06); color: var(--accent); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 12px; font-size: 12px; cursor: pointer;
}
#btn-calage:hover { background: rgba(255,255,255,0.12); border-color: var(--accent); }
#btn-calage.actif { background: rgba(217,154,78,0.18); border-color: var(--accent); }
#calage {
    --cg-echelle: 1;
    display: none; position: fixed; z-index: 955; flex-direction: column;
    min-width: 640px; min-height: 460px; max-width: 100vw; max-height: 100vh;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.65); color: var(--text); font-size: calc(13px * var(--cg-echelle));
}
#calage.ouvert { display: flex; }
#calage.plein { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0; }
#calage.plein .cg-poignee { display: none; }
#calage .cg-tete { display: flex; align-items: center; gap: 6px; flex: none; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border);
    background: var(--panel); border-radius: 10px 10px 0 0; cursor: move; user-select: none; }
#calage .cg-titre { font-weight: 700; color: var(--accent); }
#calage .cg-sous { flex: 1; }
#calage .cg-tete button { background: transparent; color: var(--text-dim); border: 1px solid transparent; border-radius: 4px; min-width: 28px; height: 24px; cursor: pointer; font-size: 13px; }
#calage .cg-tete button:hover { color: var(--text); border-color: var(--border); }
#calage .cg-tete .cg-fermer:hover { color: #fff; background: #c84040; border-color: #c84040; }
#calage .cg-corps { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: calc(12px * var(--cg-echelle)); padding: 16px 24px 12px; }
/* les trois calages */
#calage .cg-options { display: flex; justify-content: center; gap: 26px; padding-left: 140px; }
#calage .cg-opt { min-width: 110px; padding: 6px 18px; background: transparent; color: var(--text); border: 2px solid var(--border); border-radius: 6px;
    font: 600 calc(14px * var(--cg-echelle)) 'Segoe UI', system-ui, sans-serif; cursor: pointer; }
#calage .cg-opt:hover { border-color: var(--accent); }
#calage .cg-opt.actif { background: var(--accent); border-color: var(--accent); color: #14181a; }
/* les lignes : étiquette + champ */
#calage .cg-ligne { display: flex; align-items: stretch; gap: 12px; }
#calage .cg-etiq { width: 128px; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--border); border-radius: 6px;
    font-weight: 600; color: var(--accent-2); background: var(--panel); }
#calage .cg-etiq.master { color: var(--accent); }
#calage .cg-etiq.nu { border-color: transparent; background: transparent; color: var(--text); }
#calage .cg-champ { position: relative; flex: 1; min-width: 0; height: calc(46px * var(--cg-echelle)); border: 2px dashed var(--border); border-radius: 6px; cursor: copy; background: rgba(255,255,255,0.02); }
#calage .cg-champ:hover { border-color: var(--accent); background: rgba(217,154,78,0.06); }
#calage .cg-champ.plein { border-style: solid; }
#calage .cg-champ canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#calage .cg-c-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-weight: 600; pointer-events: none; }
#calage .cg-champ.plein .cg-c-vide { display: none; }
#calage .cg-c-btns { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; gap: 4px; }
#calage .cg-champ.plein .cg-c-btns { display: flex; }
#calage .cg-c-btns button { width: 26px; height: 24px; padding: 0; background: rgba(20,24,26,0.85); color: var(--text); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
#calage .cg-c-btns button:hover { border-color: var(--accent); color: var(--accent); }
#calage .cg-gammes { position: relative; flex: 1; min-width: 0; height: calc(44px * var(--cg-echelle)); cursor: context-menu; }
#calage .cg-mt { position: absolute; inset: 0; width: 100%; height: 100%; }
#calage .cg-gamme-nom { position: absolute; right: 4px; bottom: -14px; font-size: calc(11px * var(--cg-echelle)); color: var(--accent); }
#calage .cg-intensite { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--text-dim); }
#calage .cg-int { flex: 1; accent-color: var(--accent); }
#calage .cg-int-v { color: var(--accent); min-width: 46px; text-align: right; font-size: calc(14px * var(--cg-echelle)); }
/* les actions */
#calage .cg-actions { display: flex; justify-content: center; gap: 14px; padding-left: 140px; }
#calage .cg-actions button { padding: 7px 22px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text);
    font: 600 calc(13.5px * var(--cg-echelle)) 'Segoe UI', system-ui, sans-serif; cursor: pointer; }
#calage .cg-actions button:hover:not(:disabled) { border-color: var(--accent); }
#calage .cg-actions button:disabled { opacity: .45; cursor: wait; }
#calage .cg-actions .cg-valider { background: var(--accent); border-color: var(--accent); color: #14181a; }
#calage .cg-actions .cg-voir { background: transparent; color: var(--text-dim); }
#calage .cg-actions .cg-voir.actif { color: var(--accent-2); border-color: var(--accent-2); }
/* 📊 Analyse (repliée) */
#calage .cg-detail { display: none; flex-direction: column; gap: 6px; }
#calage .cg-detail.ouvert { display: flex; }
#calage .cg-d-tete { display: flex; align-items: center; gap: 10px; }
#calage .cg-d-tete select { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; }
#calage .cg-legende { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: calc(11.5px * var(--cg-echelle)); margin-left: auto; }
#calage .cg-legende i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
#calage .cg-l-mod { background: #d99a4e; } #calage .cg-l-v { background: #4ed99a; } #calage .cg-l-j { background: #ffd166; } #calage .cg-l-r { background: #ff6b6b; }
#calage .cg-comp { width: 100%; height: calc(220px * var(--cg-echelle)); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; cursor: crosshair; }
#calage .cg-resume { line-height: 1.5; color: var(--text-dim); }
#calage .cg-resume b { color: var(--text); }
#calage .cg-resume .cg-v { color: #4ed99a; font-weight: 700; } #calage .cg-resume .cg-j { color: #ffd166; font-weight: 700; } #calage .cg-resume .cg-r { color: #ff6b6b; font-weight: 700; }
#calage .cg-info { padding: 6px 16px 8px; color: var(--text-dim); border-top: 1px solid var(--border); flex: none; min-height: 1.6em; }
#calage .cg-poignee { position: absolute; z-index: 2; }
#calage .cg-poignee[data-bord="n"], #calage .cg-poignee[data-bord="s"] { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
#calage .cg-poignee[data-bord="n"] { top: -3px; } #calage .cg-poignee[data-bord="s"] { bottom: -3px; }
#calage .cg-poignee[data-bord="e"], #calage .cg-poignee[data-bord="w"] { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
#calage .cg-poignee[data-bord="e"] { right: -3px; } #calage .cg-poignee[data-bord="w"] { left: -3px; }
#calage .cg-poignee[data-bord="ne"], #calage .cg-poignee[data-bord="nw"], #calage .cg-poignee[data-bord="se"], #calage .cg-poignee[data-bord="sw"] { width: 12px; height: 12px; }
#calage .cg-poignee[data-bord="ne"] { top: -4px; right: -4px; cursor: nesw-resize; } #calage .cg-poignee[data-bord="sw"] { bottom: -4px; left: -4px; cursor: nesw-resize; }
#calage .cg-poignee[data-bord="nw"] { top: -4px; left: -4px; cursor: nwse-resize; } #calage .cg-poignee[data-bord="se"] { bottom: -4px; right: -4px; cursor: nwse-resize; }
/* menus : gammes, champ */
#cg-menu-gammes, #cg-menu-champ { position: fixed; z-index: 2000; background: var(--panel); border: 1px solid var(--border);
    border-radius: 7px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); color: var(--text); font-size: 13px; }
#cg-menu-gammes { width: 290px; max-height: 460px; display: flex; flex-direction: column; }
#cg-menu-gammes .cg-mg-tete { padding: 7px 10px; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--accent); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#cg-menu-gammes .cg-mg-tete label { color: var(--text-dim); font-weight: 400; display: flex; gap: 4px; align-items: center; }
#cg-menu-gammes select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
#cg-menu-gammes .cg-mg-liste { overflow: auto; padding: 4px 0; }
#cg-menu-gammes .cg-mg-cat { padding: 6px 10px 2px; color: var(--accent-2); font-weight: 700; font-size: 11.5px; text-transform: uppercase; }
#cg-menu-gammes .cg-mg-item, #cg-menu-champ .cg-mc-item { padding: 4px 16px; cursor: pointer; }
#cg-menu-gammes .cg-mg-item:hover, #cg-menu-champ .cg-mc-item:hover { background: rgba(217,154,78,0.18); }
#cg-menu-gammes .cg-mg-item.actif { color: var(--accent); font-weight: 700; }
#cg-menu-champ { padding: 4px 0; min-width: 250px; }
/* Calage : étiquettes-boutons, ligne des fréquences */
#calage .cg-etiq.bouton { cursor: pointer; user-select: none; transition: background .12s, border-color .12s; }
#calage .cg-etiq.bouton:hover { border-color: var(--accent); }
#calage .cg-etiq.bouton.choisie { border-color: var(--accent); background: rgba(217,154,78,0.14); }
#calage .cg-etiq.bouton.joue { background: var(--accent); color: #14181a; border-color: var(--accent); }
#calage .cg-l-hz { margin: -4px 0 -8px; }
#calage .cg-l-hz .cg-etiq.nu { border: none; }
#calage .cg-hz-z { position: relative; flex: 1; min-width: 0; height: calc(18px * var(--cg-echelle)); }
#calage .cg-hz { position: absolute; inset: 0; width: 100%; height: 100%; }
#calage .cg-gammes { cursor: pointer; }
#cg-menu-champ .cg-mc-item.off { opacity: .4; cursor: default; }

/* ==================== 🎸 INSTRUMENT À ÉCHANTILLONS (echantillonneur.js) ==================== */
#echantillonneur { display: none; position: fixed; z-index: 956; flex-direction: column; width: min(760px, 96vw); max-height: 90vh;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,0.65); color: var(--text); font-size: 13px; }
#echantillonneur.ouvert { display: flex; }
#echantillonneur.occupe { cursor: progress; }
#echantillonneur.occupe .ec-ajouts button, #echantillonneur.occupe .ec-creer { opacity: .5; pointer-events: none; }
#echantillonneur .ec-tete { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border);
    background: var(--panel); border-radius: 10px 10px 0 0; cursor: move; user-select: none; }
#echantillonneur .ec-titre { font-weight: 700; color: var(--accent); }
#echantillonneur .ec-sous { flex: 1; color: var(--text-dim); }
#echantillonneur .ec-fermer { background: transparent; color: var(--text-dim); border: 1px solid transparent; border-radius: 4px; min-width: 28px; height: 24px; cursor: pointer; }
#echantillonneur .ec-fermer:hover { color: #fff; background: #c84040; }
#echantillonneur .ec-corps { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; min-height: 0; }
#echantillonneur button { font: 600 13px 'Segoe UI', system-ui, sans-serif; }
#echantillonneur .ec-ajouts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#echantillonneur .ec-ajouts button, #echantillonneur .ec-bas button { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
#echantillonneur .ec-ajouts button:hover, #echantillonneur .ec-bas button:hover:not(:disabled) { border-color: var(--accent); }
#echantillonneur .ec-opts { display: flex; gap: 12px; margin-left: auto; color: var(--text-dim); }
#echantillonneur .ec-opts input { accent-color: var(--accent); vertical-align: middle; }
#echantillonneur .ec-liste { display: flex; flex-direction: column; gap: 3px; min-height: 90px; max-height: 42vh; overflow: auto; padding: 4px;
    border: 1px dashed var(--border); border-radius: 6px; background: rgba(255,255,255,0.02); }
#echantillonneur .ec-vide { margin: auto; padding: 16px; text-align: center; color: var(--text-dim); max-width: 520px; line-height: 1.45; }
#echantillonneur .ec-ech { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 5px; cursor: pointer; border: 1px solid transparent; }
#echantillonneur .ec-ech:hover { background: rgba(255,255,255,0.05); }
#echantillonneur .ec-ech.choisi { border-color: var(--accent); background: rgba(217,154,78,0.08); }
#echantillonneur .ec-ech button { width: 26px; height: 22px; padding: 0; background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
#echantillonneur .ec-ech button:hover { color: var(--accent); border-color: var(--accent); }
#echantillonneur .ec-ech .ec-sup:hover { color: #fff; background: #c84040; border-color: #c84040; }
#echantillonneur .ec-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#echantillonneur .ec-note { min-width: 170px; color: var(--accent); font-weight: 600; text-align: right; }
#echantillonneur .ec-duree { min-width: 44px; color: var(--text-dim); text-align: right; }
#echantillonneur .ec-carte-z { height: 54px; }
#echantillonneur .ec-carte { width: 100%; height: 100%; display: block; cursor: pointer; }
#echantillonneur .ec-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#echantillonneur .ec-compte { flex: 1; color: var(--text-dim); }
#echantillonneur .ec-nom { width: 200px; margin-left: 4px; padding: 4px 8px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font: 13px 'Segoe UI', sans-serif; }
#echantillonneur .ec-bas .ec-creer { background: var(--accent); border-color: var(--accent); color: #14181a; }
#echantillonneur .ec-bas .ec-creer:disabled { opacity: .45; cursor: default; }
#echantillonneur .ec-info { min-height: 18px; color: var(--accent-2); }


/* ==================== MENUS DÉROULANTS LISIBLES ====================
   La liste native d'un menu déroulant s'ouvre sur fond blanc : sans cette
   règle, les options héritaient du texte clair de l'appli (illisible tant
   qu'on ne les survole pas). Texte noir sur blanc partout, comme le menu des gammes. */
select option, select optgroup { background-color: #ffffff; color: #111111; }
select optgroup { font-weight: 700; }
select option:disabled { color: #777777; }

/* ==================== BARRE DU SYNTHÉ : 2 lignes ====================
   Ligne 1 : instrument, clavier MIDI + Synthé/Pad (toujours côte à côte), gammes, octave, tonique.
   Ligne 2 : ADSR (curseurs horizontaux) | les 2 afficheurs au milieu | 🎛 Avancé. */
.synth-header { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.synth-header .sh-midi { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.synth-ligne2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    padding: 6px 0 8px; border-bottom: 1px solid var(--border); }
.synth-ligne2 .adsr-controls { justify-self: start; margin-left: 0; display: flex; gap: 14px; }
.synth-ligne2 .adsr-slider { flex-direction: row; gap: 5px; }
.synth-ligne2 .adsr-slider label { font-size: 11px; font-weight: 700; }
.synth-ligne2 .adsr-slider input[type="range"] { writing-mode: horizontal-tb; direction: ltr; width: 70px; height: 16px; cursor: ew-resize; }
.synth-ligne2 .sh-afficheurs { justify-self: center; display: flex; gap: 10px; }
.synth-ligne2 .sh-droite { justify-self: end; display: flex; align-items: center; gap: 8px; }
.synth-ligne2 .sh-afficheurs { align-items: center; }
.synth-ligne2 .adsr-controls { gap: 10px; }
.synth-ligne2 .adsr-slider input[type="range"] { width: 58px; }
/* ligne 1 plus compacte : tout tient sur une ligne en plein écran */
#instrument-select { max-width: 150px; }
#scale-select { max-width: 150px; }
#scale-add-name { width: 110px; }
#scale-add-group { max-width: 125px; }
.synth-header #midi-device-select { max-width: 200px; }
#timeline-toolbar #tl-micro-on.actif { background: rgba(78,217,154,0.15); border-color: #4ed99a; color: #4ed99a; }
#timeline-toolbar #tl-mic { color: #ff6b5a; }
#timeline-toolbar #tl-mic.tl-rec-on { color: #fff; }
#mic-display { min-width: 175px; }
#mic-display.eteint { color: #6a7478; font-weight: normal; }
#note-display, #mic-display { min-width: 150px; font-size: 13px; padding: 5px 12px; }
#mic-display { background: #000000; color: #ff6b5a; border: 1px solid var(--border); border-radius: 5px; font-weight: bold;
    font-family: 'Consolas', monospace; text-align: center; white-space: nowrap; }
#mic-display.juste { color: #33ff55; }

/* ==================== UNE SEULE LIGNE AU-DESSUS DU CLAVIER + 🎛 FILTRES ==================== */
.synth-header { flex-wrap: nowrap; gap: 6px; padding-bottom: 8px; margin-bottom: 0; border-bottom: 1px solid var(--border); }
.synth-header > * { flex: 0 0 auto; }
.synth-header > select, .synth-header .sh-midi select { flex: 0 1 auto; min-width: 64px; text-overflow: ellipsis; }
.synth-header #instrument-select { max-width: 170px; }
.synth-header #midi-device-select { max-width: 230px; }
.synth-header #scale-select { max-width: 190px; }
#midi-transpose-label { display: none; }
#midi-transpose { width: 44px; }
.synth-ligne2 { display: flex; justify-content: center; padding: 4px 0 8px; border-bottom: 1px solid var(--border); }
#note-display { min-width: 150px; }
#mic-display { min-width: 190px; }
#btn-advanced-fx.actif { border-color: var(--accent); color: var(--accent); }
/* ➕ ajouter une gamme : petit panneau sous le bouton */
.sh-ajout { position: relative; }
#scale-add-toggle { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; cursor: pointer; }
#scale-add-toggle.actif, #scale-add-toggle:hover { border-color: var(--accent); }
#scale-add-pop { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 900; gap: 6px; align-items: center; padding: 8px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); white-space: nowrap; }
#scale-add-pop.ouvert { display: flex; }
#scale-add-pop #scale-add-name { width: 150px; }
/* la fenêtre Filtres : flottante, sans voile, déplaçable et redimensionnable */
#advanced-fx-panel { inset: auto; width: 0; height: 0; background: transparent; }
#advanced-fx-panel .nabra-modal-inner { position: fixed; left: 60%; top: 80px; width: 420px; height: min(620px, 85vh); max-width: 96vw; max-height: 96vh;
    min-width: 300px; min-height: 220px; resize: both; overflow: auto; padding: 0 18px 16px; z-index: 20000; }
#advanced-fx-panel .fx-tete { position: sticky; top: 0; z-index: 1; margin: 0 -18px 10px; padding: 12px 50px 10px 18px; cursor: move; user-select: none;
    background: var(--panel); border-bottom: 1px solid var(--border); font-size: 17px; }
#advanced-fx-panel .fx-tete .nabra-modal-close { position: absolute; top: 8px; right: 10px; }
#fx-preview-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; padding: 6px 10px; border: 1px solid var(--accent); border-radius: 6px;
    color: var(--accent); font-weight: 600; cursor: pointer; }
#fx-preview-row input { accent-color: var(--accent); }
#fx-perf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; }
#fx-perf-row label { color: var(--accent-2); font-weight: 600; }
#fx-perf-row select { flex: 1; min-width: 160px; background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; }
#fx-perf-note { flex-basis: 100%; color: var(--text-dim); }
#fx-perf-note:empty { display: none; }
/* 🎛 Filtres : presets, valeurs, plein écran */
#fx-preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--accent-2); border-radius: 6px; }
#fx-preset-row label { color: var(--accent-2); font-weight: 600; }
#fx-preset-row select { flex: 1; min-width: 170px; background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; }
#fx-preset-row button { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; cursor: pointer; }
#fx-preset-row button:hover:not(:disabled) { border-color: var(--accent); }
#fx-preset-row button:disabled { opacity: .35; cursor: default; }
#fx-preset-nom { display: none; flex-basis: 100%; gap: 6px; }
#fx-preset-nom.ouvert { display: flex; }
#fx-preset-nom input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--accent); border-radius: 5px; padding: 4px 8px; }
#fx-preset-info { flex-basis: 100%; color: var(--text-dim); }
#fx-preset-info:empty { display: none; }
#advanced-fx-panel .fx-row select { flex: 1; background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; }
#advanced-fx-panel .fx-val { min-width: 26px; text-align: right; color: var(--text-dim); font-size: 11px; font-family: Consolas, monospace; }
#advanced-fx-panel .fx-tete .fx-plein-btn { position: absolute; top: 8px; right: 52px; background: rgba(255,255,255,0.06); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 15px; }
#advanced-fx-panel .fx-tete .fx-plein-btn:hover { border-color: var(--accent); }
#advanced-fx-panel .nabra-modal-inner.plein { left: 0 !important; top: 0 !important; right: 0; bottom: 0; width: auto !important; height: auto !important;
    max-width: none; max-height: none; border-radius: 0; resize: none; }
#advanced-fx-panel .nabra-modal-inner.plein .fx-tete { cursor: default; }
#advanced-fx-panel .nabra-modal-inner.plein .fx-contenu { column-width: 380px; column-gap: 36px; column-rule: 1px solid var(--border); }
#advanced-fx-panel .nabra-modal-inner.plein .fx-contenu > * { break-inside: avoid; }
#advanced-fx-panel .nabra-modal-inner.plein .fx-contenu h3 { break-after: avoid; }


/* ==================== 🎯 CALAGE v4 : master + 3 slaves, enregistrement, métronome / tap ==================== */
#calage .cg-options { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 14px; padding-left: 0; }
#calage .cg-sep { flex: 1; }
#calage .cg-metro-g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
#calage .cg-metro-g button, #calage .cg-metro-g select, #calage .cg-metro-g input { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 5px;
    padding: 4px 8px; font: 600 calc(12.5px * var(--cg-echelle)) 'Segoe UI', system-ui, sans-serif; cursor: pointer; }
#calage .cg-metro-g label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: calc(12px * var(--cg-echelle)); }
#calage .cg-metro-g input { width: 54px; cursor: text; }
#calage .cg-metro-g .cg-ncouches { width: 42px; }
#calage .cg-metro-g button:hover { border-color: var(--accent); }
#calage .cg-metro-g input:disabled, #calage .cg-metro-g select:disabled { opacity: .45; }
#calage .cg-metro.actif { background: rgba(78,217,154,0.15); border-color: #4ed99a; color: #4ed99a; }
#calage .cg-tap.enreg { background: #c83a3a; border-color: #ff6b6b; color: #fff; animation: cg-clign 0.8s steps(2) infinite; }
#calage .cg-tap.pret { background: rgba(78,217,154,0.18); border-color: #4ed99a; color: #4ed99a; }
#calage .cg-tap.pret.ecoute { background: #4ed99a; color: #14181a; }
@keyframes cg-clign { 50% { background: #7a2020; } }
/* les boutons de chaque piste : ▶ ● à gauche, 📋 💾 à droite */
#calage .cg-l-btns { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
#calage .cg-l-btns button { width: calc(30px * var(--cg-echelle)); height: calc(20px * var(--cg-echelle)); padding: 0; background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: calc(11px * var(--cg-echelle)); line-height: 1; }
#calage .cg-l-btns button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
#calage .cg-l-btns button:disabled { opacity: .35; cursor: default; }
#calage .cg-l-rec { position: relative; }
#calage .cg-l-rec::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
    background: #7a2a2a; box-shadow: inset 0 0 2px #000; }
#calage .cg-l-rec:hover:not(:disabled)::after { background: #c83a3a; }
#calage .cg-l-rec.actif { border-color: #ff6b6b; }
#calage .cg-l-rec.actif::after { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: cg-led 0.8s steps(2) infinite; }
@keyframes cg-led { 50% { background: #7a2020; box-shadow: none; } }
#calage .cg-champ.enreg { border-color: #ff6b6b; border-style: solid; background: rgba(255,59,59,0.06); }
#calage .cg-champ.enreg .cg-c-vide { display: none; }
/* Caler */
#calage .cg-actions .cg-caler { background: transparent; border: 2px solid var(--accent); color: var(--accent); }
#calage .cg-actions .cg-caler.actif { background: var(--accent); color: #14181a; }
#calage .cg-actions .cg-caler.calcul { opacity: .75; cursor: progress; }
/* menu des sons */
#cg-menu-sons { position: fixed; z-index: 30000; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; min-width: 300px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.6); color: var(--text); font-size: 12.5px; }
#cg-menu-sons .cg-ms-tete { color: var(--accent); font-weight: 700; margin-bottom: 2px; }
#cg-menu-sons label { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
#cg-menu-sons select { flex: 1; max-width: 170px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; }
#cg-menu-sons button { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; padding: 1px 6px; }
#calage .cg-metro-g .cg-son-suivant { max-width: 130px; }
#calage .cg-metro-g .cg-plus { min-width: 30px; font-size: calc(15px * var(--cg-echelle)); padding: 1px 8px; }
#calage .cg-metro-g .cg-plus:disabled { opacity: .35; cursor: default; }
#calage .cg-metro-g .cg-plus.enreg { background: #c83a3a; border-color: #ff6b6b; color: #fff; font-size: calc(12.5px * var(--cg-echelle)); animation: cg-clign 0.8s steps(2) infinite; }

#calage .cg-options { gap: 8px 10px; }
#calage .cg-options .cg-opt { min-width: 0; padding: 5px 14px; }
/* 🎤 tuner de la ligne « Gammes » */
#calage .cg-gammes { height: calc(58px * var(--cg-echelle)); }
#cg-menu-gammes .cg-mg-tuner.actif { color: #4ed99a; font-weight: 700; }
/* 🎯 Calage : espace sous la barre, hauteur des pistes réglable, boucle */
#calage .cg-options { margin-bottom: calc(14px * var(--cg-echelle)); }
#calage .cg-champ { height: calc(var(--cg-hp, 46px) * var(--cg-echelle)); }
#calage .cg-hp-l { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; color: var(--text-dim); font-size: 12px; cursor: default; }
#calage .cg-hp { width: 110px; accent-color: var(--accent); cursor: pointer; }
#calage .cg-actions .cg-boucle { padding: 7px 14px; }
#calage .cg-actions .cg-boucle.actif { background: rgba(78,217,154,0.18); border-color: #4ed99a; color: #4ed99a; }