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

:root {
  color-scheme: light;
  /* ── Base claire : ivoire chaud, pas gris ──
     L'ancienne palette (#f4f4f2, #888888) était neutre-froide et donnait
     cet aspect terne. Tout est repris en tons chauds pour s'accorder au
     jaune Maint Up : les fonds tirent sur le crème, les gris deviennent
     des taupes. */
  --bg: #FAF7F0;                  /* ivoire */
  --bg-2: #FFFFFF;                /* surfaces pleines */
  --bg-3: #F4F0E6;                /* crème (champs, pastilles) */
  --bg-4: #EDE7D9;                /* creux */
  --border: #E7E0CF;
  --border-2: #D3C9B2;
  --text: #211C14;                /* brun très foncé, jamais noir pur */
  --text-2: #5E5545;              /* taupe */
  --text-3: #6E6553;              /* taupe — 5,7:1 sur blanc, 4,6:1 sur crème */

  /* Verre : couleur + échelle d'alpha, pilotées par le thème */
  --w: 255, 255, 255;
  --wa: 1;
  --k: 30, 25, 15;
  --ka: 1;

  --accent: #F5D547;              /* jaune MAINT UP */
  --accent-2: #d4b82b;
  --accent-deep: #7a5d00;
  --accent-bg: rgba(245, 213, 71, 0.18);
  --accent-text-on: #1a1a1a;
  --red: #d94f3d;
  --orange: #e08a2e;
  --maintup: #F5D547;
  --yellow: #e0b520;
  --green: #2f9e63;
  --blue: #3b7fd4;
  --pink: #d9558f;
  --cyan: #1a9aad;
  --app-bg: linear-gradient(165deg, #FBFAF7, #F0EEE8);
  --halo-1: rgba(245, 213, 71, .18);
  --halo-2: rgba(129, 180, 255, .12);
  --halo-3: rgba(255, 170, 120, .09);

  /* Couleurs de TEXTE des statuts — assez foncées pour rester lisibles
     sur les pastilles teintées (fond clair). */
  --c-red-txt: #a8291c;
  --c-orange-txt: #a8480d;
  --c-green-txt: #1c6b42;
  --c-blue-txt: #1a4fb8;
  --c-purple-txt: #5b21b6;
  --c-yellow-txt: #8a5a06;
  --c-pink-txt: #a3155a;
  --c-cyan-txt: #0b5f70;
}

/* ── Mode nuit ──
   Fonds bruns-noirs chauds (jamais gris bleuté), texte crème. Le verre
   s'inverse par --wa / --ka : les mêmes règles produisent un voile clair
   très discret au lieu d'une surface blanche. */
[data-theme="dark"] {
  color-scheme: dark;
  /* Gris foncés à paliers nets — surtout pas du noir : chaque niveau de
     surface doit se détacher du précédent (fond → carte → champ). */
  --bg: #22201D;                  /* fond général */
  --bg-2: #2C2A26;                /* cartes, panneaux */
  --bg-3: #35322D;                /* champs, pastilles */
  --bg-4: #3F3B35;                /* creux, survols */
  --border: #454039;
  --border-2: #5A544B;
  --text: #F2EFE9;
  --text-2: #C7C0B5;
  --text-3: #A79F92;

  /* Verre : assez marqué pour que les surfaces restent perceptibles.
     À 5 % elles disparaissaient dans le fond. */
  --w: 255, 250, 240;
  --wa: .07;
  --k: 255, 250, 240;
  --ka: .55;

  --accent: #F5D547;
  --accent-2: #E0BE2E;
  --accent-deep: #F0D77A;
  --accent-bg: rgba(245, 213, 71, 0.14);
  --accent-text-on: #241d00;
  --red: #f0705e;
  --orange: #f0a04e;
  --yellow: #f0cc4a;
  --green: #4cc184;
  --blue: #6ba4ee;
  --pink: #ee78a8;
  --cyan: #3fc0d2;
  --app-bg: linear-gradient(165deg, #262320, #1E1C19);
  --halo-1: rgba(245, 213, 71, .07);
  --halo-2: rgba(129, 180, 255, .05);
  --halo-3: rgba(255, 170, 120, .04);

  --c-red-txt: #ff9a8f;
  --c-orange-txt: #ffb46b;
  --c-green-txt: #71dda0;
  --c-blue-txt: #8fbcf7;
  --c-purple-txt: #c3a6fb;
  --c-yellow-txt: #f2d16b;
  --c-pink-txt: #f79ac1;
  --c-cyan-txt: #6fd6e5;
}
/* ── Manrope (variable 200-800), embarquée en local : pas de CDN,
   fonctionne hors-ligne. Latin + latin étendu (œ, etc.). ── */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/Manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/Manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--app-bg);
  background-attachment: fixed;
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  font-size: 14px;
}
/* Layout global : topbar fixe + .app prend le reste de la hauteur */
.topbar {
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--bg-2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  position: sticky;
  top: 0;
  z-index: 100;
}
body { display: flex; flex-direction: column; }
.app { display: flex; height: calc(100vh - 64px); flex: 1; min-height: 0; }

/* Logo : positionné en absolu pour rester strictement centré dans la topbar,
   peu importe la largeur du hamburger à gauche ou des actions à droite. */
.topbar-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  height: 100%;
  padding: 6px 0;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease;
}
.topbar-logo:hover { opacity: 0.85; transform: translate(-50%, -50%); }
.topbar-logo:active { transform: translate(-50%, -50%) scale(0.98); }
.topbar-logo .logo-icon {
  height: 54px;
  width: auto;
  display: flex;
  align-items: center;
}
.topbar-logo .logo-icon img {
  height: 54px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: center center;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.topbar-logo .logo-placeholder {
  font-size: 11px;
  color: var(--text-3);
  padding: 8px 14px;
  border: 1px dashed var(--border);
  border-radius: 6px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bouton hamburger : caché en desktop, visible ≤768 px (override dans la
   media query mobile). Sert à ouvrir/fermer le drawer .sidebar. */
.topbar-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.topbar-menu-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--text); }
.topbar-menu-btn:active { background: rgba(0, 0, 0, 0.08); transform: scale(0.96); }
.topbar-menu-btn svg { width: 22px; height: 22px; }

/* Backdrop drawer mobile (sidebar). Caché par défaut. Activé via .open. */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90; /* sous la sidebar mobile (95) et sous panel/modal (>100) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-backdrop.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 7px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topbar-btn:hover {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text);
}
.topbar-btn .btn-icon { color: var(--text-3); }
.topbar-btn:hover .btn-icon { color: var(--text); }

/* SIDEBAR */
.sidebar {
  width: 240px;
  background: var(--bg-3);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Logo : "brand block" du header de la sidebar.
   Aligné sur le rythme vertical/horizontal des nav-items pour s'intégrer
   sans flotter. Le pictogramme jaune du PNG s'aligne visuellement avec
   les icônes Lucide des nav-items en dessous (même retrait gauche). */
.logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 8px;
  margin: 2px 0 6px 0;
  cursor: pointer;
  border-radius: 7px;
  transition: background-color 0.18s ease, transform 0.12s ease;
}
.logo:hover { background: rgba(0, 0, 0, 0.035); }
.logo:active { transform: scale(0.985); }
.logo-icon {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.logo-icon img {
  width: 100%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
  /* Léger lissage pour ne pas crénéler le PNG en taille réduite */
  image-rendering: -webkit-optimize-contrast;
}
.logo-placeholder {
  color: var(--text-3);
  font-size: 11px;
  text-align: center;
  line-height: 1.3;
  padding: 18px 6px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  width: 100%;
}

/* ====================================================================
   Sidebar style Attio : fond blanc cassé, accent jaune #ffde5b
   subtil sur le logo et l'item actif. Espacement généreux,
   bordures et hovers très doux. Sélecteurs scopés à .sidebar pour
   ne pas casser les .stat-card / .nav-item utilisés ailleurs.
   ==================================================================== */
.sidebar { padding: 14px 10px 16px; }
/* Logo retiré de la sidebar (déplacé dans la topbar globale). Les anciens
   overrides .sidebar .logo / .sidebar .logo-icon ne servent plus. */
.sidebar .nav-section { margin-bottom: 14px; }
.sidebar .nav-section:first-of-type { margin-top: 0; }
.sidebar .nav-label {
  color: var(--text-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 6px 10px;
  margin-bottom: 2px;
}
.sidebar .nav-section.collapsible > .nav-label { transition: color 0.15s; }
.sidebar .nav-section.collapsible > .nav-label:hover { color: var(--text-2); }

.sidebar .nav-item {
  color: var(--text-2);
  position: relative;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  transition: background 0.12s, color 0.12s;
}
.sidebar .nav-item:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); }
.sidebar .nav-item.active {
  background: rgba(245, 213, 71, 0.22);
  color: var(--text);
  font-weight: 600;
}
.sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--maintup);
  border-radius: 2px;
}

.sidebar .nav-item .count {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-3);
  font-weight: 500;
}
.sidebar .nav-item.active .count {
  background: var(--maintup);
  color: var(--text);
}

.sidebar .nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}
.sidebar .nav-item:hover .nav-icon,
.sidebar .nav-item.active .nav-icon { opacity: 1; }
.sidebar .nav-label .nav-icon { width: 14px; height: 14px; opacity: 0.7; }
.sidebar .stat-icon { width: 13px; height: 13px; flex-shrink: 0; margin-right: 4px; vertical-align: -2px; }
.sidebar .stat-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Icônes inline dans les boutons, onglets, etc. */
.btn-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -2px;
  opacity: 0.85;
}
.btn:hover .btn-icon,
.btn.primary .btn-icon,
.panel-tab.active .btn-icon,
.view-toggle button.active .btn-icon { opacity: 1; }
.btn { display: inline-flex; align-items: center; gap: 6px; }
.btn .btn-icon { vertical-align: 0; }
.view-toggle button { display: inline-flex; align-items: center; gap: 6px; }
.panel-tab { display: inline-flex; align-items: center; gap: 6px; }
.panel-tab .btn-icon { opacity: 0.7; }
.panel-tab:hover .btn-icon,
.panel-tab.active .btn-icon { opacity: 1; }

.sidebar .nav-items { padding: 0; }

.sidebar .sidebar-footer { gap: 6px; }
.sidebar .stat-card {
  background: var(--bg-2);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.sidebar .stat-label { color: var(--text-3); }
.sidebar .stat-value { color: var(--text); }
.sidebar .stat-value.orange { color: #ea580c; }
.sidebar .stat-value.green { color: #16a34a; }
.nav-section { margin-bottom: 16px; }
.nav-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 6px 12px;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-2);
  transition: all 0.15s;
  font-size: 14px;
}
.nav-item:hover { background: var(--bg-3); color: var(--text); }
.nav-item.active { background: var(--accent-bg); color: var(--accent-deep); }
.nav-item .count {
  margin-left: auto;
  background: var(--bg-3);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-3);
}
.nav-item.active .count { background: var(--accent); color: var(--accent-text-on); }

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.stat-card {
  background: var(--bg-3);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.stat-label { font-size: 11px; color: var(--text-3); }
.stat-value { font-size: 18px; font-weight: 600; margin-top: 2px; }
.stat-value.green { color: var(--green); }
.stat-value.orange { color: var(--orange); }

/* MAIN */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  min-width: 0;
}
.header h1 { flex-shrink: 0; }
.header .subtitle {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header .view-toggle,
.header #manage-fields-btn,
.header #add-btn { flex-shrink: 0; }
@media (max-width: 1400px) {
  .header .subtitle { display: none; }
}
@media (max-width: 1280px) {
  .header #manage-fields-btn span { display: none; }
}
@media (max-width: 1100px) {
  .header #add-btn span { display: none; }
}
.header h1 { font-size: 20px; font-weight: 600; }
.header h1 .emoji { margin-right: 8px; }
.header .subtitle { color: var(--text-3); font-size: 13px; margin-left: 8px; }
.search-box {
  flex: 0 1 240px;
  min-width: 150px;
  margin-left: auto;
  position: relative;
}
.search-box input {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px 7px 32px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.search-box input:focus { border-color: var(--accent); }
.search-box::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.btn {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.btn:hover { background: var(--bg-4); border-color: var(--border-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text-on); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: rgba(239, 68, 68, 0.1); border-color: var(--red); }

/* Section dépliable (sidebar « Outils ») */
.nav-section.collapsible > .nav-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.nav-section.collapsible > .nav-label:hover { color: var(--text-2); }
.nav-section.collapsible > .nav-label .toggle-icon {
  margin-left: auto;
  font-size: 9px;
  transition: transform 0.15s;
}
.nav-section.collapsible > .nav-items { display: none; }
.nav-section.collapsible.open > .nav-items { display: block; }
.nav-section.collapsible.open > .nav-label .toggle-icon { transform: rotate(90deg); }

/* FILTERS BAR */
.filters {
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg-2);
}
.filter-dropdown {
  position: relative;
}
.filter-btn {
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.filter-btn:hover { background: var(--bg-4); color: var(--text); }
.filter-btn.has-active { 
  background: var(--accent-bg); 
  color: var(--accent-deep); 
  border-color: var(--accent);
}
.filter-btn .badge {
  background: var(--accent);
  color: var(--accent-text-on);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}
.filter-btn .caret { font-size: 9px; opacity: 0.6; }
.filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  min-width: 180px;
  z-index: 50;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.filter-menu.open { display: block; }
.filter-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-2);
}
.filter-menu-item:hover { background: var(--bg-4); color: var(--text); }
.filter-menu-item.selected { color: var(--accent-deep); }
.filter-menu-item .check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--border-2);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}
.filter-menu-item.selected .check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}
.filter-clear-btn {
  background: transparent;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 12px;
  padding: 6px 10px;
  margin-left: auto;
}
.filter-clear-btn:hover { text-decoration: underline; }
.quick-filters {
  display: flex;
  gap: 6px;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.quick-filter {
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-2);
}
.quick-filter:hover { background: var(--bg-4); color: var(--text); }
.quick-filter.active {
  background: rgba(239,68,68,0.15);
  color: var(--c-red-txt);
  border-color: var(--red);
}

/* Filter chip (kept for legacy) */

/* KANBAN */
.kanban-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px 24px 24px;
}

.simulateur-container {
  flex: 1;
  display: none;
  overflow: hidden;
  background: var(--bg);
}
.kanban {
  display: flex;
  gap: 14px;
  height: 100%;
  min-width: min-content;
}
.column {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.column.drag-over { border-color: var(--accent); background: var(--accent-bg); }
/* Drag & drop pour réordonner les colonnes du kanban */
.column-dragging { opacity: 0.45; }
.column-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.column-header {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
}
.column-header:active { cursor: grabbing; }
.column-drag-handle {
  color: var(--text-3);
  font-size: 13px;
  letter-spacing: -2px;
  opacity: 0.4;
  user-select: none;
  flex-shrink: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.column-header:hover .column-drag-handle { opacity: 0.9; color: var(--text-2); }
.column-color {
  width: 10px; height: 10px;
  border-radius: 3px;
}
.column-title {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}
.column-title:hover { background: var(--bg-3); }
.column-title-edit {
  background: var(--bg-3);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
  font-family: inherit;
  outline: none;
}
.column-count {
  background: var(--bg-3);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-3);
}
.column-menu {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-3);
}
.column-menu:hover { background: var(--bg-3); color: var(--text); }
.column-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.add-card-btn {
  background: transparent;
  border: 1px dashed var(--border-2);
  color: var(--text-3);
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  margin: 0 8px 8px;
}
.add-card-btn:hover { background: var(--bg-3); color: var(--text); border-color: var(--accent); }

/* CARD */
.card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: grab;
  transition: all 0.15s;
  position: relative;
}
.card:hover { background: var(--bg-4); border-color: var(--border-2); transform: translateY(-1px); }
.card.dragging { opacity: 0.5; cursor: grabbing; }
.card.overdue { border-left: 3px solid var(--red); }
.card-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.3;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
/* ====================================================================
   COMPOSANT .pill — base unique pour TOUS les badges du CRM
   ====================================================================
   Remplace progressivement les ~8 systèmes parallèles (.tag, .col-meta-pill,
   .caisse-tech-badge, .caisse-type-badge, .caisse-statut-badge,
   .tech-card-contrat-badge, .trash-source-pill, .badge-overdue,
   .badge-encours, .map-popup-tag, .catalogue-badge-ref, .contact-source-badge).
   Les anciennes classes héritent du même look via ce sélecteur partagé.
*/
.pill,
.tag,
.caisse-tech-badge,
.caisse-type-badge,
.caisse-statut-badge,
.tech-card-contrat-badge,
.trash-source-pill,
.badge-overdue,
.badge-encours,
.map-popup-tag,
.catalogue-badge-ref,
.catalogue-badge-ref-small,
.contact-source-badge,
.col-meta-pill,
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
/* Variante compacte pour les badges étroits (cards kanban, sub-blocks) */
.pill-sm,
.badge-overdue,
.badge-encours,
.catalogue-badge-ref-small,
.col-meta-pill,
.card-encours-badge,
.tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 8px;
}

/* Variants de tons — réutilisables sur n'importe quel élément .pill-xxx */
.pill-gray         { background: var(--bg-4);                                 color: var(--text-2); }
.pill-red,
.tag.red,
.badge-overdue     { background: rgba(239, 68, 68, 0.15);                     color: var(--c-red-txt); }
.pill-orange,
.tag.orange        { background: rgba(249, 115, 22, 0.15);                    color: var(--c-orange-txt); }
.pill-green,
.tag.green         { background: rgba(34, 197, 94, 0.15);                     color: var(--c-green-txt); }
.pill-blue,
.tag.blue          { background: rgba(59, 130, 246, 0.15);                    color: var(--c-blue-txt); }
.pill-purple,
.tag.purple        { background: rgba(124, 58, 237, 0.15);                    color: var(--c-purple-txt); }
.pill-yellow,
.tag.yellow,
.badge-encours     { background: rgba(234, 179, 8, 0.15);                     color: var(--c-yellow-txt); }
.pill-pink,
.tag.pink          { background: rgba(236, 72, 153, 0.15);                    color: var(--c-pink-txt); }
.pill-cyan,
.tag.cyan          { background: rgba(6, 182, 212, 0.15);                     color: var(--c-cyan-txt); }
.pill-google,
.tag.google        { background: rgba(66, 133, 244, 0.16);                    color: var(--c-blue-txt); }
.cal-event.pill-google { border-left: 3px solid #4285F4; }
.pill-accent,
.catalogue-badge-ref,
.catalogue-badge-ref-small { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-deep); }
.card-meta {
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-2);
}
.card-meta-icon { opacity: 0.7; flex-shrink: 0; }
.card-alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.18);
  color: var(--c-red-txt);
  margin-top: 4px;
  font-weight: 600;
}
.card-alert-icon { flex-shrink: 0; }
.card-alert-warm {
  background: rgba(249, 115, 22, 0.15);
  color: var(--c-orange-txt);
}
.card-stars { gap: 1px; color: var(--accent); }
.card-star-icon { color: var(--accent); fill: var(--accent); }
.sort-arrow { vertical-align: middle; margin-left: 3px; opacity: 0.8; }
.list-empty-icon { opacity: 0.35; margin-bottom: 10px; display: flex; justify-content: center; }
.list-empty-icon .icon { color: var(--text-3); }

/* PANEL (détail fiche) */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: none;
}
.panel-overlay.open { display: block; }
.panel {
  position: fixed;
  top: 0; right: 0;
  width: 540px;
  max-width: 100%;
  height: 100vh;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  z-index: 101;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}
.panel.open { transform: translateX(0); }
.panel-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-header input.title-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  outline: none;
  padding: 4px 6px;
  border-radius: 4px;
}
.panel-header input.title-input:focus { background: var(--bg-3); }
.panel-close {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--text-2);
}
.panel-close:hover { background: var(--bg-3); color: var(--text); }
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.field {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  gap: 16px;
  position: relative;
}
.field-label {
  width: 140px;
  color: var(--text-3);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  flex-shrink: 0;
}
.field-control { flex: 1; }
.field-input, .field-textarea, .field-select {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: vertical;
}
.field-input:hover, .field-textarea:hover { background: var(--bg-3); }
.field-input:focus, .field-textarea:focus, .field-select:focus {
  background: var(--bg-3);
  border-color: var(--accent);
}
.field-textarea { min-height: 60px; }
.field-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}
.field-select option { background: var(--bg-3); }
.field-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}
.tag-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
}
.tag-pill:hover { background: var(--bg-4); }
.tag-pill.selected { background: var(--accent-bg); color: var(--accent-deep); border-color: var(--accent); }

/* ====================================================================
   ONGLETS UNIFIÉS — un seul système pour panel, simulateur, caisses
   ====================================================================
   Trois classes survivent pour préserver le markup existant :
   .panel-tabs / .sim-tabs / .caisses-tabs et leurs .panel-tab / .sim-tab /
   .caisses-tab. Toutes pointent vers la MÊME implémentation visuelle
   (active = accent-deep + border accent + font-weight 600).
*/
.panel-tabs, .sim-tabs, .caisses-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
/* Scrollbar discrète sur WebKit (Chrome / Safari) */
.panel-tabs::-webkit-scrollbar,
.sim-tabs::-webkit-scrollbar,
.caisses-tabs::-webkit-scrollbar { height: 4px; }
.panel-tabs::-webkit-scrollbar-thumb,
.sim-tabs::-webkit-scrollbar-thumb,
.caisses-tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}
.sim-tabs { background: var(--bg-2); }
.caisses-tabs { padding: 0; margin-bottom: 18px; }

.panel-tab, .sim-tab, .caisses-tab {
  flex-shrink: 0;
  padding: 11px 16px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.panel-tab:hover, .sim-tab:hover, .caisses-tab:hover { color: var(--text); }
.panel-tab.active, .sim-tab.active, .caisses-tab.active {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.panel-tab .btn-icon, .sim-tab .btn-icon { opacity: 0.7; }
.panel-tab:hover .btn-icon, .sim-tab:hover .btn-icon,
.panel-tab.active .btn-icon, .sim-tab.active .btn-icon { opacity: 1; }

/* Activity log */
.activity-log { padding: 16px 0; }
.activity-add {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.activity-add select, .activity-add input {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.activity-add input { flex: 1; }
.activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.activity-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.activity-content { flex: 1; }
.activity-text { font-size: 13px; }
.activity-date { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.activity-delete {
  cursor: pointer;
  color: var(--text-3);
  font-size: 12px;
  padding: 4px;
}
.activity-delete:hover { color: var(--red); }

/* Panel actions */
.panel-actions {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  background: var(--bg-2);
}

/* MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}
.modal-overlay.open {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s ease, visibility 0s linear 0s;
}
.modal {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 500px;
  transform: scale(0.96);
  opacity: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-overlay.open .modal { transform: scale(1); opacity: 1; }
.modal h2 { font-size: 18px; margin-bottom: 16px; }
/* Titre standardisé pour les modales construites via openModal() */
.modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  margin-bottom: 18px;
}
.modal-title-icon { color: var(--accent-deep); flex-shrink: 0; }
/* Bouton X de fermeture pour les modales (visible en mobile uniquement) */
.modal-close-btn {
  display: none;            /* override mobile pour l'afficher */
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.modal-close-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--text); }
.modal-close-btn:active { transform: scale(0.95); }
.modal-section { margin-bottom: 20px; }
.modal-section h3 { font-size: 13px; color: var(--text-3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
/* Helpers normalisés pour les modales construites via openModal() */
.modal-field { display: block; }
.modal-field + .modal-field { margin-top: 12px; }
.modal-field .field-input,
.modal-field .field-select,
.modal-field .field-textarea { width: 100%; }
.modal-hint { font-size: 11.5px; color: var(--text-3); margin-top: 12px; line-height: 1.5; }
.modal-hint strong { color: var(--text-2); }
.modal-field-inline { display: flex; gap: 6px; align-items: center; }
.modal-field-inline .field-input { flex: 1; }
.modal-field-inline .field-select { min-width: 160px; }
.modal-field-inline .btn { flex-shrink: 0; }
.sim-tech-preview-box {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.7;
}
.sim-tech-preview-box strong { color: var(--text); }
.sim-import-textarea { width: 100%; min-height: 140px; font-family: ui-monospace, monospace; font-size: 11px; }
.modal-image-preview { text-align: center; }
.modal-image-preview img { max-width: 100%; max-height: 60vh; border-radius: 8px; border: 1px solid var(--border); }
.logo-modal-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.logo-modal-preview img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: white;
  padding: 10px;
}
/* Bouton "danger" (suppression) — distinct du primary jaune et du secondary gris */
.btn.btn-danger {
  background: rgba(220, 38, 38, 0.1);
  color: var(--c-red-txt);
  border-color: rgba(220, 38, 38, 0.3);
}
.btn.btn-danger:hover {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.5);
}
.modal-inline-actions { display: flex; gap: 8px; margin-top: 10px; }
.modal-help-tip { color: var(--text-3); font-style: italic; }

/* ====================================================================
   EMPTY STATES UNIFIÉS — produits par renderEmpty()
   ====================================================================
   Remplace les ~7 systèmes parallèles (.empty, .caisses-empty, .list-empty,
   .timeline-empty, .manage-empty, .caisse-items-empty, .caisse-docs-empty).
   Variante .empty-state-sm pour les blocs imbriqués (sous-section modale).
*/
.empty-state,
.empty,
.caisses-empty,
.list-empty,
.timeline-empty,
.manage-empty,
.caisse-items-empty,
.caisse-docs-empty,
.docs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 24px;
  color: var(--text-2);
  font-size: 13px;
  background: var(--bg-2);
  border: 1px dashed var(--border-2);
  border-radius: 12px;
  gap: 4px;
}
.empty-state-sm {
  padding: 20px 16px;
  font-size: 12px;
  gap: 2px;
}
.empty-state-icon {
  margin-bottom: 6px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state-icon .icon { opacity: 0.55; }
.empty-state-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.empty-state-sm .empty-state-title { font-size: 13px; }
.empty-state-sub {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
  max-width: 380px;
  line-height: 1.5;
}
.empty-state-sub strong { color: var(--text-2); }
.empty-state-cta { margin-top: 12px; }

/* ====================================================================
   VUES SAUVEGARDÉES — presets de filtres + tri + mode
   ====================================================================
*/
.saved-views-dropdown .filter-btn .icon { color: var(--accent-deep); }
.saved-views-menu {
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.saved-view-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
  transition: background .12s ease;
}
.saved-view-item:hover { background: var(--bg-3); }
.saved-view-name { flex: 1; font-weight: 500; }
.saved-view-del {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.saved-view-del:hover { background: rgba(220,38,38,0.12); color: var(--c-red-txt); }
.saved-views-empty {
  padding: 12px;
  font-size: 11.5px;
  color: var(--text-3);
  text-align: center;
  font-style: italic;
}
.saved-view-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  border: 1px dashed var(--border);
  background: transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.saved-view-add:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
}

/* ====================================================================
   SPINNERS — produits par renderSpinner()
   ====================================================================
*/
.spinner-wrap { display: inline-flex; align-items: center; gap: 6px; }
.spinner { animation: spin 1s linear infinite; flex-shrink: 0; }
.spinner-label { font-size: 12px; color: var(--text-2); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* Field management */
.prop-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin-bottom: 4px;
}
.prop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--bg-3);
  border-radius: 6px;
  margin-bottom: 6px;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.prop-row input[type="text"], .prop-row select {
  background: var(--bg-4);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  outline: none;
}
.prop-row .prop-name { flex: 1; }
.prop-row .prop-type { width: 110px; }
.prop-drag-handle {
  cursor: grab;
  color: var(--text-3);
  font-size: 13px;
  letter-spacing: -2px;
  user-select: none;
  padding: 0 2px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.prop-drag-handle:active { cursor: grabbing; }
.prop-row[draggable="true"]:hover .prop-drag-handle { color: var(--text); }
.prop-row-dragging { opacity: 0.4; }
.prop-row-over {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-3));
  box-shadow: 0 -2px 0 var(--accent) inset;
}
.prop-inlist {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.prop-inlist:disabled { cursor: not-allowed; opacity: 0.5; }
.prop-delete {
  cursor: pointer;
  color: var(--red);
  padding: 4px 8px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}
.prop-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding: 6px;
  background: var(--bg-4);
  border-radius: 5px;
  width: 100%;
}
.prop-option {
  background: var(--bg-3);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.prop-option .remove { cursor: pointer; color: var(--text-3); }
.prop-option .remove:hover { color: var(--red); }
.prop-option-add {
  background: transparent;
  border: 1px dashed var(--border-2);
  color: var(--text-3);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

/* Color picker */
.color-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.color-swatch {
  width: 20px; height: 20px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
}
.color-swatch.selected { border-color: white; }

/* Dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 24px;
  overflow-y: auto;
}
.dash-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.dash-card h3 { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.dash-value { font-size: 28px; font-weight: 700; }
.dash-bar { height: 6px; background: var(--bg-3); border-radius: 3px; margin: 6px 0; overflow: hidden; }
.dash-bar-fill { height: 100%; background: var(--accent); }
.dash-row { display: flex; justify-content: space-between; font-size: 12px; margin: 4px 0; color: var(--text-2); }

/* Empty state */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-3);
}
.empty-icon { font-size: 40px; margin-bottom: 10px; opacity: 0.5; }

/* Logo upload */
.logo-upload {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--bg-3);
  border: 1px dashed var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: all 0.15s;
}
.logo-upload:hover { border-color: var(--accent); }
.logo-upload img { width: 100%; height: 100%; object-fit: cover; }
.logo-upload span { color: var(--text-3); font-size: 18px; }
.card-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-4);
}
.card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.card-title-row .card-title { margin-bottom: 0; flex: 1; }

/* Contacts / Techniciens / En cours */
.sub-list {
  padding: 8px 0;
}
.sub-add-form {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}
.sub-add-form .form-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.sub-add-form input, .sub-add-form select, .sub-add-form textarea {
  background: var(--bg-4);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
  flex: 1;
  min-width: 100px;
}
.sub-add-form textarea { width: 100%; min-height: 50px; resize: vertical; }
.sub-add-form input:focus, .sub-add-form select:focus, .sub-add-form textarea:focus { border-color: var(--accent); }

.sub-item {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  position: relative;
}
.sub-item:hover { background: var(--bg-4); }
.sub-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.sub-item-name { font-weight: 600; font-size: 13px; flex: 1; }
.sub-item-role { font-size: 11px; color: var(--text-3); }
.sub-item-meta {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sub-item-meta a { color: var(--accent-deep); text-decoration: none; }
.sub-item-meta a:hover { text-decoration: underline; }
.sub-item-delete {
  cursor: pointer;
  color: var(--text-3);
  font-size: 12px;
  padding: 2px 6px;
}
.sub-item-delete:hover { color: var(--red); }

/* Todo en cours */
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  transition: all 0.15s;
}
.todo-item:hover { background: var(--bg-4); }
.todo-item.done { opacity: 0.5; }
.todo-item.done .todo-text { text-decoration: line-through; }
.todo-checkbox {
  width: 18px; height: 18px;
  border: 2px solid var(--border-2);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: white;
  transition: all 0.15s;
}
.todo-checkbox.checked {
  background: var(--green);
  border-color: var(--green);
}
.todo-content { flex: 1; }
.todo-text { font-size: 13px; }
.todo-meta { font-size: 11px; color: var(--text-3); margin-top: 3px; display: flex; gap: 8px; align-items: center; }
.todo-priority {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.todo-priority.high { background: rgba(239,68,68,0.15); color: var(--c-red-txt); }
.todo-priority.med { background: rgba(249,115,22,0.15); color: var(--c-orange-txt); }
.todo-priority.low { background: rgba(59,130,246,0.15); color: var(--c-blue-txt); }

.section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-bottom: 8px;
  font-weight: 600;
}

/* Quick badge on card for "en cours" */
.card-encours-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(245, 213, 71, 0.22);
  color: var(--accent-deep);
  margin-top: 4px;
}
.card-encours-icon { flex-shrink: 0; }

/* Résumé auto */
.summary-box {
  margin: 16px 24px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(245, 213, 71,0.08), rgba(236,72,153,0.04));
  border: 1px solid rgba(245, 213, 71,0.25);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  position: relative;
}
.summary-box .summary-icon {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 14px;
  opacity: 0.5;
}
.summary-box strong { color: var(--accent-deep); font-weight: 600; }
.summary-box .summary-empty {
  color: var(--text-3);
  font-style: italic;
  font-size: 12px;
}
.summary-box .icon { vertical-align: -2px; }

/* État replié : hauteur max + fondu de fin pour suggérer qu'il y a plus */
.summary-box.summary-collapsible .summary-content {
  max-height: 140px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.summary-box.summary-collapsible.summary-expanded .summary-content {
  max-height: none;
  mask-image: none;
  -webkit-mask-image: none;
}

/* Bouton toggle */
.summary-box .summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
  background: transparent;
  border: 1px solid rgba(245, 213, 71, 0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.summary-box .summary-toggle:hover {
  background: rgba(245, 213, 71, 0.12);
  border-color: rgba(245, 213, 71, 0.7);
}
.summary-box .summary-toggle .icon {
  transition: transform 0.2s ease;
}
.summary-stars { display: inline-flex; gap: 2px; vertical-align: -2px; color: var(--yellow); }
.summary-stars .icon { fill: currentColor; }
.rating-star { display: inline-flex; align-items: center; padding: 0 1px; }
.rating-star.filled .icon { fill: currentColor; }
.contact-line { display: inline-flex; align-items: center; gap: 6px; }

/* Autocomplete villes */
.field-control { position: relative; }
.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-3);
  border: 1px solid var(--accent);
  border-radius: 6px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 50;
  margin-top: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.active {
  background: var(--accent-bg);
  color: var(--accent-deep);
}
.autocomplete-item .city-name { font-weight: 500; }
.autocomplete-item .city-cp { font-size: 11px; color: var(--text-3); }
.autocomplete-loading {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

/* Dashboard "Ma journée" */
.dashboard-v2 {
  padding: 24px;
  overflow-y: auto;
  height: 100%;
}
.dashboard-greeting {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dashboard-greeting-text { flex: 1; min-width: 0; }
.dashboard-greeting h1 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
  letter-spacing: -0.02em;
}
#dash-export-pdf { flex-shrink: 0; }
.dashboard-greeting .subtitle {
  color: var(--text-3);
  font-size: 14px;
}

.dashboard-summary {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.dashboard-summary strong { color: var(--text); font-weight: 600; }

.dashboard-quickstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.quick-stat {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.quick-stat:hover { background: var(--bg-3); border-color: var(--border-2); }
.quick-stat .qs-icon {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: var(--text-3);
}
.quick-stat .qs-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.quick-stat .qs-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
}
.quick-stat.red .qs-value,    .quick-stat.red .qs-icon    { color: var(--red); }
.quick-stat.orange .qs-value, .quick-stat.orange .qs-icon { color: var(--orange); }
.quick-stat.green .qs-value,  .quick-stat.green .qs-icon  { color: var(--green); }
.quick-stat.purple .qs-value, .quick-stat.purple .qs-icon { color: var(--accent-deep); }
.quick-stat.blue .qs-value,   .quick-stat.blue .qs-icon   { color: var(--blue); }

.dash-section-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-3);
}
.dashboard-section-header.urgent .dash-section-icon { color: var(--red); }
.dashboard-section-header.today  .dash-section-icon { color: var(--orange); }
.dashboard-section-header.week   .dash-section-icon { color: var(--blue); }

.dash-card-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-3);
  margin-right: 6px;
  vertical-align: -2px;
}

