/* ═══════════════════════════════════════════════════════════════════════════
   FISCUS TN — Design System Premium 2026
   Style : Fintech / SaaS international / Ultra-moderne
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Variables ─────────────────────────────────────────────────────────── */
:root {
  /* Couleurs principales */
  --primary:       #4f6ef7;
  --primary-dark:  #3d5ce8;
  --primary-light: #6b85fa;
  --accent:        #00d4aa;
  --accent-dark:   #00b890;
  --accent-light:  #33ddb9;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --info:          #3b82f6;
  --purple:        #8b5cf6;
  --purple-dark:   #7c3aed;
  --gold:          #f59e0b;

  /* Sidebar */
  --sidebar-bg:    #0f1628;
  --sidebar-w:     268px;
  --topbar-h:      66px;

  /* Gris */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ── Surfaces & teintes sémantiques (light) — voir bloc [data-theme="dark"]
     plus bas pour la version sombre équivalente. Valeurs identiques à ce que
     les pages fixaient en dur (#fff, #eef2ff, ...), donc le mode clair est
     visuellement inchangé. ── */
  --surface:        #ffffff;
  --surface-2:      #f8fafc;
  --surface-3:      #f1f5f9;
  --surface-border: #e5e7eb;

  --tint-primary: #eef2ff;
  --tint-success: #dcfce7;
  --tint-warning: #fef3c7;
  --tint-danger:  #fee2e2;
  --tint-info:    #dbeafe;

  --on-tint-primary: #312e81;
  --on-tint-success: #166534;
  --on-tint-warning: #92400e;
  --on-tint-danger:  #991b1b;
  --on-tint-info:    #1e40af;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl:32px;

  /* Ombres */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
  --shadow:    0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.20);

  /* Transitions */
  --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0 }
html,body {
  height:100%;
  font-family:'Inter','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-size:14px;line-height:1.6;
  color:var(--gray-800);
  background:var(--gray-50);
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none;color:inherit }
input,select,textarea,button { font-family:inherit }
button { cursor:pointer;border:none;background:none }
img { max-width:100%;display:block }

/* ─── App Layout ─────────────────────────────────────────────────────────── */
.app-layout { display:flex;min-height:100vh }
.main-content { flex:1;display:flex;flex-direction:column;min-width:0;margin-left:var(--sidebar-w) }
.page-content { flex:1;padding:28px 32px;overflow-y:auto }

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;
  z-index:100;
  overflow-y:auto;
  border-right:1px solid rgba(255,255,255,0.04);
}
.sidebar::before {
  content:'';position:absolute;top:0;left:0;right:0;
  height:300px;
  background:radial-gradient(ellipse at top left, rgba(79,110,247,0.18) 0%, transparent 70%);
  pointer-events:none;
}
.sidebar-logo {
  display:flex;align-items:center;gap:12px;
  padding:22px 20px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  position:relative;
}
.sidebar-logo-icon {
  width:38px;height:38px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--primary),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
  box-shadow:0 4px 12px rgba(79,110,247,0.35);
}
.sidebar-logo-title { font-size:0.92rem;font-weight:800;color:#fff;letter-spacing:0.3px }
.sidebar-logo-sub { font-size:0.6rem;color:rgba(255,255,255,0.35);letter-spacing:1.5px;text-transform:uppercase;margin-top:1px }
.sidebar-nav { flex:1;padding:14px 12px }
.sidebar-section-label {
  font-size:0.6rem;text-transform:uppercase;letter-spacing:2px;
  color:rgba(255,255,255,0.25);
  padding:18px 10px 7px;
}
.sidebar-link {
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--radius-sm);
  color:rgba(255,255,255,0.55);font-size:0.815rem;font-weight:500;
  width:100%;margin-bottom:2px;
  transition:var(--transition);
  position:relative;
}
.sidebar-link:hover {
  background:rgba(255,255,255,0.07);
  color:rgba(255,255,255,0.9);
}
.sidebar-link.active {
  background:linear-gradient(135deg, rgba(79,110,247,0.25), rgba(139,92,246,0.15));
  color:#fff;
  border:1px solid rgba(79,110,247,0.3);
}
.sidebar-link.active::before {
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;border-radius:2px;
  background:linear-gradient(to bottom,var(--primary),var(--purple));
}
.sidebar-link-icon {
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  font-size:0.9rem;
  flex-shrink:0;
  background:rgba(255,255,255,0.04);
}
.sidebar-link.active .sidebar-link-icon {
  background:rgba(79,110,247,0.25);
  color:var(--primary-light);
}
.sidebar-link-badge {
  margin-left:auto;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-size:0.58rem;font-weight:700;
  padding:2px 7px;border-radius:100px;letter-spacing:0.5px;
}
.sidebar-user {
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;
  border-top:1px solid rgba(255,255,255,0.05);
  cursor:pointer;
  transition:var(--transition);
}
.sidebar-user:hover { background:rgba(255,255,255,0.04) }
.sidebar-avatar {
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:700;color:#fff;flex-shrink:0;
  box-shadow:0 2px 8px rgba(79,110,247,0.3);
}
.sidebar-user-name { font-size:0.82rem;font-weight:600;color:#fff }
.sidebar-user-type { font-size:0.68rem;color:rgba(255,255,255,0.35) }

/* ─── Sidebar : éléments mobile (close / overlay / FAB) ──────────────────── */
.sidebar-close-mobile {
  display:none;
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;
  border-radius:8px;border:none;cursor:pointer;
  background:rgba(255,255,255,0.08);color:#fff;
  font-size:1rem;align-items:center;justify-content:center;
  z-index:5;
}
.sidebar-logo { cursor:default;user-select:none }
.sidebar-logo:hover { background:rgba(255,255,255,0.02) }
.sidebar-overlay {
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);
  z-index:99;backdrop-filter:blur(2px);
}
.sidebar-overlay.show { display:block }

/* FAB rétractable sur mobile — remplace les "3 mini barres" du topbar */
.sidebar-fab {
  display:none;
  position:fixed;left:14px;bottom:18px;
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#4f6ef7,#8b5cf6);
  color:#fff;border:none;cursor:pointer;
  box-shadow:0 10px 28px rgba(79,110,247,0.45);
  z-index:120;
  align-items:center;justify-content:center;
  font-size:1.1rem;
  transition:transform .3s cubic-bezier(0.4,0,0.2,1), box-shadow .25s ease, left .3s ease;
}
.sidebar-fab:hover { transform:scale(1.06) }
.sidebar-fab:active { transform:scale(0.95) }
.sidebar-fab i { transition:transform .3s ease }
/* Quand la sidebar est ouverte, le FAB suit son bord droit et l'icône pivote */
body:has(.sidebar.open) .sidebar-fab { left:240px }
body:has(.sidebar.open) .sidebar-fab i { transform:rotate(180deg) }

