/* ==========================================================================
   Comptio — feuille de style
   ==========================================================================
   Parti pris : une application de BUREAU, pas un site web. MaxiCompte tient
   tout à l'écran sans défilement, avec des lignes serrées et des commandes
   toujours sous la main. On reprend ce fonctionnement :

     · hauteur pleine, seule la grille défile
     · barre d'outils à grandes icônes légendées
     · panneau de comptes fixe à gauche
     · lignes de 2 étages, ~40 px, avec liseré de couleur
     · barre d'actions en bas de grille, comme dans le logiciel d'origine
   ========================================================================== */

:root {
  --fond:          #e8ecf1;
  --surface:       #ffffff;
  --surface-2:     #f4f7fa;
  --surface-3:     #e9eef4;
  --surface-4:     #dde4ed;
  --bord:          #d2dae4;
  --bord-fort:     #b3bfcd;
  --texte:         #16202e;
  --texte-doux:    #566274;
  --texte-faible:  #8794a6;
  --accent:        #1d63d2;
  --accent-clair:  #dce9fd;
  --accent-fonce:  #14459a;
  --debit:         #c0392b;
  --credit:        #1a7a44;
  --alerte:        #b45309;
  --violet:        #6d3fc4;
  --selection:     #dbe7fb;
  --ombre:         0 1px 2px rgba(16, 30, 54, .07);
  --ombre-panneau: 0 1px 3px rgba(16, 30, 54, .09);
  --rayon:         6px;
  --mono:          ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --h-topbar:      86px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:         #0e131a;
    --surface:      #171d26;
    --surface-2:    #1d242f;
    --surface-3:    #242c38;
    --surface-4:    #2c3542;
    --bord:         #2c3542;
    --bord-fort:    #414c5c;
    --texte:        #e8edf4;
    --texte-doux:   #9aa7b9;
    --texte-faible: #6b7889;
    --accent:       #5b8dee;
    --accent-clair: #1b2c4c;
    --accent-fonce: #8fb4f5;
    --debit:        #f0837a;
    --credit:       #5fcf92;
    --alerte:       #e0a955;
    --violet:       #a78bfa;
    --selection:    #1e2c45;
    --ombre:        0 1px 2px rgba(0, 0, 0, .4);
    --ombre-panneau:0 1px 3px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --fond:         #0e131a;
  --surface:      #171d26;
  --surface-2:    #1d242f;
  --surface-3:    #242c38;
  --surface-4:    #2c3542;
  --bord:         #2c3542;
  --bord-fort:    #414c5c;
  --texte:        #e8edf4;
  --texte-doux:   #9aa7b9;
  --texte-faible: #6b7889;
  --accent:       #5b8dee;
  --accent-clair: #1b2c4c;
  --accent-fonce: #8fb4f5;
  --debit:        #f0837a;
  --credit:       #5fcf92;
  --alerte:       #e0a955;
  --violet:       #a78bfa;
  --selection:    #1e2c45;
  --ombre:        0 1px 2px rgba(0, 0, 0, .4);
  --ombre-panneau:0 1px 3px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html { height: 100%; }

/* `min-height` et non `height` : le corps doit pouvoir grandir avec son
   contenu. À hauteur fixe, il ne mesure qu'un écran, et un enfant `sticky` —
   la barre supérieure — cesse de coller dès qu'on a défilé au-delà : un
   élément collant reste prisonnier de son bloc conteneur. */
body {
  min-height: 100%;
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================================
   Barre supérieure : ligne de menu + barre d'outils à grandes icônes
   ========================================================================== */

.chrome {
  background: var(--surface);
  border-bottom: 1px solid var(--bord-fort);
  flex: none;
  position: sticky; top: 0; z-index: 60;
}

.menu-ligne {
  display: flex; align-items: center; gap: 4px;
  padding: 0 10px; height: 30px;
  border-bottom: 1px solid var(--bord);
  background: var(--surface-2);
}

.menu-marque {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 13px; color: var(--texte);
  padding-right: 12px; margin-right: 6px;
  border-right: 1px solid var(--bord);
  height: 100%;
}
.menu-marque:hover { text-decoration: none; }
.menu-pastille {
  width: 19px; height: 19px; border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  color: #fff; display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
}

/* Puce d'espace ouvert : repère permanent, cliquable pour changer d'espace. */
.espace-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 20px;
  background: var(--surface-3); border: 1px solid var(--bord);
  color: var(--texte); font-size: 12px; font-weight: 650;
  max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.espace-chip:hover { background: var(--surface-4); text-decoration: none; }
.espace-point { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.espace-fleche { color: var(--texte-faible); font-size: 10px; }

.menu-fin { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-user {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--texte-doux); padding: 2px 6px; border-radius: 5px;
}
.menu-user:hover { background: var(--surface-3); color: var(--texte); text-decoration: none; }
.user-pastille {
  width: 19px; height: 19px; border-radius: 50%;
  color: #fff; display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
}
.menu-lien { font-size: 12px; color: var(--texte-doux); padding: 2px 6px; border-radius: 4px; }
.menu-lien:hover { background: var(--surface-3); color: var(--texte); text-decoration: none; }

/* Barre d'outils : icône au-dessus, libellé en dessous. */
.outils { display: flex; align-items: stretch; gap: 0; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
.outils::-webkit-scrollbar { display: none; }

.outil {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 74px; padding: 5px 10px 4px;
  color: var(--texte-doux); font-size: 10.5px; font-weight: 500;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
}
.outil:hover { background: var(--surface-2); color: var(--texte); text-decoration: none; }
.outil.actif { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-clair); }
.outil svg { width: 21px; height: 21px; flex: none; }

/* ==========================================================================
   Corps : panneau fixe + zone de travail
   ========================================================================== */

.appbody {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 296px minmax(0, 1fr);
  gap: 10px; padding: 10px;
  align-items: start;
}
.appbody.plein { grid-template-columns: minmax(0, 1fr); }

/* Les messages flash sont rendus comme premiers enfants du conteneur. Sans
   cette règle ils occupent la première cellule de la grille — la colonne de
   296 px — et décalent le panneau puis la grille d'une case : la mise en page
   entière se disloque dès qu'un message s'affiche. */
.appbody > .flash { grid-column: 1 / -1; margin-bottom: 0; }

/* La colonne de gauche défile indépendamment de la grille. */
.panneau {
  display: flex; flex-direction: column; gap: 9px;
  max-height: calc(100vh - var(--h-topbar) - 20px);
  overflow-y: auto;
  position: sticky; top: calc(var(--h-topbar) + 10px);
}

.zone { min-width: 0; }

/* Page centrée pour les écrans de gestion (comptes, ordres, import…) */
.page { max-width: 1080px; margin: 0 auto; padding: 14px 12px 40px; width: 100%; }
.page-titre { margin: 0 0 3px; font-size: 17px; font-weight: 650; }
.page-sous-titre { margin: 0 0 14px; color: var(--texte-doux); font-size: 12.5px; }

/* ==========================================================================
   Panneaux
   ========================================================================== */

.bloc {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-panneau);
  overflow: hidden;
}
.bloc + .bloc { margin-top: 9px; }
.panneau .bloc + .bloc { margin-top: 0; }

.bloc-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 11px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--bord);
}
.bloc-titre {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--texte-doux);
}
.bloc-corps { padding: 10px 11px; }

