/* =============================================================
   CLOUDY · SUNSET BLAZE
   Override theme — load LAST (after polish.css and inline styles)
   Palette : #ff6b35 · #f7931e · #e84393 · #6c5ce7
   Typo    : Sora (display) + Manrope (body)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --cs-bg:        #14070f;
  --cs-bg-2:      #1f0a18;
  --cs-bg-3:      #2a0d22;
  --cs-surface:   rgba(40, 14, 30, .62);
  --cs-surface-2: rgba(58, 18, 42, .82);
  --cs-border:    rgba(255, 140, 90, .14);
  --cs-border-2:  rgba(232, 67, 147, .32);

  --cs-text:      #fff5ec;
  --cs-text-2:    #f5d8c8;
  --cs-muted:     #c79aa8;

  --cs-orange:    #ff6b35;
  --cs-amber:     #f7931e;
  --cs-magenta:   #e84393;
  --cs-violet:    #6c5ce7;

  --cs-grad:      linear-gradient(115deg, #ff6b35 0%, #f7931e 35%, #e84393 70%, #6c5ce7 100%);
  --cs-grad-soft: linear-gradient(115deg, rgba(255,107,53,.22), rgba(232,67,147,.22), rgba(108,92,231,.22));
  --cs-grad-btn:  linear-gradient(90deg, #ff6b35 0%, #e84393 100%);
  --cs-grad-btn2: linear-gradient(90deg, #f7931e 0%, #ff6b35 50%, #e84393 100%);
}

/* ---------- Base ---------- */
html, body {
  background: var(--cs-bg) !important;
  color: var(--cs-text) !important;
  font-family: 'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  line-height: 1.6;
}
body {
  background:
    radial-gradient(ellipse 800px 600px at 12% 0%,   rgba(255,107,53,.22), transparent 60%),
    radial-gradient(ellipse 900px 700px at 88% 8%,   rgba(232,67,147,.22), transparent 60%),
    radial-gradient(ellipse 700px 600px at 50% 100%, rgba(108,92,231,.18), transparent 60%),
    var(--cs-bg) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* ---------- Aurora / blobs ---------- */
.aurora-bg {
  background: radial-gradient(circle at 50% 45%, #2a0d22 0%, #14070f 72%) !important;
}
.aurora-blob, .blob { filter: blur(120px) !important; opacity: .28 !important; }
.blob-1 { background: var(--cs-orange) !important; }
.blob-2 { background: var(--cs-magenta) !important; opacity: .24 !important; }
.blob-3 { background: var(--cs-violet) !important;  opacity: .18 !important; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5,
.font-black, .font-extrabold, .font-bold {
  font-family: 'Sora','Manrope',sans-serif !important;
  letter-spacing: -0.025em !important;
  color: var(--cs-text) !important;
}
h1 { line-height: 1.08 !important; }
h2 { line-height: 1.15 !important; }
h3, h4 { line-height: 1.25 !important; }

p, span, li, label, a { color: var(--cs-text-2); }
.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500,
.text-neutral-400, .text-zinc-400 { color: var(--cs-muted) !important; }
.text-gray-300, .text-slate-300, .text-neutral-300, .text-zinc-300 { color: var(--cs-text-2) !important; }
.text-white, .text-gray-50, .text-gray-100, .text-slate-50, .text-slate-100 { color: var(--cs-text) !important; }

/* ---------- Light surfaces -> warm glass ---------- */
.bg-white,
.bg-gray-50, .bg-gray-100, .bg-gray-200,
.bg-slate-50, .bg-slate-100, .bg-slate-200,
.bg-neutral-50, .bg-neutral-100, .bg-neutral-200,
.bg-zinc-50, .bg-zinc-100,
.bg-stone-50, .bg-stone-100 {
  background-color: var(--cs-surface) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-text) !important;
}

/* ---------- Dark / surface tokens ---------- */
.bg-black, .bg-gray-900, .bg-gray-950,
.bg-slate-900, .bg-slate-950,
.bg-neutral-900, .bg-neutral-950,
.bg-zinc-900, .bg-zinc-950 {
  background-color: var(--cs-bg-2) !important;
}
.bg-gray-800, .bg-slate-800, .bg-neutral-800, .bg-zinc-800 {
  background-color: var(--cs-bg-3) !important;
}

/* ---------- Glass card (custom class used everywhere) ---------- */
.glass-card {
  background: linear-gradient(145deg, rgba(58,18,42,.78), rgba(20,7,15,.72)) !important;
  backdrop-filter: blur(22px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 0 rgba(255,200,170,.06) inset,
    0 24px 60px -28px rgba(232,67,147,.35) !important;
  padding: 24px !important;
}
@media (min-width: 768px) {
  .glass-card { padding: 32px !important; border-radius: 26px !important; }
}

/* ---------- Borders ---------- */
.border, .border-gray-200, .border-gray-300, .border-gray-700, .border-gray-800,
.border-slate-200, .border-slate-700, .border-slate-800,
.border-neutral-200, .border-neutral-800, .border-zinc-800,
.border-white\/10, .border-white\/20 {
  border-color: var(--cs-border) !important;
}

/* ---------- Buttons ---------- */
.btn-primary,
.bg-blue-500, .bg-blue-600, .bg-blue-700,
.bg-indigo-500, .bg-indigo-600,
.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600,
.bg-purple-500, .bg-purple-600,
.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-tr,
[class*="from-blue-"], [class*="from-indigo-"], [class*="from-emerald-"],
[class*="from-purple-"], [class*="from-pink-"] {
  background: var(--cs-grad-btn) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 28px -10px rgba(255,107,53,.55), 0 6px 20px -10px rgba(232,67,147,.4) !important;
}
.btn-primary { padding: 16px 22px !important; border-radius: 999px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }
.btn-primary:hover { box-shadow: 0 0 26px rgba(232,67,147,.5), 0 14px 30px -10px rgba(255,107,53,.55) !important; transform: translateY(-1px); }
.btn-primary:active { transform: scale(.98); }

/* Secondary / ghost buttons */
.btn-secondary,
.bg-white\/5, .bg-white\/10 {
  background: var(--cs-surface) !important;
  border: 1px solid var(--cs-border-2) !important;
  color: var(--cs-text) !important;
}

/* ---------- Inputs ---------- */
.ios-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
textarea, select {
  background: rgba(20, 7, 15, .72) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: 14px !important;
  color: var(--cs-text) !important;
  padding: 16px 18px !important;
  font-family: 'Manrope', sans-serif !important;
  transition: border-color .25s, box-shadow .25s, background .25s !important;
}
.ios-input::placeholder, input::placeholder, textarea::placeholder { color: var(--cs-muted) !important; }
.ios-input:focus, input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--cs-orange) !important;
  background: rgba(40, 14, 30, .85) !important;
  box-shadow: 0 0 0 3px rgba(255,107,53,.22), 0 0 24px -4px rgba(232,67,147,.35) !important;
}

/* ---------- Links / accents ---------- */
a { color: var(--cs-magenta); transition: color .2s; }
a:hover { color: var(--cs-orange); }
.chat-bubble a { color: #ffb88c !important; }
.chat-bubble a:hover { color: #ff6b35 !important; }

.text-blue-400, .text-blue-500, .text-blue-600,
.text-indigo-400, .text-indigo-500,
.text-emerald-400, .text-emerald-500, .text-green-400, .text-green-500,
.text-purple-400, .text-purple-500 { color: var(--cs-magenta) !important; }

.text-amber-400, .text-amber-500, .text-yellow-400, .text-yellow-500,
.text-orange-400, .text-orange-500 { color: var(--cs-amber) !important; }

/* Gradient text utility */
.gradient-text, .text-gradient,
.bg-clip-text.text-transparent {
  background: var(--cs-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ---------- Spacing harmonisation ---------- */
section { padding-top: clamp(48px, 8vw, 96px) !important; padding-bottom: clamp(48px, 8vw, 96px) !important; }
.container, .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl { padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); }
.gap-4 { gap: 1.15rem !important; }
.gap-6 { gap: 1.6rem !important; }
.gap-8 { gap: 2.25rem !important; }

/* Rounded coherence */
.rounded-xl  { border-radius: 16px !important; }
.rounded-2xl { border-radius: 22px !important; }
.rounded-3xl { border-radius: 28px !important; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cs-bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--cs-orange), var(--cs-magenta)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--cs-magenta), var(--cs-violet)); }

/* ---------- Selection ---------- */
::selection { background: rgba(232,67,147,.45); color: #fff; }

/* ============================================================
   REFINEMENTS v2 — corriger les bleus/cyans résiduels
   ============================================================ */

/* Cyan / sky / teal / fuchsia → sunset */
.bg-cyan-400, .bg-cyan-500, .bg-cyan-600,
.bg-sky-400, .bg-sky-500, .bg-sky-600,
.bg-teal-400, .bg-teal-500, .bg-teal-600,
.bg-fuchsia-400, .bg-fuchsia-500, .bg-fuchsia-600,
.bg-pink-400, .bg-pink-500, .bg-pink-600,
.bg-rose-400, .bg-rose-500, .bg-rose-600,
[class*="from-cyan-"], [class*="to-cyan-"],
[class*="from-sky-"], [class*="to-sky-"],
[class*="from-teal-"], [class*="to-teal-"],
[class*="from-fuchsia-"], [class*="to-fuchsia-"],
[class*="from-pink-"], [class*="to-pink-"],
[class*="from-rose-"], [class*="to-rose-"],
[class*="via-cyan-"], [class*="via-sky-"], [class*="via-teal-"],
[class*="via-fuchsia-"], [class*="via-pink-"], [class*="via-purple-"],
[class*="via-indigo-"], [class*="via-blue-"] {
  background-image: var(--cs-grad-btn) !important;
}

.text-cyan-400, .text-cyan-500, .text-sky-400, .text-sky-500,
.text-teal-400, .text-teal-500, .text-fuchsia-400, .text-fuchsia-500,
.text-pink-400, .text-pink-500, .text-rose-400, .text-rose-500 {
  color: var(--cs-magenta) !important;
}

/* Onglets actifs (Standard/Plus/Ultra) */
[class*="bg-blue-"][class*="rounded-full"],
button.active, .tab-active, [aria-selected="true"] {
  background: var(--cs-grad-btn) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px -8px rgba(255,107,53,.5) !important;
}

/* Badges (POPULAIRE etc.) */
.badge, [class*="bg-orange-"], [class*="bg-red-"][class*="rounded"] {
  background: var(--cs-grad-btn) !important;
  color: #fff !important;
}

/* Boutons "Commander" plein largeur */
button[class*="rounded-full"]:not(.btn-secondary),
.bg-gradient-to-r.from-orange-400,
.bg-gradient-to-r.from-orange-500,
a.btn, button.btn {
  background: var(--cs-grad-btn) !important;
}

/* Icônes carrées dans les cartes feature → tinte chaque icône avec un dégradé subtil */
.feature-icon, .icon-tile,
[class*="bg-purple-500\/"], [class*="bg-emerald-500\/"],
[class*="bg-amber-500\/"], [class*="bg-pink-500\/"] {
  background: linear-gradient(135deg, rgba(255,107,53,.22), rgba(232,67,147,.22)) !important;
  border: 1px solid var(--cs-border-2) !important;
  color: var(--cs-orange) !important;
}

/* Liens secondaires / footer */
footer a, .footer a { color: var(--cs-text-2) !important; }
footer a:hover, .footer a:hover { color: var(--cs-orange) !important; }

/* Stars / ratings restent dorées chaudes */
.text-yellow-400, .text-amber-400, [class*="star"] svg { color: #ffb84a !important; fill: #ffb84a !important; }

/* Bouton "Mon Compte" dans la nav */
nav a[class*="rounded-full"], header a[class*="rounded-full"] {
  background: var(--cs-grad-btn) !important;
  color: #fff !important;
  border: none !important;
}

/* Pills d'info (Paiement Mobile Money / Validation rapide) */
.info-pill, span[class*="rounded-full"][class*="bg-"] {
  background: rgba(255, 107, 53, .10) !important;
  border: 1px solid var(--cs-border-2) !important;
  color: var(--cs-text) !important;
}

/* Bouton flottant Telegram */
.telegram-float, [class*="fixed"][class*="rounded-full"][class*="bottom-"] {
  background: var(--cs-grad-btn) !important;
  box-shadow: 0 12px 30px -10px rgba(232,67,147,.6) !important;
}