:root {
  --fond: #f4f6f9;
  --carte: #ffffff;
  --texte: #1c2530;
  --texte-doux: #5b6b7c;
  --bordure: #dfe5ec;
  --primaire: #146c43;
  --primaire-fonce: #0e5233;
  --accent: #0d6efd;
  --danger: #d64550;
  --creneaux: 8px;
  --rayon: 10px;        /* rayon standard (cartes, onglets) */
  --rayon-sm: 8px;      /* champs, petits boutons */
  --ombre: 0 1px 3px rgba(16, 32, 52, .08), 0 4px 14px rgba(16, 32, 52, .06);
  --ombre-douce: 0 1px 2px rgba(16, 32, 52, .05);
  --zebre: #f7f9fc;     /* lignes paires des tableaux */
  --survol: #f0f5ff;    /* survol de ligne */
  --ambre: #a5690b;     /* compteurs « en attente » */
  --focus: #93b4ff;     /* anneau de focus clavier */
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fond); color: var(--texte); font-size: 15px;
}
.hidden { display: none !important; }
button {
  font: inherit; border: none; cursor: pointer; border-radius: var(--rayon-sm);
  padding: 9px 16px; min-height: 38px; background: var(--primaire); color: #fff;
  font-weight: 600;
}
button:hover { background: var(--primaire-fonce); }
button:disabled { opacity: .45; cursor: default; }
button.ghost { background: #e9eef4; color: var(--texte); }
button.ghost:hover { background: #dde4ec; }
button.danger { background: #fdf0f1; color: var(--danger); }
button.danger:hover { background: #f7dadd; }
select, input[type=search], input[type=password], input[type=text], input[type=email] {
  font: inherit; padding: 8px 10px; border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm); background: #fff; color: var(--texte); min-height: 38px;
}
select:focus, input:focus { outline: 2px solid #bcd3ff; border-color: var(--accent); }
/* Accessibilité : anneau de focus visible au clavier (souris : inchangé) */
button:focus-visible, select:focus-visible, input:focus-visible,
a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
/* Actions principales : cible tactile confortable (≥ 42 px) */
.entete-vue .actions button, .param-ligne button, .loc-onglets button,
#btn-valider, #btn-tout-cocher { min-height: 42px; }

/* ── Connexion ── */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-carte {
  background: var(--carte); padding: 40px; border-radius: 14px; box-shadow: var(--ombre);
  text-align: center; width: 340px;
}
.login-carte .logo { font-size: 46px; }
.login-carte h1 { margin: 8px 0 2px; }
.login-carte .sous-titre { color: var(--texte-doux); margin: 0 0 22px; }
#form-login { display: flex; flex-direction: column; gap: 10px; }
#form-login input { text-align: center; letter-spacing: 4px; font-size: 20px; }
.erreur { color: var(--danger); margin: 4px 0 0; font-size: 14px; }

/* ── En-tête ── */
header {
  background: var(--carte); border-bottom: 1px solid var(--bordure);
  display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px;
  position: sticky; top: 0; z-index: 20;
}
header .titre { font-weight: 800; font-size: 18px; white-space: nowrap; }
nav { display: flex; align-items: center; gap: 3px; flex: 1; overflow-x: auto; }
/* Onglets arrondis (inspiration maquette B, rayon modéré) : l'onglet actif est
   plein, avec une ombre douce pour le détacher du fond. Padding resserré pour
   que les 8 onglets tiennent sans tronquer leur libellé. */
nav button, #btn-parametres {
  background: transparent; color: var(--texte-doux);
  border: 1px solid transparent; border-radius: var(--rayon);
  padding: 8px 10px; min-height: 38px; white-space: nowrap; font-weight: 600;
  font-size: 14px;
}
nav .sep-nav {
  flex: none; width: 1px; align-self: stretch; margin: 10px 5px;
  background: var(--bordure); border-radius: 1px;
}
nav button:hover, #btn-parametres:hover { background: #f1f5f9; color: var(--texte); }
nav button.actif, #btn-parametres.actif {
  background: var(--primaire); color: #fff; font-weight: 700;
  border-color: var(--primaire); box-shadow: 0 4px 12px rgba(20, 108, 67, .22);
}
nav button.actif:hover { background: var(--primaire-fonce); }
.badge {
  background: var(--danger); color: #fff; border-radius: 20px; font-size: 12px;
  padding: 1px 7px; margin-left: 4px; font-weight: 700;
}

/* ── Offre : étoile « premium » (discrète) + étiquette de segment ── */
.etoile-premium {
  color: #b8860b; font-size: 12px; margin-left: 4px;
  line-height: 1; vertical-align: 1px; cursor: help;
}
nav button.actif .etoile-premium { color: #ffd76e; }

/* Onglet d'une brique premium non activée : conservé, grisé, avec l'étoile */
nav button.brique-indispo { opacity: .55; cursor: help; }
nav button.brique-indispo:hover { opacity: .8; background: #f6f8fb; }

/* ── 🏠 Accueil : tableau de bord ── */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.dash-carte {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce); padding: 14px 16px;
}
.dash-carte.dash-large { grid-column: span 2; }
.dash-carte.dash-alerte { border-color: #f0c48a; background: linear-gradient(180deg, #fffdf7, var(--carte)); }
.dash-carte h3 { margin: 0 0 8px; font-size: 14px; color: var(--texte-doux); font-weight: 700; }
.dash-gros { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dash-gros.dash-gros-alerte { color: var(--ambre); }
.dash-sous { color: var(--texte-doux); font-size: 12.5px; margin-top: 4px; }
.dash-pied { margin-top: 10px; display: flex; gap: 8px; }
.dash-bar { margin-bottom: 9px; }
.dash-bar .tete { display: flex; justify-content: space-between; font-size: 13px; }
.dash-bar .tete b { font-variant-numeric: tabular-nums; }
.dash-bar .tete small { color: var(--texte-doux); font-weight: 400; }
.dash-bar .piste { margin-top: 3px; height: 7px; }
.dash-ligne { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 13.5px; border-bottom: 1px solid #f2f5f9; }
.dash-ligne:last-child { border-bottom: none; }
.dash-ligne small { color: var(--texte-doux); }
.dash-ligne b.neg { color: var(--danger); }
.dash-ligne b.pos { color: var(--primaire); }
table.dash-tab { width: 100%; border-collapse: collapse; }
table.dash-tab td { padding: 6px 8px; font-size: 13.5px; border-bottom: 1px solid #f2f5f9; }
table.dash-tab tr:last-child td { border-bottom: none; }
table.dash-tab td.d { color: var(--texte-doux); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.dash-tab td.libelle { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.dash-tab td.compte { color: var(--texte-doux); font-size: 12.5px; }
table.dash-tab td.montant { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) { .dash-carte.dash-large { grid-column: span 1; } }

/* ── Segments d'un onglet (ex. 📥 Importer : CSV/Excel | Relevés PDF) ── */
.segments {
  display: flex; gap: 6px; align-items: flex-end;
  border-bottom: 1px solid var(--bordure); margin-bottom: 16px;
}
.segment {
  background: transparent; color: var(--texte-doux); border: 1px solid transparent;
  border-bottom: 2px solid transparent; border-radius: var(--rayon) var(--rayon) 0 0;
  padding: 9px 14px; min-height: 42px; font-weight: 600; white-space: nowrap;
}
.segment:hover { background: #f1f5f9; color: var(--texte); }
.segment.actif {
  background: #fff; color: var(--texte);
  border-color: var(--bordure); border-bottom-color: var(--primaire);
}
.segment.indisponible { opacity: .6; }
.segment .pastille { margin-left: 4px; }

main { max-width: 1280px; margin: 0 auto; padding: 22px; }
.entete-vue { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.entete-vue h2 { margin: 0; font-size: 22px; }
.entete-vue .sous-titre { color: var(--texte-doux); margin: 0; flex-basis: 100%; }
.actions { margin-left: auto; display: flex; gap: 8px; }

/* ── Vue « À valider » : bandeau d'avancement (maquette A) ── */
.carte-stats {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 12px;
  box-shadow: var(--ombre-douce);
  padding: 14px 20px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.stats-gros { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.stats-gros b {
  font-size: 32px; font-weight: 800; color: var(--ambre);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.stats-gros span { color: var(--texte-doux); font-size: 13.5px; }
.stats-barre { flex: 1; min-width: 260px; }
.stats-barre .piste { margin: 2px 0 7px; height: 10px; border-radius: 99px; }
.stats-texte { color: var(--texte-doux); font-size: 12.5px; }
.rempl.attente { background: linear-gradient(90deg, #e8a33d, var(--primaire)); border-radius: 99px; }
.rempl.rec { background: linear-gradient(90deg, #34d399, var(--primaire)); border-radius: 99px; }
tr.ligne-cochee { background: #f2f9f4 !important; }
tr.ligne-cochee td:first-child { background: #f2f9f4 !important; }
tr.ligne-invalide { animation: clignote 1.2s ease 2; }
@keyframes clignote {
  0%, 100% { background: transparent; }
  50% { background: #fde8ea; }
}
tr.ligne-invalide td:first-child { animation: clignote-fond 1.2s ease 2; }
@keyframes clignote-fond {
  0%, 100% { background: #fff; }
  50% { background: #fde8ea; }
}
kbd {
  background: #eef1f5; border: 1px solid #d5dce4; border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 5px; font-size: 11px; font-family: inherit;
}
button .raccourci { opacity: .75; font-weight: 400; font-size: 12px; margin-left: 6px; }

/* ── Tableaux (maquette C : filets fins, lignes zébrées, chiffres tabulaires) ── */
.zone-table, #zone-table-valider, #zone-table-transactions, #zone-table-regles {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 8px;
  box-shadow: var(--ombre-douce);
  overflow-x: auto; max-width: 100%;
}
/* Panneau de données : hauteur bornée + scroll interne → en-têtes figés,
   1re colonne toujours visible (checkbox / date / motif) */
#zone-table-valider, #zone-table-transactions, #zone-table-regles {
  max-height: calc(100vh - 235px);
  overflow: auto;
}
#zone-table-valider thead th, #zone-table-transactions thead th, #zone-table-regles thead th {
  position: sticky; top: 0; z-index: 2;
}
/* 1re colonne sticky (fond opaque coordonné avec hover / états de ligne) */
#zone-table-valider td:first-child, #zone-table-transactions td:first-child,
#zone-table-regles td:first-child,
#zone-table-valider th:first-child, #zone-table-transactions th:first-child,
#zone-table-regles th:first-child {
  position: sticky; left: 0; z-index: 1;
}
#zone-table-valider thead th:first-child, #zone-table-transactions thead th:first-child,
#zone-table-regles thead th:first-child { z-index: 3; }
#zone-table-valider td:first-child, #zone-table-transactions td:first-child,
#zone-table-regles td:first-child {
  background: #fff; box-shadow: 1px 0 0 #eef1f5;
}
/* zébrures : la 1re colonne collante suit la ligne */
#zone-table-valider tbody tr:nth-child(even) td:first-child,
#zone-table-transactions tbody tr:nth-child(even) td:first-child,
#zone-table-regles tbody tr:nth-child(even) td:first-child { background: var(--zebre); }
#zone-table-valider tbody tr:hover td:first-child,
#zone-table-transactions tbody tr:hover td:first-child,
#zone-table-regles tbody tr:hover td:first-child { background: var(--survol); }
#zone-table-valider tr.ligne-modifiee td:first-child,
#zone-table-transactions tr.ligne-modifiee td:first-child { background: #fffbe6; }
#zone-table-valider tr.ligne-correction td:first-child { background: #fff3d6; }
/* Tri par colonne */
th[data-tri] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-tri]:hover { color: var(--texte); background: #eef2f6; }
th[data-tri].triee { color: var(--texte); }
th[data-tri] .fleche { font-size: 9px; margin-left: 4px; vertical-align: 1px; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
th {
  background: #f4f7fb; color: #4a5872; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--bordure);
}
tbody tr:nth-child(even) { background: var(--zebre); }
tbody tr:hover { background: var(--survol); }
td.montant { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
td.montant.neg { color: var(--danger); }
td.montant.pos { color: var(--primaire); }
td.libelle { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
td.compte { max-width: 130px; overflow: hidden; text-overflow: ellipsis; color: var(--texte-doux); font-size: 13px; }
td .badge-statut { font-size: 11px; padding: 2px 8px; border-radius: 20px; }
.badge-statut.categorise { background: #e7f3ec; color: #0e5233; }
.badge-statut.a_confirmer { background: #fff4e0; color: #8a5a00; }
.badge-statut.nouveau { background: #e8effa; color: #1e4e8f; }
.scope-pill { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: #eef1f5; }
td select { max-width: 165px; min-width: 130px; font-size: 13px; padding: 5px 6px; }
td select.scope-sel { min-width: 105px; max-width: 120px; }
td select.lieu-sel { min-width: 95px; max-width: 135px; }
td select:disabled { opacity: .45; background: #f2f4f7; }
.cell-check { width: 30px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primaire); cursor: pointer; }
.actions-ligne { display: flex; gap: 6px; align-items: center; }
tr.ligne-modifiee { background: #fffbe6 !important; }
tr.ligne-correction { background: #fff3d6 !important; }
tr.ligne-correction td:first-child { box-shadow: inset 3px 0 0 #f0a020; }
.ligne-modifiee { background: #fffdf0 !important; }

/* ── Bilans ── */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.carte-scope { background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; box-shadow: var(--ombre-douce); padding: 16px 18px; }
.carte-scope.carte-globale { border: 2px solid var(--primaire); background: linear-gradient(165deg, var(--carte) 60%, #eef4fb); }
.carte-scope.carte-globale h3 { color: var(--primaire); }
.carte-scope.carte-vide { opacity: .75; background: repeating-linear-gradient(45deg, var(--carte), var(--carte) 10px, #f2f2f2 10px, #f2f2f2 20px); }
.carte-scope h3 { margin: 0 0 10px; font-size: 16px; }
.carte-scope .ligne { display: flex; justify-content: space-between; padding: 3px 0; }
.carte-scope .total { font-weight: 800; font-size: 19px; border-top: 1px solid var(--bordure); margin-top: 8px; padding-top: 8px; }
.carte-scope .total.neg { color: var(--danger); }
.carte-scope .total.pos { color: var(--primaire); }
.section-bloc { background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; box-shadow: var(--ombre-douce); padding: 6px 0; margin-bottom: 16px; }
.section-bloc h3 { padding: 12px 18px 4px; margin: 0; }
.barre-cat { padding: 6px 18px; }
.barre-cat .tete { display: flex; justify-content: space-between; font-size: 14px; }
.barre-cat .tete b { font-variant-numeric: tabular-nums; }
.piste { background: #eef1f5; border-radius: 6px; height: 8px; margin-top: 4px; overflow: hidden; }
.rempl { height: 100%; border-radius: 6px; }
.rempl.dep { background: #d64550; }
.rempl.rec { background: #1e9e5a; }
.vide { color: var(--texte-doux); padding: 40px; text-align: center; }

/* ── Paramétrage ⚙️ ── */
#zone-parametres .section-bloc { padding: 4px 18px 16px; }
.param-ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 0 2px; }
.param-ligne input, .param-ligne select { padding: 7px 10px; }
.param-aide { color: var(--texte-doux); font-size: 13px; margin: 4px 0 0; }
.param-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; padding: 6px 0; }
.param-cols b { font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.sel-role { min-width: 260px; }
.util-email { min-width: 240px; }
.chip {
  background: #eef1f5; color: var(--texte); border-radius: 20px;
  padding: 2px 10px; font-size: 12.5px; white-space: nowrap;
}
.param-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; padding: 8px 0 2px; }
.param-infos > div { display: flex; flex-direction: column; }
.param-infos span { color: var(--texte-doux); font-size: 12px; }
.param-infos b { font-size: 14px; }
.param-infos b.chemin { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; }

/* ── Toast ── */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1c2530; color: #fff; padding: 12px 22px; border-radius: 10px;
  box-shadow: var(--ombre); z-index: 50; font-weight: 600; max-width: 90vw;
}

/* ── Vue 📥 Importer (S1 — CSV/Excel générique) ── */
.imp-drop {
  border: 2px dashed var(--bordure); border-radius: 12px; padding: 26px 16px;
  text-align: center; cursor: pointer; background: #fbfcfe; margin-top: 6px;
  transition: border-color .15s, background .15s;
}
.imp-drop:hover, .imp-drop.imp-survol { border-color: var(--primaire); background: #f0f7f2; }
.imp-gros { font-size: 34px; line-height: 1.1; }
.imp-sous { color: var(--texte-doux); font-size: 13px; margin-top: 4px; }
.imp-fichier {
  margin-top: 10px; font-weight: 600; font-size: 14px; color: var(--primaire);
  background: #e7f3ec; border-radius: 8px; padding: 6px 12px; display: inline-block;
}
.imp-carte-map { box-shadow: var(--ombre); }
.imp-ligne {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 4px 0;
}
.imp-role { min-width: 200px; font-weight: 600; font-size: 14px; }
.imp-ligne select { min-width: 300px; }
.imp-case { user-select: none; }
.imp-aide { color: var(--texte-doux); font-size: 12.5px; margin-top: 6px; }
.imp-band {
  background: #f4f8f5; border: 1px solid var(--bordure); border-radius: 10px;
  padding: 10px 14px; font-size: 13.5px; margin: 10px 0;
}
.imp-ctrl { margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.imp-ctrl-ok { background: #e7f3ec; color: #0e5233; }
.imp-ctrl-ko { background: #fdf0f1; color: var(--danger); }
.imp-boite { border-radius: 10px; padding: 14px 16px; margin-top: 12px; font-size: 14px; }
.imp-boite.imp-ok { background: #e7f3ec; border: 1px solid #bcd9c8; color: #0e5233; }
.imp-boite.imp-info { background: #fff4e0; border: 1px solid #f0ddb8; color: #8a5a00; }
.imp-boite.imp-err { background: #fdf0f1; border: 1px solid #f0c4c9; color: var(--danger); }
.imp-msg { font-weight: 600; margin-bottom: 8px; }
.imp-grille {
  display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 3px 14px;
  font-size: 13.5px;
}
.imp-grille span { color: var(--texte-doux); }
.imp-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.imp-pill.imp-ok { background: #e7f3ec; color: #0e5233; }
.imp-pill.imp-info { background: #fff4e0; color: #8a5a00; }
.imp-pill.imp-err { background: #fde8ea; color: var(--danger); }

@media (max-width: 900px) {
  main { padding: 12px; }
  header { flex-wrap: wrap; height: auto; padding: 8px; gap: 8px; }
  td.libelle { max-width: 180px; }
  .imp-role { min-width: 100%; }
  .imp-ligne select { min-width: 100%; }
}


/* ── 🗂️ Factures du dossier (import du pipeline mail) ────────────────
   Écran « Importer depuis le dossier » : bilan d'import et valeurs à
   compléter (montant ou date non lus par le pipeline). */
.imp-bilan { padding: 4px 0 2px; }
.imp-vide { color: var(--ambre); font-style: italic; }
.imp-alerte { text-align: right; color: var(--ambre); }

/* ── 🎯 Budgets cibles (issue #33) ──────────────────────────────────
   Carte 🏠 Accueil, section 📊 Bilans, définition ⚙️ Paramétrage.
   Le calcul vient du serveur ; ici on n'affiche que des chiffres vérifiés. */
.bud-ligne { margin-top: 10px; }
.bud-tete {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13.5px;
}
.bud-per { color: var(--texte-doux); font-weight: 500; font-size: 12px; margin-left: 6px; }
.bud-cible { color: var(--texte-doux); font-weight: 500; }
.bud-anomalie { color: var(--ambre); }
.bud-piste { margin: 5px 0 2px; }
.bud-admin {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--bordure);
}
.bud-admin:last-child { border-bottom: 0; }
.bud-actions { display: flex; gap: 6px; flex: none; }
.bud-actions button { min-width: 38px; min-height: 38px; }   /* cible tactile mobile */
.bud-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 18px 4px; border-top: 1px solid var(--bordure);
}
.bud-form select, .bud-form input { flex: 1 1 130px; min-width: 110px; }
.bud-form button { flex: none; min-height: 38px; }
@media (max-width: 620px) {
  .bud-form > * { flex: 1 1 100%; }
  .bud-tete { flex-wrap: wrap; }
}

/* ── Parametrage : scopes & comptes (issue #17) ── */
.scopes-cases { gap: 8px; flex-wrap: wrap; }
.scope-case {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid #c9d3de; border-radius: 999px;
  cursor: pointer; background: #fff; font-size: 14px; user-select: none;
}
.scope-case.actif { background: #e4f0e6; border-color: #4c8f5a; }
.scope-case input { accent-color: #2f6b3c; margin: 0; }
.compte-ligne {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 4px; border-top: 1px solid #e3e8ee;
}
.compte-ligne .compte-nom { font-weight: 600; min-width: 150px; }
.compte-ligne .compte-inst { color: #5b6775; }
.compte-ligne .compte-tx { color: #8a94a1; font-size: 12px; }
.compte-ligne .compte-actions { margin-left: auto; }
.compte-actions button { padding: 2px 7px; }
button.danger { color: #a33; }
#form-cp { background: #f4f7fa; border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
#form-cp .param-ligne { margin: 4px 0; }

.scope-case .scope-x {
  border: none; background: transparent; color: #a33; cursor: pointer;
  font-size: 11px; padding: 0 0 0 4px; opacity: .6;
}
.scope-case .scope-x:hover { opacity: 1; }

/* ── ⚠️ Alertes « dépense inhabituelle » (issue #32) ─────────────────
   Bandeau d'accueil, badge de ligne et réglages. L'information est
   volontairement NON alarmante (ambre, jamais rouge) : une alerte est une
   invitation à vérifier, pas une erreur — rien n'est bloqué. */
.carte-alertes {
  background: #fffdf5;
  border: 1px solid #e8d9a8;
  border-left: 4px solid var(--ambre);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  margin-bottom: 14px;
  overflow: hidden;
}
.alerte-tete {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid #f0e6c8;
  color: var(--ambre);
}
.alerte-tete span { color: var(--texte-doux); font-weight: 500; font-size: 13px; }
.alerte-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid #f6efdc;
}
.alerte-ligne:first-of-type { border-top: 0; }
.alerte-texte { flex: 1 1 auto; min-width: 0; }
.alerte-type {
  display: inline-block; background: #fdf1d6; color: var(--ambre);
  border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
}
.alerte-date { color: var(--texte-doux); font-size: 12px; }
.alerte-montant { font-variant-numeric: tabular-nums; font-weight: 600; }
.alerte-raison { color: var(--texte-doux); font-size: 12.5px; margin-top: 2px; }
.alerte-reste { padding: 8px 16px; color: var(--texte-doux); font-size: 13px; }
.alerte-pied { padding: 10px 16px; border-top: 1px solid #f0e6c8; }
.alerte-ligne button { flex: none; min-height: 34px; }

/* Badge de ligne dans ✅ À valider et 💶 Transactions — c'est un BOUTON : il
   ouvre la fiche d'alerte (modale centrée) où l'on répond « c'est normal ». */
.alerte-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 6px; padding: 0; min-width: 34px; min-height: 34px;
  font-size: 13px; line-height: 1; cursor: pointer;
  background: #fdf1d6; border: 1px solid #e8d9a8; border-radius: 7px;
  vertical-align: middle;
}
.alerte-badge:hover { background: #f8e6bd; }
.alerte-badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.alerte-badge.alerte-grave { border-color: #d9a94a; }
tr.ligne-alerte > td { background: #fffdf5; }

/* Fiche d'alerte — fenêtre modale centrée (convention du projet : jamais de
   panneau déplié sous une ligne de tableau). Même langage visuel que la modale
   du locatif, mais à la racine : les alertes n'appartiennent à aucune brique. */
.al-modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 24, 32, .55);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  padding: 18px;
}
.al-modal {
  background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  width: min(620px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.al-modal header {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--bordure); background: #f7f9fc;
}
.al-modal header b {
  flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.al-modal header button { flex: none; min-height: 38px; }
.al-modal-corps { padding: 12px 16px; overflow: auto; }
.alerte-fiche-ligne {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid #f6efdc;
}
.alerte-fiche-ligne:first-of-type { border-top: 0; }
.alerte-fiche-ligne .alerte-raison { flex: 1 1 240px; margin: 0; }
.alerte-fiche-ligne button { flex: none; min-height: 38px; }

/* Réglages en ⚙️ Paramétrage */
.alerte-reglages {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding: 4px 18px 8px;
}
.alerte-switch {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; font-size: 14px; cursor: pointer;
}
.alerte-switch input { accent-color: var(--primaire); width: 17px; height: 17px; }
.alerte-seuils {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end;
  padding: 6px 18px 12px;
}
.alerte-seuils label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px; color: var(--texte-doux);
}
.alerte-seuils input { width: 120px; min-height: 36px; }
.alerte-seuils button { min-height: 38px; }
.tab-alertes { width: 100%; border-collapse: collapse; }
.tab-alertes th, .tab-alertes td {
  text-align: left; padding: 8px 18px; border-bottom: 1px solid var(--bordure);
  font-size: 13.5px;
}
.tab-alertes th { color: var(--texte-doux); font-weight: 600; }
.tab-alertes button { min-height: 34px; }