/* ==========================================================================
   Carte de compte (le bandeau coloré de MaxiCompte)
   ========================================================================== */

.compte-carte {
  margin: 9px; padding: 10px 11px; border-radius: var(--rayon);
  background: linear-gradient(135deg, var(--accent-fonce), var(--violet));
  color: #fff;
}
.compte-carte-tete { display: flex; align-items: center; gap: 11px; }

/* Le logo de la banque est le repère le plus rapide pour savoir dans quel
   compte on saisit : il mérite d'être lisible, pas décoratif. Les initiales de
   repli gardent la même emprise pour que la carte ne bouge pas selon qu'un
   logo est présent ou non. */
.compte-logo {
  width: 56px; height: 56px; border-radius: 11px; flex: none;
  background: rgba(255, 255, 255, .18);
  display: grid; place-items: center;
  font-weight: 800; font-size: 19px; letter-spacing: -.5px;
}
.compte-carte-nom { font-weight: 700; font-size: 15px; line-height: 1.2; }
.compte-carte-sous { font-size: 12px; opacity: .85; }

.compte-carte-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.compte-chiffre { background: rgba(0, 0, 0, .2); border-radius: 5px; padding: 5px 7px; }
.compte-chiffre-lib { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; opacity: .78; }
.compte-chiffre-val { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-top: 1px; }

/* Liste des autres comptes */
.compte-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-top: 1px solid var(--bord);
  color: var(--texte);
}
.compte-item:hover { background: var(--surface-2); text-decoration: none; }
.compte-item.actif { background: var(--selection); }
.compte-item-pastille { width: 8px; height: 8px; border-radius: 2px; flex: none; }
/* Dans la liste des autres comptes, le logo prend la place de la pastille de
   couleur : même emprise, information plus riche. */
.compte-item-logo {
  width: 22px; height: 22px; border-radius: 5px; flex: none;
  object-fit: contain; background: var(--surface); padding: 1px;
  border: 1px solid var(--bord);
}
.compte-item-nom { font-weight: 600; font-size: 12.5px; }
.compte-item-banque { font-size: 10.5px; color: var(--texte-faible); }
.compte-item-solde { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 650; }

.etiquette-cat {
  display: inline-block; padding: 0 5px; border-radius: 3px;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  background: var(--surface-3); color: var(--texte-doux);
}

/* ==========================================================================
   Blocs de soldes
   ========================================================================== */

.soldes-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.solde-lib { font-size: 11px; color: var(--texte-doux); }
.solde-val { font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: -.4px; }
.solde-val.moyen { font-size: 15px; }

/* La liste à cases cochées du panneau prévisionnel */
.previ-liste { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bord); display: grid; gap: 3px; }
.previ-ligne { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--texte-doux); }
.previ-ligne .val { margin-left: auto; font-family: var(--mono); font-size: 11.5px; }
.previ-check { width: 12px; height: 12px; flex: none; color: var(--credit); }

/* ==========================================================================
   Grille des écritures
   ========================================================================== */

/* La grille occupe toute la hauteur restante, comme dans un logiciel de
   bureau : la barre d'actions reste plaquée en bas de l'écran au lieu de
   flotter juste sous la dernière ligne, avec du vide en dessous. */
.grille-cadre { display: flex; flex-direction: column; height: calc(100vh - var(--h-topbar) - 20px); }
.grille-defile { overflow: auto; flex: 1; min-height: 120px; }

table.grille { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }

table.grille thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-3);
  border-bottom: 1px solid var(--bord-fort);
  padding: 6px 9px; text-align: left;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--texte-doux); white-space: nowrap;
}
table.grille thead th.num { text-align: right; }

table.grille tbody td {
  padding: 5px 9px;
  border-bottom: 1px solid var(--bord);
  vertical-align: middle;
}

/* Liseré de couleur à gauche de chaque ligne, comme dans MaxiCompte. */
table.grille tbody td:first-child {
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}
table.grille tbody tr:hover td { background: var(--surface-2); }
table.grille tbody tr.non-pointee td:first-child { border-left-color: var(--alerte); }
table.grille tbody tr.non-pointee td { background: color-mix(in srgb, var(--alerte) 5%, transparent); }
table.grille tbody tr.non-pointee:hover td { background: color-mix(in srgb, var(--alerte) 11%, transparent); }
table.grille tbody tr.budget td { opacity: .68; }
table.grille tbody tr.budget td:first-child { border-left-color: var(--texte-faible); }
table.grille tbody tr.credit td:first-child { border-left-color: var(--credit); }

/* Deux étages par cellule : valeur principale + précision. */
.c1 { font-weight: 600; line-height: 1.25; }
.c2 { font-size: 10.5px; color: var(--texte-faible); line-height: 1.25; margin-top: 1px; }

.col-date    { width: 106px; white-space: nowrap; }
.col-type    { width: 152px; }
.col-montant { width: 104px; text-align: right; white-space: nowrap; font-family: var(--mono); }
.col-solde   { width: 116px; text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; }
.col-actions { width: 72px; white-space: nowrap; text-align: right; }
.col-actions form { display: inline; }

.m-debit  { color: var(--debit); }
.m-credit { color: var(--credit); }
.m-nul    { color: var(--texte-faible); }

/* Solde glissant avec sa flèche de tendance */
.solde-glissant { display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end; }
.solde-fleche { width: 10px; height: 10px; flex: none; }

