/* ================================================================
   Suivi des Affaires — 7G SAS
   Palette: Indigo #4f46e5 | Fonts: Syne + DM Sans
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg: #f0f2f8;
  --sidebar-bg: #1e1b4b;
  --sidebar-txt: #c7d2fe;
  --sidebar-active: #4f46e5;
  --card-bg: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --indigo: #4f46e5;
  --indigo-light: #6366f1;
  --blue: #0369a1;
  --green: #15803d;
  --orange: #c2410c;
  --purple: #6d28d9;
  --yellow: #a16207;
  --red: #dc2626;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10);
}
.dark {
  --bg: #0f0f1a;
  --sidebar-bg: #0a0a14;
  --sidebar-txt: #a5b4fc;
  --sidebar-active: #4f46e5;
  --card-bg: #18182e;
  --border: #2d2d4e;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
}
/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.95) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideUpSheet {
  from { transform: translateY(60px); opacity: .7; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes badgePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* View entrance */
.view-section:not(.hidden) { animation: fadeIn .16s ease both; }

/* Card staggered entrance */
.cards-grid .affaire-card,
.cards-list .affaire-card { animation: fadeInUp .2s ease both; }
.cards-grid .affaire-card:nth-child(1),.cards-list .affaire-card:nth-child(1) { animation-delay: .02s; }
.cards-grid .affaire-card:nth-child(2),.cards-list .affaire-card:nth-child(2) { animation-delay: .05s; }
.cards-grid .affaire-card:nth-child(3),.cards-list .affaire-card:nth-child(3) { animation-delay: .08s; }
.cards-grid .affaire-card:nth-child(4),.cards-list .affaire-card:nth-child(4) { animation-delay: .11s; }
.cards-grid .affaire-card:nth-child(5),.cards-list .affaire-card:nth-child(5) { animation-delay: .14s; }
.cards-grid .affaire-card:nth-child(6),.cards-list .affaire-card:nth-child(6) { animation-delay: .17s; }
.cards-grid .affaire-card:nth-child(n+7),.cards-list .affaire-card:nth-child(n+7) { animation-delay: .20s; }

/* KPI stagger */
.kpi-bar .kpi-card { animation: fadeInUp .2s ease both; }
.kpi-bar .kpi-card:nth-child(1) { animation-delay: .04s; }
.kpi-bar .kpi-card:nth-child(2) { animation-delay: .08s; }
.kpi-bar .kpi-card:nth-child(3) { animation-delay: .12s; }
.kpi-bar .kpi-card:nth-child(4) { animation-delay: .16s; }

/* Modal entrance */
.modal-overlay:not(.hidden) { animation: fadeIn .14s ease both; }
.modal-overlay:not(.hidden) .modal { animation: scaleIn .22s cubic-bezier(.34,1.56,.64,1) both; }

/* Sidebar buttons */
.sidebar-btn { transition: all .14s cubic-bezier(.34,1.56,.64,1); }
.sidebar-btn.active { animation: slideInLeft .15s ease both; }

/* Toast entrance */
.toast { animation: slideInLeft .18s ease both; }

/* Button press */
.btn-primary-sm:active  { transform: scale(.96); }
.btn-new-dossier:active { transform: scale(.96); }
.action-btn:active      { transform: scale(.96); }
.topbar-btn:active      { transform: scale(.95); }

/* Badge pop when updated */
.badge-pop { animation: badgePop .35s ease; }

/* Theme toggle */
.btn-theme-toggle {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s ease; flex-shrink: 0;
}
.btn-theme-toggle:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); transform: rotate(20deg); }

