/* ================================================================
   Suivi des Affaires — 7G SAS
   Palette: Indigo #322c95 | 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: #ccd5f9;
  --sidebar-active: #322c95;
  --card-bg: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --indigo: #322c95;
  --indigo-light: #27299b;
  --blue: #1c6892;
  --green: #267945;
  --orange: #af4f27;
  --purple: #563092;
  --yellow: #94641e;
  --red: #932f2f;
  --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: #1b2030;
  --sidebar-bg: #161a27;
  --sidebar-txt: #acb9f5;
  --sidebar-active: #322c95;
  --card-bg: #252b3c;
  --border: #8b8bd0;
  --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: #f4b4b4; 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: #c2b1f6; }
.dot-bet_dessin { background: #b1e1f6; }
.dot-bet_production { background: #b9eecd; }
.dot-commerciale { background: #f6e3b1; }
.dot-terrain { background: #f6d0b1; }

/* ── 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: #c9a2f2; color: #563092; }
.svc-bet_dessin { background: #7fcdf2; color: #1c6892; }
.svc-bet_production { background: #7ee3a6; color: #267945; }
.svc-commerciale { background: #f5cf6a; color: #94641e; }
.svc-terrain { background: #f7a86e; color: #af4f27; }
.svc-intervention { background: #f79191; color: #a43232; }
.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: #fcd5d5; padding: 2px 6px; border-radius: 6px; }
.badge-bat { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.bat-ok { background: #d0f9de; color: var(--green); }
.bat-pending { background: #faeebd; 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 — Brutalist Pop (accorde a l'interieur) ===== */
.login-overlay { position: fixed; inset: 0; display: flex; z-index: 1000; overflow: hidden; }
.login-left { width: 300px; min-width: 300px; background: #111111; display: flex; flex-direction: column; padding: 36px 28px; justify-content: space-between; border-right: 4px solid #3b9ad2; }
.login-left-logo { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.login-logo { width: 64px; height: 64px; background: #c9e6f7; border: 3px solid #111111; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #111111; box-shadow: 5px 5px 0 rgba(59,154,210,.34); }
.login-title { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 1px; }
.login-subtitle { font-size: 11px; color: #9fd2f0; text-align: center; font-weight: 700; letter-spacing: 1.5px; }
.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,.45); font-size: 12px; font-weight: 700; text-align: center; }
.login-prompt i { font-size: 30px; color: #9fd2f0; }
.login-selected-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #9fd2f0; margin-bottom: 8px; }
.login-selected-card { background: #fff; border: 2px solid #3b9ad2; border-radius: 0; padding: 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; box-shadow: 4px 4px 0 #3b9ad2; }
.login-selected-avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #111; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0; background: #111111; }
.login-selected-info div:first-child { font-size: 13px; font-weight: 800; color: #111; }
.login-selected-info div:last-child { font-size: 10px; color: #555; margin-top: 2px; font-weight: 600; }
.login-field { margin-bottom: 12px; }
.login-field label { font-size: 10px; font-weight: 800; color: #9fd2f0; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 6px; }
.login-field input { width: 100%; padding: 13px 14px; background: #fff; border: 2px solid #111; border-radius: 0; font-size: 20px; text-align: center; letter-spacing: 6px; outline: none; transition: box-shadow .1s; color: #111; font-weight: 700; }
.login-field input:focus { box-shadow: 4px 4px 0 #3b9ad2; }
.login-field input::placeholder { color: #bbb; letter-spacing: 2px; font-size: 14px; }
.login-btn { width: 100%; padding: 14px; background: #c9e6f7; color: #111; border: 2px solid #111; border-radius: 0; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; transition: transform .1s, box-shadow .1s; box-shadow: 4px 4px 0 #fff; margin-bottom: 8px; font-family: 'Syne', sans-serif; cursor: pointer; }
.login-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #fff; }
.login-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #fff; }
.login-error { background: #f4b4b4; border: 2px solid #111; color: #1f2430; font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 0; margin-bottom: 10px; display: none; text-align: center; box-shadow: 3px 3px 0 #111; }
.login-back-btn { width: 100%; padding: 8px; background: transparent; border: none; color: rgba(255,255,255,.5); font-size: 12px; font-weight: 700; cursor: pointer; transition: color .12s; font-family: inherit; }
.login-back-btn:hover { color: #9fd2f0; }
.login-left-footer { text-align: center; }
.login-version-badge { font-size: 10px; color: rgba(255,255,255,.35); font-weight: 700; letter-spacing: 1px; }
/* Panneau droit */
.login-right { flex: 1; background: #ffffff; overflow-y: auto; padding: 28px 32px; }
.login-right-title { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 800; color: #111; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; }
.login-profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.login-service-group { background: #fff; border-radius: 0; padding: 16px; border: 2px solid #111; box-shadow: 4px 4px 0 #111; }
.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: 3px solid #111; color: #111; }
.login-service-header i { font-size: 12px; }
.login-service-users { display: flex; flex-wrap: wrap; gap: 10px; }
.profile-btn { padding: 10px 8px; background: #fff; border: 2px solid #111; border-radius: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: transform .1s, box-shadow .1s, background .1s; cursor: pointer; min-width: 76px; box-shadow: 2px 2px 0 #111; }
.profile-btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 #111; background: #c9e6f7; }
.profile-btn.selected { background: #c9e6f7; box-shadow: 4px 4px 0 #111; }
.profile-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #111; background: var(--indigo-light); 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: #111; 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: #f4b4b4; color: #1f2430; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 20px; line-height: 1.4; }
.tab-btn[data-tab="checklist"] .tab-badge { background: #b8efcd; }
.tab-btn[data-tab="notes"] .tab-badge { background: #b4b5f4; }

/* ── 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, #e2eefd, #cfe2fb); border: 2px solid #96c0ef; }
.bat-signa { background: linear-gradient(135deg, #fae6f1, #f9dbec); border: 2px solid #f2a5cf; }
.bat-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.bat-label-plans { color: #2c4896; }
.bat-label-signa { color: #a72f61; }
.bat-value { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; }
.bat-value-plans { color: #354ea2; }
.bat-value-signa { color: #922c55; }
.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 #c5cef6; border-radius: 16px; padding: 32px 20px; text-align: center; cursor: pointer; transition: all .15s; background: #e7e7fd; }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--indigo); background: #e1e8fd; }
.upload-zone i { font-size: 36px; color: #acb9f5; 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: #e1e8fd; }
.bg-svc-bet_dessin { background: #7fcdf2; } .bdr-bet_dessin { border-color: #3aa8de; } .txt-bet_dessin { color: #1c6892; }
.bg-svc-bet_production { background: #7ee3a6; } .bdr-bet_production { border-color: #3fcb84; } .txt-bet_production { color: #267945; }
.bg-svc-commerciale { background: #f5cf6a; } .bdr-commerciale { border-color: #dfb02c; } .txt-commerciale { color: #94641e; }
.bg-svc-administration { background: #c9a2f2; } .bdr-administration { border-color: #a06fe8; } .txt-administration { color: #563092; }
.bg-svc-terrain { background: #f7a86e; } .bdr-terrain { border-color: #e58434; } .txt-terrain { color: #af4f27; }
.bg-svc-intervention { background: #f79191; } .bdr-intervention { border-color: #ee6363; } .txt-intervention { color: #a43232; }

/* ── Type badges (duplication labeling) ─────────────────────── */
.type-badge-plans { background: #e2eefd; color: #2c4896; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.type-badge-signal { background: #fae6f1; color: #a72f61; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.type-badge-materiel { background: #fcf9db; color: #7c5121; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.type-badge-dup { background: #fdf0e0; color: #af4f27; 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(6, 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: #e1e8fd; border-style: dashed; }
.calendar-day.today { border-color: var(--indigo); background: #e1e8fd; }
.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: #b7f1cc; color: #1f2430; }
.toast-error   { background: #efb8b8; color: #1f2430; }
.toast-info    { background: #b1def6; color: #1f2430; }
@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: #fcd5d5; 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: #252b3c; border-color: #8b8bd0; }

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

.dark .modal-header { background: #252b3c; border-bottom-color: #8b8bd0; }

.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: #1b2030 !important;
  color: #e2e8f0 !important;
  border-color: #8b8bd0 !important;
}

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

.dark .fiches-recues-item,
.dark .affaire-card {
  background: #252b3c !important;
  border-color: #8b8bd0 !important;
}

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

.dark table,
.dark th,
.dark td { background: #252b3c !important; border-color: #8b8bd0 !important; color: #e2e8f0 !important; }

.dark thead th { background: #1b2030 !important; }

.dark .action-btn { background: #252b3c !important; color: #e2e8f0 !important; border-color: #8b8bd0 !important; }

.dark .tab-btn { background: transparent !important; color: #94a3b8 !important; }
.dark .tab-btn.active { background: #bab7f0 !important; color: #1f2430 !important; }

.dark #echange-drop-zone { border-color: #8b8bd0 !important; }
.dark #echange-drop-zone:hover { background: #2d3446 !important; }

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

/* ── Inputs et selects inline ── */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.dark select,
.dark textarea {
  background: #1b2030 !important;
  color: #e2e8f0 !important;
  border-color: #8b8bd0 !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: #252b3c !important;
  color: #e2e8f0 !important;
}

/* ── Fond blanc pur inline ── */
.dark [style*="background:#fff"]:not(button),
.dark [style*="background: #fff"]:not(button) {
  background: #252b3c !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: #8b8bd0 !important;
}

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

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

/* ── Scrollbar ── */
.dark ::-webkit-scrollbar-thumb { background: #bfbfe8; }
.dark ::-webkit-scrollbar-track { background: #1b2030; }



/* ── 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: #fdf0e0; color: #af4f27; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 99px; border: 1px solid #f2d1ab; }
.urgence-3 { background: #fcd5d5; color: var(--red); font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: 99px; border: 1px solid #f7c7c7; 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: #f6cdb1; 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; }
.svc-facturation { background: #8f96f2; color: #3730a3; }
.bg-svc-facturation { background: #8f96f2; } .bdr-facturation { border-color: #5c66e6; } .txt-facturation { color: #3730a3; }
.kanban-col-header.bg-svc-facturation { background: linear-gradient(135deg,#8f96f2,#a0a6f5); }
.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: #fdf0e0; color: #af4f27; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.statut-client-valide { background: #d0f9de; color: var(--green); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.statut-client-refus { background: #fcd5d5; 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: #d0f9de; color: #267945; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px; }
.fiche-recue-badge { display: inline-flex; align-items: center; gap: 5px; background: #e2eefd; color: #2c4896; 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: #e2eefd; color: #2c4896; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
.relance-type-telephone { background: #e3faea; color: var(--green); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
.relance-type-courrier { background: #faeebd; color: var(--yellow); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
.relance-reponse { background: #e3faea; border: 1px solid #b7f1cb; 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: #e07b7b; color: #9c2626; }

/* ── 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: #e1e8fd; border-color: #a5b2f2; color: #322c95; }

/* ── 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, #bab7f0, #b4b5f4); color: #1f2430; 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: #bab7f0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #1f2430; 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: #bab7f0; color: #1f2430; 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: #7b7de0; }
.ai-chat-send { background: #bab7f0; border: none; border-radius: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #1f2430; cursor: pointer; font-size: 13px; flex-shrink: 0; transition: background .12s; }
.ai-chat-send:hover { background: #c1beea; }

/* ── 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,#c9a2f2,#d79ff5); }
.kanban-col-header.bg-svc-bet_dessin { background: linear-gradient(135deg,#7fcdf2,#8ad8f4); }
.kanban-col-header.bg-svc-bet_production { background: linear-gradient(135deg,#7ee3a6,#8ce8b2); }
.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: #e1e8fd !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: #8b8bd0; 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 #3a4156; }
.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:#f4f6f8; --sidebar-bg:#111111; --sidebar-txt:#dcdcdc; --sidebar-active:#c9e6f7;
  --card-bg:#ffffff; --border:#111111; --text:#111111; --text-muted:#555555;
  --indigo:#111111; --indigo-light:#111111;
  --blue:#2667b0; --green:#21783f; --orange:#b15b25; --purple:#52279b; --yellow:#94641e; --red:#9b2727;
  --radius:0px; --radius-sm:0px;
  --shadow:4px 4px 0 #111111; --shadow-md:6px 6px 0 #111111;
}
.dark{
  --bg:#15150f; --sidebar-bg:#000000; --sidebar-txt:#e4dfca; --card-bg:#1d1d14;
  --border:#3b9ad2; --text:#f2eedd; --text-muted:#88783a;
}

/* ── 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 #3b9ad2; }
.sidebar-logo{ background:#c9e6f7 !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:#c9e6f7 !important; color:#111 !important; box-shadow:3px 3px 0 rgba(59,154,210,.38); 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:#9fd2f0 !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:#c9e6f7 !important; color:#111 !important; }
.user-avatar{ background:#c9e6f7 !important; color:#111 !important; border:2px solid #3b9ad2; }

/* ── Topbar ── */
.topbar{ background:#c9e6f7 !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:#9fd2f0 !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:#9fd2f0 !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:#9fd2f0 !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; }

/* ── 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 #3b9ad2 !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 #3b9ad2; }
.mobile-nav-btn.active i{ color:#9fd2f0 !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:#9fd2f0 !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:#faf1c2 !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; }
/* ═══════════ CALENDRIER DES INTERVENTIONS (25/08/2026) ═══════════ */
.cal-mode-btn{padding:6px 15px;background:none;border:none;color:var(--text-muted);font-size:12px;font-weight:700;cursor:pointer;border-radius:7px}
.cal-mode-btn.on{background:var(--card-bg);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.09)}
.cal-lbl{display:block;font-size:10.5px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}

/* Légende / filtre par technicien */
.cal-tech{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1.5px solid var(--border);background:var(--card-bg);border-radius:99px;font-size:11.5px;font-weight:700;color:var(--text);cursor:pointer;transition:.12s}
.cal-tech:hover{border-color:var(--text-muted)}
.cal-tech i.pt{width:10px;height:10px;border-radius:99px;flex:none}
.cal-tech .nb{font-size:10px;color:var(--text-muted);font-weight:600}
.cal-tech.off{opacity:.4}
.cal-tech.solo{border-color:var(--text);box-shadow:0 0 0 2px rgba(79,70,229,.16)}

/* Grille mois */
.cal-dow{display:grid;grid-template-columns:repeat(6,1fr);background:var(--bg);border-bottom:1px solid var(--border)}
.cal-dow span{padding:9px 4px;text-align:center;font-size:10.5px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px}
.cal-mois{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(112px,auto)}
.cal-jour{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px 5px 7px;display:flex;flex-direction:column;gap:3px;min-width:0;position:relative}
.cal-jour:nth-child(6n){border-right:none}
.cal-jour.hors{background:var(--bg);opacity:.55}
.cal-jour.we{background:color-mix(in srgb,var(--bg) 60%,transparent)}
.cal-jour.auj{box-shadow:inset 0 0 0 2px var(--indigo)}
.cal-jour.drop{background:color-mix(in srgb,var(--indigo) 12%,var(--card-bg));box-shadow:inset 0 0 0 2px var(--indigo)}
.cal-num{font-size:11.5px;font-weight:800;color:var(--text-muted);display:flex;align-items:center;justify-content:space-between}
.cal-jour.auj .cal-num{color:var(--indigo)}
.cal-add{opacity:0;background:none;border:none;color:var(--indigo);cursor:pointer;font-size:11px;padding:0 3px}
.cal-jour:hover .cal-add{opacity:1}

/* Une intervention */
.cal-iv{border-left:4px solid #94a3b8;background:var(--bg);border-radius:5px;padding:3px 6px;font-size:10.5px;line-height:1.35;cursor:pointer;overflow:hidden;transition:.1s}
.cal-iv:hover{transform:translateX(2px);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.cal-iv .h{font-weight:800;color:var(--text)}
.cal-iv .c{color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cal-iv .dep{display:inline-block;background:var(--text-muted);color:var(--card-bg);font-size:9px;font-weight:800;padding:0 4px;border-radius:3px;vertical-align:1px;letter-spacing:.2px}
.cal-iv .h{font-variant-numeric:tabular-nums}
.cal-iv.drag{opacity:.4}
.cal-iv[draggable="true"]{cursor:grab}
.cal-iv .st{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;padding:0 4px;border-radius:4px;margin-left:3px}
.st-en_cours{background:#faeebd;color:#884923}
.st-envoyee{background:#d0f9de;color:#297044}
.st-terminee{background:#d0f9de;color:#297044}
.cal-iv.clot{opacity:.5}
.cal-plus{font-size:10px;color:var(--text-muted);font-weight:700;cursor:pointer;padding-left:2px}
.cal-plus:hover{color:var(--indigo)}

/* Grille semaine */
.cal-semaine{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(340px,auto)}
.cal-semaine .cal-jour{min-height:340px}
.cal-semaine .cal-num{font-size:12.5px;color:var(--text)}

.dark .cal-iv{background:#12121f}
.dark .cal-readonly{background:#11213d;border-color:#879bd4}

@media (max-width:900px){
  .cal-mois{grid-auto-rows:minmax(88px,auto)}
  .cal-iv .c{display:none}
  .cal-semaine{grid-template-columns:1fr;grid-auto-rows:auto}
  .cal-semaine .cal-jour{min-height:auto;border-right:none}
}


/* ── Calendrier : grille + file de travail ── */
.cal-layout{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.cal-layout.plein{grid-template-columns:1fr}
.cal-layout.plein .cal-rail{display:none}
.cal-main{min-width:0}
.cal-rail{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:12px;max-height:calc(100vh - 150px);display:flex;flex-direction:column}
.cal-rail-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.cal-rail-head button{margin-left:auto;background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;line-height:1}
.cal-rail-body{overflow-y:auto;flex:1}
.cal-sec{border-bottom:1px solid var(--border)}
.cal-sec:last-child{border-bottom:none}
.cal-sec-h{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;background:none;border:none;cursor:pointer;font-size:12px;font-weight:800;color:var(--text);text-align:left}
.cal-sec-h:hover{background:var(--bg)}
.cal-sec-h i{font-size:9px;color:var(--text-muted);transition:transform .15s}
.cal-sec.on .cal-sec-h i{transform:rotate(90deg)}
.cal-sec-h b{margin-left:auto;font-size:10.5px;font-weight:800;padding:1px 8px;border-radius:99px;background:var(--bg);color:var(--text-muted)}
.cal-sec.on .cal-sec-h b{background:var(--indigo);color:#fff}
.cal-sec-b{display:none;padding:0 10px 11px;flex-direction:column;gap:6px}
.cal-sec.on .cal-sec-b{display:flex}
.cal-q{border:1px solid var(--border);border-left:3px solid var(--indigo);background:var(--bg);border-radius:8px;padding:7px 9px;font-size:11px;line-height:1.45;cursor:grab;transition:.1s}
.cal-q:hover{border-color:var(--text-muted);transform:translateX(2px)}
.cal-q .n{font-weight:800;color:var(--text);display:block}
.cal-q .c{color:var(--text-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-q.drag{opacity:.4}
.cal-q-vide{font-size:11px;color:var(--text-muted);padding:6px 4px 2px;line-height:1.5}
.cal-q-act{display:flex;gap:5px;margin-top:7px}
.cal-q-act button{flex:1;padding:5px 6px;border-radius:6px;font-size:10px;font-weight:800;cursor:pointer;border:1px solid var(--border);background:var(--card-bg);color:var(--text)}
.cal-q-act button.ok{background:#b7f1cc;border-color:#7fdba1;color:#1f2430}
.cal-rail-badge{background:var(--indigo);color:#fff;font-size:10px;font-weight:800;padding:1px 7px;border-radius:99px;margin-left:6px}

/* Absences des techniciens, lisibles à même le jour */
.cal-abs{font-size:9.5px;font-weight:700;color:#884923;background:#faeebd;border-radius:4px;padding:1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.dark .cal-abs{background:#3f2d10;color:#f2e5ba}

/* Mode jour */
.cal-jourvue{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(440px,auto)}
.cal-jourvue .cal-jour{min-height:440px;border-right:none}
.cal-jourvue .cal-num{font-size:13px;color:var(--text)}

@media (max-width:1100px){
  .cal-layout{grid-template-columns:1fr}
  .cal-rail{position:static;max-height:none}
}


/* ── Grille horaire (Jour / Semaine) ── */
.cal-h{display:flex;flex-direction:column;max-height:68vh;overflow:auto}
.cal-h-top{position:sticky;top:0;z-index:15;background:var(--card-bg)}
.cal-h-head{display:grid;background:var(--bg);border-bottom:1px solid var(--border)}
.cal-h-corner{font-size:9px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;justify-content:flex-end;padding:0 7px}
.cal-h-day{padding:7px 5px;text-align:center;border-left:1px solid var(--border);min-width:0}
.cal-h-day span{font-size:10px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.cal-h-day b{display:block;font-size:17px;font-weight:800;color:var(--text);line-height:1.15;font-variant-numeric:tabular-nums}
.cal-h-day.auj b{color:var(--indigo)}
.cal-h-day.we{background:color-mix(in srgb,var(--bg) 55%,transparent)}
.cal-h-day .cal-abs{margin-top:3px;font-size:9px}
.cal-h-allday{display:grid;border-bottom:1px solid var(--border);background:var(--bg)}
.cal-h-bands{display:grid;gap:3px;padding:5px 3px;align-content:start}
.cal-band{border-left:3px solid #94a3b8;border-radius:5px;padding:3px 8px;font-size:10.5px;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-band:hover{filter:brightness(.97)}
.cal-band .d{font-size:9px;font-weight:800;color:var(--text-muted);margin-left:5px}
.cal-h-body{display:grid;grid-template-columns:52px 1fr;padding-top:8px}
.cal-h-hours{display:flex;flex-direction:column;position:relative}
.cal-h-hour{position:relative}
.cal-h-hour span{position:absolute;top:-6px;right:7px;font-size:9.5px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.cal-h-cols{display:grid;position:relative;background-image:linear-gradient(to bottom,var(--border) 1px,transparent 1px)}
.cal-h-col{position:relative;border-left:1px solid var(--border)}
.cal-h-col.we{background:color-mix(in srgb,var(--bg) 45%,transparent)}
.cal-h-col.auj{background:color-mix(in srgb,var(--indigo) 4%,transparent)}
.cal-blk{position:absolute;left:2px;right:2px;border-left:3px solid #94a3b8;border-radius:6px;padding:2px 6px;font-size:10px;line-height:1.3;overflow:hidden;cursor:grab;box-shadow:0 1px 2px rgba(0,0,0,.07);user-select:none;touch-action:none}
.cal-blk:hover{box-shadow:0 3px 9px rgba(0,0,0,.16);z-index:5}
.cal-blk.geste{opacity:.85;cursor:grabbing;z-index:20;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.cal-blk.clot{opacity:.5}
.cal-blk .t{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;margin-right:4px}
.cal-blk .n{font-weight:800;color:var(--text)}
.cal-blk .c{display:block;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-blk .rs{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
.cal-blk .rs:hover{background:linear-gradient(to bottom,transparent,rgba(0,0,0,.14))}
.cal-now{position:absolute;left:0;right:0;height:2px;background:#efb8b8;z-index:10;pointer-events:none}
.cal-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:99px;background:#efb8b8}
#cal-etiq{position:fixed;z-index:999;display:none;background:#0f172a;color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px;pointer-events:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.3)}

/* Intervention à cheval sur plusieurs jours, en vue Mois */
.cal-iv.suite{border-left-width:2px;border-left-style:dashed}
.cal-iv.avant{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-5px}

@media (max-width:900px){
  .cal-h{max-height:none}
  .cal-blk{font-size:9.5px}
}


/* ── Charge des techniciens (responsable planning) ── */
.cal-charge{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:11px 14px;margin-bottom:12px}
.cal-charge-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:9px;flex-wrap:wrap}
.cal-charge-h i{color:var(--indigo)}
.cal-charge-h b{color:var(--text);font-size:12px;text-transform:none;letter-spacing:0}
.cal-charge-h .resp{margin-left:auto;font-weight:600;text-transform:none;letter-spacing:0;font-size:10.5px;opacity:.75}
.cal-charge-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:5px 22px}
.cal-ch{display:flex;align-items:center;gap:9px;font-size:11.5px}
.cal-ch .nom{display:flex;align-items:center;gap:6px;min-width:132px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ch .nom i{width:9px;height:9px;border-radius:99px;flex:none}
.cal-ch .bar{flex:1;height:7px;background:var(--bg);border-radius:99px;overflow:hidden;min-width:52px}
.cal-ch .fill{display:block;height:100%;border-radius:99px;transition:width .2s}
.cal-ch .fill.gris{background:#94a3b8}
.cal-ch .fill.vert{background:#b7f1cc}
.cal-ch .fill.orange{background:#f6ddb1}
.cal-ch .fill.rouge{background:#efb8b8}
.cal-ch .fill.off{background:var(--border)}
.cal-ch .val{font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap;font-size:11px}
.cal-ch .val.rouge{color:#932f2f;font-weight:700}
.cal-ch .val.orange{color:#a45b23;font-weight:700}

/* Pastille d’enchaînement sur un bloc */
.cal-blk .trajet{position:absolute;top:2px;right:3px;font-size:10px;line-height:1;padding:1px 3px;border-radius:4px;background:#faeebd;color:#884923}
.cal-blk .trajet.impossible{background:#fcd5d5;color:#a43232;font-weight:800}


/* ── Carte des chantiers ── */
.cal-pin{width:26px;height:26px;border-radius:99px;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
#cal-carte{z-index:0}
#cal-carte .leaflet-container{font:inherit}

/* ── Feuille de route imprimable ── */
#cal-print{display:none}
@media print {
  body.impression-calendrier *{visibility:hidden !important}
  body.impression-calendrier #cal-print,
  body.impression-calendrier #cal-print *{visibility:visible !important}
  body.impression-calendrier #cal-print{display:block !important;position:absolute;left:0;top:0;width:100%;
    font-size:11px;color:#000;background:#fff}
  body.impression-calendrier{background:#fff !important}
  #cal-print .pen{border-bottom:2px solid #000;padding-bottom:7px;margin-bottom:13px}
  #cal-print .pen .pt{font-size:17px;font-weight:800;text-transform:capitalize;margin-top:2px}
  #cal-print .pen .pm{font-size:10px;color:#444;margin-top:2px}
  #cal-print .pj{font-size:12.5px;font-weight:800;text-transform:capitalize;margin:14px 0 5px;padding:4px 8px;background:#eee;border-radius:3px;break-after:avoid}
  #cal-print .pabs{font-size:10.5px;color:#815718;margin:0 0 5px}
  #cal-print .pvide{font-size:10.5px;color:#666;margin:0 0 8px}
  #cal-print .ptab{width:100%;border-collapse:collapse;margin-bottom:9px}
  #cal-print .ptab th{text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:#444;border-bottom:1px solid #999;padding:3px 5px}
  #cal-print .ptab td{border-bottom:1px solid #ddd;padding:4px 5px;vertical-align:top}
  #cal-print .ptab tr{break-inside:avoid}
  #cal-print .ptab .h{font-weight:700;white-space:nowrap}
  #cal-print .ptab .ad{color:#555;font-size:10px}
  #cal-print .ptab .no{color:#333;font-size:10px}
  @page{margin:1.4cm}
}


/* ── Carte d’affaire : corps réduit ── */
.card-corps{padding:11px 12px;display:flex;flex-direction:column;gap:7px;justify-content:center;flex:1;min-width:0}
.card-client{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3;margin:0;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10.5px}
.card-meta .dep{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:99px;padding:2px 9px;font-variant-numeric:tabular-nums}
.card-meta .dep i{font-size:9px;color:#a43232;transform:rotate(-20deg)}
.card-meta .dep.vide{color:var(--text-muted);font-weight:600}
.card-meta .dep.vide i{color:var(--text-muted)}
.card-meta .anc{font-weight:600;color:var(--text-muted);white-space:nowrap}
.card-meta .anc.orange{color:#a45b23;font-weight:700}
.card-meta .anc.rouge{color:#932f2f;font-weight:800}


/* ===== LISIBILITE PASTEL — genere, ne pas editer a la main ===== */
:root{
  --indigo:#5b50c9; --indigo-light:#7f74e0; --sidebar-active:#5b50c9;
  --red:#b83c3c; --green:#2b7f4d; --blue:#2b6f9c;
  --orange:#b45c2a; --purple:#6f45b8; --yellow:#8c6a15;
}
/* En mode sombre on NE change PAS ces encres : beaucoup de pastilles gardent
   un fond clair dans les deux themes (.badge-urgent, .bat-ok…). Les eclaircir
   les rendrait illisibles sur ces fonds-la. Seul l'indigo d'action s'eclaircit,
   car il sert de texte sur les surfaces sombres. */
.dark{
  --indigo:#8b80e8; --indigo-light:#a49dea; --sidebar-active:#5b50c9;
  /* Surfaces : bleu ardoise sourd au lieu du quasi-noir d'origine. */
  --bg:#1b2030; --sidebar-bg:#161a27; --card-bg:#252b3c; --border:#3a4156;
  --text:#e6eaf2; --text-muted:#a3adc2; --sidebar-txt:#b9c2e8;
}
/* Tout element dont le fond en ligne est pastel recoit une encre foncee. */
[style*="background:#b1d7f6"][style],[style*="background: #b1d7f6"][style],[style*="background-color:#b1d7f6"][style],[style*="background-color: #b1d7f6"][style]{color:#1f2430 !important}
[style*="background:#b1def6"][style],[style*="background: #b1def6"][style],[style*="background-color:#b1def6"][style],[style*="background-color: #b1def6"][style]{color:#1f2430 !important}
[style*="background:#b1dff6"][style],[style*="background: #b1dff6"][style],[style*="background-color:#b1dff6"][style],[style*="background-color: #b1dff6"][style]{color:#1f2430 !important}
[style*="background:#b1e9f6"][style],[style*="background: #b1e9f6"][style],[style*="background-color:#b1e9f6"][style],[style*="background-color: #b1e9f6"][style]{color:#1f2430 !important}
[style*="background:#b1f6e1"][style],[style*="background: #b1f6e1"][style],[style*="background-color:#b1f6e1"][style],[style*="background-color: #b1f6e1"][style]{color:#1f2430 !important}
[style*="background:#b2e0f5"][style],[style*="background: #b2e0f5"][style],[style*="background-color:#b2e0f5"][style],[style*="background-color: #b2e0f5"][style]{color:#1f2430 !important}
[style*="background:#b4b5f4"][style],[style*="background: #b4b5f4"][style],[style*="background-color:#b4b5f4"][style],[style*="background-color: #b4b5f4"][style]{color:#1f2430 !important}
[style*="background:#b4c8f3"][style],[style*="background: #b4c8f3"][style],[style*="background-color:#b4c8f3"][style],[style*="background-color: #b4c8f3"][style]{color:#1f2430 !important}
[style*="background:#b4e6f3"][style],[style*="background: #b4e6f3"][style],[style*="background-color:#b4e6f3"][style],[style*="background-color: #b4e6f3"][style]{color:#1f2430 !important}
[style*="background:#b6f1ed"][style],[style*="background: #b6f1ed"][style],[style*="background-color:#b6f1ed"][style],[style*="background-color: #b6f1ed"][style]{color:#1f2430 !important}
[style*="background:#b7c6f1"][style],[style*="background: #b7c6f1"][style],[style*="background-color:#b7c6f1"][style],[style*="background-color: #b7c6f1"][style]{color:#1f2430 !important}
[style*="background:#b7f1cc"][style],[style*="background: #b7f1cc"][style],[style*="background-color:#b7f1cc"][style],[style*="background-color: #b7f1cc"][style]{color:#1f2430 !important}
[style*="background:#b8efcd"][style],[style*="background: #b8efcd"][style],[style*="background-color:#b8efcd"][style],[style*="background-color: #b8efcd"][style]{color:#1f2430 !important}
[style*="background:#b9c5ef"][style],[style*="background: #b9c5ef"][style],[style*="background-color:#b9c5ef"][style],[style*="background-color: #b9c5ef"][style]{color:#1f2430 !important}
[style*="background:#b9efcd"][style],[style*="background: #b9efcd"][style],[style*="background-color:#b9efcd"][style],[style*="background-color: #b9efcd"][style]{color:#1f2430 !important}
[style*="background:#bab7f0"][style],[style*="background: #bab7f0"][style],[style*="background-color:#bab7f0"][style],[style*="background-color: #bab7f0"][style]{color:#1f2430 !important}
[style*="background:#bbc8ec"][style],[style*="background: #bbc8ec"][style],[style*="background-color:#bbc8ec"][style],[style*="background-color: #bbc8ec"][style]{color:#1f2430 !important}
[style*="background:#c4f6fa"][style],[style*="background: #c4f6fa"][style],[style*="background-color:#c4f6fa"][style],[style*="background-color: #c4f6fa"][style]{color:#1f2430 !important}
[style*="background:#c6b1f6"][style],[style*="background: #c6b1f6"][style],[style*="background-color:#c6b1f6"][style],[style*="background-color: #c6b1f6"][style]{color:#1f2430 !important}
[style*="background:#cbb4f3"][style],[style*="background: #cbb4f3"][style],[style*="background-color:#cbb4f3"][style],[style*="background-color: #cbb4f3"][style]{color:#1f2430 !important}
[style*="background:#ceb9ee"][style],[style*="background: #ceb9ee"][style],[style*="background-color:#ceb9ee"][style],[style*="background-color: #ceb9ee"][style]{color:#1f2430 !important}
[style*="background:#cfe2fb"][style],[style*="background: #cfe2fb"][style],[style*="background-color:#cfe2fb"][style],[style*="background-color: #cfe2fb"][style]{color:#1f2430 !important}
[style*="background:#d0f9de"][style],[style*="background: #d0f9de"][style],[style*="background-color:#d0f9de"][style],[style*="background-color: #d0f9de"][style]{color:#1f2430 !important}
[style*="background:#d3ebfb"][style],[style*="background: #d3ebfb"][style],[style*="background-color:#d3ebfb"][style],[style*="background-color: #d3ebfb"][style]{color:#1f2430 !important}
[style*="background:#d4ddfc"][style],[style*="background: #d4ddfc"][style],[style*="background-color:#d4ddfc"][style],[style*="background-color: #d4ddfc"][style]{color:#1f2430 !important}
[style*="background:#d5b5f3"][style],[style*="background: #d5b5f3"][style],[style*="background-color:#d5b5f3"][style],[style*="background-color: #d5b5f3"][style]{color:#1f2430 !important}
[style*="background:#def1e6"][style],[style*="background: #def1e6"][style],[style*="background-color:#def1e6"][style],[style*="background-color: #def1e6"][style]{color:#1f2430 !important}
[style*="background:#dffaee"][style],[style*="background: #dffaee"][style],[style*="background-color:#dffaee"][style],[style*="background-color: #dffaee"][style]{color:#1f2430 !important}
[style*="background:#dffbfc"][style],[style*="background: #dffbfc"][style],[style*="background-color:#dffbfc"][style],[style*="background-color: #dffbfc"][style]{color:#1f2430 !important}
[style*="background:#e1e8fd"][style],[style*="background: #e1e8fd"][style],[style*="background-color:#e1e8fd"][style],[style*="background-color: #e1e8fd"][style]{color:#1f2430 !important}
[style*="background:#e2dcfc"][style],[style*="background: #e2dcfc"][style],[style*="background-color:#e2dcfc"][style],[style*="background-color: #e2dcfc"][style]{color:#1f2430 !important}
[style*="background:#e2e8f0"][style],[style*="background: #e2e8f0"][style],[style*="background-color:#e2e8f0"][style],[style*="background-color: #e2e8f0"][style]{color:#1f2430 !important}
[style*="background:#e2eefd"][style],[style*="background: #e2eefd"][style],[style*="background-color:#e2eefd"][style],[style*="background-color: #e2eefd"][style]{color:#1f2430 !important}
[style*="background:#e3ecf6"][style],[style*="background: #e3ecf6"][style],[style*="background-color:#e3ecf6"][style],[style*="background-color: #e3ecf6"][style]{color:#1f2430 !important}
[style*="background:#e3f2fd"][style],[style*="background: #e3f2fd"][style],[style*="background-color:#e3f2fd"][style],[style*="background-color: #e3f2fd"][style]{color:#1f2430 !important}
[style*="background:#e3faea"][style],[style*="background: #e3faea"][style],[style*="background-color:#e3faea"][style],[style*="background-color: #e3faea"][style]{color:#1f2430 !important}
[style*="background:#e6f9bf"][style],[style*="background: #e6f9bf"][style],[style*="background-color:#e6f9bf"][style],[style*="background-color: #e6f9bf"][style]{color:#1f2430 !important}
[style*="background:#eab8ef"][style],[style*="background: #eab8ef"][style],[style*="background-color:#eab8ef"][style],[style*="background-color: #eab8ef"][style]{color:#1f2430 !important}
[style*="background:#eae6fd"][style],[style*="background: #eae6fd"][style],[style*="background-color:#eae6fd"][style],[style*="background-color: #eae6fd"][style]{color:#1f2430 !important}
[style*="background:#edf1f5"][style],[style*="background: #edf1f5"][style],[style*="background-color:#edf1f5"][style],[style*="background-color: #edf1f5"][style]{color:#1f2430 !important}
[style*="background:#eef0f8"][style],[style*="background: #eef0f8"][style],[style*="background-color:#eef0f8"][style],[style*="background-color: #eef0f8"][style]{color:#1f2430 !important}
[style*="background:#efb8b8"][style],[style*="background: #efb8b8"][style],[style*="background-color:#efb8b8"][style],[style*="background-color: #efb8b8"][style]{color:#1f2430 !important}
[style*="background:#f0b8b8"][style],[style*="background: #f0b8b8"][style],[style*="background-color:#f0b8b8"][style],[style*="background-color: #f0b8b8"][style]{color:#1f2430 !important}
[style*="background:#f1cbb6"][style],[style*="background: #f1cbb6"][style],[style*="background-color:#f1cbb6"][style],[style*="background-color: #f1cbb6"][style]{color:#1f2430 !important}
[style*="background:#f1f4f7"][style],[style*="background: #f1f4f7"][style],[style*="background-color:#f1f4f7"][style],[style*="background-color: #f1f4f7"][style]{color:#1f2430 !important}
[style*="background:#f1f5f9"][style],[style*="background: #f1f5f9"][style],[style*="background-color:#f1f5f9"][style],[style*="background-color: #f1f5f9"][style]{color:#1f2430 !important}
[style*="background:#f2e7fd"][style],[style*="background: #f2e7fd"][style],[style*="background-color:#f2e7fd"][style],[style*="background-color: #f2e7fd"][style]{color:#1f2430 !important}
[style*="background:#f2f4f6"][style],[style*="background: #f2f4f6"][style],[style*="background-color:#f2f4f6"][style],[style*="background-color: #f2f4f6"][style]{color:#1f2430 !important}
[style*="background:#f3ccb4"][style],[style*="background: #f3ccb4"][style],[style*="background-color:#f3ccb4"][style],[style*="background-color: #f3ccb4"][style]{color:#1f2430 !important}
[style*="background:#f3d5b5"][style],[style*="background: #f3d5b5"][style],[style*="background-color:#f3d5b5"][style],[style*="background-color: #f3d5b5"][style]{color:#1f2430 !important}
[style*="background:#f3f4f6"][style],[style*="background: #f3f4f6"][style],[style*="background-color:#f3f4f6"][style],[style*="background-color: #f3f4f6"][style]{color:#1f2430 !important}
[style*="background:#f4b4b4"][style],[style*="background: #f4b4b4"][style],[style*="background-color:#f4b4b4"][style],[style*="background-color: #f4b4b4"][style]{color:#1f2430 !important}
[style*="background:#f4f7fa"][style],[style*="background: #f4f7fa"][style],[style*="background-color:#f4f7fa"][style],[style*="background-color: #f4f7fa"][style]{color:#1f2430 !important}
[style*="background:#f5dcfc"][style],[style*="background: #f5dcfc"][style],[style*="background-color:#f5dcfc"][style],[style*="background-color: #f5dcfc"][style]{color:#1f2430 !important}
[style*="background:#f5f5f5"][style],[style*="background: #f5f5f5"][style],[style*="background-color:#f5f5f5"][style],[style*="background-color: #f5f5f5"][style]{color:#1f2430 !important}
[style*="background:#f6c9b1"][style],[style*="background: #f6c9b1"][style],[style*="background-color:#f6c9b1"][style],[style*="background-color: #f6c9b1"][style]{color:#1f2430 !important}
[style*="background:#f6d3b1"][style],[style*="background: #f6d3b1"][style],[style*="background-color:#f6d3b1"][style],[style*="background-color: #f6d3b1"][style]{color:#1f2430 !important}
[style*="background:#f6d6b1"][style],[style*="background: #f6d6b1"][style],[style*="background-color:#f6d6b1"][style],[style*="background-color: #f6d6b1"][style]{color:#1f2430 !important}
[style*="background:#f6dab1"][style],[style*="background: #f6dab1"][style],[style*="background-color:#f6dab1"][style],[style*="background-color: #f6dab1"][style]{color:#1f2430 !important}
[style*="background:#f6ddb1"][style],[style*="background: #f6ddb1"][style],[style*="background-color:#f6ddb1"][style],[style*="background-color: #f6ddb1"][style]{color:#1f2430 !important}
[style*="background:#f6e5b1"][style],[style*="background: #f6e5b1"][style],[style*="background-color:#f6e5b1"][style],[style*="background-color: #f6e5b1"][style]{color:#1f2430 !important}
[style*="background:#f6e8b1"][style],[style*="background: #f6e8b1"][style],[style*="background-color:#f6e8b1"][style],[style*="background-color: #f6e8b1"][style]{color:#1f2430 !important}
[style*="background:#f6e9b1"][style],[style*="background: #f6e9b1"][style],[style*="background-color:#f6e9b1"][style],[style*="background-color: #f6e9b1"][style]{color:#1f2430 !important}
[style*="background:#f6ebb1"][style],[style*="background: #f6ebb1"][style],[style*="background-color:#f6ebb1"][style],[style*="background-color: #f6ebb1"][style]{color:#1f2430 !important}
[style*="background:#c9e6f7"][style],[style*="background: #c9e6f7"][style],[style*="background-color:#c9e6f7"][style],[style*="background-color: #c9e6f7"][style]{color:#1f2430 !important}
[style*="background:#f7f9fb"][style],[style*="background: #f7f9fb"][style],[style*="background-color:#f7f9fb"][style],[style*="background-color: #f7f9fb"][style]{color:#1f2430 !important}
[style*="background:#f8fafc"][style],[style*="background: #f8fafc"][style],[style*="background-color:#f8fafc"][style],[style*="background-color: #f8fafc"][style]{color:#1f2430 !important}
[style*="background:#f9dbec"][style],[style*="background: #f9dbec"][style],[style*="background-color:#f9dbec"][style],[style*="background-color: #f9dbec"][style]{color:#1f2430 !important}
[style*="background:#f9e7fd"][style],[style*="background: #f9e7fd"][style],[style*="background-color:#f9e7fd"][style],[style*="background-color: #f9e7fd"][style]{color:#1f2430 !important}
[style*="background:#f9fafb"][style],[style*="background: #f9fafb"][style],[style*="background-color:#f9fafb"][style],[style*="background-color: #f9fafb"][style]{color:#1f2430 !important}
[style*="background:#fabdc4"][style],[style*="background: #fabdc4"][style],[style*="background-color:#fabdc4"][style],[style*="background-color: #fabdc4"][style]{color:#1f2430 !important}
[style*="background:#faddbd"][style],[style*="background: #faddbd"][style],[style*="background-color:#faddbd"][style],[style*="background-color: #faddbd"][style]{color:#1f2430 !important}
[style*="background:#fae1e3"][style],[style*="background: #fae1e3"][style],[style*="background-color:#fae1e3"][style],[style*="background-color: #fae1e3"][style]{color:#1f2430 !important}
[style*="background:#faeebd"][style],[style*="background: #faeebd"][style],[style*="background-color:#faeebd"][style],[style*="background-color: #faeebd"][style]{color:#1f2430 !important}
[style*="background:#faf5bd"][style],[style*="background: #faf5bd"][style],[style*="background-color:#faf5bd"][style],[style*="background-color: #faf5bd"][style]{color:#1f2430 !important}
[style*="background:#fafafa"][style],[style*="background: #fafafa"][style],[style*="background-color:#fafafa"][style],[style*="background-color: #fafafa"][style]{color:#1f2430 !important}
[style*="background:#fbe6ca"][style],[style*="background: #fbe6ca"][style],[style*="background-color:#fbe6ca"][style],[style*="background-color: #fbe6ca"][style]{color:#1f2430 !important}
[style*="background:#fbedd0"][style],[style*="background: #fbedd0"][style],[style*="background-color:#fbedd0"][style],[style*="background-color: #fbedd0"][style]{color:#1f2430 !important}
[style*="background:#fbfcfd"][style],[style*="background: #fbfcfd"][style],[style*="background-color:#fbfcfd"][style],[style*="background-color: #fbfcfd"][style]{color:#1f2430 !important}
[style*="background:#fcd5d5"][style],[style*="background: #fcd5d5"][style],[style*="background-color:#fcd5d5"][style],[style*="background-color: #fcd5d5"][style]{color:#1f2430 !important}
[style*="background:#fce5e5"][style],[style*="background: #fce5e5"][style],[style*="background-color:#fce5e5"][style],[style*="background-color: #fce5e5"][style]{color:#1f2430 !important}
[style*="background:#fcecd8"][style],[style*="background: #fcecd8"][style],[style*="background-color:#fcecd8"][style],[style*="background-color: #fcecd8"][style]{color:#1f2430 !important}
[style*="background:#fcf3e3"][style],[style*="background: #fcf3e3"][style],[style*="background-color:#fcf3e3"][style],[style*="background-color: #fcf3e3"][style]{color:#1f2430 !important}
[style*="background:#fcf4df"][style],[style*="background: #fcf4df"][style],[style*="background-color:#fcf4df"][style],[style*="background-color: #fcf4df"][style]{color:#1f2430 !important}
[style*="background:#fcf6de"][style],[style*="background: #fcf6de"][style],[style*="background-color:#fcf6de"][style],[style*="background-color: #fcf6de"][style]{color:#1f2430 !important}
[style*="background:#fcf9db"][style],[style*="background: #fcf9db"][style],[style*="background-color:#fcf9db"][style],[style*="background-color: #fcf9db"][style]{color:#1f2430 !important}
[style*="background:#fde4e6"][style],[style*="background: #fde4e6"][style],[style*="background-color:#fde4e6"][style],[style*="background-color: #fde4e6"][style]{color:#1f2430 !important}
[style*="background:#fde7e7"][style],[style*="background: #fde7e7"][style],[style*="background-color:#fde7e7"][style],[style*="background-color: #fde7e7"][style]{color:#1f2430 !important}
[style*="background:#fdebe0"][style],[style*="background: #fdebe0"][style],[style*="background-color:#fdebe0"][style],[style*="background-color: #fdebe0"][style]{color:#1f2430 !important}
[style*="background:#fdf0e0"][style],[style*="background: #fdf0e0"][style],[style*="background-color:#fdf0e0"][style],[style*="background-color: #fdf0e0"][style]{color:#1f2430 !important}
[style*="background:#fdf1e2"][style],[style*="background: #fdf1e2"][style],[style*="background-color:#fdf1e2"][style],[style*="background-color: #fdf1e2"][style]{color:#1f2430 !important}
[style*="background:#fdf4e7"][style],[style*="background: #fdf4e7"][style],[style*="background-color:#fdf4e7"][style],[style*="background-color: #fdf4e7"][style]{color:#1f2430 !important}
[style*="background:#fdf9e7"][style],[style*="background: #fdf9e7"][style],[style*="background-color:#fdf9e7"][style],[style*="background-color: #fdf9e7"][style]{color:#1f2430 !important}
[style*="background:#ffffff"][style],[style*="background: #ffffff"][style],[style*="background-color:#ffffff"][style],[style*="background-color: #ffffff"][style]{color:#1f2430 !important}

/* En-tetes de colonnes : fond pastel -> titre et compteur en encre foncee. */
.kanban-col-header .kanban-col-title,
.kanban-col-header .kanban-col-count,
.kanban-col-header .kanban-col-dot,
.kanban-col-header{color:#1f2430 !important;text-shadow:none !important}
.dark .kanban-col-header .kanban-col-title,
.dark .kanban-col-header .kanban-col-count,
.dark .kanban-col-header{color:#1f2430 !important}

/* Sous-en-tetes (A planifier, Planifiees, En cours...) : meme traitement. */
.kanban-sub-header,.kanban-sub-header *{color:#1f2430 !important;text-shadow:none !important}

/* Le mode sombre force une encre claire sur tout ; on la retire la ou le
   fond est reste pastel, sinon les pastilles deviennent illisibles. */
.dark [style*="background:#"],
.dark [style*="background: #"]{text-shadow:none !important}

/* Exception : ces gris clairs sont DEJA repasses en fond sombre par les
   regles .dark plus haut. L'encre foncee y serait invisible : on rend
   l'encre claire, avec une specificite superieure a la regle generique. */
.dark [style*="background:#f8fafc"][style],
.dark [style*="background:#f1f5f9"][style],
.dark [style*="background:#e2e8f0"][style],
.dark [style*="background:#f3f4f6"][style],
.dark [style*="background:#fff"][style]:not(button),
.dark [style*="background: #fff"][style]:not(button){color:#e2e8f0 !important}

/* Fond sombre en ligne -> encre claire, dans les deux themes. */
[style*="background:#0f172a"][style],[style*="background: #0f172a"][style],[style*="background-color:#0f172a"][style],[style*="background-color: #0f172a"][style]{color:#e8ecf3 !important}
[style*="background:#143527"][style],[style*="background: #143527"][style],[style*="background-color:#143527"][style],[style*="background-color: #143527"][style]{color:#e8ecf3 !important}
[style*="background:#171a1f"][style],[style*="background: #171a1f"][style],[style*="background-color:#171a1f"][style],[style*="background-color: #171a1f"][style]{color:#e8ecf3 !important}
[style*="background:#1e293b"][style],[style*="background: #1e293b"][style],[style*="background-color:#1e293b"][style],[style*="background-color: #1e293b"][style]{color:#e8ecf3 !important}
[style*="background:#22271c"][style],[style*="background: #22271c"][style],[style*="background-color:#22271c"][style],[style*="background-color: #22271c"][style]{color:#e8ecf3 !important}
[style*="background:#2b2333"][style],[style*="background: #2b2333"][style],[style*="background-color:#2b2333"][style],[style*="background-color: #2b2333"][style]{color:#e8ecf3 !important}
[style*="background:#334155"][style],[style*="background: #334155"][style],[style*="background-color:#334155"][style],[style*="background-color: #334155"][style]{color:#e8ecf3 !important}
[style*="background:#3a2e12"][style],[style*="background: #3a2e12"][style],[style*="background-color:#3a2e12"][style],[style*="background-color: #3a2e12"][style]{color:#e8ecf3 !important}
[style*="background:#3d2814"][style],[style*="background: #3d2814"][style],[style*="background-color:#3d2814"][style],[style*="background-color: #3d2814"][style]{color:#e8ecf3 !important}
[style*="background:#475569"][style],[style*="background: #475569"][style],[style*="background-color:#475569"][style],[style*="background-color: #475569"][style]{color:#e8ecf3 !important}

/* Tuiles KPI admin : encre de service eclaircie en mode sombre. */
.dark #dash-admin-kpis [style*="color:#52279b"]{color:#b89de6 !important}
.dark #dash-admin-kpis [style*="color:#1c6892"]{color:#9ccde8 !important}
.dark #dash-admin-kpis [style*="color:#267945"]{color:#a2e2ba !important}
.dark #dash-admin-kpis [style*="color:#94641e"]{color:#e8c99c !important}
.dark #dash-admin-kpis [style*="color:#af4f27"]{color:#e8b29c !important}
.dark #dash-admin-kpis [style*="color:#a43232"]{color:#e2a1a1 !important}

.dark [style*="color:#52279b"]:not([style*="background"]),
.dark [style*="color: rgb(82, 39, 155)"]:not([style*="background"]){color:#b79ae0 !important}
.dark [style*="color:#932f2f"]:not([style*="background"]),
.dark [style*="color: rgb(147, 47, 47)"]:not([style*="background"]){color:#e0a1a1 !important}
.dark [style*="color:#9c2626"]:not([style*="background"]),
.dark [style*="color: rgb(156, 38, 38)"]:not([style*="background"]){color:#e39c9c !important}

/* L'app pose aussi des pastilles « teinte de la couleur du texte » :
   background:${couleur}22, soit un hexa a 8 chiffres a 13 % d'opacite. Le
   fond reel reste donc la carte sombre. Quand fond ET texte portent la MEME
   valeur, c'est a coup sur une teinte transparente : le garde-fou
   :not([style*="background"]) les excluait a tort. */
.dark [style*="color:#52279b"][style*="background:#52279b"]{color:#b79ae0 !important}
.dark [style*="color:#932f2f"][style*="background:#932f2f"]{color:#e0a1a1 !important}
.dark [style*="color:#9c2626"][style*="background:#9c2626"]{color:#e39c9c !important}

.dark .info-filter{color:#e2e8f0 !important}
.dark #search-input{color:#e2e8f0 !important}
.dark #search-input::placeholder{color:#9aa6b8 !important; opacity:1}
/* La carte « Etude » garde une encre ardoise sur une carte devenue sombre.
   Portee volontairement limitee aux tuiles KPI : ailleurs, cette encre est
   posee sur du clair et doit le rester. */
.dark .kpi-value[style*="color:#475569"],
.dark .kpi-label[style*="color:#64748b"]{color:#cbd5e1 !important}


/* ===== ECRAN DE CONNEXION SUR PETIT ECRAN — genere, ne pas editer a la main =====

   On ne cherche PAS a reconnaitre « un telephone » : on s'adapte a la
   largeur disponible. C'est plus fiable — une tablette, une fenetre
   reduite ou un telephone en paysage sont traites correctement, alors
   qu'une detection par navigateur se trompe a chaque mise a jour d'iOS.

   Probleme corrige : sur un ecran de 390 px, le bandeau occupait la
   totalite du premier ecran. Il fallait faire defiler avant meme de voir
   la liste des collaborateurs.                                          */

@media (max-width: 768px) {

  /* --- Bandeau ramene a l'essentiel : logo et titre sur une ligne --- */
  .login-left {
    padding: 12px 16px !important;
    gap: 10px !important;
    border-right: none !important;
    border-bottom: 4px solid #3b9ad2;
  }
  .login-left-logo {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    gap: 10px !important;
  }
  .login-logo { width: 38px !important; height: 38px !important; font-size: 18px !important; }
  .login-title { font-size: 17px !important; margin: 0 !important; }
  .login-subtitle,
  .login-left-footer { display: none !important; }   /* place gagnee pour la liste */
  .login-left-body { padding: 0 !important; }
  .login-prompt { font-size: 12px; padding: 6px 0; }

  /* --- Liste des collaborateurs : une colonne, cibles plus larges --- */
  .login-right { padding: 12px !important; }
  .login-right-title { margin-bottom: 10px; }
  .login-profiles { grid-template-columns: 1fr !important; gap: 10px !important; }
  .login-service-group { padding: 12px !important; box-shadow: 3px 3px 0 #111 !important; }
  .login-service-users { gap: 8px !important; }

  /* Un doigt n'est pas un curseur : 44 px est la taille minimale
     recommandee pour une cible tactile. */
  .profile-btn {
    min-height: 44px;
    padding: 8px 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: left !important;
    width: 100%;
  }
  .profile-btn .profile-avatar,
  .profile-btn > div:first-child { flex-shrink: 0; }

  /* --- Profil choisi : le champ mot de passe passe au premier plan --- */
  /* Sans cela on tape son nom en bas de liste et le champ reste en haut,
     hors de vue. */
  body.login-profil-choisi .login-right { display: none !important; }
  body.login-profil-choisi .login-left {
    min-height: 100vh;
    justify-content: flex-start !important;
    border-bottom: none;
  }
  /* .login-left-body centre son contenu verticalement : dans un conteneur
     devenu plein ecran, cela creait un grand vide au-dessus du formulaire. */
  body.login-profil-choisi .login-left-body {
    padding-top: 18px !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
  }
  body.login-profil-choisi .login-subtitle { display: block !important; }

  /* Un champ de moins de 16 px fait zoomer Safari a la mise au point. */
  #login-pin { font-size: 16px !important; min-height: 46px; }
  .login-btn, .login-back-btn { min-height: 46px; }
}

/* Ecran tres etroit : on serre encore un peu */
@media (max-width: 380px) {
  .login-title { font-size: 15px !important; }
  .login-service-group { padding: 10px !important; }
}
.masquer-mobile{} @media (max-width:768px){ .masquer-mobile{display:none} }
/* Le bouton Face ID n a de sens qu avant le choix d un profil. */
body.login-profil-choisi .faceid-avant-profil{display:none}
.faceid-avant-profil #btn-faceid{color:#3b9ad2}

/* ===== VUES DE L'APPLICATION SUR TELEPHONE — genere, ne pas editer a la main =====

   Comme pour l'ecran de connexion, on s'adapte a la LARGEUR disponible et
   non a un « c'est un telephone » devine dans le navigateur : une tablette,
   une fenetre reduite ou un telephone en paysage sont alors traites juste.

   Quatre defauts mesures a 390 px, corriges ici :
     1. la barre du haut se superposait a elle-meme (bouton menu et
        recherche inatteignables) ;
     2. le kanban demandait un defilement dans les deux sens a la fois ;
     3. le robot flottant recouvrait la barre de navigation du bas ;
     4. la production debordait de 60 px hors de l'ecran.                  */

@media (max-width: 768px) {

  /* --- 1. Barre du haut : deux rangees ------------------------------
     Mesure du defaut : .topbar-left etait comprime a 0 px de large
     pendant que .topbar-right s'etalait jusqu'a 442 px sur un ecran de
     390. Les deux groupes se chevauchaient donc, et le bouton menu
     comme le champ de recherche passaient SOUS les autres boutons.
     On laisse la barre passer a la ligne : rien ne se superpose plus. */
  .topbar {
    flex-wrap: wrap !important;
    row-gap: 8px;
    padding: 8px 12px !important;
    align-items: center;
  }
  .topbar-left  { flex: 1 1 100% !important; min-width: 0; gap: 8px; }
  .topbar-right { flex: 1 1 100% !important; min-width: 0; gap: 5px !important;
                  justify-content: flex-start;
                  overflow-x: auto; scrollbar-width: none;
                  -webkit-overflow-scrolling: touch; }
  .topbar-right::-webkit-scrollbar { display: none; }
  /* Le titre repete ce que la barre du bas indique deja en surbrillance. */
  .topbar-title { display: none !important; }
  .search-box { flex: 1 1 auto; min-width: 0; }
  /* Un export CSV ne sert a rien sur un telephone : la place vaut mieux. */
  .topbar-right > button[onclick*="exportAffaires"] { display: none !important; }
  #commercial-filter { max-width: 108px; }
  .topbar-right > *  { flex-shrink: 0; }

  /* --- 2. Kanban : une colonne par ecran ---------------------------
     Avant : 6 colonnes de 234 px cote a cote, soit 1444 px de large et
     jusqu'a 4132 px de haut. Il fallait chercher dans deux directions.
     Maintenant chaque colonne occupe l'ecran et on passe de l'une a
     l'autre d'un glissement, avec un arret net sur chacune.
     Les 26 px laisses a droite ne sont pas perdus : ils montrent le bord
     de la colonne suivante, ce qui fait comprendre qu'on peut glisser. */
  #view-kanban { scroll-snap-type: x mandatory; scroll-padding-left: 12px; }
  .kanban-wrapper { gap: 10px !important; }
  .kanban-col { width: calc(100vw - 50px) !important; scroll-snap-align: start; }

  /* Cartes : le texte a 7 px etait illisible, on remonte au minimum. */
  .kanban-card-list { padding: 8px !important; gap: 7px !important; }
  .kanban-card [style*="font-size:7px"] { font-size: 10px !important; padding: 1px 6px !important; }
  .kanban-card .anc, .affaire-card-v2 .anc { font-size: 11.5px !important; }
  .kanban-card i.fa-thumbtack { font-size: 10px !important; }
  /* Les bandeaux de sous-section (Etude, Admin, BAT valide) et leur
     compteur etaient poses a 9 px en style inline. */
  .kanban-col div[style*="font-size:9px"] { font-size: 10.5px !important; }

  /* --- 3. Le robot flottant recouvrait la barre du bas -------------
     Il tenait de 764 a 816 px alors que la barre commence a 786 : deux
     des cinq onglets etaient sous le bouton. On le remonte au-dessus. */
  .ai-chat-fab {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    width: 46px !important; height: 46px !important; font-size: 18px !important;
  }
  .ai-chat-panel {
    left: 10px !important; right: 10px !important; width: auto !important;
    bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 58vh !important;
  }

  /* --- 4. Grilles qui debordaient ----------------------------------
     « 1fr » conserve un plancher a la largeur du contenu : la colonne
     production refusait de descendre sous 438 px et sortait de l'ecran
     de 60 px. « minmax(0, 1fr) » l'autorise a se comprimer. */
  .prod-layout  { grid-template-columns: minmax(0, 1fr) !important; }
  .cal-layout   { grid-template-columns: minmax(0, 1fr) !important; }
  .stats-grid   { grid-template-columns: minmax(0, 1fr) !important; }
  .cards-grid   { grid-template-columns: minmax(0, 1fr) !important; }
  .prod-layout > *, .cal-layout > *, .stats-grid > *, .cards-grid > * { min-width: 0; }

  .calendar-grid { min-width: 0; }
  .calendar-day, .calendar-day-name { min-width: 0; overflow: hidden; }
  .calendar-day-num { font-size: 12px; }
  .calendar-header { flex-wrap: wrap; gap: 8px 10px; }
  .calendar-month-label { font-size: 13px; }
  .prod-tasks-panel { padding: 12px !important; }
  #prod-affaires-list > *, #daily-tasks-list > * { min-width: 0; }


  /* --- 6. Liste d'attente de production ----------------------------
     Trois voies de priorite cote a cote ne laissaient que 104 px par
     carte : le numero d'affaire se coupait en trois lignes (« 224 /
     7-0 / 1 ») et le nom du client se reduisait a « DE... ». Les deux
     voies vides mangeaient les deux tiers de la largeur. On empile.
     La grille est posee en style inline par le script : il faut donc
     « !important » pour la reprendre. */
  #prod-affaires-list { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  #prod-affaires-list [style*="font-size:9px"] { font-size: 11px !important; }
  #prod-affaires-list [style*="font-size:8px"],
  #prod-affaires-list [style*="font-size:7px"] { font-size: 10px !important; }

  /* Cinq rangees de cases de 80 px, presque toutes vides, prenaient un
     ecran entier avant d'arriver a la liste d'attente. */
  .calendar-day { min-height: 58px !important; }
  .calendar-day-name { font-size: 10.5px !important; }


  /* --- 7. Fiche affaire : la croix de fermeture etait hors de l'ecran
     La rangee d'actions porte « flex-shrink:0 » en style inline : elle
     ne pouvait donc pas se replier et s'etalait sur 872 px, poussant la
     croix jusqu'a 876 px sur un ecran de 390. Refermer la fiche au
     doigt etait devenu impossible. On epingle la croix en haut a droite
     et on autorise les actions a passer a la ligne. */
  .modal-header { position: relative; padding-right: 48px !important; flex-wrap: wrap; }
  /* Largeur FERME sur la rangee : sans elle, la bande d'actions et sa
     rangee se renvoyaient la balle (chacune se dimensionnait sur
     l'autre) et la bande restait a 851 px, rognee par la fiche au lieu
     d'etre defilable — sept actions sur onze devenaient injoignables.
     « 100% » se resout ici sur la zone de texte de l'en-tete, qui est
     une valeur connue : le calcul ne tourne plus en rond. */
  .modal-header > div { width: 100% !important; flex-wrap: wrap !important; min-width: 0; }
  .modal-header > div > div { min-width: 0; flex-shrink: 1 !important; }
  .modal-close {
    position: absolute !important; top: 14px; right: 12px; z-index: 5;
    width: 36px !important; height: 36px !important;
  }
  .modal-header .action-btn { font-size: 11px !important; padding: 7px 9px !important; min-height: 34px; }
  /* Repliees sur quatre rangees, les actions occupaient 257 px : un
     tiers de l'ecran a faire defiler avant de voir la moindre donnee,
     a chaque ouverture de fiche. On les met sur une seule bande que
     l'on fait glisser du doigt, comme les onglets juste en dessous.
     L'en-tete retombe ainsi autour de 120 px. */
  .modal-header > div > div[style*="justify-content:flex-end"] {
    width: 100% !important; flex: 0 0 auto !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .modal-header > div > div[style*="justify-content:flex-end"]::-webkit-scrollbar { display: none; }
  .modal-header .action-btn { flex-shrink: 0 !important; white-space: nowrap; }

  /* --- 8. Mode liste : la ligne d'informations depassait de 20 px --- */
  .affaire-card-v2.list-mode .ac-header { min-width: 92px !important; }
  .affaire-card-v2.list-mode .ac-body { min-width: 0; }
  .card-meta { flex-wrap: wrap; min-width: 0; }

  /* Un tableau ne se comprime pas : on le fait defiler dans son cadre
     plutot que de laisser toute la page partir de travers. */
  .table-wrap, .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- 5. Confort de saisie ----------------------------------------
     Sous 16 px, Safari zoome tout seul a la mise au point du champ. */
  .search-box input, .modal input, .modal select, .modal textarea { font-size: 16px !important; }
}

/* Ecran tres etroit : la colonne prend tout, le bandeau se resserre. */
@media (max-width: 380px) {
  .kanban-col { width: calc(100vw - 42px) !important; }
  .kpi-card { padding: 7px 11px !important; }
  .kpi-value { font-size: 19px !important; }
}

/* ===== PLANIFICATION AU DOIGT — genere =====
   Quand une affaire est armee, les jours deviennent des cibles evidentes. */
.calendar-day.cal-jour-cible { box-shadow: inset 0 0 0 2px #8580db; cursor: pointer; }
.calendar-day.cal-jour-cible:active { background: #e1e8fd; }
#prod-affaires-list div[draggable] { cursor: pointer; }

/* ===== TABLEAU ADMIN, CHAT ET CALENDRIER SUR TELEPHONE — genere =====

   Trois defauts rapportes, tous mesures a 390 px :
     1. le tableau admin « bougeait de gauche a droite » au defilement ;
     2. le champ de saisie du chat passait sous la barre du bas ;
     3. le calendrier demandait 545 px de defilement avant la grille.   */

@media (max-width: 768px) {

  /* --- 1. Tableau admin : le glissement lateral ---------------------
     Cause mesuree : une grille « 1fr 1fr 1fr » posee en style inline
     reclamait 430 px pour 366 disponibles (« 1fr » garde un plancher a
     la largeur du contenu). Le debordement portait .main-content a
     442 px de large : au moindre mouvement du doigt, toute la page
     glissait lateralement. */
  #view-dashboard-admin [style*="grid-template-columns:1fr 1fr 1fr"],
  #view-dashboard-admin [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #view-dashboard-admin > div,
  #view-dashboard-admin [style*="display:grid"] > * { min-width: 0; }

  /* Garde-fou : si un contenu deborde encore un jour, il sera rogne
     plutot que de faire riper la page entiere. Les zones qui doivent
     defiler horizontalement (kanban, tableaux) ont leur propre cadre. */
  .main-content { overflow-x: hidden; }

  /* --- 2. Chat equipe : le champ de saisie sous la barre du bas -----
     La boite avait une hauteur figee « calc(100vh - 200px) ». Sur
     telephone, 100vh compte la barre d'adresse, et il restait a
     soustraire l'entete a deux rangees plus la barre de navigation :
     la ligne de saisie tombait dessous et devenait inutilisable.
     On laisse le cadre prendre la hauteur reellement disponible. */
  #view-team-chat {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
  }
  #view-team-chat > div {
    height: auto !important;
    max-width: 100% !important;
    flex: 1 1 auto; min-height: 300px;
  }
  #team-chat-messages { min-height: 0; }
  /* Une bulle de message peut occuper la largeur : la lecture y gagne. */
  #team-chat-messages > div > div { max-width: 100% !important; }
  #team-chat-input { font-size: 16px !important; }

  /* --- 3. Calendrier : 545 px avant de voir la grille ---------------
     Les pastilles techniciens s'empilaient sur trois lignes et le
     panneau de charge occupait un tiers d'ecran. */
  #cal-legende {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 6px; padding-bottom: 2px;
  }
  #cal-legende::-webkit-scrollbar { display: none; }
  .cal-tech { flex-shrink: 0; font-size: 11px; padding: 6px 10px; }

  /* Le panneau de charge s'adresse au responsable planning : sur
     telephone il est replie, et se deplie d'une touche. */
  .cal-charge { padding: 9px 11px; }
  .cal-charge-l { grid-template-columns: minmax(0, 1fr) !important; gap: 3px !important; }
  .cal-charge-l.replie { display: none; }
  .cal-charge-h { margin-bottom: 0; cursor: pointer; }
  .cal-charge-h .resp { display: none; }

  /* La grille du mois : des cases lisibles plutot que du texte coupe. */
  .cal-mois { grid-auto-rows: minmax(62px, auto) !important; }
  .cal-jour { padding: 3px 3px 5px !important; }
  .cal-num { font-size: 11px !important; }
  .cal-iv { font-size: 9.5px !important; line-height: 1.25; }
}

/* ===== FILIGRANE DE COMPOSITION — genere =====
   Ce que contient l affaire, lisible d un coup d oeil sans ouvrir la
   fiche. Assez pale pour ne pas gener la lecture, assez present pour
   se voir en balayant la colonne du regard. */
.kanban-card { position: relative; }
.kanban-card[data-filigrane]::after {
  content: attr(data-filigrane);
  position: absolute; right: 6px; bottom: 2px;
  font-family: Syne, system-ui, sans-serif; font-weight: 800;
  font-size: 15px; letter-spacing: -.3px; line-height: 1;
  color: #111; opacity: .085;
  transform: rotate(-6deg); transform-origin: 100% 100%;
  pointer-events: none; white-space: nowrap; z-index: 0;
}
.dark .kanban-card[data-filigrane]::after { color: #fff; opacity: .13; }
/* Un peu plus discret encore la ou la carte est etroite. */
@media (max-width: 768px) {
  .kanban-card[data-filigrane]::after { font-size: 17px; opacity: .075; }
}

/* ===== FOND BLANC ET BANDEAU BLEU 7G — genere =====

   Le bleu #0C3D63 est la couleur institutionnelle en vigueur, relevee
   sur l'en-tete officiel. Elle ne sert QUE sur le bandeau du haut : le
   reste de l'ecran est blanc, et les accents clairs restent sur les
   surfaces noires (barre laterale), ou le bleu fonce serait invisible.

   L'encre du bandeau passe en blanc. Les commandes qui y vivent
   (recherche, Trier, Export, selecteur) gardent leur encre sombre :
   elles ont leur propre fond clair et se detachent seules.            */

body:not(.dark) { background: #ffffff; }

.topbar { background: #0C3D63 !important; border-bottom: 4px solid #111111 !important; }
.topbar-title { color: #ffffff !important; }

/* « Nouveau » est l'action principale : en blanc sur le bleu, elle
   ressort, la ou le noir d'origine se serait noye dans le bandeau. */
.topbar .btn-primary-sm { background: #ffffff !important; color: #0C3D63 !important; }
.topbar .btn-primary-sm:hover { background: #e8eff5 !important; }

/* Les commandes encadrees gardent une encre lisible sur leur fond clair. */
.topbar .search-box, .topbar .search-box input, .topbar .search-box i,
.topbar .topbar-btn, .topbar select { color: #1f2430 !important; }
.topbar .search-box input::placeholder { color: #6b7280 !important; }

/* ===== BOUTONS DE LA BARRE LATERALE — genere =====
   Poses sur le noir de la barre, ils encaissent une couleur franche sans
   gener personne. « Nouvelle affaire » prend l'ambre — c'est l'action
   principale, elle doit se voir en premier ; l'import du devis prend la
   menthe pour rester distinct au coup d'oeil. Encre noire conservee :
   8,4:1 sur l'ambre, 8,8:1 sur la menthe. */
.btn-new-dossier:not([style*="background"]) { background: #ffb43c !important; color: #111 !important; }
#btn-upload[style] { background: #4fdcb0 !important; color: #111 !important; }
.btn-new-dossier:hover, #btn-upload:hover { filter: brightness(1.06); }

/* ===== COMPTEURS DU HAUT — genere =====
   Chaque compteur porte la couleur de la colonne qu'il filtre. Le total
   ne filtre aucun service : il prend le bleu 7G du bandeau et sert
   d'ancre a la rangee.

   Le libelle etait en gris #555, herite de --text-muted. Cela passait sur
   les anciens fonds tres pales ; sur des aplats francs, 9 px de gris
   tombent a 3,5:1. On force l'encre foncee. */
/* Le mode sombre eclaircit l'encre des compteurs a partir de leur couleur
   inline (.dark .kpi-label[style*="color:#64748b"]), ce qui rendait la
   carte Etude illisible : encre claire sur aplat clair, 1,2:1. On repete
   donc les regles au meme niveau de specificite pour le theme sombre. */
.kpi-card .kpi-label, .dark .kpi-card .kpi-label { color: #1f2430 !important; }
.kpi-card .kpi-value, .dark .kpi-card .kpi-value { color: #111111 !important; }

.kpi-card:first-child { background: #0C3D63 !important; }
.kpi-card:first-child .kpi-label, .dark .kpi-card:first-child .kpi-label { color: #a9cde6 !important; }
.kpi-card:first-child .kpi-value, .dark .kpi-card:first-child .kpi-value { color: #ffffff !important; }

/* ── Fiche affaire : en-tete surcharge — 09/09/2026 ──────────────────
   Dix a douze actions se partageaient la ligne avec le titre. La rangee
   d'actions porte « flex-shrink:0 » en style INLINE : elle ne cedait
   jamais un pixel. Consequences mesurees a 1440 px :
     - colonne de gauche ecrasee a ~90 px ; le badge de service et le
       numero d'affaire, non compressibles, debordaient SOUS les boutons ;
     - la bande depassait de 53 px hors de la fiche, « Supprimer » etait
       coupe en plein mot et la croix de fermeture devenait injoignable.
   Correction : les deux colonnes peuvent passer a la ligne, celle de
   gauche garde une largeur lisible, la rangee d'actions se replie au
   lieu de deborder. Rien n'est masque, rien ne se superpose.
   Les regles mobiles (@media max-width:768px) restent prioritaires. */
@media (min-width: 769px) {
  #modal-detail .modal-header > div { flex-wrap: wrap; row-gap: 8px; }
  #modal-detail .modal-header > div > div:first-child {
    flex: 1 1 320px !important;   /* annule le « flex:1 » inline */
    min-width: 260px !important;  /* en deca, le titre devient illisible */
  }
  #modal-detail .modal-header > div > div:last-child {
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;    /* annule le « flex-shrink:0 » inline */
    flex-wrap: wrap !important;
    row-gap: 6px;
    min-width: 0;
  }
  /* Le badge et le numero ne doivent jamais depasser de leur colonne. */
  #modal-detail #m-badge, #modal-detail #m-num { max-width: 100%; }
  /* Un nom de client sans espace ne doit pas forcer la colonne a s'elargir. */
  #modal-detail #m-title { overflow-wrap: anywhere; }
  /* La croix ne doit pas etre poussee seule au bout d'une rangee : elle suit
     simplement les autres actions et ne se comprime jamais. */
  #modal-detail .modal-header .modal-close { flex-shrink: 0; }
}

/* Le bouton « Import devis EBP » accepte un fichier lache dessus. Son aspect
   au repos est volontairement inchange : seul le survol pendant un glisser le
   signale, sinon on ne devine pas qu'il est devenu une zone de depot. */
#btn-upload.drop-devis-actif {
  outline: 2.5px dashed #1b8a68;
  outline-offset: 2px;
  filter: brightness(1.05);
}
#btn-upload.drop-devis-actif * { pointer-events: none; }  /* le survol reste sur le bouton */

/* ===== 09/09/2026 — lisibilite onglets, boutons sombres, filigrane =====

   1. BOUTONS DU BANDEAU EN THEME SOMBRE
   Le bloc genere plus haut (« [style*="background:#xxxxxx"] { color:#1f2430 } »)
   impose un texte sombre des qu'une couleur pale figure dans le style INLINE.
   Or « .dark .action-btn » repeint le fond en #252b3c : on obtenait du texte
   sombre sur fond sombre. Mesure avant correction : « Nouvelle version »,
   « Fiche terrain » et « Importer PDF » a 1,10:1 — invisibles, alors que les
   autres boutons du meme bandeau etaient a 11,44:1.
   Ces regles arrivent APRES le bloc genere et sont plus specifiques : elles
   rendent au theme sombre la main sur ses propres boutons. */
.dark .modal-header .action-btn[style] { color: #e2e8f0 !important; }

/*  2. BARRE D'ONGLETS DE LA FICHE AFFAIRE
   En theme sombre l'onglet actif a une pastille lavande, bien visible. En
   theme clair il n'avait qu'un trait de 2 px et douze pixels de texte indigo,
   coince entre un bandeau d'actions colore et le contenu : signale comme
   difficile a reperer. On lui donne la meme pastille, et on fonce legerement
   les onglets inactifs. */
#modal-detail .tab-btn {
  color: #475569;                    /* etait #555 via --text-muted */
  border-radius: 8px 8px 0 0;
}
#modal-detail .tab-btn:hover { background: #f1f5f9; }
#modal-detail .tab-btn.active {
  background: #e1e8fd;
  color: #2c3ea8;
  font-weight: 800;
  border-bottom-color: #4f46e5;
}
/* Le theme sombre garde sa pastille lavande, deja lisible. */
.dark #modal-detail .tab-btn:hover { background: #303750; }

/*  3. FILIGRANE DES CARTES
   Demande : « plus visible, et ecris plus de fois le mot dans le carre ».
   On passe d'un mot unique en bas a droite a un motif repete sur toute la
   carte, et on double l'opacite. La carte porte deja overflow:hidden, le
   motif deborde donc sans risque et remplit jusqu'aux angles. */
.kanban-card[data-filigrane]::after {
  content: attr(data-filigrane) "   " attr(data-filigrane) "   " attr(data-filigrane) "   "
           attr(data-filigrane) "   " attr(data-filigrane) "   " attr(data-filigrane) "   "
           attr(data-filigrane) "   " attr(data-filigrane) "   " attr(data-filigrane);
  position: absolute;
  inset: -35%;                       /* deborde : le motif atteint les angles */
  right: auto; bottom: auto; width: 170%; height: 170%;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 800; font-size: 13px;
  letter-spacing: -.2px; line-height: 2.4; word-spacing: 8px;
  text-align: center;
  color: #111; opacity: .17;         /* etait .085 */
  transform: rotate(-8deg); transform-origin: 50% 50%;
  pointer-events: none; white-space: normal; overflow: hidden; z-index: 0;
}
.dark .kanban-card[data-filigrane]::after { color: #fff; opacity: .22; }
@media (max-width: 768px) {
  .kanban-card[data-filigrane]::after { font-size: 12px; opacity: .15; }
}

/* Onglet BAT : sous-onglets Relevé / BAT (09/10/2026) */
.sous-onglets { display: flex; gap: 4px; padding: 3px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; align-self: flex-start; }
.sous-onglets button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.sous-onglets button:hover { color: var(--text); }
.sous-onglets button.on { background: var(--indigo); color: #fff; }
.sous-onglets .so-n:not(:empty) { font-size: 10px; font-weight: 800; background: rgba(0,0,0,.08); border-radius: 99px; padding: 1px 7px; }
.sous-onglets button.on .so-n:not(:empty) { background: rgba(255,255,255,.25); }