/* Puce de pointage */
.puce {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--bord-fort); background: var(--surface);
  cursor: pointer; color: transparent; padding: 0; flex: none;
}
.puce svg { width: 10px; height: 10px; }
.puce.ok { background: var(--credit); border-color: var(--credit); color: #fff; }
.puce:hover { border-color: var(--accent); }

.date-ligne { display: flex; align-items: center; gap: 6px; }
.date-pointage { padding-left: 22px; }

/* Pastilles d'état du justificatif */
.pastille {
  display: inline-block; padding: 0 5px; border-radius: 3px;
  font-size: 9.5px; font-weight: 700; white-space: nowrap; vertical-align: 1px;
}
.j-aucun      { background: var(--surface-3); color: var(--texte-faible); }
.j-fourni     { background: color-mix(in srgb, var(--credit) 17%, transparent); color: var(--credit); }
.j-attente    { background: color-mix(in srgb, var(--alerte) 20%, transparent); color: var(--alerte); }
.j-manquant   { background: color-mix(in srgb, var(--debit) 16%, transparent);  color: var(--debit); }
.j-perdu      { background: color-mix(in srgb, var(--debit) 16%, transparent);  color: var(--debit); }
.j-facultatif { background: var(--surface-3); color: var(--texte-doux); }

/* ==========================================================================
   Ligne de saisie rapide, en tête de grille
   --------------------------------------------------------------------------
   Le but : saisir une écriture sans changer de page ni toucher la souris.
   On tabule d'un champ à l'autre, Entrée enregistre, et le curseur revient
   au libellé pour enchaîner la suivante.
   ========================================================================== */

tr.saisie td {
  background: var(--accent-clair) !important;
  border-bottom: 2px solid var(--accent);
  padding: 4px 6px;
}
tr.saisie td:first-child { border-left: 3px solid var(--accent); }

/* Ligne en cours de MODIFICATION : teinte ambrée, distincte du bleu de la
   ligne de saisie. Sans cette différence, rien ne dit si on est en train de
   créer une écriture ou d'en corriger une — et on écrase sans le voir. */
tr.saisie.edition td {
  background: color-mix(in srgb, var(--alerte) 15%, var(--surface)) !important;
  border-bottom-color: var(--alerte);
}
tr.saisie.edition td:first-child { border-left-color: var(--alerte); }
tr.saisie.edition input:focus,
tr.saisie.edition select:focus { outline-color: var(--alerte); border-color: var(--alerte); }

tr.saisie input, tr.saisie select {
  width: 100%; padding: 4px 6px; font-size: 12.5px;
  border: 1px solid var(--bord-fort); border-radius: 4px;
  background: var(--surface); color: var(--texte); font-family: inherit;
}
tr.saisie input:focus, tr.saisie select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
tr.saisie input.montant { text-align: right; font-family: var(--mono); }
tr.saisie .indice {
  font-size: 9.5px; color: var(--accent); margin-top: 2px;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==========================================================================
   Barre d'actions basse (onglets d'années + commandes + recherche)
   ========================================================================== */

.barre-basse {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 9px;
  background: var(--surface-2);
  border-top: 1px solid var(--bord-fort);
  flex: none;
}

.onglets { display: flex; gap: 1px; }
.onglet {
  padding: 3px 12px; font-size: 12px; font-weight: 650;
  color: var(--texte-doux); border-bottom: 2.5px solid transparent;
}
.onglet:hover { color: var(--texte); text-decoration: none; }
.onglet.actif { color: var(--accent); border-bottom-color: var(--accent); }

.recherche-boite { position: relative; display: flex; align-items: center; min-width: 190px; flex: 1; max-width: 320px; }
.recherche-boite svg { position: absolute; left: 7px; width: 14px; height: 14px; color: var(--texte-faible); pointer-events: none; }
.recherche-boite input { padding-left: 26px; }

.compteur-lignes { font-size: 11.5px; color: var(--texte-faible); white-space: nowrap; }

/* ==========================================================================
   Champs et boutons
   ========================================================================== */

input[type=text], input[type=password], input[type=email], input[type=date],
input[type=time], input[type=number], input[type=search], input[type=file],
select, textarea {
  width: 100%; padding: 5px 8px;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bord-fort); border-radius: 4px;
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-clair); outline-offset: 0; border-color: var(--accent);
}
textarea { min-height: 64px; resize: vertical; }
label { display: block; font-size: 11px; font-weight: 650; color: var(--texte-doux); margin-bottom: 3px; }

