/* ============================================================
   Banque de Jacky — feuille de style unique.

   Parti pris : le relevé de compte. On ne cherche pas à faire un tableau de
   bord ; on refait, en plus lisible, la page que la banque imprime — une ligne
   par opération, des colonnes qui ne bougent pas d'un mois sur l'autre, et le
   solde toujours au même endroit.

   Ces écrans sont lus par une personne âgée, souvent sur tablette. Trois règles
   en découlent, et elles expliquent presque tous les choix ci-dessous :
     1. le texte courant est à 18 px, pas 16 ;
     2. une information par ligne, jamais de ligne à rallonge en « · » ;
     3. ce qui se clique est grand (44 px de côté au minimum) — une case à
        cocher de 13 px se rate une fois sur trois avec un doigt.

   Aucune dépendance : pas de CDN, pas de police téléchargée. Les polices
   système suffisent et ne font pas clignoter la page au chargement.
   ============================================================ */

:root {
  /* Papier légèrement chaud, encre bleu-noir : la matière des documents
     bancaires français, pas le gris d'une application. */
  --papier: #f3f1ec;
  --feuille: #fffdf9;
  --encre: #17212b;
  --gris: #566372;
  --gris-clair: #8b96a3;
  --lisere: #e0dbd2;

  /* Bleu pétrole : la couleur de l'établissement, celle du bandeau et des
     boutons. Volontairement loin du rouge du débit et du vert du crédit — ces
     deux-là doivent rester les seules couleurs qui veulent dire de l'argent. */
  --banque-fond: #0f3644;
  --banque: #17546b;
  --banque-lavis: #e9eff2;
  --banque-clair: #86b3c4;

  /* Débit et crédit. Le rouge est assombri (#a4261a et non un rouge vif) pour
     rester lisible en gras sur fond papier, y compris pour un œil qui distingue
     mal les rouges. Le vert l'est aussi, pour la même raison. */
  --debit: #a4261a;
  --debit-fond: #fbece9;
  --credit: #14653f;
  --credit-fond: #e8f3ec;

  --alerte: #9e2b1f;
  --alerte-fond: #fbeae7;
  --succes: #1a5637;
  --succes-fond: #e9f2ec;
  --info-fond: #eaeef2;

  --rayon: 12px;
  --ombre-basse: 0 1px 2px rgba(23, 33, 43, .06);
  --ombre-carte: 0 1px 2px rgba(23, 33, 43, .05), 0 10px 24px -12px rgba(23, 33, 43, .22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* 18 px et non 16 : c'est le seul réglage qui profite à toutes les pages à la
     fois, et il ne coûte que de la place. */
  font-size: 18px;
  line-height: 1.55;
}

/* Georgia pour tout ce qui nomme. C'est la lettre de la correspondance
   bancaire : elle porte les titres sans avoir besoin de les grossir. */
h1, h2, h3, .marque, .compte-nom, .somme-valeur {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0;
}

/* Les chiffres d'argent sont alignés en colonne : sans chasse fixe, « 1 » et
   « 8 » n'ont pas la même largeur et les virgules ne tombent plus l'une sous
   l'autre. `tabular-nums` suffit, inutile de changer de police. */
.montant, .somme-valeur, .col-montant, .col-solde {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- bandeau ---------- */

.bandeau {
  background: var(--banque-fond);
  background-image: linear-gradient(100deg, #0b2a35 0%, rgba(11, 42, 53, .72) 100%);
  color: #fff;
  border-bottom: 3px solid var(--banque);
}
.bandeau-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.marque {
  font-size: 21px;
  color: #fff;
  text-decoration: none;
}
.marque span { color: var(--banque-clair); }
.bandeau-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bandeau-actions form { margin: 0; }
.qui {
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  text-decoration: none;
}
a.qui:hover { color: #fff; text-decoration: underline; }
.qui-role {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: 13px;
}

/* ---------- contenu ---------- */

main { max-width: 1080px; margin: 0 auto; padding: 28px 22px 72px; }
main.etroit { max-width: 780px; }

.fil { font-size: 16px; color: var(--gris); margin: 0 0 10px; }
.fil a { color: var(--gris); }
.fil a:hover { color: var(--banque); }

.titre-page { font-size: 32px; line-height: 1.15; margin-bottom: 6px; }
.sous-titre { color: var(--gris); margin: 0 0 24px; }
.date-du-jour {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 22px;
  margin: 0 0 24px;
}

.pied {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px 32px;
  color: var(--gris-clair);
  font-size: 15px;
}
.pied p { margin: 0; }

/* ---------- messages ---------- */

.message {
  border-radius: 8px;
  padding: 13px 16px;
  margin: 0 0 18px;
  font-size: 17px;
}
.message.erreur { background: var(--alerte-fond); color: var(--alerte); }
.message.succes { background: var(--succes-fond); color: var(--succes); }
.message.info { background: var(--info-fond); color: var(--gris); }

/* Les messages écrits par le JavaScript (échec d'un pointage, par exemple)
   arrivent ici. La zone est vide et sans marge tant qu'il n'y a rien : une
   réserve d'espace au milieu de la page se remarque. */
.messages-vifs:empty { display: none; }

.vide {
  background: var(--feuille);
  border: 1px dashed var(--lisere);
  border-radius: var(--rayon);
  padding: 34px 24px;
  text-align: center;
  color: var(--gris);
}

/* ---------- boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--banque);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 20px;
  min-height: 46px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter .14s ease;
}
.bouton:hover { filter: brightness(1.15); }
.bouton[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.bouton.discret {
  background: transparent;
  color: var(--gris);
  border: 1px solid var(--lisere);
  font-weight: 500;
}
.bouton.discret:hover { background: var(--papier); filter: none; color: var(--encre); }
.bandeau .bouton.discret {
  color: rgba(255, 255, 255, .85);
  border-color: rgba(255, 255, 255, .3);
}
.bandeau .bouton.discret:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.bouton.petit { padding: 7px 13px; min-height: 40px; font-size: 16px; }
/* Un bouton destructeur ne doit pas attirer l'œil au repos, mais ne doit pas
   non plus se laisser confondre avec son voisin au moment du clic. */
.bouton.danger { color: var(--alerte); border-color: #e6c6c1; }
.bouton.danger:hover { background: var(--alerte-fond); border-color: var(--alerte); color: var(--alerte); }
.bouton.pleine-largeur { width: 100%; justify-content: center; }

.barre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 22px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--banque-clair);
  outline-offset: 2px;
}

/* ---------- formulaires ---------- */

label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--lisere);
  border-radius: 8px;
  font: inherit;
  color: var(--encre);
  background: #faf8f4;
  margin-bottom: 16px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--banque);
  background: var(--feuille);
}
.champ-libre { margin-bottom: 16px; }
.champ-libre input, .champ-libre select { margin-bottom: 0; }
.aide {
  display: block;
  margin: -10px 0 16px;
  color: var(--gris);
  font-size: 15px;
  font-weight: 400;
}
.note { color: var(--gris); font-size: 16px; margin: 0; }
.note.apres { margin-top: 14px; }

