/* OREA X OVA — écran Input (santé financière).
   Identité ORÉA (oreaholding.ca) : fond blanc, encre noire, filets gris clair,
   l'or n'apparaît qu'en accessoire (barre du logo, onglet actif, mois choisi, filet court).
   Police système Apple (SF Pro) partout, choix d'Olivier du 2026-10-04 ; aucune police téléchargée.
   Aucun style en ligne. Seules couleurs fonctionnelles : vert sobre (écart nul) et rouge sobre (écart). */


:root {
  color-scheme: light;

  /* Palette ORÉA */
  --blanc: #ffffff;
  --noir: #0a0a0a;
  --gris: #6b6b6b;           /* texte secondaire : 5,3:1 sur blanc */
  --filet: #e5e5e5;          /* filets, séparations */
  --creme: #f5f5f5;          /* surfaces secondaires */
  --or: #b8976a;             /* accessoire non textuel (2,6:1) */
  --or-texte: #7a5f38;       /* or foncé pour du petit texte : ≥ 4,5:1 sur blanc et crème */
  --or-voile: #f6f1e9;

  /* Rôles */
  --fond: var(--blanc);
  --surface: var(--blanc);
  --surface-2: var(--creme);
  --encre: var(--noir);
  --encre-2: var(--gris);
  --encre-3: var(--gris);
  --filet-fort: var(--noir);
  --bord-champ: #8f8f8f;     /* contour des champs : 3,3:1, perceptible (WCAG 1.4.11) */

  /* Fonctionnel, désaturé */
  --juste: #2c5a41;
  --juste-fond: #eef3ef;
  --ecart: #9c2b23;
  --ecart-fond: #f8eeec;
  --attention: var(--or-texte);
  --attention-fond: var(--or-voile);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --serif: var(--sans);      /* ancien rôle « titres » : même police système, en semi-gras */

  --t-micro: 0.6875rem;       /* mention sous le logo */
  --t-xs: 0.8125rem;
  --t-s: 0.875rem;
  --t-m: 1rem;
  --t-l: 1.1875rem;
  --t-xl: 1.625rem;
  --t-titre: 2rem;
  --t-ecart: 2.5rem;

  --suivi-large: 0.04em;      /* tracking-wide des boutons */
  --suivi-max: 0.08em;       /* tracking-widest des liens d'action */

  --gouttiere: 16px;
  --marge: 48px;
  --duree: 300ms;
  --duree-lente: 500ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: var(--fond); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.003em;
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--noir); }
h2 { font-size: var(--t-xl); line-height: 1.2; }
h3 { font-size: var(--t-l); line-height: 1.3; }
strong { font-weight: 600; }

a {
  color: var(--noir);
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--duree), text-decoration-color var(--duree);
}
a:hover { color: var(--or-texte); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }

::selection { background: var(--or-voile); color: var(--noir); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.evitement { position: absolute; left: -9999px; top: 0; }
.evitement:focus {
  left: var(--gouttiere); top: 8px; z-index: 30;
  background: var(--noir); color: var(--blanc); padding: 8px 14px;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--suivi-large); text-decoration: none;
}

/* Chiffres tabulaires seulement là où ils s'alignent : dans Inter, tnum élargit aussi le trait d'union. */
.num, .nowrap, .lien-mois-code, .fiche-code, .compteurs dd, .resume dd { font-variant-numeric: tabular-nums lining-nums; }
.num { text-align: right; }
.nowrap { white-space: nowrap; }
.centre { text-align: center; }
.discret { color: var(--encre-2); }
.aide { color: var(--encre-2); font-size: var(--t-s); max-width: 72ch; }
.nb { color: var(--encre-2); font-weight: 400; font-size: var(--t-s); font-family: var(--sans); white-space: nowrap; }

/* ---------- Contrôles ---------- */
button, input, select, textarea { font: inherit; color: inherit; }

input[type="text"], input[type="password"], input[type="date"], input[type="month"], input[type="file"], select, textarea {
  background: var(--blanc);
  border: 1px solid var(--bord-champ);
  border-radius: 0;
  padding: 8px 10px;
  min-height: 40px;
  max-width: 100%;
  transition: border-color var(--duree);
}
input[type="file"] { padding: 6px; font-size: var(--t-s); }
input[type="file"]::file-selector-button {
  font: inherit; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--suivi-large);
  background: var(--blanc); color: var(--noir);
  border: 1px solid var(--noir); border-radius: 0;
  padding: 6px 14px; margin-right: 12px; cursor: pointer;
  transition: background-color var(--duree), color var(--duree);
}
input[type="file"]::file-selector-button:hover { background: var(--noir); color: var(--blanc); }
select { padding-right: 28px; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--noir); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--noir); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--ecart); background: var(--ecart-fond);
}
.saisie-montant { text-align: right; }
::placeholder { color: var(--gris); opacity: 1; }

button {
  cursor: pointer;
  border-radius: 0;
  border: 1px solid transparent;
  background: none;
  padding: 0;
}
button:disabled { cursor: not-allowed; }

/* Boutons ORÉA : rectangulaires, majuscules, petit corps, large interlettrage. */
.primaire, .secondaire, .danger {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 12px 32px;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--suivi-large);
  border: 1px solid var(--noir);
  transition: background-color var(--duree-lente), color var(--duree-lente), border-color var(--duree-lente);
}
.primaire { background: var(--noir); color: var(--blanc); }
.primaire:hover:not(:disabled) { background: var(--blanc); color: var(--noir); }
.secondaire { background: var(--blanc); color: var(--noir); }
.secondaire:hover:not(:disabled) { background: var(--noir); color: var(--blanc); }
.danger { background: var(--ecart); border-color: var(--ecart); color: var(--blanc); }
.danger:hover:not(:disabled) { background: var(--blanc); color: var(--ecart); }
.primaire:disabled, .secondaire:disabled, .danger:disabled {
  background: var(--creme); border-color: var(--filet); color: var(--gris);
}

/* Liens d'action : petites capitales espacées, or foncé, noir au survol. */
.lien-bouton, .lien-action {
  background: none; border: none; min-height: 0;
  padding: 4px 2px;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--suivi-max);
  color: var(--or-texte);
  text-decoration: none;
  transition: color var(--duree);
}
.lien-bouton:hover:not(:disabled), .lien-action:hover:not(:disabled) { color: var(--noir); }
.lien-bouton:disabled { color: var(--gris); }
.lien-danger { color: var(--ecart); }
.lien-danger:hover:not(:disabled) { color: var(--noir); }
/* U5 : le rouge est réservé aux vrais écarts (et à « Confirmer » une suppression). Le lien « Supprimer » de
   chaque ligne reste neutre (gris 5,3:1) ; la ligne visée et « Confirmer » passent en rouge à l'étape 2. */
