/* =============================================================================
   TerraTrack — Premium Redesign v2 (faithful mockup port)
   =============================================================================
   This file is loaded LAST in index.html and wins the cascade.
   It rebuilds the *visual* layer on top of the existing HTML/JS without
   touching either, so business logic is preserved.

   Reference: docs/design/TerraTrack Redesign.html (original mockup the
   client validated). Accent = azure (h=230).
   ========================================================================= */

/* Geist + Geist Mono chargés via <link preconnect> dans index.html (PR1 Foundation). */

/* =============================================================================
   01 · BASE & TYPOGRAPHY
   ============================================================================= */

html,
body {
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-feature-settings: "cv11", "ss01", "ss03" !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, button, input, textarea, select {
  font-family: var(--font-sans) !important;
  letter-spacing: 0 !important;
}

/* Monospace for numeric/code surfaces */
.dv, .tnc, .ph-logo, .pot-amount, .dc-kpi-num,
.hdate, [class*="-mono"], code, kbd {
  font-family: var(--font-mono) !important;
}

::selection {
  background: var(--accent-soft-strong);
  color: var(--fg);
}

* { text-shadow: none !important; }

/* Premium scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--fg) 14%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--fg) 12%, transparent);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklch, var(--fg) 22%, transparent);
  background-clip: padding-box;
}

/* Page transition */
.screen { animation: ttFadeIn 220ms var(--ease); }
@keyframes ttFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Focus visible everywhere */
:focus-visible {
  outline: 0 !important;
  box-shadow: var(--shadow-focus) !important;
  border-radius: var(--r-sm);
}

/* =============================================================================
   02 · APP SHELL
   ============================================================================= */

.app {
  background: var(--bg) !important;
}

.screen {
  background: transparent !important;
  padding-bottom: calc(96px + var(--sb)) !important;
}

/* =============================================================================
   03 · NAVIGATION — bottom nav (mobile) ↔ sidebar (desktop)
   =============================================================================
   The mockup used a left sidebar with sections (Pilotage / Analyse / Compte).
   On mobile we keep the bottom tab bar pattern (better thumb reach).
   ============================================================================= */

/* ---- BOTTOM NAV (mobile < 1024px) ---- */
.bnav {
  background: color-mix(in oklch, var(--bg) 88%, transparent) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -1px 0 var(--border) !important;
}
/* Footer caché sur mobile (sidebar = bottom tab bar). */
.bnav-footer { display: none !important; }
.bnav-inner {
  padding: 8px 4px !important;
  gap: 0 !important;
  max-width: none !important;
}
.ni {
  flex: 1 !important;
  padding: 6px 2px !important;
  gap: 4px !important;
  border-radius: var(--r-md) !important;
  background: transparent !important;
  color: var(--fg-muted) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  transition: color var(--dur-1) var(--ease) !important;
}
.ni:hover { color: var(--fg-secondary) !important; }
.ni.active {
  color: var(--accent) !important;
  background: transparent !important;
}
.ni-icon {
  width: 26px !important;
  height: 24px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
}
.ni.active .ni-icon { background: transparent !important; border: 0 !important; }
.ni svg { width: 18px !important; height: 18px !important; stroke-width: 1.7 !important; }

.nbadge {
  position: absolute !important;
  top: 2px !important;
  right: calc(50% - 20px) !important;
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-radius: var(--r-pill) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  min-width: 14px !important;
  height: 14px !important;
  line-height: 12px !important;
  border: 2px solid var(--bg) !important;
  box-shadow: none !important;
}

/* ---- SIDEBAR (desktop ≥ 1024px) ---- */
@media (min-width: 1024px) {
  body { overflow: hidden !important; }
  .app {
    flex-direction: row !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    border: 0 !important;
  }

  .bnav {
    position: relative !important;
    flex-direction: column !important;
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
    height: 100dvh !important;
    inset: auto !important;
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 0 !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
    overflow-y: auto !important;
  }
  .bnav-inner {
    flex-direction: column !important;
    padding: 14px 12px 16px !important;
    gap: 2px !important;
    height: 100% !important;
    align-items: stretch !important;
    position: relative !important;
  }

  /* Brand header — TT logo + name */
  .bnav-inner::before {
    content: "TT" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 4px 0 28px 6px !important;
    flex: none !important;
    border-radius: var(--r-md) !important;
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    box-shadow: 0 1px 0 oklch(1 0 0 / 0.18) inset !important;
  }
  .bnav-inner::after {
    content: "TerraTrack\A Cockpit terrain" !important;
    white-space: pre !important;
    position: absolute !important;
    top: 18px !important;
    left: 60px !important;
    color: var(--fg) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    pointer-events: none !important;
  }

  /* Section labels (PILOTAGE / ANALYSE / COMPTE).
     We inject them BEFORE the first nav item of each section. */
  #n-search,
  #n-qualification,
  #n-settings {
    position: relative !important;
    margin-top: 18px !important;
  }
  #n-search::before {
    content: "PILOTAGE" !important;
    position: absolute !important;
    left: 10px !important;
    top: -16px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: var(--fg-muted) !important;
    letter-spacing: 0.08em !important;
  }
  #n-qualification::before {
    content: "ANALYSE" !important;
    position: absolute !important;
    left: 10px !important;
    top: -16px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: var(--fg-muted) !important;
    letter-spacing: 0.08em !important;
  }
  #n-settings::before {
    content: "COMPTE" !important;
    position: absolute !important;
    left: 10px !important;
    top: -16px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: var(--fg-muted) !important;
    letter-spacing: 0.08em !important;
  }

  /* Nav items */
  .ni {
    flex: none !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    gap: 10px !important;
    border-radius: var(--r-md) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    position: relative !important;
  }
  .ni:hover {
    background: var(--surface-hover) !important;
    color: var(--fg) !important;
  }
  .ni.active {
    background: var(--surface) !important;
    color: var(--fg) !important;
    box-shadow: var(--shadow-xs) !important;
  }
  .ni.active::after {
    content: "" !important;
    position: absolute !important;
    left: -12px !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 2px !important;
    background: var(--accent) !important;
    border-radius: 2px !important;
  }
  .ni-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  .ni svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 1.7 !important;
  }
  .nbadge {
    position: static !important;
    margin-left: auto !important;
    background: var(--surface-hover) !important;
    color: var(--fg-muted) !important;
    border: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 1px 7px !important;
    height: auto !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
  }
  .ni.active .nbadge {
    background: var(--bg-elev) !important;
  }

  /* Footer sidebar — avatar + email user (PR1 Foundation, desktop only) */
  .bnav-footer { display: flex !important; }
  .bnav-footer {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border-top: 1px solid var(--border) !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    margin-bottom: -16px !important;
    padding: 14px 16px !important;
  }
  .bnav-footer-avatar {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    display: grid !important;
    place-items: center !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
  }
  .bnav-footer-info {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }
  .bnav-footer-name {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--fg) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
  }
  .bnav-footer-email {
    font-size: 11px !important;
    color: var(--fg-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
  }

  .screen {
    flex: 1 !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
    scrollbar-gutter: stable !important;
  }
}

