/* ==========================================================================
   Gulfus — Registre locatif
   Rail à gauche, une vue à droite. Même langage visuel que l'ERP Cleanix
   depuis le 21/10/2026 : bleu d'interface pour l'outil, le cyan ne sert qu'à
   signaler ce qui attend une action de vous.
   ========================================================================== */

.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); height: 100dvh; overflow: hidden; }

/* ==========================================================================
   Rail
   ========================================================================== */
.rail {
  display: flex; flex-direction: column;
  background: #FAFBFE; border-right: 1px solid var(--line);
  color: var(--ink-soft); overflow: hidden;
}
.rail__brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s4) var(--s4); }
.rail__mot { font-family: var(--font-titre); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; color: var(--navy); line-height: 1; }
.rail__mot span { color: var(--cyan); }
.rail__mode {
  font-size: 10px; font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-full); background: var(--line-soft); color: var(--faint);
}

.rail__scroll { flex: 1; overflow-y: auto; padding-bottom: var(--s4); }
.rail__section { padding: var(--s3) var(--s3) var(--s2); }
.rail__section .eyebrow { display: block; padding: 0 var(--s2) var(--s3); }

.rail__item {
  position: relative;
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: 6px var(--s2) 6px var(--s3); border-radius: var(--r-md);
  color: var(--muted); text-align: left;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.rail__item:hover { background: var(--line-soft); color: var(--ink-soft); }
.rail__item[aria-selected="true"] { background: var(--bleu-pale); color: var(--bleu-vif); }
.rail__item[aria-selected="true"]::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 28px; border-radius: 0 3px 3px 0; background: var(--bleu-vif);
}

.rail__tuile {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--tuile-fond, var(--line-soft)); color: var(--tuile-encre, var(--muted));
}
.rail__tuile svg { width: 17px; height: 17px; }

