:root {
  /* Neutres chauds : le gris de fond porte une pointe de jaune, ce qui évite
     le bleu clinique et laisse respirer les surfaces blanches. */
  --fond: #f6f6f4;
  --surface: #ffffff;
  --surface-douce: #fafaf9;
  --bordure: #eaeae6;
  --bordure-forte: #dcdcd6;
  --texte: #191917;
  --texte-doux: #74746d;
  --texte-tres-doux: #9a9a92;

  /* Deux verts, et il faut qu'on les distingue au premier coup d'œil.

     L'ACTION — boutons primaires, liens, onglets actifs — est un vert profond,
     presque sapin. L'ÉTAT « payé » est un vert de feuille, plus clair et plus
     chaud. Les confondre reviendrait à brouiller la règle 8 : une couleur de
     statut ne dit qu'une chose, et un bouton n'est pas un statut. */
  --accent: #17553f;
  --accent-fort: #10412f;
  --accent-doux: #e8f1ed;
  --accent-bordure: #c6dcd2;

  /* Barre latérale : le même vert, poussé jusqu'au sapin sombre. Le contraste
     avec un contenu clair est voulu — les gris du contenu n'y tiendraient pas,
     on déclare donc ses propres tons. */
  --sidebar-fond: #16332a;
  --sidebar-fond-actif: #234b3d;
  --sidebar-texte: #cfdcd5;
  --sidebar-texte-fort: #ffffff;
  --sidebar-texte-doux: #8ba396;
  --sidebar-bordure: #23483b;

  /* La marque. Le sapin est le même vert que l'action — c'est voulu, c'est la
     signature du produit. La sauge n'existe que pour le fond sombre, où
     l'encre et le sapin ne se détachent plus. Aucun de ces trois tons ne sert
     jamais à dire un statut : la règle 8 tient aussi pour le logo. */
  --marque-encre: #191917;
  --marque-sapin: #17553f;
  --marque-sauge: #8fbfa2;

  --statut-paye: #3f8b5d;
  --statut-paye-doux: #f0f8f3;
  --statut-paye-bordure: #cfe6d8;

  --danger: #b3261e;
  --danger-doux: #fdecea;
  --danger-bordure: #f0cfcb;
  --orange: #b0741c;
  --orange-doux: #fdf3e2;
  --orange-bordure: #f0dfc0;

  --rayon: 10px;
  --rayon-large: 14px;
  --rayon-petit: 7px;
  --ombre: 0 1px 2px rgba(16, 16, 14, 0.04);
}

* { box-sizing: border-box; }

/* L'attribut `hidden` du navigateur ne vaut que `display: none` sans classe :
   la moindre règle de mise en page le bat. Or c'est lui qui applique la règle
   1 du brief — un champ hors sujet ne doit pas s'afficher. On le rend donc
   plus fort que nos propres dispositions. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Les chiffres s'alignent en colonne : chasse fixe partout où ils comptent. */
.cellule-montant, .compteur-valeur, .total-encaisse, table { font-variant-numeric: tabular-nums; }

/* Étiquette de zone : capitales espacées, discrètes, jamais des titres. */
.etiquette-section {
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--texte-tres-doux); margin: 0 0 10px;
}

a { color: inherit; }

/* --- La marque ------------------------------------------------------------

   Le wordmark se compose en texte, pas en image : il reste net à toute taille
   et sur tout écran, se sélectionne, se lit par un lecteur d'écran, et suit le
   nom du produit sans qu'on ait à réexporter quoi que ce soit.

   Une seule dimension pilote l'ensemble — `--logo-taille`, la hauteur du mot.
   La signature et le pavé s'en déduisent, si bien qu'un logo de 14 px et un de
   40 px gardent exactement les mêmes proportions. */
/* La police de la marque se déclare une fois, ici : le mot, la signature et
   le pavé en héritent, et il n'y a qu'un endroit à changer. */
.logo {
  display: inline-flex; align-items: center; gap: calc(var(--logo-taille, 18px) * 0.42);
  font-family: "Familjen Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.logo-texte { display: inline-flex; flex-direction: column; gap: calc(var(--logo-taille, 18px) * 0.22); }
.logo-mot {
  font-size: var(--logo-taille, 18px); font-weight: 700;
  letter-spacing: -0.028em; line-height: 1; white-space: nowrap;
}
/* La signature tient la largeur du mot : interlettrage large, corps discret. */
.logo-baseline {
  font-size: calc(var(--logo-taille, 18px) * 0.3); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
/* La marque courte : le carré arrondi du favicon, en HTML. */
.logo-pave {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--logo-taille, 18px) * 1.36); height: calc(var(--logo-taille, 18px) * 1.36);
  border-radius: calc(var(--logo-taille, 18px) * 0.34);
  font-size: calc(var(--logo-taille, 18px) * 0.78); font-weight: 700; line-height: 1;
}