/* =============================================================================
   04 · PAGE HEADER (ph) — clean topbar
   ============================================================================= */

.ph {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  padding: 18px 24px !important;
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.ph-inner {
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.ph-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.ph-logo {
  width: 30px !important;
  height: 30px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  display: grid !important;
  place-items: center !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--fg-secondary) !important;
  letter-spacing: -0.04em !important;
  box-shadow: var(--shadow-xs) !important;
  flex-shrink: 0 !important;
}
.ph-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--fg) !important;
  line-height: 1.2 !important;
}
.ph-sub {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--fg-muted) !important;
  margin-top: 2px !important;
}
.ph-pill {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-secondary) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  box-shadow: var(--shadow-xs) !important;
}

/* Desktop: hide the per-screen logo (logo is in sidebar) — cleaner */
@media (min-width: 1024px) {
  .ph { padding: 20px 32px !important; }
  .ph-logo { display: none !important; }
}

/* =============================================================================
   05 · STATUS BAR & EMPTY STATES
   ============================================================================= */

.ds-status {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--surface) !important;
  color: var(--fg-secondary) !important;
  font-weight: 500 !important;
  margin: 12px 24px 0 !important;
  padding: 10px 14px !important;
  font-size: 12.5px !important;
}

.es {
  padding: 64px 32px !important;
  color: var(--fg-muted) !important;
}
.ei {
  font-size: 38px !important;
  opacity: 0.35 !important;
  margin-bottom: 14px !important;
}
.es h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--fg-secondary) !important;
  margin-bottom: 4px !important;
}
.es p {
  font-size: 13px !important;
  color: var(--fg-muted) !important;
  opacity: 1 !important;
  line-height: 1.6 !important;
}

/* =============================================================================
   06 · CARDS
   ============================================================================= */

.card,
.card2,
.card-accent {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  padding: 20px !important;
  margin: 16px 24px !important;
  box-shadow: var(--shadow-xs) !important;
  max-width: var(--content-max) !important;
}
@media (min-width: 1024px) {
  .card, .card2, .card-accent { margin: 18px auto !important; }
}
.card-accent {
  background:
    linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%),
    var(--surface) !important;
}
.card:hover, .card-accent:hover { border-color: var(--border-strong) !important; }

/* =============================================================================
   07 · TABS / SEGMENTED CONTROL
   ============================================================================= */

.tabrow {
  display: flex !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  gap: 2px !important;
  margin-bottom: 16px !important;
}
.tab {
  flex: 1 !important;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--fg-muted) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease) !important;
  height: auto !important;
  width: auto !important;
}
.tab:hover { color: var(--fg-secondary) !important; }
.tab.on {
  background: var(--surface) !important;
  color: var(--fg) !important;
  box-shadow: var(--shadow-xs) !important;
}

.visit-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
  margin: 14px 0 16px;
  position: sticky;
  top: -1px;
  z-index: 2;
}
.visit-tab {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-muted);
  padding: 8px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.visit-tab:hover { color: var(--fg-secondary); }
.visit-tab.is-active {
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
}

/* =============================================================================
   08 · INPUTS, LABELS, SELECTS, TEXTAREAS
   ============================================================================= */

.lbl, .mf label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--fg-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.inp,
.mf input, .mf textarea, .mf select,
input[type="text"]:not([class*="qual-"]):not([class*="cal-"]),
input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"],
input[type="password"],
textarea, select {
  width: 100% !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 13px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease) !important;
  font-family: var(--font-sans) !important;
}
.inp:hover:not(:focus),
.mf input:hover:not(:focus), .mf textarea:hover:not(:focus), .mf select:hover:not(:focus) {
  border-color: var(--border-strong) !important;
}
.inp:focus,
.mf input:focus, .mf textarea:focus, .mf select:focus,
input:focus, textarea:focus, select:focus {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-focus) !important;
}
.inp::placeholder, input::placeholder, textarea::placeholder {
  color: var(--fg-muted) !important;
  opacity: 1 !important;
}

/* Custom select arrow */
select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) center, calc(100% - 12px) center !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 32px !important;
}

textarea {
  resize: vertical !important;
  min-height: 80px !important;
}

.ig { margin-bottom: 14px !important; }
.mf { margin-bottom: 14px !important; }

/* Distance row (Search) */
.distrow {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-end !important;
  margin-bottom: 16px !important;
}
.distrow span {
  font-size: 12px !important;
  color: var(--fg-muted) !important;
  font-weight: 500 !important;
  padding-bottom: 12px !important;
  font-family: var(--font-mono) !important;
}

/* Date wrapper SVG */
.date-wrap::after {
  content: '' !important;
  width: 14px !important;
  height: 14px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") center / contain no-repeat !important;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") center / contain no-repeat !important;
  color: var(--fg-muted) !important;
  opacity: 1 !important;
  right: 14px !important;
}

