:root {
    --bg: #030307;
    --glass: rgba(15,15,25,0.80);
    --gb: rgba(255,255,255,0.08);
    --accent: #a78bfa;
    --a2: #34d399;
    --a3: #f472b6;
    --text: #f8fafc;
    --muted: #64748b;
    --ml: #94a3b8;
    --red: #ef4444;
    --r: 18px;
}
*, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    /* iOS: empêche la sélection de texte accidentelle */
    -webkit-touch-callout: none;
}

/* iOS: empêche le bounce scroll sur le body */
html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════
   DESKTOP : layout fixe pleine hauteur
   MOBILE  : page scrollable naturelle
═══════════════════════════════════════════ */

html { height: 100%; }

body {
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    /* scroll autorisé — le JS gérera le canvas */
}

/* Fond radial fixe derrière tout */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 25%, #1a1033 0%, #030307 68%);
    z-index: -1;
}

/* ──────────────────────────────
   DESKTOP : grille 3 lignes
────────────────────────────── */
@media (min-width: 601px) {
    body { overflow: hidden; }
    #mvapp {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100dvh;
        height: 100vh;
    }
    #mv-main { min-height: 0; }
    #mv-ui { max-height: 44vh; overflow: hidden; }
}

/* ──────────────────────────────
   MOBILE : colonne scrollable
────────────────────────────── */
@media (max-width: 600px) {
    body { overflow: hidden; }

    /* Layout fixé par JS via --app-h */
    #mvapp {
        display: flex;
        flex-direction: column;
        height: var(--app-h, 100vh);
        overflow: hidden;
    }

    header { flex: 0 0 auto; }

    /* Animation : flex:1 prend tout ce qui reste */
    #mv-main {
        flex: 1 1 0;
        min-height: 0;
    }

    /* Panels : hauteur fixée par JS via --ui-h */
    #mv-ui {
        flex: 0 0 var(--ui-h, auto);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ── HEADER ── */
header {
    flex-shrink: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 22px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}
.logo-box h1 { font-size: 13px; letter-spacing: 4px; font-weight: 700; color: var(--accent); }
.logo-box span { font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; display: block; margin-top: 2px; }
#mv-status {
    background: var(--glass);
    border: 1px solid var(--gb);
    padding: 6px 13px;
    border-radius: 100px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    display: flex; align-items: center; gap: 7px;
    backdrop-filter: blur(12px);
    transition: all 0.3s;
    white-space: nowrap;
}
#mv-dot { width:6px; height:6px; background:#444; border-radius:50%; flex-shrink:0; transition:all 0.3s; }
#mv-status.active   #mv-dot { background:var(--a2); box-shadow:0 0 8px var(--a2); }
#mv-status.recording #mv-dot { background:var(--red); box-shadow:0 0 8px var(--red); animation:pdot 1s ease infinite; }
@keyframes pdot { 0%,100%{transform:scale(1)} 50%{transform:scale(1.5)} }

/* ── VISUALISEUR ── */
#mv-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#mv-canvas { position:absolute; inset:0; width:100%; height:100%; }
.display-node { text-align:center; z-index:5; pointer-events:none; user-select:none; }
#mv-note {
    font-family: 'Space Mono', monospace;
    font-size: clamp(56px, 11vw, 128px);
    font-weight: 700; line-height: 1;
    background: linear-gradient(to bottom, #fff 30%, var(--accent));
    -webkit-background-clip: text; color: transparent;
    opacity: 0.05;
    transition: opacity 0.35s cubic-bezier(.2,0,.2,1),
                filter 0.35s cubic-bezier(.2,0,.2,1),
                transform 0.35s cubic-bezier(.2,0,.2,1);
    filter: blur(10px);
}
#mv-note.on { opacity:1; filter:blur(0); transform:scale(1.05); }
#mv-freq { font-family:'Space Mono',monospace; font-size:10px; color:var(--ml); letter-spacing:4px; margin-top:8px; }

/* ── FOOTER UI ── */
#mv-ui {
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr 1fr;
    gap: 10px;
    padding: 10px 16px 14px;
    position: relative;
}