.di-sub-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-3);
}
.di-sub-chip + .di-sub-chip { margin-left: 8px; }
.di-sub-chip.red { color: var(--red); }
.di-sub-icon { opacity: 0.75; }

.dashboard-section {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
}
.dashboard-section-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.dashboard-section-header h3 {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}
.dashboard-section-header .count-badge {
  background: var(--bg-3);
  color: var(--text-2);
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.dashboard-section-header.urgent .count-badge {
  background: rgba(239,68,68,0.15);
  color: var(--red);
}
.dashboard-section-header.today .count-badge {
  background: rgba(249,115,22,0.15);
  color: var(--orange);
}
.dashboard-section-header.week .count-badge {
  background: rgba(59,130,246,0.15);
  color: var(--blue);
}
.dashboard-section-body {
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.dashboard-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.dashboard-item:hover { background: var(--bg-3); }
.dashboard-item .di-logo {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  flex-shrink: 0;
  overflow: hidden;
}
.dashboard-item .di-logo img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-item .di-content { flex: 1; min-width: 0; }
.dashboard-item .di-title {
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-item .di-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dashboard-item .di-action {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--bg-3);
  color: var(--text-2);
  white-space: nowrap;
}
.dashboard-item .di-action.red { background: rgba(239,68,68,0.15); color: var(--c-red-txt); }
.dashboard-item .di-action.orange { background: rgba(249,115,22,0.15); color: var(--c-orange-txt); }
.dashboard-item .di-action.green { background: rgba(34,197,94,0.15); color: var(--c-green-txt); }
.dashboard-item .di-action.blue { background: rgba(59,130,246,0.15); color: var(--c-blue-txt); }

.dashboard-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  font-style: italic;
}

.dashboard-grid-bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

/* Page To-do personnelle */
.todos-page {
  padding: 24px;
  overflow-y: auto;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.todos-page h2 {
  font-size: 22px;
  margin-bottom: 4px;
}
.todos-page .subtitle {
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: 20px;
}
.todo-add-bar {
  display: flex;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 18px;
}
.todo-add-bar input.todo-text-input {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}
.todo-add-bar input.todo-text-input:focus { border-color: var(--accent); }
.todo-add-bar select, .todo-add-bar input[type="date"] {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
}

.todo-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.todo-tab {
  padding: 8px 16px;
  cursor: pointer;
  color: var(--text-3);
  font-size: 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.todo-tab:hover { color: var(--text); }
.todo-tab.active { color: var(--accent-deep); border-color: var(--accent); }
.todo-tab .tab-count {
  display: inline-block;
  margin-left: 6px;
  background: var(--bg-3);
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-3);
}
.todo-tab.active .tab-count { background: var(--accent); color: var(--accent-text-on); }

.personal-todo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: all 0.15s;
}
.personal-todo:hover { background: var(--bg-3); }
.personal-todo.done { opacity: 0.5; }
.personal-todo.done .todo-content-text { text-decoration: line-through; }
.personal-todo.high { border-left: 3px solid var(--red); }
.personal-todo.med { border-left: 3px solid var(--orange); }
.personal-todo.low { border-left: 3px solid var(--blue); }
.personal-todo .check {
  width: 20px; height: 20px;
  border: 2px solid var(--border-2);
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
}
.personal-todo .check.checked {
  background: var(--green);
  border-color: var(--green);
}
.personal-todo .todo-body { flex: 1; }
.personal-todo .todo-content-text { font-size: 14px; }
.personal-todo .todo-meta-line {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.personal-todo .meta-pill {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-3);
}
.personal-todo .meta-pill.red { background: rgba(239,68,68,0.15); color: var(--c-red-txt); }
.personal-todo .meta-pill.orange { background: rgba(249,115,22,0.15); color: var(--c-orange-txt); }
.personal-todo .meta-pill.blue { background: rgba(59,130,246,0.15); color: var(--c-blue-txt); }
.personal-todo .todo-actions {
  display: flex;
  gap: 4px;
  opacity: 0.5;
}
.personal-todo:hover .todo-actions { opacity: 1; }
.personal-todo .todo-actions button {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.personal-todo .todo-actions button:hover { background: var(--bg-4); color: var(--text); }
.personal-todo .todo-actions button.delete:hover { color: var(--red); }

.personal-todo-editing input {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

/* Section "Mes tâches" sur dashboard */
.dash-personal-todos {
  margin-bottom: 18px;
}

/* Tags libres */
.tags-input-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 36px;
  align-items: center;
}
.tags-input-wrapper:focus-within { border-color: var(--accent); }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.tag-chip .remove {
  cursor: pointer;
  opacity: 0.6;
  margin-left: 2px;
  font-size: 10px;
}
.tag-chip .remove:hover { opacity: 1; }
.tags-input {
  flex: 1;
  min-width: 120px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 13px;
  padding: 2px;
}
.tag-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-3);
  border: 1px solid var(--accent);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: none;
}
.tag-suggestions.open { display: block; }
.tag-suggestion-item {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.tag-suggestion-item:hover, .tag-suggestion-item.active {
  background: var(--accent-bg);
}
.tag-suggestion-item .tag-preview {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}
.tag-suggestion-item .tag-count {
  font-size: 10px;
  color: var(--text-3);
}
.tag-suggestion-create {
  font-style: italic;
  color: var(--accent-deep);
  border-top: 1px solid var(--border);
}
.tag-help {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  font-style: italic;
}

/* Tags sur les cartes Kanban */
.card-custom-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.card-custom-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-2); }

/* Carnet de contacts */
.contacts-book {
  padding: 20px 24px;
  overflow-y: auto;
  height: 100%;
}
.contacts-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.contacts-toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.contacts-toolbar-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-right: 2px;
}
.contacts-toolbar select {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
  cursor: pointer;
  min-width: 140px;
  max-width: 240px;
}
.contacts-toolbar select:focus { border-color: var(--accent); }
.contacts-toolbar .pill-filter {
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 14px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.contacts-toolbar .pill-filter:hover { background: var(--bg-4); color: var(--text); }
.contacts-toolbar .pill-filter.active {
  background: var(--accent-bg);
  color: var(--accent-deep);
  border-color: var(--accent);
}
.contacts-toolbar .reset-btn {
  background: transparent;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 11px;
  padding: 4px 8px;
  margin-left: auto;
}
.contacts-toolbar .reset-btn:hover { text-decoration: underline; }

.contacts-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.contacts-stat {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}
.contacts-stat strong { font-size: 18px; color: var(--accent-deep); display: block; }
.contact-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  transition: background 0.15s;
}
.contact-row:hover { background: var(--bg-3); border-color: var(--border-2); }
.contact-row .col-label {
  display: none;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
  letter-spacing: 0.5px;
}
.contact-row .col-value { color: var(--text); }
.contact-row .col-value.muted { color: var(--text-3); font-style: italic; }
.contact-row a { color: var(--accent-deep); text-decoration: none; }
.contact-row a:hover { text-decoration: underline; }
.contact-company {
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact-company-logo {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
  overflow: hidden;
}
.contact-company-logo img { width: 100%; height: 100%; object-fit: cover; }
.contact-source-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.contact-source-badge.prospect { background: rgba(249,115,22,0.15); color: var(--c-orange-txt); }
.contact-source-badge.client { background: rgba(34,197,94,0.15); color: var(--c-green-txt); }
.contacts-header-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1fr auto;
  gap: 12px;
  padding: 8px 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
@media (max-width: 900px) {
  .contact-row, .contacts-header-row { grid-template-columns: 1fr; }
  .contacts-header-row { display: none; }
  .contact-row .col-label { display: block; }
}

/* Modal large */
.modal.large { max-width: 800px; }
.modal-help {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.modal-help strong { color: var(--accent-deep); }
.modal-help ol { margin-left: 18px; margin-top: 6px; }
.modal-help li { margin: 3px 0; }
.signature-textarea {
  width: 100%;
  min-height: 140px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  outline: none;
  resize: vertical;
}
.signature-textarea:focus { border-color: var(--accent); }
.parsed-preview {
  background: var(--bg-3);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 14px;
  margin-top: 12px;
}
.parsed-preview h4 { font-size: 13px; color: var(--accent-deep); margin-bottom: 10px; }
.parsed-field {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 6px 0;
  align-items: center;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.parsed-field:last-child { border-bottom: none; }
.parsed-field-label { color: var(--text-3); font-size: 12px; }
.parsed-field input {
  background: var(--bg-4);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  outline: none;
  width: 100%;
}
.parsed-field input:focus { border-color: var(--accent); }
.parsed-field select {
  background: var(--bg-4);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  outline: none;
}

/* Import preview */
.import-preview-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
}
.import-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 12px;
}
.import-row:last-child { border-bottom: none; }
.import-row input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }
.import-row .target-select {
  background: var(--bg-4);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 11px;
  outline: none;
  width: 100%;
}
.import-header-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Toggle vue : segment control style iOS / Linear */
.view-toggle {
  display: flex;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px;
  gap: 2px;
}
.view-toggle button {
  background: transparent;
  border: none;
  color: var(--text-3);
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}
.view-toggle button:hover { color: var(--text); }
.view-toggle button.active {
  background: var(--bg-2);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Vue Liste */
.list-view {
  padding: 16px 24px 24px;
  overflow: auto;
  height: 100%;
}
.list-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-2);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  font-size: 13px;
}
.list-table thead th {
  background: var(--bg-2);
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
.list-table thead th:hover { color: var(--text); }
.list-table thead th.sorted { color: var(--accent-deep); }
.list-table thead th .sort-arrow { font-size: 9px; margin-left: 4px; }
.list-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.list-table tbody tr:hover { background: var(--bg-3); }
.list-table tbody tr.overdue { border-left: 3px solid var(--red); }
.list-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.list-table tbody tr:last-child td { border-bottom: none; }
.list-table .col-logo {
  width: 28px; height: 28px;
  border-radius: 5px;
  background: var(--bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  overflow: hidden;
}
.list-table .col-logo img { width: 100%; height: 100%; object-fit: cover; }
.list-table .col-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-table .col-name-text { font-weight: 500; color: var(--text); }
.list-table .col-meta-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-4);
  color: var(--text-2);
}
.list-table .badge-encours {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(245, 213, 71,0.15);
  color: var(--accent-deep);
}
.list-table .badge-overdue {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(239,68,68,0.15);
  color: var(--c-red-txt);
}
.list-table .muted { color: var(--text-3); font-style: italic; }
.list-empty {
  padding: 50px 20px;
  text-align: center;
  color: var(--text-3);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--bg-3);
  border: 1px solid var(--accent);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 300;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s;
}
.toast.show { transform: translateY(0); opacity: 1; }
/* Variants : pastille colorée à gauche, plus border accordée */
.toast-success, .toast-error, .toast-warning, .toast-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast-success::before, .toast-error::before, .toast-warning::before, .toast-info::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.toast-success { border-color: #16a34a; }
.toast-success::before { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.toast-error { border-color: var(--c-red-txt); }
.toast-error::before { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.toast-warning { border-color: #d97706; }
.toast-warning::before { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }
.toast-info { border-color: var(--accent); }
.toast-info::before { background: var(--accent); }

/* Mobile : règles complètes en fin de fichier (section MOBILE / DRAWER).
   Cette stratégie remplace l'ancien "sidebar 70px collée" par un drawer
   slide-in déclenché par le hamburger de la topbar. */


/* ============ SIMULATEUR DE TARIFS ============
   Vue native intégrée au CRM. Sous-onglets en haut + zone de contenu
   qui réutilise les composants du CRM (.btn, .modal, etc.) — pas de
   styling propre dupliqué depuis le simulateur d'origine. */
.sim-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
/* .sim-tabs / .sim-tab → définis plus haut (système unifié) */
.sim-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.sim-section-header { margin-bottom: 20px; }
.sim-section-header h2 { font-size: 18px; font-weight: 600; color: var(--text); }
.sim-section-sub { color: var(--text-3); font-size: 13px; margin-top: 4px; }
.sim-placeholder {
  background: var(--bg-2);
  border: 1px dashed var(--border-2);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.sim-placeholder p:not(:last-child) { margin-bottom: 10px; }

.sim-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

/* Le formulaire n'a plus de card englobante : chaque section est déjà
   une card. On garde juste l'entête introductif et l'espacement. */
.sim-form-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.sim-form-head {
  margin-bottom: 20px;
  padding: 4px 4px 0;
}
.sim-form-head h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.sim-form-sub {
  color: var(--text-3);
  font-size: 12.5px;
  margin-top: 6px;
  line-height: 1.5;
}
.sim-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 0;
}
.sim-field { display: flex; flex-direction: column; gap: 6px; }
.sim-field-label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}

/* Petit badge "?" cliquable / hoverable qui affiche l'aide en tooltip natif */
.sim-field-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: help;
  user-select: none;
}
.sim-field-help:hover { color: var(--accent-deep); border-color: var(--accent); }

/* Champ grisé quand sa case parente est décochée */
.sim-field-dimmed { opacity: 0.45; }
.sim-field-dimmed input,
.sim-field-dimmed select { pointer-events: none; }

/* Champ qui occupe toute la largeur du grid (2 colonnes) */
.sim-field-full-row { grid-column: 1 / -1; }

/* Panier repas : chips cliquables, réutilise le style des amort chips */
.sim-panier-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sim-panier-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-2);
  transition: all 0.15s ease;
}
.sim-panier-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--text);
}
.sim-panier-chip.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
  border-color: var(--accent);
  color: var(--text);
}
.sim-panier-chip-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-3);
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.sim-panier-chip.active .sim-panier-chip-check {
  background: var(--accent);
  color: #1a1a1a;
}
.sim-panier-chip-label { font-weight: 600; }
.sim-panier-chip-amount {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-3);
  padding: 1px 6px;
  background: var(--bg-3);
  border-radius: 4px;
}
.sim-panier-chip.active .sim-panier-chip-amount {
  color: var(--accent-deep, #7a5900);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.sim-pan-manuel { margin-top: 8px; }

/* Toggle "Weekend inclus" sous les chips logement */
.sim-log-weekend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.sim-log-weekend input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}
.sim-log-weekend em {
  color: var(--text-3);
  font-style: normal;
  font-size: 11px;
}


/* Toggles rapides "Amort. habits" / "Amort. outillage" — chips cliquables */
.sim-amort-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sim-amort-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-2);
  transition: all 0.15s ease;
}
.sim-amort-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--text);
}
.sim-amort-chip.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
  border-color: var(--accent);
  color: var(--text);
}
.sim-amort-chip-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-3);
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.sim-amort-chip.active .sim-amort-chip-check {
  background: var(--accent);
  color: #1a1a1a;
}
.sim-amort-chip-label {
  font-weight: 600;
}
.sim-amort-chip-amount {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-3);
  padding: 1px 6px;
  background: var(--bg-3);
  border-radius: 4px;
}
.sim-amort-chip.active .sim-amort-chip-amount {
  color: var(--accent-deep, #7a5900);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Ligne checkbox compacte */
.sim-field-checkbox { gap: 0; }
.sim-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  padding: 6px 0;
  font-weight: 500;
}
.sim-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.sim-form-note {
  background: var(--bg-3);
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text-3);
  font-size: 12px;
  margin-bottom: 18px;
  line-height: 1.5;
}

.sim-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}
/* Sections du formulaire : cards avec titres numérotés ①②③④ */
.sim-form-section {
  margin-bottom: 18px;
  padding: 20px 22px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sim-form-section:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

.sim-form-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

/* Pastille numérotée en tête de section */
.sim-form-step {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #b58200));
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.sim-form-step-ae {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.sim-form-step-settings {
  background: var(--bg-3);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.sim-form-section-titles {
  flex: 1;
  min-width: 0;
}
.sim-form-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.sim-form-section-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}
.sim-form-section .sim-form-grid { margin-bottom: 0; }

.sim-preview-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  position: sticky;
  top: 0;
}

/* Hero : tarif HT mis en avant, sobre et lisible */
.sim-preview-hero {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--accent) 4%, transparent) 60%);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 14px;
  padding: 18px 18px 14px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.sim-preview-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #b58200));
}
.sim-preview-hero-eyebrow {
  font-size: 10.5px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 4px;
}
.sim-preview-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 42px;
  font-weight: 800;
  color: var(--accent-deep, #7a5900);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 2px 0 14px;
  font-variant-numeric: tabular-nums;
}
.sim-preview-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
}

/* Deux metrics côte à côte : Coût / Bénéfice */
.sim-preview-hero-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.sim-preview-hero-metric-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 2px;
}
.sim-preview-hero-metric-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sim-preview-hero-metric-val.sim-pos { color: var(--green); }
.sim-preview-hero-metric-val.sim-neg { color: var(--red); }

/* Bloc Marge avec barre de progression, plus lisible */
.sim-preview-marge-block {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--bg-3);
  border-radius: 12px;
}
.sim-preview-marge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.sim-preview-marge-lbl { }
.sim-preview-marge-vals {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.sim-preview-marge-head strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-transform: none;
}
.sim-preview-marge-target-lbl {
  text-transform: none;
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0;
}
.sim-preview-marge-bar {
  position: relative;
  height: 8px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
}
.sim-preview-marge-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.25s ease;
  border-radius: 4px;
}
.sim-preview-marge-fill.sim-marge-low {
  background: var(--orange, #e89a3c);
}
.sim-preview-marge-fill.sim-marge-ok {
  background: var(--green);
}
.sim-preview-marge-target {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--text-2);
  z-index: 2;
}
.sim-preview-marge-target::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -3px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--text-2);
}

