/* ── EKO ROBOT: Remplacement GLOBAL du robot CSS par PNG ── */
/* Cacher les parties visuelles du robot CSS (tête, corps, yeux, antenne) */
[class*="group"][class*="cursor-pointer"] [class*="animate-float"] > div {
    visibility: hidden !important;
}
/* Garder la bulle de dialogue visible */
[class*="group"][class*="cursor-pointer"] [class*="animate-float"] > [class*="absolute"][class*="-top-"] {
    visibility: visible !important;
}
/* Afficher le vrai Eko PNG partout où le robot CSS existait */
[class*="group"][class*="cursor-pointer"] [class*="animate-float"]::after {
    content: '' !important;
    visibility: visible !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: url('/assets/ekobot.png') center/contain no-repeat !important;
    z-index: 50 !important;
    pointer-events: none !important;
}

/* --- ANIMATED BACKGROUND OVERRIDE --- */
/* Make main app container TRANSPARENT so visual effects show through */
[style*="linear-gradient(135deg, #0a0e1a"],
[style*="linear-gradient(135deg, #0F1314"]{
  background: transparent !important;
}

/* --- REMOVE GEOMETRIC NOISE TEXTURE (external SVG overlay) --- */
[class*="bg-\[url\(\'https\:\/\/grainy-gradients"],
[style*="grainy-gradients"],
[style*="noise.svg"] {
  background-image: none !important;
}

/* Keep animated particles (colored dots) — user wants them visible */

/* Hide the sweep reflection overlay */
.animate-reflection {
  display: none !important;
}

/* --- GLASS PANEL TWEAKS --- */
.glass-panel{
  border-color:rgba(99,102,241,0.12) !important;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar-thumb{background:rgba(99,102,241,0.3) !important}
::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,0.5) !important}

/* --- TEXT SELECTION --- */
::selection{background:rgba(99,102,241,0.3) !important}

/* --- HOVER STATES (common patterns) --- */
.hover\:text-blue-400:hover{color:rgb(129 140 248) !important}
.hover\:bg-blue-500:hover{background-color:rgb(99 102 241) !important}
.hover\:bg-blue-600:hover{background-color:rgb(79 70 229) !important}
.hover\:border-blue-500:hover{border-color:rgb(99 102 241) !important}

/* --- MERCHANT/CLIENT BUTTON GRADIENT FIX --- */

/* The React app's root wrapper — fills the iPhone frame */
#root > div {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  background-color: rgba(3,0,20,.92) !important;
  position: relative !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* --- WHITE / LIGHT BACKGROUNDS → DARK NAVY --- */
.bg-white {
  background-color: #050520 !important;
}

.bg-gray-50, .bg-slate-50, .bg-zinc-50 {
  background-color: #040418 !important;
}

.bg-gray-100, .bg-slate-100, .bg-zinc-100 {
  background-color: #0C0C35 !important;
}

.bg-gray-200, .bg-slate-200 {
  background-color: #0F1035 !important;
}

/* --- DARK TEXT → LIGHT TEXT (cool white) --- */
.text-gray-900, .text-slate-900, .text-zinc-900 {
  color: #E8E8FF !important;
}

.text-gray-800, .text-slate-800, .text-zinc-800 {
  color: #D4D4FF !important;
}

.text-gray-700, .text-slate-700, .text-zinc-700 {
  color: #B8B8E0 !important;
}

.text-gray-600, .text-slate-600, .text-zinc-600 {
  color: #9A9AC0 !important;
}

.text-black {
  color: #E8E8FF !important;
}

/* --- LIGHT BORDERS → INDIGO BORDERS --- */
.border-gray-100, .border-slate-100 {
  border-color: rgba(99,102,241,0.08) !important;
}

.border-gray-200, .border-slate-200 {
  border-color: rgba(99,102,241,0.12) !important;
}

.border-gray-300, .border-slate-300 {
  border-color: rgba(99,102,241,0.18) !important;
}

/* --- DIVIDERS --- */
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(99,102,241,0.08) !important;
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(99,102,241,0.12) !important;
}

/* --- FORM INPUTS --- */
input, textarea, select {
  background-color: #0F1035 !important;
  color: #E8E8FF !important;
  border-color: rgba(99,102,241,0.15) !important;
}

input::placeholder, textarea::placeholder {
  color: #6B7280 !important;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(99,102,241,0.4) !important;
  outline-color: rgba(99,102,241,0.3) !important;
}

