/* Ce que seul le calcul permet (avance-numerique.html) */
.dc-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.dc-lab{max-width:1100px;margin:auto;padding:16px;border-radius:18px;background:#0d1118;border:1px solid #ffffff16;color:#e7ebf3}
.dc-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:12px;font-size:13px;color:#cfd5e1}
.dc-top label{display:flex;align-items:center;gap:8px}
.dc-top output{font:12px 'DM Mono',monospace;color:#ffd36e;min-width:52px}
.dc-top input[type=range]{width:180px;accent-color:#ffd36e}
.dc-top [role=group]{display:flex;flex-wrap:wrap;gap:5px}
.dc-top [role=group] button{padding:8px 12px;border:1px solid #ffffff1c;border-radius:9px;background:#1b202b;color:#e7ebf3;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.dc-top [role=group] button[aria-pressed=true]{background:#1f2a40;border-color:#6f9bff}
.dc-play{padding:8px 14px;border:1px solid #8be8bd;border-radius:9px;background:#16382c;color:#bff3da;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.dc-note{font:11px 'DM Mono',monospace;color:#8f98aa}
.dc-wave{display:block;width:100%;height:330px;border-radius:12px;background:#0d111a}
.dc-look{height:300px}
.dc-spec{display:block;width:100%;height:280px;border-radius:12px;background:#0d111a}
.dc-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.dc-facts div{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:#1b2130}
.dc-facts small{font:9px 'DM Mono',monospace;letter-spacing:.05em;color:#8f98aa}
.dc-facts b{font:600 16px 'DM Mono',monospace;color:#fff}
.dc-facts span{font-size:12px;color:#aab2c2}
.dc-status{min-height:2.8em;margin:10px 2px 0;font-size:14px;color:var(--mint)}
@media(max-width:1000px){.dc-four{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.dc-four,.dc-facts{grid-template-columns:1fr}.dc-wave{height:280px}}
/* Analyseur de spectre */
.an-grid{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px}
.an-canvas{height:320px}
.an-ctrls{display:grid;align-content:start;gap:10px;font-size:13px;color:#cfd5e1}
.an-ctrls label{display:grid;gap:4px}
.an-ctrls select{padding:6px;border:1px solid #ffffff2a;border-radius:7px;background:#1b2130;color:#fff;font:inherit;font-size:13px}
.an-check{display:flex!important;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:#cfd5e1}
.an-check input{accent-color:#ffd36e;width:16px;height:16px}
@media(max-width:800px){.an-grid{grid-template-columns:1fr}}
/* Le dither à l'oreille */
.dt-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:10px;font-size:13px;color:#cfd5e1}
.dt-top label{display:flex;align-items:center;gap:8px}
.dt-top select{padding:6px;border:1px solid #ffffff2a;border-radius:7px;background:#1b2130;color:#fff;font:inherit;font-size:13px}
.dt-modes{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.dt-modes button{padding:8px 12px;border:1px solid #ffffff1c;border-radius:9px;background:#1b202b;color:#e7ebf3;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.dt-modes button[aria-pressed=true]{background:#1f2a40;border-color:#6f9bff}
.dt-canvas{height:260px}
.dt-note{max-width:1100px;margin:12px auto 0;font-size:13.5px;color:#aab2c2}