/* ============================================================
   Suivi des contrats (25/09/2026) — préfixe x4cs-, jetons v2 avec repli.
   Une ligne par contrat : ce qu'il dit · sa frise · la prochaine étape.
   Graisses de l'échelle (400 / 550 / 620 / 640 / 680), rayons en jetons.
   ============================================================ */
.x4cs { font-family: var(--font, 'Manrope', -apple-system, system-ui, sans-serif); color: var(--v2-text, #16171a); padding: 0 0 66px; display: flex; flex-direction: column; gap: 14px; }

/* ── En-tête ── */
.x4cs-tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.x4cs-sous { margin: 0 auto 0 0; font-size: 13px; font-weight: 550; color: var(--v2-text-2, #55595f); }
.x4cs-pilules { display: inline-flex; gap: 4px; padding: 3px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .035)); }
.x4cs-pilule { height: 28px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; color: var(--v2-text-2, #55595f); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; }
.x4cs-pilule.est-active { background: var(--panel-solid, #fff); color: var(--v2-text, #16171a); font-weight: 640; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .06)); }
.x4cs-btn { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .1)); background: var(--panel-solid, #fff); color: var(--v2-text, #16171a); font: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.x4cs-btn:hover { background: var(--inset, rgba(0, 0, 0, .035)); border-color: var(--stroke-3, rgba(20, 20, 25, .17)); }
.x4cs-btn.est-plein { background: var(--accent-bright, #f5d547); border-color: transparent; color: var(--sur-accent, #1b1a12); }
.x4cs-btn.est-plein:hover { filter: brightness(.97); }
.x4cs-btn.est-grand { height: 36px; padding: 0 16px; font-size: 13px; }
.x4cs-btn.est-discret { border-color: transparent; color: var(--v2-text-3, #6b6f76); }
.x4cs-legende { display: flex; gap: 16px; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); padding: 0 4px; }
.x4cs-legende span { display: inline-flex; align-items: center; gap: 6px; }
.x4cs-legende i { width: 10px; height: 10px; border-radius: 99px; box-sizing: border-box; border: 2px solid var(--v2-text-2, #55595f); background: var(--panel-solid, #fff); }
.x4cs-legende i.est-fait { background: var(--v2-text, #16171a); border-color: var(--v2-text, #16171a); }
.x4cs-legende i.est-prevu { border-style: dashed; }
.x4cs-legende i.est-valider { background: var(--accent-bright, #f5d547); border-color: var(--accent-bright, #f5d547); }
.x4cs-legende i.est-limite { border-color: var(--neg-fg, #a74137); }
.x4cs-legende i.est-auj { width: 2px; height: 12px; border: 0; border-radius: 0; background: var(--neg-fg, #a74137); }

/* ── Un client, ses contrats ── */
.x4cs-groupe { background: var(--panel-solid, #fff); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); border-radius: var(--r-md, 18px); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .04)); overflow: hidden; }
.x4cs-client { display: flex; align-items: center; gap: 10px; padding: 12px 18px 10px; border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .06)); }
.x4cs-client b { font-size: 14px; font-weight: 680; letter-spacing: .01em; }
.x4cs-client span { font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4cs-lien { margin-left: auto; border: 0; background: none; color: var(--v2-text-2, #55595f); font: inherit; font-size: 12px; font-weight: 620; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.x4cs-ligne { display: grid; grid-template-columns: 250px minmax(360px, 1fr) 230px; align-items: center; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .06)); cursor: pointer; transition: background .12s; }
.x4cs-ligne:last-child { border-bottom: 0; }
.x4cs-ligne:hover { background: var(--inset, rgba(0, 0, 0, .025)); }
.x4cs-quoi { font-size: 13.5px; font-weight: 640; }
.x4cs-periode { margin-top: 2px; font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4cs-chip { display: inline-block; margin-top: 7px; height: 20px; line-height: 20px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 640; background: var(--inset, rgba(0, 0, 0, .05)); color: var(--v2-text-2, #55595f); }
.x4cs-chip.est-vert { background: var(--pos-bg, #e2f3e9); color: var(--pos-fg, #136d45); }
.x4cs-chip.est-bleu { background: var(--info-bg, #e5edfb); color: var(--info-fg, #3568c4); }
.x4cs-chip.est-orange { background: var(--accent-soft, #fbf3cf); color: var(--v2-accent, #7d640d); }
.x4cs-chip.est-rouge { background: var(--neg-bg, #f8e5e2); color: var(--neg-fg, #a74137); }

/* ── La frise ── */
.x4cs-frise { position: relative; height: 68px; margin: 0 22px 0 26px; }
.x4cs-frise.est-vide { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--v2-text-3, #6b6f76); border: 1px dashed var(--stroke-3, rgba(20, 20, 25, .17)); border-radius: var(--r-sm, 12px); margin: 0; }
.x4cs-frise-piste { position: absolute; left: 0; right: 0; top: 33px; height: 3px; border-radius: 99px; background: var(--stroke-3, rgba(20, 20, 25, .12)); }
.x4cs-frise-passe { position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px; background: var(--v2-text-2, #55595f); }
.x4cs-jalon { position: absolute; top: 29px; width: 11px; height: 11px; transform: translateX(-50%); }
.x4cs-jalon i { display: block; width: 11px; height: 11px; border-radius: 99px; box-sizing: border-box; background: var(--panel-solid, #fff); border: 2px solid var(--v2-text-2, #55595f); }
.x4cs-jalon.est-fait i { background: var(--v2-text, #16171a); border-color: var(--v2-text, #16171a); }
.x4cs-jalon.est-signe i { background: var(--pos-fg, #136d45); border-color: var(--pos-fg, #136d45); }
.x4cs-jalon.est-limite i { border-color: var(--neg-fg, #a74137); }
.x4cs-jalon.est-valider i { background: var(--accent-bright, #f5d547); border-color: var(--accent-bright, #f5d547); }
.x4cs-jalon.est-prevu i { border-style: dashed; }
.x4cs-jalon.est-annule i { border-color: var(--stroke-3, rgba(20, 20, 25, .2)); }
.x4cs-jalon-txt { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; line-height: 1.15; text-align: center; color: var(--v2-text-3, #6b6f76); }
.x4cs-jalon-txt b { display: block; font-weight: 620; color: var(--v2-text-2, #55595f); }
.x4cs-jalon.est-signe .x4cs-jalon-txt b { color: var(--pos-fg, #136d45); }
.x4cs-jalon.est-limite .x4cs-jalon-txt b { color: var(--neg-fg, #a74137); }
.x4cs-jalon.est-haut .x4cs-jalon-txt { top: auto; bottom: 15px; }
.x4cs-jalon.est-muet .x4cs-jalon-txt { display: none; }
.x4cs-auj { position: absolute; top: 22px; height: 25px; width: 0; border-left: 1.5px solid var(--neg-fg, #a74137); transform: translateX(-50%); }
.x4cs-auj small { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 640; color: var(--neg-fg, #a74137); background: var(--panel-solid, #fff); padding: 0 3px; }
.x4cs-plus-tard { position: absolute; right: -22px; top: 27px; font-size: 10.5px; font-weight: 640; color: var(--v2-text-3, #6b6f76); }

/* ── La prochaine étape ── */
.x4cs-suite { font-size: 13px; font-weight: 640; }
.x4cs-suite.est-rouge { color: var(--neg-fg, #a74137); }
.x4cs-suite.est-orange { color: var(--v2-accent, #7d640d); }
.x4cs-suite.est-vert { color: var(--pos-fg, #136d45); }
.x4cs-suite-sous { margin-top: 2px; font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4cs-actes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.x4cs-actes .x4cs-btn { height: 27px; padding: 0 10px; font-size: 12px; }
.x4cs-vide { padding: 28px; text-align: center; font-size: 13px; color: var(--v2-text-3, #6b6f76); background: var(--panel-solid, #fff); border: 1px dashed var(--stroke-3, rgba(20, 20, 25, .17)); border-radius: var(--r-md, 18px); }

/* ── Le contrat ouvert ── */
.x4cs-d { display: flex; flex-direction: column; gap: 12px; font-family: var(--font, 'Manrope', -apple-system, system-ui, sans-serif); }
.x4cs-d-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.x4cs-d-tete .x4cs-chip { margin-top: 0; }
.x4cs-d-infos { display: inline-flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.x4cs-d-infos em { font-style: normal; color: var(--v2-text-3, #6b6f76); }
.x4cs-d-sig { padding: 10px 12px; border-radius: var(--r-sm, 12px); background: var(--inset, rgba(0, 0, 0, .035)); font-size: 13px; }
.x4cs-d-sig.est-ok { background: var(--pos-bg, #e2f3e9); color: var(--pos-fg, #136d45); }
.x4cs-d-sig a { color: inherit; }
.x4cs-d-actes { display: flex; gap: 6px; flex-wrap: wrap; }
.x4cs-d-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.x4cs-d h4 { margin: 0 0 6px; font-size: 12px; font-weight: 640; color: var(--v2-text-3, #6b6f76); text-transform: uppercase; letter-spacing: .04em; }
.x4cs-d-docs, .x4cs-d-journal { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.x4cs-d-docs li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .06)); }
.x4cs-d-docs a { color: var(--v2-text, #16171a); font-weight: 620; text-decoration: none; }
.x4cs-d-docs a:hover { text-decoration: underline; }
.x4cs-d-docs span { color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4cs-d-journal li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .06)); }
.x4cs-d-journal li > span { flex: 0 0 82px; color: var(--v2-text-3, #6b6f76); }
.x4cs-d-journal li.est-signe { color: var(--pos-fg, #136d45); font-weight: 620; }
.x4cs-d-journal li.est-prevu { color: var(--v2-text-3, #6b6f76); }
.x4cs-d-rien { margin: 0; font-size: 12.5px; color: var(--v2-text-3, #6b6f76); }
@media (max-width: 1100px) {
  .x4cs-ligne { grid-template-columns: 1fr; gap: 10px; }
  .x4cs-d-deux { grid-template-columns: 1fr; }
}

/* ── La case « signature en ligne » du mail de transmission (app-contrats.js) ── */
.ctr-mail-sig { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.ctr-mail-sig input { margin: 0; }
.ctr-mail-sig em { font-style: normal; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }