/* ============================================================
   ARPE · BLOCS DE RÉPONSE DU CHAT
   Feuille de référence — préfixe .arb-
   Tient en 640px (accueil) comme en 360px utiles (dock).
   Aucune dépendance : uniquement les tokens du DS.
   Les blocs portent LEUR typo (--arb-sans / --arb-mono) :
   le réglage de police utilisateur ne s'applique qu'au texte courant.
   ============================================================ */

.arb{
  --arb-sans:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  --arb-mono:ui-monospace,'JetBrains Mono','SFMono-Regular',Menlo,monospace;
  --arb-gap:14px;
  font-family:var(--arb-sans);
  font-size:13.5px;line-height:1.5;color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.arb *{box-sizing:border-box}
.arb+.arb{margin-top:18px}
.arb b,.arb strong{font-weight:650}
.arb .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- teintes d'état, un seul jeu pour tous les blocs ---- */
.arb{--st:var(--muted)}
.arb .ok{--st:var(--green)}
.arb .warn{--st:var(--tiede)}
.arb .late{--st:var(--chaud)}
.arb .info{--st:var(--froid)}
.arb .ia{--st:var(--accent)}

/* ============ A.1 · EN-TÊTE DE SECTION ============
   <div class="arb arb-sec"><span class="arb-sec-t">…</span>
     <span class="arb-sec-n num">3</span><i class="arb-rule"></i></div> */
.arb-sec{display:flex;align-items:center;gap:9px}
.arb-sec-t{font-family:var(--arb-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.arb-sec-n{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--arb-mono);font-size:10px;font-weight:700;line-height:1;
  color:color-mix(in srgb,var(--st) 82%,var(--text));
  background:color-mix(in srgb,var(--st) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--st) 26%,transparent)}
.arb-rule{flex:1;height:1px;background:var(--border);min-width:12px}
.arb-sec+.arb{margin-top:11px}

/* ============ A.2 · BANDE KPI ============
   .arb-kpis > .arb-kpi (v = valeur, u = unité, l = libellé, d = delta) */
.arb-kpis{display:grid;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.arb-kpi{background:var(--surface);padding:11px 13px 12px;min-width:0}
.arb-kpi-v{display:flex;align-items:baseline;gap:3px;
  font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums}
.arb-kpi-v u{font-style:normal;text-decoration:none;font-size:13px;font-weight:600;color:var(--text-dim)}
.arb-kpi-l{display:block;margin-top:4px;font-family:var(--arb-mono);font-size:9.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arb-kpi-d{display:inline-flex;align-items:center;gap:3px;margin-top:6px;
  font-family:var(--arb-mono);font-size:10px;font-weight:700;padding:1px 5px;border-radius:var(--radius-sm);
  color:color-mix(in srgb,var(--st) 88%,var(--text));
  background:color-mix(in srgb,var(--st) 13%,transparent)}
.arb-kpi.up{--st:var(--green)}
.arb-kpi.down{--st:var(--chaud)}

/* ============ A.3 · LISTE D'ÉCHÉANCES ============
   .arb-list > .arb-row : dot + (nom / sous-ligne) + (montant / méta) */
.arb-list{border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);overflow:hidden}
.arb-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:0 11px;padding:9px 13px;position:relative}
.arb-row+.arb-row{border-top:1px solid var(--border)}
.arb-row.tap{cursor:pointer;transition:background .14s}
.arb-row.tap:hover{background:var(--s2)}
.arb-dot{width:6px;height:6px;border-radius:50%;background:var(--st);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--st) 15%,transparent)}
.arb-row-m{min-width:0}
.arb-row-t{display:block;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arb-row-s{display:block;margin-top:1px;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arb-row-s em{font-style:normal;color:color-mix(in srgb,var(--st) 85%,var(--text-dim));font-weight:600}
.arb-row-r{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.arb-row-v{font-weight:650;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.arb-row-k{font-family:var(--arb-mono);font-size:10px;color:var(--muted);white-space:nowrap}
/* pied de liste : « … et N autres » / total */
.arb-more{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 13px;border-top:1px solid var(--border);background:var(--s2);
  font-family:var(--arb-mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted)}
.arb-more a,.arb-more button{font:inherit;color:var(--text-dim);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:none;border-bottom:1px solid var(--border-hi)}
.arb-more a:hover,.arb-more button:hover{color:var(--text)}

/* ---- état vide, commun à tous les blocs ---- */
.arb-empty{border:1px dashed var(--border-hi);border-radius:var(--radius-lg);
  padding:14px;text-align:center;color:var(--muted);font-size:12.5px;background:var(--surface)}

/* ============ A.4 · RANG PERSONNE ============ */
.arb-people{display:flex;flex-direction:column;gap:7px}
.arb-p{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 11px;
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);transition:border-color .14s,background .14s}
.arb-p.tap{cursor:pointer}
.arb-p.tap:hover{border-color:var(--border-hi);background:var(--s2)}
.arb-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--arb-mono);font-size:10.5px;font-weight:700;letter-spacing:.02em;
  color:color-mix(in srgb,var(--st) 88%,var(--text));
  background:color-mix(in srgb,var(--st) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--st) 24%,transparent)}
