/* ════════════════════════════════════════════════════════
   Fonts & Mobile hints
   ════════════════════════════════════════════════════════ */
/* Google Fonts replaced with system fonts for offline use */
/* Hint appui long : visible mobile, masqué PC */
.mobile-only-hint { display: none; }
@media (max-width: 768px) { .mobile-only-hint { display: inline; } }

/* ════════════════════════════════════════════════════════
   Core UI
   ════════════════════════════════════════════════════════ */
:root {
  /* ImmoGest Light — Glassmorphism */
  --bg:      #D8E8F7;
  --bg2:     rgba(255,255,255,0.78);
  --bg3:     rgba(245,249,255,0.70);
  --bg4:     rgba(232,240,252,0.75);
  --border:  rgba(255,255,255,0.85);
  --border2: rgba(79,142,247,0.25);
  --text:    #0F172A;
  --text2:   #3D5270;
  --text3:   #7A90A8;
  --accent:  #0E6AAF;
  --accent2: #0A5490;
  --green:   #0E7A45;
  --green-bg:rgba(14,122,69,.10);
  --red:     #B93020;
  --red-bg:  rgba(185,48,32,.10);
  --yellow:  #8B4A00;
  --yellow-bg:rgba(139,74,0,.10);
  --purple:  #6B46C1;
  --purple-bg:rgba(107,70,193,.10);
  --radius:  14px;
  --radius-sm:8px;
  --shadow:  0 4px 24px rgba(79,142,247,0.10), 0 1px 4px rgba(15,23,42,.05);
  --shadow-md:0 12px 40px rgba(79,142,247,0.15), 0 4px 12px rgba(15,23,42,.08);
  --font:    'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --mono:    'Cascadia Code', Consolas, 'Courier New', monospace;
  --glass-blur: blur(14px) saturate(180%);
}

