/* Module comptable — feuille unique, sans dépendance ni police externe.
   Refonte du 25/10/2026 (menu latéral, bleu nuit et or), finition du 26/10/2026 : icônes (sprite SVG local),
   en-têtes de page, tableau de bord en cartes, pastilles homogènes, tableaux denses, fiches téléphone.
   Aucune règle « style » en ligne : la politique de sécurité (style-src 'self') les refuserait. */
:root {
  --encre: #172033; --encre-2: #3a4458; --gris: #5d6779; --gris-clair: #8a93a3; --trait: #e2e7ef; --trait-2: #eef1f6;
  --fond: #f3f5f9; --carte: #fff; --survol: #f8fafd;
  --nuit: #14213d; --nuit-2: #1c2c50; --nuit-3: #253a66; --or: #c9a227; --or-fonce: #9c7c14; --or-clair: #f7eecf;
  --bleu: #1f4fa3; --vert: #18794a; --orange: #a35a00; --rouge: #b42318; --violet: #6941c6; --gris-pastille: #475467;
  --vert-clair: #e5f5ec; --orange-clair: #fef1dc; --rouge-clair: #fdecea; --bleu-clair: #eaf0fb; --violet-clair: #f2edfc; --gris-fond: #eef0f4;
  --ombre: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --ombre-haute: 0 6px 20px rgba(20, 33, 61, .10);
  --rayon: 12px; --menu: 256px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; }
a { color: var(--bleu); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--nuit); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
main { max-width: 1400px; margin: 0 auto; padding: 18px 32px 28px; }
h1 { font-size: 1.6rem; line-height: 1.25; letter-spacing: -.015em; margin: 0; color: var(--nuit); font-weight: 750; }
h2 { font-size: 1.08rem; margin: 1.7em 0 .65em; color: var(--nuit); font-weight: 700; letter-spacing: -.005em; }
h3 { color: var(--nuit); font-size: 1rem; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86em; background: var(--gris-fond); padding: 1px 5px; border-radius: 5px; }
small, .aide, .note { color: var(--gris); }
small { font-size: .82rem; }
.aide { font-size: .9rem; max-width: 90ch; }
p { margin: .6em 0; }