.logo--claire .logo-mot { color: var(--marque-encre); }
.logo--claire .logo-mot-accent { color: var(--marque-sapin); }
.logo--claire .logo-baseline { color: var(--texte-tres-doux); }
.logo--claire .logo-pave { background: var(--marque-sapin); color: #ffffff; }

/* Sur fond sapin, l'encre et le sapin disparaissent : le mot passe en blanc,
   l'accent en sauge, et le pavé s'inverse — c'est la variante « sur sapin »
   du kit, la seule qui se détache d'un fond de sa propre famille. */
.logo--sombre .logo-mot { color: #ffffff; }
.logo--sombre .logo-mot-accent { color: var(--marque-sauge); }
.logo--sombre .logo-baseline { color: var(--sidebar-texte-doux); }
.logo--sombre .logo-pave { background: var(--marque-sauge); color: var(--marque-sapin); }

/* Monochrome : le logo prend la couleur de son contexte, sans exception —
   tampon, fax, impression en noir, fond d'une couleur qu'on ne maîtrise pas. */
.logo--mono .logo-mot, .logo--mono .logo-mot-accent { color: inherit; }
.logo--mono .logo-baseline { color: inherit; opacity: 0.55; }
.logo--mono .logo-pave { background: currentColor; color: var(--surface); }

/* Coque : barre latérale fixe à gauche, contenu sur toute la largeur restante.
   ------------------------------------------------------------------------- */
.coque { display: flex; min-height: 100vh; align-items: stretch; }

.barre-laterale {
  flex: 0 0 230px; width: 230px;
  display: flex; flex-direction: column;
  background: var(--sidebar-fond); color: var(--sidebar-texte);
  padding: 16px 12px 12px;
  position: sticky; top: 0; height: 100vh;
}

.marque {
  display: flex; align-items: center; gap: 9px;
  color: var(--sidebar-texte-fort); font-weight: 600; font-size: 14px;
  text-decoration: none; letter-spacing: -0.01em; padding: 2px 8px 16px;
}
/* L'écran de connexion : la marque en grand, seule occasion de la montrer
   avec sa signature. Le h1 ne porte plus que la sémantique. */
.connexion-marque { margin-top: 0; font-size: inherit; font-weight: inherit; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-groupe {
  margin: 14px 0 5px; padding: 0 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sidebar-texte-doux);
}
.nav-groupe:first-child { margin-top: 0; }
.nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: var(--rayon-petit);
  text-decoration: none; color: var(--sidebar-texte); font-size: 13px;
}
.nav a:hover { background: var(--sidebar-bordure); color: var(--sidebar-texte-fort); }
.nav a.actif { background: var(--sidebar-fond-actif); color: var(--sidebar-texte-fort); font-weight: 500; }
.nav-icone { flex: 0 0 15px; text-align: center; font-size: 12px; opacity: .75; }
.nav-libelle { flex: 1; min-width: 0; }
.nav-compteur { font-size: 11.5px; color: var(--sidebar-texte-doux); font-variant-numeric: tabular-nums; }
.nav a.actif .nav-compteur { color: var(--sidebar-texte); }
.nav-badge {
  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--sidebar-fond-actif); color: var(--sidebar-texte-fort);
  font-variant-numeric: tabular-nums;
}
/* Attente de traitement, pas état d'un encaissement : la règle 8 n'est pas
   entamée, ce point ne parle pas d'argent. */
.nav-point { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: 0 0 7px; }

.nav-compte {
  margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--sidebar-bordure);
  display: flex; align-items: center; gap: 9px;
}
.initiales--sombre {
  background: var(--sidebar-fond-actif); border-color: var(--sidebar-bordure);
  color: var(--sidebar-texte-fort);
}
.nav-compte-identite { flex: 1; min-width: 0; line-height: 1.25; }
.nav-compte-identite strong {
  display: block; font-size: 12.5px; color: var(--sidebar-texte-fort); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-compte-identite span { font-size: 11px; color: var(--sidebar-texte-doux); }
.nav-deconnexion { color: var(--sidebar-texte-doux); font-size: 11.5px; text-decoration: none; }
.nav-deconnexion:hover { color: var(--sidebar-texte-fort); text-decoration: underline; }

.contenu { flex: 1; min-width: 0; padding: 22px 26px 64px; }
.contenu--public { max-width: 1180px; margin: 0 auto; padding-top: 28px; }

@media (max-width: 860px) {
  .coque { flex-direction: column; }
  .barre-laterale { width: auto; flex: none; height: auto; position: static; padding-bottom: 10px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-groupe { display: none; }
  .contenu { padding: 18px 16px 48px; }
}

/* Titres et en-têtes de page ------------------------------------------ */
h1 { font-size: 20px; margin: 0; letter-spacing: -0.02em; font-weight: 600; }
h2 { font-size: 13px; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.sous-titre { color: var(--texte-doux); margin: 3px 0 0; font-size: 12.5px; }
.page-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon-large); box-shadow: var(--ombre);
  padding: 14px 18px; margin-bottom: 14px;
}
.page-identite { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-titre { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.page-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.fil-ariane { display: flex; gap: 8px; color: var(--texte-doux); margin-bottom: 12px; font-size: 13px; }
.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }
.badge-reference {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--texte-doux); margin-bottom: 2px;
}
.badge-discret { color: var(--texte-doux); font-size: 12px; }

/* Boutons et liens ---------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--rayon-petit); border: 1px solid var(--bordure-forte);
  background: var(--surface); color: var(--texte); font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer; font-family: inherit; line-height: 1.3;
  transition: background-color .12s ease, border-color .12s ease;
}
.bouton:hover { background: var(--surface-douce); border-color: var(--texte-tres-doux); }
.bouton--primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton--primaire:hover { background: var(--accent-fort); border-color: var(--accent-fort); }
.bouton--danger { color: var(--danger); border-color: #e7c6c3; background: var(--surface); }
.bouton--danger:hover { background: var(--danger-doux); }
.bouton--mini { padding: 4px 8px; font-size: 12px; }
.lien-discret { color: var(--texte-doux); text-decoration: none; font-size: 13px; }
.lien-discret:hover { color: var(--texte); text-decoration: underline; }
.lien-fort { font-weight: 500; text-decoration: none; }
.lien-fort:hover { text-decoration: underline; }

/* Filtres -------------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.filtres input, .filtres select { min-width: 170px; }

input, select, textarea {
  padding: 7px 10px; border: 1px solid var(--bordure-forte); border-radius: 6px;
  background: var(--surface); font-family: inherit; font-size: 13px; color: var(--texte);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-doux); border-color: var(--accent); }

/* Tables --------------------------------------------------------------- */
.table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
}
.table th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--texte-tres-doux);
  padding: 9px 14px; border-bottom: 1px solid var(--bordure); background: var(--surface-douce);
}
.table td { padding: 9px 14px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table--compacte td, .table--compacte th { padding: 7px 12px; }
.cellule-montant { text-align: right; white-space: nowrap; }
th.cellule-montant { text-align: right; }
.cellule-reference { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--texte-doux); }
.cellule-secondaire { color: var(--texte-doux); font-size: 12px; margin-top: 2px; }
.ligne-lot { background: #fcfcfb; }
.indent { color: var(--texte-doux); margin-right: 6px; }
.table-vide { color: var(--texte-doux); text-align: center; padding: 28px; }

/* Pastilles de statut -------------------------------------------------- */
.pastille {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--fond); color: var(--texte-doux); border: 1px solid var(--bordure);
}
.pastille--loue { background: var(--statut-paye-doux); color: var(--statut-paye); border-color: var(--statut-paye-bordure); }
.pastille--vacant { background: var(--orange-doux); color: var(--orange); border-color: #f0dfc0; }
.pastille--travaux { background: #eef2fb; color: #3b5bab; border-color: #d3ddf3; }
.pastille--hors_parc { background: var(--fond); color: var(--texte-doux); }

/* Cartes et colonnes --------------------------------------------------- */
.colonnes { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.colonne { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.carte-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--bordure); }

/* Le badge de statut d'un lot est la signature visuelle : pastille de couleur
   avant le mot, bordure travaillée. La couleur ne dit qu'une chose (règle 8). */
.badge-statut {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.4;
  background: var(--surface-douce); color: var(--texte-doux);
  border: 1px solid var(--bordure-forte);
}
.badge-statut::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.badge-statut--loue { background: var(--statut-paye-doux); color: var(--statut-paye); border-color: var(--statut-paye-bordure); }
.badge-statut--vacant { background: var(--orange-doux); color: var(--orange); border-color: var(--orange-bordure); }

/* Onglets : l'actif se souligne, il ne se remplit pas. */
.onglets { display: flex; gap: 20px; border-bottom: 1px solid var(--bordure); padding: 0 2px; }
.onglets a, .onglets button {
  padding: 9px 1px 10px; border: none; background: none; font: inherit; cursor: pointer;
  color: var(--texte-doux); text-decoration: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.onglets a:hover, .onglets button:hover { color: var(--texte); }
.onglets .actif { color: var(--texte); font-weight: 600; border-bottom-color: var(--accent); }

/* Pavé d'initiales, carré pour un objet, rond pour une personne. */
.initiales {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--surface-douce); border: 1px solid var(--bordure);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--texte-doux);
}
.initiales--personne { border-radius: 50%; width: 30px; height: 30px; }

/* Barre de progression : piste claire, remplissage en accent. */
.progression { height: 4px; border-radius: 999px; background: var(--bordure); overflow: hidden; }
.progression-part { height: 100%; border-radius: 999px; background: var(--accent); }

/* Champs éditables en ligne -------------------------------------------- */
.champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.champ { padding: 10px 16px; border-bottom: 1px solid var(--bordure); border-right: 1px solid var(--bordure); min-width: 0; }
.champ-libelle { font-size: 12px; color: var(--texte-doux); margin-bottom: 2px; }
.champ-valeur {
  display: block; width: 100%; text-align: left; padding: 3px 6px; margin: -3px -6px;
  background: none; border: 1px solid transparent; border-radius: 5px;
  font: inherit; color: inherit; cursor: text;
}
.champ-valeur:hover { background: var(--fond); border-color: var(--bordure); }
.champ--edition { grid-column: 1 / -1; background: var(--fond); }
.champ-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.champ-form input, .champ-form select { flex: 1 1 200px; min-width: 0; }
.champ-erreur { color: var(--danger); font-size: 12px; margin: 6px 0 0; }

/* Timeline ------------------------------------------------------------- */
.note-form { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--bordure); align-items: flex-start; }
.note-form textarea { flex: 1; resize: vertical; }
.timeline { list-style: none; margin: 0; padding: 8px 16px 16px; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0 10px 2px; position: relative; }
.timeline-item + .timeline-item { border-top: 1px solid var(--bordure); }
.timeline-puce { width: 8px; height: 8px; border-radius: 50%; background: var(--bordure-forte); margin-top: 6px; flex: none; }
/* La puce d'un événement suit la règle 8 : le vert dit qu'un encaissement est
   arrivé, le rouge qu'une sortie a échoué, l'ambre qu'une main est intervenue.
   Tout le reste est neutre — un journal n'est pas un tableau d'alarmes. */
