/* Portefeuilles Syndics : marine Écologie Collective, DM Sans, tableaux denses, lisible sur
   téléphone. Jetons de couleur en clair, redéfinis pour le thème sombre du système. */
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("../polices/dm-sans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url("../polices/dm-sans-500.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("../polices/dm-mono-500.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("../polices/dm-sans-700.woff2") format("woff2"); }

:root {
  /* Thème clair par défaut (maquette de la fiche copro) : fond légèrement teinté, cartes
     blanches, marine pour la prime, vert / orange / rouge pour les verdicts. */
  --fond: #f3f4f1; --surface: #ffffff; --encre: #15213a; --discret: #5d6678; --trait: #dfe3dc;
  --marine: #10243f; --marine-doux: #e4ecfa; --bleu: #2458a6; --bleu-doux: #e4ecfa;
  --ok: #1a8a57; --ok-doux: #e3f5ea; --attente: #c47a0e; --attente-doux: #fff2db;
  --alerte: #b8432f; --alerte-doux: #fae6e2; --gris-doux: #eceee9;
  --prime-fond: #10243f; --prime-texte: #ffffff; --barre-fond: #10243f; --barre-texte: #ffffff;
  --police: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0e1626; --surface: #152038; --encre: #e7ecf5; --discret: #9aa8c0; --trait: #2a3a58;
    --marine: #8fb2ea; --marine-doux: #1d2d4c; --bleu: #8fb2ea; --bleu-doux: #1d2d4c;
    --ok: #6fd3a0; --ok-doux: #173627; --attente: #f0c46a; --attente-doux: #3a2e14;
    --alerte: #f29a92; --alerte-doux: #3d1d1a; --gris-doux: #22304a;
    --prime-fond: #1d3a66; --prime-texte: #ffffff; --barre-fond: #0a1220; --barre-texte: #e7ecf5;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--police); font-size: 16px; line-height: 1.5; }
a { color: var(--bleu); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--marine); outline-offset: 2px; }
h1 { font-size: clamp(24px, 4vw, 32px); line-height: 1.2; margin: 0 0 12px; text-wrap: balance; }
h2 { font-size: 19px; margin: 0 0 10px; }
code { font-family: var(--mono); font-size: 0.9em; }

.barre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; background: var(--barre-fond);
  color: var(--barre-texte); padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.marque { font-weight: 700; color: var(--barre-texte); text-decoration: none; }
.barre nav { display: flex; flex-wrap: wrap; gap: 16px; flex: 1; }
.barre nav a { text-decoration: none; color: var(--barre-texte); opacity: 0.85; }
.barre nav a:hover { opacity: 1; }
.moi { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.moi a, .moi button.lien { color: var(--barre-texte); }
.moi form { margin: 0; }

.page { max-width: 1280px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 20px; align-content: start; }
.page > * { min-width: 0; }
.page.etroite { max-width: 560px; }
.chapeau { color: var(--discret); font-size: 17px; max-width: 70ch; margin: 0; }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--marine); }
.note { color: var(--discret); font-size: 14px; margin: 0; }
.bloc { display: grid; gap: 8px; }
.bloc ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

.carte-auth { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 28px; display: grid; gap: 14px; }
.formulaire { display: grid; gap: 8px; }
.formulaire label { font-size: 14px; font-weight: 500; }
.formulaire input, .formulaire select { font: inherit; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); color: var(--encre); width: 100%; }
.formulaire button { margin-top: 8px; }
.formulaire.en-ligne { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); align-items: end; gap: 12px; }
.formulaire.en-ligne > div { display: grid; gap: 6px; min-width: 0; }
button { font: inherit; font-weight: 500; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--marine); background: var(--marine); color: var(--surface); cursor: pointer; }
button.secondaire { background: transparent; color: var(--marine); padding: 4px 10px; font-size: 13px; }
button.lien { background: none; border: 0; padding: 0; color: var(--marine); text-decoration: underline; font-size: 14px; }