/* Une rangée de champs qui tiennent côte à côte sur large écran et se
   remettent l'un sous l'autre dès que la place manque. */
.rangee {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.rangee > div { flex: 1 1 190px; min-width: 0; }
.rangee > div.large { flex: 2 1 260px; }

/* Case à cocher isolée, avec son libellé à droite. Toute la ligne est
   cliquable : viser une case de 24 px au doigt est un exercice. */
.case-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  margin-bottom: 16px;
  cursor: pointer;
}
.case-ligne input[type="checkbox"] { margin: 0; }
input[type="checkbox"], input[type="radio"] {
  width: 24px;
  height: 24px;
  accent-color: var(--banque);
  cursor: pointer;
}

/* Choix débit / crédit. Deux grands boutons plutôt qu'une liste déroulante :
   c'est le champ où une erreur coûte le plus cher, il doit se voir de loin. */
.sens {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.sens label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 12px 10px;
  border: 2px solid var(--lisere);
  border-radius: 10px;
  background: #faf8f4;
  cursor: pointer;
  font-size: 17px;
}
.sens input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sens label.est-debit:has(input:checked) {
  border-color: var(--debit);
  background: var(--debit-fond);
  color: var(--debit);
}
.sens label.est-credit:has(input:checked) {
  border-color: var(--credit);
  background: var(--credit-fond);
  color: var(--credit);
}
/* Repli pour les navigateurs sans `:has()` : le script pose la classe
   lui-même. Sans cela, le choix ne se verrait pas du tout sur une tablette
   un peu ancienne — exactement le matériel visé. */
.sens label.choisi.est-debit { border-color: var(--debit); background: var(--debit-fond); color: var(--debit); }
.sens label.choisi.est-credit { border-color: var(--credit); background: var(--credit-fond); color: var(--credit); }
.sens input:focus-visible + span { outline: 3px solid var(--banque-clair); outline-offset: 3px; }

/* ---------- accueil : les comptes ---------- */

.comptes { display: grid; gap: 18px; }
@media (min-width: 760px) { .comptes { grid-template-columns: 1fr 1fr; } }

