/* ==========================================================================
   TradyGo — Dark theme override for secondary pages
   Loaded AFTER each page's inline <style>, so its rules win via cascade order
   AND with `!important` on body/text/backgrounds.
   Goal : harmonise le thème dark + green glow sur tout le site sans casser
   les composants existants (cartes, boxes, héros, sections).
   ========================================================================== */

/* CSS variables — force dark palette across pages that use them */
:root{
  --white: #0D1117;
  --gray:  #111827;
  --surface: #0D1117;
  --surface-2: rgba(255,255,255,0.04);
  --surface-3: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.06);
  --text: #FFFFFF;
  --muted: rgba(255,255,255,0.62);
  --muted-2: rgba(255,255,255,0.42);
  --green-light: rgba(62,207,142,0.18);
}

/* Body + html base */
html, body{background:#0D1117 !important}
body{
  color:#FFFFFF !important;
  -webkit-font-smoothing:antialiased;
}

/* NAV — dark glass */
nav{
  background:rgba(13,17,23,0.78) !important;
  backdrop-filter:saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
}
nav .nav-logo span,
nav a,
nav .nav-link,
nav .nav-back{color:rgba(255,255,255,0.85)}
nav .nav-back:hover{background:rgba(255,255,255,0.06) !important;color:#fff !important}

/* HERO sections — flatten gradient-on-white so the dark body shows */
.hero{
  background:transparent !important;
  /* v2.0.9 — Soft fade-out at the bottom edge so the transition to the
     next section feels seamless instead of clipped by overflow:hidden. */
  -webkit-mask-image:linear-gradient(180deg,black 0%,black 88%,transparent 100%);
          mask-image:linear-gradient(180deg,black 0%,black 88%,transparent 100%);
}
.hero::before{
  /* Soft green halo only — no light fill */
  background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(62,207,142,0.22),transparent 60%) !important;
}
.hero::after{
  /* v2.0.9 — DISABLE the inline bottom-left green halo (creates a visible
     horizontal "seam" once overflow:hidden clips the radial circle). The
     ::before halo already gives enough green ambient — no need for a 2nd. */
  background:transparent !important;
  width:0 !important;
  height:0 !important;
  display:none !important;
}
.hero h1, .hero h2, .hero p, .hero-sub{color:inherit}
.hero h1{color:#FFFFFF !important}
.hero-sub{color:rgba(255,255,255,0.65) !important}

/* PITCH / CTA dark-on-white blocks already use `--dark` — keep them dark */
.pitch{background:#0A0E14 !important}
.cta-block, .final-cta{background:linear-gradient(135deg,#0A0E1A 0%,#0F172A 100%) !important}

/* SECTIONS — make the white-background sections transparent so body shows */
section{background:transparent}
.section{background:transparent !important}

/* v2.0.9 — Affiliation page (and any other page reusing the same section
   classes) had visible green seams because:
     1. .steps-section/.form-section/.final use background:var(--dark)
        (=#0A0E1A) which differs slightly from the body #0D1117
     2. Their ::before radial halos sit inside overflow:hidden → the
        circle gets sliced into a visible hard edge.
   Fix: flatten the section backgrounds to transparent AND kill every
   per-section radial halo. The green ambient light now comes from a
   single fixed gradient on the body — see `body::before` below — so the
   lighting is GUARANTEED to be uniform across the whole page, with zero
   possibility of clipped circles producing horizontal seams. */
.steps-section,
.form-section,
.final,
.pitch,
.advantages,
.features,
.faq-section,
.commission,
.tiers-section{
  background:transparent !important;
  overflow:visible !important;
}
.steps-section::before,
.form-section::before,
.final::before,
.pitch::before,
.advantages::before,
.faq-section::before,
.commission::before,
.tiers-section::before{
  /* Disable per-section halos — they cause seams on overflow:hidden
     and create stacking artifacts on overflow:visible. */
  background:none !important;
  display:none !important;
}

/* v2.0.9 — Single ambient green light, painted on the html element and
   fixed to the viewport. Stays soft + uniform whatever the page length
   or section composition. No seams possible since it lives outside the
   sections. */
html{
  background:
    radial-gradient(ellipse 90% 55% at 50% 12%,rgba(62,207,142,0.085),transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 100%,rgba(62,207,142,0.06),transparent 70%),
    #0D1117 !important;
  background-attachment:fixed !important;
  min-height:100vh;
}
body{background:transparent !important;}
.section-container,
.container{background:transparent}

/* CARDS / BOXES — dark glass replaces white */
.card,
.feature-card,
.feature,
.feat-card,
.method-card,
.partner-card,
.channel-card,
.concept-card,
.compare-card,
.stat-card,
.step,
.tier,
.pricing-card{
  background:rgba(17,24,39,0.55) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.85) !important;
}
.feat-card h3, .feat-card p,
.pricing-card h3, .pricing-card p,
.pricing-features li{color:rgba(255,255,255,0.85) !important}
.feat-card h3, .pricing-card h3, .feat-card .feat-title{color:#fff !important}
.feat-icon{
  background:linear-gradient(135deg,rgba(62,207,142,0.25),rgba(62,207,142,0.05)) !important;
  border:1px solid rgba(62,207,142,0.3) !important;
  color:#3ECF8E !important;
}

/* "body-white" sections used in tradybot.html — flatten to dark */
.body-white,
section.body-white,
section.body-white[style*="background"]{
  background:transparent !important;
  color:#fff !important;
}

/* Pricing CTA ghost — white-on-white bug fix on dark theme */
.pricing-cta-main.ghost{
  background:rgba(255,255,255,0.05) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.18) !important;
}
.pricing-cta-main.ghost:hover{
  background:rgba(62,207,142,0.10) !important;
  border-color:rgba(62,207,142,0.5) !important;
  color:#3ECF8E !important;
}
.pricing-cta-main.primary{
  background:linear-gradient(135deg,#3ECF8E 0%,#10B981 100%) !important;
  color:#0d1117 !important;
  font-weight:800 !important;
  box-shadow:0 8px 24px -6px rgba(62,207,142,0.55) !important;
}
.pricing-cta-main.primary:hover{
  box-shadow:0 14px 36px -8px rgba(62,207,142,0.7) !important;
  transform:translateY(-2px);
}

/* FAQ accordion — fix white-on-white on tradybot.html */
.faq-item{
  background:rgba(17,24,39,0.55) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.faq-item:hover{border-color:rgba(62,207,142,0.25) !important}
.faq-q{
  color:#fff !important;
  background:transparent !important;
}
.faq-q:hover{background:rgba(62,207,142,0.04) !important}
.faq-a{color:rgba(255,255,255,0.65) !important}
.faq-a p{color:rgba(255,255,255,0.65) !important}
.faq-a a{color:#3ECF8E !important}
.faq-plus{
  background:rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.7) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
}
.faq-item.open .faq-plus{
  background:#3ECF8E !important;
  color:#0D1117 !important;
  border-color:#3ECF8E !important;
  box-shadow:0 0 16px rgba(62,207,142,0.4) !important;
}

/* mon-compte / generic message blocks — fix light backgrounds */
.msg.error{
  background:rgba(248,113,113,0.12) !important;
  border:1px solid rgba(248,113,113,0.35) !important;
  color:#FCA5A5 !important;
}
.msg.warn{
  background:rgba(251,191,36,0.10) !important;
  border:1px solid rgba(251,191,36,0.3) !important;
  color:#FCD34D !important;
}
.msg.neutral, .msg.info{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  color:rgba(255,255,255,0.85) !important;
}
.info{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.6) !important;
}

/* Install pages — light step / help-link / dmg-mock fixes */
.help-link{
  background:rgba(255,255,255,0.04) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.12) !important;
}
.help-link:hover{
  background:rgba(62,207,142,0.10) !important;
  border-color:rgba(62,207,142,0.4) !important;
}
.dmg-mock .apps-icon{
  background:rgba(255,255,255,0.04) !important;
  border-color:rgba(255,255,255,0.18) !important;
  color:rgba(255,255,255,0.55) !important;
}
.screen{
  background:rgba(17,24,39,0.55) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  color:#fff !important;
}
.screen .btn-highlight{
  background:#FBBF24 !important;
  color:#0F172A !important;
  border:1px solid #FBBF24 !important;
}

/* license-transfer page — its own .card / .steps / .warn / .serial */
.account-card, .single-card .card, body .card{}
.steps{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.85) !important;
}
.steps li, .steps p, .steps ol{color:rgba(255,255,255,0.85) !important}
.steps strong{color:#fff !important}
.steps code{
  background:rgba(255,255,255,0.06) !important;
  color:#3ECF8E !important;
  border:1px solid rgba(62,207,142,0.2) !important;
}
.warn{
  background:rgba(251,191,36,0.10) !important;
  border-left:4px solid #FBBF24 !important;
  color:rgba(255,255,255,0.88) !important;
}
.warn strong{color:#FCD34D !important}
.serial{
  background:rgba(255,255,255,0.06) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.1) !important;
}

/* Specifically license-transfer card — keep the green halo dark glass */
body[class=""] .card,
body:not(.account-page) .card{
  background:linear-gradient(180deg,rgba(17,24,39,0.85) 0%,rgba(13,17,23,0.85) 100%) !important;
  color:#fff !important;
  border:1px solid rgba(62,207,142,0.18) !important;
  box-shadow:0 24px 80px -12px rgba(62,207,142,0.25) !important;
}
.card h1, .card h2, .card h3{color:#fff !important}
.card p, .card .lead, .card label{color:rgba(255,255,255,0.78) !important}
.card .lead strong{color:#fff !important}
.msg.ok{
  background:rgba(62,207,142,0.10) !important;
  border:1px solid rgba(62,207,142,0.3) !important;
  color:#3ECF8E !important;
}
.msg.err{
  background:rgba(248,113,113,0.10) !important;
  border:1px solid rgba(248,113,113,0.3) !important;
  color:#FCA5A5 !important;
}

/* Hide "Découvrez nos 3 autres canaux" — Boost/Hold-Up/Top5 not ready yet */
.related-channels{display:none !important}

/* Channel pricing section — fix white-on-white on boost/holdup/top5/advisor */
.pricing{background:transparent !important}
.pricing-head h2{color:#fff !important}
.pricing-head p{color:rgba(255,255,255,0.62) !important}
.price-card{
  background:rgba(17,24,39,0.55) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.85) !important;
}
.price-card:hover{
  border-color:rgba(62,207,142,0.4) !important;
  box-shadow:0 16px 40px rgba(62,207,142,0.18) !important;
}
.price-card.featured{
  background:linear-gradient(180deg,rgba(62,207,142,0.10) 0%,rgba(17,24,39,0.7) 50%) !important;
  border:1px solid rgba(62,207,142,0.4) !important;
  box-shadow:0 16px 48px -12px rgba(62,207,142,0.35) !important;
}
.price-amount{color:#fff !important}
.price-amount .unit{color:rgba(255,255,255,0.55) !important}
.price-period{color:rgba(255,255,255,0.5) !important}
.price-sub{color:rgba(255,255,255,0.6) !important}
.price-save{
  background:rgba(62,207,142,0.14) !important;
  color:#3ECF8E !important;
  border:1px solid rgba(62,207,142,0.25) !important;
}
.price-btn{
  background:rgba(255,255,255,0.06) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.10) !important;
}
.price-btn:hover{
  background:rgba(62,207,142,0.18) !important;
  border-color:rgba(62,207,142,0.4) !important;
  color:#3ECF8E !important;
}
.price-card.featured .price-btn{
  background:linear-gradient(135deg,#3ECF8E 0%,#10B981 100%) !important;
  color:#0d1117 !important;
  border:none !important;
  box-shadow:0 8px 24px -6px rgba(62,207,142,0.55) !important;
}
.price-card.featured .price-btn:hover{
  box-shadow:0 14px 36px -8px rgba(62,207,142,0.7) !important;
  transform:translateY(-2px);
}
.price-card .feature-list,
.price-card ul{color:rgba(255,255,255,0.78) !important}
.price-card li{color:rgba(255,255,255,0.78) !important}
.price-card li::before{color:#3ECF8E !important}

/* Trust strip on channel pages — dark glass */
.trust{
  background:transparent !important;
  border-top:1px solid rgba(255,255,255,0.06) !important;
}
.trust-item{color:rgba(255,255,255,0.6) !important}
.trust-item strong{color:#fff !important}

/* Limited-offer / lock notice on featured price card (yellow box) */
.lock-notice, .featured-lock, .price-card .lock{
  background:rgba(251,191,36,0.10) !important;
  border:1px solid rgba(251,191,36,0.3) !important;
  color:#FCD34D !important;
}

/* Inline <code> blocks on legal pages — dark with green accent */
.legal-content code, .page-content code, body code{
  background:rgba(255,255,255,0.06) !important;
  color:#3ECF8E !important;
  border:1px solid rgba(62,207,142,0.18) !important;
  padding:2px 8px !important;
  border-radius:4px !important;
}

/* Inline yellow disclaimer divs on advisor.html (line 401-style) */
[style*="background:#FEF3C7"],
[style*="background: #FEF3C7"],
[style*="background:#fef3c7"],
[style*="background:#FFFBEB"]{
  background:rgba(251,191,36,0.10) !important;
  border-color:rgba(251,191,36,0.3) !important;
  color:#FCD34D !important;
}
[style*="color:#78350F"], [style*="color:#92400E"]{color:#FCD34D !important}

/* Inline red warning divs */
[style*="background:#FEE2E2"], [style*="background:#FEF2F2"]{
  background:rgba(248,113,113,0.10) !important;
  border-color:rgba(248,113,113,0.3) !important;
}
[style*="color:#DC2626"], [style*="color:#991B1B"]{color:#FCA5A5 !important}

/* Inline green info divs */
[style*="background:#F0FDF4"], [style*="background:#ECFDF5"]{
  background:rgba(62,207,142,0.10) !important;
  border-color:rgba(62,207,142,0.3) !important;
  color:rgba(255,255,255,0.85) !important;
}

/* Lang toggle on legal pages — gray fill bg */
.lang-toggle, [class*="lang-toggle"]{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
}

/* INFO / WARN / HIGHLIGHT BOXES — keep accent borders, dark fill */
.info-box{
  background:rgba(62,207,142,0.10) !important;
  border-left-color:#3ECF8E !important;
  color:rgba(255,255,255,0.85) !important;
}
.warn-box,
.warning-box,
.highlight{
  background:rgba(255,193,7,0.08) !important;
  border-left-color:#FBBF24 !important;
  color:rgba(255,255,255,0.88) !important;
}
.warn-box strong, .warning-box strong, .highlight strong{color:#FFD700 !important}

/* Generic text colors used by legal pages */
.legal-content, .legal-content *,
.page-content, .page-content *{color:rgba(255,255,255,0.78)}
.legal-content h1, .legal-content h2, .legal-content h3,
.page-content h1, .page-content h2, .page-content h3{color:#fff !important}
.legal-content strong, .page-content strong{color:#fff !important}
.legal-content a, .page-content a{color:#3ECF8E !important}

/* Tables */
table{color:rgba(255,255,255,0.85)}
th, td{border-color:rgba(255,255,255,0.06) !important}
th{background:rgba(255,255,255,0.03) !important;color:#fff !important}

/* Lang toggle */
.lang-toggle{background:rgba(255,255,255,0.04) !important;border:1px solid rgba(255,255,255,0.08)}
.lang-toggle a{color:rgba(255,255,255,0.6)}
.lang-toggle a.active{background:#3ECF8E !important;color:#0D1117 !important}

/* Inputs */
input[type="email"],
input[type="text"],
input[type="password"],
textarea,
select{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  color:#fff !important;
}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,0.4) !important}
input:focus, textarea:focus, select:focus{
  border-color:#3ECF8E !important;
  background:rgba(255,255,255,0.06) !important;
  box-shadow:0 0 0 3px rgba(62,207,142,0.15) !important;
  outline:none;
}

/* Footer (when present) */
footer{
  background:#0A0E14 !important;
  border-top:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.55) !important;
}
footer a{color:rgba(255,255,255,0.55)}
footer a:hover{color:#3ECF8E}

/* Light-themed badges → dark variants */
.badge-signed{
  background:rgba(62,207,142,0.10) !important;
  border:1px solid rgba(62,207,142,0.3) !important;
  color:#3ECF8E !important;
}

/* Plain dark CTA (used on install pages) — keep it green */
.cta{
  background:#3ECF8E !important;
  color:#0D1117 !important;
  box-shadow:0 4px 16px rgba(62,207,142,0.45) !important;
}
.cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(62,207,142,0.55) !important}

/* Step blocks (install pages) — dark glass */
.step{
  background:rgba(17,24,39,0.55) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
}

/* Force any pure white-color rules to inherit white-on-dark */
.text-dark, .text-slate, .text-gray-900, .text-gray-800{color:#fff !important}

/* Mon-compte / single-card pages with central card layout */
body.single-card, body.account-page{
  background:linear-gradient(135deg,#0A0E1A 0%,#0F172A 60%,#0D1117 100%) !important;
}
.account-card{
  background:rgba(17,24,39,0.85) !important;
  border:1px solid rgba(62,207,142,0.18) !important;
  color:#fff !important;
  box-shadow:0 24px 80px -12px rgba(62,207,142,0.25) !important;
}

/* Filtres page specific */
.block{
  background:rgba(17,24,39,0.55) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.85) !important;
  backdrop-filter:blur(14px);
}
.nav-link:hover, .nav-link.active{
  background:rgba(62,207,142,0.15) !important;
  color:#fff !important;
  box-shadow:0 0 16px rgba(62,207,142,0.2) !important;
}

/* Legal pages — warning / highlight / callout boxes */
.callout-red, .warning, .warn{
  background:rgba(239,68,68,0.10) !important;
  border-left-color:#F87171 !important;
  color:rgba(255,255,255,0.88) !important;
}
.callout-red strong, .warning strong, .warn strong{color:#FCA5A5 !important}
.callout-red p, .warning p, .warn p{color:rgba(255,255,255,0.88) !important}

.highlight{
  background:rgba(251,191,36,0.10) !important;
  border-left-color:#FBBF24 !important;
  color:rgba(255,255,255,0.88) !important;
}

/* Info-box variants — flatten light blue and green ones */
.info-box, .info-box p{color:rgba(255,255,255,0.85) !important}
.warning-box{
  background:rgba(251,191,36,0.10) !important;
  border-color:rgba(251,191,36,0.3) !important;
  color:rgba(255,255,255,0.88) !important;
}

/* Sections with hard-coded white backgrounds */
section[style*="background:white"],
section[style*="background:#F"],
section[style*="background:#fff"]{background:transparent !important}

/* Loose footer reset */
footer.simple, footer{background:#0A0E14 !important;border-top:1px solid rgba(255,255,255,0.06) !important}
footer, footer p, footer span{color:rgba(255,255,255,0.55) !important}

/* Robot eye blink — adds subtle "live" character to the bot mascot */
@keyframes tg-bot-blink{
  0%, 92%, 100%{filter:brightness(1) drop-shadow(0 0 8px rgba(62,207,142,0.45))}
  93%, 96%{filter:brightness(1.6) drop-shadow(0 0 14px rgba(62,207,142,0.85))}
}
.btn-bot-icon{
  animation:tg-bot-blink 8s ease-in-out infinite;
}
/* Big mascot keeps the float animation AND adds blink — combined */
.bot-visual img{
  animation:float 6s ease-in-out infinite, tg-bot-blink 8s ease-in-out infinite !important;
}

/* ========== TOOLTIPS — termes techniques ==========
   Solution DOM portail : un seul .tg-tip-portal dans <body>, repositionné
   par JS, rendu garanti hors de tout overflow:hidden/transform parent.
   ─────────────────────────────────────────────────── */
.tt{
  position:relative;
  border-bottom:1px dotted rgba(62,207,142,0.5);
  cursor:help;
  color:inherit;
}
.tg-tip-portal{
  position:fixed;
  top:0;left:0;
  background:#1E293B;
  color:#E2E8F0;
  border:1px solid rgba(62,207,142,0.35);
  border-radius:10px;
  padding:10px 14px;
  font-size:12.5px;
  line-height:1.55;
  font-weight:400;
  font-family:'Manrope',sans-serif;
  white-space:normal;
  width:max-content;
  max-width:300px;
  box-shadow:0 12px 32px rgba(0,0,0,0.6);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, -100%);
  transition:opacity 0.18s ease, visibility 0s linear 0.18s;
  z-index:99999;
}
.tg-tip-portal.is-on{
  opacity:1;
  visibility:visible;
  transition:opacity 0.18s ease, visibility 0s linear 0s;
}
.tg-tip-portal.below{transform:translate(-50%, 8px)}
@media(max-width:640px){
  .tg-tip-portal{max-width:240px;font-size:12px}
}