.alerte { background: var(--alerte-doux); color: var(--alerte); padding: 10px 14px; border-radius: 8px; margin: 0; }
.succes { background: var(--ok-doux); color: var(--ok); padding: 10px 14px; border-radius: 8px; margin: 0; }
.secret { background: var(--attente-doux); color: var(--encre); padding: 14px 16px; border-radius: 8px; display: grid; gap: 6px; }
.secret p { margin: 0; }
code.grand { font-size: 20px; letter-spacing: 0.04em; user-select: all; }

.etapes { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; }
.qr { justify-self: center; background: #ffffff; padding: 8px; border-radius: 8px; line-height: 0; }
.qr svg { max-width: 100%; height: auto; }
.cle { margin: 0; font-size: 14px; color: var(--discret); overflow-wrap: anywhere; }

.defile { overflow-x: auto; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); }
table.dense { border-collapse: collapse; width: 100%; font-size: 14px; }
table.dense th, table.dense td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }
table.dense th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--discret); font-weight: 500; background: var(--marine-doux); white-space: nowrap; }
table.dense tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.inactif td { color: var(--discret); }
td.actions { display: flex; flex-wrap: wrap; gap: 6px; }
td.actions form { margin: 0; }

.pastille { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.pastille.ok { background: var(--ok-doux); color: var(--ok); }
.pastille.attente { background: var(--attente-doux); color: var(--attente); }
.pastille.alerte { background: var(--alerte-doux); color: var(--alerte); }
.pastille.grise { background: var(--marine-doux); color: var(--discret); }

dl.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.fiche dt { color: var(--discret); }
dl.fiche dd { margin: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Recherche et fiche syndic */
.recherche { display: grid; gap: 6px; }
.recherche label { font-size: 14px; font-weight: 500; }
.champ-recherche { display: flex; gap: 8px; flex-wrap: wrap; }
.champ-recherche input { flex: 1 1 260px; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); color: var(--encre); }
.entete-fiche { display: grid; gap: 6px; }
.entete-fiche h1 { margin: 0; }
.totaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.total { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); border-left: 3px solid var(--trait); border-radius: 0 8px 8px 0; }
.total.principal { border-left-color: var(--marine); }
.total .valeur { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre); }
.total.principal .valeur { color: var(--marine); }
.total .libelle { font-size: 13.5px; color: var(--discret); }
.si-confirmee, .total .valeur.si-confirmee { color: var(--discret); font-style: italic; }
details.replie summary, details.sans-donnee summary { cursor: pointer; color: var(--discret); font-size: 14.5px; }
details.sans-donnee { display: grid; gap: 8px; }
details.sans-donnee[open] summary { margin-bottom: 8px; }
.filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 10px; align-items: end; }
.filtres > div { display: grid; gap: 4px; min-width: 0; }
.filtres label { font-size: 12.5px; color: var(--discret); }
.filtres select, .filtres input { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); color: var(--encre); width: 100%; }
table.parc th a { color: inherit; text-decoration: none; }
table.parc th a:hover { color: var(--marine); }
table.parc { font-size: 13.5px; }
table.parc th, table.parc td { padding: 8px 10px; }
table.parc td.copro { min-width: 200px; }
.sous { display: block; font-size: 12.5px; color: var(--discret); }
.alerte-texte { color: var(--alerte); }
tr.jumeau td, tr.sortie td { color: var(--discret); }
tr.suite td { text-align: center; }
.pastille.statut-eligible { background: var(--ok-doux); color: var(--ok); }
.pastille.statut-a_verifier { background: var(--attente-doux); color: var(--attente); }
.pastille.statut-sans_donnee, .pastille.statut-hors_cible, .pastille.statut-syndicat_secondaire { background: var(--marine-doux); color: var(--discret); }
.non-confirme { margin: 0; padding: 10px 14px; background: var(--attente-doux); border-radius: 8px; font-size: 14.5px; }

/* Fiche copro (maquette docs/maquettes) : verdict et prime en haut, quatre chiffres clés, carte
   et « à savoir avant le rendez-vous », preuves repliées sur deux niveaux. */
