/* ============================================================
   Écran Système — Utilisateurs v4 (maquette 24-systeme)
   Toutes les classes sont préfixées x4-systeme- : zéro collision.
   Jetons v2 partout (tokens-v2.css, portée [data-v2]) avec repli.
   Le ton « warn » (statut Invité) n'existe pas dans tokens-v2.css :
   défini localement, clair ET sombre — aplat seulement.
   ============================================================ */

.x4-systeme {
  font-family: var(--font, 'Manrope', -apple-system, system-ui, sans-serif);
  color: var(--v2-text, #16171a);
  /* #kanban-container (v2-coque) apporte déjà `20px 30px` : ne pas les
     doubler (mesuré : bande à x=288 large de 1252 au lieu de x=258 large
     de 1312 ; colonnes 689/551 au lieu de 722/578). Mesure maquette :
     contenu à 30px du bord, 1er bloc à 20px sous l'en-tête, 86px en bas
     (20 de la coque + 66 ici) — même règle que clients.css et todo.css. */
  padding: 0 0 66px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 12px;
  align-items: start;
  min-width: 1180px;
  letter-spacing: -0.01em;
  /* Mesure maquette : interlignage 1,2 partout (11px→13, 12.5px→15,
     13.5px→16, 15px→18) ; l'héritage de l'app (Manrope, ≈1,4) faisait
     chaque bloc plus haut (carte de stat 75 au lieu de 68, ligne de
     journal 56 au lieu de 54). */
  line-height: 1.2;
  /* Ton local absent de tokens-v2.css */
  --x4sys-warn-fg: #9a5b06;
  --x4sys-warn-soft: rgba(224, 150, 32, .14);
}
[data-app-theme="dark"] .x4-systeme {
  --x4sys-warn-fg: #e8a54b;
  --x4sys-warn-soft: rgba(232, 165, 75, .16);
}

/* [hidden] doit rester masqué même sur du flex */
.x4-systeme [hidden] { display: none !important; }

/* ── Colonne gauche ──────────────────────────────────────────── */
.x4-systeme-gauche {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ── Cartes de stats (4) ─────────────────────────────────────── */
.x4-systeme-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.x4-systeme-stat {
  background: var(--panel, rgba(255, 255, 255, .66));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  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, .05));
  padding: 12px 15px;
}
.x4-systeme-stat-n {
  font-size: 24px;
  font-weight: 680;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text, #16171a);
}
.x4-systeme-stat-n[data-tone="accent"] { color: var(--v2-accent, #7d640d); }
.x4-systeme-stat-n[data-tone="info"]   { color: var(--info-fg, #3160b4); }
.x4-systeme-stat-n[data-tone="mute"]   { color: var(--v2-text-3, #6b6f76); }
.x4-systeme-stat-lbl {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  margin-top: 1px;
}

/* ── Carte commune (Accès au CRM / Journal) ──────────────────── */
.x4-systeme-carte {
  background: var(--panel, rgba(255, 255, 255, .66));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-lg, 26px);
  box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, .03), 0 10px 30px -12px rgba(0, 0, 0, .14));
  overflow: hidden;
  min-width: 0;
}
.x4-systeme-carte-tete {
  padding: 13px 18px 12px;
  border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075));
}
.x4-systeme-carte-titre {
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.02em;
}
.x4-systeme-carte-sous {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  margin-top: 1px;
}

/* ── Ligne utilisateur ───────────────────────────────────────── */
.x4-systeme-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  transition: background 0.14s;
}
.x4-systeme-row:last-child { border-bottom: 0; }
.x4-systeme-row:hover { background: var(--inset, rgba(0, 0, 0, .035)); }