.champs { display: grid; gap: 11px; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.champs-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 11px; }
@media (max-width: 760px) { .champs-2, .champs-3 { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 4px;
  border: 1px solid var(--bord-fort); background: var(--surface);
  color: var(--texte); font: inherit; font-weight: 600; font-size: 12.5px;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn svg { width: 14px; height: 14px; }
.btn-primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primaire:hover { background: var(--accent); filter: brightness(1.1); }
.btn-danger { color: var(--debit); border-color: color-mix(in srgb, var(--debit) 42%, var(--bord)); }
.btn-danger:hover { background: color-mix(in srgb, var(--debit) 10%, transparent); }
.btn-mini { padding: 2px 7px; font-size: 11.5px; }

/* Boutons carrés à icône.
   `inline-grid` et non `grid` : en bloc, deux boutons voisins dans une même
   cellule s'empilent verticalement au lieu de se ranger côte à côte. */
.btn-carre {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 26px; height: 26px; border-radius: 4px;
  border: 1px solid var(--bord-fort); background: var(--surface);
  color: var(--texte-doux); cursor: pointer; padding: 0;
}
.btn-carre:hover { background: var(--surface-2); color: var(--texte); text-decoration: none; }
.btn-carre svg { width: 14px; height: 14px; }
.btn-carre.vert  { color: var(--credit); }
.btn-carre.rouge { color: var(--debit); }
.btn-carre.orange{ color: var(--alerte); }

.actions-ligne { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.separateur { width: 1px; height: 20px; background: var(--bord); }

/* ==========================================================================
   Messages
   ========================================================================== */

.flash {
  padding: 8px 11px; border-radius: 4px; margin: 0 0 11px;
  border: 1px solid var(--bord); background: var(--surface); font-size: 12.5px;
}
.flash-succes { border-color: var(--credit); background: color-mix(in srgb, var(--credit) 11%, var(--surface)); }
.flash-erreur { border-color: var(--debit);  background: color-mix(in srgb, var(--debit) 11%, var(--surface)); }
.flash-info   { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }

.zone > .flash, .page > .flash { margin-bottom: 10px; }

.vide { padding: 34px 18px; text-align: center; color: var(--texte-faible); font-size: 12.5px; }

/* ==========================================================================
   Journal d'activité
   ========================================================================== */

.evenement { display: flex; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--bord); }
.evenement:last-child { border-bottom: none; }

.ev-pastille {
  width: 25px; height: 25px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 700;
}
.ev-corps { flex: 1; min-width: 0; }
.ev-tete  { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.ev-acteur { font-weight: 700; }
.ev-quand  { font-size: 11px; color: var(--texte-faible); margin-left: auto; }
.ev-resume { margin-top: 1px; }

.ev-action {
  display: inline-block; padding: 0 6px; border-radius: 3px;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
}
.a-creation     { background: color-mix(in srgb, var(--credit) 17%, transparent); color: var(--credit); }
.a-modification { background: color-mix(in srgb, var(--accent) 17%, transparent); color: var(--accent); }
.a-suppression  { background: color-mix(in srgb, var(--debit) 16%, transparent);  color: var(--debit); }
.a-restauration { background: color-mix(in srgb, var(--alerte) 20%, transparent); color: var(--alerte); }
.a-pointage     { background: var(--surface-3); color: var(--texte-doux); }
.a-import       { background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--violet); }

.diff { margin-top: 5px; display: grid; gap: 2px; }
.diff-ligne { font-size: 11.5px; display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.diff-champ { color: var(--texte-doux); min-width: 88px; }
.diff-avant { color: var(--debit); text-decoration: line-through; opacity: .85; }
.diff-fleche { color: var(--texte-faible); }
.diff-apres { color: var(--credit); font-weight: 600; }

/* ==========================================================================
   Graphiques SVG
   --------------------------------------------------------------------------
   Couleurs de séries validées avec le vérificateur de palette (bandes de
   clarté, plancher de chroma, séparation pour les daltonismes, contraste),
   dans les DEUX thèmes et sur toutes les paires. Les valeurs sombres sont des
   pas choisis pour le fond sombre, pas une inversion automatique.

   En mode clair, la paire rouge↔vert ressort à ΔE 7,2 en protanopie : dans la
   bande plancher 6–8, admise uniquement si la couleur n'est pas le seul canal
   d'information. D'où les tracés différenciés (débit pointillé, crédit tireté,
   solde plein) ET les étiquettes en bout de courbe. Ne pas retirer cet
   encodage secondaire en changeant les teintes.
   ========================================================================== */

.graphe {
  --s-debit:  #e34948;
  --s-credit: #008300;
  --s-solde:  #2a78d6;
  width: 100%; height: auto; display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .graphe {
    --s-debit:  #e66767;
    --s-credit: #008300;
    --s-solde:  #3987e5;
  }
}
:root[data-theme="dark"] .graphe {
  --s-debit:  #e66767;
  --s-credit: #008300;
  --s-solde:  #3987e5;
}

.graphe .axe      { stroke: var(--bord-fort); stroke-width: 1; }
.graphe .grille-h { stroke: var(--bord); stroke-width: 1; stroke-dasharray: 2 3; opacity: .8; }
.graphe .zero     { stroke: var(--bord-fort); stroke-width: 1.2; }
.graphe .libelle  { fill: var(--texte-faible); font-size: 9.5px; }
.graphe .etiq-serie { font-size: 9.5px; font-weight: 700; }

.graphe .serie { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.graphe .serie-solde  { stroke: var(--s-solde);  stroke-width: 2.2; }
.graphe .serie-credit { stroke: var(--s-credit); stroke-width: 1.8; stroke-dasharray: 7 3; }
.graphe .serie-debit  { stroke: var(--s-debit);  stroke-width: 1.8; stroke-dasharray: 2 3; }

.legende { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 7px; font-size: 10.5px; color: var(--texte-doux); }
.legende span { display: flex; align-items: center; gap: 5px; }
.legende svg { width: 18px; height: 8px; flex: none; }

/* Barres de répartition */
.barre-poste { display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: 9px; align-items: center; padding: 4px 0; }
.barre-piste { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.barre-jauge { height: 100%; border-radius: 3px; background: var(--accent); }
.barre-nom   { font-size: 12px; margin-bottom: 3px; }
.barre-val   { font-family: var(--mono); font-size: 12px; text-align: right; }

/* Tuiles de chiffres clés */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 9px; margin-bottom: 10px; }

/* Deux colonnes inégales (tableau de bord) */
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; align-items: start; }
@media (max-width: 1080px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr); } }

/* Bandeau de filtres en tête de liste (activité, postes) */
.barre-filtres {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 8px 11px; border-bottom: 1px solid var(--bord);
  background: var(--surface-2);
}

/* ==========================================================================
   Espaces
   ========================================================================== */

.espaces-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 11px; margin-bottom: 13px;
}

.espace-carte {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre-panneau); overflow: hidden;
}
.espace-carte.ouvert { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-clair), var(--ombre-panneau); }
.espace-carte.archive { opacity: .62; }
.espace-bandeau { height: 5px; }
.espace-corps { padding: 11px 13px 13px; }
.espace-nom { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.espace-desc { font-size: 12px; color: var(--texte-doux); margin-top: 2px; }
.espace-chiffres {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px;
  font-size: 11.5px; color: var(--texte-doux);
}
.espace-chiffres strong { font-family: var(--mono); color: var(--texte); }

/* ==========================================================================
   Pièces jointes
   ========================================================================== */

.pieces { display: grid; gap: 5px; }
.piece {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border: 1px solid var(--bord); border-radius: 4px;
  background: var(--surface-2); font-size: 12.5px;
}
.piece svg { width: 15px; height: 15px; flex: none; color: var(--texte-doux); }
.piece-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece-taille { font-family: var(--mono); font-size: 11px; color: var(--texte-faible); white-space: nowrap; }

/* Compteur de pièces dans la grille */
.badge-piece {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 700; color: var(--accent);
  padding: 0 4px; border-radius: 3px; background: var(--accent-clair);
}
.badge-piece svg { width: 10px; height: 10px; }

/* ==========================================================================
   Import CSV
   ========================================================================== */

.depot {
  border: 2px dashed var(--bord-fort); border-radius: var(--rayon);
  padding: 26px 18px; text-align: center; background: var(--surface-2);
}
.depot svg { width: 34px; height: 34px; color: var(--texte-faible); }
.depot p { margin: 8px 0 12px; color: var(--texte-doux); font-size: 12.5px; }

.recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--bord); }
.recap-case { background: var(--surface); padding: 9px 11px; }
.recap-lib { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--texte-doux); }
.recap-val { font-family: var(--mono); font-size: 15px; font-weight: 700; margin-top: 2px; }

/* ==========================================================================
   Connexion
   ========================================================================== */

.login-enveloppe { max-width: 350px; margin: 9vh auto; padding: 0 16px; width: 100%; }
.login-titre { text-align: center; margin-bottom: 18px; }
.login-titre h1 { margin: 6px 0 2px; font-size: 21px; }
.login-titre p { margin: 0; color: var(--texte-doux); font-size: 12.5px; }

/* ==========================================================================
   Adaptations petits écrans
   ========================================================================== */

/* Les adaptations écran figurent en fin de fichier. */

/* ==========================================================================
   Logos et sélecteur de couleur
   ========================================================================== */

.logo-vignette { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; background: var(--surface); flex: none; }
.logo-apercu   { width: 78px; height: 78px; border-radius: 10px; object-fit: contain;
                 background: var(--surface); border: 1px solid var(--bord); padding: 5px; flex: none; }
/* Fond clair sous le logo : la plupart des logos bancaires sont dessinés pour
   du blanc et disparaîtraient sur le dégradé bleu de la carte. */
.compte-logo-img { object-fit: contain; background: rgba(255, 255, 255, .94); padding: 5px; }

/* Pastille native du navigateur + code hexadécimal éditable, synchronisés. */
.choix-couleur { display: flex; gap: 7px; align-items: center; }
.choix-couleur input[type=color] {
  width: 44px; height: 32px; padding: 2px; flex: none; cursor: pointer;
  border: 1px solid var(--bord-fort); border-radius: 4px; background: var(--surface);
}
.choix-couleur input[type=text] { font-family: var(--mono); text-transform: lowercase; }