/* ─── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
  height:var(--topbar-h);
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;
  position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(0,0,0,0.05);
}
.topbar-left { display:flex;align-items:center;gap:16px }
.topbar-title { font-size:0.95rem;font-weight:700;color:var(--gray-900) }
.topbar-breadcrumb { font-size:0.7rem;color:var(--gray-400) }
.topbar-right { display:flex;align-items:center;gap:10px }
.topbar-btn {
  width:36px;height:36px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--gray-500);position:relative;
  transition:var(--transition);
  border:1px solid transparent;
}
.topbar-btn:hover {
  background:var(--gray-100);
  color:var(--gray-800);
  border-color:var(--gray-200);
}
.topbar-notif-dot {
  position:absolute;top:5px;right:5px;
  width:8px;height:8px;border-radius:50%;
  background:var(--danger);border:2px solid #fff;
}
.topbar-avatar {
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:0.72rem;font-weight:700;color:#fff;
  cursor:pointer;box-shadow:0 2px 8px rgba(79,110,247,0.3);
  border:none;
}
.topbar-dropdown-wrap { position:relative;display:flex;align-items:center }
.topbar-dropdown-panel {
  position:absolute;
  top:44px;
  right:0;
  min-width:280px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:12px;
  box-shadow:var(--shadow-lg);
  padding:10px;
  display:none;
  z-index:200;
}
.topbar-dropdown-wrap:hover .topbar-dropdown-panel,
.topbar-dropdown-wrap:focus-within .topbar-dropdown-panel {
  display:block;
}
.topbar-dropdown-title {
  font-size:0.72rem;
  font-weight:700;
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:0.6px;
  margin:6px 6px 8px;
}
.topbar-dropdown-item {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  border:none;
  background:transparent;
  color:var(--gray-700);
  font-size:0.8rem;
  padding:8px 10px;
  border-radius:8px;
  text-align:left;
  cursor:pointer;
}
.topbar-dropdown-item:hover { background:var(--gray-100); }
.topbar-dropdown-item.locked {
  color:var(--gray-400);
  cursor:not-allowed;
}
.topbar-dropdown-item.locked:hover {
  background:rgba(239,68,68,0.08);
  color:var(--danger);
}
.topbar-dropdown-divider {
  height:1px;
  background:var(--gray-200);
  margin:8px 4px;
}
.topbar-search {
  display:flex;align-items:center;gap:8px;
  background:var(--gray-100);padding:8px 14px;
  border-radius:var(--radius);color:var(--gray-400);
  font-size:0.78rem;cursor:pointer;
  border:1px solid var(--gray-200);
  transition:var(--transition);
}
.topbar-search:hover { border-color:var(--primary) }
.topbar-badge { font-size:0.62rem;font-weight:700;padding:3px 9px;border-radius:100px;letter-spacing:0.5px }
.topbar-badge.lf2026 {
  background:linear-gradient(135deg,var(--accent),var(--primary));
  color:#fff;box-shadow:0 2px 8px rgba(79,110,247,0.25);
}

/* ─── PWA Install Button (topbar) ────────────────────────────────────────── */
#pwa-topbar-install-btn {
  display:none;
  align-items:center;gap:7px;
  padding:8px 14px;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;border-radius:var(--radius);
  font-size:0.75rem;font-weight:700;
  cursor:pointer;border:none;
  box-shadow:0 3px 10px rgba(79,110,247,0.3);
  transition:var(--transition);
  white-space:nowrap;
}
#pwa-topbar-install-btn:hover { transform:translateY(-1px);box-shadow:0 5px 16px rgba(79,110,247,0.4) }
#pwa-topbar-install-btn.installed {
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  box-shadow:0 3px 10px rgba(0,212,170,0.3);
  cursor:default;
  pointer-events:none;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background:#fff;
  border-radius:var(--radius-lg);
  border:1px solid var(--gray-200);
  box-shadow:var(--shadow-sm);
  overflow:hidden;margin-bottom:24px;
  transition:var(--transition);
}
.card:hover { box-shadow:var(--shadow) }
.card-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 22px;
  border-bottom:1px solid var(--gray-100);
  /* Le second arrêt était figé à #fff : l'en-tête restait donc un bandeau
     blanc/argenté au-dessus d'une carte sombre. `--surface` bascule avec le
     thème (#ffffff en clair, #111827 en sombre), le rendu clair est identique. */
  background:linear-gradient(180deg,var(--gray-50),var(--surface));
}
.card-title { font-size:0.88rem;font-weight:700;color:var(--gray-800);display:flex;align-items:center;gap:8px }
.card-title i { color:var(--primary) }
.card-body { padding:22px }

/* ─── KPI Grid ───────────────────────────────────────────────────────────── */
.kpi-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px }
.kpi-card {
  background:#fff;
  border-radius:var(--radius-lg);
  border:1px solid var(--gray-200);
  padding:20px;
  display:flex;gap:14px;align-items:flex-start;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  position:relative;overflow:hidden;
}
.kpi-card::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--purple));
  opacity:0;transition:var(--transition);
}
.kpi-card:hover { transform:translateY(-3px);box-shadow:var(--shadow-lg) }
.kpi-card:hover::after { opacity:1 }
.kpi-icon {
  width:48px;height:48px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#fff;flex-shrink:0;
}
.kpi-label { font-size:0.72rem;color:var(--gray-500);font-weight:500;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.3px }
.kpi-value { font-size:1.45rem;font-weight:800;color:var(--gray-900);letter-spacing:-0.5px }
.kpi-sub { font-size:0.68rem;color:var(--gray-400);margin-top:3px }

/* ─── Charts Grid ────────────────────────────────────────────────────────── */
.charts-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px }
.two-col-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:var(--radius);
  font-size:0.82rem;font-weight:600;
  transition:var(--transition);cursor:pointer;border:none;
  white-space:nowrap;letter-spacing:0.1px;
}
.btn-sm { padding:7px 13px;font-size:0.75rem;border-radius:var(--radius-sm) }
.btn-lg { padding:14px 26px;font-size:0.9rem;letter-spacing:0.2px }
.btn-full { width:100% }

.btn-primary {
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;
  box-shadow:0 4px 14px rgba(79,110,247,0.35);
}
.btn-primary:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(79,110,247,0.45) }
.btn-primary:active { transform:translateY(0) }

.btn-accent {
  background:linear-gradient(135deg,var(--accent),#00b8d4);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,212,170,0.3);
}
.btn-accent:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,212,170,0.4) }

