/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  min-height: 44px;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-elevated-3); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-elevated-2); color: var(--text); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.28); }
.btn-sm { padding: 8px 14px; font-size: var(--fs-sm); min-height: 36px; }
.btn-lg { padding: 16px 28px; font-size: var(--fs-md); min-height: 52px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-md); flex-shrink: 0; }
.btn-icon.btn-sm { width: 36px; height: 36px; }

/* ---------- Cards & surfaces ---------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.card-tight { padding: var(--sp-4); }
.card-interactive { transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.card-interactive:hover { border-color: var(--border-strong); background: var(--bg-elevated-2); }

.panel {
  background: var(--bg-elevated-2);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field + .field { margin-top: var(--sp-4); }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%;
  padding: 13px var(--sp-4);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  color: var(--text);
  min-height: 46px;
  transition: border-color var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; }
.textarea { min-height: 96px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.hint { font-size: var(--fs-xs); color: var(--text-faint); }
.field-error .input { border-color: var(--danger); }
.error-text { font-size: var(--fs-xs); color: var(--danger); }

.checkbox-row { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.checkbox-row input[type="checkbox"] {
  appearance: none; width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--border-strong); border-radius: 6px; background: var(--bg-elevated-2);
  display: grid; place-content: center;
}
.checkbox-row input[type="checkbox"]::before {
  content: ""; width: 11px; height: 11px; transform: scale(0);
  box-shadow: inset 1em 1em var(--accent); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transition: transform var(--dur-fast) var(--ease);
}
.checkbox-row input[type="checkbox"]:checked::before { transform: scale(1); }
.checkbox-row input[type="checkbox"]:checked { border-color: var(--accent); }

/* ---------- Badges / pills / status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.01em;
}
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-neutral { background: var(--bg-elevated-3); color: var(--text-muted); }
.badge-accent { background: var(--accent-soft); color: #9db4ff; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: #ff8a94; }
.badge-gold { background: var(--gold-soft); color: var(--gold); }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 700; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-non-contacte { background: var(--status-non-contacte-soft); color: var(--status-non-contacte); }
.status-attente { background: var(--status-attente-soft); color: var(--status-attente); }
.status-relance { background: var(--status-relance-soft); color: var(--status-relance); }
.status-mandat { background: var(--status-mandat-soft); color: var(--status-mandat); }
.status-sans-suite { background: var(--status-sans-suite-soft); color: var(--status-sans-suite); }

/* ---------- Nav shell: sidebar (desktop) + bottom nav (mobile) ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: none;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-4);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-6); font-size: var(--fs-lg); font-weight: 800; }
.sidebar-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-3); border-radius: var(--radius-md);
  color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-link:hover { background: var(--bg-elevated-2); color: var(--text); }
.sidebar-link.active { background: var(--accent-soft); color: #a9bdff; }
.sidebar-foot { border-top: 1px solid var(--border); padding-top: var(--sp-4); margin-top: var(--sp-4); }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--bottom-nav-h);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 40;
}
.bottom-nav-link {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-faint); font-size: 11px; font-weight: 600;
}
.bottom-nav-link svg { width: 22px; height: 22px; }
.bottom-nav-link.active { color: var(--accent); }

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
}
.topbar-title { font-size: var(--fs-md); font-weight: 700; }

.main-content { flex: 1; min-width: 0; padding-bottom: calc(var(--bottom-nav-h) + var(--sp-6)); }
.page { padding: var(--sp-5); max-width: var(--container-max); margin: 0 auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-title { font-size: var(--fs-xl); font-weight: 800; }
.page-subtitle { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; }

@media (min-width: 1024px) {
  .sidebar { display: flex; }
  .bottom-nav { display: none; }
  .main-content { padding-bottom: var(--sp-8); }
  .page { padding: var(--sp-8); }
}

/* ---------- Tabs / filter chips ---------- */
.chip-row { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; -ms-overflow-style: none; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; padding: 9px 16px; border-radius: var(--radius-full);
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab { padding: 12px 14px; font-weight: 600; font-size: var(--fs-sm); color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: var(--text); border-color: var(--accent); }

/* ---------- List rows / tables ---------- */
.list { display: flex; flex-direction: column; gap: var(--sp-3); }
.row-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease);
}
.row-card:hover { border-color: var(--border-strong); }
.row-avatar {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--accent-soft); color: #a9bdff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-sm);
}

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { padding: 12px var(--sp-4); text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-muted); font-weight: 600; background: var(--bg-elevated); position: sticky; top: 0; }
tbody tr:hover { background: var(--bg-elevated-2); }
tbody tr:last-child td { border-bottom: none; }