.lien-danger.bouton-supprimer { color: var(--encre-2); }
.lien-danger.bouton-supprimer:hover:not(:disabled) { color: var(--noir); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* ---------- Cadre : menu à gauche + contenu ---------- */
:root { --menu-largeur: 248px; }
.cadre { min-height: 100vh; }
.menu {
  position: fixed; inset: 0 auto 0 0; z-index: 15;
  width: var(--menu-largeur);
  display: flex; flex-direction: column;
  background: var(--blanc);
  border-right: 1px solid var(--filet);
}
.menu-tete { padding: 28px 24px 24px; border-bottom: 1px solid var(--filet); }
.menu-panneau {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  overflow-y: auto;
  padding: 20px 0 24px;
}
.menu-bascule { display: none; }

.marque { display: flex; align-items: center; gap: 12px; }
.marque-barre {
  display: block; flex: none;
  width: 4px; height: 32px;
  border-radius: 999px;
  background: var(--or);
}
.marque-bloc { display: flex; flex-direction: column; }
.marque-nom {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.15em;
  white-space: nowrap;
}
.marque-sous {
  margin-top: 2px;
  font-size: var(--t-micro);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

.menu-nav { display: grid; gap: 6px; }
.menu-section {
  padding: 14px 24px 6px;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris);
}
.menu-section:first-child { padding-top: 0; }
.menu-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-lien {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 40px;
  padding: 8px 24px 8px 22px;
  border-left: 2px solid transparent;
  font-family: var(--serif); font-size: var(--t-m); line-height: 1.3;
  color: var(--gris);
  text-decoration: none;
  transition: color var(--duree), background-color var(--duree), border-color var(--duree);
}
.menu-lien:hover { color: var(--noir); background: var(--creme); }
.menu-lien:focus-visible { outline-offset: -2px; }
.menu-lien[aria-current="page"] { color: var(--noir); background: var(--creme); border-left-color: var(--or); }
.menu-lien-desactive, .menu-lien-desactive:hover { color: var(--gris); background: none; cursor: not-allowed; }
.bientot {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--or-texte);
  padding: 2px 6px; border: 1px solid var(--or);
}
.deconnexion { align-self: flex-start; margin: 0 22px; white-space: nowrap; }

/* ---------- Annonces ---------- */
.annonces {
  position: fixed; right: var(--gouttiere); bottom: var(--gouttiere); z-index: 20;
  display: flex; flex-direction: column; gap: 8px;
  width: min(440px, calc(100vw - 2 * var(--gouttiere)));
}
.annonce {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 12px 14px 16px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-left: 2px solid var(--noir);
  box-shadow: 0 12px 32px -18px rgba(10, 10, 10, 0.35);
  font-size: var(--t-s);
}
.annonce-texte { flex: 1; overflow-wrap: anywhere; }
.annonce-succes { border-left-color: var(--juste); }
.annonce-info { border-left-color: var(--or); }
.annonce-erreur { border-left-color: var(--ecart); }
.annonce-fermer {
  min-height: 0; padding: 0 4px; line-height: 1;
  font-size: 1.15rem; color: var(--gris);
  transition: color var(--duree);
}
.annonce-fermer:hover { color: var(--noir); }
.annonce-code {
  display: inline-block;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--suivi-large);
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid currentColor;
  color: var(--ecart);
  white-space: nowrap;
  vertical-align: 1px;
}
.annonce-succes .annonce-code { color: var(--juste); }
.annonce-info .annonce-code { color: var(--noir); }

/* ---------- Corps ---------- */
.registre {
  margin-left: var(--menu-largeur);
  max-width: 1440px;
  padding: 40px var(--marge) 72px;
}
.registre:focus { outline: none; }
.vue { min-width: 0; }
.titre-bloc { display: grid; gap: 8px; margin-bottom: 28px; }
.titre-bloc h1 { font-size: var(--t-titre); font-weight: 400; line-height: 1.15; margin: 0; }
.titre-bloc h1:focus { outline: none; }
.titre-bloc h1:focus-visible { outline: 2px solid var(--noir); outline-offset: 4px; }
.titre-section { font-size: var(--t-xl); }
.titre-section:focus { outline: none; }
.titre-bloc::before {
  /* filet court doré au-dessus du titre, comme les titres de section du site (« Notre vision ») */
  content: ""; display: block; width: 48px; height: 1px; margin-bottom: 10px;
  background: var(--or);
}

.vide { color: var(--encre-2); padding: 20px 0; }

.defile { overflow-x: auto; max-width: 100%; position: relative; } /* contient aussi les légendes .sr positionnées */

.barre-outils {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px;
  margin-bottom: 20px;
}
.champ { display: grid; gap: 6px; min-width: 0; align-content: start; }
.champ label, .nouveau-mois label {
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gris);
}
.champ-lien { padding-bottom: 10px; }
.champ-lien a {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--suivi-max);
  color: var(--or-texte); text-decoration: none;
}
.champ-lien a:hover { color: var(--noir); }

/* ---------- Tables (générique) ---------- */
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t-s); }
th, td { padding: 10px 10px; text-align: left; vertical-align: top; }
thead th {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  border-bottom: 1px solid var(--noir);
  white-space: nowrap;
  background: var(--blanc);
  padding-top: 8px; padding-bottom: 8px;
}
tbody tr > * { border-top: 1px solid var(--filet); }
tbody tr:first-child > * { border-top: none; }
th.num, td.num { text-align: right; }

/* ---------- Vue Mois ---------- */
.vue-mois {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
/* Deux colonnes selon la largeur réellement disponible à côté du menu (container query) :
   liste 510 px + fiche ≥ 520 px. En dessous : une colonne, et la fiche vient à l'écran au choix d'un mois (U7). */
.vue-mois-cadre { container-type: inline-size; container-name: vuemois; }
.colonne-detail { container-type: inline-size; container-name: fiche; min-width: 0; }
.colonne-liste { min-width: 0; }
@container vuemois (min-width: 1040px) {
  .vue-mois { grid-template-columns: minmax(0, 510px) minmax(0, 1fr); gap: 28px; }
  .colonne-liste { border-right: 1px solid var(--filet); padding-right: 12px; }
  /* Sélecteurs renforcés : les règles générales de .table-mois, plus bas, l'emporteraient sinon (même spécificité). */
  .vue-mois .table-mois th, .vue-mois .table-mois td { padding-left: 4px; padding-right: 4px; }
  .vue-mois .table-mois thead th { letter-spacing: 0.04em; }
  .table-mois td.num { font-size: var(--t-xs); }
  .table-mois .badge { letter-spacing: 0.1em; padding: 3px 6px; }
  .retour-liste { display: none; }
}
.table-mois thead th:last-child { white-space: normal; }
.table-mois .mention-neutre { max-width: 6.5em; }

.nouveau-mois { display: grid; gap: 6px; margin-bottom: 24px; }
.barre-actualiser { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: -12px 0 20px; }
.ligne-champ { display: flex; flex-wrap: wrap; gap: 8px; }
.ligne-champ input { flex: 1 1 140px; }

.table-mois th, .table-mois td { padding-left: 6px; padding-right: 6px; vertical-align: middle; }
.table-mois thead th { letter-spacing: 0.06em; }
.table-mois td.num { white-space: nowrap; }
.table-mois tbody tr { cursor: pointer; transition: background-color var(--duree); }
.table-mois tbody tr:hover { background: var(--creme); }
.table-mois tbody tr.choisi { background: var(--creme); }
.table-mois tbody tr.choisi > th { box-shadow: inset 2px 0 0 var(--or); }
.lien-mois {
  min-height: 0; text-align: left;
  display: grid; gap: 0;
  font-family: var(--serif); font-size: var(--t-m); font-weight: 400; color: var(--noir);
}
.lien-mois-nom { white-space: nowrap; }
.lien-mois-code { font-family: var(--sans); font-size: var(--t-xs); color: var(--gris); letter-spacing: 0.04em; }
.lien-mois-brouillon { font-family: var(--sans); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-texte); }

.est-juste { color: var(--juste); }
.est-ecart { color: var(--ecart); font-weight: 600; }
.est-explique { color: var(--noir); }
/* Neutre (U5) : pas de relevé, ou mois figé sans relevés. Jamais rouge, jamais vert. */
.est-neutre { color: var(--gris); }
.mention-neutre {
  display: inline-block; white-space: normal; text-align: right;
  font-size: var(--t-xs); line-height: 1.3; color: var(--gris);
}