/* Autocomplete dropdown */
.adrop {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  top: calc(100% + 4px) !important;
  overflow: hidden !important;
}
.aitem {
  padding: 10px 13px !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg) !important;
  font-weight: 500 !important;
  transition: background var(--dur-1) var(--ease) !important;
}
.aitem:last-child { border-bottom: 0; }
.aitem:hover { background: var(--surface-hover); color: var(--fg); }
.aitem:active { background: var(--accent-soft); color: var(--accent); }

/* =============================================================================
   09 · BUTTONS — flat, modern, mockup-aligned
   ============================================================================= */

.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--fg) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease),
              transform var(--dur-2) var(--ease) !important;
  box-shadow: var(--shadow-xs) !important;
  width: 100% !important;
  filter: none !important;
  text-shadow: none !important;
  font-family: var(--font-sans) !important;
}
.btn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  filter: none !important;
  transform: none !important;
}
.btn:active { transform: translateY(0.5px) !important; filter: none !important; }
.btn:focus-visible { outline: 0 !important; box-shadow: var(--shadow-focus) !important; }
.btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

.btn-primary {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: var(--accent-fg) !important;
  font-weight: 600 !important;
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.18) inset,
    0 1px 2px rgba(0,0,0,0.2) !important;
}
.btn-primary:hover {
  background: var(--accent-hover) !important;
  filter: none !important;
}

.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-secondary) !important;
  box-shadow: none !important;
}
.btn-ghost:hover {
  background: var(--surface-hover) !important;
  color: var(--fg) !important;
  border-color: var(--border-strong) !important;
}

.btn-success {
  background: var(--success-soft) !important;
  border: 1px solid color-mix(in oklch, var(--success) 24%, transparent) !important;
  color: var(--success) !important;
  font-weight: 600 !important;
}
.btn-success:hover {
  background: color-mix(in oklch, var(--success) 18%, var(--surface)) !important;
}

.btn-danger {
  background: var(--danger-soft) !important;
  border: 1px solid color-mix(in oklch, var(--danger) 24%, transparent) !important;
  color: var(--danger) !important;
  font-weight: 600 !important;
}
.btn-danger:hover {
  background: color-mix(in oklch, var(--danger) 18%, var(--surface)) !important;
}

.btn-sm {
  height: 30px !important;
  padding: 0 11px !important;
  font-size: 12.5px !important;
  border-radius: var(--r-sm) !important;
  width: auto !important;
}

/* Icon button (header actions) */
.ib, .icon-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--fg-secondary) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease) !important;
  box-shadow: var(--shadow-xs) !important;
  flex-shrink: 0 !important;
}
.ib:hover, .icon-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--fg);
  filter: none;
}
.ib.on {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-fg);
}

/* The "+" header button that's hard-styled inline — neutralize */
#btn-new-prospect {
  background: var(--accent) !important;
  border: 1px solid transparent !important;
  color: var(--accent-fg) !important;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.18) inset !important;
  font-weight: 600 !important;
}

/* =============================================================================
   10 · CHIPS (filter pills)
   ============================================================================= */

.scr {
  display: flex !important;
  gap: 6px !important;
  padding: 12px 24px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
}
.scr::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 11px !important;
  border-radius: var(--r-pill) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-elev) !important;
  color: var(--fg-secondary) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease) !important;
}
.chip:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
.chip.on {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: transparent !important;
}
/* Uniform style for ALL per-sector chips */
[data-s].on { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: transparent !important; }

/* =============================================================================
   11 · COUNT BAR + SECONDARY ACTION BUTTONS (cbtn)
   ============================================================================= */

.cbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px 4px !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
}
.cbar-label {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.cbar-btns { display: flex; gap: 4px; }
.cbtn {
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  border-radius: var(--r-sm) !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background var(--dur-1) var(--ease) !important;
}
.cbtn-add { color: var(--accent); background: var(--accent-soft); }
.cbtn-add:hover { background: var(--accent-soft-strong); }
.cbtn-rem { color: var(--danger); background: var(--danger-soft); }
.cbtn-rem:hover { background: color-mix(in oklch, var(--danger) 22%, transparent); }

/* =============================================================================
   12 · PROSPECT / CLIENT CARDS (.pc) — Search screen list
   ============================================================================= */

.plist {
  padding: 8px 24px 8px !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
}

.pc {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  gap: 12px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease) !important;
}
.pc:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
}
.pc.int {
  border-color: color-mix(in oklch, var(--accent) 30%, transparent) !important;
}

.pip {
  width: 3px !important;
  border-radius: 2px !important;
  margin-top: 0 !important;
  align-self: stretch !important;
}

.pname {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
  line-height: 1.3;
}
.pmeta {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
  font-weight: 400;
}

.ptags { gap: 4px !important; margin-top: 8px !important; }
.pac { gap: 6px !important; }

/* =============================================================================
   13 · TOURNÉE ITEMS (.ti)
   ============================================================================= */

.ti {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 12px 14px 12px 8px !important;
  margin: 0 24px 8px !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-xs) !important;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease) !important;
}
.ti:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
}
@media (min-width: 1024px) {
  .ti {
    margin: 0 auto 8px !important;
    max-width: var(--content-max) !important;
  }
}
.tn { width: 44px !important; }
.tnc {
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--r-sm) !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.tname {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
}
.tsub {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
  font-weight: 400;
}
.tbt { gap: 4px !important; }
.tact {
  padding: 14px 24px !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
}

/* =============================================================================
   14 · TAGS (.tag .t-*)
   ============================================================================= */

.tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 7px !important;
  border-radius: var(--r-pill) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-elev) !important;
  color: var(--fg-secondary) !important;
  font-variant-numeric: tabular-nums !important;
}
.t-dist { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: transparent !important; }
.t-ef   { background: var(--bg-elev) !important; color: var(--fg-muted) !important; }
.t-v    { background: var(--success-soft); color: var(--success); border-color: transparent; }
.t-r    { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.t-a    { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.t-p    { background: oklch(0.72 0.15 290 / 0.14); color: oklch(0.72 0.15 290); border-color: transparent; }
.t-n    { background: var(--bg-elev) !important; color: var(--fg-muted) !important; }
.t-q    { background: var(--success-soft) !important; color: var(--success) !important; border-color: transparent !important; }

/* =============================================================================
   15 · MODAL (Visite, fiche, drill, dossier client)
   ============================================================================= */

.mb {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}
.ms {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: 22px 22px 0 0 !important;
  padding: 22px 22px calc(28px + var(--sb)) !important;
  box-shadow: var(--shadow-xl) !important;
}
.mh {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: var(--r-pill);
  margin: 0 auto 18px;
}
.m-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 4px;
}
.m-sub {
  font-size: 12.5px;
  color: var(--fg-muted);
  font-weight: 400;
  margin-bottom: 16px;
  line-height: 1.5;
}
.visit-context {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  margin: 12px 0 14px;
  box-shadow: var(--shadow-xs);
}
.visit-context[hidden] { display: none !important; }
.visit-context-kicker {
  color: var(--fg-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.visit-context-title {
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 3px;
}
.visit-context-meta {
  color: var(--fg-muted);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.45;
}
.visit-context.is-planned { border-left-color: var(--info); }
.visit-context.is-done { border-left-color: var(--success); }
.visit-context.is-cancelled,
.visit-context.is-no_show { border-left-color: var(--fg-subtle); }
.visit-context.is-locked {
  background: color-mix(in oklch, var(--fg) 3%, var(--surface));
}
.m-section {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 18px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

@media (min-width: 768px) {
  .mb { align-items: center !important; padding: 24px !important; }
  .ms {
    max-width: 720px !important;
    margin: 0 auto !important;
    border-radius: var(--r-xl) !important;
    border: 1px solid var(--border) !important;
    max-height: 88vh !important;
    padding: 28px !important;
  }
  .mh { display: none !important; }
}

/* Status options grid (Visite/RDV/Absent/…) */
.sgrid { gap: 6px !important; }
.so {
  padding: 10px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  background: var(--surface) !important;
  color: var(--fg-secondary) !important;
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease) !important;
}
.so:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--fg);
}
.sv  { border-color: color-mix(in oklch, var(--success) 28%, transparent); color: var(--success); background: var(--success-soft); }
.sr  { border-color: color-mix(in oklch, var(--warn) 28%, transparent); color: var(--warn); background: var(--warn-soft); }
.sa  { border-color: color-mix(in oklch, var(--danger) 28%, transparent); color: var(--danger); background: var(--danger-soft); }
.sn  { border-color: var(--border-strong); color: var(--fg-muted); }
.sra { border-color: color-mix(in oklch, var(--pur) 28%, transparent); color: var(--pur); background: var(--pur-dim); }
.sec2{ border-color: color-mix(in oklch, var(--accent) 28%, transparent); color: var(--accent); background: var(--accent-soft); }

/* Priority stars */
.stars { gap: 6px !important; }
.star { font-size: 22px !important; color: var(--border-strong) !important; }
.star.lit { color: var(--accent); }

.next-contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  margin: 14px 0;
  box-shadow: var(--shadow-xs);
}
.next-contact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.next-contact-head span {
  display: block;
  color: var(--fg-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.next-contact-head strong {
  display: block;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}
.next-contact-head p {
  max-width: 260px;
  color: var(--fg-muted);
  font-size: 11.5px;
  line-height: 1.45;
  margin: 0;
  text-align: right;
}
@media (max-width: 560px) {
  .next-contact-head {
    display: block !important;
  }
  .next-contact-head p {
    max-width: none !important;
    margin-top: 6px !important;
    text-align: left !important;
  }
}

/* Fiche sections (forms inside modal) */
.fiche-section {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
}
.fiche-section h4 {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--fg-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin-bottom: 12px !important;
}

/* Modal action row */
.mbtns {
  display: flex !important;
  gap: 8px !important;
  margin-top: 20px !important;
}
.mbtns .btn { flex: 1 !important; height: 40px !important; }

/* History */
.m-history {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 12px !important;
}
.hlbl {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}
.hrow {
  padding: 7px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.hdate {
  font-size: 11px !important;
  color: var(--fg-muted) !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  width: 70px !important;
}
.hnote { font-size: 12px !important; color: var(--fg-secondary) !important; }

/* Tournée snapshot inside modal */
.tournee-snapshot {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
}
.tournee-snapshot-head {
  padding: 10px 14px !important;
  color: var(--fg-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}
.tournee-snapshot-head strong { color: var(--fg); font-family: var(--font-mono); }
.tournee-snapshot-row {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
}
.tournee-snapshot-row:hover { background: var(--surface-hover); }
.tournee-snapshot-num {
  width: 22px !important;
  height: 22px !important;
  border-radius: var(--r-sm) !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.tournee-snapshot-main strong { font-size: 13px !important; color: var(--fg) !important; }
.tournee-snapshot-main small { color: var(--fg-muted) !important; font-size: 11px !important; }
.tournee-snapshot-open {
  color: var(--fg-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* =============================================================================
   16 · DASHBOARD / BILAN
   ============================================================================= */

.dg {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
}
@media (min-width: 768px) { .dg { grid-template-columns: repeat(4, 1fr) !important; } }

.dt {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  padding: 18px !important;
  box-shadow: var(--shadow-xs) !important;
  position: relative !important;
}
.dt-accent { border-left: 3px solid var(--accent) !important; }

.dv {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 4px;
}
.dl {
  font-size: 11px;
  color: var(--fg-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.di { font-size: 18px; opacity: 0.6; }

.stt {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
  padding: 0 24px !important;
  margin: 24px auto 12px !important;
  max-width: var(--content-max) !important;
  letter-spacing: -0.005em !important;
}
.stt::after { background: var(--border) !important; }

/* =============================================================================
   17 · SETTINGS
   ============================================================================= */

.sset {
  padding: 16px 24px 100px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.sset-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
  margin: 24px 0 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border) !important;
  letter-spacing: -0.005em !important;
}
.sset-title:first-child { margin-top: 8px; }
.sset p {
  font-size: 13px;
  color: var(--fg-secondary);
  margin-bottom: 12px;
  line-height: 1.55;
}

/* Theme buttons */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.theme-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 12px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--fg-secondary) !important;
  transition: border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease) !important;
  text-align: left !important;
}
.theme-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.theme-btn.on {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  color: var(--fg) !important;
}
.theme-btn .tp {
  height: 50px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
}

/* Calendar provider cards */
.cal-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px !important;
}
.cal-card label { cursor: pointer !important; }
.cal-card label input[type="radio"] { accent-color: var(--accent) !important; }
.cal-card-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
}
.cal-card-desc {
  font-size: 12px !important;
  color: var(--fg-muted) !important;
  line-height: 1.5 !important;
  margin-top: 2px !important;
}

/* =============================================================================
   18 · QUALIFICATION SCREEN
   ============================================================================= */

.qual-help {
  background: var(--bg-elev) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px !important;
  color: var(--fg-secondary) !important;
  padding: 12px 24px !important;
}
.qual-help strong { color: var(--fg) !important; font-weight: 600 !important; }

.qual-chips-bar {
  padding: 14px 24px 8px !important;
  gap: 6px !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
}
.qual-chip {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-secondary) !important;
  border-radius: var(--r-pill) !important;
  padding: 5px 11px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.qual-chip:hover {
  color: var(--fg) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface-hover) !important;
}
.qual-chip.is-active {
  background: var(--accent-soft) !important;
  border-color: transparent !important;
  color: var(--accent) !important;
}
.qual-chip-count {
  background: var(--surface) !important;
  border-radius: var(--r-pill) !important;
  padding: 1px 7px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--fg-muted) !important;
  font-variant-numeric: tabular-nums !important;
}
.qual-chip.is-active .qual-chip-count {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}

.qual-search-wrap { padding: 0 !important; }
.qual-search-input {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 12px 10px 36px !important;
  font-size: 13.5px !important;
  height: 38px !important;
}
.qual-search-input:focus {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-focus) !important;
}
.qual-search-icon { opacity: 0.7 !important; color: var(--fg-muted) !important; }