.rail__label {
  flex: 1; min-width: 0; font-size: var(--t-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: .055em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail__item[aria-selected="true"] .rail__label { font-weight: 600; }

.rail__count {
  flex: none; font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: var(--r-full); background: var(--line-soft); color: var(--faint);
}
.rail__count.hot { background: var(--cyan); color: var(--navy); }

.ton-bleu   { --tuile-fond: #ECEFFC; --tuile-encre: #4A55BE; }
.ton-cyan   { --tuile-fond: #E2F5FB; --tuile-encre: #0E8FB2; }
.ton-indigo { --tuile-fond: #F1EDFB; --tuile-encre: #6B57C0; }
.ton-vert   { --tuile-fond: #E7F5EF; --tuile-encre: #1E9E6A; }
.ton-ambre  { --tuile-fond: #FBF2E3; --tuile-encre: #C0801E; }
.ton-rose   { --tuile-fond: #FBEDEC; --tuile-encre: #C1443C; }
.ton-gris   { --tuile-fond: #EFF2F9; --tuile-encre: #6D7590; }

.rail__foot { border-top: 1px solid var(--line); padding: var(--s3); }
.sync {
  display: flex; align-items: center; gap: 7px; width: 100%;
  font-size: var(--t-xs); color: var(--muted);
  padding: 7px var(--s3); border-radius: var(--r-md); background: var(--line-soft);
}
.sync .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.sync[data-s="saving"] .dot { background: var(--warn); animation: pouls 1.1s ease-in-out infinite; }
.sync[data-s="dirty"] .dot { background: var(--warn); }
.sync[data-s="error"] .dot, .sync[data-s="local"] .dot { background: var(--stop); }
.sync[data-s="readonly"] .dot { background: var(--faint); }
@keyframes pouls { 50% { opacity: .25; } }

/* ==========================================================================
   La vue
   ========================================================================== */
.vue { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); }
.vue__head {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s5); background: var(--paper); border-bottom: 1px solid var(--line);
}
.vue__ident h1 { margin: 0; font-family: var(--font-titre); font-size: var(--t-xl); font-weight: 700; letter-spacing: -.015em; }
.vue__ident p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--faint); }
.vue__scroll { flex: 1; overflow-y: auto; padding: var(--s5); }
section[role="tabpanel"] { max-width: 1180px; }
section[hidden] { display: none; }

.sec-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s3); }
.sec-head h2 { margin: 0; font-family: var(--font-titre); font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; }
.sec-head p { margin: 0; font-size: var(--t-sm); color: var(--faint); }
.sec-head .sp { flex: 1 1 60px; }
/* Filtre de type dans l'en-tête d'une section : compact, aligné aux boutons. */
.sec-head .sel--f { width: auto; max-width: 220px; align-self: center; padding: 7px 32px 7px 12px; }

/* Une carte est posée dans la page, elle ne flotte pas : presque pas d'ombre (règle de l'ERP). */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.scroll-x { overflow-x: auto; }

/* ==========================================================================
   Boutons et champs
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 500;
  background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line);
  transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
  white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--line-soft); color: var(--ink); }
.btn.s { padding: 6px 12px; font-size: var(--t-xs); }
.btn.p { background: var(--bleu-vif); color: #fff; border-color: transparent; font-weight: 600; }
.btn.p:hover { background: #2746DD; color: #fff; }
.btn.q { background: transparent; border-color: transparent; color: var(--muted); }
.btn.q:hover { background: var(--line-soft); color: var(--ink); }
.btn.danger { color: var(--stop); }
.btn.danger:hover { background: var(--stop-bg); border-color: var(--stop); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.nav-b {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: var(--r-sm); color: var(--muted); background: var(--paper); border: 1px solid var(--line);
  font-size: 15px;
}
.nav-b:hover { background: var(--line-soft); color: var(--ink); }

.inp, .sel {
  width: 100%; min-width: 0; padding: 9px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--t-sm); transition: border-color .14s var(--ease);
}
.inp:focus, .sel:focus { outline: none; border-color: var(--bleu-vif); box-shadow: 0 0 0 3px rgba(51, 85, 245, .14); }
.inp:disabled { background: var(--surface); color: var(--faint); cursor: not-allowed; }
.inp.num { font-variant-numeric: tabular-nums; text-align: right; }
textarea.inp { resize: vertical; line-height: 1.6; }
.sel {
  appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6180' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
/* Intertitre de section repliable (types de lots, immeubles). */
.tbl .grp2 td { padding: 0; }
.grp2__btn { display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: 8px var(--s4); background: var(--surface); border: 0; border-top: 1px solid var(--line);
  font: inherit; font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-wide); color: var(--faint); text-align: left; cursor: pointer; }
.grp2__btn:hover { background: var(--line-soft); color: var(--muted); }
.grp2__n { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.grp2__btn .grp__chev { transform: rotate(0deg); }
.grp2__btn[aria-expanded="true"] .grp__chev { transform: rotate(90deg); }
.leases__site .grp2__btn { background: transparent; border-top: 0; padding: 0; max-width: 420px; }
/* L'en-tête d'une liste d'échéances se replie comme les autres sections. */
.alert-head--b { width: 100%; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
.alert-head--b:hover { background: var(--line); }
.alert-head--b .grp2__n { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.alert-head--b .grp__chev { transform: rotate(0deg); font-size: var(--t-lg); line-height: 1; color: var(--faint); transition: transform .15s var(--ease); }
.alert-head--b[aria-expanded="true"] .grp__chev { transform: rotate(90deg); }
/* Le mot « Masquer / Afficher » : sans lui, rien ne dit que la barre se clique. */
.alert-head__act { margin-left: var(--s3); text-transform: none; letter-spacing: 0;
  font-weight: 600; color: var(--bleu-vif); }
.alert-head--b:hover .alert-head__act { text-decoration: underline; }
.leases__site .grp2__btn:hover { background: transparent; color: var(--muted); }

/* Choix des lots d'un bail : jamais habillé non plus — « Chambre 1libre ». */
.lotpick { display: flex; align-items: center; gap: var(--s2); padding: 5px 2px;
  font-size: var(--t-sm); cursor: pointer; }
.lotpick input { accent-color: var(--bleu-vif); flex: none; }
.lotpick__nom { font-weight: 500; }
.lotpick__etat { margin-left: auto; font-size: var(--t-xs); color: var(--warn); }
.lotpick__etat--libre { color: var(--faint); }
.lotpick--pris { color: var(--muted); }

/* Case à cocher d'une fenêtre : alignée sur la première ligne du libellé. */
.coche { display: flex; align-items: flex-start; gap: var(--s2); margin: 2px 0 var(--s3);
  font-size: var(--t-xs); color: var(--muted); cursor: pointer; }
.coche input { margin: 1px 0 0; accent-color: var(--bleu-vif); flex: none; }
.coche input:checked + span { color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 620px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* Pastilles d'état */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--line-soft); color: var(--muted);
  font-size: 10.5px; font-weight: 500; white-space: nowrap;
}
.pill.ok   { background: var(--ok-bg);   color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad  { background: var(--stop-bg); color: var(--stop); }
.pill.idle { background: var(--line-soft); color: var(--muted); }
.pill.acc  { background: rgba(0, 186, 232, .12); color: #0089AC; }

.vide, .empty {
  padding: var(--s7) var(--s5); text-align: center; color: var(--faint);
  font-size: var(--t-sm); line-height: 1.7;
  border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--paper);
}
.empty strong { display: block; color: var(--ink); font-size: var(--t-md); font-weight: 600; margin-bottom: 4px; }

/* ==========================================================================
   Tuiles de chiffres
   ========================================================================== */
.stepper { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.stepper .mo {
  font-size: var(--t-xl); font-weight: 600; min-width: 168px; text-align: center;
  text-transform: capitalize; letter-spacing: -.015em;
}
.stepper .sp { flex: 1 1 20px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5);
}
.stat .k { font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--faint); }
.stat .v { font-family: var(--font-titre); font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.035em; margin-top: 6px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--navy); }
.stat .v small { font-size: var(--t-md); color: var(--faint); font-weight: 500; }
.stat .sub { font-size: var(--t-xs); color: var(--faint); margin-top: 4px; }
.stat.is-bad .v { color: var(--stop); }
.stat.is-ok .v { color: var(--ok); }
.meter { height: 5px; border-radius: var(--r-full); background: var(--line-soft); margin-top: var(--s2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ok); border-radius: var(--r-full); }
.meter i.warn { background: var(--warn); }
.meter i.bad { background: var(--stop); }

/* ==========================================================================
   Alertes
   ========================================================================== */
.alerts { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s5); background: var(--paper); }
.alert-head {
  display: flex; align-items: center; gap: var(--s2); padding: 9px var(--s4);
  background: var(--line-soft); border-bottom: 1px solid var(--line);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--muted);
}
.alert { display: flex; gap: var(--s3); align-items: flex-start; padding: 10px var(--s4); font-size: var(--t-sm); }
.alert + .alert { border-top: 1px solid var(--line-soft); }
.alert .bar { width: 3px; align-self: stretch; border-radius: 2px; flex: none; background: var(--faint); }
.alert.bad .bar { background: var(--stop); }
.alert.warn .bar { background: var(--warn); }
.alert.idle .bar { background: #CBD2E6; }
.alert .t { flex: 1; min-width: 0; }
.alert .t b { font-weight: 600; }
.alert .t span { color: var(--faint); }

/* Versements d'un même loyer : une ligne par encaissement. */
.vers { display: grid; grid-template-columns: 150px 110px 1fr 1fr auto; gap: var(--s2);
  align-items: center; margin-bottom: var(--s2); }
.vers .inp, .vers .sel { margin: 0; }
.vers__x { flex: none; padding: 0 10px; color: var(--faint); }
.vers__x:hover { color: var(--stop); }
.vers-bas { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-soft); }
#vers-tot { margin-left: auto; font-size: var(--t-sm); color: var(--muted); }
.vers-n { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--faint); }
@media (max-width: 720px) { .vers { grid-template-columns: 1fr 1fr auto; } }

/* ==========================================================================
   Lignes de loyer
   ========================================================================== */
.rows { display: flex; flex-direction: column; gap: var(--s2); }
.row {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: minmax(0, 1.5fr) 96px 118px 138px minmax(0, 120px) auto;
  gap: var(--s3); align-items: center; padding: var(--s3) var(--s4) var(--s3) var(--s3);
}
.row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #CBD2E6; }
.row[data-st="paye"]::before { background: var(--ok); }
.row[data-st="partiel"]::before { background: var(--warn); }
.row[data-st="impaye"]::before { background: var(--stop); }
.row .who { min-width: 0; padding-left: 6px; }
.row .who b { display: block; font-weight: 600; font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .who span { display: block; font-size: var(--t-xs); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .du { font-size: var(--t-md); text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.row .lab { display: none; }
.row .acts { display: flex; gap: 6px; justify-content: flex-end; }

@media (max-width: 1080px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); }
  .row .lab { display: block; font-size: 10px; font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
  .row .who { grid-column: 1 / 2; grid-row: 1; padding-left: 0; }
  .row .stw { grid-column: 2 / 3; grid-row: 1; justify-self: end; align-self: start; }
  .row .du { grid-column: 1 / 2; text-align: left; }
  .row .f-am { grid-column: 2 / 3; }
  .row .f-dt { grid-column: 1 / -1; }
  .row .acts { grid-column: 1 / -1; justify-content: flex-start; border-top: 1px solid var(--line-soft); padding-top: var(--s3); margin-top: 2px; }
}

/* ==========================================================================
   Tableaux
   ========================================================================== */
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 640px; }
table.tbl th {
  text-align: left; padding: 0 var(--s3) var(--s2); border-bottom: 1px solid var(--line);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
table.tbl td { padding: 10px var(--s3); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td.r, table.tbl th.r { text-align: right; }

table.yr { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); min-width: 820px; }
table.yr th { padding: 0 0 var(--s2); text-align: center; white-space: nowrap;
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
table.yr th.n { text-align: left; padding-left: 2px; }
table.yr td { padding: 2px; }
table.yr td.n { font-size: var(--t-sm); padding: 4px 10px 4px 2px; white-space: nowrap; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
table.yr td.n b { font-weight: 600; }
table.yr td.n span { color: var(--faint); font-size: var(--t-xs); }
.cell {
  width: 100%; height: 34px; border: 1px solid transparent; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer;
  font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--line-soft); color: var(--faint);
}
.cell:hover { border-color: #CBD2E6; }
.cell[data-st="paye"] { background: var(--ok-bg); color: var(--ok); }
.cell[data-st="partiel"] { background: var(--warn-bg); color: var(--warn); }
.cell[data-st="impaye"] { background: var(--stop-bg); color: var(--stop); }
.cell[data-st="hors"] { background: transparent; color: var(--faint); opacity: .35; cursor: default; }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--faint); margin-top: var(--s3); }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* ==========================================================================
   Baux
   ========================================================================== */
.leases { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--s3); align-items: start; }
.lease { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--s4); }
.lease .lh { display: flex; align-items: center; gap: var(--s2); margin-bottom: 2px; }
/* Le lot est le titre de la carte : c'est par lui qu'on cherche un bail. */
.lease .lh h3 { margin: 0; font-size: var(--t-xl); font-weight: 600; color: var(--navy);
  letter-spacing: -.01em; line-height: 1.2; flex: 1; min-width: 0; }
.lease__plus { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--faint); letter-spacing: 0; margin-top: 2px; }
.lease__ten { font-size: var(--t-md); font-weight: 500; color: var(--ink-soft); margin: 0 0 var(--s3); }
.lease--fini { background: var(--surface); }
.lease--fini .lh h3 { color: var(--muted); }
/* Intertitre d'immeuble dans la grille des cartes. */
.leases__site { grid-column: 1 / -1; margin: var(--s3) 0 0; font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--faint); }
.leases__site:first-child { margin-top: 0; }
.lease .units { font-size: var(--t-xs); color: var(--faint); margin-bottom: var(--s3); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 5px var(--s4); font-size: var(--t-sm); margin: 0; }
.dl dt { color: var(--faint); white-space: nowrap; }
.dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.lease .lf { display: flex; gap: 6px; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: var(--s3); }

/* En-tête d'immeuble dans le tableau des lots : jamais habillé jusqu'ici,
   les libellés se collaient les uns aux autres. */
.grp td { padding: 0; }
.grp__btn { display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: 10px var(--s4); background: var(--surface); border: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font: inherit; font-size: var(--t-sm); color: var(--ink); text-align: left; cursor: pointer; }
.grp__btn:hover { background: var(--line-soft); }
.grp__chev { color: var(--faint); font-size: var(--t-lg); line-height: 1; transition: transform .15s var(--ease); }
.grp__btn[aria-expanded="true"] .grp__chev { transform: rotate(90deg); }
.grp__meta { color: var(--muted); font-size: var(--t-xs); }
.grp__pot { margin-left: auto; color: var(--muted); font-weight: 600; }