.btn-ghost {
  background:var(--gray-100);color:var(--gray-700);
  border:1px solid var(--gray-200);
}
.btn-ghost:hover { background:var(--gray-200);border-color:var(--gray-300) }

.btn-outline-primary {
  background:rgba(79,110,247,0.06);
  color:var(--primary);
  border:1.5px solid rgba(79,110,247,0.25);
}
.btn-outline-primary:hover { background:rgba(79,110,247,0.12);border-color:var(--primary) }

.btn-danger { background:linear-gradient(135deg,var(--danger),#dc2626);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,0.3) }
.btn:disabled { opacity:0.55;cursor:not-allowed;transform:none !important;box-shadow:none !important }

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom:16px }
.form-label { display:block;font-size:0.77rem;font-weight:600;color:var(--gray-700);margin-bottom:6px }
.form-control {
  width:100%;padding:10px 14px;
  border:1.5px solid var(--gray-300);border-radius:var(--radius-sm);
  font-size:0.92rem;color:#1e293b;background:#fff;font-weight:500;
  transition:var(--transition);outline:none;
}
.form-control::placeholder {
  color:#64748b;          /* gris foncé lisible (light mode) */
  opacity:1;              /* iOS/Firefox : forcer l'opacité pleine */
  font-weight:400;
}
.form-control:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(79,110,247,0.12);
  color:#0f172a;
}
.form-control:focus::placeholder { color:#94a3b8 }
/* Dark mode : placeholder/ texte clairs sans transparence */
[data-theme="dark"] .form-control {
  color:#f1f5f9;
  background:#0f172a;
  border-color:#334155;
}
[data-theme="dark"] .form-control::placeholder { color:#94a3b8 }
[data-theme="dark"] .form-control:focus { border-color:var(--primary); color:#fff }
.form-control.form-lg { font-size:1rem;padding:12px 16px;font-weight:600 }
.form-hint { font-size:0.71rem;color:var(--gray-400);margin-top:4px }
.input-group { position:relative }
.input-group .input-icon { position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gray-400);pointer-events:none }
.input-group .form-control { padding-left:38px }
.input-addon-right { position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--gray-400) }
.form-section-title {
  font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--gray-500);border-top:1px solid var(--gray-100);
  padding-top:16px;margin:16px 0 12px;
}

/* Range */
.form-range { width:100%;accent-color:var(--primary);height:4px }
.range-val { font-size:0.8rem;color:var(--primary);font-weight:700;text-align:right;margin-top:5px }

/* Checkboxes */
.form-check { display:flex;align-items:center;gap:8px;font-size:0.82rem;color:var(--gray-700);cursor:pointer }
.form-check input[type="checkbox"] { accent-color:var(--primary);width:15px;height:15px }
.form-check-group { margin-bottom:12px }

/* Radio */
.radio-group { display:flex;gap:8px;flex-wrap:wrap }
.radio-option {
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border:1.5px solid var(--gray-200);
  border-radius:100px;font-size:0.8rem;font-weight:500;
  cursor:pointer;transition:var(--transition);
}
.radio-option:has(input:checked) { border-color:var(--primary);background:rgba(79,110,247,0.08);color:var(--primary) }
.radio-option input { accent-color:var(--primary) }

