/* ============================================================
   SHUFFLE DRUMMER — SKIN SOMBRE (test admin)
   ------------------------------------------------------------
   TOUTES les règles sont scopées `html.sd-skin-dark` → zéro effet
   tant que la classe n est pas posée (même pattern que
   mobile-machine.css / html.sd-mobile).

   Activation : console admin (⚙ ADMIN → section SKIN), persistée
   en localStorage `sd_skin_dark`, appliquée par le script de tête
   d index.html avant le premier paint.

   Principe : layout STRICTEMENT identique — seules les couleurs
   changent. Le chassis/panneaux passent en anthracite, les boutons
   restent des touches GRIS CLAIR qui se détachent du fond (retour
   utilisateur : « c est le fond qui compte en sombre »). L accent
   orange, l écran LCD, les LEDs et le step-seq (déjà sombres) ne
   bougent pas.

   Technique : `html.sd-skin-dark :where(.x)` a une spécificité
   (0,1,1) → bat la règle de base `.x` (0,1,0) mais PERD contre les
   états `.x.on` / `.x.muted` / `.x.active` (0,2,0) — les états
   colorés d origine restent donc intacts sans les redéclarer.
   `!important` réservé aux styles inline (convention ADR-16).
   ============================================================ */

/* ── Design tokens inversés ─────────────────────────────────── */
html.sd-skin-dark {
  /* Surfaces (chassis + panneaux) */
  --surface-mid: #2a2b30;      /* panneaux .top / .mixer (était #a8a49c) */
  --surface-mid2: #232428;     /* .bottom-comp + bas du hub roue (#9e9a92) */
  --surface-light: #3e3f45;    /* haut du chassis (était #cac6be) */
  --surface-light2: #34353b;   /* bas du chassis (était #b4b0a8) */
  --border-color: #52545c;     /* liserés (était #a8a49e) */

  /* Texte posé sur le chassis/panneaux (inversion clair↔sombre) */
  --text-primary: #eeede8;     /* était #1a1612 */
  --text-knob: #e2e0da;        /* était #252018 */
  --text-deep: #cfccc5;        /* était #2e2922 */
  --text-muted: #9c968e;       /* était #8a7a6a */

  /* Boutons / divers */
  --btn-light: #6e727b;        /* haut des touches grises (était #bab6ae) */
  --btn-shadow: #16171b;       /* ombre 3D sous les touches (était #969290) */
  --muted-border: #5e616a;     /* était #9a9690 */
  --fader-slot: #101114;       /* rail des faders (était #8a8682) */
}

/* ── Carcasse ───────────────────────────────────────────────── */
/* Le FOND DE PAGE (html/body) reste le gris clair d origine (#a0a09a,
   machine.css) — demande utilisateur : le « bureau » derrière la machine
   ne change pas. Seul le boîtier passe en sombre. */