/* Statuts : validé = noir plein ; brouillon = contour. */
.badge {
  display: inline-block; white-space: nowrap;
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.4;
  padding: 3px 9px;
  border: 1px solid var(--noir);
}
.badge-brouillon { background: var(--blanc); color: var(--noir); }
.badge-valide { background: var(--noir); color: var(--blanc); }
/* Validé sans relevés : distinct d'un mois rapproché (contour tireté, fond crème). */
.badge-sans-releves { background: var(--creme); color: var(--noir); border-style: dashed; white-space: normal; }

/* Fiche du mois */
.fiche { display: grid; gap: 36px; }
.fiche-entete {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
  padding-bottom: 20px; border-bottom: 1px solid var(--filet);
}
.fiche-entete h2 { font-size: var(--t-titre); line-height: 1.1; }
.fiche-entete h2:focus { outline: none; }
.fiche-entete h2:focus-visible { outline: 2px solid var(--noir); outline-offset: 4px; }
.fiche-entete .badge { align-self: center; }
.fiche-code { color: var(--gris); font-size: var(--t-xs); letter-spacing: 0.08em; margin-top: 4px; }
.fiche-date { color: var(--gris); font-size: var(--t-s); margin-left: auto; align-self: center; }

.fiche-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@container fiche (min-width: 760px) {
  .fiche-corps { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; }
}
.retour-liste { justify-self: start; margin-bottom: -20px; }
/* Fiche étroite (à côté de la liste) : catégorie et fournisseur restent dans le module Transactions. */
@container fiche (max-width: 759px) {
  .table-tx-fiche th:nth-child(5), .table-tx-fiche td:nth-child(5),
  .table-tx-fiche th:nth-child(6), .table-tx-fiche td:nth-child(6) { display: none; }
  .table-tx-fiche .tx-description { min-width: 110px; }
}
.fiche-col { display: grid; gap: 32px; align-content: start; min-width: 0; }

.bloc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.bloc h3 label { font: inherit; color: inherit; }

/* Relevé de rapprochement : la pièce maîtresse de l'écran. */
.releve { font-size: var(--t-m); }
.releve th, .releve td { padding: 7px 0; border: none; }
.releve tbody tr > * { border-top: none; }
.releve th { font-weight: 400; }
.releve th .nb { margin-left: 10px; }
/* Libellé insécable (« Compte bancaire ») ; seul le nombre de lignes passe dessous quand le grand écart prend la place. */
.releve tbody th > span:first-child { white-space: nowrap; }
.releve tbody th .nb { display: inline-block; }
.releve td.num { padding-left: 16px; white-space: nowrap; width: 1%; } /* colonne des montants au plus juste : les libellés gardent la place */
.releve-qb th, .releve-qb td { font-weight: 600; padding-bottom: 10px; }
.releve-intertitre th {
  padding-top: 14px;
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gris);
  border-top: 1px solid var(--filet) !important;
}
.releve-sortie th { padding-left: 16px; color: var(--noir); }
.releve-total > * { border-top: 1px solid var(--noir) !important; font-weight: 600; padding-top: 10px; }
.releve-ecart > * { padding-top: 24px; vertical-align: bottom; }
.releve-ecart th { display: grid; gap: 8px; }
.ecart-libelle { font-family: var(--serif); font-weight: 400; font-size: var(--t-xl); line-height: 1.1; }
.ecart-etat {
  justify-self: start;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
}
.releve-ecart.est-juste .ecart-etat { color: var(--juste); background: var(--juste-fond); }
.releve-ecart.est-ecart .ecart-etat { color: var(--ecart); background: var(--ecart-fond); }
.releve-ecart.est-explique .ecart-etat { color: var(--or-texte); background: var(--or-voile); }
.releve-ecart.est-neutre .ecart-etat { color: var(--noir); background: var(--creme); border-style: dashed; }
.montant-ecart {
  display: inline-block;
  font-family: var(--serif);
  font-size: var(--t-ecart);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.05;
  padding-bottom: 6px;
  border-bottom: 4px double currentColor; /* double trait comptable du total final */
}
.releve-ecart.est-ecart .montant-ecart { color: var(--ecart); }
.releve-ecart.est-juste .montant-ecart { color: var(--juste); }
.releve-ecart.est-explique .montant-ecart { color: var(--noir); }
.releve-ecart.est-neutre .montant-ecart { color: var(--gris); border-bottom-style: solid; border-bottom-width: 1px; }
.montant-neutre { font-size: var(--t-xl); }

/* Compteurs */
.compteurs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin: 0;
  border-top: 1px solid var(--noir);
  border-bottom: 1px solid var(--filet);
}
.compteurs > div { padding: 12px 12px 14px 0; display: flex; flex-direction: column; justify-content: space-between; }
.compteurs > div + div { padding-left: 12px; border-left: 1px solid var(--filet); }
.compteurs dt { font-size: var(--t-xs); color: var(--gris); overflow-wrap: anywhere; }
.compteurs dt a { color: inherit; }
.compteurs dt a:hover { color: var(--noir); }
.compteurs dd {
  margin: 4px 0 0;
  font-family: var(--serif); font-size: 1.625rem; line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
}
.compteur-vide dd { color: var(--gris); }

/* Commentaire et validation */
.etat-saisie { font-size: var(--t-s); color: var(--gris); }
.commentaire-fige {
  white-space: pre-line; overflow-wrap: anywhere;
  padding: 14px 16px; background: var(--creme);
  border-left: 2px solid var(--or);
}
.bloc-validation { padding-top: 4px; }
.raison-validation.raison-bloquante { color: var(--noir); padding-left: 10px; border-left: 2px solid var(--or); }
.confirmation {
  display: grid; gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--ecart);
  border-left-width: 3px;
  background: var(--ecart-fond);
}
.confirmation-titre { font-family: var(--serif); font-size: var(--t-l); }
.bloc-scelle {
  padding: 20px 22px;
  background: var(--creme);
  border-top: 2px solid var(--noir);
  color: var(--noir);
}
.bloc-scelle-sans-releves { border-top-style: dashed; }
/* Case explicite « Je valide ce mois sans relevés » (U1). */
.case-explicite { display: grid; gap: 6px; padding: 12px 14px; border: 1px dashed var(--bord-champ); background: var(--blanc); }
.case-ligne { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.case-ligne input { flex: none; }

/* Transactions du mois */
.bloc-large { border-top: 1px solid var(--filet); padding-top: 32px; }
.table-tx th, .table-tx td { padding: 8px 6px; }
.table-tx th:first-child, .table-tx td:first-child { padding-left: 0; }
.table-tx th:last-child, .table-tx td:last-child { padding-right: 0; }
.table-tx thead th { letter-spacing: 0.06em; }
.table-tx td:nth-child(2) { white-space: normal; } /* « Carte de crédit 1 » peut passer sur deux lignes */
.table-tx .tx-qb > td:nth-child(2) { font-weight: 600; }
.tx-description { min-width: 140px; max-width: 36ch; overflow-wrap: break-word; } /* coupe aux espaces, pas en plein mot */
/* Longues descriptions (« QBO … — total mensuel (… PROJET non rapproché) ») : deux lignes, texte complet en infobulle. */
.texte-tronque {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
/* U4 : « Annuler » prend la place de « Supprimer » (même coin, même largeur) ; « Confirmer » passe dessous,
   à 10 px : la cellule ne s'élargit pas, le tableau ne se décale pas, rien ne glisse sous le pointeur. */
.actions-ligne { text-align: left; white-space: nowrap; }
.actions-ligne .lien-bouton { white-space: nowrap; letter-spacing: 0.12em; text-align: left; }
.actions-ligne[data-confirmation="ouverte"] .lien-bouton { display: block; }
.actions-ligne .confirmer-suppression { margin-top: 10px; }
.actions-soldes .confirmer-suppression { margin-left: 16px; }
.fige { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.a-supprimer { background: var(--ecart-fond); }

/* Autres lignes du mois : soldes (liste), revenus par mandat et injections (tableaux). */
.ligne-supprimable { display: grid; gap: 10px; padding: 4px 0; }
.ligne-supprimable.a-supprimer { padding: 10px 12px; }
.soldes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0; margin: 0;
  border-top: 1px solid var(--noir); border-bottom: 1px solid var(--filet);
}
.soldes > div { padding: 10px 12px 12px 0; border-bottom: 1px solid var(--filet); margin-bottom: -1px; }
.soldes dt { font-size: var(--t-xs); color: var(--gris); }
.soldes dd { margin: 2px 0 0; text-align: left; font-size: var(--t-m); }
.solde-vide dd { color: var(--gris); }
.actions-soldes { justify-content: flex-start; }
.table-lignes { max-width: 760px; }
.vide-detail { padding: 48px 0; font-family: var(--serif); font-size: var(--t-l); color: var(--gris); }

/* ---------- Import ---------- */
.import-entete { display: grid; gap: 16px; margin: 24px 0 20px; }
.import-fichier { overflow-wrap: anywhere; }
.resume {
  display: flex; flex-wrap: wrap; gap: 0; margin: 0;
  border-top: 1px solid var(--noir);
  border-bottom: 1px solid var(--filet);
  width: fit-content; max-width: 100%;
}
.resume-item { padding: 10px 24px 12px 0; }
.resume-item + .resume-item { padding-left: 24px; border-left: 1px solid var(--filet); }
.resume dt { font-size: var(--t-xs); color: var(--gris); }
.resume dd {
  margin: 2px 0 0;
  font-family: var(--serif); font-size: 1.625rem; line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
}
.resume-nouveau dd { color: var(--juste); }
.resume-doublon dd { color: var(--attention); }
.resume-erreur dd { color: var(--ecart); }

.colonnes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-s); }
.colonnes-libelle { font-weight: 600; }
.colonnes .avertissement { color: var(--attention); }
.colonnes .erreur { color: var(--ecart); }