/* ── Mobile bottom nav ─────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 58px;
  background: var(--sidebar-bg);
  border-top: 1px solid rgba(255,255,255,.08);
  z-index: 95;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-nav-btn {
  flex: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent; border: none;
  color: rgba(255,255,255,.35); font-size: 8px; font-weight: 700;
  cursor: pointer; transition: all .14s; position: relative;
  text-transform: uppercase; letter-spacing: .4px;
}
.mobile-nav-btn i { font-size: 18px; display: block; transition: transform .14s cubic-bezier(.34,1.56,.64,1); }
.mobile-nav-btn.active { color: rgba(255,255,255,.9); }
.mobile-nav-btn.active i { color: var(--indigo-light); transform: scale(1.12); }
.mobile-nav-btn:active i { transform: scale(.88); }
.mobile-nav-dot {
  position: absolute; top: 8px; right: calc(50% - 16px);
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444; display: none; border: 1.5px solid var(--sidebar-bg);
  animation: badgePop .3s ease;
}
.mobile-nav-dot.on { display: block; }

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-size: 14px; }
body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }
.font-display { font-family: 'Syne', sans-serif; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ── Layout ─────────────────────────────────────────────────── */
.app-wrapper { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: 220px; min-width: 220px; height: 100vh;
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  overflow-y: auto; flex-shrink: 0;
}
.sidebar-header {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar-logo {
  width: 36px; height: 36px; background: var(--indigo);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; flex-shrink: 0;
}
.sidebar-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .5px; line-height: 1.2; }
.sidebar-version { font-size: 10px; color: rgba(255,255,255,.35); font-weight: 500; }
.sidebar-body { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.sidebar-section-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.3); margin-bottom: 6px; padding: 0 6px; }
.sidebar-btn {
  width: 100%; padding: 9px 10px; border: none; background: transparent;
  color: var(--sidebar-txt); font-size: 12px; font-weight: 600;
  border-radius: 10px; display: flex; align-items: center; gap: 8px;
  transition: all .12s; text-align: left; position: relative;
}
.sidebar-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-btn.active { background: var(--indigo); color: #fff; }
.sidebar-btn i { width: 16px; font-size: 13px; flex-shrink: 0; }
.sidebar-btn .badge { margin-left: auto; background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 99px; }
.sidebar-btn.active .badge { background: rgba(255,255,255,.25); }
.filter-btn { width: 100%; padding: 7px 10px; background: transparent; border: none; color: var(--sidebar-txt); font-size: 11px; font-weight: 500; border-radius: 8px; display: flex; align-items: center; gap: 7px; transition: all .12s; }
.filter-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.filter-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.filter-count { margin-left: auto; font-size: 9px; color: rgba(255,255,255,.4); font-weight: 700; }
.sidebar-footer { padding: 12px 10px; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 6px; }
.btn-new-dossier { width: 100%; padding: 11px; background: var(--indigo); color: #fff; border: none; border-radius: 12px; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .12s; }
.btn-new-dossier:hover { filter: brightness(1.1); }
.user-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.07); }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.user-name { font-size: 11px; font-weight: 700; color: #fff; }
.user-role { font-size: 9px; color: rgba(255,255,255,.4); }
.user-logout { margin-left: auto; background: none; border: none; color: rgba(255,255,255,.4); font-size: 12px; padding: 4px; border-radius: 6px; transition: all .12s; }
.user-logout:hover { color: var(--red); background: rgba(220,38,38,.1); }

/* ── Service colors ─────────────────────────────────────────── */
.dot-administration { background: #a78bfa; }
.dot-bet_dessin { background: #38bdf8; }
.dot-bet_production { background: #4ade80; }
.dot-commerciale { background: #fbbf24; }
.dot-terrain { background: #fb923c; }

/* ── Main content ───────────────────────────────────────────── */
.main-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--card-bg); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 12px; }
.topbar-title { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; color: var(--indigo); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.search-box { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; }
.search-box i { color: var(--text-muted); font-size: 12px; }
.search-box input { border: none; background: transparent; outline: none; font-size: 12px; color: var(--text); width: 200px; }
.topbar-btn { padding: 7px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 5px; transition: all .12s; }
.topbar-btn:hover { background: var(--card-bg); color: var(--text); }
.btn-primary-sm { padding: 8px 14px; background: var(--indigo); color: #fff; border: none; border-radius: 10px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; transition: all .12s; }
.btn-primary-sm:hover { filter: brightness(1.08); }

/* ── KPI bar ────────────────────────────────────────────────── */
.kpi-bar { display: flex; gap: 10px; padding: 16px 24px 0; overflow-x: auto; }
.kpi-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; cursor: pointer; transition: all .12s; flex-shrink: 0; }
.kpi-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 4px; }
.kpi-value { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; line-height: 1; }

/* ── Info bar ───────────────────────────────────────────────── */
.info-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; }
.info-date { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.info-filter { font-size: 11px; font-weight: 700; color: var(--indigo); }
.info-count { font-size: 10px; color: var(--text-muted); margin-left: 6px; }
.view-toggle { display: flex; gap: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.view-toggle-btn { width: 28px; height: 24px; border: none; background: transparent; border-radius: 5px; color: var(--text-muted); font-size: 11px; transition: all .12s; display: flex; align-items: center; justify-content: center; }
.view-toggle-btn.active { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow); }

/* ── View sections ──────────────────────────────────────────── */
.view-section { padding: 0 24px 24px; flex: 1; }

/* ── Cards grid ─────────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cards-list { display: flex; flex-direction: column; gap: 6px; }

/* ── Affaire card ───────────────────────────────────────────── */
.affaire-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 0;
  cursor: pointer; transition: box-shadow .18s ease, transform .18s ease;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 5px rgba(0,0,0,.07);
}
.affaire-card:hover { box-shadow: 0 7px 22px rgba(0,0,0,.12); transform: translateY(-2px); }
.affaire-card.urgent { border-left: 3px solid var(--red); }
.affaire-card.list-mode { border-radius: 10px; padding: 9px 13px; display: flex; align-items: center; gap: 12px; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card-service-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 8px; border-radius: 99px; }
.svc-administration { background: #ede9fe; color: #6d28d9; }
.svc-bet_dessin { background: #e0f2fe; color: #0369a1; }
.svc-bet_production { background: #dcfce7; color: #15803d; }
.svc-commerciale { background: #fef3c7; color: #a16207; }
.svc-terrain { background: #ffedd5; color: #c2410c; }
.svc-intervention { background: #fee2e2; color: #b91c1c; }
.card-num { font-size: 9px; font-family: monospace; color: var(--text-muted); font-weight: 700; }
.card-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 3px; }
.card-client { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.card-date { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.card-badges { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.badge-urgent { font-size: 9px; font-weight: 800; color: var(--red); background: #fee2e2; padding: 2px 6px; border-radius: 6px; }
.badge-bat { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.bat-ok { background: #dcfce7; color: var(--green); }
.bat-pending { background: #fef3c7; color: var(--yellow); }
.prog-bar-wrap { height: 4px; background: #e2e8f0; border-radius: 99px; margin-top: 9px; overflow: hidden; }
.prog-bar { height: 100%; background: var(--indigo); border-radius: 99px; transition: width .4s; }

/* ── Empty state ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state i { font-size: 48px; margin-bottom: 12px; display: block; color: #cbd5e1; }
.empty-state p { font-size: 14px; font-weight: 600; }

/* ── Login ──────────────────────────────────────────────────── */
.login-overlay { position: fixed; inset: 0; display: flex; z-index: 1000; overflow: hidden; }
/* Panneau gauche */
.login-left { width: 300px; min-width: 300px; background: linear-gradient(160deg, #1e1b4b 0%, #312e81 100%); display: flex; flex-direction: column; padding: 36px 28px; justify-content: space-between; }
.login-left-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.login-logo { width: 60px; height: 60px; background: linear-gradient(135deg, #4f46e5, #6366f1); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; box-shadow: 0 8px 24px rgba(99,102,241,.4); }
.login-title { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 800; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: .5px; }
.login-subtitle { font-size: 11px; color: rgba(255,255,255,.4); text-align: center; }
.login-left-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 28px 0; }
.login-prompt { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255,255,255,.3); font-size: 12px; font-weight: 600; text-align: center; }
.login-prompt i { font-size: 30px; }
.login-selected-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.4); margin-bottom: 8px; }
.login-selected-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-selected-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0; background: #4f46e5; }
.login-selected-info div:first-child { font-size: 13px; font-weight: 700; color: #fff; }
.login-selected-info div:last-child { font-size: 10px; color: rgba(255,255,255,.5); margin-top: 2px; }
.login-field { margin-bottom: 12px; }
.login-field label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 6px; }
.login-field input { width: 100%; padding: 13px 14px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.15); border-radius: 12px; font-size: 20px; text-align: center; letter-spacing: 6px; outline: none; transition: border-color .12s; color: #fff; }
.login-field input:focus { border-color: #6366f1; background: rgba(255,255,255,.12); }
.login-field input::placeholder { color: rgba(255,255,255,.2); letter-spacing: 2px; font-size: 14px; }
.login-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; transition: all .12s; box-shadow: 0 4px 16px rgba(99,102,241,.4); margin-bottom: 8px; font-family: inherit; }
.login-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.login-error { background: rgba(220,38,38,.2); border: 1px solid rgba(220,38,38,.3); color: #fca5a5; font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; display: none; text-align: center; }
.login-back-btn { width: 100%; padding: 8px; background: transparent; border: none; color: rgba(255,255,255,.4); font-size: 12px; font-weight: 600; cursor: pointer; transition: color .12s; font-family: inherit; }
.login-back-btn:hover { color: rgba(255,255,255,.8); }
.login-left-footer { text-align: center; }
.login-version-badge { font-size: 10px; color: rgba(255,255,255,.2); font-weight: 600; }
/* Panneau droit */
.login-right { flex: 1; background: #f0f2f8; overflow-y: auto; padding: 28px 32px; }
.login-right-title { font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; }
.login-profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.login-service-group { background: #fff; border-radius: 16px; padding: 16px; border: 1px solid #e2e8f0; }
.login-service-header { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.login-service-header i { font-size: 12px; }
.login-service-users { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-btn { padding: 10px 8px; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all .12s; cursor: pointer; min-width: 76px; }
.profile-btn:hover { border-color: #a5b4fc; background: #eef2ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,.12); }
.profile-btn.selected { border-color: #4f46e5; background: #eef2ff; box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
.profile-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.profile-name { font-size: 10px; font-weight: 700; color: #1e293b; text-align: center; line-height: 1.2; }

/* ── Dropdown menu ──────────────────────────────────────────── */
.dd-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); min-width: 160px; padding: 6px; z-index: 100; display: none; }
.dd-menu.open { display: block; }
.dd-item { width: 100%; padding: 8px 12px; background: transparent; border: none; border-radius: 8px; font-size: 12px; color: var(--text); text-align: left; display: flex; align-items: center; gap: 8px; transition: background .1s; }
.dd-item:hover { background: var(--bg); }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); }
.modal-overlay.hidden { display: none; }
.modal { background: var(--card-bg); border-radius: 20px; box-shadow: var(--shadow-md); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; width: 100%; }
.modal-sm { max-width: 420px; }
.modal-md { max-width: 600px; }
.modal-lg { max-width: 820px; }
.modal-xl { max-width: 960px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 24px 0; }
.modal-close { width: 32px; height: 32px; background: var(--bg); border: none; border-radius: 8px; color: var(--text-muted); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-close:hover { background: var(--border); }
.modal-body { padding: 16px 24px; flex: 1; }
.modal-footer { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; padding: 0 24px; border-bottom: 1px solid var(--border); margin-top: 12px; }
.tab-btn { padding: 10px 16px; background: transparent; border: none; font-size: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; transition: all .12s; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 4px; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--indigo); border-bottom-color: var(--indigo); }
.tab-badge { background: #ef4444; color: #fff; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 20px; line-height: 1.4; }
.tab-btn[data-tab="checklist"] .tab-badge { background: #15803d; }
.tab-btn[data-tab="notes"] .tab-badge { background: #6366f1; }

/* ── Form elements ──────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.form-input { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text); background: var(--card-bg); outline: none; transition: border-color .12s; }
.form-input:focus { border-color: var(--indigo); }
.form-select { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text); background: var(--card-bg); outline: none; appearance: none; transition: border-color .12s; }
.form-select:focus { border-color: var(--indigo); }
.form-textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text); background: var(--card-bg); outline: none; resize: vertical; min-height: 80px; transition: border-color .12s; }
.form-textarea:focus { border-color: var(--indigo); }
.form-row { display: flex; gap: 10px; }
.form-row > * { flex: 1; }
.form-check { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); }

/* ── Info blocks ─────────────────────────────────────────────── */
.info-block { background: var(--bg); border-radius: 12px; padding: 12px; }
.info-block-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 4px; }
.info-block-value { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }

/* ── BAT section ─────────────────────────────────────────────── */
.bat-card { flex: 1; border-radius: 12px; padding: 14px; }
.bat-plans { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 2px solid #93c5fd; }
.bat-signa { background: linear-gradient(135deg, #fdf2f8, #fce7f3); border: 2px solid #f9a8d4; }
.bat-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.bat-label-plans { color: #1d4ed8; }
.bat-label-signa { color: #be185d; }
.bat-value { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; }
.bat-value-plans { color: #1e40af; }
.bat-value-signa { color: #9d174d; }
.bat-status { font-size: 10px; font-weight: 700; margin-top: 4px; }

/* ── Action buttons ─────────────────────────────────────────── */
.action-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.action-btn { padding: 8px 14px; border: none; border-radius: 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px; transition: all .12s; }
.action-btn:hover { filter: brightness(.95); transform: translateY(-1px); }

/* ── Upload zone ─────────────────────────────────────────────── */
.upload-zone { border: 2px dashed #c7d2fe; border-radius: 16px; padding: 32px 20px; text-align: center; cursor: pointer; transition: all .15s; background: #fafaff; }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--indigo); background: #eef2ff; }
.upload-zone i { font-size: 36px; color: #a5b4fc; margin-bottom: 10px; display: block; }

/* ── Kanban ──────────────────────────────────────────────────── */
.kanban-wrapper { display: flex; gap: 12px; min-width: max-content; padding: 4px 0; align-items: flex-start; }
.kanban-col { width: 280px; flex-shrink: 0; }
.kanban-col-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px 12px 0 0; border: 1px solid; border-bottom: none; }
.kanban-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.kanban-col-count { margin-left: auto; font-size: 10px; font-weight: 700; }
.kanban-card-list { background: var(--bg); border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; min-height: 36px; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.kanban-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; }
.kanban-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); transform: translateY(-2px); }
.kanban-card.drag-over { border-color: var(--indigo); background: #eef2ff; }
.bg-svc-bet_dessin { background: #e0f2fe; } .bdr-bet_dessin { border-color: #7dd3fc; } .txt-bet_dessin { color: #0369a1; }
.bg-svc-bet_production { background: #dcfce7; } .bdr-bet_production { border-color: #86efac; } .txt-bet_production { color: #15803d; }
.bg-svc-commerciale { background: #fef3c7; } .bdr-commerciale { border-color: #fde68a; } .txt-commerciale { color: #a16207; }
.bg-svc-administration { background: #ede9fe; } .bdr-administration { border-color: #c4b5fd; } .txt-administration { color: #6d28d9; }
.bg-svc-terrain { background: #ffedd5; } .bdr-terrain { border-color: #fdba74; } .txt-terrain { color: #c2410c; }
.bg-svc-intervention { background: #fee2e2; } .bdr-intervention { border-color: #fca5a5; } .txt-intervention { color: #b91c1c; }

/* ── Type badges (duplication labeling) ─────────────────────── */
.type-badge-plans { background: #eff6ff; color: #1d4ed8; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.type-badge-signal { background: #fdf2f8; color: #be185d; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.type-badge-materiel { background: #fefce8; color: #854d0e; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.type-badge-dup { background: #fff7ed; color: #c2410c; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }

/* ── Table view ──────────────────────────────────────────────── */
.cards-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.cards-table th { background: var(--bg); text-align: left; padding: 9px 14px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.cards-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); vertical-align: middle; }
.cards-table tr:last-child td { border-bottom: none; }
.cards-table tbody tr:hover td { background: var(--bg); cursor: pointer; }

/* ── Calendar ────────────────────────────────────────────────── */
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendar-nav { display: flex; align-items: center; gap: 10px; }
.calendar-nav-btn { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); transition: all .12s; }
.calendar-nav-btn:hover { background: var(--bg); }
.calendar-month-label { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar-day-name { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); text-align: center; padding: 4px 0; }
.calendar-day { min-height: 80px; background: var(--bg); border-radius: 8px; padding: 6px; border: 1px solid transparent; transition: all .12s; }
.calendar-day:hover { border-color: var(--border); background: var(--card-bg); }
.calendar-day.cal-drop-target { border-color: var(--indigo); background: #eef2ff; border-style: dashed; }
.calendar-day.today { border-color: var(--indigo); background: #eef2ff; }
.calendar-day.other-month { opacity: .4; }
.calendar-day-num { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.calendar-day.today .calendar-day-num { color: var(--indigo); }
.calendar-event { background: var(--indigo); color: #fff; font-size: 9px; font-weight: 600; padding: 2px 5px; border-radius: 4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.calendar-event.urgent { background: var(--red); }

/* ── Production view ─────────────────────────────────────────── */
.prod-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.prod-tasks-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.task-row:last-child { border-bottom: none; }
.task-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all .12s; }
.task-check.done { background: var(--green); border-color: var(--green); color: #fff; }
.task-label { font-size: 12px; font-weight: 500; color: var(--text); flex: 1; }
.task-label.done { text-decoration: line-through; color: var(--text-muted); }

/* ── Note / Timeline ─────────────────────────────────────────── */
.note-item { display: flex; gap: 10px; }
.note-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.note-content { background: var(--bg); border-radius: 10px; padding: 8px 12px; flex: 1; }
.note-author { font-size: 10px; font-weight: 700; color: var(--text); }
.note-text { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.note-time { font-size: 9px; color: #cbd5e1; margin-top: 3px; }
.histo-item { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.histo-item:last-child { border-bottom: none; }
.histo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); margin-top: 4px; flex-shrink: 0; }
.histo-content { flex: 1; }
.histo-action { font-size: 11px; font-weight: 600; color: var(--text); }
.histo-time { font-size: 9px; color: var(--text-muted); }

/* ── Stats ───────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.stat-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 12px; }
.stat-bar-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.stat-bar-label { font-size: 11px; font-weight: 600; color: var(--text); width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-bar { height: 8px; background: var(--bg); border-radius: 99px; flex: 1; overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--indigo); border-radius: 99px; transition: width .6s; }
.stat-count { font-size: 10px; font-weight: 700; color: var(--text-muted); width: 24px; text-align: right; }

/* ── Settings ────────────────────────────────────────────────── */
.settings-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; }
.settings-section-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 800; color: var(--text); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.user-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.user-table th { background: var(--bg); text-align: left; padding: 8px 12px; font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.user-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.user-table tr:last-child td { border-bottom: none; }

/* ── Toast ───────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 10px 16px; border-radius: 12px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow-md); animation: slideIn .2s ease; display: flex; align-items: center; gap: 8px; max-width: 320px; }
.toast-success { background: #16a34a; color: #fff; }
.toast-error   { background: #dc2626; color: #fff; }
.toast-info    { background: #0369a1; color: #fff; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Confirm modal ───────────────────────────────────────────── */
.confirm-icon { width: 56px; height: 56px; border-radius: 50%; background: #fee2e2; color: var(--red); font-size: 22px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.confirm-title { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 800; text-align: center; text-transform: uppercase; color: var(--text); margin-bottom: 6px; }
.confirm-text { font-size: 12px; color: var(--text-muted); text-align: center; margin-bottom: 20px; }
.confirm-btns { display: flex; gap: 8px; }
.btn-cancel { flex: 1; padding: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.btn-confirm-dark { flex: 1; padding: 11px; background: #1e293b; color: #fff; border: none; border-radius: 12px; font-size: 13px; font-weight: 700; }

/* ── Carte affaire v2 ──────────────────────────────────────── */
.affaire-card-v2 {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  animation: fadeInUp .2s ease both;
}
.affaire-card-v2:hover { box-shadow: 0 6px 20px rgba(0,0,0,.11); transform: translateY(-2px); }
.affaire-card-v2.list-mode { display: flex; flex-direction: row; border-radius: 9px; }
.affaire-card-v2.list-mode .ac-header { border-radius: 9px 0 0 9px; min-width: 110px; flex-shrink: 0; }
.affaire-card-v2.list-mode .ac-body { flex: 1; display: flex; align-items: center; gap: 12px; padding: 8px 12px; flex-wrap: wrap; }
.ac-header { padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ac-body { padding: 10px 12px; }
.ac-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 3px; }
.ac-client { font-size: 11px; color: var(--text-muted); margin-bottom: 7px; }

/* ── Carte Kanban v2 ────────────────────────────────────────── */
.kanban-card-v2 {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.kanban-card-v2:hover { box-shadow: 0 5px 16px rgba(0,0,0,.10); transform: translateY(-2px); }
.dark .affaire-card-v2, .dark .kanban-card-v2 { background: #18182e; border-color: #2d2d4e; }

/* ── Mode sombre : overrides pour tableaux et formulaires ── */
.dark .modal,
.dark .modal-body,
.dark .modal-footer { background: #18182e; }

.dark .modal-header { background: #18182e; border-bottom-color: #2d2d4e; }

.dark .form-input,
.dark input[type="text"],
.dark input[type="date"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="password"],
.dark select,
.dark textarea {
  background: #0f0f1a !important;
  color: #e2e8f0 !important;
  border-color: #2d2d4e !important;
}

.dark .form-input:focus,
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: #4f46e5 !important;
  outline: none;
}

.dark .fiches-recues-item,
.dark .affaire-card {
  background: #18182e !important;
  border-color: #2d2d4e !important;
}

.dark .kanban-card-list,
.dark .kanban-col { background: #18182e !important; }

.dark table,
.dark th,
.dark td { background: #18182e !important; border-color: #2d2d4e !important; color: #e2e8f0 !important; }

.dark thead th { background: #0f0f1a !important; }

.dark .action-btn { background: #18182e !important; color: #e2e8f0 !important; border-color: #2d2d4e !important; }

.dark .tab-btn { background: transparent !important; color: #94a3b8 !important; }
.dark .tab-btn.active { background: #4f46e5 !important; color: #fff !important; }

.dark #echange-drop-zone { border-color: #2d2d4e !important; }
.dark #echange-drop-zone:hover { background: #1a1a30 !important; }

.dark .badge { border-color: #2d2d4e; }
/* ── Mode sombre : boutons workflow (background:#fff inline) ── */
.dark button[style*="background:#fff"],
.dark button[style*="background: #fff"] {
  background: #1e1e38 !important;
  border: 1px solid #3d3d60 !important;
}

/* ── Inputs et selects inline ── */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.dark select,
.dark textarea {
  background: #0f0f1a !important;
  color: #e2e8f0 !important;
  border-color: #2d2d4e !important;
  color-scheme: dark;
}

/* ── Fond blanc dans les cartes/listes inline ── */
.dark [style*="background:#f8fafc"],
.dark [style*="background:#f1f5f9"],
.dark [style*="background:#e2e8f0"],
.dark [style*="background:#f3f4f6"] {
  background: #18182e !important;
  color: #e2e8f0 !important;
}

/* ── Fond blanc pur inline ── */
.dark [style*="background:#fff"]:not(button),
.dark [style*="background: #fff"]:not(button) {
  background: #18182e !important;
}

/* ── Texte sombre sur fond clair ── */
.dark [style*="color:#1e293b"],
.dark [style*="color:#111"],
.dark [style*="color:#374151"],
.dark [style*="color:#0f172a"] {
  color: #e2e8f0 !important;
}

/* ── Bordures claires → sombres ── */
.dark [style*="border:1px solid #e2e8f0"],
.dark [style*="border:1px solid #e5e7eb"],
.dark [style*="border:1px solid #f0f0f0"] {
  border-color: #2d2d4e !important;
}

/* ── Header info panel ── */
.dark .modal-header { background: #18182e !important; }

/* ── Section bg dans les vues ── */
.dark .view-section { background: var(--bg); }

/* ── Scrollbar ── */
.dark ::-webkit-scrollbar-thumb { background: #2d2d4e; }
.dark ::-webkit-scrollbar-track { background: #0f0f1a; }



/* ── Niveaux d'urgence ───────────────────────────────────────── */
.urgence-1 { background: #f8fafc; color: #64748b; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 99px; border: 1px solid #e2e8f0; }
.urgence-2 { background: #fff7ed; color: #c2410c; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 99px; border: 1px solid #fed7aa; }
.urgence-3 { background: #fee2e2; color: var(--red); font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: 99px; border: 1px solid #fecaca; animation: urgencePulse 1.5s ease-in-out infinite; }
@keyframes urgencePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.3); } 50% { box-shadow: 0 0 0 4px rgba(220,38,38,0); } }
.urgence-dot-1 { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; flex-shrink: 0; }
.urgence-dot-2 { width: 8px; height: 8px; border-radius: 50%; background: #f97316; flex-shrink: 0; }
.urgence-dot-3 { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; animation: urgencePulse 1.5s ease-in-out infinite; }

/* ── Service Étude ───────────────────────────────────────────── */
.dot-etude { background: #94a3b8; }
.svc-etude { background: #f1f5f9; color: #475569; }
.bg-svc-etude { background: #f1f5f9; }
.bdr-etude { border-color: #cbd5e1; }
.txt-etude { color: #475569; }

/* ── Statut client ───────────────────────────────────────────── */
.statut-client-en_attente { background: #f1f5f9; color: #475569; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.statut-client-retours_recus { background: #fff7ed; color: #c2410c; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.statut-client-valide { background: #dcfce7; color: var(--green); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.statut-client-refus { background: #fee2e2; color: var(--red); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }

/* ── Fiche de production ──────────────────────────────────────── */
.fiche-ligne { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); margin-bottom: 4px; }
.fiche-ligne-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all .12s; }
.fiche-ligne-check.done { background: var(--green); border-color: var(--green); color: #fff; }
.fiche-ligne-label { flex: 1; font-size: 12px; font-weight: 500; color: var(--text); }
.fiche-ligne-label.done { text-decoration: line-through; color: var(--text-muted); }
.fiche-ligne-qty { font-size: 11px; font-weight: 700; color: var(--indigo); min-width: 40px; text-align: right; }
.fiche-envoyee-badge { display: inline-flex; align-items: center; gap: 5px; background: #dcfce7; color: #15803d; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px; }
.fiche-recue-badge { display: inline-flex; align-items: center; gap: 5px; background: #eff6ff; color: #1d4ed8; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px; }
.fiches-recues-item { background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--indigo); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 8px; }

/* ── Relances ─────────────────────────────────────────────────── */
.relance-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.relance-item:last-child { border-bottom: none; }
.relance-type-email { background: #eff6ff; color: #1d4ed8; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
.relance-type-telephone { background: #f0fdf4; color: var(--green); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
.relance-type-courrier { background: #fef3c7; color: var(--yellow); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
.relance-reponse { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 8px 10px; margin-top: 6px; }

/* ── Mobile responsive ────────────────────────────────────────── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90; }
.sidebar-overlay.open { display: block; }
.btn-sidebar-toggle { display: none; width: 36px; height: 36px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; align-items: center; justify-content: center; font-size: 14px; color: var(--text-muted); cursor: pointer; flex-shrink: 0; }

@media (max-width: 768px) {
  /* Bottom nav visible */
  .mobile-bottom-nav { display: flex; }

  /* Sidebar: drawer from left */
  .btn-sidebar-toggle { display: flex; }
  .sidebar {
    position: fixed; left: -240px; top: 0; bottom: 0; z-index: 100;
    height: 100dvh; /* fix: 100vh inclut la barre URL mobile -> user-bar inaccessible */
    transition: left .25s cubic-bezier(.25,.46,.45,.94);
  }
  .sidebar.mobile-open { left: 0; }
  /* Garantit que .user-bar reste visible meme avec home indicator iOS */
  .sidebar .user-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    position: sticky; bottom: 0; background: var(--sidebar-bg); z-index: 2;
  }
  .sidebar .sidebar-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) * 0.5);
  }

  /* Main layout */
  .app-wrapper { display: block; }
  .main-content { height: 100dvh; overflow-y: auto; padding-bottom: 58px; }

  /* Topbar compact */
  .topbar { padding: 8px 12px; flex-wrap: nowrap; gap: 6px; }
  .topbar-left { flex: 1; min-width: 0; gap: 8px; }
  .topbar-right { gap: 4px; }
  /* Hide text labels in topbar on mobile */
  .topbar-right .topbar-btn span,
  .topbar-right .btn-primary-sm span { display: none; }
  .topbar-right .topbar-btn { padding: 7px 10px; }
  .topbar-right .btn-primary-sm { padding: 8px 11px; }
  .search-box { flex: 1; }
  .search-box input { width: 100%; min-width: 60px; }
  .topbar-title { font-size: 14px; }

  /* KPI */
  .kpi-bar { padding: 10px 12px 0; gap: 8px; }
  .kpi-card { padding: 10px 14px; flex-shrink: 0; }
  .kpi-value { font-size: 22px !important; }
  .kpi-label { font-size: 8px; }

  /* View content */
  .view-section { padding: 0 12px 16px; }
  .cards-grid { grid-template-columns: 1fr; gap: 8px; }

  /* Kanban horizontally scrollable */
  .kanban-wrapper { gap: 8px; }
  .kanban-col { width: 270px; }

  /* Prod */
  .prod-layout { grid-template-columns: 1fr; }
  .prod-panel-sticky { position: static; }

  /* Modal → bottom sheet */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-overlay:not(.hidden) .modal { animation: slideUpSheet .26s cubic-bezier(.25,.46,.45,.94) both !important; }
  .modal { border-radius: 22px 22px 0 0 !important; max-height: 92dvh; max-width: 100% !important; }
  .modal.modal-sm,.modal.modal-md,.modal.modal-lg,.modal.modal-xl { max-width: 100% !important; }

  /* Tabs */
  .tabs { overflow-x: auto; padding: 0 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { padding: 10px 12px; font-size: 11px; white-space: nowrap; }

  /* View toggle hidden */
  .view-toggle { display: none; }
  #mode-table { display: none; }

  /* Touch targets minimum 44px */
  .sidebar-btn { min-height: 44px; padding: 11px 10px; }
  .filter-btn  { min-height: 40px; padding: 9px 10px; }
  .dd-item     { min-height: 40px; }
  .action-btn  { min-height: 40px; }

  /* Cards list mode better on mobile */
  .affaire-card.list-mode { flex-wrap: nowrap; }

  /* Stat cards */
  .stats-grid { grid-template-columns: 1fr; }

  /* Login: stack vertically */
  .login-overlay { flex-direction: column; }
  .login-left { width: 100%; min-width: unset; padding: 20px; justify-content: flex-start; gap: 16px; }
  .login-left-body { padding: 12px 0; }
  .login-right { padding: 16px; }
  .login-profiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Procedures cards */
  #view-procedures > div { padding: 0 0 16px; }

  /* Dashboard commercial: 2-col → 1-col on mobile */
  #dash-comm-grid { grid-template-columns: 1fr !important; }
}

/* ── Machine chips ─────────────────────────────────────────────── */
.machine-chip { padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; font-size: 10px; font-weight: 600; color: var(--text); cursor: pointer; transition: all .12s; text-align: left; }
.machine-chip:hover { border-color: #ef4444; color: #ef4444; }

/* ── Checklist templates ───────────────────────────────────────── */
.template-btn { padding: 4px 10px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 20px; font-size: 10px; font-weight: 700; color: #475569; cursor: pointer; transition: all .12s; }
.template-btn:hover { background: #eef2ff; border-color: #a5b4fc; color: #4f46e5; }

/* ── Bouton déplacer carte (P18) ─────────────────────────────────── */
.card-move-btn { background: rgba(255,255,255,.7); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 10px; color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: all .15s; }
.card-move-btn:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* ── Assistant IA flottant (P28) ────────────────────────────────── */
.ai-chat-fab { position: fixed; bottom: 28px; right: 28px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border: none; font-size: 20px; box-shadow: 0 4px 20px rgba(99,102,241,.5); cursor: pointer; z-index: 900; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.ai-chat-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(99,102,241,.6); }
.ai-chat-panel { position: fixed; bottom: 90px; right: 28px; width: 360px; max-height: 500px; background: #1e1b4b; border-radius: 20px; box-shadow: 0 16px 48px rgba(0,0,0,.4); z-index: 900; display: flex; flex-direction: column; overflow: hidden; }
.ai-chat-header { padding: 14px 16px; background: #16134a; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.ai-chat-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4f46e5; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; }
.ai-chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ai-msg { max-width: 90%; padding: 9px 13px; border-radius: 14px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.ai-msg-user { background: #4f46e5; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-msg-bot { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-msg.thinking { opacity: .6; animation: pulse 1s infinite; }
.ai-chat-input-wrap { padding: 12px; border-top: 1px solid rgba(255,255,255,.08); display: flex; gap: 8px; flex-shrink: 0; }
.ai-chat-input { flex: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 9px 12px; font-size: 12px; color: #fff; outline: none; font-family: inherit; }
.ai-chat-input::placeholder { color: rgba(255,255,255,.3); }
.ai-chat-input:focus { border-color: #6366f1; }
.ai-chat-send { background: #4f46e5; border: none; border-radius: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; font-size: 13px; flex-shrink: 0; transition: background .12s; }
.ai-chat-send:hover { background: #4338ca; }

/* ── Print / Export PDF ────────────────────────────────────────── */
@media print {
  .no-print, .sidebar, .topbar, .kpi-bar, .info-bar, .toast-container, .modal-overlay:not(.printing) { display: none !important; }
  .modal-overlay.printing { position: static !important; background: none !important; padding: 0 !important; backdrop-filter: none !important; }
  .modal-overlay.printing .modal { box-shadow: none !important; max-height: none !important; border-radius: 0 !important; width: 100% !important; max-width: 100% !important; }
  .modal-overlay.printing .modal-close,
  .modal-overlay.printing .modal-footer,
  .modal-overlay.printing .tabs { display: none !important; }
  .modal-overlay.printing .tab-btn.active + div,
  .modal-overlay.printing [id^="tab-"] { display: flex !important; }
  body { background: #fff !important; }
  @page { margin: 1.5cm; }
}

/* ── Motion reduced ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Utility ─────────────────────────────────────────────────── */
.hidden { display: none !important; }
.mono { font-family: monospace; letter-spacing: .05em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-print { }
@media print { .no-print { display: none !important; } }

/* ── Prod panel sticky ────────────────────────────────────────── */
.prod-panel-sticky { position: sticky; top: 16px; }

.affaire-card.list-mode { display:flex !important; flex-direction:row !important; align-items:stretch !important; }

/* ── Kanban polish (v3) — couleurs & formes ─────────────────── */
.kanban-col-header {
  border: none;
  padding: 11px 14px;
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 10px rgba(15,23,42,.12);
}
.kanban-col-header.bg-svc-administration { background: linear-gradient(135deg,#6d28d9,#a855f7); }
.kanban-col-header.bg-svc-bet_dessin     { background: linear-gradient(135deg,#0369a1,#38bdf8); }
.kanban-col-header.bg-svc-bet_production { background: linear-gradient(135deg,#15803d,#4ade80); }
.kanban-col-header .kanban-col-title { color: #fff; font-weight: 800; letter-spacing: .7px; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.kanban-col-header .kanban-col-count {
  color: #fff;
  background: rgba(255,255,255,.22);
  padding: 2px 9px;
  border-radius: 99px;
  min-width: 13px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  font-variant-numeric: tabular-nums;
}
.kanban-col-header .kanban-col-dot { background: #fff; }
.kanban-col-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 6px rgba(255,255,255,.7);
  flex-shrink: 0;
}
.kanban-card-list { border: none; border-radius: 0 0 14px 14px; padding: 9px; gap: 8px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); }
.kanban-card-list.drag-over { outline: 2px dashed var(--indigo); outline-offset: -5px; background: #eef2ff !important; }
.kanban-card {
  border: 1px solid rgba(15,23,42,.07);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 3px 10px rgba(15,23,42,.05);
}
.kanban-card:hover {
  box-shadow: 0 8px 22px rgba(15,23,42,.14);
  transform: translateY(-2px);
  border-color: rgba(15,23,42,.12);
}
.dark .kanban-card { border-color: #2d2d4e; box-shadow: none; }
.dark .kanban-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.dark .kanban-card-list { box-shadow: inset 0 0 0 1px #2d2d4e; }
.dark .kanban-card-list.drag-over { background: #1e1b4b !important; }
.dark .kanban-col-header { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 10px rgba(0,0,0,.35); }

/* ══════════════════════════════════════════════════════════════════════
   BRUTALIST POP — calque de thème ajouté le 2026-07-21
   100% présentation. Réversible : supprimer tout ce bloc = retour à l'ancien design.
   Ne modifie AUCUNE donnée ni logique.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#FBF6E9; --sidebar-bg:#111111; --sidebar-txt:#dcdcdc; --sidebar-active:#FFE100;
  --card-bg:#ffffff; --border:#111111; --text:#111111; --text-muted:#555555;
  --indigo:#111111; --indigo-light:#111111;
  --blue:#0b62c4; --green:#0f7a34; --orange:#d1560a; --purple:#7c3aed; --yellow:#a16207; --red:#e11414;
  --radius:0px; --radius-sm:0px;
  --shadow:4px 4px 0 #111111; --shadow-md:6px 6px 0 #111111;
}
.dark{
  --bg:#15150f; --sidebar-bg:#000000; --sidebar-txt:#e6e0c8; --card-bg:#1d1d14;
  --border:#FFE100; --text:#f4efdb; --text-muted:#b6ae8e;
}

/* ── Titres display ── */
.font-display,.sidebar-title,.topbar-title,.kpi-value{ font-family:'Syne',sans-serif; letter-spacing:.3px; }

/* ── Surfaces bordées : carré + bord noir épais + ombre dure ── */
.kpi-card,.affaire-card,.search-box,.topbar-btn,.btn-primary-sm,.btn-new-dossier,.view-toggle,
.modal,.dd-menu,.toast,.move-menu-popup,.notif-panel,
input,select,textarea,table{ border:2.5px solid var(--border) !important; border-radius:0 !important; }
.kpi-card,.modal,.toast,.dd-menu,.notif-panel,.move-menu-popup{ box-shadow:4px 4px 0 var(--border) !important; }

/* ── Sidebar ── */
.sidebar{ border-right:4px solid #111; }
.sidebar-header{ border-bottom:4px solid #FFE100; }
.sidebar-logo{ background:#FFE100 !important; color:#111 !important; border:2.5px solid #111; border-radius:0 !important; box-shadow:3px 3px 0 #111; }
.sidebar-btn{ border-radius:0 !important; }
.sidebar-btn.active{ background:#FFE100 !important; color:#111 !important; box-shadow:3px 3px 0 rgba(255,225,0,.35); font-weight:800; }
.sidebar-btn.active i{ color:#111 !important; }
.sidebar-btn .badge{ border-radius:0 !important; border:1.5px solid #000; }
.sidebar-btn.active .badge{ background:#111 !important; color:#FFE100 !important; }
.btn-new-dossier{ border-radius:0 !important; text-transform:uppercase; font-weight:800; letter-spacing:.3px; box-shadow:3px 3px 0 #000; }
.btn-new-dossier:not([style*="background"]){ background:#FFE100 !important; color:#111 !important; }
.user-avatar{ background:#FFE100 !important; color:#111 !important; border:2px solid #FFE100; }

/* ── Topbar ── */
.topbar{ background:#FFE100 !important; border-bottom:4px solid #111 !important; }
.topbar-title{ color:#111 !important; text-transform:uppercase; }
.search-box{ background:#fff !important; box-shadow:3px 3px 0 #111; }
.topbar-btn{ background:#fff !important; color:#111 !important; box-shadow:3px 3px 0 #111; font-weight:700; }
.btn-primary-sm{ background:#111 !important; color:#FFE100 !important; box-shadow:3px 3px 0 #111; text-transform:uppercase; font-weight:800; }
.btn-theme-toggle{ border-radius:0 !important; border:2.5px solid #111 !important; background:#fff !important; color:#111 !important; box-shadow:3px 3px 0 #111; }
.btn-theme-toggle:hover{ background:#111 !important; color:#FFE100 !important; transform:none; }

/* ── View toggle ── */
.view-toggle{ background:#fff !important; padding:0; box-shadow:3px 3px 0 #111; }
.view-toggle-btn{ border-radius:0 !important; border-right:2px solid #111; }
.view-toggle-btn.active{ background:#111 !important; color:#FFE100 !important; box-shadow:none; }

/* ── KPI ── */
.kpi-value{ color:#111 !important; }
.kpi-label{ color:#555 !important; font-weight:800; }
.kpi-card:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #111 !important; }
.kpi-card:first-child{ background:#FFE100 !important; }

/* ── Info bar ── */
.info-filter{ color:#111 !important; font-weight:800; }

/* ── Cartes affaires (un peu plus compactes) ── */
.cards-grid{ grid-template-columns:repeat(auto-fill,minmax(258px,1fr)) !important; gap:14px !important; }
.affaire-card{ overflow:hidden; }
.affaire-card:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #111 !important; }
.affaire-card.urgent{ border-left:6px solid var(--red) !important; }

/* ── Badges / chips → carré, bord noir ── */
.card-service-badge,.badge-urgent,.badge-bat,[class^="statut-client-"],[class*=" statut-client-"],[class^="urgence-"]{
  border-radius:0 !important; border:2px solid #111 !important; font-weight:800 !important;
}

/* ── Champs de formulaire ── */
input:focus,select:focus,textarea:focus{ outline:none !important; box-shadow:3px 3px 0 #FFE100 !important; }

/* ── Boutons génériques / actions ── */
.action-btn,.btn,.btn-secondary,.modal button,.dd-item{ border-radius:0 !important; }
button:active{ }

/* ── Barre de progression ── */
.prog-bar-wrap{ border:2px solid #111 !important; border-radius:0 !important; background:#fff !important; height:10px !important; }
.prog-bar{ border-radius:0 !important; }

/* ── Cercles : rester ronds ── */
.filter-dot,.user-avatar,.mobile-nav-dot,.dot-administration,.dot-bet_dessin,.dot-bet_production,
.dot-commerciale,.dot-terrain{ border-radius:50% !important; }

/* ── Feedback pression ── */
.btn-new-dossier:active,.btn-primary-sm:active,.topbar-btn:active,.action-btn:active{ transform:translate(3px,3px) !important; box-shadow:none !important; }

/* ── Mobile bottom nav ── */
.mobile-bottom-nav{ border-top:3px solid #FFE100; }
.mobile-nav-btn.active i{ color:#FFE100 !important; }
/* ══════════════════ FIN BRUTALIST POP ══════════════════ */
/* correctifs verification 2026-07-21 */
.affaire-card{ box-shadow:4px 4px 0 #111; }
.search-box input{ border:none !important; background:transparent !important; box-shadow:none !important; }
/* ── Tableau (cards-table) en Brutalist Pop — 2026-07-21 ── */
.cards-table{ border:3px solid #111 !important; border-radius:0 !important; box-shadow:4px 4px 0 #111 !important; overflow:hidden; background:#fff !important; }
.cards-table thead th{ background:#111 !important; color:#FFE100 !important; font-family:'Syne',sans-serif; font-size:10px !important; font-weight:800 !important; letter-spacing:.6px; padding:11px 12px !important; border-bottom:3px solid #111 !important; border-right:1px solid #333; }
.cards-table thead th:last-child{ border-right:none; }
.cards-table tbody td{ padding:10px 12px !important; border-bottom:2px solid #111 !important; border-right:1px solid #ececec; }
.cards-table tbody td:last-child{ border-right:none; }
.cards-table tbody tr:last-child td{ border-bottom:none !important; }
.cards-table tbody tr:hover td{ background:#FFF7CC !important; cursor:pointer; }
.cards-table td:first-child{ font-family:'Space Grotesk','DM Sans',monospace !important; font-weight:800 !important; color:#111 !important; font-size:12px !important; }
/* ── Vue KANBAN en Brutalist Pop — 2026-07-21 ── */
.kanban-col{ border:3px solid #111 !important; box-shadow:4px 4px 0 #111 !important; background:#fff !important; }
.kanban-col-header{ border:none !important; border-bottom:3px solid #111 !important; border-radius:0 !important; }
.kanban-col-header .kanban-col-title{ font-family:'Syne',sans-serif; text-shadow:none !important; }
.kanban-col-header .kanban-col-count{ background:#fff !important; color:#111 !important; border:2px solid #111 !important; border-radius:0 !important; padding:0 6px !important; box-shadow:1px 1px 0 #111; text-shadow:none !important; }
.kanban-col-header .kanban-col-dot{ border:1.5px solid #111; }
.kanban-card-list{ border:none !important; border-radius:0 !important; box-shadow:none !important; }
.kanban-card{ border:2.5px solid #111 !important; border-radius:0 !important; box-shadow:3px 3px 0 #111 !important; overflow:hidden; }
.kanban-card:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 #111 !important; }
/* ── Cartes affaires plus compactes — 2026-07-21 ── */
.kanban-col{ width:234px !important; }
.kanban-card p{ font-size:11.5px !important; line-height:1.25 !important; margin-bottom:2px !important; }
.kanban-card > div:last-child{ padding:6px 8px !important; }
.kanban-card-list{ gap:6px !important; padding:7px !important; }
.cards-grid{ grid-template-columns:repeat(auto-fill,minmax(232px,1fr)) !important; gap:12px !important; }
.affaire-card > div:last-child{ padding:9px 11px !important; }
.affaire-card p{ line-height:1.3 !important; }