/* ── PANELS ── */
.panel {
    background: var(--glass);
    border: 1px solid var(--gb);
    border-radius: var(--r);
    padding: 13px;
    backdrop-filter: blur(20px);
    display: flex; flex-direction: column; gap: 7px;
    min-width: 0; min-height: 0; overflow: hidden;
}
.panel:hover { border-color: rgba(255,255,255,0.13); }
.panel-title { font-size:8px; text-transform:uppercase; letter-spacing:2.5px; color:var(--muted); text-align:center; flex-shrink:0; }

/* ── BOUTONS ── */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; flex:1; }
.btn-opt {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--gb);
    padding: 8px 2px; border-radius:10px;
    font-size:8px; font-family:'Space Mono',monospace;
    color:var(--ml); cursor:pointer; text-align:center;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.15s; user-select:none;
}
.btn-opt:active { transform:scale(0.93); }
.btn-opt.on { background:rgba(167,139,250,0.15); border-color:var(--accent); color:var(--accent); box-shadow:0 0 10px rgba(167,139,250,0.12); }

/* ── SELECT ── */
select {
    width:100%; background:rgba(0,0,0,0.5); border:1px solid var(--gb);
    color:var(--text); padding:7px 26px 7px 9px; border-radius:10px;
    font-size:9px; font-family:'Plus Jakarta Sans',sans-serif;
    cursor:pointer; outline:none; appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat:no-repeat; background-position:right 8px center; background-size:12px; flex-shrink:0;
}

/* ── ENGINE ── */
#panel-engine { flex-direction:column; }
#mv-rec, #mv-btn {
    display:flex; align-items:center; justify-content:center; gap:9px;
    border-radius:13px; cursor:pointer; transition:all 0.3s; border:1px solid; padding:10px;
}
#mv-rec { border-color:var(--red); background:rgba(239,68,68,0.07); flex-shrink:0; }
#mv-rec.on { background:rgba(239,68,68,0.18); box-shadow:0 0 16px rgba(239,68,68,0.3); }
#mv-rec b { font-size:10px; letter-spacing:3px; color:var(--red); }
#mv-rec-dot { width:7px; height:7px; border-radius:50%; background:rgba(239,68,68,0.3); transition:all 0.3s; }
#mv-rec.on #mv-rec-dot { background:var(--red); box-shadow:0 0 10px var(--red); }
#mv-btn { border-color:var(--accent); background:linear-gradient(135deg,rgba(167,139,250,0.08),rgba(244,114,182,0.04)); flex:1; }
#mv-btn.on { border-color:var(--a3); background:rgba(244,114,182,0.12); }
#mv-btn b { font-size:11px; letter-spacing:3px; color:var(--accent); transition:color 0.3s; }
#mv-btn.on b { color:var(--a3); }
.eico { font-size:20px; filter:drop-shadow(0 0 8px var(--accent)); flex-shrink:0; }

/* ── SLIDERS ── */
.fx-row { display:flex; flex-direction:column; gap:0; flex:1; min-height:0; justify-content:space-between; }
.fx-item { display:flex; align-items:center; gap:7px; min-width:0; flex:1; }
.fx-label { font-size:7px; font-family:'Space Mono',monospace; color:var(--muted); letter-spacing:1px; text-transform:uppercase; width:42px; min-width:42px; flex-shrink:0; }
.fx-val   { font-size:8px; font-family:'Space Mono',monospace; color:var(--accent); width:32px; min-width:32px; text-align:right; flex-shrink:0; }

input[type=range] {
    -webkit-appearance:none; appearance:none;
    flex:1; min-width:0; height:3px; border-radius:2px;
    outline:none; cursor:pointer;
    background:rgba(255,255,255,0.08);
}
input[type=range]::-webkit-slider-runnable-track {
    height:3px; border-radius:2px;
    background:linear-gradient(to right,
        var(--accent) 0%, var(--accent) var(--pct,0%),
        rgba(255,255,255,0.08) var(--pct,0%));
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:14px; height:14px; margin-top:-5.5px;
    border-radius:50%; background:var(--accent);
    box-shadow:0 0 6px rgba(167,139,250,0.7); cursor:pointer;
    transition:transform 0.1s;
}
input[type=range]:active::-webkit-slider-thumb { transform:scale(1.3); }
input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; border:none; background:var(--accent); box-shadow:0 0 6px rgba(167,139,250,0.7); cursor:pointer; }
input[type=range]::-moz-range-track { height:3px; border-radius:2px; background:rgba(255,255,255,0.08); }
input[type=range]::-moz-range-progress { height:3px; border-radius:2px; background:var(--accent); }