/* ==========================================================================
   Éléments de solde cliquables
   ========================================================================== */

.lien-solde {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-family: var(--mono); font-weight: 700;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.lien-solde:hover { text-decoration: underline solid; }

button.previ-ligne {
  width: 100%; background: none; border: none; padding: 2px 0;
  font: inherit; text-align: left; cursor: pointer;
}
button.previ-ligne.cliquable:hover { color: var(--accent); }
button.previ-ligne.cliquable:hover .val { color: inherit; }

button.badge-piece { border: none; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 700; }

/* ==========================================================================
   Modales
   ========================================================================== */

dialog.modale {
  width: min(880px, 94vw); max-height: 84vh; padding: 0;
  border: 1px solid var(--bord-fort); border-radius: 9px;
  background: var(--surface); color: var(--texte);
  box-shadow: 0 12px 40px rgba(10, 20, 40, .3);
  overflow: hidden;
}
dialog.modale-etroite { width: min(520px, 94vw); }
dialog.modale::backdrop { background: rgba(10, 18, 32, .48); }

.modale-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-bottom: 1px solid var(--bord); background: var(--surface-2);
  font-size: 14px;
}
.modale-corps { overflow: auto; max-height: calc(84vh - 46px); }
.modale-corps table.grille thead th { top: 0; }
.modale-corps table.grille tfoot td {
  position: sticky; bottom: 0; background: var(--surface-2);
  border-top: 1px solid var(--bord-fort); padding: 7px 9px;
}

/* ==========================================================================
   Menu de choix des colonnes
   ========================================================================== */

.menu-colonnes { position: relative; }
.menu-colonnes > summary { list-style: none; }
.menu-colonnes > summary::-webkit-details-marker { display: none; }
.menu-colonnes[open] > summary { background: var(--accent-clair); color: var(--accent); }

.menu-colonnes-panneau {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 190px; padding: 8px;
  background: var(--surface); border: 1px solid var(--bord-fort);
  border-radius: var(--rayon); box-shadow: 0 6px 20px rgba(10, 20, 40, .18);
}
.menu-colonnes-titre {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texte-doux); padding: 2px 4px 6px;
}
.menu-colonnes-ligne {
  display: flex; align-items: center; gap: 7px; padding: 4px;
  font-size: 12.5px; font-weight: 500; color: var(--texte); margin: 0; cursor: pointer;
}
.menu-colonnes-ligne:hover { background: var(--surface-2); border-radius: 4px; }
.menu-colonnes-ligne input { width: auto; }

/* Masquage effectif, piloté par les classes posées sur la table. */
table.grille.sans-type   th.col-type,   table.grille.sans-type   td.col-type   { display: none; }
table.grille.sans-debit  th.col-debit,  table.grille.sans-debit  td.col-debit  { display: none; }
table.grille.sans-credit th.col-credit, table.grille.sans-credit td.col-credit { display: none; }
table.grille.sans-solde  th.col-solde,  table.grille.sans-solde  td.col-solde  { display: none; }

/* Ligne que l'on vient de pointer ou de modifier : signalée brièvement, le
   temps de la retrouver des yeux après le rechargement. */
@keyframes signaler-ligne {
  from { background: color-mix(in srgb, var(--accent) 30%, transparent); }
  to   { background: transparent; }
}
table.grille tbody tr.ligne-visee td { animation: signaler-ligne 1.6s ease-out; }

@media (prefers-reduced-motion: reduce) {
  table.grille tbody tr.ligne-visee td { animation: none; outline: 2px solid var(--accent); outline-offset: -2px; }
}

/* ==========================================================================
   ADAPTATION AUX PETITS ÉCRANS
   ==========================================================================
   L'application sera utilisée au téléphone sur la durée : la grille dense à
   sept colonnes n'y tient pas, et la rétrécir la rendrait illisible. On la
   TRANSFORME donc en liste de cartes, une écriture par carte.

   Trois paliers :
     · ≤ 1080 px  une seule colonne, le panneau passe sous la grille
     · ≤ 820 px   barre d'outils compactée, modales pleine largeur
     · ≤ 720 px   la grille devient des cartes, la saisie s'empile
   ========================================================================== */

/* Bandeau de résumé : réservé au téléphone. */
.resume-mobile { display: none; }

/* -------------------------------------------------------------------------
   ≤ 1080 px — une colonne
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .appbody { grid-template-columns: minmax(0, 1fr); }

  /* La grille passe AVANT le panneau : sur un écran étroit, devoir faire
     défiler tout le panneau pour atteindre ses écritures à chaque ouverture
     est intenable. Le bandeau de résumé prend le relais pour les soldes. */
  .zone    { order: 1; }
  .panneau { order: 2; position: static; max-height: none; overflow: visible; }

  .grille-cadre  { height: auto; max-height: none; }
  .grille-defile { max-height: 70vh; }

  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   ≤ 820 px — chrome compacté
   ------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .outil { min-width: 60px; font-size: 9.5px; padding: 5px 7px 4px; }
  .outil svg { width: 19px; height: 19px; }

  .menu-marque { padding-right: 8px; margin-right: 4px; }
  /* Le nom s'efface faute de place, mais la pastille reste : elle sert
     d'avatar ET de lien vers la fiche, elle ne doit pas disparaître. */
  .menu-user   { font-size: 0; gap: 0; padding: 0; }
  .espace-chip { max-width: 46vw; }

  .page { padding: 10px 9px 32px; }

  dialog.modale, dialog.modale-etroite {
    width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh;
    border-radius: 0; border: none;
  }
  .modale-corps { max-height: calc(100vh - 50px); }

  .champs-2, .champs-3 { grid-template-columns: 1fr; }

  /* Cibles tactiles : 26 px se rate au doigt. */
  .btn-carre { width: 36px; height: 36px; }
  .btn-carre svg { width: 17px; height: 17px; }
  .btn { padding: 8px 13px; }
  .btn-mini { padding: 6px 10px; }
  .puce { width: 22px; height: 22px; }
  .puce svg { width: 13px; height: 13px; }
  input, select, textarea { padding: 8px 10px; font-size: 16px; }
  /* 16 px : en dessous, iOS zoome automatiquement à la mise au point du champ
     et l'écran part de travers. */
}