.fc { display: grid; gap: 18px; }
.fc > *, .fc-two > *, .fc-verdict > * { min-width: 0; }
.proof-body { overflow-x: auto; }
.fc .crumb { font-size: 13px; color: var(--discret); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.fc h1 { margin: 2px 0 4px; font-size: clamp(26px, 4vw, 34px); line-height: 1.1; }
.fc .addr { color: var(--discret); font-size: 15px; margin: 0; }
.fc .addr b { color: var(--encre); font-weight: 600; }
.fc-verdict { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: stretch; }
.fc-status { background: var(--surface); border: 1px solid var(--trait); border-left: 8px solid var(--trait); border-radius: 12px; padding: 18px 22px; display: grid; gap: 10px; align-content: start; }
.fc-status.green { border-left-color: var(--ok); } .fc-status.amber { border-left-color: var(--attente); }
.fc-status.red { border-left-color: var(--alerte); } .fc-status.grey { border-left-color: var(--discret); }
.fc-pill { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; margin: 0; }
.fc-pill .dot { width: 14px; height: 14px; border-radius: 50%; background: currentColor; flex: none; }
.fc-pill small { font-size: 14px; font-weight: 500; color: var(--discret); }
.green .fc-pill { color: var(--ok); } .amber .fc-pill { color: var(--attente); } .red .fc-pill { color: var(--alerte); } .grey .fc-pill { color: var(--discret); }
.fc-brief { font-size: 17px; line-height: 1.45; max-width: 64ch; margin: 0; }
.fc-prime { background: var(--prime-fond); color: var(--prime-texte); border-radius: 12px; padding: 18px 24px; min-width: 280px; display: grid; align-content: center; gap: 4px; }
.fc-prime.cond { background: var(--surface); color: var(--encre); border: 2px dashed var(--trait); }
.fc-prime.none { background: var(--surface); color: var(--discret); border: 1px solid var(--trait); }
.fc-prime .lbl { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.fc-prime .val { font: 700 40px/1 var(--police); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fc-prime.cond .val { color: var(--discret); font-style: italic; }
.fc-prime .sub { font-size: 13px; opacity: .85; }
.fc-prime details summary { cursor: pointer; font-size: 13px; color: inherit; opacity: .9; text-decoration: underline; }
.fc-prime table { margin-top: 8px; font-size: 12.5px; color: inherit; }
.fc-prime table th { color: inherit; opacity: .7; background: none; border-color: rgba(255,255,255,.2); }
.fc-prime table td { border-color: rgba(255,255,255,.2); }
.fc-prime.cond table th, .fc-prime.cond table td { border-color: var(--trait); }
.fc-prime ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; opacity: .85; display: grid; gap: 2px; }
.fc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fc-tile { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 16px 18px; display: grid; gap: 4px; min-width: 0; align-content: start; }
.fc-tile .k { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--discret); font-weight: 600; }
.fc-tile .v { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fc-tile .v .u { font-size: 15px; font-weight: 500; color: var(--discret); margin-left: 4px; }
.fc-tile .s { font-size: 14px; color: var(--discret); overflow-wrap: anywhere; }
.fc-tile.yes .v { color: var(--ok); } .fc-tile.no .v { color: var(--alerte); } .fc-tile.mix .v { color: var(--attente); }
.fc-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.fc-card { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; }
.fc-card > header { padding: 12px 18px; border-bottom: 1px solid var(--trait); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 600; }
.fc-card > header .sw { margin-left: auto; display: flex; gap: 6px; }
.sw button { font: 500 12px var(--police); border: 1px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.sw button[aria-pressed="true"] { background: var(--marine); color: var(--surface); border-color: var(--marine); }
#carte { height: 100%; min-height: 430px; background: #2a3d2a; }
.fc-card > footer { padding: 10px 18px; font-size: 13px; color: var(--discret); display: flex; gap: 16px; flex-wrap: wrap; }
.know { list-style: none; margin: 0; padding: 8px 18px; display: grid; gap: 2px; }
.know li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--trait); align-items: start; }
.know li:last-child { border-bottom: 0; }
.ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.ico.g { background: var(--ok-doux); color: var(--ok); } .ico.a { background: var(--attente-doux); color: var(--attente); }
.ico.r { background: var(--alerte-doux); color: var(--alerte); } .ico.b { background: var(--bleu-doux); color: var(--bleu); }
.ico.n { background: var(--gris-doux); color: var(--discret); }
.know .t { font-weight: 600; } .know .d { color: var(--discret); font-size: 14px; }
.fc-actions { padding: 14px 18px; border-top: 1px solid var(--trait); display: flex; gap: 10px; flex-wrap: wrap; }
.btn { font: 600 14px var(--police); border-radius: 8px; padding: 10px 14px; border: 1px solid var(--marine); background: var(--marine); color: var(--surface); cursor: pointer; }
.btn.sec { background: var(--surface); color: var(--marine); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
details.proof { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; }
details.proof > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: center; }
details.proof > summary::-webkit-details-marker { display: none; }
details.proof > summary::before { content: "▸"; color: var(--discret); }
details.proof[open] > summary::before { content: "▾"; }
details.proof > summary .n { margin-left: auto; font-weight: 500; color: var(--discret); font-size: 14px; }
.proof-body { padding: 0 18px 16px; display: grid; gap: 14px; }
.proof-body h3 { margin: 6px 0 0; font-size: 14px; color: var(--discret); text-transform: uppercase; letter-spacing: .05em; }
.proof-body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.proof-body th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--discret); padding: 8px 10px; border-bottom: 1px solid var(--trait); font-weight: 500; }
.proof-body td { padding: 10px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.proof-body td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.tag.g { background: var(--ok-doux); color: var(--ok); } .tag.n { background: var(--gris-doux); color: var(--discret); } .tag.b { background: var(--bleu-doux); color: var(--bleu); }
ol.trace { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 13.5px; }
.regle { display: inline-block; min-width: 13em; color: var(--discret); font-size: 12.5px; }
.fc-foot { font-size: 13px; color: var(--discret); margin: 0; }
.lien-copro { color: inherit; text-decoration: none; }
.lien-copro:hover strong { color: var(--bleu); text-decoration: underline; }
.leaflet-container { font: 12px var(--police); }
@media (max-width: 900px) {
  .fc-verdict, .fc-two { grid-template-columns: 1fr; }
  .fc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-prime .val { font-size: 34px; }
  #carte { min-height: 320px; }
  .fc-prime { min-width: 0; }
  /* Preuves retenues en cartes sur téléphone */
  table.preuves thead { display: none; }
  table.preuves tr { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
  table.preuves td { border: 0; padding: 0; }
}

/* Fiche syndic (maquette docs/maquettes/fiche-syndic) : le parc lu comme une tournée. */
.fs { display: grid; gap: 18px; }
.fs > *, .fs-two > * { min-width: 0; }
.fs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; }
.fs .crumb { font-size: 13px; color: var(--discret); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.fs h1 { margin: 2px 0 4px; font-size: clamp(26px, 4vw, 34px); line-height: 1.1; }
.fs .sub { color: var(--discret); margin: 0; }
.fs .sub b { color: var(--encre); font-weight: 600; }
.follow { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 16px; display: grid; gap: 6px; min-width: 260px; }
.follow .k, .kpi .k { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--discret); font-weight: 600; }
.follow .who { font-weight: 600; }
.kpis { display: grid; grid-template-columns: 1.3fr 1.1fr 1fr 1fr; gap: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 16px 18px; display: grid; gap: 2px; min-width: 0; border-top: 6px solid var(--trait); align-content: start; }
.kpi.g { border-top-color: var(--ok); } .kpi.a { border-top-color: var(--attente); } .kpi.r { border-top-color: var(--alerte); } .kpi.n { border-top-color: #b9bfb5; }
.kpi .v { font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi.g .v { color: var(--ok); } .kpi.a .v { color: var(--attente); } .kpi.r .v { color: var(--alerte); }
.kpi .s { font-size: 14px; color: var(--discret); }
.kpi .s b { color: var(--encre); font-weight: 600; }
.fs-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
.fs-card { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.fs-card > header { padding: 12px 18px; border-bottom: 1px solid var(--trait); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 600; }
.legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--discret); font-weight: 500; }
.legend .pt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.pt.g { background: var(--ok); } .pt.a { background: var(--attente); } .pt.r { background: #9aa39c; }
#carte-parc { height: 100%; min-height: 380px; background: #dfe6dc; }
.next { list-style: none; margin: 0; padding: 6px 18px; }
.next li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--trait); align-items: center; }
.next li:last-child { border-bottom: 0; }
.next .t { font-weight: 600; color: var(--encre); text-decoration: none; }
.next .t:hover { color: var(--bleu); text-decoration: underline; }
.next .d { color: var(--discret); font-size: 13px; }
.next .p { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.next .p small { display: block; font-weight: 500; color: var(--discret); font-size: 12px; }
.vide { color: var(--discret); padding: 12px 18px; margin: 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { font: 500 13px var(--police); border: 1px solid var(--trait); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 6px 12px; cursor: pointer; text-decoration: none; }
.chip[aria-pressed="true"] { background: var(--marine); color: var(--surface); border-color: var(--marine); }
.chip .c { opacity: .7; margin-left: 4px; }
.filters .sep { width: 1px; height: 22px; background: var(--trait); margin: 0 4px; }
.filters .srch { margin-left: auto; font: 14px var(--police); border: 1px solid var(--trait); border-radius: 8px; padding: 7px 10px; min-width: 220px; background: var(--surface); color: var(--encre); }
.plus { flex-basis: 100%; }
.plus summary { cursor: pointer; font-size: 13px; color: var(--discret); }
.plus-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; margin-top: 8px; }
.plus-grille label { display: grid; gap: 4px; font-size: 12.5px; color: var(--discret); }
.plus-grille select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); color: var(--encre); }
.list { display: grid; gap: 8px; }
.row { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 16px; display: grid; grid-template-columns: 8px minmax(0, 1.6fr) .55fr 1fr .9fr .9fr auto auto; gap: 14px; align-items: center; min-width: 0; }
.row .bar { width: 8px; height: 46px; border-radius: 4px; background: var(--trait); }
.row.g .bar { background: var(--ok); } .row.a .bar { background: var(--attente); } .row.r .bar { background: var(--alerte); }
.row .name { font-weight: 700; font-size: 16px; color: var(--encre); text-decoration: none; }
.row .name:hover { color: var(--bleu); text-decoration: underline; }
.row .addr { color: var(--discret); font-size: 13px; }
.row .cell { display: grid; gap: 0; min-width: 0; }
.row .cell .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--discret); font-weight: 600; }
.row .cell .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.row .cell .v.yes { color: var(--ok); } .row .cell .v.no { color: var(--alerte); } .row .cell .v.mix { color: var(--attente); }
.row .prime { text-align: right; min-width: 120px; }
.row .prime .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .prime .v.cond { color: var(--discret); font-style: italic; }
.row .prime .st { font-size: 12px; font-weight: 600; color: var(--discret); }
.row.g .prime .st { color: var(--ok); } .row.a .prime .st { color: var(--attente); } .row.r .prime .st { color: var(--alerte); }
.row .prime .warn { font-size: 12px; color: var(--attente); font-weight: 500; }
.row.jumeau { opacity: .75; }
.row .go { font: 600 13px var(--police); border: 1px solid var(--trait); background: var(--fond); color: var(--marine); border-radius: 8px; padding: 8px 12px; white-space: nowrap; text-decoration: none; }
.more { font: 500 14px var(--police); color: var(--discret); background: transparent; border: 1px dashed var(--trait); border-radius: 12px; padding: 10px; cursor: pointer; }
details.group { background: var(--gris-doux); border-radius: 12px; padding: 12px 16px; color: var(--discret); }
details.group > summary { cursor: pointer; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; list-style: none; }
details.group > summary::-webkit-details-marker { display: none; }
details.group .ouvrir { color: var(--bleu); text-decoration: underline; }
details.group[open] > summary { margin-bottom: 10px; }
.fs .foot { font-size: 13px; color: var(--discret); margin: 0; }
.bientot { color: var(--discret); text-decoration: underline dotted; cursor: not-allowed; }
@media (max-width: 980px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-two, .fs-head { grid-template-columns: 1fr; }
  .follow { min-width: 0; }
  .filters .srch { margin-left: 0; min-width: 0; flex: 1 1 100%; }
  .row { grid-template-columns: 8px minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "bar name name go" "bar c1 c2 c3" "bar prime prime prime"; }
  .row .go { justify-self: end; align-self: start; }
  .row .bar { grid-area: bar; height: 100%; } .row .n { grid-area: name; } .row .c1 { grid-area: c1; } .row .c2 { grid-area: c2; } .row .c3 { grid-area: c3; } .row .prime { grid-area: prime; text-align: left; } .row .go { grid-area: go; }
  .row .cell.c4 { display: none; }
  #carte-parc { min-height: 300px; }
}