/* --- SHADOWS (remove light mode box shadows) --- */
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl {
  --tw-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* --- CARDS / PANELS --- */
.rounded-xl, .rounded-2xl, .rounded-3xl {
  /* Only override if they have light backgrounds */
}

/* White cards with rounded corners (common card pattern) */
.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg {
  background-color: #0C0C35 !important;
  border: 1px solid rgba(99,102,241,0.1) !important;
}

/* --- GRADIENT BACKGROUNDS that start from white/light --- */
.from-white {
  --tw-gradient-from: #050520 !important;
}

.from-gray-50 {
  --tw-gradient-from: #040418 !important;
}

.to-white {
  --tw-gradient-to: #050520 !important;
}

.to-gray-50 {
  --tw-gradient-to: #040418 !important;
}

/* --- RING COLORS --- */
.ring-gray-200, .ring-gray-300 {
  --tw-ring-color: rgba(99,102,241,0.15) !important;
}

/* --- PLACEHOLDER TEXT --- */
.placeholder-gray-400::placeholder, .placeholder-gray-500::placeholder {
  color: #6B7280 !important;
}

/* --- HOVER STATES (light) → DARK --- */
.hover\:bg-gray-50:hover, .hover\:bg-slate-50:hover {
  background-color: #0F1035 !important;
}

.hover\:bg-gray-100:hover, .hover\:bg-slate-100:hover {
  background-color: #12124A !important;
}

.hover\:bg-white:hover {
  background-color: #0F1035 !important;
}

/* --- FOCUS STATES --- */
.focus\:bg-white:focus {
  background-color: #0F1035 !important;
}

.focus\:ring-gray-300:focus {
  --tw-ring-color: rgba(99,102,241,0.2) !important;
}

/* --- SPECIFIC PAGE OVERRIDES --- */

/* Login / Auth pages — force dark navy */
[class*="min-h-screen"] {
  background-color: #030014 !important;
}

/* Any remaining white backgrounds in deeply nested elements */
.bg-white\/50, .bg-white\/80, .bg-white\/90, .bg-white\/95 {
  background-color: rgba(5, 5, 32, 0.8) !important;
}

/* --- TABLE / LIST OVERRIDES --- */
.even\:bg-gray-50:nth-child(even) {
  background-color: #0C0C35 !important;
}

.odd\:bg-white:nth-child(odd) {
  background-color: #050520 !important;
}

/* --- EKO ROBOT IN CHAT: Fix position (was -top-2 = too high) and size --- */
[class*="flex gap-3"] > .flex-shrink-0 > [class*="-top-2"] {
  top: 0 !important;
}
/* Make sm robot avatar bigger to match user avatar (w-8 h-8 = 32x32px) */
[class*="flex gap-3"] > .flex-shrink-0 [class*="group"][class*="cursor-pointer"][class*="w-6"] {
  width: 2rem !important;
  height: 2rem !important;
}
[class*="flex gap-3"] > .flex-shrink-0 [class*="group"][class*="cursor-pointer"] [class*="animate-float"] {
  width: 100% !important;
  height: 100% !important;
}

/* --- CHAT BUBBLES (Eko assistant responses) --- */
.bg-blue-50, .bg-blue-100, .bg-cyan-50, .bg-sky-50, .bg-indigo-50 {
  background-color: #0F1035 !important;
}

.bg-blue-100\/50, .bg-blue-50\/50 {
  background-color: rgba(15, 16, 53, 0.8) !important;
}

.text-blue-900, .text-cyan-900, .text-sky-900, .text-indigo-900 {
  color: #E8E8FF !important;
}

.text-blue-800, .text-blue-700 {
  color: #D4D4FF !important;
}

.border-blue-100, .border-blue-200 {
  border-color: rgba(99,102,241,0.12) !important;
}

/* ================================================================
   CHAT EKO — Couleurs cohérentes (indigo/pink)
   ================================================================ */

/* --- User message bubbles: blue → indigo/pink gradient --- */
.bg-blue-600.text-white.rounded-tr-none {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%) !important;
  box-shadow: 0 4px 15px rgba(99,102,241,0.25) !important;
}

/* --- Eko response cards: dark navy card --- */
.bg-white.rounded-tl-none,
.rounded-tl-none.border {
  background-color: #0A0A2E !important;
  border-color: rgba(99,102,241,0.12) !important;
}

/* --- Eko typing indicator --- */
.bg-white.rounded-2xl.rounded-tl-none {
  background-color: #0A0A2E !important;
  border-color: rgba(99,102,241,0.1) !important;
}

/* --- Promo cards in chat --- */
.bg-white.rounded-2xl.border.border-gray-200 {
  background-color: #0A0A2E !important;
  border-color: rgba(99,102,241,0.15) !important;
}

/* --- Chat page header "EKO AI" gradient: blue/purple → indigo/pink --- */
.bg-gradient-to-r.from-blue-500.to-purple-600 {
  background: linear-gradient(to right, #818CF8, #EC4899) !important;
  -webkit-background-clip: text !important;
}

.from-blue-500.to-purple-600 {
  --tw-gradient-from: #818CF8 !important;
  --tw-gradient-to: #EC4899 !important;
}

/* --- Chat suggestion cards (glass panels) --- */
.glass-panel.rounded-2xl:hover {
  border-color: rgba(99,102,241,0.2) !important;
}

/* --- Blue accent colors → indigo --- */
.text-blue-500 {
  color: #818CF8 !important;
}

.text-blue-600 {
  color: #6366F1 !important;
}

.text-blue-400 {
  color: #A5B4FC !important;
}

.bg-blue-500\/10 {
  background-color: rgba(99,102,241,0.1) !important;
}

.bg-blue-500\/20 {
  background-color: rgba(99,102,241,0.15) !important;
}

.bg-blue-600\/15 {
  background-color: rgba(99,102,241,0.1) !important;
}

.bg-blue-600\/25 {
  background-color: rgba(99,102,241,0.15) !important;
}

/* Blue glow → indigo glow */
.shadow-blue-500\/20 {
  --tw-shadow-color: rgba(99,102,241,0.2) !important;
}

.shadow-blue-500\/30 {
  --tw-shadow-color: rgba(99,102,241,0.3) !important;
}

/* Blue borders → indigo */
.border-blue-500\/10 {
  border-color: rgba(99,102,241,0.1) !important;
}

.border-blue-500\/20 {
  border-color: rgba(99,102,241,0.15) !important;
}

/* --- CTA buttons that use blue → indigo/pink gradient --- */
.bg-blue-600.text-white.rounded-xl {
  background: linear-gradient(135deg, #4F46E5 0%, #EC4899 100%) !important;
  box-shadow: 0 4px 15px rgba(99,102,241,0.3) !important;
}

.bg-blue-600.active\:scale-95 {
  background: linear-gradient(135deg, #4F46E5 0%, #EC4899 100%) !important;
}

/* Purple accents → pink (used in Eko branding) */
.from-purple-500\/15 {
  --tw-gradient-from: rgba(236,72,153,0.1) !important;
}

.text-purple-400, .text-purple-500 {
  color: #F472B6 !important;
}

.from-blue-400.to-purple-400 {
  --tw-gradient-from: #818CF8 !important;
  --tw-gradient-to: #F472B6 !important;
}

/* --- PROMO CARD: "Utiliser" button blue/purple → indigo/pink --- */
.from-blue-600.to-purple-600 {
  --tw-gradient-from: #4F46E5 !important;
  --tw-gradient-to: #EC4899 !important;
}

/* --- PROMO CARD: inner gradient dark:from-gray-900 dark:to-black → deep navy --- */
.dark\:from-gray-900:is(.dark *) {
  --tw-gradient-from: #0A0A2E !important;
}

.dark\:to-black:is(.dark *) {
  --tw-gradient-to: #040418 !important;
}

/* --- PROMO CARD: purple decorative blob → pink --- */
.bg-purple-500\/10 {
  background-color: rgba(236,72,153,0.08) !important;
}

.bg-purple-600\/15 {
  background-color: rgba(236,72,153,0.1) !important;
}

/* --- EKO CHAT: Force dark on AI response cards/proposals --- */
/* Only target gray gradient classes (NOT colored buttons like emerald/orange) */
.from-gray-100, .from-gray-200, .from-gray-300 {
  --tw-gradient-from: #0F1035 !important;
}
.to-gray-100, .to-gray-200, .to-gray-300 {
  --tw-gradient-to: #0C0C35 !important;
}
.via-gray-100, .via-gray-200, .via-gray-300 {
  --tw-gradient-via: #0A0A2E !important;
}

/* --- BADGE / TAG OVERRIDES (light colored) --- */
.bg-green-50, .bg-emerald-50 {
  background-color: rgba(95,174,140,0.1) !important;
}

.bg-red-50 {
  background-color: rgba(239,68,68,0.1) !important;
}

.bg-yellow-50 {
  background-color: rgba(232,198,73,0.1) !important;
}

.bg-orange-50 {
  background-color: rgba(236,72,153,0.1) !important;
}

.text-green-700, .text-emerald-700 {
  color: #5FAE8C !important;
}

.text-red-700 {
  color: #F87171 !important;
}

.text-yellow-700 {
  color: #E8C649 !important;
}

.text-orange-700 {
  color: #F472B6 !important;
}

/* --- MODAL / DIALOG OVERLAYS --- */
.bg-black\/50, .bg-black\/40 {
  background-color: rgba(0,0,0,0.6) !important;
}

/* Modal content */
.bg-white.rounded-lg, .bg-white.rounded-xl {
  background-color: #0F1035 !important;
}

/* --- SWITCH / TOGGLE --- */
.bg-gray-200 {
  background-color: #1A1A4E !important;
}

/* --- PROGRESS BARS --- */
.bg-gray-200.rounded-full {
  background-color: #1A1A4E !important;
}

/* --- SKELETON / LOADING --- */
.animate-pulse .bg-gray-200, .animate-pulse .bg-gray-300 {
  background-color: #0F1035 !important;
}

/* --- SPECIFIC: bg-slate-50 used as page backgrounds --- */
.bg-slate-50.min-h-screen, .bg-gray-50.min-h-screen {
  background-color: #030014 !important;
}

/* Force all flex-1 containers that might be page-level */
.flex-1.bg-slate-50, .flex-1.bg-gray-50, .flex-1.bg-white {
  background-color: #030014 !important;
}

/* --- EMERALD BUTTON OVERRIDES (keep visible on dark) --- */
.bg-emerald-500 {
  background-color: #10B981 !important;
}

.bg-emerald-600 {
  background-color: #059669 !important;
}

.hover\:bg-emerald-600:hover {
  background-color: #047857 !important;
}

.text-emerald-500, .text-emerald-600 {
  color: #10B981 !important;
}

/* --- ADDITIONAL INLINE STYLE OVERRIDES --- */
/* Catch inline style backgrounds that are light */
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background-color: rgb(255"],
[style*="background-color: rgb(249"],
[style*="background-color: rgb(248"],
[style*="background-color: rgb(243"],
[style*="background-color: rgb(241"] {
  background-color: #050520 !important;
}

/* Catch inline style dark text on light backgrounds */
[style*="color: rgb(17"],
[style*="color: rgb(31"],
[style*="color: #111"],
[style*="color: #1f"] {
  color: #E8E8FF !important;
}

/* --- ENSURE BUTTONS STAY VISIBLE --- */
.bg-emerald-500.text-white, .bg-emerald-600.text-white {
  color: white !important;
}

/* --- FIX: any remaining #f8fafc, #f1f5f9, #f9fafb, #ffffff backgrounds in CSS vars --- */
:root {
  color-scheme: dark !important;
}

.dark\:text-white:is(.dark *) {
  color: rgb(255 255 255) !important;
}

.dark\:text-black:is(.dark *) {
  color: rgb(0 0 0) !important;
}

.dark\:text-gray-900:is(.dark *) {
  color: rgb(17 24 39) !important;
}

/* Restore dark:from-white gradient (text gradient effects) */
.dark\:from-white:is(.dark *) {
  --tw-gradient-from: #fff var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
}

/* dark:border-white variants - keep white borders in dark */
.dark\:border-white\/5:is(.dark *) {
  border-color: rgba(255,255,255,0.05) !important;
}

.dark\:border-white\/10:is(.dark *) {
  border-color: rgba(255,255,255,0.1) !important;
}

.dark\:divide-white\/5:is(.dark *)>:not([hidden])~:not([hidden]) {
  border-color: rgba(255,255,255,0.05) !important;
}

/* --- MISSING DARK VARIANT CSS RULES --- */
/* Classes used in JS but not compiled into CSS bundle */
.dark\:bg-\[\#0F1314\]:is(.dark *) {
  background-color: #030014 !important;
}

.dark\:bg-\[\#1C1F1D\]:is(.dark *) {
  background-color: #0C0C35 !important;
}

.dark\:bg-\[\#151515\]:is(.dark *) {
  background-color: #0A0A2E !important;
}

/* dark: gray backgrounds (make appropriately dark navy) */
.dark\:bg-gray-800:is(.dark *) {
  background-color: #0C0C35 !important;
}

.dark\:bg-gray-900:is(.dark *) {
  background-color: #040418 !important;
}

.dark\:ring-white\/10:is(.dark *) {
  --tw-ring-color: rgba(255,255,255,0.1) !important;
}

/* --- text-white must stay white (not overridden) --- */
.text-white {
  color: rgb(255 255 255) !important;
}

/* All content respects phone bounds */
#root > div * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Decorative blobs can exceed bounds (clipped by phone frame) */
#root > div [class*="absolute"][class*="blur-"] {
  max-width: none;
}

/* Fixed elements scoped to phone frame via transform */
#root > div {
  transform: translateZ(0);
}

/* Hide ALL decorative glow blobs — premium-effects.js provides our own */
[class*="absolute"][class*="blur-"][class*="bg-orange"],
[class*="absolute"][class*="blur-"][class*="bg-amber"],
[class*="absolute"][class*="blur-"][class*="bg-yellow"],
[class*="absolute"][class*="blur-"][class*="bg-cyan"],
[class*="absolute"][class*="blur-"][class*="bg-teal"],
[class*="absolute"][class*="blur-"][class*="bg-emerald"],
[class*="absolute"][class*="blur-"][class*="bg-blue"],
[class*="absolute"][class*="blur-"][class*="bg-purple"],
[class*="absolute"][class*="blur-"][class*="bg-pink"],
[class*="absolute"][class*="blur-"][class*="bg-indigo"],
[class*="absolute"][class*="blur-"][class*="rounded-full"][class*="bg-"] {
  opacity: 0.05 !important;
}

/* Specifically target warm gradient glow blobs */
[class*="absolute"][class*="blur-"][class*="from-blue"],
[class*="absolute"][class*="blur-"][class*="from-orange"],
[class*="absolute"][class*="blur-"][class*="from-amber"],
[class*="absolute"][class*="blur-"][class*="from-purple"],
[class*="absolute"][class*="blur-"][class*="from-cyan"],
[class*="absolute"][class*="blur-"][class*="from-teal"] {
  opacity: 0.05 !important;
}

/* ── SCANNER PAGE — cyan accents ── */
.client-scan-page .scan-corners {
  position: absolute;
  inset: 20px;
  z-index: 5;
  border: 2px solid transparent;
  border-image: none;
}

.client-scan-page .scan-corners::before,
.client-scan-page .scan-corners::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: rgba(34, 211, 238, 0.7);
  border-style: solid;
  border-width: 0;
}

.client-scan-page .scan-corners::before {
  top: 0; left: 0;
  border-top-width: 3px;
  border-left-width: 3px;
  border-top-left-radius: 8px;
  box-shadow: -4px -4px 12px rgba(34, 211, 238, 0.2);
}

.client-scan-page .scan-corners::after {
  top: 0; right: 0;
  border-top-width: 3px;
  border-right-width: 3px;
  border-top-right-radius: 8px;
  box-shadow: 4px -4px 12px rgba(34, 211, 238, 0.2);
}

/* Bottom corners via parent pseudo */
.client-scan-page .scan-viewfinder::before,
.client-scan-page .scan-viewfinder::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: rgba(34, 211, 238, 0.7);
  border-style: solid;
  border-width: 0;
  z-index: 5;
}