.arb-p-m{min-width:0}
.arb-p-n{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arb-p-s{display:block;margin-top:1px;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arb-p-r{display:flex;align-items:center;gap:8px;flex:none}
.arb-tel{display:inline-flex;align-items:center;gap:5px;font-family:var(--arb-mono);
  font-size:11.5px;color:var(--text-dim);text-decoration:none;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.arb-tel:hover{color:var(--text)}
.arb-tel svg{width:12px;height:12px;flex:none;opacity:.7}
.arb-score{flex:none;min-width:30px;padding:2px 7px;border-radius:99px;text-align:center;
  font-family:var(--arb-mono);font-size:11px;font-weight:700;line-height:1.35;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--st) 88%,var(--text));
  background:color-mix(in srgb,var(--st) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--st) 28%,transparent)}

/* ============ A.5 · TIMELINE COMPACTE ============ */
.arb-tl{border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);padding:4px 13px 6px}
.arb-ev{display:grid;grid-template-columns:34px auto minmax(0,1fr);align-items:start;
  gap:0 10px;padding:8px 0;position:relative}
.arb-ev+.arb-ev::before{content:"";position:absolute;left:44px;top:-8px;height:8px;width:1px;
  background:var(--border)}
.arb-d{text-align:center;font-family:var(--arb-mono);line-height:1.15;padding-top:1px}
.arb-d b{display:block;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.arb-d span{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.arb-ic{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:color-mix(in srgb,var(--st) 88%,var(--text));
  background:color-mix(in srgb,var(--st) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--st) 24%,transparent)}
.arb-ic svg{width:12px;height:12px}
.arb-ev-t{min-width:0;padding-top:2px}
.arb-ev-t b{display:block;font-weight:600}
.arb-ev-t span{display:block;font-size:12px;color:var(--muted);margin-top:1px}

/* ============ A.6 · TABLEAU COMPARATIF ============ */
.arb-tbl-w{border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);overflow:hidden}
.arb-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.arb-tbl th,.arb-tbl td{padding:8px 13px;text-align:right;white-space:nowrap}
.arb-tbl th:first-child,.arb-tbl td:first-child{text-align:left;white-space:normal}
.arb-tbl thead th{font-family:var(--arb-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  background:var(--s2);border-bottom:1px solid var(--border)}
.arb-tbl tbody tr+tr td{border-top:1px solid var(--border)}
.arb-tbl td{font-weight:600;color:var(--text-dim)}
.arb-tbl td:first-child{font-weight:600;color:var(--text)}
.arb-tbl .hi{background:color-mix(in srgb,var(--accent) 6%,transparent);
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--accent) 22%,transparent),
             inset -1px 0 0 color-mix(in srgb,var(--accent) 22%,transparent)}
.arb-tbl thead .hi{color:color-mix(in srgb,var(--accent) 85%,var(--text))}
.arb-tbl td.hi{color:var(--text);font-weight:700}
.arb-tbl tfoot td{border-top:1px solid var(--border-hi);background:var(--s2);
  font-family:var(--arb-mono);font-size:11px;color:var(--muted);font-weight:600}

/* ============ A.7 · BLOC ESTIMATION / MARCHÉ ============ */
.arb-est{border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);padding:13px 14px 14px}
.arb-est-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.arb-est-v{display:flex;align-items:baseline;gap:4px;font-size:23px;font-weight:650;
  letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.arb-est-v u{font-style:normal;text-decoration:none;font-size:13px;font-weight:600;color:var(--text-dim)}
.arb-est-l{display:block;margin-top:3px;font-family:var(--arb-mono);font-size:9.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.arb-badge{flex:none;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;
  border-radius:99px;font-family:var(--arb-mono);font-size:10.5px;font-weight:700;
  color:color-mix(in srgb,var(--st) 88%,var(--text));
  background:color-mix(in srgb,var(--st) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--st) 26%,transparent)}
/* fourchette : rail + segment médian + repère */
.arb-range{margin-top:13px}
.arb-rail{position:relative;height:5px;border-radius:99px;background:var(--s3)}
.arb-rail i{position:absolute;top:0;bottom:0;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 34%,transparent)}
.arb-rail b{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface)}
.arb-range-x{display:flex;justify-content:space-between;margin-top:6px;
  font-family:var(--arb-mono);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.arb-est-f{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.arb-est-f b{color:var(--text-dim);font-weight:650;font-variant-numeric:tabular-nums}

/* ============ CHROME · SUITES (C.8) ============ */
.arb-sug{display:flex;flex-wrap:wrap;gap:6px}
.arb-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  font-family:var(--arb-sans);font-size:12.5px;font-weight:600;color:var(--text-dim);
  background:var(--surface);border:1px solid var(--border);border-radius:99px;
  cursor:pointer;transition:border-color .14s,color .14s,background .14s}
.arb-chip:hover{color:var(--text);border-color:var(--border-hi);background:var(--s2)}
.arb-chip svg{width:12px;height:12px;opacity:.65}

/* ---- dock : mêmes blocs, densité réduite ---- */
/* en colonne flex, les blocs à overflow:hidden perdent leur min-height auto */
.arb{flex:none;min-height:min-content}
.arb-dock .arb{font-size:13px}
.arb-dock .arb-kpis{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.arb-dock .arb-kpi{padding:9px 11px 10px}
.arb-dock .arb-kpi-v{font-size:18px}
.arb-dock .arb-row,.arb-dock .arb-p{padding-left:11px;padding-right:11px}
.arb-dock .arb-tel{display:none}
.arb-dock .arb-tbl th,.arb-dock .arb-tbl td{padding:7px 10px}
.arb-dock .arb-est-v{font-size:20px}

@media(max-width:520px){
  .arb-kpis{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
  .arb-tel{display:none}
  .arb-tbl th,.arb-tbl td{padding:7px 10px}
}