:root {
  --bleu-fonce: #0a1628;
  --bleu-marine: #0f2a52;
  --bleu-clair: #1a3a6b;
  --bleu-accent: #1e4d8c;
  --or: #d4af37;
  --or-clair: #f5d97a;
  --or-vif: #ffd700;
  --blanc: #ffffff;
  --gris: #8899aa;
  --vert: #27ae60;
  --vert-clair: #2ecc71;
  --rouge: #e74c3c;
  --orange: #e67e22;
  --bleu-info: #3498db;
  --violet: #9b59b6;

  --glass-bg-light: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-strong: rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glass-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
  --glass-blur: blur(24px) saturate(180%);
  --glass-blur-light: blur(14px) saturate(160%);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.25);

  --font-main: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-main);
  background: var(--bleu-fonce);
  color: var(--blanc);
  line-height: 1.5;
  min-height: 100vh;
  position: relative;
}

body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
  pointer-events: none;
}

body::before {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.4) 0%, transparent 65%);
  top: -250px; right: -150px;
  animation: float1 25s ease-in-out infinite;
}

body::after {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(30, 77, 140, 0.5) 0%, transparent 65%);
  bottom: -200px; left: -100px;
  animation: float2 30s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-80px, 60px) scale(1.15); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(100px, -80px) scale(1.2); }
}

#app { position: relative; z-index: 1; min-height: 100vh; }
h1,h2,h3,h4 { font-weight: 700; line-height: 1.2; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
a { color: var(--or); text-decoration: none; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bleu-fonce); }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.5); }