/* Open Sound Control (annexe-midi-avance.html#osc) */
.midi-osc-section{background:#151925}
.osc-body{max-width:1400px;margin:auto}
.osc-body>p,.osc-body li{color:#c9d0dc;font-size:15.5px;line-height:1.6}
.osc-body>h3{margin:44px 0 10px;font-size:26px;letter-spacing:-.02em}
.osc-body code{font:13px 'DM Mono';color:#d9e4ff}
.osc-body a{color:#9cc1ff}
.osc-anatomy{display:grid;grid-template-columns:1.4fr .6fr 1fr;gap:6px;margin:16px 0 6px;font:clamp(15px,2vw,22px) 'DM Mono'}
.osc-anatomy div{display:grid;gap:6px;padding:16px;border-radius:12px;background:#252b38;border-top:4px solid var(--c)}
.osc-anatomy small{font:9px 'DM Mono';letter-spacing:.06em;color:var(--c)}
.osc-anatomy span{font-family:Manrope,system-ui,sans-serif;font-size:13px;color:#bdc5d1}
.osc-types{font-size:14px!important}
.osc-compare-wrap{overflow-x:auto;margin-top:12px;border:1px solid #ffffff18;border-radius:14px}
.osc-compare{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;background:#1b202b}
.osc-compare th,.osc-compare td{padding:12px 14px;border-bottom:1px solid #ffffff12;text-align:left;vertical-align:top;color:#c9d0dc}
.osc-compare thead th{font:10px 'DM Mono';letter-spacing:.06em;color:var(--mint);background:#10141d}
.osc-compare tbody th{font-weight:700;color:#fff;width:20%}
.osc-compare tr:last-child>*{border-bottom:0}
/* Outil 1 */
.osc-gesture,.osc-link{margin:18px 0 10px;padding:14px;border-radius:18px;background:#0d1118;border:1px solid #ffffff16;color:#e7ebf3}
.og-top{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-bottom:12px;font-size:13px;color:#cfd5e1}
.og-top select{margin-left:4px;padding:5px 6px;border:1px solid #ffffff2a;border-radius:6px;background:#1b2130;color:#fff;font:inherit;font-size:13px}
.og-zoom{display:flex;align-items:center;gap:8px;cursor:pointer}
.og-zoom input{accent-color:var(--mint);width:16px;height:16px}
.og-main{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px}
.og-fader{display:grid;justify-items:center;align-content:center;gap:8px;padding:12px;border-radius:12px;background:#1b2130;font:10px 'DM Mono';color:#8f98aa}
.og-fader input{writing-mode:vertical-lr;direction:rtl;width:34px;height:190px;accent-color:#ffd36e;cursor:grab}
.og-msgs{display:grid;gap:8px}
.og-msgs article{min-width:0;padding:12px 14px;border-radius:12px;background:#1b2130;border:1px solid #ffffff12}
.og-msgs header{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
.og-msgs header small{font:9px 'DM Mono';letter-spacing:.06em;color:#8f98aa}
.og-msgs header b{font:11px 'DM Mono';color:#cfd5e1}
.og-bytes,.og-readable{display:block;padding:8px 10px;border-radius:8px;background:#0b0f16;font:13px 'DM Mono';line-height:1.7;word-break:break-word}
.og-readable{margin-bottom:6px;font-size:16px}
.og-msgs p{margin:8px 0 0;font-size:13px;color:#bdc5d1}
.og-msgs .st{color:#aab2c2}.og-msgs .nb{color:#ffb35c}
.og-msgs .ad{color:#9cc1ff}.og-msgs .tt{color:#d4a5ff}.og-msgs .vl{color:#8be8bd}
.og-bytes span{margin-right:4px}
.og-graph{display:block;width:100%;height:140px;margin-top:12px;border-radius:10px;background:#0b0f16}
.og-grid{stroke:#ffffff14;stroke-width:1;fill:none}
.og-line-osc{stroke:#8be8bd;stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
.og-line-midi{stroke:#ffb35c;stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
.og-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:12px;color:#cfd5e1}
.og-legend span:before{content:"";display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:3px;border-radius:2px}
.og-legend .midi:before{background:#ffb35c}.og-legend .osc:before{background:#8be8bd}
/* Outil 2 */
.ol-grid{display:grid;grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);gap:10px;align-items:stretch}
.ol-dev{display:grid;align-content:start;gap:8px;padding:14px;border-radius:12px;background:#1b2130;border:1px solid #ffffff12}
.ol-dev header{display:grid;gap:2px}
.ol-dev header small{font:9px 'DM Mono';letter-spacing:.06em;color:#8f98aa}
.ol-dev header b{font:14px 'DM Mono'}
.ol-dev label{display:grid;gap:4px;font-size:12.5px;color:#cfd5e1}
.ol-dev input:not([type]){padding:7px 9px;border:1px solid #ffffff2a;border-radius:7px;background:#0b0f16;color:#fff;font:14px 'DM Mono'}
.ol-dev input:not([type]):focus{outline:2px solid #6f9bff;outline-offset:1px}
.ol-dev p{margin:0;font-size:13px;color:#cfd5e1}
.ol-dev p b{font-family:'DM Mono';color:#fff}
.ol-check{display:flex!important;grid-template-columns:none;align-items:center;gap:8px;cursor:pointer}
.ol-check input{accent-color:var(--mint);width:16px;height:16px}
.ol-wires{display:grid;align-content:center;gap:26px}
.ol-wires div{position:relative;display:grid;justify-items:center;gap:4px;font:10px 'DM Mono';color:#8f98aa}
.ol-wires i{position:relative;display:block;width:100%;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,#e0412b 0 8px,transparent 8px 14px)}
.ol-wires i:after{content:"";position:absolute;top:-5px;border:6px solid transparent}
.ol-wires [data-dir=to] i:after{right:-4px;border-left-color:#e0412b;border-right:0}
.ol-wires [data-dir=back] i:after{left:-4px;border-right-color:#e0412b;border-left:0}
.ol-wires .ok i{background:#8be8bd}
.ol-wires [data-dir=to].ok i:after{border-left-color:#8be8bd}
.ol-wires [data-dir=back].ok i:after{border-right-color:#8be8bd}
.ol-wires em{font-style:normal;color:#ff8a7a}
.ol-wires .ok em{color:var(--mint)}
.ol-report{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px}
.ol-report li{padding:8px 12px;border-radius:8px;background:#2e2228;font-size:13.5px;color:#ffcfc4}
.ol-report li.ok{background:#16382c;color:#bff3da}
.ol-report li.warn{background:#1b2130;color:#cfd5e1}
.osc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.osc-cards article{padding:18px;border-radius:13px;background:#252b38;border:1px solid #ffffff18}
.osc-cards small{font:9px 'DM Mono';color:var(--mint);letter-spacing:.06em}
.osc-cards h4{margin:6px 0;font-size:17px}
.osc-cards p{margin:0;font-size:13.5px;color:#bdc5d1}
.osc-asides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.osc-asides aside{padding:18px 20px;border-radius:13px;background:#252b38;border-left:4px solid var(--orange)}
.osc-asides aside.tip{border-left-color:var(--mint)}
.osc-asides b{display:block;margin-bottom:5px;color:#fff}
.osc-asides p{margin:0;font-size:14px;color:#c9d0dc}
@media(max-width:900px){.osc-anatomy,.osc-cards,.osc-asides{grid-template-columns:1fr}.ol-grid{grid-template-columns:1fr}.ol-wires{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:620px){.og-main{grid-template-columns:1fr}.og-fader input{writing-mode:horizontal-tb;direction:ltr;width:100%;height:34px}}