body {
    background-color: #0a0f1e; color: #f8fafc; font-family: 'Segoe UI', sans-serif;
    margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}

#main-header { padding: 5px 0; background: #111827; border-bottom: 1px solid #1e293b; text-align: center; }
#main-header h1 { margin: 0; font-size: 1.2rem; letter-spacing: 1px; text-transform: uppercase; color: #38bdf8; }

#main-container { display: flex; flex: 1; min-height: 0; } /* min-height: 0 est crucial pour flex */

#left-panel, #info-zone { width: 15%; padding: 10px; background: #0f172a; border-right: 1px solid #1e293b; }
#info-zone { border-left: 1px solid #1e293b; border-right: none; width: 12%; }

#builder-zone { 
    width: 73%; background: #050505; 
    display: grid; grid-template-rows: repeat(3, 1fr); 
    padding: 5px; gap: 5px; 
}

.instrument-row { 
    display: flex; flex-direction: column; border: 1px solid #1e293b; 
    position: relative; overflow: hidden; background: #080c14;
}

.row-label { 
    position: absolute; left: 35px; top: 2px; font-size: 0.6rem; 
    color: #38bdf8; font-weight: bold; z-index: 5; background: #080c14; padding: 0 5px;
}

.canvas-pair { flex: 1; display: flex; gap: 2px; padding: 5px; min-height: 0; }
.canvas-container { flex: 1; position: relative; min-height: 0; }
canvas { width: 100%; height: 100%; display: block; }

/* Contrôles ultra-compacts */
.control-group h3 { color: #38bdf8; font-size: 1.2rem; margin: 5px 0; }
.btn-group { display: flex; gap: 3px; flex-wrap: wrap; }
.note-btn { flex: 1 1 45px; background: #1e293b; border: 1px solid #1e293b; color: #94a3b8; padding: 5px; cursor: pointer; font-size: 0.7rem; }
.note-btn.active { border-color: #38bdf8; color: #38bdf8; background: rgba(56, 189, 248, 0.1); }
.usage-btn { background: #38bdf8; color: #0a0f1e; border: none; padding: 8px; border-radius: 3px; cursor: pointer; font-size: 0.7rem; font-weight: bold; width: 100%; }

.instruction-box { margin-top: 10px; font-size: 0.85rem; color: #94a3b8; padding: 8px; background: rgba(30, 41, 59, 0.3); border: 1px solid #1e293b; }
.data-card { background: #1e293b; padding: 8px; border-radius: 4px; margin-bottom: 10px; text-align: center; }
.data-card .label { font-size: 0.55rem; color: #94a3b8; }
.data-card .value { font-size: 0.9rem; font-weight: bold; color: #38bdf8; }
.legend-item { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-size: 0.65rem; }
.legend-color { width: 8px; height: 8px; }