/* ---------- Modal / sheet ---------- */
/* z-index 1000 : les calques de Leaflet montent jusqu'à 700 dans le flux
   de la page. À 100, toute fiche ouverte depuis une carte s'affichait
   DERRIÈRE la carte. */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay); z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  padding: var(--sp-6); padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0));
}
@media (min-width: 640px) {
  .modal-overlay { align-items: center; }
  .modal { border-radius: var(--radius-xl); }
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.modal-title { font-size: var(--fs-lg); font-weight: 800; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: var(--sp-12) var(--sp-5); color: var(--text-muted); }
.empty-state svg { width: 56px; height: 56px; margin: 0 auto var(--sp-4); opacity: 0.5; }
.empty-state h3 { color: var(--text); font-size: var(--fs-md); margin-bottom: var(--sp-2); }

/* ---------- Toast ---------- */
.toast-stack { position: fixed; top: var(--sp-4); right: var(--sp-4); left: var(--sp-4); z-index: 2000; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
@media (min-width: 640px) { .toast-stack { left: auto; align-items: flex-end; } }
.toast {
  background: var(--bg-elevated-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 14px 18px; box-shadow: var(--shadow-md); font-size: var(--fs-sm); font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-2); max-width: 400px;
  animation: toast-in var(--dur-base) var(--ease);
}
.toast.success { border-color: rgba(34,197,94,0.4); }
.toast.danger { border-color: rgba(239,68,68,0.4); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--border); border: none; margin: var(--sp-5) 0; }
.skeleton { background: linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--bg-elevated-3) 37%, var(--bg-elevated-2) 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.stat-tile { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); }
.stat-value { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.01em; }
.stat-label { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; }

.avatar-ring { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-elevated-3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); flex-shrink: 0; }

.link-accent { color: var(--accent); font-weight: 600; }
.link-accent:hover { color: var(--accent-hover); text-decoration: underline; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--text-muted); }
.icon-btn:hover { background: var(--bg-elevated-2); color: var(--text); }

.banner { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.banner-info { background: var(--info-soft); color: #bfe6ff; }
.banner-warning { background: var(--warning-soft); color: #ffd897; }
.banner-success { background: var(--success-soft); color: #b8f0cb; }
/* Manquait : une alerte grave s'affichait sans fond, donc moins visible
   qu'un simple avertissement — l'inverse de ce qu'on veut. */
.banner-danger { background: var(--danger-soft); color: #ffc2c2; }

/* ---------- Niveaux de zone (A–E) ---------- */
.niv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 7px; font-size: 11px; font-weight: 800; line-height: 1;
  color: var(--niv, var(--text-muted));
  background: color-mix(in oklab, var(--niv, var(--text-faint)) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--niv, var(--text-faint)) 38%, transparent);
}

/* ---------- Notifications ---------- */
.notif-btn { position: relative; }
.notif-dot {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  border: 2px solid var(--bg);
}

/* ---------- Fil de discussion ---------- */
.thread { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 52vh; overflow-y: auto; }
.msg { max-width: min(80%, 460px); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); }
.msg-texte { font-size: var(--fs-sm); line-height: 1.55; }
.msg-meta { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 4px; }
.msg-eux { background: var(--bg-elevated-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-moi { background: var(--accent-soft); align-self: flex-end; border-bottom-right-radius: 4px; }

/* ---------- Journal de dossier ---------- */
.timeline { display: flex; flex-direction: column; gap: var(--sp-3); }
.timeline-item { padding-left: var(--sp-4); border-left: 2px solid var(--border-strong); }

/* ---------- Codes de secours 2FA ---------- */
.codes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-2); }
.code-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm); letter-spacing: 0.04em;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; text-align: center;
}
.code-chip.used { color: var(--text-faint); text-decoration: line-through; }

/* ---------- Liens légaux ---------- */
.sidebar-legal, .doc-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-4); justify-content: center;
}
.sidebar-legal { justify-content: flex-start; gap: var(--sp-2) var(--sp-3); }
.sidebar-legal a, .doc-links a { color: var(--text-faint); font-size: var(--fs-xs); }
.sidebar-legal a:hover, .doc-links a:hover { color: var(--text-muted); text-decoration: underline; }

