/* ================================================================
 * Capital Trading — couche visuelle « Liquid Glass »
 * Surcharge l'apparence sans toucher au bundle applicatif.
 * Palette : nuit profonde + bleu/violet existants + or premium.
 * ================================================================ */

:root {
  --ct-or:        #d4af5a;
  --ct-or-clair:  #f0d089;
  --ct-bleu:      #4f8dff;
  --ct-violet:    #a78bfa;
  --ct-nuit:      #070b12;
  --ct-verre:     rgba(148, 176, 230, .085);
  --ct-verre-bord:rgba(255, 255, 255, .16);
  --ct-lueur:     0 0 32px rgba(79, 141, 255, .28);
}

/* --- Fond : indispensable, le conteneur principal devient translucide.
   Teinte proche de l'original du site, sans voile clair. --- */
html, body {
  background: #0b1220 !important;
}

/* Vignette : assombrit les bords, donne du relief a l'ensemble. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(135% 110% at 50% 30%, transparent 58%, rgba(0, 0, 0, .42) 100%);
}

/* Le canvas de particules reste derriere toute l'interface. */
#ct-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* L'application passe au-dessus du fond anime. */
#root {
  position: relative;
  z-index: 1;
}

/* ================================================================
 * Verre liquide : les surfaces sombres deviennent translucides
 * ================================================================ */
#root [class*="rounded-xl"][class*="bg-slate-8"],
#root [class*="rounded-2xl"][class*="bg-slate-8"],
#root [class*="rounded-xl"][class*="bg-slate-9"],
#root [class*="rounded-2xl"][class*="bg-slate-9"],
#root [class*="rounded-xl"][class*="bg-gray-8"],
#root [class*="rounded-2xl"][class*="bg-gray-8"],
#root [class*="rounded-xl"][class*="bg-white\/"],
#root [class*="rounded-2xl"][class*="bg-white\/"] {
  background-color: var(--ct-verre) !important;
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid var(--ct-verre-bord);
  box-shadow:
    0 18px 46px -18px rgba(0, 0, 0, .75),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s cubic-bezier(.2, .7, .3, 1),
              border-color .35s ease;
}

/* Relief au survol : la carte s'eleve et s'irise. */
@media (hover: hover) {
  #root [class*="rounded-2xl"]:hover,
  #root [class*="rounded-xl"]:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 90, .32);
    box-shadow:
      0 30px 64px -22px rgba(0, 0, 0, .85),
      0 0 0 1px rgba(212, 175, 90, .16),
      inset 0 1px 0 rgba(255, 255, 255, .10);
  }
}

/* ================================================================
 * Titres : profondeur et halo
 * ================================================================ */
#root h1 {
  letter-spacing: -.028em;
  text-shadow:
    0 2px 30px rgba(79, 141, 255, .30),
    0 1px 3px rgba(0, 0, 0, .55);
}

#root h2, #root h3 {
  letter-spacing: -.018em;
  text-shadow: 0 1px 22px rgba(79, 141, 255, .16);
}

/* Les degrades de texte restent intacts : ni filter ni text-shadow.
   Sur un texte transparent (background-clip:text), une ombre reste
   visible et donne un aspect fantome : on la neutralise. */
#root [class*="bg-clip-text"],
#root h1 [class*="bg-clip-text"],
#root h1 span,
#root h2 span {
  text-shadow: none !important;
  filter: none !important;
}

/* ================================================================
 * Boutons : lueur vivante et reflet qui balaie
 * ================================================================ */
#root button[class*="bg-gradient"],
#root a[class*="bg-gradient"],
#root [class*="from-blue"][class*="to-purple"] {
  position: relative;
  overflow: hidden;
  box-shadow: var(--ct-lueur), 0 12px 30px -12px rgba(0, 0, 0, .8);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
}

#root button[class*="bg-gradient"]::after,
#root a[class*="bg-gradient"]::after,
#root [class*="from-blue"][class*="to-purple"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, .30) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  animation: ct-reflet 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ct-reflet {
  0%, 62%  { left: -140%; }
  86%, 100% { left: 160%; }
}

@media (hover: hover) {
  #root button[class*="bg-gradient"]:hover,
  #root a[class*="bg-gradient"]:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 0 44px rgba(79, 141, 255, .45), 0 16px 38px -14px rgba(0, 0, 0, .85);
  }
}

/* ================================================================
 * Accent or : badges et prix
 * ================================================================ */
#root [class*="text-yellow"],
#root [class*="text-amber"] {
  color: var(--ct-or-clair) !important;
  text-shadow: 0 0 20px rgba(212, 175, 90, .45);
}

/* Le prix respire doucement. */
#root [class*="text-5xl"],
#root [class*="text-6xl"] {
  animation: ct-souffle 5s ease-in-out infinite;
}

@keyframes ct-souffle {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(79, 141, 255, .26)); }
  50%      { filter: drop-shadow(0 0 34px rgba(212, 175, 90, .34)); }
}

/* ================================================================
 * Lecteur video : cadre premium
 * ================================================================ */
#root video {
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(212, 175, 90, .16),
    0 26px 60px -20px rgba(0, 0, 0, .9);
}

/* ================================================================
 * Barre de navigation : verre dense
 * ================================================================ */
#root nav,
#root header {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* ================================================================
 * Arrivee des sections au defilement
 * ================================================================ */
@keyframes ct-monter {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

#root section {
  animation: ct-monter .7s cubic-bezier(.2, .7, .3, 1) both;
}

/* ================================================================
 * Lisibilite : le texte reste net malgre le verre
 * ================================================================ */
#root p, #root li, #root span {
  text-rendering: optimizeLegibility;
}

/* Accessibilite : focus clavier toujours visible. */
#root a:focus-visible,
#root button:focus-visible {
  outline: 2px solid var(--ct-or);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ================================================================
 * Mouvement reduit : on garde la matiere, on retire l'agitation
 * ================================================================ */
@media (prefers-reduced-motion: reduce) {
  #root section,
  #root [class*="text-5xl"],
  #root [class*="text-6xl"] {
    animation: none !important;
  }
  #root button[class*="bg-gradient"]::after,
  #root a[class*="bg-gradient"]::after,
  #root [class*="from-blue"][class*="to-purple"]::after {
    display: none;
  }
  #root * {
    transition-duration: .01ms !important;
  }
}

/* ================================================================
 * Petits ecrans : on allege le flou, couteux en calcul
 * ================================================================ */
@media (max-width: 640px) {
  #root [class*="rounded-xl"],
  #root [class*="rounded-2xl"] {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
  }
}

/* ================================================================
 * Laisser voir la couche animee
 * Le conteneur pleine page du site est opaque et masque le canvas.
 * On l'allege : le fond sombre reste assure par html/body.
 * ================================================================ */
#root .min-h-screen[class*="bg-slate-9"],
#root .min-h-screen[class*="bg-gray-9"],
#root .min-h-screen[class*="bg-zinc-9"] {
  background-color: rgba(15, 23, 42, .55) !important;
}

/* L'en-tete garde sa densite pour rester lisible au defilement. */
#root header[class*="bg-slate-9"] {
  background-color: rgba(11, 18, 32, .82) !important;
}