.qual-filters-main { gap: 8px !important; }
.qual-filters-main label,
.qual-filters-advanced label {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: var(--fg-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.qual-filters-main select,
.qual-filters-advanced select {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 32px 8px 12px !important;
  font-size: 13px !important;
  height: 36px !important;
}
.qual-adv-toggle, .qual-reset-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-secondary) !important;
  border-radius: var(--r-md) !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  height: 36px !important;
}
.qual-adv-toggle:hover, .qual-reset-btn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
.qual-filters-advanced {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px !important;
}

.qual-row {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease) !important;
}
.qual-row:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
}
.qual-title {
  color: var(--fg) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
.qual-meta { color: var(--fg-muted) !important; font-size: 12px !important; }

.qual-card-badge {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-muted) !important;
  border-radius: var(--r-pill) !important;
  padding: 3px 9px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
.qual-card-badge.is-commercial { background: var(--accent-soft) !important; border-color: transparent !important; color: var(--accent) !important; }
.qual-card-badge.is-mailing    { background: oklch(0.72 0.15 290 / 0.14) !important; border-color: transparent !important; color: oklch(0.72 0.15 290) !important; }
.qual-card-badge.is-hors-cible { background: var(--bg-elev) !important; border-color: var(--border) !important; color: var(--fg-muted) !important; }
.qual-card-badge.is-a-trier    { background: var(--warn-soft) !important; border-color: transparent !important; color: var(--warn) !important; }
.qual-card-badge.is-controler  { background: var(--success-soft) !important; border-color: transparent !important; color: var(--success) !important; }

.qual-info-tag {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-secondary) !important;
  border-radius: var(--r-sm) !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.qual-info-tag.is-ok { background: var(--success-soft) !important; border-color: transparent !important; color: var(--success) !important; }
.qual-info-tag.is-warn { background: var(--warn-soft) !important; border-color: transparent !important; color: var(--warn) !important; }

.qual-sort-btn {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-secondary) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.qual-sort-btn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
.qual-sort-btn.is-active.is-commercial {
  background: var(--accent-soft) !important;
  border-color: transparent !important;
  color: var(--accent) !important;
}
.qual-sort-btn.is-active.is-mailing {
  background: oklch(0.72 0.15 290 / 0.14) !important;
  border-color: transparent !important;
  color: oklch(0.72 0.15 290) !important;
}
.qual-sort-btn.is-active.is-hors-cible {
  background: var(--surface-active) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}

.qual-card-link {
  color: var(--accent) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

.qual-match-banner {
  background: var(--accent-soft) !important;
  border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent) !important;
  color: var(--fg-secondary) !important;
  border-radius: var(--r-md) !important;
}
.qual-match-banner-text strong { color: var(--fg) !important; font-weight: 600 !important; }
.qual-match-btn {
  border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent) !important;
  background: var(--accent-soft) !important;
  color: var(--fg) !important;
  border-radius: var(--r-sm) !important;
}
.qual-match-btn-muted {
  border-color: var(--border) !important;
  background: var(--bg-elev) !important;
  color: var(--fg-secondary) !important;
}

/* =============================================================================
   19 · LOGIN SCREEN
   ============================================================================= */

#s-login { background: var(--bg) !important; }

/* The login card */
#s-login > div > div:last-child {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Login brand mark (gradient-styled inline) */
#s-login [style*="border-radius:14px"] {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-radius: var(--r-md) !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 17px !important;
  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent) !important;
}

