:root {
  --bg: #0b0d12;
  --card: #14161f;
  --card-hover: #191c27;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #edeef3;
  --text-muted: #8a91a6;
  /* Un seul accent — or/laiton mat, cohérent avec le blason (argent/sable/or,
     un des plus anciens codes héraldiques) plutôt qu'un bleu générique de
     dashboard. Le vert/ambre/rouge ci-dessous restent sémantiques
     (succès/attention/danger) et ne font pas partie de cet accent. */
  --accent: #c9a15c;
  --accent-hover: #d9b876;
  --accent-soft: rgba(201, 161, 92, 0.16);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.14);
  --success: #43d17a;
  --success-soft: rgba(67, 209, 122, 0.14);
  --warning: #f5b942;
  --warning-soft: rgba(245, 185, 66, 0.14);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius: var(--radius-md); /* alias historique, garde les 4 usages existants synchronisés avec l'échelle */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
  /* Ease-out doux façon iOS/macOS, pour tout ce qui déplace/redimensionne un
     élément (cartes, boutons, panneaux) — pas pour les simples fondus de
     couleur, où un ease standard reste très bien. */
  --ease-native: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Serif Extra Condensed", Georgia, "Times New Roman", serif;
  background: var(--bg);
  color: var(--text);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262a38; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: #323748; }

.layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: 240px;
  /* Légèrement translucide + flou : sans effet visible en usage normal (rien
     ne défile derrière, la sidebar est un simple voisin flex du contenu),
     mais donne le vrai effet "vitre dépolie" quand elle passe en panneau
     flottant sur mobile (@media 860px, plus bas) par-dessus le contenu. */
  background: rgba(8, 9, 13, 0.86);
  backdrop-filter: blur(20px);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  transition: width 0.16s ease, padding 0.16s ease;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 24px; }