/* icônes */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* ── structure : menu latéral sur ordinateur ─────────────────────────────────────────────────────────── */
.entete { background: var(--nuit); color: #fff; }
.entete a { color: #fff; }
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; line-height: 1.2; }
.marque-signe { flex: 0 0 38px; height: 38px; border-radius: 10px; background: linear-gradient(140deg, #e0bb45, var(--or) 55%, var(--or-fonce)); color: var(--nuit); display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.marque-texte { display: flex; flex-direction: column; min-width: 0; }
.marque-nom { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
.marque-module { color: rgba(255, 255, 255, .58); font-weight: 500; font-size: .74rem; margin-top: 3px; letter-spacing: .01em; }
.bascule-menu, .bouton-menu { display: none; }
.menu { display: flex; flex-direction: column; gap: 16px; }
.groupe { display: flex; flex-direction: column; gap: 1px; }
.groupe-titre { font-size: .68rem; text-transform: uppercase; letter-spacing: .11em; color: rgba(255, 255, 255, .42); padding: 0 12px 5px; font-weight: 700; }
.menu a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 7px 12px; border-radius: 8px; color: rgba(255, 255, 255, .80); font-size: .9rem; }
.menu a .ic { color: rgba(255, 255, 255, .55); }
.menu a:hover { background: var(--nuit-2); color: #fff; }
.menu a:hover .ic { color: #fff; }
.menu a[aria-current="page"] { background: var(--or); color: var(--nuit); font-weight: 650; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.menu a[aria-current="page"] .ic { color: var(--nuit); }
.deconnexion { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 6px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.menu .qui { display: flex; flex-direction: row; align-items: center; gap: 10px; text-decoration: none; padding: 6px; border-radius: 10px; }
.menu .qui[aria-current="page"] { background: var(--nuit-2); color: #fff; box-shadow: none; }
.avatar { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--nuit-3); color: var(--or); display: grid; place-items: center; font-weight: 700; font-size: .9rem; border: 1px solid rgba(201, 162, 39, .5); }
.qui-texte { display: flex; flex-direction: column; min-width: 0; }
.qui-nom { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qui-lien { font-size: .76rem; color: var(--or); }
button.lien { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: rgba(255, 255, 255, .62); padding: 4px 6px; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 500; text-align: left; }
button.lien:hover { color: #fff; background: none; }
.pied { max-width: 1400px; margin: 4px auto 26px; padding: 0 32px; font-size: .78rem; color: var(--gris-clair); }

/* fil d'Ariane */
.fil { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--gris); margin: 0 0 10px; font-weight: 500; }
.fil .ic { width: 14px; height: 14px; color: var(--gris-clair); }
.fil [aria-current] { color: var(--encre-2); }

@media (min-width: 961px) {
  body.avec-menu { padding-left: var(--menu); }
  body.avec-menu .entete { position: fixed; inset: 0 auto 0 0; width: var(--menu); padding: 20px 12px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; scrollbar-width: thin; scrollbar-color: var(--nuit-3) transparent; }
  body.avec-menu .marque { padding: 0 6px; }
  body.avec-menu .menu { flex: 1; }
  body.avec-menu .deconnexion { margin-top: auto; }
  body.sans-menu .entete { padding: 14px 32px; }
}
@media (max-width: 960px) {
  .entete { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 16px; gap: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
  .marque { flex: 1 1 0; min-width: 0; }
  .marque-signe { flex-basis: 34px; height: 34px; }
  .marque-nom { white-space: nowrap; }
  .bouton-menu { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: #fff; margin: 0; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); font-weight: 600; font-size: .9rem; }
  .menu { display: none; flex-basis: 100%; padding: 12px 0 6px; max-height: calc(100vh - 64px); overflow-y: auto; }
  .bascule-menu:checked ~ .menu { display: flex; }
  .bascule-menu:checked + .bouton-menu { background: var(--or); color: var(--nuit); border-color: var(--or); }
  .bascule-menu:focus-visible + .bouton-menu { outline: 3px solid var(--or); outline-offset: 2px; }
  main { padding: 14px 16px 20px; }
  .pied { padding: 0 16px; }
  .fil { display: none; }
}

/* ── en-tête de page ─────────────────────────────────────────────────────────────────────────────────── */
.titre-page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 20px; margin: 0 0 18px; }
.titre-page > :first-child { min-width: 0; flex: 1 1 380px; }
.titre-page > .choix-mois, .titre-page > .titre-actions { flex: 0 0 auto; }
.titre-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sous-titre { margin: 0; color: var(--gris); font-size: .92rem; }
.sous-titre .fictif { font-weight: 700; }
.titre-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.h1-mois { color: var(--gris); font-weight: 600; }
h1 + .aide, .titre-page + .aide { margin-top: -6px; }
.intro { color: var(--gris); font-size: .9rem; max-width: 95ch; margin: -8px 0 16px; }

/* choix du mois */
.choix-mois { display: flex; gap: 2px; align-items: center; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 4px; box-shadow: var(--ombre); }
.choix-mois label { margin: 0 2px 0 8px; color: var(--gris); font-weight: 600; font-size: .85rem; }
.choix-mois select, .choix-mois input { width: auto; border: 0; padding: 6px 8px; font-weight: 600; color: var(--nuit); background: transparent; }
.choix-mois select:focus, .choix-mois input:focus { outline: 2px solid rgba(31, 79, 163, .25); }
.choix-mois button { padding: 6px 12px; margin-left: 2px; }
.mois-pas { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--encre-2); text-decoration: none; }
a.mois-pas:hover { background: var(--bleu-clair); color: var(--bleu); }
.mois-pas.inactif { color: #c8ced8; }

/* ── composants ──────────────────────────────────────────────────────────────────────────────────────── */
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px 22px; box-shadow: var(--ombre); }
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }
main > section.carte + section.carte, main > section.carte + h2, main > .carte + .carte { margin-top: 18px; }
.etapes-carte { margin-bottom: 16px; }
.grille > section.carte, .grille > .pile, .pile > section.carte { margin-top: 0; }
.pile { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pile > .carte { margin: 0; }
.etroite { max-width: 420px; margin: 7vh auto 32px; padding: 30px 32px; }
.etroite h1 { font-size: 1.4rem; margin-bottom: .4em; }
label { display: block; margin: 12px 0 5px; font-weight: 600; font-size: .88rem; color: var(--encre-2); }
input, select, textarea { font: inherit; padding: 8px 11px; border: 1px solid #cdd4df; border-radius: 8px; width: 100%; background: #fff; color: var(--encre); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--nuit); }
input:focus, select:focus, textarea:focus { border-color: var(--bleu); outline: 3px solid rgba(31, 79, 163, .14); }
button { font: inherit; font-weight: 600; font-size: .9rem; padding: 7px 14px; border-radius: 8px; border: 1px solid #c9d2e0; background: #fff; color: var(--nuit); cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
button:hover { background: var(--survol); border-color: #aab6c9; }
button.principal { background: var(--nuit); border-color: var(--nuit); color: #fff; width: 100%; margin-top: 18px; padding: 10px 16px; }
button.principal:hover { background: var(--nuit-2); }
.bouton { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .88rem; padding: 7px 14px; border-radius: 8px; border: 1px solid #c9d2e0; background: #fff; color: var(--nuit); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.bouton:hover { background: var(--survol); color: var(--nuit); }
.bouton.plein { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.bouton.plein:hover { background: var(--nuit-2); color: #fff; }
.erreur { background: var(--rouge-clair); color: var(--rouge); border: 1px solid #f6c8c3; border-left: 4px solid var(--rouge); padding: 10px 14px; border-radius: 8px; }
.avertissement { background: var(--orange-clair); border: 1px solid #f5dcae; border-left: 4px solid #d98a00; padding: 10px 14px; border-radius: 8px; color: #5f3a00; }
.avertissement a { color: #5f3a00; font-weight: 600; }
.info { background: var(--bleu-clair); border: 1px solid #d3def3; border-left: 4px solid var(--bleu); padding: 10px 14px; border-radius: 8px; }
.fictif { color: var(--violet); }
.ok-texte { color: var(--vert); }
.alerte-texte { color: var(--rouge); font-weight: 600; }

/* contrôles (✔ / ✘) */
.controle { display: flex; gap: 10px; align-items: flex-start; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 10px 14px; margin: 8px 0; font-size: .9rem; }
.controle .ic { margin-top: 2px; }
p.controle.ok-texte { color: var(--encre-2); }
p.controle.ok-texte .ic { color: var(--vert); }
p.controle.erreur .ic { color: var(--rouge); }

/* ── chiffres (cartes indicateurs) ─────────────────────────────────────────────────────────────────────── */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 16px 0 18px; }
.chiffre { position: relative; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 15px 18px 14px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--ombre); overflow: hidden; min-width: 0; }
a.chiffre { text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s, border-color .12s; }
a.chiffre:hover { transform: translateY(-1px); box-shadow: var(--ombre-haute); border-color: #d3dae6; color: inherit; }
.chiffre .valeur { font-size: 1.55rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--nuit); line-height: 1.2; }
.chiffre .valeur.texte { font-size: 1.02rem; font-weight: 650; letter-spacing: 0; }
.chiffre .nom { color: var(--gris); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 650; }
.chiffre .nom { order: 0; } .chiffre .valeur { order: 1; }
.chiffre .note { font-size: .8rem; color: var(--gris); order: 2; }
.chiffre .barre { order: 3; margin-top: 8px; }
.chiffre.vert .valeur { color: var(--vert); }
.chiffre.rouge .valeur { color: var(--rouge); }
.chiffre.or .valeur { color: var(--or-fonce); }
.chiffre.violet .valeur { color: var(--violet); }
.chiffre .pastille { order: 2; align-self: flex-start; margin-top: 4px; }

/* barres de progression (SVG, largeurs en attributs : pas de style en ligne) */
.barre { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.barre .fond { fill: var(--trait-2); }
.barre .plein { fill: var(--vert); }
.barre .plein.or { fill: var(--or); }
.barre .ok { fill: #3ca66b; } .barre .partiel { fill: #f0a52a; } .barre .rouge { fill: #e0533f; }
.barre .violet { fill: #8b6bd8; } .barre .neutre { fill: #b8c0cc; }
.barre.epaisse { height: 12px; }

.compteurs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.compteur { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--encre); padding: 5px 12px; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); font-size: .86rem; }
.compteur b { font-variant-numeric: tabular-nums; }
.compteur::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b8c0cc; }
a.compteur:hover { border-color: var(--bleu); color: var(--encre); }
.compteur.ok::before { background: #3ca66b; } .compteur.partiel::before { background: #f0a52a; }
.compteur.rouge::before { background: #e0533f; } .compteur.violet::before { background: #8b6bd8; }
.compteur.total { background: var(--bleu-clair); border-color: #d3def3; }
.compteur.total::before { display: none; }

/* ── alertes ─────────────────────────────────────────────────────────────────────────────────────────── */
.alertes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.alerte { background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid #e39a1b; border-radius: 10px; padding: 12px 16px; box-shadow: var(--ombre); }
.alerte.type-lot_inconnu, .alerte.type-solde_negatif, .alerte.type-prorata { border-left-color: var(--rouge); }
.alerte .actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; align-items: start; }
.alerte .actions > a { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.alerte form { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.etiquette { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--orange); background: var(--orange-clair); padding: 2px 8px; border-radius: 6px; margin-right: 6px; vertical-align: 1px; }
.alerte.type-lot_inconnu .etiquette, .alerte.type-solde_negatif .etiquette, .alerte.type-prorata .etiquette { color: var(--rouge); background: var(--rouge-clair); }

.nouveaux { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0; margin: 0 0 14px; box-shadow: var(--ombre); }
.nouveaux > summary { list-style: none; padding: 12px 18px; display: flex; align-items: center; gap: 10px; }
.nouveaux > summary::-webkit-details-marker { display: none; }
.nouveaux > summary h2 { margin: 0; font-size: .98rem; }
.nouveaux > summary::after { content: "afficher"; margin-left: auto; font-size: .82rem; color: var(--bleu); font-weight: 600; }
.nouveaux[open] > summary::after { content: "masquer"; }
.nouveaux ul { margin: 0; padding: 4px 18px 14px 36px; columns: 2 380px; column-gap: 28px; font-size: .88rem; }
.nouveaux li { break-inside: avoid; margin: 2px 0; }
.nouveaux .aide { padding: 0 18px 12px; margin: 0; }

.filtres { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 14px 0; padding: 10px 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.filtres label { margin: 0; color: var(--gris); font-size: .85rem; }
.filtres select { width: auto; max-width: 100%; padding: 6px 10px; }
.filtres .compte-lignes { margin-left: auto; color: var(--gris); font-size: .85rem; }

/* ── tableaux ────────────────────────────────────────────────────────────────────────────────────────── */
.tableau { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--carte); font-size: .88rem; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.tableau th, .tableau td { border-bottom: 1px solid var(--trait-2); padding: 9px 12px; text-align: left; vertical-align: top; }
.tableau tbody tr:last-child td, .tableau tfoot tr:last-child td { border-bottom: 0; }
.tableau th { background: #f7f9fc; font-weight: 650; color: var(--gris); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; border-bottom: 1px solid var(--trait); }
.tableau tbody tr:hover td { background: var(--survol); }
.tableau tfoot td { background: #f7f9fc; font-weight: 700; border-top: 2px solid var(--trait); color: var(--nuit); }
.tableau .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .n small { font-variant-numeric: tabular-nums; white-space: normal; }
.tableau .code { white-space: nowrap; font-weight: 650; color: var(--nuit); }
.tableau td > small { display: inline-block; line-height: 1.35; }
.tableau .vide { text-align: center; color: var(--gris); padding: 22px 12px; }
.tableau .fort { font-weight: 700; color: var(--nuit); }
.tableau a.nom-lien { color: var(--encre); text-decoration: none; border-bottom: 1px dotted #9aa6b8; }
.tableau a.nom-lien:hover { color: var(--bleu); border-bottom-color: var(--bleu); }
@media (min-width: 761px) {
  .tableau th, .tableau td { padding: 8px 11px; }
}
.tableau form { margin-top: 6px; }
@media (min-width: 761px) { .tableau.loyers th:last-child { width: 25%; } .tableau.loyers th:first-child { width: 16%; } .tableau.loyers th:nth-child(2) { width: 17%; } }
.tableau button { padding: 4px 10px; font-size: .82rem; }
.tableau tr.ligne-mise td:first-child { box-shadow: inset 3px 0 0 var(--or); }
tr:target td { background: var(--or-clair) !important; }
.defile { overflow-x: auto; border-radius: var(--rayon); }

/* pastilles d'état : une seule palette pour tous les écrans */
.pastille { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 8px; border-radius: 999px; font-size: .76rem; font-weight: 650; white-space: nowrap; line-height: 1.5; background: var(--gris-fond); color: var(--gris-pastille); }
.pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pastille.PAYE, .pastille.ok, .pastille.statut-deduite { background: var(--vert-clair); color: var(--vert); }
.pastille.PARTIEL, .pastille.attente, .pastille.statut-a_deduire { background: var(--orange-clair); color: var(--orange); }
.pastille.IMPAYE, .pastille.rouge { background: var(--rouge-clair); color: var(--rouge); }
.pastille.A_VERIFIER, .pastille.violet { background: var(--violet-clair); color: var(--violet); }
.pastille.COMPTE_NON_LU, .pastille.NON_MENSUEL, .pastille.statut-annulee, .pastille.neutre { background: var(--gris-fond); color: var(--gris-pastille); }
.pastille.bleu { background: var(--bleu-clair); color: var(--bleu); }
.ratt { font-size: .84rem; }
.ratt.certain { color: var(--gris); }
.ratt.a_valider, .ratt.a_verifier { color: var(--violet); font-weight: 650; }
.pagination { margin: 14px 0; display: flex; gap: 12px; align-items: center; }

/* ── tableau de bord ─────────────────────────────────────────────────────────────────────────────────── */
.grille { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.grille > .carte { min-width: 0; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.carte-tete h2 { margin: 0; font-size: 1rem; }
.carte-tete a { font-size: .84rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.carte-tete a .ic { width: 15px; height: 15px; }
.carte.serree { padding: 16px 18px; }

/* étapes du mois */
.etapes-mois { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); counter-reset: etape; }
.etapes-mois li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 4px; counter-increment: etape; min-width: 0; }
.etapes-mois li::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--trait); }
.etapes-mois li:first-child::before { display: none; }
.etapes-mois li.fait::before, .etapes-mois li.en_cours::before { background: #3ca66b; }
.etapes-mois .rond { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: #fff; border: 2px solid var(--trait); color: var(--gris-clair); position: relative; z-index: 1; }
.etapes-mois .rond::after { content: counter(etape); }
.etapes-mois li.fait .rond { background: #3ca66b; border-color: #3ca66b; color: #fff; }
.etapes-mois li.fait .rond::after { content: none; }
.etapes-mois li.fait .rond .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.etapes-mois li:not(.fait) .rond .ic { display: none; }
.etapes-mois li.en_cours .rond { border-color: var(--or); color: var(--nuit); background: var(--or-clair); box-shadow: 0 0 0 4px rgba(201, 162, 39, .18); }
.etapes-mois .etape-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.etapes-mois a { text-decoration: none; color: var(--encre); font-weight: 650; font-size: .8rem; line-height: 1.25; }
.etapes-mois a:hover { color: var(--bleu); }
.etapes-mois li.a_venir a { color: var(--gris); font-weight: 600; }
.etapes-mois small { font-size: .72rem; line-height: 1.3; color: var(--gris); }
.etapes-mois li.en_cours small { color: var(--or-fonce); font-weight: 600; }
.avancement { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; font-size: .84rem; color: var(--gris); }
.avancement .barre { flex: 1; }
.avancement b { color: var(--nuit); font-variant-numeric: tabular-nums; }

/* liste « à traiter » */
.a-traiter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.a-traiter li { border-top: 1px solid var(--trait-2); }
.a-traiter li:first-child { border-top: 0; }
.a-traiter a { display: flex; align-items: center; gap: 10px; padding: 9px 2px; text-decoration: none; color: var(--encre); font-size: .9rem; }
.a-traiter a:hover { color: var(--bleu); }
.a-traiter a > .ic:first-child { color: var(--or-fonce); }
.a-traiter a > .ic:last-child { margin-left: auto; color: var(--gris-clair); width: 16px; height: 16px; }
.a-traiter li.urgent a > .ic:first-child { color: var(--rouge); }
.rien { display: flex; align-items: center; gap: 8px; color: var(--vert); font-weight: 600; margin: 4px 0; font-size: .92rem; }

/* répartition des loyers */
.repartition .barre { margin: 6px 0 12px; }
.lignes-resume { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.lignes-resume li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--trait-2); }
.lignes-resume li:first-child { border-top: 0; }
.lignes-resume span:last-child { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.lignes-resume li.total { border-top: 2px solid var(--trait); font-weight: 700; color: var(--nuit); }

/* tableau compact (dans une carte) */
.mini { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mini th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 650; padding: 6px 8px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.mini td { padding: 8px; border-bottom: 1px solid var(--trait-2); vertical-align: middle; }
.mini tr:last-child td { border-bottom: 0; }
.mini td:first-child a { white-space: nowrap; }
.mini .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini a { text-decoration: none; font-weight: 650; color: var(--nuit); }
.mini a:hover { color: var(--bleu); }
.mini small { display: block; }

/* fiches (propriétaire, lot) */
.fiche-tete { display: flex; gap: 16px; align-items: center; }
.fiche-signe { flex: 0 0 52px; height: 52px; border-radius: 14px; background: var(--nuit); color: var(--or); display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; }
.fiche-signe .ic { width: 26px; height: 26px; }
.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; margin: 0; }
.infos div { min-width: 0; }
.infos dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 650; }
.infos dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* téléphone : chaque ligne du tableau devient une fiche */
@media (max-width: 760px) {
  .tableau { border: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; font-size: .9rem; }
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tfoot, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); margin-bottom: 10px; padding: 6px 2px; box-shadow: var(--ombre); }
  .tableau td, .tableau tbody tr:last-child td, .tableau tfoot tr:last-child td { border: 0; padding: 4px 12px 4px calc(36% + 14px); position: relative; text-align: right; min-width: 0; min-height: 1.9em; overflow-wrap: anywhere; }
  .tableau td::before { content: attr(data-label); position: absolute; left: 12px; top: 5px; width: 34%; font-weight: 600; color: var(--gris); text-align: left; font-size: .8rem; line-height: 1.35; overflow-wrap: normal; }
  .tableau td:first-child { display: block; text-align: left; padding: 8px 12px 6px; min-height: 0; margin-bottom: 4px; border-bottom: 1px solid var(--trait-2); font-size: .95rem; }
  .tableau td:first-child::before { display: none; }
  .tableau td[data-label=""]::before, .tableau td:not([data-label])::before { display: none; }
  .tableau td.vide { display: block; text-align: center; padding: 14px 12px; }
  .tableau td > form, .tableau td > details { display: inline-block; text-align: left; }
  .tableau td form.ligne { justify-content: flex-end; }
  .tableau tfoot tr { background: var(--bleu-clair); }
  .tableau tfoot td { background: none; border-top: 0; }
  .tableau tbody tr:hover td { background: none; }
  .tableau .n { text-align: right; white-space: normal; }
  .tableau td form { margin: 0; }
  h1 { font-size: 1.35rem; }
  .titre-page { align-items: stretch; margin-bottom: 14px; }
  .chiffres { grid-template-columns: 1fr 1fr; gap: 10px; }
  .chiffre { padding: 12px 14px; }
  .chiffre .valeur { font-size: 1.18rem; }
  .chiffre .nom { font-size: .68rem; }
  .choix-mois { width: 100%; }
  .choix-mois select { flex: 1; }
  .grille { grid-template-columns: 1fr; }
  .etapes-mois { grid-template-columns: 1fr; gap: 0; }
  .etapes-mois li { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 6px 0; }
  .etapes-mois li::before { top: -10px; bottom: auto; left: 15px; right: auto; width: 2px; height: 20px; }
  .etapes-mois li > span.etape-texte { display: flex; flex-direction: column; }
  .carte { padding: 14px 16px; }
  .nouveaux ul { columns: 1; padding-left: 30px; }
  .mini .cache-tel { display: none; }
  .filtres .compte-lignes { margin-left: 0; width: 100%; }
}

/* lot 2 */
.alerte.ok { border-left-color: #3ca66b; }
.calcul { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86rem; margin: 6px 0; background: var(--fond); padding: 6px 10px; border-radius: 6px; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.confirmer fieldset { border: 1px solid var(--trait); border-radius: 10px; margin: 8px 0; padding: 10px 14px; }
.confirmer legend { font-weight: 650; font-size: .88rem; padding: 0 4px; }
.choix { font-weight: 400; display: flex; gap: 8px; align-items: center; }
.choix input { width: auto; }
.formulaire { max-width: 580px; }
.empreinte { word-break: break-all; font-size: .82rem; }
.etapes li { margin: 6px 0; }
.etapes form { display: inline; }
details.carte { margin: 12px 0; }
details > summary { cursor: pointer; font-weight: 600; color: var(--bleu); }
details.carte > summary { color: var(--nuit); }

/* étapes du fichier du 20 */
.etapes-20 { list-style: none; padding: 0; margin: 14px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.etapes-20 li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--gris-fond); color: var(--gris); font-size: .86rem; }
.etapes-20 li.fait { background: var(--vert-clair); color: var(--vert); font-weight: 600; }
.etapes-20 li.suivante { background: none; padding: 0; }
.etapes-20 li.suivante button { border-radius: 999px; background: var(--nuit); color: #fff; border-color: var(--nuit); }
.etapes-20 small { color: inherit; opacity: .8; }

/* lot 3 */
.verification { border-top: 1px solid var(--trait); margin-top: 12px; }
.verification h3 { font-size: 1rem; }
pre.recap { white-space: pre-wrap; background: var(--carte); border: 1px solid var(--trait); padding: 12px; border-radius: 10px; font-size: .85rem; overflow-wrap: anywhere; }

/* lot 4 */
form.ligne { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0; }
form.ligne input { width: auto; max-width: 12rem; }
form.ligne button.principal { width: auto; margin: 0; padding: 5px 12px; }

/* lot 5 : relances */
.texte-mail { white-space: pre-wrap; font: .86rem/1.45 ui-monospace, Menlo, Consolas, monospace; background: var(--fond); padding: 12px; border-radius: 8px; overflow-wrap: anywhere; }

/* listes simples dans une carte */
.liste { list-style: none; margin: 0; padding: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.liste > li { padding: 9px 16px; border-top: 1px solid var(--trait-2); font-size: .9rem; }
.liste > li:first-child { border-top: 0; }
.liste > li.vide { color: var(--gris); }

/* lot 13 */
.bandeau-demo { background: var(--violet); color: #fff; text-align: center; padding: 5px 12px; font-weight: 600; font-size: .86rem; position: relative; z-index: 20; }
@media (min-width: 961px) { body.avec-menu .bandeau-demo { margin-left: 0; } }

/* impression : le contenu seul */
@media print {
  body.avec-menu { padding-left: 0; }
  .entete, .fil, .choix-mois, .pied, .bandeau-demo, form, button { display: none !important; }
  .carte, .tableau, .chiffre { box-shadow: none; }
}

/* cellules sans contenu utile sur téléphone (pied de tableau) */
@media (max-width: 760px) {
  .tableau .sans-tel, .tableau td.cache-tel { display: none; }
  .tableau tfoot td:first-child { border-bottom: 0; margin: 0; }
}
@media (max-width: 760px) {
  .tableau td[data-label=""], .tableau td:not([data-label]) { padding-left: 12px; text-align: left; }
}

/* actions d'une ligne (quittances) */
.actions-ligne { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.actions-ligne form { margin: 0; }
.tableau details > summary { font-size: .84rem; margin-top: 6px; }
ul.alertes > li.rien { list-style: none; }

/* formulaires de décision (prorata, relances, alertes) */
form.confirmer { max-width: 520px; }
form.confirmer > button[type="submit"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }
form.confirmer > button[type="submit"]:hover { background: var(--nuit-2); }
details.carte > summary { list-style: none; display: flex; align-items: center; gap: 8px; }
details.carte > summary::-webkit-details-marker { display: none; }
details.carte > summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--nuit); color: #fff; font-weight: 700; }
details.carte[open] > summary::before { content: "−"; }
details.carte[open] > summary { margin-bottom: 8px; }
.alerte .code, .tableau .code { text-decoration: none; }
a.code { color: var(--nuit); font-weight: 700; }
a.code:hover { color: var(--bleu); text-decoration: underline; }
@media (min-width: 761px) { .tableau.quittances th:last-child { width: 25%; } .tableau.quittances th:nth-child(5) { width: 20%; } }
.nowrap { white-space: nowrap; }
.tableau .n.debit b { color: var(--rouge); }
.tableau .n.credit b { color: var(--vert); }
.liste.controles > li.ok-texte::before { content: "✓ "; font-weight: 700; }
.liste.controles > li.alerte-texte::before { content: "! "; font-weight: 700; }
.sommaire .compteur::before { display: none; }
.sommaire { margin-bottom: 16px; }
[id] { scroll-margin-top: 16px; }
@media (max-width: 760px) { .pastille { white-space: normal; text-align: left; } }
body.sans-menu .pied { text-align: center; }
.alerte .actions > form > button[type="submit"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.alerte .actions > form > button[type="submit"]:hover { background: var(--nuit-2); }
@media (max-width: 760px) {
  .tableau tbody tr td:first-child, .tableau tbody tr:last-child td:first-child { display: block; text-align: left; padding: 8px 12px 6px; min-height: 0; margin-bottom: 4px; border-bottom: 1px solid var(--trait-2); }
  .tableau tbody tr td.vide:first-child { text-align: center; border-bottom: 0; }
  .mini .pastille { white-space: nowrap; }
}

/* 26/10 : alertes du tableau de bord regroupées par type */
.groupe-alertes { margin-bottom: 10px; }
.groupe-alertes > ul.alertes { padding: 0 12px 12px; }
.marque-logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #ebe5da; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }