/* Les jetons suivent la palette commune de la Passerelle 2.0
   (portail-shell.css, chargé avant). */
:root {
  --kw-red: #B40101;
  --kw-red-dark: #8E0101;
  --ink: #16181D;
  --muted: #677080;
  --bg: #F6F7F9;
  --card: #FFFFFF;
  --line: #E3E6EB;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  background: var(--bg);
  color: var(--ink);
}
.hidden { display: none !important; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
}
/* Hauteur imposée, largeur libre : les proportions d'origine (1,17) sont
   conservées exactement, quelle que soit la taille d'affichage. */
.brand .logo {
  height: 34px;
  width: auto;
  display: block;
}
.agent-box { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; }
.link-btn {
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.85rem;
}

.login-screen { display: flex; justify-content: center; padding: 12vh 1rem; }
.login-card { max-width: 420px; text-align: center; }
.login-card h1 { margin-top: 0; }
.login-a-propos { margin: 22px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, #677080); }
.login-a-propos a { color: inherit; text-decoration: underline; white-space: nowrap; }
/* Version couleur sur fond clair, hauteur imposée et largeur libre pour
   conserver les proportions d'origine (1,17). */
.logo-login {
  height: 74px;
  width: auto;
  display: block;
  margin: 0 auto 1.1rem;
}
#google-signin { display: flex; justify-content: center; margin-top: 0.6rem; }
/* Le lien vers la connexion par e-mail, sous le bouton Google (08/10/2026). */
.lien-mail {
  display: block; margin: 1.1rem auto 0; padding: 0.4rem; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer;
}
.lien-mail:hover { color: var(--ink, #16181D); }
.lien-mail:focus-visible { outline: 2px solid #B40101; outline-offset: 2px; border-radius: 4px; }
#login-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.2rem; }
#login-form input { text-align: center; }
.separator {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 1.1rem 0 0;
  position: relative;
}
.separator::before, .separator::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: var(--line);
}
.separator::before { left: 0; }
.separator::after { right: 0; }

.app { max-width: 1000px; margin: 0 auto; padding: 1.2rem; }
/* Les listes et les fiches façon Modelo (17/10/2026) prennent la largeur : 1 320 px au plus. */
#view-app.app { max-width: 1320px; }

/* Les onglets du module Contacts ne s'affichent plus : le bandeau latéral mène
   déjà à chacune de ces quatre pages, et deux navigations pour le même endroit
   ne servent qu'à faire hésiter. Ils restent dans la page, masqués, parce que
   c'est EUX que le bandeau actionne — l'adresse /index.html#liste ouvre la page
   en cliquant l'onglet correspondant (voir ouvrirOngletDeLAdresse dans app.js).
   Les retirer du HTML casserait la navigation du bandeau. */
.tabs { display: none; }
.tab {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.55rem 1.1rem;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--muted);
}
.tab.active {
  background: var(--kw-red);
  border-color: var(--kw-red);
  color: #fff;
  font-weight: 600;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.card h2 { margin-top: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.8rem 1rem;
}
label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); }
input, select, textarea {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--kw-red);
  outline-offset: 0;
  border-color: var(--kw-red);
}
label.full { margin-top: 0.8rem; }
.checks { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 0.9rem; }
.checks label, .check-inline { flex-direction: row; align-items: center; gap: 0.4rem; }

