/* ── Imports ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --glass-bg: rgba(15, 23, 42, 0.55);
  --glass-border: rgba(148, 163, 184, 0.08);
  --glass-hover-bg: rgba(30, 41, 59, 0.75);
  --glass-hover-border: rgba(148, 163, 184, 0.2);
  --glow-primary: rgba(99, 102, 241, 0.25);
  --glow-green: rgba(34, 197, 94, 0.6);
  --glow-red: rgba(239, 68, 68, 0.6);
  --glow-yellow: rgba(234, 179, 8, 0.6);
  --accent: #6366f1;
  --accent-dim: rgba(99, 102, 241, 0.15);
  --font-main: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── Fond animé ───────────────────────────────────────────── */
body {
  background: linear-gradient(-45deg, #0a0f1e, #0f172a, #1a0a2e, #050d1a) !important;
  background-size: 400% 400% !important;
  animation: gradientBG 20s ease infinite !important;
  font-family: var(--font-main) !important;
}

/* Grain overlay subtil */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

@keyframes gradientBG {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Glassmorphism cartes ─────────────────────────────────── */
div[class*="Box-"],
div[class*="service-card"],
.service-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ── Lévitation au survol ─────────────────────────────────── */
a:hover div[class*="Box-"],
a:hover .service-card {
  transform: translateY(-5px) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--glass-hover-border),
    0 0 20px var(--glow-primary) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  background: var(--glass-hover-bg) !important;
}

/* ── En-têtes de section ─────────────────────────────────── */
h2[class*="title"],
.service-group-title,
div[class*="category"] h2 {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(148, 163, 184, 0.6) !important;
  padding: 0 0 0.5rem 0.25rem !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important;
  margin-bottom: 0.75rem !important;
}

/* ── Typographie ─────────────────────────────────────────── */
.font-sans,
* {
  font-family: var(--font-main) !important;
  letter-spacing: 0.01em !important;
}

/* Noms des services */
span[class*="service-name"],
div[class*="service-name"] {
  font-weight: 500 !important;
  font-size: 0.95rem !important;
}

/* Descriptions */
span[class*="description"],
div[class*="description"] {
  font-size: 0.72rem !important;
  color: rgba(148, 163, 184, 0.55) !important;
  font-weight: 300 !important;
}

/* ── Indicateurs de statut (ping) ────────────────────────── */
.text-green-500,
span[class*="text-emerald"],
span[class*="text-green"] {
  color: #4ade80 !important;
  text-shadow: 0 0 12px var(--glow-green), 0 0 24px rgba(34, 197, 94, 0.3) !important;
}

.text-red-500,
span[class*="text-red"] {
  color: #f87171 !important;
  text-shadow: 0 0 12px var(--glow-red), 0 0 24px rgba(239, 68, 68, 0.3) !important;
}

.text-yellow-500,
span[class*="text-yellow"],
span[class*="text-amber"] {
  color: #fbbf24 !important;
  text-shadow: 0 0 12px var(--glow-yellow) !important;
}

/* ── Widget de recherche ─────────────────────────────────── */
input[class*="search"],
input[type="text"] {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px) !important;
  font-family: var(--font-main) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[class*="search"]:focus,
input[type="text"]:focus {
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 0 0 3px var(--accent-dim) !important;
  outline: none !important;
}

/* ── Widgets de ressources (CPU, RAM, etc.) ──────────────── */
div[class*="resource"],
div[class*="widget"] {
  font-family: var(--font-mono) !important;
  font-size: 0.8rem !important;
}

/* Barres de progression */
div[class*="progress-bar"],
div[class*="bar-fill"] {
  background: linear-gradient(90deg, var(--accent), #818cf8) !important;
  border-radius: 99px !important;
  box-shadow: 0 0 8px var(--glow-primary) !important;
}