/* =====================================================================
 * QUANTUM DEPTH — habillage du site existant.
 * Une seule feuille, chargee apres le bundle : aucun script modifie.
 * Palette et valeurs reprises de la maquette validee (CapitalTradingV2).
 * ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --qd-bg: #020A18;
  --qd-surface: #06162C;
  --qd-primary: #63C7FF;
  --qd-accent: #72FFD2;
  --qd-secondary: #113B72;
  --qd-text: #F1FAFF;
  --qd-muted: #8EA8BD;
}

/* --- Base ------------------------------------------------------------ */

body {
  background: var(--qd-bg) !important;
  color: var(--qd-text);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Le decor de la maquette : visuel topographique fixe + grille fine.
   Les particules de fx.js passent par-dessus et l'animent. */
body::before {
  content: '';
  position: fixed;
  z-index: 0;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 4.9rem, color-mix(in srgb, var(--qd-primary) 7%, transparent) 5rem),
    linear-gradient(180deg, color-mix(in srgb, var(--qd-bg) 55%, transparent), color-mix(in srgb, var(--qd-bg) 88%, transparent) 70%, var(--qd-bg)),
    url('/assets/quantum-depth-1280.webp') center / cover no-repeat fixed,
    var(--qd-bg);
  filter: saturate(0.92) contrast(1.1) brightness(0.62) hue-rotate(-7deg);
  pointer-events: none;
}

/* Le contenu du site et les particules restent au-dessus du decor. */
#root, #fx-layer, canvas { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
}

code, pre, .font-mono { font-family: 'JetBrains Mono', monospace; }

/* Les tres grands titres du site sont trop lourds pour ce theme. */
.text-6xl { font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important; }
.text-5xl { font-size: clamp(2rem, 3.8vw, 3rem) !important; }
.text-4xl { font-size: clamp(1.8rem, 3.2vw, 2.5rem) !important; }

/* --- Fonds : les zones claires passent en sombre translucide --------- */

.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100 {
  background-color: color-mix(in srgb, var(--qd-bg) 79%, transparent) !important;
  backdrop-filter: blur(16px);
}

.bg-slate-900, .bg-slate-800, .bg-gray-900, .bg-black {
  background-color: transparent !important;
}

.bg-gradient-to-br.from-slate-900, [class*='from-slate-900'] {
  background-image: none !important;
}

/* --- Textes ---------------------------------------------------------- */

.text-gray-900, .text-slate-900, .text-gray-800 { color: var(--qd-text) !important; }

.text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400,
.text-slate-600, .text-slate-500 { color: var(--qd-muted) !important; }

.text-blue-600, .text-blue-500, .text-blue-400,
.text-purple-600, .text-purple-700, .text-purple-400 { color: var(--qd-primary) !important; }

.text-green-500, .text-green-400 { color: var(--qd-accent) !important; }

/* --- Bordures -------------------------------------------------------- */

[class*='border-gray-'], [class*='border-slate-'] {
  border-color: color-mix(in srgb, var(--qd-primary) 22%, transparent) !important;
}

[class*='divide-gray-'] > * {
  border-color: color-mix(in srgb, var(--qd-text) 8%, transparent) !important;
}

/* --- Cartes : l'habillage valide des tuiles du programme ------------- */

.border.rounded-lg, .border.rounded-xl, .border.rounded-2xl {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--qd-primary) 22%, transparent) !important;
  background-color: color-mix(in srgb, var(--qd-bg) 79%, transparent);
  backdrop-filter: blur(16px);
}

/* La ligne lumineuse du haut, en diagonale de teintes du theme. */
.border.rounded-lg.overflow-hidden::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0; left: 0;
  width: 100%;
  height: 0.18rem;
  background: linear-gradient(115deg, #72FFD2, #63C7FF 48%, #A77BFF);
  box-shadow: 0 0 1.8rem color-mix(in srgb, var(--qd-primary) 80%, transparent);
}

/* --- Angles : le theme prefere les angles nets ----------------------- */

.rounded-lg, .rounded-xl, .rounded-2xl { border-radius: 6px !important; }

/* Les pastilles rondes (avatars, icones) restent rondes. */
button.rounded-full, a.rounded-full, span.rounded-full, div.rounded-full[class*='px-'] {
  border-radius: 4px !important;
}

/* --- Ombres ----------------------------------------------------------- */

.shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: 0 1.5rem 4rem color-mix(in srgb, #000 55%, transparent) !important;
}

/* --- Boutons et degrades du site ------------------------------------- */

[class*='bg-gradient-to-r'][class*='from-blue']:not([class*='bg-clip-text']),
[class*='bg-gradient-to-r'][class*='from-purple']:not([class*='bg-clip-text']) {
  background-image: linear-gradient(115deg, #3FD0E8, #63C7FF 50%, #7C8CFF) !important;
  color: #04101F !important;
  font-weight: 600;
}

.bg-blue-600, .bg-blue-500 {
  background-color: var(--qd-primary) !important;
  color: #04101F !important;
}

.bg-gray-100.text-gray-700, .bg-gray-200 {
  background-color: color-mix(in srgb, var(--qd-primary) 12%, transparent) !important;
  color: var(--qd-text) !important;
}

/* Les titres en degrade (bg-clip-text) reprennent les teintes du theme. */
[class*='bg-clip-text'] {
  background-image: linear-gradient(115deg, var(--qd-primary), var(--qd-accent)) !important;
  color: transparent !important;
}

/* --- Champs de formulaire -------------------------------------------- */

input, select, textarea {
  border-color: color-mix(in srgb, var(--qd-text) 16%, transparent) !important;
  background-color: color-mix(in srgb, var(--qd-bg) 62%, transparent) !important;
  color: var(--qd-text) !important;
}

input::placeholder, textarea::placeholder {
  color: color-mix(in srgb, var(--qd-muted) 70%, transparent);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--qd-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qd-primary) 22%, transparent) !important;
  outline: none;
}

/* --- Couche decor : les particules fx.js par-dessus ce fond ---------- */

#fx-layer { opacity: 0.85; }