.defile-import { max-height: 60vh; overflow: auto; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.table-import thead th { position: sticky; top: 0; z-index: 1; white-space: normal; letter-spacing: 0.06em; vertical-align: bottom; }
.table-import th, .table-import td { padding-left: 6px; padding-right: 6px; }
/* Les textes passent à la ligne (aux espaces) pour que la colonne Détail reste visible sans défilement.
   Largeur minimale des colonnes de valeurs : une date (2026-10-01) tient sur une ligne sans couper au trait d'union. */
.table-import td { white-space: normal; overflow-wrap: break-word; }
.table-import td:nth-child(n + 4):not(.import-detail) { min-width: 6.75em; }
.table-import .statut { white-space: normal; }
.table-import td.nowrap { white-space: nowrap; } /* U18 : l'emporte sur .table-import td (date jamais coupée au trait d'union) */
.table-import td.import-detail { min-width: 240px; }
.ligne-erreur { background: var(--ecart-fond); }
.ligne-doublon_base, .ligne-doublon_fichier { background: var(--attention-fond); }

.statut {
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
}
.statut-nouveau { color: var(--juste); }
.statut-doublon_base, .statut-doublon_fichier { color: var(--attention); }
.statut-erreur { color: var(--ecart); }

.liste-erreurs { margin: 2px 0 0; padding-left: 18px; }
.liste-erreurs li + li { margin-top: 2px; }

.actions-import { margin-top: 20px; }

input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--noir); }

/* ---------- Encarts (retours en place) ---------- */
.encart {
  display: grid; gap: 8px;
  padding: 16px 18px; margin: 16px 0;
  border: 1px solid var(--filet);
  border-left: 2px solid var(--noir);
  background: var(--blanc);
  overflow-wrap: anywhere;
}
.encart-titre { font-weight: 600; }
.encart-erreur { border-color: var(--ecart); border-left-width: 3px; background: var(--ecart-fond); }
.encart-succes { border-color: var(--juste); border-left-width: 3px; background: var(--juste-fond); }
.encart-avertissement { border-color: var(--or); border-left-width: 3px; background: var(--or-voile); }
.encart-avertissement .annonce-code { color: var(--attention); }
.encart-neutre { border-color: var(--filet); border-left: 3px solid var(--noir); background: var(--creme); }
.encart:focus { outline: none; }
.encart:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }

/* ---------- Grille : ligne ajoutée (mise en évidence) ---------- */
.ligne-nouvelle > * { background: var(--or-voile); }
.ligne-nouvelle > :first-child { box-shadow: inset 2px 0 0 var(--or); }

/* ---------- Mouvements (type « mouvement », non-charges, hors rapprochement) ---------- */
/* Lignes : fond crème, filet pointillé à gauche, texte secondaire en italique — distinctes des dépenses et revenus. */
.tx-mouvement > * { background: var(--creme); color: var(--encre-2); font-style: italic; }
.tx-mouvement > :first-child { box-shadow: inset 3px 0 0 var(--bord-champ); padding-left: 8px; }
.table-tx .tx-mouvement > td:first-child { padding-left: 8px; }
.mouvements-mois { margin-top: 20px; padding: 14px 16px; border: 1px dashed var(--bord-champ); background: var(--creme); max-width: 560px; }
.mouvements-titre { font-weight: 600; margin: 0 0 8px; }
.mouvements-comptes { margin: 0; display: grid; gap: 4px; }
.mouvements-comptes > div { display: flex; justify-content: space-between; gap: 16px; }
.mouvements-comptes dt { color: var(--encre-2); }
.mouvements-comptes dd { margin: 0; white-space: nowrap; }
.mouvements-comptes .mouvements-total { border-top: 1px solid var(--filet); padding-top: 6px; margin-top: 4px; font-weight: 600; }
.mouvements-comptes .mouvements-total dt { color: var(--encre); }
.mouvements-mois .aide { margin: 8px 0 0; }

/* ---------- Grille (façon Monday, en registre ORÉA) ----------
   Un groupe par mois, comme un folio : filet vertical doré pour un mois en brouillon (modifiable),
   noir et cadenas pour un mois validé (verrouillé). Les cellules se corrigent en place. */
.barre-grille { padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid var(--filet); }
.actions-groupes { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.consigne-grille { margin: 0 0 28px; }
.groupes { display: grid; gap: 32px; }

.groupe { position: relative; padding-left: 14px; min-width: 0; }
.groupe::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 0; width: 3px;
  background: var(--or);
}
.groupe-verrouille::before { background: var(--noir); }
.groupe:not(.groupe-ouvert)::before { bottom: auto; height: 40px; }

.groupe-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 12px; }
.groupe-titre { font-size: 1.375rem; line-height: 1.2; }
.groupe-reference .groupe-titre { padding: 4px 0; }
.groupe-bascule {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 40px; padding: 0 6px 0 0; text-align: left;
  font: inherit; color: inherit;
}
.groupe-bascule:hover .groupe-nom { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.chevron {
  flex: none; width: 8px; height: 8px; margin: 0 2px 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--duree);
}
.groupe-bascule[aria-expanded="true"] .chevron { transform: rotate(45deg); margin-bottom: 6px; }
.groupe-nb { font-size: var(--t-s); color: var(--gris); white-space: nowrap; }
.badge-nouveau { color: var(--gris); border-color: var(--bord-champ); border-style: dashed; }
.badge-verrou { display: inline-flex; align-items: center; gap: 7px; }
/* Cadenas dessiné en CSS : corps plein, anse en arc. */
.cadenas { position: relative; flex: none; width: 8px; height: 6px; margin-top: 4px; background: currentColor; }
.cadenas::before {
  content: ""; position: absolute; left: 1px; bottom: 5px;
  width: 6px; height: 5px; box-sizing: border-box;
  border: 1.5px solid currentColor; border-bottom: none; border-radius: 3px 3px 0 0;
}

.groupe-totaux { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; margin: 0 0 0 auto; }
.groupe-totaux .total { display: grid; gap: 1px; text-align: right; }
.groupe-totaux dt { font-size: var(--t-xs); color: var(--gris); white-space: nowrap; }
.groupe-totaux dd { margin: 0; font-size: var(--t-s); font-weight: 600; white-space: nowrap; }
.groupe-totaux .total-mouvements { padding-left: 14px; border-left: 1px dashed var(--bord-champ); }
.groupe-totaux .total-mouvements dd { font-weight: 500; font-style: italic; color: var(--encre-2); }
.groupe-totaux .total-ecart { padding-left: 16px; border-left: 1px solid var(--noir); font-weight: 400; }
.groupe-totaux .total-ecart dt, .groupe-totaux .total-ecart dt a { color: var(--gris); }
.groupe-totaux .total-ecart dt a:hover { color: var(--noir); }
.groupe-totaux .total-ecart dd { font-family: var(--serif); font-size: var(--t-l); font-weight: 400; line-height: 1.15; }
.groupe-totaux .total-ecart.est-ecart dd { font-weight: 600; }
.groupe-totaux .mention-neutre { font-family: var(--sans); font-size: var(--t-xs); }
.groupe-aide { margin: 0 0 10px; }

/* La grille */
.defile-grille { position: relative; }
.defile-grille.defile-avec-menu { padding-bottom: 104px; }
.grille { font-size: var(--t-s); }
.grille thead th { padding: 8px 6px; vertical-align: bottom; letter-spacing: 0.04em; white-space: normal; }
.grille td { padding: 8px 6px; height: 40px; vertical-align: middle; white-space: nowrap; }
.grille th + th, .grille td + td { border-left: 1px solid var(--filet); }
.grille tbody tr:first-child > * { border-top: none; }
.grille tbody + tbody tr:first-child > * { border-top: 1px solid var(--filet); }
.grille tbody tr[data-cle]:hover > td { background: #fafafa; }
/* La description est la colonne la plus lue : elle prend la place que Catégorie, Fournisseur, Compte et
   « Saisie par » (souvent vides ou courts) cèdent en passant à la ligne ; trois lignes avant « … ». */
.grille td.col-champ-description { white-space: normal; min-width: 18ch; max-width: 34ch; overflow-wrap: anywhere; }
.grille td.col-champ-description .texte-tronque { -webkit-line-clamp: 3; line-clamp: 3; }
.grille td.col-ref, .grille td.col-compte, .grille td.col-origine { white-space: normal; overflow-wrap: break-word; }
.grille .col-montant { min-width: 6.5em; }
.grille .col-ref { min-width: 6em; }
.grille thead .col-mois { min-width: 5.5em; }
.grille .col-id, .grille .col-origine { color: var(--gris); }
.grille .col-id { width: 1%; }
.grille .tx-qb .col-champ-compte_source { font-weight: 600; }
.grille-vide { color: var(--gris); font-style: italic; }

.grille td.editable { cursor: cell; }
.grille td[data-nav]:focus { outline: 2px solid var(--noir); outline-offset: -2px; }
.grille td.en-edition { padding: 0; background: var(--blanc); outline: 2px solid var(--noir); outline-offset: -2px; }
.grille .editeur {
  display: block; width: 100%; min-width: 7em; min-height: 40px; max-width: none;
  margin: 0; padding: 6px 10px;
  border: none; border-bottom: 2px solid var(--or); background: var(--blanc);
  font-size: var(--t-s);
}
.grille .editeur:focus-visible { outline: none; border-bottom-color: var(--noir); }
.grille td.col-champ-description .editeur { min-width: 18em; }
.grille .editeur[type="checkbox"] { width: 18px; min-width: 0; min-height: 18px; margin: 11px 10px; }

/* États d'une cellule : en attente (filet doré pointillé qui défile), confirmée (voile or qui s'efface),
   en erreur (valeur d'origine rétablie, filet rouge), doublon à confirmer (voile or). */
.grille td.cellule-attente {
  color: var(--gris);
  background-image: linear-gradient(to right, var(--or) 50%, transparent 0);
  background-size: 8px 1px; background-repeat: repeat-x; background-position: 0 calc(100% - 7px);
  animation: attente 0.9s linear infinite;
}
@keyframes attente { to { background-position: 8px calc(100% - 7px); } }
.grille td.cellule-confirmee { animation: confirmee 1.6s ease-out; }
@keyframes confirmee {
  0%, 35% { background-color: var(--or-voile); box-shadow: inset 0 -2px 0 var(--or); }
  100% { background-color: transparent; box-shadow: inset 0 -2px 0 transparent; }
}
.grille td.cellule-erreur { background: var(--ecart-fond); box-shadow: inset 3px 0 0 var(--ecart); }
.grille td.cellule-doublon { background: var(--or-voile); box-shadow: inset 3px 0 0 var(--or); } /* valeur actuelle, inchangée */
.grille td.cellule-refus { animation: refus 0.6s ease-out; }
@keyframes refus { 30% { background-color: var(--creme); box-shadow: inset 0 0 0 1px var(--bord-champ); } }

.ligne-message > td { padding: 0 !important; height: auto; border-top: none !important; white-space: normal; }
.message-cellule {
  position: sticky; left: 0;
  display: grid; gap: 8px; justify-items: start;
  width: min(72ch, calc(100vw - 2 * var(--marge) - 24px));
  margin: 0 0 8px; padding: 10px 14px 12px;
  border-left: 3px solid var(--ecart); background: var(--ecart-fond);
  font-size: var(--t-s); white-space: normal; overflow-wrap: anywhere;
}
.message-doublon { border-left-color: var(--or); background: var(--or-voile); }
.message-doublon .annonce-code { color: var(--attention); }
.bouton-compact { min-height: 36px; padding: 8px 18px; }

/* Actions de ligne (⋯) */
.grille .col-actions { position: relative; width: 1%; padding: 0; text-align: center; }
/* Les actions restent à portée quand la grille défile horizontalement. */
.grille thead .col-actions, .grille tbody tr[data-cle] > .col-actions, .grille .ligne-ajout > .col-actions {
  position: sticky; right: 0; z-index: 2; background: var(--blanc); box-shadow: -1px 0 0 var(--filet);
}
.grille tbody tr.tx-mouvement > .col-actions { background: var(--creme); }
.grille tbody tr.ligne-nouvelle > .col-actions { background: var(--or-voile); }
.grille tbody tr[data-cle] > .col-actions.avec-menu-ligne { z-index: 7; }
.bouton-menu-ligne {
  width: 44px; min-height: 40px;
  font-size: 1.15rem; line-height: 1; color: var(--gris);
  transition: color var(--duree), background-color var(--duree);
}
.bouton-menu-ligne:hover, .bouton-menu-ligne[aria-expanded="true"] { color: var(--noir); background: var(--creme); }
.bouton-menu-ligne:focus-visible { outline-offset: -2px; }
.menu-ligne {
  position: absolute; right: 2px; top: calc(100% - 2px); z-index: 6;
  display: grid; min-width: 210px; padding: 4px 0;
  background: var(--blanc); border: 1px solid var(--noir);
  box-shadow: 0 16px 32px -20px rgba(10, 10, 10, 0.45);
}
.menu-ligne-haut { top: auto; bottom: calc(100% - 2px); }
.menu-ligne-item { min-height: 40px; padding: 8px 16px; text-align: left; font-size: var(--t-s); white-space: nowrap; }
.menu-ligne-item:hover, .menu-ligne-item:focus-visible { background: var(--creme); outline: none; box-shadow: inset 2px 0 0 var(--or); }
.menu-ligne-danger { color: var(--ecart); }
.grille .col-actions .actions-ligne { padding: 6px 10px; text-align: left; }
/* Ligne visée par une suppression (étape 2) : teinte rouge sur toute la ligne, cellule d'actions comprise. */
.grille tbody tr[data-cle].a-supprimer > td { background: var(--ecart-fond); }

/* Ligne d'ajout */
.grille .cellule-ajout { padding: 0; }
.bouton-ajout {
  position: sticky; left: 0;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px 8px 10px;
  font-size: var(--t-s); font-weight: 500; color: var(--or-texte);
  transition: color var(--duree), background-color var(--duree);
}
.bouton-ajout:hover { color: var(--noir); background: var(--or-voile); }
.bouton-ajout:focus-visible { outline-offset: -2px; }
.bouton-ajout .plus { font-family: var(--serif); font-size: 1.25rem; line-height: 1; }
.ligne-ajout > td { padding: 0; background: var(--blanc); box-shadow: inset 0 1px 0 var(--or); }
.ligne-ajout > td.lecture { background: var(--creme); }
.champ-ajout {
  display: block; width: 100%; min-width: 0; min-height: 40px; max-width: none;
  padding: 6px 10px; border: none !important; border-bottom: 1px solid var(--bord-champ) !important;
  background: transparent !important; font-size: var(--t-s);
}
.champ-ajout:focus-visible { outline: 2px solid var(--noir); outline-offset: -2px; }
.champ-ajout[type="checkbox"] { width: 18px; min-width: 0; min-height: 18px; margin: 11px 10px; }
.ligne-ajout td.col-champ-description .champ-ajout { min-width: 8em; }
.ligne-ajout input[type="date"].champ-ajout { padding-right: 2px; font-size: var(--t-xs); }
.ligne-ajout td.cellule-erreur .champ-ajout { background: var(--ecart-fond) !important; border-bottom: 2px solid var(--ecart) !important; }
.ligne-ajout-etat > td { padding: 4px 0 10px !important; height: auto; border-top: none !important; white-space: normal; }
.ajout-aide {
  position: sticky; left: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  width: min(72ch, calc(100vw - 2 * var(--marge) - 24px)); padding-left: 10px;
}

/* Historique d'une ligne : panneau à droite (journal des modifications, plus récent d'abord). */
.historique {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 25;
  width: min(460px, 100vw);
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 28px 36px; overflow-y: auto;
  background: var(--blanc); border-left: 1px solid var(--noir);
  box-shadow: -28px 0 48px -36px rgba(10, 10, 10, 0.5);
}
.historique-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--filet); }
.historique-tete h2 { font-size: var(--t-xl); }
.historique-tete h2:focus { outline: none; }
.historique-tete h2:focus-visible { outline: 2px solid var(--noir); outline-offset: 4px; }
.journal { list-style: none; margin: 6px 0 0 4px; padding: 0; }
.journal-entree { position: relative; padding: 0 0 18px 20px; border-left: 1px solid var(--filet); }
.journal-entree:last-child { border-left-color: transparent; padding-bottom: 0; }
.journal-entree::before {
  content: ""; position: absolute; left: -4px; top: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--or);
}
.journal-creation::before { background: var(--noir); }
.journal-suppression::before { background: var(--ecart); }
.journal-quand { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: var(--t-xs); color: var(--gris); }
.journal-par { font-weight: 600; color: var(--noir); }
.journal-quoi { margin-top: 4px; font-size: var(--t-s); }
.journal-champs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-s); }
.journal-champs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.journal-champ { font-weight: 600; }
.journal-avant { color: var(--gris); text-decoration: line-through; text-decoration-color: var(--bord-champ); font-variant-numeric: tabular-nums lining-nums; }
.journal-fleche { color: var(--or-texte); }
.journal-apres { font-variant-numeric: tabular-nums lining-nums; }