.client-scan-page .scan-viewfinder::before {
  bottom: 20px; left: 20px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-bottom-left-radius: 8px;
  box-shadow: -4px 4px 12px rgba(34, 211, 238, 0.2);
}

.client-scan-page .scan-viewfinder::after {
  bottom: 20px; right: 20px;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-bottom-right-radius: 8px;
  box-shadow: 4px 4px 12px rgba(34, 211, 238, 0.2);
}

.client-scan-page .scan-line {
  position: absolute;
  left: 20px; right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(34,211,238,0.8) 50%, transparent 100%);
  z-index: 6;
  animation: scanLineMove 2.5s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
}

@keyframes scanLineMove {
  0%, 100% { top: 25px; }
  50% { top: calc(100% - 25px); }
}

.client-scan-page .scan-action-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(34, 211, 238, 0.1);
  transition: all 0.3s ease;
}

.client-scan-page .scan-action-btn:hover {
  background: rgba(34, 211, 238, 0.08);
  border-color: rgba(34, 211, 238, 0.25);
}

.client-scan-page .scan-history-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.client-scan-page .scan-history-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* --- FAVORITES PAGE --- */
.client-favorites-page .fav-tab {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #9CA3AF;
}

.client-favorites-page .fav-tab.active {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.3);
  color: #818CF8;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.15);
}

.client-favorites-page .fav-shop-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.client-favorites-page .fav-shop-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.client-favorites-page .fav-offer-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.client-favorites-page .fav-offer-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.client-favorites-page .fav-discount-badge {
  background: rgba(236, 72, 153, 0.12);
  color: #F472B6;
  border: 1px solid rgba(236, 72, 153, 0.2);
}

/* --- PROFILE PAGE --- */
.client-profile-page .profile-hero-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(236, 72, 153, 0.04) 100%);
  border: 1px solid rgba(99, 102, 241, 0.1);
}

.client-profile-page .profile-stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.client-profile-page .profile-menu-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

.client-profile-page .profile-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

/* --- ANIMATIONS --- */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 0.4s ease-out;
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
  animation: slide-up 0.4s ease-out;
}

/* --- INTERACTIVE FEEDBACK --- */
/* Active press states for all clickable elements */
.scan-action-btn:active,
.scan-history-item:active,
.fav-shop-card:active,
.fav-offer-card:active,
.profile-stat-card:active,
.profile-menu-item:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* Scanning state animation */
.scan-viewfinder.scanning {
  border-color: rgba(34, 211, 238, 0.4) !important;
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.2);
}

.scan-viewfinder.scanning .scan-line {
  animation-duration: 0.8s;
  background: linear-gradient(90deg, transparent 0%, rgba(34,211,238,1) 50%, transparent 100%);
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.6);
}

/* Ensure all interactive elements show pointer cursor */
button, [role="button"], a, [onclick] {
  cursor: pointer;
}