/* ═══ ORDRE DESKTOP ═══ */
@media (min-width:601px) {
    #panel-engine      { order:3; }
    #panel-instruments { order:1; }
    #panel-harm        { order:2; }
    #panel-effects     { order:4; }
}

/* ═══ TABLETTE 601–900 ═══ */
@media (min-width:601px) and (max-width:900px) {
    input[type=range] { height: 5px; }
    input[type=range]::-webkit-slider-thumb {
        width: 22px; height: 22px; margin-top: -8.5px;
    }
    input[type=range]::-moz-range-thumb { width: 22px; height: 22px; }
    #mv-ui { grid-template-columns:1fr 1fr; max-height:58vh; gap:8px; padding:8px 12px 12px; }
    #panel-engine { order:1; grid-column:span 2; flex-direction:row; }
    #panel-instruments { order:2; }
    #panel-harm        { order:3; }
    #panel-effects     { order:4; grid-column:span 2; }
    .fx-row { flex-direction:row; flex-wrap:wrap; gap:5px 14px; justify-content:flex-start; }
    .fx-item { flex:1 1 44%; }
    #mv-rec { flex-direction:row; }
    #mv-btn { flex:1; }
}

/* ═══ MOBILE <= 600px ═══ */
@media (max-width:600px) {
    :root { --r:12px; }
    header { padding: calc(env(safe-area-inset-top, 0px) + 7px) 14px 7px; }
    .logo-box h1 { font-size:12px; letter-spacing:3px; }
    .logo-box span { font-size:7px; }
    #mv-status { padding:5px 10px; font-size:9px; gap:6px; }

    /* Canvas visualiseur prend tout l'espace restant */
    #mv-main { flex: 1; min-height: 100px; }

    /* Grille mobile : 2 colonnes */
    #mv-ui {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        padding: 5px 8px calc(env(safe-area-inset-bottom,0px) + 6px);
    }

    /* Ordre mobile optimisé */
    #panel-engine      { order:1; grid-column:span 2; flex-direction:row; gap:8px; }
    #panel-instruments { order:2; grid-column:span 2; }
    #panel-harm        { order:3; }
    #panel-effects     { order:4; }

    /* Engine : boutons compacts */
    #mv-btn { flex:1; min-height:44px; border-radius:11px; }
    #mv-btn b { font-size:10px; letter-spacing:2px; }
    .eico { font-size:17px; }
    #mv-rec { width:52px; flex-shrink:0; flex-direction:column; gap:2px; min-height:44px; border-radius:11px; }
    #mv-rec b { font-size:8px; letter-spacing:1.5px; }

    /* Instruments : grille 3×2 */
    #panel-instruments .grid-3 { gap:4px; }
    .btn-opt { padding:7px 4px; font-size:9px; min-height:34px; border-radius:9px; letter-spacing:0.5px; }
    .btn-opt.on { box-shadow:0 0 10px rgba(167,139,250,0.2); }

    /* Harmonizer */
    #panel-harm { gap:5px; }
    #panel-harm select { font-size:10px; padding:6px 26px 6px 9px; }
    #panel-harm select { font-size: 16px; }
    #panel-harm .grid-3 { grid-template-columns:1fr 1fr 1fr; gap:5px; }
    #panel-harm .btn-opt { min-height:34px; font-size:9px; }

    /* Effects : sliders confortables */
    .panel-title { font-size:7.5px; margin-bottom:2px; letter-spacing:2px; }
    .fx-row { flex-direction:column; gap:14px; justify-content:flex-start; flex:none; }
    .fx-item { flex:none; width:100%; display:flex; align-items:center; gap:10px; }
    .fx-label { width:52px; min-width:52px; font-size:8px; }
    .fx-val   { width:34px; min-width:34px; font-size:8px; text-align:right; }
    input[type=range] { height:6px; touch-action:pan-x; }
    input[type=range]::-webkit-slider-thumb { width:26px; height:26px; margin-top:-10px; }
    input[type=range]::-moz-range-thumb { width:26px; height:26px; }
    input[type=range]::-webkit-slider-runnable-track { height:6px; }
    .panel { padding:8px 10px; gap:5px; }

    /* Note display plus visible */
    #mv-note { font-size: clamp(48px, 18vw, 80px); }
    #mv-freq { font-size:9px; letter-spacing:3px; margin-top:6px; }
}