.timeline-puce[data-type="paiement.rapproche"],
.timeline-puce[data-type="paiement.hors_banque"],
.timeline-puce[data-type="bail.depot_encaisse"] { background: var(--statut-paye); }
.timeline-puce[data-type="paiement.partiel"],
.timeline-puce[data-type="note"] { background: var(--orange); }
.timeline-puce[data-type="envoi.echoue"],
.timeline-puce[data-type="envoi.bloque"],
.timeline-puce[data-type="paiement.annule"],
.timeline-puce[data-type="document.annule"] { background: var(--danger); }
.timeline-corps { min-width: 0; flex: 1; }
.timeline-entete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.timeline-titre { font-weight: 500; }
.timeline-date { color: var(--texte-doux); font-size: 12px; white-space: nowrap; }
.timeline-note { margin: 4px 0 0; white-space: pre-wrap; }
.timeline-diff { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; }
.timeline-diff li { padding: 2px 0; }
.diff-libelle { color: var(--texte-doux); margin-right: 6px; }
.diff-avant { text-decoration: line-through; color: var(--texte-doux); }
.diff-fleche { color: var(--texte-doux); margin: 0 4px; }
.diff-apres { font-weight: 500; }
.timeline-auteur { color: var(--texte-doux); font-size: 12px; margin-top: 4px; }
.timeline-vide { color: var(--texte-doux); padding: 20px 0; text-align: center; list-style: none; }

/* Formulaires ---------------------------------------------------------- */
.formulaire { display: flex; flex-direction: column; gap: 14px; }
.formulaire label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--texte-doux); }
.formulaire input, .formulaire select { font-size: 14px; color: var(--texte); }
.formulaire--grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 16px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 20px; box-shadow: var(--ombre);
}
.pleine-largeur { grid-column: 1 / -1; }
.formulaire-actions { display: flex; gap: 10px; align-items: center; }

