Real transparent background or width max-size module;

[esrid]

I can not figure out how to enable real transparency. i mean no background at all; for window#waybar: when we set transparent we still see somethings; and that not whats i want; if it not possible since i've one module (module center) i want the waybar fit perfectly the size of this module ; my code

* {
  font-family: JetBrainsMono Nerd Font;
  font-size: 14px;
  font-weight: 500;
  /* Ombre de texte subtile pour la lisibilité sur fond transparent */
}

window#waybar {
  background-color: transparent;
  color: #f7f7f7;
}

window#waybar.empty #window {
  background-color: transparent;
}


box {
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);

  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}




#workspaces,
#window,
#cpu,
#memory,
#clock,
#pulseaudio,
#tray {

  background: transparent;
  padding: 4px 10px;
  margin: 4px 4px;

  border-radius: 14px;
  transition: background 250ms ease;
}



button:hover {
  background: rgba(255, 255, 255, 0.1);
}


#cpu:hover,
#memory:hover {
  background: rgba(255, 255, 255, 0.08);
}

#cpu {
  color: #50fa7b;

  font-weight: 600;
}

#memory {
  color: #bd93f9;

  font-weight: 600;
}

/* Workspaces */
#workspaces {

  padding: 0;
  margin: 0 6px;
}

#workspaces button {
  color: #888;
  padding: 2px 8px;
  margin: 0 3px;
  border-radius: 10px;
  font-weight: 600;
}

#workspaces button.active,
#workspaces button.focused {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  font-weight: 700;
}

#workspaces button.urgent {
  color: #ff5252;
  background: rgba(255, 82, 82, 0.2);
  animation: pulse 1500ms ease-in-out infinite alternate;
}


#window {
  color: #ccc;
  font-style: italic;
  font-weight: 600;
  background-color: transparent;
}


#window.empty {
  opacity: 0;
  padding: 0;
  margin: 0;
  border: 0;

  min-width: 0;
}


@keyframes pulse {
  to {
    color: #ff5252;
    background: rgba(255, 82, 82, 0.1);
  }
}

config.jsonc

{
  "layer": "top",
  "height": 36,
  "exclusive": false,
  "gtk-layer-shell": true,
  "position": "top",
  "margin-top": 8, 
  "spacing": 0,
  "fixed-center": true,
  "reload_style_on_change ": true,
  "modules-center": [
    "niri/workspaces",
    "niri/window",
    "cpu",
    "memory",
    "pulseaudio",
    "battery",
    "clock",
    "tray"
  ],
  "niri/workspaces": {
    "disable-scroll": false,
    "all-outputs": true,
    "format": "{icon}",
    "format-icons": {
      "1": "1",
      "2": "2",
      "3": "3",
      "4": "4",
      "5": "5",
      "active": "●",
      "default": "○"
    }
  },

  "niri/window": {
    "format": " {title}",

    "format-fallback": "",
    "max-length": 50,
    "rewrite": {
      "(.*) — Mozilla Firefox": "󰈹 $1",
      "(.*) - Firefox": "󰈹 $1",
      "(.*) - Visual Studio Code": "󰨞 $1",
      "(.*) - Alacritty": "Alacritty $1",
      "(.*) - (.*)": " $1" // Capture générique
    },
    "separate-outputs": true
  },
  // MODULES STATS AMÉLIORÉS AVEC ICÔNES
  "cpu": {
    "interval": 2,
    "format": "󰘷 {usage}%", // 👈 Icône CPU
    "tooltip": true,
    "tooltip-format": "CPU: {usage}%\nLoad: {load}",
    "on-click": "btop" // 👈 Lance btop au clic
  },
  "memory": {
    "interval": 2,
    "format": "󰍛 {percentage}%",
    "tooltip": true,
    "tooltip-format": "RAM: {used:0.1f}G / {total:0.1f}G",
    "on-click": "btop"
  },
  // MODULES AJOUTÉS
  "pulseaudio": {
    "format": "{icon} {volume}%",
    "format-muted": "󰖂 Muet",
    "format-icons": {
      "default": [
        "󰕿",
        "󰖀",
        "󰖁"
      ]
    },
    "on-click": "pavucontrol" // 👈 Lance le mixeur audio
  },
  "battery": {
    "states": {
      "good": 95,
      "warning": 30,
      "critical": 15
    },
    "format": "{icon} {capacity}%",
    "format-charging": "󰂄 {capacity}%",
    "format-plugged": "󰂄 {capacity}%",
    "format-full": "󰁹 {capacity}%",
    "format-icons": [
      "󰂎",
      "󰁺",
      "󰁻",
      "󰁼",
      "󰁽",
      "󰁾",
      "󰁿",
      "󰂀",
      "󰂁",
      "󰂂",
      "󰁹"
    ]
  },
  "clock": {
    "format": "󰥔 {:%H:%M}",
    "tooltip-format": "<big>{:%A %d %B %Y}</big>" // 👈 Joli tooltip de calendrier
  },
  "tray": {
    "icon-size": 18,
    "spacing": 8
  }
}