/* ── Dark Theme ── */
body.dark {
  --bg:      #060A12;
  --bg2:     rgba(12,18,32,0.78);
  --bg3:     rgba(8,13,24,0.72);
  --bg4:     rgba(16,22,38,0.80);
  --border:  rgba(255,255,255,0.065);
  --border2: rgba(79,142,247,0.28);
  --text:    #E4EBF5;
  --text2:   #8AA0BE;
  --text3:   #4A6080;
  --accent:  #4A9EDF;
  --accent2: #3A8ECF;
  --green:   #3DBA78;
  --green-bg:rgba(61,186,120,.12);
  --red:     #E05A5A;
  --red-bg:  rgba(224,90,90,.12);
  --yellow:  #E0A040;
  --yellow-bg:rgba(224,160,64,.12);
  --purple:  #9B7AE0;
  --purple-bg:rgba(155,122,224,.12);
  --shadow:  0 4px 24px rgba(0,0,0,.50), 0 1px 4px rgba(0,0,0,.30);
  --glass-blur: blur(16px) saturate(160%);
}
body.dark .sidebar      { background: linear-gradient(175deg, #040810 0%, #071022 55%, #091530 100%); box-shadow: 4px 0 32px rgba(0,0,0,.5); }
body.dark .topbar       { background: rgba(6,10,20,0.82) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: 0 1px 24px rgba(0,0,0,.4) !important; }
body.dark .card, body.dark .metric-card, body.dark .imm-card { background: rgba(10,16,28,0.75) !important; border-color: rgba(255,255,255,0.06) !important; backdrop-filter: var(--glass-blur) !important; }
body.dark .modal { background: rgba(8,13,24,0.90) !important; border-color: rgba(255,255,255,0.08) !important; backdrop-filter: blur(24px) saturate(160%) !important; }
body.dark input, body.dark select, body.dark textarea { background: var(--bg4) !important; border-color: var(--border) !important; color: var(--text) !important; }
body.dark .auth-input { background: var(--bg4) !important; border-color: var(--border) !important; color: var(--text) !important; }
body.dark .auth-input::placeholder { color: var(--text3) !important; }
body.dark .pin-box { background: var(--bg4) !important; border-color: var(--border) !important; color: var(--text) !important; }
body.dark .auth-right { background: #0d1525 !important; }
body.dark .auth-right-logo-text, body.dark .auth-welcome { color: var(--text) !important; }
body.dark .auth-version-tabs { background: var(--bg4) !important; }
body.dark .auth-version-tab.active { background: var(--bg2) !important; color: var(--accent) !important; }
body.dark .auth-field label { color: var(--text2) !important; }
body.dark .auth-field input, body.dark .auth-field select { background: var(--bg4) !important; border-color: var(--border2) !important; color: var(--text) !important; }
body.dark .auth-field input:focus, body.dark .auth-field select:focus { background: var(--bg3) !important; border-color: var(--accent) !important; }
body.dark .pin-digit { background: var(--bg4) !important; border-color: var(--border2) !important; color: var(--text) !important; }
body.dark .pin-digit:focus { background: var(--bg3) !important; border-color: var(--accent) !important; }
body.dark .role-locataire { color: var(--text2) !important; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  min-height: 100vh;
  transition: background .3s, color .2s;
  background-color: #C8DFF5;
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 0%,   rgba(99,179,247,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%,  rgba(139,92,246,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 80% 85%,  rgba(79,142,247,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 5%  80%,  rgba(56,189,248,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 50% 50%,  rgba(165,180,252,0.18) 0%, transparent 60%);
  background-attachment: fixed;
}
body.dark {
  background-color: #05080F;
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 0%,   rgba(30,64,120,0.60) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%,  rgba(76,29,149,0.30) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 80% 85%,  rgba(20,80,180,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 5%  80%,  rgba(8,80,120,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 50% 50%,  rgba(60,40,100,0.20) 0%, transparent 60%);
  background-attachment: fixed;
}
/* LAYOUT */
.app-shell { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 228px; flex-shrink: 0; background: linear-gradient(175deg, #0A4F87 0%, #0E6AAF 55%, #0D7FC4 100%); border-right: none; display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(14,106,175,.18); transition: width .25s cubic-bezier(.4,0,.2,1); overflow: hidden; }
/* ── Sidebar pliée ── */
.sidebar.collapsed { width: 52px; min-width: 52px !important; max-width: 52px !important; }
.sidebar.collapsed .sidebar-collapse-btn { justify-content: center; }
.sidebar.collapsed .sidebar-collapse-label { display: none; }
.sidebar.collapsed .logo-text, .sidebar.collapsed .logo-sub { display: none; }
.sidebar.collapsed .sidebar-logo { padding: 14px 0; display: flex; justify-content: center; }
.sidebar.collapsed .nav-item span:not(.nav-icon):not(.nav-badge) { display: none; }
.sidebar.collapsed .nav-section { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .nav-badge { display: none !important; }
.sidebar.collapsed .sidebar-footer { display: none; }
.sidebar.collapsed #sidebar-resizer { display: none; }
.sidebar.collapsed .nav-item[style*="NEW"] span[style*="NEW"] { display: none; }
.sidebar-collapse-btn { display: flex; align-items: center; gap: 10px; padding: 8px 12px 6px; cursor: pointer; color: rgba(255,255,255,0.65); font-size: 12px; font-weight: 600; border: none; background: none; width: 100%; transition: color .15s; }
.sidebar-collapse-btn:hover { color: #fff; }
.main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
/* SIDEBAR */
.sidebar-logo { padding: 20px 18px 16px; border-bottom: 1px solid var(--border); }
.sidebar-logo .logo-text { font-size: 15px; font-weight: 600; color: #FFFFFF; letter-spacing: -.3px; }
.sidebar-logo .logo-sub { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.sidebar-nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav-section { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: .08em; padding: 14px 10px 6px; }
.nav-section-toggle { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: color .15s; border-radius: 6px; }
.nav-section-toggle:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.05); }
.nav-section-icon { font-size: 9px; opacity: 0.7; }
.nav-section-body { overflow: hidden; max-height: 0; transition: max-height .28s ease; }
.nav-section-body.open { max-height: 800px; }
.sidebar.collapsed .nav-section-body { max-height: none !important; overflow: visible; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 9px; cursor: pointer; font-size: 14px; color: rgba(255,255,255,0.82); transition: all .18s; margin-bottom: 3px; }
.nav-item:hover { background: rgba(255,255,255,0.13); color: #FFFFFF; transform: translateX(2px); }
.nav-item.active { background: rgba(255,255,255,0.20); color: #FFFFFF; font-weight: 600; border-left: 4px solid rgba(255,255,255,0.92); padding-left: 10px; }
.nav-item .nav-icon { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; }
.nav-item .nav-badge { margin-left: auto; font-size: 10px; background: #F8CACB; color: #C0392B; padding: 1px 6px; border-radius: 99px; font-weight: 600; }
.sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,0.2); font-size: 11px; color: rgba(255,255,255,0.6); }
.sidebar-footer-btn { margin-bottom: 5px; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 9px; cursor: pointer; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500; transition: background 0.15s; gap: 8px; }
.sidebar-footer-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.sidebar-footer-btn-green { background: rgba(26,107,69,0.30) !important; color: rgba(255,255,255,0.95) !important; border: 1px solid rgba(52,211,153,0.25); }
.sidebar-footer-btn-green:hover { background: rgba(26,107,69,0.50) !important; }
.imm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
/* TOPBAR */
.topbar { padding: 13px 28px; border-bottom: 1px solid rgba(255,255,255,0.70); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.72); flex-shrink: 0; box-shadow: 0 1px 20px rgba(79,142,247,0.10), 0 1px 4px rgba(15,23,42,.05); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); position: relative; z-index: 100; }
.topbar-title { font-size: 17px; font-weight: 600; }
.topbar-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
/* CONTENT */
.content { padding: 24px 28px; flex: 1; }
/* CARDS */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); transition: box-shadow .2s; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card-title { font-size: 13px; font-weight: 600; color: var(--text); }
/* METRICS */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.metric-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.metric-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),#4AA8E0); opacity:.5; }
.metric-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; font-weight: 600; }
.metric-value { font-size: 23px; font-weight: 700; color: var(--text); line-height: 1; }
.metric-value.green { color: var(--green); }
.metric-value.red { color: var(--red); }
.metric-value.accent { color: var(--accent); }
.metric-sub { font-size: 11px; color: var(--text3); margin-top: 5px; }
/* GRID */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.imm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 22px; }
/* IMM CARD */
.imm-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; cursor: pointer; transition: all .2s cubic-bezier(.34,1.3,.64,1); position: relative; overflow: hidden; box-shadow: var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.imm-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,106,175,.16); }
.imm-card-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; }
.imm-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; padding-left: 10px; }
.imm-card-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.imm-card-loc { font-size: 11px; color: var(--text3); margin-top: 2px; }
.imm-card-body { padding-left: 10px; }
.imm-stats { display: flex; gap: 16px; margin-top: 10px; }
.imm-stat { font-size: 11px; color: var(--text3); }
.imm-stat span { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.pb { height: 4px; background: var(--bg4); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.pb-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
/* BADGES */
.badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-accent { background: rgba(79,142,247,.15); color: var(--accent); }
.badge-neutral { background: var(--bg4); color: var(--text2); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }
/* LOCAL BADGES */
.local-A { background: rgba(79,142,247,.15); color: var(--accent); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; font-family: var(--mono); }
.local-S { background: rgba(240,180,41,.12); color: var(--yellow); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; font-family: var(--mono); }
/* TABLE */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; padding: 9px 12px; color: var(--text2); font-weight: 700; border-bottom: 2px solid var(--border); background: var(--bg3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(14,106,175,.04); }
tr.row-libre td { opacity: .35; }
tr.row-new td { background: rgba(46,204,138,.04); }
.td-name { font-weight: 500; }
.td-amount { font-family: var(--mono); font-size: 12px; }
.td-amount.red { color: var(--red); }
.td-amount.green { color: var(--green); }
/* ACTION MENU (⋯ dropdown) */
.action-menu { position: relative; display: inline-block; }
.action-menu-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 16px; color: var(--text2); transition: all .15s; font-family: inherit; line-height: 1; letter-spacing: 2px; }
.action-menu-btn:hover { background: var(--bg3); border-color: var(--accent); color: var(--accent); }
.action-dropdown { position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 999; min-width: 200px; padding: 4px 0; display: none; flex-direction: column; }
.action-dropdown.open { display: flex; }
.action-dropdown-item { padding: 9px 14px; cursor: pointer; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; transition: background .1s; white-space: nowrap; }
.action-dropdown-item:hover { background: var(--bg3); }
.action-dropdown-item.danger { color: var(--red); }
.action-dropdown-item.danger:hover { background: var(--red-bg); }
.action-dropdown-sep { height: 1px; background: var(--border); margin: 3px 0; }
/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border2); background: transparent; color: var(--text); font-size: 12.5px; font-family: var(--font); cursor: pointer; transition: all .16s; white-space: nowrap; font-weight: 500; }
.btn:hover { background: var(--bg4); border-color: var(--border2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(14,106,175,.30); }
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); box-shadow: 0 4px 16px rgba(14,106,175,.38); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-danger { background: var(--red-bg); border-color: transparent; color: var(--red); }
.btn-danger:hover { background: rgba(192,57,43,.18); }
.btn-ghost { border-color: transparent; color: var(--text2); }
.btn-ghost:hover { background: var(--bg4); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 11.5px; }
.btn-icon { padding: 6px 8px; border-radius: var(--radius-sm); }
/* FORMS */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; background: var(--bg3); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px; font-family: var(--font); padding: 9px 13px; transition: border .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14,106,175,.12);
}
.form-group select option { background: var(--bg3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* MODAL */
.overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.overlay.open { display: flex; animation: overlayIn .18s ease; }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }
@keyframes spin { to { transform: rotate(360deg); } }
.modal { background: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.90); border-radius: 16px; padding: 28px; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(79,142,247,0.18), 0 4px 16px rgba(15,23,42,.10); animation: modalIn .2s cubic-bezier(.34,1.3,.64,1); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); }
@keyframes modalIn { from{opacity:0;transform:scale(.97) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-lg { width: 680px; }
.modal h3 { font-size: 16px; font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.modal-close { position: absolute; top: 20px; right: 20px; }
/* TABS */
.tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-btn { padding: 8px 16px; font-size: 13px; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font); }
.tab-btn:hover { color: var(--text2); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* STAT ROW */
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.stat-row:last-child { border-bottom: none; }
.stat-row .label { color: var(--text2); }
.stat-row .value { font-weight: 500; font-family: var(--mono); font-size: 12px; }
/* PAYMENT CHIP */
.pay-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--green-bg); border-radius: 4px; padding: 2px 7px; font-size: 10px; color: var(--green); margin: 1px; font-family: var(--mono); }
/* HISTORY */
.hist-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg3); margin-bottom: 4px; font-size: 12px; }
.hist-date { color: var(--text3); font-family: var(--mono); width: 80px; flex-shrink: 0; }
.hist-name { flex: 1; font-weight: 500; }
.hist-amount { font-family: var(--mono); font-weight: 600; color: var(--green); }
.hist-note { color: var(--text3); font-size: 11px; }
/* ALERT */
.alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.alert-green { background: var(--green-bg); border: 1px solid rgba(46,204,138,.2); color: var(--green); }
.alert-yellow { background: var(--yellow-bg); border: 1px solid rgba(240,180,41,.2); color: var(--yellow); }
.alert-red { background: var(--red-bg); border: 1px solid rgba(242,92,92,.2); color: var(--red); }
.alert-accent { background: rgba(79,142,247,.1); border: 1px solid rgba(79,142,247,.2); color: var(--accent); }
/* DIVIDER */
.divider { height: 1px; background: var(--border); margin: 16px 0; }
/* SECTION HEADER */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-title { font-size: 13px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; }
/* EMPTY STATE */
.empty { text-align: center; padding: 40px 20px; color: var(--text3); }
.empty-icon { font-size: 36px; margin-bottom: 10px; }
.empty-text { font-size: 13px; }
/* ── TOOLTIPS ── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #0F172A; color: #fff; font-size: 11.5px; font-weight: 500;
  padding: 5px 10px; border-radius: 7px; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s;
  transform: translateX(-50%) translateY(4px);
  z-index: 99999;
}
[data-tooltip]:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
/* Flèche sous le tooltip */
[data-tooltip]::before {
  content: '';
  position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #0F172A;
  opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 99999;
}
[data-tooltip]:hover::before { opacity: 1; }
/* Tooltip vers le bas si bouton en haut de page */
[data-tooltip-down]::after {
  bottom: auto; top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-down]:hover::after { transform: translateX(-50%) translateY(0); }
