/* ============================================================
   ASSOC-PYAC v3 — Design System CORRIGÉ
   Lisibilité maximale — Dark/Light mode — Responsive
   ============================================================ */

/* ── VARIABLES DARK (défaut) ── */
:root, [data-theme="dark"] {
  /* Override Bootstrap 5 dark mode */
  --bs-body-color: #FFFFFF;
  --bs-body-bg: #0D0D0D;
  --bs-table-color: #FFFFFF;
  --bs-table-bg: transparent;
  --bs-border-color: #333333;
  --gold: #F5A623;
  --gold-dark: #d4891a;
  --gold-light: rgba(245,166,35,0.15);
  --gold-glow: rgba(245,166,35,0.35);

  --bg-primary:   #0D0D0D;
  --bg-secondary: #141414;
  --bg-card:      #1C1C1C;
  --bg-card2:     #242424;
  --bg-card3:     #2E2E2E;
  --bg-hover:     rgba(255,255,255,0.05);

  --border:        #333333;
  --border-subtle: #2A2A2A;

  /* TEXTE — contraste fort */
  --text-primary:   #FFFFFF;
  --text-secondary: #909090;
  --text-muted:     #909090;
  --text-gold:      #F5A623;

  --success: #2ecc71;
  --warning: #f39c12;
  --danger:  #e74c3c;
  --info:    #3498db;

  --sidebar-w: 264px;
  --topbar-h:  64px;
}

/* ── VARIABLES LIGHT ── */
[data-theme="light"] {
  /* Override Bootstrap 5 light mode */
  --bs-body-color: #111827;
  --bs-body-bg: #F0F2F5;
  --bs-table-color: #111827;
  --bg-primary:   #F0F2F5;
  --bg-secondary: #FFFFFF;
  --bg-card:      #FFFFFF;
  --bg-card2:     #F7F8FA;
  --bg-card3:     #EAECEF;
  --bg-hover:     rgba(0,0,0,0.04);

  --border:        #D8DCE2;
  --border-subtle: #E8EBF0;

  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #6B7280;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.65;
  transition: background .25s, color .25s;
}