/* Sous 900 px : la grille défile horizontalement, première colonne (la date) figée à gauche. */
@media (max-width: 900px) {
  .groupe { padding-left: 14px; }
  .groupe-totaux { margin-left: 0; width: 100%; justify-content: flex-start; gap: 6px 18px; }
  .groupe-totaux .total, .groupe-totaux dd.num { text-align: left; }
  .grille thead th:first-child,
  .grille tbody tr[data-cle] > td:first-child,
  .grille .ligne-ajout > td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--blanc);
    box-shadow: 1px 0 0 var(--filet), 6px 0 8px -6px rgba(10, 10, 10, 0.25);
  }
  .grille tbody tr.tx-mouvement > td:first-child { background: var(--creme); box-shadow: inset 3px 0 0 var(--bord-champ), 6px 0 8px -6px rgba(10, 10, 10, 0.25); }
  .grille tbody tr.ligne-nouvelle > td:first-child { background: var(--or-voile); }
  .grille td.en-edition:first-child { z-index: 3; }
  .historique { padding: 20px var(--gouttiere) 28px; border-left: none; }
}

/* ---------- Exports ---------- */
.table-exports { max-width: 900px; font-size: var(--t-m); }
.table-exports th[scope="row"] { font-family: var(--serif); font-weight: 400; }
.table-exports tbody td, .table-exports tbody th { padding-top: 14px; padding-bottom: 14px; }
.lien-telechargement { white-space: nowrap; font-size: var(--t-s); }

/* ---------- Page de connexion ---------- */
.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: var(--gouttiere); }
.connexion { width: 100%; max-width: 380px; display: grid; gap: 36px; }
.marque-connexion { justify-content: center; }
.marque-connexion .marque-barre { height: 40px; }
.marque-connexion .marque-nom { font-size: 1.5rem; }
.connexion-formulaire {
  display: grid; gap: 20px;
  padding: 32px 0 0;
  border-top: 1px solid var(--noir);
}
.connexion-titre { font-size: var(--t-xl); }
.connexion-formulaire input { width: 100%; }
.connexion-formulaire .primaire { width: 100%; margin-top: 4px; }
.connexion-erreur {
  color: var(--ecart); background: var(--ecart-fond);
  border-left: 3px solid var(--ecart);
  padding: 10px 12px; font-size: var(--t-s);
}
.connexion-erreur[hidden] { display: none; }
.connexion-pied { font-size: var(--t-xs); color: var(--gris); text-align: center; }

/* ---------- Écrans moyens et petits ---------- */
/* Sous 900 px : le menu devient une barre en tête, repliable (bouton « Menu »). */
@media (max-width: 900px) {
  :root { --marge: 24px; }
  .menu {
    position: sticky; inset: 0 auto auto 0; width: auto;
    border-right: none; border-bottom: 1px solid var(--filet);
  }
  .menu-tete {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px var(--marge); border-bottom: none;
  }
  .menu-bascule {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 8px 4px 8px 12px;
    font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--suivi-large); text-transform: uppercase;
    color: var(--noir);
  }
  .menu-bascule-icone, .menu-bascule-icone::before, .menu-bascule-icone::after {
    display: block; width: 18px; height: 1px; background: var(--noir);
    transition: transform var(--duree);
  }
  .menu-bascule-icone { position: relative; }
  .menu-bascule-icone::before, .menu-bascule-icone::after { content: ""; position: absolute; left: 0; }
  .menu-bascule-icone::before { top: -6px; }
  .menu-bascule-icone::after { top: 6px; }
  .menu-ouvert .menu-bascule-icone { background: transparent; }
  .menu-ouvert .menu-bascule-icone::before { transform: translateY(6px) rotate(45deg); }
  .menu-ouvert .menu-bascule-icone::after { transform: translateY(-6px) rotate(-45deg); }
  .menu:not(.menu-ouvert) .menu-panneau { display: none; }
  .menu-panneau {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 68px);
    background: var(--blanc);
    border-bottom: 1px solid var(--noir);
    box-shadow: 0 24px 40px -28px rgba(10, 10, 10, 0.45);
    padding-top: 12px;
  }
  .menu-section, .menu-lien { padding-left: calc(var(--marge) - 2px); padding-right: var(--marge); }
  .menu-lien { min-height: 44px; }
  .deconnexion { margin: 0 var(--marge); }
  .registre { margin-left: 0; }
  html { scroll-padding-top: 84px; } /* défilement programmé (U7) : jamais sous la barre de menu collante */
}