[data-tooltip-down]::before {
  bottom: auto; top: calc(100% + 2px);
  border-top-color: transparent; border-bottom-color: #0F172A;
}

/* TOAST */
.toast { position: fixed; bottom: 28px; right: 28px; background: #0F172A; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 13px 20px; font-size: 13px; color: #FFFFFF; z-index: 9999; box-shadow: 0 8px 32px rgba(0,0,0,.35); display: none; animation: slideUp .25s cubic-bezier(.34,1.3,.64,1); max-width: 320px; }
.toast.show { display: block; }
@keyframes slideUp { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
/* CHART */
.chart-wrap { position: relative; height: 220px; }
/* ── LOCAUX GRID ─────────────────────────────────────────────────────────── */
.locaux-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px; }
.local-card {
  border:2px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;
  transition:all .15s;text-align:center;position:relative;
}
.local-card:hover { transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1); }
.local-card.occupe { border-color:var(--red);background:rgba(192,57,43,.04); }
.local-card.libre { border-color:var(--green);background:rgba(26,107,69,.04);cursor:pointer; }
.local-card.libre:hover { background:rgba(26,107,69,.1); }
.local-card.travaux { border-color:var(--yellow);background:rgba(240,180,41,.04); }
.local-card.libre-placeholder { border:2px dashed var(--green);background:rgba(26,107,69,.02);cursor:pointer; }
.local-card.libre-placeholder:hover { background:rgba(26,107,69,.08); }
.local-statut-dot { width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px; }
.local-num { font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px; }
.local-type { font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3); }
.local-nom { font-size:11px;color:var(--text2);margin-top:4px;font-weight:500; }
.local-loyer { font-size:11px;color:var(--accent);font-weight:600; }
.local-reste { font-size:10px;font-weight:700; }
.annuler-badge { display:inline-flex;align-items:center;gap:4px;background:var(--red-bg);color:var(--red);font-size:10px;padding:2px 8px;border-radius:99px;font-weight:600;cursor:pointer;border:none;font-family:var(--font); }
.annuler-badge:hover { background:var(--red);color:#fff; }
/* ── PAYMENT SYSTEM ─────────────────────────────────────────────────────── */
.decl-card { background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px; }
.decl-card.pending { border-left:4px solid var(--yellow); }
.decl-card.validated { border-left:4px solid var(--green); }
.decl-card.rejected { border-left:4px solid var(--red); }
.decl-status { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px; }
.decl-status.pending { background:var(--yellow-bg);color:var(--yellow); }
.decl-status.validated { background:var(--green-bg);color:var(--green); }
.decl-status.rejected { background:var(--red-bg);color:var(--red); }
.pay-mode-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0; }
.pay-mode-btn { border:1.5px solid var(--border2);border-radius:8px;padding:10px;cursor:pointer;text-align:center;transition:all .15s;background:var(--bg3); }
.pay-mode-btn:hover { border-color:var(--accent); }
.pay-mode-btn.selected { border-color:var(--accent);background:rgba(14,106,175,.08); }
.pay-mode-icon { font-size:20px;margin-bottom:4px; }
.pay-mode-label { font-size:11px;font-weight:600;color:var(--text2); }
.notif-badge { position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:9px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center; }
.comptable-alert { background:linear-gradient(135deg,rgba(14,106,175,.1),rgba(26,107,69,.1));border:1.5px solid var(--accent);border-radius:var(--radius);padding:14px 18px;margin-bottom:16px;display:flex;align-items:center;gap:12px; }
/* ARCHIVE */
.archive-row { background: rgba(240,180,41,.04); }
.archive-row td { color: var(--text3) !important; font-style: italic; }
.tag-archive { font-size:9px;padding:1px 5px;border-radius:3px;background:var(--yellow-bg);color:var(--yellow);margin-left:4px; }
.tag-new { font-size:9px;padding:1px 5px;border-radius:3px;background:var(--green-bg);color:var(--green);margin-left:4px; }
.hist-occupant { display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--radius-sm);background:var(--bg3);margin-bottom:3px;font-size:12px; }
.hist-occ-date { color:var(--text3);font-family:var(--mono);font-size:10px;width:140px;flex-shrink:0; }
.btn-orange { background:rgba(240,180,41,.12);border-color:transparent;color:var(--yellow); }
.btn-orange:hover { background:rgba(240,180,41,.22); }
.progress-steps { display:flex;gap:6px;margin-bottom:16px; }
.step { flex:1;text-align:center;font-size:11px;color:var(--text3);padding:6px;border-radius:var(--radius-sm);border:1px solid var(--border); }
.step.active { border-color:var(--accent);color:var(--accent);background:rgba(79,142,247,.08); }
/* ── SIDEBAR MOBILE + TABLETTE — tiroir jusqu'à 1024px ── */
@media (max-width: 1024px) {
  #sidebar-main {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    width: 260px !important;
    min-width: unset !important;
    max-width: unset !important;
  }
  #sidebar-main.open {
    transform: translateX(0);
    box-shadow: 6px 0 32px rgba(0,0,0,.35);
  }
  #sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 1050;
    backdrop-filter: blur(2px);
  }
  #sidebar-overlay.open { display: block; }
  #btn-hamburger {
    display: flex !important;
    align-items: center; justify-content: center;
    background: none; border: none;
    font-size: 22px; cursor: pointer;
    color: var(--text); padding: 4px 6px;
    border-radius: 6px;
  }
  #btn-hamburger:hover { background: var(--bg3); }
}
@media (min-width: 1025px) {
  #btn-hamburger { display: none !important; }
}

