/* Poste d'appel — un contact à la fois, zéro friction. */
.x4-appel { min-width: 0; padding: 4px 0 40px; }
.x4-appel-tete { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.x4-appel-retour { border: 0; background: none; cursor: pointer; font-size: 12.5px; color: var(--v2-text-3, #6b6f76); padding: 4px 6px; }
.x4-appel-retour:hover { color: var(--v2-text, #1a1a1a); }
.x4-appel-tete-t { font-size: 15px; font-weight: 640; color: var(--v2-text, #1a1a1a); }
.x4-appel-tete-n { font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-poste {
  display: grid; grid-template-columns: 380px 1fr; gap: 14px; align-items: start;
  max-width: 1100px;
}
.x4-appel-contact, .x4-appel-issues {
  background: var(--panel-solid, #fff); border: 1px solid var(--stroke);
  border-radius: var(--r-sm, 12px); padding: 20px;
  box-shadow: 0 1px 2px rgba(20, 20, 25, .04);
}
.x4-appel-badge {
  display: inline-flex; font-size: 10.5px; font-weight: 640; padding: 2px 9px;
  border-radius: 99px; background: var(--inset, rgba(20, 20, 25, .05)); color: var(--v2-text-3, #6b6f76);
  margin-bottom: 10px;
}
.x4-appel-badge-neuf { background: var(--accent-soft); color: var(--v2-accent, #7d640d); }
.x4-appel-badge-rappel { background: var(--info-soft, rgba(59, 130, 246, .13)); color: var(--info-fg, #3160b4); }
.x4-appel-societe { font-size: 22px; font-weight: 680; letter-spacing: -.02em; color: var(--v2-text, #1a1a1a); }
.x4-appel-sous { font-size: 12.5px; color: var(--v2-text-3, #6b6f76); margin: 4px 0 16px; }
.x4-appel-tel {
  display: block; font-size: 30px; font-weight: 680; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: var(--v2-accent, #7d640d);
  text-decoration: none; margin-bottom: 14px;
}
.x4-appel-tel:hover { text-decoration: underline; }
.x4-appel-fiche {
  border: 1px solid var(--stroke); background: none; border-radius: 99px;
  height: 30px; padding: 0 14px; font-size: 12px; cursor: pointer;
  color: var(--v2-text-3, #6b6f76);
}
.x4-appel-fiche:hover { color: var(--v2-text, #1a1a1a); border-color: var(--accent-bright); }
.x4-appel-etage-t { font-size: 11px; font-weight: 640; letter-spacing: .07em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); margin-bottom: 10px; }
.x4-appel-etage { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.x4-appel-btn {
  height: 40px; padding: 0 16px; border-radius: var(--r-sm, 12px);
  border: 1px solid var(--stroke); background: var(--panel-solid, #fff);
  font-size: 13px; font-weight: 620; color: var(--v2-text, #1a1a1a); cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 20, 25, .05);
}
.x4-appel-btn:hover { border-color: var(--accent-bright); }
.x4-appel-btn:disabled { opacity: .5; cursor: default; }
.x4-appel-btn-joint { background: var(--accent-bright, #f5d547); border-color: var(--accent-bright); color: var(--sur-accent, #1b1a12); font-weight: 680; }
.x4-appel-btn-rdv { background: var(--pos-soft, rgba(19, 109, 69, .12)); border-color: transparent; color: var(--pos-fg, #136d45); }
.x4-appel-btn-non { color: var(--neg-fg, #a74137); }
.x4-appel-btn-mauvais { color: var(--v2-text-3, #6b6f76); }
.x4-appel-etage2 { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.x4-appel-etage2[hidden] { display: none; }
.x4-appel-rappel { display: inline-flex; align-items: center; gap: 8px; }
.x4-appel-date { height: 40px; border: 1px solid var(--stroke); border-radius: var(--r-sm, 12px); padding: 0 10px; background: var(--panel-solid, #fff); color: var(--v2-text, #1a1a1a); }
.x4-appel-date[hidden] { display: none; }
.x4-appel-histo { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.x4-appel-histo-t { font-size: 11px; font-weight: 640; letter-spacing: .07em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); margin-bottom: 8px; }
.x4-appel-histo-l { font-size: 12px; color: var(--v2-text, #1a1a1a); padding: 3px 0; }
.x4-appel-histo-vide { color: var(--v2-text-3, #6b6f76); }
.x4-appel-fin {
  max-width: 520px; margin: 60px auto; text-align: center;
  background: var(--panel-solid, #fff); border: 1px solid var(--stroke);
  border-radius: var(--r-md, 18px); padding: 34px 30px;
}
.x4-appel-fin-t { font-size: 17px; font-weight: 680; color: var(--v2-text, #1a1a1a); margin-bottom: 8px; }
.x4-appel-fin-s { font-size: 12.5px; line-height: 1.55; color: var(--v2-text-3, #6b6f76); margin-bottom: 18px; }
@media (max-width: 1000px) { .x4-appel-poste { grid-template-columns: 1fr; } }

/* Le plafond de tentatives, annoncé avant le geste qui le franchit
   (PROSPECTS.md §3d ; audit Claude Design du 02/09/2026). */
.x4-appel-badge-dernier {
  background: var(--warn-soft, rgba(224, 138, 46, .14));
  color: var(--warn-fg, #8a5510);
}
.x4-appel-plafond {
  margin-bottom: 10px; padding: 8px 11px;
  border-left: 2px solid var(--warn-fg, #8a5510);
  border-radius: var(--r-xs, 7px);
  background: var(--warn-soft, rgba(224, 138, 46, .1));
  color: var(--v2-text-2, #55595f);
  font-size: 12px; line-height: 1.35;
}

/* « Ne s'est pas présenté » : le second chemin vers le détour Lapin,
   celui du prospect qui décroche et l'explique. Teinte d'alerte, pas
   de refus — l'affaire continue (décision du 02/09/2026). */
.x4-appel-btn-lapin { color: var(--v2-accent, #7d640d); }
.x4-appel-btn-lapin:hover { border-color: var(--v2-accent, #7d640d); }


/* ─── La station, relevée sur la maquette de Claude Design ───────────
   Une grande carte à gauche, un rail d'accompagnement à droite. La
   personne d'abord, la société ensuite : on appelle quelqu'un, pas une
   entreprise. Chaque issue dit sa conséquence. Et quatre champs à
   remplir PENDANT l'appel — « jamais arriver à l'entretien en sachant
   tout ». Relevé le 03/09/2026. */
.x4-appel-campagne {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 14px; margin-bottom: 12px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px);
}
.x4-appel-camp-retour {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 15px; color: var(--v2-text-3, #6b6f76);
}
.x4-appel-camp-k {
  font-size: 10px; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76);
}
.x4-appel-camp-n { font-size: 13px; font-weight: 680; color: var(--v2-text, #16171a); }
.x4-appel-camp-p {
  margin-left: auto; font-size: 12.5px; font-weight: 640;
  font-variant-numeric: tabular-nums; color: var(--v2-text, #16171a);
}
.x4-appel-camp-t { font-size: 12px; color: var(--v2-text-3, #6b6f76); }

.x4-appel-corps {
  display: grid; grid-template-columns: minmax(0, 1fr) 236px;
  gap: 14px; align-items: start; max-width: 1384px;
}
.x4-appel-carte {
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-md, 18px); padding: 18px 20px 20px;
  box-shadow: 0 1px 2px rgba(20, 20, 25, .04);
}
.x4-appel-source { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.x4-appel-source-b {
  font-size: 11px; font-weight: 640; color: var(--v2-text-2, #55595f);
}
.x4-appel-source-t { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }

.x4-appel-qui { display: flex; align-items: center; gap: 12px; }
.x4-appel-ini {
  flex: none; width: 38px; height: 38px; 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: 12.5px; font-weight: 680;
}
.x4-appel-nom {
  font-size: 21px; font-weight: 680; letter-spacing: -.02em;
  color: var(--v2-text, #16171a); line-height: 1.15;
}
.x4-appel-soc { font-size: 13px; font-weight: 550; color: var(--v2-text-2, #55595f); }
.x4-appel-poste { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }

.x4-appel-ligne-tel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 16px 0 10px;
}
.x4-appel-ligne-tel .x4-appel-tel {
  display: inline-block; margin: 0;
  font-size: 27px; font-weight: 680; letter-spacing: .01em;
}
.x4-appel-appeler {
  padding: 9px 20px; border-radius: 99px; text-decoration: none;
  background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12);
  font-size: 13px; font-weight: 640; white-space: nowrap;
}
.x4-appel-appeler:hover { filter: brightness(.96); }
.x4-appel-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.x4-appel-puce {
  padding: 3px 9px; border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .035));
  font-size: 11.5px; color: var(--v2-text-2, #55595f);
}
.x4-appel-puce-lien {
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-solid, #fff); cursor: pointer;
  font-family: inherit; font-weight: 620; color: var(--v2-text, #16171a);
}

.x4-appel-sect {
  display: flex; align-items: baseline; gap: 12px;
  margin: 22px 0 10px; padding-top: 16px;
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}
.x4-appel-sect-t {
  font-size: 10.5px; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76);
}
/* Le titre de la qualification n'est pas une étiquette parmi d'autres :
   c'est la consigne du moment. Il se lit comme telle. */
.x4-appel-sect-q .x4-appel-sect-t {
  font-size: 12px; letter-spacing: .04em; color: var(--v2-text, #16171a);
}
.x4-appel-sect-note {
  margin-left: auto; font-size: 11.5px; color: var(--v2-text-3, #6b6f76);
}

/* Ces quatre champs se remplissent EN PARLANT, sans regarder l'écran
   plus d'une seconde. Ils étaient des rectangles gris sans bordure : on
   ne voyait pas où écrire. Ils prennent donc un fond clair, un cadre
   net, de la hauteur, et un focus qu'on repère du coin de l'œil.
   Signalé par Joris le 04/09/2026 : « ce n'est pas assez visible ». */
.x4-appel-q {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px; border-radius: var(--r-sm, 12px);
  background: var(--accent-soft, rgba(245, 213, 71, .16));
  border: 1px solid var(--accent-bright, #f5d547);
}
.x4-appel-q-large { grid-column: 1 / -1; }
.x4-appel-q-champ {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 9px 12px 10px; border-radius: var(--r-xs, 9px);
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke-3, rgba(20, 20, 25, .17));
}
.x4-appel-q-l {
  font-size: 10px; font-weight: 640; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v2-text-2, #55595f);
}
.x4-appel-q-champ input {
  border: 0; background: none; padding: 0; width: 100%;
  font-family: inherit; font-size: 15px; font-weight: 550; line-height: 1.35;
  color: var(--v2-text, #16171a);
}
.x4-appel-q-champ input::placeholder { color: var(--v2-text-3, #6b6f76); opacity: .75; }
.x4-appel-q-champ input:focus { outline: none; }
/* Le cadre du champ actif est franc : en pleine conversation, on doit
   savoir où l'on tape sans quitter son interlocuteur. */
.x4-appel-q-champ:focus-within {
  border-color: var(--v2-accent, #7d640d);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(245, 213, 71, .16));
}
/* Le besoin est le champ qui compte : il remonte sur la carte de
   l'affaire, et c'est lui qu'on relira dans six semaines. */
.x4-appel-q-large input { font-size: 16px; }
.x4-appel-q-large { padding-bottom: 12px; }

.x4-appel-tuiles {
  /* Les six issues tiennent sur UNE ligne, comme sur la maquette : un
     résultat d'appel se choisit d'un coup d'œil, pas en cherchant sur
     deux rangs. 118 px suffisent pour « Mauvais numéro ». */
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
.x4-appel-tuile {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 8px; border-radius: var(--r-sm, 12px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-solid, #fff);
  font-family: inherit; cursor: pointer; text-align: center;
}
.x4-appel-tuile:hover { border-color: var(--v2-text-3, #6b6f76); }
.x4-appel-tuile-l { font-size: 12.5px; font-weight: 640; color: var(--v2-text, #16171a); }
.x4-appel-tuile-s { font-size: 10.5px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-tuile.est-neg .x4-appel-tuile-s { color: var(--neg-fg, #a74137); }
.x4-appel-tuile-eu {
  background: var(--pos-soft, rgba(19, 109, 69, .1));
  border-color: var(--pos-fg, #136d45);
}
.x4-appel-tuile-eu .x4-appel-tuile-l { color: var(--pos-fg, #136d45); }
.x4-appel-tuile-eu .x4-appel-tuile-s { color: var(--pos-fg, #136d45); opacity: .8; }
.x4-appel-tuile.est-rdv { border-color: var(--v2-accent, #7d640d); }
.x4-appel-tuile-date { justify-content: center; }
.x4-appel-tuile-date .x4-appel-tuile-l {
  border: 0; background: none; cursor: pointer; font-family: inherit;
}
.x4-appel-etage2 { margin-top: 2px; }
.x4-appel-etage2 .x4-appel-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.x4-appel-etage2[hidden] { display: none; }

/* Le rail : ce qui accompagne l'appel sans le disputer. */
.x4-appel-rail { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.x4-appel-bloc {
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px); padding: 13px 14px;
}
.x4-appel-bloc-t {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 10.5px; font-weight: 640; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76); margin-bottom: 9px;
}
.x4-appel-bloc-t span {
  font-size: 11px; letter-spacing: 0; text-transform: none;
  color: var(--v2-text-3, #6b6f76);
}
.x4-appel-suiv {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 4px; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-xs, 9px); font-family: inherit; text-align: left;
}
.x4-appel-suiv:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-appel-suiv span { min-width: 0; display: flex; flex-direction: column; }
.x4-appel-suiv b {
  font-size: 12.5px; font-weight: 620; color: var(--v2-text, #16171a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x4-appel-suiv i {
  font-style: normal; font-size: 11px; color: var(--v2-text-3, #6b6f76);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x4-appel-ini-p { width: 28px; height: 28px; font-size: 10.5px; }
.x4-appel-passer {
  width: 100%; margin-top: 8px; padding: 7px 10px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: 99px; background: var(--panel-solid, #fff);
  font-family: inherit; font-size: 12px; font-weight: 620;
  color: var(--v2-text-2, #55595f); cursor: pointer;
}
.x4-appel-passer:hover { border-color: var(--v2-text-3, #6b6f76); }
.x4-appel-kpi { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.x4-appel-kpi b {
  font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums;
  color: var(--v2-text, #16171a); min-width: 22px;
}
.x4-appel-kpi span { font-size: 12px; color: var(--v2-text-2, #55595f); }
.x4-appel-kpi i {
  margin-left: auto; font-style: normal; font-size: 10.5px;
  color: var(--v2-text-3, #6b6f76); white-space: nowrap;
}
.x4-appel-kpi-vert b { color: var(--pos-fg, #136d45); }
.x4-appel-rap { padding: 3px 0; }
.x4-appel-rap b { display: block; font-size: 12.5px; font-weight: 620; color: var(--v2-text, #16171a); }
.x4-appel-rap i { font-style: normal; font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-vide-p { font-size: 11.5px; line-height: 1.45; color: var(--v2-text-3, #6b6f76); }

/* ─── Le mode LISTE : appeler en volume, deux lignes en parallèle ─────
   Le commercial lance un numéro et compose le suivant pendant que ça
   sonne. Une page par contact l'en empêche : il lui faut tous les
   numéros sous les yeux, et un geste par ligne. La station reste là
   pour le moment où quelqu'un décroche vraiment. (03/09/2026.) */
.x4-appel-bascule {
  display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
}
.x4-appel-bsc {
  padding: 5px 13px; 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: 12.5px; font-weight: 620; cursor: pointer;
}
.x4-appel-bsc.est-actif {
  background: var(--accent-bright, #f5d547); border-color: transparent;
  color: var(--sur-accent, #1b1a12);
}
.x4-appel-bsc-note { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); margin-left: 4px; }
.x4-appel-bsc-j {
  margin-left: auto; font-size: 12px; color: var(--v2-text-2, #55595f);
  font-variant-numeric: tabular-nums;
}

.x4-appel-table {
  width: 100%; border-collapse: collapse;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-md, 18px); overflow: hidden;
}
.x4-appel-table th {
  text-align: left; padding: 9px 14px;
  font-size: 10.5px; font-weight: 640; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76);
  border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075));
}
.x4-appel-table td { padding: 9px 14px; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-appel-table tbody tr:first-child td { border-top: 0; }
.x4-appel-table tbody tr:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-appel-t-qui b { display: block; font-size: 13px; font-weight: 640; color: var(--v2-text, #16171a); }
.x4-appel-t-qui i { font-style: normal; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
/* Le numéro est ce qu'on vient chercher : il se lit sans se pencher. */
.x4-appel-t-tel {
  font-size: 17px; font-weight: 680; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: var(--v2-accent, #7d640d);
  text-decoration: none; white-space: nowrap;
}
.x4-appel-t-tel:hover { text-decoration: underline; }
.x4-appel-t-sec { font-size: 12px; color: var(--v2-text-2, #55595f); }
.x4-appel-t-neuf { font-size: 11.5px; color: var(--v2-accent, #7d640d); }
.x4-appel-t-n { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-t-rap { font-size: 11.5px; color: var(--info-fg, #3160b4); }
.x4-appel-t-actes { text-align: right; white-space: nowrap; }
.x4-appel-t-b {
  min-width: 30px; padding: 5px 8px; margin-left: 4px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-xs, 9px); background: var(--panel-solid, #fff);
  color: var(--v2-text-2, #55595f);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.x4-appel-t-b:hover { border-color: var(--v2-text-3, #6b6f76); }
.x4-appel-t-b-eu {
  background: var(--pos-soft, rgba(19, 109, 69, .1));
  border-color: var(--pos-fg, #136d45); color: var(--pos-fg, #136d45);
  font-weight: 620;
}

/* ─── Choisir sa liste, puis trier dedans ────────────────────────────
   Le commercial ne travaille jamais « sur les prospects » : il travaille
   sur UNE liste. Il la choisit d'abord, il la réduit ensuite. */
.x4-appel-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.x4-appel-kpic {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 16px; border-radius: var(--r-sm, 12px);
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
}
.x4-appel-kpic span {
  font-size: 10.5px; font-weight: 640; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76);
}
.x4-appel-kpic b {
  font-size: 25px; font-weight: 680; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--v2-text, #16171a);
}
.x4-appel-kpic i { font-style: normal; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-kpic-vert b { color: var(--pos-fg, #136d45); }

.x4-appel-camps tbody tr { cursor: pointer; }
.x4-appel-camp-d { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4-appel-camp-nom { font-size: 13px; font-weight: 640; color: var(--v2-text, #16171a); }
.x4-appel-camp-n {
  font-size: 15px; font-weight: 680; font-variant-numeric: tabular-nums;
  color: var(--v2-text, #16171a); text-align: right; width: 76px;
}
.x4-appel-camp-barre { width: 34%; }
.x4-appel-camp-barre span {
  display: flex; height: 5px; border-radius: 99px; overflow: hidden;
  background: var(--inset, rgba(0, 0, 0, .035));
}
.x4-appel-camp-barre i { display: block; height: 100%; }
.x4-appel-camp-barre .est-rappel { background: var(--info-fg, #3160b4); }
.x4-appel-camp-barre .est-neuf { background: var(--stroke-3, rgba(20, 20, 25, .17)); }
.x4-appel-camp-barre .est-relance { background: var(--accent-bright, #f5d547); }
.x4-appel-camp-det { font-size: 11.5px; color: var(--v2-text-2, #55595f); white-space: nowrap; }
.x4-appel-camp-fl { color: var(--v2-text-3, #6b6f76); text-align: right; width: 22px; }
.x4-appel-camp-l.est-finie .x4-appel-camp-nom,
.x4-appel-camp-l.est-finie .x4-appel-camp-d { color: var(--v2-text-3, #6b6f76); font-weight: 550; }
.x4-appel-camp-l.est-finie .x4-appel-camp-n { color: var(--v2-text-3, #6b6f76); font-weight: 550; }
.x4-appel-note-ordre {
  margin-top: 10px; font-size: 11.5px; color: var(--v2-text-3, #6b6f76);
}
.x4-appel-bsc-retour { border-color: transparent; background: none; padding-left: 4px; }
.x4-appel-bsc-camp {
  font-size: 13px; font-weight: 680; color: var(--v2-text, #16171a); margin-right: 6px;
}

.x4-appel-tris {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  padding: 9px 12px; margin-bottom: 8px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px);
}
.x4-appel-tris-l {
  font-size: 10px; font-weight: 640; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76); margin-right: 2px;
}
.x4-appel-tris-sep {
  width: 1px; height: 15px; margin: 0 6px;
  background: var(--stroke, rgba(20, 20, 25, .075));
}
.x4-appel-tri {
  padding: 3px 9px; 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: 11.5px; font-weight: 620; cursor: pointer;
}
.x4-appel-tri i { font-style: normal; color: var(--v2-text-3, #6b6f76); }
.x4-appel-tri:hover { border-color: var(--v2-text-3, #6b6f76); }
.x4-appel-tri.est-actif {
  background: var(--accent-bright, #f5d547); border-color: transparent;
  color: var(--sur-accent, #1b1a12);
}
.x4-appel-tri.est-actif i { color: inherit; opacity: .7; }
.x4-appel-sel {
  padding: 3px 7px; 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: 11.5px;
}
.x4-appel-clavier {
  margin: 0 0 8px 2px; font-size: 11px; color: var(--v2-text-3, #6b6f76);
}
.x4-appel-clavier b {
  display: inline-block; padding: 1px 6px; margin: 0 1px;
  border: 1px solid var(--stroke-3, rgba(20, 20, 25, .17));
  border-radius: 4px; font-size: 10.5px; font-weight: 640;
  color: var(--v2-text-2, #55595f);
}
/* La ligne sous le curseur clavier : un liseré à gauche, pas un aplat —
   on la suit à l'œil sans que la table clignote. */
.x4-appel-t-ici { background: var(--accent-soft, rgba(245, 213, 71, .16)); }
.x4-appel-t-ici td:first-child { box-shadow: inset 3px 0 0 var(--accent-bright, #f5d547); }

/* ─── Le rappel qui saute aux yeux ────────────────────────────────────
   Joris a posé un rappel au 7 et ne l'a pas retrouvé : une promesse de
   rappel qui n'est pas tenue coûte plus cher qu'un appel manqué. Elle
   passe donc AVANT les compteurs, en pleine largeur, et elle est
   cliquable — elle ouvre la file filtrée sur les rappels, sans demander
   dans quelle campagne ils se trouvent. (03/09/2026.) */
.x4-appel-alerte {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; margin-bottom: 14px;
  border: 1px solid transparent; border-radius: var(--r-sm, 12px);
  background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12);
  font-family: inherit; text-align: left; cursor: pointer;
}
.x4-appel-alerte:hover { filter: brightness(.97); }
.x4-appel-alerte b {
  font-size: 23px; font-weight: 680; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.x4-appel-alerte-t { font-size: 13.5px; font-weight: 640; }
.x4-appel-alerte-n { font-size: 12px; opacity: .72; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-appel-alerte-a { margin-left: auto; font-size: 12.5px; font-weight: 640; white-space: nowrap; }
/* Un rappel en retard ne se signale pas de la même façon qu'un rappel du
   jour : l'ambre dit « à faire », le rouge dit « déjà en retard ». */
.x4-appel-alerte.est-retard {
  background: var(--neg-soft, rgba(193, 75, 64, .11));
  border-color: var(--neg-fg, #a74137); color: var(--neg-fg, #a74137);
}

/* ─── Le fil d'équipe : qui a fait quoi ─────────────────────────────── */
.x4-appel-fil {
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px); padding: 4px 14px 8px;
}
.x4-appel-fil-l {
  display: grid; grid-template-columns: 132px 118px minmax(0, 1fr) minmax(0, 1.1fr) 92px;
  align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}
.x4-appel-fil-l:first-child { border-top: 0; }
.x4-appel-fil-t {
  display: inline-flex; padding: 2px 8px; border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .035));
  font-size: 10.5px; font-weight: 640; color: var(--v2-text-2, #55595f);
  white-space: nowrap;
}
.x4-appel-fil-t-rdv { background: var(--pos-soft, rgba(19, 109, 69, .1)); color: var(--pos-fg, #136d45); }
.x4-appel-fil-t-lapin { background: color-mix(in srgb, var(--accent-bright, #f5d547) 26%, var(--panel-solid, #fff)); color: var(--v2-accent, #7d640d); }
.x4-appel-fil-t-rappel { background: var(--info-soft, rgba(59, 130, 246, .13)); color: var(--info-fg, #3160b4); }
.x4-appel-fil-qui { font-size: 12px; font-weight: 620; color: var(--v2-text, #16171a); }
.x4-appel-fil-c, .x4-appel-fil-d {
  font-size: 12px; color: var(--v2-text-2, #55595f);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x4-appel-fil-d { color: var(--v2-text-3, #6b6f76); }
.x4-appel-fil-h {
  font-size: 11px; color: var(--v2-text-3, #6b6f76); text-align: right; white-space: nowrap;
}

/* Le numéro du prochain contact : la raison d'être du bloc « Ensuite »
   en double-combiné — on le compose pendant que la ligne 1 sonne. */
.x4-appel-suiv-tel {
  font-style: normal; font-size: 12.5px; font-weight: 680;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  color: var(--v2-accent, #7d640d);
}

/* ─── Issues unifiées (audit 04/09/2026) ─────────────────────────────
   Un seul jeu de six issues, mêmes libellés et mêmes touches en Liste
   et en Station. La touche est SUR le bouton : pas de légende à
   mémoriser. ✕ ☏ ⊘ obligeait à deviner le geste le plus fréquent. */
.x4-appel-t-b u {
  text-decoration: none; font-weight: 680; font-size: 10px;
  display: inline-block; min-width: 12px; height: 14px; line-height: 14px;
  margin-right: 5px; border-radius: 3px; text-align: center;
  background: var(--inset, rgba(0, 0, 0, .05)); color: var(--v2-text-3, #6b6f76);
}
.x4-appel-t-b { font-size: 11.5px; font-weight: 620; padding: 5px 9px 5px 6px; }
.x4-appel-t-b.est-neg { color: var(--neg-fg, #a74137); }
.x4-appel-tuile-l u {
  text-decoration: none; font-weight: 680; font-size: 10.5px;
  display: inline-block; min-width: 14px; height: 16px; line-height: 16px;
  margin-right: 6px; border-radius: 4px; text-align: center;
  background: var(--inset, rgba(0, 0, 0, .05)); color: var(--v2-text-3, #6b6f76);
}
/* L'écho du dernier geste : la garantie « chaque appel pose sa date »,
   dite au moment où la ligne disparaît. */
.x4-appel-clavier { display: flex; justify-content: space-between; gap: 12px; }
.x4-appel-echo { font-weight: 640; color: var(--pos-fg, #136d45); }
/* Revenir de l'étage 2 quand on a cliqué trop vite. */
.x4-appel-etage2-annule {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; color: var(--v2-text-3, #6b6f76);
}
.x4-appel-etage2-annule:hover { color: var(--v2-text, #16171a); }

/* ─── Reprendre là où l'on en était ──────────────────────────────────
   L'outil se souvient de la campagne en cours : le matin, un geste. */
.x4-appel-reprendre {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 16px; margin-bottom: 14px;
  border: 1px solid var(--v2-accent, #7d640d);
  border-radius: var(--r-sm, 12px);
  background: var(--panel-solid, #fff); color: var(--v2-text, #16171a);
  font-family: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
}
.x4-appel-reprendre b { font-weight: 680; }
.x4-appel-reprendre span { color: var(--v2-text-3, #6b6f76); font-size: 12px; }
.x4-appel-reprendre i { margin-left: auto; font-style: normal; color: var(--v2-accent, #7d640d); font-weight: 680; }
.x4-appel-reprendre:hover { border-color: var(--accent-bright, #f5d547); box-shadow: 0 0 0 3px var(--accent-soft, rgba(245, 213, 71, .16)); }
.x4-appel-lien {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; font-weight: 620;
  color: var(--v2-accent, #7d640d); text-transform: none; letter-spacing: 0;
}
.x4-appel-lien:hover { text-decoration: underline; }
/* Un rappel du rail se charge d'un clic — et un retard se voit. */
.x4-appel-rap { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 5px 0; cursor: pointer; font-family: inherit; border-radius: var(--r-xs, 9px); }
.x4-appel-rap:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-appel-rap.est-retard b { color: var(--neg-fg, #a74137); }

/* ─── Le déblocage : un écran vide qui propose les deux vrais gestes ── */
.x4-appel-debloc {
  padding: 26px 24px;
  background: var(--panel-solid, #fff);
  border: 1px dashed var(--stroke-3, rgba(20, 20, 25, .17));
  border-radius: var(--r-md, 18px);
}
.x4-appel-debloc-t { font-size: 15px; font-weight: 680; color: var(--v2-text, #16171a); }
.x4-appel-debloc-s { font-size: 12.5px; color: var(--v2-text-2, #55595f); margin: 4px 0 14px; }
.x4-appel-debloc-actes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.x4-appel-btn-plein {
  background: var(--accent-bright, #f5d547) !important;
  border-color: transparent !important;
  color: var(--sur-accent, #1b1a12) !important; font-weight: 640;
}
.x4-appel-debloc-ou { font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-debloc-nom {
  padding: 7px 10px; border-radius: var(--r-xs, 9px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--inset, rgba(0, 0, 0, .035));
  font-family: inherit; font-size: 12.5px; min-width: 190px;
  color: var(--v2-text, #16171a);
}

/* ─── Classées aujourd'hui : rien ne disparaît ──────────────────────── */
.x4-appel-classees {
  margin-top: 14px; padding: 10px 14px;
  background: var(--panel, rgba(255, 255, 255, .66));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  border-radius: var(--r-sm, 12px);
}
.x4-appel-classees-t {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 10.5px; font-weight: 640; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76); margin-bottom: 6px;
}
.x4-appel-classees-t span { font-size: 12px; letter-spacing: 0; color: var(--v2-text-2, #55595f); }
.x4-appel-cl {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px; width: 100%; padding: 6px 4px; align-items: baseline;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: inherit; border-radius: var(--r-xs, 9px);
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}
.x4-appel-cl:first-of-type { border-top: 0; }
.x4-appel-cl:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-appel-cl b { font-size: 12.5px; font-weight: 620; color: var(--v2-text-2, #55595f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-appel-cl span { font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-cl i { font-style: normal; font-size: 12px; color: var(--info-fg, #3160b4); text-align: right; }
.x4-appel-cl .x4-appel-cl-sortie { color: var(--neg-fg, #a74137); }
.x4-appel-cl .x4-appel-cl-rdv { color: var(--pos-fg, #136d45); font-weight: 640; }

/* ─── Le mois du commercial : ses RDV de qualif, jour par jour ──────── */
.x4-appel-mois {
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px); padding: 8px 14px;
}
.x4-appel-mois-j {
  display: flex; gap: 14px; align-items: baseline; padding: 7px 0;
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}
.x4-appel-mois-j:first-child { border-top: 0; }
.x4-appel-mois-d {
  flex: none; width: 74px;
  font-size: 12px; font-weight: 640; font-variant-numeric: tabular-nums;
  color: var(--v2-text-2, #55595f);
}
.x4-appel-mois-j.est-auj .x4-appel-mois-d { color: var(--v2-accent, #7d640d); }
.x4-appel-mois-l { font-size: 12.5px; color: var(--v2-text, #16171a); }

/* ═══ VERSION SIMPLE — cotes de PHONING-SIMPLE.md (04/09/2026) ═══════
   « Un écran de phoning répond à une seule question à la fois. »
   L'accueil : combien, et on y va ? La station : qui j'appelle, et
   qu'est-ce que j'en fais ? Un ajustement de Joris sur la spec : le
   choix de la campagne reste, en puces sous le bouton Commencer. */

/* ── L'accueil d'attaque ── */
.x4-appel-att { max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
.x4-appel-att-carte {
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-lg, 26px);
  box-shadow: var(--shadow, 0 14px 40px -18px rgba(20, 20, 25, .18));
  padding: 28px 30px 26px;
}
.x4-appel-att-sur {
  font-size: 10.5px; font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76);
}
.x4-appel-att-n { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.x4-appel-att-n b {
  font-size: 54px; font-weight: 680; letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--v2-text, #16171a);
}
.x4-appel-att-n span { font-size: 15px; color: var(--v2-text-2, #55595f); }
.x4-appel-att-phrase {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.5;
  color: var(--v2-text-2, #55595f); text-wrap: pretty;
}
.x4-appel-att-go {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 30px; margin-top: 20px;
  border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(170deg, #f5d547, #e4c033);
  color: var(--sur-accent, #1b1a12);
  font-family: inherit; font-size: 16px; font-weight: 680;
}
.x4-appel-att-go:hover { filter: brightness(.97); }
.x4-appel-att-choix { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.x4-appel-att-camp {
  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-2, #55595f);
  font-family: inherit; font-size: 12px; font-weight: 620; cursor: pointer;
}
.x4-appel-att-camp i { font-style: normal; color: var(--v2-text-3, #6b6f76); }
.x4-appel-att-camp:hover { border-color: var(--v2-text-3, #6b6f76); color: var(--v2-text, #16171a); }
.x4-appel-att-bande {
  display: flex; padding: 13px 18px 14px;
  background: var(--panel, rgba(255, 255, 255, .66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px);
}
.x4-appel-att-bande span {
  flex: 1; font-size: 12.5px; color: var(--v2-text-2, #55595f);
  padding-left: 18px; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}
.x4-appel-att-bande span:first-child { padding-left: 0; border-left: 0; }
.x4-appel-att-bande b {
  font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums;
  color: var(--v2-text, #16171a); margin-right: 5px;
}
.x4-appel-att-bande b.est-pos { color: var(--pos-fg, #136d45); }
.x4-appel-att-liens { display: flex; gap: 18px; padding: 0 4px; }
.x4-appel-att-lien {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 620;
  color: var(--v2-accent, #7d640d);
}
.x4-appel-att-lien:hover { text-decoration: underline; }

/* ── La station simple : une colonne de 860 px ── */
.x4-appel-st { max-width: 860px; display: flex; flex-direction: column; gap: 10px; }
.x4-appel-st-barre {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 13px; 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-appel-st-retour {
  width: 26px; height: 26px; border: 0; border-radius: var(--r-xs, 9px);
  background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text-2, #55595f);
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.x4-appel-st-camp {
  font-size: 12px; font-weight: 620; color: var(--v2-text, #16171a);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x4-appel-st-prog {
  flex: 1; height: 4px; border-radius: 99px;
  background: var(--track, rgba(20, 20, 25, .08)); overflow: hidden;
}
.x4-appel-st-prog i { display: block; height: 100%; background: var(--accent-bright, #f5d547); }
.x4-appel-st-pos { font-size: 11.5px; font-weight: 620; font-variant-numeric: tabular-nums; color: var(--v2-text-2, #55595f); }

.x4-appel-st-carte {
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-lg, 26px);
  box-shadow: var(--shadow, 0 14px 40px -18px rgba(20, 20, 25, .18));
  padding: 26px 28px 24px;
}
.x4-appel-st-src { display: flex; align-items: center; }
.x4-appel-st-src-l {
  font-size: 9.5px; font-weight: 680; letter-spacing: .1em;
  text-transform: uppercase; color: var(--x4-prospects-file-src-tel, #8a5510);
}
.x4-appel-st-src-l.est-seo { color: var(--x4-prospects-file-src-seo, #136d45); }
.x4-appel-st-tent {
  margin-left: auto; height: 21px; display: inline-flex; align-items: center;
  padding: 0 9px; border-radius: 99px;
  background: var(--warn-soft, rgba(138, 85, 16, .1)); color: var(--v2-text, #16171a);
  font-size: 11px; font-weight: 620;
}
.x4-appel-st-soc {
  margin-top: 12px; font-size: 30px; font-weight: 680; letter-spacing: -.04em;
  color: var(--v2-text, #16171a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x4-appel-st-qui { margin-top: 3px; font-size: 15px; color: var(--v2-text-2, #55595f); }
.x4-appel-st-appel { display: flex; align-items: center; margin-top: 20px; }
.x4-appel-st-tel {
  font-size: 40px; font-weight: 680; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--v2-text, #16171a);
  text-decoration: none;
}
.x4-appel-st-tel:hover { color: var(--v2-accent, #7d640d); }
.x4-appel-st-btn-appel {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
  height: 50px; padding: 0 26px; border-radius: 99px; text-decoration: none;
  background: linear-gradient(170deg, #f5d547, #e4c033);
  color: var(--sur-accent, #1b1a12); font-size: 15px; font-weight: 680;
}
.x4-appel-st-btn-appel:hover { filter: brightness(.97); }
/* En sombre, une règle de thème sur les liens (`[data-theme] a`) prenait le
   pas et posait l'encre ambre sur l'aplat ambre — « Appeler » sans texte.
   Le défaut de « Rappeler » du 02/09, réglé ici par spécificité, pour tous
   les états du lien. */
.x4-appel a.x4-appel-st-btn-appel, .x4-appel a.x4-appel-st-btn-appel:hover,
.x4-appel a.x4-appel-st-btn-appel:visited { color: var(--sur-accent, #1b1a12); }
.x4-appel-st-ctx {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  font-size: 12px; color: var(--v2-text-3, #6b6f76);
}
.x4-appel-st-fiche {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 620;
  color: var(--v2-accent, #7d640d);
}
.x4-appel-st-fiche:hover { text-decoration: underline; }
.x4-appel-st-ensuite {
  margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--v2-text-3, #6b6f76);
}
.x4-appel-st-demande {
  margin-top: 14px; padding: 10px 14px;
  background: var(--alt-soft, rgba(122, 96, 176, .07));
  border-left: 3px solid var(--alt-fg, #6b53a8);
  border-radius: 0 var(--r-xs, 9px) var(--r-xs, 9px) 0;
  font-size: 13.5px; font-style: italic; color: var(--v2-text, #16171a);
}

/* ── La qualification, état 2 : « Ce qu'il dit » ── */
.x4-appel-st-qualif {
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-lg, 26px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  padding: 16px 18px 18px;
}
.x4-appel-st-q-sur {
  font-size: 10.5px; font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76); margin-bottom: 10px;
}
.x4-appel-st-q-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.x4-appel-st-q-champ {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px 10px; border-radius: var(--r-sm, 12px);
  background: var(--panel-2, rgba(255, 255, 255, .42));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  cursor: text;
}
.x4-appel-st-q-champ:focus-within { border-color: var(--v2-accent, #7d640d); }
.x4-appel-st-q-champ span {
  font-size: 10px; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76);
}
.x4-appel-st-q-champ input, .x4-appel-st-q-champ textarea {
  all: unset; font-family: inherit; font-size: 13.5px; line-height: 1.4;
  color: var(--v2-text, #16171a); width: 100%;
}
.x4-appel-st-q-large { margin-top: 8px; }

/* ── Les pieds : issues état 1, issues commerciales état 2 ── */
.x4-appel-st-pied {
  position: sticky; bottom: 0; z-index: 8;
  padding: 12px 0 16px; background: var(--v2-bg, #eeedea);
}
.x4-appel-st-pied-note {
  text-align: right; font-size: 11.5px; color: var(--v2-text-3, #6b6f76);
  margin-bottom: 8px;
}
.x4-appel-st-issues5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.x4-appel-st-tuile {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 8px 12px; border-radius: var(--r-sm, 12px);
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  font-family: inherit; cursor: pointer;
}
.x4-appel-st-tuile:hover { border-color: var(--v2-text-3, #6b6f76); }
.x4-appel-st-touche {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; background: var(--inset, rgba(0, 0, 0, .035));
  color: var(--v2-text-2, #55595f); font-size: 11.5px; font-weight: 680;
  flex: none;
}
.x4-appel-st-tuile-l { font-size: 12px; font-weight: 620; color: var(--v2-text, #16171a); text-align: center; }
.x4-appel-st-eu {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 52px; margin-top: 7px;
  border-radius: var(--r-sm, 12px); cursor: pointer;
  background: var(--pos, rgba(23, 128, 81, .15));
  border: 1px solid var(--pos-fg, #136d45); color: var(--pos-fg, #136d45);
  font-family: inherit; font-size: 15px; font-weight: 680;
}
.x4-appel-st-eu:hover { filter: brightness(.97); }
.x4-appel-st-touche-eu { width: 24px; height: 24px; background: var(--panel-solid, #fff); }
.x4-appel-st-issues3 { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 7px; max-height: 120px; opacity: 1; overflow: hidden; transition: max-height .18s, opacity .18s, margin .18s; }
/* Repliée pendant le choix du motif : une question à la fois. */
.x4-appel-st-issues3.est-replie { max-height: 0; opacity: 0; margin: 0; pointer-events: none; }
.x4-appel-st-com, .x4-appel-st-com-date > button {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; width: 100%; border-radius: var(--r-sm, 12px); cursor: pointer;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  color: var(--v2-text, #16171a);
  font-family: inherit; font-size: 13.5px; font-weight: 640;
}
.x4-appel-st-com.est-rdv {
  background: linear-gradient(170deg, #f5d547, #e4c033);
  border-color: transparent; color: var(--sur-accent, #1b1a12);
}
.x4-appel-st-com.est-non { background: transparent; color: var(--neg-fg, #a74137); }
.x4-appel-st-com-date { display: flex; flex-direction: column; padding: 0; border: 0; background: none; }
.x4-appel-st-esc {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 10px auto 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; color: var(--v2-text-2, #55595f);
}
.x4-appel-st-esc .x4-appel-st-touche { width: auto; padding: 0 6px; height: 20px; font-size: 10px; }
/* La 5e tentative se voit : c'est la dernière avant le grand repos. */
.x4-appel-st-pied-note.est-dernier { color: var(--neg-fg, #a74137); font-weight: 620; }

/* ═══ LA SESSION — l'écran unique (squelette, 04/09/2026) ════════════
   La pile à gauche qui descend, le contact au centre, les gestes en
   bas. Les couleurs fines viendront de Claude Design : ici, les zones. */
/* Centrée comme l'accueil : calée à gauche, la session « tombait » d'un
   côté de l'écran (Joris, 07/09). */
.x4-appel-ss { display: flex; flex-direction: column; gap: 10px; max-width: 1240px; margin: 0 auto; }
.x4-appel-ss-jour { margin-left: 12px; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4-appel-ss-jour .est-pos { color: var(--pos-fg, #136d45); }
.x4-appel-ss-corps {
  /* 300 px et non 250 : à 250 les noms de sociétés se coupaient
     (« ESTUAIRE PACKAGI… ») — et la pile sert à lire des noms. Écart
     avec SESSION-SPLIT.md, demandé par Joris le 07/09. */
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px; align-items: start;
}
@media (max-width: 900px) { .x4-appel-ss-corps { grid-template-columns: 1fr; } }
/* ─── La pile (SESSION-SPLIT.md §2) : trois signaux qui se cumulent ──
   la position (l'ordre ne change jamais), l'heure présente ou absente
   (engagement en haut, pioche en bas), et le filet de 3 px qui nomme la
   nature. Pas de pastille par ligne : cinq couleurs ne se mémorisent pas
   à 250 px de large. */
.x4-appel-pile {
  display: flex; flex-direction: column; gap: 0;
  background: var(--panel, rgba(255, 255, 255, .66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px); padding: 4px 0 0; overflow: hidden;
  /* 230 px = ce que l'en-tête du module et la barre de session prennent
     au-dessus : le bilan en pied reste visible sans faire défiler la page. */
  position: sticky; top: 86px; max-height: calc(100vh - 230px); overflow-y: auto;
}
.x4-appel-p-sect {
  display: flex; align-items: baseline; gap: 6px;
  padding: 9px 13px 4px;
  font-size: 10px; font-weight: 640; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v2-text-2, #55595f);
}
.x4-appel-p-sect i { flex: none; width: 5px; height: 5px; border-radius: 99px; align-self: center; background: var(--stroke-3, rgba(20, 20, 25, .17)); }
.x4-appel-p-sect span { margin-left: auto; font-size: 10.5px; font-weight: 620; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--v2-text-3, #6b6f76); }
.x4-appel-p-sect.est-retour i { background: var(--warn-fg, #8a5510); }
.x4-appel-p-sect.est-lapin i { background: var(--accent-bright, #f5d547); box-shadow: inset 0 0 0 1px var(--v2-accent, #7d640d); }
.x4-appel-p-sect.est-retard i { background: var(--neg-fg, #a74137); }
.x4-appel-p-sect.est-rappel i { background: var(--info-fg, #3160b4); }
.x4-appel-p-sect.est-retent i { background: var(--v2-text-2, #55595f); }
.x4-appel-p-sect.est-faite i { background: var(--v2-text-3, #6b6f76); }
.x4-appel-p-l {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 8px 13px 9px 10px; border: 0; border-left: 3px solid transparent; border-radius: 0;
  background: none; cursor: pointer; font-family: inherit; text-align: left;
}
.x4-appel-p-l:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-appel-p-l.est-retour { border-left-color: var(--warn-fg, #8a5510); }
.x4-appel-p-l.est-lapin { border-left-color: var(--accent-bright, #f5d547); }
.x4-appel-p-l.est-retard { border-left-color: var(--neg-fg, #a74137); }
.x4-appel-p-l.est-rappel { border-left-color: var(--info-fg, #3160b4); }
.x4-appel-p-l.est-retent { border-left-color: var(--v2-text-2, #55595f); }
.x4-appel-p-l.est-froid { border-left-color: var(--stroke, rgba(20, 20, 25, .075)); }
/* La courante : le SEUL ambre de la pile. */
.x4-appel-p-l.est-courante { border-left-color: var(--accent-bright, #f5d547); background: var(--accent-soft, rgba(245, 213, 71, .16)); }
.x4-appel-p-l.est-courante .x4-appel-p-nom { font-weight: 680; }
/* Sur le lavis ambre de la courante, --text-3 tombe à 3,2:1 en sombre : un cran au-dessus. */
.x4-appel-p-l.est-courante .x4-appel-p-qui { color: var(--v2-text-2, #55595f); }
.x4-appel-p-l:disabled { cursor: default; }
.x4-appel-p-l:disabled:hover { background: none; }
.x4-appel-p-l.est-attente { opacity: .6; }
.x4-appel-p-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.x4-appel-p-nom {
  min-width: 0; font-size: 12.5px; font-weight: 550; color: var(--v2-text, #16171a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x4-appel-p-qui { font-size: 11px; color: var(--v2-text-3, #6b6f76); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Les traitées restent, barrées, avec leur destination : voir ce qu'on a
   fait pendant qu'on travaille est ce qui rend la session tenable. */
/* Une traitée garde sa structure mais s'éteint (Claude Design, 07/09) :
   société barrée en --text-3, filet --stroke-2, pas de fond. */
.x4-appel-p-l.est-faite { border-left-color: var(--stroke-2, rgba(20, 20, 25, .05)); background: none; }
.x4-appel-p-l.est-faite .x4-appel-p-nom { font-weight: 400; font-size: 12.5px; color: var(--v2-text-3, #6b6f76); text-decoration: line-through; }
.x4-appel-p-l.est-faite .x4-appel-p-qui { font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-p-h { flex: none; font-size: 11px; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--v2-text-2, #55595f); }
.x4-appel-p-h.est-neg { color: var(--neg-fg, #a74137); font-weight: 680; }   /* seul le retard colore son heure */
.x4-appel-p-h.est-dest { color: var(--v2-text-3, #6b6f76); font-weight: 400; }
/* Le RDV pris reste lisible et passe en vert : c'est le résultat de la
   session, pas une ligne rayée. Le refus garde le trait. */
.x4-appel-p-l.est-faite.est-oui { border-left-color: var(--pos-fg, #136d45); }
.x4-appel-p-l.est-faite.est-oui .x4-appel-p-h.est-dest { color: var(--pos-fg, #136d45); font-weight: 620; }
/* Le lapin : un aplat plein là où tout le reste est du texte — sa forme le
   distingue, pas sa teinte (Claude Design, 06/09). */
.x4-appel-p-h.est-lapin {
  padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 680;
  background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12);
}
/* Le bilan, en pied de pile : en tête, il ferait regarder son score. */
.x4-appel-p-bilan {
  position: sticky; bottom: 0; margin-top: 6px;
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 13px 13px;
  border-top: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-solid, #fff);
}
.x4-appel-p-bilan-l { display: flex; align-items: baseline; gap: 6px; }
.x4-appel-p-bilan-l b { min-width: 26px; font-size: 15px; font-weight: 680; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--v2-text, #16171a); }
.x4-appel-p-bilan-l span { font-size: 11.5px; color: var(--v2-text-2, #55595f); }
.x4-appel-p-bilan-l i { margin-left: auto; font-style: normal; font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--v2-text-3, #6b6f76); }
.x4-appel-p-bilan-l.est-pos b { color: var(--pos-fg, #136d45); }   /* seul le RDV prend une teinte : c'est le résultat */
/* Les pastilles d'état — vue Liste seulement désormais. */
.x4-appel-p-etat { flex: none; font-size: 10.5px; font-weight: 640; border-radius: 99px; padding: 1px 7px; }
.x4-appel-p-etat.est-retard { background: var(--neg-soft, rgba(193, 75, 64, .11)); color: var(--neg-fg, #a74137); }
.x4-appel-p-etat.est-rappel { background: var(--info-soft, rgba(59, 130, 246, .13)); color: var(--info-fg, #3160b4); }
/* Les tentatives chauffent vers le rouge : 1ʳᵉ ambre clair, 4ᵉ+ rouge. */
.x4-appel-p-etat.est-retent.cran-1 { background: rgba(217, 182, 74, .16); color: #8a6d0e; }
.x4-appel-p-etat.est-retent.cran-2 { background: rgba(198, 141, 38, .16); color: #8a5510; }
.x4-appel-p-etat.est-retent.cran-3 { background: rgba(196, 98, 38, .16); color: #9c4a10; }
.x4-appel-p-etat.est-retent.cran-4 { background: var(--neg-soft, rgba(193, 75, 64, .13)); color: var(--neg-fg, #a74137); font-weight: 680; }
.x4-appel-p-etat.est-retent { background: var(--warn-soft, rgba(138, 85, 16, .1)); color: var(--warn-fg, #8a5510); }
/* Jamais appelé : BLEU — l'inconnu, on ne sait pas ce que ça va donner. */
.x4-appel-p-etat.est-froid { background: var(--info-soft, rgba(59, 130, 246, .12)); color: var(--info-fg, #3160b4); }
/* Favorable : VERT — parti en qualif, ou a donné un autre contact. */
.x4-appel-p-etat.est-gagne { background: var(--pos-soft, rgba(19, 109, 69, .11)); color: var(--pos-fg, #136d45); font-weight: 680; }
.x4-appel-p-etat.est-fait { background: none; color: var(--v2-text-3, #6b6f76); }
.x4-appel-ss-droite { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Le contexte du rappel : la dernière note SUR la carte. */
.x4-appel-ss-avant {
  margin-top: 14px; padding: 9px 12px;
  display: flex; flex-direction: column; gap: 2px;
  /* --inset et non --panel-2 : sur la carte opaque, --panel-2 (blanc à 42 %)
     ne compose rien — piège connu du 02/09. */
  background: var(--inset, rgba(0, 0, 0, .035));
  border-left: 3px solid var(--info-fg, #3160b4);
  border-radius: 0 var(--r-xs, 9px) var(--r-xs, 9px) 0;
}
.x4-appel-ss-avant-l { font-size: 10px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-appel-ss-avant-x { font-size: 12.5px; color: var(--v2-text-2, #55595f); line-height: 1.45; }
/* « éviter le matin » : une consigne de créneau, dans la ligne de contexte. */
.x4-appel-st-evite {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 99px;
  background: var(--warn-soft, rgba(224, 138, 46, .12)); color: var(--v2-text, #16171a);
  font-size: 11.5px; font-weight: 620;
}
.x4-appel-st-evite i { width: 6px; height: 6px; border-radius: 99px; background: var(--warn-fg, #8a5510); }
/* La cadence, sous le libellé de chaque tuile, avant le clic. */
.x4-appel-st-tuile-c { font-size: 10px; color: var(--v2-text-3, #6b6f76); margin-top: 2px; }
.x4-appel-st-tuile-c.est-dernier { color: var(--neg-fg, #a74137); font-weight: 620; }
/* Les presets du rappel : date + heure obligatoires, en place. */
.x4-appel-ss-presets {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 8px; padding: 9px 12px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px);
}
.x4-appel-ss-presets-l { font-size: 11px; font-weight: 640; text-transform: uppercase; letter-spacing: .05em; color: var(--v2-text-3, #6b6f76); }
.x4-appel-ss-presets button {
  height: 28px; padding: 0 12px; border-radius: 99px;
  border: 1px solid transparent;
  background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text, #16171a);
  font-family: inherit; font-size: 12px; font-weight: 620; cursor: pointer;
}
.x4-appel-ss-presets button:hover { border-color: var(--stroke-3, rgba(20, 20, 25, .17)); }
.x4-appel-ss-presets button.est-ok { background: var(--accent-bright, #f5d547); border-color: transparent; color: var(--sur-accent, #1b1a12); }
.x4-appel-ss-presets input {
  padding: 4px 8px; border-radius: var(--r-xs, 9px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text, #16171a);
  font-family: inherit; font-size: 12px;
}
/* Le bilan de fin de pile. */
.x4-appel-bilan { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; margin: 10px 0 6px; }
.x4-appel-bilan span { font-size: 13px; color: var(--v2-text-2, #55595f); }
.x4-appel-bilan b { font-size: 22px; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--v2-text, #16171a); margin-right: 4px; }
.x4-appel-bilan .est-pos b { color: var(--pos-fg, #136d45); }
.x4-appel-bilan-sem { font-size: 11.5px !important; color: var(--v2-text-3, #6b6f76) !important; }

/* ─── Le script de campagne : le commercial lit, Joris écrit ────────── */
.x4-appel-scr {
  background: var(--panel, rgba(255, 255, 255, .66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px); padding: 0 14px;
}
.x4-appel-scr summary {
  padding: 10px 0; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 640; color: var(--v2-accent, #7d640d);
}
.x4-appel-scr summary::before { content: '▸ '; }
.x4-appel-scr[open] summary::before { content: '▾ '; }
.x4-appel-scr-bloc { padding: 0 0 12px; }
.x4-appel-scr-t {
  font-size: 10px; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76); margin-bottom: 3px;
}
.x4-appel-scr-x { font-size: 13.5px; line-height: 1.5; color: var(--v2-text, #16171a); }
.x4-appel-camp-script {
  margin-left: 8px; padding: 1px 8px; border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-solid, #fff); color: var(--v2-text-3, #6b6f76);
  font-family: inherit; font-size: 10.5px; font-weight: 620; cursor: pointer;
}
.x4-appel-camp-script.est-rempli { color: var(--v2-accent, #7d640d); border-color: var(--v2-accent, #7d640d); }
.x4-appel-scr-edit {
  margin-top: 10px; padding: 14px 16px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px);
  display: flex; flex-direction: column; gap: 10px;
}
.x4-appel-scr-edit-t { font-size: 13px; font-weight: 640; color: var(--v2-text, #16171a); }
.x4-appel-scr-edit-t span { font-size: 11.5px; font-weight: 550; color: var(--v2-text-3, #6b6f76); margin-left: 8px; }
.x4-appel-scr-edit label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 640; text-transform: uppercase; letter-spacing: .05em;
  color: var(--v2-text-3, #6b6f76);
}
.x4-appel-scr-edit textarea {
  padding: 8px 11px; border-radius: var(--r-xs, 9px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text, #16171a);
  font-family: inherit; font-size: 13px; line-height: 1.45; resize: vertical;
}
.x4-appel-scr-edit-actes { display: flex; gap: 8px; }

.x4-appel-ss-motif {
  flex: 1 1 220px; padding: 6px 10px; border-radius: var(--r-xs, 9px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text, #16171a);
  font-family: inherit; font-size: 12.5px;
}
.x4-appel-ss-presets select {
  padding: 5px 8px; 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: 12px;
}
/* Le refus : « POURQUOI ? », une rangée de motifs (un clic écarte et
   écrit), « Autre… » ouvre un champ, le recontact à droite. */
.x4-appel-ss-refus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; }
.x4-appel-ss-refus-l { font-size: 11px; font-weight: 640; text-transform: uppercase; letter-spacing: .08em; color: var(--v2-text-3, #6b6f76); margin-right: 4px; }
.x4-appel-ss-motifs { display: flex; flex-wrap: wrap; gap: 8px; }
.x4-appel-ss-motifs button {
  height: 32px; padding: 0 13px; border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text, #16171a);
  font-family: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.x4-appel-ss-motifs button:hover { background: var(--panel-solid, #fff); border-color: var(--stroke-3, rgba(20, 20, 25, .17)); }
.x4-appel-ss-refus select {
  margin-left: auto; height: 32px; padding: 0 8px; 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-appel-ss-refus .est-ok {
  height: 32px; padding: 0 14px; border: 0; border-radius: 99px;
  background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12);
  font-family: inherit; font-size: 12.5px; font-weight: 640; cursor: pointer;
}

/* ─── La Ligne 2 : le deuxième combiné (demande du commercial) ────────
   On compose B pendant que A sonne. Si B décroche, Tab ou clic : B
   passe devant, A — non classée — retourne dans sa section de pile. */
.x4-appel-l2 {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  padding: 12px 16px; border-radius: var(--r-sm, 12px);
  border: 1.5px dashed var(--stroke-3, rgba(20, 20, 25, .17));
  background: var(--panel, rgba(255, 255, 255, .66));
  font-family: inherit; cursor: pointer; text-align: left;
}
.x4-appel-l2:hover { border-color: var(--v2-accent, #7d640d); border-style: solid; }
.x4-appel-l2-k {
  font-size: 10px; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v2-text-3, #6b6f76);
}
.x4-appel-l2-corps { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.x4-appel-l2-qui { min-width: 0; }
.x4-appel-l2-qui b { font-size: 14px; font-weight: 640; color: var(--v2-text, #16171a); }
.x4-appel-l2-qui i { font-style: normal; font-size: 12px; color: var(--v2-text-3, #6b6f76); margin-left: 6px; }
.x4-appel-l2-tel {
  font-size: 21px; font-weight: 680; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--v2-accent, #7d640d);
}
.x4-appel-l2-go { margin-left: auto; font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-l2-go b {
  display: inline-block; padding: 0 5px; height: 16px; line-height: 16px;
  border: 1px solid var(--stroke-3, rgba(20, 20, 25, .17)); border-radius: 4px;
  font-size: 10px; font-weight: 640; color: var(--v2-text-2, #55595f);
}

/* ─── L'accueil = le choix de liste (Joris, 04/09/2026) ──────────────
   « C'est lui qui choisit sa liste » : chaque campagne montre sa vie —
   importée le, travaillée le, reste, et la frise par tentative. */
.x4-appel-lsts {
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-md, 18px); overflow: hidden;
}
.x4-appel-lst {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 9px 16px 10px; border: 0;
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  background: none; font-family: inherit; cursor: pointer; text-align: left;
}
.x4-appel-lst:first-child { border-top: 0; }
.x4-appel-lst:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-appel-lst.est-finie { opacity: .6; }
.x4-appel-lst-l1 { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.x4-appel-lst-nom {
  font-size: 13.5px; font-weight: 640; color: var(--v2-text, #16171a);
  flex: none; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x4-appel-lst-dates { flex: none; font-size: 11px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
/* La frise (Claude Design, 06/09) : segments OPAQUES séparés d'un jour de
   2 px — deux teintes voisines se distinguent par leur bord, pas par leur
   luminance. Le code couleur de Joris : jamais appelés en BLEU (l'inconnu),
   tentatives qui chauffent de l'ambre au rouge, favorable en vert. Le lapin
   sort de l'axe chaud par un liseré sombre, pas par sa teinte. */
/* 8 px et non 6 : un liseré de 1,5 px sur 6 px mangeait le segment du
   lapin, qui se lisait noir (Claude Design, 07/09). */
.x4-appel-lst-frise {
  flex: 1; display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 2px;
  background: none; align-self: center;
}
.x4-appel-lst-frise i { display: block; height: 100%; min-width: 3px; }
.x4-appel-lst-frise .est-jamais { background: color-mix(in srgb, var(--info-fg, #3160b4) 78%, var(--panel-solid, #fff)); }
.x4-appel-lst-frise .est-lapin { background: var(--accent-bright, #f5d547); box-shadow: inset 0 0 0 1px var(--v2-accent, #7d640d); }
.x4-appel-lst-frise .est-r1 { background: var(--accent-bright, #f5d547); }
.x4-appel-lst-frise .est-r2 { background: color-mix(in srgb, var(--accent-bright, #f5d547) 70%, var(--neg-fg, #a74137)); }
.x4-appel-lst-frise .est-r3 { background: color-mix(in srgb, var(--accent-bright, #f5d547) 40%, var(--neg-fg, #a74137)); }
.x4-appel-lst-frise .est-r4 { background: var(--neg-fg, #a74137); }
.x4-appel-lst-frise .est-rdv { background: var(--pos-fg, #136d45); }
.x4-appel-lst-frise .est-refus { background: var(--v2-text-3, #6b6f76); }
.x4-appel-lst-frise .est-mort { background: color-mix(in srgb, var(--neg-fg, #a74137) 55%, var(--panel-solid, #fff)); }
.x4-appel-lst-detail b.est-lapin { color: var(--v2-accent, #7d640d); font-weight: 680; }
/* La pastille de légende : la même couleur que le segment qu'elle explique,
   8 px, posée juste devant le nombre. Le lapin garde son liseré. */
.x4-appel-lst-leg {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px;
  vertical-align: 0; background: var(--stroke-3, rgba(20, 20, 25, .17));
}
.x4-appel-lst-leg.est-jamais { background: color-mix(in srgb, var(--info-fg, #3160b4) 78%, var(--panel-solid, #fff)); }
.x4-appel-lst-leg.est-lapin { background: var(--accent-bright, #f5d547); box-shadow: inset 0 0 0 1px var(--v2-accent, #7d640d); }
.x4-appel-lst-leg.est-r1 { background: var(--accent-bright, #f5d547); }
.x4-appel-lst-leg.est-r2 { background: color-mix(in srgb, var(--accent-bright, #f5d547) 70%, var(--neg-fg, #a74137)); }
.x4-appel-lst-leg.est-r3 { background: color-mix(in srgb, var(--accent-bright, #f5d547) 40%, var(--neg-fg, #a74137)); }
.x4-appel-lst-leg.est-r4 { background: var(--neg-fg, #a74137); }
.x4-appel-lst-leg.est-rdv { background: var(--pos-fg, #136d45); }
.x4-appel-lst-leg.est-refus { background: var(--v2-text-3, #6b6f76); }
.x4-appel-lst-leg.est-mort { background: color-mix(in srgb, var(--neg-fg, #a74137) 55%, var(--panel-solid, #fff)); }
.x4-appel-lst-reste { flex: none; font-size: 11.5px; color: var(--v2-text-2, #55595f); white-space: nowrap; }
.x4-appel-lst-reste b {
  font-size: 15px; font-weight: 680; font-variant-numeric: tabular-nums;
  color: var(--v2-text, #16171a); margin-right: 2px;
}
.x4-appel-lst-detail { font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-lst-detail b { color: var(--v2-text-2, #55595f); font-weight: 640; }
.x4-appel-lst-detail b.est-pos { color: var(--pos-fg, #136d45); }


/* ─── La bascule Fiche / Liste de la session ────────────────────────── */
.x4-appel-ss-bascule {
  display: inline-flex; gap: 3px; padding: 2px;
  background: var(--inset, rgba(0, 0, 0, .035));
  border-radius: 99px;
}
.x4-appel-ss-bascule button {
  padding: 3px 11px; border: 0; border-radius: 99px;
  background: none; color: var(--v2-text-2, #55595f);
  font-family: inherit; font-size: 11.5px; font-weight: 620; cursor: pointer;
}
.x4-appel-ss-bascule button.est-actif {
  background: var(--panel-solid, #fff); color: var(--v2-text, #16171a);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .08);
}
/* Le lapin dans la pile : ambre soutenu — un RDV manqué se voit. */
.x4-appel-p-etat.est-lapin { background: color-mix(in srgb, var(--accent-bright, #f5d547) 26%, var(--panel-solid, #fff)); color: var(--v2-accent, #7d640d); font-weight: 680; }

/* ─── La vue Liste ne chevauche plus (Joris, 04/09/2026) ─────────────
   Secteur fusionné sous le nom, boutons compacts sous 1240 px, et un
   cadre à défilement en garde-fou absolu. */
.x4-appel-t-cadre { overflow-x: auto; border-radius: var(--r-md, 18px); }
.x4-appel-t-actes { min-width: 0; }
.x4-appel-t-b { white-space: nowrap; }
@media (max-width: 1240px) {
  .x4-appel-t-b span { display: none; }          /* la touche reste, le mot part */
  .x4-appel-t-b.x4-appel-t-b-eu span { display: inline; }  /* sauf « Je l'ai eu » */
  .x4-appel-t-b { min-width: 30px; justify-content: center; }
}
/* ─── Couleurs plus franches (vue Liste) : on les distingue à deux mètres,
   et elles viennent des jetons — le gradient des tentatives interpole
   --accent-bright → --neg-fg à 0 / 30 / 60 / 100 %. ─────────────────── */
.x4-appel-p-etat { font-weight: 640; }
.x4-appel-p-etat.est-lapin { background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); }
.x4-appel-p-etat.est-retard { background: var(--neg-fg, #a74137); color: var(--panel-solid, #fff); }
.x4-appel-p-etat.est-rappel { background: var(--info-fg, #3160b4); color: var(--panel-solid, #fff); }
.x4-appel-p-etat.est-retour { background: var(--warn-soft, rgba(224, 138, 46, .12)); color: var(--warn-fg, #8a5510); }
.x4-appel-p-etat.est-froid { background: var(--info-soft, rgba(53, 104, 196, .11)); color: var(--info-fg, #3160b4); }
.x4-appel-p-etat.est-retent.cran-1 { background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); }
.x4-appel-p-etat.est-retent.cran-2 { background: color-mix(in srgb, var(--accent-bright, #f5d547) 70%, var(--neg-fg, #a74137)); color: var(--sur-accent, #1b1a12); }
.x4-appel-p-etat.est-retent.cran-3 { background: color-mix(in srgb, var(--accent-bright, #f5d547) 40%, var(--neg-fg, #a74137)); color: var(--sur-accent, #1b1a12); }
.x4-appel-p-etat.est-retent.cran-4 { background: var(--neg-fg, #a74137); color: var(--panel-solid, #fff); }
.x4-appel-p-etat.est-gagne { background: var(--pos-fg, #136d45); color: var(--panel-solid, #fff); }

/* ─── Vue Liste : les six issues n'apparaissent que sur la ligne courante,
   au survol ou au focus (Claude Design, 07/09). Colonne vide ailleurs,
   largeur conservée — pas de pastilles grises, qui feraient une colonne
   de bruit sous une autre forme. :focus-within révèle comme :hover,
   sinon le clavier traverse une colonne invisible. ─────────────────── */
.x4-appel-table tbody tr:not(.x4-appel-t-ici):not(:hover):not(:focus-within) .x4-appel-t-b { visibility: hidden; }

/* ═══ L'ACCUEIL EN PREMIÈRE PAGE (cotes Claude Design, 07/09/2026) ═════
   Six zones séparées du même intervalle de 20 px : c'est cette valeur
   unique qui fait la page. Colonne de 1080 px centrée — au-delà, la frise
   d'une liste s'étire et devient illisible. */
.x4-appel-att { max-width: 1080px; margin: 0 auto; padding: 26px 30px 86px; display: flex; flex-direction: column; gap: 20px; }
.x4-appel-att-tete { display: flex; align-items: flex-end; gap: 24px; }
.x4-appel-att-tete-g { min-width: 0; }
.x4-appel-att-sur { font-size: 11px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-appel-att-titre { margin-top: 3px; font-size: 30px; font-weight: 680; letter-spacing: -.04em; color: var(--v2-text, #16171a); }
.x4-appel-att-etat { margin-top: 6px; font-size: 13.5px; color: var(--v2-text-2, #55595f); }
.x4-appel-att-tete-d { margin-left: auto; text-align: right; flex: none; }
/* Les trois compteurs vivent dans l'en-tête, sur la ligne de base du
   titre — pas de cartes, pas de fond : c'est ce qui les empêche de peser
   autant que l'alerte juste en dessous. */
.x4-appel-att-compteurs { display: flex; align-items: baseline; gap: 22px; }
.x4-appel-att-compteurs span { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--v2-text-2, #55595f); }
.x4-appel-att-compteurs b { font-size: 21px; font-weight: 680; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--v2-text, #16171a); }
.x4-appel-att-compteurs .est-pos b { color: var(--pos-fg, #136d45); }
.x4-appel-att-cible { margin-top: 4px; font-size: 11px; color: var(--v2-text-3, #6b6f76); }
/* L'alerte des engagements : seul bloc qui peut disparaître. Un filet
   gauche, pas un cadre complet — elle se distingue sans devenir un objet
   de plus. */
.x4-appel-att-alerte {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 18px; border: 0; border-left: 3px solid var(--warn-fg, #8a5510);
  border-radius: var(--r-md, 18px);
  background: var(--warn-soft, rgba(224, 138, 46, .12));
  font-family: inherit; cursor: pointer; text-align: left; color: var(--v2-text, #16171a);
}
.x4-appel-att-alerte svg { flex: none; color: var(--warn-fg, #8a5510); }
.x4-appel-att-alerte b { font-size: 21px; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--warn-fg, #8a5510); }
.x4-appel-att-alerte-l { font-size: 14px; font-weight: 620; }
.x4-appel-att-alerte-r { font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-appel-att-alerte-a {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: 99px; background: var(--panel-solid, #fff);
  border: 1px solid var(--warn-fg, #8a5510); color: var(--warn-fg, #8a5510);
  font-size: 12.5px; font-weight: 620;
}
/* Le titre de section est du texte : pas de fond, pas de filet. */
.x4-appel-att-sect { display: flex; align-items: baseline; gap: 10px; }
.x4-appel-att-sect-t { font-size: 17px; font-weight: 680; letter-spacing: -.025em; color: var(--v2-text, #16171a); }
.x4-appel-att-sect-n { margin-left: auto; font-size: 12.5px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-att .x4-appel-lsts { box-shadow: var(--shadow-sm, 0 1px 2px rgba(20, 20, 25, .06)); }
/* Les liens de sortie (« Gérer les campagnes », « Les rendez-vous »,
   « Demandes entrantes ») sont stylés plus haut, avec l'accueil. */

/* ═══ LA CONVERSATION DANS LA STATION (Joris, 07/09 ; cotes Claude Design
   §2) — à la place des cinq champs : une zone de texte, une invite qui dit
   quoi écrire, les deux derniers messages du fil du dossier. ═══════════ */
.x4-appel-st-fil {
  padding: 16px 18px 18px; border-radius: var(--r-md, 18px);
  background: var(--panel-2, rgba(255, 255, 255, .42));
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
}
.x4-appel-st-fil-tete { display: flex; align-items: baseline; gap: 10px; }
.x4-appel-st-fil-sur { font-size: 11px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-appel-st-fil-n { margin-left: auto; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-st-fil-zone {
  margin-top: 10px; min-height: 92px; padding: 12px 14px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px;
}
.x4-appel-st-fil-zone:focus-within { border-color: var(--v2-accent, #7d640d); box-shadow: 0 0 0 3px var(--accent-soft, rgba(245, 213, 71, .16)); }
.x4-appel-st-fil-zone textarea {
  flex: 1 1 100%; min-height: 66px; border: 0; padding: 0; resize: vertical;
  background: none; color: var(--v2-text, #16171a);
  font-family: inherit; font-size: 13.5px; line-height: 1.55; outline: none;
}
.x4-appel-st-fil-zone textarea::placeholder { color: var(--v2-text-3, #6b6f76); }
/* La pilule @Joris automatique : elle se retire par sa croix, pas par une
   frappe de recul. */
.x4-appel-st-fil-pilule {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 4px;
  border-radius: 99px; background: var(--accent-soft, rgba(245, 213, 71, .26));
  color: var(--v2-accent, #7d640d); font-size: 12.5px; font-weight: 620;
}
.x4-appel-st-fil-pilule i {
  width: 18px; height: 18px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-solid, #fff); font-style: normal; font-size: 10px; font-weight: 680;
}
.x4-appel-st-fil-pilule button { border: 0; background: none; padding: 0; margin-left: 2px; font-size: 13px; line-height: 1; color: inherit; cursor: pointer; }
.x4-appel-st-fil-pied { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
.x4-appel-st-fil-m {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 3px;
  border: 0; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .035));
  color: var(--v2-text-2, #55595f); font-family: inherit; font-size: 11.5px; font-weight: 620; cursor: pointer;
}
.x4-appel-st-fil-m i {
  width: 18px; height: 18px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-solid, #fff); font-style: normal; font-size: 9.5px; font-weight: 680; color: var(--v2-text, #16171a);
}
.x4-appel-st-fil-m:hover { color: var(--v2-text, #16171a); }
.x4-appel-st-fil-pub {
  margin-left: auto; height: 32px; padding: 0 16px; border: 0; border-radius: 99px;
  background: linear-gradient(170deg, #f5d547, #e4c033); color: var(--sur-accent, #1b1a12);
  font-family: inherit; font-size: 12.5px; font-weight: 640; cursor: pointer;
}
/* Les deux derniers messages — deux, pas plus : on est en session d'appel. */
.x4-appel-st-fil-msgs { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); display: flex; flex-direction: column; gap: 10px; }
.x4-appel-st-fil-msg { display: flex; gap: 10px; align-items: flex-start; }
.x4-appel-st-fil-av {
  flex: none; width: 24px; height: 24px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--info-soft, rgba(53, 104, 196, .11)); color: var(--info-fg, #3160b4); font-size: 10px; font-weight: 680;
}
.x4-appel-st-fil-corps { min-width: 0; flex: 1; }
.x4-appel-st-fil-qui { display: flex; align-items: baseline; gap: 8px; }
.x4-appel-st-fil-qui b { font-size: 12.5px; font-weight: 620; color: var(--v2-text, #16171a); }
.x4-appel-st-fil-qui time { margin-left: auto; font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-st-fil-corps p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--v2-text, #16171a); }
.x4-appel-st-fil-corps .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-appel-st-fil-voir { align-self: flex-start; border: 0; background: none; padding: 0; font-family: inherit; font-size: 12px; color: var(--v2-accent, #7d640d); cursor: pointer; }
/* L'avatar prend une teinte dérivée du nom (aplat plein, encre blanche) ;
   soi-même prend l'accent, pour repérer ses messages sans lire le nom. */
.x4-appel-st-fil-av { background: var(--x4a-av, var(--info-fg, #3160b4)); color: #fff; font-weight: 680; }
.x4-appel-st-fil-av.est-moi { background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); }
[data-theme="dark"] .x4-appel-st-fil-av:not(.est-moi) { filter: brightness(1.3); }
.x4-appel-st-fil-av.est-anonyme { background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text-3, #6b6f76); filter: none; }
.x4-appel-st-fil-qui b.est-anonyme { color: var(--v2-text-3, #6b6f76); font-weight: 400; font-style: italic; }
/* ─── À l'étage 2, on parle : ce qui servait à composer se replie ─────
   La Ligne 2 disparaît (on ne compose plus) et le numéro en 40 px, sans
   usage pendant l'appel, passe en 15 px sur la ligne du poste ; le bouton
   Appeler part avec. ~170 px libérés : la zone de saisie et les trois
   issues tiennent au-dessus du pli sans défilement — un défilement
   pendant un appel est un échec (Claude Design, 07/09). */
.x4-appel-l2 { max-height: 200px; transition: max-height .18s ease, opacity .18s ease, padding .18s ease, margin .18s ease; overflow: hidden; }
.x4-appel-ss[data-x4a-etat="2"] .x4-appel-l2 { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin: 0; pointer-events: none; }
/* La carte : en état 1 elle sert à décider et à composer ; en état 2 elle ne
   sert plus qu'à rappeler qui est au bout du fil — une ligne d'environ
   50 px à la place de 290. Même repli à 180 ms que la Ligne 2, jamais un
   display:none sec (la colonne sauterait sous les yeux). */
.x4-appel-st-grand { max-height: 900px; transition: max-height .18s ease, opacity .18s ease; overflow: hidden; }
.x4-appel-st-ligne {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .18s ease, opacity .18s ease;
}
.x4-appel-ss[data-x4a-etat="2"] .x4-appel-st-grand { max-height: 0; opacity: 0; }
.x4-appel-ss[data-x4a-etat="2"] .x4-appel-st-ligne { max-height: 80px; opacity: 1; }
.x4-appel-ss[data-x4a-etat="2"] .x4-appel-st-carte { padding: 13px 18px; }
.x4-appel-st-ligne-soc { font-size: 19px; font-weight: 680; letter-spacing: -.025em; color: var(--v2-text, #16171a); }
.x4-appel-st-ligne-qui { font-size: 13px; color: var(--v2-text-2, #55595f); }
.x4-appel-st-ligne-tel { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--v2-text-2, #55595f); }
.x4-appel-st-ligne-fiche { border: 0; background: none; padding: 0; font-family: inherit; font-size: 12px; color: var(--v2-accent, #7d640d); cursor: pointer; }
/* Le bilan : le cumul de la semaine une seule fois, sous les trois nombres. */
.x4-appel-p-bilan-sem { font-size: 10.5px; color: var(--v2-text-3, #6b6f76); margin-top: 3px; }

/* ═══ LES LAPINS EN JAUNE, ET LEUR LISTE (Joris, 07/09/2026) ═══════════
   « Tout ce qui est en lien avec les lapins, je le veux jaune. » La case
   de la première page, la pilule de la barre de session, l'intertitre, le
   badge : l'ambre vif du CRM, plus l'orange d'alerte. */
.x4-appel-att-alerte.est-lapins {
  border-left-color: var(--v2-accent, #7d640d);
  background: color-mix(in srgb, var(--accent-bright, #f5d547) 26%, var(--panel-solid, #fff));
}
.x4-appel-att-alerte.est-lapins svg, .x4-appel-att-alerte.est-lapins b { color: var(--v2-accent, #7d640d); }
.x4-appel-att-alerte.est-lapins .x4-appel-att-alerte-a { border-color: var(--v2-accent, #7d640d); color: var(--v2-accent, #7d640d); }
.x4-appel-st-lapins {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 0; border-radius: 99px;
  background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12);
  font-family: inherit; font-size: 11.5px; font-weight: 640; cursor: pointer;
}
.x4-appel-st-lapins b { font-weight: 680; font-variant-numeric: tabular-nums; }
.x4-appel-st-lapins:hover { filter: brightness(.96); }

/* ─── Sélection multiple dans la vue Liste (Joris, 08/09/2026) : une case
   par ligne, une barre au-dessus de la liste, « Passer en Visio & tarifs »
   puis le commentaire obligatoire — la grammaire de la bascule du
   pipeline. ─────────────────────────────────────────────────────────── */
.x4-appel-t-coche { width: 28px; padding-right: 0 !important; }
.x4-appel-t-coche input { width: 15px; height: 15px; margin: 0; accent-color: var(--v2-accent, #7d640d); cursor: pointer; vertical-align: middle; }
.x4-appel-table tbody tr.est-coche { background: color-mix(in srgb, var(--accent-soft, rgba(245, 213, 71, .26)) 60%, transparent); }
.x4-appel-sel { margin: 0 0 10px; padding: 10px 14px; border-radius: var(--r-sm, 12px); background: var(--inset, rgba(0, 0, 0, .035)); display: flex; flex-direction: column; gap: 8px; }
.x4-appel-sel-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--v2-text, #16171a); }
.x4-appel-sel-ligne > b { font-weight: 640; }
.x4-appel-sel-noms { color: var(--v2-text-3, #6b6f76); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x4-appel-sel-b { margin-left: auto; height: 30px; padding: 0 12px; 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: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer; }
.x4-appel-sel-b + .x4-appel-sel-b { margin-left: 0; }
.x4-appel-sel-b:hover { border-color: var(--stroke-3, rgba(20, 20, 25, .14)); color: var(--v2-text, #16171a); }
.x4-appel-sel-b.est-visio { background: var(--accent-bright, #f5d547); border-color: transparent; color: var(--sur-accent, #1b1a12); }
.x4-appel-sel-b.est-visio:hover { filter: brightness(.97); color: var(--sur-accent, #1b1a12); }
.x4-appel-sel-mot { display: flex; flex-direction: column; gap: 8px; }
.x4-appel-sel-t { font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-appel-sel-t b { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-appel-sel-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-appel-sel-pied { display: flex; justify-content: flex-end; gap: 8px; }
.x4-appel-sel-pied .x4-appel-sel-b { margin-left: 0; }


/* ─── L'agent des listes (10/09/2026) : la note et le retour ─────────── */
.x4-appel-lst-note { flex: none; display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 550; color: var(--v2-text-2, #55595f); background: var(--inset, rgba(0, 0, 0, .035)); white-space: nowrap; }
.x4-appel-lst-note b { font-size: 12px; font-weight: 680; color: var(--v2-text, #16171a); }
.x4-appel-lst-note i { font-style: normal; font-size: 10px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-lst-note[data-ton="pos"] { background: var(--pos, rgba(23, 128, 81, .15)); }
.x4-appel-lst-note[data-ton="pos"] b { color: var(--pos-fg, #136d45); }
.x4-appel-lst-note[data-ton="accent"] { background: var(--accent-soft, rgba(245, 213, 71, .26)); }
.x4-appel-lst-note[data-ton="accent"] b { color: var(--v2-accent, #7d640d); }
.x4-appel-lst-note[data-ton="neg"] { background: var(--neg-soft, rgba(193, 75, 64, .11)); }
.x4-appel-lst-note[data-ton="neg"] b { color: var(--neg-fg, #a74137); }
.x4-appel-agent { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; border-radius: var(--r-md, 18px); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); }
.x4-appel-agent-tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.x4-appel-agent-sur { font-size: 11px; font-weight: 640; letter-spacing: .07em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-appel-agent-sante { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--v2-text-2, #55595f); }
.x4-appel-agent-sante b { font-size: 18px; font-weight: 680; color: var(--v2-text, #16171a); }
.x4-appel-agent-sante i { font-style: normal; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-agent-tend { font-size: 12px; font-weight: 680; }
.x4-appel-agent-tend[data-ton="pos"] { color: var(--pos-fg, #136d45); }
.x4-appel-agent-tend[data-ton="neg"] { color: var(--neg-fg, #a74137); }
.x4-appel-agent-plus { margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 620; color: var(--v2-text-2, #55595f); cursor: pointer; }
.x4-appel-agent-plus:hover { color: var(--v2-text, #16171a); text-decoration: underline; }
.x4-appel-agent-conseils { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--v2-text, #16171a); line-height: 1.35; }
.x4-appel-agent-lien { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.x4-appel-agent-lien:hover { color: var(--v2-accent, #7d640d); }
.x4-appel-agent-detail { display: flex; flex-direction: column; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); padding-top: 6px; }
.x4-appel-agent-l { display: flex; align-items: center; gap: 14px; padding: 6px 4px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-xs, 9px); }
.x4-appel-agent-l:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-appel-agent-l-nom { flex: 1; min-width: 0; font-size: 13px; font-weight: 640; color: var(--v2-text, #16171a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-appel-agent-l-m { flex: none; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; min-width: 72px; }
.x4-appel-agent-l-m b { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-appel-agent-pied { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-appel-lst-note.est-fiche { margin-left: 8px; padding: 0 6px; font-size: 10.5px; vertical-align: middle; }
.x4-appel-lst-note.est-fiche b { font-size: 11px; }
.x4-appel-st-src .x4-appel-lst-note { margin-left: 10px; }
.x4-appel-agent-bob { display: inline-block; width: 32px; height: 32px; margin-right: 9px; border-radius: 99px; overflow: hidden; font-style: normal; vertical-align: -10px; }
.x4-appel-agent-bob svg { display: block; width: 100%; height: 100%; }
.x4-appel-agent-conseils li { display: flex; align-items: baseline; gap: 8px; }
.x4-appel-agent-x { flex: none; margin-left: auto; width: 22px; height: 22px; border: 0; border-radius: 99px; background: transparent; font: inherit; font-size: 15px; line-height: 1; color: var(--v2-text-3, #6b6f76); cursor: pointer; }
.x4-appel-agent-x:hover { background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text, #16171a); }

/* Le mot de Bob avant l'appel : signaux de besoin, pourquoi, accroche (17/09/2026). */
.x4-appel-st-bob { margin-top: 12px; padding: 11px 13px; border-radius: var(--r-sm, 12px); background: var(--accent-soft, rgba(245, 213, 71, .14)); border: 1px solid var(--accent-bright, #f5d547); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.x4-appel-st-bob-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--v2-text-2, #55595f); }
.x4-appel-st-bob-tete b { font-weight: 680; color: var(--v2-text, #16171a); }
.x4-appel-st-bob-tete i { font-style: normal; padding: 1px 8px; border-radius: 99px; background: var(--panel-solid, #fff); border: 1px solid var(--stroke, rgba(20, 20, 25, .12)); font-size: 11.5px; color: var(--v2-text, #16171a); }
.x4-appel-st-bob-av { width: 20px; height: 20px; border-radius: 99px; overflow: hidden; display: inline-flex; }
.x4-appel-st-bob-av svg { width: 100%; height: 100%; display: block; }
.x4-appel-st-bob-pq { font-size: 13.5px; font-weight: 550; color: var(--v2-text, #16171a); }
.x4-appel-st-bob-acc { font-size: 13.5px; line-height: 1.45; color: var(--v2-text, #16171a); }
.x4-appel-st-bob-acc span { display: block; font-size: 10.5px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-appel-st-bob-alerte { font-size: 12.5px; font-weight: 620; color: var(--warn-fg, #8a5510); }

/* ── Bob mène la journée (24/09/2026) : le plan, le suivi, son mot ── */
.x4-appel-agent-plan { margin: 10px 0 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.4; }
.x4-appel-agent-plan li::marker { font-weight: 680; color: var(--v2-accent, #7d640d); }
.x4-appel-agent-plan .x4-appel-agent-lien { text-align: left; }
.x4-appel-agent-suivi { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 6px; font-size: 12.5px; color: var(--v2-text-2, #55595f); font-variant-numeric: tabular-nums; }
.x4-appel-agent-suivi b { font-weight: 680; color: var(--v2-text, #16171a); margin-right: 4px; }
.x4-appel-agent-mot { margin: 0 0 10px; padding: 10px 14px; border-radius: var(--r-md, 18px); background: var(--accent-soft, rgba(245, 213, 71, .26)); font-size: 13.5px; line-height: 1.45; color: var(--v2-text, #16171a); }