/* -------------------------------------------------------------------------
   ≤ 720 px — la grille devient des cartes
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {

  /* Le bandeau des soldes reste à l'écran pendant le défilement.
     Sur un téléphone, la grille s'ouvre en bas — sur la dernière écriture —
     et les soldes, eux, sont en haut : sans ancrage, consulter son reste à
     vivre demande de remonter toute l'année puis de redescendre.
     Le décalage `top` vaut la hauteur RÉELLE de la barre supérieure, mesurée
     par app.js (voir --h-chrome) ; la valeur de repli sert si le script n'a
     pas encore tourné. */
  .resume-mobile {
    display: block;
    position: sticky; top: var(--h-chrome, 68px); z-index: 40;
    background: var(--surface); border: 1px solid var(--bord);
    border-radius: var(--rayon); box-shadow: var(--ombre-panneau);
    padding: 10px 12px; margin-bottom: 9px;
  }
  .resume-mobile-compte { display: flex; align-items: center; gap: 7px; font-size: 14px; }
  .resume-mobile-chiffres {
    display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-top: 7px;
  }
  .resume-mobile-chiffres > button { margin-left: auto; }

  /* Le bandeau de résumé mobile porte déjà l'identité et les soldes ; la
     carte de compte du panneau ferait doublon (règle en fin de fichier). */

  .grille-cadre { border: none; background: none; box-shadow: none; }
  .grille-defile { overflow: visible; max-height: none; }

  /* --- La table cesse d'être une table ---------------------------------- */
  table.grille { font-size: 13px; }
  table.grille thead { display: none; }
  table.grille, table.grille tbody, table.grille tfoot { display: block; width: 100%; }

  table.grille tbody tr,
  table.grille tfoot tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
    padding: 10px 12px; margin-bottom: 7px;
    background: var(--surface);
    border: 1px solid var(--bord); border-left-width: 4px;
    border-radius: var(--rayon);
  }
  table.grille tbody tr:hover td { background: none; }

  table.grille tbody td,
  table.grille tfoot td {
    display: block; width: auto; border: none; padding: 0;
  }
  /* Une cellule vide occuperait tout de même sa place et créerait des trous :
     les colonnes Débit et Crédit s'excluent, l'une est toujours vide. */
  table.grille tbody td:empty { display: none; }
  table.grille tbody td:first-child { border-left: none; padding-left: 0; }

  /* Ordre de lecture : date et montant sur la première ligne, puis le libellé
     en pleine largeur, puis le classement, puis le solde et les actions. */
  table.grille tbody td.col-date    { order: 1; width: auto; }
  table.grille tbody td:nth-child(2){ order: 3; flex: 1 1 100%; }
  table.grille tbody td.col-type    { order: 4; flex: 1 1 100%; font-size: 11.5px; }
  table.grille tbody td.col-montant { order: 2; margin-left: auto; font-size: 15px; font-weight: 700; }
  table.grille tbody td.col-solde   { order: 5; font-size: 11.5px; }
  table.grille tbody td.col-actions { order: 6; margin-left: auto; display: flex; gap: 6px; }

  /* Les liserés de couleur passent sur le bord gauche de la carte. */
  table.grille tbody tr           { border-left-color: var(--accent); }
  table.grille tbody tr.non-pointee { border-left-color: var(--alerte); }
  table.grille tbody tr.credit      { border-left-color: var(--credit); }
  table.grille tbody tr.budget      { border-left-color: var(--texte-faible); }

  /* --- Saisie et modification : champs empilés -------------------------- */
  tr.saisie, tr.saisie.edition {
    flex-direction: column; align-items: stretch; gap: 7px;
    border-width: 2px; border-left-width: 4px;
  }
  /* L'ordre imposé aux cartes (montant remonté près de la date) n'a pas de
     sens ici : on saisit dans l'ordre naturel du formulaire — date, libellé,
     poste, type, référence, puis les montants. On rend donc leur place aux
     cellules. */
  /* `width` est forcé : les largeurs de colonne de la grille (.col-montant à
     104 px, .col-solde à 116 px…) sont plus spécifiques et laisseraient les
     champs Débit et Crédit à moitié larges. */
  tr.saisie td { order: 0 !important; width: 100% !important; margin-left: 0 !important; }
  tr.saisie td.col-debit::before  { content: "Débit";  display: block; font-size: 10.5px;
                                    font-weight: 700; color: var(--debit); margin-bottom: 2px; }
  tr.saisie td.col-credit::before { content: "Crédit"; display: block; font-size: 10.5px;
                                    font-weight: 700; color: var(--credit); margin-bottom: 2px; }
  tr.saisie td:empty { display: none; }
  tr.saisie td.col-actions { justify-content: stretch; }
  tr.saisie td.col-actions .btn,
  tr.saisie td.col-actions .btn-carre { flex: 1; }

  /* --- Barre d'actions basse -------------------------------------------- */
  .barre-basse {
    border: 1px solid var(--bord); border-radius: var(--rayon);
    background: var(--surface); margin-top: 4px; gap: 7px;
  }
  .barre-basse .separateur { display: none; }
  .onglets { width: 100%; overflow-x: auto; }
  .recherche-boite { max-width: none; flex: 1 1 100%; }
  .compteur-lignes { margin-left: auto; }

  /* --- Écrans de gestion ------------------------------------------------- */
  .espaces-grille { grid-template-columns: 1fr; }
  .recap { grid-template-columns: 1fr 1fr; }
  .barre-poste { grid-template-columns: minmax(0, 1fr); }
  .barre-val { text-align: left; }
  .tuiles { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------------------
   ≤ 420 px — les plus petits téléphones
   ------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .outil span { display: none; }            /* icônes seules */
  .outil { min-width: 46px; padding: 7px 9px; }
  .outil svg { width: 21px; height: 21px; }
  .recap, .tuiles { grid-template-columns: 1fr; }
  .resume-mobile-chiffres { gap: 12px; }
  table.grille tbody td.col-montant { font-size: 14px; }
}

/* Choix de l'horizon du solde prévisionnel, dans le panneau de gauche. */
.horizon-choix {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--bord);
}
.horizon-choix label { margin: 0; white-space: nowrap; }
.horizon-choix input { width: auto; flex: 1; min-width: 132px; font-size: 12px; padding: 3px 6px; }

/* ==========================================================================
   Carte de compte — panneau de gauche
   ==========================================================================
   Une seule carte pour l'état du compte. La version précédente répétait le
   solde et le prévisionnel dans deux blocs successifs, à 200 px d'écart : la
   même information deux fois, et rien pour dire lequel comptait.

   Hiérarchie retenue, dans l'ordre de lecture :
     1. Solde réel     — ce que la banque affiche, le chiffre de référence
     2. À pointer      — l'écart avec ce qui est saisi
     3. Prévisionnel   — ce qu'il restera à l'horizon choisi, avec son détail

   Le réglage de l'horizon est posé contre le chiffre qu'il pilote, pas dans
   une ligne de formulaire séparée.
   ========================================================================== */

.carte-compte { overflow: hidden; }