@media (max-width:380px) {
    #mv-ui { grid-template-columns: 1fr; }
    #panel-harm { grid-column: span 1; }
    #panel-effects { grid-column: span 1; }
    .btn-opt { font-size:8px; padding:10px 2px; min-height:40px; }
}

@media (max-width: 320px) {
    #mv-ui {
        grid-template-columns: 1fr;
        padding: 4px 6px calc(env(safe-area-inset-bottom, 0px) + 4px);
        gap: 4px;
    }
    #panel-engine { grid-column: span 1; }
    #panel-instruments .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 3px; }
    .btn-opt { font-size: 7px; padding: 6px 2px; min-height: 32px; }
    #mv-btn b { font-size: 9px; letter-spacing: 1.5px; }
}

@media (min-width:1400px) {
    #mv-ui { padding:12px 28px 18px; gap:12px; }
    .panel { padding:16px; gap:8px; }
}


/* ════════════════════════════════════════════
   BOUTON EFFECTS MOBILE + OVERLAY
════════════════════════════════════════════ */

/* Bouton mobile — caché sur desktop */
#fx-mob-btn {
    display: none;
}

/* Overlay — caché par défaut */
#fx-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(3,3,7,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#fx-overlay.open {
    display: flex;
}
#fx-overlay-inner {
    width: 100%;
    max-width: 520px;
    background: rgba(15,15,30,0.98);
    border: 1px solid rgba(167,139,250,0.2);
    border-top: none;
    border-radius: 0 0 24px 24px;
    padding: 0 0 28px;
    box-shadow: 0 8px 40px rgba(167,139,250,0.15);
}
#fx-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top,0px) + 16px) 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
#fx-overlay-title {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--accent);
    font-weight: 700;
}
#fx-overlay-close {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--ml);
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
#fx-overlay-close:active { background: rgba(255,255,255,0.15); transform: scale(0.92); }
#fx-overlay-sliders {
    padding: 8px 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fx-mob-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fx-mob-item:last-child { border-bottom: none; }
.fx-mob-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.fx-mob-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--ml);
    text-transform: uppercase;
}
.fx-mob-val {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--accent);
    font-weight: 700;
    min-width: 48px;
    text-align: right;
}
.fx-mob-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    background: rgba(255,255,255,0.08);
    touch-action: pan-x;
}
.fx-mob-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--accent) 0%, var(--accent) var(--pct,0%),
        rgba(255,255,255,0.08) var(--pct,0%));
}
.fx-mob-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px; height: 28px;
    margin-top: -11px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(167,139,250,0.6);
    cursor: pointer;
    transition: transform 0.1s;
}
.fx-mob-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.fx-mob-range::-moz-range-thumb {
    width: 28px; height: 28px;
    border-radius: 50%; border: none;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(167,139,250,0.6);
    cursor: pointer;
}
.fx-mob-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); }
.fx-mob-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }

/* ── Mobile : afficher le bouton, cacher les sliders inline ── */
@media (max-width: 600px) {
    #fx-row-desktop { display: none !important; }

    #fx-mob-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: 1px solid rgba(167,139,250,0.3);
        background: rgba(167,139,250,0.07);
        color: var(--accent);
        font-size: 22px;
        cursor: pointer;
        transition: all 0.2s;
        flex-shrink: 0;
        margin: auto;
    }
    #fx-mob-btn:active { background: rgba(167,139,250,0.2); transform: scale(0.92); }

    /* Panel effects plus compact sur mobile */
    #panel-effects {
        justify-content: center;
    }
}