/* Smooth transition for all interactive cards */
.fav-shop-card,
.fav-offer-card,
.scan-history-item,
.scan-action-btn,
.profile-stat-card,
.profile-menu-item,
.history-item,
.notif-item,
.address-card,
.security-toggle-item,
.security-card {
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

/* --- HISTORY PAGE --- */
.client-history-page .history-filter-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #9CA3AF;
}

.client-history-page .history-filter-btn.active {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.3);
  color: #818CF8;
}

.client-history-page .history-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.client-history-page .history-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* --- NOTIFICATIONS PAGE --- */
.client-notif-page .notif-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.client-notif-page .notif-item.notif-unread {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.12);
}

.client-notif-page .notif-item.notif-unread:hover {
  background: rgba(99, 102, 241, 0.07);
}

/* --- ADDRESSES PAGE --- */
.client-addresses-page .address-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.client-addresses-page .address-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* --- SECURITY PAGE --- */
.client-security-page .security-toggle-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

.client-security-page .security-toggle-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.client-security-page input[type="password"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ============================================================
   PAGE D'ACCUEIL — ROBOT EKO + LAYOUT + ANIMATION
   ============================================================ */

/* Canvas animation - fond */
#particle-network {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Float animation pour le robot PNG */
@keyframes ekoFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-15px); }
}

/* ── ROBOT: Remplacement CSS → PNG (identique au port 8085) ── */

/* Cacher le robot CSS animé (dans le hero section = perspective container) */
[class*="perspective-"] [class*="group"][class*="cursor-pointer"] {
    visibility: hidden !important;
}

/* Afficher le vrai Eko en PNG via pseudo-element */
[class*="perspective-"]::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 420px !important;
    height: 420px !important;
    background: url('/assets/ekobot.png') center/contain no-repeat !important;
    z-index: 30 !important;
    animation: ekoFloat 6s ease-in-out infinite !important;
    filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)) !important;
    pointer-events: none !important;
}

/* Glow indigo/pink derrière le robot */
[class*="perspective-"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.12), transparent 60%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* ── LAYOUT: Remonter le bouton Commencer ── */

/* Landing page: centrer tout le contenu en bloc (pas flex-1 expand) */
[class*="bg-gray-900"][class*="h-full"][class*="flex-col"] {
    justify-content: center !important;
}

/* Contenu principal: ne pas étirer (supprime flex-1 qui pousse le bouton en bas) */
[class*="bg-gray-900"][class*="h-full"] > [class*="flex-1"] {
    flex: 0 1 auto !important;
}

/* Hauteur du hero robot ajustée pour le PNG 420px */
[class*="perspective-"] {
    height: 320px !important;
    overflow: visible !important;
}

/* Réduire le gap space-y-12 (48px → 12px) */
[class*="space-y-12"] > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.75rem !important;
}

/* Réduire le padding bas du footer bouton (pb-12 = 48px → 8px) */
[class*="pb-12"][class*="space-y-6"] {
    padding-bottom: 0.5rem !important;
}

/* Réduire le padding du header (pt-8 = 32px → 12px) */
[class*="pt-8"][class*="animate-fade-in"] {
    padding-top: 0.75rem !important;
}

/* Réduire space-y-6 dans la zone texte et bouton */
[class*="animate-slide-up"][class*="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.5rem !important;
}