/* ---------- Documents de référence ---------- */
.doc-page { min-height: 100vh; }
.doc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--bg); z-index: 20;
}
.doc-body { max-width: 760px; margin: 0 auto; padding: var(--sp-8) var(--sp-5) var(--sp-16); }
.doc-sections { display: flex; flex-direction: column; gap: var(--sp-6); }
.doc-sections p { color: var(--text-muted); font-size: var(--fs-base); line-height: 1.7; margin-top: var(--sp-2); text-wrap: pretty; }
@media (min-width: 768px) { .doc-body { padding: var(--sp-12) var(--sp-8) var(--sp-16); } }

/* ---------- Carte de France ---------- */
.france-layout { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.france-map-wrap { position: relative; isolation: isolate; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elevated); }
.france-map-host { height: min(58vh, 460px); width: 100%; }
.france-side { display: flex; flex-direction: column; }
.map-legend-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4); }
.map-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(238,242,246,0.25); }
@media (min-width: 900px) {
  .france-layout { grid-template-columns: 1fr 300px; }
  .france-map-host { height: min(66vh, 560px); }
}
.leaflet-container { background: var(--bg) !important; font: inherit; }
.leaflet-control-zoom a {
  background: var(--bg-elevated-2) !important; color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
.leaflet-control-attribution {
  background: rgba(11,17,25,0.72) !important; color: var(--text-faint) !important; font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--text-muted) !important; }
.france-tip {
  background: var(--bg-elevated-3) !important; color: var(--text) !important;
  border: 1px solid var(--border-strong) !important; border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important; font-size: var(--fs-xs) !important; line-height: 1.5 !important;
}
.france-tip::before { border-top-color: var(--border-strong) !important; }

/* Le fondu de Leaflet pilote opacity image par image : la transition
   globale de l'app l'empêcherait d'aboutir et les tuiles resteraient
   invisibles. */
.leaflet-tile,
.leaflet-tile-container img {
  transition: none !important;
}

/* ---------------------------------------------------------------------
   Fraîcheur — l'élément signature de Fief.

   Le produit se vend sur une promesse de minutes. La date du jugement
   était pourtant le dernier élément de chaque carte, en gris pâle. Elle
   devient ici une MESURE : chiffres à chasse fixe, alignés en colonne
   d'une carte à l'autre, dans une couleur qui refroidit avec le temps.

   La chasse fixe n'est pas un effet de style : c'est la même famille que
   celle déjà utilisée pour les données du collecteur, et elle permet à
   l'œil de comparer deux âges sans les lire.
   --------------------------------------------------------------------- */
.age {
  flex-shrink: 0;
  display: inline-flex; align-items: baseline; gap: 3px;
  font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap;
  padding: 4px 9px; border-radius: var(--radius-full);
  border: 1px solid transparent;
}
/* Le NOMBRE en chasse fixe : c'est lui qui doit s'aligner d'une carte à
   l'autre pour qu'on compare deux âges sans les lire. L'unité, elle,
   reste dans la fonte de l'interface et en retrait — sinon l'espace
   forcé de la chasse fixe creuse un trou au milieu du badge. */
.age b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.age i { font-style: normal; font-size: var(--fs-xs); opacity: 0.75; }
/* Moins de 24 h : personne n'a encore appelé. C'est le seul état qui
   mérite d'attirer l'œil depuis l'autre bout de l'écran. */
.age-vif    { color: var(--accent);      background: var(--accent-soft);   border-color: var(--accent-soft-strong); }
.age-tiede  { color: var(--info);        background: var(--info-soft); }
.age-froid  { color: var(--text-muted);  background: var(--bg-elevated-2); }
.age-eteint { color: var(--text-faint);  background: transparent; }

/* Une pastille de statut ne doit jamais passer à la ligne : sur mobile,
   « Mandat obtenu » se cassait en deux et la pastille devenait une tache. */
