/* ═══════════════════════════════════════════════════════════════════════════
   ev-global-polish-v305.css  —  2026-05-26
   ───────────────────────────────────────────────────────────────────────────
   POLISH GLOBAL : UNIFIED DARK MODE PREMIUM SAAS
   ───────────────────────────────────────────────────────────────────────────
   Directive Directeur : « heta desgin yewli zin » → design moderne, premium,
   visuellement cohérent et reposant pour les yeux.

   STRATÉGIE
   ─────────
   • Palette de profondeur (3 niveaux) : slate-950 (app bg), slate-900
     (cards), slate-800 (interactive hover) — un seul look partout.
   • Textes : blanc / slate-200 (principal), slate-400 (secondaire),
     slate-500 (tertiaire). Plus rien de plus sombre.
   • Accents sémantiques : emerald-400 (succès), rose-500 (alerte),
     cyan-400 (interactif/focus). Les neons criards sont remplacés par
     des saturations sombres + bord coloré + glow doux.
   • Hover : `transform:scale(1.02)` + `transition:.18s ease-out` partout
     pour un toucher "premium". Ombres deep (shadow-lg + black/40), zéro
     drop-shadow criard.

   Chargé EN DERNIER (après v300/v302/v303/v304) → cascade gagnante par
   ordre, sans `!important` excessif sauf si nécessaire pour battre
   l'inline-style legacy.
═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §1. APP BACKGROUND — slate-950 partout
═══════════════════════════════════════════════════════════════════════════ */
html body:has(#p-app.on),
body:has(#p-app.on) {
  background: #020617 !important;          /* slate-950 — fond app */
}
html body:has(#p-app.on) #p-app,
body:has(#p-app.on) #p-app {
  background: #020617 !important;
}
/* Surfaces principales (sidebar, header, content area) */
html body:has(#p-app.on) .tb,
html body:has(#p-app.on) .tbr,
body:has(#p-app.on) .tb,
body:has(#p-app.on) .tbr {
  background: #020617 !important;
  border-bottom: 1px solid #1E293B !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2. CARDS — slate-900 + bord slate-800 + ombre deep
═══════════════════════════════════════════════════════════════════════════ */
html body:has(#p-app.on) .cd,
html body:has(#p-app.on) .kc,
html body:has(#p-app.on) .acard,
html body:has(#p-app.on) .bi-card,
html body:has(#p-app.on) .tbd-card,
html body:has(#p-app.on) .tbd-chart-wrap,
html body:has(#p-app.on) .ev-card,
html body:has(#p-app.on) .kpi-card,
html body:has(#p-app.on) .stat-card,
html body:has(#p-app.on) .mbrs-card,
html body:has(#p-app.on) .mbrs-stat,
html body:has(#p-app.on) .ns-step1,
html body:has(#p-app.on) .ns-step2,
html body:has(#p-app.on) .ns-step3,
html body:has(#p-app.on) .bx-hero,
html body:has(#p-app.on) .amt-box,
html body:has(#p-app.on) .opb,
html body:has(#p-app.on) .trb,
html body:has(#p-app.on) .mbrs-table-wrap {
  background: #0F172A !important;          /* slate-900 */
  border: 1px solid #1E293B !important;    /* slate-800 */
  color: #F1F5F9 !important;               /* slate-100 default text */
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.45),
              0 2px 6px rgba(0,0,0,.30) !important;  /* deep shadow */
  transition: box-shadow .20s ease-out, border-color .20s ease-out;
}
/* Hover des cards "cliquables" — subtle lift */
html body:has(#p-app.on) .sc[onclick],
html body:has(#p-app.on) .cd[onclick],
html body:has(#p-app.on) .pc[onclick],
html body:has(#p-app.on) .opb[onclick],
html body:has(#p-app.on) .bi-card[onclick] {
  cursor: pointer;
}
html body:has(#p-app.on) .sc[onclick]:hover,
html body:has(#p-app.on) .cd[onclick]:hover,
html body:has(#p-app.on) .pc[onclick]:hover,
html body:has(#p-app.on) .opb[onclick]:hover,
html body:has(#p-app.on) .bi-card[onclick]:hover {
  border-color: #334155 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.55),
              0 4px 10px rgba(0,0,0,.40),
              0 0 0 1px rgba(34,211,238,.12) inset !important;
  transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §3. TEXTE — hiérarchie 3 niveaux
═══════════════════════════════════════════════════════════════════════════ */
html body:has(#p-app.on) .cd .cd-h,
html body:has(#p-app.on) .acard .acard-h,
html body:has(#p-app.on) .bi-card-h,
html body:has(#p-app.on) .tbd-card-h,
html body:has(#p-app.on) .ev-card-h,
html body:has(#p-app.on) .mbrs-stat-val {
  color: #E2E8F0 !important;               /* slate-200 — titres */
  -webkit-text-fill-color: #E2E8F0 !important;
  font-weight: 900 !important;
}
/* Texte secondaire (tx2, labels métadonnées) */
html body:has(#p-app.on) [style*="color:var(--tx2)" i],
html body:has(#p-app.on) [style*="color: var(--tx2)" i] {
  color: #94A3B8 !important;               /* slate-400 */
  -webkit-text-fill-color: #94A3B8 !important;
}
/* Texte tertiaire (tx3) */
html body:has(#p-app.on) [style*="color:var(--tx3)" i],
html body:has(#p-app.on) [style*="color: var(--tx3)" i] {
  color: #64748B !important;               /* slate-500 */
  -webkit-text-fill-color: #64748B !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §4. BOUTONS — interaction premium
═══════════════════════════════════════════════════════════════════════════ */
html body:has(#p-app.on) .btn,
html body:has(#p-app.on) button.btn {
  transition: all .18s ease-out !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}
/* Hover lift subtil (cards et boutons) */
html body:has(#p-app.on) .btn:hover:not(:disabled):not([disabled]) {
  transform: translateY(-1px);
}
html body:has(#p-app.on) .btn:active:not(:disabled):not([disabled]) {
  transform: translateY(0) scale(.98);
}
/* Primary action — emerald success */
html body:has(#p-app.on) .btn.bg,
html body:has(#p-app.on) .btn.ba {
  background: linear-gradient(180deg, #059669, #047857) !important;
  border: 1px solid #10B981 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(5,150,105,.25),
              0 2px 4px rgba(0,0,0,.20) !important;
}
html body:has(#p-app.on) .btn.bg:hover:not(:disabled):not([disabled]),
html body:has(#p-app.on) .btn.ba:hover:not(:disabled):not([disabled]) {
  background: linear-gradient(180deg, #10B981, #059669) !important;
  box-shadow: 0 10px 24px rgba(5,150,105,.35),
              0 3px 6px rgba(0,0,0,.25) !important;
}
/* Danger — rose */
html body:has(#p-app.on) .btn.br {
  background: linear-gradient(180deg, #E11D48, #BE123C) !important;
  border: 1px solid #F43F5E !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(225,29,72,.25),
              0 2px 4px rgba(0,0,0,.20) !important;
}
html body:has(#p-app.on) .btn.br:hover:not(:disabled):not([disabled]) {
  background: linear-gradient(180deg, #F43F5E, #E11D48) !important;
  box-shadow: 0 10px 24px rgba(225,29,72,.35),
              0 3px 6px rgba(0,0,0,.25) !important;
}
/* Secondary / ghost — slate neutre */
html body:has(#p-app.on) .btn.bgh {
  background: rgba(30,41,59,.65) !important;       /* slate-800/65 */
  border: 1px solid #334155 !important;            /* slate-700 */
  color: #E2E8F0 !important;
  -webkit-text-fill-color: #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.20) !important;
}
html body:has(#p-app.on) .btn.bgh:hover:not(:disabled):not([disabled]) {
  background: rgba(30,41,59,.95) !important;
  border-color: #475569 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* Warning — amber */
html body:has(#p-app.on) .btn.bo {
  background: linear-gradient(180deg, #D97706, #B45309) !important;
  border: 1px solid #F59E0B !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(245,158,11,.25),
              0 2px 4px rgba(0,0,0,.20) !important;
}
html body:has(#p-app.on) .btn.bo:hover:not(:disabled):not([disabled]) {
  background: linear-gradient(180deg, #F59E0B, #D97706) !important;
  box-shadow: 0 10px 24px rgba(245,158,11,.35),
              0 3px 6px rgba(0,0,0,.25) !important;
}
/* Disabled — état clair mais accessible */
html body:has(#p-app.on) .btn:disabled,
html body:has(#p-app.on) .btn[disabled],
html body:has(#p-app.on) button:disabled,
html body:has(#p-app.on) button[disabled] {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §5. INPUTS — fond slate-950 + bord slate-700 + focus cyan-400
═══════════════════════════════════════════════════════════════════════════ */
html body:has(#p-app.on) input.fi,
html body:has(#p-app.on) select.fi,
html body:has(#p-app.on) textarea.fta {
  background: #020617 !important;          /* slate-950 */
  border: 1px solid #334155 !important;    /* slate-700 */
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-radius: 10px !important;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
html body:has(#p-app.on) input.fi:focus,
html body:has(#p-app.on) select.fi:focus,
html body:has(#p-app.on) textarea.fta:focus {
  border-color: #22D3EE !important;        /* cyan-400 */
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.18) !important;
}
html body:has(#p-app.on) input.fi::placeholder,
html body:has(#p-app.on) textarea.fta::placeholder {
  color: #64748B !important;               /* slate-500 */
  -webkit-text-fill-color: #64748B !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §6. DIVIDERS & BORDERS — slate-800 par défaut, 700/50 pour subtle
═══════════════════════════════════════════════════════════════════════════ */
html body:has(#p-app.on) hr,
html body:has(#p-app.on) [style*="border-top:1px solid var(--bdr)" i],
html body:has(#p-app.on) [style*="border-bottom:1px solid var(--bdr)" i] {
  border-color: rgba(51,65,85,.50) !important;  /* slate-700/50 */
}


/* ═══════════════════════════════════════════════════════════════════════════
   §7. SCROLLBARS — palette dark cohérente (Chromium/Webkit)
═══════════════════════════════════════════════════════════════════════════ */
html body:has(#p-app.on) ::-webkit-scrollbar {
  width: 10px; height: 10px;
}
html body:has(#p-app.on) ::-webkit-scrollbar-track {
  background: #0F172A;
}
html body:has(#p-app.on) ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 5px;
  border: 2px solid #0F172A;
}
html body:has(#p-app.on) ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}
/* Firefox */
html body:has(#p-app.on) {
  scrollbar-color: #334155 #0F172A;
  scrollbar-width: thin;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8. SUPPRESSION DES NÉONS CRIARDS — remplace par ombres deep
═══════════════════════════════════════════════════════════════════════════ */
/* Anti-glow excessif : règle générale qui réduit les box-shadow > 18px à
   des valeurs raisonnables (sans casser les boutons sémantiques). */
html body:has(#p-app.on) .ni.on::before,
html body:has(#p-app.on) .ni.on::after {
  box-shadow: 0 0 8px rgba(34,211,238,.40) !important;  /* glow doux */
}


/* ═══════════════════════════════════════════════════════════════════════════
   §9. MODALES — fond sombre + ombre deep + backdrop
═══════════════════════════════════════════════════════════════════════════ */
html body:has(#p-app.on) .ov {
  background: rgba(2,6,23,.78) !important;          /* slate-950/78 */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html body:has(#p-app.on) .md {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
  color: #F1F5F9 !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.65),
              0 8px 16px rgba(0,0,0,.40) !important;
  border-radius: 18px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §10. ANTI bg-white & bg-gray-* (catch-all FINAL pour l'app)
═══════════════════════════════════════════════════════════════════════════ */
html body:has(#p-app.on) #p-app [style*="background:#FFFFFF" i]:not(.ev-allow-white):not(input):not(button):not(select):not(textarea),
html body:has(#p-app.on) #p-app [style*="background:#fff" i]:not(.ev-allow-white):not(input):not(button):not(select):not(textarea),
html body:has(#p-app.on) #p-app [style*="background: #FFFFFF" i]:not(.ev-allow-white):not(input):not(button):not(select):not(textarea),
html body:has(#p-app.on) #p-app [style*="background-color:#FFFFFF" i]:not(.ev-allow-white):not(input):not(button):not(select):not(textarea),
html body:has(#p-app.on) #p-app [style*="background-color:#fff" i]:not(.ev-allow-white):not(input):not(button):not(select):not(textarea) {
  background: #0F172A !important;          /* slate-900 */
  border-color: #1E293B !important;
}
/* Backgrounds gris pâle (#F8FAFC, #F1F5F9, #E2E8F0 utilisés comme bg) → slate-950 */
html body:has(#p-app.on) #p-app [style*="background:#F8FAFC" i]:not(input):not(button):not(select):not(textarea),
html body:has(#p-app.on) #p-app [style*="background:#F1F5F9" i]:not(input):not(button):not(select):not(textarea),
html body:has(#p-app.on) #p-app [style*="background:#FAFAFA" i]:not(input):not(button):not(select):not(textarea) {
  background: #020617 !important;
  border-color: #1E293B !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §11. TYPO — tabular-nums sur tous les montants pour stabilité visuelle
═══════════════════════════════════════════════════════════════════════════ */
html body:has(#p-app.on) [class*="amt"],
html body:has(#p-app.on) [class*="-amt"],
html body:has(#p-app.on) .kv,
html body:has(#p-app.on) .opca,
html body:has(#p-app.on) .tbd-card-value,
html body:has(#p-app.on) .bh-am,
html body:has(#p-app.on) .mbrs-stat-val {
  font-variant-numeric: tabular-nums !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §12. EXTENSION 2026-05-26 — Couverture Tailwind classes + hover scale
═══════════════════════════════════════════════════════════════════════════ */

/* Classes Tailwind directes : `bg-white`, `tw-bg-white`, `bg-gray-50`,
   `bg-slate-50` — au cas où elles seraient utilisées en plus des inline
   styles. Forcées en slate-900 sur l'app authentifiée. */
html body:has(#p-app.on) #p-app .bg-white,
html body:has(#p-app.on) #p-app .tw-bg-white,
html body:has(#p-app.on) #p-app .bg-gray-50,
html body:has(#p-app.on) #p-app .tw-bg-gray-50,
html body:has(#p-app.on) #p-app .bg-gray-100,
html body:has(#p-app.on) #p-app .tw-bg-gray-100,
html body:has(#p-app.on) #p-app .bg-slate-50,
html body:has(#p-app.on) #p-app .tw-bg-slate-50,
html body:has(#p-app.on) #p-app .bg-slate-100,
html body:has(#p-app.on) #p-app .tw-bg-slate-100 {
  background: #0F172A !important;
  border-color: #1E293B !important;
}
html body:has(#p-app.on) #p-app .text-gray-900,
html body:has(#p-app.on) #p-app .tw-text-gray-900,
html body:has(#p-app.on) #p-app .text-slate-900,
html body:has(#p-app.on) #p-app .tw-text-slate-900,
html body:has(#p-app.on) #p-app .text-black,
html body:has(#p-app.on) #p-app .tw-text-black {
  color: #F1F5F9 !important;
  -webkit-text-fill-color: #F1F5F9 !important;
}

/* Hover scale [1.02] explicite sur les boutons d'action primaires et
   cards cliquables (vient s'ajouter au translateY-1 existant pour donner
   un toucher "premium SaaS" plus marqué). */
html body:has(#p-app.on) .btn.bg:hover:not(:disabled):not([disabled]),
html body:has(#p-app.on) .btn.ba:hover:not(:disabled):not([disabled]),
html body:has(#p-app.on) .btn.br:hover:not(:disabled):not([disabled]),
html body:has(#p-app.on) .btn.bo:hover:not(:disabled):not([disabled]) {
  transform: translateY(-1px) scale(1.02);
}
html body:has(#p-app.on) .btn.bg:active:not(:disabled):not([disabled]),
html body:has(#p-app.on) .btn.ba:active:not(:disabled):not([disabled]),
html body:has(#p-app.on) .btn.br:active:not(:disabled):not([disabled]),
html body:has(#p-app.on) .btn.bo:active:not(:disabled):not([disabled]) {
  transform: translateY(0) scale(.97);
}

/* Cards primaires (cd, bi-card, tbd-card, ev-card) — hover-scale subtil
   sur les containers cliquables. Le `:where()` baisse la spécificité
   pour ne pas écraser des hovers spécifiques d'autres composants. */
html body:has(#p-app.on) :where(.sc, .opb, .mbrs-card, .ev-card)[onclick]:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: #475569 !important;          /* slate-600 — bord plus marqué au hover */
}

/* Focus-visible — anneau cyan-400 cohérent sur tout élément interactif
   (boutons, liens, inputs). Améliore la navigation clavier sans
   sacrifier le look. */
html body:has(#p-app.on) button:focus-visible,
html body:has(#p-app.on) a:focus-visible,
html body:has(#p-app.on) [role="button"]:focus-visible,
html body:has(#p-app.on) [tabindex]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.40),
              0 0 0 1px #22D3EE !important;
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §13. EXTENSION — Surfaces interactives secondaires (tabs, pills, badges)
═══════════════════════════════════════════════════════════════════════════ */

/* Tabs / segmented controls — slate-800 inactif, cyan-400 actif. */
html body:has(#p-app.on) .atab,
html body:has(#p-app.on) .tab:not(.on) {
  background: rgba(30,41,59,.40) !important;
  color: #CBD5E1 !important;
  -webkit-text-fill-color: #CBD5E1 !important;
  border: 1px solid #334155 !important;
  transition: all .18s ease-out !important;
}
html body:has(#p-app.on) .atab:hover:not(.on),
html body:has(#p-app.on) .tab:not(.on):hover {
  background: rgba(30,41,59,.70) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
html body:has(#p-app.on) .atab.on,
html body:has(#p-app.on) .tab.on {
  background: #0F172A !important;
  color: #22D3EE !important;
  -webkit-text-fill-color: #22D3EE !important;
  border: 1px solid #22D3EE !important;
  box-shadow: 0 0 0 1px rgba(34,211,238,.20) inset !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §14. EXTENSION — Animation Page Mount (smooth fade-in)
═══════════════════════════════════════════════════════════════════════════ */

@keyframes evPolishFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
html body:has(#p-app.on) .scrl > .cd,
html body:has(#p-app.on) .scrl > .bi-card,
html body:has(#p-app.on) .scrl > .tbd-card,
html body:has(#p-app.on) .scrl > .acard {
  animation: evPolishFadeIn .28s ease-out both;
}
/* Respecter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html body:has(#p-app.on) * {
    animation-duration: .01s !important;
    transition-duration: .01s !important;
  }
}


/* Fin du fichier — ev-global-polish-v305.css */