.sidebar-collapse-btn {
  margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 4px; border-radius: 6px; display: flex; flex-shrink: 0; transition: transform 0.16s ease;
}
.sidebar-collapse-btn:hover { background: var(--card-hover); color: #fff; }
.sidebar-collapse-btn svg { width: 16px; height: 16px; }

/* Réduite : icônes seules, libère de la place pour la vue active. Le choix
   est mémorisé par navigateur (localStorage), pas envoyé au serveur — un
   simple confort d'affichage, pas une donnée à synchroniser. */
.sidebar.collapsed { width: 72px; padding-left: 10px; padding-right: 10px; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .current-user-tag,
.sidebar.collapsed .export-status,
.sidebar.collapsed .btn-label { display: none; }
.sidebar.collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .sidebar-collapse-btn { margin-left: 0; transform: rotate(180deg); }
.sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed #export-btn { padding-left: 0; padding-right: 0; justify-content: center; }
.brand-mark {
  width: 34px; height: 40px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.brand-mark svg { width: 100%; height: 100%; }
.brand-title { font-family: "Blinker", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.6px; color: #f4f5f9; }
.brand-sub { font-size: 11.5px; color: var(--text-muted); }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  text-align: left;
  background: none;
  border: none;
  border-left: 2.5px solid transparent;
  color: #a5abbd;
  padding: 9px 12px 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.22s var(--ease-native), color 0.22s var(--ease-native), border-color 0.22s var(--ease-native), transform 0.12s var(--ease-native);
}
.nav-item[hidden] { display: none; }
.nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }
.nav-item:hover { background: var(--card-hover); color: #fff; }
.nav-item:active { transform: scale(0.97); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 600;
  border-left-color: var(--accent);
}
.nav-item.active .nav-icon { opacity: 1; }

.sidebar-footer { padding-top: 12px; border-top: 1px solid var(--border); }
.export-status { font-size: 11px; color: var(--text-muted); margin-top: 6px; min-height: 14px; }

/* Content */
.content { flex: 1; padding: 28px 34px; max-width: 100%; overflow-x: auto; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar h1 { font-size: 22px; margin: 0; color: #f6f7fb; letter-spacing: 0.2px; font-weight: 700; }
.page-date { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; text-transform: capitalize; }

.btn {
  border: none; border-radius: var(--radius-sm); padding: 9px 16px; font-size: 13px;
  font-weight: 600; cursor: pointer; transition: background 0.15s ease, filter 0.15s ease, transform 0.12s var(--ease-native);
  display: inline-flex; align-items: center; gap: 7px;
}
/* .btn { display: inline-flex } a la même spécificité que le [hidden] du
   navigateur et le suit dans la cascade, donc il gagnait et le bouton
   restait visible malgré `.hidden = true` — bug préexistant, corrigé ici
   plutôt qu'en dur sur chaque bouton concerné. */
.btn[hidden] { display: none; }
.btn-icon-svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-primary { background: var(--accent); color: #06070a; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.97); }
.btn-ghost { background: var(--card-hover); color: #dbe0ee; border: 1px solid var(--border); }
.btn-ghost:hover { background: #2a2a30; }
.btn-ghost:active { transform: scale(0.97); }
.btn-block { width: 100%; justify-content: center; }
.btn-icon { background: none; border: none; font-size: 15px; cursor: pointer; color: var(--text-muted); }
.btn-icon:hover { color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text); }
.btn-outline:hover { background: var(--card-hover); }
.btn-outline:active { transform: scale(0.97); }
.btn-danger-text { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 12px; }

/* Hero banner (dashboard) */
.hero-banner {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 34px 36px;
  margin-bottom: 22px; min-height: 150px; display: flex; align-items: center;
  background: linear-gradient(120deg, #24262f 0%, #0b0d12 65%);
  border: 1px solid var(--border);
}
.hero-banner.hero-calm { background: linear-gradient(120deg, #05261c 0%, #0b0d12 65%); }
.hero-glow {
  position: absolute; top: -60px; right: -60px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.hero-banner.hero-calm .hero-glow { background: radial-gradient(circle, rgba(67, 209, 122, 0.3), transparent 70%); }
.hero-content { position: relative; z-index: 1; max-width: 640px; }
.hero-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--accent-hover); margin-bottom: 10px; text-transform: uppercase; }
.hero-banner.hero-calm .hero-eyebrow { color: var(--success); }
.hero-title { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 10px; letter-spacing: 0.2px; line-height: 1.25; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: #c7cbdb; margin-bottom: 18px; }
.hero-cta { padding: 11px 22px; font-size: 13.5px; }

/* Carousel (missions style Netflix) */
.carousel-section { margin-bottom: 26px; }
.carousel-section h3 { font-size: 14px; color: #dfe2ec; font-weight: 700; margin: 0 0 12px; letter-spacing: 0.2px; }
.carousel-row {
  display: flex; gap: 16px; overflow-x: auto; padding: 6px 4px 16px;
  scroll-snap-type: x proximity;
}
.carousel-row::-webkit-scrollbar { height: 8px; }
.poster-card {
  position: relative; flex: 0 0 250px; height: 165px; border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; scroll-snap-align: start; transition: transform 0.28s var(--ease-native), box-shadow 0.28s var(--ease-native);
  border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; box-shadow: var(--shadow-sm);
}
.poster-card:hover { transform: translateY(-6px) scale(1.035); box-shadow: var(--shadow-lg); z-index: 2; }
/* Geste "Netflix" : une ligne d'info supplémentaire (prochaine action) ne
   vient à la vie qu'au survol, sans changer la hauteur de la carte au repos. */
.poster-hover-info {
  position: relative; z-index: 1; font-size: 11px; color: rgba(255,255,255,0.82);
  margin-top: 6px; opacity: 0; transform: translateY(4px);
  transition: opacity 0.22s var(--ease-native), transform 0.22s var(--ease-native);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.poster-card:hover .poster-hover-info { opacity: 1; transform: translateY(0); }
.poster-card::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.65) 100%);
}
.poster-badge {
  position: relative; z-index: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.poster-title { position: relative; z-index: 1; font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 4px; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.poster-sub { position: relative; z-index: 1; font-size: 11.5px; color: rgba(255,255,255,0.75); margin-bottom: 8px; }
.poster-stats { position: relative; z-index: 1; display: flex; gap: 12px; font-size: 11.5px; color: #fff; font-weight: 600; }
.poster-actions {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 6px;
  opacity: 0; transition: opacity 0.15s ease;
}
.poster-card:hover .poster-actions { opacity: 1; }
.poster-actions button {
  width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(10, 11, 16, 0.65);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(3px);
}
.poster-actions button:hover { background: rgba(0,0,0,0.85); }
.poster-actions svg { width: 13px; height: 13px; }
/* Note + statut : même ligne, en flux normal, pour qu'ils ne se recouvrent
   jamais quel que soit le libellé du statut. */
.poster-top {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 7px;
  margin-bottom: auto; max-width: 100%; padding-right: 60px; /* place pour les actions au survol */
}
.poster-note {
  flex: 0 0 auto; padding: 3px 8px; border-radius: 7px; font-size: 13px; font-weight: 800;
  color: #fff; line-height: 1.35; white-space: nowrap; border: 1px solid rgba(255,255,255,0.2);
}
.poster-note em { font-style: normal; font-size: 9px; font-weight: 600; opacity: 0.75; }
.poster-note.note-bonne { background: rgba(67, 209, 122, 0.9); }
.poster-note.note-moyenne { background: rgba(245, 185, 66, 0.92); color: #1a1200; }
.poster-note.note-faible { background: rgba(255, 107, 107, 0.9); }
.poster-note.note-vide { background: rgba(10, 11, 16, 0.55); font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.75); }

.missions-score-summary { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.missions-score-summary strong { font-size: 15px; }
.missions-score-summary strong.note-bonne { color: var(--success); }
.missions-score-summary strong.note-moyenne { color: var(--warning); }
.missions-score-summary strong.note-faible { color: var(--danger); }
.mission-score-panel { margin-bottom: 22px; }

.poster-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.15); width: 100%; z-index: 1; }
.poster-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #9096a3); }

/* ---------- Page mission dédiée ---------- */
.mission-back-btn { display: inline-block; margin-bottom: 14px; font-size: 13px; }
.mission-page-header {
  position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 22px;
  min-height: 150px; display: flex; align-items: flex-end; border: 1px solid var(--border);
}
.mission-page-header-overlay {
  position: relative; z-index: 1; padding: 22px 26px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  width: 100%;
}
.mission-page-title {
  font-family: var(--mission-font, inherit); font-size: 28px; font-weight: 800; color: #fff;
  margin: 8px 0 4px; text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.mission-page-sub { color: rgba(255,255,255,0.82); font-size: 13px; }
.mission-page-kpis { margin-bottom: 22px; }
.mission-page-summary {
  background: #15171f; border: 1px solid var(--border-strong); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 20px; align-items: start;
}
.mission-page-summary .detail-row.full { grid-column: 1 / -1; }
.mission-page-summary #detail-edit-btn { grid-column: 1 / -1; text-align: left; }
.mission-charte-tag { font-size: 10.5px; }
.mission-page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.mission-page h1, .mission-page h2, .mission-page h3, .mission-page h4 { font-family: var(--mission-font, inherit); }

/* ---------- Assistant intégré ---------- */
.assistant-bulle {
  position: fixed; right: 26px; bottom: 26px; z-index: 80;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #2e2e34, #14161f); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(255, 255, 255, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.assistant-bulle:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 32px rgba(255, 255, 255, 0.32); }
.assistant-bulle[hidden] { display: none; }
.assistant-bulle svg { width: 23px; height: 23px; }

.assistant-panneau {
  position: fixed; right: 26px; bottom: 92px; z-index: 81;
  width: 400px; max-width: calc(100vw - 40px); height: 540px; max-height: calc(100vh - 140px);
  background: #15171f; border: 1px solid var(--border-strong); border-radius: 15px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  animation: fadeInUp 0.18s ease both;
}
.assistant-panneau[hidden] { display: none; }
.assistant-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.assistant-entete strong { font-size: 14px; display: block; }
.assistant-sous { font-size: 11px; color: var(--text-muted); }
.assistant-fil { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.assistant-msg { font-size: 13.2px; line-height: 1.6; border-radius: 11px; padding: 10px 13px; max-width: 92%; }
.assistant-msg p { margin: 0 0 7px; }
.assistant-msg p:last-child { margin-bottom: 0; }
.assistant-msg code { background: rgba(255,255,255,0.09); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.assistant-user { align-self: flex-end; background: var(--accent-soft); color: #eceef2; border: 1px solid rgba(255,255,255,0.25); }
.assistant-assistant { align-self: flex-start; background: rgba(255,255,255,0.045); color: #d8dce6; }
.assistant-systeme { align-self: stretch; max-width: 100%; background: rgba(245,185,66,0.09); border: 1px solid rgba(245,185,66,0.28); color: #ecd9ae; }
.assistant-attente { opacity: 0.55; font-size: 18px; letter-spacing: 3px; }
.assistant-suggestions { display: flex; flex-direction: column; gap: 6px; }
.assistant-sugg {
  text-align: left; padding: 8px 11px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--border); color: var(--text-muted); font-family: inherit;
}
.assistant-sugg:hover { border-color: var(--accent); color: var(--text); }
.assistant-choix { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.assistant-choix-opt {
  text-align: left; padding: 8px 11px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22); color: var(--text); font-family: inherit;
}
.assistant-choix-opt:hover { border-color: var(--accent); background: rgba(255,255,255,0.14); }
.assistant-choix-opt:disabled { opacity: 0.5; cursor: default; }
.assistant-action-card {
  align-self: stretch; max-width: 100%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
}
.assistant-action-titre { font-weight: 600; color: var(--text); }
.assistant-action-detail { color: var(--text-muted); font-size: 12.5px; }
.assistant-action-erreur { color: var(--danger); font-size: 12.5px; }
.assistant-action-buttons { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.assistant-action-buttons .btn { padding: 7px 12px; font-size: 12.5px; }
.assistant-action-buttons .btn-danger-text { padding: 7px 4px; }
.assistant-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
#assistant-input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 9px;
  background: #0e0f16; color: var(--text); font-size: 13px; font-family: inherit;
}
#assistant-input:focus { outline: none; border-color: var(--accent); }

/* ---------- Authentification ---------- */
.auth-overlay {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.auth-overlay[hidden] { display: none; }
.auth-box {
  width: 360px; max-width: calc(100vw - 40px); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 26px 22px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
.auth-brand { margin-bottom: 18px; }
.auth-form[hidden] { display: none; }
.auth-form h2 { font-size: 16px; margin: 0 0 10px; }
.auth-form label { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 12px; }
.auth-form input {
  width: 100%; margin-top: 5px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: #0e0f16; color: var(--text); font-size: 13.5px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-form .btn { margin-top: 18px; }
.auth-error { color: var(--danger); font-size: 12.5px; min-height: 16px; margin-top: 10px; }

/* ---------- Nav : badge non-lu, tag utilisateur courant ---------- */
.nav-badge {
  margin-left: auto; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700;
  border-radius: 999px; padding: 1px 6px; min-width: 16px; text-align: center;
}
.nav-badge[hidden] { display: none; }
.current-user-tag { font-size: 11.5px; color: var(--text-muted); padding: 0 2px 10px; }

/* Bandeau messages non lus (même famille que .version-warning) */
.unread-banner {
  background: var(--accent-soft); border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 10px; padding: 11px 15px; margin: 0 0 18px; font-size: 13px;
  color: #eceef2; display: flex; align-items: center; gap: 12px;
}
.unread-banner[hidden] { display: none; }
.unread-banner span:first-child { flex: 1; }

/* ---------- Messagerie interne ---------- */
.messages-layout { display: flex; gap: 16px; align-items: flex-start; }
.messages-threads { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.messages-thread-btn {
  text-align: left; padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--border); color: var(--text-muted); font-family: inherit;
}
.messages-thread-btn.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.messages-fil { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 320px; max-height: 480px; overflow-y: auto; padding: 4px 2px; }
.msg-bubble { font-size: 13.2px; line-height: 1.55; border-radius: 11px; padding: 10px 13px; max-width: 78%; }
.msg-mine { align-self: flex-end; background: var(--accent-soft); color: #eceef2; border: 1px solid rgba(255,255,255,0.25); }
.msg-autre { align-self: flex-start; background: rgba(255,255,255,0.045); color: #d8dce6; }
.msg-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }
.messages-form { display: flex; gap: 8px; margin-top: 12px; }
.messages-form input { flex: 1; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: #0e0f16; color: var(--text); font-size: 13px; font-family: inherit; }
.messages-form input:focus { outline: none; border-color: var(--accent); }

/* ---------- Équipe (gestion des accès) ---------- */
.equipe-missions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.equipe-missions label { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); font-weight: normal; }
.pseudo-input {
  width: 110px; padding: 5px 8px; border-radius: 6px; font-size: 12.5px;
  border: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit;
}
.pseudo-input:focus { outline: none; border-color: var(--accent); background: #0e0f16; }

/* ---------- Objectifs de mission ---------- */
.objectifs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.objectif-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.objectif-row:last-child { border-bottom: none; }
.objectif-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.objectif-statut-cycle { cursor: pointer; user-select: none; }
.objectif-statut-cycle:hover { filter: brightness(1.2); }
.objectif-progress { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 4px; }
.objectif-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), #9096a3); border-radius: 4px; transition: width 0.2s ease; }
.objectif-progress-label { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.objectif-valeur-input {
  width: 60px; padding: 3px 6px; border-radius: 5px; font-size: 12px;
  border: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit;
}
.objectif-valeur-input:focus { outline: none; border-color: var(--accent); background: #0e0f16; }
.objectif-del-btn { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.objectif-add-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.objectif-add-form input[type="text"],
.objectif-add-form input[type="date"],
.objectif-add-form input[type="number"] {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: #0e0f16; color: var(--text); font-size: 13px; font-family: inherit;
}
.objectif-add-form input[type="text"] { flex: 1; }
.objectif-add-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.objectif-add-form-row input { flex: 1; min-width: 120px; }

/* Bandeau d'alerte quand le serveur n'a pas été redémarré */
.version-warning {
  background: rgba(245, 185, 66, 0.13); border: 1px solid rgba(245, 185, 66, 0.45);
  border-radius: 10px; padding: 13px 17px; margin: 0 0 18px; font-size: 13px;
  color: #f0dcb0; line-height: 1.6;
}
.version-warning strong { color: var(--warning); display: block; margin-bottom: 3px; }
.version-warning[hidden] { display: none; }

/* ---------- Suivi mensuel ---------- */
.ligne-a-cloturer { background: rgba(245, 185, 66, 0.07); }
.ligne-a-cloturer td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.taux-atteinte { font-weight: 700; }
.suivi-alerte { margin-bottom: 20px; border-color: rgba(245, 185, 66, 0.4); }
.suivi-alerte strong { color: var(--warning); }
.suivi-groupes-header { margin: 4px 0 10px; }
.suivi-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.suivi-summary-meta { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.panel-collapsible + .panel-collapsible { margin-top: 10px; }

/* ---------- Veille commerciale ---------- */
.signaux-liste { display: flex; flex-direction: column; gap: 12px; }
.signal-card {
  background: #15171f; border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 15px 17px; border-left: 3px solid var(--border-strong);
}
.signal-card.pertinence-haute { border-left-color: var(--danger); }
.signal-card.pertinence-moyenne { border-left-color: var(--warning); }
.signal-card.pertinence-basse { border-left-color: var(--border-strong); }
.signal-exploite { opacity: 0.5; }
.signal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 7px; }
.signal-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent-hover); }
.signal-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-muted); }
.signal-frais { color: var(--success); font-weight: 600; }
.signal-entreprise { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.signal-mission { font-size: 10px; margin-bottom: 8px; display: inline-block; }
.signal-resume { font-size: 13px; color: #d0d4de; line-height: 1.55; margin: 6px 0 8px; }
.signal-source { font-size: 11.5px; color: var(--text-muted); margin-bottom: 11px; word-break: break-all; }
.signal-source a { color: var(--accent-hover); }
.signal-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.brief-bloc { padding: 11px 0; border-bottom: 1px solid var(--border); }
.brief-bloc:last-child { border-bottom: none; }
.brief-mission { font-size: 12px; font-weight: 700; color: var(--accent-hover); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.brief-ligne { display: flex; gap: 9px; font-size: 12.5px; color: #cdd2dd; margin-bottom: 4px; line-height: 1.5; }
.brief-ligne span { flex: 0 0 74px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; padding-top: 2px; }
.brief-exclu { color: var(--danger); }

/* ---------- Capacité ---------- */
.cap-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cap-chiffre {
  flex: 0 0 auto; min-width: 62px; padding: 8px 10px; border-radius: 11px; text-align: center;
  font-size: 20px; font-weight: 800; color: #fff;
}
.cap-chiffre.cap-surcharge { background: rgba(255, 107, 107, 0.9); }
.cap-chiffre.cap-tendu { background: rgba(245, 185, 66, 0.92); color: #1a1200; }
.cap-chiffre.cap-sain { background: rgba(67, 209, 122, 0.9); }
.cap-chiffre.cap-disponible { background: rgba(255, 255, 255, 0.88); color: #06070a; }
.cap-resume { font-size: 13.5px; color: var(--text); margin-bottom: 3px; }
.cap-track { display: flex; height: 7px; background: rgba(255,255,255,0.07); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.cap-bar { height: 100%; }
.cap-bar.cap-surcharge { background: var(--danger); }
.cap-bar.cap-tendu { background: var(--warning); }
.cap-bar.cap-sain { background: var(--success); }
.cap-bar.cap-disponible { background: var(--accent); }
.cap-over { height: 100%; background: repeating-linear-gradient(45deg, var(--danger), var(--danger) 4px, #7f1d1d 4px, #7f1d1d 8px); }
.cap-message { font-size: 12.5px; margin: 0 0 12px; }
.cap-message.cap-surcharge { color: var(--danger); font-weight: 600; }
.cap-message.cap-tendu { color: var(--warning); }
.cap-message.cap-sain, .cap-message.cap-disponible { color: var(--text-muted); }
.cap-jours { font-weight: 600; color: var(--text); white-space: nowrap; }
.cap-simu {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted);
}
.cap-simu input {
  width: 66px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: #0e0f16; color: var(--text); font-size: 13px; font-family: inherit;
}
.cap-simu input:focus { outline: none; border-color: var(--accent); }
.cap-simu #cap-simu-res { flex: 1 1 100%; }
.cap-simu #cap-simu-res .oldy-diff-box { margin: 10px 0 0; }
.cap-panel-compact { margin-bottom: 20px; }
.cap-jours em { font-style: normal; font-weight: 400; color: var(--text-muted); font-size: 11px; }

/* Projection : la charge des mois à venir, pour voir arriver les démarrages groupés */
.cap-projection {
  display: flex; gap: 10px; align-items: flex-end; padding: 12px 0 4px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.cap-proj-mois { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cap-proj-label { font-size: 10.5px; color: var(--text-muted); text-transform: capitalize; }
.cap-proj-track {
  width: 100%; height: 56px; background: rgba(255,255,255,0.06); border-radius: 5px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.cap-proj-bar { width: 100%; border-radius: 5px 5px 0 0; min-height: 3px; }
.cap-proj-bar.cap-surcharge { background: var(--danger); }
.cap-proj-bar.cap-tendu { background: var(--warning); }
.cap-proj-bar.cap-sain { background: var(--success); }
.cap-proj-bar.cap-disponible { background: var(--accent); }
.cap-proj-taux { font-size: 11px; font-weight: 700; }
.cap-txt-surcharge { color: var(--danger); }
.cap-txt-tendu { color: var(--warning); }
.cap-txt-sain { color: var(--success); }
.cap-txt-disponible { color: var(--accent-hover); }

/* ---------- Notation des missions ---------- */
.score-card {
  display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.score-card:last-child { border-bottom: none; }
.score-value {
  flex: 0 0 46px; height: 46px; border-radius: 11px; display: flex; align-items: center;
  justify-content: center; font-size: 19px; font-weight: 800; color: #fff;
}
.note-bonne .score-value { background: rgba(67, 209, 122, 0.9); }
.note-moyenne .score-value { background: rgba(245, 185, 66, 0.9); color: #1a1200; }
.note-faible .score-value { background: rgba(255, 107, 107, 0.9); }
.note-vide .score-value { background: rgba(255,255,255,0.07); color: var(--text-muted); font-size: 20px; }
.score-body { flex: 1; min-width: 0; }
.score-mission { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.score-dims { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.score-dim { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
.score-dim-label { flex: 0 0 150px; color: var(--text-muted); display: flex; justify-content: space-between; gap: 6px; }
.score-dim-label em { font-style: normal; opacity: 0.65; }
.score-dim-track { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.score-dim-bar { display: block; height: 100%; border-radius: 3px; }
.score-dim-bar.note-bonne { background: var(--success); }
.score-dim-bar.note-moyenne { background: var(--warning); }
.score-dim-bar.note-faible { background: var(--danger); }
.score-dim-val { flex: 0 0 26px; text-align: right; font-weight: 700; color: var(--text); }

/* ---------- Entonnoir de conversion ---------- */
.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: flex; align-items: center; gap: 12px; }
.funnel-label { flex: 0 0 148px; font-size: 12.5px; color: var(--text-muted); }
.funnel-track { flex: 1; position: relative; height: 30px; background: rgba(255,255,255,0.04); border-radius: 7px; display: flex; align-items: center; }
.funnel-bar { height: 100%; border-radius: 7px; transition: width 0.4s ease; opacity: 0.85; }
.funnel-count { position: absolute; left: 11px; font-size: 12.5px; font-weight: 700; color: #fff; }
.funnel-rate { flex: 0 0 52px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text); }
.funnel-legend { margin-top: 10px; }

/* Mini graphique d'activité */
.mini-chart { display: flex; align-items: flex-end; gap: 4px; height: 165px; padding-top: 8px; }
.mini-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; }
.mini-bar { width: 100%; background: linear-gradient(180deg, var(--accent), #9096a3); border-radius: 3px 3px 0 0; min-height: 2px; }
.mini-col span { font-size: 9px; color: var(--text-muted); white-space: nowrap; }

/* ---------- Ma journée : blocs timeboxés + minuteur ---------- */
/* Accueil : un seul élément dominant, beaucoup d'air autour. C'est le premier
   écran de la journée — il doit orienter, pas informer de tout. */
.accueil { padding: 42px 0 34px; max-width: 720px; }
.accueil-salut {
  font-size: 12px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--accent-hover); margin-bottom: 14px;
}
.accueil-titre {
  font-size: 34px; line-height: 1.22; font-weight: 800; color: #f7f8fc;
  margin: 0 0 12px; letter-spacing: -0.4px;
}
.accueil-sous { font-size: 15px; color: var(--text-muted); line-height: 1.65; margin: 0 0 26px; }
.btn-grand { padding: 13px 26px; font-size: 14.5px; border-radius: 10px; }
.accueil-fini .accueil-salut { color: var(--success); }
.jour-stats { display: flex; gap: 22px; margin-top: 26px; font-size: 13px; color: var(--text-muted); }
.jour-stats strong { color: var(--text); font-size: 15px; }

.journee-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.journee-sous-titre { font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.journee-title { font-size: 19px; font-weight: 700; margin: 0 0 4px; text-transform: capitalize; }
.journee-progress { height: 4px; background: rgba(255,255,255,0.07); border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
.journee-progress > div { height: 100%; background: linear-gradient(90deg, var(--accent), #9096a3); transition: width 0.3s ease; }
.journee-empty { text-align: center; padding: 34px 26px; }
.journee-empty h3 { font-size: 16px; margin-bottom: 10px; }
.journee-empty .empty-note { max-width: 560px; margin: 0 auto 18px; line-height: 1.65; }

.blocs-list { display: flex; flex-direction: column; gap: 10px; }
.bloc {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  background: #15171f; border: 1px solid var(--border-strong); border-radius: 11px;
  border-left: 3px solid var(--accent); transition: opacity 0.2s ease;
}
.bloc-done { opacity: 0.5; border-left-color: var(--success); }
.bloc-partiel { border-left-color: var(--warning); }
.bloc-time {
  display: flex; flex-direction: column; align-items: center; font-size: 14px; font-weight: 700;
  color: var(--text); flex-shrink: 0; min-width: 52px;
}
.bloc-time span { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.bloc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bloc-mission { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent-hover); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.bloc-tag {
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 10px;
  padding: 1px 7px; border-radius: 5px; background: rgba(255,255,255,0.07); color: var(--text-muted);
}
.bloc-intention { font-size: 13.5px; color: var(--text); }
.bloc-check { color: var(--success); display: flex; }
.bloc-check svg { width: 18px; height: 18px; }
.bloc-sous-taches { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bloc-sous-taches li { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.bloc-sous-taches li svg { width: 12px; height: 12px; color: var(--success); flex-shrink: 0; }
.bloc-sous-taches li.fait { text-decoration: line-through; opacity: 0.7; }

.chrono {
  background: linear-gradient(135deg, #1c1c22, #12141c);
  border: 1px solid var(--accent); border-radius: 16px; padding: 22px 26px; margin-bottom: 22px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}
.chrono-pause { border-color: var(--success); box-shadow: 0 12px 34px rgba(67, 209, 122, 0.14); }
.chrono-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.chrono-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; color: var(--accent-hover); }
.chrono-pause .chrono-eyebrow { color: var(--success); }
.chrono-target { font-size: 13px; color: var(--text-muted); text-align: right; }
.chrono-value {
  font-size: 62px; font-weight: 800; letter-spacing: 2px; color: #fff; line-height: 1.05;
  font-variant-numeric: tabular-nums; margin-bottom: 12px;
}
.chrono-track { height: 5px; background: rgba(255,255,255,0.09); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.chrono-bar { height: 100%; background: var(--accent); transition: width 1s linear; }
.chrono-pause .chrono-bar { background: var(--success); }
.chrono-actions { display: flex; gap: 10px; }

/* ---------- CRM Kanban ---------- */
.kanban-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.kanban-toolbar-left { display: flex; gap: 10px; flex-wrap: wrap; }
.kanban-select, .kanban-search {
  padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: #15171f; color: var(--text); font-size: 13px; font-family: inherit;
}
.kanban-search { min-width: 220px; }
.kanban-select:focus, .kanban-search:focus { outline: none; border-color: var(--accent); }
.kanban-toolbar-stats { display: flex; gap: 18px; font-size: 13px; color: var(--text-muted); }
.kanban-toolbar-stats strong { color: var(--text); font-size: 14px; }

.kanban-board {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px;
  align-items: flex-start;
}
.kanban-board::-webkit-scrollbar { height: 8px; }
.kanban-column {
  flex: 0 0 260px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border);
  border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 260px);
}
.kanban-column-header {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  border-bottom: 1px solid var(--border); border-radius: 14px 14px 0 0; position: sticky; top: 0;
  background: #15171f; z-index: 1;
}
.kanban-column-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; }
.kanban-column-count { font-size: 11px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.kanban-column-header.stage-neutral { border-top: 3px solid var(--border-strong); }
.kanban-column-header.stage-info { border-top: 3px solid var(--accent); }
.kanban-column-header.stage-warning { border-top: 3px solid var(--warning); }
.kanban-column-header.stage-success { border-top: 3px solid var(--success); }
.kanban-column-header.stage-danger { border-top: 3px solid var(--danger); }
.kanban-column-body {
  flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px;
  min-height: 80px; border-radius: var(--radius-sm);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.kanban-column-body.drop-target { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.kanban-empty { text-align: center; padding: 18px 6px; font-size: 12px; }

.prospect-card {
  background: #15171f; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 12px 13px; cursor: grab; transition: transform 0.2s var(--ease-native), box-shadow 0.2s var(--ease-native), border-color 0.18s ease;
  border-left: 3px solid var(--border-strong);
}
.prospect-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
/* Retour visuel "carte soulevée" pendant le drag, sans toucher au mécanisme
   (HTML5 dragstart/dragover/drop) ni tenter une réécriture tactile. */
.prospect-card.dragging { opacity: 0.55; transform: rotate(-2deg) scale(1.03); box-shadow: var(--shadow-lg); cursor: grabbing; }
/* Bordure gauche = urgence du geste commercial à faire, lisible d'un coup d'œil
   sans lire le contenu de la carte. */
.prospect-card.health-late { border-left-color: var(--danger); }
.prospect-card.health-today { border-left-color: var(--warning); }
.prospect-card.health-none { border-left-color: var(--text-muted); }
.prospect-card.health-rotting { border-left-color: var(--text-muted); }
.prospect-card.health-ok { border-left-color: var(--accent); }
.prospect-card.health-closed { border-left-color: var(--border-strong); }

/* ---------- Dashboard : deux colonnes ----------
   Le pipeline et les tâches (ce sur quoi on agit) occupent la colonne large ;
   le contexte (prévisionnel, activité, alertes) tient dans la colonne étroite. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-col-main, .dash-col-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

/* Tâches groupées par échéance */
.task-bucket + .task-bucket { margin-top: 14px; }
.task-bucket-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 5px 0 7px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
  color: var(--text-muted);
}
.task-bucket-header span { font-weight: 600; letter-spacing: 0; }
.task-bucket-header.bucket-late { color: var(--danger); border-bottom-color: rgba(255, 107, 107, 0.3); }
.task-bucket-header.bucket-today { color: var(--warning); border-bottom-color: rgba(245, 185, 66, 0.3); }
.task-bucket-header.bucket-week { color: var(--accent-hover); border-bottom-color: rgba(255, 255, 255, 0.25); }

.task-row { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.task-row:hover { background: rgba(255, 255, 255, 0.02); }
.task-row-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: none; color: transparent;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s ease;
}
.task-check svg { width: 11px; height: 11px; }
.task-check:hover { border-color: var(--success); color: var(--success); background: var(--success-soft); }

/* Prévisionnel */
.prev-total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.prev-total-value { font-size: 24px; font-weight: 700; color: #f6f7fb; }
.prev-total-label { font-size: 12px; color: var(--text-muted); }
.prev-amount { font-weight: 600; color: var(--text); white-space: nowrap; }

/* Fil d'activité */
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li {
  display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; align-items: flex-start;
}
.activity-list li:last-child { border-bottom: none; }
.activity-date { color: var(--accent-hover); font-size: 11.5px; font-weight: 600; white-space: nowrap; padding-top: 1px; }
.activity-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.panel-collapsible { padding: 0; }
.panel-collapsible summary {
  cursor: pointer; padding: 16px 18px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  list-style: none; user-select: none;
}
.panel-collapsible summary::-webkit-details-marker { display: none; }
.panel-collapsible summary::before { content: "▸ "; color: var(--text-muted); }
.panel-collapsible[open] summary::before { content: "▾ "; }
.panel-collapsible summary:hover { color: var(--text); }
.panel-collapsible > *:not(summary) { padding: 0 18px 16px; }

/* Bandeau "prochaine action" en tête de fiche prospect : la question la plus
   importante d'un CRM ("c'est quoi la suite ?") doit être la première chose lue. */
.next-action-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--card-hover); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--border-strong);
  border-radius: 11px; padding: 13px 16px; margin-bottom: 20px;
}
.next-action-banner.health-late { border-left-color: var(--danger); }
.next-action-banner.health-today { border-left-color: var(--warning); }
.next-action-banner.health-none, .next-action-banner.health-rotting { border-left-color: var(--text-muted); }
.next-action-banner.health-ok { border-left-color: var(--accent); }
.next-action-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 4px; }
.next-action-banner.health-late .next-action-eyebrow { color: var(--danger); }
.next-action-banner.health-today .next-action-eyebrow { color: var(--warning); }
.next-action-banner.health-none .next-action-eyebrow, .next-action-banner.health-rotting .next-action-eyebrow { color: var(--text-muted); }
.next-action-text { font-size: 14px; font-weight: 600; color: var(--text); }

.prospect-health { font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.prospect-health.health-late { color: var(--danger); }
.prospect-health.health-today { color: var(--warning); }
.prospect-health.health-none, .prospect-health.health-rotting { color: var(--text-muted); }
.prospect-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.prospect-avatar {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.prospect-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s ease; }
.prospect-card:hover .prospect-actions { opacity: 1; }
.prospect-actions button {
  width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.prospect-actions button:hover { background: rgba(255, 255, 255, 0.14); color: var(--text); }
.prospect-actions svg { width: 11px; height: 11px; }
.prospect-title { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.prospect-mission-badge { font-size: 10px; padding: 2px 7px; margin-bottom: 6px; display: inline-block; }
.prospect-sub { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.prospect-contact { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; }
.prospect-card-footer { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.prospect-value { color: var(--success); font-weight: 700; }
.prospect-next-action { color: var(--text-muted); }

/* Entrance animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.panel, .kpi-card, .mission-card, .hero-banner { animation: fadeInUp 0.25s ease both; }
/* .poster-card/.prospect-card sont reconstruites à chaque frappe dans une
   recherche ou changement de filtre (renderMissionsCards/renderCrmKanban) —
   les animer par sélecteur global les aurait fait clignoter en boucle. Elles
   ne jouent l'entrée qu'une fois, via la classe .enter posée en JS à
   l'insertion (voir markEnter() dans app.js). */
.poster-card.enter, .prospect-card.enter { animation: fadeInUp 0.25s var(--ease-native) both; }

/* KPI cards */
.suivi-hierarchie {
  display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap;
}
.suivi-hierarchie-item { display: flex; flex-direction: column; gap: 2px; }
.suivi-hierarchie-fleche { font-size: 22px; color: var(--text-muted); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi-card {
  background: var(--card); border-radius: var(--radius); padding: 18px 20px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 2px;
  transition: transform 0.2s var(--ease-native), box-shadow 0.2s var(--ease-native);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card-icon {
  width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.kpi-card-icon svg { width: 17px; height: 17px; }
.kpi-icon-blue { background: var(--accent-soft); color: var(--accent-hover); }
.kpi-icon-purple { background: rgba(255, 255, 255, 0.06); color: #9096a3; }
.kpi-icon-green { background: var(--success-soft); color: var(--success); }
.kpi-icon-amber { background: var(--warning-soft); color: var(--warning); }
.kpi-icon-red { background: var(--danger-soft); color: var(--danger); }
.kpi-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.2px; }
.kpi-value { font-size: 26px; font-weight: 700; color: #f6f7fb; }
.kpi-note { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }

.panel {
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
  padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.panel h3 { margin: 0 0 12px; font-size: 13.5px; color: #dfe2ec; font-weight: 600; letter-spacing: 0.2px; }
.empty-note { color: var(--text-muted); font-size: 13px; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 30px 10px; color: var(--text-muted); }
.empty-state svg { width: 34px; height: 34px; opacity: 0.5; }
.empty-state p { margin: 0; font-size: 13px; }

.alert-list, .task-mini-list { list-style: none; padding: 0; margin: 0; }
.alert-list li, .task-mini-list li {
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; color: #d7dae4;
}
.alert-list li:last-child, .task-mini-list li:last-child { border-bottom: none; }
.task-mini-list.scrollable { max-height: 340px; overflow-y: auto; }
.row-clickable-inline { cursor: pointer; }
.row-clickable-inline:hover { color: #fff; }
.task-link-sub { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.task-tags { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Suivi mensuel — graphique */
.chart-filter {
  padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border-strong);
  background: #0e0f16; color: var(--text); font-size: 12.5px; font-family: inherit;
}
.chart-legend { display: flex; gap: 18px; margin-bottom: 10px; font-size: 12px; color: var(--text-muted); }
.chart-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.dot-prevu { background: #4b5165; }
.dot-realise { background: var(--accent); }

.suivi-controls { display: flex; align-items: center; gap: 12px; }
.view-toggle { display: flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.toggle-btn {
  background: none; border: none; color: var(--text-muted); font-size: 12px; font-weight: 600;
  padding: 6px 12px; cursor: pointer; transition: background 0.18s var(--ease-native), color 0.18s var(--ease-native), transform 0.12s var(--ease-native);
}
.toggle-btn.active { background: var(--accent-soft); color: var(--accent-hover); }
.toggle-btn:not(.active):hover { background: var(--card-hover); }
.toggle-btn:active { transform: scale(0.96); }

/* Budget */
.preset-active { color: #fff; }
.preset-active strong { color: var(--success); }

/* Missions — vue en cartes */
.missions-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px;
}
.mission-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  border-top: 3px solid var(--border-strong);
  position: relative;
}
.mission-card.status-actif { border-top-color: var(--success); }
.mission-card.status-decouverte { border-top-color: var(--warning); }
.mission-card.row-clickable:hover {
  border-left-color: var(--accent); border-right-color: var(--accent); border-bottom-color: var(--accent);
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.mission-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mission-card-head h3 { margin: 0; font-size: 16px; color: #f6f7fb; font-weight: 700; }
.mission-card-canal { font-size: 12.5px; color: var(--text-muted); margin-top: -8px; }
.mission-card-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.mission-card-stats div { display: flex; flex-direction: column; gap: 3px; }
.mission-card-stats span { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.mission-card-stats strong { font-size: 14px; color: var(--text); font-weight: 600; }
.mission-card-progress { display: flex; flex-direction: column; gap: 6px; }
.progress-label { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); }
.progress-track { height: 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #9096a3); border-radius: 10px; }
.mission-card-footer { display: flex; gap: 14px; margin-top: -2px; }

.tag { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.tag-warning { background: var(--warning-soft); color: var(--warning); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.tag-success { background: var(--success-soft); color: var(--success); }
.tag-neutral { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }

/* Table */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); padding: 10px; border-bottom: 1px solid var(--border-strong);
}
tbody td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: top; color: #d7dae4; }
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
tbody tr.row-clickable { cursor: pointer; }
tbody tr.row-clickable:hover { background: var(--accent-soft); }
thead th[data-sort] { cursor: pointer; user-select: none; }
thead th[data-sort]:hover { color: var(--text); }
.actions-cell { display: flex; gap: 12px; white-space: nowrap; align-items: center; }
.actions-cell .link-btn svg { width: 13px; height: 13px; }
.link-btn { background: none; border: none; color: var(--accent-hover); cursor: pointer; font-size: 12px; padding: 0; }
.link-btn:hover { text-decoration: underline; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(3, 4, 7, 0.72);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.18s var(--ease-native);
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.visible { opacity: 1; }
/* Le panneau lui-même (.modal, .detail-modal, .search-palette...) : léger
   scale-in en plus du fondu de l'overlay, pour un effet "sheet" natif au
   lieu d'un simple fondu plat. */
.modal-overlay > div { transform: scale(0.96); transition: transform 0.18s var(--ease-native); }
.modal-overlay.visible > div { transform: scale(1); }
/* la fiche détail CRM peut rester ouverte derrière le formulaire d'ajout
   (ex: planifier une tâche depuis la fiche) : le formulaire doit toujours
   passer au-dessus. */
#modal-overlay { z-index: 60; }
#detail-overlay { z-index: 50; }
#import-overlay { z-index: 70; }
#import-overlay .modal { width: 680px; }
#reporting-overlay { z-index: 75; }
#reporting-overlay .modal { width: 720px; }

/* Préparation de compte-rendu */
.reporting-type-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.reporting-type-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.reporting-type-row input[type="radio"] { accent-color: var(--accent); cursor: pointer; }
.reporting-type-row button { margin-left: auto; }
.cr-facts { display: flex; flex-wrap: wrap; gap: 16px; padding: 11px 14px; background: var(--card-hover);
  border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; }
.cr-facts strong { color: var(--text); font-size: 14px; }
.cr-draft {
  width: 100%; min-height: 320px; resize: vertical; margin: 10px 0;
  padding: 13px 15px; border: 1px solid var(--border-strong); border-radius: 9px;
  background: #0e0f16; color: var(--text); font-size: 12.5px; line-height: 1.65;
  font-family: 'SF Mono', 'Courier New', monospace;
}
.cr-draft:focus { outline: none; border-color: var(--accent); }
.cr-draft::selection { background: var(--accent-soft); }

/* Palette de recherche globale */
#search-overlay { z-index: 90; align-items: flex-start; padding-top: 12vh; }
.search-palette {
  background: #15171f; border: 1px solid var(--border-strong); border-radius: 14px;
  width: 620px; max-width: 92vw; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.search-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search-icon { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; }
#search-input {
  flex: 1; background: none; border: none; outline: none; color: var(--text);
  font-size: 15px; font-family: inherit;
}
#search-input::placeholder { color: var(--text-muted); }
.search-esc, .topbar-kbd {
  font-size: 10.5px; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted); border: 1px solid var(--border); font-family: inherit;
}
.topbar-kbd { margin-left: 6px; }
.search-results { max-height: 380px; overflow-y: auto; padding: 6px; }
.search-result {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px;
  cursor: pointer; font-size: 13px;
}
.search-result:hover, .search-result.active { background: var(--accent-soft); }
.search-result-type {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06); padding: 2px 7px; border-radius: 5px; flex-shrink: 0;
  min-width: 62px; text-align: center;
}
.search-result-label { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-sub { color: var(--text-muted); font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.search-empty { padding: 18px; text-align: center; }
.modal {
  background: #15171f; border: 1px solid var(--border-strong); border-radius: 14px;
  width: 520px; max-width: 92vw; max-height: 88vh; overflow-y: auto; padding: 22px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-header-actions { display: flex; align-items: center; gap: 4px; }
.modal-header h2 { font-size: 16px; margin: 0; color: #f4f5f9; }

.field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.field input, .field select, .field textarea {
  padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13px;
  font-family: inherit; background: #0e0f16; color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
.field textarea { min-height: 64px; resize: vertical; }
.field input[type="color"] { padding: 3px 5px; height: 38px; width: 70px; cursor: pointer; }
.field-checkbox { flex-direction: row; align-items: center; }
.field-checkbox label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.field-checkbox input[type="checkbox"] { width: 16px; height: 16px; padding: 0; accent-color: var(--accent); cursor: pointer; }
.date-quick-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.date-quick {
  padding: 5px 10px; border-radius: 7px; font-size: 11.5px; cursor: pointer;
  background: var(--card-hover); border: 1px solid var(--border); color: var(--text-muted);
  font-family: inherit; transition: all 0.12s ease;
}
.date-quick:hover { border-color: var(--accent); color: var(--text); }
.date-quick.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); font-weight: 600; }
.date-quick-clear { margin-left: auto; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Regroupement visuel des champs d'un même formulaire (ex: Missions, dont
   le contrat, la veille commerciale et la charte graphique se mélangeaient
   auparavant sans hiérarchie). */
.form-section-title {
  margin: 20px 0 8px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
}
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.section-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* Detail sheet (fiche prospect) */
.detail-modal { width: 640px; }
.detail-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
}
.detail-row { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.detail-row span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.detail-row strong { color: var(--text); font-weight: 500; }
.detail-row.full { grid-column: 1 / -1; }
#detail-edit-btn { grid-column: 1 / -1; text-align: left; margin-top: 4px; }

.detail-section { margin-bottom: 20px; }
.detail-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.detail-section h3 { font-size: 13px; font-weight: 600; color: #dfe2ec; margin: 0 0 10px; }

.oldy-section { border-top: 1px solid var(--border); padding-top: 18px; }
.oldy-actions { display: flex; align-items: center; gap: 12px; }
.oldy-sync-status { font-size: 11.5px; color: var(--text-muted); }
.oldy-subtitle { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.table-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
.table-scroll table { min-width: 640px; }
.oldy-comment { max-width: 260px; color: var(--text-muted); font-size: 12.5px; }
.oldy-diff-box {
  background: var(--card-hover); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px; font-size: 13px;
}
.oldy-diff-box ul { margin: 6px 0 0; padding-left: 18px; }
.oldy-diff-box.oldy-diff-error { border-color: rgba(239, 88, 88, 0.4); color: #f2a3a3; }
.oldy-diff-box.oldy-diff-ok { border-color: rgba(88, 200, 140, 0.4); color: #9fe3bd; }
.oldy-diff-buttons { display: flex; gap: 8px; margin-top: 10px; }
.import-dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: 10px; padding: 22px;
  text-align: center; margin: 14px 0;
}
.import-dropzone input[type="file"] { color: var(--text-muted); font-size: 13px; }
.import-mapping-scroll { max-height: 260px; margin-bottom: 12px; }
.import-map-select { width: 100%; }
.oldy-conflict-row {
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin: 8px 0;
}
.oldy-conflict-row p { margin: 0 0 6px; font-size: 13px; }
.oldy-conflict-table { font-size: 12px; margin-bottom: 8px; }
.oldy-conflict-table th, .oldy-conflict-table td { padding: 4px 8px; }
.oldy-conflict-row label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12.5px; }

.hist-form { display: flex; gap: 8px; margin-bottom: 12px; }
.hist-form input[type="date"] { flex: 0 0 140px; }
.hist-form input[type="text"] { flex: 1; }
.hist-form input {
  padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: #0e0f16; color: var(--text); font-size: 12.5px; font-family: inherit;
}
.hist-list { list-style: none; padding: 0; margin: 0; max-height: 220px; overflow-y: auto; }
.hist-list li {
  font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--border); color: #d7dae4;
  display: flex; gap: 10px;
}
.hist-list li:last-child { border-bottom: none; }
.hist-date { color: var(--accent-hover); font-weight: 600; font-size: 12px; white-space: nowrap; }

.voice-recording-indicator { color: var(--danger); font-size: 12.5px; font-weight: 600; margin: 0 0 8px; }
.voice-live-transcript { font-size: 13px; line-height: 1.6; color: var(--text); min-height: 40px; margin: 0 0 10px; }
.voice-interim { color: var(--text-muted); font-style: italic; }
.voice-raw-details { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.voice-raw-details summary { cursor: pointer; color: var(--accent-hover); }
.voice-raw-details p { margin: 6px 0 0; line-height: 1.6; }
.voice-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 4px 0 8px; }
.voice-tache-card {
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--card-hover);
}
.voice-tache-card .field:last-child { margin-bottom: 0; }
.voice-gagne-row {
  background: var(--success-soft); border: 1px solid rgba(88, 200, 140, 0.4);
  border-radius: 9px; padding: 10px 12px; margin-bottom: 12px;
}
.voice-gagne-row > .field.field-checkbox { margin-bottom: 0; }
.voice-gagne-row > .field.field-checkbox label { color: #9fe3bd; }
.voice-gagne-row > #voice-valeur-wrap { margin-top: 10px; margin-bottom: 0; }
.voice-gagne-row > #voice-valeur-wrap label { color: var(--text-muted); }
.voice-valeur-detail { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

.crm-page { max-width: 760px; }

/* ==========================================================================
   Mobile (téléphone, ≤860px) — la barre latérale fixe de 240px ne laissait
   presque plus de place au contenu ; ici elle devient un tiroir coulissant,
   les modales passent en quasi plein écran, et les mises en page à deux
   colonnes fixes repassent en une colonne. Le reste (grilles KPI en
   auto-fit, tableaux avec overflow-x, palette de recherche) était déjà
   responsive et n'a pas besoin d'override.
   ========================================================================== */
.sidebar-toggle-btn { display: none; }

@media (max-width: 860px) {
  .sidebar-toggle-btn { display: flex; flex-shrink: 0; }
  .topbar-left { display: flex; align-items: center; gap: 10px; }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 200;
    width: 250px; max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed; inset: 0; z-index: 190;
    background: rgba(0, 0, 0, 0.5);
  }
  .sidebar-backdrop[hidden] { display: none; }

  .content { padding: 16px 14px 40px; }
  .topbar { flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
  .topbar h1 { font-size: 19px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn { padding: 9px 10px; }
  .topbar-actions .btn-label, .topbar-kbd { display: none; }

  /* Modales quasi plein écran : les largeurs fixes (520-720px) débordaient
     ou forçaient un défilement horizontal sur un écran de téléphone. */
  .modal, .detail-modal, #import-overlay .modal, #reporting-overlay .modal {
    width: calc(100vw - 24px);
    max-height: 90vh;
  }
  .modal-overlay { padding: 12px; }

  /* Grilles à deux colonnes fixes (pas en auto-fit) : illisibles en dessous
     d'environ 500px de large, chaque colonne se retrouve écrasée. */
  .detail-summary { grid-template-columns: 1fr; }

  /* Une colonne Kanban proche de la largeur de l'écran plutôt que 260px
     fixe : on swipe d'un statut à l'autre au lieu de voir des bouts de
     plusieurs colonnes à la fois. */
  .kanban-column { flex: 0 0 84vw; }

  .assistant-bulle { right: 16px; bottom: 16px; }
  .assistant-panneau { right: 12px; left: 12px; width: auto; bottom: 82px; }

  /* .messages-threads a une largeur fixe de 220px pensée pour desktop : sur
     un téléphone (~375px de large), le fil de conversation restant n'a plus
     que ~140px et les bulles de message deviennent illisibles. On empile la
     liste des collaborateurs au-dessus du fil plutôt que côte à côte. */
  .messages-layout { flex-direction: column; }
  .messages-threads { width: 100%; flex-direction: row; flex-wrap: wrap; }
}