/* ═══════════════════════════════════════════════════════════════════════════
   ev-client-dark-v308.css  —  2026-05-30
   ───────────────────────────────────────────────────────────────────────────
   ESPACE CLIENT (PWA membre) → THÈME SOMBRE PREMIUM
   ───────────────────────────────────────────────────────────────────────────
   Décision Directeur : harmoniser l'espace client (#mb-p-app) avec le sombre
   premium de l'app staff. CSS-only, réversible (retirer le <link>).

   PORTÉE STRICTE : tout est scopé sous #mb-p-app / #mode-membre → ne peut PAS
   toucher l'app staff (body:has(#p-app.on)) ni l'accueil public (#p-auth).

   Palette (alignée v304/v305) :
     fonds   #020617 (app) · #0F172A (cartes/sidebar) · #1E293B (interactif)
     texte   #FFFFFF / #F1F5F9 / #CBD5E1 / #94A3B8   (jamais plus sombre)
     accent  cyan #22D3EE (interactif) ; vert/rouge = badges/bords uniquement
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §1. COQUE — fonds sombres (shell, main, home, conteneurs clairs en dur)
   ═══════════════════════════════════════════════════════════════════════════ */
#mode-membre, #mb-app, #mb-p-app { background: #020617 !important; }
#mb-p-app .mb-shell,
#mb-p-app .mb-main,
#mb-p-app .mb-home,
#mb-p-app #s-home,
#mb-p-app [class*="tw-bg-slate-50"] {
  background: #020617 !important;
}
/* Catch-all : tout fond clair en dur (inline) dans l'espace client → slate-950 */
#mb-p-app [style*="background:#F8FAFC" i],
#mb-p-app [style*="background:#FAFAFA" i],
#mb-p-app [style*="background-color:#F8FAFC" i] {
  background: #020617 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2. SIDEBAR (PC) + HEADER MOBILE — surfaces slate-900, bordure slate-800
   ═══════════════════════════════════════════════════════════════════════════ */
#mb-p-app aside,
#mb-p-app .mb-sidebar {
  background: #0F172A !important;
  border-right: 1px solid #1E293B !important;
}
#mb-p-app #mb-mobile-header,
#mb-p-app header[id="mb-mobile-header"] {
  background: #0F172A !important;
  border-bottom: 1px solid #1E293B !important;
}
/* Brand + libellés header → clair */
#mb-p-app [class*="tw-text-[#2D5A60]"],
#mb-p-app .mb-brand { color: #F1F5F9 !important; -webkit-text-fill-color:#F1F5F9 !important; }
/* Carte « utilisateur » (avatar + nom + solde) dans la sidebar */
#mb-p-app [class*="tw-bg-[#F8FAFC]"],
#mb-p-app .mb-user {
  background: #131C2E !important;
  border: 1px solid #1E293B !important;
}
/* Avatar : on garde un disque d'accent (teal → cyan brand) lisible */
#mb-p-app #tb-av {
  background: linear-gradient(135deg,#155E63,#0E7490) !important;
  color: #FFFFFF !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §3. NAVIGATION (.evcx-side / .evcx-sub) — même look que l'app staff (v306)
   ───────────────────────────────────────────────────────────────────────────
   La base (index.html l.103) est en thème clair ; on la repeint ici pour
   l'espace membre, avec barre d'accent cyan sur l'item actif.
   ═══════════════════════════════════════════════════════════════════════════ */
#mb-p-app .evcx-side,
#mb-p-app .evcx-sub {
  color: #CBD5E1 !important;
  -webkit-text-fill-color: #CBD5E1 !important;
  transition: background .16s ease-out, color .16s ease-out, box-shadow .16s ease-out !important;
}
#mb-p-app .evcx-side:hover,
#mb-p-app .evcx-sub:hover {
  background: rgba(30,41,59,.70) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
#mb-p-app .evcx-side.evcx-navactive {
  background: rgba(34,211,238,.10) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: inset 3px 0 0 0 #22D3EE, 0 1px 3px rgba(0,0,0,.30) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §4. CARTES — surfaces slate-900 + bord slate-800 + ombre deep
   ═══════════════════════════════════════════════════════════════════════════ */
#mb-p-app .cd,
#mb-p-app .mb-card,
#mb-p-app .mb-cards > *,
#mb-p-app [style*="background:#FFFFFF" i]:not(input):not(button):not(select):not(textarea),
#mb-p-app [style*="background:#fff" i]:not(input):not(button):not(select):not(textarea),
#mb-p-app [style*="background-color:#FFFFFF" i]:not(input):not(button):not(select):not(textarea),
#mb-p-app [style*="background-color:#fff" i]:not(input):not(button):not(select):not(textarea) {
  background: #0F172A !important;
  border-color: #1E293B !important;
  color: #F1F5F9 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30) !important;
}
/* Petits fonds gris pâle (#F1F5F9) utilisés comme séparateurs/lignes → slate-800 */
#mb-p-app [style*="background:#F1F5F9" i]:not(input):not(button):not(select):not(textarea),
#mb-p-app [style*="background-color:#F1F5F9" i]:not(input):not(button):not(select):not(textarea) {
  background: #1E293B !important;
}
/* Bordures claires en dur → slate-800 */
#mb-p-app [style*="border:1px solid #E2E8F0" i],
#mb-p-app [style*="border-bottom:1px solid #F1F5F9" i],
#mb-p-app [style*="border-top:1px solid #F1F5F9" i],
#mb-p-app [style*="border-bottom:1px solid #e2e8f0" i] {
  border-color: #1E293B !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §5. TEXTE — niveaux de gris clairs (catch-all sur les sombres en dur)
   ═══════════════════════════════════════════════════════════════════════════ */