.compte-carte {
  background: var(--feuille);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compte-tete {
  display: flex;
  align-items: center;
  gap: 14px;
}
.compte-logo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--banque-lavis);
  padding: 6px;
  object-fit: contain;
}
.compte-nom { font-size: 23px; line-height: 1.2; }
.compte-banque { color: var(--gris); font-size: 16px; }

/* Le lien vers la banque est un bouton et non un mot souligné dans une phrase :
   c'est le geste quotidien — aller relever ses opérations — et il doit être
   trouvé sans être cherché. */
.lien-banque {
  align-self: flex-start;
  text-decoration: none;
}
.lien-banque .fleche { font-size: 14px; }

/* Une somme = une ligne, avec son pictogramme, son intitulé complet et sa
   valeur en gros. Jamais « Pointé 120 € · Prévu 80 € » sur une seule ligne. */
.sommes { display: grid; gap: 10px; margin: 0; }
.somme {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--banque-lavis);
}
.somme.discrete { background: transparent; padding: 2px 12px; }
.somme-picto { flex: none; font-size: 20px; line-height: 1.2; }
.somme-nom { flex: 1 1 auto; font-size: 17px; color: var(--gris); }
.somme-valeur { font-size: 25px; white-space: nowrap; }
.somme-note { flex-basis: 100%; margin: 0; color: var(--gris); font-size: 15px; }
.compte-carte .bouton { align-self: flex-start; }

/* ---------- bandeau des soldes d'un compte ---------- */

/* Le solde pointé reste visible pendant qu'on pointe : c'est le nombre à
   comparer à celui de la banque, et le pointage se fait en le regardant.
   Collant en haut de l'écran plutôt qu'en tête de page, sinon il disparaît
   dès le troisième mois de tableau. */
.bandeau-soldes {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--feuille);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-basse);
  padding: 14px 18px;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
.bandeau-soldes .somme { background: transparent; padding: 0; flex: 1 1 240px; }
.bandeau-soldes .somme-nom { flex: 1 1 100%; }

/* ---------- filtres ---------- */

.filtres {
  background: var(--feuille);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
  padding: 16px 18px 4px;
  margin: 0 0 22px;
}
.filtres h2 { font-size: 19px; margin-bottom: 12px; }
.filtres-resultat {
  margin: 0 0 14px;
  color: var(--gris);
  font-size: 16px;
}

/* ---------- tableaux d'opérations ---------- */

/* ---- barre des mois --------------------------------------------------- */
/* Collée en haut pendant le défilement : c'est là qu'on la cherche quand on
   est perdu au milieu de six mois d'opérations. */
.barre-mois {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 20px;
  background: var(--feuille);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-basse);
}
.barre-mois-titre { color: var(--gris); font-size: 16px; }
.barre-mois-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Pastilles larges et espacées : elles se cliquent au doigt sur une tablette,
   et le site est lu sur tablette. */
.mois-puce {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--lisere);
  border-radius: 999px;
  background: #fff;
  color: var(--banque);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.mois-puce:hover, .mois-puce:focus-visible {
  border-color: var(--banque);
  background: #fff;
}
.mois-puce.courant {
  background: var(--banque-fond);
  border-color: var(--banque-fond);
  color: #fff;
}
/* Le mois où l'on se trouve : une bordure épaisse, pas seulement une nuance —
   une différence de couleur seule ne se voit pas de tous les yeux. */
.mois-puce[aria-current="true"] {
  outline: 3px solid var(--banque);
  outline-offset: 2px;
}
.mois-puce-mention { font-weight: 500; font-size: 14px; opacity: .85; }
.mois-puce.masquee { display: none; }

.mois {
  /* La barre collée ne doit pas recouvrir le titre du mois qu'on vient de
     demander : le navigateur s'arrête cette hauteur plus haut. */
  scroll-margin-top: 78px;
  background: var(--feuille);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-basse);
  margin: 0 0 26px;
  overflow: hidden;
}
.mois-titre {
  margin: 0;
  padding: 13px 18px;
  background: #e9e6e0;
  border-left: 6px solid var(--banque);
  font-size: 20px;
}
.mois.courant .mois-titre {
  background: var(--banque-fond);
  border-left-color: var(--banque-clair);
  color: #fff;
}
.mois-titre .mois-mention {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 500;
  opacity: .8;
  margin-left: 10px;
}
/* Les deux soldes du mois, entre son titre et son tableau. */
.mois-soldes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 24px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--lisere);
  background: #fbf9f5;
}
.mois-soldes .somme { margin: 0; }
.mois-soldes .somme-valeur { font-size: 21px; }