.dcheck {
  width: 26px; height: 26px; margin: 0 auto; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center; font-size: var(--t-sm); color: var(--faint);
}
.dcheck:hover { border-color: var(--bleu-bord); }
.dcheck[data-on="1"] { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.dcheck[data-on="exp"] { background: var(--stop-bg); border-color: transparent; color: var(--stop); }
.dcheck[data-on="soon"] { background: var(--warn-bg); border-color: transparent; color: var(--warn); }

/* ==========================================================================
   Fenêtres
   ========================================================================== */
dialog.modal {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0;
  background: var(--paper); color: var(--ink);
  max-width: 640px; width: calc(100vw - 28px); box-shadow: var(--shadow-lg);
}
dialog.modal::backdrop { background: rgba(3, 8, 79, .45); }
.mh { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.mh h3 { margin: 0; font-family: var(--font-titre); font-size: var(--t-xl); font-weight: 700; flex: 1; }
.mb { padding: var(--s5); max-height: min(66vh, 560px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4); }
.mf { display: flex; gap: var(--s2); justify-content: flex-end; padding: var(--s3) var(--s5); border-top: 1px solid var(--line); background: var(--line-soft); flex-wrap: wrap; }
.mf .sp { flex: 1; }
fieldset.fs { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); margin: 0; }
fieldset.fs legend { padding: 0 5px; font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--faint); }
.keyline { display: grid; grid-template-columns: minmax(0, 1fr) 74px auto auto; gap: var(--s2); align-items: center; margin-bottom: 7px; }

/* ==========================================================================
   Import bancaire
   ========================================================================== */
.drop {
  border: 1.5px dashed var(--line); border-radius: var(--r-lg); padding: var(--s6) var(--s4);
  text-align: center; background: var(--line-soft); cursor: pointer; color: var(--muted); font-size: var(--t-sm);
}
.drop:hover, .drop.over { border-color: var(--bleu-vif); background: var(--bleu-pale); color: var(--bleu-vif); }
.drop strong { display: block; font-size: var(--t-md); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.drop.over strong { color: #0089AC; }
.match {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px minmax(0, 1.1fr) auto;
  gap: var(--s3); align-items: center; padding: 9px var(--s3);
  border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm);
}
.match:last-child { border-bottom: 0; }
/* Rapprochement : la ligne porte deux listes (bail, mois) et trois boutons. */
.match--rp { grid-template-columns: 92px minmax(0, 1fr) 92px minmax(0, 1.2fr) auto; }
.match--rp .cm { white-space: normal; color: var(--ink); }
.rp-ch { display: flex; gap: 6px; min-width: 0; }
.rp-ch .sel { min-width: 0; flex: 1 1 auto; }
.rp-act { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 900px) { .match--rp { grid-template-columns: 1fr auto; }
  .rp-ch, .rp-act { grid-column: 1 / -1; } }

/* Les tuiles du haut sont des filtres : une seule allumée à la fois. */
.rtuiles { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.rtuile { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  flex: 1 1 150px; padding: 12px var(--s4); background: var(--paper); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-lg); font: inherit; text-align: left;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.rtuile:hover { border-color: var(--bleu-bord); }
.rtuile.on { border-color: var(--bleu-vif); box-shadow: inset 0 -3px 0 var(--bleu-vif); }
.rtuile__n { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-wide); color: var(--faint); }
.rtuile__v { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--t-xl);
  font-weight: 600; color: var(--ink); }
.rtuile__e { font-size: var(--t-xs); font-weight: 500; color: var(--muted); }
.rtuile.on .rtuile__n { color: var(--muted); }

.match .cm { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 780px) { .match { grid-template-columns: 1fr auto; gap: 6px var(--s3); } }

.toast {
  position: fixed; z-index: 70; left: 50%; bottom: var(--s5); transform: translateX(-50%);
  padding: 10px 16px; border-radius: var(--r-full);
  background: var(--navy); color: #fff; font-size: var(--t-sm); box-shadow: var(--shadow-md);
  max-width: calc(100vw - 32px); animation: toast-in .2s var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ==========================================================================
   Écrans étroits : le rail passe en barre horizontale
   ========================================================================== */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .rail { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .rail__brand { padding: var(--s3) var(--s4); }
  .rail__mode, .rail__foot { display: none; }
  .rail__scroll { display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 var(--s3) 0 0; }
  .rail__section { display: flex; padding: var(--s2) 0; gap: 2px; }
  .rail__section .eyebrow { display: none; }
  .rail__item { width: auto; padding: 6px 10px; }
  .rail__item[aria-selected="true"]::before { left: 10px; right: 10px; top: auto; bottom: -6px; width: auto; height: 3px; border-radius: 3px 3px 0 0; transform: none; }
  .rail__tuile { width: 26px; height: 26px; }
  .rail__tuile svg { width: 14px; height: 14px; }
  .vue__scroll { padding: var(--s4); }
  .vue__head { padding: var(--s3) var(--s4); }
}

/* ==========================================================================
   Rapport actionnaires
   Même feuille à l'écran et sur le papier : ce qu'on voit est ce qui s'imprime.
   ========================================================================== */
.rap { padding: var(--s6); color: var(--ink); font-family: var(--font-charte); }
.rap__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s5);
  padding-bottom: var(--s4); border-bottom: 2px solid var(--navy); margin-bottom: var(--s5); }
.rap__head h1 { margin: 0; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.rap__st { margin: 3px 0 0; font-size: var(--t-md); color: var(--muted); }
.rap__meta { text-align: right; font-size: var(--t-xs); color: var(--faint); line-height: 1.6; }

.rap__cles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s6); }
.rap__cles > div { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.rap__cles span { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--faint); }
.rap__cles b { display: block; margin-top: 5px; font-size: var(--t-xl); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--navy); }
.rap__rouge { color: var(--stop) !important; }

.rap__sec { margin-bottom: var(--s6); break-inside: auto; }
.rap__sec h3 { margin: 0 0 var(--s3); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--blue); }
.rap__p { margin: 0; font-size: var(--t-sm); }
.rap__vide { margin: 0; font-size: var(--t-sm); color: var(--faint); }