/* Alertes -------------------------------------------------------------- */
.alerte { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; border: 1px solid transparent; }
.alerte--erreur { background: var(--danger-doux); color: var(--danger); border-color: #f2cdc9; }

/* Connexion ------------------------------------------------------------ */
.connexion {
  max-width: 340px; margin: 12vh auto 0; background: var(--surface); padding: 28px;
  border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.connexion h1 { margin-bottom: 16px; }
.connexion .sous-titre { margin-bottom: 20px; }

@media (max-width: 900px) {
  .colonnes { grid-template-columns: 1fr; }
}

/* --- Jalon 2 : locataires, baux, échéancier ------------------------------ */

.champ-aide, .aide {
  display: block;
  color: var(--texte-doux);
  font-size: 12px;
  margin: 4px 0 0;
  font-weight: 400;
}

/* Une carte qui propose le geste suivant, sans crier comme une alerte. */
.carte--invite { border-color: var(--accent); background: var(--accent-doux); }
.carte--invite .formulaire { padding: 0; }
.carte--invite label { display: block; margin-top: 8px; }

/* Un garde-fou de périmètre se lit sans se confondre avec une erreur : il
   explique pourquoi la liste est courte, il n'annonce pas une panne. */
.aide--perimetre {
  background: var(--fond);
  border-left: 3px solid var(--bordure-forte);
  padding: 8px 10px;
  margin: 8px 0;
  line-height: 1.45;
}

.alerte--info { background: #eef2fb; color: #3b5bab; border-color: #d3ddf3; }

.pastille--bail-actif { background: var(--statut-paye-doux); color: var(--statut-paye); border-color: var(--statut-paye-bordure); }
.pastille--bail-brouillon { background: var(--orange-doux); color: var(--orange); border-color: #f0dfc0; }
.pastille--bail-resilie, .pastille--bail-termine { background: var(--fond); color: var(--texte-doux); }

.pastille--echeance-attendue { background: var(--orange-doux); color: var(--orange); border-color: #f0dfc0; }
.pastille--echeance-payee { background: var(--statut-paye-doux); color: var(--statut-paye); border-color: var(--statut-paye-bordure); }
.pastille--echeance-partielle { background: #eef2fb; color: #3b5bab; border-color: #d3ddf3; }
.pastille--echeance-annulee { background: var(--fond); color: var(--texte-doux); }

.cellule-montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cellule-total { font-weight: 600; }
.cellule-actions { text-align: right; }
.ligne-passee { color: var(--texte-doux); }
.badge-prorata {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--orange-doux); color: var(--orange); font-size: 11px;
}

/* Un échéancier de 12 lignes ne doit jamais élargir la page. */
.table-defilante { max-height: 420px; overflow: auto; }
.table-defilante .table { border: none; border-radius: 0; box-shadow: none; }
.table-defilante thead th { position: sticky; top: 0; z-index: 1; }

.ligne-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; }
.ligne-form select, .ligne-form input { flex: 1 1 140px; min-width: 0; }
.ligne-form .bouton { flex: none; }
.case { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-doux); font-size: 13px; }
.case input { flex: none; }

.bloc-action { padding: 14px 16px; border-bottom: 1px solid var(--bordure); }
.bloc-action:last-child { border-bottom: none; }
.bloc-action h3 { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.bloc-action .ligne-form { padding: 8px 0 0; }
.bloc-action .aide { margin-bottom: 2px; }

.page-actions form { display: inline; }

/* --- Jalon 3 : import bancaire et rapprochement --------------------------- */

.montant-credit { color: var(--statut-paye); }
.montant-debit { color: var(--texte-doux); }

.pastille--transaction-non_rapproche { background: var(--orange-doux); color: var(--orange); border-color: #f0dfc0; }
.pastille--transaction-rapproche { background: var(--statut-paye-doux); color: var(--statut-paye); border-color: var(--statut-paye-bordure); }
.pastille--transaction-partiel { background: #eef2fb; color: #3b5bab; border-color: #d3ddf3; }
.pastille--transaction-hors_loyers { background: var(--fond); color: var(--texte-doux); }
.pastille--echeance-trop_percu { background: #f3ecfb; color: #6b3fa0; border-color: #e0d3f2; }

/* Bandeau de chiffres clés (import, inbox) */
.cartes-chiffres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chiffre {
  flex: 1 1 130px; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 10px 12px; box-shadow: var(--ombre);
  text-decoration: none; color: inherit; display: block;
}
a.chiffre:hover { border-color: var(--texte-tres-doux); background: var(--surface-douce); }
/* Le compteur consulté se marque : c'est lui qui cadre la liste en dessous. */
.chiffre--actif { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.chiffre--montant { background: var(--surface-douce); }
.chiffre-valeur { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.chiffre-libelle { display: block; color: var(--texte-doux); font-size: 12px; margin-top: 1px; }

/* Taux d'auto-rapprochement */
.jauge { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.jauge-fond { flex: 1; height: 6px; background: var(--bordure); border-radius: 999px; overflow: hidden; }
.jauge-remplissage { height: 100%; background: var(--statut-paye); border-radius: 999px; }
.jauge-valeur { font-size: 12px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

/* Écran de mapping : une liste déroulante par colonne du fichier */
.table--mapping th { padding: 8px; background: var(--fond); }
.table--mapping th select { width: 100%; min-width: 130px; }
.table--mapping td { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ligne-entete-source { color: var(--texte-doux); background: #fafaf9; }

/* Association manuelle depuis l'inbox */
.ligne-candidats > td { padding: 0; border-bottom: none; }
.ligne-candidats:empty { display: none; }
.panneau-candidats { background: var(--fond); border-top: 1px solid var(--bordure); padding: 12px 14px; }
.panneau-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.recherche-candidats { width: 100%; margin-bottom: 10px; }
.affectation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--texte-doux); }
.badge-confiance {
  padding: 1px 6px; border-radius: 999px; background: var(--accent-doux);
  color: var(--accent); font-size: 11px;
}

.carte--details { padding: 12px 16px; }
.carte--details summary { cursor: pointer; font-weight: 500; }
.journal {
  margin: 10px 0 0; padding: 10px; background: var(--fond); border-radius: 6px;
  font-size: 12px; max-height: 220px; overflow: auto; white-space: pre-wrap;
}

.champ-form textarea { flex: 1 1 100%; min-height: 70px; resize: vertical; }
.champ-valeur--zone { white-space: pre-wrap; }

.pastille--document-annule { background: var(--danger-doux); color: var(--danger); border-color: #f2cdc9; }

/* --- Lisibilité de l'échéancier ------------------------------------------ */

.resume-echeancier { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--bordure); }
.resume-item {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--fond); color: var(--texte-doux); border: 1px solid var(--bordure);
}
.resume-item--payee { background: var(--statut-paye-doux); color: var(--statut-paye); border-color: var(--statut-paye-bordure); }
.resume-item--attendue { background: var(--orange-doux); color: var(--orange); border-color: #f0dfc0; }
.resume-item--retard { background: var(--danger-doux); color: var(--danger); border-color: #f2cdc9; }

.ligne-retard { background: #fef7f6; }
.ligne-retard td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.ligne-courante { background: #f7fbf9; }
.ligne-courante td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ligne-depot { background: #fafaf9; }
.ligne-depot td:first-child { box-shadow: inset 3px 0 0 var(--bordure-forte); }
.alerte-retard { color: var(--danger); font-weight: 500; }
.badge-courante {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--accent-doux); color: var(--accent); font-size: 11px;
}
.ligne-voir-plus td { text-align: center; background: #fafaf9; }
.cellule-periode { white-space: nowrap; }

/* --- Parcours guidé « Nouvelle location » --------------------------------- */

/* Chemin d'étapes : pastille numérotée, libellé, trait de liaison. L'étape
   courante se marque à l'accent, les franchies restent cliquables. */
.chemin-etapes {
  display: flex; align-items: center; list-style: none; margin: 0 0 16px; padding: 0;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 10px 16px; gap: 0; flex-wrap: wrap;
}
.chemin-etapes li { display: flex; align-items: center; color: var(--texte-doux); font-size: 13px; }
.chemin-etapes li + li::before {
  content: ""; width: 34px; height: 1px; background: var(--bordure-forte); margin: 0 12px;
}
.chemin-etapes a, .chemin-etapes span { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.chemin-etapes a { cursor: pointer; }
.chemin-etapes a:hover .etape-libelle { text-decoration: underline; }
.etape-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%; font-size: 11px; font-weight: 600;
  background: var(--surface-douce); border: 1px solid var(--bordure-forte); color: var(--texte-doux);
}
.etape--active { color: var(--texte); font-weight: 600; }
.etape--active .etape-pastille { background: var(--accent); border-color: var(--accent); color: #fff; }
.etape--faite .etape-pastille { background: var(--accent-doux); border-color: var(--accent-bordure); color: var(--accent); }
.etape--a-venir { color: var(--texte-tres-doux); }

.colonnes--parcours { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 20px; }
.colonnes--parcours > .carte { align-self: start; }

.parcours-actions {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--bordure);
}

.recap { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.recap--grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 16px; }
.recap .champ-libelle { display: block; }

/* --- Bandeau de contexte des fiches --------------------------------------- */

.bandeau-contexte {
  display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden;
}
.contexte-item {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
  border-right: 1px solid var(--bordure); flex: 1 1 auto; min-width: 150px;
}
.contexte-item:last-child { border-right: none; }
.contexte-libelle { font-size: 11px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: 0.3px; }
.contexte-valeur { color: var(--texte-doux); }
.contexte-detail { font-size: 12px; color: var(--texte-doux); }
.contexte-item .pastille { align-self: flex-start; margin-top: 2px; }
.bouton[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }

/* Champ replié derrière une invitation (cas minoritaire, ex. SIRET en LMNP). */
.champ-depliable summary {
  cursor: pointer; color: var(--accent); font-size: 12px; list-style: none;
}
.champ-depliable summary::-webkit-details-marker { display: none; }
.champ-depliable summary::before { content: "+ "; font-weight: 600; }
.champ-depliable[open] summary { color: var(--texte-doux); }
.champ-depliable[open] summary::before { content: "− "; }
.champ--replie .champ-valeur { color: var(--texte-doux); font-style: italic; }

/* --- Fiche en deux colonnes : cartes liées et panneau de détail ----------- */

.carte--liee .carte-corps { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.carte-ligne { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.carte-ligne + .carte-ligne { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bordure); }
.carte-ligne--serree { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; }
.carte-mois { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.carte--repliee { padding: 0; }
.carte--repliee > summary {
  padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.carte--repliee > summary::-webkit-details-marker { display: none; }
.carte--repliee > summary::before { content: "▸ "; color: var(--texte-doux); }
.carte--repliee[open] > summary::before { content: "▾ "; }

.location-resume { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--bordure); }
.location-montant { font-size: 18px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.location-montant .cellule-secondaire { font-size: 12px; font-weight: 400; }
.location-actions { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--bordure); }
.location-actions form { padding: 10px 16px; }

.bloc-repliable { border-bottom: 1px solid var(--bordure); }
.bloc-repliable > summary {
  padding: 10px 16px; cursor: pointer; color: var(--accent); font-size: 13px; list-style: none;
}
.bloc-repliable > summary::-webkit-details-marker { display: none; }
.bloc-repliable > summary::before { content: "▸ "; }
.bloc-repliable[open] > summary::before { content: "▾ "; }
.bloc-repliable--action { border-bottom: 1px solid var(--bordure); }
.bloc-repliable--action:last-child { border-bottom: none; }

.signataires-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; }
.jeton { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--fond); border: 1px solid var(--bordure); border-radius: 999px; }

.ligne-cliquable { cursor: pointer; }
.ligne-cliquable:hover { background: var(--accent-doux); }

#panneau:empty { display: none; }
.panneau {
  position: fixed; top: 52px; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 40;
  background: var(--surface); border-left: 1px solid var(--bordure);
  box-shadow: -8px 0 24px rgba(16, 16, 14, 0.08); display: flex; flex-direction: column;
}
.panneau .panneau-entete {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--bordure); margin: 0;
}
.panneau-corps { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.panneau-titre { font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--texte-doux); margin: 12px 0 0; }
.panneau-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bordure); }
.panneau-ligne:last-child { border-bottom: none; }
.carte-entete--interne { border-top: 1px solid var(--bordure); }
.carte-entete--interne h3 { font-size: 13px; font-weight: 600; margin: 0; }

/* --- États relatifs à la date du jour ------------------------------------- */

.pastille--payee { background: var(--statut-paye-doux); color: var(--statut-paye); border-color: var(--statut-paye-bordure); }
.pastille--trop_percu { background: #f3ecfb; color: #6b3fa0; border-color: #e0d3f2; }
.pastille--en_retard { background: var(--danger-doux); color: var(--danger); border-color: #f2cdc9; }
.pastille--partielle { background: #eef2fb; color: #3b5bab; border-color: #d3ddf3; }
.pastille--a_regler { background: var(--orange-doux); color: var(--orange); border-color: #f0dfc0; }
.pastille--a_venir { background: var(--fond); color: var(--texte-doux); border-color: var(--bordure); }
.pastille--annulee { background: var(--fond); color: var(--texte-doux); }

.ligne--en_retard { background: #fef7f6; }
.ligne--en_retard td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.ligne--a_regler td:first-child, .ligne--partielle td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.ligne--a_venir { color: var(--texte-doux); }
.ligne-courante { background: #f7fbf9; }

.resume-item--a_regler { background: var(--orange-doux); color: var(--orange); border-color: #f0dfc0; }
.resume-item--partielle { background: #eef2fb; color: #3b5bab; border-color: #d3ddf3; }

/* --- Envois ---------------------------------------------------------------- */

.pastille--envoi-prepare { background: var(--orange-doux); color: var(--orange); border-color: #f0dfc0; }
.pastille--envoi-envoye { background: var(--statut-paye-doux); color: var(--statut-paye); border-color: var(--statut-paye-bordure); }
.pastille--envoi-echec { background: var(--danger-doux); color: var(--danger); border-color: #f2cdc9; }
.pastille--envoi-bloque { background: #f3ecfb; color: #6b3fa0; border-color: #e0d3f2; }


/* --- Jalon 6 : tableau de bord et « À traiter » --------------------------- */

/* Le point de couleur ne dit qu'une chose : l'argent est-il arrivé. */
.cellule-pastille { width: 26px; }
.point {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle;
}
.point--vert { background: var(--statut-paye); }
.point--orange { background: var(--orange); }
.point--rouge { background: var(--danger); }
.point--gris { background: var(--bordure-forte); }

.ligne-mois--rouge { background: var(--danger-doux); }
.ligne-mois--gris td { color: var(--texte-doux); }

/* Une anomalie non financière : discrète, cliquable, jamais rouge. Un jeton
   arrondi la distingue d'un caractère perdu dans le nom du locataire. */
.anomalie {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 4px; vertical-align: -3px;
  border-radius: 5px; background: var(--orange-doux); border: 1px solid var(--orange-bordure);
  color: var(--orange); font-size: 9px; line-height: 1; text-decoration: none; cursor: help;
}
.anomalie:hover { background: var(--orange); color: #fff; }

.alerte--retard {
  background: var(--danger-doux); color: var(--danger);
  border: 1px solid var(--danger-bordure); border-left: 3px solid var(--danger);
  border-radius: var(--rayon);
  padding: 9px 13px; margin-bottom: 14px; font-size: 12.5px;
}
.alerte--retard .lien-fort { color: var(--danger); }

/* Le cycle du mois : chaque étape est un bouton, ou un état une fois faite. */
.carte--cycle { margin-bottom: 16px; }
.cycle { list-style: none; margin: 0; padding: 0; }
.cycle-etape {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--bordure);
}
.cycle-etape:first-child { border-top: none; }
.cycle-rang {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  background: var(--bordure); color: var(--texte-doux);
}
.cycle-etape--faite .cycle-rang { background: var(--statut-paye-doux); color: var(--statut-paye); }
.cycle-etape--attente .cycle-rang { background: var(--orange-doux); color: var(--orange); }
.cycle-corps { flex: 1; }
.cycle-action { flex: 0 0 auto; }

/* Les totaux se lisent entité par entité, jamais additionnés. */
.totaux-entites { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.total-entite {
  flex: 1 1 220px; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 10px 12px;
}
.total-encaisse { font-size: 18px; font-weight: 600; display: block; }

.carte--section { margin-bottom: 10px; }
.carte--section > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; font-weight: 600;
}
.section-titre { flex: 1; }
.badge-compteur {
  background: var(--orange-doux); color: var(--orange);
  border-radius: 10px; padding: 1px 9px; font-size: 12px; font-weight: 600;
}
.badge-compteur--impayes { background: var(--danger-doux); color: var(--danger); }

.entete-actions { display: flex; gap: 8px; align-items: center; }
.filtre-entete select { min-width: 168px; }

/* --- Phase 2 : habillage du tableau de bord ------------------------------ */

.navigation-mois {
  display: inline-flex; border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-petit); overflow: hidden; margin-right: 2px;
}
.navigation-mois a {
  padding: 6px 11px; text-decoration: none; color: var(--texte-doux);
  background: var(--surface); line-height: 1.3; font-size: 14px;
}
.navigation-mois a:hover { background: var(--surface-douce); color: var(--texte); }
.navigation-mois a + a { border-left: 1px solid var(--bordure); }

.badge-statut--retard { background: var(--danger-doux); color: var(--danger); border-color: var(--danger-bordure); }

/* Le cycle : une rangée par geste, rang à gauche, action à droite. */
.carte--cycle { margin-bottom: 16px; }
.cycle-etape { padding: 9px 14px; gap: 11px; }
.cycle-rang { width: 20px; height: 20px; flex: 0 0 20px; font-size: 10.5px; }
.cycle-corps strong { font-size: 13px; font-weight: 600; }
.cycle-etape--faite .cycle-corps strong { color: var(--texte-doux); font-weight: 500; }

/* Totaux par propriétaire : encarts bordés, chiffre dominant, jauge fine. */
.totaux-entites { gap: 8px; margin-bottom: 18px; }
.total-entite { padding: 11px 13px; border-radius: var(--rayon); }
.total-entite .lien-fort { font-size: 12.5px; }
.total-chiffres { display: flex; align-items: baseline; gap: 7px; margin: 3px 0 7px; }
.total-encaisse { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.total-chiffres .cellule-secondaire { margin-top: 0; }
.total-entite .progression { margin-bottom: 5px; }

/* Le tableau du mois : lignes serrées, pastille de statut isolée à gauche. */
.ligne-mois td { padding-top: 8px; padding-bottom: 8px; }
.ligne-mois--gris td { color: var(--texte-tres-doux); }
.ligne-mois--rouge { background: transparent; }
.ligne-mois--rouge .cellule-montant.cellule-total { color: var(--danger); font-weight: 600; }
.point { width: 7px; height: 7px; }
.ligne-voir-plus td { background: var(--surface-douce); padding: 6px 14px; }

/* L'accent teinte les liens forts et les états actifs, rien d'autre. */
.lien-fort { color: var(--texte); }
.lien-fort:hover { color: var(--accent); }
.lien-ouvrir { color: var(--accent); text-decoration: none; font-weight: 500; }
.lien-ouvrir:hover { text-decoration: underline; }


/* --- Phase 1 : grille trois zones ---------------------------------------- */

/* Propriétés à gauche, timeline au centre — c'est elle qu'on lit —, objets
   liés à droite. Structure seule : l'habillage viendra en phase 2. */
.colonnes--trois {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr) minmax(240px, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1200px) {
  .colonnes--trois { grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr); }
  .colonnes--trois .colonne--timeline { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 820px) {
  .colonnes--trois { grid-template-columns: 1fr; }
  .colonnes--trois .colonne--timeline { grid-column: auto; }
}
.colonne--proprietes, .colonne--timeline, .colonne--liees {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}

.carte--compteurs { display: flex; gap: 16px; padding: 10px 14px; }
.compteur { display: flex; flex-direction: column; }
.compteur-libelle { font-size: 12px; color: var(--texte-doux); }
.compteur-valeur { font-size: 17px; font-weight: 600; }
.compteur-valeur--retard { color: var(--danger); }

/* Un contact se lit et se clique : adresse et téléphone, toujours au même
   endroit, pour le locataire comme pour le bailleur. */
.contact { display: flex; flex-direction: column; gap: 2px; margin: 3px 0; font-size: 12px; }
.carte-ligne-titre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lien-ouvrir { display: inline-block; margin-top: 4px; font-size: 12px; }

.panneau-liste { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; padding: 10px 14px; }
.panneau-liste dt { color: var(--texte-doux); font-size: 12px; }
.panneau-liste dd { margin: 0; font-size: 13px; }


/* Saisie d'une date : le champ texte porte la valeur, le calendrier natif
   n'est qu'un raccourci posé à côté. */
.saisie-date { display: inline-flex; align-items: center; gap: 4px; }
.saisie-date input[type="text"] { flex: 1 1 auto; min-width: 8.5em; }
.saisie-date-calendrier { width: 2em; padding: 0; border: none; background: none; }
.saisie-date-calendrier::-webkit-datetime-edit,
.saisie-date-calendrier::-webkit-inner-spin-button,
.saisie-date-calendrier::-webkit-clear-button { display: none; }
.saisie-date-calendrier::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.saisie-date-calendrier::-webkit-calendar-picker-indicator:hover { opacity: 1; }


.pastille--neutre { background: var(--fond); color: var(--texte-doux); }
.etat-vide { padding: 22px 14px; text-align: center; }
.etat-vide .aide { max-width: 46em; margin: 6px auto 12px; }
.etat-vide .bouton { margin: 0 3px; }


/* --- Phase 2, écran 2 : la fiche bien ------------------------------------ */

/* Trois zones séparées par des filets, comme la référence. */
.colonnes--trois { gap: 0; }
.colonnes--trois .colonne--timeline { padding: 0 18px; border-left: 1px solid var(--bordure); border-right: 1px solid var(--bordure); }
.colonnes--trois .colonne--liees { padding-left: 18px; }
.colonnes--trois .colonne--proprietes { padding-right: 18px; }
@media (max-width: 1200px) {
  .colonnes--trois .colonne--timeline { border-right: none; padding-right: 0; }
}
@media (max-width: 820px) {
  .colonnes--trois .colonne--timeline,
  .colonnes--trois .colonne--proprietes,
  .colonnes--trois .colonne--liees { border: none; padding: 0; }
}

/* Propriétés en liste : label à gauche, valeur à droite, une ligne sur deux
   légèrement teintée pour guider l'œil sur une colonne étroite. */
.champs--liste { grid-template-columns: 1fr; }
.champs--liste .champ {
  display: grid; grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
  align-items: baseline; gap: 10px;
  border-right: none; padding: 7px 12px;
}
.champs--liste .champ:nth-child(even) { background: var(--surface-douce); }
.champs--liste .champ:last-child { border-bottom: none; }
.champs--liste .champ-libelle { margin-bottom: 0; font-size: 12px; }
.champs--liste .champ-valeur { font-size: 12.5px; }
.champs--liste .champ--replie { display: block; }

.compteurs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compteurs .compteur {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--surface); padding: 9px 11px;
}
.compteurs .compteur-valeur { font-size: 17px; letter-spacing: -0.02em; }

/* Onglets de la colonne centrale. */
.carte--onglets .onglets { padding: 0 14px; }
.carte--onglets [data-contenu] { padding: 4px 0; }
.carte--onglets .note-form { padding: 12px 14px 4px; }
.etiquette-carte {
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--texte-tres-doux);
}

/* Cartes liées : personne à gauche, contacts dessous, fichiers alignés. */
.carte--liee .carte-corps { padding: 11px 13px; }
.carte-personne { display: flex; align-items: center; gap: 9px; }
.carte-personne .cellule-secondaire { margin-top: 1px; }
.ligne-fichier {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4px 0; font-size: 12.5px;
}
.ligne-fichier .cellule-secondaire { margin-top: 0; white-space: nowrap; }
.carte--liee .progression { margin: 7px 0 4px; }


/* Les actions repliées de la rubrique « Location » : des rangées cliquables,
   pas des puces de liste. */
.bloc-repliable > summary,
.carte--details > summary,
.carte--repliee > summary,
.carte--section > summary { list-style: none; }
.bloc-repliable > summary::-webkit-details-marker,
.carte--details > summary::-webkit-details-marker,
.carte--repliee > summary::-webkit-details-marker,
.carte--section > summary::-webkit-details-marker { display: none; }
.bloc-repliable > summary::before,
.carte--details > summary::before,
.carte--repliee > summary::before,
.carte--section > summary::before {
  content: "›"; display: inline-block; width: 12px; flex: 0 0 12px;
  color: var(--texte-tres-doux); transition: transform .12s ease;
}
.bloc-repliable[open] > summary::before,
.carte--details[open] > summary::before,
.carte--repliee[open] > summary::before,
.carte--section[open] > summary::before { transform: rotate(90deg); }


/* --- Phase 2, écran 3 : le parcours « Mettre en location » ---------------- */

.colonnes--parcours { gap: 14px; }
.parcours-actions { margin-top: 16px; padding-top: 14px; }

/* Le formulaire de conditions est le plus dense du produit : deux colonnes,
   libellés au-dessus, aides en gris sous le champ. */
.formulaire--grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 16px; padding: 16px;
}
.formulaire--grille label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texte-doux); }
.libelle-champ { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-height: 16px; }
/* Une case à cocher se lit sur une ligne, à côté de son libellé. */
.formulaire--grille label.case { flex-direction: row; align-items: center; gap: 6px; margin-top: 5px; }
.formulaire--grille label.case input { margin: 0; }
.formulaire--grille label > input,
.formulaire--grille label > select,
.formulaire--grille label > .saisie-date { margin-top: 1px; }
.formulaire--grille .champ-aide { margin-top: 3px; }
.formulaire--grille .pleine-largeur { grid-column: 1 / -1; }

/* La valeur proposée se signale, et cesse de l'être dès qu'on y touche. */
.badge-propose {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-douce); border: 1px solid var(--bordure);
  color: var(--texte-tres-doux); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}


/* --- Pages légales et pied de page ---------------------------------------- */

.pied-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: 28px; padding-top: 14px;
  border-top: 1px solid var(--bordure);
  font-size: 11.5px; color: var(--texte-tres-doux);
}
.pied-legal a { color: var(--texte-doux); text-decoration: none; }
.pied-legal a:hover { color: var(--accent); text-decoration: underline; }

/* Un texte juridique se lit en colonne étroite : au-delà d'une soixantaine de
   caractères par ligne, l'œil perd le début de la suivante. */
.page-legale {
  max-width: 62ch; margin: 0 auto; padding: 28px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  font-size: 13.5px; line-height: 1.65;
}
.page-legale h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.02em; }
.page-legale h2 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--texte-doux); margin: 26px 0 8px;
}
.page-legale p { margin: 0 0 12px; }
.page-legale ul { margin: 0 0 12px; padding-left: 18px; }
.page-legale li { margin-bottom: 5px; }
.page-legale .renvoi { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--bordure); font-size: 12px; }
.tableau-legal { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 12.5px; }
.tableau-legal th {
  text-align: left; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--texte-tres-doux); font-weight: 600;
  border-bottom: 1px solid var(--bordure-forte); padding: 6px 8px 6px 0;
}
.tableau-legal td { vertical-align: top; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--bordure); }
.tableau-legal tr:last-child td { border-bottom: none; }


/* --- Création par SIRET ---------------------------------------------------- */

/* Le numéro d'abord : la carte de recherche occupe l'entrée de l'écran, et le
   formulaire ne se déplie qu'ensuite. */
.carte--recherche { margin-bottom: 14px; }
.carte--recherche .carte-corps { padding: 16px; }
.recherche-siret { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--texte-doux); }
.ligne-recherche { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
/* Quatorze chiffres : le champ n'a aucune raison de traverser l'écran. */
.ligne-recherche input { flex: 0 1 280px; min-width: 0; font-size: 14px; letter-spacing: 0.03em; }
.ligne-recherche .bouton { flex: 0 0 auto; }
.champs-formulaire {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 16px;
}
.champs-formulaire > .alerte,
.champs-formulaire > input[type="hidden"] { grid-column: 1 / -1; }


/* --- Phase 2, écran 4 : import et rapprochement --------------------------- */

/* Une affectation faite se lit sous son mouvement, en retrait. */
.affectation {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px; padding: 5px 9px; font-size: 12px;
  background: var(--surface-douce); border-radius: var(--rayon-petit);
  border-left: 2px solid var(--statut-paye);
}
.badge-confiance {
  padding: 1px 6px; border-radius: 999px; font-size: 10.5px;
  background: var(--surface); border: 1px solid var(--bordure); color: var(--texte-doux);
}
.montant-debit { color: var(--texte-doux); }

/* Le panneau d'association : on choisit la location, puis son échéance. */
.panneau-candidats {
  margin-top: 8px; border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--surface-douce); overflow: hidden;
}
.panneau-candidats .panneau-entete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 13px; background: var(--surface); border-bottom: 1px solid var(--bordure);
}
.panneau-candidats .aide--perimetre { margin: 10px 13px; }
.selection-location { padding: 0 13px 10px; }
.selection-location label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texte-doux); }
.selection-location select { min-width: 100%; }
.panneau-candidats .table { border-radius: 0; border-left: none; border-right: none; border-bottom: none; box-shadow: none; }


/* --- Phase 2, écran 5 : la page Documents --------------------------------- */

/* Les séries sont numérotées par propriétaire : deux pièces peuvent porter le
   même numéro dans une liste globale. Le jeton lève l'ambiguïté à l'œil. */
.jeton-entite {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 16px; margin-right: 6px; vertical-align: 1px;
  border-radius: 4px; background: var(--surface-douce); border: 1px solid var(--bordure);
  font-size: 9px; font-weight: 700; letter-spacing: 0.03em; color: var(--texte-tres-doux);
}

/* Une action destructive dans une ligne se propose, elle ne s'affiche pas au
   même poids que le téléchargement qu'on vient chercher. */
.lien-danger {
  background: none; border: none; padding: 0 0 0 8px; font: inherit; font-size: 12px;
  color: var(--texte-tres-doux); cursor: pointer; text-decoration: none;
}
.lien-danger:hover { color: var(--danger); text-decoration: underline; }
.cellule-actions { white-space: nowrap; }

.nav-compte-identite span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* --- Indicateurs de tête du tableau de bord ------------------------------- */

.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi-carte {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.kpi-libelle { font-size: 12px; color: var(--texte-doux); }
.kpi-valeur { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.kpi-valeur--encaisse { color: var(--statut-paye); }
.kpi-valeur--retard { color: var(--danger); }
.kpi-detail { font-size: 11.5px; color: var(--texte-tres-doux); }

.panneau-actions { padding: 10px 14px; border-top: 1px solid var(--bordure); }
.panneau-actions .aide { margin-top: 6px; }

/* Une location signée dont l'effet est à venir : ni encaissée, ni en retard,
   ni vacante. Neutre, mais distincte du vide. */
.point--a_venir { background: var(--bordure-forte); }
.badge-statut--a-venir { background: var(--surface-douce); color: var(--texte-doux); border-color: var(--bordure-forte); }
.ligne-mois--a_venir td { color: var(--texte-doux); }


/* L'état du dépôt de garantie sur une ligne du mois. Neutre quand il est
   encaissé, ambre quand on l'attend, rouge seulement passé la date limite —
   avant l'entrée, un dépôt non versé n'est pas un retard (règle 8). */
.jeton-depot {
  display: inline-block; padding: 0 6px; border-radius: 999px;
  font-size: 11px; border: 1px solid var(--bordure);
  background: var(--surface-douce); color: var(--texte-doux);
}
.jeton-depot--ok { background: var(--statut-paye-doux); color: var(--statut-paye); border-color: var(--statut-paye-bordure); }
.jeton-depot--attente { background: var(--orange-doux); color: var(--orange); border-color: var(--orange-bordure); }
.jeton-depot--retard { background: var(--danger-doux); color: var(--danger); border-color: var(--danger-bordure); }