.cc-tete {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  background: linear-gradient(135deg, var(--accent-fonce), var(--violet));
  color: #fff;
}
.cc-logo {
  width: 46px; height: 46px; border-radius: 10px; flex: none;
  object-fit: contain; background: rgba(255, 255, 255, .94); padding: 4px;
}
.cc-logo-initiales {
  background: rgba(255, 255, 255, .2); padding: 0;
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px; letter-spacing: -.5px;
}
.cc-noms { min-width: 0; }
.cc-banque { font-weight: 700; font-size: 15px; line-height: 1.15; }
.cc-compte { font-size: 12px; opacity: .85; margin-top: 1px; }

.cc-corps { padding: 12px 14px 13px; }

.cc-etiquette {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--texte-doux);
}

/* Les deux chiffres qui portent l'information. */
.cc-principal { display: flex; flex-direction: column; gap: 1px; }
.cc-montant {
  font-family: var(--mono); font-size: 25px; font-weight: 700;
  letter-spacing: -.8px; line-height: 1.1;
}
.cc-principal-previ .cc-montant { font-size: 22px; }

/* Lignes secondaires, cliquables vers leur détail. */
.cc-ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: 7px; padding: 5px 7px;
  background: var(--surface-2); border: 1px solid var(--bord); border-radius: 5px;
  font: inherit; text-align: left; color: var(--texte-doux);
}
.cc-ligne.cliquable { cursor: pointer; }
.cc-ligne.cliquable:hover { background: var(--surface-3); border-color: var(--bord-fort); }
.cc-ligne-lib { font-size: 12px; }
.cc-ligne-val { font-family: var(--mono); font-size: 13px; font-weight: 650; white-space: nowrap; }

/* Compteur d'écritures concernées, en pastille discrète. */
.cc-nb {
  display: inline-block; min-width: 17px; padding: 0 4px; margin-left: 3px;
  border-radius: 9px; background: var(--surface-4); color: var(--texte-doux);
  font-size: 10px; font-weight: 700; text-align: center;
}

.cc-separateur { height: 1px; background: var(--bord); margin: 13px 0 11px; }

.cc-previ-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-horizon { display: flex; }
/* Champ de date discret : il se lit comme du texte tant qu'on ne le survole
   pas, pour ne pas concurrencer le montant qu'il accompagne. */
.cc-horizon input {
  width: auto; padding: 2px 5px; font-size: 11.5px; font-family: var(--mono);
  border: 1px solid transparent; background: var(--surface-2); color: var(--texte-doux);
  border-radius: 4px; cursor: pointer;
}
.cc-horizon input:hover { border-color: var(--bord-fort); color: var(--texte); }
.cc-horizon input:focus { border-color: var(--accent); color: var(--texte); }

/* Détail des échéances projetées, en retrait sous le prévisionnel. */
.cc-detail { margin-top: 4px; }
.cc-ligne-fine { margin-top: 5px; padding: 4px 7px; background: none; border-style: dashed; }
.cc-ligne-fine .cc-ligne-lib { font-size: 11.5px; }
.cc-ligne-fine .cc-ligne-val { font-size: 12px; }

.cc-vide { margin-top: 7px; font-size: 11.5px; color: var(--texte-faible); }

@media (max-width: 720px) {
  /* Le bandeau de résumé mobile porte déjà ces chiffres. */
  .panneau .carte-compte { display: none; }
}

/* ==========================================================================
   Navigation par période (années + mois)
   ========================================================================== */

.navigation-periode { display: flex; flex-direction: column; gap: 5px; }

.onglets-mois { flex-wrap: wrap; gap: 3px; }
.onglet-mois {
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; color: var(--texte-doux);
  background: var(--surface-3); border: 1px solid transparent;
  white-space: nowrap;
}
.onglet-mois:hover { background: var(--surface-4); color: var(--texte); text-decoration: none; }
.onglet-mois.actif { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ==========================================================================
   Commande de saut flottante — téléphone
   --------------------------------------------------------------------------
   Sur petit écran la barre d'actions est en bas de page, donc hors de portée
   au milieu d'un relevé. Ces deux boutons restent accessibles en permanence.
   ========================================================================== */

.saut-flottant { display: none; }

@media (max-width: 720px) {
  .saut-flottant {
    display: flex; flex-direction: column; gap: 6px;
    position: fixed; right: 12px; bottom: 16px; z-index: 40;
    /* Masquée tant qu'on n'a pas commencé à défiler : en haut de page elle
       recouvrirait le bouton de validation de la ligne de saisie, et c'est
       précisément là qu'elle ne sert à rien. */
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .18s, transform .18s, visibility .18s;
  }
  .saut-flottant.visible { opacity: 1; visibility: visible; transform: none; }
  .saut-flottant button {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface); color: var(--texte-doux);
    border: 1px solid var(--bord-fort);
    box-shadow: 0 3px 12px rgba(10, 20, 40, .22);
    cursor: pointer; padding: 0;
  }
  .saut-flottant button:active { background: var(--surface-3); }
  .saut-flottant svg { width: 19px; height: 19px; }

  /* Les onglets de mois défilent horizontalement plutôt que de s'empiler
     sur trois lignes. */
  .onglets-mois { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .onglets-mois::-webkit-scrollbar { display: none; }
  .onglet-mois { padding: 5px 11px; font-size: 12px; }
  .navigation-periode { width: 100%; }
}

/* La navigation par période est rendue à deux endroits : seul l'un des deux
   s'affiche selon la largeur. En bas sur écran large — la place qu'elle occupe
   dans MaxiCompte —, en tête sur téléphone, où la barre du bas est hors de
   portée après des centaines de lignes. */
.nav-periode-haut { display: none; }

@media (max-width: 720px) {
  .nav-periode-haut {
    display: block; margin-bottom: 9px; padding: 9px 11px;
    background: var(--surface); border: 1px solid var(--bord);
    border-radius: var(--rayon); box-shadow: var(--ombre-panneau);
  }
  .nav-periode-bas { display: none; }
}

/* ==========================================================================
   Débordement horizontal
   ==========================================================================
   Une référence sans espace — « Mandat n°PO01KZDTPJSPHK9BJVYY08G160AN » — est
   un bloc insécable : elle impose sa largeur à sa cellule, puis à la table,
   puis à la page entière. Sur téléphone la mise en page passait ainsi à 456 px
   dans une fenêtre de 390, et tout ce qui se trouvait à droite (les derniers
   onglets de mois, la fin des montants) sortait de l'écran.

   `anywhere` plutôt que `break-word` : le second ne coupe qu'en dernier
   recours et laissait encore déborder les jetons très longs.
   ========================================================================== */

table.grille td, table.grille th { overflow-wrap: anywhere; }
.c2, .piece-nom, .ev-resume { overflow-wrap: anywhere; }

/* Garde-fou : aucun conteneur ne doit pouvoir pousser la page au-delà de la
   fenêtre. Sans `min-width: 0`, un élément de grille ou de flex adopte la
   largeur de son contenu au lieu de le contraindre.

   `overflow-x` est posé sur <html> SEULEMENT, et surtout pas sur <body>.
   Déclarer un débordement sur un axe force l'autre à « auto » : mettre
   `overflow-x: hidden` sur le corps en faisait un conteneur défilant, qui
   avec `height: 100%` devenait le vrai ascenseur de la page. Or `window.scrollY`
   et `document.scrollingElement` continuent, eux, de désigner l'élément racine.
   Tout ce qui lit ou pilote le défilement en JavaScript visait donc un élément
   immobile : les flèches « aller en haut / en bas » ne partaient jamais et
   n'apparaissaient même pas, leur affichage dépendant de `window.scrollY`.

   Sur <html> seul, la règle se propage à la fenêtre — le débordement latéral
   reste bloqué — et le corps redevient un contenu normal. */
html, body { max-width: 100%; }
html { overflow-x: hidden; }
.appbody, .zone, .panneau, .page { min-width: 0; }

/* ==========================================================================
   Étiquettes de règle et bandeaux d'alerte
   ==========================================================================
   La couleur du texte n'est pas fixée en CSS mais calculée par
   couleur_lisible() d'après la luminance du fond : une étiquette jaune vif
   recevrait sinon du texte blanc et deviendrait illisible.
   ========================================================================== */

.tag-regle {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap; vertical-align: 1px;
}

.alertes { display: grid; gap: 7px; margin-bottom: 10px; }

.alerte {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--bord);
  border-left: 4px solid var(--debit);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  font-size: 12.5px;
}
.alerte-texte { color: var(--texte-doux); }
.alerte-texte strong { color: var(--texte); font-family: var(--mono); }
.alerte .btn { margin-left: auto; }