table.rap__t { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.rap__t th { text-align: left; padding: 0 var(--s3) 6px; border-bottom: 1px solid var(--line);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
table.rap__t th.r, table.rap__t td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.rap__t td { padding: 7px var(--s3); border-bottom: 1px solid var(--line-soft); }
table.rap__t tfoot td { border-top: 1.5px solid var(--line); border-bottom: 0; font-weight: 600; }
table.rap__t tbody tr:last-child td { border-bottom: 0; }

.rap__pied { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--faint); line-height: 1.6; }

@media (max-width: 900px) {
  .rap { padding: var(--s4); }
  .rap__cles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rap__head { flex-direction: column; gap: var(--s2); }
  .rap__meta { text-align: left; }
}

/* ==========================================================================
   États des lieux — saisie sur place, au téléphone
   ========================================================================== */
.edl { display: flex; flex-direction: column; gap: var(--s3); }
.edl__bar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.edl__bar .sp { flex: 1 1 40px; }
.edl__c { padding: var(--s4); }
.edl__t { margin: 0 0 var(--s3); font-size: var(--t-md); font-weight: 600; }
.edl__note { margin: var(--s3) 0 0; font-size: var(--t-xs); color: var(--muted); }
.edl__note--ok { color: var(--ok); }
.edl__ph { display: flex; align-items: center; gap: var(--s2); }
.edl__ph .grp2__btn { background: transparent; border-top: 0; padding: 0; font-size: var(--t-sm);
  text-transform: none; letter-spacing: 0; color: var(--ink); }
.edl__ph .grp2__btn:hover { background: transparent; color: var(--blue); }
.edl__lignes { margin-top: var(--s3); display: flex; flex-direction: column; gap: 2px; }
.edl__add { display: flex; flex-wrap: wrap; gap: 6px; }

/* Une ligne = un élément constaté. En large tout tient sur un rang ; sur un
   téléphone les champs s'empilent et restent tapables au pouce. */
.edlL { display: grid; gap: 6px var(--s2); align-items: center; padding: 7px 8px; border-radius: var(--r-md);
  grid-template-columns: minmax(120px, 1.4fr) 150px 150px minmax(140px, 2fr) auto; }
.edlL:nth-child(odd) { background: var(--surface); }
.edlL--bad { background: var(--stop-bg); }
.edlL__n { font-size: var(--t-sm); font-weight: 500; }
.edlL__b { display: flex; gap: 4px; }
.edlL__ph { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.edlL__ph:empty { display: none; }
.vign { position: relative; display: inline-flex; width: 72px; height: 72px; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.vign img { width: 100%; height: 100%; object-fit: cover; }
.vign--load { align-items: center; justify-content: center; color: var(--faint); font-size: var(--t-xs); }
.vign__x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: rgba(3, 8, 79, .72); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.edl__oui { display: flex; align-items: center; gap: var(--s3); padding: 6px 0; font-size: var(--t-sm);
  border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.edl__oui span:first-child { flex: 1; min-width: 160px; }
.edl__ouib { display: flex; gap: 4px; }

.sig { display: flex; flex-direction: column; gap: 6px; }
.sig > label { font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
/* touch-action: sans ça, le doigt fait défiler la page au lieu de dessiner. */
.sig__c { width: 100%; height: 160px; background: var(--paper); border: 1px dashed var(--line);
  border-radius: var(--r-md); touch-action: none; cursor: crosshair; }
.sig__img { width: 100%; height: 160px; object-fit: contain; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md); }
.sig__meta { font-size: var(--t-xs); color: var(--muted); }
.sig__b { display: flex; gap: 6px; }
.sig > .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .edlL { grid-template-columns: 1fr 1fr; }
  .edlL__n { grid-column: 1 / -1; }
  .edlL__o { grid-column: 1 / -1; }
  .edlL__b { grid-column: 1 / -1; }
}

/* ==========================================================================
   Impression — deux documents, un seul à la fois
   ========================================================================== */
#quit, #rapport, #edlp { display: none; font-family: var(--font-charte); }

@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body { background: #fff; }
  .app, .toast, dialog { display: none !important; }

  body[data-print="quittance"] #quit { display: block !important; color: #000; }
  #quit .q-in { max-width: 170mm; margin: 0 auto; }
  #quit h2 { font-size: 19pt; margin: 0 0 4mm; }
  #quit .q-hd { display: flex; justify-content: space-between; gap: 10mm; margin-bottom: 12mm; font-size: 10pt; }
  #quit .q-box { border: 1px solid #999; padding: 5mm; margin: 6mm 0; font-size: 11pt; }
  #quit .q-am { font-size: 16pt; font-weight: 600; font-variant-numeric: tabular-nums; }
  #quit p { font-size: 10.5pt; line-height: 1.55; }
  #quit .q-sg { margin-top: 18mm; font-size: 10pt; }

  body[data-print="edl"] #edlp { display: block !important; color: #000; }
  #edlp .edlp { font-size: 9pt; }
  #edlp .edlp__hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm;
    flex-wrap: wrap; border-bottom: 1.5pt solid #000; padding-bottom: 3mm; margin-bottom: 5mm; }
  #edlp .edlp__hd > div:first-child { flex: 1 1 auto; min-width: 0; }
  #edlp .edlp__t { flex: 0 0 auto; text-align: right; font-size: 13pt; font-weight: 600; }
  #edlp .edlp__t span { font-size: 10pt; font-weight: 400; }
  #edlp table { width: 100%; border-collapse: collapse; margin-bottom: 5mm; }
  #edlp th, #edlp td { border: 0.5pt solid #999; padding: 1.4mm 2mm; text-align: left; vertical-align: top; }
  #edlp th { background: #eee; font-weight: 600; }
  #edlp .edlp__sec { margin-bottom: 6mm; break-inside: auto; }
  #edlp .edlp__sec h3 { font-size: 11pt; margin: 0 0 2mm; break-after: avoid; }
  #edlp table.edlp__g tr { break-inside: avoid; }
  #edlp table.edlp__g thead { display: table-header-group; }
  #edlp table.edlp__g td:first-child { width: 34%; }
  #edlp table.edlp__g td:nth-child(2), #edlp table.edlp__g td:nth-child(3) { width: 13%; }
  #edlp .edlp__ph { display: flex; flex-wrap: wrap; gap: 3mm; margin-bottom: 4mm; }
  #edlp .edlp__ph figure { margin: 0; width: 52mm; break-inside: avoid; }
  #edlp .edlp__ph img { width: 100%; height: 38mm; object-fit: cover; border: 0.5pt solid #999; }
  #edlp .edlp__ph figcaption { font-size: 7.5pt; color: #444; }
  #edlp .edlp__n { white-space: pre-wrap; font-size: 9pt; }
  #edlp .edlp__sig { display: flex; gap: 10mm; margin-top: 8mm; break-inside: avoid; }
  #edlp .edlp__sig > div { flex: 1; }
  #edlp .edlp__sig img { display: block; width: 100%; height: 25mm; object-fit: contain; }
  #edlp .edlp__sig span { font-size: 8pt; color: #444; }
  #edlp .edlp__vide { height: 25mm; border-bottom: 0.5pt solid #000; }

  body[data-print="rapport"] #rapport { display: block !important; }
  #rapport .rap { padding: 0; font-size: 9.5pt; }
  /* La largeur d'une A4 en pixels CSS déclenche sinon les règles « écran
     étroit » : sur papier on veut la mise en page large. */
  #rapport .rap__cles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #rapport .rap__head { flex-direction: row; }
  #rapport .rap__meta { text-align: right; }
  #rapport .rap__head h1 { font-size: 17pt; }
  #rapport .rap__st { font-size: 10.5pt; }
  #rapport .rap__cles { gap: 3mm; margin-bottom: 8mm; }
  #rapport .rap__cles b { font-size: 13pt; }
  /* Un tableau ne se coupe pas au milieu d'une ligne, et un titre ne reste
     jamais seul en bas de page. */
  #rapport .rap__sec { margin-bottom: 8mm; }
  #rapport .rap__sec h3 { break-after: avoid; }
  #rapport table.rap__t { break-inside: auto; }
  #rapport table.rap__t tr { break-inside: avoid; break-after: auto; }
  #rapport table.rap__t thead { display: table-header-group; }
  #rapport table.rap__t tfoot { display: table-footer-group; }
  #rapport .rap__pied { margin-top: 10mm; }
}
.rap__note { margin: calc(var(--s5) * -1) 0 var(--s5); font-size: var(--t-xs); color: var(--faint); }
.rap__futur td { color: var(--faint); }

#m-body code { font-family: var(--f-mono); font-size: 12px; background: var(--line-soft);
  padding: 1px 5px; border-radius: var(--r-sm); }
.drop__fmt { display: block; margin-top: 6px; font-size: var(--t-xs); color: var(--faint); }

/* --- Rapprochement bancaire : pourquoi ça a matché ------------------------- */
.match__iban { display: block; font-family: var(--f-mono); font-size: 10px; color: var(--faint); letter-spacing: .02em; }
.match__pq { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.match__tag {
  font-size: 9.5px; font-weight: 600; padding: 1px 5px; border-radius: var(--r-full);
  background: var(--line-soft); color: var(--muted); white-space: nowrap;
}
.match__tag--fort { background: rgba(0, 186, 232, .14); color: #0089AC; }
.match__tag--faible { background: var(--stop-bg); color: var(--stop); }

/* ==========================================================================
   Agent de relance (Claude)
   ========================================================================== */
.ag-tete { padding: var(--s4); margin-bottom: 26px; display: grid; gap: var(--s4); }
.ag-modes { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.ag-modes button { border: 0; background: transparent; font: inherit; font-size: var(--t-sm); padding: 6px 14px; border-radius: 999px; color: var(--muted); cursor: pointer; }
.ag-modes button[aria-pressed="true"] { background: var(--bleu-vif); color: #fff; font-weight: 600; }
.ag-modes button[data-mode="actif"][aria-pressed="true"] { background: var(--cyan); color: var(--navy); }
.ag-ligne { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.ag-etats { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-note { margin: 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.ag-dec { padding: var(--s4); margin-bottom: var(--s3); display: grid; gap: var(--s3); border-left: 3px solid var(--warn); }
.ag-dec__tete { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.ag-dec__tete b { font-size: var(--t-md); }
.ag-cite { margin: 0; padding: 10px 14px; background: var(--surface); border-radius: var(--r-md, 8px); font-size: var(--t-sm); white-space: pre-wrap; color: var(--ink-soft); }
.ag-dec .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.row.ag-row { grid-template-columns: minmax(0, 1.4fr) 110px minmax(0, 1.6fr) auto; }
.row.ag-row .raison { font-size: var(--t-sm); color: var(--muted); }
.row.ag-row .raison b { color: var(--ink); font-weight: 600; }
.ag-inter { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); cursor: pointer; }
.ag-msg { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 9px 12px; font-size: var(--t-sm); }
.ag-msg + .ag-msg { border-top: 1px solid var(--line-soft); }
.ag-msg .q { color: var(--faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.ag-msg .s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-fil { display: grid; gap: 10px; }
.ag-bulle { padding: 10px 14px; border-radius: 10px; background: var(--surface); font-size: var(--t-sm); white-space: pre-wrap; line-height: 1.55; }
.ag-bulle--in { background: rgba(0, 186, 232, .08); border: 1px solid rgba(0, 186, 232, .25); }
.ag-bulle__m { display: block; font-size: var(--t-xs); color: var(--faint); margin-bottom: 4px; white-space: normal; }
@media (max-width: 1080px) {
  .row.ag-row { grid-template-columns: minmax(0, 1fr) auto; }
  .row.ag-row .raison { grid-column: 1 / -1; }
  .ag-msg { grid-template-columns: minmax(0, 1fr) auto; }
  .ag-msg .q { grid-column: 1 / -1; }
}

/* ==========================================================================
   Simplification du 21/10/2026 : trois entrées, « Plus », la fiche locataire
   ========================================================================== */
.retour { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); }
.retour h2 { margin: 0; font-family: var(--font-titre); font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; }
.plus { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); max-width: 1180px; }
.plus__t {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-align: left; transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.plus__t:hover { border-color: var(--bleu-bord); box-shadow: var(--shadow-sm); }
.plus__t .rail__tuile { width: 42px; height: 42px; }
.plus__t .rail__tuile svg { width: 20px; height: 20px; }
.plus__txt { flex: 1; min-width: 0; }
.plus__txt b { display: block; font-family: var(--font-titre); font-size: var(--t-lg); font-weight: 700; color: var(--ink); }
.plus__txt span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }
.alert { align-items: center; }
.alert .t { flex: 1; min-width: 0; }
.alert__go { flex: none; }
.fiche { display: grid; gap: var(--s4); }
.fiche section { display: grid; gap: 6px; padding-bottom: var(--s4); border-bottom: 1px solid var(--line-soft); }
.fiche section:last-child { border-bottom: 0; padding-bottom: 0; }
.fiche h4 { margin: 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted); }
.fiche__l { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.55; }
.fiche__mois { display: flex; flex-wrap: wrap; gap: 6px; }
.fiche__m { min-width: 46px; text-align: center; padding: 6px 8px; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; background: var(--line-soft); color: var(--muted); }
.fiche__m[data-st="paye"] { background: var(--ok-bg); color: var(--ok); }
.fiche__m[data-st="partiel"] { background: var(--warn-bg); color: var(--warn); }
.fiche__m[data-st="impaye"] { background: var(--stop-bg); color: var(--stop); }
.retour[hidden] { display: none; }
/* Simplification : la page Locataires va droit aux fiches (les chiffres restent dans Plus › Rapport). */
#ba-stats { display: none; }

/* ==========================================================================
   Cartes des locataires (21/10/2026) — qui paie, d'un coup d'œil
   ========================================================================== */
.ba-q { width: 260px; flex: none; border-radius: var(--r-full); padding-left: 38px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23686F8F' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") no-repeat 13px center / 16px; }
.chips-f { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--s4); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--paper); font-size: var(--t-sm); color: var(--ink-soft);
  transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease); }
.chip:hover { border-color: var(--bleu-bord); }
.chip[aria-pressed="true"] { background: var(--bleu-vif); border-color: var(--bleu-vif); color: #fff; font-weight: 600; }
.chip__n { font-size: var(--t-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--r-full); background: var(--line-soft); color: var(--muted); }
.chip[aria-pressed="true"] .chip__n { background: rgba(255,255,255,.22); color: #fff; }

.leases { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); }
.lc {
  position: relative; display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  cursor: pointer; transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.lc:hover { border-color: var(--bleu-bord); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lc:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 2px; }
.lc--fini { background: var(--surface); opacity: .8; }

.lc__tete { display: flex; align-items: center; gap: var(--s3); }
.lc__av { flex: none; width: 46px; height: 46px; border-radius: var(--r-full); display: grid; place-items: center;
  font-family: var(--font-titre); font-weight: 800; font-size: 16px; letter-spacing: .02em;
  background: var(--line-soft); color: var(--muted); }
.lc__av[data-ton="ok"] { background: var(--ok-bg); color: var(--ok); }
.lc__av[data-ton="retard"] { background: var(--stop-bg); color: var(--stop); }
.lc__av[data-ton="avenir"] { background: var(--bleu-pale); color: var(--bleu-vif); }
.lc__id { flex: 1; min-width: 0; }
.lc__id h3 { margin: 0; font-family: var(--font-titre); font-size: var(--t-lg); font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc__id span { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc__edit { flex: none; width: 34px; height: 34px; border-radius: var(--r-full); display: grid; place-items: center; color: var(--faint);
  transition: background .14s var(--ease), color .14s var(--ease); }
.lc__edit:hover { background: var(--bleu-pale); color: var(--bleu-vif); }
.lc__edit svg { width: 17px; height: 17px; }

.lc__loyer { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.lc__loyer b { display: block; font-family: var(--font-titre); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.lc__loyer span:not(.pill) { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--muted); }
.lc__loyer .pill { font-size: var(--t-xs); padding: 5px 11px; }

.lc__mois { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.lc__m { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: lowercase; }
.lc__m i { display: block; width: 100%; height: 8px; border-radius: var(--r-full); background: var(--line-soft); }
.lc__m[data-st="paye"] i { background: var(--ok); }
.lc__m[data-st="partiel"] i { background: var(--warn); }
.lc__m[data-st="impaye"] i { background: var(--stop); }
.lc__m[data-st="attente"] i { background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 7px); }

.lc__pied { display: grid; grid-template-columns: 1.4fr 1.2fr .6fr; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.lc__ind { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lc__ind .eyebrow { font-size: 10.5px; }
.lc__ind b { font-size: var(--t-sm); font-weight: 600; color: var(--warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lc__ind b small { font-weight: 500; color: var(--faint); }
.lc__ind[data-ok="true"] b { color: var(--ok); }
.lc__barre { display: block; height: 4px; border-radius: var(--r-full); background: var(--line-soft); overflow: hidden; }
.lc__barre i { display: block; height: 100%; background: var(--warn); border-radius: inherit; }
.lc__ind[data-ok="true"] .lc__barre i { background: var(--ok); }
@media (max-width: 720px) { .ba-q { width: 100%; } }

/* ==========================================================================
   Lisibilité des titres (21/10/2026) — « tous les titres sont trop illisibles »
   Les petits intitulés en CAPITALES ESPACÉES, gris clair, en 10-12 px, se
   lisaient mal : on ne reconnaît plus la forme du mot. Ils passent en
   minuscules, plus grands et plus foncés. Les gros titres et les chiffres,
   très serrés (-0,035 em) et très gras en Figtree, sont desserrés.
   Ne touche pas aux documents imprimés (.rap, #quit, #edlp).
   ========================================================================== */
.eyebrow, .stat .k, .alert-head, .row .lab, .grp2__btn, table.tbl th, table.yr th,
.leases__site, fieldset.fs legend, .rtuile__n, .fiche h4, .lc__ind .eyebrow, .rail__section .eyebrow {
  text-transform: none; letter-spacing: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
}
.rail__section .eyebrow { color: var(--muted); }
.lc__ind .eyebrow, .row .lab { font-size: 12.5px; color: var(--muted); }
table.yr th { font-size: 12.5px; }
.rail__label { text-transform: none; letter-spacing: 0; font-size: var(--t-md); }
.rail__mode { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

.sec-head h2, .retour h2, .vue__ident h1, .mh h3, .plus__txt b, .lc__id h3 { font-weight: 700; letter-spacing: 0; }
.stat .v { font-weight: 700; letter-spacing: -.01em; }
.lc__loyer b { font-weight: 700; letter-spacing: -.01em; }
.rail__mot { letter-spacing: -.01em; }

/* ==========================================================================
   Style « Smoobu » (21/10/2026) — demandé par Benito sur captures de smoobu.com.
   On reprend le LANGAGE (pas la marque) : un bleu franc, un fond bleu très
   pâle, des cartes blanches très arrondies sans bordure, un menu en grandes
   pilules (icône dans un rond blanc, entrée active remplie de bleu), une
   carte de chiffres mise en avant en bleu plein, de gros boutons-pilules.
   Ce bloc vient en dernier et prime sur le reste ; l'impression n'est pas touchée.
   ========================================================================== */
:root {
  /* La palette de smoobu.com (lue dans leur feuille, 21/10/2026). */
  --bleu-vif: #0F62FE; --bleu-fonce: #0050E0;
  --bleu-pale: #EDF5FF; --bleu-bord: #C6DBFF;
  --fond: #EDF5FF;
  --ink: #21272A; --ink-soft: #343A3F; --muted: #697077;
  --r-carte: 28px;
}
body, .vue, .vue__scroll { background: var(--fond); }
.vue__head { background: transparent; border-bottom: 0; padding-top: var(--s5); }

/* --- le menu : des pilules ------------------------------------------------- */
.rail { background: var(--fond); border-right: 0; }
.rail__section { padding: var(--s2) var(--s4); display: grid; gap: 10px; }
.rail__item { padding: 6px 18px 6px 6px; border-radius: var(--r-full); background: var(--paper); color: var(--ink); gap: var(--s4); }
.rail__item:hover { background: #fff; box-shadow: 0 4px 16px -8px rgba(15, 98, 254, .35); color: var(--ink); }
.rail__item[aria-selected="true"] { background: var(--bleu-vif); color: #fff; }
.rail__item[aria-selected="true"]::before { display: none; }
.rail__tuile { width: 42px; height: 42px; background: var(--surface); color: var(--ink); }
.rail__item[aria-selected="true"] .rail__tuile { background: #fff; color: var(--ink); }
.rail__label { font-size: var(--t-md); font-weight: 600; }
.rail__item[aria-selected="true"] .rail__count { background: rgba(255,255,255,.22); color: #fff; }
.rail__foot { border-top: 0; }
.sync { background: var(--paper); border-radius: var(--r-full); }

/* --- les cartes : blanches, très rondes, sans bordure -------------------------- */
.card, .stat, .alerts, .lc, .row, .plus__t, .lease, .rtuile, .match { border: 0; border-radius: var(--r-carte); box-shadow: none; }
.row { border-radius: 22px; }
.lc { padding: 26px; }
.lc:hover, .plus__t:hover { box-shadow: 0 14px 34px -16px rgba(15, 98, 254, .35); transform: translateY(-2px); }
.stat { padding: 26px; }
.alert-head { background: transparent; border-bottom: 1px solid var(--line-soft); padding: 14px 22px; }
.alert { padding: 12px 22px; }

/* La carte mise en avant : la première carte de chiffres, en bleu plein. */
.stats .stat:first-child { background: var(--bleu-vif); }
.stats .stat:first-child .k, .stats .stat:first-child .sub, .stats .stat:first-child .v small { color: rgba(255,255,255,.82); }
.stats .stat:first-child .v { color: #fff; }

/* --- boutons, champs, filtres ------------------------------------------------- */
.btn { padding: 10px 20px; border: 0; background: var(--paper); color: var(--bleu-vif); font-weight: 600; }
.btn:hover { background: var(--bleu-pale); color: var(--bleu-fonce); }
.btn.s { padding: 8px 16px; }
.btn.p { background: var(--bleu-vif); color: #fff; }
.btn.p:hover { background: var(--bleu-fonce); color: #fff; }
.btn.q { background: transparent; color: var(--bleu-vif); }
.btn.q:hover { background: var(--bleu-pale); }
.btn.danger { color: var(--stop); }
.row .btn:not(.p), .lc .btn:not(.p), .alert .btn, .ag-dec .btn:not(.p) { background: var(--bleu-pale); }
.nav-b { border: 0; border-radius: var(--r-full); width: 38px; height: 38px; color: var(--bleu-vif); }
.inp, .sel { border-radius: 14px; border-color: transparent; background-color: var(--paper); }
.ba-q { border-radius: var(--r-full); }
.chip { border: 0; padding: 9px 18px; font-weight: 600; color: var(--ink); }
.chip:hover { background: #fff; box-shadow: 0 4px 14px -8px rgba(15, 98, 254, .35); }
.ag-modes { border: 0; background: var(--paper); padding: 4px; }
dialog.modal { border-radius: var(--r-carte); border: 0; }
.mh { border-bottom-color: var(--line-soft); }

/* --- textes : le bleu sert aux intitulés de cartes, comme chez eux ------------- */
.stat .k { color: var(--bleu-vif); }
.vue__ident h1, .sec-head h2, .retour h2 { color: var(--ink); }

/* Les champs posés sur une carte blanche : un fond gris très clair, sinon on
   ne les voit plus (la case « Reçu » avait disparu). */
.row .inp, .card .inp, .card .sel, dialog .inp, dialog .sel, .ag-dec .inp { background-color: #F2F4F8; }
.row .inp:focus, .card .inp:focus, dialog .inp:focus { background-color: #fff; }
.vue__ident h1, .stat .v, .lc__loyer b { color: var(--ink); }
.stats .stat:first-child .v { color: #fff; }

/* ==========================================================================
   Icônes (21/10/2026) — un seul jeu au trait (`ico()` dans app.js)
   ========================================================================== */
.ico { width: 18px; height: 18px; flex: none; }
.btn .ico { width: 16px; height: 16px; }
.btn.s .ico { width: 15px; height: 15px; }
.alert__go .ico { margin-left: 2px; }
.chip .ico { width: 15px; height: 15px; color: var(--bleu-vif); }
.chip[aria-pressed="true"] .ico { color: #fff; }

/* La carte de chiffres porte son icône dans un rond, en haut à droite. */
.stat { position: relative; }
.stat__ico { position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; border-radius: var(--r-full);
  display: grid; place-items: center; background: var(--bleu-pale); color: var(--bleu-vif); }
.stat__ico .ico { width: 21px; height: 21px; }
.stat.is-ok .stat__ico { background: var(--ok-bg); color: var(--ok); }
.stat.is-bad .stat__ico { background: var(--stop-bg); color: var(--stop); }
.stats .stat:first-child .stat__ico { background: rgba(255,255,255,.18); color: #fff; }

/* « À faire » : un rond teinté selon l'urgence, à la place du petit trait. */
.alert__ico { flex: none; width: 38px; height: 38px; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--line-soft); color: var(--muted); }
.alert__ico .ico { width: 19px; height: 19px; }
.alert.bad .alert__ico { background: var(--stop-bg); color: var(--stop); }
.alert.warn .alert__ico { background: var(--warn-bg); color: var(--warn); }

/* Carte locataire et fiche */
.lc__id span .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--faint); }
.lc__ind .eyebrow { display: inline-flex; align-items: center; gap: 5px; }
.lc__ind .eyebrow .ico { width: 14px; height: 14px; color: var(--bleu-vif); }
.fiche h4 { display: flex; align-items: center; gap: 8px; }
.fiche h4 .ico { width: 30px; height: 30px; padding: 6px; border-radius: var(--r-full); background: var(--bleu-pale); color: var(--bleu-vif); }

/* ==========================================================================
   L'accueil en une liste (21/10/2026) — « une ligne par locataire »
   ========================================================================== */
#mo-stats { display: none; }
.mo-resume { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: var(--s3); font-size: var(--t-md); color: var(--muted); }
.mo-resume b { color: var(--ink); font-weight: 700; }
.mo-resume__reste { color: var(--stop); font-weight: 600; }
.mo-resume__barre { display: inline-block; width: 120px; height: 6px; border-radius: var(--r-full); background: #fff; overflow: hidden; }
.mo-resume__barre i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.mo-resume__barre i.warn { background: var(--warn); }
.mo-resume__barre i.bad { background: var(--stop); }

.lignes { background: var(--paper); border-radius: var(--r-carte, 24px); overflow: hidden; }
.ligne { display: grid; grid-template-columns: 12px minmax(0, 1fr) 110px 210px auto; gap: var(--s4); align-items: center;
  padding: 12px 22px; min-height: 62px; }
.ligne + .ligne { border-top: 1px solid var(--line-soft); }
.ligne:hover { background: #F8FAFF; }
.ligne__pt { width: 12px; height: 12px; border-radius: var(--r-full); background: var(--line); }
.ligne[data-st="paye"] .ligne__pt { background: var(--ok); }
.ligne[data-st="partiel"] .ligne__pt { background: var(--warn); }
.ligne[data-st="impaye"] .ligne__pt { background: var(--stop); }
.ligne__qui { min-width: 0; }
.ligne__qui b { display: block; font-weight: 700; font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne__qui span { display: block; font-size: var(--t-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne__mt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ligne__st { font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.ligne[data-st="paye"] .ligne__st { color: var(--ok); }
.ligne[data-st="partiel"] .ligne__st { color: var(--warn); }
.ligne[data-st="impaye"] .ligne__st { color: var(--stop); }
.ligne__act { display: flex; gap: 6px; justify-content: flex-end; min-width: 132px; }
.ligne__act .btn.q { padding: 8px 10px; }
@media (max-width: 760px) {
  .ligne { grid-template-columns: 12px minmax(0, 1fr) auto; row-gap: 4px; padding: 12px 16px; }
  .ligne__mt { grid-column: 2; grid-row: 2; text-align: left; font-size: var(--t-sm); }
  .ligne__st { grid-column: 2; grid-row: 3; }
  .ligne__act { grid-column: 3; grid-row: 1 / 4; min-width: 0; }
}
/* La barre du mois tient sur une ligne : ces trois boutons n'affichent que
   leur icône ; le texte apparaît au survol (title). */
#mo-today, #mo-allpaid, #mo-csv { font-size: 0; gap: 0; width: 38px; height: 38px; padding: 0; border-radius: var(--r-full); }
#mo-today .ico, #mo-allpaid .ico, #mo-csv .ico { width: 18px; height: 18px; }

/* Wallet : l'encadré du rapprochement automatique (21/10/2026) */
.wal { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: 18px 22px; margin-bottom: var(--s5);
  background: var(--paper); border-radius: var(--r-carte, 24px); }
.wal--off { background: var(--bleu-vif); color: #fff; }
.wal__ico { flex: none; width: 46px; height: 46px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.wal--off .wal__ico { background: #fff; color: var(--bleu-vif); }
.wal__ico .ico { width: 22px; height: 22px; }
.wal__t { flex: 1; min-width: 220px; }
.wal__t b { display: block; font-size: var(--t-lg); font-weight: 700; }
.wal__t span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }
.wal--off .wal__t span { color: rgba(255,255,255,.85); }
.wal--off .btn.p { background: #fff; color: var(--bleu-vif); }
.match__tag .ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

/* Le lot montre son locataire, sans le saisir (21/10/2026) */
.lot-occ { display: flex; align-items: center; gap: var(--s3); }
.lot-occ__t b { display: block; font-weight: 700; }
.lot-occ__t span { display: block; font-size: var(--t-sm); color: var(--muted); }
.lot-occ__b { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--s3); }

/* ==========================================================================
   Titres en gras (21/10/2026) — « fais les titres bold »
   ========================================================================== */
.vue__ident h1, .sec-head h2, .retour h2, .mh h3, #mo-label, .stepper .mo { font-weight: 800; }
.stat .k { font-weight: 700; }
.stat .v, .lc__loyer b { font-weight: 800; }
.rail__label, .rail__item[aria-selected="true"] .rail__label { font-weight: 700; }
.plus__txt b, .lc__id h3, .ligne__qui b, .wal__t b, .lot-occ__t b, .ag-dec__tete b { font-weight: 800; }
.alert .t b, .fiche h4, .lc__ind .eyebrow, .alert-head, table.tbl th, .chip { font-weight: 700; }

/* ==========================================================================
   Fond blanc (21/10/2026) — « tu peux faire le fond blanc »
   La page est blanche ; les cartes passent en gris très clair (#F5F7FB),
   comme les cartes de smoobu.com sur leur fond blanc — sinon, blanches sur
   blanc et sans bordure, elles disparaîtraient. Les champs : gris sur la page,
   blancs dans une carte.
   ========================================================================== */
:root { --fond: #FFFFFF; --carte: #F5F7FB; }
body, .vue, .vue__scroll, .rail { background: #fff; }
.card, .stat, .alerts, .lc, .row, .plus__t, .lignes, .wal, .lease, .rtuile, .match, .ag-dec,
.rail__item, .sync, .chip, .nav-b, .ag-modes { background: var(--carte); }
.stats .stat:first-child { background: var(--bleu-vif); }
.wal--off { background: var(--bleu-vif); }
.rail__item[aria-selected="true"], .chip[aria-pressed="true"] { background: var(--bleu-vif); }
.rail__item:hover, .chip:hover, .plus__t:hover, .lc:hover { background: #EEF2F9; }
.rail__item[aria-selected="true"]:hover { background: var(--bleu-fonce); }
.rail__tuile { background: #fff; }
.ligne:hover { background: #EEF2F9; }
.ligne + .ligne { border-top-color: #E6EAF2; }
.alert-head, .fiche section { border-color: #E6EAF2; }

/* Boutons secondaires : bleu très pâle, lisibles sur blanc comme sur gris */
.btn { background: var(--bleu-pale); }
.btn.q { background: transparent; }
.btn.p { background: var(--bleu-vif); }

/* Champs */
.inp, .sel { background-color: #F2F4F8; }
.card .inp, .card .sel, .row .inp, .ag-dec .inp, .lignes .inp, .stat .inp { background-color: #fff; }
dialog .inp, dialog .sel { background-color: #F2F4F8; }
dialog .fs { background: var(--carte); border: 0; border-radius: 18px; }
dialog .fs .inp, dialog .fs .sel { background-color: #fff; }
.mo-resume__barre, .lc__barre, .meter { background: #E6EAF2; }

/* ==========================================================================
   Agent Claude — organisé comme l'Aperçu de la relance Cleanix (21/10/2026)
   ========================================================================== */
.ag-intro { margin: 0 0 var(--s4); font-size: var(--t-md); color: var(--muted); max-width: 720px; }
.ag-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.ag-k { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; border-radius: 22px;
  background: var(--carte); text-align: left; cursor: default; min-width: 0; }
.ag-k--go { cursor: pointer; box-shadow: inset 0 0 0 2px var(--bleu-vif); }
.ag-k__ico { width: 38px; height: 38px; border-radius: var(--r-full); display: grid; place-items: center; margin-bottom: 6px; }
.ag-k__ico .ico { width: 19px; height: 19px; }
.ag-k__ico[data-ton="rouge"] { background: var(--stop-bg); color: var(--stop); }
.ag-k__ico[data-ton="bleu"] { background: var(--bleu-pale); color: var(--bleu-vif); }
.ag-k__ico[data-ton="ambre"] { background: var(--warn-bg); color: var(--warn); }
.ag-k__ico[data-ton="vert"] { background: var(--ok-bg); color: var(--ok); }
.ag-k__t { font-size: var(--t-sm); font-weight: 700; color: var(--ink-soft); }
.ag-k b { font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ag-k__s { font-size: var(--t-xs); color: var(--muted); line-height: 1.4; }

.ag-route__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.ag-etape { padding: 18px; display: grid; gap: 10px; }
.ag-etape h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-size: var(--t-md); font-weight: 800; }
.ag-etape h3 .ico { color: var(--bleu-vif); }
.ag-etape__l { font-size: var(--t-xs); font-weight: 700; color: var(--muted); }
.ag-etape__pied { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--bleu-pale); font-size: var(--t-sm); color: var(--ink-soft); }
.ag-etape__pied .ico { color: var(--bleu-vif); margin-top: 2px; }
.ag-src { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #fff; }
.ag-src__ico { flex: none; width: 34px; height: 34px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--bleu-pale); color: var(--bleu-vif); }
.ag-src__ico .ico { width: 17px; height: 17px; }
.ag-src__t { flex: 1; min-width: 0; }
.ag-src__t b { display: block; font-size: var(--t-sm); font-weight: 700; }
.ag-src__t span { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); }
.ag-src__n { font-weight: 800; font-size: var(--t-md); text-align: right; }
.ag-src__n small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.ag-pt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.ag-pt--ok { background: var(--ok); }
.ag-cl { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; }
.ag-cl__av { flex: none; width: 34px; height: 34px; border-radius: var(--r-full); display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--bleu-pale); color: var(--bleu-vif); }
.ag-cl__t { flex: 1; min-width: 0; }
.ag-cl__t b { display: block; font-size: var(--t-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-cl__t span { font-size: var(--t-xs); color: var(--muted); }
.ag-voir { justify-self: start; }
.ag-regles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ag-regles li { display: flex; gap: 8px; font-size: var(--t-sm); color: var(--ink-soft); }
.ag-regles .ico { width: 15px; height: 15px; color: var(--ok); margin-top: 3px; }

/* L'interrupteur */
.ag-sw { position: relative; flex: none; width: 42px; height: 24px; cursor: pointer; }
.ag-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ag-sw i { position: absolute; inset: 0; border-radius: var(--r-full); background: #CBD3E1; transition: background .15s var(--ease); }
.ag-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ag-sw input:checked + i { background: var(--bleu-vif); }
.ag-sw input:checked + i::after { transform: translateX(18px); }
.ag-sw input:focus-visible + i { outline: 2px solid var(--bleu-vif); outline-offset: 2px; }
.ag-sw--grand { width: 50px; height: 28px; }
.ag-sw--grand i::after { width: 22px; height: 22px; }
.ag-sw--grand input:checked + i::after { transform: translateX(22px); }
.ag-actif { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; cursor: pointer; }
.ag-actif--on { background: var(--ok-bg); }
.ag-actif > span:first-child { flex: 1; }
.ag-actif b { display: block; font-weight: 800; }
.ag-actif small { display: block; font-size: var(--t-xs); color: var(--muted); }
.ag-arret { justify-self: start; font-size: var(--t-xs); color: var(--muted); text-decoration: underline; padding: 0; }

.ag-route__pas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: var(--s4) 0 var(--s6); }
.ag-pas b { display: block; font-weight: 800; margin: 8px 0 4px; }
.ag-pas p { margin: 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.ag-pas__n { width: 34px; height: 34px; border-radius: var(--r-full); display: grid; place-items: center; font-weight: 800; background: var(--carte); color: var(--muted); }
.ag-pas__n--ok { background: var(--ok); color: #fff; }
.ag-pas__n .ico { width: 18px; height: 18px; }

.ag-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); margin-bottom: var(--s5); align-items: start; }
.ag-bloc { padding: 18px; }
.ag-bloc__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ag-bloc__tete h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--t-md); font-weight: 800; }
.ag-bloc__tete h3 .ico { color: var(--bleu-vif); }
.ag-bloc__tete span { font-size: var(--t-xs); color: var(--muted); }
.ag-ev { display: flex; align-items: center; gap: 10px; padding: 10px 4px; }
.ag-ev + .ag-ev, .ag-act + .ag-act { border-top: 1px solid #E6EAF2; }
.ag-ev__t { flex: 1; min-width: 0; }
.ag-ev__t b { display: block; font-size: var(--t-sm); font-weight: 700; }
.ag-ev__t span, .ag-ev__d span { display: block; font-size: var(--t-xs); color: var(--muted); }
.ag-ev__d { text-align: right; }
.ag-ev__d b { font-size: var(--t-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.ag-bloc__pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: var(--t-xs); color: var(--muted); }
.ag-act { padding: 10px 4px; }
.ag-act > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-act b { font-size: var(--t-sm); font-weight: 700; }
.ag-act > span { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-sim { padding: 12px 14px; border-radius: 14px; background: var(--carte); margin-top: 10px; }
.ag-sim b { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.ag-sim b .ico { width: 15px; height: 15px; color: var(--bleu-vif); }
.ag-sim span { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 2px; }
.ag-sim--vous { background: var(--warn-bg); }
.ag-sim--vous .ico { color: var(--warn) !important; }
.ag-sim__c { white-space: pre-wrap; font-family: var(--font); font-size: var(--t-sm); background: #fff; border-radius: 10px; padding: 10px 12px; margin: 8px 0 0; }

@media (max-width: 1180px) { .ag-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .ag-route__cartes, .ag-route__pas, .ag-deux { grid-template-columns: 1fr; } .ag-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#ag-tous-tete[hidden], #ag-baux[hidden] { display: none !important; }

/* ==========================================================================
   Lots du bail (22/10/2026) — des tuiles par type, le choix en bleu
   ========================================================================== */
.lp { display: grid; gap: 14px; }
.lp__resume { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px;
  background: var(--bleu-pale); font-size: var(--t-sm); color: var(--ink-soft); }
.lp__resume .ico { width: 17px; height: 17px; color: var(--bleu-vif); margin-top: 1px; }
.lp__resume--vide { background: var(--warn-bg); }
.lp__resume--vide .ico { color: var(--warn); }
.lp__titre { display: block; font-size: var(--t-sm); font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.lp__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.lp-t { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: #fff; cursor: pointer; border: 2px solid transparent; transition: border-color .14s var(--ease), background .14s var(--ease); }
.lp-t:hover { border-color: var(--bleu-bord); }
.lp-t input { position: absolute; opacity: 0; pointer-events: none; }
.lp-t__ico { flex: none; width: 34px; height: 34px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--carte); color: var(--muted); }
.lp-t__ico .ico { width: 17px; height: 17px; }
.lp-t__txt { flex: 1; min-width: 0; }
.lp-t__txt b { display: block; font-weight: 700; font-size: var(--t-sm); }
.lp-t__etat { display: block; font-size: var(--t-xs); color: var(--ok); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-t__ok { display: none; flex: none; width: 22px; height: 22px; border-radius: var(--r-full); place-items: center; background: #fff; color: var(--bleu-vif); }
.lp-t__ok .ico { width: 14px; height: 14px; }
.lp-t--on { background: var(--bleu-vif); border-color: var(--bleu-vif); color: #fff; }
.lp-t--on .lp-t__ico { background: rgba(255,255,255,.2); color: #fff; }
.lp-t--on .lp-t__etat { color: rgba(255,255,255,.85); }
.lp-t--on .lp-t__ok { display: grid; }
.lp-t input:focus-visible ~ .lp-t__ico { outline: 2px solid var(--bleu-vif); outline-offset: 2px; }
.lp-t--pris { display: none; }
.lp--tout .lp-t--pris { display: flex; opacity: .6; }
.lp-t--pris .lp-t__etat { color: var(--muted); }
.lp__groupe:not(:has(.lp-t:not(.lp-t--pris))) { display: none; }
.lp--tout .lp__groupe { display: block; }
.lp__voir { justify-self: start; font-size: var(--t-sm); font-weight: 600; color: var(--bleu-vif); padding: 4px 0; }

/* ==========================================================================
   Une seule ligne de style (22/10/2026) — « fais mieux, je veux une ligne »
   Plus de cyan à côté du bleu : un seul bleu pour tout ce qui est actif ou
   compte. Le contour de focus devient un trait fin bleu, et le × des
   fenêtres un rond net.
   ========================================================================== */
:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 2px; }
#m-x { width: 38px; height: 38px; padding: 0; border-radius: var(--r-full); background: var(--carte); color: var(--ink-soft);
  font-size: 15px; line-height: 1; display: grid; place-items: center; }
#m-x:hover { background: var(--bleu-pale); color: var(--bleu-vif); }
#m-x:focus { outline: none; }
#m-x:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 2px; }

/* Les compteurs : gris au repos, bleu plein quand quelque chose attend,
   blanc sur l'entrée active. Même forme partout. */
.rail__count { min-width: 24px; height: 24px; padding: 0 7px; display: inline-grid; place-items: center;
  border-radius: var(--r-full); font-size: 12px; font-weight: 700; background: #E6EAF2; color: var(--muted); }
.rail__count.hot { background: var(--bleu-vif); color: #fff; }
.rail__item[aria-selected="true"] .rail__count { background: rgba(255,255,255,.22); color: #fff; }
.rail__item[aria-selected="true"] .rail__count.hot { background: #fff; color: var(--bleu-vif); }
.plus__t .rail__count.hot { background: var(--bleu-vif); color: #fff; }
.chip__n { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; background: #E6EAF2; }
.quitter { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 14px; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.quitter:hover { background: var(--carte); color: var(--stop); }
.quitter[hidden] { display: none; }

/* Banque : un clic sur le libellé déplie la communication entière (24/10/2026). */
.match--rp .cm { cursor: pointer; }
.rp-chev { color: var(--faint); font-weight: 400; }
.rp-detail { grid-column: 1 / -1; margin: 2px 0 6px; padding: var(--s3) var(--s4);
  background: var(--bg-soft, rgba(0,0,0,.03)); border-radius: 12px; }
.rp-detail .dl dd { text-align: left; white-space: normal; word-break: break-word; }

/* Banque : libellé lisible — donneur, communication sur deux lignes, IBAN (24/10/2026). */
.match.match--rp .cm { white-space: normal; overflow: visible; text-overflow: clip; display: flex; flex-direction: column; gap: 2px; }
.rp-lib__t { font-weight: 600; color: var(--ink); line-height: 1.3; }
.rp-lib__c { font-size: var(--t-xs); color: var(--ink-soft, var(--muted)); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.rp-lib__i { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Comptes (24/10/2026) : l'écran cache ce que le rôle ne permet pas.
   Le serveur refuse de toute façon. */
body:not([data-role="admin"]) [data-admin] { display: none !important; }
body[data-role="lecture"] [data-gestion] { display: none !important; }
body[data-role="lecture"] #mo-allpaid,
body[data-role="lecture"] .ligne__act [data-a="pay"],
body[data-role="lecture"] .ligne__act [data-a="unpay"],
body[data-role="lecture"] .rp-act,
body[data-role="lecture"] #rp-sur,
body[data-role="lecture"] .lc__edit { display: none !important; }