/* OTP input — monospace tabular pour les chiffres */
#login-otp { font-family: var(--font-mono) !important; }

/* =============================================================================
   20 · FULLCALENDAR INTEGRATION
   ============================================================================= */

#fc-shell {
  padding: 16px 24px 100px !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
}
#fc-target {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden !important;
  color: var(--txt);
}
#fc-target .fc {
  font-family: inherit;
  font-size: 12px;
}
#fc-target .fc-theme-standard td,
#fc-target .fc-theme-standard th,
#fc-target .fc-theme-standard .fc-scrollgrid {
  border-color: var(--bor);
}
#fc-target .fc-toolbar-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--txt);
}
#fc-target .fc-col-header-cell {
  background: var(--bg-elev) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--fg-muted) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
#fc-target .fc-daygrid-day-number {
  color: var(--txt2);
  font-size: 11px;
  padding: 4px 6px;
}
#fc-target .fc-day-other .fc-daygrid-day-number {
  color: var(--txt3);
  opacity: .5;
}
#fc-target .fc-button {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  background: var(--bg-elev) !important;
  color: var(--fg-secondary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 6px 10px !important;
  height: 30px !important;
  box-shadow: none !important;
}
#fc-target .fc-button:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
#fc-target .fc-button-primary:not(:disabled).fc-button-active,
#fc-target .fc-button-primary:not(:disabled):active {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: var(--accent-fg) !important;
}
#fc-target .fc-event {
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  min-height: 24px !important;
  padding: 3px 7px !important;
  border-width: 1px !important;
  box-shadow: inset 4px 0 0 var(--border-strong), 0 1px 0 color-mix(in oklch, var(--fg) 6%, transparent) !important;
}
#fc-target .fc-daygrid-event-dot {
  display: none;
}
#fc-target .fc-event-main,
#fc-target .fc-event-title,
#fc-target .fc-event-time {
  pointer-events: none !important;
}
#fc-target .fc-list-event {
  cursor: pointer !important;
  pointer-events: auto !important;
}
#fc-target .fc-source-event {
  color: white !important;
  box-shadow: inset 4px 0 0 color-mix(in oklch, white 50%, transparent), 0 1px 0 color-mix(in oklch, var(--fg) 8%, transparent) !important;
}
#fc-target .fc-event:hover,
#fc-target .fc-list-event:hover td {
  background: rgba(255, 255, 255, .05);
  filter: saturate(1.05) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 4px 0 0 currentColor, 0 8px 18px color-mix(in oklch, var(--fg) 10%, transparent) !important;
}
#fc-target .fc-list-day-cushion {
  background: rgba(255, 255, 255, .04);
  color: var(--txt2);
  font-weight: 600;
}
#fc-target .fc-list-empty {
  background: transparent;
  color: var(--txt3);
}
#fc-target .fc-now-indicator-line {
  border-color: var(--acc2);
}
#fc-target .fc-popover {
  background: var(--card2);
  border: 1px solid var(--bor);
}
#fc-target .fc-popover-header {
  background: rgba(255, 255, 255, .04);
  color: var(--txt);
}
#fc-target .fc-day-today {
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 55%),
    var(--surface) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent) !important;
}
#fc-target .fc-day-today .fc-daygrid-day-number {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
}

.fc-visit-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 0 12px !important;
}
.fc-visit-metric {
  min-width: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
  padding: 12px 13px !important;
  box-shadow: var(--shadow-xs) !important;
}
.fc-visit-metric span {
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--fg) !important;
}
.fc-visit-metric b {
  display: block !important;
  margin-top: 5px !important;
  color: var(--fg-muted) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fc-visit-metric.is-today {
  background: var(--accent-soft) !important;
  border-left-color: var(--accent) !important;
}
.fc-visit-metric.is-today span { color: var(--accent) !important; }
.fc-visit-metric.is-upcoming {
  background: color-mix(in oklch, var(--info) 8%, var(--surface)) !important;
  border-left-color: var(--info) !important;
}
.fc-visit-metric.is-upcoming span { color: var(--info) !important; }
.fc-visit-metric.is-done {
  background: color-mix(in oklch, var(--success) 8%, var(--surface)) !important;
  border-left-color: var(--success) !important;
}
.fc-visit-metric.is-done span { color: var(--success) !important; }
.fc-visit-metric.is-overdue {
  background: var(--danger-soft) !important;
  border-color: color-mix(in oklch, var(--danger) 30%, transparent) !important;
  border-left-color: var(--danger) !important;
}
.fc-visit-metric.is-overdue span { color: var(--danger) !important; }

#fc-target .fc-source-visit {
  box-shadow: inset 4px 0 0 var(--border-strong), 0 1px 0 color-mix(in oklch, var(--fg) 6%, transparent) !important;
}
#fc-target .fc-source-visit.fc-visit-today {
  background: var(--accent-soft) !important;
  border-color: color-mix(in oklch, var(--accent) 36%, transparent) !important;
  color: var(--fg) !important;
  box-shadow: inset 4px 0 0 var(--accent), 0 6px 16px color-mix(in oklch, var(--accent) 16%, transparent) !important;
}
#fc-target .fc-source-visit.fc-visit-upcoming {
  background: color-mix(in oklch, var(--info) 14%, var(--surface)) !important;
  border-color: color-mix(in oklch, var(--info) 28%, transparent) !important;
  color: var(--fg) !important;
  box-shadow: inset 4px 0 0 var(--info) !important;
}
#fc-target .fc-source-visit.fc-visit-overdue {
  background: var(--danger-soft) !important;
  border-color: color-mix(in oklch, var(--danger) 38%, transparent) !important;
  color: var(--fg) !important;
  box-shadow: inset 4px 0 0 var(--danger), 0 6px 16px color-mix(in oklch, var(--danger) 16%, transparent) !important;
}
#fc-target .fc-source-visit.fc-visit-done {
  background: color-mix(in oklch, var(--success) 13%, var(--surface)) !important;
  border-color: color-mix(in oklch, var(--success) 30%, transparent) !important;
  color: var(--fg-secondary) !important;
  box-shadow: inset 4px 0 0 var(--success) !important;
}
#fc-target .fc-source-visit.fc-visit-cancelled,
#fc-target .fc-source-visit.fc-visit-no_show {
  background: var(--bg-elev) !important;
  border-color: var(--border) !important;
  color: var(--fg-muted) !important;
  box-shadow: inset 3px 0 0 var(--fg-subtle) !important;
}