.bebas { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--bg-card3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ── COLORS UTILITY ── */
.text-gold { color: var(--gold) !important; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ── BUTTONS ── */
.btn-gold {
  background: linear-gradient(135deg, #F5A623, #d4891a);
  color: #000 !important; font-weight: 700; border: none;
  transition: all .2s; box-shadow: 0 2px 12px rgba(245,166,35,0.35);
  border-radius: 10px;
}
.btn-gold:hover { background: linear-gradient(135deg,#f9b94c,#e09820); color:#000!important; transform:translateY(-1px); box-shadow:0 4px 20px rgba(245,166,35,0.45); }
.btn-outline-gold { border:1.5px solid var(--gold); color:var(--gold) !important; background:transparent; border-radius:10px; }
.btn-outline-gold:hover { background:var(--gold); color:#000 !important; }

/* ── FORMS — lisibilité totale ── */
.form-control, .form-select {
  background: var(--bg-card2) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
  font-size: .9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-light) !important;
  color: var(--text-primary) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; opacity: 1 !important; }
.input-group-text { background: var(--bg-card2) !important; border-color: var(--border) !important; color: var(--text-muted) !important; }
.form-check-input:checked { background-color: var(--gold) !important; border-color: var(--gold) !important; }
.form-label { color: var(--text-secondary) !important; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.form-switch .form-check-input { width:2.8em; height:1.4em; cursor:pointer; }
select option { background: var(--bg-card2); color: var(--text-primary); }

/* ── CARDS ── */
.card-dark {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}
.card-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.25rem;
  transition: all .25s;
}
.card-stat:hover { border-color: var(--gold-glow); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.card-stat .stat-icon { width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem; }
.card-stat .stat-value { font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--text-primary);line-height:1.1; }
.card-stat .stat-label { font-size:.78rem;color:var(--text-muted);margin-top:4px;font-weight:500; }

/* ── SIDEBAR ── */
.sidebar {
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:var(--bg-secondary);
  border-right:1px solid var(--border-subtle);
  display:flex;flex-direction:column;z-index:1000;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.sidebar-logo { padding:1.5rem 1.25rem 1rem; border-bottom:1px solid var(--border-subtle); }
.sidebar-logo .app-name { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; color:var(--gold); }
.sidebar-logo img { height:38px; object-fit:contain; max-width:100%; }

.sidebar-nav { flex:1; padding:.75rem; }
.nav-section-label {
  font-size:.62rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-muted); padding:.75rem .75rem .3rem; font-weight:700;
}
.nav-link-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem .9rem; border-radius:10px;
  color:var(--text-primary); text-decoration:none;
  font-size:.88rem; cursor:pointer; border:none; background:none; width:100%;
  transition:all .15s; text-align:left; font-weight:500;
}
.nav-link-item:hover { background:var(--bg-hover); color:var(--text-primary) !important; }
.nav-link-item.active { background:var(--gold-light); color:var(--gold) !important; font-weight:700; }
.nav-link-item i { font-size:1rem; width:20px; text-align:center; flex-shrink:0; }
.nav-link-item .nav-badge { margin-left:auto; background:var(--gold); color:#000; border-radius:10px; font-size:.6rem; padding:1px 7px; font-weight:800; }

.sidebar-user { padding:1rem 1.25rem; border-top:1px solid var(--border-subtle); }
.sidebar-user .user-name { font-size:.85rem; font-weight:700; color:var(--text-primary) !important; }
.sidebar-user .user-role { font-size:.68rem; color:var(--gold); }

/* ── TOPBAR ── */
.topbar {
  position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--topbar-h);
  background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;z-index:900;
  transition:left .3s;
}
.topbar-left { display:flex;align-items:center;gap:1rem; }
.topbar-right { display:flex;align-items:center;gap:.75rem; }
.topbar-title { font-size:1.05rem; font-weight:700; color:var(--text-primary) !important; }

/* ── MAIN ── */
.main-content {
  margin-left:var(--sidebar-w); margin-top:var(--topbar-h);
  padding:2rem; min-height:calc(100vh - var(--topbar-h));
}

/* ── AVATAR ── */
.avatar-circle {
  width:40px;height:40px;border-radius:50%;
  background:var(--gold-light);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.82rem;overflow:hidden;
  border:2px solid var(--border);flex-shrink:0;
}
.avatar-circle img { width:100%;height:100%;object-fit:cover; }
.avatar-circle-lg {
  width:88px;height:88px;border-radius:50%;
  background:var(--gold-light);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.6rem;overflow:hidden;
  border:3px solid var(--border);flex-shrink:0;cursor:pointer;position:relative;
}
.avatar-circle-lg img { width:100%;height:100%;object-fit:cover; }
.avatar-overlay { position:absolute;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-size:1.2rem; }
.avatar-circle-lg:hover .avatar-overlay { display:flex; }

/* ── BADGE STATUS ── */
.badge-status { padding:.3em .85em;border-radius:20px;font-size:.72rem;font-weight:700;display:inline-block; }
.badge-active    { background:rgba(46,204,113,.18);color:#2ecc71; }
.badge-pending   { background:rgba(243,156,18,.18);color:#f39c12; }
.badge-suspended { background:rgba(231,76,60,.18);color:#e74c3c; }
.badge-inactive  { background:rgba(150,150,150,.18);color:#aaa; }
.badge-completed { background:rgba(46,204,113,.18);color:#2ecc71; }
.badge-failed    { background:rgba(231,76,60,.18);color:#e74c3c; }
.badge-draft     { background:rgba(150,150,150,.18);color:#bbb; }
.badge-published { background:rgba(52,152,219,.18);color:#3498db; }

/* ── TABLES — lisibilité forcée ── */
.table-app {
  color: #FFFFFF !important;
  --bs-table-color: #FFFFFF;
  --bs-table-bg: transparent;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table-app th {
  background:var(--bg-card2) !important;
  color:#C0C0C0 !important;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  border-bottom:2px solid var(--border) !important;
  font-weight:700;padding:.8rem 1rem;white-space:nowrap;
}
.table-app td {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: .8rem 1rem;
  vertical-align: middle;
  color: #FFFFFF !important;
  --bs-table-color: #FFFFFF;
  font-size: .88rem;
}
.table-app td span:not(.badge-status):not(.pay-method-badge) {
  color: inherit !important;
}
.table-app .text-col-muted { color:var(--text-secondary) !important; }
.table-app tbody tr:hover td { background:var(--bg-hover); }
.table-app .col-amount { font-weight:700;font-size:.9rem;color:var(--gold) !important; }
.table-app .col-ref { font-family:monospace;font-size:.78rem;color:var(--text-secondary) !important; }

/* ── MODALS ── */
.modal-content { background:var(--bg-card);border:1px solid var(--border);border-radius:20px; }
.modal-header { border-bottom:1px solid var(--border);padding:1.25rem 1.5rem; }
.modal-footer { border-top:1px solid var(--border);padding:1rem 1.5rem; }
.modal-title { color:var(--text-primary) !important; font-weight:700; }
.btn-close { filter:invert(1) grayscale(1) brightness(2); }
[data-theme="light"] .btn-close { filter: none; }
[data-theme="light"] .card-dark { background:#FFFFFF !important; color:#111827 !important; }
[data-theme="light"] .card-stat { background:#FFFFFF !important; }
[data-theme="light"] .stat-value { color:#111827 !important; }
[data-theme="light"] .stat-label { color:#6B7280 !important; }
[data-theme="light"] .table-app { color:#111827 !important; }
[data-theme="light"] .table-app td { color:#374151 !important; }
[data-theme="light"] .text-col-muted { color:#6B7280 !important; }
[data-theme="light"] .col-amount { color:#111827 !important; }
[data-theme="light"] .col-ref { color:#6B7280 !important; }
[data-theme="light"] .form-control { background:#FFFFFF !important; color:#111827 !important; border-color:#D1D5DB !important; }
[data-theme="light"] .form-control::placeholder { color:#9CA3AF !important; }
[data-theme="light"] .form-select { background:#FFFFFF !important; color:#111827 !important; border-color:#D1D5DB !important; }
[data-theme="light"] .modal-content { background:#FFFFFF !important; color:#111827 !important; }
[data-theme="light"] .modal-header { border-color:#E5E7EB !important; }
[data-theme="light"] .modal-footer { border-color:#E5E7EB !important; }
[data-theme="light"] .section-card { background:#FFFFFF !important; border-color:#E5E7EB !important; }
[data-theme="light"] .settings-section { background:#FFFFFF !important; border-color:#E5E7EB !important; }
[data-theme="light"] .toggle-row { background:#F9FAFB !important; }
[data-theme="light"] .notif-item { background:#F9FAFB !important; border-color:#E5E7EB !important; }
[data-theme="light"] .notif-item.unread { background:#FFF7E6 !important; }
[data-theme="light"] .notif-title { color:#111827 !important; }
[data-theme="light"] .notif-content { color:#374151 !important; }
[data-theme="light"] .post-card { background:#FFFFFF !important; border-color:#E5E7EB !important; }
[data-theme="light"] .post-header { border-color:#E5E7EB !important; }
[data-theme="light"] .post-body { color:#374151 !important; }
[data-theme="light"] .pay-method-badge { background:#F3F4F6 !important; color:#374151 !important; border:1px solid #D1D5DB !important; }
[data-theme="light"] .badge-status { color:#111827 !important; }
[data-theme="light"] .badge-active { background:rgba(46,204,113,.15) !important; color:#15803D !important; }
[data-theme="light"] .badge-pending { background:rgba(243,156,18,.15) !important; color:#B45309 !important; }
[data-theme="light"] .badge-failed  { background:rgba(231,76,60,.15) !important; color:#B91C1C !important; }
[data-theme="light"] .upload-area { background:#F9FAFB !important; border-color:#D1D5DB !important; color:#374151 !important; }
[data-theme="light"] .search-bar .form-control { background:#FFFFFF !important; }
[data-theme="light"] .sidebar { background:#FFFFFF !important; border-right:1px solid #E5E7EB; }
[data-theme="light"] .sidebar-logo .app-name { color:#111827 !important; }
[data-theme="light"] .sidebar-user { border-top-color:#E5E7EB !important; }
[data-theme="light"] .topbar { background:#FFFFFF !important; border-bottom:1px solid #E5E7EB !important; }
[data-theme="light"] .maintenance-banner { background:#FEF3C7 !important; color:#92400E !important; }
[data-theme="light"] .avatar-circle { background:#F3F4F6 !important; color:#374151 !important; border:2px solid #E5E7EB !important; }
[data-theme="light"] .empty-state { color:#6B7280 !important; }
[data-theme="light"] .fw-700 { color:#111827 !important; }
[data-theme="dark"] .table-app td { color:#F2F2F2 !important; }
[data-theme="dark"] .table-app td strong,
[data-theme="dark"] .table-app td span[style*="font-weight"] { color:#FFFFFF !important; }
[data-theme="light"] label { color:#374151 !important; }
[data-theme="light"] .form-label { color:#374151 !important; }

/* ── ALERTS ── */
.alert { border:none;border-radius:12px; }
.alert-danger  { background:rgba(231,76,60,.14);color:#e74c3c !important; }
.alert-success { background:rgba(46,204,113,.14);color:#27ae60 !important; }
.alert-warning { background:rgba(243,156,18,.14);color:#f39c12 !important; }
.alert-info    { background:rgba(52,152,219,.14);color:#3498db !important; }

/* ── PAGE SECTIONS ── */
.page-section { display:none; }
.page-section.active { display:block; }

/* ── MOBILE ── */
.hamburger { display:none;background:none;border:none;color:var(--text-primary);font-size:1.4rem;padding:4px; }
.sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:999; }

/* ── NOTIF BELL ── */
.notif-bell { position:relative;cursor:pointer; }
.notif-badge {
  position:absolute;top:-5px;right:-5px;background:var(--gold);color:#000;
  border-radius:50%;width:18px;height:18px;font-size:.6rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* ── PAGINATION ── */
.pagination-custom { display:flex;gap:4px;align-items:center;flex-wrap:wrap; }
.pagination-custom .page-btn {
  min-width:36px;height:36px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-card2);color:var(--text-secondary) !important;font-size:.82rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  text-decoration:none;transition:all .15s;
}
.pagination-custom .page-btn:hover { border-color:var(--gold);color:var(--gold) !important; }
.pagination-custom .page-btn.active { background:var(--gold);border-color:var(--gold);color:#000 !important;font-weight:800; }
.pagination-custom .page-btn.disabled { opacity:.4;cursor:default;pointer-events:none; }

/* ── SEARCH BAR ── */
.search-bar { position:relative; }
.search-bar .search-icon { position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none; }
.search-bar .form-control { padding-left:2.5rem !important; }

/* ── EMPTY STATE ── */
.empty-state { text-align:center;padding:3rem 1rem; }
.empty-state i { font-size:3rem;color:var(--text-muted);display:block;margin-bottom:1rem; }
.empty-state h6 { color:var(--text-secondary) !important;margin-bottom:.5rem; }
.empty-state p { color:var(--text-muted) !important;font-size:.85rem; }

/* ── FORUM CARDS ── */
.topic-card {
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:14px;padding:1rem 1.25rem;transition:all .2s;
}
.topic-card:hover { border-color:var(--gold-glow);background:var(--bg-card2); }
.topic-card .topic-title { color:var(--text-primary) !important;font-weight:700;font-size:.95rem;text-decoration:none; }
.topic-card .topic-title:hover { color:var(--gold) !important; }
.topic-card .topic-meta { font-size:.75rem;color:var(--text-muted) !important;margin-top:4px; }
.topic-card .topic-desc { font-size:.83rem;color:var(--text-secondary) !important;margin-top:5px;line-height:1.5; }

/* ── NOTIFICATIONS ── */
.notif-item {
  display:flex;gap:1rem;padding:1rem 1.25rem;border-radius:12px;
  border:1px solid var(--border-subtle);background:var(--bg-card);
  margin-bottom:.5rem;transition:all .2s;
}
.notif-item:hover { border-color:var(--border); }
.notif-item.unread { background:var(--bg-card2);border-left:3px solid var(--gold); }
.notif-item .notif-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0; }
.notif-item .notif-title { font-weight:700;font-size:.9rem;color:var(--text-primary) !important; }
.notif-item .notif-content { font-size:.83rem;color:var(--text-secondary) !important;margin-top:3px;line-height:1.5; }
.notif-item .notif-time { font-size:.7rem;color:var(--text-muted) !important;flex-shrink:0;white-space:nowrap; }

/* ── PAYMENTS TABLE ── */
.pay-method-badge { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;background:var(--bg-card3);color:var(--text-primary) !important; }
.btn-resume { background:rgba(245,166,35,.15);color:var(--gold) !important;border:1px solid rgba(245,166,35,.35);border-radius:8px;padding:4px 12px;font-size:.75rem;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:4px; }
.btn-resume:hover { background:var(--gold);color:#000 !important; }

/* ── SETTINGS SECTIONS ── */
.settings-section { background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:1.5rem;margin-bottom:1.25rem; }
.settings-section-title { display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-subtle); }
.settings-section-title .s-icon { width:36px;height:36px;background:var(--gold-light);color:var(--gold);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem; }
.settings-section-title h6 { font-weight:700;color:var(--text-primary) !important;margin:0; }
.toggle-row { display:flex;justify-content:space-between;align-items:center;padding:.85rem 1rem;border-radius:10px;background:var(--bg-card2);margin-bottom:.5rem;gap:1rem; }
.toggle-row .toggle-info h6 { font-size:.88rem;font-weight:700;color:var(--text-primary) !important;margin:0; }
.toggle-row .toggle-info p  { font-size:.75rem;color:var(--text-muted) !important;margin:0;margin-top:2px; }

/* ── THEME TOGGLE ── */
.theme-toggle {
  background:var(--bg-card2);border:1px solid var(--border);border-radius:20px;
  padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;
  font-size:.8rem;color:var(--text-secondary) !important;transition:all .2s;
  font-weight:600;
}
.theme-toggle:hover { border-color:var(--gold);color:var(--gold) !important; }

/* ── QUILL EDITOR ── */
.ql-toolbar { background:var(--bg-card2)!important;border-color:var(--border)!important;border-radius:10px 10px 0 0!important; }
.ql-container { background:var(--bg-card2)!important;border-color:var(--border)!important;border-radius:0 0 10px 10px!important;min-height:180px; }
.ql-editor { color:var(--text-primary)!important;min-height:160px;font-size:.92rem; }
.ql-editor.ql-blank::before { color:var(--text-muted)!important;font-style:normal; }
.ql-snow .ql-stroke { stroke:var(--text-secondary)!important; }
.ql-snow .ql-fill { fill:var(--text-secondary)!important; }
.ql-snow .ql-picker { color:var(--text-secondary)!important; }
.ql-snow .ql-picker-options { background:var(--bg-card2)!important;border-color:var(--border)!important;color:var(--text-primary)!important; }
.ql-snow .ql-picker-item { color:var(--text-primary)!important; }
.ql-toolbar button:hover .ql-stroke,.ql-toolbar button.ql-active .ql-stroke { stroke:var(--gold)!important; }
.ql-toolbar button:hover .ql-fill,.ql-toolbar button.ql-active .ql-fill { fill:var(--gold)!important; }
.ql-snow .ql-picker.ql-expanded .ql-picker-label { color:var(--gold)!important; }
.ql-snow .ql-tooltip { background:var(--bg-card2)!important;border-color:var(--border)!important;color:var(--text-primary)!important; }
.ql-snow .ql-tooltip input[type=text] { background:var(--bg-card3)!important;border-color:var(--border)!important;color:var(--text-primary)!important; }

/* ── FORUM POST BODY — texte lisible ── */
.post-body, .post-body * { color:var(--text-primary) !important; }
.post-body p { color:var(--text-secondary) !important;margin-bottom:.75rem; }
.post-body a { color:var(--gold) !important; }
.post-body blockquote { border-left:3px solid var(--gold);padding-left:1rem;color:var(--text-muted) !important;margin:1rem 0; }
.post-body ul,.post-body ol { color:var(--text-secondary) !important;padding-left:1.5rem;margin-bottom:.75rem; }
.post-body img { max-width:100%;border-radius:8px; }
.post-body code { background:var(--bg-card3);color:var(--gold) !important;padding:1px 6px;border-radius:4px;font-size:.85em; }
.post-body pre { background:var(--bg-card3);padding:1rem;border-radius:8px;overflow-x:auto; }

/* ── REACTIONS ── */
.reaction-bar { display:flex;flex-wrap:wrap;gap:4px;margin-top:.5rem; }
.reaction-btn { background:var(--bg-card2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:.8rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:4px;color:var(--text-primary) !important; }
.reaction-btn:hover,.reaction-btn.active { border-color:var(--gold);background:var(--gold-light); }
.emoji-picker-btn { background:var(--bg-card2);border:1px solid var(--border);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;transition:all .15s; }
.emoji-picker-btn:hover { border-color:var(--gold); }
.emoji-picker-popup { position:absolute;z-index:9999;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:.75rem;display:flex;flex-wrap:wrap;gap:4px;box-shadow:0 12px 32px rgba(0,0,0,.4);width:220px; }
.emoji-picker-popup button { background:none;border:none;font-size:1.4rem;cursor:pointer;padding:3px 6px;border-radius:6px;transition:background .15s;line-height:1; }
.emoji-picker-popup button:hover { background:var(--bg-card2); }

/* ── TYPING INDICATOR ── */
.typing-indicator { display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--bg-card2);border-radius:20px;font-size:.78rem;color:var(--text-muted) !important; }
.typing-dots { display:flex;gap:3px;align-items:center; }
.typing-dots span { width:5px;height:5px;border-radius:50%;background:var(--text-muted);animation:typing-bounce 1.4s infinite ease-in-out; }
.typing-dots span:nth-child(1){animation-delay:0s}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typing-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

/* ── UPLOAD AREA ── */
.upload-area { border:2px dashed var(--border);border-radius:12px;padding:2rem;text-align:center;cursor:pointer;transition:all .2s; }
.upload-area:hover { border-color:var(--gold);background:var(--gold-light); }
.upload-area i { font-size:2.5rem;color:var(--text-muted);display:block;margin-bottom:.5rem; }
.upload-area p { color:var(--text-muted) !important; }

/* ── MAINTENANCE BANNER ── */
.maintenance-banner { background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff!important;padding:10px 20px;text-align:center;font-weight:700;font-size:.88rem;position:sticky;top:0;z-index:2000; }

/* ── DROPDOWN MENU ── */
.dropdown-menu { background:var(--bg-card) !important;border:1px solid var(--border) !important;border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.dropdown-item { color:var(--text-primary) !important;font-size:.88rem;padding:.6rem 1rem; }
.dropdown-item:hover { background:var(--bg-card2) !important;color:var(--text-primary) !important; }
.dropdown-divider { border-color:var(--border) !important; }
.dropdown-item.text-danger { color:var(--danger) !important; }

/* ── FOOTER ── */
.app-footer {
  text-align:center;padding:.75rem 1rem;
  color:var(--text-muted) !important;font-size:.72rem;
  border-top:1px solid var(--border-subtle);margin-top:2rem;
}

/* ── INDEX PUBLIC PAGE ── */
.landing-hero { background:radial-gradient(ellipse at 30% 20%, rgba(245,166,35,.1) 0%, transparent 60%), var(--bg-primary); }
.landing-card { background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:1.5rem;transition:all .25s;height:100%; }
.landing-card:hover { border-color:var(--gold-glow);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.3); }
.landing-card .feature-icon { width:52px;height:52px;background:var(--gold-light);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--gold);margin-bottom:1rem; }
.landing-card h6 { color:var(--text-primary) !important;font-weight:700;margin-bottom:.5rem; }
.landing-card p { color:var(--text-secondary) !important;font-size:.83rem;margin:0; }
.stat-pill { background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;padding:1rem 1.5rem;text-align:center; }
.stat-pill .bebas { font-size:2.2rem;color:var(--gold);line-height:1; }
.stat-pill small { color:var(--text-muted) !important;font-size:.75rem;display:block;margin-top:2px; }

/* ── LOGIN/REGISTER PAGES ── */
.auth-left { background:linear-gradient(135deg, #0D0D0D 0%, #1a1400 50%, #0D0D0D 100%); }
.auth-right { background:var(--bg-secondary); }
.auth-card { background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:20px; }
.auth-title { color:var(--text-primary) !important;font-weight:800; }
.auth-subtitle { color:var(--text-secondary) !important; }
.auth-label { color:var(--text-secondary) !important;font-weight:600; }
.auth-link { color:var(--gold) !important;text-decoration:none;font-weight:700; }
.auth-link:hover { color:var(--gold-dark) !important; }
.auth-feature-text { color:var(--text-primary) !important;font-weight:600;font-size:.9rem; }
.auth-feature-desc { color:var(--text-secondary) !important;font-size:.78rem; }

/* ── LIGHT MODE OVERRIDES ── */
[data-theme="light"] .card-dark { box-shadow:0 1px 4px rgba(0,0,0,.08); }
[data-theme="light"] .sidebar { box-shadow:2px 0 16px rgba(0,0,0,.08); }
[data-theme="light"] .topbar { box-shadow:0 2px 8px rgba(0,0,0,.06); }
[data-theme="light"] .modal-content { box-shadow:0 20px 60px rgba(0,0,0,.15); }
[data-theme="light"] .table-app th { background:#f1f3f6 !important; }
[data-theme="light"] .nav-link-item { color:#374151 !important; }
[data-theme="light"] .nav-link-item.active { color:var(--gold) !important; }
[data-theme="light"] .topbar-title { color:#111827 !important; }
[data-theme="light"] .post-body p { color:#374151 !important; }

/* ── RESPONSIVE ── */
@media(max-width:992px) {
  .hamburger { display:flex !important; }
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay.open { display:block; }
  .topbar { left:0 !important; }
  .main-content { margin-left:0; }
  .app-footer { margin-left:0 !important; }
}
@media(max-width:576px) {
  .main-content { padding:1rem; }
  .topbar { padding:0 .75rem; }
  .card-stat .stat-value { font-size:1.6rem; }
  .table-app { font-size:.8rem; }
  .table-app th,.table-app td { padding:.6rem .5rem; }
  .app-footer { font-size:.65rem;word-break:break-word; }
}

/* ── ANIMATIONS ── */
@keyframes slideInRight { from{transform:translateX(100px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideOutRight { from{transform:translateX(0);opacity:1} to{transform:translateX(100px);opacity:0} }
@keyframes pulseGold { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ═══════════════════════════════════════════════════════════
   LISIBILITÉ — DARK & LIGHT MODE — V16 FINAL
   ═══════════════════════════════════════════════════════════ */

/* ──────────── DARK MODE ──────────── */
:root,
[data-theme="dark"] {
  --text-primary:   #FFFFFF;
  --text-secondary: #A0A0A0;
  --text-muted:     #707070;
}

/* Forcer le blanc sur TOUS les textes principaux en dark */
[data-theme="dark"] body                  { color: #FFFFFF !important; }
[data-theme="dark"] h1,[data-theme="dark"] h2,
[data-theme="dark"] h3,[data-theme="dark"] h4,
[data-theme="dark"] h5,[data-theme="dark"] h6 { color: #FFFFFF !important; }

/* Table: toutes les cellules et spans en blanc */
[data-theme="dark"] .table-app td        { color: #FFFFFF !important; }
[data-theme="dark"] .table-app td span   { color: inherit !important; }
[data-theme="dark"] .table-app th        { color: #C0C0C0 !important; }
[data-theme="dark"] .table-app .text-col-muted,
[data-theme="dark"] .text-col-muted      { color: #909090 !important; }
[data-theme="dark"] .table-app .col-ref  { color: #909090 !important; }
[data-theme="dark"] .col-amount          { color: #F5A623 !important; }

/* Cards du dashboard */
[data-theme="dark"] .card-dark           { background: #1C1C1C; color: #FFFFFF; }
[data-theme="dark"] .card-stat .stat-value { color: #FFFFFF !important; }
[data-theme="dark"] .card-stat .stat-label { color: #A0A0A0 !important; }

/* Modals */
[data-theme="dark"] .modal-content       { background: #1C1C1C !important; color: #FFFFFF !important; }
[data-theme="dark"] .modal-title         { color: #FFFFFF !important; }
[data-theme="dark"] .modal-body          { color: #FFFFFF !important; }

/* Formulaires */
[data-theme="dark"] .form-control        { background: #242424 !important; color: #FFFFFF !important; border-color: #3A3A3A !important; }
[data-theme="dark"] .form-select         { background: #242424 !important; color: #FFFFFF !important; border-color: #3A3A3A !important; }
[data-theme="dark"] label,
[data-theme="dark"] .form-label          { color: #D0D0D0 !important; }
[data-theme="dark"] .form-control::placeholder { color: #666 !important; }

/* Sidebar */
[data-theme="dark"] .nav-link-item       { color: #D0D0D0 !important; }
[data-theme="dark"] .nav-link-item:hover { color: #FFFFFF !important; }
[data-theme="dark"] .nav-link-item.active{ color: #F5A623 !important; }
[data-theme="dark"] .nav-section-label   { color: #606060 !important; }

/* Notifications & divers */
[data-theme="dark"] .notif-title         { color: #FFFFFF !important; }
[data-theme="dark"] .notif-content       { color: #C0C0C0 !important; }
[data-theme="dark"] .notif-time          { color: #707070 !important; }
[data-theme="dark"] .empty-state         { color: #707070 !important; }
[data-theme="dark"] .topbar-title        { color: #FFFFFF !important; }

/* Badges de statut — mêmes couleurs dans les 2 thèmes */
.badge-active              { background: rgba(46,204,113,.2)  !important; color: #2ecc71 !important; }
.badge-pending             { background: rgba(243,156,18,.2)  !important; color: #f39c12 !important; }
.badge-failed,.badge-suspended,
.badge-inactive            { background: rgba(231,76,60,.2)   !important; color: #e74c3c !important; }
.badge-draft               { background: rgba(100,116,139,.2) !important; color: #94a3b8 !important; }
.badge-published,.badge-actioned { background: rgba(46,204,113,.2) !important; color: #2ecc71 !important; }
.badge-dismissed           { background: rgba(100,116,139,.2) !important; color: #94a3b8 !important; }

/* ──────────── LIGHT MODE ──────────── */
[data-theme="light"] body                { background: #F0F2F5 !important; color: #111827 !important; }
[data-theme="light"] .sidebar            { background: #FFFFFF !important; border-right: 1px solid #E5E7EB !important; }
[data-theme="light"] .topbar             { background: #FFFFFF !important; border-bottom: 1px solid #E5E7EB !important; }
[data-theme="light"] .card-dark,
[data-theme="light"] .section-card       { background: #FFFFFF !important; border-color: #E5E7EB !important; }
[data-theme="light"] .settings-section   { background: #FFFFFF !important; border-color: #E5E7EB !important; }
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,
[data-theme="light"] h4,[data-theme="light"] h5,[data-theme="light"] h6 { color: #111827 !important; }
[data-theme="light"] p                   { color: #374151 !important; }
[data-theme="light"] label,
[data-theme="light"] .form-label         { color: #374151 !important; }
[data-theme="light"] .nav-link-item      { color: #374151 !important; }
[data-theme="light"] .nav-link-item.active { color: #F5A623 !important; }
[data-theme="light"] .nav-section-label  { color: #6B7280 !important; }
[data-theme="light"] .table-app td       { color: #111827 !important; }
[data-theme="light"] .table-app th       { color: #374151 !important; background: #F3F4F6 !important; }
[data-theme="light"] .text-col-muted     { color: #6B7280 !important; }
[data-theme="light"] .col-ref            { color: #6B7280 !important; }
[data-theme="light"] .form-control       { background: #FFFFFF !important; color: #111827 !important; border-color: #D1D5DB !important; }
[data-theme="light"] .form-select        { background: #FFFFFF !important; color: #111827 !important; border-color: #D1D5DB !important; }
[data-theme="light"] .modal-content      { background: #FFFFFF !important; color: #111827 !important; }
[data-theme="light"] .modal-body         { color: #111827 !important; }
[data-theme="light"] .modal-title        { color: #111827 !important; }
[data-theme="light"] .pay-method-badge   { background: #F3F4F6 !important; color: #374151 !important; }
[data-theme="light"] .upload-area        { background: #F9FAFB !important; border-color: #D1D5DB !important; color: #374151 !important; }
[data-theme="light"] .notif-item         { background: #F9FAFB !important; border-color: #E5E7EB !important; color: #111827 !important; }
[data-theme="light"] .notif-item.unread  { background: #FFF9EC !important; }
[data-theme="light"] .toggle-row         { background: #F9FAFB !important; color: #111827 !important; }
[data-theme="light"] .topbar-title       { color: #111827 !important; }
[data-theme="light"] .card-stat .stat-value { color: #111827 !important; }
[data-theme="light"] .card-stat .stat-label { color: #6B7280 !important; }