/* FB-Scraper design system. */

:root {
  --sg-blue-light: #bcddff;
  --sg-blue: #7daad4;
  --sg-blue-dark: #5a8eb8;
  --sg-text: #000000;
  --sg-text-soft: #334155;
  --sg-text-muted: #64748b;
  --sg-border: #e2e8f0;
  --sg-border-strong: #cbd5e1;
  --sg-row-hover: #f1f5f9;
  --sg-bg-soft: #f8fafc;
}

/* ── Primitives migrées vers Basecoat + tokens (voir app.css) ──
   .card / .btn* / .tab* / .input/.select/.textarea / .toast* ont été retirés
   d'ici : les boutons viennent de Basecoat, le reste est retokenisé dans
   app.css. Les badges et variables --sg-* restent le temps de migrer les
   écrans qui en dépendent encore (Posts, Pipe, Stats…). */

.brand-text { color: var(--foreground); font-weight: 600; letter-spacing: -0.01em; }
.brand-accent { color: var(--primary); }

/* ── Sidebar : rail repliable (desktop) ──────────────────────────────────────
   Basecoat traite la sidebar comme un tiroir (drawer) piloté par `aria-hidden` :
   nav en translate:-100% quand « fermé », ET surtout l'élément `.sidebar`
   lui-même devient un fond noir `position:fixed; inset:0` quand « ouvert ».
   Sur desktop on en prend le contrôle total : le menu devient un rail permanent
   que l'on peut REPLIER. On neutralise donc le backdrop (qui recouvrait le
   contenu — c'était la cause de l'overlap avec le Kanban) et on pilote la
   visibilité via `html.sidebar-collapsed` (persisté, voir app.html).
   En dessous de 768px on garde le tiroir mobile (hamburger).

   `--sidebar-offset` = largeur réellement réservée par le rail. Consommé par le
   contenu full-bleed (Kanban) pour ne pas passer SOUS la barre. 0 sur mobile
   (le tiroir est un overlay) et 0 quand le rail est replié. */
body { --sidebar-offset: 0px; }

/* Bouton « replier » caché par défaut (mobile : le hamburger gère le tiroir).
   Affiché en inline-flex sur desktop par le @media ci-dessous (cascade order). */
.sidebar-collapse-btn { display: none; }

@media (min-width: 768px) {
  body { --sidebar-offset: var(--sidebar-width); }
  html.sidebar-collapsed body { --sidebar-offset: 0px; }

  /* Rail permanent : on tue le backdrop du tiroir Basecoat. */
  #app-sidebar.sidebar {
    display: block !important;
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    z-index: auto !important;
  }
  #app-sidebar.sidebar > nav {
    --tw-translate-x: 0 !important;
    translate: 0 0 !important;
    transform: none !important;
    transition: translate 0.2s ease;
  }
  #app-sidebar.sidebar + * {
    margin-left: var(--sidebar-width) !important;
    transition: margin-left 0.2s ease;
  }

  /* État replié : le rail glisse hors écran, le contenu récupère la place. */
  html.sidebar-collapsed #app-sidebar.sidebar > nav {
    translate: -100% 0 !important;
  }
  html.sidebar-collapsed #app-sidebar.sidebar + * {
    margin-left: 0 !important;
  }

  /* Le bouton flottant « rouvrir » n'apparaît que lorsque le rail est replié. */
  html.sidebar-collapsed .sidebar-expand-btn { display: inline-flex; }

  /* Bouton « replier » (dans le header du rail) : desktop uniquement. On le pilote
     ici car l'utilitaire Tailwind `md:inline-flex` n'est pas généré dans le build.
     La règle de base `display:none` est définie AVANT ce @media → l'override
     desktop gagne par ordre de cascade. */
  .sidebar-collapse-btn { display: inline-flex; }
}

/* Bouton flottant « rouvrir le menu » : caché par défaut (mobile + rail déplié),
   affiché par la règle desktop ci-dessus quand `html.sidebar-collapsed`. */
.sidebar-expand-btn {
  display: none;
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Collapsible nav groups (<details name> accordion) — small indent + a chevron
   on the group summary so the CRM / Facebook / Scraper / Settings hierarchy reads
   clearly. The summary itself is styled by Basecoat like a nav item. */
.sidebar nav details > ul { margin-left: 0.5rem; }
.sidebar nav details > summary { cursor: pointer; list-style: none; }
.sidebar nav details > summary::-webkit-details-marker { display: none; }
.sidebar nav details > summary::after {
  content: "›";
  margin-left: auto;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
  opacity: 0.6;
}
.sidebar nav details[open] > summary::after { transform: rotate(-90deg); }

/* Badges */
.badge {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

/* Outcome badges — monochrome blue gradient */
.badge-newlead    { background: #e0f2fe; color: #000; border-color: #bae6fd; }
.badge-inprogress { background: var(--sg-blue-light); color: #000; border-color: var(--sg-blue); }
.badge-converted  { background: var(--sg-blue); color: #000; border-color: var(--sg-blue-dark); }
.badge-lost       { background: #e2e8f0; color: var(--sg-text-soft); border-color: #cbd5e1; }
.badge-dropped    { background: #f1f5f9; color: var(--sg-text-muted); border-color: #e2e8f0; }

/* Reply status badges (legacy — kept for now in case old data round-trips) */
.badge-draft    { background: var(--sg-blue-light); color: #000; border-color: var(--sg-blue); }
.badge-sent     { background: var(--sg-blue); color: #000; border-color: var(--sg-blue-dark); }
.badge-ignored  { background: #f1f5f9; color: var(--sg-text-muted); border-color: #e2e8f0; }

/* Unified status badges (synthesised from outcome + reply_status).
   Class names mirror statusBadge() in app.js — keep both in sync. */
.badge-status-new-lead              { background: #e0f2fe;            color: #000;                  border-color: #bae6fd; }
.badge-status-answered-sent-on-fb   { background: var(--sg-blue-light);color: #000;                  border-color: var(--sg-blue); }
.badge-status-in-progress           { background: var(--sg-blue);     color: #000;                  border-color: var(--sg-blue-dark); }
.badge-status-converted             { background: var(--sg-blue-dark);color: #fff;                  border-color: #1e3a8a; }
.badge-status-lost                  { background: #e2e8f0;            color: var(--sg-text-soft);   border-color: #cbd5e1; }
.badge-status-dropped-not-relevant  { background: #f1f5f9;            color: var(--sg-text-muted);  border-color: #e2e8f0; }

/* Group visibility badges — private = blue/lock, public = green/globe.
   Mirror groupEffectiveVisibility() in app.js. */
.badge-private { background: #e0f2fe; color: #0c4a6e; border-color: #bae6fd; }
.badge-public  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* Category badges */
.cat-leadclient    { background: var(--sg-blue-light); color: #000; border-color: var(--sg-blue); }
/* Lead Client subtypes (2026-07 split): sky / teal / amber. */
.cat-leadclient-courtterme { background: #e0f2fe; color: #0c4a6e; border-color: #bae6fd; }
.cat-leadclient-longterme  { background: #ccfbf1; color: #134e4a; border-color: #99f6e4; }
.cat-leadclient-achat      { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.cat-leadpropriétaire { background: var(--sg-blue); color: #000; border-color: var(--sg-blue-dark); }
/* Lead Partner — purple to visually separate the B2B funnel from B2C
   client/owner badges (which live on the blue scale). */
.cat-leadpartner   { background: #ede9fe; color: #4c1d95; border-color: #c4b5fd; }
.cat-nonpertinent  { background: #f1f5f9; color: var(--sg-text-muted); border-color: #e2e8f0; }
.cat-àanalyser     { background: #fef3c7; color: #92400e; border-color: #fde68a; }
/* Fallback for any unmapped */
.cat-default { background: #f1f5f9; color: var(--sg-text-muted); border-color: #e2e8f0; }

/* Role badges */
.role-super_admin { background: var(--sg-blue); color: #000; border-color: var(--sg-blue-dark); }
.role-standard    { background: #f1f5f9; color: var(--sg-text-muted); border-color: #e2e8f0; }

/* .tab*, .input/.select/.textarea, .toast* → retokenisés dans app.css.
   On conserve uniquement le modificateur mono, indépendant du thème. */
.textarea-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.8rem; }

/* Logs (action runner) */
.log {
  background: #0f172a;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  max-height: 60vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.log .stderr { color: #fca5a5; }
.log .meta   { color: var(--sg-blue); font-style: italic; }

/* Group rows (drag-and-drop) */
.group-row {
  display: grid;
  grid-template-columns: auto 1fr 2fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--sg-border);
  border-radius: 0.5rem;
  background: #fff;
}
.group-row .handle {
  cursor: grab;
  color: var(--sg-text-muted);
  user-select: none;
}
.group-row.dragging { opacity: 0.4; }

/* Data table — leads */
.data-table {
  width: 100%;
  background: #fff;
  border: 1px solid var(--sg-border);
  border-radius: 0.75rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.data-table thead th {
  background: var(--sg-bg-soft);
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sg-text-muted);
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--sg-border);
  font-weight: 600;
  white-space: nowrap;
}
.data-table thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.data-table thead th.sortable:hover { color: var(--sg-text); }
.data-table tbody tr.summary {
  border-bottom: 1px solid var(--sg-border);
  cursor: pointer;
  transition: background-color 80ms ease, box-shadow 120ms ease;
}
.data-table tbody tr.summary:hover { background: var(--sg-row-hover); }
/*
  Opened lead — the goal is a clean, restrained way to make THIS row pop above
  the rest of the table and the page chrome without resorting to a heavy
  background. We do four small things at once:
    1. Lift the row: slightly deeper blue tint + left accent bar.
    2. Push the surrounding rows back: the detail-inner card sits on a darker
       backdrop so the open row + its detail visually fuse into one block.
    3. Subtle shadow above/below to detach from neighbouring rows.
    4. Stronger separators on the detail card itself (was nearly invisible).
*/
.data-table tbody tr.summary.is-open {
  background: var(--sg-blue-light);
  box-shadow:
    inset 3px 0 0 0 var(--sg-blue-dark),
    0 -1px 0 0 var(--sg-blue) inset;
}
.data-table tbody tr.summary.is-open td { font-weight: 500; }
.data-table tbody tr.summary.is-open:hover { background: var(--sg-blue-light); }
.data-table td {
  padding: 0.55rem 0.8rem;
  font-size: 0.875rem;
  vertical-align: middle;
}
.data-table tr.detail-row td {
  padding: 0;
  background: var(--sg-bg-soft);
}
.data-table .detail-inner {
  /* Slight inset so the open lead reads as a card lifted out of the table. */
  margin: 0 0.55rem 0.7rem 0.55rem;
  padding: 1.1rem 1.35rem;
  background: #ffffff;
  border: 1px solid var(--sg-blue);
  border-left: 3px solid var(--sg-blue-dark);
  border-radius: 0 0.65rem 0.65rem 0.65rem;
  box-shadow:
    0 1px 0 0 var(--sg-blue-light),
    0 8px 24px -16px rgba(15, 23, 42, 0.18);
}
/* Sub-section dividers inside the detail panel — was border-slate-200 (too
   pale on the new white card); upgrade to the design system border. */
.data-table .detail-inner .border-t { border-top-color: var(--sg-border-strong) !important; }
.chev {
  display: inline-block;
  width: 0.85rem;
  text-align: center;
  color: var(--sg-text-muted);
  transition: transform 120ms ease;
}
.chev.open { transform: rotate(90deg); color: var(--sg-text); }

.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.filter-bar .filter-search { grid-column: span 2; min-width: 200px; }
.filter-bar label {
  display: block;
  font-size: 0.72rem;
  color: var(--sg-text-muted);
  margin-bottom: 0.2rem;
}

details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Scraper card collapse affordance — chevron rotates with the native <details>
   open state (click anywhere on the row to fold/unfold). */
.sc-chev {
  display: inline-block;
  width: 0.9rem;
  text-align: center;
  color: var(--sg-text-muted);
  transition: transform 150ms ease;
}
details[data-card][open] > summary .sc-chev { transform: rotate(90deg); color: var(--sg-text); }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  /* Above the contact drawer (z-38) so confirm dialogs sit on top of it. */
  z-index: 60;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: modal-fade-in 120ms ease;
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-box {
  background: #fff;
  border: 1px solid var(--sg-blue);
  border-radius: 0.85rem;
  padding: 1.25rem 1.5rem;
  width: 100%;
  max-width: 560px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  animation: modal-pop-in 140ms ease;
}
@keyframes modal-pop-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--sg-text);
}
.modal-help {
  font-size: 0.82rem;
  color: var(--sg-text-muted);
  margin-bottom: 1rem;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

/* =====================================================================
   Bulk-add groups modal — SaaS-style two-pane import UX.
   ===================================================================== */
.bulk-add-backdrop {
  /* Override the .modal-backdrop centering to top-align — the modal is tall
     and centering it would push content below the fold on small screens. */
  align-items: flex-start;
  padding-top: 3vh;
  padding-bottom: 3vh;
  overflow-y: auto;
}
.bulk-add-modal {
  background: #fff;
  border: 1px solid var(--sg-border-strong);
  border-radius: 0.85rem;
  width: 100%;
  max-width: 960px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  animation: modal-pop-in 140ms ease;
}
.bulk-add-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem 0.9rem;
  border-bottom: 1px solid var(--sg-border);
}
.bulk-add-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sg-text);
}
.bulk-add-sub {
  font-size: 0.82rem;
  color: var(--sg-text-muted);
  margin-top: 0.2rem;
  max-width: 60ch;
  line-height: 1.5;
}
.bulk-add-sub code {
  background: var(--sg-bg-soft);
  border: 1px solid var(--sg-border);
  border-radius: 0.3rem;
  padding: 0.05rem 0.32rem;
  font-size: 0.78rem;
  color: var(--sg-text);
}
.bulk-add-x {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--sg-text-muted);
  padding: 0.2rem 0.45rem;
  border-radius: 0.4rem;
}
.bulk-add-x:hover { background: var(--sg-row-hover); color: var(--sg-text); }

.bulk-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px; /* hairline divider between panes */
  background: var(--sg-border);
  flex: 1 1 auto;
  min-height: 360px;
  max-height: 60vh;
  overflow: hidden;
}
@media (max-width: 760px) {
  .bulk-add-grid { grid-template-columns: 1fr; max-height: none; }
}
.bulk-add-pane {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bulk-add-pane-preview { background: var(--sg-bg-soft); }
.bulk-add-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.95rem;
  border-bottom: 1px solid var(--sg-border);
  background: #fff;
}
.bulk-add-pane-preview .bulk-add-pane-head { background: var(--sg-bg-soft); }
.bulk-add-pane-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sg-text-muted);
  font-weight: 600;
}
.bulk-add-pane-head .btn { padding: 0.18rem 0.55rem; font-size: 0.72rem; }

.bulk-add-textarea {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  padding: 0.85rem 1rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--sg-text);
  resize: none;
  background: #fff;
  outline: none;
}
.bulk-add-textarea::placeholder {
  color: var(--sg-text-muted);
  opacity: 0.55;
}

.bulk-add-preview-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.45rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.bulk-add-empty {
  color: var(--sg-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem 1rem;
  font-style: italic;
}
.bulk-add-row {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  align-items: start;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: #fff;
  border: 1px solid var(--sg-border);
  border-radius: 0.5rem;
  font-size: 0.82rem;
  animation: bulk-row-in 140ms ease;
}
@keyframes bulk-row-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bulk-add-row-ready     { border-left: 3px solid #16a34a; }
.bulk-add-row-duplicate { border-left: 3px solid #d97706; background: #fffbeb; }
.bulk-add-row-invalid   { border-left: 3px solid #dc2626; background: #fef2f2; }
.bulk-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.05rem;
}
.bulk-add-icon.ok   { background: #dcfce7; color: #166534; }
.bulk-add-icon.warn { background: #fef3c7; color: #92400e; }
.bulk-add-icon.err  { background: #fee2e2; color: #991b1b; }
.bulk-add-row-body  { min-width: 0; }
.bulk-add-row-name  {
  font-weight: 500;
  color: var(--sg-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bulk-add-meta {
  font-size: 0.72rem;
  color: var(--sg-text-muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  word-break: break-all;
}
.bulk-add-meta.warn { color: #92400e; font-family: inherit; }
.bulk-add-meta.err  { color: #991b1b; font-family: inherit; }

.bulk-add-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.4rem;
  border-top: 1px solid var(--sg-border);
  background: var(--sg-bg-soft);
  flex-wrap: wrap;
}
.bulk-add-stats {
  display: flex;
  gap: 0.95rem;
  font-size: 0.82rem;
  color: var(--sg-text-soft);
  flex-wrap: wrap;
}
.bulk-add-stat { display: inline-flex; align-items: center; gap: 0.35rem; }
.bulk-add-stat strong { color: var(--sg-text); font-weight: 600; }
.bulk-add-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  display: inline-block;
  box-shadow: 0 0 0 2px #fff;
}
.bulk-add-stat-ready   .bulk-add-dot { background: #16a34a; }
.bulk-add-stat-dup     .bulk-add-dot { background: #d97706; }
.bulk-add-stat-invalid .bulk-add-dot { background: #dc2626; }
.bulk-add-actions { display: flex; gap: 0.5rem; }

/* SaaS-style KPI cards (group stats panel) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}
.kpi {
  background: #fff;
  border: 1px solid var(--sg-border);
  border-radius: 0.65rem;
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.kpi .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sg-text-muted);
  font-weight: 600;
}
.kpi .value {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--sg-text);
  line-height: 1.1;
}
.kpi .delta {
  font-size: 0.72rem;
  color: var(--sg-text-muted);
}
.kpi.accent {
  background: linear-gradient(135deg, #ffffff 0%, var(--sg-blue-light) 100%);
  border-color: var(--sg-blue);
}
.kpi.accent .value { color: var(--sg-blue-dark); }

/* Segmented period selector */
.segmented {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--sg-border-strong);
  border-radius: 0.5rem;
  overflow: hidden;
}
.segmented button {
  background: transparent;
  border: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--sg-text-soft);
  border-right: 1px solid var(--sg-border);
}
.segmented button:last-child { border-right: 0; }
.segmented button.active {
  background: var(--sg-blue-light);
  color: var(--sg-text);
  font-weight: 600;
}
.segmented button:hover:not(.active) { background: var(--sg-row-hover); }

/* Stats panel layout */
.stats-panel {
  background: #f8fbff;
  border-top: 1px solid var(--sg-blue-light);
  padding: 1.1rem 1.25rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (max-width: 720px) {
  .stats-grid { grid-template-columns: 1fr; }
}
.chart-wrap {
  position: relative;
  height: 260px;
  background: #fff;
  border: 1px solid var(--sg-border);
  border-radius: 0.65rem;
  padding: 0.75rem;
}
.chart-wrap > canvas { max-height: 100%; }
.chart-wrap > div[data-role="chart-empty"] { position: absolute; }
.legend-table {
  width: 100%;
  font-size: 0.85rem;
}
.legend-table td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--sg-border); }
.legend-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.15rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* =====================================================================
   Multi-select chip dropdown + date-range picker (Leads page filters)
   ===================================================================== */
.ms-wrap {
  position: relative;
}
.ms-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--sg-border-strong);
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.875rem;
  color: var(--sg-text);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ms-button:hover { border-color: var(--sg-blue); }
.ms-button:focus,
.ms-wrap:has(.ms-panel:not(.hidden)) .ms-button {
  outline: none;
  border-color: var(--sg-blue);
  box-shadow: 0 0 0 3px rgba(125, 170, 212, 0.35);
}
.ms-button .ms-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-button .ms-caret {
  color: var(--sg-text-muted);
  margin-left: 0.4rem;
  font-size: 0.75rem;
}

.ms-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-width: 280px;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--sg-blue);
  border-radius: 0.55rem;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  animation: ms-pop 100ms ease;
}
.ms-panel.ms-panel-wide { min-width: 280px; }
.ms-panel.hidden { display: none; }
@keyframes ms-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ms-panel-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.ms-empty {
  padding: 0.55rem 0.75rem;
  color: var(--sg-text-muted);
  font-size: 0.82rem;
  font-style: italic;
}
.ms-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}
.ms-item:hover { background: var(--sg-row-hover); }
.ms-item input[type="checkbox"] {
  width: 0.9rem;
  height: 0.9rem;
  accent-color: var(--sg-blue-dark);
  cursor: pointer;
}
.ms-panel-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--sg-border);
  background: var(--sg-bg-soft);
}
.ms-panel-foot-split { justify-content: space-between; }
.ms-panel-foot .btn { padding: 0.25rem 0.7rem; font-size: 0.78rem; }

/* Date range — quick-preset row + custom from/to inputs */
.ms-quick-row {
  display: flex;
  gap: 0.4rem;
  padding: 0.55rem 0.55rem 0;
}
.ms-quick-row .btn {
  flex: 1;
  padding: 0.3rem 0.4rem;
  font-size: 0.76rem;
  white-space: nowrap;
}
.ms-range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  padding: 0.6rem 0.55rem 0.5rem;
}
.ms-range-field {
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  color: var(--sg-text-muted);
  gap: 0.2rem;
}
.ms-range-field .input { padding: 0.32rem 0.5rem; font-size: 0.8rem; }

/* Expandable group row */
.group-card {
  background: #fff;
  border: 1px solid var(--sg-border);
  border-radius: 0.65rem;
  overflow: hidden;
}
.group-summary {
  display: grid;
  grid-template-columns: auto 1fr 2fr auto auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  transition: background-color 80ms ease;
}
.group-summary .group-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}
.group-summary .group-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--sg-text-soft);
  cursor: pointer;
  user-select: none;
}
.group-summary .group-flag input {
  cursor: pointer;
}
/* Visibility control (badge + select) in the group actions cell. */
.group-summary .group-vis {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.group-summary .group-vis .js-visibility {
  width: auto;
  height: 30px;
  padding: 2px 6px;
  font-size: 12px;
}
.group-summary:hover { background: var(--sg-row-hover); }
.group-summary.open { background: var(--sg-blue-light); }
.group-summary .handle {
  cursor: grab;
  color: var(--sg-text-muted);
  user-select: none;
}
.group-summary input.input {
  /* visual hint that the field is part of a clickable row */
  background: #fff;
}

/* Stats table — keep headers and cells from wrapping so the column count is
   honest, let the wrapper scroll horizontally, and pin the Conv-rate column
   to the right edge so it's visible no matter how far we scroll. */
.stats-table-wrap {
  position: relative;
}
.stats-table {
  min-width: 100%;
  white-space: nowrap;
}
.stats-table th, .stats-table td {
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}
.stats-table .stats-conv {
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -6px 0 6px -6px rgba(0,0,0,0.08);
}
.stats-table thead th.stats-conv { background: var(--sg-bg-soft); }
.stats-table tbody tr:hover .stats-conv { background: var(--sg-row-hover); }

/* Stats column headers — drag handle, hover/dragging states. The grip glyph
   sits inline so the column label keeps its arrow-sort affordance. */
.stats-table .stats-th-drag { cursor: grab; user-select: none; }
.stats-table .stats-th-drag .stats-th-grip {
  color: var(--sg-text-muted);
  margin-right: 0.35rem;
  cursor: grab;
  font-weight: normal;
}
.stats-table .stats-th-drag.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.stats-table .stats-th-drag.drag-over {
  background: var(--sg-blue-light);
  box-shadow: inset 3px 0 0 var(--sg-blue);
}

/* Leads pager — sits below the data table, flexes Info | Controls | PerPage. */
.lead-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--sg-border);
  font-size: 0.85rem;
}
.lead-pager-info { color: var(--sg-text-muted); }
.lead-pager-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.lead-pager-controls .btn { padding: 0.25rem 0.55rem; min-width: 2rem; }
.lead-pager-page { padding: 0 0.5rem; color: var(--sg-text-soft); }
.lead-pager-perpage {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Bulk-action bar — appears at the bottom of the viewport when ≥1 lead is
   ticked. Fixed position so it stays visible while scrolling through pages
   of leads. The hidden attribute is toggled from JS. */
.bulk-bar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 1rem;
  background: #0f172a;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  font-size: 0.85rem;
}
.bulk-bar[hidden] { display: none; }
.bulk-bar .bulk-count {
  font-weight: 600;
  background: rgba(255,255,255,0.12);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.bulk-bar select,
.bulk-bar .btn {
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.bulk-bar select { padding: 0.3rem 0.5rem; }
.bulk-bar select option { color: #000; }
.bulk-bar .btn:hover { background: rgba(255,255,255,0.18); cursor: pointer; }
.bulk-bar .btn-primary {
  background: var(--sg-blue);
  color: #000;
  border-color: transparent;
  font-weight: 600;
}
.bulk-bar .btn-primary:hover { background: var(--sg-blue); filter: brightness(1.05); }
.bulk-bar .btn-link {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.7);
  text-decoration: underline;
}
.bulk-bar .btn-link:hover { background: transparent; color: #fff; }

/* ─── Loaders ──────────────────────────────────────────────────────────
   Two flavours: a full-table overlay for initial /api/leads loads, and a
   small inline spinner used inside expanded rows during hydration. */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 2.5px solid var(--sg-border);
  border-top-color: var(--sg-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -3px;
}
.spinner-lg {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}

/* Full-table loading state — used while /api/leads is in flight. Replaces the
   bare "Loading…" text with a centered spinner + caption. */
.leads-loading {
  padding: 4rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--sg-text-soft);
}
.leads-loading .caption { font-size: 0.9rem; }
.leads-loading .hint { font-size: 0.75rem; color: var(--sg-text-muted); }

/* Inline loader inside an expanded detail row, shown while the slim lead is
   being hydrated to full detail. Keeps the row height stable so the table
   doesn't jump when the real content arrives. */
.detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--sg-text-soft);
  font-size: 0.85rem;
}

/* Result-modal body — used by openInfoModal() for bulk-action recaps. The
   .info-modal-body row pattern is a left-aligned key + right-aligned value
   with a thin separator; readable at a glance even when the operator only
   skims it before closing. */
.info-modal-body { font-size: 0.9rem; }
.info-modal-body .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--sg-border);
}
.info-modal-body .summary-row:last-of-type { border-bottom: 0; }
.info-modal-body .summary-row .label { color: var(--sg-text-soft); }
.info-modal-body .summary-row .value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.info-modal-body .summary-row .value-zero { color: var(--sg-text-muted); font-weight: 400; }
.info-modal-body .summary-headline {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--sg-border);
}
.info-modal-body .errors-block {
  margin-top: 0.85rem;
  padding: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 0.8rem;
  max-height: 200px;
  overflow-y: auto;
}
.info-modal-body .errors-block .errors-title {
  font-weight: 600;
  color: #991b1b;
  margin-bottom: 0.4rem;
}
.info-modal-body .errors-block ul { margin: 0; padding-left: 1.1rem; }
.info-modal-body .errors-block li { margin-bottom: 0.25rem; word-break: break-all; }

/* ============================================================
 * Prompt Coach — inline diff + change list styles
 * ============================================================ */

/* Inline diff inside the proposed prompt. <ins>/<del> get the colours; the
   surrounding <pre> just preserves whitespace and wraps long lines so the
   operator never needs to scroll horizontally. */
.pc-diff-pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.75rem 0.9rem;
  background: #fafafa;
  border: 1px solid var(--sg-border, #e2e8f0);
  border-radius: 6px;
  max-height: 28rem;
  overflow-y: auto;
}
.pc-diff-add {
  background: #dcfce7;
  color: #166534;
  text-decoration: none;
  padding: 0 1px;
  border-radius: 2px;
}
.pc-diff-del {
  background: #fee2e2;
  color: #991b1b;
  text-decoration: line-through;
  padding: 0 1px;
  border-radius: 2px;
}

/* Transition-bucket pills (e.g. "Non pertinent → Lead Client · 32") */
.pc-bucket-pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  margin: 0 0.15rem 0.2rem 0;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.7rem;
  border-radius: 999px;
  border: 1px solid #c7d2fe;
}

/* Per-change list under the diff */
.pc-changes-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}
.pc-change {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px dashed var(--sg-border, #e2e8f0);
}
.pc-change:first-child { border-top: 0; }
.pc-change-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  height: fit-content;
  text-transform: lowercase;
}
.pc-change-add { background: #dcfce7; color: #166534; }
.pc-change-del { background: #fee2e2; color: #991b1b; }
.pc-change-mod { background: #fef3c7; color: #92400e; }
.pc-change-body { flex: 1; font-size: 0.8rem; }
.pc-change-old { color: #991b1b; text-decoration: line-through; }
.pc-change-new { color: #166534; }
.pc-change-just { color: #475569; font-style: italic; margin-top: 0.25rem; }

/* ============================================================
 * Actions page — vertical tab layout
 * ============================================================ */
.actions-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

/* The tab rail is a soft card so it reads as a distinct nav surface. */
.actions-tabs {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: sticky;
  top: 1rem;
  padding: 0.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid var(--sg-border);
  border-radius: 0.85rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.actions-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  padding: 0.65rem 0.85rem 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--sg-text-soft, #475569);
  font-size: 0.93rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
/* Accent bar that animates in on the active tab. */
.actions-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  border-radius: 3px;
  background: #6366f1;
  transition: transform 0.18s ease;
}
.actions-tab:hover {
  background: #f1f5f9;
  color: var(--sg-text, #0f172a);
}
.actions-tab:active { transform: translateX(1px); }
.actions-tab.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
  font-weight: 600;
}
.actions-tab.is-active::before { transform: translateY(-50%) scaleY(1); }
.actions-tab-ico {
  font-size: 1rem;
  line-height: 1;
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}

.actions-content {
  flex: 1 1 auto;
  min-width: 0; /* let inner overflow-x-auto tables shrink instead of pushing width */
}
/* Fade-in when a panel becomes active — keeps the switch feeling responsive. */
.actions-panel { display: none; }
.actions-panel.is-active {
  display: block;
  animation: actions-panel-in 0.18s ease;
}
@keyframes actions-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stack the tabs on top on narrow viewports. */
@media (max-width: 720px) {
  .actions-layout { flex-direction: column; }
  .actions-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: auto;
    position: static;
    width: 100%;
  }
  .actions-tab { flex: 1 1 auto; justify-content: center; }
  .actions-tab::before { display: none; }
}

/* Leads — dedup badge + dup-detail block */
.dup-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  margin-left: 0.3rem;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 999px;
  white-space: nowrap;
}
.dup-detail {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--sg-border, #e2e8f0);
}
.dup-detail ul {
  margin: 0.25rem 0;
  padding-left: 1.1rem;
}
.dup-detail li { margin-bottom: 0.1rem; }

/* Leads — saved-filter presets bar */
.preset-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--sg-bg-soft, #f8fafc);
  border: 1px solid var(--sg-border, #e2e8f0);
  border-radius: 0.6rem;
  font-size: 0.85rem;
}
.preset-bar .preset-label {
  font-weight: 600;
  color: var(--sg-text-soft, #475569);
}

/* Leads — draggable column headers */
.data-table thead th.col-draggable { cursor: grab; }
.data-table thead th.col-draggable:active { cursor: grabbing; }
.col-grip {
  color: var(--sg-border-strong, #cbd5e1);
  margin-right: 0.3rem;
  font-size: 0.8rem;
  cursor: grab;
  user-select: none;
}
.data-table thead th.col-draggable:hover .col-grip { color: var(--sg-blue, #7daad4); }
.data-table thead th.col-dragging { opacity: 0.4; }
.data-table thead th.col-drop-target {
  box-shadow: inset 3px 0 0 0 var(--sg-blue-dark, #5a8eb8);
  background: var(--sg-blue-light, #bcddff);
}

/* ── Right drawer (contact panel) ───────────────────────────────── */
/* z-index 38: above the sticky header (z-30) but BELOW the modal (forced to 60)
   so a confirm popup renders ON TOP of the drawer, not behind it. */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 38;
  background: rgba(15, 23, 42, 0.35);
  display: flex; justify-content: flex-end;
}
.drawer-panel {
  width: 46vw; min-width: 40vw; max-width: 96vw; height: 100%;
  background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  animation: drawer-in 160ms ease-out;
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } }
/* Dual-panel: the listing slide-over opened from a contact in the pipe. The
   backdrop is transparent (contact panel stays bright) and sits just above the
   contact drawer (z 38); the contact .drawer-panel gets .drawer-pushed to slide
   left by one panel width so both are visible side by side. */
.drawer-backdrop.drawer-secondary { background: transparent; z-index: 39; }
.drawer-panel.drawer-pushed { transform: translateX(-46vw); transition: transform 160ms ease-out; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--sg-border, #e2e8f0);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.drawer-body { padding: 1rem; overflow-y: auto; flex: 1; }

/* ── Lightbox (photo carousel) + map modal — z 70: above the modal (z 60) ── */
.sg-lightbox {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(2, 6, 23, 0.82);
  display: flex; align-items: center; justify-content: center;
}
.sg-lb-img {
  max-width: 92vw; max-height: 86vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); user-select: none;
}
.sg-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 9999px; border: none;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sg-lb-nav:hover { background: rgba(255,255,255,0.28); }
.sg-lb-prev { left: 3vw; } .sg-lb-next { right: 3vw; }
.sg-lb-close {
  position: absolute; top: 18px; right: 22px; width: 40px; height: 40px;
  border-radius: 9999px; border: none; background: rgba(255,255,255,0.14);
  color: #fff; font-size: 20px; cursor: pointer;
}
.sg-lb-close:hover { background: rgba(255,255,255,0.28); }
.sg-lb-counter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #e2e8f0; font-size: 13px; background: rgba(0,0,0,0.4);
  padding: 3px 10px; border-radius: 9999px;
}
.sg-lb-mapwrap { width: 92vw; height: 86vh; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.5); background: #e2e8f0; }
.sg-thumb { cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; }
.sg-thumb:hover { transform: scale(1.04); box-shadow: 0 2px 10px rgba(0,0,0,0.25); }

/* ── Kanban (Pipe) ──────────────────────────────────────────────── */
/* Full-bleed: break out of the centered max-width container to use the whole
   page width. */
/* Full-bleed : le board s'étend sur toute la largeur DISPONIBLE (viewport moins
   le rail), pas sur 100vw — sinon il déborde de `--sidebar-offset / 2` SOUS la
   sidebar. On décale donc l'origine et on réduit la largeur de l'offset du rail. */
.kanban-fullbleed {
  margin-left: calc(-50vw + 50% + var(--sidebar-offset, 0px) / 2);
  width: calc(100vw - var(--sidebar-offset, 0px));
  padding: 0 1.5rem;
  box-sizing: border-box;
  transition: margin-left 0.2s ease, width 0.2s ease;
}
/* Mirrored top scrollbar — its inner div is sized to the board's scrollWidth
   in JS so the thumb matches. */
.kanban-topscroll { overflow-x: auto; overflow-y: hidden; }
.kanban-topscroll-inner { height: 1px; }
.kanban-board { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; align-items: flex-start; }
.kanban-col {
  flex: 0 0 240px; background: var(--sg-row-hover, #f1f5f9);
  border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px; padding: 0.5rem;
}
.kanban-col.drop-target { box-shadow: inset 0 0 0 2px var(--sg-blue, #5a8eb8); background: var(--sg-blue-light, #e0f2fe); }
.kanban-col-head { font-weight: 600; font-size: 0.85rem; padding: 0.25rem 0.25rem 0.5rem; }
/* Columns scroll internally instead of growing the page endlessly. */
.kanban-cards { display: flex; flex-direction: column; gap: 0.5rem; min-height: 40px; max-height: 68vh; overflow-y: auto; }
.kanban-card {
  background: #fff; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 6px;
  padding: 0.5rem; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.kanban-card:hover { border-color: var(--sg-blue, #5a8eb8); }
.kanban-card.dragging { opacity: 0.4; }

/* ── Panel prospect : détail du score au survol (desktop) / tap (mobile) ── */
.score-tip-wrap { position: relative; display: inline-flex; cursor: help; outline: none; }
.score-tip {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 190px; background: #fff; border: 1px solid var(--sg-border, #e2e8f0);
  border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 0.5rem 0.65rem;
  font-size: 12px; color: #475569;
}
.score-tip-wrap:hover .score-tip,
.score-tip-wrap:focus-visible .score-tip,
.score-tip-wrap.open .score-tip { display: block; }
.score-tip-row { display: flex; justify-content: space-between; gap: 1rem; padding: 1px 0; white-space: nowrap; }

/* ── Panel prospect : carte plein écran ── */
.map-overlay {
  position: fixed; inset: 0; z-index: 80; background: #fff;
  display: flex; flex-direction: column;
}
.map-overlay .map-topbar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--sg-border, #e2e8f0);
  background: #fff;
  /* position + z-index REQUIS : sans position, z-index est inerte et le
     dropdown de suggestions POI passe DERRIÈRE les tuiles Leaflet. */
  position: relative; z-index: 500;
}
.map-overlay .mo-body { flex: 1; min-height: 0; display: flex; }
.map-overlay .map-canvas { flex: 1; min-height: 0; min-width: 0; }
/* Panneau latéral droit (détail complet de l'offre) — la carte flex rétrécit */
.map-overlay .mo-side {
  width: 40%; min-width: 380px; max-width: 560px; flex: none;
  border-left: 1px solid var(--sg-border, #e2e8f0); background: #fff;
  overflow: auto;
}
/* Détail d'une offre au clic sur un marker — toujours au même endroit (bas).
   Cliquable → ouvre le panneau complet à droite (cursor:pointer). overflow
   visible pour que le tooltip du score puisse sortir sans scroll horizontal. */
.map-offer-detail {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 12px; z-index: 1000; width: min(560px, calc(100vw - 24px));
  background: #fff; border: 1px solid var(--sg-border, #e2e8f0);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 0.75rem; overflow: visible; cursor: pointer;
}
/* Les éléments interactifs gardent leur propre curseur. */
.map-offer-detail a, .map-offer-detail button, .map-offer-detail .score-tip-wrap { cursor: default; }
/* Le détail du score s'ouvre vers la GAUCHE (aligné à droite) pour rester dans
   la div et ne pas déclencher de scroll horizontal ; au-dessus des tuiles. */
.map-offer-detail .score-tip { left: auto; right: 0; z-index: 1100; }

/* ── Marker design (divIcon — plus d'images Leaflet cassées) ── */
.sg-pin { position: relative; }
.sg-pin .pin {
  width: 26px; height: 26px; border-radius: 50% 50% 50% 0;
  background: var(--sg-blue, #0ea5e9); border: 2px solid #fff;
  transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
}
.sg-pin .pin span { transform: rotate(45deg); font-size: 11px; color: #fff; font-weight: 700; }
.sg-pin.sg-pin-active .pin { background: #f59e0b; }

/* ── Carte : recherche de POI ── */
.poi-results {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 1200;
  width: 340px; max-height: 340px; overflow: auto; background: #fff;
  border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
.poi-item { padding: 0.4rem 0.6rem; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.poi-item:last-child { border-bottom: none; }
.poi-item:hover { background: #f8fafc; }
/* POI marker — étoile ambre, distinct des offres */
.sg-pin.sg-pin-poi .pin { background: #7c3aed; }

/* ── Assistant IA (chat) ─────────────────────────────────────────────────────
   Conversational search over listings + FB posts. Layout copies the codes of
   the best chat assistants (centered column, bottom composer, suggestion
   cards) while staying inside the Attio DS: theme tokens only, one accent,
   Inter, 4px grid, 120-150ms transitions. Dark mode comes free via tokens. */
.ai-chat {
  display: flex;
  flex-direction: column;
  max-width: 780px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
}
.ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ai-thread { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 20px 0 28px; }

/* Empty state — hero + clickable example prompts. */
.ai-empty { text-align: center; margin: auto 0; padding: 48px 8px 32px; }
.ai-empty-icon {
  width: 48px; height: 48px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--accent);
  color: var(--primary);
  border: 1px solid var(--border);
}
.ai-empty-icon svg { width: 22px; height: 22px; }
.ai-empty h2 { font-size: 20px; font-weight: 600; color: var(--foreground); margin-bottom: 4px; }
.ai-empty p { font-size: 14px; color: var(--muted-foreground); max-width: 420px; margin: 0 auto 24px; }
.ai-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: left; }
@media (max-width: 640px) { .ai-suggestions { grid-template-columns: 1fr; } }
.ai-suggestion {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  font-size: 13px; color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  cursor: pointer;
  transition: background 130ms ease-out, border-color 130ms ease-out;
}
.ai-suggestion:hover { background: var(--sg-row-hover); border-color: var(--sg-border-strong); }
.ai-suggestion svg { width: 16px; height: 16px; color: var(--muted-foreground); flex-shrink: 0; }

/* Messages. */
.ai-msg { display: flex; gap: 10px; animation: ai-in 150ms ease-out; }
@keyframes ai-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ai-msg-user { justify-content: flex-end; }
.ai-bubble-user {
  max-width: 85%;
  padding: 10px 14px;
  font-size: 14px; line-height: 1.5;
  color: var(--foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 16px 16px 4px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ai-msg-assistant { align-items: flex-start; }
.ai-avatar {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--accent);
  color: var(--primary);
  border: 1px solid var(--border);
  margin-top: 2px;
}
.ai-avatar svg { width: 15px; height: 15px; }
.ai-bubble-assistant { flex: 1; min-width: 0; font-size: 14px; line-height: 1.55; color: var(--foreground); padding-top: 4px; }
.ai-bubble-assistant.ai-busy { opacity: 0.55; pointer-events: none; }
.ai-summary { margin-bottom: 8px; }
.ai-clarify { color: var(--muted-foreground); font-style: italic; margin-bottom: 8px; }
.ai-error { color: #b91c1c; font-size: 13px; }

/* Thinking dots. */
.ai-dots { display: inline-flex; gap: 4px; padding: 6px 0; }
.ai-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-foreground);
  animation: ai-bounce 1.2s infinite ease-in-out;
}
.ai-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-bounce { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .ai-dots span { animation: none; }
  .ai-msg { animation: none; }
}

/* Interpreted-filter chips (removable). */
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ai-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ai-chip button {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.ai-chip button:hover { background: #fee2e2; color: #b91c1c; }

/* Result count line. */
.ai-count { font-size: 13px; color: var(--muted-foreground); margin-bottom: 8px; }
.ai-count-n { font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
.ai-count-hint { font-variant-numeric: tabular-nums; }

/* Result cards. */
.ai-cards { display: flex; flex-direction: column; gap: 8px; }
.ai-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  text-decoration: none;
  color: var(--foreground);
  transition: background 130ms ease-out, border-color 130ms ease-out;
}
a.ai-card:hover { background: var(--sg-row-hover); border-color: var(--sg-border-strong); }
.ai-card-thumb {
  width: 56px; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--muted);
  color: var(--muted-foreground);
  overflow: hidden;
}
.ai-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-card-thumb svg { width: 20px; height: 20px; }
.ai-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ai-card-title { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ai-card-bits { font-weight: 400; color: var(--muted-foreground); }
.ai-card-meta {
  font-size: 13px; color: var(--muted-foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-card-badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ai-card-badges:empty { display: none; }
.ai-card-score {
  flex-shrink: 0;
  min-width: 34px; height: 24px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--primary);
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ai-card-post { align-items: flex-start; }
.ai-card-postmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-card-author { font-size: 13px; font-weight: 500; }
.ai-card-when { font-size: 12px; color: var(--muted-foreground); }
.ai-card-text {
  font-size: 13px; color: var(--sg-text-soft, var(--foreground));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ai-card-links { display: flex; gap: 12px; margin-top: 2px; }
.ai-card-link { font-size: 12px; color: var(--primary); text-decoration: none; }
.ai-card-link:hover { text-decoration: underline; }
.ai-more {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  border: 0; background: none;
  font-size: 13px; color: var(--primary);
  cursor: pointer;
}
.ai-more:hover { text-decoration: underline; }
.ai-noresult {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted-foreground);
  padding: 12px 0;
}
.ai-noresult svg { width: 16px; height: 16px; }

/* Composer — sticky at the bottom, focus ring on the whole card. */
.ai-composer-wrap {
  position: sticky; bottom: 0;
  padding: 8px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--background) 75%, transparent);
}
.ai-composer {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.04);
  padding: 10px 12px 8px;
  transition: border-color 130ms ease-out, box-shadow 130ms ease-out;
}
.ai-composer:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent), 0 4px 16px rgba(0, 0, 0, 0.04);
}
.ai-composer textarea {
  width: 100%;
  border: 0; outline: none; resize: none;
  background: transparent;
  color: var(--foreground);
  font: inherit; font-size: 14px; line-height: 1.5;
  max-height: 160px;
}
.ai-composer textarea::placeholder { color: var(--muted-foreground); }
.ai-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.ai-target button { font-size: 12px; padding: 4px 10px; }
.ai-send {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground, #fff);
  cursor: pointer;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.ai-send:hover:not(:disabled) { transform: scale(1.06); }
.ai-send:disabled { opacity: 0.35; cursor: default; }
.ai-hint { text-align: center; font-size: 11px; color: var(--muted-foreground); margin-top: 6px; }


/* Assistant IA — header actions, conversation history panel, map view. */
.ai-head-actions { position: relative; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#ai-history-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  width: 320px; max-height: 340px; overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  padding: 4px;
}
.ai-hist-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms ease-out;
}
.ai-hist-item:hover { background: var(--sg-row-hover); }
.ai-hist-item.active { background: var(--accent); }
.ai-hist-body { flex: 1; min-width: 0; }
.ai-hist-title {
  font-size: 13px; font-weight: 500; color: var(--foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-hist-when { font-size: 11px; color: var(--muted-foreground); }
.ai-hist-del {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted-foreground);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.ai-hist-del:hover { background: #fee2e2; color: #b91c1c; }
.ai-hist-empty { padding: 16px 12px; font-size: 13px; color: var(--muted-foreground); text-align: center; }

/* Result header row: count line + Liste/Carte toggle. */
.ai-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-result-head .ai-count { margin-bottom: 0; }
.ai-viewseg button { font-size: 12px; padding: 3px 10px; }
.ai-viewseg button:disabled { opacity: 0.4; cursor: default; }

/* Inline results map (Leaflet). z-index:0 confines Leaflet's panes so they
   never paint over the listing drawer. */
.ai-map {
  height: 340px; width: 100%;
  position: relative; z-index: 0;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  background: var(--muted);
}
.ai-map-note { font-size: 12px; color: var(--muted-foreground); margin-top: 6px; font-variant-numeric: tabular-nums; }


/* ── Carte overlay partagée : cadre + variante « large » (Assistant IA) ──
   Le module openOffersMapOverlay enveloppe désormais topbar + body dans
   .mo-frame. En plein écran (prospect) le cadre remplit l'overlay — rendu
   identique à avant. En mode .mo-large (assistant), l'overlay devient un
   backdrop translucide et le cadre fait 75 % de l'écran, en superposition. */
.map-overlay .mo-frame {
  position: relative; /* ancre .map-offer-detail (bas-centre DU CADRE) */
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.map-overlay.mo-large {
  background: rgba(15, 23, 42, 0.45);
  align-items: center; justify-content: center;
  padding: 0;
}
.map-overlay.mo-large .mo-frame {
  flex: none;
  width: 75vw; height: 75vh;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
.map-overlay.mo-large .map-topbar { background: transparent; }
@media (max-width: 768px) {
  /* Sur mobile, 75 % laisserait une carte inutilisable — on prend l'écran. */
  .map-overlay.mo-large .mo-frame { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
}

/* Bouton « agrandir » sur la carte inline de l'assistant. Au-dessus des
   panes Leaflet (z 200-700) mais sous le détail d'offre (1000). */
.ai-map-expand {
  position: absolute; top: 8px; right: 8px; z-index: 800;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background 120ms ease-out, transform 120ms ease-out;
}
.ai-map-expand:hover { background: var(--sg-row-hover); transform: scale(1.05); }


/* Assistant IA — sections multi-cibles (un message peut porter Annonces ET Posts). */
.ai-section + .ai-section { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.ai-section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--foreground);
  margin-bottom: 6px;
}
.ai-section-title svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.ai-noresult-section { padding: 4px 0 0; }

/* ── WhatsApp conversation card (contact panel) — WhatsApp Web look ──
   Mine: right, green (#d9fdd3). Theirs: left, white. Beige wallpaper, day
   pills, time + ticks inside the bubble, tail on the first bubble of a run.
   .wa-expanded = the card covers the whole .drawer-body (⤢ / ⤡). */
.card.wa-card { container-type: inline-size; padding: 0; gap: 0; overflow: hidden; display: flex; flex-direction: column; border-color: #d1d7db; }
.wa-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 12px; background: #f0f2f5; border-bottom: 1px solid #e3e6e8;
}
.wa-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #25d366, #128c7e); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px;
}
.wa-head-txt { min-width: 0; flex: 1; line-height: 1.25; }
.wa-head-name { font-weight: 600; font-size: 14px; color: #111b21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-head-sub { font-size: 12px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-live { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; flex: none; transition: background .3s; }
.wa-live.wa-live-on { background: #25d366; box-shadow: 0 0 0 3px rgba(37, 211, 102, .18); }
.wa-head-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 9px;
  border-radius: 16px; border: 0; background: transparent; color: #54656f;
  font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; flex: none;
  transition: background .15s, color .15s;
}
.wa-head-btn:hover { background: rgba(11, 20, 26, .07); color: #111b21; }
.wa-head-btn:disabled { opacity: .5; cursor: wait; }
.wa-expand-btn { width: 32px; padding: 0; justify-content: center; border-radius: 50%; }
.wa-expand-btn .wa-ico-min { display: none; }
.wa-expand-btn[aria-pressed="true"] .wa-ico-max { display: none; }
.wa-expand-btn[aria-pressed="true"] .wa-ico-min { display: block; }
.wa-expand-btn[aria-pressed="true"] { background: #d9fdd3; color: #008069; }
@container (max-width: 420px) { .wa-head-lbl { display: none; } }

.wa-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wa-thread {
  height: 380px; overflow-y: auto; padding: 10px 6% 12px;
  display: flex; flex-direction: column;
  background-color: #efeae2;
  background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px);
  background-size: 18px 18px;
  scrollbar-width: thin;
}
.wa-day { display: flex; justify-content: center; margin: 10px 0 6px; position: sticky; top: 0; z-index: 1; pointer-events: none; }
.wa-day span {
  background: #fff; color: #54656f; font-size: 12px; padding: 4px 12px; border-radius: 8px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.wa-system {
  align-self: center; max-width: 85%; text-align: center; margin: 8px 0;
  background: #fff8c5; color: #54656f; font-size: 12.5px; padding: 6px 12px; border-radius: 8px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.wa-system-warn { background: #fde8e8; color: #b42318; }
.wa-thread > :first-child { margin-top: auto; }
.wa-row { display: flex; margin-top: 2px; }
.wa-row.wa-first { margin-top: 10px; }
.wa-me { justify-content: flex-end; }
.wa-them { justify-content: flex-start; }
.wa-bubble {
  position: relative; max-width: 78%; padding: 6px 7px 8px 9px; border-radius: 7.5px;
  font-size: 14.2px; line-height: 19px; color: #111b21;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  word-wrap: break-word; overflow-wrap: anywhere;
}
.wa-me .wa-bubble { background: #d9fdd3; }
.wa-them .wa-bubble { background: #fff; }
.wa-me.wa-first .wa-bubble { border-top-right-radius: 0; }
.wa-them.wa-first .wa-bubble { border-top-left-radius: 0; }
/* Tails */
.wa-first .wa-bubble::before {
  content: ""; position: absolute; top: 0; width: 8px; height: 13px;
}
.wa-me.wa-first .wa-bubble::before { right: -8px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-them.wa-first .wa-bubble::before { left: -8px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-text { white-space: pre-wrap; }
.wa-text a { color: #027eb5; text-decoration: none; }
.wa-text a:hover { text-decoration: underline; }
.wa-media { color: #667781; }
.wa-via { font-size: 12px; font-weight: 600; color: #008069; margin-bottom: 2px; }
/* Time floats at the bottom-right without overlapping the last line. */
.wa-spacer { display: inline-block; width: 46px; height: 1px; }
.wa-spacer-me { width: 66px; }
.wa-meta {
  position: absolute; right: 7px; bottom: 3px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; line-height: 15px; color: #667781; white-space: nowrap;
}
.wa-status { display: inline-flex; color: #8696a0; }
.wa-status-failed { color: #e11d48; font-size: 13px; }
.wa-pending .wa-bubble { opacity: .85; }
.wa-failed .wa-bubble { box-shadow: 0 0 0 1px #fda4af; }

.wa-jump {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: #54656f; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(11, 20, 26, .25);
}
.wa-jump.hidden { display: none; }
.wa-jump-count {
  position: absolute; top: -6px; left: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: #25d366; color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.wa-jump-count.hidden { display: none; }

.wa-composer { background: #f0f2f5; padding: 8px 10px; border-top: 1px solid #e3e6e8; }
.wa-composer.hidden { display: none; }
.wa-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.wa-input {
  flex: 1; min-width: 0; resize: none; border: 0; outline: none;
  background: #fff; border-radius: 8px; padding: 9px 12px;
  font: inherit; font-size: 14.5px; line-height: 20px; color: #111b21;
  min-height: 40px; max-height: 140px; overflow-y: hidden;
}
.wa-input::placeholder { color: #8696a0; }
.wa-round-btn, .wa-send {
  width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  transition: background .15s, transform .1s, opacity .15s;
}
.wa-round-btn { background: transparent; color: #54656f; }
.wa-round-btn:hover, .wa-round-btn.wa-round-btn-on { background: rgba(11, 20, 26, .08); }
.wa-round-btn:disabled { opacity: .5; cursor: wait; }
.wa-send { background: #00a884; color: #fff; }
.wa-send:hover:not(:disabled) { background: #008f6f; }
.wa-send:active:not(:disabled) { transform: scale(.94); }
.wa-send:disabled { background: #c4cbcf; cursor: default; }
.wa-instr {
  width: 100%; margin-bottom: 8px; border: 1px solid #d1d7db; border-radius: 8px;
  padding: 7px 11px; font-size: 13px; background: #fff; outline: none;
}
.wa-instr:focus { border-color: #00a884; }
.wa-instr.hidden { display: none; }

/* Expanded: the card covers the whole drawer body (header of the contact
   panel stays visible). top/height set by JS from the scroller. */
.drawer-body.wa-host-locked { position: relative; overflow: hidden; }
.card.wa-card.wa-expanded {
  position: absolute; left: 0; right: 0; z-index: 5; margin: 0;
  border-radius: 0; border: 0; box-shadow: none;
  animation: wa-expand-in 140ms ease-out;
}
.wa-expanded .wa-thread { height: auto; flex: 1; padding-left: 8%; padding-right: 8%; }
@keyframes wa-expand-in { from { transform: translateY(10px); } to { transform: none; } }

/* WhatsApp: ticks (blue = read), reactions, media players. */
.wa-status-read { color: #53bdeb; }
.wa-row.wa-has-reacts { margin-bottom: 14px; }
.wa-reacts {
  position: absolute; bottom: -15px; display: inline-flex; align-items: center; gap: 2px;
  background: #fff; border-radius: 12px; padding: 1px 6px; font-size: 14px; line-height: 20px;
  box-shadow: 0 1px 3px rgba(11, 20, 26, .2); white-space: nowrap; cursor: default; z-index: 1;
}
.wa-me .wa-reacts { right: 8px; }
.wa-them .wa-reacts { left: 8px; }
.wa-reacts span { font-size: 11px; color: #667781; margin-left: 2px; }

.wa-bubble.wa-has-media { padding: 3px 3px 8px; }
.wa-bubble.wa-has-media .wa-text { display: inline; padding: 0 5px; }
.wa-bubble.wa-has-media .wa-text::before { content: ""; display: block; height: 4px; }
.wa-bubble.wa-media-only { padding-bottom: 3px; }
.wa-bubble.wa-media-only .wa-spacer { display: none; }
.wa-img-btn { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.wa-img, .wa-video {
  display: block; max-width: min(330px, 100%); max-height: 340px; min-width: 120px;
  border-radius: 6px; object-fit: cover; background: #e9edef;
}
.wa-video { width: 330px; max-width: 100%; background: #000; }
/* Time over the photo/video when there's no caption — like WhatsApp. */
.wa-media-only.wa-media-ready.wa-media-image .wa-meta, .wa-media-only.wa-media-ready.wa-media-video .wa-meta {
  color: #fff; right: 9px; bottom: 7px; padding: 0 4px; border-radius: 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .35)); text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.wa-media-only.wa-media-ready.wa-media-image .wa-status, .wa-media-only.wa-media-ready.wa-media-video .wa-status { color: #fff; }
.wa-media-only.wa-media-ready.wa-media-image .wa-status-read, .wa-media-only.wa-media-ready.wa-media-video .wa-status-read { color: #53bdeb; }
.wa-media-only.wa-media-ready.wa-media-video .wa-meta { bottom: auto; top: 9px; }
/* Sticker: no bubble, just the image. */
.wa-bubble.wa-bubble-sticker { background: transparent !important; box-shadow: none; padding: 0 0 16px; }
.wa-bubble.wa-bubble-sticker::before { display: none; }
.wa-sticker-img { width: 130px; height: 130px; object-fit: contain; display: block; }
.wa-bubble-sticker .wa-meta { background: rgba(255, 255, 255, .85); border-radius: 8px; padding: 0 5px; bottom: 0; }
/* Voice note / audio file */
.wa-audio { display: flex; align-items: center; gap: 8px; padding: 4px 6px 0 4px; min-width: 0; }
.wa-bubble.wa-media-voice, .wa-bubble.wa-media-audio, .wa-bubble.wa-media-document { width: 320px; max-width: 78%; }
.wa-audio-ico {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: #ff9f43; font-size: 17px;
}
.wa-audio-ico.wa-audio-voice { background: #00a884; }
.wa-audio audio { flex: 1; min-width: 0; height: 36px; }
/* Document card */
.wa-doc { display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.wa-doc-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px;
  background: rgba(11, 20, 26, .05); border-radius: 6px; color: inherit; text-decoration: none;
}
.wa-doc-main:hover { background: rgba(11, 20, 26, .09); }
.wa-doc-ico {
  width: 34px; height: 40px; flex: none; border-radius: 4px; background: #e2574c; color: #fff;
  font-size: 9.5px; font-weight: 700; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px;
}
.wa-doc-txt { min-width: 0; display: flex; flex-direction: column; }
.wa-doc-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-doc-meta { font-size: 11.5px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-doc-dl {
  width: 36px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: #54656f; text-decoration: none; background: rgba(11, 20, 26, .05);
}
.wa-doc-dl:hover { background: rgba(11, 20, 26, .1); }
/* Placeholder (downloading / unavailable) */
.wa-media-ph {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 0 0 2px;
  background: rgba(11, 20, 26, .05); border-radius: 6px; color: #54656f; font-size: 13px;
}
.wa-media-err { color: #b42318; }
.wa-spin {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c4cbcf; border-top-color: #00a884;
  animation: wa-spin .8s linear infinite; flex: none;
}
@keyframes wa-spin { to { transform: rotate(360deg); } }

/* WhatsApp: shared location (OSM preview) and contact cards. */
.wa-bubble.wa-has-loc, .wa-bubble.wa-has-contacts { padding: 3px 3px 8px; width: 300px; max-width: 78%; }
.wa-loc { display: flex; flex-direction: column; }
.wa-loc-map {
  position: relative; display: block; height: 150px; overflow: hidden; border-radius: 6px;
  background: #e5e3df; cursor: pointer;
}
.wa-loc-layer { position: absolute; width: 768px; height: 768px; pointer-events: none; }
.wa-loc-layer img { position: absolute; width: 256px; height: 256px; max-width: none; }
.wa-loc-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -88%);
  font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
.wa-loc-live {
  position: absolute; left: 8px; top: 8px; background: #00a884; color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; letter-spacing: .02em;
}
.wa-loc-attr { position: absolute; right: 4px; bottom: 2px; font-size: 9px; color: #54656f; background: rgba(255, 255, 255, .7); padding: 0 3px; border-radius: 3px; }
.wa-loc-info { padding: 6px 6px 2px; }
.wa-loc-title { font-size: 14px; font-weight: 500; color: #111b21; }
.wa-loc-addr { font-size: 12.5px; color: #667781; }
.wa-loc-actions { display: flex; gap: 6px; padding: 6px 6px 2px; }
.wa-loc-actions a, .wa-ccard-actions button {
  flex: 1; text-align: center; font-size: 13px; font-weight: 500; color: #008069;
  background: rgba(11, 20, 26, .05); border: 0; border-radius: 6px; padding: 6px 4px; text-decoration: none; cursor: pointer;
}
.wa-loc-actions a:hover, .wa-ccard-actions button:hover { background: rgba(11, 20, 26, .1); }

.wa-contacts { display: flex; flex-direction: column; gap: 4px; }
.wa-ccard { background: rgba(11, 20, 26, .04); border-radius: 6px; padding: 8px; }
.wa-ccard-head { display: flex; align-items: center; gap: 10px; }
.wa-ccard-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; background: #dfe5e7; color: #54656f;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px;
}
.wa-ccard-txt { min-width: 0; flex: 1; }
.wa-ccard-name { font-size: 14.5px; font-weight: 500; color: #111b21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-ccard-sub { font-size: 12.5px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-ccard-badge { font-size: 10.5px; font-weight: 700; color: #008069; background: #d9fdd3; border-radius: 8px; padding: 2px 7px; flex: none; }
.wa-me .wa-ccard-badge { background: #fff; }
.wa-ccard-details { margin-top: 8px; border-top: 1px solid rgba(11, 20, 26, .08); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.wa-ccard-details.hidden { display: none; }
.wa-cd-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; font-size: 13px; }
.wa-cd-k { color: #667781; white-space: nowrap; }
.wa-cd-v { color: #111b21; overflow-wrap: anywhere; }
a.wa-cd-v { color: #027eb5; text-decoration: none; }
.wa-cd-tag { font-size: 10.5px; color: #008069; background: #d9fdd3; border-radius: 6px; padding: 0 5px; }
.wa-cd-crm { font-size: 12.5px; color: #008069; margin-top: 2px; }
.wa-ccard-actions { display: flex; gap: 6px; margin-top: 8px; }
.wa-ccard-actions .wa-ccard-add { background: #00a884; color: #fff; }
.wa-ccard-actions .wa-ccard-add:hover { background: #008f6f; }
.wa-ccard-actions button:disabled { opacity: .6; cursor: wait; }

/* WhatsApp: programmed messages (⏰ composer popover + bubbles). */
.wa-composer { position: relative; }
.wa-sched {
  position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); z-index: 6;
  background: #fff; border-radius: 10px; padding: 10px 12px 12px;
  box-shadow: 0 6px 24px rgba(11, 20, 26, .2), 0 0 0 1px rgba(11, 20, 26, .06);
  animation: wa-pop-in 120ms ease-out;
}
.wa-sched.hidden { display: none; }
@keyframes wa-pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wa-sched-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px; color: #111b21; margin-bottom: 8px; }
.wa-sched-x { border: 0; background: none; color: #667781; cursor: pointer; font-size: 14px; width: 28px; height: 28px; border-radius: 50%; }
.wa-sched-x:hover { background: rgba(11, 20, 26, .07); }
.wa-sched-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wa-chip {
  border: 1px solid #d1d7db; background: #fff; color: #3b4a54; border-radius: 16px;
  padding: 5px 11px; font-size: 13px; cursor: pointer; transition: background .12s, border-color .12s;
}
.wa-chip:hover { background: #f0f2f5; }
.wa-chip.wa-chip-on { background: #d9fdd3; border-color: #00a884; color: #008069; font-weight: 600; }
.wa-sched-custom { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #54656f; }
.wa-sched-custom input { flex: 1; min-width: 0; border: 1px solid #d1d7db; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; color: #111b21; }
.wa-sched-custom input:focus { outline: none; border-color: #00a884; }
.wa-sched-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.wa-sched-when { font-size: 13px; color: #008069; font-weight: 500; }
.wa-sched-when.wa-sched-bad { color: #b42318; }
.wa-sched-go {
  border: 0; border-radius: 18px; background: #00a884; color: #fff; font-weight: 600; font-size: 13.5px;
  padding: 8px 16px; cursor: pointer;
}
.wa-sched-go:hover:not(:disabled) { background: #008f6f; }
.wa-sched-go:disabled { background: #c4cbcf; cursor: default; }
.wa-day.wa-day-sched span { background: #fff4d6; color: #8a5a00; }
.wa-row.wa-scheduled { flex-direction: column; align-items: flex-end; }
.wa-scheduled .wa-bubble { opacity: 1; box-shadow: 0 0 0 1px #f5c56b, 0 1px .5px rgba(11, 20, 26, .13); }
.wa-sched-info { display: flex; align-items: center; gap: 4px; margin: 3px 2px 0 0; font-size: 12px; color: #8a5a00; flex-wrap: wrap; justify-content: flex-end; }
.wa-sched-info span { margin-right: 4px; }
.wa-sched-info button {
  border: 0; background: rgba(255, 255, 255, .85); border-radius: 10px; padding: 2px 9px;
  font-size: 12px; color: #008069; cursor: pointer; box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.wa-sched-info button + button { color: #b42318; }
.wa-sched-info button:hover { background: #fff; }
.wa-sched-info button:disabled { opacity: .5; cursor: wait; }

/* ── Airbnb : bandeau de couverture + panneau « Comment ça marche » ──────────
   Tokens only (theme.css). Pale semantic pills = color-mix of the status
   token on transparent. */
.abd-strip { padding: 12px 16px; }
.abd-strip-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.abd-strip-main { min-width: 0; flex: 1; }
.abd-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.abd-eyebrow svg, .abd-eyebrow i { width: 14px; height: 14px; }
.abd-figs { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.abd-big { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.abd-bar { flex: 1; max-width: 260px; height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.abd-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--success); transition: width 150ms ease-out; }
.abd-bar.is-partial > span { background: var(--warning); }
.abd-meta { font-size: 13px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.abd-meta strong { color: var(--foreground); font-weight: 600; }
.abd-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.abd-pill.ok { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.abd-pill.warn { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.abd-pill.off { background: var(--muted); color: var(--muted-foreground); }
.abd-pill.info { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.abd-actions { display: flex; align-items: center; gap: 8px; }
.abd-actions .btn svg { width: 14px; height: 14px; }

.abd-doc { font-size: 14px; line-height: 1.6; color: var(--foreground); }
.drawer-panel.abd-doc { width: 780px; min-width: min(780px, 96vw); max-width: 96vw; background: var(--card); color: var(--foreground); }
.abd-doc .drawer-head { background: var(--card); border-color: var(--border); }
.abd-doc .drawer-head .text-slate-500 { color: var(--muted-foreground); }
.abd-doc .drawer-body { padding: 0; }
.abd-toc { position: sticky; top: 0; z-index: 1; display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--border); }
.abd-toc button { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); cursor: pointer; transition: all 120ms ease-out; }
.abd-toc button:hover, .abd-toc button.is-active { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.abd-content { padding: 8px 24px 48px; max-width: 760px; }
.abd-sec { padding: 20px 0 4px; scroll-margin-top: 56px; }
.abd-sec + .abd-sec { border-top: 1px solid var(--border); }
.abd-sec h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.abd-sec h3 .abd-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; font-size: 12px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-variant-numeric: tabular-nums; }
.abd-sec p { margin: 0 0 10px; }
.abd-sec .abd-muted { color: var(--muted-foreground); font-size: 13px; }
.abd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.abd-kpi { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--card); }
.abd-kpi .l { font-size: 12px; color: var(--muted-foreground); }
.abd-kpi .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.abd-kpi .s { font-size: 12px; color: var(--muted-foreground); }
.abd-steps { list-style: none; padding: 0; margin: 4px 0 12px; counter-reset: abd; }
.abd-steps li { position: relative; padding: 0 0 10px 34px; counter-increment: abd; }
.abd-steps li::before { content: counter(abd); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); background: var(--card); }
.abd-steps li::after { content: ''; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 1px; background: var(--border); }
.abd-steps li:last-child::after { display: none; }
.abd-steps b { font-weight: 600; }
.abd-callout { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--muted); font-size: 13px; margin: 8px 0 12px; }
.abd-callout svg, .abd-callout i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--primary); }
.abd-callout.warn svg, .abd-callout.warn i { color: var(--warning); }
.abd-figure { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 16px; align-items: center; margin: 8px 0 12px; }
.abd-figure svg { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.abd-legend { font-size: 13px; color: var(--muted-foreground); display: grid; gap: 6px; }
.abd-legend span.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.abd-compare { display: grid; gap: 6px; margin: 8px 0 12px; }
.abd-compare .row { display: grid; grid-template-columns: 170px 1fr 70px; align-items: center; gap: 10px; font-size: 13px; }
.abd-compare .track { height: 10px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.abd-compare .fill { height: 100%; border-radius: 999px; background: var(--muted-foreground); opacity: .45; }
.abd-compare .fill.primary { background: var(--primary); opacity: 1; }
.abd-compare .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.abd-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 12px; }
.abd-table th { text-align: left; font-weight: 500; color: var(--muted-foreground); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--muted); }
.abd-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; font-variant-numeric: tabular-nums; }
.abd-table td.c, .abd-table th.c { text-align: center; }
.abd-table td.r, .abd-table th.r { text-align: right; }
.abd-table tr:last-child td { border-bottom: none; }
.abd-table .what { font-weight: 500; }
.abd-table .sub { font-size: 12px; color: var(--muted-foreground); }
.abd-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 6px 0 12px; }
.abd-wrap .abd-table { margin: 0; }
.abd-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius); background: var(--muted); margin: 4px 0 8px; flex-wrap: wrap; }
.abd-seg button { font-size: 12px; padding: 3px 10px; border-radius: calc(var(--radius) - 2px); border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.abd-seg button.is-active { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.abd-env { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.abd-skel { height: 14px; border-radius: 4px; background: var(--muted); margin: 8px 0; animation: abd-pulse 1.2s ease-in-out infinite; }
@keyframes abd-pulse { 50% { opacity: .5; } }
@media (max-width: 720px) { .abd-toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .abd-toc button { flex-shrink: 0; } .abd-figure { grid-template-columns: 1fr; } .abd-compare .row { grid-template-columns: 110px 1fr 56px; } .abd-content, .abd-toc { padding-left: 16px; padding-right: 16px; } }

/* Airbnb — reprise, bandeau quota, alertes WhatsApp */
.abd-resume { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border)); }
.abd-resume > svg, .abd-resume > i { width: 18px; height: 18px; flex-shrink: 0; color: var(--warning); }
.abd-resume .t { font-size: 13px; font-weight: 600; }
.abd-resume .btn-sm-outline { margin-left: auto; flex-shrink: 0; }
.abd-resume .btn-sm-outline svg { width: 14px; height: 14px; }
.abd-banner { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; border-color: color-mix(in srgb, var(--destructive) 35%, var(--border)); background: color-mix(in srgb, var(--destructive) 6%, var(--card)); }
.abd-banner > svg, .abd-banner > i { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--destructive); }
.abd-wa { padding-top: 12px; border-top: 1px solid var(--border); }
.abd-wa svg { width: 16px; height: 16px; }
.abd-wa .btn-sm-outline svg { width: 14px; height: 14px; }

/* Airbnb — fenêtre d'alertes à la connexion + état vide « Nouveaux hosts » */
.abd-alerts { width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) * 2); box-shadow: 0 12px 40px rgba(0,0,0,.18); animation: drawer-in 150ms ease-out; }
.abd-alerts-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.abd-alerts-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); flex-shrink: 0; }
.abd-alerts-ic svg { width: 18px; height: 18px; }
.abd-alerts-title { font-size: 16px; font-weight: 600; }
.abd-alerts-list { list-style: none; margin: 0; padding: 8px 20px; overflow-y: auto; }
.abd-alerts-list li { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.abd-alerts-list li:last-child { border-bottom: none; }
.abd-alerts-list li > svg, .abd-alerts-list li > i { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--primary); }
.abd-alerts-list li.lvl-warn > svg { color: var(--warning); }
.abd-alerts-list li.lvl-error > svg { color: var(--destructive); }
.abd-alerts-list .t { font-weight: 600; font-size: 14px; }
.abd-alerts-list .b { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; line-height: 1.5; }
.abd-alerts-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.abd-alerts-row .d { font-size: 12px; color: var(--muted-foreground); margin-right: auto; }
.abd-alerts-row .btn-sm-outline svg { width: 14px; height: 14px; }
.abd-alerts-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
.abd-empty { display: flex; gap: 12px; align-items: flex-start; }
.abd-empty > svg, .abd-empty > i { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.abd-nh-act svg, [data-nh-pipe] svg, [data-nh-open] svg { width: 14px; height: 14px; }

/* Scrapers → Airbnb : « Accès à Airbnb » — deux cartes radio + plafond payant.
   Sélection portée par :has(input:checked) → aucun JS pour l'état visuel. */
.abd-access { border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); padding: 14px 16px 16px; margin: 12px 0; min-width: 0; }
.abd-access-legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 14px; font-weight: 600; }
.abd-access-legend svg { width: 15px; height: 15px; color: var(--primary); }
.abd-access-sub { font-size: 13px; color: var(--muted-foreground); margin: -2px 0 12px; }
.abd-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.abd-mode { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); cursor: pointer; transition: border-color 120ms ease-out, background-color 120ms ease-out, box-shadow 120ms ease-out; }
.abd-mode:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.abd-mode:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--card)); box-shadow: 0 0 0 1px var(--primary); }
.abd-mode:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: 2px; }
.abd-mode.is-disabled { opacity: .55; cursor: not-allowed; }
.abd-mode-input { position: absolute; opacity: 0; pointer-events: none; }
.abd-mode-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abd-mode-head > svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.abd-mode:has(input:checked) .abd-mode-head > svg { color: var(--primary); }
.abd-mode-name { font-size: 14px; font-weight: 600; }
.abd-mode-dot { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: border-color 120ms ease-out; }
.abd-mode-dot::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--primary); transform: scale(0); transition: transform 120ms ease-out; }
.abd-mode:has(input:checked) .abd-mode-dot { border-color: var(--primary); }
.abd-mode:has(input:checked) .abd-mode-dot::after { transform: scale(1); }
.abd-mode-desc { font-size: 13px; line-height: 1.5; }
.abd-mode-cost { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; padding-top: 6px; border-top: 1px dashed var(--border); margin-top: auto; }
.abd-access-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--foreground); }
.abd-access-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--warning); }
.abd-budget { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 14px; align-items: start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.abd-budget-field { display: flex; flex-direction: column; gap: 4px; }
.abd-budget-label { font-size: 12px; color: var(--muted-foreground); }
.abd-budget-status { font-size: 13px; line-height: 1.5; padding: 8px 10px; border-radius: var(--radius); border: 1px solid transparent; font-variant-numeric: tabular-nums; align-self: end; }
.abd-budget-status.is-ok { background: color-mix(in srgb, var(--success) 8%, transparent); color: var(--foreground); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.abd-budget-status.is-info { background: var(--muted); color: var(--foreground); }
.abd-budget-status.is-warn { background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.abd-budget-status .btn-sm-outline { margin-left: 4px; vertical-align: middle; }
@media (max-width: 720px) { .abd-modes, .abd-budget { grid-template-columns: 1fr; } }

/* =====================================================================
   Marché — explorateur (liste virtualisée + carte) et « mon parc »
   (market-explorer.js / market-map.js / market-own.js). Tokens only.
   ===================================================================== */
.mx-root { position: relative; font-variant-numeric: tabular-nums; }
.mx-muted { color: var(--muted-foreground); }
.mx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.mx-star { color: var(--warning); }
.mx-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mx-search { position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 240px; }
.mx-search > i, .mx-search > svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--muted-foreground); pointer-events: none; }
.mx-search input { width: 100%; padding-left: 34px; padding-right: 34px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--foreground); font-size: 14px; }
.mx-search input:focus { outline: 2px solid var(--ring); outline-offset: -1px; }
.mx-search kbd { position: absolute; right: 8px; font-size: 11px; line-height: 1; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted-foreground); background: var(--muted); }
.mx-toolbar .btn-sm-outline svg, .mx-toolbar .segmented svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
#mx-colfilters.is-on { background: var(--accent); border-color: var(--primary); color: var(--primary); }
.mx-is-map .mx-listonly { display: none; }

/* chips */
.mx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.mx-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--border); background: var(--card); color: var(--muted-foreground); font-size: 13px; cursor: pointer; transition: background .12s, border-color .12s; }
.mx-chip:hover { background: var(--muted); }
.mx-chip svg { width: 14px; height: 14px; }
.mx-chip.is-active { border-style: solid; border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--card)); color: var(--foreground); }
.mx-chip .l { font-weight: 500; }
.mx-chip .v { color: var(--primary); font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-chip .x { margin-left: 2px; padding: 0 2px; border-radius: 4px; color: var(--muted-foreground); line-height: 1; }
.mx-chip .x:hover { background: var(--muted); color: var(--foreground); }
.mx-reset { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 0; background: transparent; color: var(--muted-foreground); font-size: 13px; cursor: pointer; }
.mx-reset:hover { color: var(--foreground); }
.mx-reset svg { width: 14px; height: 14px; }

/* KPI tiles */
.mx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.mx-kpis:empty { display: none; }
.mx-kpi { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; background: var(--card); }
.mx-kpi .l { font-size: 12px; color: var(--muted-foreground); }
.mx-kpi .v { font-size: 20px; font-weight: 600; line-height: 1.3; }
.mx-kpi .s { font-size: 12px; color: var(--muted-foreground); }
.mx-kpi.own { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.mx-status { font-size: 13px; margin-bottom: 8px; min-height: 20px; }
.mx-err { color: var(--destructive); }
.mx-loading { padding: 16px; color: var(--muted-foreground); }

/* pills */
.mx-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; background: var(--muted); color: var(--muted-foreground); border: 1px solid transparent; }
.mx-pill.mine { background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.mx-pill.acc { background: color-mix(in srgb, var(--warning) 14%, var(--card)); color: color-mix(in srgb, var(--warning) 70%, var(--foreground)); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.mx-pill.auto { background: color-mix(in srgb, var(--info) 12%, var(--card)); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.mx-pill.new { background: color-mix(in srgb, var(--success) 12%, var(--card)); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.mx-pill.pro { background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary); }
.mx-pill.particulier { background: color-mix(in srgb, var(--success) 10%, var(--card)); color: var(--success); }
.mx-auto { margin-left: 4px; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--muted); color: var(--muted-foreground); }
.mx-own { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mx-own .mx-pill { overflow: hidden; text-overflow: ellipsis; }
.mx-vs { font-weight: 600; font-size: 13px; }
.mx-vs.up { color: var(--destructive); }
.mx-vs.down { color: var(--success); }
.mx-cal { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mx-cal-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; min-width: 40px; }
.mx-cal-bar i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }

/* virtual table */
.mx-tablewrap { padding: 0; overflow: hidden; }
.mx-scroll { position: relative; height: calc(100vh - 340px); min-height: 360px; overflow: auto; }
.mx-grid { position: relative; }
.mx-headwrap { position: sticky; top: 0; z-index: 3; background: var(--card); }
.mx-row { display: flex; align-items: center; }
.mx-head { height: 44px; border-bottom: 1px solid var(--border); }
.mx-fhead { height: 44px; border-bottom: 1px solid var(--border); background: var(--muted); }
.mx-cell { flex: none; padding: 0 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; box-sizing: border-box; }
.mx-cell.r { text-align: right; }
.mx-cell.c { text-align: center; }
.mx-head .mx-cell { font-size: 12px; font-weight: 600; color: var(--muted-foreground); user-select: none; }
.mx-cell.sortable { cursor: pointer; }
.mx-cell.sortable:hover { color: var(--foreground); }
.mx-sort { margin-left: 4px; color: var(--primary); font-size: 10px; }
.mx-sort sup { font-size: 9px; }
.mx-cell.sticky { position: sticky; left: 0; z-index: 2; background: inherit; }
.mx-head .mx-cell.sticky { background: var(--card); }
.mx-fhead .mx-cell.sticky { background: var(--muted); }
.mx-spacer { pointer-events: none; }
.mx-rows { position: absolute; left: 0; will-change: transform; }
.mx-body { height: 56px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: var(--card); cursor: pointer; }
.mx-body:hover { background: color-mix(in srgb, var(--primary) 4%, var(--card)); }
.mx-body.is-own { background: color-mix(in srgb, var(--primary) 5%, var(--card)); box-shadow: inset 3px 0 0 var(--primary); }
.mx-body .mx-cell.sticky { background: inherit; }
.mx-t { min-width: 0; }
.mx-t1 { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.mx-t2 { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; }
.mx-cell mark { background: color-mix(in srgb, var(--warning) 35%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.mx-cell.act { display: flex; align-items: center; gap: 2px; justify-content: flex-end; padding-right: 8px; }
.mx-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.mx-ic:hover { background: var(--muted); color: var(--foreground); }
.mx-ic.is-on { color: var(--primary); }
.mx-ic svg { width: 16px; height: 16px; }
.mx-ic.is-on svg { fill: currentColor; }
.mx-cf { height: 28px; width: 100%; font-size: 13px; padding: 0 8px; }
.mx-mm { display: flex; gap: 4px; }
.mx-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: var(--muted-foreground); width: 100%; }
.mx-empty svg { width: 28px; height: 28px; }

/* popovers */
.mx-pop { position: absolute; z-index: 40; width: 300px; max-height: 70vh; overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: var(--popover, var(--card)); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.mx-pop.wide { width: 360px; }
.mx-pop-t { font-weight: 600; margin-bottom: 8px; }
.mx-pop-f { display: flex; justify-content: flex-end; margin-top: 8px; }
.mx-range { display: flex; align-items: center; gap: 6px; }
.mx-range .input { width: 100%; }
.mx-range.s .input { width: 76px; height: 28px; font-size: 13px; }
.mx-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mx-preset { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 12px; cursor: pointer; }
.mx-preset:hover { background: var(--muted); border-color: var(--primary); }
.mx-hint { margin-top: 8px; font-size: 12px; color: var(--muted-foreground); }
.mx-sub { margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
.mx-radios, .mx-list, .mx-list-s { display: flex; flex-direction: column; gap: 2px; }
.mx-list { max-height: 260px; overflow: auto; margin-top: 8px; }
.mx-radio, .mx-check { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.mx-radio:hover, .mx-check:hover { background: var(--muted); }
.mx-radio em, .mx-check em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted-foreground); }
.mx-sep { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.mx-rrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 13px; }
.mx-views { display: flex; flex-direction: column; gap: 2px; }
.mx-view-row { display: flex; align-items: center; }
.mx-view-btn { display: flex; align-items: center; gap: 8px; flex: 1; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; font-size: 14px; text-align: left; cursor: pointer; }
.mx-view-btn:hover { background: var(--muted); }
.mx-view-btn svg { width: 14px; height: 14px; color: var(--muted-foreground); }
.mx-view-del { border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.mx-view-del:hover { background: var(--muted); color: var(--destructive); }
.mx-save { display: flex; gap: 6px; }
.mx-collist { display: flex; flex-direction: column; max-height: 340px; overflow: auto; }
.mx-colrow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: grab; font-size: 14px; }
.mx-colrow:hover { background: var(--muted); }
.mx-colrow.drag { opacity: .4; }
.mx-colrow label { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; }
.mx-grip { color: var(--muted-foreground); letter-spacing: -2px; }

/* ── carte ── */
.mxmap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; padding: 0; overflow: hidden; height: calc(100vh - 340px); min-height: 480px; }
.mxmap-stage { position: relative; min-width: 0; }
.mxmap-map { position: absolute; inset: 0; z-index: 0; }
.mxmap-top { position: absolute; z-index: 500; top: 12px; left: 56px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mxmap-top .segmented, .mxmap-top .btn-sm-outline { background: var(--card); box-shadow: 0 1px 4px rgba(15, 23, 42, .18); }
.mxmap-top .btn-sm-outline svg { width: 14px; height: 14px; }
.mxmap-top .btn-sm-outline.is-on { border-color: var(--primary); color: var(--primary); }
.mxmap-legend { position: absolute; z-index: 500; left: 12px; bottom: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; max-width: 70%; padding: 6px 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 1px 4px rgba(15, 23, 42, .18); font-size: 12px; color: var(--muted-foreground); }
.mxmap-legend .lg-sw { display: inline-flex; border-radius: 3px; overflow: hidden; }
.mxmap-legend .lg-sw i { width: 18px; height: 8px; }
.mxmap-legend .lg-own { display: inline-flex; align-items: center; gap: 4px; }
.mxmap-legend .lg-own i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.mxmap-legend .lg-own i.own { background: #111827; border-color: #fbbf24; }
.mxmap-legend .lg-own i.acc { background: var(--warning); }
.mxmap-hist { position: absolute; z-index: 500; right: 12px; top: 12px; width: 230px; padding: 8px 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--card) 95%, transparent); box-shadow: 0 1px 4px rgba(15, 23, 42, .18); font-size: 12px; }
.mxmap-hist .hh { display: flex; justify-content: space-between; gap: 8px; }
.mxmap-hist .hh span { color: var(--muted-foreground); }
.mxmap-hist .hb { display: flex; align-items: flex-end; gap: 2px; height: 44px; margin: 6px 0 2px; }
.mxmap-hist .col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.mxmap-hist .col i { display: block; width: 100%; background: color-mix(in srgb, var(--primary) 35%, var(--muted)); border-radius: 2px 2px 0 0; min-height: 1px; }
.mxmap-hist .col em { position: absolute; bottom: 0; left: 0; width: 100%; background: var(--primary); border-radius: 2px 2px 0 0; }
.mxmap-hist .hl { display: flex; justify-content: space-between; color: var(--muted-foreground); font-size: 11px; }
.mxmap-card { position: absolute; z-index: 600; left: 12px; bottom: 64px; width: 360px; max-width: calc(100% - 24px); padding: 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: var(--card); box-shadow: 0 8px 24px rgba(15, 23, 42, .2); }
.mxmap-card.hidden, .mxmap-hint.hidden, .mxm-dup.hidden { display: none; }
.mxcard-x { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; color: var(--muted-foreground); }
.mxcard-x:hover { background: var(--muted); }
.mxcard-x svg { width: 14px; height: 14px; }
.mxcard-title { display: block; max-width: calc(100% - 28px); padding: 0; border: 0; background: transparent; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxcard-title:hover { color: var(--primary); text-decoration: underline; }
.mxcard-sub { margin: 2px 0 8px; font-size: 13px; color: var(--muted-foreground); }
.mxcard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.mxcard-grid .k { font-size: 11px; color: var(--muted-foreground); }
.mxcard-grid .v { font-size: 14px; font-weight: 500; }
.mxcard-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.mxcard-act svg { width: 14px; height: 14px; }
.mxcard-act .is-on { color: var(--primary); }
.mxmap-hint { position: absolute; z-index: 700; top: 56px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--foreground); color: var(--background); font-size: 13px; pointer-events: none; }
.mxmap-list { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--card); }
.mxmap-list-h { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.mxmap-list-b { flex: 1; overflow: auto; }
.mxl { display: block; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: transparent; text-align: left; cursor: pointer; }
.mxl:hover, .mxl.is-hover { background: var(--muted); }
.mxl.is-sel { background: color-mix(in srgb, var(--primary) 8%, var(--card)); box-shadow: inset 3px 0 0 var(--primary); }
.mxl.is-own { box-shadow: inset 3px 0 0 var(--primary); }
.mxl-1 { display: flex; gap: 8px; align-items: baseline; }
.mxl-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); }
.mxl-2, .mxl-3 { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxl-2 .mx-pill { margin-right: 6px; }
.mxm-muted { color: var(--muted-foreground); font-size: 13px; }
.mxm-warn { color: var(--destructive); font-size: 13px; }

/* Leaflet markers */
.mxpill-wrap, .mxc-wrap { background: transparent; border: 0; }
.mxpill { transform: translate(-50%, -50%); display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--c, #fff); color: #0f172a; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .45); font: 600 12px/16px Inter, system-ui, sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mxpill.mine { background: #111827; color: #fbbf24; border: 2px solid #fbbf24; font-weight: 700; }
.mxpill.acc { background: var(--warning); color: #1f2937; border: 2px dashed #111827; }
.mxpill.sel { outline: 2px solid var(--foreground); }
.mxc { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #475569; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .45); line-height: 1.05; }
.mxc b { font-size: 13px; }
.mxc small { font-size: 10px; opacity: .9; }
.mxtip { font-size: 12px; font-weight: 500; }

/* ── modales (rattachement Guesty) ── */
.mxm-backdrop { z-index: 80; }
.mxm { display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 48px); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); background: var(--card); box-shadow: 0 20px 50px rgba(15, 23, 42, .3); overflow: hidden; }
.mxm.wide { width: min(720px, 100%); }
.mxm-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.mxm-title { font-size: 16px; font-weight: 600; }
.mxm-sub { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; }
.mxm-body { padding: 12px 16px; overflow: auto; flex: 1; }
.mxm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--muted); }
.mxm-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.mxm-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.mxm-note { display: flex; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 7%, var(--card)); font-size: 13px; }
.mxm-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--primary); }
.mxm-search { width: 100%; margin-bottom: 8px; }
.mxm-opts { display: flex; flex-direction: column; gap: 6px; }
.mxm-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--card); }
.mxm-opt:hover { background: var(--muted); }
.mxm-opt.is-sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.mxm-opt.static { cursor: default; align-items: center; }
.mxm-opt input[type=radio] { margin-top: 4px; }
.mxm-opt img, .mxm-ph { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--muted); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.mxm-opt-main { flex: 1; min-width: 0; }
.mxm-opt-t { font-size: 14px; }
.mxm-opt-s { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxm-opt-m { font-size: 12px; color: var(--muted-foreground); }
.mxm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mxm-chip { padding: 1px 8px; border-radius: 999px; font-size: 11px; background: color-mix(in srgb, var(--success) 12%, var(--card)); color: var(--success); }
.mxm-chip.neg { background: color-mix(in srgb, var(--destructive) 10%, var(--card)); color: var(--destructive); }
.mxm-score { flex: none; text-align: center; min-width: 76px; }
.mxm-score b { display: block; font-size: 16px; }
.mxm-score span { font-size: 11px; color: var(--muted-foreground); }
.mxm-score.hi b { color: var(--success); }
.mxm-score.mid b { color: var(--warning); }
.mxm-dup { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--warning) 10%, var(--card)); font-size: 13px; }
.mxm-dup svg { width: 18px; height: 18px; flex: none; color: var(--warning); }
.mxm-dup > div { flex: 1; }
.mxm-link-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.mxm-gcard { display: flex; gap: 12px; margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.mxm-gcard img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; }
.mxm-real { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted-foreground); }
.mxm-real b { color: var(--foreground); font-size: 14px; }

/* ── fiche annonce : face aux concurrents ── */
.mxp.card { margin-bottom: 12px; }
.mxp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mxp-h h3 { font-weight: 600; font-size: 15px; }
.mxp-ctl { display: flex; gap: 6px; }
.mxp-ctl .select { height: 28px; font-size: 13px; }
.mxp-muted { font-size: 13px; color: var(--muted-foreground); }
.mxp-sub { margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
.mxp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mxp-actions svg { width: 14px; height: 14px; }
.mxp-verdict { padding: 8px 12px; border-radius: var(--radius); background: var(--muted); font-size: 14px; margin-bottom: 8px; }
.mxp-hint { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 12px; border-radius: var(--radius); font-size: 13px; background: var(--muted); }
.mxp-hint svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.mxp-hint.up svg { color: var(--success); }
.mxp-hint.down svg { color: var(--info); }
.mxp-range { position: relative; height: 34px; margin: 18px 6px 8px; }
.mxp-range::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 2px; background: var(--muted); }
.mxp-range .band { position: absolute; top: 12px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--primary) 25%, var(--muted)); }
.mxp-range .med { position: absolute; top: 8px; width: 2px; height: 16px; background: var(--muted-foreground); }
.mxp-range .me { position: absolute; top: 9px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--primary); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--primary); }
.mxp-range .me span { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; white-space: nowrap; }
.mxp-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.mxp-table th { text-align: left; font-weight: 500; color: var(--muted-foreground); padding: 4px 6px; border-bottom: 1px solid var(--border); }
.mxp-table td { padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.mxp-table tr.real td { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.mxp-comps { display: flex; flex-direction: column; }
.mxp-comp { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 12px; align-items: center; width: 100%; padding: 6px 4px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: transparent; text-align: left; font-size: 13px; cursor: pointer; }
.mxp-comp:hover { background: var(--muted); }
.mxp-comp.static { cursor: default; }
.mxp-comp.static:hover { background: transparent; }
.mxp-comp .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxp-comp .m { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }
.mxp-comp .p { font-weight: 600; white-space: nowrap; }
.mxp-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mxp-bar .mxp-actions { margin-top: 0; }
.mxp-save { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.mxp-save .input { flex: 1; min-width: 140px; }

/* ── écran « Mon parc » ── */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pc-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: var(--card); }
.pc-card.linked { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.pc-card.review { border-color: color-mix(in srgb, var(--info) 45%, var(--border)); }
.pc-top { display: flex; gap: 10px; }
.pc-top img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.pc-nick { font-weight: 600; }
.pc-title { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-link { border-top: 1px dashed var(--border); padding-top: 8px; }
.pc-lh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pc-listing { display: block; width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); text-align: left; cursor: pointer; }
.pc-listing:hover { border-color: var(--primary); }
.pc-listing .t { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-listing .m { display: block; font-size: 12px; color: var(--muted-foreground); }

@media (max-width: 900px) {
  .mxmap { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 55vh) 260px; height: auto; }
  .mxmap-list { border-left: 0; border-top: 1px solid var(--border); }
  .mxmap-hist { display: none; }
  .mx-scroll { height: calc(100vh - 300px); }
}
.mxp-range-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-foreground); margin: 0 6px 8px; }
.mxp-ctl .select { width: auto; min-width: 0; }
.mxp-ctl { flex-wrap: wrap; }
.mxmap { position: relative; isolation: isolate; }

.mx-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 8px; border-radius: var(--radius); font-size: 14px; border: 1px solid var(--border); background: var(--card); }
.mx-banner.info { border-color: color-mix(in srgb, var(--info) 40%, var(--border)); background: color-mix(in srgb, var(--info) 8%, var(--card)); }
.mx-banner.warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: color-mix(in srgb, var(--warning) 9%, var(--card)); }
.mx-banner-act { display: flex; gap: 6px; }
.mx-pill.dup { background: color-mix(in srgb, var(--destructive) 10%, var(--card)); color: var(--destructive); }
button.mx-auto { border: 0; cursor: pointer; }
button.mx-auto:hover { background: var(--accent); color: var(--primary); }
.mxpill.stale { opacity: .45; }
.mxmap-legend .lg-own i.stale { background: #94a3b8; opacity: .45; }
.mxmap-zonebar { position: absolute; z-index: 500; top: 52px; left: 56px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--card); box-shadow: 0 1px 4px rgba(15, 23, 42, .18); font-size: 12px; }
.mxmap-zonebar.hidden { display: none; }
.mxmap-zonebar input[type=range] { width: 140px; }
.mxmap-top { flex-wrap: nowrap; overflow-x: auto; max-width: calc(100% - 72px); scrollbar-width: none; }
.mxmap-top::-webkit-scrollbar { display: none; }
.mxmap-top > * { flex: none; }

/* ── Calendrier : indisponibilités mois par mois (histogramme) ── */
.mxcal { display: flex; gap: 10px; align-items: flex-end; padding: 28px 4px 0; }
.mxcal-col { flex: 1; min-width: 0; text-align: center; }
.mxcal-bar { position: relative; height: 128px; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--muted) 70%, transparent); }
.mxcal-bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--primary) 30%, var(--card)); transition: height .25s ease; }
.mxcal-bar.mid i { background: color-mix(in srgb, var(--primary) 60%, var(--card)); }
.mxcal-bar.hi i { background: var(--primary); }
.mxcal-bar b { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; z-index: 2; white-space: nowrap; }
.mxcal-bar .med { position: absolute; left: -3px; right: -3px; height: 0; border-top: 2px dashed var(--foreground); z-index: 1; opacity: .75; }
.mxcal-m { margin-top: 6px; font-size: 13px; font-weight: 500; }
.mxcal-s { font-size: 11px; color: var(--muted-foreground); }
.mxcal-col.up .mxcal-m::after { content: " ▲"; color: var(--success); font-size: 10px; }
.mxcal-col.down .mxcal-m::after { content: " ▼"; color: var(--destructive); font-size: 10px; }
.mxcal-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13px; }
.mxcal-key { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); }
.mxcal-key i { width: 18px; border-top: 2px dashed var(--foreground); display: inline-block; opacity: .75; }
.mx-pill.mx-pill-info { background: color-mix(in srgb, var(--info) 12%, var(--card)); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }

.mxcal-c { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.mxcal-bar b { background: color-mix(in srgb, var(--card) 88%, transparent); padding: 0 4px; border-radius: 4px; left: 50%; right: auto; transform: translateX(-50%); }

/* ── Simulateur : choix de la courbe de prix saisonnière ─────────────────────
   Le tiroir du simulateur est toujours clair (fond #fff, palette slate/ambre du
   bloc d'occupation) : même palette ici, pas les tokens sombres. */
.px { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.px-label { font-size: 12px; color: #475569; }
.px-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 3px 10px 3px 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: 12px; color: #0f172a; cursor: pointer; transition: border-color 120ms ease-out, box-shadow 120ms ease-out; }
.px-btn:hover { border-color: #d97706; }
.px-btn:focus-visible, .px-opt:focus-visible { outline: 2px solid rgba(217, 119, 6, .45); outline-offset: 2px; }
.px-btn[aria-expanded="true"] { border-color: #d97706; box-shadow: 0 0 0 1px #d97706; }
.px-btn-name { font-weight: 600; }
.px-btn-meta { color: #64748b; font-variant-numeric: tabular-nums; }
.px-chev { width: 14px; height: 14px; color: #64748b; transition: transform 120ms ease-out; }
.px-btn[aria-expanded="true"] .px-chev { transform: rotate(180deg); }
.px-fallback { font-size: 11px; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 1px 8px; }
.px-panel { flex-basis: 100%; margin-top: 4px; border: 1px solid #fde68a; border-radius: 10px; background: #fff; padding: 10px; display: grid; gap: 8px; animation: px-in 130ms ease-out; }
.px-panel[hidden] { display: none; }
@keyframes px-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.px-panel-intro, .px-panel-foot { font-size: 12px; color: #64748b; line-height: 1.5; }
.px-panel-foot { padding-top: 6px; border-top: 1px dashed #e2e8f0; }
.px-opt { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; background: #fff; cursor: pointer; display: grid; gap: 6px; transition: border-color 120ms ease-out, background-color 120ms ease-out; }
.px-opt:hover:not(.is-disabled) { border-color: #fcd34d; background: #fffdf5; }
.px-opt.is-selected { border-color: #d97706; background: #fffbeb; box-shadow: 0 0 0 1px #d97706; }
.px-opt.is-disabled { cursor: not-allowed; background: #f8fafc; }
.px-opt.is-disabled .px-opt-name { color: #94a3b8; }
.px-opt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.px-opt-name { font-size: 13px; font-weight: 600; color: #0f172a; margin-right: auto; }
.px-radio { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid #cbd5e1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.px-radio::after { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #d97706; transform: scale(0); transition: transform 120ms ease-out; }
.px-opt.is-selected .px-radio { border-color: #d97706; }
.px-opt.is-selected .px-radio::after { transform: scale(1); }
.px-conf { font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.px-conf-good { background: #dcfce7; color: #166534; }
.px-conf-medium { background: #fef3c7; color: #92400e; }
.px-conf-low { background: #fee2e2; color: #991b1b; }
.px-conf-off { background: #f1f5f9; color: #64748b; }
.px-opt-body { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.px-opt-facts { display: grid; gap: 1px; min-width: 0; }
.px-fact-main { font-size: 13px; color: #0f172a; font-variant-numeric: tabular-nums; }
.px-fact-sub { font-size: 11px; color: #64748b; }
.px-delta { display: inline-flex; align-items: baseline; gap: 4px; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 11px; font-weight: 600; }
.px-delta span { font-weight: 400; color: #64748b; }
.px-opt-desc { font-size: 12px; color: #475569; line-height: 1.5; }
.px-opt-note { font-size: 11px; color: #92400e; }
.px-share { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: #f8fafc; font-size: 12px; color: #334155; line-height: 1.5; }
.px-share svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: #64748b; }
.px-share span { color: #64748b; }
.px-spark { display: block; flex-shrink: 0; overflow: visible; }
.px-spark .px-base { stroke: #cbd5e1; stroke-width: 1; stroke-dasharray: 3 3; }
.px-spark .px-line { stroke: #94a3b8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.px-spark .px-dot { fill: #94a3b8; }
.px-spark .px-gap { fill: #fff; stroke: #cbd5e1; stroke-width: 1; }
.px-spark.is-sel .px-line { stroke: #d97706; }
.px-spark.is-sel .px-dot { fill: #d97706; }
@media (max-width: 720px) { .px-btn { width: 100%; justify-content: space-between; } .px-label { flex-basis: 100%; } }

/* Petit écran : le tiroir (fiche annonce, simulateur…) prenait 46 % de la largeur
   (≈ 173 px sur un téléphone) — presque toute la largeur désormais. */
@media (max-width: 720px) {
  .drawer-panel { width: 96vw; min-width: 96vw; }
  .drawer-panel.drawer-pushed { transform: none; }
}

/* Colonne d'actions toujours visible (collée à droite), même quand le tableau défile */
.mx-cell.act { position: sticky; right: 0; z-index: 2; background: inherit; box-shadow: -8px 0 8px -8px rgba(15, 23, 42, .25); overflow: visible; }
.mx-head .mx-cell.act { background: var(--card); }
.mx-fhead .mx-cell.act { background: var(--muted); }
.mx-act-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--foreground); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.mx-act-btn:hover { background: var(--muted); }
.mx-act-btn svg { width: 14px; height: 14px; }
.mx-act-btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.mx-act-btn.primary:hover { filter: brightness(1.08); background: var(--primary); }

/* Disponibilité mois par mois : intégrée au bloc de description, sous l'histogramme des prix */
.mxcal-block { margin-top: 2px; }
.mxcal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mxcal-title { font-size: 14px; color: var(--muted-foreground); }
.mxcal-col.more .mxcal-m::after { content: " ▲"; color: var(--destructive); font-size: 10px; }
.mxcal-col.less .mxcal-m::after { content: " ▼"; color: var(--success); font-size: 10px; }
.mxcal-col.up .mxcal-m::after, .mxcal-col.down .mxcal-m::after { content: none; }

/* Pleine largeur + défilement confortable */
#view { max-width: none !important; padding-bottom: 72px; }
.mx-scroll { height: calc(100vh - 160px); min-height: 420px; }
.mxmap { height: calc(100vh - 160px); }
.mx-htop { overflow-x: auto; overflow-y: hidden; height: 14px; border-bottom: 1px solid var(--border); background: var(--card); }
.mx-htop > div { height: 1px; }

/* Carte : annonces sans GPS */
.mxmap-nogps { position: absolute; z-index: 550; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: min(720px, calc(100% - 24px)); padding: 8px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--warning) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border)); box-shadow: 0 1px 4px rgba(15, 23, 42, .2); font-size: 13px; }
.mxmap-nogps.hidden { display: none; }
.mxmap-nogps button { flex: none; }

/* Pop-in « concurrents directs sur la carte » */
.mxm.xl { width: min(1180px, 100%); }
.mxm.xl .mxm-body { padding: 0; }
.mxcm { display: grid; grid-template-columns: minmax(0, 1fr) 330px; height: 66vh; min-height: 380px; }
.mxcm-map { position: relative; min-height: 320px; }
.mxcm-list { overflow: auto; border-left: 1px solid var(--border); background: var(--card); }
.mxcm-sum { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; position: sticky; top: 0; background: var(--card); z-index: 1; }
.mxcm-sum b { font-size: 16px; }
.mxcm-it { display: grid; width: 100%; gap: 1px; padding: 8px 12px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: transparent; text-align: left; cursor: pointer; }
.mxcm-it:hover { background: var(--muted); }
.mxcm-it.is-sel { background: color-mix(in srgb, var(--primary) 8%, var(--card)); box-shadow: inset 3px 0 0 var(--primary); }
.mxcm-it .p { font-weight: 600; }
.mxcm-it .p em { font-style: normal; font-weight: 500; font-size: 12px; }
.mxcm-it .p em.up { color: var(--destructive); }
.mxcm-it .p em.down { color: var(--success); }
.mxcm-it .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxcm-it .m { font-size: 12px; color: var(--muted-foreground); }
.mxcm-pop { display: grid; gap: 4px; min-width: 190px; font-size: 13px; }
.mxcm-key { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted-foreground); }
@media (max-width: 900px) { .mxcm { grid-template-columns: 1fr; grid-template-rows: 55% 45%; } .mxcm-list { border-left: 0; border-top: 1px solid var(--border); } }

.mxcm-stage { position: relative; min-width: 0; }
.mxcm-stage .mxcm-map { position: absolute; inset: 0; }
.mxcm-tools { position: absolute; z-index: 500; top: 10px; left: 56px; display: flex; gap: 6px; flex-wrap: wrap; }
.mxcm-tools .btn-sm-outline { background: var(--card); box-shadow: 0 1px 4px rgba(15, 23, 42, .18); }
.mxcm-tools .btn-sm-outline.is-on { border-color: var(--primary); color: var(--primary); }
.mxcm-tools .btn-sm-outline.hidden { display: none; }
.mxcm-tools svg { width: 14px; height: 14px; }
.mxcm-stage .mxmap-hint { top: 52px; }
.mxcm-stage .mxmap-hint.hidden { display: none; }

/* ── À vérifier (triage review queue) — Facebook-like post cards ── */
.tq-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tq-counter { font-size: 13px; color: var(--muted-foreground); white-space: nowrap; padding-top: 6px; }
.tq-counter span { font-weight: 600; color: var(--foreground); }
#tq-feed { max-width: 760px; }
.tq-post { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; outline: none;
  transition: transform .18s ease, opacity .18s ease; }
.tq-post:focus-within, .tq-post:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
.tq-post.tq-out { transform: translateX(32px); opacity: 0; }
.tq-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.tq-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--card); flex-shrink: 0;
  background: hsl(var(--h, 210) 55% 48%); }
.tq-who { min-width: 0; flex: 1; }
.tq-name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.tq-meta { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq-meta a { color: var(--primary); }
.tq-why { font-size: 11px; color: var(--warning, #b45309); background: color-mix(in srgb, var(--warning, #f59e0b) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 40%, var(--card)); border-radius: 999px; padding: 3px 9px; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.tq-why svg { width: 13px; height: 13px; flex-shrink: 0; }
.tq-text { padding: 4px 14px 10px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.tq-text.tq-clamp { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.tq-more-btn { margin: -6px 14px 10px; background: none; border: 0; color: var(--primary); font-size: 13px; cursor: pointer; padding: 0; }
.tq-media { display: grid; gap: 2px; background: var(--muted); }
.tq-media-1 { grid-template-columns: 1fr; }
.tq-media-2, .tq-media-4 { grid-template-columns: 1fr 1fr; }
.tq-media-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.tq-media-3 .tq-m:first-child { grid-row: span 2; }
.tq-m { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--border); }
.tq-media-1 .tq-m { aspect-ratio: auto; max-height: 460px; }
.tq-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-media-1 .tq-m img { object-fit: contain; max-height: 460px; }
.tq-m.tq-m-dead img { display: none; }
.tq-m.tq-m-dead::after { content: 'Image expirée — ouvrir sur Facebook'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted-foreground); }
.tq-play { position: absolute; inset: 0; display: grid; place-items: center; }
.tq-play svg { width: 44px; height: 44px; color: var(--card); filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.tq-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: var(--card); font-size: 22px; font-weight: 600; }
.tq-facts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.tq-fact { font-size: 12px; background: var(--muted); border-radius: 999px; padding: 3px 9px; color: var(--foreground); }
.tq-panel { margin-top: 10px; padding: 12px 14px 14px; background: var(--muted); border-top: 1px solid var(--border); display: grid; gap: 10px; }
.tq-dests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tq-dest { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--card);
  color: var(--foreground); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, color .12s; --c: var(--foreground); }
.tq-dest svg { width: 20px; height: 20px; }
.tq-dest kbd { position: absolute; top: 5px; left: 7px; font: 10px/1 ui-monospace, monospace; color: var(--muted-foreground); }
.tq-dest:hover { border-color: var(--c); color: var(--c); }
.tq-dest.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--card)); color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.tq-dest.is-on kbd { color: var(--c); }
.tq-d-demande { --c: #2563eb; }
.tq-d-annonce { --c: #16a34a; }
.tq-d-court   { --c: #d97706; }
.tq-d-bruit   { --c: var(--foreground); --bg: var(--muted); }
.tq-axes { display: flex; flex-wrap: wrap; gap: 8px 18px; min-height: 8px; }
.tq-axis { display: flex; align-items: center; gap: 8px; }
.tq-axis-label { font-size: 12px; color: var(--muted-foreground); }
.tq-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
.tq-seg-btn { border: 0; background: transparent; padding: 6px 11px; font-size: 13px; color: var(--foreground); cursor: pointer; border-right: 1px solid var(--border); transition: background .1s; }
.tq-seg-btn:last-child { border-right: 0; }
.tq-seg-btn:hover { background: var(--muted); }
.tq-seg-btn.is-on { background: var(--primary); color: var(--primary-foreground, #fff); }
.tq-actions { display: flex; align-items: center; gap: 8px; }
.tq-actions kbd { font: 11px/1 ui-monospace, monospace; opacity: .7; margin-left: 6px; }
@media (max-width: 640px) {
  .tq-dests { grid-template-columns: repeat(2, 1fr); }
  .tq-why { display: none; }
}
.tq-fb { width: 34px; height: 34px; border-radius: 50%; background: #0866ff; color: #fff; display: grid; place-items: center; flex-shrink: 0; margin-left: 4px; }
.tq-fb svg { width: 18px; height: 18px; }
.tq-fb:hover { filter: brightness(1.1); }
.tq-copies { display: inline-block; font-size: 11px; font-weight: 600; background: var(--muted); color: var(--foreground); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.tq-top { position: sticky; top: 0; z-index: 5; background: var(--background, var(--card)); padding-block: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.tq-trunc { margin: -4px 14px 10px; font-size: 12px; color: var(--warning, #b45309); }
.tq-trunc a { text-decoration: underline; }
.tq-why-gap { color: var(--destructive, #b91c1c); background: color-mix(in srgb, var(--destructive, #dc2626) 10%, var(--card)); border-color: color-mix(in srgb, var(--destructive, #dc2626) 35%, var(--card)); }
.tq-fields { display: grid; grid-template-columns: 1.4fr .7fr 1fr 1.1fr; gap: 8px 10px; align-items: end; }
.tq-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted-foreground); min-width: 0; }
.tq-f em { font-style: normal; opacity: .8; }
.tq-f .input, .tq-f .select { width: 100%; }
.tq-f.is-missing .input, .tq-f.is-missing .select { border-color: var(--destructive, #dc2626); box-shadow: 0 0 0 1px var(--destructive, #dc2626); }
@media (max-width: 640px) { .tq-fields { grid-template-columns: 1fr 1fr; } }
.sc-grow { flex: 1 1 340px; min-width: 240px; }
.sc-grow .input { width: 100%; }
.sc-chip { font-size: 12px; background: var(--muted); color: var(--foreground); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.sc-chip:hover { border-color: var(--destructive, #dc2626); color: var(--destructive, #dc2626); }
.sc-caret { font-size: 10px; opacity: .35; }
.sc-caret.on { opacity: 1; color: var(--primary); }
.ld-strip { padding: 12px 14px; }
.ld-place { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 14px; }
.ld-place svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
.ld-sep { color: var(--muted-foreground); }
.ld-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ld-stat { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; background: var(--muted); font-size: 13px; line-height: 1; }
.ld-stat svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.ld-stat b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ld-stat span { color: var(--muted-foreground); font-size: 12px; }
.ld-stat.ld-yes { background: color-mix(in srgb, #16a34a 14%, var(--card)); }
.ld-stat.ld-yes svg { color: #16a34a; }
.ld-stat.ld-no { opacity: .55; text-decoration: line-through; }
.ld-desc { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 18em; overflow: auto; }
.adv-kind { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.adv-k-part { background: color-mix(in srgb, #16a34a 16%, var(--card)); color: #15803d; }
.adv-k-pro { background: color-mix(in srgb, #4f46e5 14%, var(--card)); color: #4338ca; }
.adv-k-agence { background: color-mix(in srgb, #9333ea 14%, var(--card)); color: #7e22ce; }
.adv-k-unk { background: var(--muted); color: var(--muted-foreground); }
.adv-id { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.adv-row { cursor: pointer; border-bottom: 1px solid var(--border); }
.adv-row:hover { background: var(--muted); }
.adv-row td { padding: 8px 8px; }
.adv-row td:first-child { padding-left: 12px; }
.adv-srcs { display: flex; flex-wrap: wrap; gap: 4px; }
.adv-src { font-size: 12px; background: var(--muted); border-radius: 6px; padding: 2px 7px; color: var(--foreground); }
.adv-src b { margin-left: 3px; font-variant-numeric: tabular-nums; }
.adv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.adv-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--muted); }
.adv-kpi svg { width: 16px; height: 16px; color: var(--muted-foreground); }
.adv-kpi b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adv-kpi span { font-size: 12px; color: var(--muted-foreground); }
.adv-li { cursor: pointer; border-top: 1px solid var(--border); }
.adv-li:hover { background: var(--muted); }
.adv-li td { padding: 6px 4px; }
.adv-posts { display: grid; gap: 8px; max-height: 420px; overflow: auto; }
.adv-post { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; }
.adv-fb { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #0866ff; width: fit-content; }
.adv-fb svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .adv-kpis { grid-template-columns: repeat(2, 1fr); } }
.ld-strip { margin-top: .75rem; }
button.ld-stat, button.ld-loc, button.ld-price { font: inherit; border: 0; cursor: pointer; text-align: left; }
button.ld-stat { position: relative; color: var(--foreground); }
button.ld-stat:hover { outline: 1px solid var(--primary); }
.ld-stat.ld-add { background: transparent; border: 1px dashed var(--border); color: var(--muted-foreground); }
.ld-stat.ld-add:hover { border-color: var(--primary); color: var(--primary); outline: 0; }
.ld-edited { font-style: normal; font-size: 10px; color: var(--primary); margin-left: 2px; }
button.ld-loc { background: none; padding: 0 2px; border-radius: 4px; color: var(--foreground); }
button.ld-loc:hover { background: var(--muted); }
.ld-loc-empty { color: var(--muted-foreground); font-weight: 400; font-style: italic; }
button.ld-price { background: none; font-size: 1.125rem; font-weight: 600; padding: 2px 6px; border-radius: 6px; color: var(--foreground); }
button.ld-price:hover { background: var(--muted); }
.ld-facts { margin-top: 8px; font-size: 12px; color: var(--muted-foreground); }
.ld-facts b { color: var(--foreground); font-weight: 600; }
.ld-status { display: grid; gap: 10px; }
.ld-st-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ld-st-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); width: 86px; flex-shrink: 0; }
.ld-st-text { flex: 1 1 220px; min-width: 0; }
.ld-gone { color: var(--destructive, #b91c1c); }
.ld-editor { position: fixed; z-index: 90; width: 260px; max-width: 92vw; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 12px; display: grid; gap: 10px; }
.ld-ed-t { font-size: 12px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .04em; }
.ld-ed-f { display: flex; gap: 6px; flex-wrap: wrap; }
.ld-more { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow: auto; }
.ld-more .ld-stat { cursor: pointer; }
.tq-split { position: relative; display: inline-flex; }
.tq-split .tq-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tq-split .tq-split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255,255,255,.35); padding-inline: 8px; }
.tq-split .tq-split-caret svg { width: 16px; height: 16px; }
.tq-split-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 270px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 4px; }
.tq-split-menu button { width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 7px; font-size: 14px; color: var(--foreground); cursor: pointer; }
.tq-split-menu button:hover { background: var(--muted); }
.tq-split-caret.hidden, .tq-split-menu.hidden { display: none !important; }
.mx-optlist { display: grid; gap: 2px; max-height: 280px; overflow: auto; }
.mx-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--foreground); font-size: 14px; cursor: pointer; }
.mx-opt:hover { background: var(--muted); }
.mx-opt.is-on { background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); font-weight: 600; }
.mx-cell .adv-id { min-width: 0; }

/* Chip pickers (client criteria: cities, neighbourhoods) */
.cp { position: relative; }
.cp-box { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 38px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); cursor: text; }
.cp-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.cp-chips { display: contents; }
.cp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); font-size: 13px; font-weight: 600; }
.cp-x { border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; }
.cp-x:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.cp-input { flex: 1 1 120px; min-width: 100px; border: 0; outline: 0; background: none; font-size: 14px; padding: 4px; color: var(--foreground); }
.cp-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow: auto; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: 0 10px 28px rgba(15, 23, 42, .16); }
.cp-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--foreground); font-size: 14px; cursor: pointer; }
.cp-opt:hover, .cp-opt.is-active { background: var(--muted); }
.cp-opt.cp-extra { color: var(--primary); font-weight: 600; }
.cp-opt.is-busy { opacity: .5; pointer-events: none; }
.cp-hint { color: var(--muted-foreground, #64748b); font-size: 12px; font-weight: 400; }
.ld-ico { font-size: 17px; line-height: 1; padding: 4px 8px; }
.cp-menu { max-height: 320px; }
.tq-price { display: flex; gap: 6px; }
.tq-price .input { flex: 1 1 auto; min-width: 0; }
.tq-price .select { flex: 0 0 auto; width: auto; max-width: 150px; }
.cp-group { padding: 8px 10px 3px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground, #64748b); }
.cp-opt.cp-in { padding-left: 22px; }
.tq-nc { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--muted-foreground, #64748b); cursor: pointer; white-space: nowrap; user-select: none; }
.tq-nc:has(input:checked) { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); }
.tq-nc input { accent-color: var(--primary); }

/* Scrapers page */
.sc-h1 { font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.sc-h2 { font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; }
.sc-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted-foreground, #64748b); font-weight: 400; }
.sc-sources-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 2px 10px; }
.sc-sources-head .sc-sub { margin: 0; }
.sc-ident { display: inline-flex; flex-direction: column; line-height: 1.2; }
.sc-title { font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
.sc-site { font-size: 12.5px; color: var(--muted-foreground, #64748b); }
.sc-avatar { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 17px; color: #fff; background: hsl(var(--h) 52% 46%); }
details[data-card] > summary { padding: 4px 2px; border-radius: 8px; }
details[data-card] > summary:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.sc-sec-title { margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground, #64748b); }
.sc-sec-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sc-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.sc-maint { margin-top: 16px; border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--muted) 40%, transparent); }
.sc-maint > summary { cursor: pointer; font-weight: 600; font-size: 14px; }

/* Prompts IA — « Tester ce prompt » */
.te-box { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--muted) 35%, var(--card)); }
.te-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; font-size: 15px; }
.te-sub, .te-note { font-size: 12.5px; color: var(--muted-foreground, #64748b); font-weight: 400; }
.te-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.te-ctl label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.te-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 12px; }
.te-bar i { display: block; height: 100%; width: 3%; background: var(--primary); transition: width .4s; }
.te-meta { margin: 14px 0 8px; font-size: 13px; color: var(--muted-foreground, #64748b); }
.te-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.te-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground, #64748b); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.te-table td { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.te-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.te-n { color: var(--muted-foreground, #64748b); font-variant-numeric: tabular-nums; }
.te-d { font-size: 12.5px; font-weight: 600; color: var(--muted-foreground, #64748b); }
.te-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.te-chip { border: 1px solid; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; background: var(--card); }
.te-chip em { color: var(--muted-foreground, #64748b); font-style: normal; }
.te-err, .te-hist { margin-top: 10px; font-size: 13px; }
.te-err summary, .te-hist summary { cursor: pointer; font-weight: 600; }
.te-err div { padding: 4px 0; border-bottom: 1px dashed var(--border); }

/* Annonces écartées (analysées, pas intéressantes) */
.mx-body.is-dismissed { opacity: .55; }
.mx-body.is-dismissed:hover { opacity: 1; }

/* « A » Airbnb : le même petit bouton rouge partout où l'on ouvre une page Airbnb */
.ab-link { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: #ff385c; color: #fff; font: 700 13px/1 Inter, system-ui, sans-serif; text-decoration: none; transition: filter .12s, transform .12s; }
.ab-link:hover { filter: brightness(1.12); transform: translateY(-1px); }
.ab-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ab-link.big { width: 28px; height: 28px; font-size: 15px; border-radius: 7px; }
.ab-link.push { margin-left: auto; }
.pc-lh .ab-link { margin-left: auto; }
.mxcm-row, .mxp-comp-row { display: flex; align-items: center; gap: 6px; padding-right: 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.mxcm-row .mxcm-it, .mxp-comp-row .mxp-comp { flex: 1; min-width: 0; border-bottom: 0; }
.mxcm-popact { display: flex; align-items: center; gap: 8px; }

.mxcm { grid-template-rows: auto minmax(0, 1fr); }
.mxcm-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--card); }
.mxcm-f { display: grid; gap: 2px; font-size: 11px; color: var(--muted-foreground); }
.mxcm-f .select { height: 28px; font-size: 13px; min-width: 120px; color: var(--foreground); }
.mxcm-bar .btn-sm-ghost.hidden { display: none; }
.mxcm-sum > div + div { margin-top: 2px; }
@media (max-width: 900px) { .mxcm { grid-template-rows: auto 50% 1fr; } }

/* Logo Airbnb : remplace le « A » rouge (icône fournie par l'équipe) */
.ab-link { background: transparent; padding: 1px; width: 24px; height: 24px; border-radius: 6px; }
.ab-link img { width: 20px; height: 20px; display: block; object-fit: contain; }
.ab-link:hover { background: color-mix(in srgb, #ff5a5f 14%, transparent); filter: none; }
.ab-link.big { width: 30px; height: 30px; }
.ab-link.big img { width: 24px; height: 24px; }

/* Historique des scrapers : une seule ligne de filtres compacte */
.sc-hf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.sc-hf .select, .sc-hf .input { height: 30px; font-size: 13px; padding-top: 0; padding-bottom: 0; width: auto; }
.sc-hf-range { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-foreground); }
.sc-hf-range .input { width: 132px; }

/* Qualité des données : objectif ≥ 90 % partout */
.aq-health { padding: 8px 12px; margin-bottom: 8px; border-radius: var(--radius); font-size: 13px; border: 1px solid var(--border); }
.aq-health.ok { background: color-mix(in srgb, var(--success) 10%, var(--card)); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.aq-health.warn { background: color-mix(in srgb, var(--warning) 10%, var(--card)); border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }

/* Mouvements: daily gained / lost bars */
.mx-spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin-top: 4px; }
.mx-spark-d { position: relative; flex: 1 1 0; min-width: 3px; max-width: 10px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.mx-spark-d i { display: block; width: 100%; min-height: 0; }
.mx-spark-d i.up { background: #16a34a; align-self: flex-end; }
.mx-spark-d i.down { background: #dc2626; }
.mx-gain { color: #16a34a; font-weight: 600; }
.mx-loss { color: #dc2626; font-weight: 600; }

/* Prix mois par mois : même mise en page que la disponibilité, uniquement en orange (le calendrier reste bleu) */
.mxpr { --pr: #d97706; }
.mxpr .mxcal-bar.price i { background: color-mix(in srgb, var(--pr) 32%, var(--card)); }
.mxpr .mxcal-bar.price.mid i { background: color-mix(in srgb, var(--pr) 62%, var(--card)); }
.mxpr .mxcal-bar.price.hi i { background: var(--pr); }
.mxpr .mxcal-bar.price.none { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 80%, transparent) 0 6px, transparent 6px 12px); }
.mxpr .mxpr-none { font-size: 11px; font-weight: 500; color: var(--muted-foreground); background: transparent; }
.mxpr .mxcal-col.more .mxcal-m::after { content: " ▲"; color: var(--pr); font-size: 10px; }
.mxpr .mxcal-col.less .mxcal-m::after { content: " ▼"; color: var(--success); font-size: 10px; }
.mxpr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0 2px; }
.mxpr-k { border: 1px solid color-mix(in srgb, var(--pr) 28%, var(--border)); background: color-mix(in srgb, var(--pr) 7%, var(--card)); border-radius: var(--radius); padding: 6px 10px; display: flex; flex-direction: column; }
.mxpr-k span { font-size: 11px; color: var(--muted-foreground); }
.mxpr-k b { font-size: 16px; font-variant-numeric: tabular-nums; }
.mxpr-k i { font-size: 11px; font-style: normal; color: var(--muted-foreground); min-height: 14px; }
.mxpr-k.more b { color: var(--pr); }
.mxpr-k.less b { color: var(--success); }
.mxpr .mxcal-bar.price.undated i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pr) 28%, var(--card)) 0 5px, color-mix(in srgb, var(--pr) 12%, var(--card)) 5px 10px); }
.mxpr .mxcal-bar.price.undated b { color: var(--muted-foreground); font-weight: 500; }
.mxpr .mxcal-key i.und { width: 14px; height: 10px; border: 0; opacity: 1; border-radius: 2px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pr) 40%, var(--card)) 0 4px, color-mix(in srgb, var(--pr) 12%, var(--card)) 4px 8px); }

.mxpr .mxcal { align-items: flex-start; }
.mxpr .mxcal-col { display: flex; flex-direction: column; }
.mxpr .mxcal-bar { flex: 0 0 128px; }