/* ─── Campagne e-mail — ceux qu'on ne peut pas appeler (17/09/2026) ───
   Trois onglets : la cible, les trois mails, le suivi et les chauds. */
.x4-mail { display: flex; flex-direction: column; gap: 12px; }
.x4-mail-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.x4-mail-retour { border: 0; background: none; padding: 0; color: var(--v2-accent, #7d640d); font-family: inherit; font-size: 12px; font-weight: 640; cursor: pointer; }
.x4-mail-retour:hover { text-decoration: underline; }
.x4-mail-titre { font-size: 15px; font-weight: 680; letter-spacing: -.02em; color: var(--v2-text, #16171a); }
.x4-mail-statut { margin-left: auto; padding: 3px 11px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .035)); font-size: 12px; font-weight: 620; color: var(--v2-text-2, #55595f); }
.x4-mail-statut[data-ton="pos"] { background: var(--pos-soft, rgba(19, 109, 69, .11)); color: var(--pos-fg, #136d45); }
.x4-mail-statut[data-ton="accent"] { background: var(--accent-soft, rgba(245, 213, 71, .26)); color: var(--v2-accent, #7d640d); }

.x4-mail-onglets { display: flex; gap: 4px; padding: 4px; align-self: flex-start; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-mail-onglet { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 99px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--v2-text-2, #55595f); cursor: pointer; white-space: nowrap; }
.x4-mail-onglet:hover { color: var(--v2-text, #16171a); }
.x4-mail-onglet.est-actif { 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, .05)); }
.x4-mail-compte { padding: 1px 7px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .035)); font-size: 11px; color: var(--v2-text-2, #55595f); }
.x4-mail-compte.est-vif { background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); font-weight: 640; }

.x4-mail-carte { padding: 14px 16px; border-radius: var(--r-md, 18px); background: var(--panel-solid, #fff); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); }
.x4-mail-carte.est-lancer { border-color: var(--accent-bright, #f5d547); }
.x4-mail-carte.est-chauds { border-color: var(--pos-fg, #136d45); }
.x4-mail-soustitre { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-mail-tete2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.x4-mail-tete2 .x4-mail-soustitre { margin-bottom: 0; }
.x4-mail-tete2 .x4-mail-btn + .x4-mail-btn { margin-left: 6px; }
.x4-mail-aide { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--v2-text-3, #6b6f76); }
.x4-mail-aide code { padding: 1px 5px; border-radius: var(--r-xs, 9px); background: var(--inset, rgba(0, 0, 0, .05)); font-size: 11.5px; color: var(--v2-text-2, #55595f); cursor: help; }
.x4-mail-grand { margin: 0 0 6px; font-size: 14px; color: var(--v2-text, #16171a); }
.x4-mail-grand b { font-size: 18px; font-weight: 680; }
.x4-mail-note { padding: 9px 12px; border-radius: var(--r-sm, 12px); background: var(--inset, rgba(0, 0, 0, .035)); font-size: 12.5px; line-height: 1.5; color: var(--v2-text-2, #55595f); }
.x4-mail-note.est-vive { background: var(--accent-soft, rgba(245, 213, 71, .26)); color: var(--v2-text, #16171a); }
.x4-mail-vide { padding: 14px 4px; font-size: 12.5px; line-height: 1.5; color: var(--v2-text-3, #6b6f76); }
.x4-mail-ecartes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-mail-ecartes b { font-weight: 640; color: var(--v2-text-2, #55595f); }

.x4-mail-chiffres { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-mail-chiffres b { margin-right: 6px; font-size: 20px; font-weight: 680; letter-spacing: -.02em; color: var(--v2-text, #16171a); }
.x4-mail-chiffres .est-oui b { color: var(--pos-fg, #136d45); }
.x4-mail-chiffres .est-non b { color: var(--v2-text-2, #55595f); }

.x4-mail-btn { height: 32px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .16)); background: var(--panel-solid, #fff); font: inherit; font-size: 12.5px; font-weight: 620; color: var(--v2-text, #16171a); cursor: pointer; white-space: nowrap; }
.x4-mail-btn:hover { border-color: var(--v2-text-3, #6b6f76); }
.x4-mail-btn.est-plein { border-color: transparent; background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); }
.x4-mail-btn.est-non { color: var(--neg-fg, #b3261e); }
.x4-mail-btn:disabled { opacity: .5; cursor: default; }
.x4-mail-mini { height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); font: inherit; font-size: 11.5px; font-weight: 620; color: var(--v2-text-2, #55595f); cursor: pointer; white-space: nowrap; }
.x4-mail-mini:hover { border-color: var(--v2-text-3, #6b6f76); color: var(--v2-text, #16171a); }
.x4-mail-mini.est-plein { border-color: transparent; background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); }

/* Les lignes : la cible, les chauds, le journal. */
.x4-mail-ligne, .x4-mail-chaud { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(170px, 1.1fr) auto auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); font-size: 12.5px; }
.x4-mail-chaud { grid-template-columns: auto minmax(160px, 1fr) minmax(160px, 1fr) auto auto; }
.x4-mail-qui, .x4-mail-soc { display: flex; flex-direction: column; min-width: 0; }
.x4-mail-qui b, .x4-mail-soc b { font-weight: 640; color: var(--v2-text, #16171a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-mail-qui span, .x4-mail-soc span { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-mail-tag { padding: 2px 9px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .035)); font-size: 11px; font-weight: 620; color: var(--v2-text-2, #55595f); white-space: nowrap; }
.x4-mail-tag.est-oui { background: var(--pos-soft, rgba(19, 109, 69, .11)); color: var(--pos-fg, #136d45); }
.x4-mail-tag.est-source { background: none; border: 1px solid var(--stroke, rgba(20, 20, 25, .1)); }
.x4-mail-quand { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4-mail-actes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.x4-mail-jour { display: grid; grid-template-columns: 120px 190px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); font-size: 12px; color: var(--v2-text-2, #55595f); }
.x4-mail-jour b { font-weight: 620; color: var(--v2-text, #16171a); }

/* La séquence : qui écrit, les deux versions, les trois mails. */
.x4-mail-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.x4-mail-grille label, .x4-mail-large { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 620; color: var(--v2-text-3, #6b6f76); }
.x4-mail-large { margin-top: 10px; }
.x4-mail input[type="text"], .x4-mail input[type="email"], .x4-mail input[type="number"], .x4-mail textarea { padding: 8px 10px; border-radius: var(--r-xs, 9px); border: 1px solid var(--stroke, rgba(20, 20, 25, .16)); background: var(--panel-solid, #fff); color: var(--v2-text, #16171a); font: inherit; font-size: 13px; font-weight: 400; }
.x4-mail textarea { line-height: 1.5; resize: vertical; }
.x4-mail input:focus, .x4-mail textarea:focus { outline: 2px solid var(--accent-bright, #f5d547); outline-offset: -1px; }
.x4-mail input:disabled, .x4-mail textarea:disabled { opacity: .65; }
.x4-mail-bascule { display: flex; gap: 4px; padding: 3px; border-radius: 99px; background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-mail-bascule button { height: 28px; padding: 0 13px; border-radius: 99px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 550; color: var(--v2-text-2, #55595f); cursor: pointer; }
.x4-mail-bascule button.est-actif { 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, .05)); }
.x4-mail-etape { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-mail-etape-tete { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--v2-text-3, #6b6f76); }
.x4-mail-etape-tete b { font-weight: 680; color: var(--v2-text, #16171a); }
.x4-mail-etape-tete label { display: inline-flex; align-items: center; gap: 6px; }
.x4-mail-etape-tete input { width: 62px; padding: 4px 8px; }
.x4-mail-objet { font-weight: 620 !important; }
.x4-mail-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.x4-mail-apercu { margin-top: 10px; border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); border-radius: var(--r-sm, 12px); overflow: hidden; }
.x4-mail-apercu-tete { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; background: var(--inset, rgba(0, 0, 0, .035)); font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-mail-apercu-tete b { font-weight: 680; color: var(--v2-text, #16171a); white-space: nowrap; }
.x4-mail-apercu pre { margin: 0; padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; line-height: 1.55; color: var(--v2-text, #16171a); }
@media (max-width: 1100px) { .x4-mail-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x4-mail-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .x4-mail-ligne .x4-mail-tag.est-source, .x4-mail-ligne .x4-mail-tag:nth-of-type(2) { display: none; } }

/* ── La cible filtrable (24/09/2026) : secteur, région, ville, ceux qui recrutent ── */
.x4-mail-filtres { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.x4-mail-filtre-l { font-size: 11px; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); margin-right: 4px; }
.x4-mail-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); font-family: inherit; font-size: 12.5px; font-weight: 550; color: var(--v2-text, #16171a); cursor: pointer; }
.x4-mail-chip span { font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-mail-chip input { margin: 0; }
.x4-mail-chip.est-actif { background: var(--accent-soft, rgba(245, 213, 71, .26)); border-color: var(--accent-bright, #f5d547); font-weight: 620; }
.x4-mail-cherche { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); font-family: inherit; font-size: 12.5px; color: var(--v2-text, #16171a); width: 180px; }
.x4-mail-lien { padding: 0; border: 0; background: none; color: var(--v2-accent, #7d640d); font-family: inherit; font-size: 12px; font-weight: 620; cursor: pointer; }
.x4-mail-tableau { display: flex; flex-direction: column; max-height: 640px; overflow-y: auto; margin-top: 8px; }
.x4-mail-sect { font-size: 12px; color: var(--v2-text-2, #55595f); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Six colonnes dans la liste entière : qui, société, secteur, recrute, raison, source. */
.x4-mail-tableau .x4-mail-ligne { grid-template-columns: minmax(160px, 1.2fr) minmax(160px, 1.2fr) minmax(120px, .9fr) auto auto auto; }