@media (max-width: 640px) {
  :root { --marge: var(--gouttiere); --t-titre: 1.875rem; --t-ecart: 2.125rem; --t-xl: 1.5rem; }
  .marque-nom { font-size: 1.0625rem; }
  .marque-sous { letter-spacing: 0.28em; }
  .registre { padding-top: 28px; }
  .titre-bloc { margin-bottom: 22px; }
  .fiche-date { margin-left: 0; }
  /* Liste des mois : on garde mois, statut et écart (le détail affiche les totaux). */
  .table-mois th:nth-child(3), .table-mois td:nth-child(3),
  .table-mois th:nth-child(4), .table-mois td:nth-child(4) { display: none; }
  .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compteurs > div:nth-child(odd) { padding-left: 0; border-left: none; }
  .compteurs > div:nth-child(-n + 2) { border-bottom: 1px solid var(--filet); }
  .resume { width: 100%; }
  .resume-item, .resume-item + .resume-item { padding: 8px 14px 10px 0; border-left: none; }
  .primaire, .secondaire, .danger { padding-left: 22px; padding-right: 22px; }

  /* Exports : nom de la table, portée en sous-texte, puis le fichier. */
  .table-exports, .table-exports tbody { display: block; }
  .table-exports thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .table-exports tbody tr { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--filet); }
  .table-exports tbody tr:first-child { border-top: none; }
  .table-exports tbody tr > * { display: block; padding: 0 !important; border: none; }
  .table-exports tbody td.discret { font-size: var(--t-s); }
  .table-exports .lien-telechargement { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 1379px) {
  /* Aperçu d'import sous 1380 px : chaque ligne devient une fiche pleine largeur
     (n°, statut, inclure ; puis le détail des erreurs ; puis les valeurs lues).
     Le tableau complet des transactions (13 colonnes) demande ~1260 px de contenu. */
  .defile-import { max-height: none; overflow: visible; border-bottom: none; }
  .table-import, .table-import tbody { display: block; }
  .table-import thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .table-import tbody tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    padding: 14px 10px; border-top: 1px solid var(--filet);
  }
  .table-import tbody tr:first-child { border-top: none; }
  .table-import tbody tr > * { display: block; padding: 0; border: none; text-align: left; }
  .table-import tbody td:empty { display: none; }
  .table-import tbody td:first-child { font-weight: 600; }
  .table-import tbody td:first-child::before { content: "Ligne "; content: "Ligne " / ""; font-weight: 400; color: var(--gris); }
  .table-import tbody td:nth-child(3) { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); }
  .table-import tbody td:nth-child(3)::after { content: "Inclure"; content: "Inclure" / ""; }
  .table-import tbody td:nth-child(3):not(:has(input)) { display: none; } /* pas de case : rien à afficher */
  .table-import tbody td:nth-child(n + 4):not(.import-detail) { order: 2; min-width: 0; color: var(--gris); font-size: var(--t-xs); }
  .table-import tbody td.import-detail { order: 1; flex: 1 1 100%; min-width: 0; font-size: var(--t-s); }
}

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