@media (max-width: 640px) {
  .fc-visit-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =============================================================================
   21 · MAPS SCREEN
   ============================================================================= */

#s-maps #map-body { background: var(--bg-elev) !important; }

/* =============================================================================
   22 · DOSSIER CLIENT (timeline modal)
   ============================================================================= */

.dc-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
}
.dc-name { color: var(--fg) !important; font-weight: 600 !important; }
.dc-meta { color: var(--fg-muted) !important; }
.dc-kpi-num {
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
}
.dc-badge {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-secondary) !important;
  border-radius: var(--r-pill) !important;
}
.dc-section-title {
  color: var(--fg-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  margin: 12px 0 8px !important;
}
.dc-visit-card {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 18px !important;
  gap: 12px !important;
  align-items: stretch !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
  box-shadow: var(--shadow-xs) !important;
  cursor: pointer !important;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease) !important;
}
.dc-visit-card:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  transform: translateY(-1px) !important;
}
.dc-visit-card.is-planned { border-left-color: var(--info) !important; }
.dc-visit-card.is-done { border-left-color: var(--success) !important; }
.dc-visit-card.is-cancelled,
.dc-visit-card.is-no_show { border-left-color: var(--fg-subtle) !important; opacity: 0.86 !important; }
.dc-visit-date {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  min-height: 62px !important;
  padding: 7px 4px !important;
}
.dc-visit-day {
  color: var(--fg) !important;
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.dc-visit-mon,
.dc-visit-time {
  color: var(--fg-muted) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}
.dc-visit-body { min-width: 0 !important; }
.dc-visit-row1 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}
.dc-visit-type-badge,
.dc-visit-status-badge {
  border: 1px solid transparent !important;
  border-radius: var(--r-pill) !important;
  padding: 3px 8px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
.dc-visit-state {
  color: var(--fg-muted) !important;
  font-size: 11px !important;
  margin-top: 7px !important;
}
.dc-visit-summary {
  color: var(--fg) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: 5px !important;
}
.dc-visit-notes,
.dc-visit-contact {
  color: var(--fg-secondary) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  margin-top: 5px !important;
}
.dc-visit-chev {
  color: var(--fg-muted) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
}

/* =============================================================================
   23 · NEUTRALIZE INLINE GRADIENTS & LEGACY ARTIFACTS
   ============================================================================= */

[style*="linear-gradient(135deg,var(--acc)"],
[style*="linear-gradient(135deg, var(--acc)"] {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: none !important;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.18) inset !important;
}

[style*="linear-gradient(135deg,var(--grn)"],
[style*="linear-gradient(135deg, var(--grn)"] {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border: 1px solid color-mix(in oklch, var(--success) 24%, transparent) !important;
  box-shadow: none !important;
}

/* Theme preview swatches (settings) — neutralize their hard-coded gradients */
.theme-btn .tp[style*="linear-gradient"] {
  background: var(--bg-elev) !important;
  background-image:
    linear-gradient(135deg, var(--surface) 50%, var(--bg) 50%) !important;
}
.theme-btn[data-theme="light"] .tp {
  background: oklch(0.97 0.003 80) !important;
  border-color: oklch(0 0 0 / 0.06) !important;
}
.theme-btn[data-theme="midnight"] .tp {
  background: oklch(0.09 0.006 260) !important;
}
.theme-btn[data-theme="terratrack"] .tp {
  background: var(--bg) !important;
}

/* "Client depuis…" badge in dossier client */
#dc-client-badge {
  background: var(--success-soft) !important;
  border: 1px solid color-mix(in oklch, var(--success) 24%, transparent) !important;
  color: var(--success) !important;
  border-radius: var(--r-md) !important;
}

/* Convert-to-client button */
#dc-convert {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.18) inset !important;
  border-radius: var(--r-md) !important;
}

/* dc-mini-map cleanup */
.dc-mini-map[style] { border-radius: var(--r-lg) !important; }

/* =============================================================================
   24 · RESPONSIVE (mobile-specific tightening)
   ============================================================================= */

@media (max-width: 520px) {
  .ph { padding: 14px 16px !important; }
  .ph-title { font-size: 17px !important; }

  .card, .card2, .card-accent, .sset {
    margin: 12px 16px !important;
    padding: 16px !important;
  }
  .plist, .tact, .cbar, .qual-chips-bar, .stt {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .ti { margin-left: 16px !important; margin-right: 16px !important; }
  .scr { padding-left: 16px !important; padding-right: 16px !important; }
  .qual-help { padding: 10px 16px !important; }
  .dg { padding: 12px 16px !important; }

  .ds-status { margin: 12px 16px 0 !important; }
}

/* =============================================================================
   25 · DRILL-DOWN & DOSSIER MODAL specifics
   ============================================================================= */

#dd-list .pc { margin-bottom: 6px !important; }
#dd-close, #dc-close {
  width: 30px !important;
  height: 30px !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-secondary) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
#dd-close:hover, #dc-close:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}

/* =============================================================================
   24 · AGENDA — PR1 F7 Refonte 3 vues (Mois / Semaine / Planning)
   ============================================================================= */