/* Number stepper */
.number-stepper { display:flex;align-items:center;width:120px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);overflow:hidden }
.number-stepper button { padding:8px 14px;font-size:1rem;font-weight:700;color:var(--gray-600);background:var(--gray-50);transition:var(--transition) }
.number-stepper button:hover { background:var(--gray-200) }
.number-stepper input { flex:1;border:none;text-align:center;font-size:0.9rem;font-weight:600;color:var(--gray-800);background:#fff;outline:none;padding:6px 0 }

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:100px;
  font-size:0.66rem;font-weight:700;letter-spacing:0.3px;white-space:nowrap;
}
.badge-primary  { background:rgba(79,110,247,0.1);color:var(--primary) }
.badge-accent   { background:rgba(0,212,170,0.1);color:#009c7d }
.badge-warning  { background:rgba(245,158,11,0.1);color:#b45309 }
.badge-danger   { background:rgba(239,68,68,0.1);color:var(--danger) }
.badge-success  { background:rgba(0,212,170,0.1);color:#009c7d }
.badge-gray     { background:var(--gray-100);color:var(--gray-500) }
.badge-info     { background:rgba(59,130,246,0.1);color:var(--info) }

/* ─── Info banners ───────────────────────────────────────────────────────── */
.info-banner { display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-radius:var(--radius);margin-bottom:20px;font-size:0.82rem }
.info-banner.primary { background:rgba(79,110,247,0.06);border:1px solid rgba(79,110,247,0.18);color:var(--gray-700) }
.info-banner.warning { background:rgba(245,158,11,0.07);border:1px solid rgba(245,158,11,0.22);color:var(--gray-700) }
.info-banner.danger  { background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.18);color:var(--gray-700) }
.info-banner.accent  { background:rgba(0,212,170,0.06);border:1px solid rgba(0,212,170,0.22);color:var(--gray-700) }
.info-banner i { font-size:1rem;margin-top:2px;flex-shrink:0 }
.info-banner.primary i { color:var(--primary) }
.info-banner.warning i { color:var(--warning) }
.info-banner.danger  i { color:var(--danger) }
.info-banner.accent  i { color:var(--accent-dark) }

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.toast-container { position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px }
.toast {
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:var(--radius);
  background:#fff;box-shadow:var(--shadow-xl);
  font-size:0.82rem;font-weight:500;
  animation:slideIn .3s cubic-bezier(0.4,0,0.2,1);
  max-width:320px;
  border-left:3px solid var(--primary);
  backdrop-filter:blur(10px);
}
.toast.success { border-color:var(--accent) }
.toast.error   { border-color:var(--danger) }
.toast.warning { border-color:var(--warning) }
@keyframes slideIn { from{transform:translateX(24px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ─── Login Page ─────────────────────────────────────────────────────────── */
.login-page { min-height:100vh;display:flex }
.login-left {
  flex:1;
  background:linear-gradient(150deg, #090d1e 0%, #111834 40%, #1a1040 100%);
  padding:60px 56px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
/* Orbes décoratifs */
.login-left::before {
  content:'';position:absolute;top:-120px;right:-60px;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(79,110,247,0.18) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;
}
.login-left::after {
  content:'';position:absolute;bottom:-100px;left:-80px;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(0,212,170,0.12) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;
}
.login-left-inner { position:relative;z-index:1 }
.login-right {
  width:490px;flex-shrink:0;
  background:#fff;
  padding:52px 48px;
  display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;
}
.login-brand { display:flex;align-items:center;gap:14px;margin-bottom:52px }
.login-brand-icon {
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  box-shadow:0 6px 18px rgba(79,110,247,0.4);
}
.login-brand-title { font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:0.5px }
.login-brand-sub { font-size:0.6rem;color:rgba(255,255,255,0.35);letter-spacing:2px;text-transform:uppercase }
.login-hero-title {
  font-size:3.2rem;font-weight:900;line-height:1.15;
  color:#fff;margin-bottom:22px;
  letter-spacing:-1px;
}
.login-hero-title span {
  background:linear-gradient(135deg,var(--accent),#00b8d4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.login-hero-desc { font-size:0.9rem;color:rgba(255,255,255,0.55);line-height:1.85;margin-bottom:40px;max-width:420px }
.login-features { display:flex;flex-direction:column;gap:13px }
.login-feature { display:flex;align-items:center;gap:13px }
.login-feature-icon {
  width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:0.85rem;flex-shrink:0;
}
.login-feature-text { font-size:0.82rem;color:rgba(255,255,255,0.6) }
.login-stats {
  margin-top:48px;display:flex;gap:0;
  padding-top:32px;border-top:1px solid rgba(255,255,255,0.07);
}
.login-stat { flex:1;padding:0 20px;border-right:1px solid rgba(255,255,255,0.07) }
.login-stat:first-child { padding-left:0 }
.login-stat:last-child { border-right:none }
.login-stat-val { font-size:1.65rem;font-weight:900;color:#fff;letter-spacing:-0.5px }
.login-stat-label { font-size:0.7rem;color:rgba(255,255,255,0.4);margin-top:1px }

/* Formulaire de connexion */
.login-form-header { text-align:center;margin-bottom:28px }
.login-flag { font-size:2rem;margin-bottom:10px;display:block }
.login-form-title { font-size:1.65rem;font-weight:800;color:var(--gray-900);margin-bottom:4px;letter-spacing:-0.3px }
.login-form-sub { font-size:0.84rem;color:var(--gray-400) }
/* ═══════════════════════════════════════════════════════════
   PROFILE SELECTOR — Fintech Premium (Stripe / Revolut / Brex / Mercury)
═══════════════════════════════════════════════════════════ */
.profile-selector {
  display:grid;
  grid-template-columns:repeat(4,1fr); /* alignement horizontal — 1 ligne */
  gap:8px;
  margin-bottom:22px;
}
@media (max-width: 480px) {
  .profile-selector { grid-template-columns:repeat(2,1fr); gap:8px; }
}
.profile-option {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 6px 10px;
  border:1px solid var(--gray-200);
  border-radius:10px;
  background:#ffffff;
  cursor:pointer;
  font-size:0.72rem;
  font-weight:500;
  color:var(--gray-700);
  letter-spacing:-0.1px;
  min-width:0;
  overflow:hidden;
  transition:transform 0.25s cubic-bezier(0.4,0,0.2,1),
             border-color 0.2s ease,
             box-shadow 0.25s ease,
             background-color 0.2s ease,
             color 0.2s ease;
  user-select:none;
}
.profile-option:hover {
  border-color:var(--gray-300);
  background:#fafbff;
  color:var(--gray-900);
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 4px 14px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
}
.profile-option:active {
  transform:translateY(0) scale(0.99);
  transition-duration:0.1s;
}
.profile-option.selected {
  border-color:var(--primary);
  background:#ffffff;
  color:var(--primary);
  box-shadow:
    0 0 0 1px var(--primary),
    0 6px 18px rgba(79,110,247,0.12),
    0 1px 3px rgba(79,110,247,0.08);
}
.profile-option.selected .profile-option-icon {
  color:var(--primary);
}

/* Icône : conteneur fixe, contenu centré, débordement contenu */
.profile-option-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin:0;
  border-radius:12px;
  background:#f1f5f9;
  color:var(--primary);
  font-size:1.05rem;
  line-height:1;
  flex-shrink:0;
  overflow:hidden;
  transition:color 0.2s ease, transform 0.25s cubic-bezier(0.4,0,0.2,1), background 0.2s ease;
}
.profile-option-icon i {
  font-size:1.05rem;
  line-height:1;
  display:inline-block;
}
.profile-option-icon svg {
  width:60%;
  height:60%;
  display:block;
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  overflow:visible;
}
.profile-option.selected .profile-option-icon {
  background:linear-gradient(135deg,#635bff,#4f46e5);
  color:#fff !important;
}
.profile-option:hover .profile-option-icon {
  color:var(--primary);
  transform:scale(1.06);
}

.profile-option-label {
  display:block;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:-0.2px;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.login-divider {
  text-align:center;position:relative;margin:20px 0;
  color:var(--gray-400);font-size:0.77rem;
}
.login-divider::before,.login-divider::after {
  content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--gray-200)
}
.login-divider::before { left:0 } .login-divider::after { right:0 }
.login-divider span { background:#fff;padding:0 12px }
.login-security-badge {
  margin-top:22px;padding:12px 14px;
  background:var(--gray-50);border-radius:var(--radius);
  border:1px solid var(--gray-100);
  display:flex;align-items:center;gap:10px;
}
.login-security-badge i { color:var(--accent-dark);font-size:1.1rem }

/* ─── PWA Install Banner ─────────────────────────────────────────────────── */
.pwa-install-banner {
  position:fixed;bottom:0;left:0;right:0;z-index:8888;
  background:linear-gradient(135deg,#0f1628,#1a1f3c);
  border-top:1px solid rgba(79,110,247,0.3);
  padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  transform:translateY(100%);
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 -8px 32px rgba(0,0,0,0.3);
}
.pwa-install-banner.show { transform:translateY(0) }
.pwa-banner-left { display:flex;align-items:center;gap:14px }
.pwa-banner-icon {
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0;
  box-shadow:0 4px 14px rgba(79,110,247,0.4);
}
.pwa-banner-title { font-size:0.92rem;font-weight:700;color:#fff }
.pwa-banner-sub { font-size:0.74rem;color:rgba(255,255,255,0.45);margin-top:2px }
.pwa-banner-actions { display:flex;align-items:center;gap:10px }
.pwa-install-btn {
  padding:10px 20px;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;border-radius:var(--radius);
  font-size:0.82rem;font-weight:700;cursor:pointer;border:none;
  box-shadow:0 4px 14px rgba(79,110,247,0.35);
  transition:var(--transition);
  display:flex;align-items:center;gap:7px;
}
.pwa-install-btn:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(79,110,247,0.45) }
.pwa-dismiss-btn {
  padding:9px 16px;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.6);
  border-radius:var(--radius);
  font-size:0.78rem;font-weight:500;cursor:pointer;border:none;
  transition:var(--transition);
}
.pwa-dismiss-btn:hover { background:rgba(255,255,255,0.14);color:rgba(255,255,255,0.9) }
.pwa-features { display:flex;gap:16px;flex-shrink:0 }
.pwa-feature { display:flex;align-items:center;gap:6px;font-size:0.72rem;color:rgba(255,255,255,0.45) }
.pwa-feature i { color:var(--accent);font-size:0.75rem }

/* Sidebar install block */
#pwa-sidebar-install {
  margin:0 12px 12px;padding:13px 14px;
  background:linear-gradient(135deg,rgba(79,110,247,0.1),rgba(139,92,246,0.06));
  border:1px solid rgba(79,110,247,0.2);
  border-radius:var(--radius);cursor:pointer;
  transition:var(--transition);display:none;
}
#pwa-sidebar-install:hover { background:linear-gradient(135deg,rgba(79,110,247,0.18),rgba(139,92,246,0.12)) }

/* ─── Simulateur ─────────────────────────────────────────────────────────── */
.sim-header { text-align:center;margin-bottom:24px }
.sim-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px }
.bareme-table { border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden }
.bareme-row { display:grid;grid-template-columns:2fr 1fr 1.5fr;padding:10px 16px;font-size:0.82rem;border-bottom:1px solid var(--gray-100);align-items:center }
.bareme-row:last-child { border-bottom:none }
.bareme-row.header { background:var(--gray-50);font-weight:700;color:var(--gray-600);font-size:0.73rem;text-transform:uppercase;letter-spacing:0.5px }
.bareme-row.t26 { background:rgba(59,130,246,0.03) }
.bareme-row.t28 { background:rgba(79,110,247,0.03) }
.bareme-row.t32 { background:rgba(139,92,246,0.03) }
.bareme-row.t35 { background:rgba(239,68,68,0.03) }
.taux-badge { padding:3px 10px;border-radius:100px;font-size:0.7rem;font-weight:700 }
.taux-badge.t0  { background:rgba(0,212,170,0.12);color:#009c7d }
.taux-badge.t26 { background:rgba(59,130,246,0.12);color:var(--info) }
.taux-badge.t28 { background:rgba(79,110,247,0.12);color:var(--primary) }
.taux-badge.t32 { background:rgba(139,92,246,0.12);color:var(--purple) }
.taux-badge.t35 { background:rgba(239,68,68,0.12);color:var(--danger) }
.placeholder-zone { text-align:center;padding:48px 20px;color:var(--gray-400) }
.result-kpis { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px }
.result-kpi { padding:14px;border-radius:var(--radius-sm);background:var(--gray-50);border:1px solid var(--gray-100) }
.result-kpi.highlight { border-color:rgba(79,110,247,0.18);background:rgba(79,110,247,0.04) }
.result-kpi-label { font-size:0.7rem;color:var(--gray-500);margin-bottom:4px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px }
.result-kpi-val { font-size:1.3rem;font-weight:800;letter-spacing:-0.5px }
.result-kpi-val.danger  { color:var(--danger) }
.result-kpi-val.warning { color:var(--warning) }
.result-kpi-val.success { color:var(--accent-dark) }
.result-kpi-val.neutral { color:var(--gray-900) }
.detail-section { margin:16px 0;padding:14px;background:var(--gray-50);border-radius:var(--radius-sm);border:1px solid var(--gray-100) }
.detail-title { font-size:0.77rem;font-weight:700;color:var(--gray-600);margin-bottom:10px;display:flex;align-items:center;gap:6px }
.detail-row { display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--gray-100);font-size:0.8rem }
.detail-row:last-child { border-bottom:none }
.detail-amount { font-weight:700;color:var(--gray-700) }
.detail-taux { padding:1px 7px;border-radius:100px;background:rgba(79,110,247,0.1);color:var(--primary);font-size:0.7rem;font-weight:700 }
.detail-total { text-align:right;font-size:0.77rem;color:var(--gray-600);padding-top:8px;margin-top:4px;border-top:1px solid var(--gray-200) }
.scenario-row { display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--gray-100);font-size:0.82rem }
.scenario-label { color:var(--gray-600) }
.scenario-val { font-weight:600;color:var(--gray-800) }

/* ─── Dashboard Quick Actions ────────────────────────────────────────────── */
.quick-actions { display:grid;grid-template-columns:repeat(3,1fr);gap:10px }
.quick-action-btn {
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:18px 10px;border-radius:var(--radius);
  background:var(--gray-50);border:1.5px solid var(--gray-200);
  color:var(--gray-600);font-size:0.75rem;font-weight:600;
  transition:var(--transition);cursor:pointer;
}
.quick-action-btn i { font-size:1.3rem }
.quick-action-btn:hover { transform:translateY(-3px);box-shadow:var(--shadow) }
.quick-action-btn.primary { background:rgba(79,110,247,0.05);border-color:rgba(79,110,247,0.18);color:var(--primary) }
.quick-action-btn.primary:hover { background:rgba(79,110,247,0.1) }
.quick-action-btn.accent  { background:rgba(0,212,170,0.05);border-color:rgba(0,212,170,0.2);color:var(--accent-dark) }
.quick-action-btn.accent:hover { background:rgba(0,212,170,0.1) }
.quick-action-btn.gold    { background:rgba(245,158,11,0.05);border-color:rgba(245,158,11,0.2);color:#b45309 }
.quick-action-btn.gold:hover { background:rgba(245,158,11,0.1) }

/* ─── Quick sim result ───────────────────────────────────────────────────── */
.quick-sim { display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end }
.result-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px }
.result-item { padding:12px;border-radius:var(--radius-sm);background:var(--gray-50);border:1px solid var(--gray-100);text-align:center }
.result-item.primary { background:rgba(79,110,247,0.05);border-color:rgba(79,110,247,0.15) }
.result-item.accent { background:rgba(0,212,170,0.05);border-color:rgba(0,212,170,0.15) }
.result-label { font-size:0.7rem;color:var(--gray-500);margin-bottom:4px }
.result-val { font-size:0.95rem;font-weight:700;color:var(--gray-800) }
.quick-result { margin-top:16px }

/* ─── Timeline ───────────────────────────────────────────────────────────── */
.timeline { display:flex;flex-direction:column }
.timeline-item { display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-100) }
.timeline-item:last-child { border-bottom:none }
.timeline-dot { width:10px;height:10px;border-radius:50%;background:var(--gray-300);flex-shrink:0 }
.timeline-dot.warning { background:var(--warning) }
.timeline-dot.ok { background:var(--accent) }
.timeline-content { flex:1 }
.timeline-date { font-size:0.7rem;color:var(--gray-400);font-weight:600 }
.timeline-title { font-size:0.82rem;font-weight:700;color:var(--gray-800) }
.timeline-sub { font-size:0.7rem;color:var(--gray-500) }
.timeline-days { font-size:0.7rem;font-weight:700;padding:3px 8px;border-radius:100px;flex-shrink:0 }
.danger-badge  { background:rgba(239,68,68,0.1);color:var(--danger) }
.warning-badge { background:rgba(245,158,11,0.1);color:var(--warning) }
.ok-badge      { background:rgba(0,212,170,0.1);color:var(--accent-dark) }

/* ─── Profile Info ───────────────────────────────────────────────────────── */
.profile-info-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.profile-field { padding:10px 14px;background:var(--gray-50);border-radius:var(--radius-sm);border:1px solid var(--gray-100) }
.field-label { font-size:0.68rem;color:var(--gray-400);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px }
.field-val { font-size:0.85rem;font-weight:600;color:var(--gray-800) }
.big-number { font-size:2.4rem;font-weight:900;margin-bottom:4px;letter-spacing:-1px }
.big-number.primary { background:linear-gradient(135deg,var(--primary),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text }
.stat-row { display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--gray-100);font-size:0.82rem;color:var(--gray-600) }
.stat-row:last-child { border-bottom:none }
.stat-row.accent strong { color:var(--primary) }
.stat-row strong { color:var(--gray-800) }

/* ─── Revenue list ───────────────────────────────────────────────────────── */
.revenue-list { display:flex;flex-direction:column }
.revenue-item { display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--gray-100) }
.revenue-item:last-child { border-bottom:none }
.revenue-icon { width:42px;height:42px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1rem }
.revenue-icon.salary { background:rgba(79,110,247,0.1);color:var(--primary) }
.revenue-icon.rental { background:rgba(0,212,170,0.1);color:var(--accent-dark) }
.revenue-type { font-size:0.85rem;font-weight:700;color:var(--gray-800) }
.revenue-employer { font-size:0.73rem;color:var(--gray-400) }
.revenue-info { flex:1 }
.revenue-amount { font-size:0.9rem;font-weight:700;color:var(--gray-800);margin-right:12px }

/* ─── Deductions grid ────────────────────────────────────────────────────── */
.deductions-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px }
.deduction-item { padding:14px;border-radius:var(--radius);border:1.5px solid var(--gray-200);display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-size:0.78rem;transition:var(--transition) }
.deduction-item i { font-size:1rem;color:var(--primary) }
.deduction-item:hover { border-color:var(--primary);box-shadow:var(--shadow-sm) }
.deduction-item.inactive { opacity:0.55 }
.deduction-item.inactive i { color:var(--gray-300) }
.deduction-amount { font-weight:700;color:var(--gray-800) }

/* ─── Regime selector ────────────────────────────────────────────────────── */
.regime-selector { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px }
.regime-option { padding:22px;border:2px solid var(--gray-200);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition);text-align:center }
.regime-option:hover { border-color:var(--primary);transform:translateY(-2px) }
.regime-option.active { border-color:var(--primary);background:rgba(79,110,247,0.05);box-shadow:0 0 0 4px rgba(79,110,247,0.08) }
.regime-icon { font-size:1.8rem;color:var(--gray-400);margin-bottom:8px }
.regime-option.active .regime-icon { color:var(--primary) }
.regime-name { font-size:0.9rem;font-weight:700;color:var(--gray-800) }
.regime-sub { font-size:0.75rem;color:var(--gray-400);margin-top:2px }

/* ─── Result box ─────────────────────────────────────────────────────────── */
.result-box { padding:16px;background:var(--gray-50);border-radius:var(--radius);border:1px solid var(--gray-200) }

/* ─── Calendar ───────────────────────────────────────────────────────────── */
.cal-list { display:flex;flex-direction:column }
.cal-item { display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--gray-100);transition:var(--transition) }
.cal-item:last-child { border-bottom:none }
.cal-item:hover { padding-left:4px }
.cal-date { padding:8px 14px;border-radius:var(--radius-sm);font-size:0.77rem;font-weight:700;color:#fff;white-space:nowrap;display:flex;align-items:center;gap:6px }
.cal-info { flex:1 }
.cal-label { font-size:0.85rem;font-weight:600;color:var(--gray-800) }
.cal-type { font-size:0.68rem;color:var(--gray-400);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-top:2px }

/* ─── Pricing ────────────────────────────────────────────────────────────── */
.pricing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px }
.pricing-card {
  border-radius:var(--radius-xl);overflow:hidden;
  border:2px solid var(--gray-200);background:#fff;
  position:relative;transition:var(--transition);
}
.pricing-card:hover { transform:translateY(-5px);box-shadow:var(--shadow-xl) }
.pricing-card.featured { border-color:var(--primary);transform:scale(1.03) }
.pricing-card.featured:hover { transform:scale(1.03) translateY(-5px) }
.pricing-badge {
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;padding:4px 18px;border-radius:100px;
  font-size:0.7rem;font-weight:700;
  box-shadow:0 4px 12px rgba(79,110,247,0.3);
}
.pricing-header { padding:28px 24px;text-align:center }
.pricing-name { font-size:1rem;font-weight:700;margin-bottom:8px }
.pricing-price { font-size:2.4rem;font-weight:900;margin-bottom:2px;letter-spacing:-1px }
.pricing-period { font-size:0.8rem;opacity:0.7 }
.pricing-features { padding:24px;display:flex;flex-direction:column;gap:10px }
.pricing-feature { display:flex;align-items:center;gap:8px;font-size:0.82rem;color:var(--gray-700) }
.pricing-feature i { font-size:0.8rem;width:16px }
.pricing-cta { padding:0 24px 24px }

/* ─── Chat ───────────────────────────────────────────────────────────────── */
.chat-container { display:flex;flex-direction:column;height:calc(100vh - 70px) }
.chat-messages { flex:1;overflow-y:auto;padding:24px 32px;display:flex;flex-direction:column;gap:16px }
.chat-msg { display:flex;align-items:flex-end;gap:10px }
.chat-msg.user { flex-direction:row-reverse }
.chat-avatar { width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;flex-shrink:0 }
.bot-avatar { background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff }
.user-avatar { background:linear-gradient(135deg,var(--accent),#00b8d4);color:#fff;font-size:0.7rem }
.chat-bubble { max-width:70%;padding:14px 18px;border-radius:var(--radius-lg);font-size:0.83rem;line-height:1.75;box-shadow:var(--shadow-sm) }
.chat-msg.bot .chat-bubble  { background:#fff;border:1px solid var(--gray-200);border-bottom-left-radius:4px }
.chat-msg.user .chat-bubble { background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;border-bottom-right-radius:4px }
.typing { display:flex;align-items:center;gap:5px;padding:14px 20px;min-width:60px }
.typing span { width:7px;height:7px;border-radius:50%;background:var(--gray-300);animation:typing 1.2s infinite }
.typing span:nth-child(2) { animation-delay:.2s }
.typing span:nth-child(3) { animation-delay:.4s }
@keyframes typing { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.chat-quick-questions { display:flex;flex-wrap:wrap;gap:8px;padding:12px 32px }
.quick-q { padding:7px 14px;border-radius:100px;border:1.5px solid var(--gray-200);background:#fff;font-size:0.78rem;color:var(--gray-700);cursor:pointer;transition:var(--transition) }
.quick-q:hover { border-color:var(--primary);color:var(--primary);background:rgba(79,110,247,0.04) }
.chat-input-zone { padding:16px 32px 20px;border-top:1px solid var(--gray-200);background:#fff }
.chat-input-wrapper { display:flex;gap:10px;align-items:center }
.chat-input { flex:1;padding:12px 18px;border:1.5px solid var(--gray-200);border-radius:var(--radius-xl);font-size:0.85rem;outline:none;transition:var(--transition) }
.chat-input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,110,247,0.08) }
.chat-send-btn { width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition);box-shadow:0 4px 12px rgba(79,110,247,0.3) }
.chat-send-btn:hover { transform:scale(1.08);box-shadow:0 6px 18px rgba(79,110,247,0.4) }

/* ─── Loading spinner ────────────────────────────────────────────────────── */
.loading-spinner { width:20px;height:20px;border:2.5px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite }
@keyframes spin { to{transform:rotate(360deg)} }

/* ─── Network status badge ───────────────────────────────────────────────── */
.network-status-badge { font-size:0.65rem;font-weight:700;padding:3px 9px;border-radius:100px;transition:var(--transition) }

/* ─── Grid helpers ───────────────────────────────────────────────────────── */
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.hidden { display:none !important }

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px;height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--gray-300);border-radius:100px }
::-webkit-scrollbar-thumb:hover { background:var(--gray-400) }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1280px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr) }
  .charts-grid { grid-template-columns:1fr }
}
@media (max-width:1024px) {
  .sim-grid { grid-template-columns:1fr }
  .two-col-grid { grid-template-columns:1fr }
  .quick-sim { grid-template-columns:1fr 1fr }
  .result-grid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px) {
  :root { --sidebar-w:0px }
  /* Sidebar rétractable : cachée par défaut, glisse depuis la gauche quand .open */
  .sidebar {
    transform:translateX(-300px);transition:transform .3s cubic-bezier(0.4,0,0.2,1);
    width:280px;box-shadow:4px 0 24px rgba(0,0,0,0.35);
    will-change:transform;
  }
  .sidebar.open { transform:translateX(0) }
  .sidebar-close-mobile { display:flex }
  /* FAB toujours visible — sert à ouvrir/fermer la sidebar */
  .sidebar-fab { display:flex }
  .main-content { margin-left:0;width:100% }
  .page-content { padding:16px 12px }
  .topbar { padding:0 14px;gap:8px;height:58px }
  .topbar-title { font-size:0.95rem !important;line-height:1.1 }
  .topbar-breadcrumb { display:none }
  .topbar-badge { display:none }
  /* Avatar topbar reste visible et fonctionnel */
  .topbar-avatar { width:36px;height:36px }
  /* Le panneau dropdown s'adapte à la largeur */
  .topbar-dropdown-panel { right:-6px;min-width:240px;max-width:90vw }
  .login-page { flex-direction:column }
  .login-left { padding:32px 22px;min-height:auto }
  .login-right { width:100%;padding:32px 22px }
  .login-hero-title { font-size:2rem }
  .pricing-grid { grid-template-columns:1fr }
  .quick-actions { grid-template-columns:repeat(2,1fr);gap:10px }
  .deductions-grid { grid-template-columns:1fr }
  .kpi-grid { grid-template-columns:1fr }
  .quick-sim { grid-template-columns:1fr }
  .regime-selector { grid-template-columns:1fr }
  .result-kpis { grid-template-columns:1fr }
  .bareme-row { grid-template-columns:1fr 1fr }
  .bareme-row > div:last-child { display:none }
  .pwa-features { display:none }
  .pwa-install-banner { padding:12px 16px }
  #pwa-topbar-install-btn span { display:none }
  /* Cards & grids — adaptation mobile */
  .charts-grid { grid-template-columns:1fr !important }
  .two-col-grid { grid-template-columns:1fr !important }
  .dashboard-grid-2 { grid-template-columns:1fr !important }
  .kpi-row { grid-template-columns:1fr 1fr !important }
  .quick-grid { grid-template-columns:1fr 1fr !important }
  .cabinet-kpis { grid-template-columns:1fr 1fr !important }
  .cab-grid-2 { grid-template-columns:1fr !important }
  .welcome-banner { flex-direction:column;align-items:flex-start;gap:14px }
  .welcome-cta { width:100%;flex-wrap:wrap }
  .cabinet-hero { flex-direction:column;align-items:flex-start;gap:16px }
  .cabinet-hero-cta { width:100%;flex-wrap:wrap }
  .cabinet-tabs { overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch }
  .cab-tab { white-space:nowrap }
  .cab-table-wrap { overflow-x:auto }
  .modal-card { width:96vw !important;max-width:96vw !important }
  .grid-2 { grid-template-columns:1fr !important }
}
@media (max-width:480px) {
  .kpi-row { grid-template-columns:1fr !important }
  .cabinet-kpis { grid-template-columns:1fr !important }
  .quick-grid { grid-template-columns:1fr !important }
  .quick-actions { grid-template-columns:1fr !important }
  .login-hero-title { font-size:1.7rem }
  .topbar-title { font-size:0.88rem !important }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔧 CORRECTIFS GLOBAUX — Anti-débordement des icônes Font Awesome
   Toute icône doit rester contenue dans son conteneur, jamais déborder.
   ═══════════════════════════════════════════════════════════════════════════ */
.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.125em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
}
/* Conteneurs typiques d'icônes circulaires/carrés : empêcher tout overflow */
.sidebar-link-icon,
.sidebar-link-icon i,
.sidebar-avatar,
.sidebar-avatar i,
.topbar-icon,
.topbar-icon i,
.kpi-icon,
.kpi-icon i,
.card-icon,
.card-icon i,
.revenue-icon,
.revenue-icon i,
.deduction-item i,
.profile-option-icon,
.profile-option-icon i,
.dt-cat-icon,
.dt-cat-icon i,
.dt-doc-icon,
.dt-doc-icon i,
.dt-icon-btn,
.dt-icon-btn i,
.timeline-dot,
.timeline-dot i,
.result-item i,
.is-hcell-icon,
.is-hcell-icon i {
  flex-shrink: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}
.sidebar-link-icon i,
.kpi-icon i,
.card-icon i,
.revenue-icon i,
.profile-option-icon i,
.dt-cat-icon i,
.dt-doc-icon i,
.dt-icon-btn i,
.is-hcell-icon i {
  font-size: inherit;
  line-height: 1;
}
/* Garde-fou : empêcher les icônes de dépasser dans les boutons */
button .fas, button .far, button .fab,
.btn .fas, .btn .far, .btn .fab,
.btn-premium .fas, .btn-premium .far {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — surcharges critiques (style.css)
   v4 · Palette stable · Contraste AA/AAA garanti
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --gray-50:  #131c2e;
  --gray-100: #1f2937;
  --gray-200: #374151;
  --gray-300: #4b5563;
  --gray-400: #9ca3af;
  --gray-500: #cbd5e1;
  --gray-600: #d1d5db;
  --gray-700: #e5e7eb;
  --gray-800: #f1f5f9;
  --gray-900: #ffffff;

  /* ── Surfaces & teintes sémantiques (voir :root plus bas pour le clair) ──
     Les pages définissaient leurs cartes avec `background:#fff` en dur : la
     surcharge dark de ce fichier ne visant qu'une liste FERMÉE de classes
     (.card, .kpi-card…), toute classe propre à une page (.ai-card, .acc-card,
     .is-hcell…) restait blanche sur une interface sombre.
     Ces variables permettent d'écrire `background:var(--surface)` une bonne
     fois pour toutes, sans avoir à recenser chaque nom de classe. */
  --surface:        #111827;  /* carte / panneau            */
  --surface-2:      #131c2e;  /* zone en léger retrait      */
  --surface-3:      #1f2937;  /* survol, en-tête de tableau */
  --surface-border: #374151;

  /* Teintes sémantiques diluées : même sens visuel qu'en clair
     (bleu = info, vert = succès, ambre = alerte, rouge = erreur),
     mais posées sur fond sombre au lieu d'un aplat pastel éblouissant. */
  --tint-primary: rgba(99,102,241,0.16);
  --tint-success: rgba(34,197,94,0.16);
  --tint-warning: rgba(245,158,11,0.16);
  --tint-danger:  rgba(239,68,68,0.16);
  --tint-info:    rgba(59,130,246,0.16);

  /* Texte lisible SUR ces teintes diluées */
  --on-tint-primary: #c7d2fe;
  --on-tint-success: #86efac;
  --on-tint-warning: #fcd34d;
  --on-tint-danger:  #fca5a5;
  --on-tint-info:    #bfdbfe;
}

[data-theme="dark"] body,
[data-theme="dark"] html {
  background: #0b1220 !important;
  color: #f1f5f9 !important;
}

/* Cartes & panels — jamais blanc */
[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .module-card,
[data-theme="dark"] .doc-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .invoice-card,
[data-theme="dark"] .calendar-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .info-banner {
  background: #111827 !important;
  color: #f1f5f9 !important;
  border-color: #374151 !important;
}

/* Headers de cartes */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-icon {
  color: #f1f5f9 !important;
}

/* Tableaux */
[data-theme="dark"] table { background: #111827 !important; color: #f1f5f9 !important; }
[data-theme="dark"] table thead th,
[data-theme="dark"] thead tr th {
  background: #1f2937 !important;
  color: #f1f5f9 !important;
  border-bottom: 2px solid #374151 !important;
  font-weight: 700 !important;
}
[data-theme="dark"] table tbody td,
[data-theme="dark"] tbody tr td {
  color: #e5e7eb !important;
  border-bottom-color: #1f2a44 !important;
}
[data-theme="dark"] table tbody tr { background: #111827 !important; }
[data-theme="dark"] table tbody tr:nth-child(even) { background: #131c2e !important; }
[data-theme="dark"] table tbody tr:hover { background: #1f2937 !important; color: #f1f5f9 !important; }

/* Inputs */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .number-stepper input {
  background: #0f1830 !important;
  color: #f1f5f9 !important;
  border-color: #2c3a5a !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #94a3b8 !important; }
[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .field-label { color: #e5e7eb !important; }

/* Sidebar — déjà sombre, on renforce le contraste */
[data-theme="dark"] .sidebar { background: #060f1e !important; }
[data-theme="dark"] .sidebar-link { color: rgba(255,255,255,0.78) !important; }
[data-theme="dark"] .sidebar-link:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
[data-theme="dark"] .sidebar-link.active { color: #fff !important; }

/* Topbar */
[data-theme="dark"] .topbar { background: rgba(11,18,32,0.95) !important; border-bottom-color: #374151 !important; }

/* Boutons secondaires */
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn-secondary {
  background: #131c2e !important;
  color: #f1f5f9 !important;
  border-color: #374151 !important;
}
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-secondary:hover {
  background: #1f2937 !important;
  border-color: #60a5fa !important;
}

/* Champs profil/déductions/revenus */
[data-theme="dark"] .profile-info-grid .profile-field,
[data-theme="dark"] .deduction-item,
[data-theme="dark"] .revenue-item {
  background: #131c2e !important;
  color: #f1f5f9 !important;
  border-color: #374151 !important;
}
[data-theme="dark"] .field-label { color: #cbd5e1 !important; }
[data-theme="dark"] .field-val,
[data-theme="dark"] .deduction-amount,
[data-theme="dark"] .revenue-amount { color: #f1f5f9 !important; }

/* Chat */
[data-theme="dark"] .chat-input-zone { background: #111827 !important; border-top-color: #374151 !important; }
[data-theme="dark"] .chat-msg.bot .chat-bubble {
  background: #131c2e !important; color: #f1f5f9 !important; border-color: #374151 !important;
}
[data-theme="dark"] .quick-q {
  background: #131c2e !important; color: #e5e7eb !important; border-color: #374151 !important;
}

/* Calendrier */
[data-theme="dark"] .cal-grid { background: #111827 !important; }

/* Login (préserve gradient mais texte forcé blanc) */
[data-theme="dark"] .login-divider span { background: #0b1220 !important; color: #cbd5e1 !important; }