.x4-systeme-row-main { min-width: 0; flex: 1 1 0%; }
.x4-systeme-row-l1 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.x4-systeme-row-nom {
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-systeme-vous {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  font-style: italic;
  flex-shrink: 0;
}
.x4-systeme-row-sous {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pastille de rôle */
.x4-systeme-role {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  color: var(--v2-text-2, #55595f);
  background: var(--inset, rgba(0, 0, 0, .035));
}
.x4-systeme-role[data-tone="accent"] { color: var(--v2-accent, #7d640d); background: var(--accent-soft, rgba(245, 213, 71, .26)); }
.x4-systeme-role[data-tone="info"]   { color: var(--info-fg, #3160b4);  background: var(--info-soft, rgba(53, 104, 196, .11)); }

/* Statut + dernière connexion */
.x4-systeme-row-etat {
  text-align: right;
  flex-shrink: 0;
  /* La pastille de statut est en ligne : c'est la police du BLOC qui
     donne la hauteur de sa ligne. La maquette hérite du 16px du
     document, le CRM du 14px de l'app — d'où une ligne mesurée à 38 au
     lieu de 40, et des lignes de 63 au lieu de 65. Les deux enfants ont
     leur propre taille (11px) : seul le talon de ligne change. */
  font-size: 16px;
}
.x4-systeme-statut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 21px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 550;
  color: var(--v2-text-3, #6b6f76);
  background: var(--inset, rgba(0, 0, 0, .035));
}
.x4-systeme-statut[data-tone="pos"]  { color: var(--pos-fg, #136d45); background: var(--pos, rgba(23, 128, 81, .15)); }
.x4-systeme-statut[data-tone="warn"] { color: var(--x4sys-warn-fg); background: var(--x4sys-warn-soft); }
.x4-systeme-statut-dot {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: currentcolor;
}
.x4-systeme-row-vu {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  margin-top: 3px;
}

/* Boutons d'action ronds */
.x4-systeme-row-actes {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.x4-systeme-act {
  cursor: pointer;
  /* 32 MESURÉ en maquette : elle déclare 30 sur un <button> repassé en
     content-box par sa remise à zéro, + 2 de filet. Ici, box-border. */
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: transparent;
  color: var(--v2-text-2, #55595f);
  padding: 0;
  transition: background 0.14s, border-color 0.14s;
}
.x4-systeme-act:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-systeme-act.est-neg { color: var(--neg-fg, #a74137); }
.x4-systeme-act.est-neg:hover { background: var(--neg-soft, rgba(193, 75, 64, .11)); }
/* Confirmation en 2 clics : le bouton s'élargit et se remplit */
.x4-systeme-act.est-confirm {
  width: auto;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 640;
  font-family: inherit;
  line-height: 1.2;
  background: var(--neg-fg, #a74137);
  border-color: var(--neg-fg, #a74137);
  color: var(--panel-solid, #fff);
}
.x4-systeme-act.est-confirm:hover { background: var(--neg-fg, #a74137); }

/* Initiales des avatars : tailles MESURÉES en maquette (36 → 12,5 ;
   18 → 11). avatarHtml() (avatars.js) pose la taille en style inline
   (0,38 × le côté, soit 14 et 7) : seul !important la reprend. Le
   composant .av partagé n'est pas touché — ni sa forme, ni sa photo,
   ni sa couleur par personne. */
.x4-systeme-av { font-size: 12.5px !important; }
.x4-systeme-jr-av { font-size: 11px !important; }

/* ── États vides / chargement / erreur ───────────────────────── */
.x4-systeme-vide {
  padding: 24px 18px;
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
  line-height: 1.5;
}
.x4-systeme-vide strong {
  display: block;
  font-weight: 640;
  color: var(--v2-text, #16171a);
  margin-bottom: 3px;
}

/* ── Journal d'activité (colonne droite) ─────────────────────── */
.x4-systeme-jr-tete {
  padding: 13px 18px 12px;
  border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.x4-systeme-jr-tete-main { flex: 1 1 0%; min-width: 0; }
.x4-systeme-jr-titrerow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.x4-systeme-jr-count {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 620;
  color: var(--v2-text-2, #55595f);
  background: var(--inset, rgba(0, 0, 0, .035));
  font-variant-numeric: tabular-nums;
}

/* Filtre par auteur (bouton + menu) */
.x4-systeme-jr-filtre { position: relative; flex-shrink: 0; }
.x4-systeme-jr-fbtn {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 30 MESURÉ (28 déclarés en maquette + 2 de filet, content-box). */
  height: 30px;
  padding: 0 11px;
  border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: transparent;
  color: var(--v2-text-2, #55595f);
  font-size: 12.5px;
  font-family: inherit;
  /* Un <button> n'hérite pas de l'interligne du bloc. */
  line-height: 1.2;
  transition: background 0.14s;
}
/* Le chevron est en encre 3 dans la maquette (stroke="var(--v2-text-3, #6b6f76)"),
   pas en encre 2 comme le libellé. */
.x4-systeme-jr-fbtn svg { color: var(--v2-text-3, #6b6f76); }
.x4-systeme-jr-fbtn:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-systeme-jr-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 210px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-sm, 12px);
  box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, .03), 0 10px 30px -12px rgba(0, 0, 0, .14));
  padding: 4px;
}
.x4-systeme-jr-mitem {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--r-xs, 9px);
  background: transparent;
  color: var(--v2-text, #16171a);
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1.2;
  text-align: left;
  transition: background 0.14s;
}
.x4-systeme-jr-mitem:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-systeme-jr-mitem.est-actif { background: var(--accent-soft, rgba(245, 213, 71, .26)); }
.x4-systeme-jr-mitem-nom {
  flex: 1 1 0%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-systeme-jr-mitem-n {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  font-variant-numeric: tabular-nums;
}

/* Lignes du journal */
.x4-systeme-jr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  transition: background 0.14s;
}
.x4-systeme-jr-row:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-systeme-jr-ico {
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs, 9px);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--accent-soft, rgba(245, 213, 71, .26));
  color: var(--v2-accent, #7d640d);
}
.x4-systeme-jr-ico[data-tone="pos"] { background: var(--pos, rgba(23, 128, 81, .15)); color: var(--pos-fg, #136d45); }
.x4-systeme-jr-ico[data-tone="neg"] { background: var(--neg-soft, rgba(193, 75, 64, .11)); color: var(--neg-fg, #a74137); }
.x4-systeme-jr-main { min-width: 0; flex: 1 1 0%; }
.x4-systeme-jr-lbl {
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: -0.01em;
}
.x4-systeme-jr-det {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-systeme-jr-droite { text-align: right; flex-shrink: 0; }
.x4-systeme-jr-par {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.x4-systeme-jr-par-nom {
  font-size: 11px;
  color: var(--v2-text-2, #55595f);
}
.x4-systeme-jr-date {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Pied : voir tout / réduire */
.x4-systeme-jr-pied {
  padding: 12px 18px;
  /* Même talon de ligne que la maquette (16px hérités du document) :
     pied mesuré à 43, contre 42 avec le 14px de l'app. */
  font-size: 16px;
}
.x4-systeme-jr-plus {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 550;
  /* Un <button> n'hérite pas de l'interligne : sans ça, 18 au lieu de 15. */
  line-height: 1.2;
  color: var(--v2-accent, #7d640d);
}
.x4-systeme-jr-plus:hover { text-decoration: underline; }


/* ── Les droits écran par écran (modale « Droits de … ») ──────────── */
.x4-systeme-act.est-regle { color: var(--pos-fg, #136d45); }
.x4-droits { display: flex; flex-direction: column; gap: 10px; font-family: var(--font, 'Manrope', -apple-system, system-ui, sans-serif); letter-spacing: -0.01em; line-height: 1.2; }
.x4-droits-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 8px; border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075)); }
.x4-droits-qui { display: flex; align-items: center; gap: 12px; min-width: 0; }
.x4-droits-nom { font-size: 15px; font-weight: 680; color: var(--v2-text, #16171a); }
.x4-droits-sous { margin-top: 3px; font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-droits-chiffres { display: flex; align-items: flex-start; gap: 10px; max-width: 360px; padding: 8px 12px; border-radius: var(--r-sm, 12px); background: var(--accent-soft, rgba(245, 213, 71, .26)); cursor: pointer; }
.x4-droits-chiffres input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--v2-accent, #7d640d); }
.x4-droits-chiffres-t { display: flex; flex-direction: column; gap: 2px; }
.x4-droits-chiffres-t b { font-size: 13px; font-weight: 680; color: var(--v2-text, #16171a); }
.x4-droits-chiffres-t small { font-size: 11.5px; color: var(--v2-text-2, #55595f); }
.x4-droits-groupe { border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); border-radius: var(--r-md, 18px); overflow: hidden; background: var(--panel-solid, #fff); }
.x4-droits-groupe-tete { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--inset, rgba(0, 0, 0, .035)); border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-droits-groupe-nom { font-size: 13.5px; font-weight: 680; color: var(--v2-text, #16171a); }
.x4-droits-groupe-lbl { margin-left: auto; font-size: 11px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-droits-ecran { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-droits-ecran:first-of-type { border-top: 0; }
.x4-droits-ecran-nom { flex: 1; font-size: 13px; color: var(--v2-text, #16171a); }
.x4-droits-trio { display: inline-flex; border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); border-radius: 99px; overflow: hidden; background: var(--panel-solid, #fff); }
.x4-droits-choix { position: relative; cursor: pointer; }
.x4-droits-choix input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.x4-droits-choix span { display: block; padding: 5px 11px; font-size: 12px; font-weight: 620; color: var(--v2-text-2, #55595f); white-space: nowrap; border-left: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-droits-choix:first-child span { border-left: 0; }
.x4-droits-choix input:checked + span { color: var(--v2-text, #16171a); background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-droits-choix[data-niveau="voir"] input:checked + span { color: var(--info-fg, #3160b4); background: var(--info-soft, rgba(53, 104, 196, .11)); }
.x4-droits-choix[data-niveau="modifier"] input:checked + span { color: var(--pos-fg, #136d45); background: var(--pos, rgba(23, 128, 81, .15)); }
.x4-droits-choix[data-niveau="rien"] input:checked + span { color: var(--neg-fg, #a74137); background: var(--neg-soft, rgba(193, 75, 64, .11)); }
.x4-droits-choix input:focus-visible + span { outline: 2px solid var(--accent-bright, #f5d547); outline-offset: -2px; }
.x4-droits-trio.est-groupe .x4-droits-choix span { font-size: 11.5px; padding: 4px 10px; }
.x4-droits-pied { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.x4-droits-pied-note { font-size: 12px; color: var(--v2-text-3, #6b6f76); }


/* ── Bob et les intégrations (carte de gauche, sous les accès) ── */
.x4-bobi { margin-top: 12px; }
.x4-bobi-av { display: inline-block; width: 30px; height: 30px; margin-right: 8px; border-radius: 99px; overflow: hidden; font-style: normal; vertical-align: -9px; }
.x4-bobi-av svg { display: block; width: 100%; height: 100%; }
.x4-bobi-bloc { padding: 12px 18px 14px; border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); display: flex; flex-direction: column; gap: 8px; }
.x4-bobi-l1 { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.x4-bobi-l1 b { font-weight: 680; color: var(--v2-text, #16171a); }
.x4-bobi-form { display: flex; gap: 8px; flex-wrap: wrap; }
.x4-bobi-in { flex: 1; min-width: 220px; height: 34px; padding: 0 10px; border-radius: var(--r-xs, 9px); border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); font: inherit; font-size: 13px; color: var(--v2-text, #16171a); }
.x4-bobi-in.est-court { flex: 0 1 220px; }
.x4-bobi-in:focus { outline: 2px solid var(--accent-bright, #f5d547); outline-offset: -1px; }
.x4-bobi-btn { height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--stroke, rgba(20, 20, 25, .075)); background: var(--panel-solid, #fff); font: inherit; font-size: 12.5px; font-weight: 620; color: var(--v2-text-2, #55595f); cursor: pointer; white-space: nowrap; }
.x4-bobi-btn.est-plein { border-color: transparent; background: var(--accent-bright, #f5d547); color: #16171a; font-weight: 640; }
.x4-bobi-btn:disabled { opacity: .5; cursor: default; }
.x4-bobi-actes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.x4-bobi-note { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-bobi-apercu, .x4-bobi-bilan { padding: 10px 12px; border-radius: var(--r-xs, 9px); background: var(--inset, rgba(0, 0, 0, .035)); font-size: 12.5px; line-height: 1.45; color: var(--v2-text, #16171a); }
.x4-bobi-bilan { background: var(--pos, rgba(23, 128, 81, .15)); }

/* Mails automatiques (13/09/2026) : une ligne par mail, l'interrupteur à
   gauche, le texte à droite ; puis ce qui va partir. */
.x4-mails-groupe { margin: 14px 0 6px; font-size: 10.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-3, #6b6f76); }
.x4-mails-ligne { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-mails-ligne.est-coupe .x4-mails-corps { opacity: .55; }
.x4-mails-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.x4-mails-corps b { font-weight: 640; color: var(--v2-text, #16171a); }
.x4-mails-qui { color: var(--v2-text-2, #55595f); }
.x4-mails-de { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-mails-ess { display: inline-block; align-self: flex-start; margin-left: 0; padding: 1px 7px; border-radius: 99px; background: var(--pos-soft, rgba(21, 115, 71, .12)); color: var(--pos-fg, #136d45); font-size: 10.5px; font-weight: 640; }
.x4-mails-inter { position: relative; flex: none; width: 38px; height: 22px; cursor: pointer; }
.x4-mails-inter input { position: absolute; opacity: 0; width: 0; height: 0; }
.x4-mails-inter i { position: absolute; inset: 0; border-radius: 99px; background: var(--stroke, rgba(20, 20, 25, .18)); transition: background .15s; }
.x4-mails-inter i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.x4-mails-inter input:checked + i { background: var(--pos-fg, #136d45); }
.x4-mails-inter input:checked + i::after { transform: translateX(16px); }
.x4-mails-inter input:disabled + i { opacity: .5; cursor: default; }
.x4-mails-suite { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--stroke, rgba(20, 20, 25, .075)); }
.x4-mails-suite-t { font-size: 12.5px; font-weight: 640; margin-bottom: 6px; }
.x4-mails-suite-t.est-recents { margin-top: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-mails-pl { display: flex; gap: 10px; padding: 4px 0; font-size: 12.5px; color: var(--v2-text-2, #55595f); }
.x4-mails-pl-q { flex: none; width: 118px; font-variant-numeric: tabular-nums; color: var(--v2-text, #16171a); }
.x4-mails-pl.est-erreur, .x4-mails-pl.est-coupe { color: var(--neg-fg, #b3261e); }
.x4-mails-pl.est-envoye .x4-mails-pl-q { color: var(--pos-fg, #136d45); }
.x4-mails-vide { font-size: 12.5px; color: var(--v2-text-3, #6b6f76); }
.x4-mails-ap-meta { margin-bottom: 8px; font-size: 12px; color: var(--v2-text-2, #55595f); }
.x4-mails-ap-note { margin: 8px 0 0; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }

/* Ce que Claude consomme (15/09/2026) : tuiles par période, tableau par usage */
.x4-jetons-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.x4-jetons-tuile { padding: 10px 12px; border-radius: var(--r-xs, 9px); background: var(--inset, rgba(0, 0, 0, .035)); min-width: 0; }
.x4-jetons-t { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--v2-text-3, #6b6f76); font-weight: 620; }
.x4-jetons-v { margin-top: 2px; font-size: 20px; font-weight: 680; line-height: 1.2; color: var(--v2-text, #16171a); font-variant-numeric: tabular-nums; }
.x4-jetons-s { margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--v2-text-3, #6b6f76); }
.x4-jetons-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.x4-jetons-table th { text-align: left; padding: 4px 8px; font-size: 11px; font-weight: 620; text-transform: uppercase; letter-spacing: .04em; color: var(--v2-text-3, #6b6f76); border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .08)); }
.x4-jetons-table td { padding: 5px 8px; border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); color: var(--v2-text, #16171a); }
.x4-jetons-table td:not(:first-child), .x4-jetons-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.x4-jetons-modeles { font-size: 12px; color: var(--v2-text-2, #55595f); }
.x4-jetons-modeles b { font-weight: 640; color: var(--v2-text, #16171a); }
@media (max-width: 900px) { .x4-jetons-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Les agendas Google lus en plus (16/09/2026). */
.x4-google-lus { display: flex; flex-direction: column; gap: 6px; }
.x4-google-lu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.x4-google-lu b { font-weight: 620; }

/* Système › SMS (16/09/2026) : les champs du transport choisi seulement. */
.x4-sms [data-sms-champs] { display: contents; }
.x4-sms [data-sms-champs][hidden] { display: none; }
.x4-sms select.x4-bobi-in { flex: 1 1 320px; font-family: inherit; font-size: 13px; }
/* Modifier un utilisateur : le bouton dit son nom, le nom et la photo ouvrent aussi le profil (23/09/2026) */
.x4-systeme-act-modifier { width: auto; display: inline-flex; align-items: center; padding: 0 10px 0 8px; gap: 5px; font-size: 12px; font-weight: 620; border-color: var(--v2-text-3, #6b6f76); color: var(--v2-text, #16171a); }
.x4-systeme-act-modifier:hover { background: var(--accent-bright, #f5d547); border-color: transparent; color: var(--sur-accent, #1b1a12); }
.x4-systeme-row-ouvrir { cursor: pointer; }
.x4-systeme-row-ouvrir:hover .x4-systeme-row-nom { text-decoration: underline; text-underline-offset: 3px; }