:root {
  --gold: #c89a60;
  --gold-dark: #a87840;
  --gold-soft: rgba(200, 154, 96, 0.14);
  --ink: #1c1917;
  --ink-2: #26221f;
  --ink-3: #322c28;
  --line: #3a342f;
  --text: #f3eee7;
  --muted: #b7aaa0;
  --ok: #6fbf73;
  --warn: #e0a83e;
  --info: #7aa7d9;
  --violet: #b08cd9;
  --danger: #d97070;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
}

:root[data-theme="light"] {
  --ink: #f7f3ec;
  --ink-2: #ffffff;
  --ink-3: #efe7da;
  --line: #e0d6c6;
  --text: #2a2521;
  --muted: #7a6f62;
  --gold: #a87840;
  --gold-dark: #8a6230;
  --gold-soft: rgba(168, 120, 64, 0.12);
  --shadow: 0 6px 20px rgba(0,0,0,.10);
}
:root[data-theme="light"] body {
  background: radial-gradient(1200px 600px at 80% -10%, #fffdf9 0%, var(--ink) 55%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, #2a2522 0%, var(--ink) 55%);
  color: var(--text);
  min-height: 100vh;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-dark); }

/* ---------- Header ---------- */
header.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 30;
}
header .logo { height: 30px; }
.logo-l { display: none; }
:root[data-theme="light"] .logo-d { display: none; }
:root[data-theme="light"] .logo-l { display: inline; }
header h1 {
  font-size: 17px; font-weight: 600; letter-spacing: .5px; margin: 0;
  color: var(--text);
}
header h1 span { color: var(--gold); }
header .spacer { flex: 1; }
.dataset-select {
  display: flex; align-items: center; gap: 10px;
}
select, input, textarea {
  font-family: inherit; color: var(--text);
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: 14px;
  outline: none;
}
select:focus, input:focus, textarea:focus { border-color: var(--gold); }
/* champ date + heure (RDV / rappel) - flatpickr, thème aligné sur l'app */
.when-fp { width: 100%; cursor: pointer; }
.flatpickr-calendar { background: var(--ink-2); border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(0,0,0,.35); border-radius: 12px; }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--ink-2); }
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: var(--ink-2); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-monthDropdown-months { color: var(--text); fill: var(--text); }
.flatpickr-monthDropdown-months { background: var(--ink-2); }
.flatpickr-weekdays, .flatpickr-weekdaycontainer { background: transparent; }
span.flatpickr-weekday { color: var(--gold); background: transparent; font-weight: 700; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--text); }
.flatpickr-day { color: var(--text); border-radius: 8px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--ink-3); border-color: var(--ink-3); }
.flatpickr-day.today { border-color: var(--gold); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--muted); opacity: .45; }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { color: var(--text); }
.flatpickr-time input:hover, .flatpickr-time input:focus, .numInputWrapper:hover { background: var(--ink-3); }
.flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--muted); }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--muted); }
.flatpickr-calendar .flatpickr-time { border-top: 1px solid var(--line); }
.flatpickr-calendar .fp-ok { display: block; width: calc(100% - 16px); margin: 8px; padding: 9px; background: var(--gold); color: #fff; border: 0; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }
.flatpickr-calendar .fp-ok:hover { filter: brightness(1.08); }

/* ---------- Layout ---------- */
.wrap { padding: 22px 26px 60px; max-width: 1500px; margin: 0 auto; }

/* ---------- Stats (boxes propres, alignées sur la largeur des onglets) ---------- */
.stats { display: flex; gap: 12px; margin-bottom: 12px; }
.stat {
  flex: 1 1 0; min-width: 0;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px;
}
.stat .n { font-size: 24px; font-weight: 700; color: var(--gold); }
.stat .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.stat.win .n { color: var(--ok); }
.stat.lost .n { color: var(--danger); }

/* ---------- Toolbar (onglets en haut, filtres dessous) ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.filterbar input.search { flex: 0 1 260px; min-width: 170px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--ink-2); color: var(--muted);
}
.chip.active { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.chip-n { font-size: 11px; font-weight: 700; opacity: .65; }
.chip.active .chip-n { opacity: .9; }
/* séparateur de groupe = saut de ligne (chaque groupe de statuts sur sa propre ligne, lecture nette) */
.chip-sep { flex-basis: 100%; height: 0; margin: 3px 0; }

/* ---------- Cards grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.card {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column;
  border-left: 4px solid var(--line);
  transition: transform .12s ease, border-color .12s ease;
}
.card:hover { transform: translateY(-2px); }
.card .shot {
  height: 150px; background: var(--ink-3) center/cover no-repeat;
  cursor: pointer; position: relative; border-bottom: 1px solid var(--line);
}
.card .shot.empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; cursor: default;
}
.card .shot .hot {
  position: absolute; top: 10px; left: 10px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; letter-spacing: .4px;
}
.card .body { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.card .name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.card .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.badge { background: var(--gold-soft); color: var(--gold); padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.rating { color: var(--gold); font-weight: 600; }
.rows { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.row { display: flex; gap: 8px; align-items: center; color: var(--text); }
.row .ic { width: 16px; text-align: center; opacity: .7; }
.row.dim { color: var(--muted); }
.copy { cursor: pointer; color: var(--muted); font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.copy:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- CRM controls ---------- */
.crm { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.crm .status-row { display: flex; gap: 8px; align-items: center; }
.crm select.status { flex: 1; font-weight: 600; }
.crm textarea { width: 100%; resize: vertical; min-height: 44px; font-size: 13px; }
.crm .save-state { font-size: 11px; color: var(--ok); height: 14px; }
.crm .last { font-size: 12px; color: var(--muted); }

/* status left border colors */
.card[data-status="a_contacter"] { border-left-color: #8a8077; }
.card[data-status="reponse_envoyee"] { border-left-color: var(--gold); }
.card[data-status="rdv"] { border-left-color: var(--violet); }
.card[data-status="realise"] { border-left-color: var(--ok); }
.card[data-status="perdu"] { border-left-color: var(--danger); opacity: .72; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center; z-index: 1550; padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92%; max-height: 92%; border-radius: 10px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.lightbox .x { position: absolute; top: 20px; right: 26px; font-size: 30px; color: var(--text); cursor: pointer; }

/* ---------- Buttons ---------- */
.btn-gold {
  cursor: pointer; border: 1px solid var(--gold); background: var(--gold-soft);
  color: var(--gold); font-weight: 600; font-size: 14px; font-family: inherit;
  padding: 9px 16px; border-radius: 10px;
}
.btn-gold:hover { background: var(--gold); color: var(--ink); }
.btn-gold.full { width: 100%; margin-top: 6px; padding: 12px; }
.btn-gold:disabled { opacity: .5; cursor: default; }
.btn-ghost { cursor: pointer; border: 1px solid var(--gold); background: transparent; color: var(--gold);
  font-family: inherit; font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 10px; }
.btn-ghost:hover { background: var(--gold); color: var(--ink); }

/* ---------- Compose / settings ---------- */
.modal-box.wide { max-width: 640px; }
.modal-box.xwide { max-width: 920px; }

/* ---------- Fiche détail lead ---------- */
.ld-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ld-head h2 { margin: 0; font-size: 19px; }
.ld-head .ld-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ld-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.ld-rail-danger { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.ld-rail-danger .danger { width: 100%; font-size: 12px; opacity: .7; }
.ld-rail-danger .danger:hover { opacity: 1; }
.ld-shot { width: 100%; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.ld-noshot { height: 150px; display: flex; align-items: center; justify-content: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 10px; }
.ld-map { height: 200px; border: 1px solid var(--line); border-radius: 10px; margin-top: 12px; }
.ld-info { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.ld-info .r { display: flex; gap: 9px; }
.ld-info .r .ic { width: 18px; opacity: .7; flex: none; }
.ld-info .k { color: var(--muted); }
.ld-section { margin-top: 14px; }
.ld-section b { font-size: 13px; color: var(--gold); display: block; margin-bottom: 6px; }
.ld-args ul { margin: 0; padding-left: 18px; }
.ld-args li { font-size: 13px; margin-bottom: 4px; }
.ld-tl { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); padding-left: 14px; }
.ld-tl li { font-size: 13px; margin-bottom: 8px; position: relative; }
.ld-tl li::before { content: ""; position: absolute; left: -19px; top: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold); }
.ld-tl .d { color: var(--muted); }
.ld-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- Fiche B1 : rail latéral + zone principale en 2 colonnes ---- */
.ld-rail { display: flex; flex-direction: column; gap: 18px; background: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; position: sticky; top: 0; }
.ld-rail-id .sub { font-size: 12px; color: var(--muted); margin-top: 9px; }
.ld-rail-pills { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.ld-rail-t { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 11px; }
.ld-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ld-kpi { background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ld-kpi .n { font-size: 16px; font-weight: 800; color: var(--gold); line-height: 1.1; }
.ld-kpi .n.ok { color: var(--ok); } .ld-kpi .n.bad { color: var(--muted); }
.ld-kpi .l { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ld-vpipe { list-style: none; margin: 0; padding: 0 0 0 15px; border-left: 2px solid var(--line);
  display: flex; flex-direction: column; gap: 11px; }
.ld-vpipe li { position: relative; font-size: 13px; color: var(--muted); }
.ld-vpipe li .vdot { position: absolute; left: -20px; top: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line); box-shadow: 0 0 0 3px var(--ink-3); }
.ld-vpipe li.done { color: var(--text); } .ld-vpipe li.done .vdot { background: var(--c, var(--gold)); }
.ld-vpipe li.cur { color: var(--gold); font-weight: 700; }
.ld-vpipe li.cur .vdot { background: var(--c, var(--gold)); box-shadow: 0 0 0 3px var(--gold-soft); }
.ld-vpipe li.lost { color: var(--danger); font-weight: 700; }
.ld-vpipe li.lost .vdot { background: var(--danger); }
.ld-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ld-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ld-colA, .ld-colB { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ld-main .ld-section, .ld-rail .ld-section { margin-top: 0; }
.ld-args { background: var(--gold-soft); border: 1px solid rgba(200, 154, 96, .28); border-radius: var(--radius); padding: 14px 16px; }
.ld-card { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
/* navigation ‹ › dans l'en-tête de la fiche */
.ld-headnav { display: flex; align-items: center; gap: 6px; }
.ldnav { cursor: pointer; border: 1px solid var(--line); background: var(--ink-3); color: var(--text);
  font-size: 18px; line-height: 1; width: 30px; height: 30px; border-radius: 8px; font-family: inherit; }
.ldnav:hover { border-color: var(--gold); color: var(--gold); }
/* actions contextuelles en tête du bloc Traitement */
.ld-acts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ld-acts .btn-gold, .ld-acts .btn-ghost { font-size: 13.5px; padding: 9px 12px; width: 100%; text-align: center; }
.ld-planinfo { font-size: 13px; font-weight: 600; color: var(--gold); background: var(--gold-soft);
  border-radius: 8px; padding: 8px 11px; margin: -4px 0 14px; }
.ld-planinfo.wait { color: var(--muted); background: var(--ink-3); font-weight: 500; line-height: 1.4; }
/* créneaux RDV / puces de rappel rapides */
.ld-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-q { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--ink-3); color: var(--muted); }
.chip-q:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
/* bandeau « fiche perdue / archivée » */
.ld-lockbar { font-size: 13px; font-weight: 600; padding: 9px 13px; border-radius: 10px; margin-bottom: 12px;
  background: rgba(217, 112, 112, .12); border: 1px solid rgba(217, 112, 112, .35); color: var(--danger); }
.ld-lockbar.ro { background: var(--ink-3); border-color: var(--line); color: var(--muted); }
.ld-notes.ro, input.ro { opacity: .6; cursor: not-allowed; }
/* carte de liste perdue/archivée : rouge + grisée */
.card.lost { opacity: .62; filter: grayscale(.5); border-left-color: var(--danger) !important; }
.card.lost:hover { opacity: .9; filter: none; }
.lostnote { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--danger); }
@media (max-width: 760px) { .ld-grid { grid-template-columns: 1fr; } }
.modal-box textarea { width: 100%; resize: vertical; font-size: 13.5px; line-height: 1.5; }
.compose-to { color: var(--gold); font-weight: 600; margin-bottom: 6px; }
.compose-to small { color: var(--muted); font-weight: 400; }
.compose-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.compose-actions .spacer { flex: 1; }
/* conversation e-mail : 2 colonnes (compose | fil) */
.compose-split { display: grid; grid-template-columns: 1fr 0.95fr; gap: 18px; align-items: start; }
.compose-left, .compose-right { min-width: 0; display: flex; flex-direction: column; }
.ct-title { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.compose-thread { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow: auto; padding-right: 4px; }
.ct-msg { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ct-msg.in { background: var(--ink-2); }
.ct-msg.out { background: var(--ink-3); }
.ct-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
.ct-dir { font-weight: 700; font-size: 10.5px; }
.ct-msg.in .ct-dir { color: var(--gold); }
.ct-msg.out .ct-dir { color: var(--ok); }
.ct-date { color: var(--muted); font-size: 10.5px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ct-b { white-space: pre-wrap; font-size: 12px; color: var(--text); margin-top: 5px; max-height: 150px; overflow: auto; line-height: 1.4; }
.ct-reply { font-size: 11.5px; padding: 4px 9px; margin-top: 6px; align-self: flex-start; }
/* pièces jointes reçues (ex. devis signé renvoyé) */
.ct-att { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.ct-att-warn { font-size: 11px; font-weight: 700; color: var(--danger); }
.ct-att-link { display: inline-block; align-self: flex-start; font-size: 11.5px; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 7px; color: var(--gold); text-decoration: none; }
.ct-att-link:hover { background: var(--gold-soft); }
/* aperçu d'une pièce jointe (modale par-dessus la conversation) */
#attModal { z-index: 1900; }
.att-head-actions { display: flex; gap: 10px; align-items: center; }
.att-view { height: 72vh; display: flex; overflow: auto; }
.att-view iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
.att-view img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.att-fallback { margin: auto; color: var(--muted); font-size: 14px; text-align: center; padding: 24px; }
@media (max-width: 760px) { .compose-split { grid-template-columns: 1fr; } }
.tpl-edit { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: var(--ink); }
.tpl-edit input, .tpl-edit textarea { margin-bottom: 6px; }
.tpl-edit .tpl-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.tpl-edit .tpl-head input { flex: 1; margin: 0; }
.tpl-del { cursor: pointer; color: var(--danger); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 12px; }
.mailsent { font-size: 12px; color: var(--ok); }

/* ---------- Timeline / rappel / priorité ---------- */
.timeline { margin: 2px 0; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.timeline summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; }
.timeline ul { margin: 8px 0 4px; padding-left: 16px; }
.timeline li { font-size: 12px; color: var(--text); margin-bottom: 4px; }
.timeline .tdate { color: var(--muted); }
.reminder-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.reminder-row input { padding: 5px 8px; font-size: 12px; }
.reminder-row.due input { border-color: var(--danger); }
.prio { font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.prio.hot { background: rgba(217,112,112,.18); color: var(--danger); }
.prio.mid { background: var(--gold-soft); color: var(--gold); }
.prio.low { background: var(--ink-3); color: var(--muted); }
.dupwarn { background: rgba(224,168,62,.14); color: var(--warn); border-radius: 6px; padding: 1px 7px; font-size: 11px; }
.rem-badge { background: rgba(122,167,217,.16); color: var(--info); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.rem-badge.due { background: rgba(217,112,112,.18); color: var(--danger); }

/* ---------- Devis ---------- */
.devis-status { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.devis-status .b { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-weight: 600; }
#dvModules { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.modrow { display: flex; align-items: center; gap: 8px; font-size: 13.5px; background: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
.modrow input[type=checkbox] { width: 16px; height: 16px; }
.modrow .ml { flex: 1; }
.modrow input.q { width: 54px; }
.modrow input.p { width: 90px; }
.modrow .muted { color: var(--muted); font-size: 12px; }
.devis-totals { background: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.devis-totals .tt { display: flex; justify-content: space-between; padding: 2px 0; }
.devis-totals .grand { font-weight: 700; color: var(--gold); font-size: 16px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.devis-totals .dep { color: var(--gold); }
.dv-invoices { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.dv-invoices a { font-size: 13px; }
.lead-devis-badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-weight: 600; }

/* ---------- Arguments de vente ---------- */
.args { margin: 2px 0; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.args summary { cursor: pointer; color: var(--gold); font-size: 13px; font-weight: 600; }
.args ul { margin: 8px 0 4px; padding-left: 18px; }
.args li { font-size: 12.5px; color: var(--text); margin-bottom: 4px; line-height: 1.4; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none;
  align-items: flex-start; justify-content: center; z-index: 1500; padding: 8vh 20px; }
.modal.open { display: flex; }
.modal-box { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); width: 100%; max-width: 460px; padding: 22px 24px;
  max-height: 86vh; overflow-y: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-head .x { font-size: 30px; line-height: 1; cursor: pointer; color: var(--muted);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; flex: none; }
.modal-head .x:hover { color: var(--gold); background: var(--gold-soft); }
.modal-box h2 { margin: 0; font-size: 18px; color: var(--gold); }
.search-map { height: 260px; width: 100%; border: 1px solid var(--line); border-radius: 10px;
  margin: 4px 0 12px; overflow: hidden; cursor: crosshair; }
/* barres de progression des recherches */
.jobbar { margin: 10px 0; }
.jb-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.jb-pct { color: var(--gold); font-weight: 700; }
.jb-track { height: 8px; background: var(--ink); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.jb-fill { height: 100%; background: var(--gold); border-radius: 6px; transition: width .5s ease; }
.jb-fill.err { background: var(--danger); }
/* barre carte + recherche directe sur la carte */
.mapbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; }
.maphint { color: var(--gold); font-size: 13px; font-weight: 600; }
.mapsearch { display: flex; flex-direction: column; gap: 4px; min-width: 210px; }
.mapsearch .ms-title { font-weight: 700; color: var(--gold); margin-bottom: 2px; }
.mapsearch label { font-size: 11px; color: var(--muted); margin: 2px 0 0; }
.mapsearch .ms-in { width: 100%; padding: 6px 8px; font-size: 13px; }
.mapsearch .btn-gold { margin-top: 8px; }
.csvrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
/* 2FA */
#onboardModal input { width: 100%; margin: 6px 0; padding: 8px 10px; font-size: 14px; }
.totp-secret { font-family: monospace; font-size: 18px; letter-spacing: 2px; background: var(--ink);
  border: 1px solid var(--gold); border-radius: 8px; padding: 10px; text-align: center;
  user-select: all; margin: 4px 0 10px; color: var(--gold); word-break: break-all; }
.totp-link { font-size: 12px; color: var(--info); word-break: break-all; }
.modal-box .hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 6px 0 16px; }
.modal-box label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; margin: 12px 0 5px; }
.modal-box input { width: 100%; }
.joblog { margin-top: 16px; background: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; font-size: 12px; color: var(--text); max-height: 220px; overflow: auto;
  white-space: pre-wrap; line-height: 1.5; }

/* ---------- View toggle + map ---------- */
.viewtoggle { display: flex; flex: 1 1 auto; gap: 5px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.vt { cursor: pointer; border: none; background: transparent; color: var(--muted); font-family: inherit;
  flex: 1; font-size: 13.5px; font-weight: 600; padding: 9px 12px; border-radius: 9px; white-space: nowrap; }
.vt:hover { color: var(--text); }
.vt.active { background: var(--gold-soft); color: var(--gold); }
.allzones { display: block; color: var(--muted); font-size: 13px; margin-bottom: 12px; cursor: pointer; }
.allzones input { vertical-align: middle; margin-right: 6px; }
#map { height: 68vh; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.leaflet-popup-content { font-family: inherit; }
.mk-pop b { color: var(--ink); }
.mk-pop .st { display: inline-block; padding: 1px 8px; border-radius: 999px; color:#fff; font-size: 11px; margin-top: 4px; }
.map-legend { background: var(--ink-2); border: 1px solid var(--line); color: var(--text);
  padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.7; }
.map-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ---------- Kanban / Planning boards ---------- */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.col { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  min-width: 240px; max-width: 280px; flex: 0 0 auto; display: flex; flex-direction: column; max-height: 76vh; }
/* Kanban : colonnes côte à côte qui SE RÉTRÉCISSENT pour tenir sans scroll horizontal
   (flex 1 1 0 + min-width 0 → elles se partagent la largeur, pas de débordement). */
#kanban { overflow-x: hidden; }
#kanban .col { flex: 1 1 0; min-width: 0; max-width: none; }
#kanban .col-head { padding: 8px 9px; font-size: 12px; gap: 4px; }
#kanban .col-body { padding: 7px; gap: 6px; }
/* Planning : "À planifier" figée à gauche + semaines en grille 2×2 (aucun scroll horizontal) */
.plan-layout { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start; }
.plan-layout .col { min-width: 0; max-width: none; flex: none; }
.col-head .cnt.full { color: var(--danger); font-weight: 700; }

/* Planning : 2 semaines par ligne ; les 7 jours côte à côte (colonnes Lun…Dim) */
.wcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wcol { min-width: 0; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.wcol.full { grid-column: 1 / -1; }
.wcol .col-head { padding: 5px 7px; font-size: 12.5px; border-bottom: none; }
/* grille semaine : 7 colonnes-jour ; ligne 1 = en-têtes, lignes suivantes = barres projet */
.wgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; grid-auto-rows: minmax(38px, auto); align-content: start; }
.wg-head { grid-row: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  background: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 4px 2px; min-width: 0; }
.wg-head.out { opacity: .42; }
.wg-head.drop { outline: 2px dashed var(--gold); outline-offset: -2px; }
.wd-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.wd-num { font-weight: 700; font-size: 13px; }
/* barre projet : s'étend sur ses jours, infos lisibles (nom + prestation + durée) */
.wbar { color: #fff; border-radius: 7px; padding: 5px 9px; cursor: pointer; overflow: hidden; min-width: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); display: flex; flex-direction: column; justify-content: center;
  gap: 1px; line-height: 1.2; align-self: stretch; }
.wbar:hover { filter: brightness(1.12); }
.wbar.cl { border-top-left-radius: 0; border-bottom-left-radius: 0; }   /* commence la semaine précédente */
.wbar.cr { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* déborde sur la semaine suivante */
.wbar-name { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbar-sub { font-size: 10.5px; font-weight: 500; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* légende du planning (couleur par type de prestation) */
.plan-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 2px 12px; }
.plg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.plg-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
/* bloc Planning compact dans la fiche (2 lignes) */
.ld-plan-l { font-size: 13px; line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Produits : délai indicatif ; Devis : ligne abonnement + champ pages */
.offer-delay { font-size: 12px; color: var(--muted); margin-top: 3px; }
.tt.recur { color: var(--gold); border-top: 1px dashed var(--line); margin-top: 5px; padding-top: 5px; font-weight: 600; }
.modrow .pg { width: 58px; }
.presta-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 2px; }
/* badge prestation = pill autonome, coloré par type (couleur du planning) via style inline */
.tag.presta { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  color: #fff; border: 1px solid transparent; background: var(--gold-soft); white-space: nowrap; }
.presta-tot { font-size: 11px; color: var(--muted); font-weight: 600; }
/* colonne « Projet » du tableau : pastille couleur + prestation + planifié/à planifier */
.pj-cell { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pj-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.pj-lbl { font-size: 12.5px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.pj-plan { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.pj-plan.ok { background: rgba(91,155,213,.2); color: #8fbfe8; }
.pj-plan.todo { background: var(--gold-soft); color: var(--gold); }
.pj-plan.wait { background: rgba(208,137,91,.22); color: #e0a373; }
.dv-lock { color: var(--muted); font-weight: 600; font-size: 12px; }

/* Vue Produits / Offres */
.prod-head { margin-bottom: 18px; }
.prod-head .section-label { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.prod-title { font-size: 26px; margin: 6px 0 4px; }
.prod-sub { color: var(--muted); }
.prod-sub.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Produits : bento - « Site web » en bandeau large en haut, les 4 autres dessous (2×2) */
.offers { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 14px; }
.offer:first-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 8px 24px; }
.offer:first-child .offer-title, .offer:first-child .offer-price { flex: 1 1 100%; }
.offer:first-child .offer-desc { flex: 1 1 340px; }
.offer:first-child .offer-pages { flex: 1 1 280px; border-top: none; padding-top: 0; margin-top: 0; }
.offer { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s; }
.offer:hover { border-color: var(--gold); transform: translateY(-2px); }
.offer-num { position: absolute; top: 16px; right: 18px; font-size: 13px; font-weight: 700; color: var(--gold); opacity: .65; }
.offer-title { font-size: 19px; font-weight: 700; }
.offer-price { font-size: 15px; }
.offer-price b { font-size: 20px; color: var(--gold); }
.offer-from { font-size: 12px; color: var(--muted); }
.offer-period { font-size: 12px; color: var(--muted); }
.offer-desc { color: var(--text); opacity: .82; font-size: 13.5px; line-height: 1.5; margin: 2px 0 0; flex: 1; }
.offer-pages { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.op-lab { display: flex; align-items: center; gap: 4px; font-size: 13px; margin-bottom: 8px; }
.op-lab .op-count { color: var(--gold); }
.op-price { color: var(--gold); font-weight: 700; }
.op-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 4px;
  background: var(--line); outline: none; cursor: pointer; }
.op-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--gold); cursor: pointer; border: 2px solid var(--ink); }
.op-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold);
  cursor: pointer; border: 2px solid var(--ink); }
.op-note { font-size: 11.5px; color: var(--muted); margin-top: 7px; }

/* Palette : bento 4×4 (1ʳᵉ cellule en grand) + nuancier */
.pal-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; }
.pal-cell { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.pal-cell.big { grid-column: span 2; grid-row: span 2; }
.pal-cell h3 { margin: 0 0 6px; font-size: 15px; color: var(--gold); }
.pal-cell.big h3 { font-size: 19px; }
.pal-cell p { margin: 0; color: var(--text); opacity: .82; font-size: 13px; line-height: 1.5; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.swatch { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--ink-2); transition: transform .12s, border-color .12s; }
.swatch:hover { transform: translateY(-2px); border-color: var(--gold); }
.sw-color { height: 64px; }
.sw-name { font-size: 12.5px; font-weight: 600; padding: 6px 8px 0; }
.sw-hex { font-family: monospace; font-size: 11px; color: var(--muted); padding: 0 8px 8px; }
.lookbook-frame { width: 100%; min-height: 60vh; border: 1px solid var(--line); border-radius: 12px; background: #FBF8F2; display: block; }

/* horaires : téléphone vert (ouvert) / rouge (fermé) */
.phone-ind { font-size: 15px; }
.phone-ind.open { color: var(--ok); }
.phone-ind.closed { color: var(--danger); }
.phone-ind.unk { color: var(--muted); }
.open-tag.open { color: var(--ok); font-weight: 700; }
.open-tag.closed { color: var(--danger); font-weight: 700; }
.open-tag.unk { color: var(--muted); }
/* horaires : liste à puces (carte + fiche détail) */
.hours-row { align-items: flex-start; }
.hours-list { margin: 3px 0 0; padding-left: 16px; list-style: disc; }
.hours-list li { font-size: 12px; line-height: 1.55; }
.hours-list .hd { font-weight: 600; }   /* libellé jour inline (évite .ld-section b { display:block }) */
/* indicateur « réponse reçue » sur le bouton Conversation */
.btn-ghost.conv-new { border-color: var(--gold); color: var(--gold); font-weight: 600; }
.btn-ghost.conv-new:hover { background: var(--gold); color: var(--ink); }   /* sinon doré sur doré = invisible */

/* Page Réglages (pleine largeur, lignes nettes) */
.set-page { display: flex; flex-direction: column; gap: 16px; }
.set-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.set-row.two { grid-template-columns: 1fr 1fr; align-items: stretch; }
.set-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.set-card h3 { margin: 0 0 12px; font-size: 15px; color: var(--gold); }
.set-card label { display: block; margin: 10px 0 4px; font-size: 13px; }
.set-card input, .set-card textarea, .set-card select { width: 100%; }
/* boutons d'action dans les cartes Réglages : compacts, alignés à DROITE */
.cgv-actions { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; justify-content: flex-end; }
.csvrow { justify-content: flex-end; }
.set-card .btn-gold, .set-card .btn-ghost { width: auto; margin-top: 10px; }
.set-card > .btn-gold, .set-card > .btn-ghost,
#twofaBody .btn-gold, #twofaBody .btn-ghost { display: block; width: fit-content; margin-left: auto; margin-right: 0; }
#cfgCgv { font-family: monospace; font-size: 12.5px; line-height: 1.5; min-height: 560px; }
@media (max-width: 820px) { .set-row.two { grid-template-columns: 1fr; } }

/* Vue Équipe */
.team-h3 { margin: 22px 0 10px; font-size: 16px; color: var(--gold); }
.team-tbl { width: 100%; border-collapse: collapse; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; }
.team-tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--ink-3); }
.team-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.team-tbl tbody tr:last-child td { border-bottom: none; }
.team-tbl tbody tr:hover { background: var(--gold-soft); }
.team-tbl .who { font-weight: 700; }
.team-tbl .win { color: var(--ok); font-weight: 700; }
.team-tbl .ca { color: var(--gold); font-weight: 700; }
.team-tbl .dim { color: var(--muted); font-size: 12.5px; }
.team-tbl .empty { color: var(--muted); text-align: center; padding: 22px; }
@media (max-width: 820px) { .plan-layout { grid-template-columns: 1fr; } .wcols { grid-template-columns: 1fr; } }
.jobs-chip { color: var(--warn) !important; border-color: var(--warn) !important; }
.planmonth { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.planmonth button { cursor: pointer; background: var(--ink-2); border: 1px solid var(--gold); color: var(--gold);
  border-radius: 8px; padding: 6px 14px; font-size: 15px; font-weight: 700; }
.planmonth .m { font-size: 15px; font-weight: 600; min-width: 170px; text-align: center; text-transform: capitalize; }
.col-head { padding: 11px 13px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; position: sticky; top: 0; }
.col-head .dot { width: 10px; height: 10px; border-radius: 50%; }
.col-head .cnt { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 12px; }
.col-head .load { margin-left: auto; font-size: 11px; color: var(--gold); font-weight: 600; }
.col-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1; }
.col-body.drop-hint { background: var(--gold-soft); outline: 2px dashed var(--gold); outline-offset: -6px; }
.kcard { background: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 9px; padding: 6px 8px; cursor: grab; }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .5; }
.kcard .kn { font-weight: 600; font-size: 12.5px; line-height: 1.25; }
.kcard .km { font-size: 11px; color: var(--muted); margin-top: 2px; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.kcard .ke { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.kcard .ke a, .kcard .ke button { font-size: 12px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; }
.kcard .ke a:hover, .kcard .ke button:hover { color: var(--gold); border-color: var(--gold); }
.kcard select.prod { width: 100%; margin-top: 7px; font-size: 12px; padding: 5px 7px; }
.kcard .tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); }

/* ---------- Login ---------- */
.login { position: fixed; inset: 0; z-index: 1600; display: none; align-items: center; justify-content: center;
  background: radial-gradient(1000px 500px at 50% -10%, #2a2522, var(--ink)); }
.login.open { display: flex; }
.login-box { width: 100%; max-width: 340px; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; }
.login-logo { height: 40px; margin: 0 auto 4px; }
.login-box h2 { text-align: center; margin: 0 0 8px; color: var(--gold); font-size: 18px; }
.login-box input { width: 100%; padding: 11px 12px; }
#loginStep2 { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Champ mot de passe avec œil ---------- */
.pwrap { position: relative; display: block; }
.urow .pwrap { flex: 1; min-width: 130px; }
.pwrap input { width: 100%; padding-right: 40px; }
.pweye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); cursor: pointer;
  font-size: 16px; opacity: .7; user-select: none; padding: 4px; }
.pweye:hover { opacity: 1; }

/* ---------- Header user ---------- */
.userchip { color: var(--muted); font-size: 13px; padding: 0 4px; }
.userchip b { color: var(--gold); }

/* ---------- Users admin ---------- */
.urow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; align-items: flex-end; }
.urow input, .urow select { flex: 1; min-width: 130px; }
.urow .field { flex: 1; min-width: 130px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 3px; }
.field input { width: 100%; }
/* en-têtes de colonnes des prestations */
.prod-cols { display: flex; gap: 10px; margin-bottom: 5px; font-size: 12px; color: var(--muted); }
.prod-cols .c-name { flex: 1; min-width: 130px; }
.prod-cols .c-num { flex: 0 0 120px; }
.prod-cols .c-del { flex: 0 0 16px; }
.urow .p-num { flex: 0 0 120px; min-width: 0; }
.urow .c-del { flex: 0 0 16px; }
.uzones { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.uzones label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text);
  background: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.user-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.user-line .role { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); }
.user-line .zn { color: var(--muted); font-size: 12px; flex: 1; }
.user-line .del { cursor: pointer; color: var(--danger); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 12px; }

.listbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.listbar .lbl { color: var(--muted); font-size: 13px; }
.listbar .count { margin-left: auto; color: var(--muted); font-size: 13px; }

.empty-state { text-align: center; color: var(--muted); padding: 80px 20px; }
.footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 36px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 1700; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink-2); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  color: var(--text); padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow); font-size: 14px;
  animation: toastin .2s ease; max-width: 320px; }
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--danger); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Tableau de bord ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: linear-gradient(180deg, var(--ink-2), var(--ink)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; }
.kpi .n { font-size: 30px; font-weight: 700; color: var(--gold); }
.kpi .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-top: 2px; }
.kpi.win .n { color: var(--ok); }
.kpi.warn .n { color: var(--warn); }
.funnel { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.funnel h3 { margin: 0 0 14px; font-size: 14px; color: var(--gold); }
.fbar { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.fbar .lbl { width: 130px; color: var(--muted); flex: none; }
.fbar .track { flex: 1; background: var(--ink); border-radius: 6px; overflow: hidden; height: 22px; }
.fbar .fill { height: 100%; border-radius: 6px; min-width: 2px; }
.fbar .val { width: 36px; text-align: right; flex: none; font-weight: 600; }
.late { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.late h3 { margin: 0 0 12px; font-size: 14px; color: var(--warn); }
.late .lrow { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.late .lrow .nm { flex: 1; font-weight: 600; }
.late .lrow a, .late .lrow button { font-size: 12px; border: 1px solid var(--line); background: transparent;
  color: var(--muted); border-radius: 6px; padding: 3px 8px; cursor: pointer; text-decoration: none; }
.late .lrow a:hover, .late .lrow button:hover { color: var(--gold); border-color: var(--gold); }
#sortSel { font-size: 13px; }

/* ---------- Compose phone-first ---------- */
.callbtn { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-soft);
  border: 1px solid var(--gold); color: var(--gold); padding: 8px 14px; border-radius: 10px;
  font-weight: 600; font-size: 14px; margin: 4px 0; }
.callbtn:hover { background: var(--gold); color: var(--ink); }

/* ---------- Responsive (tablette / mobile) ---------- */
@media (max-width: 880px) {
  header.topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; position: static; }
  header h1 { font-size: 16px; }
  header .spacer { flex-basis: 100%; height: 0; order: 5; }
  .wrap { padding: 16px 14px 60px; }
  .stats { flex-wrap: wrap; gap: 8px; }
  .stat { flex: 1 1 28%; padding: 10px 12px; }
  .stat .n { font-size: 20px; }
  .grid { grid-template-columns: 1fr; }
  .offers { grid-template-columns: 1fr; grid-template-rows: auto; }
  .offer:first-child { grid-column: auto; grid-row: auto; }
  .pal-bento { grid-template-columns: 1fr 1fr; }
  .pal-cell.big { grid-column: span 2; grid-row: auto; }
  .prod-sub.one { white-space: normal; }
  .filterbar { flex-direction: column; align-items: stretch; }
  .filterbar input.search { width: 100%; }
  .viewtoggle { overflow-x: auto; }
  .modal { padding: 4vh 10px; align-items: flex-start; }
  .modal-box, .modal-box.wide { max-width: 100%; padding: 18px 16px; }
  .compose-actions { flex-direction: column; align-items: stretch; }
  .compose-actions .spacer { display: none; }
  .compose-actions button { width: 100%; }
  #map { height: 60vh; }
  .col { min-width: 78vw; max-width: 85vw; }
  .userchip { font-size: 12px; }
}
@media (max-width: 480px) {
  header h1 { font-size: 15px; }
  .chip { font-size: 12px; padding: 5px 10px; }
  .btn-gold, .btn-ghost { font-size: 13px; padding: 8px 11px; }
}

/* ---- fiche cliquable en entier (sauf champs/boutons) ---- */
.open-card { cursor: pointer; }
.open-card .crm { cursor: default; }

/* ---- avis : 0 avis = signal de prospection ---- */
.rating.zero { color: var(--warn); font-weight: 600; }

/* ---- page réseau social (= pas de vrai site) ---- */
.social-row .ic { filter: grayscale(.2); }

/* fenêtres « enfant » ouvertes depuis la fiche : au-dessus du modal lead (1500) */
#composeModal, #devisModal { z-index: 1560; }

/* ---- menu « Noter l'appel » (au-dessus de tout modal) ---- */
.callmenu {
  position: absolute; z-index: 1800; min-width: 230px; max-width: 280px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.callmenu .cm-h { font-size: 12px; color: var(--muted); padding: 6px 8px 4px; font-weight: 600; }
.callmenu .cm-item {
  text-align: left; background: transparent; border: 0; color: var(--text);
  padding: 9px 10px; border-radius: 8px; font-size: 13px; cursor: pointer;
}
.callmenu .cm-item:hover { background: var(--gold-soft); color: var(--gold); }
/* séparateur + actions destructrices (archivage / verrouillage de fiche) : rouge, détachées en bas */
.callmenu .cm-sep { height: 1px; background: var(--line); margin: 5px 6px; }
.callmenu .cm-item.cm-danger { color: var(--danger); font-weight: 600; }
.callmenu .cm-item.cm-danger:hover { background: var(--danger); color: #fff; }

/* ---- frise du pipeline dans la fiche ---- */
.ld-pipe { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 12px 0 4px; }
.ld-pipe .pstep { display: flex; align-items: center; gap: 6px; opacity: .45; }
.ld-pipe .pstep.done { opacity: .85; }
.ld-pipe .pstep.current { opacity: 1; }
.ld-pipe .pdot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 2px transparent; }
.ld-pipe .pstep.done .pdot { background: var(--c, var(--gold)); }
.ld-pipe .pstep.current .pdot { background: var(--c, var(--gold)); box-shadow: 0 0 0 3px var(--gold-soft); }
.ld-pipe .plbl { font-size: 12px; color: var(--text); font-weight: 600; }
.ld-pipe .pstep:not(.done):not(.current) .plbl { font-weight: 500; color: var(--muted); }
.ld-pipe .psep { flex: 0 0 16px; height: 2px; background: var(--line); border-radius: 2px; }
.ld-pipe .pipe-lost { color: var(--danger); font-weight: 700; font-size: 13px; }

/* ---- fiche client complète (espace de travail) ---- */
.ld-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.ld-manage { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.ld-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.ld-field > span { font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 600; }
.ld-field select, .ld-field input, .ld-field .btn-ghost { width: 100%; }
.ld-notes { width: 100%; min-height: 92px; margin-top: 2px; }
.ld-note-state { font-size: 12px; color: var(--muted); display: inline-block; margin-top: 4px; min-height: 14px; }

/* ---- dock flottant des recherches (bas-droite) ---- */
.search-dock {
  position: fixed; right: 18px; bottom: 18px; z-index: 1100;
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-2); color: var(--text);
  border: 1px solid var(--gold); border-radius: 999px;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow); cursor: pointer;
}
.search-dock:hover { background: var(--gold-soft); }
.search-dock .sd-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--gold-soft); border-top-color: var(--gold);
  animation: sd-rot .8s linear infinite; flex: none;
}
@keyframes sd-rot { to { transform: rotate(360deg); } }

/* ---- historique des recherches (dans le modal) ---- */
.search-h3 { font-size: 13px; color: var(--gold); margin: 18px 0 8px; }
.search-hist { display: flex; flex-direction: column; gap: 4px; }
.hist-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.hist-row .hi-ic.ok { color: var(--ok); }
.hist-row .hi-ic.err { color: var(--danger); }
.hist-row .hi-main { font-weight: 600; flex: 1; }
.hist-row .hi-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ---- stop recherche ---- */
.jb-stop { margin-left: 10px; font-size: 11px; padding: 3px 9px; border-radius: 6px;
  background: rgba(217,112,112,.14); color: var(--danger); border: 1px solid var(--danger); cursor: pointer; }
.jb-stop:hover { background: var(--danger); color: #fff; }
.jb-head { display: flex; align-items: center; gap: 8px; }
.jb-head > span:first-child { flex: 1; }

/* ---- bouton danger (supprimer un lead) ---- */
.btn-ghost.danger { color: var(--danger); border-color: var(--danger); }
.btn-ghost.danger:hover { background: var(--danger); color: #fff; }

/* ---- option commune exacte ---- */
.strict-opt { display: block; margin: 10px 0; font-size: 13px; color: var(--text);
  text-transform: none; letter-spacing: 0; cursor: pointer; }
.strict-opt input { width: auto; margin-right: 6px; vertical-align: middle; }
.ms-strict { display: flex; align-items: center; gap: 4px; font-size: 12px; margin: 6px 0; cursor: pointer; }
.ms-strict input { width: auto; }

/* ---- vue CGV (PDF lecture seule) ---- */
.cgv-frame { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: block; }
/* historique : recherche annulée (stop) */
.hist-row .hi-ic.warn { color: var(--warn); }

/* info riche au survol d'un point de la carte (multi-lignes) */
.leaflet-tooltip.mk-tip { white-space: normal; min-width: 170px; max-width: 240px; line-height: 1.45; padding: 8px 10px; }
.leaflet-tooltip.mk-tip b { font-size: 13px; }

/* ---- fiche client : plus grande et plus aérée ---- */
.modal-box.xwide { max-width: 1140px; }
.ld-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 22px; }
.ld-rail, .ld-main, .ld-colA, .ld-colB { min-width: 0; }
.ld-map { height: 230px; }
.ld-section { margin-top: 18px; }
.ld-section b { font-size: 13.5px; }
.ld-info { gap: 9px; font-size: 14.5px; }
.ld-email-row { display: flex; gap: 6px; flex: 1; align-items: center; }
.ld-email-row input { flex: 1; min-width: 0; padding: 6px 9px; font-size: 13.5px; }
.ld-email-row .copy { white-space: nowrap; }
@media (max-width: 820px) {
  .ld-grid { grid-template-columns: 1fr; }
  .ld-split { grid-template-columns: 1fr; }
  .ld-rail { position: static; }
}
.ld-email-state { font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 14px; }

/* KPI cliquable (drill-down) + numéro invalide */
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { border-color: var(--gold); background: var(--gold-soft); }
.phone-bad { text-decoration: line-through; color: var(--muted); }
input.phone-bad { text-decoration: line-through; }

/* ---- dialogues centrés (confirm/prompt in-app) ---- */
.ui-dialog-ov { position: fixed; inset: 0; z-index: 1900; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ui-dialog { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; max-width: 460px; width: 100%; }
.ui-dialog-msg { font-size: 15px; line-height: 1.5; margin-bottom: 16px; color: var(--text); }
.ui-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.ui-dialog input { width: 100%; }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.ui-flash { background: var(--ink-2); border: 1px solid var(--ok); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 36px; font-size: 17px; font-weight: 700;
  color: var(--ok); text-align: center; }

/* ---- Vue Liste : bascule Tableau / Cartes ---- */
.lm-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-right: 6px; }
.lm-toggle .lmt { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; }
.lm-toggle .lmt.active { background: var(--gold-soft); color: var(--gold); font-weight: 600; }

/* ---- Tableau CRM dense ---- */
.crmtable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
/* projet sous la prochaine action : date/à planifier, puis UNE prestation (badge) PAR LIGNE */
.td-action .td-proj { margin-top: 7px; }
.pj-plan-row { margin-bottom: 5px; }
.pj-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pj-tags .pj-tot { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.crmtable { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; }
.crmtable th, .crmtable td { padding: 16px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* on évite le scroll horizontal : le texte passe à la ligne ; on garde nowrap sur les cellules courtes */
.crmtable .mini-pipe, .crmtable .td-contact { white-space: nowrap; }
.crmtable tbody tr:last-child td { border-bottom: 0; }
.crmtable thead th { position: sticky; top: 0; background: var(--ink-2); color: var(--muted); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; user-select: none; z-index: 1; }
.crmtable thead th:hover { color: var(--gold); }
.crmtable th.th-c, .crmtable td.th-c { text-align: center; }
.crmtable tbody tr { cursor: pointer; }
.crmtable tbody tr:hover { background: var(--gold-soft); }
.crmtable tr.has-new { background: rgba(200,154,96,.08); }
.crmtable tr.archived { opacity: .55; }
.crmtable .td-zone { font-size: 12px; }
.crmtable .dim { color: var(--muted); }
.mini-pipe { display: inline-flex; align-items: center; gap: 3px; }
.mini-pipe .mdot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; }
.mini-pipe .mdot.done { background: var(--c); }
.mini-pipe .mdot.cur { background: var(--c); box-shadow: 0 0 0 2px var(--gold-soft); }
.mini-pipe .mini-lbl { margin-left: 7px; font-size: 11px; color: var(--muted); }
.mini-lost { color: var(--danger); font-weight: 600; font-size: 12px; }
.na { font-weight: 600; }
.na.hot { color: var(--danger); }
.na.warn { color: var(--warn); }
.na.gold { color: var(--gold); }
.na.dim { color: var(--muted); font-weight: 400; }
.crmtable .td-args { white-space: normal; max-width: 360px; min-width: 200px; }
.tbl-args { margin: 0; padding-left: 15px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.tbl-args li { margin: 1px 0; }
/* carte : frise pipeline + boutons d'action contextuels (comme la fiche détail) */
.ld-pipe-mini { margin: 4px 0 8px; }
.card-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.card-acts .btn-ghost, .card-acts .btn-gold { font-size: 12.5px; padding: 6px 10px; }
.td-contact .ct-ic { font-size: 16px; margin: 0 4px; text-decoration: none; position: relative; }
/* point ROUGE sur le logo 💬 = nouveau message non lu (remplace l'ancienne colonne dédiée) */
.td-contact .ct-ic.unread::after { content: "●"; color: var(--danger); font-size: 10px; position: absolute; top: -5px; right: -7px; }
@media (max-width: 720px) { .crmtable th, .crmtable td { padding: 8px 9px; } }

/* Conversation : message + signature = un seul bloc visuel (option B) */
.msg-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--ink-2); }
.msg-wrap textarea { width: 100%; border: 0; border-radius: 0; resize: vertical; display: block; background: transparent; }
.msg-wrap textarea:focus { outline: none; box-shadow: none; }
.sig-preview { border-top: 1px dashed var(--line); }
.sigp-h { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 5px 13px; background: var(--gold-soft); }
.sigp-body { background: #fff; color: #333333; padding: 13px 15px; font: 13px/1.6 Arial, Helvetica, sans-serif; }
.sigp-body a { color: #a87840; text-decoration: none; }
.sigp-body strong { color: #1f1b18; }
.sigp-closing { margin-bottom: 10px; }
.sigp-card { display: flex; align-items: flex-start; gap: 14px; }
.sigp-card > img { width: 56px; height: 56px; border-radius: 12px; flex: none; display: block; }
.sigp-info { border-left: 2px solid #a87840; padding-left: 14px; line-height: 1.5; }
.sigp-brand { font-size: 15px; font-weight: 700; color: #1f1b18; }
.sigp-tag { font-size: 12px; color: #8a8077; margin-bottom: 5px; }
.sigp-name { color: #333; }

/* Fiche : bloc Documents (devis envoyé + PJ reçues) sous Traitement */
.ld-docs-t { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 8px 0 3px; }
.ld-doc { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gold); text-decoration: none; padding: 4px 0; }
.ld-doc:hover { color: var(--gold-dark); }
.ld-doc.last { font-weight: 600; }
.ld-doc-d { color: var(--muted); font-size: 11px; font-weight: 400; margin-left: auto; white-space: nowrap; }
.ld-docs-recv { margin-top: 4px; }
.ld-docs-more summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 5px 0; }
.ld-docs-more summary:hover { color: var(--gold); }

/* ---- tableau de bord regroupé & explicité ---- */
.dash-group { margin-bottom: 22px; }
.dash-grid { margin-bottom: 0; }
.dash-gtitle { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.dash-gtitle b { font-size: 14px; color: var(--gold); letter-spacing: .3px; }
.dash-gtitle span { font-size: 12px; color: var(--muted); }
.dash-section-h { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.kpi { display: flex; align-items: center; gap: 14px; }
.kpi-ic { font-size: 26px; flex: none; width: 38px; text-align: center; line-height: 1; }
.kpi-body { min-width: 0; }
.kpi-body .l { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); margin-top: 1px; }
.kpi-hint { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.35; }

/* entonnoir : chaque ligne tient sur une seule ligne */
.fbar .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbar .val { width: auto; min-width: 78px; white-space: nowrap; }
.fbar.empty { opacity: .5; }
.funnel-sub { font-size: 11px; color: var(--muted); font-weight: 400; }