/* Page header avec titre + meta inline + actions (nav + segment) */
.fc-page-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 16px;
}
.fc-page-header__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fc-page-header__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fg);
  line-height: 1.15;
  margin: 0;
}
.fc-page-header__meta {
  margin-top: 4px;
  color: var(--fg-muted);
  font-size: 12.5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fc-page-header__meta .fc-sep { color: var(--border-strong); }
.fc-page-header__meta .fc-meta-warn { color: var(--danger); font-weight: 500; }
.fc-page-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Boutons nav prev / today / next */
.fc-nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px;
}
.fc-nav-btn {
  background: transparent;
  border: 0;
  color: var(--fg-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  height: 26px;
  min-width: 30px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.fc-nav-btn:hover {
  background: var(--surface-hover);
  color: var(--fg);
}
.fc-nav-btn.fc-nav-today {
  font-weight: 500;
  padding: 5px 12px;
}

/* Segment control Mois / Semaine / Planning */
.fc-segment {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 0;
}
.fc-segment-btn {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  height: 26px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.fc-segment-btn:hover { color: var(--fg-secondary); }
.fc-segment-btn.is-active {
  background: var(--surface-hover);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
}

/* Vue Planning custom (replace listMonth) */
.fc-planning-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.fc-planning-section + .fc-planning-section { border-top: 1px solid var(--border); }
.fc-planning-section-label {
  padding: 10px 16px;
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 500;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.fc-planning-section.is-today .fc-planning-section-label {
  color: var(--accent);
  background: var(--accent-soft);
}
.fc-planning-rows { display: flex; flex-direction: column; }
.fc-planning-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  background: transparent;
  transition: background var(--dur-1) var(--ease);
}
.fc-planning-row + .fc-planning-row { border-top: 1px solid var(--border); }
.fc-planning-row:hover { background: var(--surface-hover); }
.fc-planning-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--border-focus);
}
.fc-planning-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  width: 52px;
  flex-shrink: 0;
  font-weight: 500;
}
.fc-planning-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fc-planning-title {
  font-size: 13px;
  color: var(--fg);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-planning-sub {
  font-size: 11.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-planning-chevron {
  color: var(--fg-muted);
  flex-shrink: 0;
  display: inline-flex;
}
.fc-planning-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--fg-muted);
}
.fc-planning-empty-icon {
  opacity: 0.4;
  margin-bottom: 14px;
  display: inline-flex;
  color: var(--fg-subtle);
}
.fc-planning-empty h3 {
  font-size: 15px;
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 6px;
}
.fc-planning-empty p {
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 360px;
  margin: 0 auto;
}

/* Dots colorés par stage (réutilisés de la maquette) */
.fc-planning-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--fg-subtle);
  flex-shrink: 0;
  display: inline-block;
}
.fc-planning-dot.dot--hot    { background: var(--dot-hot); }
.fc-planning-dot.dot--warm   { background: var(--dot-warm); }
.fc-planning-dot.dot--cold   { background: var(--dot-cold); }
.fc-planning-dot.dot--client { background: var(--dot-client); }

/* Carte "Aujourd'hui · dim 17 mai" timeline en bas */
.fc-today-card-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.fc-today-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.fc-today-title-main {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0;
}
.fc-today-badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-secondary);
  font-family: var(--font-mono);
}
.fc-today-rows { display: flex; flex-direction: column; }
.fc-today-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.fc-today-row + .fc-today-row { border-top: 1px solid var(--border); }
.fc-today-row:hover { background: var(--surface-hover); }
.fc-today-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--border-focus);
}
.fc-today-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  width: 52px;
  flex-shrink: 0;
  font-weight: 500;
}
.fc-today-body { flex: 1; min-width: 0; }
.fc-today-title {
  font-size: 13px;
  color: var(--fg);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-today-sub {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-today-chevron {
  color: var(--fg-muted);
  flex-shrink: 0;
  display: inline-flex;
}

/* =============================================================================
   25 · CLIENTS — PR1 F8 Refonte Dashboard Clients (.client-card)
   ============================================================================= */

.cli-tabs {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px;
  margin-bottom: 16px;
  gap: 0;
}
.cli-tab {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cli-tab:hover { color: var(--fg-secondary); }
.cli-tab.is-active {
  background: var(--surface-hover);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
}
.cli-tab__count {
  font-family: var(--font-mono);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 500;
}
.cli-tab.is-active .cli-tab__count { color: var(--fg-secondary); }

.client-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 16px 16px 16px 20px;
  margin-bottom: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  box-shadow: var(--shadow-xs);
}
.client-card::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  background: var(--fg-subtle);
  border-radius: 0 2px 2px 0;
}
.client-card.is-signed::before { background: var(--success); }
.client-card.is-existing::before { background: var(--info); }
.client-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.client-card__body { flex: 1; min-width: 0; }
.client-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.client-card__badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.client-card__badge.is-signed {
  background: var(--success-soft);
  color: var(--success);
}
.client-card__badge.is-existing {
  background: var(--info-soft);
  color: var(--info);
}
.client-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
  line-height: 1.3;
  letter-spacing: 0;
}
.client-card__location {
  font-size: 12px;
  color: var(--fg-secondary);
  margin-bottom: 4px;
}
.client-card__sector {
  font-weight: 500;
  color: var(--fg-secondary);
}
.client-card__address {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  margin-bottom: 6px;
  letter-spacing: 0;
}
.client-card__warn {
  font-size: 11px;
  color: var(--warn);
  font-weight: 500;
  margin-bottom: 6px;
}
.client-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--fg-muted);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}
.client-card__pill.is-signed { color: var(--success); }
.client-card__pill.is-existing { color: var(--info); }
.client-card__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}
.client-card__action {
  width: 32px;
  height: 32px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.client-card__action:hover {
  background: var(--surface-hover);
  color: var(--fg);
}
.client-card__action.is-in-tour {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 28%, transparent);
}
.client-card__action.is-danger {
  color: var(--danger);
}
.client-card__action.is-danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: color-mix(in oklch, var(--danger) 28%, transparent);
}

/* =============================================================================
   END
   ============================================================================= */