/* Anciennes classes conservées pour compat éventuelle (Missions tableau) */
.sim-preview-sub { display: none; }
.sim-preview-grid { display: none; }
.sim-preview-detail h4,
.sim-preview-negocie h4 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 10px 0 8px;
}
.sim-detail-line {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.sim-detail-line:last-child { border-bottom: none; }
.sim-detail-total {
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
  border-bottom: none;
}
.sim-detail-empty { font-size: 11px; color: var(--text-3); font-style: italic; padding: 6px 0; }
.sim-detail-warn {
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--orange, #e89a3c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange, #e89a3c) 40%, transparent);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.sim-detail-warn-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-2);
}

/* Sous-décomposition heures dans le récap */
.sim-detail-hoursbox, .sim-detail-majo {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg-3);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.sim-detail-majo { border-left-color: var(--orange, #e89a3c); }
.sim-detail-hoursbox-head, .sim-detail-majo-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sim-detail-subline {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 11.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.sim-detail-subtotal {
  font-weight: 700;
  color: var(--text);
  border-top: 1px dashed var(--border-2);
  margin-top: 3px;
  padding-top: 5px;
}
.sim-detail-cat-line {
  flex-wrap: wrap;
  gap: 4px;
}
.sim-detail-cat-label {
  font-weight: 500;
  color: var(--text);
}
.sim-detail-cat-val {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.sim-detail-cat-breakdown {
  font-size: 11px;
  color: var(--text-3);
}
.sim-detail-cat-cost {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sim-detail-sup25 {
  display: inline-block;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--orange, #e89a3c) 18%, transparent);
  color: var(--orange, #e89a3c);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}
.sim-detail-sup50 {
  display: inline-block;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--red) 18%, transparent);
  color: var(--red);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

/* Sections dépliables (Paramètres marge, Calcul auto salaire) */
/* Section collapsible (Réglages avancés) : card discrète en pied de page */
.sim-form-section-collapsible {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 18px;
  overflow: hidden;
}
.sim-form-section-collapsible[open] {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.sim-form-section-collapsible .sim-form-grid {
  padding: 4px 22px 20px;
}
.sim-form-section-title-collapsible {
  cursor: pointer;
  padding: 16px 22px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  list-style: none;
  transition: background 0.12s ease;
}
.sim-form-section-title-collapsible:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.sim-form-section-title-collapsible::-webkit-details-marker { display: none; }
/* Le header (badge + titre + subtitle) prend toute la largeur, chevron à droite */
.sim-form-section-title-collapsible .sim-form-section-head {
  flex: 1;
  margin-bottom: 0;
}
.sim-form-section-chevron {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}
details[open] > .sim-form-section-title-collapsible .sim-form-section-chevron {
  transform: rotate(180deg);
}
details[open].sim-form-section-collapsible > .sim-form-section-title-collapsible {
  border-bottom: 1px solid var(--border);
}

/* Préréglages horaires rapides */
.sim-hor-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sim-hor-presets-lbl {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sim-hor-preset {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-variant-numeric: tabular-nums;
}
.sim-hor-preset:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* Horaires type (1 créneau + nb jours/sem) */
.sim-hor-wrap { grid-column: 1 / -1; }
.sim-hor-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin-top: 4px;
}
.sim-hor-cell { display: flex; flex-direction: column; gap: 4px; }
.sim-hor-cell-lbl {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sim-hor-time { font-variant-numeric: tabular-nums; padding: 8px 10px; }
.sim-hor-arrow {
  color: var(--text-3);
  font-size: 16px;
  padding-bottom: 10px;
  align-self: end;
}

/* Bandeau 24h visuel */
.sim-hor-24h {
  margin-top: 14px;
  padding: 10px 12px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.sim-hor-24h svg {
  display: block;
  width: 100%;
  height: 38px;
}
.sim-hor-24h-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.sim-hor-24h-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 10.5px;
  color: #fff;
  letter-spacing: 0.02em;
}
.sim-hor-24h-tag-night {
  background: rgba(30, 41, 59, 0.18);
  color: #1e293b;
  border: 1px solid rgba(30, 41, 59, 0.25);
}
.sim-hor-24h-sub {
  margin-left: auto;
  font-weight: 500;
  color: var(--text);
}

.sim-hor-detect {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-3);
  border-radius: 10px;
  border-left: 3px solid var(--accent);
}
.sim-hor-detect-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  padding: 3px 0;
  flex-wrap: wrap;
}
.sim-hor-detect-line strong { color: var(--text); font-variant-numeric: tabular-nums; }
.sim-hor-detect-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}
.sim-hor-detect-subline {
  font-size: 11px;
  color: var(--text-3);
  padding: 2px 0 2px 30px;
  font-style: italic;
}
.sim-hor-detect-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
  font-size: 12.5px;
  color: var(--text-2);
}
.sim-hor-detect-total strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sim-hor-detect-pause {
  color: var(--orange, #e89a3c);
  font-size: 11.5px;
}
.sim-hor-detect-paid {
  color: var(--accent-deep);
  font-size: 13.5px;
  margin-top: 4px;
}

.sim-hor-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
}
.sim-hor-tag::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.sim-hor-tag-jour  { background: color-mix(in srgb, var(--green) 18%, transparent);  color: var(--green); }
.sim-hor-tag-jour::before  { background: var(--green); }
.sim-hor-tag-nuit  { background: color-mix(in srgb, #6a7cff 22%, transparent);       color: #6a7cff; }
.sim-hor-tag-nuit::before  { background: #6a7cff; }
.sim-hor-tag-dim   { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-deep); }
.sim-hor-tag-dim::before   { background: var(--accent); }
.sim-hor-tag-ferie { background: color-mix(in srgb, #e87a3c 22%, transparent);       color: #e87a3c; }
.sim-hor-tag-ferie::before { background: #e87a3c; }

/* Pastilles inline (préfixe de catégorie sans emoji) */
.sim-cat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 7px;
  vertical-align: middle;
}
.sim-cat-dot-jour  { background: var(--green); }
.sim-cat-dot-nuit  { background: #6a7cff; }
.sim-cat-dot-dim   { background: var(--accent); }
.sim-cat-dot-ferie { background: #e87a3c; }

/* Icône utilisateur dans le nom de tech (remplace 👤) */
.sim-tech-name { display: inline-flex; align-items: center; gap: 6px; }
.sim-tech-name-icon { width: 14px; height: 14px; color: var(--text-3); }

/* Badge type de contrat sur les cartes techs */
.sim-tech-contrat-row { margin-top: -4px; margin-bottom: 4px; }
.sim-tech-contrat-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sim-tech-contrat-cdi {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.sim-tech-contrat-cdd {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
}
.sim-tech-contrat-ae {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-deep);
}

/* Pastille bullet pour les avertissements (remplace ⚠) */
.sim-detail-warn-bullet {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange, #e89a3c);
  margin-right: 8px;
  vertical-align: middle;
}

.sim-hor-mode {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.sim-hor-mode-label {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sim-hor-mode-options { display: flex; gap: 6px; flex-wrap: wrap; }
.sim-hor-mode-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  background: var(--bg-2);
  transition: background 0.15s, border 0.15s, color 0.15s;
  color: var(--text-2);
}
.sim-hor-mode-opt:hover { background: var(--bg-3); }
.sim-hor-mode-opt input { margin: 0; }
.sim-hor-mode-opt.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-deep);
  font-weight: 600;
}

.sim-hor-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 12px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .sim-hor-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .sim-hor-arrow { display: none; }
  .sim-hor-cell-jours { grid-column: 1 / -1; }
}

.sim-preview-negocie { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-2); }
.sim-pos { color: var(--green); }
.sim-neg { color: var(--red); }

@media (max-width: 1100px) {
  .sim-dashboard-grid { grid-template-columns: 1fr; }
  .sim-preview-card { position: static; }
}
@media (max-width: 900px) {
  .sim-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .sim-form-grid { grid-template-columns: 1fr; }
}

/* Section Missions */
.sim-missions-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sim-missions-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.sim-filter {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sim-filter:hover { background: var(--bg-3); color: var(--text); }
.sim-filter.active { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); }
.sim-filter-count {
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-3);
  color: var(--text-3);
  padding: 1px 6px;
  border-radius: 10px;
}
.sim-filter.active .sim-filter-count { background: rgba(0,0,0,0.18); color: var(--text); }

.sim-missions-empty {
  background: var(--bg-2);
  border: 1px dashed var(--border-2);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.sim-missions-table-wrap {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
}
.sim-missions-table { width: 100%; border-collapse: collapse; }
.sim-missions-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 14px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sim-missions-table th.r { text-align: right; }
.sim-missions-table td {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sim-missions-table td.r { text-align: right; }
.sim-missions-table tbody tr:last-child td { border-bottom: none; }
.sim-missions-table tbody tr:hover td { background: var(--bg-3); }
.sim-cell-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; font-weight: 400; }

/* ───── Grille de cards Missions ───── */
.sim-missions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.sim-mission-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sim-mission-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: hsl(var(--mission-hue, 220), 65%, 55%);
}
.sim-mission-card:hover {
  border-color: hsl(var(--mission-hue, 220), 50%, 60%);
  box-shadow: 0 2px 12px -4px hsla(var(--mission-hue, 220), 40%, 30%, 0.18);
}

.sim-mission-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sim-mission-logo {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sim-mission-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.sim-mission-logo-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.sim-mission-head-text { flex: 1; min-width: 0; }
.sim-mission-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sim-mission-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
}
.sim-mission-kind {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
}
.sim-mission-kind-clients   { background: rgba(21, 128, 61, 0.13); color: #0f6c33; }
.sim-mission-kind-prospects { background: rgba(194, 65, 12,  0.13); color: var(--c-orange-txt); }
.sim-mission-date { font-variant-numeric: tabular-nums; }

.sim-mission-statut {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.12s ease;
}
.sim-mission-statut:hover { filter: brightness(1.05); }
.sim-mission-statut-actif    { background: rgba(21, 128, 61, 0.15);  color: #0f6c33; border-color: rgba(21, 128, 61, 0.35); }
.sim-mission-statut-encours  { background: rgba(2,  132, 199, 0.15); color: #0c6e96; border-color: rgba(2,  132, 199, 0.35); }
.sim-mission-statut-noactif  { background: rgba(120, 113, 108, 0.13); color: #6b635c; border-color: rgba(120, 113, 108, 0.30); }

.sim-mission-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sim-mission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}
.sim-mission-row-lbl {
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sim-mission-row-val {
  color: var(--text);
  font-weight: 500;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sim-mission-horaires {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sim-mission-horaires-sep { opacity: 0.5; }
.sim-mission-horaires-missing {
  background: transparent;
  border: 1px dashed var(--border-2);
  color: var(--text-3);
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.sim-mission-horaires-missing:hover { border-color: var(--accent); color: var(--accent-deep); }

.sim-mission-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
  padding: 10px;
  background: var(--bg-3);
  border-radius: 10px;
}
.sim-mission-num {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 8px;
}
.sim-mission-num-lbl {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sim-mission-num-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sim-mission-num-tarif { color: var(--accent-2, #b58200); }
.sim-mission-num-target {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 500;
}

/* Zones de marge — 4 niveaux du vert au rouge */
.sim-mission-num-marge { padding: 6px 8px; }
.sim-marge-ok   { background: rgba(21, 128, 61, 0.13); }
.sim-marge-ok   .sim-mission-num-val { color: #0f6c33; }
.sim-marge-ok   .sim-mission-num-lbl { color: #1f7a47; }
.sim-marge-soft { background: rgba(202, 138, 4, 0.14); }
.sim-marge-soft .sim-mission-num-val { color: #946400; }
.sim-marge-soft .sim-mission-num-lbl { color: #946400; }
.sim-marge-low  { background: rgba(194, 65, 12, 0.14); }
.sim-marge-low  .sim-mission-num-val { color: var(--c-orange-txt); }
.sim-marge-low  .sim-mission-num-lbl { color: var(--c-orange-txt); }
.sim-marge-crit { background: rgba(190, 18, 60, 0.16); }
.sim-marge-crit .sim-mission-num-val { color: #a01140; }
.sim-marge-crit .sim-mission-num-lbl { color: #a01140; }

.sim-mission-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding-top: 2px;
  border-top: 1px dashed var(--border);
  margin-top: 2px;
  padding-top: 8px;
}
.sim-row-action-danger:hover { color: var(--c-orange-txt); border-color: var(--c-orange-txt); }

@media (max-width: 520px) {
  .sim-mission-numbers { grid-template-columns: 1fr 1fr; }
  .sim-mission-num-marge { grid-column: 1 / -1; }
}

.sim-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.sim-badge-ok { background: rgba(34, 197, 94, 0.15); color: var(--c-green-txt); }
.sim-badge-gr { background: var(--bg-3); color: var(--text-3); }
.sim-badge-toggle {
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.08s ease;
}
.sim-badge-toggle:hover { opacity: 0.85; }
.sim-badge-toggle:active { transform: scale(0.95); }

.sim-row-action {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-3);
  transition: all 0.12s;
}
.sim-row-action:hover { color: var(--red); border-color: var(--red); background: rgba(239, 68, 68, 0.08); }

/* Section Supervision */
.sim-sup-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sim-sup-toolbar .field-select {
  min-width: 160px;
  flex: 0 1 200px;
}

.sim-sup-block { margin-bottom: 28px; }
.sim-sup-block:last-child { margin-bottom: 0; }
.sim-sup-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sim-sup-block-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.sim-sup-block-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-3);
  padding: 3px 10px;
  border-radius: 12px;
}
.sim-sup-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 900px) {
  .sim-sup-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Section Postes */
.sim-postes-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.sim-postes-info {
  flex: 1;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}
.sim-postes-info em { font-style: italic; color: var(--text-3); }
.sim-postes-toolbar > .btn { flex-shrink: 0; align-self: flex-start; }

.sim-postes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sim-poste-col {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.sim-poste-col-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sim-poste-col-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-3);
  padding: 2px 8px;
  border-radius: 10px;
}

.sim-poste-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
}
.sim-poste-item:last-child { margin-bottom: 0; }
.sim-poste-nom { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); }
.sim-poste-actions { display: flex; gap: 4px; }

/* Colonne Horaires dans la table des missions */
.sim-horaires-summary {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sim-horaires-times {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sim-horaires-jours {
  font-size: 11px;
  color: var(--text-3);
}
.sim-horaires-missing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--orange, #f97316) 12%, transparent);
  color: var(--orange, #f97316);
  border: 1px dashed color-mix(in srgb, var(--orange, #f97316) 40%, transparent);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.sim-horaires-missing:hover {
  background: color-mix(in srgb, var(--orange, #f97316) 20%, transparent);
}
.sim-horaires-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange, #f97316);
}

/* Modal d'édition complète d'une mission */
.sim-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.sim-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sim-edit-lbl {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.sim-edit-recap {
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
}
.sim-edit-recap h3 { margin-top: 0; }
.sim-edit-recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sim-edit-recap-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sim-edit-recap-lbl {
  font-size: 11px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sim-edit-recap-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px) {
  .sim-edit-grid, .sim-edit-recap-grid { grid-template-columns: 1fr; }
}

/* Icône "update" dans l'historique */
.sim-hist-icon-edit {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-deep);
}
.sim-poste-empty { color: var(--text-3); font-size: 12px; font-style: italic; padding: 8px 4px; }

@media (max-width: 900px) {
  .sim-postes-grid { grid-template-columns: 1fr; }
  .sim-postes-toolbar { flex-direction: column; }
}

/* Section Techs (réutilise .sim-postes-toolbar et .sim-postes-info) */
.sim-techs-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.sim-techs-toolbar > .btn { flex-shrink: 0; align-self: flex-start; }
.sim-techs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.sim-tech-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sim-tech-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sim-tech-card-actions { display: flex; gap: 4px; }
.sim-tech-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.sim-tech-rates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: 8px;
  font-size: 12px;
}
.sim-tech-rates-header {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-2);
}
.sim-tech-rates-header span:nth-child(1) { grid-column: 2; text-align: right; }
.sim-tech-rates-header span:nth-child(3) { text-align: right; }
.sim-tech-rate-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}
.sim-tech-rate-label { color: var(--text-2); font-weight: 500; }
.sim-tech-rate-vals {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.sim-tech-rate-brut { color: var(--text-3); }
.sim-tech-rate-arrow { color: var(--text-3); font-size: 10px; }
.sim-tech-rate-charged { color: var(--accent-deep); font-weight: 600; }
.sim-tech-rate-brut em, .sim-tech-rate-charged em {
  color: var(--text-3); font-style: italic; font-weight: 400;
}
.sim-tech-rate-charges {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px dashed var(--border-2);
}
.sim-tech-rate-charges-label { color: var(--text-3); font-size: 11px; }
.sim-tech-rate-charges-val { font-weight: 600; color: var(--text); }
.sim-tech-rate-charges-val em { color: var(--text-3); font-weight: 400; font-style: italic; }

.sim-tech-modal-rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sim-tech-modal-rate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.sim-tech-modal-rate-label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.sim-rate-auto-badge {
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2, #b58200);
  background: rgba(245, 213, 71, 0.18);
  border: 1px solid rgba(245, 213, 71, 0.45);
  padding: 1px 6px;
  border-radius: 4px;
  pointer-events: auto;
  user-select: none;
}
@media (max-width: 520px) {
  .sim-tech-modal-rates { grid-template-columns: 1fr; }
}

.sim-tech-use {
  width: 100%;
  justify-content: center;
}

@media (max-width: 700px) {
  .sim-techs-toolbar { flex-direction: column; }
}

/* Section Historique */
.sim-hist-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sim-hist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
.sim-hist-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.sim-hist-icon-add { background: rgba(34, 197, 94, 0.15); }
.sim-hist-icon-del { background: rgba(239, 68, 68, 0.12); }
.sim-hist-body { flex: 1; min-width: 0; }
.sim-hist-title { font-size: 13px; color: var(--text); }
.sim-hist-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.sim-hist-date {
  text-align: right;
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}
.sim-hist-time { color: var(--text-3); opacity: 0.7; }

.sim-import-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-2);
  border: 1px dashed var(--border-2);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.sim-import-banner strong { font-size: 13px; color: var(--text); }
.sim-import-banner-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.sim-import-banner > .btn { flex-shrink: 0; }

.sim-import-hint {
  background: var(--bg-3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 12px;
}
.sim-import-hint-ok {
  background: rgba(34, 197, 94, 0.10);
  color: var(--c-green-txt);
  font-weight: 500;
}
.sim-import-hint ol { padding-left: 18px; margin-top: 6px; }
.sim-import-hint code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
}

@media (max-width: 700px) {
  .sim-import-banner { flex-direction: column; align-items: flex-start; }
}

/* ============ Cmd+K palette ============ */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cmdk-overlay.open { display: flex; opacity: 1; }
.cmdk {
  width: 580px;
  max-width: calc(100vw - 32px);
  max-height: 60vh;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.97);
  opacity: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.cmdk-overlay.open .cmdk { transform: scale(1); opacity: 1; }
.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.cmdk-input-icon {
  width: 18px;
  height: 18px;
  color: var(--text-3);
  flex-shrink: 0;
}
#cmdk-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: var(--text);
  font-family: inherit;
  min-width: 0;
}
#cmdk-input::placeholder { color: var(--text-3); }
.cmdk-kbd, .cmdk-footer kbd {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--text-3);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.cmdk-results {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.cmdk-group {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 13.5px;
  user-select: none;
}
.cmdk-item:hover,
.cmdk-item.selected {
  background: var(--bg-3);
  color: var(--text);
}
.cmdk-item-icon {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  flex-shrink: 0;
}
.cmdk-item.selected .cmdk-item-icon { color: var(--text); }
.cmdk-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item-sub {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--bg-3);
}
.cmdk-item.selected .cmdk-item-sub { background: var(--bg-4); }
.cmdk-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.cmdk-footer {
  display: flex;
  gap: 14px;
  padding: 9px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-3);
  font-size: 11px;
  color: var(--text-3);
}
.cmdk-footer span { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 600px) {
  .cmdk { width: calc(100vw - 24px); max-height: 70vh; }
  .cmdk-overlay { padding-top: 8vh; }
  .cmdk-footer { flex-wrap: wrap; gap: 10px; }
}

/* ============ Polish micro-interactions ============ */

/* Focus ring discret façon Linear/Attio (uniquement au clavier) */
:focus { outline: none; }
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.nav-item:focus-visible,
.cmdk-item:focus-visible {
  outline: 2px solid rgba(245, 213, 71, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Feedback tactile sur les boutons (légère réduction au clic) */
.btn, .quick-stat, .nav-item, .sim-tab, .panel-tab, .view-toggle button, .filter-btn, .fb, .sim-filter, .cmdk-item {
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.15s ease,
              border-color 0.15s ease,
              transform 0.08s ease,
              box-shadow 0.15s ease;
}
.btn:active,
.btn.primary:active,
.quick-stat:active,
.sim-tab:active,
.view-toggle button:active {
  transform: scale(0.97);
}

/* Slide-in des sections du dashboard */
.dashboard-section {
  animation: dashSectionIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes dashSectionIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Adoucir le panel détail : glissement plus naturel + ombre marquée */
.panel {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.08);
}

/* Toast : slide depuis le bas + fade plus doux */
.toast { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; }

/* Tags : effet de hover plus vif */
.tag { transition: transform 0.1s ease, opacity 0.15s ease; }
.tag:hover { opacity: 0.85; }

/* Inputs : focus state plus visible (border qui s'épaissit) */
input, textarea, select { transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
input:focus, textarea:focus, select:focus,
.field-input:focus, .field-select:focus, .field-textarea:focus {
  box-shadow: 0 0 0 3px rgba(245, 213, 71, 0.12);
}

/* Désactiver les animations si l'utilisateur préfère réduire le mouvement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============ Impression PDF du tableau de bord ============ */
@media print {
  /* Cacher la sidebar, le header du CRM, les boutons et la barre des filtres */
  .sidebar,
  .header,
  .filters,
  #dash-export-pdf,
  .dashboard-section-header button,
  .cmdk-overlay,
  .modal-overlay,
  .toast {
    display: none !important;
  }
  /* Le main occupe toute la page, plus de scroll, fond blanc */
  .app, .main, .kanban-container {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .dashboard-v2 {
    padding: 16px 0;
  }
  /* Imprimer les couleurs (Chrome/Edge) */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  /* Éviter les coupures dans les sections */
  .dashboard-section,
  .dash-card,
  .quick-stat,
  .dashboard-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Plus de bordures, ombres simplifiées pour impression nette */
  .dashboard-section,
  .dash-card,
  .quick-stat {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  .dashboard-section { animation: none !important; }
  /* Garder un layout 2 colonnes pour le bottom du dashboard */
  .dashboard-grid-bottom {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

/* ============ Corbeille ============ */
.trash-view {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  max-width: 1100px;
  width: 100%;
}
.trash-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-2);
}
.trash-empty-icon { color: var(--text-3); margin: 0 auto 16px; display: block; }
.trash-empty h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.trash-empty p { font-size: 13px; color: var(--text-3); line-height: 1.55; max-width: 420px; margin: 0 auto; }

.trash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.trash-info-banner { font-size: 13px; color: var(--text-2); margin: 0; }

.trash-list { display: flex; flex-direction: column; gap: 8px; }
.trash-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.trash-item:hover { border-color: var(--border-2); box-shadow: 0 1px 2px rgba(0,0,0,0.03); }

.trash-logo {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text-2);
  overflow: hidden;
}
.trash-logo img { width: 100%; height: 100%; object-fit: contain; }

.trash-info { flex: 1; min-width: 0; }
.trash-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.trash-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 11px;
}
.trash-source-pill.prospect { background: rgba(249, 115, 22, 0.12); color: var(--c-orange-txt); }
.trash-source-pill.client { background: rgba(34, 197, 94, 0.12); color: var(--c-green-txt); }

.trash-remain {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  flex-shrink: 0;
}
.trash-remain.red { background: rgba(239, 68, 68, 0.12); color: var(--c-red-txt); }
.trash-remain.orange { background: rgba(249, 115, 22, 0.12); color: var(--c-orange-txt); }
.trash-remain.green { background: rgba(34, 197, 94, 0.12); color: var(--c-green-txt); }

.trash-actions { display: flex; gap: 6px; flex-shrink: 0; }
.trash-actions .btn.danger {
  background: transparent;
  color: var(--red);
  border-color: var(--border);
}
.trash-actions .btn.danger:hover { background: rgba(239, 68, 68, 0.08); border-color: var(--red); }

@media (max-width: 700px) {
  .trash-item { flex-wrap: wrap; }
  .trash-actions { width: 100%; justify-content: flex-end; }
}

/* Badge d'affiliation prospect/client sur une tâche perso */
.ptodo-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.08s ease;
}
.ptodo-link-badge:hover { opacity: 0.85; transform: translateY(-1px); }
.ptodo-link-badge.prospect { background: rgba(249, 115, 22, 0.12); color: var(--c-orange-txt); }
.ptodo-link-badge.client { background: rgba(34, 197, 94, 0.12); color: var(--c-green-txt); }

#ptodo-link {
  flex: 0 1 200px;
  min-width: 0;
  font-size: 13px;
}

.btn:disabled,
.btn.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
}
.btn:disabled:hover,
.btn.primary:disabled:hover {
  background: var(--accent);
  transform: none;
}

.modal-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-grid-2 .modal-section { margin-bottom: 0; }
@media (max-width: 540px) {
  .modal-grid-2 { grid-template-columns: 1fr; }
}

/* Select éditable : bouton "gérer les options" à côté du select */
.field-select-wrap {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.field-select-wrap .field-select { flex: 1; min-width: 0; }
.field-manage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.field-manage-btn:hover {
  background: var(--bg-4);
  color: var(--text);
  border-color: var(--border-2);
}

/* Lien cliquable sur un nom de contact dans le Carnet */
.contact-timeline-link {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.contact-timeline-link:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

/* Mini-fenêtre Timeline contact */
.timeline-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.timeline-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.timeline-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.timeline-sub {
  font-size: 12px;
  color: var(--text-3);
  margin: 2px 0 0;
}
.timeline-cards-list { display: flex; flex-direction: column; gap: 6px; }
.timeline-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.timeline-card-row:hover {
  background: var(--bg-4);
  border-color: var(--border-2);
}
.timeline-card-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  overflow: hidden;
  flex-shrink: 0;
}
.timeline-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.timeline-card-info { flex: 1; min-width: 0; }
.timeline-card-title { font-size: 13px; font-weight: 600; color: var(--text); }
.timeline-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  flex-wrap: wrap;
}
.timeline-ref-pill {
  background: var(--accent-bg);
  color: var(--accent-deep);
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.timeline-card-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  text-align: right;
}
.timeline-card-contact a { color: var(--text-2); }
.timeline-card-contact a:hover { color: var(--accent-deep); }

.timeline-events-list { display: flex; flex-direction: column; gap: 6px; }
.timeline-event {
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg-3);
  border-radius: 8px;
}
.timeline-event-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.timeline-event-body { flex: 1; min-width: 0; }
.timeline-event-text { font-size: 12.5px; color: var(--text); }
.timeline-event-sub { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.timeline-empty {
  text-align: center;
  padding: 16px;
  color: var(--text-3);
  font-size: 12px;
  font-style: italic;
}

/* Section "CA annuel projeté" sur la fiche prospect/client */
.revenue-section {
  margin-top: 20px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(245, 213, 71, 0.06), rgba(245, 213, 71, 0.02));
  border: 1px solid rgba(245, 213, 71, 0.18);
  border-radius: 12px;
}
.revenue-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.revenue-icon { font-size: 28px; flex-shrink: 0; }
.revenue-body { flex: 1; min-width: 0; }
.revenue-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.revenue-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.revenue-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
}

/* Liste détaillée des missions sous le total */
.rev-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.rev-row {
  display: grid;
  grid-template-columns: 2fr 1.3fr 0.8fr 1.2fr;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.rev-row:last-child { border-bottom: none; }
.rev-row-head {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--bg-3);
}
.rev-row-tech { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rev-row-tech-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-row-tech-name em { font-weight: 400; color: var(--text-3); font-style: italic; }
.rev-row-poste { font-size: 11px; color: var(--text-3); }
.rev-row-tarif { color: var(--text); font-weight: 600; }
.rev-row-tarif-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rev-row-tarif-tag.nego { background: rgba(34, 197, 94, 0.15); color: var(--c-green-txt); }
.rev-row-tarif-tag.consei { background: rgba(59, 130, 246, 0.12); color: var(--c-blue-txt); }
.rev-row-marge { font-weight: 600; text-align: right; }
.rev-row-marge.pos { color: var(--c-green-txt); }
.rev-row-marge.neg { color: var(--c-red-txt); }
.rev-row-head.rev-row .rev-row-marge,
.rev-row-head .rev-row-marge { color: var(--text-3); font-weight: 700; }
.rev-row-annuel { font-weight: 700; color: var(--text); text-align: right; }
.rev-row-head .rev-row-tarif,
.rev-row-head .rev-row-marge,
.rev-row-head .rev-row-annuel { color: var(--text-3); font-weight: 700; }

/* Forecast Dashboard : 3 cards en grille */
.forecast-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.forecast-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-2);
}
.forecast-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  color: var(--text-3);
  flex-shrink: 0;
}
.forecast-recurrent .forecast-icon { background: rgba(34, 197, 94, 0.12); color: var(--c-green-txt); }
.forecast-pipeline .forecast-icon { background: rgba(249, 115, 22, 0.12); color: var(--c-orange-txt); }
.forecast-total .forecast-icon { background: rgba(245, 213, 71, 0.12); color: var(--accent-deep); }
.forecast-body { flex: 1; min-width: 0; }
.forecast-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.forecast-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.forecast-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; }
.forecast-ht { font-size: 0.55em; font-weight: 600; color: var(--text-3); letter-spacing: 0.04em; vertical-align: middle; }

/* ====================================================================
   PARC AUTOMOBILE — badges d'échéance (CT / révision / assurance / leasing)
   ==================================================================== */
.voiture-ech-list { display: flex; flex-wrap: wrap; gap: 4px; }
.voiture-ech-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.voiture-ech-ok   { background: rgba(34, 197, 94, 0.13);  color: var(--c-green-txt); }
.voiture-ech-soon { background: rgba(249, 115, 22, 0.15); color: var(--c-orange-txt); }
.voiture-ech-late { background: rgba(239, 68, 68, 0.16);  color: var(--c-red-txt); }

/* ====================================================================
   Modale rappels d'accueil — urgences du jour
   ==================================================================== */
.reminder-body { display: flex; flex-direction: column; gap: 16px; }
.reminder-block h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.reminder-block:nth-child(1) h3 { color: var(--c-red-txt); }
.reminder-block:nth-child(2) h3 { color: var(--c-orange-txt); }
.reminder-block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.reminder-block li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-3);
  border-radius: 6px;
  font-size: 13px;
  cursor: default;
}
.reminder-block li[data-go-card] { cursor: pointer; transition: background-color 0.12s ease; }
.reminder-block li[data-go-card]:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-3)); }
.reminder-name { color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-source {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-left: 6px;
}
.reminder-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.reminder-meta.late   { color: var(--c-red-txt); font-weight: 600; }
.reminder-meta.urgent { color: var(--c-orange-txt); font-weight: 600; }
.reminder-more { background: transparent !important; color: var(--text-3); font-style: italic; font-size: 12px; padding: 4px 10px !important; }
.reminder-notif-prompt {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 4px;
}
.reminder-notif-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.reminder-notif-row input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.reminder-notif-row .icon { color: var(--accent-deep); }

/* ====================================================================
   Signature email : badge "fiche reconnue" + autocomplete société
   ==================================================================== */
.sig-match-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 4px;
  padding: 7px 10px;
  background: rgba(34, 197, 94, 0.12);
  color: var(--c-green-txt);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.sig-match-badge .icon { flex-shrink: 0; }

.sig-company-wrap { position: relative; }
.sig-company-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
  display: none;
  margin-top: 4px;
}
.sig-company-list.open { display: block; }
.sig-company-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.1s ease;
}
.sig-company-item:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,0.04); }
.sig-company-item:hover,
.sig-company-item.active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sig-company-name { color: var(--text); flex: 1; }
.sig-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.sig-tag-prospect { background: rgba(249, 115, 22, 0.18); color: var(--c-orange-txt); }
.sig-tag-client   { background: rgba(34, 197, 94, 0.18);  color: var(--c-green-txt); }

/* ====================================================================
   Caisse / nouvel item : combobox catalogue + mode manuel
   ==================================================================== */
.ci-combo-wrap { position: relative; }
.ci-combo-list {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  max-height: 280px;
  overflow-y: auto;
  z-index: 60;
  display: none;
  margin-top: 4px;
}
.ci-combo-list.open { display: block; }
.ci-combo-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background-color 0.12s ease;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.ci-combo-item:last-child { border-bottom: none; }
.ci-combo-item:hover, .ci-combo-item.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.ci-combo-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ci-combo-sub  { font-size: 11px; color: var(--text-3); }
.ci-combo-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  text-align: center;
}
.ci-custom-link {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline dotted;
}
.ci-custom-link:hover { color: var(--text); }
.ci-mode-badge {
  display: inline-block;
  padding: 4px 8px;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.03em;
}
.ci-selected-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  margin-bottom: 6px;
}
.ci-selected-name { flex: 1; font-weight: 600; font-size: 13px; color: var(--text); }
.ci-selected-meta { font-size: 11px; color: var(--text-3); }
.ci-selected-clear {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.ci-selected-clear:hover { background: rgba(0,0,0,0.05); color: var(--text); }
/* Tag "manuel" sur l'item affiché dans la caisse */
.caisse-item-custom-tag {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  background: var(--bg-4);
  color: var(--text-3);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 8px;
  vertical-align: middle;
}
.caisse-item-commentaire {
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--bg-3);
  border-left: 2px solid var(--border);
  font-size: 11.5px;
  color: var(--text-2);
  font-style: italic;
  border-radius: 3px;
}
.caisse-item-lien {
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: none;
}
.caisse-item-lien:hover { text-decoration: underline; }

/* ====================================================================
   Ajout en masse depuis le catalogue (cases à cocher)
   ==================================================================== */
.bulk-toolbar .field-input { flex: 1; }
.bulk-row:last-child { border-bottom: none; }
.bulk-row:hover:not(.is-already) { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bulk-row.is-already { opacity: 0.5; cursor: not-allowed; }
.bulk-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bulk-nom { font-size: 13px; font-weight: 600; color: var(--text); }
.bulk-meta { font-size: 11px; color: var(--text-3); }

/* ====================================================================
   Modale outil : box auto-fill Amazon (en haut)
   ==================================================================== */
.outilref-amazon-box {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
}
.outilref-amazon-box .sim-edit-lbl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-deep);
  font-weight: 600;
}
.outilref-amazon-box .icon { color: var(--accent-deep); }

/* Bouton "supprimer le technicien" sur la card + vue détail */
.tech-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.tech-card-delete {
  color: var(--text-3) !important;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.tech-card-delete:hover {
  color: var(--c-red-txt) !important;
  background: rgba(220, 38, 38, 0.10);
}

/* ====================================================================
   Contact référent : bouton étoile + badge
   ==================================================================== */
.contact-ref-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  opacity: 0.55;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  margin-left: auto;
}
.contact-ref-btn:hover {
  opacity: 1;
  background: rgba(245, 213, 71, 0.18);
  color: var(--accent-deep);
}
.contact-ref-btn.is-ref {
  opacity: 1;
  color: var(--accent-deep);
}
.contact-ref-btn.is-ref .icon {
  fill: var(--accent);
  stroke: var(--accent-deep);
}
.contact-ref-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent-deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.contact-ref-badge .icon { fill: var(--accent); }
/* Mise en avant subtile de la card du référent */
.sub-item-ref {
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}

/* CA éditable inline (saisi par l'utilisateur) */
.editable-ca {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
  margin: 0 -6px;
  transition: background-color 0.15s ease, color 0.15s ease;
  position: relative;
}
.editable-ca:hover { background: rgba(0, 0, 0, 0.04); }
.editable-ca.is-manual {
  color: var(--accent-deep);
  background: rgba(245, 213, 71, 0.12);
}
.editable-ca.is-manual:hover { background: rgba(245, 213, 71, 0.22); }
.editable-ca-input {
  font: inherit;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 8px;
  margin: 0 -8px;
  width: 140px;
  outline: none;
  -moz-appearance: textfield;
}
.editable-ca-input::-webkit-outer-spin-button,
.editable-ca-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.forecast-edit-hint {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--text-3);
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.forecast-card:hover .forecast-edit-hint { opacity: 1; }
.ca-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.ca-reset-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--text); }
@media (max-width: 900px) {
  .forecast-row { grid-template-columns: 1fr; }
}

/* Section Documents joints en bas du tab Détails */
.docs-section {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.docs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.docs-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.docs-count {
  background: var(--bg-3);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 6px;
}
.docs-dropzone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
  border: 2px dashed var(--border-2);
  border-radius: 10px;
  padding: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.docs-dropzone.drag-over {
  background: var(--accent-bg);
  border-color: var(--accent);
}
.docs-empty {
  text-align: center;
  padding: 18px;
  color: var(--text-3);
  font-size: 12px;
  font-style: italic;
}
.docs-hint {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 8px;
  text-align: center;
}
.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.doc-item.dragging { opacity: 0.4; }
.doc-item.drop-target {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.doc-drag-handle {
  cursor: grab;
  color: var(--text-3);
  font-size: 16px;
  letter-spacing: -2px;
  user-select: none;
  flex-shrink: 0;
  padding: 0 2px;
}
.doc-drag-handle:active { cursor: grabbing; }
.doc-icon { font-size: 22px; flex-shrink: 0; }
.doc-info { flex: 1; min-width: 0; }
.doc-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.doc-actions { display: flex; gap: 4px; flex-shrink: 0; }
.doc-actions .sim-row-action { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Section "Réseau d'apporteurs" en bas du tab Détails */
.apporteur-network {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.apporteur-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.apporteur-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.apporteur-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.apporteur-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.apporteur-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}
.apporteur-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.apporteur-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.apporteur-card:hover { background: var(--bg-4); border-color: var(--border-2); }
.apporteur-card-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  overflow: hidden;
  flex-shrink: 0;
}
.apporteur-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.apporteur-card-info { flex: 1; min-width: 0; }
.apporteur-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apporteur-card-info .contact-source-badge { font-size: 10px; margin-top: 2px; }

/* Multi-select éditable : bouton ⚙ au coin haut-droit de la zone tags */
.field-multi-wrap {
  position: relative;
}
.field-manage-btn-multi {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  z-index: 1;
}

/* Modale "gérer les options" */
.manage-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.manage-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.manage-option-name { font-size: 13px; color: var(--text); }
.manage-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  padding: 12px;
  text-align: center;
}

/* Bandeau d'actions en haut du Carnet de contacts */
.contacts-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ============ Vue Carte de France ============ */
.map-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.map-stats {
  padding: 12px 24px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  font-size: 12.5px;
  color: var(--text-2);
}
.map-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.map-stat strong { color: var(--text); font-weight: 600; }
.map-stat-prospect { color: var(--c-orange-txt); }
.map-stat-prospect strong { color: var(--c-orange-txt); }
.map-stat-client { color: var(--c-green-txt); }
.map-stat-client strong { color: var(--c-green-txt); }
.map-stat-pending { color: var(--accent-deep); font-weight: 500; }
.map-stat-failed { color: var(--red); }
.map-stat-failed strong { color: var(--red); }
.map-canvas {
  flex: 1;
  width: 100%;
  background: var(--bg-3);
  position: relative;
}
.map-error {
  padding: 40px;
  text-align: center;
  color: var(--text-2);
  font-size: 14px;
}

/* Popup Leaflet customisé */
.leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.leaflet-popup-content { margin: 12px 14px; min-width: 180px; }
.map-popup-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.map-popup-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.map-popup-tag-prospects { background: rgba(249, 115, 22, 0.15); color: var(--c-orange-txt); }
.map-popup-tag-clients { background: rgba(34, 197, 94, 0.15); color: var(--c-green-txt); }
.map-popup-loc { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.map-popup-open {
  width: 100%;
  padding: 6px 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.map-popup-open:hover { background: var(--accent-2); }

/* ====================================================================
   Markers groupés (plusieurs entités par ville)
   ==================================================================== */
.map-marker-wrap { background: none !important; border: none !important; }
.map-marker {
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease;
}
.map-marker:hover { transform: scale(1.15); cursor: pointer; }
.map-marker-multi span {
  font-size: 12px;
  font-weight: 700;
  color: #1a1a1a;
  text-shadow: 0 1px 2px rgba(var(--w), calc(0.45 * var(--wa)));
  line-height: 1;
}

/* ====================================================================
   Tooltip hover : liste des fiches d'une ville
   ==================================================================== */
.leaflet-tooltip.map-tooltip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  padding: 0;
  color: var(--text);
  font-family: inherit;
  white-space: normal;
  max-width: 260px;
}
.leaflet-tooltip.map-tooltip::before { display: none; } /* arrow off */
.map-tip { padding: 10px 12px; }
.map-tip-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.map-tip-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.map-tip-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}
.map-tip-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-2);
}
.map-tip-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.map-tip-tag-prospects { background: #c2410c; }
.map-tip-tag-clients   { background: #15803d; }
.map-tip-tag-tech      { background: #F5D547; color: #1a1a1a; }
.map-tip-name { line-height: 1.3; }
.map-tip-hint {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 10.5px;
  color: var(--text-3);
  font-style: italic;
}

/* ====================================================================
   Popup clic : liste avec boutons d'ouverture par fiche
   ==================================================================== */
.map-popup-multi { min-width: 240px; }
.map-popup-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.map-popup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg-3);
}
.map-popup-row-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.map-popup-row-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-popup-row .map-popup-open {
  width: auto;
  padding: 4px 10px;
  font-size: 11px;
  flex-shrink: 0;
}
.map-popup-row .map-popup-tag {
  margin-bottom: 0;
  flex-shrink: 0;
}

/* ====================================================================
   AUTHENTIFICATION — Écran login / setup + bandeau user sidebar
   ==================================================================== */

/* Overlay plein écran : login ou setup admin */
.auth-overlay.open { display: flex; }

.auth-submit:hover { background: var(--accent-2); }
.auth-submit:active { transform: translateY(1px); }

/* Bandeau utilisateur connecté dans la sidebar */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.sidebar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--maintup);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; overflow: hidden; }
.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: 10.5px;
  color: var(--text-3);
}
.sidebar-logout {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-logout:hover {
  background: var(--bg-3);
  color: var(--red);
  border-color: var(--red);
}

/* Page Utilisateurs (admin only) */
.users-page { max-width: 800px; }
.users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.users-header h2 { margin: 0; }
.users-info {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 18px 0;
  line-height: 1.5;
}
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.users-table th, .users-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.users-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.users-table th.r, .users-table td.r { text-align: right; }
.users-role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.users-role-admin {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-deep);
}
.users-role-user {
  background: color-mix(in srgb, var(--text-3) 14%, transparent);
  color: var(--text-2);
}
.users-self-tag {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}

/* Toggle d'activation de l'authentification */
.users-auth-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0;
}
.users-auth-toggle-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.users-auth-toggle-msg {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 540px;
}

/* ====================================================================
   CAISSES À OUTILS
   ==================================================================== */
/* Badge caisse dans la to-do list */
.ptodo-link-badge.caisse {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-deep);
}

/* Liste des tâches liées dans le modal de caisse */
.caisse-todos-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
.caisse-todo-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  background: var(--bg-3);
  border-radius: 6px;
  font-size: 12.5px;
}
.caisse-todo-item.done .caisse-todo-text {
  text-decoration: line-through;
  color: var(--text-3);
}
.caisse-todo-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--green);
}
.caisse-todo-item.done .caisse-todo-check {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.caisse-todo-text { color: var(--text); }
.caisse-todo-meta { display: flex; align-items: center; gap: 6px; }

/* Champ mot de passe caisse avec toggle œil */
.caisse-mdp-row { display: flex; gap: 6px; align-items: stretch; }
.caisse-mdp-input { flex: 1; font-family: monospace; letter-spacing: 2px; }
.caisse-mdp-toggle {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 12px;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.caisse-mdp-toggle:hover { background: var(--bg-2); border-color: var(--border-2); }

/* Wrapper plein écran : tabs fixes en haut, contenu scrollable en dessous.
   Le parent .kanban-container a overflow-y:hidden (pour le kanban réel),
   on rend donc .caisses-page-wrap full height + flex column. */
.caisses-page-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0; /* indispensable pour autoriser le scroll de l'enfant */
}
.caisses-page-wrap .caisses-tabs { flex-shrink: 0; }
.caisses-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 20px;
}

/* Sous-onglets en haut de la page Caisses */
/* .caisses-tabs / .caisses-tab → définis plus haut (système unifié) */
.caisses-tab-count {
  background: var(--bg-3);
  color: var(--text-3);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.caisses-tab.active .caisses-tab-count {
  background: var(--accent);
  color: var(--accent-text-on);
}

/* Catalogue : expand/collapse + détails */
.catalogue-row {
  cursor: pointer;
  transition: background 0.1s;
}
.catalogue-row:hover { background: var(--bg-3); }
.catalogue-expand {
  display: inline-block;
  font-size: 10px;
  color: var(--text-3);
  margin-right: 6px;
  width: 12px;
}
.catalogue-detail-row {
  background: var(--bg-3);
}
.catalogue-detail-row td { padding: 8px 16px !important; }
.catalogue-detail-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.catalogue-detail-table th {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 4px 8px;
  font-weight: 500;
}
.catalogue-detail-table td {
  padding: 6px 8px !important;
  border-bottom: 1px solid var(--border);
}
.catalogue-detail-table tr:last-child td { border-bottom: none; }
.catalogue-link {
  color: var(--accent-deep);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.catalogue-link:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Message d'erreur de rendu (au lieu de casser tout l'onglet) */
.caisses-render-error {
  margin: 20px 0;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--red, #dc2626) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red, #dc2626) 35%, transparent);
  border-radius: 12px;
  color: var(--text);
  font-size: 13.5px;
}
.caisses-render-error-msg {
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--red, #dc2626);
  word-break: break-word;
}
.caisses-render-error-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
}

/* 2e rangée de filtres du catalogue : par type de caisse */
.caisses-filters-types {
  margin-top: -6px;
  align-items: center;
}
.caisses-filters-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

/* Icône de nature d'outil devant le nom (élec / méca / électro-portatif) */
.catalogue-nature-ic {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  margin-right: 2px;
}
.catalogue-nature-elec     { color: var(--accent-2, #b58200); }
.catalogue-nature-meca     { color: var(--text-3); }
.catalogue-nature-portatif { color: #2563eb; }

/* Badge "absent de : X" — trou de couverture entre types de caisses */
.catalogue-gap-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  margin-left: 18px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--orange, #e89a3c);
  background: color-mix(in srgb, var(--orange, #e89a3c) 12%, transparent);
  border-radius: 5px;
  width: fit-content;
}

/* Select rapide "+ Ajouter à…" dans le catalogue */
.catalogue-quick-add {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  max-width: 170px;
}
.catalogue-quick-add:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--text);
}
.catalogue-link .icon { flex-shrink: 0; }

/* Ligne d'un outil de RÉFÉRENCE (pas en caisse, juste dans le référentiel)
   – ton plus discret pour bien le distinguer de ce qui est en stock réel */
.catalogue-row-ref { background: color-mix(in srgb, var(--bg-3) 65%, transparent); }
.catalogue-row-ref strong { color: var(--text-2); }
.catalogue-badge-ref {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent-deep);
}
.catalogue-badge-ref-small {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-deep);
  margin-left: 6px;
}
/* Bloc "détail vide" affiché en dépliant une ligne référence pas en caisse */
.catalogue-detail-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-2);
  background: var(--bg);
  border-radius: 6px;
}
.catalogue-subhead {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin: 28px 0 10px;
}
.caisses-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.caisses-header h2 { margin: 0; }
.caisses-info {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 18px 0;
  line-height: 1.5;
  max-width: 740px;
}
.caisses-empty {
  padding: 30px 20px;
  background: var(--bg-3);
  border: 1px dashed var(--border-2);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}