/* Un tableau large ne fait jamais déborder la page : il défile dans sa boîte. */
.mois-cadre { overflow-x: auto; }

.table-operations {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
  min-width: 720px;
}
.table-operations th {
  padding: 10px 12px;
  background: #f1eee9;
  color: var(--gris);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--lisere);
  white-space: nowrap;
}
.table-operations td {
  padding: 11px 12px;
  border-bottom: 1px solid #ece8e1;
  vertical-align: middle;
}
.table-operations tbody tr:hover { background: var(--banque-lavis); }
.table-operations tr.masquee { display: none; }
/* ---- en-têtes triables -------------------------------------------------- */
/* Le bouton occupe toute la cellule : on clique sur le mot « Débit », pas sur
   une petite flèche qu'il faut viser. */
.table-operations th[data-tri] { padding: 0; }
.table-operations th[data-tri] .tri {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
.table-operations th.col-montant[data-tri] .tri,
.table-operations th.col-solde[data-tri] .tri { justify-content: flex-end; }
.table-operations th[data-tri] .tri:hover { text-decoration: underline; }
/* Les flèches restent visibles sur TOUTES les colonnes : elles annoncent que
   la colonne se trie. Une flèche qui n'apparaît qu'après le premier clic ne
   sert plus à rien — il faut avoir déjà deviné pour la voir. La colonne qui
   trie réellement est en couleur, et sa flèche pleine dit le sens. */
.table-operations th[data-tri] .tri-fleche::before {
  content: "⇅";
  opacity: .45;
  font-size: 15px;
}
.table-operations th[aria-sort="ascending"] .tri-fleche::before {
  content: "▲";
  opacity: 1;
}
.table-operations th[aria-sort="descending"] .tri-fleche::before {
  content: "▼";
  opacity: 1;
}
.table-operations th[aria-sort] .tri { color: var(--banque); }

.col-date { white-space: nowrap; }
.col-montant, .col-solde { text-align: right; white-space: nowrap; }
.col-pointe, .col-choix, .col-actions { text-align: center; width: 1%; white-space: nowrap; }

.operation-description { font-weight: 600; }
.operation-reference {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--gris);
}
.operation-type { color: var(--gris); }
.marque-echeance {
  display: inline-block;
  margin-left: 6px;
  font-size: 15px;
}

.montant.debit { color: var(--debit); font-weight: 600; }
.montant.credit { color: var(--credit); font-weight: 600; }
.montant.solde { font-weight: 600; }
.montant.solde.negatif { color: var(--debit); }

/* Une ligne pointée est un fait acquis : on la calme, sans l'effacer. */
.table-operations tr.pointee td { background: #f7f9f7; }
.table-operations tr.pointee .operation-description { font-weight: 500; }

.ligne-totaux td {
  background: #f1eee9;
  font-weight: 700;
  border-bottom: 0;
}

/* La case de pointage est le geste principal du site : elle est grande, et sa
   cible cliquable déborde largement le carré dessiné. */
.case-pointage { width: 28px; height: 28px; accent-color: var(--credit); }
.case-choix { width: 26px; height: 26px; }

.barre-masse {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin: 0 0 18px;
  border-radius: var(--rayon);
  background: var(--banque-lavis);
  border: 1px solid var(--banque-clair);
}
.barre-masse[hidden] { display: none; }
.barre-masse-compte { font-weight: 600; }

/* ---------- échéances ---------- */

.encadre-explication {
  border-left: 6px solid var(--banque);
  background: var(--banque-lavis);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 0 0 22px;
}
.encadre-explication h2 { font-size: 19px; margin-bottom: 6px; }
.encadre-explication ul { margin: 8px 0 0; padding-left: 22px; }
.encadre-explication li { margin-bottom: 4px; }

.table-echeances { width: 100%; border-collapse: collapse; font-size: 17px; min-width: 760px; }
.table-echeances th {
  padding: 10px 12px;
  background: #f1eee9;
  color: var(--gris);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--lisere);
  white-space: nowrap;
}
.table-echeances td {
  padding: 12px;
  border-bottom: 1px solid #ece8e1;
  vertical-align: middle;
}
.table-echeances tr.inactive td { color: var(--gris-clair); }
.echeance-prochaine {
  display: block;
  font-size: 15px;
  color: var(--gris);
}

/* ---------- administration ---------- */

.bloc-admin {
  background: var(--feuille);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-basse);
  padding: 22px 24px;
  margin: 0 0 24px;
}
.bloc-admin h2 { font-size: 22px; margin-bottom: 12px; }
.bloc-admin > p:first-of-type { margin-top: 0; }
.ligne-objet {
  border-top: 1px solid var(--lisere);
  padding: 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}