#mb-p-app [style*="color:#1F2937" i],
#mb-p-app [style*="color:#1f2937" i],
#mb-p-app [style*="color:#1e293b" i],
#mb-p-app [style*="color:#0F172A" i],
#mb-p-app [style*="color:#334155" i],
#mb-p-app [class*="tw-text-[#1F2937]"] {
  color: #F1F5F9 !important; -webkit-text-fill-color:#F1F5F9 !important;
}
#mb-p-app [style*="color:#475569" i],
#mb-p-app [style*="color:#64748B" i],
#mb-p-app [style*="color:#64748b" i],
#mb-p-app [class*="tw-text-[#64748B]"],
#mb-p-app .mb-user-bal {
  color: #94A3B8 !important; -webkit-text-fill-color:#94A3B8 !important;
}
/* #94A3B8 déjà clair : on le garde tel quel (lisible sur sombre). */


/* ═══════════════════════════════════════════════════════════════════════════
   §6. SÉMANTIQUE crédit / débit / déconnexion
   ───────────────────────────────────────────────────────────────────────────
   Règle projet : le `color:` du texte reste en gris clair ; le vert/rouge ne
   vit que sur les badges (pills, alpha) et les bords. On retravaille donc les
   pastilles de l'historique portefeuille et on éclaircit les montants.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Montants verts (#10B981/#047857) utilisés en texte → blanc (lisible sombre) */
#mb-p-app [style*="color:#10B981" i],
#mb-p-app [style*="color:#10b981" i],
#mb-p-app [style*="color:#047857" i] {
  color: #FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;
}
/* Pastille « Cashback » (fond vert clair #D1FAE5 / texte #047857) → badge sombre */
#mb-p-app [style*="background:#D1FAE5" i] {
  background: rgba(16,185,129,.18) !important;
  color: #6EE7B7 !important; -webkit-text-fill-color:#6EE7B7 !important;
}
/* Pastille « Utilisation » (fond #F1F5F9 / texte #475569) déjà couverte §4/§5 :
   bg slate-800, on force juste un texte lisible. */
#mb-p-app span[style*="background:#F1F5F9" i] {
  color: #CBD5E1 !important; -webkit-text-fill-color:#CBD5E1 !important;
}
/* Bouton/lien déconnexion (rouge #EF4444) : on le garde rouge mais on l'éclaircit
   pour le contraste sur fond sombre (action sémantique, sur un bouton). */
#mb-p-app [style*="color:#ef4444" i],
#mb-p-app [style*="color:#EF4444" i] {
  color: #F87171 !important; -webkit-text-fill-color:#F87171 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §7. INPUTS / TEXTAREA — fond sombre, focus cyan (chat, formulaires client)
   ═══════════════════════════════════════════════════════════════════════════ */
#mb-p-app input:not([type="checkbox"]):not([type="radio"]),
#mb-p-app select,
#mb-p-app textarea {
  background: #020617 !important;
  border: 1px solid #334155 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  color-scheme: dark;
}
#mb-p-app input:focus, #mb-p-app select:focus, #mb-p-app textarea:focus {
  border-color: #22D3EE !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.18) !important;
  outline: none !important;
}
#mb-p-app input::placeholder, #mb-p-app textarea::placeholder {
  color: #64748B !important; -webkit-text-fill-color:#64748B !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8. TABLES (historique portefeuille) — en-tête + lignes sombres
   ═══════════════════════════════════════════════════════════════════════════ */
#mb-p-app table { color: #E2E8F0 !important; }
#mb-p-app th { background:#1E293B !important; color:#CBD5E1 !important; -webkit-text-fill-color:#CBD5E1 !important; }
#mb-p-app td { border-color: rgba(51,65,85,.45) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   §9. SCROLLBARS sombres + sélection cyan (cohérence avec l'app staff)
   ═══════════════════════════════════════════════════════════════════════════ */
#mb-p-app ::-webkit-scrollbar { width:10px; height:10px; }
#mb-p-app ::-webkit-scrollbar-track { background:#0F172A; }
#mb-p-app ::-webkit-scrollbar-thumb { background:#334155; border-radius:5px; border:2px solid #0F172A; }
#mb-p-app ::-webkit-scrollbar-thumb:hover { background:#475569; }
#mb-p-app { scrollbar-color:#334155 #0F172A; scrollbar-width:thin; }


/* Fin du fichier — ev-client-dark-v308.css */