/* ───── Grille de cards Caisses ───── */
.caisses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.caisse-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.caisse-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.12);
}
.caisse-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.caisse-card-num {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.caisse-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.caisse-card-cause {
  font-size: 11.5px;
  color: var(--orange, #e89a3c);
  background: color-mix(in srgb, var(--orange, #e89a3c) 10%, transparent);
  padding: 4px 8px;
  border-radius: 6px;
}
.caisse-card-apercu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
}
.caisse-card-outil {
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg-3);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.caisse-card-outil-more {
  color: var(--text-3);
  font-style: italic;
}
.caisse-card-alerte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--orange, #e89a3c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange, #e89a3c) 40%, transparent);
  border-radius: 8px;
  color: var(--orange, #e89a3c);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s ease;
  text-align: left;
}
.caisse-card-alerte:hover { filter: brightness(1.08); }
.caisse-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.caisse-card-counts {
  font-size: 11.5px;
  color: var(--text-3);
}
.caisse-card-actions {
  display: flex;
  gap: 4px;
}

/* Bouton étape workflow achats (Commandé / Reçu) */
.achat-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 6px;
  color: var(--accent-deep, #7a5900);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s ease;
  white-space: nowrap;
}
.achat-step-btn:hover { filter: brightness(1.05); }
.achat-step-btn-recu {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  color: var(--green);
}
.achats-total-row td {
  background: var(--bg-3);
  font-variant-numeric: tabular-nums;
}
.catalogue-buy-btn:hover { color: var(--accent-deep, #7a5900); border-color: var(--accent); }

.caisses-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--bg-2);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.caisses-table th, .caisses-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.caisses-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-3);
}
.caisses-table th.r, .caisses-table td.r { text-align: right; }
.caisse-row { cursor: pointer; transition: background 0.1s; }
.caisse-row:hover { background: var(--bg-3); }
.caisse-row:last-child td { border-bottom: none; }
.caisse-numero {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.caisse-tech-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-deep);
}
.caisse-tech-empty {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}
.caisse-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Statut de la caisse */
.caisse-statut-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.caisse-statut-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.caisse-statut-dispo {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.caisse-statut-dispo::before { background: var(--green); }
.caisse-statut-used {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
}
.caisse-statut-used::before { background: var(--blue); }
.caisse-statut-indispo {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
}
.caisse-statut-indispo::before { background: var(--red); }
.caisse-statut-cause {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  font-style: italic;
  max-width: 200px;
}

/* Filtres par type au-dessus de la table */
.caisses-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.caisse-modal-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) {
  .caisse-modal-grid { grid-template-columns: 1fr; }
}

/* Modal caisse : grille infos */
.caisse-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.caisse-modal-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.caisse-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.caisse-section-head h3 { margin: 0; }

/* Liste items */
.caisse-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.caisse-items-empty {
  padding: 18px;
  background: var(--bg-3);
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}
.caisse-item-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-3);
  border-radius: 8px;
}
.caisse-item-photo {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-4);
}
.caisse-item-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 18px;
  border: 1px dashed var(--border-2);
}
/* Bouton suppression en attente de confirmation (2e clic = suppression) */
.sim-row-action.confirm-delete {
  background: color-mix(in srgb, var(--red, #dc2626) 15%, transparent);
  border-color: var(--red, #dc2626);
  color: var(--red, #dc2626);
  font-weight: 700;
  gap: 4px;
}

/* Miniature cliquable : upload direct de la photo (comme le logo client) */
.caisse-item-photo-clickable {
  cursor: pointer;
  transition: box-shadow 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
}
.caisse-item-photo-clickable:hover {
  box-shadow: 0 0 0 2px var(--accent);
}
.caisse-item-photo-empty.caisse-item-photo-clickable:hover {
  border-color: var(--accent);
  color: var(--accent-2, #b58200);
}
.caisse-item-info { min-width: 0; }
.caisse-item-nom {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.caisse-item-meta {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.caisse-item-actions { display: flex; gap: 4px; }

/* Photo dans le modal item */
.caisse-item-photo-zone {
  display: flex;
  align-items: center;
  gap: 14px;
}
.caisse-item-photo-preview {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-3);
  font-size: 11px;
  font-style: italic;
  flex-shrink: 0;
}
.caisse-item-photo-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.caisse-item-photo-actions { display: flex; flex-direction: column; gap: 6px; }

/* Documents PDF */
.caisse-docs-drop {
  padding: 24px 16px;
  border: 2px dashed var(--border-2);
  border-radius: 10px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 8px;
}
.caisse-docs-drop:hover, .caisse-docs-drop-over {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.caisse-docs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.caisse-docs-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  padding: 4px;
}
.caisse-doc-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-3);
  border-radius: 8px;
}
.caisse-doc-icon {
  width: 44px;
  height: 44px;
  background: var(--red);
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.caisse-doc-info { min-width: 0; }
.caisse-doc-nom {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.caisse-doc-nom:hover { color: var(--accent-deep); text-decoration: underline; }
.caisse-doc-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

@media (max-width: 600px) {
  .caisse-modal-grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   TECHNICIENS — Vue RH consolidée
   ==================================================================== */
/* Le parent .kanban-container a overflow-y:hidden (pour le kanban) : on rend
   donc la page technicien scrollable en interne, comme .caisses-page. */
.techniciens-page {
  max-width: 1100px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
}
.techniciens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.tech-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.tech-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.tech-card-inactive {
  opacity: 0.6;
  background: var(--bg-3);
}
.tech-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tech-card-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--maintup);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.tech-card-name-block { flex: 1; min-width: 0; }
.tech-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tech-card-contrat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.tech-card-contrat-cdi {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.tech-card-contrat-cdd {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
}
.tech-card-contrat-ae {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-deep);
}
.tech-card-loc {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tech-card-loc svg { width: 11px; height: 11px; }
.tech-card-chez {
  font-size: 11px;
  color: var(--accent-deep);
  font-weight: 500;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tech-card-chez svg { width: 11px; height: 11px; }

/* Lien cliquable sur les noms de tech dans la section Revenue */
.rev-row-tech-link {
  color: var(--accent-deep);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.rev-row-tech-link:hover {
  color: var(--text);
  text-decoration-style: solid;
}

/* Mission cliquable sur la page détail tech */
.tech-detail-mission-link {
  cursor: pointer;
  transition: background 0.1s;
}
.tech-detail-mission-link:hover {
  background: var(--accent-bg);
}
.tech-detail-mission-link strong {
  color: var(--accent-deep);
}
.tech-detail-loc-row {
  display: flex;
  gap: 8px;
  position: relative; /* indispensable pour l'autocomplete-list en absolute */
}
.tech-detail-loc-row input { flex: 1; }

/* Marker tech sur la carte */
.map-stat-tech {
  background: color-mix(in srgb, var(--maintup) 18%, transparent);
  color: var(--accent-deep);
}
.map-popup-tag-tech {
  background: var(--maintup);
  color: var(--text);
}
.tech-card-toggle {
  font-size: 18px !important;
  line-height: 1;
  padding: 4px 8px !important;
  color: var(--text-3);
}
.tech-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tech-card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: var(--bg-3);
  border-radius: 6px;
}
.tech-card-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tech-card-stat-lbl {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Page détail tech */
.tech-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.tech-detail-actions { display: flex; gap: 8px; }
.tech-detail-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 18px;
}
.tech-detail-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--maintup);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}
.tech-detail-identity-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.tech-detail-statut {
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
}
.tech-detail-statut-off { color: var(--text-3); }

.tech-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.tech-detail-section {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.tech-detail-section h3 {
  margin: 0 0 12px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.tech-detail-rates {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tech-detail-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-3);
  border-radius: 6px;
  font-size: 12px;
  flex-wrap: wrap;
}
.tech-detail-rate-lbl { color: var(--text-2); flex: 1; min-width: 80px; }
.tech-detail-rate-brut { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tech-detail-rate-charged { color: var(--accent-deep); font-size: 11px; font-variant-numeric: tabular-nums; }
.tech-detail-charges {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-2);
}
.tech-detail-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  padding: 6px 4px;
}

/* Habilitations */
.tech-detail-hab-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-3);
  border-radius: 6px;
  margin-bottom: 5px;
}
.tech-detail-hab-name {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}
.tech-detail-hab-add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.tech-detail-hab-add input { flex: 1; }

/* CV */
.tech-detail-cv-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-3);
  border-radius: 8px;
}

/* Missions et caisses */
.tech-detail-mission, .tech-detail-caisse {
  padding: 8px 10px;
  background: var(--bg-3);
  border-radius: 6px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tech-detail-mission-meta {
  font-size: 11px;
  color: var(--text-3);
}

/* ====================================================================
   DESIGN PASS — Audit P0/P1 (2026-05-18)
   - Inputs simulateur visibles (les inputs in-card des fiches restent transparents)
   - Bouton primaire avec autorité visuelle
   - Hiérarchie titres section / labels champ
   - Normalisation border-radius (4 / 8 / 12 / 16)
   - Polish tabular-nums + hero glow
   ==================================================================== */

/* ── P0.1 : Inputs simulateur visibles ───────────────── */
#sim-view .field-input,
#sim-view .field-select,
#sim-view .field-textarea,
#sim-view input[type="number"],
#sim-view input[type="time"],
#sim-view input[type="text"] {
  background: var(--bg-3);
  border: 1px solid var(--border);
}
#sim-view .field-input:hover,
#sim-view .field-select:hover,
#sim-view .field-textarea:hover {
  background: var(--bg-2);
  border-color: var(--border-2);
}
#sim-view .field-input:focus,
#sim-view .field-select:focus,
#sim-view .field-textarea:focus {
  background: var(--bg-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Modals du simulateur (taux bruts, nouveau tech / poste) */
.modal-section .field-input,
.modal-section .field-select,
.modal-section .field-textarea {
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.modal-section .field-input:hover,
.modal-section .field-select:hover {
  background: var(--bg-2);
  border-color: var(--border-2);
}
.modal-section .field-input:focus,
.modal-section .field-select:focus,
.modal-section .field-textarea:focus {
  background: var(--bg-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* ── P0.2 : Bouton primaire avec autorité ────────────── */
.btn.primary {
  font-weight: 600;
  padding: 9px 18px;
  font-size: 13.5px;
  border-radius: 8px;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 3px rgba(245, 213, 71, 0.30),
              inset 0 1px 0 rgba(var(--w), calc(0.15 * var(--wa)));
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn.primary:hover {
  background: var(--accent-2);
  box-shadow: 0 2px 8px rgba(245, 213, 71, 0.40),
              inset 0 1px 0 rgba(var(--w), calc(0.18 * var(--wa)));
}
.btn.primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(245, 213, 71, 0.30);
}
.btn.primary:disabled,
.btn.primary[disabled] {
  background: var(--bg-4);
  color: var(--text-3);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Bouton secondaire (.btn sans .primary) — un peu plus de présence */
.btn:not(.primary) {
  font-weight: 500;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background .15s, border-color .15s;
}
.btn:not(.primary):hover {
  background: var(--bg-3);
  border-color: var(--border-2);
}

/* ── P0.3 : Hiérarchie titres section vs labels ──────── */
.sim-form-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sim-form-section { margin-bottom: 24px; }
.sim-form-section:last-child { margin-bottom: 0; }
.sim-field-label {
  color: var(--text-2);
  font-weight: 500;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

/* ── P1.4 : Normalisation border-radius ──────────────── */
/* Petits objets (badges, pastilles, micro-pills) → 4px */
.tag-pill, .badge, .badge-overdue, .badge-encours,
.sim-cat-dot, .sim-hor-tag::before,
.sim-filter-count, .sim-poste-badge,
.sim-detail-sup25, .sim-detail-sup50,
.field-tags .tag-pill {
  border-radius: 4px;
}

/* Inputs, boutons, cards internes → 8px */
.field-input, .field-textarea, .field-select,
.sim-form-card .sim-hor-cell input,
.sim-plan-row, .sim-hor-tag,
.sim-tech-rate-charges,
.sim-preview-marge-bar,
.sim-hg-input, .sim-hg-total,
.sim-plan-total, .sim-hor-detect-total {
  border-radius: 8px;
}

/* Cards principales, modals, blocs majeurs → 12px (déjà à 12px majoritairement) */
.sim-tech-card, .sim-form-card, .sim-preview-card,
.sim-preview-hero, .sim-detail-hoursbox, .sim-detail-majo,
.sim-detail-warn, .sim-hor-detect {
  border-radius: 12px;
}

/* ── P1.5 : Barre de marge plus visible ──────────────── */
.sim-preview-marge-bar {
  background: var(--bg-4);
  height: 10px;
  border-radius: 5px;
  overflow: visible;
}
.sim-preview-marge-fill {
  border-radius: 5px;
}

/* ── P1.6 : ancien override fond jaune supprimé (logo en blend mode) ──── */

/* ── P2.7 : Chiffres alignés (tabular-nums) ──────────── */
.sim-preview-main,
.sim-preview-hero-foot,
.sim-preview-marge-head,
.sim-detail-line span:last-child,
.sim-detail-subline span:last-child,
.sim-detail-cat-cost,
.sim-tech-rate-brut, .sim-tech-rate-charged,
.sim-tech-rate-charges-val,
.sim-hor-time, .sim-hg-input, .sim-plan-h,
.sim-hor-detect-total strong,
.stat-value,
.rev-row span[class*="-val"] {
  font-variant-numeric: tabular-nums;
}

/* ── P2.8 : Hero du tarif avec un léger glow ─────────── */
.sim-preview-hero {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 213, 71, 0.14), transparent 70%),
    linear-gradient(135deg, rgba(245, 213, 71, 0.06), rgba(245, 213, 71, 0.02));
  border: 1px solid rgba(245, 213, 71, 0.30);
  position: relative;
  overflow: hidden;
}

/* Hero en mode alerte : tech sans brut renseigné */
.sim-preview-hero.sim-preview-hero-warn {
  background: color-mix(in srgb, var(--orange, #f97316) 12%, transparent);
  border-color: color-mix(in srgb, var(--orange, #f97316) 50%, transparent);
  text-align: left;
  padding: 16px 18px;
}
.sim-preview-hero-warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange, #f97316);
  color: white;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.sim-preview-hero-warn-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.sim-preview-hero-warn-msg {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ── P2.9 : Focus visible accessible ─────────────────── */
button:focus-visible,
.btn:focus-visible,
.sim-tab:focus-visible,
.sim-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ====================================================================
   CALENDRIER — vue mois / semaine
   ==================================================================== */
.cal-page {
  padding: 20px 24px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--bg);
}
.cal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cal-toggle {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  padding: 2px;
}
.cal-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cal-toggle-btn:hover { background: var(--bg-4); color: var(--text); }
.cal-toggle-btn.active {
  background: var(--accent);
  color: var(--accent-text-on);
}
.cal-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-left: 6px;
}
.cal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.cal-week-num {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cal-nav {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.cal-nav-btn {
  background: var(--bg-2);
  border: 1px solid rgba(0, 0, 0, 0.07);
  color: var(--text-2);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cal-nav-btn:hover { background: var(--bg-4); border-color: var(--border-2); }
.cal-nav-btn[data-cal-nav="prev"] svg { transform: rotate(90deg); }
.cal-nav-btn[data-cal-nav="next"] svg { transform: rotate(-90deg); }
.cal-nav-today { font-weight: 700; }
.cal-add-btn { margin-left: 4px; }

/* ── Grille MOIS ───────────────────────────────────── */
.cal-grid-month {
  background: var(--bg-2);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  overflow: hidden;
  flex: 1;
  min-height: 540px;
  display: flex;
  flex-direction: column;
}
.cal-month-head-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.cal-month-head {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
}
.cal-month-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  min-height: 0;
}
.cal-month-body[data-cal-rows="5"] { grid-template-rows: repeat(5, minmax(96px, 1fr)); }
.cal-month-body[data-cal-rows="6"] { grid-template-rows: repeat(6, minmax(86px, 1fr)); }
.cal-cell {
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 6px 6px 4px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: var(--bg-2);
  transition: background 0.12s ease;
  overflow: hidden;
  min-height: 86px;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--bg-3); }
.cal-cell-other { background: var(--bg-4); color: var(--text-3); }
.cal-cell-other .cal-cell-num { color: var(--text-3); opacity: 0.6; }
.cal-cell-today {
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cal-cell-today:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.cal-cell-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 4px;
  padding: 0 2px;
}
.cal-cell-today .cal-cell-num { color: var(--accent-deep); }
.cal-cell-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cal-event {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.cal-event:hover { filter: brightness(0.94); transform: translateY(-1px); }
.cal-event .cal-event-time { font-weight: 700; opacity: 0.85; flex-shrink: 0; }
.cal-event .cal-event-title { overflow: hidden; text-overflow: ellipsis; }
.cal-event-more {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  padding: 1px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.cal-event-more:hover { background: var(--bg-4); color: var(--text-2); }

/* ── Grille SEMAINE ────────────────────────────────── */
.cal-grid-week {
  background: var(--bg-2);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cal-week-head-row,
.cal-week-allday-row {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  background: var(--bg-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.cal-week-hours-spacer {
  padding: 4px 6px;
  font-size: 9.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: right;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cal-week-day-head {
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.12s ease;
}
.cal-week-day-head:last-child { border-right: none; }
.cal-week-day-head:hover { background: var(--bg-4); }
.cal-week-day-head.cal-cell-today {
  background: var(--accent-bg);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.cal-week-day-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cal-week-day-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}
.cal-week-day-head.cal-cell-today .cal-week-day-num { color: var(--accent-deep); }
.cal-week-allday-row { min-height: 36px; }
.cal-week-allday-cell {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  background: var(--bg-2);
  min-height: 36px;
}
.cal-week-allday-cell:last-child { border-right: none; }
.cal-week-allday-cell:hover { background: var(--bg-3); }
.cal-week-body {
  display: grid;
  grid-template-columns: 60px 1fr;
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.cal-week-hours-col {
  background: var(--bg-3);
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}
.cal-week-hour-row {
  height: 56px; /* 2 × CAL_SLOT_PX */
  position: relative;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
}
.cal-week-hour-label {
  position: absolute;
  top: -7px;
  right: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-3);
  padding: 0 3px;
}
.cal-week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}
.cal-week-day-col {
  position: relative;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  background: var(--bg-2);
}
.cal-week-day-col:last-child { border-right: none; }
.cal-week-day-col-today {
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
}
.cal-week-slot {
  height: 28px; /* CAL_SLOT_PX */
  border-bottom: 1px dashed rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: background 0.1s ease;
}
.cal-week-slot:nth-child(2n) { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.cal-week-slot:hover { background: rgba(245, 213, 71, 0.12); }
.cal-week-event {
  position: absolute;
  left: 3px;
  right: 3px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-left: 3px solid currentColor;
  z-index: 2;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.cal-week-event:hover { filter: brightness(0.94); transform: translateX(1px); }
.cal-week-event-time {
  font-size: 9.5px;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 1px;
}
.cal-week-event-title {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Légende ──────────────────────────────────────── */
.cal-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 12px;
}
.cal-legend-sep { opacity: 0.5; }

/* ── Badge de synchro Google Agenda ───────────────── */
.cal-gsync {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 7px 11px;
  font-size: 11.5px;
  color: var(--c-blue-txt);
  background: rgba(66, 133, 244, 0.09);
  border: 1px solid rgba(66, 133, 244, 0.22);
  border-radius: 8px;
}
.cal-gsync .btn-icon { color: #4285F4; flex-shrink: 0; }

/* ── Modale détail RDV Google (lecture seule) ─────── */
.gcal-detail { display: flex; flex-direction: column; gap: 9px; }
.gcal-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--text);
}
.gcal-row .btn-icon { color: var(--text-3); flex-shrink: 0; }
.gcal-row span:first-of-type { text-transform: capitalize; }
.gcal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.gcal-links .btn { text-decoration: none; }
.gcal-note {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--text-3);
  font-style: italic;
}

/* ── Modale RDV : palette couleurs ────────────────── */
.cal-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.cal-color-opt {
  cursor: pointer;
  display: inline-flex;
}
.cal-color-opt input { display: none; }
.cal-color-swatch {
  display: inline-block;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.cal-color-opt input:checked + .cal-color-swatch {
  border-color: var(--text);
  transform: scale(1.1);
}

/* ── Modale RDV : sélecteur de type d'événement ───── */
.cal-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.cal-type-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cal-type-opt input { display: none; }
.cal-type-opt:hover { background: var(--bg-3); }
.cal-type-opt.is-selected {
  font-weight: 600;
  color: var(--text);
  border-color: currentColor;
}
/* Couleurs par type (synchro avec defaultColor) — appliquée à .is-selected */
.cal-type-rdv.is-selected          { background: color-mix(in srgb, #3b82f6 18%, var(--bg)); color: var(--c-blue-txt); }
.cal-type-visio.is-selected        { background: color-mix(in srgb, #7c3aed 18%, var(--bg)); color: var(--c-purple-txt); }
.cal-type-appel.is-selected        { background: color-mix(in srgb, #06b6d4 18%, var(--bg)); color: var(--c-cyan-txt); }
.cal-type-intervention.is-selected { background: color-mix(in srgb, #f97316 18%, var(--bg)); color: var(--c-orange-txt); }
.cal-type-tache.is-selected        { background: color-mix(in srgb, #a3a3a3 22%, var(--bg)); color: #525252; }
.cal-type-pause.is-selected        { background: color-mix(in srgb, #eab308 20%, var(--bg)); color: var(--c-yellow-txt); }
.cal-type-autre.is-selected        { background: color-mix(in srgb, #22c55e 18%, var(--bg)); color: var(--c-green-txt); }
.cal-type-opt .icon { flex-shrink: 0; }

/* ── Modale "liste du jour" ───────────────────────── */
.cal-day-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-day-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.cal-day-list-item:hover { filter: brightness(0.94); }
.cal-day-list-item .cal-event-time { font-weight: 700; min-width: 42px; }


/* ====================================================================
   ===  MOBILE — iPhone et tablettes étroites (≤ 1024 / 768 / 480 px)  ===
   ====================================================================
   Stratégie générale :
   - ≤ 1024 px (tablet) : ajustements légers (header compact, columns).
   - ≤ 768 px (mobile)  : sidebar transformée en drawer overlay déclenché
     par le bouton hamburger de la topbar. Kanban en colonnes empilées
     pleine largeur. Tableaux dans des wrappers scroll-x. Modales et
     panel en quasi-plein écran. Inputs forcés à 16 px (anti-zoom iOS).
   - ≤ 480 px : ajustements fins (padding réduit, header en deux lignes,
     calendrier mois en mode compact).
   Important : ne touche AUCUNE règle desktop existante au-dessus.
   ==================================================================== */

/* ====================== TABLETTE (≤ 1024 px) ======================= */
@media (max-width: 1024px) {
  /* Header : sous-titre déjà caché plus haut à 1400 px. Boutons compacts. */
  .header { gap: 10px; padding: 14px 18px; }
  .kanban-container { padding: 14px 18px 18px; }
  .filters { padding: 10px 18px; }
  .column { width: 280px; }
}

/* ===================== MOBILE (≤ 768 px) =========================== */
@media (max-width: 768px) {
  /* Empêche le scroll horizontal global */
  body { overflow-x: hidden; }

  /* Topbar plus compacte */
  .topbar { padding: 0 14px; height: 56px; }
  .topbar-logo .logo-icon,
  .topbar-logo .logo-icon img { height: 42px; }
  .topbar-menu-btn { display: inline-flex; }
  .app { height: calc(100vh - 56px); }

  /* SIDEBAR DRAWER : passe en overlay slide-in depuis la gauche */
  .sidebar {
    position: fixed;
    top: 56px;          /* sous la topbar */
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 84vw;
    padding: 14px 10px 24px;
    background: var(--bg-2);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
    z-index: 95;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sidebar.open { transform: translateX(0); }
  /* Restaurer l'affichage des labels (au cas où une règle plus haut
     les aurait cachés — l'ancienne règle mobile a été supprimée).
     En drawer pleine largeur, on veut TOUT voir. */
  .sidebar .nav-item span { display: inline; }
  .sidebar .nav-label { display: block; }
  .sidebar .sidebar-footer { display: block; }
  .sidebar .nav-item {
    justify-content: flex-start;
    padding: 10px 12px;
    font-size: 14.5px;
    min-height: 44px;  /* touch target Apple HIG */
  }
  .sidebar .nav-label {
    font-size: 11px;
    padding: 8px 12px 4px;
  }

  /* MAIN : prend toute la largeur (sidebar en overlay) */
  .main {
    width: 100%;
    min-width: 0;
  }
  .app { overflow-x: hidden; }

  /* HEADER de vue : titre + boutons sur deux lignes potentielles */
  .header {
    padding: 12px 14px;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .header h1 { font-size: 17px; }
  /* Search prend toute la largeur, après h1 */
  .header .search-box {
    flex: 1 1 100%;
    order: 5;
    margin-left: 0;
    min-width: 0;
  }
  .header .view-toggle { order: 6; }
  .header #manage-fields-btn { order: 7; }
  .header #add-btn { order: 8; margin-left: auto; }
  /* Cacher labels des boutons sur mobile pour gagner de la place,
     ne garder que les icônes (touch target garanti par padding). */
  .header #manage-fields-btn span,
  .header #add-btn span { display: none; }
  .header .btn,
  .header .view-toggle button {
    min-height: 38px;
    padding: 8px 12px;
  }

  /* Filters wrap propre, dropdowns plus compacts */
  .filters {
    padding: 10px 14px;
    gap: 6px;
  }
  .filter-btn,
  .quick-filter {
    font-size: 12px;
    padding: 7px 11px;
    min-height: 36px;
  }
  .filter-menu {
    /* En mobile, dropdowns s'élargissent et s'affichent en pleine largeur */
    min-width: 220px;
    max-width: calc(100vw - 28px);
  }

  /* KANBAN : empilé verticalement, chaque colonne pleine largeur */
  .kanban-container {
    padding: 12px 14px 24px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .kanban {
    flex-direction: column;
    gap: 14px;
    height: auto;
    min-width: 0;
    min-height: 100%;
  }
  .column {
    width: 100%;
    max-height: none;
    flex-shrink: 1;
  }
  .column-body {
    max-height: 60vh;       /* évite qu'une colonne trop chargée vole l'écran */
    overflow-y: auto;
  }
  .column-header { padding: 12px 14px; min-height: 48px; }
  .card { padding: 12px 14px; }
  .card-title { font-size: 14px; }

  /* VUE LISTE : table scroll-x indiquée, padding réduit */
  .list-view { padding: 12px 14px 20px; }
  .list-table { font-size: 12.5px; }
  .list-table thead th,
  .list-table tbody td { padding: 9px 10px; }
  /* Wrapper pour tableaux qui débordent : peut être ajouté autour des
     tables au besoin (déjà utilisé pour .sim-missions-table-wrap). */
  .table-wrap,
  .sim-missions-table-wrap,
  .list-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* CAISSES / VOITURES tables : wrapper de scroll-x, ombres de bord */
  .caisses-table,
  .voitures-table { font-size: 12.5px; }
  .caisses-table th,
  .caisses-table td { padding: 9px 10px; }

  /* PANEL DÉTAIL : quasi plein écran */
  .panel {
    width: 100%;
    max-width: 100%;
    border-left: none;
  }
  .panel-header { padding: 12px 14px; gap: 8px; }
  .panel-header input.title-input { font-size: 16px; }
  .panel-body { padding: 14px; }
  .panel-actions {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    bottom: 0;
  }
  .panel-actions .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  .panel-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }

  /* MODALES : quasi plein écran, sticky header/footer pour confort */
  .modal-overlay { padding: 0; }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    padding: 18px 16px 24px;
    border: none;
  }
  .modal.large { max-width: 100%; }
  .modal-actions {
    position: sticky;
    bottom: -24px;            /* compense le padding-bottom */
    background: var(--bg-2);
    padding: 12px 0 0;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 24px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .modal-actions .btn {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
  }
  .modal-title { font-size: 16px; }
  /* Bouton X de fermeture visible en mobile sur toutes les modales
     standardisées via openModal(). Touch target 36×36. */
  .modal-close-btn { display: inline-flex; }

  /* INPUTS : font-size 16 px minimum pour empêcher le zoom auto iOS Safari
     quand on focus un champ. Application large mais ciblée pour ne pas
     modifier les badges/pills. */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select,
  .field-input,
  .field-textarea,
  .field-select,
  .title-input,
  .search-box input {
    font-size: 16px !important;
  }
  /* Mais on garde des selects compacts en taille de boîte */
  .field-select { padding: 8px 28px 8px 10px; }

  /* TOUCH TARGETS : tout bouton interactif au moins 38-44 px de hauteur */
  .btn,
  .btn.primary,
  .nav-item,
  .quick-filter,
  .filter-btn,
  .cal-toggle-btn,
  .cal-nav-btn,
  .view-toggle button {
    min-height: 38px;
  }
  /* Zone tactile élargie sur les petites X/edit/delete */
  .sim-row-action,
  .prop-delete,
  .contact-ref-btn,
  .reminder-notif-row .reminder-remove,
  .field-tags .tag-pill {
    min-height: 36px;
    min-width: 36px;
    padding: 6px 10px;
  }

  /* FIELD-LABEL : moins large pour laisser de la place au contenu */
  .field-label { width: 90px; font-size: 12px; }
  .field-row { gap: 8px; }

  /* SIMULATEUR : déjà responsive via media queries dédiées. On compacte
     juste le padding. */
  .sim-content { padding: 16px 14px; }

  /* CALENDRIER : passe en mode compact */
  .cal-page { padding: 14px 14px 24px; }
  .cal-header { gap: 8px; row-gap: 8px; margin-bottom: 12px; }
  .cal-title-wrap { width: 100%; margin-left: 0; order: 1; }
  .cal-title { font-size: 16px; }
  .cal-toggle { order: 2; }
  .cal-nav { order: 3; margin-left: auto; gap: 2px; }
  .cal-nav-btn { padding: 8px 10px; font-size: 12px; min-width: 38px; }
  .cal-add-btn { order: 4; }
  /* MOIS : on garde 7 colonnes mais cases plus serrées + on cache les
     events textuels pour ne montrer que des pastilles ; tap sur la case
     ouvre la liste du jour. */
  .cal-month-head { padding: 6px 4px; font-size: 9.5px; }
  .cal-month-body[data-cal-rows="5"] { grid-template-rows: repeat(5, minmax(64px, 1fr)); }
  .cal-month-body[data-cal-rows="6"] { grid-template-rows: repeat(6, minmax(56px, 1fr)); }
  .cal-cell {
    padding: 4px 3px 3px;
    min-height: 56px;
  }
  .cal-cell-num { font-size: 12px; margin-bottom: 2px; padding: 0; }
  /* Les events deviennent des pastilles couleur (sans texte) en mois */
  .cal-cell-events { flex-direction: row; flex-wrap: wrap; gap: 2px; align-items: flex-start; }
  .cal-event {
    /* en mois mobile : on collapse en pastille (point coloré) */
    padding: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    flex-shrink: 0;
  }
  .cal-event .cal-event-time,
  .cal-event .cal-event-title,
  .cal-event .icon { display: none; }
  .cal-event-more {
    font-size: 9px;
    padding: 0 4px;
    width: auto;
    height: auto;
    border-radius: 4px;
  }
  /* SEMAINE : très étroit, on rend la grille scrollable horizontalement
     pour conserver les 7 colonnes lisibles. */
  .cal-grid-week { overflow: auto; }
  .cal-week-head-row,
  .cal-week-allday-row { min-width: 700px; }
  .cal-week-body { min-width: 700px; }
  .cal-week-day-num { font-size: 14px; }
  .cal-week-day-name { font-size: 9.5px; }

  /* CMDK : prend tout l'écran mobile */
  .cmdk { width: calc(100vw - 24px); max-width: none; }

  /* TOAST : pleine largeur en bas */
  .toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    width: auto;
  }

  /* CARTE LEAFLET : padding plus serré */
  .leaflet-popup-content { font-size: 13px; }
}

/* ============== SMALL MOBILE (≤ 480 px) ============== */
@media (max-width: 480px) {
  .topbar { padding: 0 10px; }
  .topbar-logo .logo-icon,
  .topbar-logo .logo-icon img { height: 36px; }
  .header { padding: 10px 12px; }
  .header h1 { font-size: 16px; }
  .kanban-container { padding: 10px 12px 20px; }
  .filters { padding: 8px 12px; }
  /* Les boutons header restent compacts (icône seule) */
  .header .btn { padding: 8px 10px; }
  .view-toggle button { padding: 7px 10px; }
  .view-toggle button span { display: none; } /* icône seule */

  /* Calendrier : encore plus compact */
  .cal-month-head { font-size: 9px; padding: 5px 2px; }
  .cal-month-body[data-cal-rows="5"] { grid-template-rows: repeat(5, minmax(56px, 1fr)); }
  .cal-month-body[data-cal-rows="6"] { grid-template-rows: repeat(6, minmax(50px, 1fr)); }
  .cal-cell { min-height: 50px; padding: 3px 2px 2px; }
  .cal-cell-num { font-size: 11px; }
}

/* ============== HOVER NEUTRALISÉ SUR ÉCRANS TACTILES ============== */
@media (hover: none) {
  /* Les :hover background changent provoquent des "stuck states" en
     touch ; on neutralise les changements visuels gourmands sur mobile. */
  .card:hover { transform: none; }
  .cal-event:hover { transform: none; filter: none; }
  .nav-item:hover { background: transparent; }
}

/* ══════════════════════════════════════════════════════════
   OUTILLAGE v2 — Caisses / Standards / Commandes (design refait)
   Ces règles viennent après les anciennes : elles priment.
   ══════════════════════════════════════════════════════════ */

/* Onglet count alerte (commandes en attente) */
.caisses-tab-count-alert {
  background: color-mix(in srgb, var(--orange, #e89a3c) 22%, transparent) !important;
  color: var(--c-orange-txt) !important;
}

/* ─── Cards caisses ─── */
.caisses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.caisse-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.caisse-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 4px 18px -8px rgba(0,0,0,.22);
}
.caisse-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.caisse-card-num { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.caisse-card-type { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.caisse-card-nats { display: inline-flex; gap: 4px; }
.caisse-card-nat { display: inline-flex; align-items: center; }
.caisse-nat-elec     { color: var(--accent-2, #b58200); }
.caisse-nat-meca     { color: var(--text-3); }
.caisse-nat-portatif { color: #2563eb; }
.caisse-card-tech { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.caisse-card-tech .btn-icon { color: var(--text-3); }

.caisse-card-progress { display: flex; flex-direction: column; gap: 5px; }
.caisse-card-progress-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; color: var(--text-2); }
.caisse-card-progress-head strong { color: var(--text); font-size: 14px; }
.caisse-card-pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.caisse-card-bar { height: 8px; background: var(--bg-3); border-radius: 6px; overflow: hidden; }
.caisse-card-bar-fill { height: 100%; border-radius: 6px; transition: width .3s ease; }
.caisse-bar-ok    { background: var(--green, #22a06b); }
.caisse-bar-warn  { background: var(--orange, #e89a3c); }
.caisse-bar-low   { background: var(--red, #dc2626); }
.caisse-bar-empty { background: var(--border-2); }

.caisse-card-cmd {
  align-self: flex-start;
  font-size: 11.5px; font-weight: 600;
  color: var(--orange, #e89a3c);
  background: color-mix(in srgb, var(--orange, #e89a3c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange, #e89a3c) 35%, transparent);
  padding: 2px 9px; border-radius: 999px;
}
.caisse-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border);
}
.caisse-card-lastcheck { font-size: 11px; color: var(--text-3); }
.caisse-card-checkup { padding: 6px 12px; font-size: 12.5px; }

/* ─── Modale Check-up ─── */
.checkup { display: flex; flex-direction: column; gap: 14px; }
.checkup-settings { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-3); }
.checkup-settings > summary {
  list-style: none; cursor: pointer; padding: 12px 14px;
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--text);
}
.checkup-settings > summary::-webkit-details-marker { display: none; }
.checkup-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 0 14px 14px; }
.checkup-settings-grid label, .ck-cause-wrap { display: flex; flex-direction: column; gap: 5px; }
.ck-cause-wrap { padding: 0 14px 14px; }

.checkup-progress { display: flex; flex-direction: column; gap: 6px; }
.checkup-actions { display: flex; gap: 8px; }
.checkup-actions .btn { flex: 1; justify-content: center; font-size: 12.5px; }

.checkup-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.ck-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--bg-2);
  transition: border-color .12s ease, background .12s ease;
}
.ck-item.is-present  { border-color: color-mix(in srgb, var(--green, #22a06b) 55%, transparent); background: color-mix(in srgb, var(--green, #22a06b) 8%, var(--bg-2)); }
.ck-item.is-manquant { border-color: color-mix(in srgb, var(--red, #dc2626) 40%, transparent); background: color-mix(in srgb, var(--red, #dc2626) 6%, var(--bg-2)); }
.ck-item-photo { width: 48px; height: 48px; border-radius: 8px; object-fit: contain; background: #fff; flex-shrink: 0; border: 1px solid var(--border); }
.ck-item-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--text-3); background: var(--bg-3); }
.ck-item-main { flex: 1; min-width: 0; }
.ck-item-nom { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 5px; }
.ck-item-ref { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.ck-item-state { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ck-state-badge { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.ck-item.is-present  .ck-state-badge { color: var(--green, #22a06b); background: color-mix(in srgb, var(--green, #22a06b) 15%, transparent); }
.ck-item.is-manquant .ck-state-badge { color: var(--red, #dc2626); background: color-mix(in srgb, var(--red, #dc2626) 13%, transparent); }
.ck-item-cmd {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--orange, #e89a3c) 40%, transparent);
  background: color-mix(in srgb, var(--orange, #e89a3c) 10%, transparent);
  color: var(--c-orange-txt);
}
.ck-item-cmd:hover { filter: brightness(1.06); }

/* ─── Onglet Standards : sélecteur de type + grille de cards ─── */
.std-segments {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.std-seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.std-seg:hover { color: var(--text); }
.std-seg.active {
  background: var(--bg-2);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.std-seg-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-4, rgba(120,120,120,.14));
  color: var(--text-3);
}
.std-seg.active .std-seg-count { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-deep, #7a5900); }

.std-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.std-toolbar-info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
}
.std-toolbar-info strong { color: var(--text); }
.std-toolbar-info .btn-icon { color: var(--text-3); }

.std-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.stdc {
  position: relative;
  display: flex;
  gap: 13px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.stdc:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 3px 14px -8px rgba(0,0,0,.2); }
.stdc-media { position: relative; flex-shrink: 0; }
.stdc-photo {
  width: 62px; height: 62px; border-radius: 10px;
  object-fit: contain; background: #fff; border: 1px solid var(--border);
}
.stdc-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--text-3); background: var(--bg-3); }
.stdc-nat {
  position: absolute; bottom: -5px; right: -5px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.stdc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 44px; }
.stdc-nom { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.25; }
.stdc-ref { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.stdc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.stdc-lien { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--accent-2, #b58200); text-decoration: none; }
.stdc-lien:hover { text-decoration: underline; }
.stdc-types { font-size: 11px; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
.stdc-typechip {
  font-size: 10.5px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  background: var(--bg-3); color: var(--text-2);
  border: 1px solid var(--border);
}
.stdc-actions {
  position: absolute; top: 10px; right: 10px;
  display: flex; gap: 3px;
  opacity: 0; transition: opacity .12s ease;
}
.stdc:hover .stdc-actions,
.stdc:focus-within .stdc-actions { opacity: 1; }
@media (hover: none) { .stdc-actions { opacity: 1; } }

.std-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 16px; text-align: center; font-size: 13px; color: var(--text-3);
  background: var(--bg-2); border: 1px dashed var(--border-2); border-radius: 14px;
}
.std-empty .btn-icon { color: var(--text-3); }
.std-types-row { margin-top: 12px; }
.std-types { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.std-type-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.std-type-check input { accent-color: var(--accent); }
.std-photo-zone { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.std-photo-preview { width: 72px; height: 72px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-3); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: 11px; color: var(--text-3); }
.std-photo-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.std-photo-actions { display: flex; gap: 8px; }

/* ─── Onglet Commandes : bandeau suggestions ─── */
.cmd-suggest { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 12px; border-radius: 12px; background: color-mix(in srgb, var(--orange, #e89a3c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--orange, #e89a3c) 35%, transparent); }
.cmd-suggest-txt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.cmd-suggest-txt .btn-icon { color: var(--orange, #e89a3c); }
.cmd-suggest-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cmd-suggest-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); }
.cmd-suggest-nom { font-weight: 600; font-size: 13px; color: var(--text); }
.cmd-suggest-caisses { font-size: 12px; color: var(--text-3); flex: 1; }

/* Bandeau d'erreur runtime (bootReportError) — visible sans console */
#crm-error-banner {
  position: fixed;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 720px);
  padding: 10px 14px;
  background: color-mix(in srgb, var(--red) 12%, var(--bg-2));
  border: 1.5px solid #dc2626;
  border-radius: 10px;
  color: #7f1d1d;
  font-size: 12.5px;
  box-shadow: 0 6px 24px -8px rgba(0,0,0,.3);
}
#crm-error-banner strong { color: var(--c-red-txt); white-space: nowrap; }
#crm-error-banner-msg {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  word-break: break-word;
}
#crm-error-banner-close {
  margin-left: auto;
  border: none; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; color: #7f1d1d;
  padding: 2px 6px;
}

/* ══════════ PIPELINE PROSPECT (ligne d'avancement) ══════════ */
/* Carte kanban : 5 chevrons cliquables, jaunes quand validés */
.card-pipeline { margin: 2px 0 4px; }
.card-pipeline-segs {
  display: flex;
  gap: 3px;
}
/* Chaque étape porte son icône (téléphone, envoi, signature…) plutôt qu'une
   coche identique partout : d'un coup d'œil on sait CE QUI a été fait. */
.pipe-seg {
  flex: 1;
  height: 19px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-3);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 5px 50%);
  transition: background .15s ease, transform .08s ease, color .15s ease;
}
.pipe-seg svg { width: 11px; height: 11px; opacity: .75; }
.pipe-seg:first-child { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); border-radius: 3px 0 0 3px; }
.pipe-seg:hover { background: color-mix(in srgb, var(--yellow, #f5d547) 45%, var(--bg-3)); transform: scaleY(1.12); }
.pipe-seg.done {
  background: var(--yellow, #f5d547);
  border-color: color-mix(in srgb, var(--yellow, #f5d547) 70%, #b58200);
  color: #4a3b00;
}
.pipe-seg.done svg { opacity: 1; }
/* L'étape suivante à franchir : discrètement appelée */
.pipe-seg.next {
  border-color: color-mix(in srgb, var(--yellow, #f5d547) 55%, var(--border));
  border-style: dashed;
}
.card-pipeline-label {
  margin-top: 3px;
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 500;
}
.card-pipeline-label .pipe-lbl-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-pipeline-label.all-done { color: var(--green, #22a06b); font-weight: 700; }
/* Âge dans l'étape : c'est lui qui dit quoi relancer sans réfléchir */
.pipe-age {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px; border-radius: 5px;
  background: var(--bg-3); color: var(--text-3);
  font-size: 9.5px; font-weight: 600;
}
.pipe-age.bloque {
  background: color-mix(in srgb, var(--orange, #e8833a) 18%, transparent);
  color: var(--orange, #c96a1f);
}
.pipe-age.bloque svg { width: 10px; height: 10px; }

/* Montant chiffré + dernière note, lisibles sans ouvrir la fiche */
.card-chiffre {
  display: flex; align-items: center; gap: 5px;
  margin-top: 5px;
  font-size: 11.5px; color: var(--text-2);
}
.card-chiffre strong { color: var(--text); font-weight: 700; }
.card-chiffre-icon { color: var(--green, #22a06b); flex-shrink: 0; }
.card-note {
  display: flex; align-items: flex-start; gap: 5px;
  margin-top: 4px;
  padding: 4px 6px;
  background: var(--bg-3);
  border-radius: 6px;
  font-size: 10.5px; line-height: 1.35; color: var(--text-2);
}
.card-note span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-note-icon { color: var(--text-3); flex-shrink: 0; margin-top: 1px; }

/* Stand-by : la carte s'efface sans disparaître */
.card.card-standby { opacity: .62; }
.card.card-standby:hover { opacity: 1; }
.card-sb {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px; padding: 3px 7px;
  border-radius: 6px;
  background: var(--bg-3); color: var(--text-3);
  font-size: 10.5px; font-weight: 600;
}
.card-sb.due {
  background: color-mix(in srgb, var(--orange, #e8833a) 20%, transparent);
  color: var(--orange, #c96a1f);
}
.card-sb-icon { flex-shrink: 0; }

/* Fiche (panel) : stepper détaillé avec libellés */
.panel-pipeline {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.panel-pipeline-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 10px;
}
.panel-pipeline-title strong { margin-left: auto; color: var(--text); font-size: 13px; text-transform: none; }
.panel-pipeline-steps { display: flex; flex-direction: column; gap: 4px; }
.panel-pipe-step {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-3);
  cursor: pointer;
  text-align: left;
  font-size: 12.5px;
  color: var(--text-2);
  transition: background .12s ease, border-color .12s ease;
}
.panel-pipe-step:hover { border-color: color-mix(in srgb, var(--yellow, #f5d547) 60%, var(--border)); }
.panel-pipe-step.done {
  background: color-mix(in srgb, var(--yellow, #f5d547) 16%, var(--bg-2));
  border-color: color-mix(in srgb, var(--yellow, #f5d547) 55%, var(--border));
  color: var(--text);
}
.panel-pipe-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 10.5px; font-weight: 700;
  background: var(--bg-2); color: var(--text-3);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-pipe-step.done .panel-pipe-dot {
  background: var(--yellow, #f5d547);
  color: #4a3b00;
  border-color: transparent;
}
.panel-pipe-dot svg { width: 13px; height: 13px; }
.panel-pipe-step:not(.done) .panel-pipe-dot svg { opacity: .55; }
/* Prochaine étape à franchir : contour appelant, sans crier */
.panel-pipe-step.next {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--yellow, #f5d547) 65%, var(--border));
}
.panel-pipe-step.next .panel-pipe-dot svg { opacity: .9; }
.panel-pipe-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.panel-pipe-lbl { line-height: 1.25; font-weight: 600; }
.panel-pipe-step:not(.done) .panel-pipe-lbl { font-weight: 500; }
/* Aide sous l'étape non franchie : dit ce qu'elle veut dire */
.panel-pipe-hint {
  font-size: 10.5px; line-height: 1.3; color: var(--text-3);
}
/* Note prise au moment de valider : le vrai contenu du parcours */
.panel-pipe-note {
  font-size: 11px; line-height: 1.35; color: var(--text-2);
  padding: 3px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--yellow, #f5d547) 12%, var(--bg-2));
  border-left: 2px solid color-mix(in srgb, var(--yellow, #f5d547) 60%, transparent);
}
.panel-pipe-age {
  margin-left: 8px; text-transform: none; letter-spacing: 0;
  font-size: 10.5px; font-weight: 600; color: var(--text-3);
  padding: 1px 6px; border-radius: 5px; background: var(--bg-3);
}
.panel-pipe-age.bloque {
  display: inline-flex; align-items: center; gap: 3px;
  background: color-mix(in srgb, var(--orange, #e8833a) 18%, transparent);
  color: var(--orange, #c96a1f);
}
.panel-pipeline-title strong + .panel-pipe-age { margin-left: 8px; }

/* ══════════ CHIFFRAGE PROSPECT ══════════ */
/* nb techniciens × tarif €/jour × 21 jours ouvrés = CA mensuel */
.chf-section .panel-section-head { display: flex; align-items: center; gap: 7px; }
.chf-total-head {
  margin-left: auto;
  font-size: 12.5px; font-weight: 700; color: var(--green, #22a06b);
}
.chf-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.chf-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 9px;
}
.chf-in {
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-2); color: var(--text);
  padding: 5px 7px; font-size: 12.5px; font-family: inherit;
  min-width: 0;
}
.chf-in:focus { outline: none; border-color: var(--yellow, #f5d547); }
.chf-nb { width: 46px; text-align: center; font-weight: 700; }
.chf-tarif { width: 66px; text-align: right; font-weight: 600; }
.chf-lbl { flex: 1; min-width: 60px; }
.chf-x, .chf-u { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.chf-sub {
  font-size: 11.5px; font-weight: 700; color: var(--text-2);
  white-space: nowrap; flex-shrink: 0;
}
.chf-empty {
  font-size: 11.5px; line-height: 1.45; color: var(--text-3);
  margin: 0 0 10px;
}
.chf-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chf-totaux { text-align: right; margin-left: auto; }
.chf-tot-main { display: flex; align-items: baseline; gap: 4px; justify-content: flex-end; }
.chf-tot-main span { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.chf-tot-main small { font-size: 11px; color: var(--text-3); font-weight: 600; }
.chf-tot-sub { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.chf-tot-sub strong { color: var(--green, #22a06b); }

/* ══════════ PARCOURS (historique des étapes) ══════════ */
.pc-section { margin-top: 14px; }
.pc-head { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; }
.pc-head::-webkit-details-marker { display: none; }
.pc-count {
  margin-left: auto;
  min-width: 20px; text-align: center;
  padding: 1px 6px; border-radius: 20px;
  background: var(--bg-3); color: var(--text-3);
  font-size: 11px; font-weight: 700;
}
.pc-body { padding-top: 10px; }
.pc-list { display: flex; flex-direction: column; gap: 2px; }
.pc-item {
  display: flex; gap: 9px;
  padding: 7px 2px 7px 0;
  border-left: 2px solid var(--border);
  margin-left: 9px; padding-left: 12px;
  position: relative;
}
.pc-item.recul { opacity: .7; }
.pc-dot {
  position: absolute; left: -10px; top: 7px;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow, #f5d547); color: #4a3b00;
  border: 2px solid var(--bg-2);
}
.pc-item.recul .pc-dot { background: var(--bg-3); color: var(--text-3); }
/* Badge « plusieurs contacts » sur les boutons appeler / écrire */
.card-comm-btn { position: relative; }
.cc-n {
  position: absolute; top: -3px; right: -3px;
  min-width: 13px; height: 13px; padding: 0 3px;
  border-radius: 7px;
  background: var(--text-2); color: var(--bg);
  font-size: 8.5px; font-weight: 800; line-height: 13px;
  text-align: center;
}

/* Choix du contact à joindre */
.ct-choices { display: flex; flex-direction: column; gap: 7px; }
.ct-choice {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--bg-3); color: var(--text);
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color .12s ease, background .12s ease;
}
.ct-choice:hover {
  background: var(--bg-2);
  border-color: color-mix(in srgb, var(--yellow, #f5d547) 60%, var(--border));
}
.ct-choice-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--bg-2); color: var(--text-3); flex-shrink: 0;
}
.ct-choice-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ct-choice-nom { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ct-choice-ref {
  padding: 1px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--yellow, #f5d547) 28%, transparent);
  color: var(--text-2);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.ct-choice-role { font-size: 11px; color: var(--text-3); }
.ct-choice-val { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Note : le dossier a bougé sans changer d'étape */
.pc-item.note .pc-dot { background: var(--bg-3); color: var(--text-2); }
.pc-note-btn { margin-bottom: 10px; }
.pc-tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 5px;
  background: var(--bg-3); color: var(--text-3);
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  vertical-align: middle;
}
.pc-main { min-width: 0; }
.pc-lbl { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.pc-com {
  font-size: 12px; line-height: 1.45; color: var(--text-2);
  margin-top: 3px;
  padding: 5px 8px; border-radius: 7px;
  background: var(--bg-3);
}
.pc-meta { font-size: 10.5px; color: var(--text-3); margin-top: 3px; }

/* Stand-by dans la fiche */
.pc-standby {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; margin-bottom: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue, #4a8fe0) 10%, var(--bg-3));
  border: 1px solid color-mix(in srgb, var(--blue, #4a8fe0) 25%, var(--border));
}
.pc-sb-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pc-sb-main strong { font-size: 12.5px; color: var(--text); }
.pc-sb-main span { font-size: 11px; color: var(--text-2); }
.pc-sb-btn { margin-bottom: 10px; }

/* Dashboard : carte « À relancer » */
.d3-card-relances .d3-logo-alert {
  background: color-mix(in srgb, var(--orange, #e8833a) 18%, transparent);
  color: var(--orange, #c96a1f);
}
.d3-relance-item { width: 100%; text-align: left; background: none; border: 0; font-family: inherit; cursor: pointer; }
.d3-more { font-size: 11px; color: var(--text-3); padding: 6px 4px 0; }

/* ══════════ KANBAN — passe design (07/07/2026) ══════════ */
/* Colonnes : liseré coloré en tête (couleur du statut), compteur teinté */
.column {
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.column-header {
  position: relative;
  padding: 13px 14px 11px;
}
.column-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--col-color, var(--accent));
  opacity: .9;
}
.column-color {
  width: 9px; height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-color, var(--accent)) 18%, transparent);
}
.column-count {
  background: color-mix(in srgb, var(--col-color, var(--accent)) 14%, transparent);
  color: color-mix(in srgb, var(--col-color, var(--accent)) 45%, var(--text));
  font-weight: 700;
  padding: 1px 8px;
}

/* Cartes : plus de relief au survol, transitions douces */
.card {
  border-radius: 11px;
  padding: 11px 13px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.28);
  border-color: color-mix(in srgb, var(--col-color, var(--accent)) 45%, var(--border));
}
.card.overdue { border-left-width: 3px; }
.card-title { font-size: 13.5px; letter-spacing: -.01em; }

/* Bouton "+ Ajouter une fiche" : discret au repos, accent au survol */
.add-card-btn {
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.add-card-btn:hover {
  border-color: var(--accent);
  color: var(--accent-2, #b58200);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Colonne vide : zone de dépôt claire */
.column-empty {
  margin: 6px 2px;
  padding: 22px 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
  border: 1.5px dashed var(--border-2);
  border-radius: 10px;
  line-height: 1.7;
}
.column-empty span { font-size: 11px; opacity: .75; }

/* Scrollbar fine dans les colonnes */
.column-body::-webkit-scrollbar { width: 6px; }
.column-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.column-body::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ══════════════════════════════════════════════════════════
   TABLEAU DE BORD v3 (07/07/2026) — refonte complète
   ══════════════════════════════════════════════════════════ */
.dashboard-v3 { display: flex; flex-direction: column; gap: 16px; max-width: 1240px; height: 100%; min-height: 0; overflow-y: auto; padding-bottom: 24px; }

/* Hero : salutation + résumé */
.d3-hero {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, var(--bg-2)),
    color-mix(in srgb, var(--accent) 4%, var(--bg-2)) 65%);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}
.d3-hero-main { flex: 1; min-width: 0; }
.d3-hero h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.d3-hero-date { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.d3-hero-summary { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.d3-hero-summary strong { color: var(--accent-2, #b58200); }

/* KPI CA */
.d3-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.d3-kpi {
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.d3-kpi-total {
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.d3-kpi-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3);
}
.d3-kpi-edit { margin-left: auto; opacity: .5; }
.d3-kpi-val {
  font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.d3-kpi-val.editable-ca { cursor: pointer; border-radius: 6px; }
.d3-kpi-val.editable-ca:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.d3-kpi-val.is-manual { color: var(--accent-2, #b58200); }
.d3-kpi-unit { font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 4px; }
.d3-kpi-meta { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }

/* Pills "à traiter" */
.d3-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.d3-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  cursor: pointer;
  font-size: 12.5px; color: var(--text-2);
  transition: transform .1s ease, border-color .12s ease, background .12s ease;
}
.d3-pill:hover { transform: translateY(-1px); }
.d3-pill strong { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.d3-pill.red    { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
.d3-pill.red .btn-icon, .d3-pill.red strong { color: var(--red); }
.d3-pill.orange { border-color: color-mix(in srgb, var(--orange, #e89a3c) 45%, var(--border)); }
.d3-pill.orange .btn-icon, .d3-pill.orange strong { color: var(--orange, #e89a3c); }
.d3-pill.blue .btn-icon   { color: var(--blue, #3b82f6); }
.d3-pill.purple .btn-icon { color: var(--purple, #8b5cf6); }
.d3-pill.green .btn-icon  { color: var(--green, #22a06b); }
.d3-pill.yellow .btn-icon { color: var(--accent-2, #b58200); }

/* Grille 2 colonnes */
.d3-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: start; }
.d3-col-main, .d3-col-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Cards */
.d3-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.d3-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.d3-card-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); flex: 1; }
.d3-card-head .btn-icon { color: var(--text-3); }
.d3-count {
  font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  background: var(--bg-3); color: var(--text-3);
}
.d3-card-actions { display: flex; gap: 4px; }
.d3-mini-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg-3);
  cursor: pointer; color: var(--text-2);
}
.d3-mini-btn:hover { border-color: var(--accent); color: var(--accent-2, #b58200); }

/* Groupes de l'agenda */
.d3-group-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  margin: 12px 0 6px; color: var(--text-3);
}
.d3-group-title:first-child { margin-top: 0; }
.d3-group-title.red    { color: var(--red); }
.d3-group-title.orange { color: var(--orange, #e89a3c); }
.d3-group-title.blue   { color: var(--blue, #3b82f6); }

/* Lignes d'items */
.d3-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 2px -4px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .1s ease;
}
.d3-item:hover { background: var(--bg-3); }
.d3-logo {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text-3);
}
.d3-logo img { width: 100%; height: 100%; object-fit: cover; }
.d3-main { flex: 1; min-width: 0; }
.d3-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3-sub { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }

/* Badges */
.d3-badge {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.d3-badge.red    { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--c-red-txt); }
.d3-badge.orange { background: color-mix(in srgb, var(--orange, #e89a3c) 15%, transparent); color: var(--c-orange-txt); }
.d3-badge.blue   { background: color-mix(in srgb, var(--blue, #3b82f6) 14%, transparent); color: var(--c-blue-txt); }
.d3-badge.purple { background: color-mix(in srgb, var(--purple, #8b5cf6) 14%, transparent); color: var(--c-purple-txt); }
.d3-badge.green  { background: color-mix(in srgb, var(--green, #22a06b) 14%, transparent); color: var(--green, #22a06b); }
.d3-badge.grey   { background: var(--bg-3); color: var(--text-3); }

/* Tâches perso */
.d3-todo { display: flex; align-items: flex-start; gap: 10px; padding: 7px 2px; }
.d3-todo-check {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%; border: 1.5px solid var(--border-2);
  background: transparent; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.d3-todo-check:hover { border-color: var(--green, #22a06b); background: color-mix(in srgb, var(--green, #22a06b) 12%, transparent); }
.d3-todo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.d3-todo-text { font-size: 12.5px; color: var(--text); line-height: 1.35; }
.d3-more { display: block; margin-top: 8px; font-size: 12px; color: var(--accent-2, #b58200); text-decoration: none; }
.d3-more:hover { text-decoration: underline; }

/* Stats / barres */
.d3-stat-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--text-2); margin-top: 7px; }
.d3-stat-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3-stat-val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.d3-bar { height: 5px; background: var(--bg-3); border-radius: 3px; margin-top: 3px; overflow: hidden; }
.d3-bar-fill { height: 100%; border-radius: 3px; background: var(--yellow, #f5d547); transition: width .3s ease; }
.d3-bar-fill.done { background: var(--green, #22a06b); }
.d3-divider { height: 1px; background: var(--border); margin: 14px 0 10px; }
.d3-card-subhead {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); margin-bottom: 2px;
}

/* Répartition (origines + secteurs) */
.d3-repart { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.d3-empty-sm { font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* États vides */
.d3-empty {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 4px; font-size: 12.5px; color: var(--text-3);
}
.d3-empty .btn-icon { color: var(--green, #22a06b); }

/* Responsive */
@media (max-width: 1100px) {
  .d3-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .d3-hero { flex-direction: column; }
  .d3-kpis { grid-template-columns: 1fr 1fr; }
}

/* ══════════ Raison de statut (Non / Pause / Perdu) ══════════ */
.card-raison {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 2px 0 6px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-2);
  font-style: italic;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.card-raison:hover { border-color: var(--accent); }
.card-raison-icon { flex-shrink: 0; margin-top: 1px; color: var(--text-3); }
.card-raison span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-raison-missing {
  background: color-mix(in srgb, var(--orange, #e89a3c) 10%, transparent);
  border-color: color-mix(in srgb, var(--orange, #e89a3c) 40%, transparent);
  color: var(--c-orange-txt);
  font-style: normal;
  font-weight: 600;
}
.card-raison-missing .card-raison-icon { color: var(--c-orange-txt); }

/* Raison de statut : ROUGE bien visible (demande Joris 07/07/2026) */
.card-raison {
  background: color-mix(in srgb, var(--red, #dc2626) 12%, transparent);
  border: 1.5px solid var(--red, #dc2626);
  color: var(--red, #dc2626);
  font-style: normal;
  font-weight: 700;
}
.card-raison .card-raison-icon { color: var(--red, #dc2626); }
.card-raison:hover {
  background: color-mix(in srgb, var(--red, #dc2626) 20%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--red, #dc2626) 25%, transparent);
}
.card-raison-missing {
  background: color-mix(in srgb, var(--red, #dc2626) 16%, transparent);
  border: 1.5px dashed var(--red, #dc2626);
  color: var(--red, #dc2626);
}
.card-raison-missing .card-raison-icon { color: var(--red, #dc2626); }

/* Raison dans le résumé de la fiche : rouge et bien visible */
.summary-box .summary-raison {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  margin: 2px 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--red, #dc2626) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red, #dc2626) 45%, transparent);
  color: var(--red, #dc2626);
  font-weight: 700;
}
.summary-box .summary-raison strong { color: var(--red, #dc2626); }
.summary-box .summary-raison .icon { fill: none; stroke: var(--red, #dc2626); }

/* ══════════ Check-up : sélecteur de type + impression ══════════ */
.checkup-typebar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 4px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px;
}
.checkup-typebar-lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.ck-type-segs { display: inline-flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.ck-type-seg {
  border: none; background: transparent; cursor: pointer;
  padding: 6px 14px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.ck-type-seg:hover { color: var(--text); }
.ck-type-seg.active { background: var(--accent); color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.checkup-settings > summary { list-style: none; }

/* Impression du check-up : masque l'app, montre seulement la feuille */
#checkup-print-area { display: none; }
@media print {
  body.printing-checkup > *:not(#checkup-print-area) { display: none !important; }
  body.printing-checkup #checkup-print-area {
    display: block !important;
    position: static;
    color: #000; background: #fff;
    font-family: -apple-system, Arial, sans-serif;
    padding: 0; margin: 0;
  }
  @page { margin: 14mm; }
}
/* Styles de la feuille imprimée (dans le flux normal, cachée à l'écran) */
#checkup-print-area h1 { font-size: 20px; margin: 0 0 2px; }
.ck-print-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 12px; }
.ck-print-sub { font-size: 12px; color: #555; }
.ck-print-meta { text-align: right; font-size: 11px; color: #333; }
.ck-print-meta > div:first-child { font-weight: 800; font-size: 13px; }
.ck-print-info { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.ck-print-info td { border: 1px solid #ccc; padding: 6px 10px; font-size: 12px; }
.ck-print-info td span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #888; margin-bottom: 2px; }
.ck-print-alert { padding: 8px 12px; border: 1.5px solid #dc2626; background: color-mix(in srgb, var(--red) 12%, var(--bg-2)); color: var(--c-red-txt); border-radius: 6px; font-size: 12px; margin-bottom: 12px; }
.ck-print-ok { padding: 8px 12px; border: 1.5px solid #16a34a; background: color-mix(in srgb, var(--green) 12%, var(--bg-2)); color: var(--c-green-txt); border-radius: 6px; font-size: 12px; margin-bottom: 12px; }
.ck-print-list { width: 100%; border-collapse: collapse; }
.ck-print-list th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #666; border-bottom: 1.5px solid #000; padding: 5px 8px; }
.ck-print-list td { padding: 5px 8px; font-size: 12px; border-bottom: 1px solid #e5e5e5; }
.ck-print-num { color: #999; width: 24px; }
.ck-print-box { font-size: 16px; width: 22px; text-align: center; }
.ck-print-nom { font-weight: 600; }
.ck-print-ref { color: #666; font-size: 11px; }
.ck-print-state { text-align: right; font-size: 11px; }
.ck-print-missing td { background: color-mix(in srgb, var(--red) 9%, var(--bg-2)); }
.ck-print-missing .ck-print-state { color: var(--c-red-txt); font-weight: 700; }
.ck-print-sign { display: flex; justify-content: space-between; margin-top: 24px; font-size: 12px; color: #333; }

/* Bandeau différence au switch de type (manquants / en trop) */
.ck-switch-info { display: flex; flex-direction: column; gap: 6px; }
.cksi-line {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 11px; border-radius: 9px;
  font-size: 12px; line-height: 1.4;
}
.cksi-line .btn-icon { flex-shrink: 0; margin-top: 1px; }
.cksi-manq {
  background: color-mix(in srgb, var(--red, #dc2626) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--red, #dc2626) 40%, transparent);
  color: var(--red, #dc2626);
}
.cksi-trop {
  background: color-mix(in srgb, var(--orange, #e89a3c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange, #e89a3c) 45%, transparent);
  color: var(--c-orange-txt);
}
.cksi-line strong { font-weight: 700; }
.cksi-clear {
  margin-left: 6px;
  border: 1px solid currentColor; background: transparent;
  color: inherit; cursor: pointer;
  font-size: 10.5px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
}
.cksi-clear:hover { background: color-mix(in srgb, var(--orange, #e89a3c) 20%, transparent); }

/* Numéro de caisse : validation + suggestions dispo */
.ck-num-hint { font-size: 11px; margin-top: 4px; line-height: 1.5; }
.ck-num-hint.is-ok { color: var(--green, #22a06b); display: flex; align-items: center; gap: 4px; }
.ck-num-hint.is-error { color: var(--red, #dc2626); }
.field-input.input-error { border-color: var(--red, #dc2626); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red, #dc2626) 18%, transparent); }
.ck-num-pick {
  border: 1px solid var(--green, #22a06b); background: color-mix(in srgb, var(--green, #22a06b) 10%, transparent);
  color: var(--green, #22a06b); cursor: pointer;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 8px; border-radius: 999px; margin: 0 2px 2px 0;
}
.ck-num-pick:hover { background: color-mix(in srgb, var(--green, #22a06b) 22%, transparent); }

/* ══════════ Onglet Manquants ══════════ */
.manq-total { font-size: 12.5px; color: var(--text-3); }
/* Par outil */
.manq-list { display: flex; flex-direction: column; gap: 8px; }
.manq-row {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
}
.manq-row:hover { border-color: color-mix(in srgb, var(--red, #dc2626) 30%, var(--border)); }
.manq-photo { width: 46px; height: 46px; border-radius: 9px; object-fit: contain; background: #fff; border: 1px solid var(--border); flex-shrink: 0; }
.manq-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--text-3); background: var(--bg-3); }
.manq-main { flex: 1; min-width: 0; }
.manq-nom { font-size: 13.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 5px; }
.manq-caisses { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.manq-caisses strong { color: var(--red, #dc2626); }
/* Par caisse */
.manq-caisse {
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
}
.manq-caisse-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.manq-caisse-head strong { font-size: 15px; color: var(--text); }
.manq-count {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--red, #dc2626) 12%, transparent);
  color: var(--red, #dc2626);
}
.manq-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.manq-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text-2);
  padding: 3px 10px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--border);
}

/* Statut automatique (affichage dans le check-up) */
.ck-statut-auto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.ck-statut-cause { font-size: 11.5px; color: var(--text-3); }

/* Manquants : bloc d'actions par ligne (Acheter + étape workflow) */
.manq-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end;
}
.manq-voir {
  padding: 6px 12px; font-size: 12px;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent-2, #b58200);
  text-decoration: none;
}
.manq-voir:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 640px) {
  .manq-row { flex-wrap: wrap; }
  .manq-actions { width: 100%; justify-content: flex-start; }
}

/* ══════════ Manquants v2 : cards produit e-commerce ══════════ */
.manq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.mgc {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mgc:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -10px rgba(0,0,0,.28); }
.mgc-none     { border-color: color-mix(in srgb, var(--red, #dc2626) 45%, var(--border)); }
.mgc-liste    { border-color: color-mix(in srgb, var(--orange, #e89a3c) 50%, var(--border)); }
.mgc-commande { border-color: color-mix(in srgb, var(--blue, #3b82f6) 50%, var(--border)); }

/* Bandeau d'état en couleur pleine */
.mgc-bandeau {
  padding: 6px 12px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: #fff; text-align: center;
}
.mgc-bandeau-red    { background: var(--red, #dc2626); }
.mgc-bandeau-orange { background: var(--orange, #e89a3c); }
.mgc-bandeau-blue   { background: var(--blue, #3b82f6); }

/* Grande photo produit */
.mgc-photo {
  height: 120px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
}
.mgc-photo img { max-height: 105px; max-width: 85%; object-fit: contain; }

.mgc-body { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.mgc-nom {
  font-size: 13px; font-weight: 700; color: var(--text);
  line-height: 1.3; display: flex; align-items: flex-start; gap: 5px;
  min-height: 34px;
}
.mgc-nom .caisse-card-nat { margin-top: 2px; flex-shrink: 0; }
.mgc-caisses {
  font-size: 11.5px; color: var(--text-3);
  display: flex; align-items: center; gap: 5px;
}
.mgc-caisses .btn-icon { color: var(--red, #dc2626); }

/* Étapes 1-2-3 visuelles */
.mgc-steps { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.mgc-step { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mgc-step-dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  background: var(--bg-3); color: var(--text-3);
  border: 1.5px solid var(--border-2);
}
.mgc-step.done .mgc-step-dot   { background: var(--green, #22a06b); border-color: var(--green, #22a06b); color: #fff; }
.mgc-step.active .mgc-step-dot { border-color: var(--accent); color: var(--accent-2, #b58200); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mgc-step-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); }
.mgc-step.done .mgc-step-lbl   { color: var(--green, #22a06b); }
.mgc-step.active .mgc-step-lbl { color: var(--text); }
.mgc-step-line { flex: 1; height: 2px; background: var(--border-2); border-radius: 1px; margin-bottom: 12px; }
.mgc-step-line.done { background: var(--green, #22a06b); }

/* Gros boutons pleine largeur */
.mgc-actions {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 8px; padding: 10px 14px 14px;
}
.mgc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 8px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700;
  cursor: pointer; border: 1.5px solid var(--border);
  background: var(--bg-3); color: var(--text-2);
  text-decoration: none; text-align: center;
  transition: filter .12s ease, transform .08s ease;
}
.mgc-btn:hover { filter: brightness(1.06); }
.mgc-btn:active { transform: scale(.98); }
.mgc-btn-buy {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-2, #b58200);
}
.mgc-btn-nolink { opacity: .55; cursor: default; }
.mgc-btn-step { color: #fff; border: none; }
.mgc-red    { background: var(--red, #dc2626); }
.mgc-orange { background: var(--orange, #e89a3c); }
.mgc-green  { background: var(--green, #22a06b); }

/* Commandes : caisses destinataires sous le nom de l'outil */
.cmd-dest {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 4px; font-size: 11px; color: var(--text-3);
}
.cmd-dest .btn-icon { color: var(--red, #dc2626); }
.cmd-dest-chip {
  font-size: 10.5px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--red, #dc2626) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--red, #dc2626) 35%, transparent);
  color: var(--red, #dc2626);
}

/* ══════════ PARC AUTO v2 : cards + alertes échéances ══════════ */
/* Bandeau d'alertes en haut */
.vp-alertes {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--red, #dc2626) 6%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--red, #dc2626) 35%, var(--border));
  border-radius: 14px;
}
.vp-alertes-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text); margin-bottom: 4px;
}
.vp-alertes-head .btn-icon { color: var(--red, #dc2626); }
.vp-alerte-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-2);
  cursor: pointer; font-size: 12.5px; text-align: left;
  transition: border-color .12s ease, transform .08s ease;
}
.vp-alerte-row:hover { transform: translateX(2px); }
.vp-alerte-row.vp-ech-late { border-color: color-mix(in srgb, var(--red, #dc2626) 50%, var(--border)); }
.vp-alerte-row.vp-ech-soon { border-color: color-mix(in srgb, var(--orange, #e89a3c) 55%, var(--border)); }
.vp-alerte-plate { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.vp-alerte-what { font-weight: 700; color: var(--text-2); }
.vp-alerte-when { margin-left: auto; font-weight: 700; }
.vp-alerte-row.vp-ech-late .vp-alerte-when { color: var(--red, #dc2626); }
.vp-alerte-row.vp-ech-soon .vp-alerte-when { color: var(--orange, #e89a3c); }

/* Grille de cards véhicule */
.vp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.vp-card {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 15px 16px 13px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.vp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.25);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.vp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Plaque d'immatriculation française */
.vp-plate {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid #1a1a1a;
  border-radius: 6px; overflow: hidden;
  background: #ffffff;   /* plaque réelle : reste blanche dans les 2 thèmes */
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.vp-plate-eu {
  display: flex; align-items: center; justify-content: center;
  width: 18px; background: #003399; color: #ffcc00;
  font-size: 9px; font-weight: 800;
}
.vp-plate-num {
  padding: 3px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; font-weight: 800; letter-spacing: .06em;
  color: #1a1a1a; white-space: nowrap;
}

.vp-model { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.vp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.vp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--text-2);
}
.vp-tech { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.vp-tech .btn-icon { color: var(--text-3); }
.vp-cause {
  font-size: 11.5px; color: var(--orange, #e89a3c);
  background: color-mix(in srgb, var(--orange, #e89a3c) 10%, transparent);
  padding: 4px 9px; border-radius: 7px;
}

/* Échéances dans la card */
.vp-echs { display: flex; flex-direction: column; gap: 4px; }
.vp-ech {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 8px;
  font-size: 12px;
  background: var(--bg-3);
}
.vp-ech-lbl { font-weight: 700; color: var(--text-2); min-width: 72px; }
.vp-ech-date { color: var(--text-2); font-variant-numeric: tabular-nums; }
.vp-ech-days { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.vp-ech.vp-ech-late {
  background: color-mix(in srgb, var(--red, #dc2626) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red, #dc2626) 40%, transparent);
}
.vp-ech.vp-ech-late .vp-ech-days, .vp-ech.vp-ech-late .vp-ech-lbl { color: var(--red, #dc2626); }
.vp-ech.vp-ech-soon {
  background: color-mix(in srgb, var(--orange, #e89a3c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange, #e89a3c) 40%, transparent);
}
.vp-ech.vp-ech-soon .vp-ech-days, .vp-ech.vp-ech-soon .vp-ech-lbl { color: var(--orange, #e89a3c); }
.vp-ech.vp-ech-ok .vp-ech-days { color: var(--green, #22a06b); }
.vp-ech-none { font-size: 11.5px; color: var(--text-3); font-style: italic; padding: 4px 2px; }

.vp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 9px; border-top: 1px dashed var(--border);
}
.vp-docs { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.vp-actions { display: flex; gap: 4px; }

/* Feuille check-up imprimée : photos outils + champs à remplir au marqueur */
.ck-print-photo { width: 38px; text-align: center; }
.ck-print-photo img {
  width: 34px; height: 34px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #ddd; border-radius: 4px;
  vertical-align: middle;
}
/* Cellules "à remplir au marqueur" : grande zone vide soulignée */
.ck-print-fill {
  min-width: 160px;
  height: 44px;
  border-bottom: 2px solid #000 !important;
}
@media print {
  /* Force l'impression des images et des fonds colorés */
  body.printing-checkup #checkup-print-area img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-checkup .ck-print-alert,
  body.printing-checkup .ck-print-ok,
  body.printing-checkup .ck-print-missing td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Feuille check-up : version COMPACTE — tout sur une page A4 */
@media print {
  body.printing-checkup #checkup-print-area { font-size: 10.5px; }
  @page { margin: 10mm 12mm; }
}
#checkup-print-area h1 { font-size: 16px; }
.ck-print-head { padding-bottom: 5px; margin-bottom: 7px; }
.ck-print-sub { font-size: 10px; }
.ck-print-meta { font-size: 9px; }
.ck-print-meta > div:first-child { font-size: 11px; }
.ck-print-info { margin-bottom: 7px; }
.ck-print-info td { padding: 4px 8px; font-size: 10.5px; }
.ck-print-info td span { font-size: 8px; margin-bottom: 1px; }
.ck-print-fill { height: 30px; min-width: 130px; }
.ck-print-alert, .ck-print-ok { padding: 5px 9px; font-size: 10px; margin-bottom: 7px; line-height: 1.35; }
.ck-print-list th { font-size: 8.5px; padding: 3px 6px; }
.ck-print-list td { padding: 2px 6px; font-size: 10.5px; line-height: 1.25; }
.ck-print-list tr { page-break-inside: avoid; }
.ck-print-num { width: 18px; }
.ck-print-photo { width: 28px; }
.ck-print-photo img { width: 24px; height: 24px; border-radius: 3px; }
.ck-print-box { font-size: 12px; width: 18px; }
.ck-print-ref { font-size: 9.5px; }
.ck-print-state { font-size: 9.5px; }
.ck-print-sign { margin-top: 12px; font-size: 10.5px; }

/* ══════════ TECHNICIENS v2 : alertes + stats + cards riches ══════════ */
.tk-alertes {
  padding: 13px 16px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--red, #dc2626) 6%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--red, #dc2626) 35%, var(--border));
  border-radius: 14px;
}
.tk-alertes-head { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.tk-alertes-head .btn-icon { color: var(--red, #dc2626); }
.tk-alertes-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tk-alerte-chip {
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 700;
  background: var(--bg-2); color: var(--red, #dc2626);
  border: 1.5px solid color-mix(in srgb, var(--red, #dc2626) 50%, transparent);
  transition: background .12s ease;
}
.tk-alerte-chip:hover { background: color-mix(in srgb, var(--red, #dc2626) 10%, var(--bg-2)); }

.tk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tk-stat {
  padding: 11px 14px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.tk-stat-alert { border-color: color-mix(in srgb, var(--red, #dc2626) 45%, var(--border)); }
.tk-stat-alert .tk-stat-val { color: var(--red, #dc2626); }
.tk-stat-val { font-size: 19px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tk-stat-sub { font-size: 12px; font-weight: 600; color: var(--text-3); }
.tk-stat-green { color: var(--c-green-txt) !important; }
.tk-stat-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }

.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tk-card {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 16px; padding: 15px 16px 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tk-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px -10px rgba(0,0,0,.25); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.tk-card-inter { border-color: color-mix(in srgb, var(--red, #dc2626) 45%, var(--border)); }
.tk-card-off { opacity: .55; }
.tk-head { display: flex; align-items: center; gap: 11px; }
.tk-avatar {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
.tk-name-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.tk-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }

.tk-status {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 9px;
  font-size: 12px; font-weight: 700;
}
.tk-status-mission { background: color-mix(in srgb, var(--green, #22a06b) 11%, transparent); color: var(--green, #22a06b); }
.tk-status-inter   { background: color-mix(in srgb, var(--red, #dc2626) 11%, transparent); color: var(--red, #dc2626); }
.tk-status-off     { background: var(--bg-3); color: var(--text-3); }

.tk-renta {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--bg-3);
}
.tk-renta-item { display: flex; flex-direction: column; gap: 1px; }
.tk-renta-val { font-size: 13.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.tk-renta-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); }

.tk-equips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.tk-equips-none { font-size: 11px; color: var(--text-3); font-style: italic; align-items: center; display: flex; }
.tk-equip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.tk-equip .btn-icon { color: var(--text-3); }
.tk-equip-warn { border-color: color-mix(in srgb, var(--orange, #e89a3c) 55%, transparent); color: var(--orange, #e89a3c); }
.tk-equip-warn .btn-icon { color: var(--orange, #e89a3c); }

.tk-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 9px; border-top: 1px dashed var(--border);
}
.tk-meta { display: flex; flex-wrap: wrap; gap: 5px; }

/* ══════════ Coûts de revient véhicule ══════════ */
/* Panneau live dans le modal */
.vc-result { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--border); }
.vc-empty { font-size: 12px; color: var(--text-3); font-style: italic; }
.vc-big { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.vc-big-item { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.vc-big-val { font-size: 19px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vc-big-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.vc-breakdown { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.vc-breakdown span { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); }

/* Coût sur la card véhicule */
.vp-cout { display: flex; gap: 8px; }
.vp-cout-item {
  display: flex; align-items: baseline; gap: 4px;
  padding: 4px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-3));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
}
.vp-cout-val { font-size: 14px; font-weight: 800; color: var(--accent-deep, #7a5900); font-variant-numeric: tabular-nums; }
.vp-cout-lbl { font-size: 10px; font-weight: 700; color: var(--text-3); }
.vp-cout-add {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  padding: 4px 10px; border-radius: 999px;
  background: transparent; border: 1px dashed var(--border-2); color: var(--text-3);
}
.vp-cout-add:hover { border-color: var(--accent); color: var(--accent-2, #b58200); }

/* Bénéfice net (après véhicule) sur la card tech */
.tk-net {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: 9px; margin-top: -3px;
  background: var(--bg-3); font-size: 11.5px;
}
.tk-net-veh { color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.tk-net-veh .btn-icon { color: var(--text-3); }
.tk-net-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-net-neg { color: var(--red, #dc2626); }

/* Ligne IK (véhicule perso) sur la card tech */
.tk-net-ik { background: color-mix(in srgb, var(--blue, #3b82f6) 8%, var(--bg-3)); }
.tk-net-info { font-size: 10.5px; color: var(--text-3); font-style: italic; }

/* ═══ Dashboard v3 — lifting visuel (2026-07-23) ═══
   Surcharges en fin de cascade : héro plus riche, KPIs en relief,
   cartes plus profondes. Aucun changement de markup. */
/* FIX scroll : .dashboard-v3 est un flex column avec overflow-y:auto.
   Sans flex-shrink:0, ses enfants se COMPRESSENT pour tenir dans la
   hauteur (héro écrasé/coupé) et il n'y a plus rien à défiler — la
   molette semble morte. On force le débordement → la barre de défilement
   revient et le contenu garde sa taille. */
.dashboard-v3 > * { flex-shrink: 0; }
/* Halos ambiants très légers derrière les cartes de verre. */
.dashboard-v3 {
  background:
    radial-gradient(720px 420px at 6% -6%, rgba(245, 213, 71, .16), transparent 60%),
    radial-gradient(640px 400px at 104% 12%, rgba(129, 180, 255, .10), transparent 55%),
    radial-gradient(560px 380px at 50% 110%, rgba(255, 170, 120, .08), transparent 60%);
}
/* Héro "verre" : halos ambiants doux + translucidité, sans motif. */
.d3-hero {
  position: relative;
  padding: 26px 28px 24px;
  border-radius: 22px;
  background:
    radial-gradient(560px 260px at 8% -30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%),
    radial-gradient(480px 240px at 100% 130%, rgba(129, 180, 255, .12), transparent 60%),
    rgba(var(--w), calc(.55 * var(--wa)));
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(var(--w), calc(.7 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.85 * var(--wa))) inset,
              0 20px 50px -28px rgba(40, 35, 15, .35);
}
.d3-hero h1 { font-size: 28px; }
.d3-hero-summary { font-size: 14px; }

/* Cartes "verre" : translucidité légère, hairline claire, ombres diffuses. */
.d3-kpi {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(var(--w), calc(.6 * var(--wa)));
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(var(--w), calc(.65 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.8 * var(--wa))) inset,
              0 12px 30px -22px rgba(40, 35, 15, .3);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.d3-kpi:hover {
  transform: translateY(-2px);
  background: rgba(var(--w), calc(.78 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.8 * var(--wa))) inset,
              0 18px 38px -22px rgba(40, 35, 15, .36);
}
.d3-kpi-val { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.d3-kpi-total {
  background:
    radial-gradient(300px 140px at 12% -30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    color-mix(in srgb, var(--accent) 7%, var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 45%, rgba(var(--w), calc(.6 * var(--wa))));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.8 * var(--wa))) inset,
              0 14px 34px -20px rgba(170, 130, 0, .45);
}

.d3-card {
  border-radius: 18px;
  padding: 16px 18px;
  background: rgba(var(--w), calc(.6 * var(--wa)));
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(var(--w), calc(.65 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.8 * var(--wa))) inset,
              0 12px 30px -24px rgba(40, 35, 15, .3);
  transition: box-shadow .18s ease, background .18s ease;
}
.d3-card:hover {
  background: rgba(var(--w), calc(.74 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.8 * var(--wa))) inset,
              0 18px 38px -24px rgba(40, 35, 15, .36);
}
.d3-card-head { letter-spacing: -.01em; }
.d3-bar { border-radius: 99px; overflow: hidden; }
.d3-bar-fill {
  border-radius: 99px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 85%, #fff),
    var(--accent));
}
@media (prefers-reduced-motion: reduce) {
  .d3-kpi, .d3-card { transition: none; }
  .d3-kpi:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   THÈME "VERRE" GLOBAL (langage iOS moderne) — 2026-07-23
   Couche de surcharge en fin de cascade. Principe :
   · grandes surfaces structurelles (topbar, sidebar, modales,
     panneau fiche) = vrai verre flouté (backdrop-filter) ;
   · cartes répétées (kanban, vues métier) = verre léger SANS flou
     pour préserver les perfs (drag & drop, longues listes).
   ═══════════════════════════════════════════════════════════════ */

/* Fond ambiant : halos très doux derrière toute l'app.
   Les halos et le dégradé de base suivent le thème — codés en dur, ils
   repeignaient toute l'application en clair même en mode nuit. */
body {
  background:
    radial-gradient(1100px 700px at 8% -12%, var(--halo-1), transparent 60%),
    radial-gradient(1000px 640px at 108% 18%, var(--halo-2), transparent 55%),
    radial-gradient(900px 620px at 45% 118%, var(--halo-3), transparent 60%),
    var(--app-bg);
  background-attachment: fixed;
}

/* Barres structurelles */
.topbar {
  background: rgba(var(--w), calc(.55 * var(--wa)));
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(var(--w), calc(.65 * var(--wa)));
}
.sidebar {
  background: rgba(var(--w), calc(.45 * var(--wa)));
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border-right: 1px solid rgba(var(--w), calc(.55 * var(--wa)));
}

/* Modales : matériau épais + scrim flouté */
.modal-overlay {
  background: rgba(32, 28, 20, .32);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.modal {
  background: rgba(var(--w), calc(.78 * var(--wa)));
  -webkit-backdrop-filter: blur(34px) saturate(1.7);
  backdrop-filter: blur(34px) saturate(1.7);
  border: 1px solid rgba(var(--w), calc(.8 * var(--wa)));
  border-radius: 24px;
  box-shadow: 0 1px 1px rgba(var(--w), calc(.9 * var(--wa))) inset,
              0 34px 90px -34px rgba(40, 35, 15, .45);
}

/* Panneau fiche (latéral) */
.panel {
  background: rgba(var(--w), calc(.68 * var(--wa)));
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  border-left: 1px solid rgba(var(--w), calc(.7 * var(--wa)));
  box-shadow: -24px 0 70px -30px rgba(40, 35, 15, .35);
}

/* Colonnes kanban : voile discret */
.column {
  background: rgba(var(--w), calc(.38 * var(--wa)));
  border: 1px solid rgba(var(--w), calc(.5 * var(--wa)));
  border-radius: 18px;
}

/* Cartes & surfaces répétées : verre léger sans flou */
.card, .stat-card, .tk-card, .vp-card, .mgc-card,
.caisse-card, .caisse-item-card, .caisse-doc-card, .apporteur-card,
.sim-form-card, .sim-mission-card, .sim-preview-card,
.todo-item, .trash-item, .list-table {
  background: rgba(var(--w), calc(.68 * var(--wa)));
  border: 1px solid rgba(var(--w), calc(.65 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.75 * var(--wa))) inset,
              0 10px 26px -20px rgba(40, 35, 15, .3);
}
.card { border-radius: 14px; }
.stat-card, .tk-card, .vp-card, .mgc-card, .caisse-card,
.sim-form-card, .sim-mission-card, .sim-preview-card { border-radius: 18px; }
.card:hover, .tk-card:hover, .vp-card:hover, .mgc-card:hover, .caisse-card:hover {
  background: rgba(var(--w), calc(.8 * var(--wa)));
}

/* Toasts : verre sombre */
.toast {
  background: rgba(32, 28, 22, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-radius: 14px;
}

/* ── Thème verre : extension aux composants transverses ─────────
   (recherche, boutons, filtres, champs, onglets, calendrier) */

/* Conteneurs de vues : transparents pour laisser respirer les halos. */
.cal-page { background: transparent; }
div[class*="cal-grid"] {
  background: rgba(var(--w), calc(.55 * var(--wa)));
  border-radius: 18px;
  border: 1px solid rgba(var(--w), calc(.6 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.7 * var(--wa))) inset,
              0 12px 30px -24px rgba(40, 35, 15, .3);
}

/* Barre de recherche */
.search-box input {
  background: rgba(var(--w), calc(.55 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.10 * var(--ka)));
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(var(--w), calc(.7 * var(--wa))) inset;
}
.search-box input:focus {
  background: rgba(var(--w), calc(.85 * var(--wa)));
  border-color: rgba(210, 170, 20, .5);
  box-shadow: 0 0 0 4px rgba(245, 213, 71, .22);
}

/* Boutons génériques (le .primary reste doré : spécificité supérieure) */
.btn {
  background: rgba(var(--w), calc(.6 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.10 * var(--ka)));
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(var(--w), calc(.65 * var(--wa))) inset;
}
.btn:hover { background: rgba(var(--w), calc(.85 * var(--wa))); }

/* Chips de filtres & toggles (kanban, sim, calendrier, vues) */
.filter-btn, .sim-filter, .view-toggle button,
.cal-toggle-btn, .cal-nav-btn {
  background: rgba(var(--w), calc(.55 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.09 * var(--ka)));
  border-radius: 10px;
}
.filter-btn:hover, .sim-filter:hover,
.cal-toggle-btn:hover, .cal-nav-btn:hover { background: rgba(var(--w), calc(.85 * var(--wa))); }
.sim-filter.active, .cal-toggle-btn.active {
  background: color-mix(in srgb, var(--accent) 55%, rgba(var(--w), calc(.8 * var(--wa))));
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Champs de formulaire (modales, panneau fiche, simulateur) */
.field-input, .field-select, textarea.field-input {
  background: rgba(var(--w), calc(.55 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.10 * var(--ka)));
  border-radius: 10px;
}
.field-input:focus, .field-select:focus {
  background: rgba(var(--w), calc(.9 * var(--wa)));
  border-color: rgba(210, 170, 20, .55);
  box-shadow: 0 0 0 4px rgba(245, 213, 71, .22);
}

/* Bandeau d'onglets du simulateur : verre flouté collant */
.sim-tabs {
  background: rgba(var(--w), calc(.5 * var(--wa)));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(var(--w), calc(.6 * var(--wa)));
}

/* ── Fiches (panneau latéral) : scrim de verre + onglets propres ── */
/* Le voile gris plat derrière la fiche devient un vrai scrim iOS :
   plus clair, chaud et flouté — l'app reste lisible derrière. */
.panel-overlay {
  background: rgba(32, 28, 20, .26);
  -webkit-backdrop-filter: blur(9px) saturate(1.2);
  backdrop-filter: blur(9px) saturate(1.2);
}
/* La barre de défilement grise sous les onglets de fiche disparaît
   (le défilement molette/trackpad reste actif). */
.panel-tabs::-webkit-scrollbar,
.sim-tabs::-webkit-scrollbar,
.caisses-tabs::-webkit-scrollbar { height: 0; }
.panel-tabs, .sim-tabs, .caisses-tabs { scrollbar-width: none; }
/* Onglets : hairline claire plutôt que bordure grise */
.panel-tabs { border-bottom: 1px solid rgba(var(--k), calc(.07 * var(--ka))); }

/* ── Libellés de sections dans les cartes (Techniciens / Voitures) ──
   Micro-titres qui donnent du sens aux chiffres : « Coût de revient »,
   « Conducteur », « Échéances », « Ce qu'il rapporte / mois »… */
.vp-sec-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 10px 0 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vp-sec-lbl:first-child { margin-top: 0; }
.vp-sec-hint {
  cursor: help;
  opacity: .7;
  font-size: 11px;
}
/* Libellés de rentabilité tech : lisibles, plus d'abréviations */
.tk-renta-lbl { font-size: 11px; letter-spacing: 0; text-transform: none; }
.tk-net { flex-wrap: wrap; row-gap: 4px; }

/* ── Caisses à outils : onglet STOCK (réserve) ─────────── */
.stk-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; max-width: 760px; }
.stk-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px;
  background: rgba(var(--w), calc(.68 * var(--wa)));
  border: 1px solid rgba(var(--w), calc(.65 * var(--wa)));
  border-radius: 14px;
  box-shadow: 0 1px 1px rgba(var(--w), calc(.75 * var(--wa))) inset, 0 8px 22px -18px rgba(40, 35, 15, .28);
}
.stk-row-warn { border-color: color-mix(in srgb, var(--red, #dc2626) 35%, rgba(var(--w), calc(.6 * var(--wa)))); }
.stk-photo {
  width: 44px; height: 44px; border-radius: 10px; object-fit: contain;
  background: #fff; border: 1px solid rgba(var(--k), calc(.08 * var(--ka))); flex: 0 0 auto;
}
.stk-photo-ph { display: grid; place-items: center; color: var(--text-3); }
.stk-main { flex: 1 1 auto; min-width: 0; }
.stk-nom { font-weight: 650; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.stk-nat { color: var(--text-3); }
.stk-ref { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.stk-ctx { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.stk-ctx-ok   { color: var(--c-green-txt); }
.stk-ctx-warn { color: var(--c-red-txt); font-weight: 600; }
.stk-ctx-mute { color: var(--text-3); font-style: italic; }
.stk-stepper {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  background: rgba(var(--w), calc(.6 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.09 * var(--ka)));
  border-radius: 12px; padding: 4px;
}
.stk-btn {
  width: 30px; height: 30px; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(var(--w), calc(.85 * var(--wa))); color: var(--text);
  font-size: 17px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 2px rgba(30, 25, 10, .12);
  transition: background .12s, transform .08s;
}
.stk-btn:hover { background: #FFDE59; }
.stk-btn:active { transform: scale(.94); }
.stk-qty {
  min-width: 26px; text-align: center;
  font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
}

/* ── Caisses : état « en transit » (outil envoyé du stock) ── */
.ck-item.is-transit { border-color: color-mix(in srgb, #6b8cff 40%, var(--border)); background: rgba(107, 140, 255, .06); }
.ck-badge-transit {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--c-blue-txt); font-weight: 700;
}
.ck-transit-note { color: var(--c-blue-txt); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
/* Boutons d'action dans les lignes de check-up */
.ck-item-stock, .ck-item-recu, .ck-item-back, .ck-item-cancel {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgba(var(--k), calc(.12 * var(--ka))); border-radius: 9px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: rgba(var(--w), calc(.8 * var(--wa))); color: var(--text-2);
  transition: background .12s, border-color .12s, color .12s;
}
.ck-item-stock:hover { background: #FFDE59; border-color: #e9c531; color: #3d2c00; }
.ck-item-recu { background: #157347; color: #fff; border-color: var(--c-green-txt); }
.ck-item-recu:hover { filter: brightness(1.06); }
.ck-item-back:hover { background: rgba(107,140,255,.12); border-color: #6b8cff; color: var(--c-blue-txt); }
.ck-item-cancel { padding: 5px 8px; }
.ck-item-cancel:hover { background: rgba(180,35,24,.08); border-color: rgba(180,35,24,.4); color: var(--c-red-txt); }
/* Puce « en transit » sur la carte de caisse */
.caisse-card-badges-row { display: flex; flex-wrap: wrap; gap: 6px; }
.caisse-card-transit {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  color: var(--c-blue-txt); background: rgba(107, 140, 255, .14);
}
.stk-ctx-transit { color: var(--c-blue-txt); }

/* ── Dashboard : agenda Google (aujourd'hui + semaine) ── */
.dga-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
@media (max-width: 760px) { .dga-grid { grid-template-columns: 1fr; } }
.dga-col-title {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.dga-col-date { text-transform: none; letter-spacing: 0; color: var(--text-2); font-weight: 600; }
.dga-col-week { border-left: 1px solid var(--border); padding-left: 18px; }
@media (max-width: 760px) { .dga-col-week { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; } }
.dga-today { display: flex; flex-direction: column; gap: 8px; }
.dga-ev {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(var(--w), calc(.6 * var(--wa))); border: 1px solid rgba(var(--w), calc(.6 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.7 * var(--wa))) inset, 0 6px 16px -14px rgba(40,35,15,.3);
}
.dga-ev-time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; color: var(--text); min-width: 46px; line-height: 1.15; }
.dga-ev-end { display: block; font-size: 11px; font-weight: 600; color: var(--text-3); }
.dga-ev-body { flex: 1 1 auto; min-width: 0; }
.dga-ev-title { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dga-ev.dga-past { opacity: .5; }
.dga-meet {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(66,133,244,.12); color: var(--c-blue-txt); text-decoration: none; transition: background .12s;
}
.dga-meet:hover { background: rgba(66,133,244,.24); }
.dga-free { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; padding: 12px 4px; font-style: italic; }
.dga-week { display: flex; flex-direction: column; gap: 12px; }
.dga-wday-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dga-wday-n { font-size: 10.5px; font-weight: 700; color: var(--text-3); background: var(--bg-3); border-radius: 999px; padding: 1px 7px; }
.dga-wev { font-size: 12.5px; color: var(--text-2); padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dga-wev-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); margin-right: 4px; }
.dga-wev.dga-more { color: var(--text-3); font-style: italic; }

/* ── Dashboard : outillage ── */
.d3-outil-stats { display: flex; gap: 10px; margin-bottom: 12px; }
.d3-outil-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 12px;
  background: rgba(var(--w), calc(.55 * var(--wa))); border: 1px solid rgba(var(--w), calc(.55 * var(--wa)));
  font-size: 11px; color: var(--text-3); text-align: center;
}
.d3-outil-n { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.d3-outil-n.green { color: var(--c-green-txt); }
.d3-outil-n.red { color: var(--c-red-txt); }
.d3-outil-n.blue { color: var(--c-blue-txt); }
[data-caisse-jump] { cursor: pointer; }

/* ── Dashboard : agenda v2 — panneau signature, bien visible ── */
.dga-card {
  border-radius: 20px;
  padding: 20px 22px;
  background:
    radial-gradient(480px 220px at 4% -30%, rgba(255, 222, 89, .30), transparent 65%),
    rgba(var(--w), calc(.66 * var(--wa)));
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(var(--w), calc(.7 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.85 * var(--wa))) inset,
              0 18px 44px -26px rgba(40, 35, 15, .38);
}
.dga-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dga-head-title { display: flex; align-items: center; gap: 8px; }
.dga-head-title h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.dga-count { font-size: 12px; font-weight: 700; color: var(--c-yellow-txt); background: rgba(255, 222, 89, .35); border-radius: 999px; padding: 3px 10px; }
.dga-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  background: rgba(var(--w), calc(.7 * var(--wa))); border: 1px solid rgba(var(--k), calc(.08 * var(--ka)));
  border-radius: 999px; padding: 4px 12px;
}
.dga-live-now { color: var(--c-green-txt); background: rgba(21, 115, 71, .1); border-color: rgba(21, 115, 71, .25); }
.dga-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #157347; animation: dgaPulse 1.6s ease infinite; }
@keyframes dgaPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .dga-live-dot { animation: none; } }
.dga-open-cal {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer;
  background: rgba(var(--w), calc(.65 * var(--wa))); border: 1px solid rgba(var(--k), calc(.09 * var(--ka)));
  border-radius: 10px; padding: 7px 12px; transition: background .12s;
}
.dga-open-cal:hover { background: var(--bg-2); }
.dga-ev { position: relative; cursor: pointer; transition: background .12s, transform .1s; }
.dga-ev:hover { background: rgba(var(--w), calc(.92 * var(--wa))); transform: translateX(2px); }
.dga-ev-rail { width: 4px; align-self: stretch; border-radius: 99px; background: rgba(66, 133, 244, .55); flex: 0 0 auto; }
.dga-ev.dga-past .dga-ev-rail { background: rgba(120, 115, 105, .3); }
.dga-ev.dga-now { border-color: rgba(21, 115, 71, .4); box-shadow: 0 0 0 3px rgba(21, 115, 71, .12), 0 6px 16px -12px rgba(40,35,15,.3); }
.dga-ev.dga-now .dga-ev-rail { background: #157347; }
.dga-ev.dga-next { border-color: rgba(230, 185, 20, .55); box-shadow: 0 0 0 3px rgba(255, 222, 89, .25), 0 6px 16px -12px rgba(40,35,15,.3); }
.dga-ev.dga-next .dga-ev-rail { background: #E8C63F; }
.dga-ev-state { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.dga-ev-state.now { color: var(--c-green-txt); }
.dga-ev-state.next { color: var(--accent-deep); }
.dga-join {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-decoration: none;
  color: var(--c-blue-txt); background: rgba(66, 133, 244, .12);
  border: 1px solid rgba(66, 133, 244, .25);
  border-radius: 999px; padding: 6px 12px; transition: background .12s;
}
.dga-join:hover { background: rgba(66, 133, 244, .22); }
.dga-wday-head { justify-content: flex-start; gap: 7px; }
.dga-wday-dot { width: 8px; height: 8px; border-radius: 3px; background: #FFDE59; border: 1px solid rgba(160, 120, 0, .4); }
.dga-wday-n { margin-left: auto; }
.dga-wev { cursor: pointer; border-radius: 7px; padding: 3px 6px; margin: 0 -6px; transition: background .12s; }
.dga-wev:hover { background: rgba(var(--w), calc(.85 * var(--wa))); }
.dga-wev.dga-more:hover { background: transparent; cursor: default; }

/* ── Dashboard : outillage v2 — tuiles teintées + progression ── */
.d3-outil-global { margin-bottom: 12px; }
.d3-outil-global-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; }
.d3-outil-pct { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.d3-outil-stat { border-radius: 13px; padding: 12px 6px; }
.d3-outil-stat.is-green { background: rgba(21, 115, 71, .10); border-color: rgba(21, 115, 71, .22); }
.d3-outil-stat.is-green .d3-outil-n { color: var(--c-green-txt); }
.d3-outil-stat.is-red { background: rgba(180, 35, 24, .08); border-color: rgba(180, 35, 24, .2); }
.d3-outil-stat.is-red .d3-outil-n { color: var(--c-red-txt); }
.d3-outil-stat.is-blue { background: rgba(26, 86, 219, .08); border-color: rgba(26, 86, 219, .2); }
.d3-outil-stat.is-blue .d3-outil-n { color: var(--c-blue-txt); }
.d3-outil-n { font-size: 24px; }

/* ── Agenda dashboard : semaine v3 « éphéméride » ─────── */
.dga-grid { grid-template-columns: 1fr 1fr; }
.dga-week { gap: 10px; }
.dga-wcard {
  display: flex; align-items: stretch; gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(var(--w), calc(.62 * var(--wa)));
  border: 1px solid rgba(var(--w), calc(.65 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.75 * var(--wa))) inset, 0 8px 20px -16px rgba(40, 35, 15, .3);
  transition: background .12s, transform .1s;
}
.dga-wcard:hover { background: rgba(var(--w), calc(.85 * var(--wa))); transform: translateX(2px); }
/* Bloc date façon éphéméride : bandeau jaune + gros numéro */
.dga-wdate {
  flex: 0 0 auto; width: 52px; align-self: center;
  display: flex; flex-direction: column; align-items: center;
  border-radius: 11px; overflow: hidden;
  background: var(--bg-2); border: 1px solid rgba(var(--k), calc(.1 * var(--ka)));
  box-shadow: 0 2px 6px -3px rgba(40, 35, 15, .25);
}
.dga-wdow {
  align-self: stretch; text-align: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #3d2c00; background: #FFDE59; padding: 2px 0 1px;
}
.dga-wnum { font-size: 21px; font-weight: 800; line-height: 1.1; color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.dga-wmon { font-size: 9.5px; font-weight: 600; color: var(--text-3); margin-bottom: 3px; }
.dga-wevs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.dga-wev {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 6px; margin: 0; border-radius: 8px;
  font-size: 12.5px; white-space: normal;
}
.dga-wev:hover { background: rgba(255, 222, 89, .18); }
.dga-wev-time {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 12px;
  color: var(--c-yellow-txt); background: rgba(255, 222, 89, .3); border-radius: 6px; padding: 1px 6px;
}
.dga-wev-title {
  flex: 1 1 auto; min-width: 0; color: var(--text); font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dga-wev-meet { flex: 0 0 auto; color: var(--c-blue-txt); align-self: center; }

/* ── Agenda semaine : jours vides (affichés quand même) ── */
.dga-wcard.is-empty { background: rgba(var(--w), calc(.4 * var(--wa))); box-shadow: none; }
.dga-wcard.is-empty:hover { transform: none; background: rgba(var(--w), calc(.5 * var(--wa))); }
.dga-wcard.is-empty .dga-wdate { opacity: .55; box-shadow: none; }
.dga-wcard.is-empty .dga-wdow { background: rgba(255, 222, 89, .5); }
.dga-wempty { font-size: 12px; color: var(--text-3); font-style: italic; padding: 3px 6px; }

/* ── Agenda dashboard v4 : semaine à l'HORIZONTAL, identité unifiée ──
   Aujourd'hui = 1re colonne large et mise en avant ; les 6 jours suivants
   côte à côte, mêmes cartes (dga-slot) que la colonne du jour. */
.dga-week-row {
  display: grid;
  grid-template-columns: 1.7fr repeat(6, 1fr);
  gap: 10px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 2px;
}
@media (max-width: 960px) {
  .dga-week-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(158px, 1fr); }
  .dga-daycol.is-today { grid-column: auto; }
}
.dga-daycol {
  display: flex; flex-direction: column; min-width: 0;
  background: rgba(var(--w), calc(.5 * var(--wa)));
  border: 1px solid rgba(var(--w), calc(.6 * var(--wa)));
  border-radius: 14px; overflow: hidden;
}
.dga-daycol.is-today {
  background: rgba(var(--w), calc(.74 * var(--wa)));
  border-color: rgba(255, 222, 89, .55);
  box-shadow: 0 1px 1px rgba(var(--w), calc(.85 * var(--wa))) inset, 0 12px 28px -18px rgba(180, 140, 0, .4);
}
.dga-daycol.is-empty { background: rgba(var(--w), calc(.3 * var(--wa))); }

/* En-tête de jour */
.dga-dhead {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 8px 6px 7px; border-bottom: 1px solid rgba(var(--k), calc(.06 * var(--ka)));
}
.dga-dh-dow { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6b5a1c; }
.dga-dh-num { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.dga-dh-mon { font-size: 9.5px; font-weight: 600; color: var(--text-3); }
.dga-daycol.is-empty .dga-dh-dow { color: var(--text-3); }
/* Aujourd'hui : bandeau doré Maint Up */
.dga-dhead.is-today {
  flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px;
  padding: 10px 14px; background: #FFDE59; border-bottom: 0;
}
.dga-dh-today { font-size: 15px; font-weight: 800; color: #3d2c00; letter-spacing: -.01em; }
.dga-dh-sub { font-size: 12px; font-weight: 600; color: rgba(61, 44, 0, .72); }

.dga-daycol-body { display: flex; flex-direction: column; gap: 6px; padding: 8px; flex: 1 1 auto; }

/* Carte RDV unifiée */
.dga-slot {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 7px 9px 7px 14px; border-radius: 10px;
  background: rgba(var(--w), calc(.72 * var(--wa))); border: 1px solid rgba(var(--k), calc(.06 * var(--ka)));
  cursor: pointer; transition: background .12s, transform .1s, box-shadow .12s;
}
.dga-slot::before {
  content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 9px; background: rgba(66, 133, 244, .5);
}
.dga-slot:hover { background: var(--bg-2); transform: translateY(-1px); }
.dga-slot.is-past { opacity: .5; }
.dga-slot.is-now { border-color: rgba(21, 115, 71, .4); box-shadow: 0 0 0 2px rgba(21, 115, 71, .12); }
.dga-slot.is-now::before { background: #157347; }
.dga-slot.is-next { border-color: rgba(230, 185, 20, .5); box-shadow: 0 0 0 2px rgba(255, 222, 89, .22); }
.dga-slot.is-next::before { background: #E8C63F; }
.dga-slot-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dga-slot-time {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 12px;
  color: var(--c-yellow-txt); background: rgba(255, 222, 89, .32); border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}
.dga-slot-title {
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dga-daycol.is-today .dga-slot-title { font-size: 13.5px; }
.dga-daycol.is-today .dga-slot-time { font-size: 13px; }
.dga-slot-state { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.dga-slot-state.now { color: var(--c-green-txt); }
.dga-slot-state.next { color: var(--accent-deep); }
.dga-slot-meet {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  color: var(--c-blue-txt); background: rgba(66, 133, 244, .12); text-decoration: none; transition: background .12s;
}
.dga-slot-meet:hover { background: rgba(66, 133, 244, .24); }
.dga-daycol.is-today .dga-join { margin-top: 2px; align-self: flex-start; }

/* ── Agenda dashboard v5 : refonte iOS 26 (Liquid Glass) ──
   Remplace le look « bandeau jaune » : verre neutre, hairlines,
   aujourd'hui = numéro dans un cercle noir (façon iOS Calendar),
   RDV = blocs teintés avec barrette intérieure. */
.dga-card {
  background: rgba(var(--w), calc(.58 * var(--wa)));
  border-radius: 24px;
  border: 1px solid rgba(var(--w), calc(.75 * var(--wa)));
}
.dga-count { background: rgba(var(--k), calc(.06 * var(--ka))); color: var(--text-2); }
.dga-open-cal { border-radius: 999px; }

.dga-week-row { gap: 8px; }
.dga-daycol {
  background: rgba(var(--w), calc(.34 * var(--wa)));
  border: 1px solid rgba(var(--w), calc(.55 * var(--wa)));
  border-radius: 18px;
  box-shadow: 0 1px 1px rgba(var(--w), calc(.6 * var(--wa))) inset;
}
.dga-daycol.is-today {
  background: rgba(var(--w), calc(.8 * var(--wa)));
  border-color: rgba(var(--w), calc(.9 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.95 * var(--wa))) inset,
              0 18px 40px -24px rgba(40, 35, 15, .35);
}
.dga-daycol.is-empty { background: rgba(var(--w), calc(.22 * var(--wa))); }
.dga-daycol.is-empty .dga-daycol-body { opacity: .8; }

/* En-têtes de jour : épurés, sans bandeau */
.dga-dhead, .dga-dhead.is-today {
  flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 6px 8px; background: transparent;
  border-bottom: 1px solid rgba(var(--k), calc(.05 * var(--ka)));
}
.dga-dh-dow {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.dga-dhead.is-today .dga-dh-dow { color: var(--text); font-weight: 800; }
.dga-dh-num {
  font-size: 20px; font-weight: 700; color: var(--text);
  min-width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; font-variant-numeric: tabular-nums;
}
.dga-dhead.is-today .dga-dh-num {
  background: #111827; color: #fff; font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(17, 24, 39, .5);
}
.dga-dh-mon { font-size: 9.5px; font-weight: 600; color: var(--text-3); }

/* RDV : blocs teintés iOS (barrette intérieure, heure colorée, pas de pastille) */
.dga-slot {
  background: rgba(66, 133, 244, .09);
  border: 0; border-radius: 12px;
  padding: 7px 10px 8px 15px;
}
.dga-slot::before { left: 6px; top: 7px; bottom: 7px; width: 3.5px; background: rgba(26, 86, 219, .75); }
.dga-slot:hover { background: rgba(66, 133, 244, .16); transform: none; box-shadow: none; }
.dga-slot-time {
  background: transparent; padding: 0; border-radius: 0;
  font-size: 11.5px; font-weight: 700; color: var(--c-blue-txt);
}
.dga-daycol.is-today .dga-slot-time { font-size: 12.5px; }
.dga-slot-title { font-weight: 600; }
/* États */
.dga-slot.is-past { background: rgba(var(--k), calc(.045 * var(--ka))); opacity: .62; }
.dga-slot.is-past::before { background: rgba(var(--k), calc(.25 * var(--ka))); }
.dga-slot.is-past .dga-slot-time { color: var(--text-3); }
.dga-slot.is-now { background: rgba(21, 115, 71, .1); border: 0; box-shadow: none; }
.dga-slot.is-now::before { background: #157347; }
.dga-slot.is-now .dga-slot-time { color: var(--c-green-txt); }
.dga-slot.is-next { background: rgba(230, 185, 20, .13); border: 0; box-shadow: none; }
.dga-slot.is-next::before { background: #d9a800; }
.dga-slot.is-next .dga-slot-time { color: var(--c-yellow-txt); }
/* Rejoindre : pilule de verre bleue */
.dga-join {
  background: rgba(66, 133, 244, .14); border: 0; border-radius: 999px;
  color: var(--c-blue-txt); font-size: 12px; padding: 5px 12px;
}
.dga-join:hover { background: rgba(66, 133, 244, .25); }
.dga-wempty { text-align: center; padding: 10px 4px; font-size: 11.5px; }

/* ── Agenda v5.1 : version compacte (tout réduit) ── */
.dga-card { padding: 14px 16px 14px; border-radius: 20px; }
.dga-head { margin-bottom: 10px; gap: 8px; }
.dga-head-title h3 { font-size: 15px; }
.dga-head-title { gap: 6px; }
.dga-count { font-size: 11px; padding: 2px 8px; }
.dga-live { font-size: 11px; padding: 3px 9px; }
.dga-open-cal { font-size: 11.5px; padding: 5px 10px; }
.dga-week-row { grid-template-columns: 1.45fr repeat(6, 1fr); gap: 6px; }
.dga-daycol { border-radius: 14px; }
.dga-dhead, .dga-dhead.is-today { padding: 6px 4px 5px; }
.dga-dh-dow { font-size: 8.5px; }
.dga-dh-num { font-size: 15px; min-width: 25px; height: 25px; }
.dga-dh-mon { font-size: 8.5px; }
.dga-daycol-body { padding: 5px; gap: 4px; }
.dga-slot { padding: 5px 7px 6px 12px; border-radius: 10px; }
.dga-slot::before { left: 5px; top: 6px; bottom: 6px; width: 3px; }
.dga-slot-time { font-size: 10.5px; }
.dga-daycol.is-today .dga-slot-time { font-size: 11.5px; }
.dga-slot-title { font-size: 11px; }
.dga-daycol.is-today .dga-slot-title { font-size: 12.5px; }
.dga-slot-state { font-size: 9px; }
.dga-join { font-size: 11px; padding: 3px 10px; }
.dga-join .btn-icon { width: 11px; height: 11px; }
.dga-wempty { font-size: 10.5px; padding: 6px 3px; }

/* ── Dashboard réorganisé : bande du haut = héro + KPIs 2×2 ── */
.d3-top {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.d3-top .d3-hero { margin: 0; padding: 20px 22px 18px; }
.d3-top .d3-hero h1 { font-size: 24px; }
.d3-top .d3-hero-summary { font-size: 13px; }
.d3-top .d3-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.d3-top .d3-kpi { padding: 12px 14px; border-radius: 15px; }
.d3-top .d3-kpi-val { font-size: 20px; }
.d3-top .d3-kpi-head { font-size: 11.5px; }
.d3-top .d3-kpi-meta { font-size: 10.5px; }
@media (max-width: 1100px) {
  .d3-top { grid-template-columns: 1fr; }
  .d3-top .d3-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ── Dashboard : carte Répartition v2 (barres segmentées + puces) ── */
.d3-repart { grid-template-columns: 1fr; gap: 16px; }
.d3-rp-bar {
  display: flex; gap: 2px;
  height: 10px; border-radius: 99px; overflow: hidden;
  background: rgba(var(--k), calc(.05 * var(--ka)));
  margin: 7px 0 8px;
}
.d3-rp-seg { display: block; min-width: 6px; border-radius: 99px; }
.d3-rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.d3-rp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text-2);
  background: rgba(var(--w), calc(.6 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.06 * var(--ka)));
  border-radius: 999px; padding: 3px 9px;
}
.d3-rp-chip b { color: var(--text); font-weight: 700; }
.d3-rp-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* ── Dashboard pleine largeur (fini le cap 1240px) ── */
.dashboard-v3 { max-width: none; }

/* ── Agenda : la colonne Aujourd'hui retrouve les grandes cartes v1 ── */
.dga-daycol.is-today .dga-daycol-body { padding: 8px; gap: 8px; }
.dga-daycol.is-today .dga-ev { border-radius: 12px; }

/* ── Aujourd'hui : colonne élargie pour les grandes cartes v1 ── */
.dga-week-row { grid-template-columns: 2.1fr repeat(6, 1fr); }
.dga-daycol.is-today .dga-ev-title {
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}
.dga-daycol.is-today .dga-join { flex: 0 0 auto; }

/* Pilule Rejoindre sous le titre (colonne étroite) */
.dga-daycol.is-today .dga-ev .dga-join { margin-top: 5px; display: inline-flex; align-self: flex-start; }
.dga-daycol.is-today .dga-ev-body { display: flex; flex-direction: column; align-items: flex-start; }

/* ── Dashboard : ajout rapide de tâche (+ option Google Agenda) ── */
.d3-qa {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 7px;
  background: rgba(var(--w), calc(.5 * var(--wa)));
  border: 1px solid rgba(var(--w), calc(.6 * var(--wa)));
  border-radius: 13px;
}
.d3-qa input {
  font-family: inherit; font-size: 12.5px; color: var(--text);
  background: rgba(var(--w), calc(.72 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.08 * var(--ka)));
  border-radius: 9px; padding: 7px 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.d3-qa input:focus {
  outline: none; background: var(--bg-2);
  border-color: rgba(210, 170, 20, .5);
  box-shadow: 0 0 0 3px rgba(255, 222, 89, .25);
}
.d3-qa-text { flex: 1 1 140px; min-width: 0; }
.d3-qa-date { width: 118px; }
.d3-qa-time { width: 78px; }
.d3-qa-g {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  color: var(--text-3); background: rgba(var(--w), calc(.6 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.08 * var(--ka)));
  border-radius: 999px; padding: 6px 11px;
  transition: background .12s, color .12s, border-color .12s;
}
.d3-qa-g.active {
  color: var(--c-blue-txt); background: rgba(66, 133, 244, .12);
  border-color: rgba(66, 133, 244, .3);
}
.d3-qa-add {
  width: 32px; height: 32px; flex: 0 0 auto; cursor: pointer;
  display: grid; place-items: center;
  background: #111827; color: #fff; border: 0; border-radius: 10px;
  transition: background .12s, transform .08s;
}
.d3-qa-add:hover { background: #000; }
.d3-qa-add:active { transform: scale(.94); }

/* ── Bande « Ma journée » : agenda + tâches côte à côte, tout en haut ── */
.d3-daily {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 1250px) { .d3-daily { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 1080px) { .d3-daily { grid-template-columns: 1fr; } }
.d3-daily .dga-card { min-width: 0; }
/* La carte tâches au niveau du panneau agenda : même présence visuelle */
.d3-card-tasks {
  display: flex; flex-direction: column;
  border-radius: 20px;
  background:
    radial-gradient(360px 180px at 96% -20%, rgba(255, 222, 89, .22), transparent 65%),
    rgba(var(--w), calc(.66 * var(--wa)));
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(var(--w), calc(.7 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.85 * var(--wa))) inset,
              0 18px 44px -26px rgba(40, 35, 15, .38);
}
.d3-card-tasks .d3-card-head h3 { font-size: 15px; font-weight: 800; }
.d3-card-tasks-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; max-height: 300px; }
.d3-count-alert { background: rgba(180, 35, 24, .12); color: var(--c-red-txt); }
/* Dans la bande, la semaine agenda peut se resserrer un peu */
.d3-daily .dga-week-row { grid-template-columns: 2fr repeat(6, 1fr); }

/* ── Cartes prospects/clients : enrichissements ─────────── */
/* RDV Google à venir */
.card-rdv {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--c-blue-txt);
  background: rgba(66, 133, 244, .12);
  border: 1px solid rgba(66, 133, 244, .25);
  border-radius: 999px; padding: 3px 9px; margin: 4px 0 2px;
}
.card-rdv-icon { color: var(--c-blue-txt); }
/* CA réel client */
.card-ca {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--c-green-txt);
  background: rgba(21, 115, 71, .1);
  border: 1px solid rgba(21, 115, 71, .22);
  border-radius: 999px; padding: 3px 9px; margin: 4px 0 2px;
}
.card-ca-icon { color: inherit; }
/* Client sans mission active */
.card-reactiver {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--c-red-txt);
  background: rgba(180, 35, 24, .08);
  border: 1px solid rgba(180, 35, 24, .22);
  border-radius: 999px; padding: 3px 9px; margin: 4px 0 2px;
}
/* Échéance de contrat */
.card-contrat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 3px 9px; margin: 4px 0 2px 6px;
}
.card-contrat-soon { color: var(--c-yellow-txt); background: rgba(234, 179, 8, .14); border: 1px solid rgba(234, 179, 8, .3); }
.card-contrat-late { color: var(--c-red-txt); background: rgba(180, 35, 24, .1); border: 1px solid rgba(180, 35, 24, .28); }
/* Boutons appel / mail */
.card-comm { display: flex; gap: 4px; margin-left: auto; flex: 0 0 auto; }
.card-comm-btn {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; text-decoration: none;
  color: var(--text-2); background: rgba(var(--w), calc(.7 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.08 * var(--ka)));
  transition: background .12s, color .12s;
}
.card-comm-btn:hover { background: #FFDE59; color: #3d2c00; }
/* Chips de raison de perte (modale) */
.raison-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.raison-chip {
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: var(--text-2); background: rgba(var(--w), calc(.65 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.1 * var(--ka)));
  border-radius: 999px; padding: 6px 13px;
  transition: background .12s, color .12s, border-color .12s;
}
.raison-chip:hover { background: var(--bg-2); }
.raison-chip.active {
  color: var(--c-red-txt); background: rgba(180, 35, 24, .09);
  border-color: rgba(180, 35, 24, .35);
}

/* ── Choix de messagerie (boutons e-mail) ─────────────── */
.mail-choices { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.mail-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; cursor: pointer; font-family: inherit;
  padding: 12px 15px; border-radius: 13px;
  background: rgba(var(--w), calc(.65 * var(--wa)));
  border: 1.5px solid rgba(var(--k), calc(.09 * var(--ka)));
  transition: background .12s, border-color .12s;
}
.mail-choice:hover { background: var(--bg-2); border-color: rgba(210, 170, 20, .45); }
.mail-choice.active { border-color: #E8C63F; background: rgba(255, 222, 89, .14); }
.mail-choice-l { font-size: 14.5px; font-weight: 700; color: var(--text); }
.mail-choice-d { font-size: 12px; color: var(--text-3); }
.mail-remember { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }

/* ── Dashboard : carte Complétude des données ─────────── */
.dc-mods { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.dc-mod {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-align: left;
}
.dc-mod-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dc-mod-lbl { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.dc-mod:hover .dc-mod-lbl { color: var(--text); }
.dc-mod-pct { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dc-ok   { color: var(--c-green-txt); }
.dc-warn { color: var(--accent-deep); }
.dc-low  { color: var(--c-red-txt); }
.d3-count.dc-ok   { background: rgba(21,115,71,.12); }
.d3-count.dc-warn { background: rgba(255,222,89,.30); }
.d3-count.dc-low  { background: rgba(180,35,24,.12); }
.dc-fill-ok   { background: linear-gradient(90deg, #4fbe89, #157347) !important; }
.dc-fill-warn { background: linear-gradient(90deg, #f7dc60, #E8C63F) !important; }
.dc-fill-low  { background: linear-gradient(90deg, #e88b80, #b42318) !important; }
.dc-actions { display: flex; flex-direction: column; gap: 6px; }
.dc-action {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 11px; cursor: pointer; font-family: inherit; text-align: left;
  background: rgba(var(--w), calc(.55 * var(--wa))); border: 1px solid rgba(var(--k), calc(.06 * var(--ka)));
  transition: background .12s, transform .1s;
}
.dc-action:hover { background: var(--bg-2); transform: translateX(2px); }
.dc-action-n {
  flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 8px;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(var(--k), calc(.07 * var(--ka))); color: var(--text);
}
.dc-action-n.dc-n-alert { background: rgba(180, 35, 24, .12); color: var(--c-red-txt); }
.dc-action-txt { flex: 1 1 auto; font-size: 12.5px; color: var(--text-2); line-height: 1.3; }
.dc-action-go { flex: 0 0 auto; color: var(--text-3); transform: rotate(-90deg); opacity: .6; }
.dc-action:hover .dc-action-go { opacity: 1; }

/* ── Techniciens : habilitations avec validité ─────────── */
.tech-hab-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 7px; border-radius: 12px;
  background: rgba(var(--w), calc(.62 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.07 * var(--ka)));
}
.tech-hab-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-3); }
.tech-hab-row.hab-ok .tech-hab-dot { background: #157347; }
.tech-hab-row.hab-soon .tech-hab-dot { background: #E8C63F; }
.tech-hab-row.hab-expired .tech-hab-dot { background: #b42318; }
.tech-hab-row.hab-expired { border-color: rgba(180, 35, 24, .3); background: rgba(180, 35, 24, .05); }
.tech-hab-row.hab-soon { border-color: rgba(230, 185, 20, .35); background: rgba(255, 222, 89, .1); }
.tech-hab-main { flex: 1 1 auto; min-width: 0; }
.tech-hab-name { font-size: 13.5px; font-weight: 650; color: var(--text); }
.tech-hab-meta { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.tech-hab-row.hab-expired .tech-hab-meta { color: var(--c-red-txt); font-weight: 600; }
.tech-hab-row.hab-soon .tech-hab-meta { color: var(--accent-deep); font-weight: 600; }
.tech-hab-date {
  flex: 0 0 auto; width: 132px; font-family: inherit; font-size: 12px;
  padding: 5px 8px; border-radius: 8px;
  border: 1px solid rgba(var(--k), calc(.1 * var(--ka))); background: rgba(var(--w), calc(.8 * var(--wa))); color: var(--text);
}
.tech-hab-newdate { flex: 0 0 auto; width: 140px; }
.tech-detail-hab-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tech-detail-hab-add .field-input { flex: 1 1 160px; }

/* Coordonnées & contrat */
.tech-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.tech-info-f { display: flex; flex-direction: column; gap: 4px; }
.tech-info-f span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.tech-info-note { margin-top: 10px; font-size: 12px; color: var(--text-2); }

/* Chips d'état + alertes habilitations */
.vp-chip.chip-danger { background: rgba(180, 35, 24, .1); color: var(--c-red-txt); border-color: rgba(180, 35, 24, .25); font-weight: 600; }
.vp-chip.chip-warn { background: rgba(255, 222, 89, .25); color: var(--c-yellow-txt); border-color: rgba(230, 185, 20, .35); font-weight: 600; }
.tk-alertes-hab { border-color: rgba(180, 35, 24, .25); background: rgba(180, 35, 24, .05); }
.tk-alerte-chip.chip-danger { background: rgba(180, 35, 24, .12); color: var(--c-red-txt); border-color: rgba(180, 35, 24, .3); }
.tk-alerte-chip.chip-warn { background: rgba(255, 222, 89, .3); color: var(--c-yellow-txt); border-color: rgba(230, 185, 20, .4); }
.tk-comm { margin-left: auto; margin-right: 4px; }

/* ═══ OPTIMISATION : kanban adaptatif (toutes les colonnes visibles) ═══
   Les colonnes se partagent la largeur disponible au lieu d'être figées
   à 300 px — fini le scroll horizontal permanent. En dessous de 1100 px
   on revient au défilement classique. */
.kanban-container { padding: 14px 20px 20px; }
.kanban-board, #kanban-container > .kanban { gap: 12px; }
@media (min-width: 1100px) {
  .column {
    width: auto;
    flex: 1 1 0;
    min-width: 230px;
    max-width: 420px;
  }
}
/* Cartes un cran plus denses : plus de fiches visibles sans scroller */
.card { padding: 9px 11px; }
.card-title { font-size: 13.5px; }
.card-meta-row { font-size: 11px; }
.card-tags, .card-custom-tags { gap: 4px; }

/* ── Bouton « contacté » + aide raccourcis ────────────── */
.card-comm { display: flex; gap: 4px; flex: 0 0 auto; margin-left: auto; opacity: 0; transition: opacity .14s; }
.card:hover .card-comm, .card-comm:focus-within { opacity: 1; }
@media (hover: none) { .card-comm { opacity: 1; } }
.card-comm-btn {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(var(--w), calc(.8 * var(--wa))); border: 1px solid rgba(var(--k), calc(.09 * var(--ka)));
  color: var(--text-2); text-decoration: none; transition: background .12s, color .12s, border-color .12s;
}
.card-comm-btn:hover { background: var(--bg-2); color: var(--text); border-color: rgba(var(--k), calc(.2 * var(--ka))); }
.card-contacted:hover { background: rgba(21, 115, 71, .12); color: var(--c-green-txt); border-color: rgba(21, 115, 71, .35); }
.kb-help { display: flex; flex-direction: column; gap: 9px; }
.kb-help-row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-2); }
.kb-help-row kbd {
  flex: 0 0 auto; min-width: 82px; text-align: center;
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12px; font-weight: 700;
  background: rgba(var(--k), calc(.06 * var(--ka))); border: 1px solid rgba(var(--k), calc(.12 * var(--ka)));
  border-bottom-width: 2px; border-radius: 7px; padding: 4px 8px; color: var(--text);
}

/* ── Fiche : champs secondaires repliés ───────────────── */
.panel-more { margin: 4px 0 6px; }
.panel-more-sum {
  display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  padding: 9px 12px; border-radius: 11px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  background: rgba(var(--w), calc(.55 * var(--wa))); border: 1px dashed rgba(var(--k), calc(.14 * var(--ka)));
  transition: background .12s, color .12s;
}
.panel-more-sum::-webkit-details-marker { display: none; }
.panel-more-sum:hover { background: var(--bg-2); color: var(--text); }
.panel-more[open] .panel-more-sum { margin-bottom: 8px; border-style: solid; }
.panel-more[open] .panel-more-sum .btn-icon { transform: rotate(45deg); }
.panel-more-sum .btn-icon { transition: transform .15s; }

/* ── Alerte : technicien sur plusieurs missions actives ── */
.tk-alertes-doublon { border-color: rgba(180, 35, 24, .3); background: rgba(180, 35, 24, .06); }
.tk-doublon-list { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.tk-doublon-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(var(--w), calc(.7 * var(--wa))); border: 1px solid rgba(180, 35, 24, .18);
  font-size: 12.5px;
}
.tk-doublon-row strong { color: var(--text); }
.tk-doublon-miss { color: var(--c-red-txt); font-weight: 600; }
.tk-doublon-hint { color: var(--text-3); font-style: italic; margin-left: auto; }
.tk-status-doublon {
  background: rgba(180, 35, 24, .1); color: var(--c-red-txt);
  border: 1px solid rgba(180, 35, 24, .25); font-weight: 600; margin-top: 5px;
}

/* ── Simulateur : rotation tenue par un seul tech ─────── */
.sim-hor-rot { margin-top: 10px; }
.sim-hor-rotnote {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 10px 0 0; padding: 11px 14px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--c-blue-txt);
  background: rgba(66, 133, 244, .08); border: 1px solid rgba(66, 133, 244, .22);
}
.sim-hor-rotnote .btn-icon { flex: 0 0 auto; margin-top: 2px; }
.sim-hor-rotnote strong { color: #14439c; }
.sim-warn-sub { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(180,90,20,.2); font-size: 12px; opacity: .9; }

/* ── Simulateur : bouton « Première proposition » ─────── */
.sim-hor-first {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 11px 14px; border-radius: 13px;
  background: rgba(255, 222, 89, .14); border: 1px solid rgba(230, 185, 20, .3);
}
.sim-hor-first.is-on { background: rgba(21, 115, 71, .08); border-color: rgba(21, 115, 71, .25); }
.sim-hor-first-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #3d2c00;
  background: #FFDE59; border: 0; border-radius: 999px; padding: 8px 15px;
  box-shadow: 0 3px 10px -4px rgba(190, 150, 0, .5);
  transition: filter .12s, transform .08s;
}
.sim-hor-first-btn:hover { filter: brightness(.97); }
.sim-hor-first-btn:active { transform: scale(.98); }
.sim-hor-first-txt { flex: 1 1 200px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.sim-hor-first.is-on .sim-hor-first-txt { color: #146c43; }
.sim-hor-rotnote em { font-style: italic; opacity: .85; }

/* ── Dashboard : horaires à confirmer ─────────────────── */
.d3-card-horaires { border-color: rgba(230, 185, 20, .4); background:
  radial-gradient(320px 160px at 92% -25%, rgba(255, 222, 89, .22), transparent 65%), rgba(var(--w), calc(.66 * var(--wa))); }
.d3-hor-intro { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 0 0 10px; }
.d3-hor-item { width: 100%; text-align: left; background: none; border: 0; font-family: inherit; cursor: pointer; }
.d3-count-alert { background: rgba(230, 185, 20, .28); color: var(--c-yellow-txt); }

/* ═══ Techniciens : en-tête compact, pastilles, vue liste ═══ */
/* Bandeau d'alertes fusionné, dépliable */
.tk-al { margin-bottom: 12px; }
.tk-al-sum {
  display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
  padding: 9px 14px; border-radius: 12px; font-size: 13px; color: var(--text-2);
  background: rgba(255, 222, 89, .16); border: 1px solid rgba(230, 185, 20, .32);
}
.tk-al-sum::-webkit-details-marker { display: none; }
.tk-al-sum.is-danger { background: rgba(180, 35, 24, .07); border-color: rgba(180, 35, 24, .28); color: var(--c-red-txt); }
.tk-al-sum strong { color: inherit; font-size: 14px; }
.tk-al-tags { display: flex; gap: 5px; margin-left: 4px; }
.tk-al-tag { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.tk-al-tag.tk-al-danger { background: rgba(180, 35, 24, .15); color: var(--c-red-txt); }
.tk-al-tag.tk-al-warn { background: rgba(230, 185, 20, .3); color: var(--c-yellow-txt); }
.tk-al-more { margin-left: auto; font-size: 11.5px; font-weight: 700; opacity: .7; }
.tk-al[open] .tk-al-more::after { content: ' ▴'; }
.tk-al:not([open]) .tk-al-more::after { content: ' ▾'; }
.tk-al-body { padding: 12px 4px 2px; display: flex; flex-direction: column; gap: 12px; }
.tk-al-titre { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.tk-al-titre.tk-al-danger { color: var(--c-red-txt); }
.tk-al-titre.tk-al-warn { color: var(--c-yellow-txt); }
.tk-al-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; padding: 5px 0; }

/* Barre stats + outils */
.tk-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-stats-slim { flex: 1 1 420px; gap: 8px; margin: 0; }
.tk-stats-slim .tk-stat { padding: 9px 12px; border-radius: 12px; }
.tk-stats-slim .tk-stat-val { font-size: 17px; }
.tk-stats-slim .tk-stat-lbl { font-size: 10px; }
.tk-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tk-search {
  width: 210px; font-family: inherit; font-size: 12.5px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid rgba(var(--k), calc(.1 * var(--ka)));
  background: rgba(var(--w), calc(.6 * var(--wa))); color: var(--text);
}
.tk-search:focus { outline: none; background: var(--bg-2); border-color: rgba(210, 170, 20, .5); box-shadow: 0 0 0 3px rgba(255, 222, 89, .25); }
.tk-view button { font-size: 12px; }

/* Pastilles d'état sur les cartes */
.tk-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tk-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--text-2);
  background: rgba(var(--w), calc(.7 * var(--wa))); border: 1px solid rgba(var(--k), calc(.08 * var(--ka)));
  border-radius: 999px; padding: 3px 9px;
}
.tk-pill .btn-icon { opacity: .65; }
.tk-pill-warn { background: rgba(255, 222, 89, .25); color: var(--c-yellow-txt); border-color: rgba(230, 185, 20, .35); }
.tk-pill-danger { background: rgba(180, 35, 24, .1); color: var(--c-red-txt); border-color: rgba(180, 35, 24, .25); }
.tk-renta-slim { gap: 6px; margin-top: 9px; }
.tk-renta-slim .tk-renta-val { font-size: 15px; }
.tk-renta-slim .tk-renta-lbl { font-size: 10px; }

/* Vue LISTE (tableau) */
.tkt-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(var(--w), calc(.6 * var(--wa))); background: rgba(var(--w), calc(.6 * var(--wa))); }
.tkt { width: 100%; border-collapse: collapse; min-width: 800px; }
.tkt thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); padding: 11px 14px; background: rgba(var(--w), calc(.5 * var(--wa)));
  border-bottom: 1px solid rgba(var(--k), calc(.07 * var(--ka)));
}
.tkt td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid rgba(var(--k), calc(.05 * var(--ka))); vertical-align: middle; }
.tkt tbody tr { cursor: pointer; transition: background .12s; }
.tkt tbody tr:hover { background: rgba(255, 222, 89, .12); }
.tkt tbody tr:last-child td { border-bottom: 0; }
.tkt-row-off { opacity: .55; }
.tkt-nom strong { display: block; font-size: 13.5px; }
.tkt-sub { font-size: 11px; color: var(--text-3); }
.tkt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tkt-mute { color: var(--text-3); }
.tkt-ok { color: var(--c-green-txt); font-weight: 600; }
.tkt-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tkt-badge.tkt-ok { background: rgba(21, 115, 71, .12); color: var(--c-green-txt); }
.tkt-badge.tkt-libre { background: rgba(230, 185, 20, .28); color: var(--c-yellow-txt); }
.tkt-badge.tkt-alert { background: rgba(180, 35, 24, .12); color: var(--c-red-txt); }
.tkt-badge.tkt-off { background: rgba(120, 115, 105, .14); color: var(--text-3); }

/* ── Fiche technicien : 3 blocs + bandeau d'infos clés ── */
.tech-detail-identity { display: flex; align-items: center; gap: 14px; }
.tk-fiche-comm { opacity: 1; margin-left: auto; }
.tk-fiche-comm .card-comm-btn { width: 32px; height: 32px; }
.tech-detail-identity-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.tk-fb {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  background: rgba(var(--w), calc(.7 * var(--wa))); border: 1px solid rgba(var(--k), calc(.07 * var(--ka)));
  border-radius: 999px; padding: 3px 10px;
}
.tk-fb .btn-icon { opacity: .6; }
.tk-fb-ok { background: rgba(21, 115, 71, .1); color: var(--c-green-txt); border-color: rgba(21, 115, 71, .2); }
.tk-fb-warn { background: rgba(255, 222, 89, .28); color: var(--c-yellow-txt); border-color: rgba(230, 185, 20, .35); }
/* Étiquette de bloc */
.tk-bloc-lbl {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin: 18px 0 10px;
}
.tk-bloc-lbl .btn-icon { opacity: .7; }
/* Blocs repliables */
.tk-bloc { margin-top: 14px; }
.tk-bloc-sum {
  display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
  padding: 11px 15px; border-radius: 13px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
  background: rgba(var(--w), calc(.55 * var(--wa))); border: 1px solid rgba(var(--k), calc(.08 * var(--ka)));
  transition: background .12s, color .12s;
}
.tk-bloc-sum::-webkit-details-marker { display: none; }
.tk-bloc-sum:hover { background: var(--bg-2); color: var(--text); }
.tk-bloc-hint { margin-left: auto; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.tk-bloc-sum::after { content: '▾'; font-size: 11px; opacity: .6; }
.tk-bloc[open] .tk-bloc-sum::after { content: '▴'; }
.tk-bloc[open] .tk-bloc-sum { margin-bottom: 12px; }

/* ── Caisses : statut lisible (Libre vs Chez X) ───────── */
.caisse-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ck-libre {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  color: #0f5132; background: rgba(21, 115, 71, .16);
  border: 1.5px solid rgba(21, 115, 71, .45); border-radius: 999px; padding: 4px 12px;
  box-shadow: 0 0 0 3px rgba(21, 115, 71, .08);
}
.ck-chez {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  background: rgba(var(--w), calc(.7 * var(--wa))); border: 1px solid rgba(var(--k), calc(.08 * var(--ka)));
  border-radius: 999px; padding: 4px 11px; max-width: 60%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-chez .btn-icon { opacity: .55; flex: 0 0 auto; }
.ck-etat-ok { font-size: 11px; font-weight: 700; color: var(--c-green-txt); margin-left: auto; }
.ck-check-warn { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-deep); font-weight: 600; }
.ck-stat-libre { border-color: rgba(21, 115, 71, .3) !important; background: rgba(21, 115, 71, .07) !important; }
.ck-stat-libre .tk-stat-val { color: var(--c-green-txt); }
/* Carte : la caisse libre se repère au premier regard */
.caisse-card:has(.ck-libre) { border-color: rgba(21, 115, 71, .32); }

/* ── Dashboard : fil « Cette semaine » ────────────────── */
.d3-fil { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(var(--k), calc(.08 * var(--ka))); }
.d3-fil-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}
.d3-fil-all {
  margin-left: auto; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--text-2); background: rgba(var(--w), calc(.6 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.08 * var(--ka))); border-radius: 999px; padding: 3px 10px;
  letter-spacing: 0; text-transform: none;
}
.d3-fil-all:hover { background: var(--bg-2); color: var(--text); }
.fil-item { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 12.5px; }
.fil-item-next { padding-bottom: 7px; margin-bottom: 3px; border-bottom: 1px dashed rgba(var(--k), calc(.08 * var(--ka))); }
.fil-dot {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; background: rgba(var(--k), calc(.05 * var(--ka))); color: var(--text-2);
}
.fil-blue   { background: rgba(66, 133, 244, .13); color: var(--c-blue-txt); }
.fil-green  { background: rgba(21, 115, 71, .13);  color: var(--c-green-txt); }
.fil-red    { background: rgba(180, 35, 24, .11);  color: var(--c-red-txt); }
.fil-purple { background: rgba(124, 58, 237, .12); color: var(--c-purple-txt); }
.fil-txt { flex: 1 1 auto; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fil-txt strong { color: var(--text); font-weight: 650; }
.fil-det { color: var(--text-3); }
.fil-meta { flex: 0 0 auto; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.fil-vide { font-size: 12.5px; color: var(--text-3); font-style: italic; padding: 4px 0; }

/* ── Journal d'activité (Utilisateurs) ────────────────── */
.ua-journal { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(var(--k), calc(.08 * var(--ka))); }
.ua-jr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ua-jr-head h3 { margin: 0; font-size: 17px; font-weight: 750; }
.ua-jr-count { font-size: 11.5px; font-weight: 700; color: var(--text-3); background: rgba(var(--k), calc(.06 * var(--ka))); border-radius: 999px; padding: 2px 9px; }
.ua-jr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.ua-jr-chip {
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--text-2); background: rgba(var(--w), calc(.65 * var(--wa)));
  border: 1px solid rgba(var(--k), calc(.09 * var(--ka))); border-radius: 999px; padding: 5px 12px;
}
.ua-jr-chip b { color: var(--text); }
.ua-jr-chip:hover { background: var(--bg-2); }
.ua-jr-chip.active { background: #111827; color: #fff; border-color: #111827; }
.ua-jr-chip.active b { color: #fff; }
.ua-jr-list { display: flex; flex-direction: column; gap: 2px; max-height: 460px; overflow-y: auto; }
.ua-jr-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px;
}
.ua-jr-row:nth-child(odd) { background: rgba(var(--w), calc(.5 * var(--wa))); }
.ua-jr-txt { flex: 1 1 auto; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-jr-txt strong { color: var(--text); }
.ua-jr-par { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--c-blue-txt); }
.ua-jr-date { flex: 0 0 auto; font-size: 11px; color: var(--text-3); min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }

/* Lignes du fil cliquables */
.fil-item {
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  background: none; border: 0; border-radius: 9px; margin: 0 -8px;
  padding: 5px 8px; width: calc(100% + 16px);
  transition: background .12s;
}
.fil-item:hover { background: rgba(var(--w), calc(.75 * var(--wa))); }
.fil-go { flex: 0 0 auto; color: var(--text-3); opacity: 0; transform: rotate(-90deg); transition: opacity .12s; }
.fil-item:hover .fil-go { opacity: .8; }
.hist-list { display: flex; flex-direction: column; gap: 2px; max-height: 440px; overflow-y: auto; margin-top: 12px; }
.hist-list .fil-item { margin: 0; width: 100%; }
.hist-list .fil-item:nth-child(odd) { background: rgba(var(--w), calc(.45 * var(--wa))); }
.hist-list .fil-item:hover { background: rgba(255, 222, 89, .18); }

/* ══════════ AVATARS & PROFIL ══════════ */
/* Une photo (ou des initiales) partout où un utilisateur apparaît :
   barre du haut, écran Utilisateurs, journal des actions, fil du jour. */
.av {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  vertical-align: middle;
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px rgba(var(--k), calc(.08 * var(--ka)));
}
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-ini { color: #fff; font-weight: 700; letter-spacing: -.02em; }

/* Avatars inline dans les métadonnées (journal, fil) */
.fil-meta .av, .ua-jr-par .av, .ua-jr-chip .av { margin-right: 5px; }
.ua-jr-par, .ua-jr-chip { display: inline-flex; align-items: center; }

/* ── Modale profil ── */
.pf-head {
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.pf-photo .av { box-shadow: inset 0 0 0 1px rgba(var(--k), calc(.1 * var(--ka))), 0 2px 10px rgba(var(--k), calc(.1 * var(--ka))); }
.pf-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-hint {
  flex-basis: 100%; margin: 0;
  font-size: 11px; line-height: 1.4; color: var(--text-3);
}
.pf-colors { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.pf-color {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--k), calc(.12 * var(--ka)));
  transition: transform .1s ease, border-color .12s ease;
}
.pf-color:hover { transform: scale(1.12); }
.pf-color.active { border-color: var(--text); }
.pf-color-auto {
  background: var(--bg-3); color: var(--text-3);
  font-size: 8.5px; font-weight: 700; text-transform: uppercase;
}
.pf-roles { display: flex; flex-direction: column; gap: 7px; }
.pf-role {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-3); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.pf-role:hover { border-color: color-mix(in srgb, var(--yellow, #f5d547) 55%, var(--border)); }
.pf-role.active {
  background: color-mix(in srgb, var(--yellow, #f5d547) 14%, var(--bg-2));
  border-color: color-mix(in srgb, var(--yellow, #f5d547) 60%, var(--border));
}
.pf-role input { margin-top: 3px; accent-color: var(--yellow, #f5d547); }
.pf-role-main { display: flex; flex-direction: column; gap: 2px; }
.pf-role-main strong { font-size: 13px; }
.pf-role-main span { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }

/* ══════════ MONTANTS RÉSERVÉS ══════════ */
/* Un compte visiteur ne voit ni tarifs, ni marges, ni salaires : les
   valeurs ne sont pas écrites dans la page. Ce marqueur signale la
   présence d'une donnée plutôt que de laisser un trou. */
.masq {
  display: inline-block;
  padding: 0 6px; border-radius: 5px;
  background: var(--bg-3); color: var(--text-3);
  font-size: .92em; letter-spacing: .12em;
  vertical-align: baseline;
  cursor: help;
}
/* Le simulateur de tarifs n'existe pas pour un visiteur. */
body[data-role="visiteur"] .nav-item[data-view="simulateur"] { display: none; }

/* ══════════ ENRICHISSEMENT DEPUIS LE SITE WEB ══════════ */
.enr-bloc {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -4px 0 14px; padding: 8px 10px;
  background: var(--bg-3); border-radius: 9px;
}
.enr-lien { font-size: 11.5px; color: var(--text-3); text-decoration: underline; }
.enr-lien:hover { color: var(--text-2); }
.enr-vide { font-size: 11px; color: var(--text-3); line-height: 1.35; flex: 1; min-width: 140px; }

.enr-list { display: flex; flex-direction: column; gap: 8px; }
.enr-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--bg-3); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.enr-item:hover { border-color: color-mix(in srgb, var(--yellow, #f5d547) 55%, var(--border)); }
.enr-item input { margin-top: 2px; accent-color: var(--yellow, #f5d547); flex-shrink: 0; }
.enr-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.enr-lbl {
  font-size: 10.5px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.enr-txt { font-size: 12.5px; line-height: 1.45; color: var(--text); }
.enr-apercu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; padding: 7px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
}
.enr-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.enr-warn { font-size: 10.5px; color: var(--orange, #c96a1f); }

/* ══════════ AGENDA v6 — la colonne du jour reprend vie ══════════
   Le rond noir plat de la date était éteint. Il devient un pastille
   ambrée lumineuse (identité Maint Up) posée sur un fond dégradé chaud,
   avec un liseré qui montre l'avancement de la journée. Le reste de la
   semaine garde son verre neutre : le contraste fait le relief. */

.dga-daycol.is-today {
  position: relative;
  background:
    linear-gradient(168deg,
      rgba(255, 222, 89, .22) 0%,
      rgba(255, 246, 214, .55) 42%,
      rgba(var(--w), calc(.82 * var(--wa))) 100%);
  border-color: rgba(255, 222, 89, .5);
  box-shadow:
    0 1px 1px rgba(var(--w), calc(.95 * var(--wa))) inset,
    0 20px 44px -26px rgba(190, 145, 0, .55);
}
/* Halo diffus derrière la colonne : la lumière vient du haut. */
.dga-daycol.is-today::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 55% at 50% 0%, rgba(255, 222, 89, .28), transparent 70%);
}
.dga-daycol.is-today > * { position: relative; z-index: 1; }

.dga-dhead.is-today { border-bottom-color: rgba(160, 120, 0, .14); gap: 2px; }
.dga-dhead.is-today .dga-dh-dow {
  color: #7a5c00; font-weight: 800; letter-spacing: .13em;
}
/* La date : pastille ambrée avec profondeur, plus le rond noir plat */
.dga-dhead.is-today .dga-dh-num {
  background: linear-gradient(150deg, #FFE071 0%, #F5C518 52%, #E0A100 100%);
  color: #3d2c00; font-weight: 800;
  box-shadow:
    0 1px 0 rgba(var(--w), calc(.7 * var(--wa))) inset,
    0 0 0 3px rgba(255, 222, 89, .28),
    0 8px 18px -8px rgba(190, 140, 0, .7);
}
.dga-dhead.is-today .dga-dh-mon { color: #8a6a1a; font-weight: 700; }

/* Liseré d'avancement de la journée (7 h → 20 h) */
.dga-jour-barre {
  width: 78%; height: 3px; margin-top: 6px;
  background: rgba(160, 120, 0, .16);
  border-radius: 99px; overflow: hidden;
}
.dga-jour-fill {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #F5C518, #E08A00);
  box-shadow: 0 0 8px rgba(224, 138, 0, .5);
  transition: width .6s ease;
}

/* Week-end : légèrement en retrait, pour que la semaine de travail ressorte */
.dga-daycol.is-we { background: rgba(120, 115, 100, .07); }
.dga-daycol.is-we .dga-dh-dow { color: rgba(120, 115, 100, .75); }

/* Pastille « en ce moment » : un point qui respire */
.dga-live-now {
  background: linear-gradient(135deg, rgba(21, 179, 108, .16), rgba(21, 115, 71, .12));
  color: #0f6b45; font-weight: 700;
  border: 1px solid rgba(21, 115, 71, .22);
}
.dga-live-now b { font-weight: 800; }
.dga-live-dot {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: #15b36c; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(21, 179, 108, .6);
  animation: dgaPouls 2s ease-out infinite;
}
@keyframes dgaPouls {
  0%   { box-shadow: 0 0 0 0 rgba(21, 179, 108, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(21, 179, 108, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 179, 108, 0); }
}
.dga-live-next {
  background: rgba(255, 222, 89, .22);
  border: 1px solid rgba(190, 145, 0, .22);
  color: #6b5000; font-weight: 600;
}
.dga-live-next b { font-weight: 800; color: #4a3600; }
.dga-live-done { background: rgba(var(--k), calc(.05 * var(--ka))); color: var(--text-3); }

/* RDV du jour : un peu plus présents que ceux de la semaine */
.dga-daycol.is-today .dga-slot {
  background: rgba(var(--w), calc(.78 * var(--wa)));
  box-shadow: 0 1px 0 rgba(var(--w), calc(.9 * var(--wa))) inset, 0 6px 16px -12px rgba(40, 35, 15, .5);
}
.dga-daycol.is-today .dga-slot:hover {
  background: var(--bg-2);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(40, 35, 15, .55);
}
.dga-daycol.is-today .dga-slot.is-now {
  background: linear-gradient(135deg, rgba(21, 179, 108, .16), rgba(var(--w), calc(.8 * var(--wa))));
}
.dga-daycol.is-today .dga-slot.is-next {
  background: linear-gradient(135deg, rgba(255, 222, 89, .3), rgba(var(--w), calc(.8 * var(--wa))));
}
.dga-daycol.is-today .dga-wempty { color: #8a6a1a; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .dga-live-dot { animation: none; }
  .dga-jour-fill { transition: none; }
}

/* Liseré de journée : curseur lumineux à l'heure courante + heure lisible */
.dga-jour-ligne {
  display: flex; align-items: center; gap: 6px;
  width: 88%; margin-top: 7px;
}
.dga-jour-barre {
  position: relative; flex: 1;
  width: auto; margin-top: 0;
  height: 4px;
  background: rgba(160, 120, 0, .18);
  overflow: visible;
}
.dga-jour-curseur {
  position: absolute; top: 50%; width: 8px; height: 8px;
  margin-left: -4px; border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid #E08A00;
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(224, 138, 0, .18), 0 2px 6px rgba(190, 140, 0, .5);
  transition: left .6s ease;
}
.dga-jour-h {
  font-size: 9.5px; font-weight: 800; color: #8a6a1a;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

/* ══════════ BANDEAU SYNCHRO GOOGLE ══════════ */
.gs-bandeau {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 15px; margin-bottom: 14px;
  border-radius: 14px;
  background: rgba(var(--w), calc(.6 * var(--wa)));
  border: 1px solid rgba(var(--w), calc(.7 * var(--wa)));
  box-shadow: 0 1px 1px rgba(var(--w), calc(.8 * var(--wa))) inset;
}
.gs-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.gs-txt strong { font-size: 13px; }
.gs-txt span { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.gs-txt code {
  background: rgba(var(--k), calc(.07 * var(--ka))); padding: 1px 5px; border-radius: 4px;
  font-size: 10.5px; font-family: ui-monospace, monospace;
}
.gs-btn { flex-shrink: 0; text-decoration: none; }
.gs-action {
  background: linear-gradient(135deg, rgba(255, 222, 89, .28), rgba(var(--w), calc(.7 * var(--wa))));
  border-color: rgba(190, 145, 0, .28);
}
.gs-erreur {
  background: linear-gradient(135deg, rgba(232, 131, 58, .16), rgba(var(--w), calc(.7 * var(--wa))));
  border-color: rgba(200, 100, 30, .28);
}
.gs-erreur > svg { color: var(--orange, #c96a1f); }
.gs-info { background: rgba(var(--k), calc(.04 * var(--ka))); }

/* ══════════ CENTRE D'AIDE ══════════ */
.aide-page {
  max-width: 860px; height: 100%; min-height: 0;
  overflow-y: auto; padding: 24px 24px 48px;
}
.aide-head { margin-bottom: 18px; }
.aide-head h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.01em; }
.aide-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--text-3); }

/* Recherche : l'élément central de la page */
.aide-search-wrap { position: relative; margin-bottom: 14px; }
.aide-search {
  width: 100%; box-sizing: border-box;
  padding: 14px 42px 14px 44px;
  font-size: 15px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 14px;
  background: rgba(var(--w), calc(.72 * var(--wa))); color: var(--text);
  box-shadow: 0 1px 1px rgba(var(--w), calc(.8 * var(--wa))) inset;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.aide-search::placeholder { color: var(--text-3); }
.aide-search:focus {
  outline: none; background: var(--bg-2);
  border-color: color-mix(in srgb, var(--yellow, #f5d547) 70%, var(--border));
  box-shadow: 0 0 0 4px rgba(245, 213, 71, .28);
}
.aide-search-ic {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
}
.aide-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  border: 0; background: var(--bg-3); color: var(--text-3); cursor: pointer;
}
.aide-clear:hover { background: var(--border); color: var(--text); }

/* Filtres par thème */
.aide-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.aide-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(var(--w), calc(.6 * var(--wa))); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.aide-chip:hover { background: var(--bg-2); border-color: color-mix(in srgb, var(--yellow, #f5d547) 55%, var(--border)); }
.aide-chip.active {
  background: linear-gradient(135deg, rgba(255, 222, 89, .38), rgba(var(--w), calc(.8 * var(--wa))));
  border-color: rgba(190, 145, 0, .38); color: var(--text);
}
.aide-chip b {
  font-size: 10.5px; font-weight: 800;
  background: rgba(var(--k), calc(.08 * var(--ka))); color: var(--text-3);
  padding: 1px 6px; border-radius: 20px;
}
.aide-chip.active b { background: rgba(190, 145, 0, .2); color: #6b5000; }
.aide-chip-all { color: var(--text-3); }

/* Groupes et fiches */
.aide-groupe { margin-bottom: 26px; }
.aide-groupe-titre {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding-bottom: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.aide-fiche {
  background: rgba(var(--w), calc(.62 * var(--wa)));
  border: 1px solid rgba(var(--w), calc(.7 * var(--wa)));
  border-radius: 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 1px rgba(var(--w), calc(.8 * var(--wa))) inset;
  transition: border-color .12s;
}
.aide-fiche[open] { border-color: color-mix(in srgb, var(--yellow, #f5d547) 45%, var(--border)); }
.aide-q {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 650; color: var(--text);
}
.aide-q::-webkit-details-marker { display: none; }
.aide-q-txt { flex: 1; min-width: 0; }
.aide-chev { color: var(--text-3); flex-shrink: 0; transition: transform .16s ease; }
.aide-fiche[open] .aide-chev { transform: rotate(180deg); }
.aide-r { padding: 0 16px 15px 16px; }
.aide-etapes {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.aide-etapes li { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.aide-etapes li::marker { color: var(--text-3); font-weight: 700; font-size: 12px; }
.aide-etapes strong { color: var(--text); font-weight: 700; }
.aide-etapes kbd {
  display: inline-block; padding: 1px 6px; margin: 0 1px;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
  background: var(--bg-2); color: var(--text);
  font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 600;
}
.aide-etapes code, .aide-note code {
  background: rgba(var(--k), calc(.07 * var(--ka))); padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: 12px;
}
.aide-note {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 12px 0 0; padding: 9px 11px;
  background: rgba(255, 222, 89, .16);
  border-left: 3px solid rgba(190, 145, 0, .45);
  border-radius: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
.aide-note > svg { color: #a07800; flex-shrink: 0; margin-top: 2px; }
.aide-go { margin-top: 12px; }

.aide-vide {
  text-align: center; padding: 46px 20px;
  border: 1px dashed var(--border); border-radius: 16px;
  color: var(--text-3);
}
.aide-vide > svg { color: var(--text-3); opacity: .5; }
.aide-vide p { margin: 10px 0 4px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.aide-vide span { font-size: 12.5px; }

@media (max-width: 768px) {
  .aide-page { padding: 16px 14px 40px; }
  .aide-search { font-size: 16px; }
}

/* ══════════ BASCULE JOUR / NUIT ══════════ */
.theme-btn {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-2); color: var(--text-2);
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .1s;
}
.theme-btn:hover {
  background: var(--bg-3);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--text);
}
.theme-btn:active { transform: scale(.94); }
/* Les deux icônes se croisent : la lune sort quand le soleil rentre. */
.theme-btn svg { grid-area: 1 / 1; transition: opacity .22s ease, transform .32s cubic-bezier(.3,.9,.3,1); }
.theme-ic-sun  { opacity: 0; transform: rotate(-70deg) scale(.5); }
.theme-ic-moon { opacity: 1; transform: none; }
[data-theme="dark"] .theme-ic-sun  { opacity: 1; transform: none; color: var(--accent); }
[data-theme="dark"] .theme-ic-moon { opacity: 0; transform: rotate(70deg) scale(.5); }

/* Transition douce au changement de thème, sans animer les survols */
.theme-switching, .theme-switching * {
  transition: background-color .32s ease, color .32s ease, border-color .32s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-btn svg, .theme-switching, .theme-switching * { transition: none !important; }
}

/* Ajustements de nuit sur les surfaces qui restaient blanches en dur */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .modal-content { background: var(--bg-2); }
[data-theme="dark"] img.card-logo,
[data-theme="dark"] .doc-preview img { background: var(--bg-3); }
/* Le logo est recolorié en jaune par theme.js (canvas), pas par un filtre :
   le rendu est net et la couleur exacte. Rien à faire ici. */

/* ══════════ MODE NUIT — corrections de lisibilité ══════════
   Mesuré au contraste : les pastilles colorées gardaient un texte sombre
   (#b91c1c…) posé sur un fond nuit, soit ~2,5:1 — illisible. En nuit, on
   éclaircit le texte et on assombrit le fond de la pastille. */
[data-theme="dark"] {
  --text-3: #A79C85;               /* remonté : 3,3:1 → 5,1:1 sur le fond nuit */
}
[data-theme="dark"] .pill-red,
[data-theme="dark"] .tag.red,
[data-theme="dark"] .badge-overdue   { background: rgba(239, 68, 68, .18);  color: #ff9a8f; }
[data-theme="dark"] .pill-orange,
[data-theme="dark"] .tag.orange      { background: rgba(249, 115, 22, .18); color: #ffb46b; }
[data-theme="dark"] .pill-green,
[data-theme="dark"] .tag.green       { background: rgba(34, 197, 94, .18);  color: #71dda0; }
[data-theme="dark"] .pill-blue,
[data-theme="dark"] .tag.blue        { background: rgba(59, 130, 246, .18); color: #8fbcf7; }
[data-theme="dark"] .pill-purple,
[data-theme="dark"] .tag.purple      { background: rgba(124, 58, 237, .22); color: #c3a6fb; }
[data-theme="dark"] .pill-yellow,
[data-theme="dark"] .tag.yellow,
[data-theme="dark"] .badge-encours   { background: rgba(234, 179, 8, .18);  color: #f2d16b; }
[data-theme="dark"] .pill-pink,
[data-theme="dark"] .tag.pink        { background: rgba(236, 72, 153, .18); color: #f79ac1; }
[data-theme="dark"] .pill-cyan,
[data-theme="dark"] .tag.cyan        { background: rgba(6, 182, 212, .18);  color: #6fd6e5; }
[data-theme="dark"] .pill-google,
[data-theme="dark"] .tag.google      { background: rgba(66, 133, 244, .2);  color: #8fbcf7; }

/* Écrans et pastilles à fond clair fixe → texte sombre imposé */
[data-theme="dark"] .btn.primary,
[data-theme="dark"] .ua-invite-btn,
[data-theme="dark"] .muc-btn { color: var(--accent-text-on); }
[data-theme="dark"] .muc-btn { background: var(--accent); }
[data-theme="dark"] .pipe-seg.done,
[data-theme="dark"] .panel-pipe-step.done .panel-pipe-dot,
[data-theme="dark"] .pc-dot { color: #3d2c00; }
[data-theme="dark"] .dga-dhead.is-today .dga-dh-num { color: #3d2c00; }
[data-theme="dark"] .av-ini { color: #14120D; }

/* ══════════ MODE NUIT — couleurs de statut ══════════
   Une centaine de règles posent une couleur sombre en dur (#b42318,
   #15803d…) pensée pour un fond clair. Sur fond nuit elles tombent à
   ~2,5:1. On les remonte globalement plutôt que règle par règle. */
[data-theme="dark"] [style*="color: var(--c-red-txt)"],

[data-theme="dark"] .vp-chip.chip-danger,
[data-theme="dark"] .dc-mod-pct.dc-low,
[data-theme="dark"] .dc-action-n.dc-n-alert,
[data-theme="dark"] .d3-count-alert,
[data-theme="dark"] .tkt-badge.tkt-alert,
[data-theme="dark"] .card-alert,
[data-theme="dark"] .card-contrat-late { color: #ff9a8f; }

[data-theme="dark"] .vp-chip.chip-warn,
[data-theme="dark"] .card-alert-warm,
[data-theme="dark"] .card-contrat-soon,
[data-theme="dark"] .tk-fb-warn { color: #ffb46b; }

[data-theme="dark"] .tkt-ok,
[data-theme="dark"] .tk-stat-green,
[data-theme="dark"] .tkt-badge.tkt-ok,
[data-theme="dark"] .vp-chip.chip-ok,
[data-theme="dark"] .ck-libre,
[data-theme="dark"] .tk-fb-ok,
[data-theme="dark"] .dga-slot-state.now,
[data-theme="dark"] .dga-ev-state.now { color: #71dda0; }

[data-theme="dark"] .dga-slot-time,
[data-theme="dark"] .dga-join,
[data-theme="dark"] .dga-slot-meet,
[data-theme="dark"] .tag.google { color: #8fbcf7; }

/* Badges à fond coloré : le texte doit rester lisible dessus */
[data-theme="dark"] .d3-badge.red    { background: rgba(239,68,68,.2);  color: #ff9a8f; }
[data-theme="dark"] .d3-badge.orange { background: rgba(249,115,22,.2); color: #ffb46b; }
[data-theme="dark"] .d3-badge.green  { background: rgba(34,197,94,.2);  color: #71dda0; }

/* Surfaces restées blanches en dur (calendrier, en-têtes de colonne) */
[data-theme="dark"] .cal-cell,
[data-theme="dark"] .cal-head-cell,
[data-theme="dark"] .cal-week-cell { background: var(--bg-2); }
[data-theme="dark"] .cal-cell-num { color: var(--text-2); }
[data-theme="dark"] .cal-cell-today { background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); }


/* Verts de texte : var(--green) est une couleur de REMPLISSAGE, trop
   claire pour du texte sur fond teinté (2,9:1 mesuré). */
.tk-stat-green,
.tk-renta-val.tk-stat-green,
.tech-card-contrat-badge.tech-card-contrat-cdi,
.tkt-ok,
.ck-libre { color: var(--c-green-txt); }
/* Initiales des logos de carte : sur le crème le plus foncé, --text-3
   tombait à 4,25:1. */
.card-logo, .contact-company-logo { color: var(--text-2); }

/* Derniers écarts relevés à la mesure */
.caisse-statut-badge.caisse-statut-dispo { color: var(--c-green-txt); }
/* --accent-2 est un jaune de remplissage : 1,96:1 en texte sur blanc. */
.d3-hero-summary strong, .d3-hero-summary b { color: var(--accent-deep); }
/* Compteur d'onglet actif : fond jaune → le texte doit rester sombre */
/* Uniquement l'onglet ACTIF a un fond jaune : lui seul veut un texte
   sombre. Appliquer la règle à tous les compteurs posait du brun foncé
   sur fond nuit (1,2:1). */
.todo-tab.active .tab-count,
.caisses-tab.active .caisses-tab-count { color: var(--accent-text-on); }
/* Un <strong> dans un badge hérite de sa couleur : rien à surcharger,
   mais la couleur du badge doit être une couleur de TEXTE. */
.d3-badge strong, .d3-badge b { color: inherit; }
/* Provenance de chaque information récupérée : le logo « déclaré par le
   site » est fiable, l'« image de partage » ne l'est pas. */
.enr-src {
  font-style: normal; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--text-3); font-size: 10px;
  margin-left: 6px;
}

/* Date de démarrage : l'information clé une fois le contrat signé */
.card-demarrage {
  display: flex; align-items: center; gap: 6px;
  margin-top: 5px; padding: 4px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--c-green-txt);
  font-size: 11.5px;
}
.card-demarrage strong { font-weight: 800; }
.panel-demarrage {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 9px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  color: var(--c-green-txt);
  font-size: 12.5px;
}
.panel-demarrage strong { font-weight: 800; }


/* Compteurs et valeurs chiffrées : ces couleurs vives sont lisibles en
   gros, pas en 11 px. On prend la variante « texte » du statut. */
.stat-value, .sidebar .stat-value { color: var(--text); }
.count, .tab-count, .caisses-tab-count { color: var(--text-2); }
[data-theme="dark"] .stat-value { color: var(--text); }

/* Étiquette « en charge » sur les cartes */
.card-resp {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 10.5px; font-weight: 600; color: var(--text-3);
}
.card-resp .av { flex-shrink: 0; }
.card-resp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Indicateur de synchronisation : une pastille discrète dans la barre du
   haut. Vert = tout est enregistré côté serveur. */
.sync-badge {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-right: 4px;
  transition: background .2s, box-shadow .2s;
  cursor: help;
}
.sync-badge.sync-ok      { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.sync-badge.sync-attente { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.sync-badge.sync-erreur  { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); }
.sync-badge.sync-lecture { background: var(--text-3); }

/* ══════════ ÉCRAN SAUVEGARDES ══════════ */
/* Réservé à l'admin, comme la gestion des utilisateurs */
.nav-item[data-view="sauvegardes"] { display: none; }
body[data-role="admin"] .nav-item[data-view="sauvegardes"] { display: flex; }
.svg-liste { display: flex; flex-direction: column; gap: 8px; }
.svg-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; flex-wrap: wrap;
  background: rgba(var(--w), calc(.68 * var(--wa)));
  border: 1px solid rgba(var(--w), calc(.65 * var(--wa)));
  border-radius: 14px;
}
.svg-badge {
  flex-shrink: 0; min-width: 104px; text-align: center;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.svg-auto     { background: color-mix(in srgb, var(--blue) 14%, transparent);  color: var(--c-blue-txt); }
.svg-manuelle { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--c-green-txt); }
.svg-avant    { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--c-orange-txt); }
.svg-main { flex: 1; min-width: 200px; }
.svg-quand { font-size: 14px; font-weight: 650; }
.svg-detail { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.svg-actions { display: flex; gap: 6px; align-items: center; }
.svg-actions .ua-btn { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.svg-fin { background: rgba(var(--k), calc(.07 * var(--ka))); color: var(--text-2); font-variant-numeric: tabular-nums; }
.svg-row-fin { padding: 8px 16px; border-radius: 11px; }
.svg-row-fin .svg-quand { font-size: 13px; }