/* ── GENERAL SPACING REDUCTIONS (autres pages) ── */
[class*="mt-16"], [class*="mt-20"], [class*="mt-24"] {
    margin-top: 1rem !important;
}
[class*="mb-16"], [class*="mb-20"], [class*="mb-24"] {
    margin-bottom: 0.75rem !important;
}
[class*="py-16"], [class*="py-20"], [class*="py-24"] {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
[class*="gap-8"], [class*="gap-12"], [class*="gap-16"] {
    gap: 0.75rem !important;
}

/* ================================================================
   FIX iOS : Login page — overflow-hidden empêche le scroll avec clavier
   ================================================================ */
[class*="h-full"][class*="bg-transparent"][class*="flex-col"][class*="overflow-hidden"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Legal footer removed — links now in profile page */

/* ================================================================
   PREMIUM BOXES — 6 categories grid on home dashboard
   ================================================================ */
.eko-pbox {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 14px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.eko-pbox-active:active {
    transform: scale(0.96);
    background: rgba(255,255,255,0.08);
}
.eko-pbox-soon {
    opacity: 0.5;
    pointer-events: none;
}
.eko-pbox-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(236,72,153,0.2);
    color: #F472B6;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.eko-pbox-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border: 1px solid;
}
.eko-pbox-label {
    font-size: 13px;
    font-weight: 700;
    color: #E8E8FF;
    margin-bottom: 2px;
}
.eko-pbox-sub {
    font-size: 11px;
    color: #9CA3AF;
    line-height: 1.3;
}

/* ================================================================
   JS BUNDLE INLINE OVERRIDES — Tailwind arbitrary values hardcoded
   ================================================================ */

/* dark:bg-[#1C1F1D] — tabs, cards, modals (7 uses in JS) */
.dark\:bg-\[\#1C1F1D\]:is(.dark *),
[class*="dark:bg-[#1C1F1D]"] {
  background-color: #0C0C35 !important;
}

/* dark:bg-[#181C1A] — list items, detail sheets (3 uses) */
.dark\:bg-\[\#181C1A\]:is(.dark *),
[class*="dark:bg-[#181C1A]"] {
  background-color: #0A0A2E !important;
}

/* dark:bg-[#151515] — chat bubbles, selectors (4 uses) */
.dark\:bg-\[\#151515\]:is(.dark *),
[class*="dark:bg-[#151515]"] {
  background-color: #080828 !important;
}

/* dark:bg-[#050505] — robot screen inner */
.dark\:bg-\[\#050505\]:is(.dark *),
[class*="bg-[#050505]"] {
  background-color: #030014 !important;
}

/* ================================================================
   COPPER/GOLD GLOW SHADOWS → INDIGO/PINK GLOW
   ================================================================ */

/* shadow-[0_0_10px_rgba(224,152,85,0.8)] — antenna pulse dot */
[class*="shadow-\[0_0_10px_rgba\(224"] {
  --tw-shadow: 0 0 10px rgba(99,102,241,0.8) !important;
  box-shadow: 0 0 10px rgba(99,102,241,0.8) !important;
}

/* shadow-[0_0_8px_rgba(224,152,85,0.8)] — eye dots, nav dots */
[class*="shadow-\[0_0_8px_rgba\(224"] {
  --tw-shadow: 0 0 8px rgba(99,102,241,0.8) !important;
  box-shadow: 0 0 8px rgba(99,102,241,0.8) !important;
}

/* shadow-[0_0_6px_rgba(224,152,85,0.8)] — small nav active dot */
[class*="shadow-\[0_0_6px_rgba\(224"] {
  --tw-shadow: 0 0 6px rgba(99,102,241,0.8) !important;
  box-shadow: 0 0 6px rgba(99,102,241,0.8) !important;
}

/* shadow-[0_0_15px_rgba(224,152,85,0.6)] — scanner bar */
[class*="shadow-\[0_0_15px_rgba\(224"] {
  --tw-shadow: 0 0 15px rgba(99,102,241,0.6) !important;
  box-shadow: 0 0 15px rgba(99,102,241,0.6) !important;
}

/* drop-shadow-[0_0_30px_rgba(224,152,85,0.5)] — hero mascot glow */
[class*="drop-shadow-\[0_0_30px_rgba\(224"] {
  filter: drop-shadow(0 0 30px rgba(99,102,241,0.5)) !important;
}

/* drop-shadow-[0_0_8px_rgba(224,152,85,0.6)] — nav active icon glow */
[class*="drop-shadow-\[0_0_8px_rgba\(224"] {
  filter: drop-shadow(0 0 8px rgba(99,102,241,0.6)) !important;
}

/* ================================================================
   GOLD LOGO GLOW → INDIGO/PINK GLOW
   ================================================================ */

/* drop-shadow-[0_0_15px_rgba(224,168,62,0.3)] — header logo */
[class*="drop-shadow-\[0_0_15px_rgba\(224"] {
  filter: drop-shadow(0 0 15px rgba(99,102,241,0.3)) !important;
}

/* drop-shadow-[0_0_20px_rgba(224,168,62,0.4)] — login/splash logo */
[class*="drop-shadow-\[0_0_20px_rgba\(224"] {
  filter: drop-shadow(0 0 20px rgba(99,102,241,0.4)) !important;
}

/* shadow-[0_6px_30px_rgba(224,168,62,0.35)] — CTA button glow */
[class*="shadow-\[0_6px_30px_rgba\(224"] {
  --tw-shadow: 0 6px 30px rgba(99,102,241,0.35) !important;
  box-shadow: 0 6px 30px rgba(99,102,241,0.35) !important;
}

/* ================================================================
   TEAL ACCENTS (CRM nav) → CYAN
   ================================================================ */

/* drop-shadow-[0_0_8px_rgba(45,212,191,0.6)] — CRM nav icon glow */
[class*="drop-shadow-\[0_0_8px_rgba\(45"] {
  filter: drop-shadow(0 0 8px rgba(34,211,238,0.6)) !important;
}

/* shadow-[0_0_6px_rgba(45,212,191,0.8)] — CRM nav active dot */
[class*="shadow-\[0_0_6px_rgba\(45"] {
  --tw-shadow: 0 0 6px rgba(34,211,238,0.8) !important;
  box-shadow: 0 0 6px rgba(34,211,238,0.8) !important;
}

/* Teal text → cyan */
.text-teal-400 {
  color: #22D3EE !important;
}

.bg-teal-400 {
  background-color: #22D3EE !important;
}

/* ================================================================
   SVG CHART GRADIENT — copper/gold → indigo/pink
   ================================================================ */

/* Override SVG stop colors for #chartGradient */
stop[stop-color="#E09855"],
[stopColor="#E09855"],
linearGradient > stop:first-child {
  stop-color: #818CF8 !important;
}

stop[stop-color="#E8C649"],
[stopColor="#E8C649"] {
  stop-color: #EC4899 !important;
}

/* Force via attribute selector — compiled React sets stopColor as attribute */
[stop-color="#E09855"] {
  stop-color: #818CF8 !important;
}
[stop-color="#E8C649"] {
  stop-color: #EC4899 !important;
}

/* ================================================================
   LANDING PAGE — additional color fixes
   ================================================================ */

/* The main page wrapper with font-sans that has the inline gradient */
.font-sans[style*="background"] {
  background: linear-gradient(135deg, #030014 0%, #050520 40%, #0A0A2E 70%, #030014 100%) !important;
}

/* bg-gray-900 used on landing page */
.bg-gray-900 {
  background-color: #030014 !important;
}

/* Indigo primary color override */
.text-primary {
  color: #818CF8 !important;
}

.bg-primary {
  background-color: #6366F1 !important;
}

.bg-primary\/10 {
  background-color: rgba(99,102,241,0.1) !important;
}

.bg-primary\/40 {
  background-color: rgba(99,102,241,0.4) !important;
}

/* shadow-inner-glow override */
.shadow-inner-glow {
  box-shadow: inset 0 0 12px rgba(99,102,241,0.15) !important;
}

/* ================================================================
   GLASS DOCK (bottom nav) — indigo accent
   ================================================================ */

.glass-dock {
  background: rgba(5, 5, 32, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(99,102,241,0.1) !important;
}

/* ================================================================
   PARTICLE NETWORK — override if using copper colors
   ================================================================ */

/* Force the canvas background to transparent (it draws on top of our navy) */
#particle-network {
  background: transparent !important;
}

/* ================================================================
   LANDING PAGE — CTA "Commencer" button → indigo/pink gradient
   ================================================================ */

/* The main CTA button: from-blue-500 via-purple-500 to-cyan-500 */
.from-blue-500.via-purple-500.to-cyan-500,
[class*="from-blue-500"][class*="via-purple-500"][class*="to-cyan-500"] {
  --tw-gradient-from: #6366F1 !important;
  --tw-gradient-via: #A855F7 !important;
  --tw-gradient-to: #EC4899 !important;
  background-image: linear-gradient(to right, #6366F1, #A855F7, #EC4899) !important;
}

/* The glow blob behind the CTA: from-blue-500/25 via-purple-500/20 to-cyan-500/25 */
[class*="from-blue-500\/25"][class*="via-purple-500\/20"] {
  --tw-gradient-from: rgba(99,102,241,0.25) !important;
  --tw-gradient-via: rgba(168,85,247,0.20) !important;
  --tw-gradient-to: rgba(236,72,153,0.25) !important;
}

/* Login page blue glow: bg-blue-500/20 blur */
.bg-blue-500\/20 {
  background-color: rgba(99,102,241,0.20) !important;
}

/* The via-purple classes for gradients */
.via-purple-500 {
  --tw-gradient-via: #A855F7 !important;
}

/* from-blue-500 standalone → indigo */
.from-blue-500 {
  --tw-gradient-from: #6366F1 !important;
}

/* to-cyan-500 → pink */
.to-cyan-500 {
  --tw-gradient-to: #EC4899 !important;
}

/* EkoBot inner eye glow: from-blue-400 to-purple-500 */
.from-blue-400.to-purple-500,
[class*="from-blue-400"][class*="to-purple-500"] {
  --tw-gradient-from: #818CF8 !important;
  --tw-gradient-to: #EC4899 !important;
}

/* EkoBot body: from-blue-500 to-purple-600 */
.from-blue-500.to-purple-600,
[class*="from-blue-500"][class*="to-purple-600"] {
  --tw-gradient-from: #6366F1 !important;
  --tw-gradient-to: #EC4899 !important;
}

/* bg-blue-500 generic → indigo */
.bg-blue-500 {
  background-color: #6366F1 !important;
}

.bg-blue-600 {
  background-color: #4F46E5 !important;
}

/* "Autonome." shimmer text: from-blue-400 via-purple-400 to-cyan-400 */
.from-blue-400.via-purple-400.to-cyan-400,
[class*="from-blue-400"][class*="via-purple-400"][class*="to-cyan-400"] {
  --tw-gradient-from: #818CF8 !important;
  --tw-gradient-via: #C084FC !important;
  --tw-gradient-to: #F472B6 !important;
  background-image: linear-gradient(to right, #818CF8, #C084FC, #F472B6) !important;
}

/* ================================================================
   VISUAL EFFECTS ENGINE — CSS (matching vitrine)
   ================================================================ */

/* Particle Canvas */
.eko-particle-canvas {
  position: fixed !important;
  top: 0; left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none;
}

/* Sweeping Light Beam */
.eko-light-beam {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(99, 102, 241, 0.06) 44%,
    rgba(168, 85, 247, 0.08) 48%,
    rgba(236, 72, 153, 0.06) 52%,
    rgba(34, 211, 238, 0.04) 56%,
    transparent 60%
  );
  background-size: 300% 100%;
  animation: ekoBeamSweep 6s ease-in-out infinite;
}

@keyframes ekoBeamSweep {
  0% { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

/* Pulsing Rings */
.eko-rings-container {
  position: fixed;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.eko-ring {
  position: absolute;
  width: 600px; height: 600px;
  top: -300px; left: -300px;
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.08);
  animation: ekoRingPulse 4.5s ease-out infinite;
  opacity: 0;
}

@keyframes ekoRingPulse {
  0% { transform: scale(0.3); opacity: 0.4; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Floating Orbs */
.eko-orbs-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.eko-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

@keyframes ekoOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.9); }
  75% { transform: translate(40px, 30px) scale(1.05); }
}

/* Mouse Glow */
.eko-mouse-glow {
  position: fixed;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(99, 102, 241, 0.08) 0%,
    rgba(168, 85, 247, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Animated Gradient Background */
@keyframes ekoGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Scroll Reveal Animations */
@keyframes ekoSlideUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ekoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ekoTextShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Responsive — reduce on mobile */
@media (max-width: 768px) {
  .eko-light-beam { display: none; }
  .eko-rings-container { display: none; }
  .eko-mouse-glow { display: none; }
  .eko-orb { filter: blur(60px); opacity: 0.5; }
}

/* ================================================================
   LANDING PAGE PREMIUM REDESIGN 2026
   Full homepage layout overhaul — pro & premium feel
   ================================================================ */

/* ── HEADER: Logo centré + bouton Connexion premium ── */
/* Target: div.pt-6.px-5.flex.justify-between.items-center */
[class*="pt-6"][class*="px-5"][class*="justify-between"][class*="animate-fade-in"] {
    padding: 16px 20px 0 !important;
    justify-content: center !important;
    position: relative !important;
    min-height: 44px !important;
}

/* Logo EKONOM-IA — plus grand, centré, avec glow */
img[alt="Ekonom-IA"] {
    height: 36px !important;
    max-height: 36px !important;
    width: auto !important;
    filter: drop-shadow(0 0 20px rgba(99,102,241,0.25)) brightness(1.1) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Bouton Connexion — masqué (app mobile, pas besoin) */
[class*="pt-6"][class*="px-5"][class*="justify-between"] > a[class*="rounded-full"],
[class*="animate-fade-in"] > a[href*="login"] {
    display: none !important;
}

/* ── HERO SECTION: Robot Eko plus grand et centré ── */
/* Container du robot — plus d'espace, pas de scale down */
.relative.z-20 {
    transform: none !important;
}

/* Perspective container for robot */
[class*="perspective-"] {
    height: 220px !important;
    overflow: visible !important;
    margin-bottom: 8px !important;
}

/* Robot PNG — taille optimale */
[class*="perspective-"]::after {
    width: 280px !important;
    height: 280px !important;
    filter: drop-shadow(0 20px 40px rgba(99,102,241,0.2)) drop-shadow(0 0 60px rgba(168,85,247,0.15)) !important;
}

/* Glow derrière le robot — plus subtil et premium */
[class*="perspective-"]::before {
    background: radial-gradient(circle at center,
        rgba(99,102,241,0.1) 0%,
        rgba(168,85,247,0.06) 30%,
        rgba(236,72,153,0.03) 50%,
        transparent 70%
    ) !important;
}

/* Réduire les glow circles derrière le robot */
.absolute.w-48 {
    width: 10rem !important;
    height: 10rem !important;
    opacity: 0.6 !important;
}
.absolute.w-36 {
    width: 8rem !important;
    height: 8rem !important;
    opacity: 0.4 !important;
}

/* ── TITRE: Typographie premium ── */
/* Container du texte principal */
[class*="animate-slide-up"][class*="text-center"][class*="space-y-4"] {
    margin-top: 0 !important;
}

/* "Le Marketing" — titre principal */
[class*="text-center"] h1[class*="text-\[2\.75rem\]"] {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    text-shadow: 0 0 40px rgba(255,255,255,0.08) !important;
    font-family: 'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* "Autonome." — gradient text */
[class*="bg-clip-text"][class*="animate-shimmer"] {
    font-weight: 800 !important;
    filter: brightness(1.15) !important;
}

/* Description sous le titre */
[class*="text-center"] p[class*="text-gray-400"][class*="text-base"] {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(200,200,230,0.5) !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 12px !important;
}

/* "Eko" dans la description — highlight */
[class*="text-center"] p strong[class*="bg-clip-text"] {
    filter: brightness(1.2) !important;
}

/* ── MAIN CONTENT: Espacement vertical équilibré ── */
/* Le conteneur flex-1 du contenu principal — centered but compact */
[class*="flex-1"][class*="flex-col"][class*="justify-center"][class*="px-6"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 1 auto !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* space-y-8 dans le conteneur principal — réduire */
[class*="flex-1"][class*="justify-center"] > [class*="space-y-8"] > :not([hidden]) ~ :not([hidden]) {
    margin-top: 12px !important;
}

/* Le wrapper landing page — center everything */
[class*="h-full"][class*="text-white"][class*="font-sans"][class*="flex-col"][class*="overflow-hidden"] {
    justify-content: center !important;
    gap: 8px !important;
}

/* ── EKORIDE CARD: Premium glassmorphism ── */
#ekoride-home-card {
    margin: 0 20px 4px !important;
    padding: 12px 16px !important;
    background: rgba(16,185,129,0.05) !important;
    border: 1px solid rgba(16,185,129,0.12) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03) !important;
    transition: all 0.3s cubic-bezier(.16,1,.3,1) !important;
}
#ekoride-home-card:hover {
    border-color: rgba(16,185,129,0.25) !important;
    background: rgba(16,185,129,0.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 30px rgba(16,185,129,0.1), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
#ekoride-home-card .card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(16,185,129,0.12) !important;
}
#ekoride-home-card h3 {
    font-family: 'Montserrat', system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: -0.01em !important;
}
#ekoride-home-card p {
    font-size: 11px !important;
    color: rgba(200,200,230,0.4) !important;
}

/* ── CTA SECTION: Bouton "Commencer" premium ── */
/* Container du bouton — closer to EkoRide card */
[class*="p-5"][class*="pb-10"][class*="space-y-5"][class*="animate-slide-up"] {
    padding: 8px 20px 20px !important;
}

/* Bouton "Commencer →" — gradient premium + glow */
a[class*="from-blue-500"][class*="via-purple-500"][class*="rounded-2xl"] {
    padding: 16px 32px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    font-family: 'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif !important;
    background: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%) !important;
    box-shadow:
        0 8px 32px rgba(99,102,241,0.3),
        0 2px 8px rgba(168,85,247,0.2),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
    transition: all 0.4s cubic-bezier(.175,.885,.32,1.275) !important;
    position: relative !important;
    overflow: hidden !important;
}
a[class*="from-blue-500"][class*="via-purple-500"][class*="rounded-2xl"]:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow:
        0 12px 40px rgba(99,102,241,0.4),
        0 4px 12px rgba(168,85,247,0.25),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* Stats "+30% Revenus" et "Setup 2min" — premium style */
[class*="p-5"][class*="pb-10"] > [class*="flex"][class*="justify-center"][class*="gap-8"] {
    gap: 24px !important;
    margin-top: 14px !important;
}
[class*="p-5"][class*="pb-10"] > [class*="flex"][class*="justify-center"] span[class*="text-xs"] {
    color: rgba(200,200,230,0.35) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}
[class*="p-5"][class*="pb-10"] > [class*="flex"][class*="justify-center"] span svg {
    opacity: 0.5 !important;
}

/* ── NATIVE IOS OVERRIDES — resets for our new layout ── */
/* Undo the aggressive pt reduction from native-ios-fix.css */
[class*="pt-6"][class*="px-5"][class*="justify-between"][class*="animate-fade-in"][class*="pt-6"] {
    padding-top: 20px !important;
}

/* Undo the pb-10 massive padding from native-ios-fix */
[class*="animate-slide-up"][class*="space-y-5"][class*="pb-10"] {
    padding-bottom: 24px !important;
}

/* Compact spacing override from native-ios-fix */
[class*="animate-slide-up"][class*="space-y-5"] > :not([hidden]) ~ :not([hidden]) {
    margin-top: 12px !important;
}

/* ── BACKGROUND PARTICLES: Plus subtils ── */
/* Les glow orbes du background landing — plus subtils */
[class*="h-full"][class*="text-white"][class*="flex-col"] > [class*="absolute"][class*="pointer-events-none"] [class*="bg-blue-600"] {
    opacity: 0.5 !important;
}
[class*="h-full"][class*="text-white"][class*="flex-col"] > [class*="absolute"][class*="pointer-events-none"] [class*="bg-purple-600"] {
    opacity: 0.4 !important;
}
[class*="h-full"][class*="text-white"][class*="flex-col"] > [class*="absolute"][class*="pointer-events-none"] [class*="bg-cyan-500"] {
    opacity: 0.3 !important;
}