/* Page MIDI : entrée des notes (saisie pas à pas) et MIDI utilisé comme commande */
.midi-input-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0}
.midi-input-methods article,.midi-command-grid article{padding:20px;border:1px solid #15192516;border-radius:13px;background:#fff}
.midi-input-methods small,.midi-command-grid small{font:10px 'DM Mono';color:var(--blue);letter-spacing:.06em}
.midi-input-methods h3,.midi-command-grid h3{margin:6px 0 8px;font-size:18px;line-height:1.2}
.midi-input-methods p,.midi-command-grid p{margin:0;font-size:14px;color:#434958}
.midi-input-methods ul{margin:10px 0 0;padding-left:18px;font-size:13px;color:#434958}
.midi-command-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:26px 0}
.midi-command-grid code{font:12px 'DM Mono';background:#eef1f7;padding:1px 5px;border-radius:4px}
.step-vocabulary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 22px}
.step-vocabulary div{padding:12px 14px;border-radius:10px;background:#eef1f7;font-size:13px;color:#434958}
.step-vocabulary b{display:block;margin-bottom:3px;color:var(--ink)}
.step-input-block{margin-top:10px}
.step-input-block .midi-input-mount{margin-top:10px}

/* Outil */
.step-input{overflow:hidden;border:1px solid #ffffff16;border-radius:18px;background:#111620;color:#fff;box-shadow:0 24px 55px #1519251a;user-select:none;-webkit-user-select:none}
.si2-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;padding:10px 12px;background:#1b2130;border-bottom:1px solid #ffffff12}
.si2-group{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.si2-label{margin-right:4px;font:10px 'DM Mono';color:#9aa3b5}
.si2-toolbar button{position:relative;height:34px;padding:0 11px;border:1px solid #ffffff24;border-radius:7px;background:#111620;color:#e7ebf3;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.si2-toolbar button:hover{background:#252d3e}
.si2-toolbar button[aria-pressed=true]{background:#1762ff;border-color:#8aabff;color:#fff}
.si2-toolbar kbd{margin-left:5px;font:9px 'DM Mono';color:#9aa3b5;background:none;border:0;padding:0}
.si2-toolbar button[aria-pressed=true] kbd{color:#dfe6ff}
.si2-work{position:relative;padding:8px 10px 6px;outline:none;cursor:default}
.si2-focused .si2-work{box-shadow:inset 0 0 0 2px var(--mint)}
.si2-svg{display:block;width:100%;height:auto}
.si2-row{fill:#141b28}.si2-row-b{fill:#0f1520}
.si2-key{cursor:pointer;stroke:#0b0f16;stroke-width:1}
.si2-key.white{fill:#e9edf4}.si2-key.black{fill:#2b3345}
.si2-key.on{fill:#8be8bd}
.si2-keylabel{font:8.5px 'DM Mono',monospace;fill:#4a5263;pointer-events:none}
.si2-keylabel.onblack{fill:#cfd5e1}
.si2-sub{stroke:#ffffff0d}.si2-beat{stroke:#ffffff26}.si2-bar{stroke:#8be8bd55;stroke-width:1.4}
.si2-ruler{font:9px 'DM Mono',monospace;fill:#8f98aa}
.si2-step{fill:#8be8bd14}
.si2-cursor{stroke:#8be8bd;stroke-width:2}
.si2-note{fill:#1762ff;stroke:#8aabff;stroke-width:1}
.si2-note.last{fill:#3a7bff;stroke:#fff}
.si2-note.playing{fill:#ff6b4a;stroke:#fff}
.si2-playhead{stroke:#ff6b4a;stroke-width:2}
.si2-status{display:grid;gap:4px;padding:6px 16px 14px;border-top:1px solid #ffffff10}
.si2-info{display:flex;flex-wrap:wrap;gap:4px 16px;font:10px 'DM Mono';color:#9aa3b5}
.si2-hidden{color:#ff9a7e}
.si2-msg{font-size:14px;color:var(--mint);min-height:1.4em}
.si2-msg.flash{animation:si2Flash .3s ease}
@keyframes si2Flash{from{opacity:.4;transform:translateY(2px)}}
.si2-soft{font-size:13px;color:#cfd5e1;min-height:1.3em}
@media(max-width:900px){.midi-input-methods,.midi-command-grid{grid-template-columns:1fr}.step-vocabulary{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.si2-msg.flash{animation:none}}

/* Enregistrer une piste MIDI en temps réel */
.midi-record-block{margin:10px 0 34px}
.midi-card-more{display:inline-block;margin-top:10px;font-size:13px;font-weight:800;color:var(--blue);text-decoration:none}
.midi-rec-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0;padding:16px;border-radius:13px;background:#151925;color:#fff}
.midi-rec-flow>span,.midi-rec-flow>strong{padding:10px 12px;border-radius:8px;background:#252b38;font-size:12px;line-height:1.3;text-align:center}
.midi-rec-flow>strong{background:#3a2530;border:1px solid #ff6b4a88}
.midi-rec-flow small{font-weight:400;color:#aab2c2;font-size:10px}
.midi-rec-flow>i{font-style:normal;color:var(--orange)}
.midi-rec-branches{display:grid;gap:6px}
.midi-rec-branches b{padding:9px 12px;border-radius:8px;font-size:12px;line-height:1.3}
.midi-rec-branches .rec{background:#1762ff33;border:1px solid #8aabff88}
.midi-rec-branches .mon{background:#8be8bd22;border:1px solid #8be8bd88}
.midi-rec-steps{margin:18px 0;padding-left:22px;display:grid;gap:8px;font-size:15px;color:#434958}
.midi-rec-steps b{color:var(--ink)}
.midi-rec-what{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0}
.midi-rec-what article{padding:16px;border-radius:12px;background:#eef3ff}
.midi-rec-what article.not{background:#fff1ec}
.midi-rec-what small{font:10px 'DM Mono';color:var(--blue)}
.midi-rec-what article.not small{color:#c2361b}
.midi-rec-what h4{margin:5px 0 6px;font-size:16px}
.midi-rec-what p{margin:0;font-size:13px;color:#434958}
.midi-rec-subtitle{margin:26px 0 0;font-size:20px}
.midi-rec-modes{margin-top:12px}
@media(max-width:900px){.midi-rec-what{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.midi-rec-what{grid-template-columns:1fr}}

/* MIDI learn */
.midi-learn-block{margin-top:34px}
.midi-learn-block>h3{font-size:24px;margin:0 0 8px}
.midi-learn{margin:18px 0 10px;padding:14px;border-radius:18px;background:#111620;color:#fff;border:1px solid #ffffff16;user-select:none;-webkit-user-select:none}
.ml-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px}
.ml-plugin,.ml-controller{padding:12px;border-radius:12px;background:#1b2130;border:1px solid #ffffff12}
.ml-plugin header,.ml-controller header{display:grid;gap:2px;margin-bottom:10px}
.ml-plugin header small,.ml-controller header small{font:9px 'DM Mono';color:#8f98aa;letter-spacing:.06em}
.ml-plugin header b,.ml-controller header b{font-size:14px}
.ml-param{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1px solid transparent}
.ml-param+.ml-param{margin-top:4px}
.ml-param b{display:block;font-size:13px}
.ml-value{font:12px 'DM Mono';color:var(--mint)}
.ml-map{display:block;font:10px 'DM Mono';font-style:normal;color:#6c7588}
.ml-param.mapped .ml-map{color:#ffd36e}
.ml-param.learning{border-color:#ffd36e;background:#ffd36e14;animation:mlBlink 1s steps(2,start) infinite}
@keyframes mlBlink{to{background:#ffd36e2e}}
.ml-learn{padding:7px 12px;border:1px solid #ffffff24;border-radius:7px;background:#111620;color:#e7ebf3;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ml-param.learning .ml-learn{background:#ffd36e;color:#151925;border-color:#ffd36e}
.ml-knob{position:relative;display:block;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a5470,#252b38);box-shadow:inset 0 0 0 2px #0b0f16,0 3px 6px #0006}
.ml-knob i{position:absolute;inset:0;transition:transform .08s}
.ml-knob i:after{content:"";position:absolute;left:50%;top:5px;width:3px;height:12px;margin-left:-1.5px;border-radius:2px;background:var(--mint)}
.ml-knob.big{width:56px;height:56px}
.ml-ctl-knobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ml-ctl{display:grid;justify-items:center;gap:4px;padding:8px 4px;border-radius:10px;background:#111620;cursor:pointer}
.ml-ctl input{width:100%;accent-color:var(--mint)}
.ml-ctl b{font-size:12px}
.ml-ctl small{font:10px 'DM Mono';color:#8f98aa}
.ml-pickup{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:#cfd5e1;cursor:pointer}
.ml-pickup input{accent-color:var(--mint);width:16px;height:16px}
.ml-status{min-height:1.5em;margin:10px 2px;font-size:14px;color:var(--mint)}
.midi-learn .midi-input-mount{margin-top:6px}
@media(max-width:900px){.ml-grid{grid-template-columns:1fr}.ml-ctl-knobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.ml-param.learning{animation:none}}