/* ---------- Police système (SF Pro) : graisses des anciens éléments « serif » ---------- */
h1, h2, h3, .titre-bloc h1, .ecart-libelle, .confirmation-titre { font-weight: 600; letter-spacing: -0.015em; }
.marque-nom { font-weight: 600; }
.menu-lien, .lien-mois, .table-exports th[scope="row"] { font-weight: 500; }
.montant-ecart, .compteurs dd, .resume dd, .groupe-totaux .total-ecart dd { font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vide-detail { font-weight: 400; }

/* =====================================================================
   P1 — comptes réels, relevés, statut et pendant des transactions, checklist du mois.
   Même registre : filets fins, or en accessoire ; vert, rouge et or-texte seulement pour un état.
   ===================================================================== */

/* Pastilles d'état (checklist, relevés, statut, pendant) */
.pastille {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
  padding: 1px 7px; border: 1px solid currentColor;
}
.pastille-ok { color: var(--juste); background: var(--juste-fond); }
.pastille-ko { color: var(--ecart); background: var(--ecart-fond); }
.pastille-attention { color: var(--attention); background: var(--attention-fond); border-color: var(--or); }
.pastille-neutre { color: var(--gris); background: var(--creme); border-color: var(--bord-champ); border-style: dashed; }
.pastille-na { color: var(--gris); background: var(--blanc); border-color: var(--filet); }
.est-attention { color: var(--attention); }

/* Checklist du mois */
.bloc-checklist h3, .bloc-ko-acceptes h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.checklist-resume { display: inline-flex; flex-wrap: wrap; gap: 6px; font-family: var(--sans); }
.checklist { list-style: none; margin: 4px 0 0; padding: 0; max-width: 1100px; }
.point { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; padding: 12px 0 12px 14px; border-top: 1px solid var(--filet); border-left: 3px solid var(--filet); }
.point:last-child { border-bottom: 1px solid var(--filet); }
.point-ko { border-left-color: var(--ecart); }
.point-ok { border-left-color: var(--juste); }
.point-na { color: var(--gris); }
.point-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.point-libelle { font-weight: 600; }
.point-na .point-libelle { font-weight: 500; }
.point-phase { font-size: var(--t-xs); color: var(--gris); letter-spacing: 0.04em; }
.point-resume { font-size: var(--t-s); max-width: 96ch; }
.point-na .point-resume { font-size: var(--t-xs); }
.point > *, .point-detail { min-width: 0; }
.point-detail summary, .checklist-repliee summary {
  cursor: pointer; width: max-content; font-size: var(--t-xs); font-weight: 500;
  letter-spacing: var(--suivi-large); text-transform: uppercase; color: var(--or-texte); padding: 4px 0;
}
.point-detail summary:hover, .checklist-repliee summary:hover { color: var(--noir); }
.point-detail[open] summary { margin-bottom: 6px; }
.checklist-repliee[open] summary { margin-bottom: 10px; }
.detail-pile { display: grid; gap: 8px; font-size: var(--t-s); }
.table-detail { font-size: var(--t-s); max-width: 100%; }
.table-detail th, .table-detail td { padding: 6px 10px 6px 0; vertical-align: top; }
.table-detail td + td, .table-detail th + th { padding-left: 10px; }
.table-detail thead th { font-size: var(--t-xs); }
.liste-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.liste-simple li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.lien-ligne { font-variant-numeric: tabular-nums lining-nums; }
.bloc-ko-acceptes { border-left: 3px solid var(--noir); padding-left: 16px; }
.confirmation-ko { display: block; margin-top: 6px; font-weight: 600; }

/* Grille : statut, pendant, lignes mises de côté, comptes inactifs */
.statut-cellule { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.statut-age { font-size: var(--t-xs); color: var(--gris); font-variant-numeric: tabular-nums; }
.pendant-cellule { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.lien-pendant { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pendant-compte { font-size: var(--t-xs); color: var(--gris); }
.grille .col-champ-pendant_id { min-width: 6.5em; white-space: normal; }
.grille .col-champ-pendant_id .pastille, .grille .col-champ-statut .pastille { white-space: normal; text-align: left; }
.grille .col-champ-statut { min-width: 6.5em; white-space: normal; }
.grille tbody tr.tx-mis-de-cote > td:first-child { box-shadow: inset 3px 0 0 var(--or); }
.grille tbody tr.compte-inactif > td { color: var(--gris); }
.champ-case { display: flex; align-items: center; min-height: 40px; }
.champ-case .case-ligne label { font-size: var(--t-s); }

/* Formulaire sous une ligne : mettre de côté, décider */
.ligne-formulaire > td { padding: 0 !important; height: auto; border-top: none !important; white-space: normal; }
.formulaire-ligne {
  position: sticky; left: 0;
  display: grid; gap: 10px; justify-items: start;
  width: min(80ch, calc(100vw - 2 * var(--marge) - 24px));
  margin: 0 0 10px; padding: 12px 16px 14px;
  border-left: 3px solid var(--or); background: var(--or-voile);
  font-size: var(--t-s); white-space: normal; overflow-wrap: anywhere;
}
.formulaire-champ { display: grid; gap: 4px; width: 100%; }
.formulaire-champ label { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; }
.champ-formulaire { width: 100%; min-height: 40px; }
.formulaire-erreur { color: var(--ecart); }
.formulaire-ligne .actions { align-items: center; gap: 8px 14px; }
.formulaire-ligne .ou { color: var(--gris); font-size: var(--t-xs); }
.actions-decision { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.actions-decision[data-confirmation="ouverte"] { padding: 4px 8px; background: var(--ecart-fond); }

/* Relevés */
.consigne-releves { max-width: 96ch; margin: 0 0 28px; font-size: var(--t-s); }
.resume-releves { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0 auto; }
.table-releves { font-size: var(--t-s); width: 100%; }
.table-releves thead th { padding: 8px 8px; vertical-align: bottom; letter-spacing: 0.04em; }
.table-releves td, .table-releves th[scope="row"] { padding: 9px 8px; vertical-align: top; }
.table-releves td + td, .table-releves th + td { border-left: 1px solid var(--filet); }
.releve-compte { min-width: 10em; font-weight: 400; text-align: left; }
.releve-periode { min-width: 12em; }
.mention-piece { display: block; max-width: 18em; font-size: var(--t-xs); color: var(--encre-2); overflow-wrap: anywhere; }
.mention-sans-piece { color: var(--gris); font-style: italic; }
.releve-compte-nom { display: block; font-weight: 600; }
.releve-compte-long { display: block; font-size: var(--t-xs); color: var(--gris); }
.mention-cheval { display: block; font-size: var(--t-xs); color: var(--gris); }
.releve-statut { display: inline-grid; gap: 3px; justify-items: start; }
.releve-statut-detail { font-size: var(--t-xs); color: var(--encre-2); max-width: 12em; font-variant-numeric: tabular-nums; }
.bouton-lignes-releve { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-height: 32px; text-transform: none; letter-spacing: 0; font-size: var(--t-s); }
.table-releves td, .table-releves th[scope="row"] { padding-left: 7px; padding-right: 7px; }
.bouton-lignes-releve .chevron { width: 7px; height: 7px; margin: 0 4px 3px 0; }
.bouton-lignes-releve[aria-expanded="true"] .chevron { transform: rotate(45deg); margin-bottom: 5px; }
.releve-piece { max-width: 16em; overflow-wrap: anywhere; font-size: var(--t-xs); }
.releve-manquant > td { color: var(--gris); }
.releve-note > td { padding-top: 4px !important; font-size: var(--t-xs); color: var(--attention); border-top: none !important; }
.releve-ouvert > * { background: var(--or-voile); }
.releve-detail-ligne > td { padding: 0 !important; border-top: none !important; }
.detail-releve { display: grid; gap: 16px; padding: 18px 18px 20px; background: var(--blanc); border-left: 3px solid var(--or); border-bottom: 1px solid var(--filet); }
.detail-releve-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 36px; }
.detail-releve-bloc { display: grid; gap: 8px; align-content: start; min-width: 0; }
.detail-titre { font-size: var(--t-m); font-weight: 600; }
.calcul-releve { margin: 4px 0 0; display: grid; gap: 2px; max-width: 520px; }
.calcul-releve > div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.calcul-releve dt { color: var(--encre-2); }
.calcul-releve dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calcul-releve .calcul-total { border-top: 1px solid var(--noir); font-weight: 600; }
.calcul-releve .calcul-total dt { color: var(--encre); }
.calcul-releve .calcul-ecart { border-top: 1px solid var(--filet); font-weight: 600; }
.piece { margin: 0; display: grid; gap: 4px; font-size: var(--t-s); }
.piece > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; }
.piece dt { color: var(--encre-2); }
.piece dd { margin: 0; min-width: 0; }
.empreinte { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--t-xs); overflow-wrap: anywhere; word-break: break-all; }
.table-lignes-releve { min-width: 860px; }
.table-lignes-releve .tx-description { max-width: 32ch; }
.detail-releve .encart { margin: 0; }

@media (max-width: 900px) {
  .detail-releve-haut { grid-template-columns: minmax(0, 1fr); }
  .resume-releves { margin-left: 0; width: 100%; }
}
.tx-mouvement.ligne-nouvelle > * { background: var(--or-voile); }
.table-releves > thead th, .table-detail thead th { white-space: normal; }
#releves-compte { width: min(28rem, 100%); }
#vue-releves .champ { min-width: 0; max-width: 100%; }

/* Relevés : le tableau tient dans la largeur disponible ; sous 1000 px de contenu (tablette, téléphone, ou
   fenêtre étroite à côté du menu), chaque relevé devient une fiche pleine largeur. Le détail (lignes, pièce)
   s'ouvre sous la fiche, dans le champ de vision, au lieu d'une ligne de tableau hors écran. */
#vue-releves { container-type: inline-size; container-name: releves; }
.table-releves .releve-compte { min-width: 8.5em; }
.table-releves .releve-periode { min-width: 9.5em; }
.table-releves .mention-piece { max-width: 14em; }
@container releves (max-width: 1000px) {
  .table-releves, .table-releves > tbody, .table-releves > tbody > tr, .table-releves > tbody > tr > th, .table-releves > tbody > tr > td { display: block; }
  .table-releves > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-releves > tbody > tr > * { border: none !important; padding: 0 !important; text-align: left; }
  .table-releves > tbody > tr.releve-ligne {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: 8px 16px;
    padding: 14px 12px 14px 0; border-top: 1px solid var(--filet);
  }
  .table-releves > tbody > tr.releve-ligne > th, .table-releves .releve-periode,
  .table-releves .releve-cellule-statut, .table-releves .releve-cellule-lignes { grid-column: 1 / -1; }
  .table-releves > tbody > tr.releve-ouvert { padding-left: 10px; background: var(--or-voile); }
  .table-releves > tbody > tr.releve-ouvert > * { background: none; }
  .table-releves td[data-libelle]::before {
    content: attr(data-libelle); display: block;
    font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris);
  }
  .table-releves .releve-compte, .table-releves .releve-periode { min-width: 0; }
  .table-releves .mention-piece { max-width: none; }
  .table-releves > tbody > tr.releve-manquant { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--filet); }
  .table-releves > tbody > tr.releve-note { padding: 0 0 12px; }
  .table-releves > tbody > tr.releve-detail-ligne > td { padding: 0 0 12px !important; }
  .detail-releve { padding: 14px 12px 16px; }
  .detail-releve-haut { grid-template-columns: minmax(0, 1fr); }
}