.actions { margin-top: 1.1rem; display: flex; gap: 0.8rem; }
.btn-primary {
  background: var(--kw-red);
  color: #fff;
  border: none;
  padding: 0.65rem 1.4rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: var(--kw-red-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 0.65rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
}

.msg { padding: 0.6rem 0.9rem; border-radius: 8px; font-size: 0.92rem; }
.msg.ok { background: #e6f6e6; color: #1a6b1a; }
.msg.err, .error { background: #fdecec; color: var(--kw-red-dark); }
.error { padding: 0.6rem 0.9rem; border-radius: 8px; }

.table-wrap { overflow-x: auto; margin-top: 0.6rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
tr:hover td { background: #fafafa; }
.row-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--kw-red);
  text-decoration: underline;
  padding: 0 0.3rem;
}

.list-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.list-head input { min-width: 220px; }
.count { color: var(--muted); font-size: 0.85rem; font-weight: 400; }

.mapping { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.mapping .map-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.mapping .map-row .col-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
progress { width: 100%; height: 14px; accent-color: var(--kw-red); }

.dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem;
  max-width: 560px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.dialog textarea { width: 100%; font-family: monospace; font-size: 0.8rem; word-break: break-all; }
.snippet {
  background: #1d1d1f;
  color: #d8f0d8;
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 0.75rem;
  overflow-x: auto;
}
.muted { color: var(--muted); font-size: 0.82rem; }
.sep { border: none; border-top: 1px solid var(--line); margin: 1.2rem 0 0.9rem; }
.btn-danger {
  background: #fff;
  color: var(--kw-red-dark);
  border: 1px solid var(--kw-red);
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-danger:hover { background: #fdecec; }
.section {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--text-secondary, #677080);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
  margin: 1.6rem 0 0.9rem;
}
.section:first-of-type { margin-top: 0.4rem; }
.hint { font-size: 0.78rem; color: var(--muted); font-weight: 400; }
.tag-picker { display: flex; gap: 0.5rem; align-items: center; }
.tag-picker input { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.chip {
  background: #f2e5e5;
  color: var(--kw-red-dark);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.chip button {
  border: none;
  background: none;
  color: var(--kw-red-dark);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}
.dup-hint { font-size: 0.8rem; margin-top: 0.2rem; }
.dup-hint.own { color: #a06000; }
.dup-hint.other { color: var(--kw-red-dark); }
#import-report { margin-top: 0.8rem; font-size: 0.9rem; }
#import-report ul { margin: 0.3rem 0; padding-left: 1.2rem; }

.fiche-acq {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.7rem;
}
.fiche-acq .btn-secondary { margin-top: 0.5rem; font-size: 0.82rem; padding: 0.35rem 0.8rem; }
.fiche-acq .btn-secondary + .btn-secondary { margin-left: 0.4rem; }
/* Les biens proposés à un acquéreur et le geste « Écarter » (16/10/2026). */
.bp-panneau { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.bp-ligne { padding: 0.45rem 0; border-bottom: 1px dashed var(--line); font-size: 0.86rem; }
.bp-ligne:last-of-type { border-bottom: 0; }
.bp-pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.3rem; }
.bp-match { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: space-between; }
.bp-limites { margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); }
.bp-limites summary { cursor: pointer; }
.bp-limites ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }

.carte-suivante { margin-top: 1.2rem; }

.acq-nom { font-weight: 600; color: var(--kw-red); margin-bottom: 0.15rem; }

/* --- Carte de sélection du secteur -------------------------------------- */
.carte {
  position: relative;
  height: 340px;
  margin: 0.4rem 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #e8eaed;
  cursor: crosshair;
  touch-action: none; /* le geste de déplacement est géré en JS */
}
.carte-tuiles { position: absolute; inset: 0; }
.carte-tuiles img {
  position: absolute;
  width: 256px;
  height: 256px;
  user-select: none;
  -webkit-user-drag: none;
}
.carte-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.carte-zone {
  fill: rgba(180, 1, 1, 0.18);
  stroke: var(--kw-red);
  stroke-width: 2;
  stroke-linejoin: round;
}
polyline.carte-zone { fill: none; }
.carte-sommet { fill: #fff; stroke: var(--kw-red); stroke-width: 2; }
.carte-sommet.premier { fill: var(--kw-red); }
.carte-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.68rem;
  padding: 0 0.3rem;
  border-radius: 4px 0 0 0;
  color: #444;
}
.carte-outils { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.carte-outils .btn-secondary { font-size: 0.82rem; padding: 0.3rem 0.7rem; }
.carte-outils .hint { margin-left: 0.3rem; }

/* --- Reclassement du contact à la clôture d'une fiche -------------------- */
.reclasse {
  margin-top: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--kw-red);
  border-radius: 8px;
  background: #fbfbfc;
}
.reclasse p { margin: 0 0 0.5rem; font-size: 0.88rem; }
.reclasse .chips { margin-bottom: 0.5rem; }
.reclasse .ligne { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.reclasse select { min-width: 190px; }

/* --- Recherche et pagination des fiches acquéreurs ---------------------- */
.acq-recherche { display: flex; gap: 0.4rem; margin: 0.2rem 0 0.8rem; }
.acq-recherche input {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: inherit;
}
.acq-recherche input:focus { outline: 2px solid var(--kw-red); outline-offset: -1px; }
.acq-pagination { text-align: center; margin-top: 0.6rem; }
.acq-pagination .btn-secondary { font-size: 0.85rem; }

/* --- Espace MCA ---------------------------------------------------------- */

/* L'onglet est visuellement distinct : il ne mène pas aux données de l'agent
   mais à celles de tout le Market Center. */
.tab-mca { border-color: var(--kw-red); color: var(--kw-red); }
.tab-mca.active { background: var(--kw-red); border-color: var(--kw-red); color: #fff; }

.mca-verrou { max-width: 560px; }
.mca-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.mca-form input { flex: 1; min-width: 200px; }

.chiffres { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }
.kpi {
  flex: 1;
  min-width: 140px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
}
.kpi.critique { border-left: 3px solid #b40101; }
.kpi.important { border-left: 3px solid #c76a00; }
.kpi.anticipation { border-left: 3px solid #0b6bcb; }
.kpi.a_verifier { border-left: 3px solid #5a6b7a; }
.kpi b { display: block; font-size: 1.7rem; line-height: 1.2; }
.kpi span { color: var(--muted); font-size: 0.8rem; }

/* Les chiffres sont alignés à droite en visant l'EN-TÊTE autant que la
   cellule : sans `th.n`, les libellés restent à gauche et l'œil décroche. */
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

.mca-periode { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; margin: 0.9rem 0 0.4rem; }
.mca-periode label { display: flex; flex-direction: row; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--muted); }
.mca-periode #mca-dates { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }
.mca-legende { display: flex; gap: 0.5rem; align-items: center; font-size: 0.82rem; color: var(--muted); }
.mca-courbe { width: 100%; height: auto; display: block; }
.mca-courbe .grille { stroke: var(--line); stroke-width: 1; }
.mca-courbe .axe-ligne { stroke: #c9c9d0; stroke-width: 1; }
.mca-courbe .axe { fill: var(--muted); font-size: 12px; font-family: inherit; }
.mca-courbe .courbe { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.mca-courbe .courbe.critique { stroke: #b40101; }
.mca-courbe .courbe.important { stroke: #c76a00; }
.mca-courbe .point { stroke: #fff; stroke-width: 1.2; }
.mca-courbe .point.critique { fill: #b40101; }
.mca-courbe .point.important { fill: #c76a00; }
.mca-sous-courbe { margin: 0.4rem 0 0; }
.mca-vide { color: var(--muted); font-size: 0.9rem; padding: 1.5rem 0; }

.mca-filtres { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.8rem 0; }
.mca-filtres input { min-width: 240px; }

/* Pastilles de gravité, partagées par la légende et les listes d'anomalies. */
.pt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: #5a6b7a; }
.pt.critique { background: #b40101; }
.pt.important { background: #c76a00; }
.pt.anticipation { background: #0b6bcb; }

.dossier {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  margin-bottom: 0.7rem;
}
.dossier[data-grav='critique'] { border-left-color: #b40101; }
.dossier[data-grav='important'] { border-left-color: #c76a00; }
.dossier[data-grav='anticipation'] { border-left-color: #0b6bcb; }
.dossier header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #f0f0f3;
  flex-wrap: wrap;
}
.dossier h3 { margin: 0; font-size: 1rem; }
.dossier h3 small { font-weight: 400; color: var(--muted); margin-left: 0.4rem; font-size: 0.82rem; }
.dossier .who { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.85rem; }
.dossier .meta { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: flex-start; }
.dossier .meta span {
  background: var(--bg);
  border-radius: 20px;
  padding: 0.12rem 0.6rem;
  font-size: 0.75rem;
  color: #444;
  white-space: nowrap;
}
.dossier .meta .phase { background: #eaf5ee; color: #1c6b3c; font-weight: 600; }
.dossier .meta .lien {
  background: #fff;
  border: 1px solid var(--kw-red);
  border-radius: 20px;
  padding: 0.12rem 0.6rem;
  font-size: 0.75rem;
  color: var(--kw-red);
  text-decoration: none;
  font-weight: 600;
}
.dossier .meta .lien:hover { background: var(--kw-red); color: #fff; }
.dossier ul { list-style: none; margin: 0; padding: 0.45rem 0.5rem; }
.dossier .an { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.3rem 0.4rem; border-radius: 6px; }
.dossier .an:hover { background: #fafafb; }
.dossier .an .pt { margin-top: 0.45rem; }
.dossier .fam {
  flex: none;
  width: 150px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-top: 0.1rem;
}
.dossier .msg { flex: 1; font-size: 0.9rem; }
.dossier .msg em { display: block; color: var(--muted); font-style: normal; font-size: 0.8rem; margin-top: 0.1rem; }

.mca-note { font-size: 0.87rem; color: #333; }
.mca-note ul { margin: 0.3rem 0 0.8rem; padding-left: 1.1rem; }
.mca-note li { margin-bottom: 0.3rem; }
.mca-note em { color: var(--muted); font-style: normal; }
.mca-note h3 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--kw-red); }

@media (max-width: 700px) {
  .dossier .fam { width: 100%; }
  .dossier .an { flex-wrap: wrap; }

  /* Quatre onglets ne tiennent pas dans 375 px : le quatrième était coupé net,
     sans rien pour laisser deviner qu'il existait. La barre défile
     horizontalement, d'un doigt, et garde ses onglets entiers. */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
  .sous-onglets { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sous-onglets::-webkit-scrollbar { display: none; }
  .sous-onglet { flex: 0 0 auto; white-space: nowrap; }
}

/* --- Espace MCA : sous-navigation et page Leads --------------------------- */

.sous-onglets { display: flex; gap: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
/* Les onglets des contacts disparaissent dans Acquéreurs (app.js, `marquerOngletsContacts`). */
#contacts-onglets[hidden] { display: none; }
.sous-onglet {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.1rem;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.sous-onglet:hover { color: var(--ink); }
.sous-onglet.active { color: var(--kw-red); border-bottom-color: var(--kw-red); }

/* Zone de dépôt : un label qui enveloppe l'input, pour rester cliquable
   entièrement sans script. */
.depot {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 1.2rem;
  margin: 1rem 0 0.5rem;
  cursor: pointer;
  background: var(--bg);
}
.depot:hover { border-color: var(--kw-red); }
.depot-titre { font-weight: 600; color: var(--kw-red); }
/* Le champ natif est masqué sans être retiré du flux : il continue de recevoir
   le clic par son <label>, mais son libellé « Aucun fichier choisi » ne
   contredit plus la liste que nous tenons nous-mêmes — elle seule fait foi,
   puisque les dépôts s'y accumulent. */
.depot input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.liste-fichiers { list-style: none; padding: 0; margin: 0.4rem 0; font-size: 0.88rem; }
.liste-fichiers li { padding: 0.15rem 0; }
.case { flex-direction: row; align-items: center; gap: 0.4rem; }

/* Pastille d'état de la part Market Center. */
.etat { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 20px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.etat.vert { background: #eaf5ee; color: #1c6b3c; }
.etat.rouge { background: #fdeaea; color: #b40101; }
.alerte { color: #c76a00; font-weight: 600; }

/* Neuf colonnes ne tiennent pas dans un panneau étroit : plutôt que d'écraser
   chaque cellule jusqu'à l'illisible, le tableau garde sa largeur utile et
   défile dans sa carte. */
table.leads { font-size: 0.85rem; min-width: 940px; }
table.leads td { vertical-align: top; }
table.leads .repartition { font-size: 0.78rem; color: var(--muted); line-height: 1.45; white-space: nowrap; }
table.leads .lien {
  border: 1px solid var(--kw-red);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  color: var(--kw-red);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
table.leads .lien:hover { background: var(--kw-red); color: #fff; }

/* Les tableaux larges défilent dans leur carte plutôt que d'élargir la page. */
#leads-table, #leads-fichiers-lus, #leads-confirmer, #leads-inex { overflow-x: auto; }

/* Sur un téléphone, un tableau de six colonnes élargissait la PAGE ENTIÈRE :
   relevé sur l'espace MCA, la fenêtre passait de 375 à 627 px et tout le site
   se mettait à défiler de côté, bandeau compris. Le tableau défile désormais
   dans sa carte, la page ne bouge plus.
   `display:block` est ce qui permet à `overflow-x` de s'appliquer : un
   `<table>` ne défile pas autrement. */
@media (max-width: 700px) {
  .tab-panel table, .carte table { display: block; overflow-x: auto; max-width: 100%; }
  .tab-panel table thead, .carte table thead { display: table-header-group; }
}

/* Verdicts de la MCA sur les rapprochements douteux. */
td.verdict { white-space: nowrap; }
.btn-mini {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  margin-right: 0.3rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}
.btn-mini:disabled { opacity: 0.5; cursor: default; }
.btn-mini.oui { border-color: #1c6b3c; color: #1c6b3c; }
.btn-mini.oui:hover:not(:disabled) { background: #1c6b3c; color: #fff; }
.btn-mini.non { border-color: var(--muted); color: var(--muted); }
.btn-mini.non:hover:not(:disabled) { background: var(--muted); color: #fff; }
.arbitre { color: #1c6b3c; font-weight: 600; }

/* Liste des fichiers déposés : chaque dépôt s'ajoute au précédent, et chaque
   ligne peut être retirée. */
.liste-fichiers li { display: flex; align-items: center; gap: 0.45rem; padding: 0.18rem 0; }
.liste-fichiers li.total { color: var(--muted); font-size: 0.82rem; padding-top: 0.4rem; }
.btn-retirer {
  flex: none;
  width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.btn-retirer:hover { border-color: var(--kw-red); color: var(--kw-red); }
.lien-retirer {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--kw-red);
  text-decoration: underline;
  cursor: pointer;
}

.etat.bleu { background: #e8f1fb; color: #0b6bcb; }
table.leads .verdict { margin-top: 0.35rem; }

/* ═══ LES LISTES FAÇON MODELO (17/10/2026, Divy BARTRA : « Mes contacts » et « Mes fiches acquéreurs »
   présentées « de la même manière que l'est la liste des fiches acquéreurs sur Modelo », le gros bouton
   « Nouveau » en haut à droite). Les couleurs viennent des jetons de la Passerelle (portail-shell.css). ═══ */
.lm { display: grid; gap: 14px; min-width: 0; }
/* Un enfant de grille garde sa largeur de contenu : sans ceci, le tableau élargit toute la page au lieu de défiler. */
.lm > *, .lm-carte, .lm-defile { min-width: 0; max-width: 100%; }
#tab-liste, #tab-acquereurs { min-width: 0; }
.lm-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lm-titre { margin: 0; font-size: 1.12rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.lm-nouveau { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 0;
  border-radius: var(--radius-md, 10px); background: var(--kw-red); color: #fff; font: 600 15px/1 var(--font);
  cursor: pointer; box-shadow: var(--shadow-sm); }
.lm-nouveau svg { width: 18px; height: 18px; }
.lm-nouveau:hover { background: var(--kw-red-dark); }
.lm-nouveau:focus-visible { outline: 3px solid var(--kw-red-line, #e8a9a9); outline-offset: 2px; }
.lm-filtres { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-end; }
.lm-filtre { display: grid; gap: 2px; flex: 1 1 160px; min-width: 150px; font-size: 12.5px; color: var(--text-secondary, #677080); }
.lm-filtre--large { flex: 2 1 240px; }
.lm-filtre select, .lm-filtre input { width: 100%; min-height: 38px; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--border-strong, #c9ced6);
  border-radius: 0; background: transparent; font: 500 14px var(--font); color: var(--ink); }
.lm-filtre select:focus, .lm-filtre input:focus { outline: none; border-bottom-color: var(--kw-red); }
.lm-suivi { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font: 500 14px var(--font); color: var(--ink); }
.lm-effacer { flex: 0 0 auto; }
.lm-effacer[hidden] { display: none; }
.lm-carte { padding: 0; overflow: hidden; }
.lm-barre { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.lm-compte { margin-left: auto; font-weight: 600; font-size: 14px; color: var(--ink); }
.lm-tri { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary, #677080); }
.lm-tri select { min-height: 34px; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--border-strong, #c9ced6); background: transparent;
  font: 500 13.5px var(--font); color: var(--ink); }
.lm-defile { margin: 0; position: relative; }   /* contient les libellés cachés des en-têtes (sinon la page s'élargit) */
.lm-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 14px; }
.lm-table--fiches { min-width: 960px; }
.body .lm-table--fiches td, .body .lm-table--fiches th { padding-left: 6px; padding-right: 6px; }
.lm-table--fiches .lm-ico { width: 32px; height: 32px; margin-left: 0; }
.body .lm-table.lm-table--fiches th { white-space: normal; vertical-align: bottom; }
.body .lm-table th { font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.lm-table--fiches .lm-c-lieu { min-width: 120px; }
.lm-c-court { text-align: center; }
.lm-table th { padding: 12px 10px; border-bottom: 1px solid var(--line); background: var(--bg-subtle, #fafbfc); text-align: left;
  font-weight: 500; font-size: 13px; color: var(--text-secondary, #677080); white-space: nowrap; }
.lm-table td { padding: 14px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lm-table tr.lm-alt > td { background: var(--bg-rangee, #f7f8fb); }   /* une ligne sur deux : fiches acquéreurs et contacts (17/10/2026) ; le survol l'emporte */
.lm-table tbody tr:hover > td { background: var(--bg-hover, #f5f7fa); }
.lm-table .lm-vide { padding: 28px 16px; text-align: center; color: var(--text-secondary, #677080); }
.lm-c-qui { width: 48px; }
.lm-c-n, .lm-c-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lm-c-mail, .lm-c-tel, .lm-c-nom .lm-chip { white-space: nowrap; }
.lm-table th { text-transform: none; letter-spacing: 0; }
.lm-c-actions { white-space: nowrap; text-align: right; }
.lm-c-rond { text-align: center; }
.lm-ini { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 6px;
  background: var(--green, #1f9d55); color: #fff; font: 700 11.5px/1 var(--font); letter-spacing: .04em; }
.lm-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 5px 10px; border: 0; border-radius: 6px; background: var(--blue-soft, #e8eefc);
  color: var(--blue, #2f4bb5); font: 500 14px/1.3 var(--font); text-align: left; cursor: pointer; }
.lm-chip:hover { text-decoration: underline; }
.lm-chip:disabled { cursor: default; text-decoration: none; }
.lm-chip:focus-visible, .lm-ico:focus-visible, .lm-rond:focus-visible, .lm-info:focus-visible { outline: 2px solid var(--blue, #2f4bb5); outline-offset: 2px; }
.lm-info { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff;
  font: 700 12px/1 Georgia, serif; cursor: help; }
.lm-plus { color: var(--blue, #2f4bb5); font-weight: 600; cursor: help; }
.lm-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: 2px; border: 0; border-radius: 8px;
  background: transparent; color: var(--blue, #2f4bb5); cursor: pointer; }
.lm-ico svg { width: 19px; height: 19px; }
.lm-ico:hover { background: var(--blue-soft, #e8eefc); }
.lm-ico:disabled { opacity: .4; cursor: default; }
.lm-rond { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--border-default, #dfe3e8); border-radius: 50%;
  background: #fff; color: var(--text-secondary, #677080); font: 600 14px/1 var(--font); cursor: pointer; }
.lm-rond--plein { border-color: var(--purple, #7c3aed); color: var(--purple, #7c3aed); }
.lm-panneau > td { background: var(--bg-subtle, #fafbfc); }
.lm-close > td { opacity: .55; }
.lm-pages { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
.lm-pages:empty { display: none; }
.lm-pages select { min-height: 36px; padding: 4px 6px; border: 0; border-bottom: 1px solid var(--border-strong, #c9ced6); background: transparent;
  font: 500 14px var(--font); color: var(--blue, #2f4bb5); }
.lm-fleche { display: inline-grid; place-items: center; width: 40px; height: 36px; border: 1px solid var(--border-default, #dfe3e8); border-radius: 8px;
  background: #fff; color: var(--ink); cursor: pointer; }
.lm-fleche svg { width: 18px; height: 18px; }
.lm-fleche:disabled { opacity: .35; cursor: default; }
.lm-revenir { margin: 12px 16px; }
#acq-liste > .fiche-acq, #acq-liste > .hint { margin: 12px 16px; }
.fm-retour { margin-bottom: 12px; }
.fm-retour[hidden] { display: none; }
.fm-retour__btn { display: inline-flex; align-items: center; gap: 8px; }
.fm-retour__btn svg { width: 17px; height: 17px; }
#acq-onglets[hidden] { display: none; }
@media (max-width: 640px) {
  .lm-nouveau { width: 100%; justify-content: center; }
  .lm-compte { margin-left: 0; width: 100%; }
}

/* ═══ LES FICHES FAÇON MODELO (17/10/2026, Divy BARTRA : le mode édition et création d'une fiche contact et d'une
   fiche acquéreur « présenté visuellement et fonctionnellement le plus proche possible de ce qui est proposé par
   Modelo »). Les cartes de Modelo, une ligne par champ (le libellé à gauche, le champ à droite), les choix « Oui /
   Non » et « Obligatoire / Indifférent », les pastilles, la barre « Enregistrer / Annuler » au pied. Les champs
   gardent le dessin du Design System (ds.css). ═══ */
.fm { display: grid; gap: 16px; min-width: 0; }
.fm-titre { margin: 0; font-size: 1.12rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.fm-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fm-col { display: grid; gap: 16px; min-width: 0; }
.fm-carte { min-width: 0; overflow: hidden; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .05)); }
.fm-carte__t { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--bg-subtle, #fafbfc); font: 650 13px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.fm-ico { display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  background: var(--blue-soft, #e8eefc); color: var(--blue, #2f4bb5); }
.fm-ico svg { width: 17px; height: 17px; }
.fm-ligne { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); align-items: center; gap: 4px 14px; min-width: 0;
  padding: 9px 16px; border-bottom: 1px solid var(--line); }
.fm-ligne:last-child { border-bottom: 0; }
.fm-ligne--haute { align-items: start; }
.fm-ligne--haute > label { padding-top: 10px; }
.fm-ligne > label, .fm-lib { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-secondary, #677080); }
.fm-req { margin-left: 2px; color: var(--kw-red); font-weight: 700; }
.fm-ligne input:not([type=radio]):not([type=checkbox]), .fm-ligne select, .fm-ligne textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.fm-ligne textarea { resize: vertical; }
.fm-champ, .fm-puces-champ { display: grid; gap: 6px; min-width: 0; }
.fm-tel { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); gap: 8px; min-width: 0; }
.fm-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: 8px; min-width: 0; }
.fm-minmax { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.fm-minmax label, .fm-unite { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; }
.fm-minmax label input, .fm-unite input { flex: 1 1 auto; }
.fm-minmax label span, .fm-unite span { flex: 0 0 auto; font-size: 12.5px; color: var(--text-secondary, #677080); white-space: nowrap; }
.fm-ouinon { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.fm-ouinon--col { flex-direction: column; gap: 0; }
.fm-ouinon label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; color: var(--ink); cursor: pointer; }
.fm-ouinon input { width: 18px; height: 18px; margin: 0; }
.fm-ouinon label:has(input:disabled) { color: var(--text-secondary, #677080); cursor: default; }
.fm-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-puces:empty { display: none; }
.fm .chips { margin-top: 0; }
.fm .chips:empty { display: none; }
.fm .chip { background: var(--blue-soft, #e8eefc); color: var(--blue, #2f4bb5); font-size: 13px; padding: 4px 4px 4px 10px; }
.fm .chip button { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--blue, #2f4bb5); }
.fm .chip button:hover { background: rgba(47, 75, 181, .12); }
.fm .tag-picker { min-width: 0; }
.fm .tag-picker input { min-width: 0; }
.fm .tag-picker .btn-secondary { flex: 0 0 auto; }
.fm-lecture { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font: 500 14px var(--font); color: var(--ink); }
.fm-texte { display: block; width: calc(100% - 32px); margin: 12px 16px 14px; box-sizing: border-box; resize: vertical; }
.fm-aide { display: block; margin: 0; padding: 8px 16px 12px; }
.fm-aide[hidden] { display: none; }
.fm-avec-bouton { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; }
.fm-plus { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border-default, #dfe3e8); border-radius: 50%;
  background: #fff; color: var(--blue, #2f4bb5); font: 600 20px/1 var(--font); cursor: pointer; }
.fm-plus:hover { background: var(--blue-soft, #e8eefc); }
.fm-plus:disabled { opacity: .4; cursor: default; }
.fm-zone { display: grid; gap: 6px; min-width: 0; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); }
.fm .msg { margin: 0; }
/* La barre d'enregistrement reste au pied de l'écran pendant qu'on fait défiler la fiche. */
.fm-pied { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 10px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff); box-shadow: 0 -4px 14px rgba(15, 23, 42, .06); }
#acq-liste-msg { margin: 0; }
/* Un sous-panneau masqué l'est vraiment : la liste des fiches (.lm, en grille) restait affichée sous la fiche ouverte. */
.sous-panneau[hidden] { display: none; }
@media (max-width: 960px) {
  .fm-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .fm-ligne { grid-template-columns: minmax(0, 1fr); }
  .fm-ligne--haute > label { padding-top: 0; }
  .fm-pied .btn-primary, .fm-pied .btn-secondary { flex: 1 1 0; }
}

/* LA FICHE CONTACT : l'âge, les liens entre fiches, les smartplans et la fenêtre d'inscription (22/10/2026). */
.fm-naissance { align-items: center; }
.fm-age { font-size: 13.5px; color: var(--text-secondary, #677080); white-space: nowrap; }
.fm-vide { margin: 0; padding: 12px 16px; font-size: 13.5px; color: var(--text-secondary, #677080); }
.fm-vide[hidden] { display: none; }
.cf-liens { list-style: none; margin: 0; padding: 0; }
.cf-liens[hidden] { display: none; }
.cf-liens li { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.cf-liens li > span { flex: 1 1 auto; min-width: 0; }
.cf-liens li b { font-weight: 600; color: var(--ink); }
.cf-liens li small { display: block; font-size: 12.5px; color: var(--text-secondary, #677080); }
.cf-liens .cf-vide { color: var(--text-secondary, #677080); font-size: 13.5px; }
.cf-lien-ajout { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) auto; gap: 8px; min-width: 0; }
.fm-pied--carte { padding: 12px 16px; border: 0; margin: 0; background: none; position: static; box-shadow: none; }
@media (max-width: 600px) {
  .cf-lien-ajout { grid-template-columns: minmax(0, 1fr) auto; }
  .cf-lien-ajout select { grid-column: 1 / -1; }
}
.cf-dlg { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 24px 64px rgba(16, 24, 40, .25); }
.cf-dlg::backdrop { background: rgba(20, 22, 27, .45); }
.cf-dlg__f { margin: 0; }
.cf-dlg__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.cf-dlg__tete h2 { margin: 0; font-size: 20px; font-weight: 650; }
.cf-dlg__x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; }
.cf-dlg__x:hover { background: var(--bg-hover, #f4f5f7); }
.cf-dlg__corps { display: grid; gap: 16px; padding: 20px; }
.cf-dlg__champ { display: grid; gap: 6px; font-size: 13px; color: var(--text-secondary, #677080); }
.cf-dlg__champ select, .cf-dlg__champ input { width: 100%; min-height: 42px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border-input, #dde1e7);
  border-radius: 8px; font: 400 15px var(--font); color: var(--ink); background: #fff; }
/* La case sur la ligne de son libellé : la règle générale des libellés de la page (colonne, centrée) la plaçait au-dessus. */
.cf-dlg label.cf-dlg__coche { display: inline-flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); cursor: pointer; }
.cf-dlg__coche input { width: 20px; height: 20px; margin: 0; accent-color: var(--kw-red); }
.cf-dlg__deux { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; }
.cf-dlg__deux[hidden] { display: none; }
.cf-dlg__pied { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); }
@media (max-width: 480px) { .cf-dlg__deux { grid-template-columns: 1fr; } }