/* Suivi et qualification (étape 25) */
.follow form { margin: 0; }
.follow .quand { font-size: 12.5px; color: var(--discret); }
.follow.ancien .who, span.ancien { color: var(--discret); font-style: italic; }
.fc-qualif { grid-template-rows: auto auto; }
.qualif-corps { padding: 14px 18px; display: grid; gap: 12px; }
.qualif-corps .succes, .qualif-corps .alerte { margin: 0; }
.qualif-corps .alerte p { margin: 0; }
.a-revoir { background: var(--attente-doux); border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.a-revoir p { margin: 0; max-width: 70ch; }
.a-revoir form { margin: 0; }
table.historique { border-collapse: collapse; width: 100%; font-size: 14px; }
table.historique th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--discret); padding: 6px 8px; border-bottom: 1px solid var(--trait); font-weight: 500; }
table.historique td { padding: 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
details.qualif-form > summary { cursor: pointer; font-weight: 600; color: var(--bleu); }
.qualif-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin-top: 10px; }
.qualif-grille > div { display: grid; gap: 4px; min-width: 0; }
.qualif-grille .large { grid-column: 1 / -1; }
.qualif-grille .actuel { font-weight: 400; color: var(--discret); font-size: 12.5px; }
.qualif-grille textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); color: var(--encre); width: 100%; }
a.btn { text-decoration: none; display: inline-block; }
.fc-actions form { margin: 0; }
.confirme { margin: 0; color: var(--ok); font-weight: 600; }
ul.historique { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.v.ancien { color: var(--discret); font-style: italic; }
@media (max-width: 900px) {
  .btn, .chip, .go, .more, .sw button, button { min-height: 40px; }
}
.page.etroite-texte { max-width: 760px; }
.apropos { display: grid; gap: 18px; }
.apropos .source { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 16px 18px; display: grid; gap: 6px; }
.apropos .source h2 { margin: 0; }
.apropos .source p { margin: 0; max-width: 68ch; }
/* Colonnes de chiffres en DM Mono (charte, section 5) */
td.num, .proof-body td.num { font-family: var(--mono); }
.confirmer { font-size: 17px; margin: 0; }
.fc-actions.sans-bord { border-top: 0; padding: 0; }
.confirmees { background: var(--ok-doux); border-radius: 10px; padding: 10px 14px; }
.confirmees .k { margin: 0 0 4px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ok); font-weight: 600; }
.confirmees ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.confirmees li { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; }
.confirmees form { margin: 0; }
td.actions select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); color: var(--encre); }

