/* ============================================================
   Écran Clients v4 — le portefeuille (réécrit le 07/09/2026)
   Le composant du pipeline prospect (chevrons pastel opaques, bulle
   de l'étape ouverte, « Déplacer › » en pastilles), le sens d'un
   portefeuille : la seconde ligne du chevron porte le récurrent.
   Toutes les classes sont préfixées x4-clients-.
   ============================================================ */
.x4-clients {
  font-family: var(--font, 'Manrope', -apple-system, system-ui, sans-serif);
  color: var(--v2-text, #16171a);
  padding: 0 0 66px; display: flex; flex-direction: column; gap: 12px;
  min-width: 1180px; letter-spacing: -.01em; line-height: 1.2;
}
.x4-clients [hidden] { display: none !important; }
.x4-clients .est-neg { color: var(--neg-fg, #a74137); }

/* ── Bandeau de tête : des nombres, rien d'autre ─────────────── */
.x4-clients-tete {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--r-md, 18px);
  background: var(--panel-2, rgba(255, 255, 255, .5)); border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}
.x4-clients-tete-lbl { font-size: 11px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-clients-tete-val { font-size: 14px; font-weight: 680; font-variant-numeric: tabular-nums; }
.x4-clients-tete-val.est-vide { font-weight: 550; color: var(--v2-text-3, #6b6f76); }
.x4-clients-tete-sep { width: 1px; height: 18px; background: var(--stroke, rgba(20, 20, 25, .075)); }
.x4-clients-tete-n { margin-left: auto; font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-clients-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px;
  font-size: 12px; font-weight: 620;
}
.x4-clients-pill i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.x4-clients-pill[data-tone="warn"] { color: var(--warn-fg, #9a5a12); background: var(--warn-soft, rgba(154, 90, 18, .12)); }
.x4-clients-pill[data-tone="neg"] { color: var(--neg-fg, #a74137); background: var(--neg-soft, rgba(193, 75, 64, .11)); }

/* ── La frise : cinq chevrons pastel, le bac à droite ───────── */
.x4-clients-frise-ligne { display: flex; align-items: stretch; gap: 12px; }
.x4-clients-frise { flex: 1 1 0%; min-width: 0; display: flex; align-items: stretch; gap: 3px; }
.x4-clients-chevron {
  cursor: pointer; flex: 1 1 0%; min-width: 0; border: 0; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 6px;
  box-sizing: border-box; min-height: 85px; padding: 13px 22px 13px 27px; font: inherit;
  background: color-mix(in srgb, var(--x4c-encre, #3160b4) 14%, var(--panel-solid, #fff));
  transition: background .16s;
}
.x4-clients-chevron:hover { background: color-mix(in srgb, var(--x4c-encre, #3160b4) 22%, var(--panel-solid, #fff)); }
.x4-clients-chevron-premier { padding-left: 18px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
.x4-clients-chevron-milieu { clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%); }
.x4-clients-chevron-dernier { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%); }
.x4-clients-chevron-seul { padding-left: 18px; border-radius: var(--r-sm, 12px); }
.x4-clients-chevron-tete { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.x4-clients-chevron-n { font-size: 22px; font-weight: 680; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--x4c-encre, #3160b4); }
.x4-clients-chevron-l { min-width: 0; font-size: 12.5px; font-weight: 620; color: var(--v2-text, #16171a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Un client se facture : la seconde ligne porte le récurrent de l'étape. */
.x4-clients-chevron-ca { font-size: 11px; font-weight: 620; font-variant-numeric: tabular-nums; color: var(--x4c-encre, #3160b4); }
.x4-clients-chevron-ca.est-perdu { color: var(--neg-fg, #a74137); }
.x4-clients-chevron.est-ouvert, .x4-clients-chevron.est-ouvert:hover {
  background: color-mix(in srgb, var(--x4c-encre, #3160b4) 26%, var(--panel-solid, #fff));
  box-shadow: inset 0 -3px 0 0 var(--x4c-encre, #3160b4);
}
.x4-clients-chevron.est-ouvert .x4-clients-chevron-l { font-weight: 680; }
[data-app-theme="dark"] .x4-clients-chevron-n,
[data-app-theme="dark"] .x4-clients-chevron-ca { color: color-mix(in srgb, var(--x4c-encre, #3160b4) 55%, #fff); }
/* Le bac : hors frise, neutre, pointillé — pas une étape. */
.x4-clients-bac {
  cursor: pointer; box-sizing: border-box; width: 172px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 3px;
  padding: 12px 13px; border-radius: var(--r-sm, 12px); font: inherit; text-align: left;
  background: transparent; border: 1px dashed var(--stroke-3, rgba(20, 20, 25, .17)); color: var(--v2-text-3, #6b6f76);
}
.x4-clients-bac:hover, .x4-clients-bac.est-ouvert { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-clients-bac-n { font-size: 22px; font-weight: 680; letter-spacing: -.035em; line-height: 1; }
.x4-clients-bac-l { font-size: 12.5px; font-weight: 620; color: var(--v2-text-2, #55595f); }
.x4-clients-bac-s { font-size: 10.5px; line-height: 1.3; }

/* ── La bulle de l'étape ouverte ────────────────────────────── */
.x4-clients-enveloppe {
  display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r-lg, 22px);
  background: color-mix(in srgb, var(--x4c-encre, #3160b4) 9%, var(--panel-solid, #fff));
  border: 1px solid color-mix(in srgb, var(--x4c-encre, #3160b4) 22%, transparent);
}
.x4-clients-enveloppe.est-bac { background: var(--inset, rgba(0, 0, 0, .035)); border-style: dashed; }
.x4-clients-env-tete { display: flex; align-items: baseline; gap: 10px; padding: 2px 6px 0; flex-wrap: wrap; }
.x4-clients-env-point { align-self: center; width: 10px; height: 10px; border-radius: 99px; background: var(--x4c-encre, #3160b4); }
.x4-clients-env-titre { font-size: 17px; font-weight: 680; letter-spacing: -.025em; color: var(--x4c-encre, #3160b4); }
[data-app-theme="dark"] .x4-clients-env-titre { color: color-mix(in srgb, var(--x4c-encre, #3160b4) 55%, #fff); }
.x4-clients-env-n { font-size: 12.5px; font-weight: 550; color: var(--v2-text-2, #55595f); }
.x4-clients-env-n b { font-weight: 620; }
.x4-clients-env-desc { margin-left: auto; font-size: 13px; color: var(--v2-text-2, #55595f); }
.x4-clients-liste { display: flex; flex-direction: column; gap: 10px; }
.x4-clients-vide { padding: 26px; text-align: center; font-size: 13px; color: var(--v2-text-3, #6b6f76); }
.x4-clients-vide strong { display: block; font-weight: 640; color: var(--v2-text, #16171a); margin-bottom: 4px; }

/* ── La carte : trois colonnes (spec §4.4) ─────────────────── */
.x4-clients-carte {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 210px; gap: 22px; align-items: start;
  padding: 15px 18px 16px; border-radius: var(--r-md, 18px);
  /* La carte prend l'encre de son étape (Joris, 09/09 : « de la couleur
     de la colonne où je les mets ») : fond teinté 16 %, filet 4 px. */
  background: color-mix(in srgb, var(--x4c-encre, #3160b4) 16%, var(--panel-solid, #fff));
  border: 1px solid color-mix(in srgb, var(--x4c-encre, #3160b4) 30%, transparent);
  border-left: 4px solid var(--x4c-encre, #3160b4);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(20, 20, 25, .06)); cursor: pointer;
}
.x4-clients-carte:hover { border-color: color-mix(in srgb, var(--x4c-encre, #3160b4) 50%, transparent); border-left-color: var(--x4c-encre, #3160b4); }
[data-app-theme="dark"] .x4-clients-carte { background: color-mix(in srgb, var(--x4c-encre, #3160b4) 26%, var(--panel-solid, #1b1c20)); }
/* Le silence : un filet rouge — c'est l'alarme d'un client. */
.x4-clients-carte.est-silence { border-left-color: var(--neg-fg, #a74137); }
.x4-clients-carte-id { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.x4-clients-carte-idrow { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.x4-clients-mono {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-xs, 9px); display: inline-flex; align-items: center; justify-content: center;
  background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text-2, #55595f); font-size: 11px; font-weight: 680;
}
.x4-clients-carte-noms { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.x4-clients-carte-nom { font-size: 16px; font-weight: 640; letter-spacing: -.028em; color: var(--v2-text, #16171a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-clients-carte-ref, .x4-clients-carte-ville { font-size: 12px; color: var(--v2-text-3, #6b6f76); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-clients-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.x4-clients-pastille {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text-2, #55595f); font-size: 11.5px; font-weight: 550;
}
.x4-clients-pastille.est-manque { color: var(--warn-fg, #9a5a12); background: var(--warn-soft, rgba(154, 90, 18, .12)); }
/* Colonne 2 : le dernier message, ou l'invite à en écrire un. */
.x4-clients-carte-msg { min-width: 0; }
.x4-clients-carte-msg-t { font-size: 10.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); margin-bottom: 5px; }
.x4-clients-carte-msg-x {
  font-size: 12.5px; line-height: 1.5; color: var(--v2-text, #16171a); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.x4-clients-carte-msg-x .msg-mention { background: var(--accent-soft, rgba(245, 213, 71, .26)); color: var(--v2-accent, #7d640d); border-radius: 4px; padding: 0 3px; font-weight: 620; }
.x4-clients-carte-noter { border: 0; background: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 620; color: var(--v2-accent, #7d640d); cursor: pointer; }
.x4-clients-carte-noter:hover { text-decoration: underline; }
/* Colonne 3 : le récurrent, le silence, l'action, le geste. */
.x4-clients-carte-droite { display: flex; flex-direction: column; gap: 9px; }
.x4-clients-carte-carow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.x4-clients-carte-ca { font-size: 15px; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--v2-text, #16171a); }
.x4-clients-carte-ca.est-vide { font-size: 11.5px; font-weight: 550; color: var(--v2-text-3, #6b6f76); }
.x4-clients-carte-age { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4-clients-carte-age.est-neg { color: var(--neg-fg, #a74137); font-weight: 620; }
.x4-clients-carte-action {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: var(--r-xs, 9px);
  background: var(--inset, rgba(0, 0, 0, .035));
}
.x4-clients-carte-action-l { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 550; color: var(--v2-text, #16171a); text-wrap: pretty; }
.x4-clients-carte-action-l i { flex: none; width: 7px; height: 7px; border-radius: 99px; background: var(--v2-text-3, #6b6f76); }
.x4-clients-carte-action-d { padding-left: 14px; font-size: 11.5px; font-weight: 620; color: var(--v2-text-3, #6b6f76); font-variant-numeric: tabular-nums; }
.x4-clients-carte-action[data-tone="neg"] { background: var(--neg-soft, rgba(193, 75, 64, .11)); }
.x4-clients-carte-action[data-tone="neg"] .x4-clients-carte-action-d, .x4-clients-carte-action[data-tone="neg"] i { color: var(--neg-fg, #a74137); background-color: var(--neg-fg, #a74137); }
.x4-clients-carte-action[data-tone="neg"] .x4-clients-carte-action-d { background: none; }
.x4-clients-carte-action[data-tone="warn"] { background: var(--warn-soft, rgba(154, 90, 18, .12)); }
.x4-clients-carte-action[data-tone="warn"] .x4-clients-carte-action-d { color: var(--warn-fg, #9a5a12); }
.x4-clients-carte-action[data-tone="warn"] i { background: var(--warn-fg, #9a5a12); }
.x4-clients-carte-action[data-tone="pos"] .x4-clients-carte-action-d { color: var(--pos-fg, #136d45); }
.x4-clients-carte-action[data-tone="pos"] i { background: var(--pos-fg, #136d45); }
.x4-clients-carte-action.est-vide { background: none; padding: 4px 0; font-size: 11.5px; font-style: italic; color: var(--v2-text-3, #6b6f76); }
.x4-clients-deplacer {
  align-self: flex-start; height: 30px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--stroke-3, rgba(20, 20, 25, .17)); background: var(--panel-solid, #fff);
  color: var(--v2-text, #16171a); font-family: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer;
}
.x4-clients-deplacer:hover { background: var(--inset, rgba(0, 0, 0, .035)); }

/* ── Déplacer : la zone sous la carte, les destinations en pastilles ── */
.x4-clients-bascule {
  grid-column: 1 / -1; margin-top: 4px; padding: 12px 14px; border-radius: var(--r-sm, 12px);
  background: var(--inset, rgba(0, 0, 0, .035)); display: flex; flex-direction: column; gap: 10px; cursor: default;
}
.x4-clients-bascule-t { text-align: center; font-size: 13px; color: var(--v2-text-2, #55595f); }
.x4-clients-bascule-t b { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-clients-dests { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.x4-clients-dest {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff);
  color: var(--v2-text, #16171a); font-family: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer; transition: background .14s, border-color .14s;
}
.x4-clients-dest i { width: 9px; height: 9px; border-radius: 99px; background: var(--x4c-dest, var(--v2-text-3)); }
.x4-clients-dest:hover { border-color: var(--x4c-dest, var(--stroke-3)); background: color-mix(in srgb, var(--x4c-dest, #000) 8%, var(--panel-solid, #fff)); }
.x4-clients-dest.est-choisi { background: var(--x4c-dest, var(--v2-text)); border-color: var(--x4c-dest, var(--v2-text)); color: #fff; }
.x4-clients-dest.est-choisi i { background: rgba(255, 255, 255, .7); }
.x4-clients-dest.est-ici { opacity: .45; cursor: default; }
.x4-clients-dest.est-fin { margin-left: 10px; }
.x4-clients-motifs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.x4-clients-motifs-l { font-size: 11px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); margin-right: 4px; }
.x4-clients-motifs button {
  height: 32px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-solid, #fff); color: var(--v2-text, #16171a); font-family: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.x4-clients-motifs button:hover { border-color: var(--stroke-3, rgba(20, 20, 25, .17)); }
.x4-clients-motifs button.est-choisi { background: var(--neg-fg, #a74137); border-color: var(--neg-fg, #a74137); color: #fff; }
.x4-clients-bascule-txt {
  width: 100%; box-sizing: border-box; padding: 8px 11px; border-radius: var(--r-xs, 9px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff);
  color: var(--v2-text, #16171a); font-family: inherit; font-size: 13px; line-height: 1.45; resize: vertical;
}
.x4-clients-bascule-pied { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.x4-clients-bascule-relance {
  margin-right: auto; height: 30px; padding: 0 10px; border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff);
  color: var(--v2-text-2, #55595f); font-family: inherit; font-size: 12px;
}
.x4-clients-bascule-non, .x4-clients-bascule-ok { height: 30px; padding: 0 14px; border-radius: 99px; font-family: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer; }
.x4-clients-bascule-non { border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); color: var(--v2-text-2, #55595f); }
.x4-clients-bascule-ok { border: 0; background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); }

/* ── Retours Claude Design du 07/09 (soir) ─────────────────────── */
/* Deux questions dans la rangée Déplacer : quatre étapes où le contrat
   vit, une sortie — un filet avant Terminé. */
.x4-clients-dest-sep { width: 1px; align-self: stretch; margin: 0 8px; background: var(--stroke, rgba(20, 20, 25, .075)); }
.x4-clients-dest.est-fin { margin-left: 0; }
/* La relance en pastilles, même grammaire que « Perdu pourquoi ? » ;
   la pastille active n'est pas rouge : ce n'est pas un motif de perte. */
.x4-clients-relance button.est-choisi { background: var(--panel-solid, #fff); border-color: var(--stroke-3, rgba(20, 20, 25, .17)); color: var(--v2-text, #16171a); box-shadow: var(--shadow-sm, 0 1px 2px rgba(20, 20, 25, .06)); }
/* Sans fil, la carte n'a que deux colonnes et l'invite descend sous
   les pastilles — un lien discret, pas un titre de colonne. */
.x4-clients-carte.est-sans-fil { grid-template-columns: minmax(0, 1fr) 210px; }
.x4-clients-carte-id .x4-clients-carte-noter { align-self: flex-start; font-size: 12px; font-weight: 620; }
.x4-clients-pastille.est-vide { color: var(--v2-text-3, #6b6f76); }
/* En sombre, une étape à zéro est une place réservée, pas un état :
   pastel à 6 %, libellé en --text-3. */
[data-app-theme="dark"] .x4-clients-chevron.est-zero:not(.est-ouvert) { background: color-mix(in srgb, var(--x4c-encre, #3160b4) 6%, var(--panel-solid, #fff)); }
[data-app-theme="dark"] .x4-clients-chevron.est-zero:not(.est-ouvert) .x4-clients-chevron-l,
[data-app-theme="dark"] .x4-clients-chevron.est-zero:not(.est-ouvert) .x4-clients-chevron-n { color: var(--v2-text-3, #6b6f76); }

/* Le fantôme au-dessus d'une case : la teinte de l'étape, plus franche. */
.x4-clients-carte.x4-glisse-fantome.est-accueilli { background-color: color-mix(in srgb, var(--x4c-encre, #3160b4) 34%, var(--panel-solid, #fff)); border-color: color-mix(in srgb, var(--x4c-encre, #3160b4) 55%, transparent); }