.ligne-objet:first-of-type { border-top: 0; }
.ligne-objet-corps { flex: 1 1 320px; }
.ligne-objet-nom { font-weight: 700; font-size: 19px; }
.ligne-objet-detail { color: var(--gris); font-size: 16px; }
.actions-objet { display: flex; flex-wrap: wrap; gap: 10px; }

.bloc-admin.zone-rouge {
  border-color: #e6c6c1;
  background: #fffaf9;
}
.bloc-admin.zone-rouge h2 { color: var(--alerte); }

/* ---------- boîtes de dialogue ---------- */

dialog {
  border: 0;
  border-radius: 14px;
  padding: 0;
  width: min(620px, calc(100vw - 32px));
  background: var(--feuille);
  color: var(--encre);
  box-shadow: 0 26px 70px -26px rgba(0, 0, 0, .6);
}
dialog::backdrop { background: rgba(15, 25, 33, .55); }
.dialogue-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--lisere);
}
.dialogue-tete h2 { font-size: 22px; }
.dialogue-fermer {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--gris);
}
.dialogue-fermer:hover { background: var(--papier); color: var(--encre); }
.dialogue-corps { padding: 20px 22px; max-height: 68vh; overflow-y: auto; }
.dialogue-pied {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 22px;
  border-top: 1px solid var(--lisere);
  background: #faf8f4;
  border-radius: 0 0 14px 14px;
}
.dialogue-pied .a-gauche { margin-right: auto; }

/* ---------- connexion ---------- */

/* L'écran d'entrée est le seul à ne pas montrer le bandeau : il n'y a rien à
   naviguer tant qu'on n'est pas entré. */
.ecran-connexion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--banque-fond);
  background-image: linear-gradient(160deg, #0b2a35 0%, #17546b 100%);
}
.carte-connexion {
  background: var(--feuille);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 430px;
}
.carte-connexion h1 { font-size: 28px; margin-bottom: 6px; }
.carte-connexion .sous-titre { margin-bottom: 24px; }

/* ---------- petits écrans ---------- */

@media (max-width: 720px) {
  body { font-size: 17px; }
  .titre-page { font-size: 27px; }
  main { padding: 22px 16px 60px; }
  .bandeau-inner { padding: 12px 16px; }
  .somme-valeur { font-size: 22px; }
  .bandeau-soldes { position: static; }
}

/* Impression : le relevé se range dans un classeur comme celui de la banque.
   On enlève ce qui ne s'imprime pas — bandeau, boutons, filtres — et on rend
   les tableaux entiers, sans barre de défilement. */
@media print {
  .bandeau, .barre-actions, .filtres, .barre-masse, .col-choix, .col-actions,
  .pied, dialog { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .mois, .bloc-admin, .compte-carte { box-shadow: none; break-inside: avoid; }
  .mois-cadre { overflow: visible; }
  .table-operations { min-width: 0; }
  .bandeau-soldes { position: static; }
}

/* ---------- utilitaires ---------- */

.espace-haut { margin-top: 18px; }
.espace-bas { margin-bottom: 18px; }

/* Un groupe de champs (le choix débit/crédit) sans le cadre que le navigateur
   dessine par défaut autour d'un `fieldset` : ce cadre ne ressemble à rien
   d'autre sur la page et il vieillit mal. La légende, elle, reste — c'est ce
   qu'un lecteur d'écran annonce avant les deux boutons. */
.bloc-fieldset { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.legende-champ { font-weight: 600; font-size: 16px; margin-bottom: 6px; padding: 0; }

/* Lisible par un lecteur d'écran, invisible à l'œil. Sert aux légendes de
   tableau : `hidden` les retirerait AUSSI de la lecture vocale, ce qui est
   exactement le contraire du but. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- repli des boîtes de dialogue ----------
   Les Safari d'avant 2022 ne connaissent pas <dialog> : sans ce repli, le
   bouton « Modifier » ne ferait rien du tout — la pire des pannes, celle qui
   ne dit rien. Le script pose la classe et ouvre l'élément à la main. */
dialog.repli {
  display: block;
  position: fixed;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-height: 92vh;
  overflow-y: auto;
}
body.dialogue-ouvert { overflow: hidden; }
body.dialogue-ouvert::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 33, .55);
  z-index: 99;
}

/* La confirmation construite par le script : même dessin que les autres
   boîtes, en plus étroit — elle ne porte qu'une phrase. */
.dialogue-confirmation { width: min(480px, calc(100vw - 32px)); }
.dialogue-confirmation .dialogue-corps p { margin: 0; font-size: 18px; }