/* Accueil : une seule chose sur la page, la recherche, en deux modes (maquette accueil). */
.accueil { max-width: 860px; margin: 0 auto; padding-block: 48px 40px; display: grid; gap: 18px; }
.recherche-accueil { display: grid; gap: 14px; }
.recherche-accueil h1 { order: 1; margin: 0; font-size: 30px; line-height: 1.1; text-align: center; }
.recherche-accueil .sub { order: 2; margin: 0; color: var(--discret); text-align: center; }
.recherche-accueil .modes { order: 3; display: flex; justify-content: center; gap: 8px; }
.recherche-accueil .champ { order: 4; display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 8px 8px 8px 18px; box-shadow: 0 2px 10px rgba(16, 36, 63, .06); }
.recherche-accueil .ex { order: 5; margin: 0; text-align: center; color: var(--discret); font-size: 13px; }
.recherche-accueil .defaut { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.recherche-accueil input { flex: 1; min-width: 0; font: 19px var(--police); border: 0; outline: 0; background: transparent; color: var(--encre); }
.recherche-accueil .btn { font: 600 15px var(--police); border-radius: 10px; padding: 13px 20px; border: 0; background: var(--marine); color: var(--surface); cursor: pointer; }
.mode { font: 600 15px var(--police); border: 1px solid var(--trait); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.mode[aria-pressed="true"] { background: var(--marine); color: var(--surface); border-color: var(--marine); }
.res { display: grid; gap: 8px; }
.ligne { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 16px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; text-decoration: none; color: inherit; min-width: 0; }
.ligne:hover { border-color: var(--bleu); }
.ligne .bar { width: 8px; height: 40px; border-radius: 4px; background: var(--trait); }
.ligne.g .bar { background: var(--ok); } .ligne.a .bar { background: var(--attente); } .ligne.r .bar { background: var(--alerte); }
.ligne .t { font-weight: 700; font-size: 16px; }
.ligne .d { color: var(--discret); font-size: 13px; }
.ligne .d .ancien { opacity: .7; }
.ligne .v { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ligne .v.cond { color: var(--discret); font-style: italic; }
.ligne .v small { display: block; font-weight: 500; font-style: normal; color: var(--discret); font-size: 12px; }
.ligne.g .v small { color: var(--ok); } .ligne.a .v small { color: var(--attente); } .ligne.r .v small { color: var(--alerte); }
.ligne .go { font: 600 13px var(--police); border: 1px solid var(--trait); background: var(--fond); color: var(--marine); border-radius: 8px; padding: 8px 12px; white-space: nowrap; }
.mine { margin: 0; text-align: center; color: var(--discret); font-size: 14px; }
.mine a { margin: 0 4px; }
.mine a.ancien { color: var(--discret); }
@media (max-width: 600px) {
  .accueil { padding-block: 24px 32px; }
  .recherche-accueil h1 { font-size: 24px; }
  .recherche-accueil input { font-size: 16px; }
  .ligne { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .ligne .go { display: none; }
}

/* Administration (charte, section 8) : tableaux au premier niveau, mêmes couleurs. */
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.admin-nav a { font: 600 14px var(--police); border: 1px solid var(--trait); background: var(--surface); color: var(--encre); border-radius: 999px; padding: 6px 14px; text-decoration: none; }
.admin-nav a[aria-current="page"] { background: var(--marine); color: var(--surface); border-color: var(--marine); }
.sommaire { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
table.dense td.num, table.dense th.num { text-align: right; white-space: nowrap; }
table.dense td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.dense code { font-family: var(--mono); font-size: 12.5px; }
table.parametres td:nth-child(4) { min-width: 280px; }
table.parametres details summary { cursor: pointer; color: var(--bleu); }
table.parametres .formulaire { display: grid; gap: 6px; margin-top: 6px; min-width: 220px; }
table.parametres input { font: inherit; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); color: var(--encre); width: 100%; }
ul.historique, ul.evenements { margin: 4px 0 0; padding-left: 16px; font-size: 13px; }
table.grille input.kwh { width: 8ch; font: 13px var(--mono); text-align: right; padding: 4px 6px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); color: var(--encre); }
.bloc-replie summary { cursor: pointer; font-weight: 600; color: var(--bleu); margin-top: 12px; }
.bloc-replie .formulaire { display: grid; gap: 10px; margin-top: 10px; }
table.synthese tr.somme td { font-weight: 700; border-top: 2px solid var(--encre); }
table.synthese td.st-g { color: var(--ok); font-weight: 600; } table.synthese td.st-a { color: var(--attente); font-weight: 600; } table.synthese td.st-r { color: var(--alerte); font-weight: 600; }
table.synthese td.cond { color: var(--discret); font-style: italic; }
table.synthese .note { font-size: 11.5px; }
table.mouvements { width: auto; min-width: 320px; }
progress { width: 100%; max-width: 520px; height: 14px; accent-color: var(--marine); }
.confirmation { display: grid; gap: 12px; max-width: 760px; }
.filtres-journal { align-items: end; }
table.journal td.details { font-size: 12.5px; color: var(--discret); max-width: 520px; }
#recalcul-etat, #imports-etat { display: grid; gap: 18px; }