/* ========================================
   🎨 ATLANTIS UI - Design System
   Variables CSS et animations de base
   ======================================== */

:root {
  /* ===== COULEURS PRINCIPALES ===== */
  --atl-cyan: #1ac8db;
  --atl-cyan-glow: rgba(26, 200, 219, 0.5);
  --atl-cyan-soft: rgba(26, 200, 219, 0.2);
  --atl-cyan-subtle: rgba(26, 200, 219, 0.08);

  --atl-pink: #ff6b9d;
  --atl-pink-glow: rgba(255, 107, 157, 0.5);
  --atl-pink-soft: rgba(255, 107, 157, 0.2);

  /* ===== BACKGROUNDS ===== */
  --atl-bg-dark: #0a0a12;
  --atl-bg-overlay: rgba(10, 10, 18, 0.95);
  --atl-bg-card: rgba(255, 255, 255, 0.03);
  --atl-bg-card-hover: rgba(255, 255, 255, 0.06);

  /* ===== BORDURES ===== */
  --atl-border-cyan: rgba(26, 200, 219, 0.3);
  --atl-border-pink: rgba(255, 107, 157, 0.3);
  --atl-border-light: rgba(255, 255, 255, 0.1);
  --atl-border-medium: rgba(255, 255, 255, 0.15);

  /* ===== TEXTES ===== */
  --atl-text-primary: #ffffff;
  --atl-text-secondary: rgba(255, 255, 255, 0.85);
  --atl-text-muted: rgba(255, 255, 255, 0.5);
  --atl-text-disabled: rgba(255, 255, 255, 0.3);

  /* ===== ÉTATS ===== */
  --atl-success: #4ade80;
  --atl-error: #f87171;
  --atl-error-soft: rgba(248, 113, 113, 0.15);
  --atl-warning: #fbbf24;
  --atl-warning-soft: rgba(251, 191, 36, 0.15);

  /* ===== ESPACEMENTS ===== */
  --atl-space-sm: 8px;
  --atl-space-md: 16px;
  --atl-space-lg: 24px;
  --atl-space-xl: 32px;

  /* ===== RAYONS ===== */
  --atl-radius-sm: 6px;
  --atl-radius-md: 10px;
  --atl-radius-lg: 16px;
  --atl-radius-xl: 24px;
  --atl-radius-full: 9999px;

  /* ===== OMBRES ===== */
  --atl-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --atl-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --atl-shadow-glow-cyan: 0 0 20px rgba(26, 200, 219, 0.3);
  --atl-shadow-glow-pink: 0 0 20px rgba(255, 107, 157, 0.3);

  /* ===== TRANSITIONS ===== */
  --atl-transition-fast: 0.15s ease;
  --atl-transition-normal: 0.25s ease;
  --atl-transition-slow: 0.4s ease;

  /* ===== TYPOGRAPHIE ===== */
  --atl-font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===== ANIMATIONS DE BASE ===== */
@keyframes atl-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes atl-fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes atl-spin {
  to { transform: rotate(360deg); }
}

@keyframes atl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes atl-slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes atl-slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== BOUTON SE LEVER (pour seat-audio.js) ===== */
.atlantis-stand-up {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: none;
  border: 2px solid var(--atl-cyan);
  background: var(--atl-bg-overlay);
  color: var(--atl-cyan);
  border-radius: var(--atl-radius-full);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 24px;
  font-size: 14px;
  font-family: var(--atl-font-family);
  cursor: pointer;
  transition: all var(--atl-transition-normal);
  box-shadow: var(--atl-shadow-glow-cyan);
}

.atlantis-stand-up.visible {
  display: block;
  animation: atl-slideDown 0.3s ease;
}

.atlantis-stand-up:hover {
  background: rgba(26, 200, 219, 0.15);
  box-shadow: 0 0 25px rgba(26, 200, 219, 0.5);
  transform: translateX(-50%) translateY(-2px);
}