.status-pill { white-space: nowrap; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Carte de dossier
   Le gabarit générique .row-card écrasait le texte contre la pastille
   dès que le nom dépassait une ligne. Ici, une grille explicite : la
   colonne de texte peut rétrécir, l'âge et le statut jamais.
   --------------------------------------------------------------------- */
.dossier-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  width: 100%; text-align: left;
  padding: var(--sp-4);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease);
}
.dossier-card:hover { border-color: var(--border-strong); }
.dossier-card .d-nom {
  font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dossier-card .d-meta {
  color: var(--text-muted); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.dossier-card .d-bas {
  grid-column: 2 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.dossier-card .d-mandataire {
  color: var(--text-faint); font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Rangée de filtres défilante
   Un filtre coupé net au bord de l'écran ressemble à un bug. Le dégradé
   dit « ça continue », et disparaît quand on est au bout.
   --------------------------------------------------------------------- */
.chip-scroll { position: relative; }
.chip-scroll > .chip-row { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.chip-scroll > .chip-row::-webkit-scrollbar { display: none; }
.chip-scroll::after {
  content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: 44px;
  pointer-events: none;
  /* Prend la couleur du conteneur : le même dégradé sur fond de page
     et à l'intérieur d'une carte, sans bande sombre parasite. */
  /* Trois arrêts plutôt que deux : sur fond sombre, un dégradé linéaire
     reste quasi invisible sur sa première moitié — l'indice ne se voyait
     pas, donc il ne servait à rien. */
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--fondu, var(--bg)) 70%, transparent) 55%,
    var(--fondu, var(--bg))
  );
  opacity: 1; transition: opacity var(--dur-fast) var(--ease);
}
.chip-scroll[data-fin="1"]::after { opacity: 0; }

/* Le fondu des rangées défilantes suit la surface qui les porte. */
.card { --fondu: var(--bg-elevated); }
.modal { --fondu: var(--bg-elevated-2); }

/* ---------------------------------------------------------------------
   Cibles tactiles
   Fief s'utilise debout, sur un trottoir, souvent d'une seule main. Les
   filtres et les boutons d'icône plafonnaient à 40 px, les liens de
   pied de page à 18 px : mesuré, sept cibles sous le seuil de 44 px.

   Corrigé uniquement pour les pointeurs imprécis (doigt) : à la souris,
   la densité actuelle est juste, et l'élargir gaspillerait de l'espace
   sur l'écran d'un directeur qui pilote son agence.

   Les marges négatives compensent le rembourrage ajouté : la zone
   touchable grandit, la mise en page ne bouge pas.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .chip { padding-top: 11px; padding-bottom: 11px; }
  .icon-btn { width: 44px; height: 44px; }
  .link-accent, .sidebar-legal a, .doc-links a {
    display: inline-block;
    padding-top: 13px; padding-bottom: 13px;
    margin-top: -13px; margin-bottom: -13px;
  }
  /* Les boutons compacts descendaient à 36 px. On relève le plancher
     sans toucher à leur rembourrage horizontal : ils gardent leur
     compacité visuelle, la main gagne 8 px. */
  .btn-sm, .btn-icon { min-height: 44px; }
}

/* ---------------------------------------------------------------------
   Carte de dossier sur grand écran
   La grille en deux rangées convient au téléphone. À partir d'une
   tablette, elle laisse un vide entre le mandataire et sa pastille, et
   l'œil doit descendre d'une ligne pour un dossier qui tient en une.
   Ici, tout s'aligne en colonnes : on compare cinq dossiers d'un regard
   au lieu de lire cinq cartes.
   --------------------------------------------------------------------- */
@media (min-width: 720px) {
  .dossier-card {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 190px) 72px auto;
    row-gap: 0;
  }
  /* `display: contents` fait remonter le mandataire et la pastille au
     niveau de la grille : ils deviennent de vraies colonnes, alignées
     d'une carte à l'autre. */
  .dossier-card .d-bas { display: contents; }
  /* `grid-row: 1` est indispensable : le placement automatique avance
     colonne par colonne et ne revient jamais en arrière. L'âge étant
     écrit avant le mandataire dans le HTML, ce dernier se retrouvait
     renvoyé à la ligne suivante alors que sa colonne était libre. */
  .dossier-card .d-mandataire { grid-column: 3; grid-row: 1; align-self: center; }
  .dossier-card .age { grid-column: 4; grid-row: 1; justify-self: end; }
  .dossier-card .status-pill { grid-column: 5; grid-row: 1; justify-self: end; }
}

/* Messages : une colonne sur téléphone, deux dès qu'il y a la place. */
.grid-messages { grid-template-columns: 1fr; }
/* Un élément de grille refuse par défaut de rétrécir sous la largeur de
   son contenu (min-width: auto). La rangée d'onglets, plus large que
   l'écran, poussait donc la carte au-delà du cadre : la page entière
   se décalait de 22 px vers la droite. */
.grid-messages > * { min-width: 0; }
@media (min-width: 720px) {
  .grid-messages { grid-template-columns: minmax(190px, 240px) 1fr; }
}

/* Sur téléphone, trois onglets de libellés longs se collent les uns aux
   autres. La rangée défile plutôt que de comprimer les mots. */
@media (max-width: 719px) {
  .tabs { gap: var(--sp-2); }
  .tab { padding-left: 10px; padding-right: 10px; font-size: var(--fs-xs); }
}