/* ════════════════════════════════════════════════════════════
   V3 SKIN — habille l'ancien tunnel Spotify (upgrade/info)
   aux couleurs du design signature : fond sombre + cyan.
   Chargé en DERNIER ; ne touche à aucune logique.
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --color-primary: #00ffe0;
  --color-primary-dark: #0a8b7a;
  --color-primary-light: #5cffe9;
  --color-surface: #15151c;
  --color-bg: #0a0a0f;
  --color-neutral-50: #0a0a0f;
  --color-neutral-100: #1b1b24;
  --color-neutral-200: #23232e;
  --color-neutral-300: #2e2e3a;
  --color-neutral-400: #8a8a95;
  --color-neutral-500: #a6a6b0;
  --color-neutral-600: rgba(245,245,242,0.62);
  --color-neutral-700: #d8d8de;
  --color-neutral-800: #ececf0;
  --color-neutral-900: #f5f5f2;
  --color-success: #00e676;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 4px 16px -2px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 32px -4px rgba(0,0,0,.55);
  --shadow-xl: 0 24px 48px -8px rgba(0,0,0,.6);
  --shadow-2xl: 0 40px 64px -12px rgba(0,0,0,.65);
  --v3-line: rgba(255,255,255,0.09);
  --v3-line-2: rgba(255,255,255,0.16);
}

/* ── Base ── */
body {
  background: var(--color-bg) !important;
  color: var(--color-neutral-900);
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
}
::selection { background: rgba(0,255,224,.25); }

/* ── Navbar ── */
.navbar {
  background: rgba(10,10,15,.88) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--v3-line);
  box-shadow: none !important;
}
.nav-link { color: var(--color-neutral-600) !important; }
.nav-link:hover, .nav-link.active { color: var(--color-primary) !important; }
.nav-dropdown-menu {
  background: #15151c !important;
  border: 1px solid var(--v3-line-2) !important;
  box-shadow: var(--shadow-xl) !important;
}
.nav-dropdown-item { color: var(--color-neutral-700) !important; }
.nav-dropdown-item:hover { background: rgba(0,255,224,.07) !important; color: var(--color-primary) !important; }
.mobile-nav, .mobile-nav-content { background: #0f0f15 !important; color: var(--color-neutral-900); }
.mobile-nav-links a { color: var(--color-neutral-700) !important; }
.lang-switcher .lang-btn { color: var(--color-neutral-700); }

/* ── Cartes ── */
.card, .gradient-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--v3-line) !important;
  box-shadow: var(--shadow-lg) !important;
}
.gradient-card { background: linear-gradient(160deg, #15151c 0%, #101018 100%) !important; }

/* ── Formulaires ── */
.form-input, .form-select, input[type="text"], input[type="email"], input[type="password"], select, textarea {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--v3-line-2) !important;
  color: var(--color-neutral-900) !important;
}
.form-input:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,255,224,.15) !important;
  background: rgba(255,255,255,.07) !important;
}
.form-input::placeholder, input::placeholder { color: var(--color-neutral-400) !important; }
.form-label { color: var(--color-neutral-700) !important; }
.form-hint { color: var(--color-neutral-400) !important; }
input[type="checkbox"] { accent-color: var(--color-primary); }