html.sd-skin-dark :where(.machine) {
  /* même structure de dégradé que l original (stop médian hardcodé #bfbbb3) */
  background: linear-gradient(180deg, var(--surface-light) 0%, #393a40 8%, var(--surface-light2) 100%);
  box-shadow: 0 26px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* La fenêtre DAW reprend la carcasse de .machine (daw.css) */
html.sd-skin-dark :where(.daw-window) {
  background: linear-gradient(180deg, var(--surface-light) 0%, #393a40 8%, var(--surface-light2) 100%);
  box-shadow: 0 26px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Touches grises (boutons chassis) ───────────────────────── */
/* Base uniquement : les états .on/.crush-on/.muted/.armed (0,2,0)
   gardent la main sur ce :where (0,1,1). */
html.sd-skin-dark :where(.pitch-btn, .drum-btn, .extra-load-btn, .vol-btn) {
  background: linear-gradient(180deg, #6e727b, #545861);
  border-color: #5c5f68;
}
html.sd-skin-dark :where(.drum-btn.muted) {
  background: linear-gradient(180deg, #4a4d55, #3c3f46);
}
html.sd-skin-dark :where(.trn-stop, .trn-play) {
  background: #62666f;
  box-shadow: 0 3px 0 #1a1b20, inset 0 1px 0 rgba(255,255,255,0.14);
}
html.sd-skin-dark :where(.ms-btn) {
  background: linear-gradient(180deg, #5e626b, #4a4e57);
  color: #e2e0da;
}
html.sd-skin-dark :where(.inf-btn) {
  background: linear-gradient(180deg, #6e727b, #545861);
  border-color: #5c5f68;
  color: #c9c6bf;
}
html.sd-skin-dark :where(.inf-btn:not(.lit)):hover { color: #f2f0ea; }

/* SHARE BEAT (stylé inline dans index.html → !important, ADR-16) :
   violet un cran plus lumineux pour rester lisible sur fond sombre */
html.sd-skin-dark #beat-card-btn {
  background: #3a1c7e !important;
  border-color: #6a48c0 !important;
}

/* ── Knobs / roue / faders ──────────────────────────────────── */
html.sd-skin-dark :where(.knob-body) {
  background: radial-gradient(circle at 35% 30%, #74767e, var(--border-color) 72%);
}
html.sd-skin-dark :where(.wheel-outer) {
  background: radial-gradient(circle at 35% 28%, #75777f, var(--surface-mid) 75%);
}
html.sd-skin-dark :where(.ptn-num) { color: #f2f0ea; }
html.sd-skin-dark :where(.fader-thumb) {
  background: linear-gradient(180deg, #7e828b 0%, #656972 40%, #52565f 60%, #6a6e77 100%);
  border-color: #61646e;
}
/* graduations du mixer : traits noirs → traits blancs translucides */
html.sd-skin-dark :where(.fader-grad) { background: rgba(255,255,255,0.10); }
html.sd-skin-dark :where(.fader-grad.major) { background: rgba(255,255,255,0.16); }

/* ── Fader MASTER PITCH (échelle/ticks hardcodés sombres) ───── */
html.sd-skin-dark :where(.gpitch-scale) { color: #9ca0a8; }
html.sd-skin-dark :where(.gpitch-tick) { background: #565962; }

/* ── Onglets + panes du compartiment bas ────────────────────── */
html.sd-skin-dark :where(.btab:not(.active)):hover {
  color: #dad7d0;
  background: rgba(255,255,255,0.05);
}
html.sd-skin-dark :where(.settings-info-btn) { color: #cfccc5; border-color: #5e616a; }
html.sd-skin-dark :where(.pane-section-title) { color: #e6e4de; }
html.sd-skin-dark :where(.ssl-knob-val) { color: #e6e4de; }
html.sd-skin-dark :where(.info-pane b) { color: #b5b2ab; }
html.sd-skin-dark :where(.lufs-scale-labels span) { color: #9ca0a8; }

/* STEP : libellés/boutons hardcodés sombres → éclaircis */
html.sd-skin-dark :where(.seq-label) { color: #969089; }
html.sd-skin-dark :where(.seq-header-label) { color: #cfccc5; }
html.sd-skin-dark :where(.seq-clear-btn) { color: #cfccc5; }
html.sd-skin-dark :where(.seq-len-btn) { color: #a9a49c; border-color: #5e616a; }

/* PADS (les pads MPC gris clair + labels sombres restent tels quels,
   comme les vraies touches MPC — seuls les libellés posés sur le
   panneau sont éclaircis) */
html.sd-skin-dark :where(.pads-title, .pads-bank-label) { color: #b8bac2; }
html.sd-skin-dark :where(.pads-midi-bar) { color: #a2a4ae; }
html.sd-skin-dark :where(.pads-legend) { color: #9a9ca6; }
html.sd-skin-dark :where(.pads-bank-btn) { color: #b0b2bc; border-color: #565660; }
html.sd-skin-dark :where(.pads-ctx-btn) { --pad-color: #b0b2bc; }

/* SEQUENCER (pattern) : header sur fond de pane */
html.sd-skin-dark :where(.pat-title) { color: #b8bac2; }
html.sd-skin-dark :where(.pat-empty) { color: #eae8e2; }
html.sd-skin-dark :where(.pat-btn) { color: #b0b2ba; }
html.sd-skin-dark :where(.pat-reset-btn) { color: #c4c2ca; }

/* ── DAW (fenêtre 🎛) : libellés hardcodés sombres ──────────── */
html.sd-skin-dark :where(.daw-ruler-bar) { color: #cfccc5; }
html.sd-skin-dark :where(.daw-chain-arrow) { color: #a8a29a; }

/* ════════════════════════════════════════════════════════════
   POPUPS « papier » en sombre (help / chut / contact)
   ------------------------------------------------------------
   - HELP (learn/tutorial) : stylé par classes (.learn-popup-*,
     machine.css) → un sélecteur scopé bat la base par spécificité,
     pas de !important.
   - CHUT (chat qui dort) + CONTACT : entièrement en styles inline
     dans index.html → !important OBLIGATOIRE et légitime (ADR-16 :
     !important réservé au dépassement des styles inline). Ancres :
     .sd-cat-box / .sd-cat-credits (chat) et les #id existants
     (contact). Les couleurs d accent (noms d auteurs, bullets,
     bouton SEND orange) restent inchangées.
   ════════════════════════════════════════════════════════════ */

/* ── HELP (learn / tutorial) ────────────────────────────────── */
html.sd-skin-dark .learn-popup-inner {
  background: #22242a;
  border-color: #3a3d46;
  color: #d8d4cc;
}
html.sd-skin-dark .learn-popup-body { color: #d2cfc8; }
html.sd-skin-dark .learn-popup-body b { color: #f2f0ea; }
html.sd-skin-dark .learn-popup-body u {
  color: #7ab6ff; text-decoration-color: rgba(122,182,255,0.4);
}
html.sd-skin-dark .learn-popup-body i { color: #b0aaa0; }
html.sd-skin-dark .learn-popup-footer { background: #1b1d22; border-top-color: #3a3d46; }
html.sd-skin-dark .learn-lang-btn {
  background: #34363d; border-color: #4a4d56; color: #d8d4cc;
}
html.sd-skin-dark .learn-lang-btn:hover { background: #40434c; border-color: #5a5d66; }
html.sd-skin-dark .learn-close-btn { color: #a6a29a; }
html.sd-skin-dark .learn-close-btn:hover { color: var(--accent-bright); }
html.sd-skin-dark .learn-search-input {
  background: #171a1f; border-color: #40434c; color: #eceae4;
}
html.sd-skin-dark .learn-search-input:focus { border-color: #5a5d66; }
html.sd-skin-dark .learn-search-input::placeholder { color: #6a6d74; }
html.sd-skin-dark .learn-search-results { background: #1b1d22; border-top-color: #3a3d46; }
html.sd-skin-dark .learn-search-item { color: #d2cfc8; border-bottom-color: #2c2e34; }
html.sd-skin-dark .learn-search-item:hover { background: #2a2c32; color: var(--accent-bright); }
html.sd-skin-dark .learn-search-empty { color: #8a867e; }

/* ── CHUT (chat qui dort) — inline → !important ─────────────── */
html.sd-skin-dark .sd-cat-box {
  background: #22242a !important;
  border-color: #3a3d46 !important;
  color: #d8d4cc !important;
}
html.sd-skin-dark .sd-cat-credits { color: #cfccc5 !important; }
html.sd-skin-dark #cat-changelog {
  color: #cfccc5 !important;
  border-top-color: #3a3d46 !important;
}
html.sd-skin-dark #cat-changelog [data-cti="cl_title"] { color: #f2f0ea !important; }
html.sd-skin-dark #cat-changelog > button {
  color: #cfccc5 !important;
  border-top-color: #34363d !important;
}
html.sd-skin-dark #cat-popup-overlay .cat-lang-btn {
  color: #cfccc5 !important;
  border-color: #4a4d56 !important;
}
html.sd-skin-dark #cat-popup-overlay [data-cti="close_btn"] {
  color: #a6a29a !important;
  border-color: #4a4d56 !important;
}

/* ── CONTACT — inline → !important ──────────────────────────── */
html.sd-skin-dark #contact-box {
  background: #22242a !important;
  border-color: #c78a3a !important;
}
html.sd-skin-dark #contact-box > div:first-child > div { color: #ffae5a !important; }
/* Le chat (cat_closed.png) est en mix-blend-mode:multiply → pensé pour le fond
   papier clair ; sur fond sombre « multiply » le noircit en silhouette terne.
   On repasse en rendu normal (le PNG est détouré). */
html.sd-skin-dark #contact-box img { mix-blend-mode: normal !important; }
html.sd-skin-dark #cf-captcha-label { color: #c9a86a !important; }
html.sd-skin-dark #cf-name,
html.sd-skin-dark #cf-email,
html.sd-skin-dark #cf-message,
html.sd-skin-dark #cf-captcha {
  background: #171a1f !important;
  border-color: #40434c !important;
  color: #eceae4 !important;
}
html.sd-skin-dark #cf-name::placeholder,
html.sd-skin-dark #cf-email::placeholder,
html.sd-skin-dark #cf-message::placeholder,
html.sd-skin-dark #cf-captcha::placeholder { color: #a6a9b0 !important; opacity: 1; }
html.sd-skin-dark #contact-box button:not(#cf-submit) {
  background: #34363d !important;
  border-color: #4a4d56 !important;
  color: #d8d4cc !important;
}

/* ── AUTH (login / signup / reset) — carte papier → anthracite ──
   Stylée par #id dans <style id="auth-gate-css"> (index.html) :
   `html.sd-skin-dark #auth-modal` bat `#auth-modal` par spécificité,
   pas de !important — sauf le chat (mix-blend-mode inline, ADR-16). */
html.sd-skin-dark #auth-modal {
  background: #22242a;
  border-color: #c78a3a;
}
html.sd-skin-dark #auth-modal h3 { color: #ffae5a; }
html.sd-skin-dark #auth-modal .auth-sub { color: #b0aaa0; }
html.sd-skin-dark #auth-modal .auth-close { color: #a6a29a; }
html.sd-skin-dark #auth-modal input {
  background: #171a1f;
  border-color: #40434c;
  color: #eceae4;
}
html.sd-skin-dark #auth-modal input::placeholder { color: #a6a9b0; opacity: 1; }
/* bouton secondaire : orange foncé illisible sur fond sombre → éclairci */
html.sd-skin-dark #auth-secondary { border-color: #ff9a40; color: #ff9a40; }
html.sd-skin-dark #auth-links a { color: #ffae5a; }
/* Chat détouré en mix-blend-mode:multiply (inline, pensé pour le papier
   clair) → silhouette noire sur fond sombre ; rendu normal (comme #contact-box). */
html.sd-skin-dark #auth-cat { mix-blend-mode: normal !important; }

/* Numéros de temps du séquenceur — noirs sur le thème clair par défaut,
   repassés en clair sur le skin sombre. */
html.sd-skin-dark .seq-beat-num { color: #d0ccc8 !important; }
html.sd-skin-dark .seq-beat-num.downbeat { color: #ffffff !important; }
html.sd-skin-dark .seq-top-btn { color: #b8b4ac; border-color: #4a4d56; }
html.sd-skin-dark .seq-top-btn:hover { color: #e8e4dc; border-color: #8a8d96; }

/* Boutons TIMING / CLEAR ALL BARS : fonds orange/rouge conservés, police
   CLAIRE sur le skin sombre (foncée sur le thème clair par défaut). */
html.sd-skin-dark .seq-top-btn.seq-timing-btn { color: #fff; }
html.sd-skin-dark .seq-top-btn.seq-timing-btn.active { color: #eaffea; }
html.sd-skin-dark .seq-clear-btn { color: #fff; }

/* ── PADS MPC + PADS FX : gris clair NEUTRE en skin sombre (ex-crème) ──
   :not(.hit)/:not(.mfx-pad-active) : les flashs/états actifs gardent leurs
   couleurs (spécificité supérieure conservée, pas de !important, ADR-16). */
html.sd-skin-dark .mpc-pad:not(.hit) {
  background: linear-gradient(180deg, #c6c8cc, #aeb0b6);
  box-shadow: 0 3px 0 #85878d;
}
html.sd-skin-dark :where(.mpc-pad) { border-color: #97999f; }
html.sd-skin-dark .mfx-pad-btn:not(.mfx-pad-active) {
  background: #b8bac0;
  color: #26282e;
}
/* le contour ne se grise QUE si le pad n'a pas d'état (used = orange mémoire,
   muted = rouge bypass — ces indications restent visibles) */
html.sd-skin-dark .mfx-pad-btn:not(.mfx-pad-active):not(.mfx-pad-used):not(.mfx-pad-muted) {
  border-color: #92949a;
}