/* ── TOPBAR MOBILE + PAYSAGE ── */
@media (max-width: 1024px) {
  .topbar {
    padding: 10px 12px;
    flex-wrap: nowrap;
    overflow: visible;    /* permet aux dropdowns de déborder */
    position: relative;
    z-index: 200;
  }
  .topbar-title { font-size: 14px; }
  .topbar-sub { display: none; }
  /* ── Tous les éléments topbar compacts sur mobile ── */

  /* User-chip : avatar rond + logout icône seulement */
  .user-chip {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .user-chip > span { display: none !important; }
  .user-chip .role-badge { display: none !important; }
  .user-chip .avatar {
    width: 26px !important; height: 26px !important;
    font-size: 10px !important; flex-shrink: 0;
  }
  .user-chip button {
    padding: 3px 5px !important;
    font-size: 13px !important;
    border: none !important;
    background: none !important;
    color: #C0392B !important;
    white-space: nowrap;
  }
  /* Masquer le texte du bouton logout, garder seulement l'icône ⏻ */
  .user-chip button::after { content: ''; }

  /* Badge plan compact */
  #topbar-plan-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
    margin-right: 0 !important;
  }

  /* Sélecteurs mois/année ultra-compacts */
  #sel-mois, #sel-annee {
    padding: 4px 2px 4px 6px !important;
    font-size: 11px !important;
    max-width: 62px;
    background: var(--bg2) !important;
    border-radius: 6px !important;
  }

  /* Langue compact — forcer visibilité */
  #lang-selector { display: inline-block !important; }
  #lang-selector #btn-lang-toggle {
    padding: 4px 6px !important;
    font-size: 12px !important;
    color: var(--text) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #lang-selector #btn-lang-toggle * {
    visibility: visible !important;
    opacity: 1 !important;
  }
  #lang-code { display: inline !important; }
  /* Dropdown fixé en haut à droite — sort du conteneur scrollable */
  #lang-menu {
    position: fixed !important;
    top: 56px !important;
    right: 4px !important;
    left: auto !important;
    z-index: 9999 !important;
  }

  /* Topbar-actions scrollable horizontalement */
  .topbar-actions {
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    max-width: calc(100vw - 160px);
    scrollbar-width: none;
  }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions { -webkit-overflow-scrolling: touch; }
  #topbar-main-btn {
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* Modales au dessus de la sidebar (z-index 1100) */
  .overlay { z-index: 1200 !important; }
  .overlay .modal {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 88vh;
    overflow-y: auto;
  }

  /* Empêcher débordement horizontal sauf topbar */
  .app-shell { overflow-x: hidden; }
  .main { overflow-x: hidden; }
  .content { padding: 8px; overflow-x: hidden; }
  /* Grilles responsive — portrait seulement */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  /* KPI cards — style ligne horizontale, très compact */
  .metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
  }
  .metric-card {
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .metric-card::before { display: none !important; }
  .metric-label {
    font-size: 9px !important;
    margin: 0 !important;
    flex: 1;
    line-height: 1.2;
    color: var(--text3);
  }
  .metric-value {
    font-size: 16px !important;
    font-weight: 700 !important;
    flex-shrink: 0;
  }
  .metric-sub { display: none !important; }
  /* Cartes immeubles compactes — 2 colonnes */
  .imm-cards {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
  }
  .imm-card { padding: 10px 10px 10px 14px !important; }
  .imm-card-name { font-size: 12px !important; line-height: 1.3; }
  .imm-card-loc { font-size: 10px !important; }
  .imm-stats { gap: 6px; margin-top: 4px !important; flex-wrap: wrap; }
  .imm-stat { font-size: 9px !important; }
  .imm-stat span { font-size: 12px !important; }
  .pb { margin-top: 6px !important; }
  /* Section titles plus petits */
  .section-title, [class*="section-title"] { margin-top: 10px !important; margin-bottom: 6px !important; font-size: 10px !important; }
  /* Tableaux scrollables */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* PRINT */
@media print {
  .sidebar, .topbar-actions, .btn, .modal { display: none !important; }
  .main { overflow: visible; }
}
/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* SCROLLBAR SIDEBAR — plus large et visible */
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); border-radius: 99px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); border-radius: 99px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.7); }
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.4) rgba(255,255,255,0.08); }
/* ── AUTH ─────────────────────────────────────────────────────────────── */
.auth-screen {
  position:fixed;inset:0;z-index:9999;display:flex;
  background:#0a1628;overflow:hidden;
}
/* Left panel - illustration */
.auth-left {
  flex:1.1;position:relative;display:flex;flex-direction:column;
  justify-content:center;align-items:center;padding:48px;overflow:hidden;
  background:linear-gradient(160deg,#0d2137 0%,#0e4a7a 45%,#0a6b5a 100%);
}
.auth-left-bg {
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%,rgba(14,106,175,.35) 0%,transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 20%,rgba(26,138,110,.3) 0%,transparent 70%);
}
.auth-illustration { position:relative;z-index:1;width:100%;max-width:420px; }
.auth-brand { position:relative;z-index:1;margin-top:32px;text-align:center; }
.auth-brand-name { font-size:32px;font-weight:800;color:#fff;letter-spacing:-1px; }
.auth-brand-tag { font-size:13px;color:rgba(255,255,255,.6);margin-top:6px;line-height:1.5; }
.auth-stats { display:flex;gap:28px;margin-top:32px;position:relative;z-index:1; }
.auth-stat { text-align:center; }
.auth-stat-val { font-size:22px;font-weight:800;color:#fff; }
.auth-stat-lbl { font-size:10px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em;margin-top:2px; }
/* Right panel - form */
.auth-right {
  width:420px;flex-shrink:0;background:#fff;display:flex;flex-direction:column;
  justify-content:center;padding:48px 44px;overflow-y:auto;
}
.auth-right-logo { display:flex;align-items:center;gap:10px;margin-bottom:32px; }
.auth-right-logo-icon {
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,#0E6AAF,#0a4a7a);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.auth-right-logo-text { font-size:18px;font-weight:800;color:#0a1628; }
.auth-right-logo-sub { font-size:11px;color:#94A3B8;margin-top:1px; }
.auth-welcome { font-size:24px;font-weight:800;color:#0a1628;margin-bottom:6px; }
.auth-welcome-sub { font-size:13px;color:#94A3B8;margin-bottom:28px;line-height:1.5; }
.auth-version-tabs {
  display:flex;gap:0;background:#F1F5F9;border-radius:10px;padding:4px;margin-bottom:24px;
}
.auth-version-tab {
  flex:1;text-align:center;padding:9px 8px;border-radius:7px;font-size:12px;font-weight:600;
  cursor:pointer;color:#64748B;transition:all .2s;border:none;background:none;font-family:var(--font);
}
.auth-version-tab.active {
  background:#fff;color:#0E6AAF;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.auth-field { margin-bottom:18px; }
.auth-field label { display:block;font-size:11px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px; }
.auth-field input, .auth-field select {
  width:100%;padding:12px 14px;border:1.5px solid #E2E8F0;border-radius:10px;
  font-size:13px;font-family:var(--font);color:#0a1628;background:#F8FAFC;
  transition:all .15s;outline:none;
}
.auth-field input:focus, .auth-field select:focus {
  border-color:#0E6AAF;box-shadow:0 0 0 4px rgba(14,106,175,.08);background:#fff;
}
.auth-submit {
  width:100%;padding:14px;border-radius:10px;border:none;
  background:linear-gradient(135deg,#0E6AAF 0%,#0a4a7a 100%);
  color:#fff;font-size:14px;font-weight:700;font-family:var(--font);
  cursor:pointer;transition:all .2s;margin-top:4px;
  box-shadow:0 4px 15px rgba(14,106,175,.35);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.auth-submit:hover { transform:translateY(-1px);box-shadow:0 8px 25px rgba(14,106,175,.45); }
.auth-submit:active { transform:translateY(0); }
.auth-error-box {
  background:#FEF2F2;color:#DC2626;border:1px solid #FECACA;
  border-radius:8px;padding:10px 14px;font-size:12px;margin-bottom:14px;
  display:none;align-items:center;gap:8px;
}
.auth-hint { text-align:center;font-size:11px;color:#94A3B8;margin-top:16px; }
.auth-hint strong { color:#64748B; }
.pin-grid { display:flex;gap:12px;justify-content:center;margin:16px 0; }
.pin-digit {
  width:54px;height:58px;border:2px solid #E2E8F0;border-radius:12px;
  font-size:24px;font-weight:700;text-align:center;background:#F8FAFC;
  color:#0a1628;font-family:var(--mono);transition:all .15s;outline:none;
}
.pin-digit:focus { border-color:#0E6AAF;box-shadow:0 0 0 4px rgba(14,106,175,.08);background:#fff; }
@media (max-width:700px) {
  .auth-left { display:none; }
  .auth-right { width:100%;padding:32px 24px; }
}
/* kept */
.user-chip { display:flex;align-items:center;gap:8px;background:var(--bg3);border-radius:99px;padding:4px 12px 4px 4px;cursor:pointer;font-size:12px;color:var(--text2); }
.user-chip .avatar { width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff; }
.role-badge { font-size:10px;padding:1px 7px;border-radius:99px;font-weight:600; }
.role-admin { background:rgba(107,70,193,.15);color:#6B46C1; }
.role-gestionnaire { background:rgba(14,106,175,.15);color:#0E6AAF; }
.role-comptable { background:rgba(26,107,69,.15);color:#1A6B45; }
.role-proprietaire { background:rgba(240,180,41,.15);color:#92400E; }
.role-locataire { background:rgba(160,174,192,.15);color:#4A5568; }
.perm-denied { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text3);text-align:center; }
.perm-denied .icon { font-size:48px;margin-bottom:12px; }

/* ── Slots publicitaires portail ── */
.ad-slot-sticky {
  position:sticky; bottom:0; left:0; right:0; z-index:50;
  background:var(--bg2); border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  min-height:52px; padding:4px 8px; flex-shrink:0;
}
.ad-slot-sticky:empty { display:none; }
.ad-slot-native {
  margin:0 0 14px 0; border-radius:8px; overflow:hidden;
  background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  min-height:90px;
}
.ad-slot-native:empty { display:none; }
.ad-label {
  font-size:9px; color:var(--text3); text-transform:uppercase;
  letter-spacing:.08em; text-align:center;
  display:block; margin-bottom:2px;
}

.tenant-header { background: linear-gradient(135deg, #0E6AAF 0%, #0a4a7a 100%); color: #fff; padding: 20px; }
.tenant-header h1 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.tenant-header .user-info { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.tenant-header .avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 24px; }
/* Navigation */
.tenant-nav { display: flex; gap: 4px; padding: 12px; background: var(--bg2); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tenant-nav button { padding: 10px 20px; border: none; background: none; color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 8px; white-space: nowrap; transition: all 0.2s; }
.tenant-nav button:hover { background: var(--bg); }
.tenant-nav button.active { background: var(--accent); color: #fff; }
/* Cards */
.card { background: var(--card); border-radius: 12px; padding: 20px; margin: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.card-title { font-size: 14px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
/* Dashboard Grid */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; padding: 12px; }
/* Stat Card */
.stat-card { background: var(--card); border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.stat-value { font-size: 32px; font-weight: 800; color: var(--accent); }
.stat-label { font-size: 12px; color: var(--text2); margin-top: 4px; }
.stat-trend { font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }
/* Payment Card */
.payment-card { border: 2px solid var(--border2); border-radius: 12px; padding: 16px; margin: 8px 0; cursor: pointer; transition: all 0.2s; }
.payment-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.payment-card.paid { border-left: 4px solid var(--success); }
.payment-card.pending { border-left: 4px solid var(--warning); }
.payment-card.overdue { border-left: 4px solid var(--danger); }
/* Buttons */
.btn { padding: 12px 24px; border-radius: 8px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-outline { background: transparent; border: 2px solid var(--accent); color: var(--accent); }
/* Mobile Money Buttons */
.momo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.momo-btn { padding: 16px; border: 2px solid var(--border2); border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg2); }
.momo-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.momo-btn.selected { border-color: var(--accent); background: rgba(14,106,175,0.08); }
.momo-btn .icon { font-size: 32px; margin-bottom: 8px; }
.momo-btn .name { font-size: 12px; font-weight: 700; }
/* Maintenance Form */
.maintenance-form .form-group { margin-bottom: 16px; }
.maintenance-form label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.maintenance-form input, .maintenance-form textarea, .maintenance-form select { width: 100%; padding: 12px; border: 1px solid var(--border2); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--bg4); color: var(--text); }
.maintenance-form textarea { min-height: 100px; resize: vertical; }
/* Photo Upload */
.photo-upload { border: 2px dashed var(--border2); border-radius: 12px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.2s; }
.photo-upload:hover { border-color: var(--accent); background: rgba(14,106,175,0.04); }
.photo-upload.has-files { border-style: solid; border-color: var(--success); }
/* Chat */
.chat-container { height: 400px; display: flex; flex-direction: column; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; }
.chat-bubble { max-width: 80%; padding: 12px 16px; border-radius: 16px; margin: 4px 0; font-size: 14px; }
.chat-bubble.sent { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-bubble.received { background: var(--bg3); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat-input input { flex: 1; padding: 12px; border: 1px solid var(--border2); border-radius: 24px; font-size: 14px; background: var(--bg4); color: var(--text); }
/* Documents List */
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg3); border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.doc-item:hover { background: var(--bg4); }
.doc-item .icon { font-size: 24px; }
.doc-item .info { flex: 1; }
.doc-item .name { font-weight: 600; font-size: 14px; }
.doc-item .date { font-size: 12px; color: var(--text2); }
/* Notifications */
.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif-item { display: flex; gap: 12px; padding: 16px; background: var(--bg3); border-radius: 12px; border-left: 4px solid var(--accent); }
.notif-item.unread { background: var(--bg2); box-shadow: var(--shadow); }
.notif-item .icon { font-size: 24px; }
.notif-item .content { flex: 1; }
.notif-item .title { font-weight: 600; font-size: 14px; }
.notif-item .desc { font-size: 13px; color: var(--text2); margin-top: 2px; }
.notif-item .time { font-size: 11px; color: #A0AEC0; }
/* Voice Command */
.voice-btn { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-size: 28px; cursor: pointer; position: fixed; bottom: 24px; right: 24px; box-shadow: 0 4px 20px rgba(14,106,175,0.4); transition: all 0.3s; z-index: 1000; }
.voice-btn:hover { transform: scale(1.1); }
.voice-btn.listening { animation: pulse 1.5s infinite; background: var(--danger); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(192,57,43,0.4); }
  70% { box-shadow: 0 0 0 20px rgba(192,57,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
}
/* Responsive */
@media (max-width: 640px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .momo-grid { grid-template-columns: 1fr; }
}
/* end portail locataire */
/* Portail Proprietaire */
/* ═══════════════════════════════════════════════════════════ */
/* 🏢 PORTAIL PROPRIÉTAIRE v1.0 */
/* ═══════════════════════════════════════════════════════════ */
/* ── Dashboard Financier ── */
.owner-dashboard { padding: 20px; }
.metrics-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.metric-card {
  background: var(--card); border-radius: 12px; padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); position: relative; overflow: hidden;
  transition: all 0.2s;
}
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.metric-card.highlight { background: linear-gradient(135deg, #0E6AAF 0%, #0a4a7a 100%); color: #fff; }
.metric-card.highlight .metric-label,
.metric-card.highlight .metric-trend { color: rgba(255,255,255,0.8); }
.metric-icon { font-size: 32px; margin-bottom: 12px; }
.metric-value { font-size: 28px; font-weight: 800; color: var(--accent); line-height: 1; }
.metric-card.highlight .metric-value { color: #fff; }
.metric-label { font-size: 12px; color: var(--text2); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.metric-trend { font-size: 13px; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.metric-trend.up { color: var(--success); }
.metric-trend.down { color: var(--danger); }
/* ── Chart Container ── */
.chart-container { background: var(--card); border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 20px; }
.chart-container canvas { max-height: 300px; }
/* ── Rapports Performance ── */
.report-card { background: var(--card); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.report-title { font-size: 16px; font-weight: 700; color: var(--text); }
.report-date { font-size: 12px; color: var(--text3); }
.report-section { margin-bottom: 20px; }
.report-section-title { font-size: 13px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
/* ── Property Table ── */
.prop-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.prop-table th { text-align: left; padding: 10px 12px; background: var(--bg3); color: var(--text2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--border); }
.prop-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.prop-table tr:hover td { background: var(--bg3); }
.prop-table .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.status-occupied { background: var(--green-bg); color: var(--green); }
.status-vacant { background: var(--red-bg); color: var(--red); }
/* ── Approval Workflow ── */
.workflow-card { background: var(--card); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.workflow-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.workflow-title { font-size: 15px; font-weight: 700; }
.workflow-amount { font-size: 18px; font-weight: 800; color: var(--accent); }
.workflow-steps { display: flex; gap: 8px; margin-bottom: 16px; }
.workflow-step {
  flex: 1; text-align: center; padding: 12px 8px; border-radius: 8px;
  border: 2px solid var(--border); font-size: 12px; position: relative;
}
.workflow-step.completed { border-color: var(--success); background: var(--green-bg); color: var(--green); }
.workflow-step.pending { border-color: var(--warning); background: var(--yellow-bg); color: var(--yellow); }
.workflow-step.rejected { border-color: var(--danger); background: var(--red-bg); color: var(--danger); }
.workflow-step .step-num { font-size: 18px; font-weight: 800; display: block; margin-bottom: 4px; }
.workflow-step .step-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.workflow-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* ── Expense Card ── */
.expense-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg3); border-radius: 10px; margin-bottom: 10px; }
.expense-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; flex-shrink: 0; }
.expense-info { flex: 1; }
.expense-title { font-weight: 600; font-size: 14px; }
.expense-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.expense-meta { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--text3); }
.expense-amount { font-size: 18px; font-weight: 700; color: var(--text); }
/* ── Tabs Owner Portal ── */
.owner-tabs { display: flex; gap: 2px; background: var(--bg3); border-radius: 10px; padding: 4px; margin-bottom: 20px; }
.owner-tab { flex: 1; text-align: center; padding: 10px 8px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; background: none; color: var(--text2); transition: all 0.2s; font-family: var(--font); }
.owner-tab.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(14,106,175,0.3); }
.owner-tab:hover:not(.active) { background: var(--bg); }
/* ── Responsive Owner ── */
@media (max-width: 768px) {
  .metrics-row { grid-template-columns: 1fr 1fr; }
  .workflow-steps { flex-direction: column; }
}
@media (max-width: 480px) {
  .metrics-row { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════
   MENUS CONTEXTUELS — Style Windows 11 / Acrylic
   ════════════════════════════════════════════════════════ */

/* Animation commune */
@keyframes menuPopIn {
  from { opacity:0; transform:scale(.95) translateY(-6px); }
  to   { opacity:1; transform:scale(1)  translateY(0); }
}

/* ── Bouton ⋯ ── */
.action-menu { position:relative; display:inline-block; }
.action-menu-btn {
  background:transparent; border:1px solid transparent;
  border-radius:8px; padding:4px 12px; cursor:pointer;
  font-size:18px; color:var(--text3); transition:all .15s;
  font-family:inherit; line-height:1; letter-spacing:2px;
}
.action-menu-btn:hover {
  background:var(--bg2);
  border-color:var(--border);
  color:var(--accent);
}

/* ── Dropdown (⋯ menu) ── */
.action-dropdown {
  position:absolute;
  background:rgba(var(--bg-rgb, 255,255,255), 0.85);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.10),
    0 24px 56px rgba(0,0,0,.14);
  z-index:9999; min-width:210px; padding:6px;
  display:none; flex-direction:column;
  animation:menuPopIn .15s cubic-bezier(.2,.8,.4,1.1);
}
.action-dropdown.open { display:flex; }

.action-dropdown-item {
  padding:9px 14px; cursor:pointer; font-size:13px; font-weight:450;
  color:var(--text); display:flex; align-items:center; gap:12px;
  transition:background .08s, color .08s; white-space:nowrap;
  border-radius:8px; letter-spacing:.1px; line-height:1.3;
}
.action-dropdown-item:hover {
  background:rgba(14,106,175,.10);
  color:var(--accent);
}
.action-dropdown-item.danger { color:#c0392b; }
.action-dropdown-item.danger:hover { background:rgba(192,57,43,.08); color:#c0392b; }
.action-dropdown-sep { height:1px; background:var(--border); margin:4px 0; opacity:.6; }

/* ── Context Menu (clic droit) ── */
#ctx-menu {
  position:fixed; display:none;
  background:rgba(var(--bg-rgb, 255,255,255), 0.88) !important;
  backdrop-filter:blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(200%) !important;
  border:1px solid rgba(0,0,0,0.09) !important;
  border-radius:16px !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 12px 32px rgba(0,0,0,.12),
    0 32px 72px rgba(0,0,0,.16) !important;
  padding:6px !important;
  min-width:220px !important;
  animation:menuPopIn .15s cubic-bezier(.2,.8,.4,1.1);
}
.ctx-item {
  padding:9px 14px; cursor:pointer; font-size:13px; font-weight:450;
  color:var(--text); display:flex; align-items:center; gap:12px;
  transition:background .08s, color .08s; white-space:nowrap;
  border-radius:8px; letter-spacing:.1px; line-height:1.3;
}
.ctx-item:hover {
  background:rgba(14,106,175,.10);
  color:var(--accent);
}
.ctx-item.danger, .ctx-item.ctx-danger { color:#c0392b; }
.ctx-item.danger:hover, .ctx-item.ctx-danger:hover {
  background:rgba(192,57,43,.08); color:#c0392b;
}
.ctx-sep { height:1px; background:var(--border); margin:4px 0; opacity:.6; }

/* Mode sombre — fond acrylic sombre */
body.dark .action-dropdown,
body.dark #ctx-menu {
  background:rgba(26,29,39,0.90) !important;
  border-color:rgba(255,255,255,0.07) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.2),
    0 12px 32px rgba(0,0,0,.4),
    0 32px 72px rgba(0,0,0,.5) !important;
}
body.dark .action-dropdown-item:hover,
body.dark .ctx-item:hover {
  background:rgba(14,106,175,.22);
}
body.dark .action-dropdown-item,
body.dark .ctx-item {
  color:var(--text);
}

/* ════════════════════════════════════════════════════════
   Auth styles
   ════════════════════════════════════════════════════════ */
    /* Panel principal — forme coupée aux coins */
    .auth-form-box {
      width: 430px;
      flex-shrink: 0;
      position: relative;
      color: #e8f4ff;
      clip-path: polygon(28px 0%, 100% 0%, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0% 100%, 0% 28px);
      background: linear-gradient(160deg, #071628 0%, #0b2044 45%, #0d2d5e 100%);
      padding: 44px 38px 40px;
      box-shadow:
        0 40px 100px rgba(0,0,0,0.7),
        0 0 0 1px rgba(79,162,247,0.18),
        inset 0 1px 0 rgba(255,255,255,0.07);
    }
    /* Liseré lumineux sur les bords coupés */
    .auth-form-box::after {
      content: '';
      position: absolute;
      inset: 0;
      clip-path: polygon(
        28px 0%, calc(28px + 1px) 0%, 1px calc(28px + 1px), 1px calc(100% - 1px),
        calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 28px - 1px),
        calc(100% - 28px - 1px) calc(100% - 1px), 0% calc(100% - 1px)
      );
      background: rgba(79,162,247,0.25);
      pointer-events: none;
    }
    /* Icones SVG modernes dans les cartes */
    .auth-svg-icon {
      width: 48px; height: 48px;
      margin: 0 auto 12px;
      display: block;
    }
    /* Cartes de choix mode/rôle */
    .auth-card-btn {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(79,162,247,0.2);
      clip-path: polygon(12px 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%, 0% 12px);
      padding: 22px 14px 18px;
      cursor: pointer;
      transition: all .22s;
      text-align: center;
      color: #c8dff8;
      flex: 1;
    }
    .auth-card-btn:hover {
      background: rgba(79,162,247,0.14);
      border-color: rgba(79,162,247,0.55);
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(14,106,175,0.3);
      color: #fff;
    }
    /* Steps */
    .auth-step { display:none; }
    .auth-step.active { display:block; animation: fadeInStep .28s cubic-bezier(.4,0,.2,1); }
    @keyframes fadeInStep {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:translateY(0); }
    }
    /* Inputs */
    .auth-input {
      width:100%; padding:11px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size:14px; font-family:inherit; box-sizing:border-box; outline:none;
      transition: border .2s, background .2s;
      background: var(--bg3);
      color: var(--text);
    }
    .auth-input::placeholder { color: var(--text3); }
    .auth-input:focus { border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px rgba(74,158,223,0.12); }
    .auth-input option { background: var(--bg2); color: var(--text); }
    /* Bouton principal */
    .auth-btn-primary {
      width:100%; padding:13px;
      background: linear-gradient(135deg, #1a73e8 0%, #0d5bc7 100%);
      color:#fff; border:none;
      clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px);
      font-size:14px; font-weight:700; cursor:pointer;
      font-family:inherit; transition:all .2s; margin-top:6px;
      letter-spacing:.5px;
      box-shadow: 0 4px 20px rgba(26,115,232,0.4);
    }
    .auth-btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 28px rgba(26,115,232,0.55);
      background: linear-gradient(135deg, #2280f0 0%, #1165d5 100%);
    }
    /* Bouton retour */
    .auth-back-btn {
      background:none; border:none; color:rgba(200,223,248,0.45); cursor:pointer;
      font-size:11px; font-family:inherit; display:flex; align-items:center; gap:6px;
      padding:0; margin-bottom:20px; transition:color .2s; letter-spacing:.8px;
      text-transform:uppercase;
    }
    .auth-back-btn:hover { color:#4fa2f7; }
    /* PIN */
    .pin-row { display:flex; gap:10px; justify-content:center; margin:12px 0 16px; }
    .pin-box {
      width:50px; height:50px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size:20px; font-weight:700; text-align:center; font-family:inherit;
      background: var(--bg3); color: var(--text); outline:none;
      transition: border .2s, background .2s;
    }
    .pin-box:focus { border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px rgba(74,158,223,0.12); }
    /* Label */
    .auth-label {
      font-size:10px; font-weight:700; color:rgba(148,196,248,0.7);
      letter-spacing:1.5px; text-transform:uppercase; display:block; margin-bottom:6px;
    }
    /* Diviseur */
    .auth-divider {
      border:none; border-top:1px solid rgba(79,162,247,0.12); margin:16px 0;
    }
    /* ── RESPONSIVE MOBILE landing — DEPLOY17 ── */
    @media (max-width: 768px) {
      #auth-main-layout {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 24px 16px 32px;
        gap: 20px;
        min-height: 100vh;
      }
      #auth-branding {
        padding-right: 0;
        max-width: 100%;
        text-align: center;
        display: block !important;
      }
      #auth-branding h1 {
        font-size: 32px !important;
        letter-spacing: -1px !important;
        margin-bottom: 10px !important;
      }
      #auth-branding > div:first-child {
        font-size: 10px !important;
        margin-bottom: 10px !important;
      }
      #auth-branding p {
        font-size: 13px !important;
        margin-bottom: 16px !important;
        max-width: 100% !important;
      }
      #auth-branding > div:last-child {
        justify-content: center;
        gap: 20px !important;
      }
      #auth-branding > div:last-child > div > div:first-child {
        font-size: 20px !important;
      }
      .auth-form-box {
        width: 100% !important;
        max-width: 100%;
        padding: 28px 18px 24px !important;
        clip-path: none !important;
        border-radius: 16px;
      }
      .auth-form-box::after { display: none; }
    }
    @media (max-width: 480px) {
      #auth-main-layout {
        padding: 16px 12px 24px;
        gap: 16px;
      }
      #auth-branding {
        display: block !important;
      }
      #auth-branding h1 {
        font-size: 28px !important;
      }
      #auth-branding p {
        font-size: 12px !important;
        margin-bottom: 12px !important;
      }
      .auth-form-box {
        padding: 22px 14px 20px !important;
      }
    }

/* ════════════════════════════════════════════════════════
   AI Panel v3
   ════════════════════════════════════════════════════════ */
#ai-float-btn { position:fixed;bottom:28px;right:28px;width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#0e6aaf,#6b46c1);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(14,106,175,0.45);z-index:9990;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s,bottom .3s; }
#ai-float-btn::before { content:'';position:absolute;inset:-5px;border-radius:21px;background:linear-gradient(135deg,rgba(14,106,175,.35),rgba(107,70,193,.35));animation:aiPulse 2.8s ease-in-out infinite;z-index:-1; }
#ai-float-btn:hover { transform:scale(1.07);box-shadow:0 6px 28px rgba(14,106,175,0.6); }
#ai-float-btn svg { width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
#ai-fab-badge { position:absolute;top:-5px;right:-5px;background:#e74c3c;color:#fff;font-size:9px;font-weight:700;border-radius:99px;padding:2px 5px;min-width:16px;text-align:center;line-height:1.4;border:2px solid #fff;display:none; }
@keyframes aiPulse { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.2);opacity:0} }

#ai-chat-panel { position:fixed;bottom:90px;right:28px;width:400px;height:580px;background:var(--bg2);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.22),0 4px 16px rgba(0,0,0,0.1);z-index:9989;display:none;flex-direction:column;overflow:hidden;border:1px solid rgba(0,0,0,0.07);transform-origin:bottom right; }
@media(max-width:480px){ #ai-chat-panel { right:8px;left:8px;width:auto;bottom:82px; } }
#ai-chat-panel.open { display:flex;animation:aiPanelIn .22s cubic-bezier(.2,.8,.4,1.05) both; }
@keyframes aiPanelIn { from{opacity:0;transform:scale(0.9) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }

.ai-panel-header { padding:14px 16px;background:linear-gradient(135deg,#0a1e3d 0%,#1a1040 100%);display:flex;justify-content:space-between;align-items:center;flex-shrink:0; }
.ai-header-avatar { width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ai-header-avatar svg { width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.ai-header-title { font-size:13.5px;font-weight:700;color:#fff;letter-spacing:.2px; }
.ai-header-sub { font-size:10px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:5px;margin-top:2px; }
.ai-role-tag { background:rgba(255,255,255,.15);border-radius:4px;padding:1px 6px;font-size:9px;color:rgba(255,255,255,.9);font-weight:700;text-transform:uppercase;letter-spacing:.6px; }
.ai-online-dot { width:6px;height:6px;border-radius:50%;background:#4ade80;display:inline-block; }
.ai-close-btn { background:rgba(255,255,255,.1);border:none;color:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .15s;font-family:var(--font); }
.ai-close-btn:hover { background:rgba(255,255,255,.22); }

#ai-chat-messages { flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg3);scroll-behavior:smooth; }
.ai-msg-bot { display:flex;gap:8px;align-items:flex-start; }
.ai-msg-bot .ai-avatar { width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#0e6aaf,#6b46c1);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ai-msg-bot .ai-avatar svg { width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2; }
.ai-bubble-bot { background:var(--bg);border:1px solid var(--border);border-radius:4px 14px 14px 14px;padding:10px 13px;font-size:12.5px;color:var(--text);line-height:1.55;max-width:88%;box-shadow:0 1px 4px rgba(0,0,0,.04); }
.ai-bubble-user { background:linear-gradient(135deg,#0e6aaf,#6b46c1);color:#fff;border-radius:14px 4px 14px 14px;padding:10px 13px;font-size:12.5px;max-width:88%;margin-left:auto;box-shadow:0 2px 8px rgba(14,106,175,.25); }

.ai-chips-bar { padding:8px 12px;border-top:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap;background:var(--bg2);flex-shrink:0; }
.ai-chip { font-size:11px;padding:5px 11px;border-radius:99px;cursor:pointer;font-family:var(--font);transition:opacity .15s,transform .1s;border:1.5px solid;font-weight:500; }
.ai-chip:hover { opacity:.8;transform:scale(1.03); }
.ai-chip:active { transform:scale(.97); }

.ai-input-bar { padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:8px;background:var(--bg2);flex-shrink:0; }
.ai-input-bar input { flex:1;padding:9px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:12.5px;font-family:var(--font);background:var(--bg);color:var(--text);outline:none;transition:border .15s; }
.ai-input-bar input:focus { border-color:#0e6aaf; }
.ai-send-btn { width:38px;height:38px;background:linear-gradient(135deg,#0e6aaf,#6b46c1);color:#fff;border:none;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s; }
.ai-send-btn:hover { opacity:.85; }
.ai-send-btn:disabled { opacity:.4;cursor:default; }

.ai-typing { display:flex;gap:4px;align-items:center;padding:2px 0; }
.ai-typing span { width:6px;height:6px;border-radius:50%;background:#a0aec0;animation:aiBounce .9s infinite; }
.ai-typing span:nth-child(2){animation-delay:.15s} .ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes aiBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

@media(max-width:480px){
  #ai-chat-panel{width:calc(100vw - 20px);right:10px;bottom:82px;height:70vh;}
}

/* ── Impression / PDF ─────────────────────────────────────────── */
@media print {
  body { background:#fff !important; color:#000 !important; font-family:Arial,sans-serif; }
  .sidebar, .topbar, .mobile-bottom-nav, #mobile-bottom-nav,
  .btn, button, [data-modal-close], .action-menu, .fab,
  #ai-chat-btn, #ai-chat-panel, .sidebar-overlay { display:none !important; }
  .main { margin:0 !important; padding:0 !important; }
  .content { padding:0 !important; max-width:100% !important; }
  .card { border:1px solid #ddd !important; box-shadow:none !important; break-inside:avoid; }
  .metric-card { border:1px solid #ddd !important; background:#f9f9f9 !important; }
  .metric-value { color:#000 !important; }
  .metric-label { color:#555 !important; }
  table { border-collapse:collapse !important; width:100% !important; }
  th, td { border:1px solid #ddd !important; padding:6px 10px !important; color:#000 !important; font-size:11px !important; }
  thead tr { background:#f0f0f0 !important; }
  tfoot tr { background:#e8e8e8 !important; font-weight:bold; }
  h2 { font-size:16px !important; color:#000 !important; border-bottom:2px solid #0E6AAF; padding-bottom:6px; margin-bottom:16px; }
  .green, [style*="--green"] { color:#166534 !important; }
  .red, [style*="--red"] { color:#991b1b !important; }
  @page { margin:15mm; size:A4; }
}

/* ── Signature canvas ─────────────────────────────────────────── */
#sig-canvas { touch-action:none; user-select:none; }

/* ── Assistant IA flottant ───────────────────────────────────── */
#ai-float-btn { position:fixed;bottom:28px;right:28px;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#0e6aaf,#6b46c1);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(14,106,175,0.45);z-index:8888;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s; }
#ai-float-btn:hover { transform:scale(1.08);box-shadow:0 6px 28px rgba(14,106,175,0.6); }
#ai-float-btn svg { width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
#ai-chat-panel { position:fixed;bottom:92px;right:28px;width:370px;height:520px;background:var(--bg2);border-radius:18px;box-shadow:0 12px 48px rgba(0,0,0,0.18);z-index:8887;display:none;flex-direction:column;overflow:hidden;border:1px solid var(--border); }
.ai-msg-bot { display:flex;gap:8px;align-items:flex-start; }
.ai-avatar { width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#0e6aaf,#6b46c1);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ai-avatar svg { width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.ai-bubble-bot { background:var(--bg);border:1px solid var(--border);border-radius:4px 14px 14px 14px;padding:10px 13px;font-size:12.5px;color:var(--text);line-height:1.5;max-width:88%; }
.ai-bubble-user { background:linear-gradient(135deg,#0e6aaf,#6b46c1);color:#fff;border-radius:14px 4px 14px 14px;padding:10px 13px;font-size:12.5px;max-width:88%;margin-left:auto; }
.ai-typing { display:flex;gap:4px;align-items:center;padding:2px 0; }
.ai-typing span { width:6px;height:6px;border-radius:50%;background:#a0aec0;animation:aiBounce .9s infinite; }
.ai-typing span:nth-child(2){animation-delay:.15s} .ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes aiBounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }
.ai-chip { font-size:11px;padding:4px 10px;border-radius:99px;cursor:pointer;font-family:var(--font);transition:opacity .15s;border:1.5px solid; }
.ai-chip:hover { opacity:.8; }
@media (max-width:480px) { #ai-chat-panel { width:calc(100vw - 24px);right:12px;bottom:80px; } }