/* ── Boutons ── */
.btn-primary {
  background: var(--color-primary) !important;
  color: #0a0a0f !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 8px 24px -6px rgba(0,255,224,.35) !important;
}
.btn-primary:hover {
  background: var(--color-primary-light) !important;
  color: #0a0a0f !important;
  transform: translateY(-1px);
}
.btn-primary i, .btn-primary svg { color: #0a0a0f !important; }

/* ── Alertes ── */
.alert { border: 1px solid var(--v3-line-2) !important; color: var(--color-neutral-800) !important; }
.alert-success { background: rgba(0,230,118,.10) !important; border-color: rgba(0,230,118,.35) !important; color: #5dffa9 !important; }
.alert-error   { background: rgba(255,80,80,.10) !important; border-color: rgba(255,80,80,.35) !important; color: #ff9b9b !important; }
.alert-warning { background: rgba(255,200,80,.10) !important; border-color: rgba(255,200,80,.35) !important; color: #ffd47a !important; }
.alert-info    { background: rgba(0,160,255,.10) !important; border-color: rgba(0,160,255,.35) !important; color: #7ac8ff !important; }
.alert a { color: inherit !important; text-decoration: underline; }

/* ── Panneau de progression (upgrade) ── */
.up-progress-box {
  background: rgba(0,255,224,.05) !important;
  border: 1px solid rgba(0,255,224,.25) !important;
}
.up-spinner { border-color: rgba(0,255,224,.2) !important; border-top-color: var(--color-primary) !important; }
.up-progress-step.active  .step-status { background: rgba(0,255,224,.14) !important; color: var(--color-primary) !important; }
.up-progress-step.done    .step-status { background: rgba(0,230,118,.14) !important; color: #5dffa9 !important; }
.up-progress-step.pending .step-status { background: rgba(255,255,255,.06) !important; color: var(--color-neutral-500) !important; }

/* ── Modale résultat ── */
.up-modal {
  background: #15151c !important;
  border: 1px solid var(--v3-line-2);
  color: var(--color-neutral-900);
}
.up-modal-close { color: #0a0a0f !important; }
.up-modal-overlay { background: rgba(0,0,0,.65) !important; }

/* ── Dropdown pays ── */
.country-dropdown-button {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--v3-line-2) !important;
  color: var(--color-neutral-900) !important;
}
.country-dropdown-menu {
  background: #15151c !important;
  border: 1px solid var(--v3-line-2) !important;
  box-shadow: var(--shadow-xl) !important;
}
.country-dropdown-search-input {
  background: rgba(255,255,255,.05) !important;
  color: var(--color-neutral-900) !important;
  border: 1px solid var(--v3-line) !important;
}
.country-dropdown-item { color: var(--color-neutral-700) !important; }
.country-dropdown-item:hover, .country-dropdown-item.selected {
  background: rgba(0,255,224,.08) !important;
  color: var(--color-primary) !important;
}

/* ── Footer ── */
.footer-modern {
  background: #0f0f15 !important;
  border-top: 1px solid var(--v3-line);
  color: var(--color-neutral-600) !important;
}
.footer-modern .footer-link, .footer-modern a { color: var(--color-neutral-600) !important; }
.footer-modern .footer-link:hover, .footer-modern a:hover { color: var(--color-primary) !important; }
.footer-heading { color: var(--color-neutral-800) !important; }
.footer-divider { border-color: var(--v3-line) !important; }

/* ── Divers ── */
.step-circle, .progress-step-circle { background: rgba(255,255,255,.06); border-color: var(--v3-line-2); }
hr { border-color: var(--v3-line) !important; }
a { color: var(--color-primary); }
h1, h2, h3, h4 { color: var(--color-neutral-900); }

/* ── Renfort de priorité (gagne sur le <style> inline du header) ── */
html:root {
  --color-primary: #00ffe0;
  --color-primary-dark: #0a8b7a;
  --color-primary-light: #5cffe9;
  --color-surface: #15151c;
  --color-neutral-50: #0a0a0f;
  --color-neutral-600: rgba(245,245,242,0.62);
  --color-neutral-900: #f5f5f2;
}

/* ── Marque navbar ── */
.navbar-brand, .navbar-brand span { color: var(--color-neutral-900) !important; }
.mobile-nav-brand, .mobile-nav-title { color: var(--color-neutral-900) !important; }
.mobile-menu-toggle { color: var(--color-neutral-900) !important; }

/* ── Sélecteur de package ── */
.package-option {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--v3-line-2) !important;
  box-shadow: none !important;
}
.package-option:hover {
  border-color: rgba(0,255,224,.4) !important;
  background: rgba(0,255,224,.05) !important;
}
.package-option.selected {
  border-color: var(--color-primary) !important;
  background: rgba(0,255,224,.08) !important;
  box-shadow: 0 0 0 3px rgba(0,255,224,.12) !important;
}