/* ─── V4 · Prospects — Pipeline en frise ────────────────────────────
   Reproduction de 04-prospects-pipeline (Claude Design), jetons v2
   partout : les thèmes clair et sombre sortent des variables, aucune
   couleur de texte en dur. Préfixe unique : x4-prospects-pipeline-.  */

.x4-prospects-pipeline { min-width: 0; }
.x4-prospects-pipeline [hidden] { display: none !important; }

.x4-prospects-pipeline-corps {
  padding: 20px 30px 86px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 1180px;
  font-family: var(--font, 'Manrope', system-ui, sans-serif);
  color: var(--v2-text, #16171a);
}

/* ── Barre d'outils ─────────────────────────────────────────────── */
.x4-prospects-pipeline-outils {
  display: flex; align-items: center;
  padding: 0 6px 0 16px; height: 50px;
  border-radius: var(--r-md, 18px);
  background: var(--panel, rgba(255,255,255,.66));
  backdrop-filter: blur(20px);
  border: 1px solid var(--stroke, rgba(20,20,25,.075));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.x4-prospects-pipeline-loupe { flex-shrink: 0; display: grid; place-items: center; color: var(--v2-text-3, #6b6f76); }
.x4-prospects-pipeline-cherche {
  margin-left: 9px; width: 210px;
  font: inherit; font-size: 12.5px; color: var(--v2-text, #16171a);
  background: transparent; border: 0; outline: none; padding: 0;
}
.x4-prospects-pipeline-cherche::placeholder { color: var(--v2-text-3, #6b6f76); }
.x4-prospects-pipeline-cherche::-webkit-search-cancel-button { -webkit-appearance: none; }
.x4-prospects-pipeline-sep {
  width: 1px; height: 22px; flex-shrink: 0;
  background: var(--stroke-2, rgba(20,20,25,.05));
  margin: 0 14px 0 4px;
}
.x4-prospects-pipeline-flex { flex: 1 1 0%; }

.x4-prospects-pipeline-segments {
  display: flex; gap: 3px; padding: 3px; border-radius: 99px;
  background: var(--inset, rgba(0,0,0,.035)); flex-shrink: 0;
}
.x4-prospects-pipeline-seg {
  cursor: pointer; display: flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 13px; border-radius: 99px; border: 0;
  font: inherit; font-size: 12.5px; font-weight: 620;
  color: var(--v2-text-2, #55595f); background: transparent; box-shadow: none;
}
.x4-prospects-pipeline-seg:hover { color: var(--v2-text, #16171a); }
.x4-prospects-pipeline-seg-actif,
.x4-prospects-pipeline-seg-actif:hover {
  color: var(--v2-accent, #7d640d);
  background: var(--accent-soft, rgba(245,213,71,.26));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.x4-prospects-pipeline-champs {
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px; border-radius: 99px; border: 0;
  font: inherit; font-size: 12.5px; color: var(--v2-text-2, #55595f);
  background: transparent; flex-shrink: 0;
}
.x4-prospects-pipeline-champs:hover { background: var(--inset, rgba(0,0,0,.035)); color: var(--v2-text, #16171a); }

/* ── Bande « Affaires ouvertes » ────────────────────────────────── */
.x4-prospects-pipeline-bande {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--r-md, 18px);
  background: var(--panel-2, rgba(255,255,255,.42));
  border: 1px solid var(--stroke-2, rgba(20,20,25,.05));
}
.x4-prospects-pipeline-bande-titre {
  font-size: 11px; font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76);
}
.x4-prospects-pipeline-bande-n { font-size: 13px; font-weight: 680; font-variant-numeric: tabular-nums; }
.x4-prospects-pipeline-sep-v { width: 1px; height: 18px; background: var(--stroke-2, rgba(20,20,25,.05)); }
.x4-prospects-pipeline-pilule {
  display: inline-flex; align-items: center; gap: 7px;
  height: 24px; padding: 0 11px; border-radius: 99px;
  font-size: 12px; font-weight: 620;
}
.x4-prospects-pipeline-pilule .x4-prospects-pipeline-point { background: currentcolor; }
.x4-prospects-pipeline-pilule-neg { background: var(--neg-soft, rgba(193,75,64,.11)); color: var(--neg-fg, #a74137); }
.x4-prospects-pipeline-pilule-acc { background: var(--accent-soft, rgba(245,213,71,.26)); color: var(--v2-accent, #7d640d); }
.x4-prospects-pipeline-point { width: 7px; height: 7px; border-radius: 99px; flex-shrink: 0; }
.x4-prospects-pipeline-bande-note { margin-left: auto; font-size: 12px; color: var(--v2-text-3, #6b6f76); }

/* ── Frise de chevrons ──────────────────────────────────────────────
   Joris (07/09, soir) : « je veux les flèches fond pastel — c'est la
   qualité des couleurs et de l'écriture qui n'était pas top ». Donc la
   forme reste ; ce qui change, c'est la finition : le fond pastel est
   OPAQUE (l'encre mêlée au panneau, plus un voile d'alpha sur le beige
   de la page, qui donnait des teintes boueuses), le nombre prend l'encre
   de son étape, le libellé passe à 12,5 / 620 dans --text, la jauge de
   3 px invisible est retirée, et l'étape ouverte garde son fond pastel
   (un cran plus soutenu) souligné d'un filet de 3 px dans son encre au
   lieu de l'aplat saturé à texte blanc. */
.x4-prospects-pipeline-frise-ligne { display: flex; align-items: stretch; gap: 12px; }
.x4-prospects-pipeline-frise { flex: 1 1 0%; min-width: 0; display: flex; align-items: stretch; gap: 3px; }

.x4-prospects-pipeline-chevron {
  cursor: pointer; flex: 1 1 0%; min-width: 0; border: 0; text-align: left;
  /* flex-start, pas center : le nombre s'aligne sur ceux des détours
     (« 8 Lapins »), au lieu de flotter au milieu de sa cellule. */
  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(--x4pp-encre, var(--info-fg, #3160b4)) 14%, var(--panel-solid, #fff));
  transition: background .16s;
}
.x4-prospects-pipeline-chevron:hover { background: color-mix(in srgb, var(--x4pp-encre, var(--info-fg, #3160b4)) 22%, var(--panel-solid, #fff)); }
.x4-prospects-pipeline-chevron-premier {
  padding-left: 18px;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
}
.x4-prospects-pipeline-chevron-milieu {
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%);
}
.x4-prospects-pipeline-chevron-dernier {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%);
}
.x4-prospects-pipeline-chevron-seul { padding-left: 18px; border-radius: var(--r-sm, 12px); }

.x4-prospects-pipeline-chevron-tete { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.x4-prospects-pipeline-chevron-n {
  font-size: 22px; font-weight: 680; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--x4pp-encre, var(--info-fg, #3160b4));
}
.x4-prospects-pipeline-chevron-l {
  min-width: 0; font-size: 12.5px; font-weight: 620; letter-spacing: -.005em;
  color: var(--v2-text, #16171a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.x4-prospects-pipeline-chevron-retard { font-size: 11px; font-weight: 550; color: var(--v2-text-2, #55595f); }

/* Étape ouverte : même pastel, un cran plus soutenu, et le filet bas de
   3 px dans l'encre qui la rattache au contenu qui suit. */
.x4-prospects-pipeline-chevron-ouvert,
.x4-prospects-pipeline-chevron-ouvert:hover {
  background: color-mix(in srgb, var(--x4pp-encre, var(--info-fg, #3160b4)) 26%, var(--panel-solid, #fff));
  box-shadow: inset 0 -3px 0 0 var(--x4pp-encre, var(--info-fg, #3160b4));
}
.x4-prospects-pipeline-chevron-ouvert .x4-prospects-pipeline-chevron-l { font-weight: 680; }
/* En sombre, l'encre d'étape (pensée pour le clair) s'éclaircit pour
   rester lisible sur le pastel sombre. */
[data-app-theme="dark"] .x4-prospects-pipeline-chevron-n { color: color-mix(in srgb, var(--x4pp-encre, var(--info-fg, #3160b4)) 55%, #fff); }

/* ── Les deux détours, hors frise ────────────────────────────────
   Un chevron dit « ensuite » ; ces deux-là disent « pas ici ». D'où le
   pointillé, le coin arrondi et l'absence d'encoche : rien dans leur
   forme ne pointe vers la droite (audit 02/09/2026, défauts 14 et 15).
   Le critère est écrit sous le libellé — sans lui, les deux se
   remplissent au hasard selon qui saisit. */
.x4-prospects-pipeline-detours { display: flex; gap: 8px; flex-shrink: 0; }
.x4-prospects-pipeline-detour {
  cursor: pointer; box-sizing: border-box; width: 152px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 12px 13px; border-radius: var(--r-sm, 12px); font: inherit; text-align: left;
  background: transparent; border: 1px dashed var(--stroke, rgba(20,20,25,.075));
  transition: background .16s;
}
.x4-prospects-pipeline-detour:hover { background: var(--inset, rgba(0,0,0,.035)); }
/* La case Lapins est jaune (Joris, 07/09 : « la case lapin, je la veux
   jaune ») : le même pastel opaque que les chevrons, dans l'ambre. */
.x4-prospects-pipeline-detour[data-x4pp-detour="st_lapin"] {
  background: color-mix(in srgb, var(--accent-bright, #f5d547) 22%, var(--panel-solid, #fff));
  border-color: color-mix(in srgb, var(--v2-accent, #7d640d) 45%, transparent);
}
.x4-prospects-pipeline-detour[data-x4pp-detour="st_lapin"]:hover {
  background: color-mix(in srgb, var(--accent-bright, #f5d547) 34%, var(--panel-solid, #fff));
}
.x4-prospects-pipeline-detour-n {
  font-size: 21px; font-weight: 680; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--x4pp-det, var(--v2-text-3, #6b6f76));
}
.x4-prospects-pipeline-detour-l {
  font-size: 11.5px; font-weight: 620;
  color: var(--x4pp-det, var(--v2-text-3, #6b6f76));
}
.x4-prospects-pipeline-detour-crit {
  font-size: 10px; font-weight: 550; line-height: 1.25;
  color: var(--v2-text-3, #6b6f76);
}
.x4-prospects-pipeline-detour-due { font-size: 10.5px; font-weight: 620; color: var(--neg-fg, #a74137); }
/* L'ancienneté du plus vieux lapin. Passé le seuil de 3 jours elle
   passe en --neg-fg : un lapin de neuf jours n'est plus un lapin, c'est
   un dossier perdu (décision Claude Design, 02/09/2026). Rien
   d'équivalent sur « En veille » : une veille ancienne est normale,
   elle attend une date. */
.x4-prospects-pipeline-detour-age {
  font-size: 10px; font-weight: 620;
  color: var(--v2-text-3, #6b6f76);
}
.x4-prospects-pipeline-detour-age[data-depasse] { color: var(--neg-fg, #a74137); }

/* ── Bandeau de l'étape ouverte ─────────────────────────────────── */
.x4-prospects-pipeline-bandeau {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 16px 13px; border-radius: var(--r-md, 18px);

  background: var(--x4pp-douce, color-mix(in srgb, var(--x4pp-encre) 11%, transparent));
  border-left: 3px solid var(--x4pp-encre, var(--info-fg, #3160b4));
}
/* line-height 1.2 : le titre mesure 20px de haut sur la maquette (17px
   × 1,18), le bandeau 45px — la ligne par défaut le faisait déborder à 48. */
.x4-prospects-pipeline-bandeau-titre { font-size: 17px; font-weight: 680; letter-spacing: -.025em; line-height: 1.2; }
.x4-prospects-pipeline-bandeau-desc { font-size: 12.5px; color: var(--v2-text-2, #55595f); min-width: 0; }
.x4-prospects-pipeline-bandeau-n {
  margin-left: auto; flex-shrink: 0;
  font-size: 12.5px; font-weight: 620; font-variant-numeric: tabular-nums;
  color: var(--v2-text-2, #55595f);
}

/* ── Cartes d'affaires ──────────────────────────────────────────── */
.x4-prospects-pipeline-cartes { display: flex; flex-direction: column; gap: 8px; }
/* Joris (09/09/2026) : « les fiches deviennent de la couleur de la colonne
   où je les mets » — la carte prend l'encre de son étape (héritée de
   l'enveloppe) : fond teinté à 16 %, filet d'encre 4 px à gauche, comme
   les blocs de l'agenda. Le lavis d'origine reste par-dessus. */
.x4-prospects-pipeline-carte {
  background: color-mix(in srgb, var(--x4pp-encre, var(--info-fg, #3160b4)) 16%, var(--panel-solid, #fff));
  background-image: linear-gradient(
    color-mix(in srgb, var(--x4pp-lave, transparent) 5%, transparent),
    color-mix(in srgb, var(--x4pp-lave, transparent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--x4pp-encre, var(--info-fg, #3160b4)) 30%, transparent);
  border-left: 4px solid var(--x4pp-encre, var(--info-fg, #3160b4));
  border-radius: var(--r-md, 18px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
  padding: 15px 18px 16px;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 210px;
  gap: 22px; align-items: start; cursor: pointer;
}
.x4-prospects-pipeline-carte-id { min-width: 0; }
.x4-prospects-pipeline-carte-source {
  font-size: 9.5px; font-weight: 680; letter-spacing: .1em;
  text-transform: uppercase; color: var(--x4pp-src, var(--v2-text-3, #6b6f76));
}
.x4-prospects-pipeline-carte-titre {
  margin-top: 5px; font-size: 17px; font-weight: 640;
  letter-spacing: -.03em; line-height: 1.15;
}
.x4-prospects-pipeline-carte-source + .x4-prospects-pipeline-carte-titre { margin-top: 5px; }
.x4-prospects-pipeline-carte-titre:first-child { margin-top: 0; }
.x4-prospects-pipeline-carte-sous { margin-top: 3px; font-size: 12.5px; color: var(--v2-text-3, #6b6f76); }
.x4-prospects-pipeline-carte-sans {
  margin-top: 9px; display: inline-flex; align-items: center; gap: 6px;
  height: 21px; padding: 0 10px; border-radius: 99px;
  font-size: 11px; font-weight: 640;
  color: var(--neg-fg, #a74137); background: var(--neg-soft, rgba(193,75,64,.11));
}

.x4-prospects-pipeline-carte-savoir { min-width: 0; }
.x4-prospects-pipeline-carte-savoir-t {
  font-size: 10px; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76);
}
.x4-prospects-pipeline-carte-note {
  /* Interligne mesuré : 17,3px par ligne (12,5px × 1,38), pas 1,5. */
  margin-top: 4px; font-size: 12.5px; line-height: 1.38;
  color: var(--v2-text-2, #55595f); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.x4-prospects-pipeline-carte-droite { display: flex; flex-direction: column; gap: 10px; }
.x4-prospects-pipeline-carte-suivi { display: flex; align-items: center; gap: 8px; }
.x4-prospects-pipeline-avatar {
  width: 24px; height: 24px; border-radius: 99px; flex-shrink: 0;
  background: var(--inset, rgba(0,0,0,.035)); color: var(--v2-text-2, #55595f);
  font-size: 10px; font-weight: 680; display: grid; place-items: center;
}
.x4-prospects-pipeline-carte-suivi-txt { font-size: 12px; color: var(--v2-text-3, #6b6f76); }

/* La pastille d'action tient sur deux lignes (Claude Design, 07/09) : le
   libellé entier en 13 / 550 --text, puis la date en clair en 11,5 / 620
   dans l'encre d'urgence — c'est la date qui rougit, pas l'action. */
.x4-prospects-pipeline-carte-action {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  padding: 9px 11px; border-radius: var(--r-sm, 12px); background: transparent;
}
.x4-prospects-pipeline-carte-action .x4-prospects-pipeline-point { background: var(--v2-text-3, #6b6f76); }
.x4-prospects-pipeline-carte-action-l {
  min-width: 0; flex: 1 1 auto; font-size: 13px; font-weight: 550; color: var(--v2-text, #16171a);
  white-space: normal; text-wrap: pretty;
}
.x4-prospects-pipeline-carte-action-d {
  flex-basis: 100%; padding-left: 15px;
  font-size: 11.5px; font-weight: 620; color: var(--v2-text-3, #6b6f76);
  font-variant-numeric: tabular-nums;
}
.x4-prospects-pipeline-carte-action-retard { background: var(--neg-soft, rgba(193,75,64,.11)); }
.x4-prospects-pipeline-carte-action-retard .x4-prospects-pipeline-point { background: var(--neg-fg, #a74137); }
.x4-prospects-pipeline-carte-action-retard .x4-prospects-pipeline-carte-action-d { color: var(--neg-fg, #a74137); }
.x4-prospects-pipeline-carte-action-vide .x4-prospects-pipeline-carte-action-l { color: var(--v2-text-3, #6b6f76); font-style: italic; }

.x4-prospects-pipeline-carte-gestes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.x4-prospects-pipeline-geste {
  cursor: pointer; height: 32px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--r-xs, 9px); border: 0; font: inherit;
  font-size: 12px; font-weight: 640;
}
.x4-prospects-pipeline-geste-pos { background: var(--pos, rgba(23,128,81,.15)); color: var(--pos-fg, #136d45); }
.x4-prospects-pipeline-geste-ligne {
  background: transparent; border: 1px solid var(--stroke, rgba(20,20,25,.075));
  /* La maquette encre ce bouton en ambre sombre (mesuré #9a5a12) : c'est
     l'encre accent, donc --v2-accent — jamais l'ambre aplat en texte. */
  color: var(--v2-accent, #7d640d);
}
.x4-prospects-pipeline-geste:hover { filter: brightness(.97); }
.x4-prospects-pipeline-geste:only-child { grid-column: 1 / -1; }

/* ── Sorties (stand-by) ─────────────────────────────────────────── */
.x4-prospects-pipeline-sorties {
  border-radius: var(--r-md, 18px);
  background: var(--panel-2, rgba(255,255,255,.42));
  border: 1px solid var(--stroke-2, rgba(20,20,25,.05));
  padding: 12px 14px 13px;
}
.x4-prospects-pipeline-sorties-tete { display: flex; align-items: baseline; gap: 9px; }
.x4-prospects-pipeline-sorties-titre {
  font-size: 11px; font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76);
}
.x4-prospects-pipeline-sorties-sous { font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-prospects-pipeline-sorties-note { margin-left: auto; font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-prospects-pipeline-sorties-grille {
  margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.x4-prospects-pipeline-mini {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 11px; border-radius: var(--r-sm, 12px);
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20,20,25,.075));
  cursor: pointer;
}
.x4-prospects-pipeline-mini-ini {
  width: 24px; height: 24px; border-radius: var(--r-xs, 9px); flex-shrink: 0;
  background: var(--inset, rgba(0,0,0,.035)); color: var(--v2-text-2, #55595f);
  font-size: 10px; font-weight: 680; display: grid; place-items: center;
}
.x4-prospects-pipeline-mini-corps { min-width: 0; flex: 1 1 0%; }
.x4-prospects-pipeline-mini-tete { display: flex; align-items: baseline; gap: 7px; }
.x4-prospects-pipeline-mini-nom {
  font-size: 12.5px; font-weight: 620;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.x4-prospects-pipeline-mini-badge {
  height: 18px; padding: 0 7px; border-radius: 99px;
  font-size: 10px; font-weight: 620; flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--v2-text-2, #55595f); background: var(--inset, rgba(0,0,0,.035));
}
.x4-prospects-pipeline-mini-badge-info { color: var(--info-fg, #3160b4); background: var(--info-soft, rgba(53,104,196,.11)); }
/* Variante « Perdu » de la maquette (mesurée : encre/fond négatifs) —
   prête pour le jour où une sortie sèche existera dans les données. */
.x4-prospects-pipeline-mini-badge-neg { color: var(--neg-fg, #a74137); background: var(--neg-soft, rgba(193,75,64,.11)); }
.x4-prospects-pipeline-mini-motif { margin-top: 2px; font-size: 11px; color: var(--v2-text-3, #6b6f76); line-height: 1.35; }
.x4-prospects-pipeline-mini-remonte { margin-top: 2px; font-size: 11px; font-weight: 620; color: var(--info-fg, #3160b4); }

/* ── États vides ────────────────────────────────────────────────── */
.x4-prospects-pipeline-vide {
  padding: 26px 22px; border-radius: var(--r-md, 18px);
  background: var(--panel, rgba(255,255,255,.66));
  border: 1px dashed var(--stroke, rgba(20,20,25,.075));
  font-size: 13px; color: var(--v2-text-2, #55595f); text-align: center;
}
.x4-prospects-pipeline-vide-plat {
  margin-top: 10px; padding: 14px; text-align: left;
  background: transparent; border-style: dashed;
}

/* Reclassement : le select d'étape sur chaque carte, et le groupe
   « À reclasser » des fiches dont l'ancienne colonne a disparu. */
.x4-prospects-pipeline-move {
  height: 28px; max-width: 170px; padding: 0 10px;
  border: 1px solid var(--stroke); border-radius: 99px;
  background: var(--panel-solid, #fff); color: var(--v2-text-2, #55595f);
  font-family: inherit; font-size: 11.5px; font-weight: 550; cursor: pointer;
}
.x4-prospects-pipeline-move:hover { border-color: var(--stroke-3, rgba(20, 20, 25, .17)); color: var(--v2-text, #16171a); }
/* La bascule : l'étape choisie n'est posée qu'avec le commentaire —
   ce qui s'est passé descend dans le fil avec le déplacement. */
.x4-prospects-pipeline-bascule {
  grid-column: 1 / -1; margin-top: 12px; padding: 12px 14px;
  border-radius: var(--r-sm, 12px); background: var(--inset, rgba(0, 0, 0, .035));
  display: flex; flex-direction: column; gap: 8px;
}
.x4-prospects-pipeline-bascule-t { font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-prospects-pipeline-bascule-t b { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-prospects-pipeline-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-prospects-pipeline-bascule-pied { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.x4-prospects-pipeline-bascule-recontact {
  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-prospects-pipeline-bascule-non, .x4-prospects-pipeline-bascule-ok {
  height: 30px; padding: 0 14px; border-radius: 99px; font-family: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer;
}
.x4-prospects-pipeline-bascule-non { border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); color: var(--v2-text-2, #55595f); }
.x4-prospects-pipeline-bascule-ok { border: 0; background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); }
/* L'accord oral (sous-état d'En attente) — très visible, c'est le mot
   de Joris : pastille pleine verte en tête de la colonne droite, filet
   vert sur la carte, compte vert dans le chevron. */
.x4-prospects-pipeline-carte.est-accord { box-shadow: inset 3px 0 0 0 var(--pos-fg, #136d45); }
.x4-prospects-pipeline-accord {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 14px;
  border-radius: 99px; background: var(--pos-fg, #136d45); color: #fff;
}
.x4-prospects-pipeline-accord-t { font-size: 13px; font-weight: 680; letter-spacing: -.01em; }
.x4-prospects-pipeline-accord-d { font-size: 11.5px; font-weight: 550; opacity: .85; font-variant-numeric: tabular-nums; }
.x4-prospects-pipeline-accord-x {
  margin-left: auto; width: 22px; height: 22px; border-radius: 99px; border: 0;
  background: rgba(255, 255, 255, .18); color: #fff; font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
.x4-prospects-pipeline-accord-x:hover { background: rgba(255, 255, 255, .32); }
.x4-prospects-pipeline-accord-btn { align-self: flex-start; }
/* Le décompte de mise à disposition : trois semaines depuis l'accord
   oral. Calme en gris, ambre à une semaine, rouge une fois dépassé. */
.x4-prospects-pipeline-dispo {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 5px 10px;
  border-radius: var(--r-xs, 9px); background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text-2, #55595f);
  font-size: 12px; font-weight: 550; line-height: 1.2;
}
.x4-prospects-pipeline-dispo b { flex: none; white-space: nowrap; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--v2-text, #16171a); }
.x4-prospects-pipeline-dispo[data-ton="warn"] { background: var(--warn-soft, rgba(224, 138, 46, .12)); color: var(--warn-fg, #8a5510); }
.x4-prospects-pipeline-dispo[data-ton="warn"] b { color: var(--warn-fg, #8a5510); }
.x4-prospects-pipeline-dispo[data-ton="neg"] { background: var(--neg-soft, rgba(193, 75, 64, .11)); color: var(--neg-fg, #a74137); font-weight: 620; }
.x4-prospects-pipeline-dispo[data-ton="neg"] b { color: var(--neg-fg, #a74137); }
.x4-prospects-pipeline-bascule-ok-pos { background: var(--pos-fg, #136d45); color: #fff; }
.x4-prospects-pipeline-chevron-accord { font-size: 11px; font-weight: 620; color: var(--pos-fg, #136d45); }
/* Le genre d'attente (21/09/2026) : réponse imminente, ou ils nous relanceront. */
.x4-prospects-pipeline-chevron-imminent { font-size: 11px; font-weight: 620; color: var(--warn-fg, #9a5a12); }
.x4-prospects-pipeline-attente { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.x4-prospects-pipeline-attente-btn { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 99px; border: 1px dashed var(--stroke-3, rgba(20, 20, 25, .17)); background: transparent; font: inherit; font-size: 11.5px; font-weight: 620; color: var(--v2-text-3, #6b6f76); cursor: pointer; }
.x4-prospects-pipeline-attente-btn:hover { border-style: solid; color: var(--v2-text, #16171a); }
.x4-prospects-pipeline-attente-btn.est-reponse.actif { border-style: solid; border-color: var(--warn-fg, #9a5a12); background: var(--warn-soft, rgba(154, 90, 18, .12)); color: var(--warn-fg, #9a5a12); }
.x4-prospects-pipeline-attente-btn.est-relance.actif { border-style: solid; border-color: var(--v2-text-3, #6b6f76); background: var(--inset, rgba(0, 0, 0, .05)); color: var(--v2-text, #16171a); }
.x4-prospects-pipeline-carte.est-imminente { box-shadow: inset 3px 0 0 0 var(--warn-fg, #9a5a12); }
.x4-prospects-pipeline-bascule-genre { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--v2-text-2, #55595f); }
.x4-prospects-pipeline-bascule-genre span { font-size: 11px; font-weight: 620; color: var(--v2-text-3, #6b6f76); }
.x4-prospects-pipeline-bascule-genre label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.x4-depot-genre { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 12.5px; }
.x4-depot-genre > span { font-size: 11px; font-weight: 620; letter-spacing: .04em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-depot-genre label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 1.4; }
.x4-depot-genre input { margin-top: 3px; }
/* « Déplacer › » et ses destinations en pastilles (Joris, 07/09 : « plus
   joli, plus centré, pas juste une liste »). */
.x4-prospects-pipeline-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-prospects-pipeline-deplacer:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-prospects-pipeline-bascule-dest .x4-prospects-pipeline-bascule-t { text-align: center; font-size: 13px; }
.x4-prospects-pipeline-dests { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 2px 0 4px; }
.x4-prospects-pipeline-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-prospects-pipeline-dest i { width: 9px; height: 9px; border-radius: 99px; background: var(--x4pp-dest, var(--v2-text-3)); }
.x4-prospects-pipeline-dest:hover { border-color: var(--x4pp-dest, var(--stroke-3)); background: color-mix(in srgb, var(--x4pp-dest, #000) 8%, var(--panel-solid, #fff)); }
.x4-prospects-pipeline-dest.est-choisi { background: var(--x4pp-dest, var(--v2-text)); border-color: var(--x4pp-dest, var(--v2-text)); color: #fff; }
.x4-prospects-pipeline-dest.est-choisi i { background: rgba(255, 255, 255, .7); }
.x4-prospects-pipeline-dest.est-ici { opacity: .45; cursor: default; }
/* La bulle de l'étape ouverte (Joris, 07/09) : un panneau dans le pastel
   opaque de l'étape qui englobe ses cartes, avec son nom dans son encre
   en tête — on sait toujours dans quelle colonne on est. */
.x4-prospects-pipeline-enveloppe {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: var(--r-lg, 22px);
  background: color-mix(in srgb, var(--x4pp-encre, #3160b4) 9%, var(--panel-solid, #fff));
  border: 1px solid color-mix(in srgb, var(--x4pp-encre, #3160b4) 22%, transparent);
}
.x4-prospects-pipeline-env-tete { display: flex; align-items: baseline; gap: 10px; padding: 2px 6px 0; }
.x4-prospects-pipeline-env-point { align-self: center; width: 10px; height: 10px; border-radius: 99px; background: var(--x4pp-encre, #3160b4); }
.x4-prospects-pipeline-env-titre { font-size: 17px; font-weight: 680; letter-spacing: -.025em; color: var(--x4pp-encre, #3160b4); }
.x4-prospects-pipeline-env-n { font-size: 12.5px; font-weight: 550; color: var(--v2-text-2, #55595f); }
.x4-prospects-pipeline-env-desc { margin-left: auto; font-size: 13px; color: var(--v2-text-2, #55595f); }
[data-app-theme="dark"] .x4-prospects-pipeline-env-titre { color: color-mix(in srgb, var(--x4pp-encre, #3160b4) 55%, #fff); }
.x4-prospects-pipeline-chevron-hors {
  border: 1.5px dashed var(--stroke) !important;
  background: var(--inset, rgba(20, 20, 25, .035)) !important;
}
/* Ouvert, un chevron prend un fond plein et son texte passe en
   --on-tone. « À reclasser » force son fond en --inset : le texte doit
   donc suivre le fond réel, pas le fond supposé. Sans cette règle, il
   était blanc sur clair et noir sur sombre — illisible des deux côtés. */
.x4-prospects-pipeline-chevron-hors.x4-prospects-pipeline-chevron-ouvert .x4-prospects-pipeline-chevron-n,
.x4-prospects-pipeline-chevron-hors.x4-prospects-pipeline-chevron-ouvert .x4-prospects-pipeline-chevron-l {
  color: var(--v2-text, #16171a);
}


/* Étape « Lapin » : graisse 620 et encre ambre foncée mesurées sur la
   maquette — c'est un détour, pas une étape de progression. */
.x4-prospects-pipeline-chevron[data-x4pp-etape="st_lapin"] .x4-prospects-pipeline-chevron-l {
  font-weight: 620; color: var(--warn-fg, #9a5a12);
}

/* ─── Constater le rendez-vous, sortir du détour ────────────────────
   Deux blocs de même forme, à deux moments : « le rendez-vous est
   passé, a-t-il eu lieu ? » sur une qualif échue, et « on repose ou on
   écarte ? » sur un lapin. Sans eux, le détour Lapin ne se remplit
   jamais et ne se vide jamais (LOT-DESIGN, 02/09/2026). */
.x4-prospects-pipeline-carte-constat {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}
.x4-prospects-pipeline-carte-constat-q {
  font-size: 11.5px; font-weight: 620; color: var(--v2-text-2, #55595f);
}
.x4-prospects-pipeline-carte-2e {
  padding: 2px 9px; border-radius: 99px;
  background: var(--neg-soft, rgba(193, 75, 64, .11));
  color: var(--neg-fg, #a74137);
  font-size: 11px; font-weight: 640;
}
.x4-prospects-pipeline-constat {
  padding: 5px 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: 11.5px; font-weight: 640; cursor: pointer;
}
.x4-prospects-pipeline-constat:hover { border-color: var(--v2-text-3, #6b6f76); }
.x4-prospects-pipeline-constat-oui { color: var(--pos-fg, #136d45); }
.x4-prospects-pipeline-constat-non { color: var(--warn-fg, #8a5510); }
/* Un seul aplat par bloc : « Nouveau créneau » est l'action attendue. */
.x4-prospects-pipeline-constat-ambre {
  border-color: transparent;
  background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12);
}
.x4-prospects-pipeline-constat-ecart {
  border: 0; background: none; padding-left: 4px;
  color: var(--v2-text-3, #6b6f76); font-weight: 620;
}
.x4-prospects-pipeline-constat-ecart:hover { color: var(--neg-fg, #a74137); }

/* ─── Le bac « À reclasser » ─────────────────────────────────────────
   Il était le premier chevron de la frise, avec le plus gros nombre de
   l'écran : le parcours semblait commencer par un rattrapage. Il prend
   la forme des détours — pointillé, coins arrondis, pas d'encoche —
   mais reste à gauche : un détour sort de la frise, ce bac s'y déverse
   (audit du 02/09/2026). */
.x4-prospects-pipeline-bac {
  cursor: pointer; box-sizing: border-box; width: 152px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 12px 13px; border-radius: var(--r-sm, 12px); font: inherit; text-align: left;
  background: transparent; border: 1px dashed var(--stroke, rgba(20, 20, 25, .075));
  transition: background .16s;
}
/* 16 px de blanc : sans écart, le bac se lisait comme le premier
   maillon de la séquence. */
.x4-prospects-pipeline-bac { margin-right: 16px; }
.x4-prospects-pipeline-bac:hover,
.x4-prospects-pipeline-bac-ouvert { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-prospects-pipeline-bac-n {
  font-size: 17px; font-weight: 680; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--v2-text, #16171a);
}
.x4-prospects-pipeline-bac-l {
  font-size: 11.5px; font-weight: 620; color: var(--v2-text, #16171a);
}
.x4-prospects-pipeline-bac-crit {
  font-size: 10px; font-weight: 550; line-height: 1.25;
  color: var(--v2-text-3, #6b6f76);
}
/* Un état vide se dit, il ne s'écrit pas « — ». */
.x4-prospects-pipeline-carte-note-vide {
  color: var(--v2-text-3, #6b6f76); font-style: italic;
}

/* L'apporteur, sur la ligne du contact — pas dans l'emplacement du
   canal (décision 02/09/2026). */
.x4-prospects-pipeline-carte-apport {
  margin-left: 8px; padding: 1px 7px; border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .035));
  color: var(--v2-text-3, #6b6f76);
  font-size: 10.5px; font-weight: 620;
}

/* Le canal manquant : dit en encre tertiaire, cliquable pour le
   renseigner. Deviner un canal pour deux tiers du pipeline serait
   fabriquer de la donnée (décision 02/09/2026). */
.x4-prospects-pipeline-carte-source-vide {
  border: 0; background: none; padding: 0;

  font: inherit; font-weight: 550; text-transform: none; letter-spacing: 0;
  cursor: pointer;
}
.x4-prospects-pipeline-carte-source-vide:hover { opacity: 1; }

/* La pilule des leads : elle annonce du travail et y conduit. */
.x4-prospects-pipeline-pilule-lien {
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-solid, #fff);
  color: var(--v2-text, #16171a);
  font: inherit; font-size: 11.5px; font-weight: 620;
  cursor: pointer;
}
.x4-prospects-pipeline-pilule-lien:hover { border-color: var(--v2-accent, #7d640d); }

/* La pilule du diagnostic : au-delà de la moitié du pipeline, elle
   passe en ambre et porte le pourcentage. Elle filtre au clic. */
.x4-prospects-pipeline-pilule-grave {
  background: var(--warn-soft, rgba(224, 138, 46, .12));
  color: var(--warn-fg, #8a5510);
}
.x4-prospects-pipeline-pilule-grave .x4-prospects-pipeline-point { background: currentColor; }
.x4-prospects-pipeline-pilule[data-x4pp-filtre] { border: 0; font: inherit; cursor: pointer; }
.x4-prospects-pipeline-pilule[data-on] {
  outline: 2px solid var(--v2-accent, #7d640d); outline-offset: 1px;
}

/* « origine à renseigner » : un élément qui porte un geste doit le
   montrer — chevron, souligné pointillé, encre lisible (audit du
   02/09/2026, règle n° 2 retournée). */
.x4-prospects-pipeline-carte-source-vide {
  color: var(--v2-text-2, #55595f);
  border-bottom: 1px dashed var(--stroke-2, rgba(20, 20, 25, .18));
  opacity: 1;
}

.x4-prospects-pipeline-carte-source-vide:hover {
  color: var(--v2-accent, #7d640d);
  border-bottom-color: currentColor;
  text-decoration: none;
}

/* Le reclassement est visible (« Déplacer vers… ») : Joris ne trouvait
   pas le ⋯ (07/09/2026). */
.x4-prospects-pipeline-menu { display: inline-flex; align-items: center; gap: 6px; }

/* Le bandeau des seuils dépassés est un bouton : il filtre le pipeline
   sur les affaires qu'il compte. */
.x4-prospects-pipeline-bande-note[data-x4pp-filtre] {
  border: 0; background: none; padding: 0;
  font: inherit; cursor: pointer;
}
.x4-prospects-pipeline-bande-note[data-x4pp-filtre]:hover { color: var(--v2-text, #16171a); text-decoration: underline; }
.x4-prospects-pipeline-bande-note[data-on] {
  color: var(--v2-accent, #7d640d); font-weight: 640; text-decoration: underline;
}

/* ─── Les écartées : une ligne, pas une bulle (Joris 04/09 ; Claude Design
   07/09). Qui · quand · pourquoi — le motif est la colonne la plus large.
   Seules les affaires à revoir prennent l'accent : c'est celles-là qui
   appellent une action. ─────────────────────────────────────────────── */
.x4-prospects-pipeline-ecartees {
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-md, 18px); overflow: hidden;
}
.x4-prospects-pipeline-ecartee {
  display: grid; grid-template-columns: 34px minmax(200px, 1.2fr) 110px minmax(240px, 1.6fr) 160px;
  gap: 14px; align-items: center; padding: 10px 16px;
  border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); cursor: pointer;
}
.x4-prospects-pipeline-ecartees.est-sans-suite .x4-prospects-pipeline-ecartee {
  grid-template-columns: 34px minmax(200px, 1.2fr) 110px minmax(240px, 1fr);
}
.x4-prospects-pipeline-ecartee:last-child { border-bottom: 0; }
.x4-prospects-pipeline-ecartee:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-prospects-pipeline-ecartee-ini {
  width: 26px; height: 26px; border-radius: 99px; 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: 10px; font-weight: 680;
}
.x4-prospects-pipeline-ecartee-nom { min-width: 0; font-size: 13px; font-weight: 620; color: var(--v2-text, #16171a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-prospects-pipeline-ecartee-nom i { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); margin-left: 8px; }
.x4-prospects-pipeline-ecartee-date { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--v2-text-3, #6b6f76); }
.x4-prospects-pipeline-ecartee-motif { min-width: 0; font-size: 12.5px; color: var(--v2-text-2, #55595f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-prospects-pipeline-ecartee-motif.est-vide { color: var(--v2-text-3, #6b6f76); font-style: italic; }
.x4-prospects-pipeline-ecartee-suite {
  justify-self: end; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text-3, #6b6f76); font-size: 11.5px; font-weight: 620; white-space: nowrap;
}
.x4-prospects-pipeline-ecartee-suite.est-revoir { background: var(--accent-soft, rgba(245, 213, 71, .26)); color: var(--v2-accent, #7d640d); }
.x4-prospects-pipeline-ecartee-suite.est-rien { display: none; }

/* « + Nouvelle fiche » (09/09/2026) : le bouton plein, en ambre. */
.x4-prospects-pipeline-champs.est-ambre { background: var(--accent-bright, #f5d547); border-color: transparent; color: var(--sur-accent, #1b1a12); font-weight: 640; margin-left: 8px; }
.x4-prospects-pipeline-champs.est-ambre:hover { filter: brightness(.97); color: var(--sur-accent, #1b1a12); }

/* La date de la bascule (09/09/2026) : rappel pour En attente, rendez-vous
   pour Qualif et Visio. */
.x4-prospects-pipeline-bascule-date { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-prospects-pipeline-bascule-date span { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-prospects-pipeline-bascule-date input { padding: 6px 10px; 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: inherit; font-size: 13px; }

[data-app-theme="dark"] .x4-prospects-pipeline-carte { background-color: color-mix(in srgb, var(--x4pp-encre, var(--info-fg, #3160b4)) 26%, var(--panel-solid, #1b1c20)); }

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

.x4-prospects-pipeline-ecartee-suite.est-definitif { color: var(--v2-text-3, #6b6f76); font-weight: 550; }

/* Qualif / Visio (11/09/2026) : rendez-vous daté à l'heure, ou alerte « à trier » */
.x4-prospects-pipeline-carte-action-rdv { background: var(--accent-soft, rgba(245, 213, 71, .26)); }
.x4-prospects-pipeline-carte-action-rdv .x4-prospects-pipeline-point { background: var(--v2-accent, #7d640d); }
.x4-prospects-pipeline-carte-action-rdv .x4-prospects-pipeline-carte-action-d { font-size: 12.5px; font-weight: 680; color: #16171a; }
.x4-prospects-pipeline-carte-action-trier { background: var(--neg-soft, rgba(193, 75, 64, .11)); }
.x4-prospects-pipeline-carte-action-trier .x4-prospects-pipeline-point { background: var(--neg-fg, #b3261e); }
.x4-prospects-pipeline-carte-action-trier .x4-prospects-pipeline-carte-action-l { color: var(--neg-fg, #b3261e); font-weight: 680; }

/* Faite / Lapin sur l'alerte « À trier » (Nadia, 11/09/2026) : deux mini-
   boutons sur la même ligne, le lapin en rouge. */
.x4-prospects-pipeline-carte-issue { display: inline-flex; gap: 6px; flex-basis: 100%; margin-top: 5px; }
.x4-prospects-pipeline-carte-issue [role="button"] { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .12)); background: var(--panel-solid, #fff); font-size: 11px; font-weight: 640; color: var(--v2-text, #16171a); cursor: pointer; white-space: nowrap; }
.x4-prospects-pipeline-carte-issue [role="button"]:hover { border-color: var(--v2-text-3, #6b6f76); }
.x4-prospects-pipeline-carte-issue [role="button"].est-neg { color: var(--neg-fg, #b3261e); border-color: rgba(179, 38, 30, .35); }
.x4-prospects-pipeline-carte-issue [role="button"][data-en-cours] { opacity: .5; cursor: default; }

/* « Plaquette à faire » (14/09/2026) : sur la carte en Visio & tarifs, tant que
   la plaquette de présentation n'est pas générée avant la visio. */
.x4-prospects-pipeline-carte-plq { display: inline-flex; flex-basis: 100%; margin-top: 5px; }
.x4-prospects-pipeline-carte-plq [role="button"] { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--warn-fg, #9a6a00); background: var(--warn-soft, rgba(245, 213, 71, .22)); font-size: 11px; font-weight: 640; color: var(--warn-fg, #7a5400); cursor: pointer; white-space: nowrap; }
.x4-prospects-pipeline-carte-plq [role="button"]::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.x4-prospects-pipeline-carte-plq [role="button"]:hover { background: var(--accent-bright, #f5d547); color: #16171a; }
/* Visio passée sans récap (14/09/2026) : la carte ressort en ambre — pas en
   rouge, « rouge, c'est comme si c'était annulé » (Joris) — avec le bouton
   au milieu et un point qui bat. */
.x4-prospects-pipeline-carte.est-a-traiter { border-color: var(--warn-fg, #9a6a00); box-shadow: 0 0 0 1px var(--warn-fg, #9a6a00), 0 10px 26px -14px rgba(154, 106, 0, .6); background: var(--warn-soft, rgba(245, 213, 71, .18)); }
.x4-prospects-pipeline-carte-action-recap { background: var(--accent-bright, #f5d547); }
.x4-prospects-pipeline-carte-action-recap .x4-prospects-pipeline-point { background: var(--warn-fg, #9a6a00); animation: x4pp-bat 1.3s ease-in-out infinite; }
.x4-prospects-pipeline-carte-action-recap .x4-prospects-pipeline-carte-action-l { color: #3d2c00; font-weight: 680; }
.x4-prospects-pipeline-carte-action-recap .x4-prospects-pipeline-carte-action-d { color: #5a4300; }
.x4-prospects-pipeline-carte-recap { display: block; flex-basis: 100%; margin: 8px auto 2px; padding: 8px 14px; border-radius: 99px; background: #16171a; color: #fff; font-size: 12.5px; font-weight: 640; text-align: center; cursor: pointer; }
.x4-prospects-pipeline-carte-recap:hover { background: #2a2b30; }
@keyframes x4pp-bat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }

/* L'invité a annulé ou demandé un autre créneau (15/09/2026) : en rouge, avec « Reprogrammer » */
.x4-prospects-pipeline-carte-action-annulee { background: var(--neg-soft, rgba(193, 75, 64, .11)); }
.x4-prospects-pipeline-carte-action-annulee .x4-prospects-pipeline-point { background: var(--neg-fg, #a74137); }
.x4-prospects-pipeline-carte-action-annulee .x4-prospects-pipeline-carte-action-l { color: var(--neg-fg, #a74137); font-weight: 680; }
.x4-prospects-pipeline-carte-action-annulee .x4-prospects-pipeline-carte-action-d { color: var(--neg-fg, #a74137); }