/* Le bandeau d'alerte est rendu comme premier enfant de la grille de page :
   même règle que les messages flash, sinon il occupe la colonne du panneau. */
.appbody > .alertes { grid-column: 1 / -1; margin-bottom: 0; }

/* Récapitulatif des règles au tableau de bord. Une règle sans écriture reste
   affichée, en gris : c'est la preuve que la surveillance tourne. */
.alerte-ligne {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--bord);
}
.alerte-ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.alerte-ligne-nb   { color: var(--texte-doux); }
.alerte-ligne-vide { color: var(--texte-faible); font-style: italic; }
.alerte-ligne-val  { margin-left: auto; font-family: var(--mono); font-size: 12px; }
.alerte-ligne-date {
  flex-basis: 100%; color: var(--texte-faible); font-size: 11px;
}

/* ==========================================================================
   Constructeur de règle
   ==========================================================================
   La règle se lit comme une phrase — « Si la Référence est exactement Facture
   et qu'aucune pièce jointe n'est attachée, alors afficher Facture manquante »
   — plutôt que comme un formulaire de champs empilés.
   ========================================================================== */

.regle-phrase {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; background: var(--surface-2);
  border: 1px solid var(--bord); border-radius: var(--rayon);
}
.regle-mot { font-weight: 650; color: var(--texte-doux); white-space: nowrap; }

.regle-cases { display: grid; gap: 6px; }
.regle-case {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12.5px; font-weight: 500; color: var(--texte); cursor: pointer;
}
.regle-case input { width: auto; }

/* Onglets de page (Paramètres) */
.onglets-page {
  display: flex; gap: 3px; margin-bottom: 14px;
  border-bottom: 1px solid var(--bord);
}
.onglets-page .onglet { padding: 7px 14px; font-size: 13px; }

@media (max-width: 720px) {
  .regle-phrase { flex-direction: column; align-items: stretch; }
  .regle-phrase select, .regle-phrase input { width: 100% !important; }
  .alerte .btn { margin-left: 0; }
}

/* ==========================================================================
   Fiche utilisateur & notifications
   ========================================================================== */

/* Texte d'aide sous un champ : il explique la conséquence du réglage, ce que
   le libellé seul ne peut pas faire sans devenir une phrase. */
.aide { font-size: 11.5px; color: var(--texte-faible); line-height: 1.55; margin-top: 4px; }

/* Rappel affiché tant qu'aucun compte n'est coché : sans lui, on repart de la
   page en croyant avoir activé les notifications. */
.notif-avertissement {
  padding: 9px 12px; margin-bottom: 13px;
  background: color-mix(in srgb, var(--alerte) 12%, transparent);
  border-left: 3px solid var(--alerte);
  border-radius: 4px; font-size: 12.5px; color: var(--texte-doux);
}

.notif-groupe { margin-bottom: 14px; }
.notif-groupe:last-child { margin-bottom: 0; }
.notif-groupe-tete {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texte-faible);
  padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--bord);
}
.notif-choix {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 2px; font-size: 13px; cursor: pointer;
}
.notif-choix input { width: auto; margin: 0; }
.notif-choix:hover span { color: var(--accent); }

/* --- Cloche et pastille de l'en-tête ------------------------------------ */

.cloche {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; color: var(--texte-doux);
}
.cloche:hover { background: var(--surface-3); color: var(--texte); }
.cloche.a-du-neuf { color: var(--accent); }
.cloche-badge {
  position: absolute; top: -1px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--debit); color: #fff;
  border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 1;
  border: 2px solid var(--surface-2);
}

/* --- Pile de notifications ---------------------------------------------- */

.notif-bandeau {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 13px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--bord);
  border-left: 4px solid var(--accent);
  border-radius: var(--rayon); box-shadow: var(--ombre); font-size: 13px;
}
.notif-bandeau .btn { margin-left: auto; }

.notif-separateur {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px 5px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texte-faible);
}
/* Le non-lu se distingue par un liseré et un fond très léger, pas par une
   couleur pleine : la pile est faite pour être parcourue, pas alarmée. */
.evenement.est-nouveau {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Date de pointage dans la ligne en édition : subordonnée à la date
   d'opération, d'où le libellé en minuscules et la taille réduite. Elle ne
   doit pas se lire comme un deuxième champ de même rang. */
.champ-pointage { margin-top: 3px; }
.champ-pointage label {
  display: block; font-size: 9.5px; color: var(--texte-faible);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1px;
}
.champ-pointage input { font-size: 11px; }

/* Saisie en bloc d'une liste : outil de reprise, replié pour ne pas encombrer
   le formulaire d'ajout unitaire dont on se sert tous les jours. */
.ajout-lot { margin-top: 11px; border-top: 1px solid var(--bord); padding-top: 10px; }
.ajout-lot > summary {
  cursor: pointer; font-size: 12.5px; color: var(--accent);
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.ajout-lot > summary::-webkit-details-marker { display: none; }
.ajout-lot > summary::before { content: '+'; font-weight: 700; }
.ajout-lot[open] > summary::before { content: '−'; }
.ajout-lot > summary:hover { text-decoration: underline; }
.ajout-lot textarea { line-height: 1.6; }