fix(ags-v3): audit fixes — portable brain path, reactive volume, SCSS dedup

- brain.ts: BRAIN_ROOT résolu via $BRAIN_ROOT env / ~/.config/brain-path / fallback ~/Dev/Brain
- Volume.tsx: bindings volume + mute séparés et réactifs
- style.scss: importe _bar.scss et _heartbeat.scss via @use, supprime 199 lignes dupliquées

ags-v3/style.scss

@@ -1,4 +1,6 @@
 @use "styles/palette" as *;
+@use "styles/heartbeat";
+@use "styles/bar";
 
 * {
   font-family: $font;
@@ -6,203 +8,6 @@
   font-weight: bold;
 }
 
-// ── Layer 0 — Heartbeat ──
-window.Heartbeat {
-  background: transparent;
-
-  .heartbeat-line {
-    background: linear-gradient(
-      to right,
-      rgba(255, 77, 166, 0.0),
-      rgba(255, 77, 166, 0.6),
-      rgba(201, 160, 255, 0.8),
-      rgba(255, 77, 166, 0.6),
-      rgba(255, 77, 166, 0.0)
-    );
-    min-height: 4px;
-  }
-}
-
-// ── Layer 1 — Ghost Bar ──
-window.Bar {
-  background: transparent;
-
-  > centerbox {
-    background: rgba(38, 21, 55, 0.88);
-    border-radius: $radius;
-    border: 3px solid rgba(255, 77, 166, 0.60);
-    margin: 6px 8px;
-    padding: 0 8px;
-    min-height: 38px;
-  }
-
-  .modules-left,
-  .modules-center,
-  .modules-right {
-    padding: 0 4px;
-  }
-
-  .module {
-    padding: 0 8px;
-    color: $text;
-  }
-
-  .prompt-name {
-    color: $magenta;
-    font-size: 14px;
-    padding: 0 0 0 10px;
-  }
-
-  .prompt-cursor {
-    color: $lilac;
-    font-size: 14px;
-    font-weight: 900;
-  }
-
-  .separator {
-    color: rgba(240, 234, 248, 0.12);
-    font-size: 11px;
-    padding: 0 4px;
-    font-weight: normal;
-  }
-
-  // ── clock ──
-  .clock {
-    color: $magenta;
-    font-weight: 900;
-    font-size: 14px;
-    letter-spacing: 0.04em;
-    padding: 0 10px;
-  }
-
-  .date {
-    color: $lavande;
-    font-size: 12px;
-    font-weight: normal;
-    padding: 0 10px 0 2px;
-  }
-
-  // ── system stats ──
-  .cpu {
-    color: $lavande;
-    &.warning { color: $champagne; }
-    &.critical { color: $danger; }
-  }
-
-  .ram {
-    color: $magenta;
-    &.warning { color: $champagne; }
-    &.critical { color: $danger; }
-  }
-
-  // ── network ──
-  .network {
-    color: $lavande;
-    font-size: 12px;
-    padding: 0 8px;
-    &.disconnected { color: $danger; }
-  }
-
-  // ── volume ──
-  .volume {
-    color: $magenta;
-    padding: 0 8px;
-    &.muted { color: rgba(255, 77, 166, 0.30); }
-  }
-
-  // ── battery ──
-  .battery {
-    color: $magenta;
-    padding: 0 8px;
-    &.charging { color: $mitsuri; }
-    &.low { color: $danger; }
-    &.warning { color: $champagne; }
-  }
-
-  // ── hover effects ──
-  .module:hover,
-  .cpu:hover,
-  .ram:hover,
-  .network:hover,
-  .battery:hover {
-    color: $lilac;
-  }
-
-  // ── systray ──
-  .systray {
-    padding: 0 4px;
-  }
-
-  .systray-item {
-    background: transparent;
-    border: none;
-    padding: 0 3px;
-    min-width: 0;
-    min-height: 0;
-
-    &:hover {
-      background: rgba(201, 160, 255, 0.12);
-      border-radius: $radius-sm;
-    }
-  }
-
-  // ── volume interactive ──
-  button.volume,
-  button.muted {
-    background: transparent;
-    border: none;
-    padding: 0 8px;
-    min-width: 0;
-    min-height: 0;
-
-    label { color: $magenta; }
-    &.muted label { color: rgba(255, 77, 166, 0.30); }
-    &:hover label { color: $lilac; }
-  }
-
-  // ── media ──
-  .media-module {
-    padding: 0 4px;
-  }
-
-  .media {
-    padding: 0 4px;
-  }
-
-  .media.paused {
-    .media-text {
-      color: rgba(201, 160, 255, 0.50);
-      font-style: italic;
-    }
-  }
-
-  .media-text {
-    color: $lilac;
-    font-size: 12px;
-    font-weight: normal;
-    padding: 0 6px;
-  }
-
-  .media-prev,
-  .media-play,
-  .media-next {
-    background: transparent;
-    border: none;
-    padding: 0 3px;
-    min-width: 0;
-    min-height: 0;
-
-    label {
-      color: $lilac;
-      font-size: 13px;
-    }
-
-    &:hover label {
-      color: $magenta;
-    }
-  }
-}
-
 // ── Layer 3 — Brain Power Panel ──
 window.BrainPower {
   background: transparent;