/* Plan 4 ans — feuille de style */

:root {
  color-scheme: dark;
  --surface-0: #131312;
  --surface-1: #1a1a19;
  --surface-2: #232322;
  --surface-3: #2e2e2c;
  --border: #37372f;
  --border-fort: #4a4a42;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #8d8c83;
  --accent: #3987e5;
  --bon: #199e70;
  --alerte: #c98500;
  --grave: #d95926;
  --critique: #e66767;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --s5: #d55181;
  --s6: #008300;
  --s7: #9085e9;
  --s8: #e66767;
  --s9: #d8d7cd;   /* neutre — le « noir » d'une marque, rendu clair pour rester lisible */
  --grille: #2d2d2b;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25);
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-0: #f4f3f0;
  --surface-1: #fcfcfb;
  --surface-2: #f0efec;
  --surface-3: #e5e4e0;
  --border: #dedcd6;
  --border-fort: #c4c2ba;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #7a7973;
  --accent: #2a78d6;
  --bon: #1baf7a;
  --alerte: #eda100;
  --grave: #eb6834;
  --critique: #e34948;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --s6: #008300;
  --s7: #4a3aa7;
  --s8: #e34948;
  --s9: #262624;   /* neutre — noir en thème clair */
  --grille: #e8e7e2;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--surface-0);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- En-tête */
header.top {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  display: flex; align-items: center; gap: 20px;
  min-height: 56px; flex-wrap: wrap;
}
.marque { font-weight: 650; letter-spacing: -.01em; font-size: 15px; white-space: nowrap; }
.marque span { color: var(--text-muted); font-weight: 400; }

nav.principal { display: flex; gap: 2px; flex-wrap: wrap; }
nav.principal a {
  padding: 7px 12px; border-radius: 7px; color: var(--text-secondary);
  font-weight: 500; text-decoration: none; white-space: nowrap;
}
nav.principal a:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
nav.principal a.actif { background: var(--surface-3); color: var(--text-primary); }

/* Sélecteur de profil : deux pastilles côte à côte, celle du profil ouvert
   étant nettement marquée — on doit voir d'un coup d'œil quel portefeuille
   on est en train de regarder. */
.profils { display: flex; gap: 3px; background: var(--surface-2); border-radius: 9px; padding: 3px; }
.profils a {
  display: flex; flex-direction: column; line-height: 1.15;
  padding: 5px 11px; border-radius: 7px; white-space: nowrap;
  color: var(--text-secondary); font-weight: 600; font-size: 13px; text-decoration: none;
}
.profils a span { font-size: 10px; font-weight: 500; letter-spacing: .04em;
                  text-transform: uppercase; color: var(--text-muted); }
.profils a:hover { background: var(--surface-3); color: var(--text-primary); text-decoration: none; }
/* Le profil ouvert est teinté d'accent plutôt que simplement plus clair : la
   distinction tient dans les deux thèmes, où « plus clair » veut dire l'inverse. */
.profils a.actif {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-1));
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.profils a.actif span { color: var(--accent); }

.entete-droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }

main { padding: 22px; max-width: 1500px; margin: 0 auto; }

/* ---------------------------------------------------------------- Blocs */
.carte {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  padding: 18px;
  box-shadow: var(--ombre);
}
.carte + .carte { margin-top: 18px; }
.carte h2 {
  margin: 0 0 4px; font-size: 15px; font-weight: 620; letter-spacing: -.01em;
}
.carte h2 + .sous { margin: 0 0 14px; color: var(--text-muted); font-size: 12.5px; }
.carte h3 { margin: 20px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }

.grille { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g23 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.g32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 1100px) { .g3, .g4, .g23, .g32 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sur téléphone les cartes passent en pleine largeur, mais les tuiles de
   chiffres restent à deux par ligne : elles sont courtes, et les empiler
   ferait défiler quatre écrans avant de voir le premier graphique. */
/* minmax(0, 1fr) et non 1fr : une colonne « 1fr » garde un minimum égal au
   contenu le plus large qu'elle porte. Un tableau à huit colonnes suffit
   alors à élargir la page entière — et l'en-tête cesse de couvrir toute la
   largeur, puisqu'il ne fait que 100 % de la fenêtre. */
@media (max-width: 700px) {
  .grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) { .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Tuiles */
.tuile {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--rayon); padding: 15px 17px;
}
.tuile .lib {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 600; margin-bottom: 7px;
}
.tuile .val {
  font-size: 25px; font-weight: 640; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.tuile .detail { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }

.jauge { height: 6px; background: var(--surface-3); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.jauge > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

/* Jauge avec repère : la barre est le capital réellement placé, le trait la
   position théorique au même mois du plan. Cette position vient de la
   trajectoire de référence, qui tient compte de la baisse d'apport après la
   phase turbo — la barre, elle, est un simple rapport et reste linéaire. */
.jauge.reperee {
  position: relative; overflow: visible;
  height: 9px; border-radius: 5px; margin-bottom: 7px;
}
.jauge.reperee > i { border-radius: 5px 0 0 5px; }

/* L'écart au plan occupe le segment entre la position réelle et la position
   théorique. Le montrer comme une longueur plutôt que comme un point rend
   l'avance ou le retard lisible sans avoir à déchiffrer le trait ; la
   couleur est celle du chiffre écrit juste en dessous. */
.jauge .ecart { position: absolute; top: 0; bottom: 0; display: block; }
.jauge .ecart.retard { background: color-mix(in srgb, var(--critique) 65%, transparent); }
.jauge .ecart.avance { background: color-mix(in srgb, var(--bon) 65%, transparent); }

.jauge .repere {
  position: absolute; top: -5px; bottom: -5px;
  width: 2px; margin-left: -1px; border-radius: 1px;
  background: var(--text-primary);
  box-shadow: 0 0 0 1.5px var(--surface-1);   /* lisible des deux côtés du trait */
}

/* Reprend l'aspect du repère dans le texte : le trait dans la barre et le
   mot qui le nomme se rattachent l'un à l'autre sans légende séparée. */
.cle-repere {
  display: inline-block; width: 2px; height: 11px; border-radius: 1px;
  background: var(--text-primary); vertical-align: -1px; margin-right: 6px;
}

/* ---------------------------------------------------------------- Tableaux */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--border); }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 600; white-space: nowrap;
  position: sticky; top: 0; background: var(--surface-1); z-index: 2;
}
td.num, th.num { text-align: right; white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }
tr.total td { font-weight: 650; border-top: 2px solid var(--border-fort); background: var(--surface-2); }
tr.groupe td { background: var(--surface-2); font-weight: 600; font-size: 12px; color: var(--text-secondary); }
.defilement { max-height: 620px; overflow: auto; border-radius: 8px; border: 1px solid var(--border); }

.pastille {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 7px; vertical-align: baseline;
}

.etiquette {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--border-fort); color: var(--text-secondary);
}
.etiquette.bon { color: var(--bon); border-color: color-mix(in srgb, var(--bon) 45%, transparent); }
.etiquette.alerte { color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 45%, transparent); }
.etiquette.grave { color: var(--grave); border-color: color-mix(in srgb, var(--grave) 45%, transparent); }
.etiquette.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.positif { color: var(--bon); }
.negatif { color: var(--critique); }

/* ---------------------------------------------------------------- Formulaires */
input[type=text], input[type=number], input[type=password], select, textarea {
  background: var(--surface-2); border: 1px solid var(--border-fort);
  color: var(--text-primary); border-radius: 7px; padding: 7px 9px;
  font-family: inherit; font-size: 13.5px; width: 100%;
  font-variant-numeric: tabular-nums;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -1px; border-color: var(--accent);
}
input.court { width: 116px; }
label.champ { display: block; margin-bottom: 12px; }
label.champ > span { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
label.case { display: flex; align-items: center; gap: 8px; font-size: 13px; }
label.case input { width: auto; }

.bouton {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border-fort);
  color: var(--text-primary); border-radius: 8px; padding: 8px 14px;
  font-family: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.bouton:hover { background: var(--surface-3); text-decoration: none; }
.bouton.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.primaire:hover { filter: brightness(1.1); }
.bouton.discret { background: transparent; border-color: transparent; color: var(--text-secondary); }
.bouton.discret:hover { background: var(--surface-2); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }

.barre-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

.message {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px;
}

.aide { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ---------------------------------------------------------------- Graphiques */
.graph { position: relative; height: 300px; }
.graph.haut { height: 380px; }
.graph.bas { height: 220px; }

.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; }
.legende span { display: inline-flex; align-items: center; color: var(--text-secondary); }

/* ---------------------------------------------------------------- Connexion */
.connexion {
  min-height: 100vh;
  min-height: 100dvh;  /* sur mobile, 100vh déborde sous la barre du navigateur */
  display: grid; place-items: center; padding: 20px;
}
.connexion .carte { width: 100%; max-width: 380px; }

.pied { margin-top: 28px; color: var(--text-muted); font-size: 12px; text-align: center; }

@media print {
  header.top, .barre-actions, .bouton { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------------------------------------------------------------- Virements */
.virements { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.virement {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teinte, var(--accent));
  border-radius: var(--rayon);
  padding: 15px 17px;
}
.virement .compte {
  display: flex; align-items: center; gap: 8px;
  font-weight: 620; font-size: 13.5px; margin-bottom: 9px;
}
.virement .compte .pastille { margin: 0; width: 10px; height: 10px; }
.virement .montant {
  font-size: 26px; font-weight: 660; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  color: var(--teinte, var(--accent));
}
.virement .lignes {
  margin-top: 10px; font-size: 12px; color: var(--text-secondary);
  border-top: 1px solid var(--border); padding-top: 9px;
}
.virement .lignes div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.virement .lignes span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.virement .deja { font-size: 12px; color: var(--text-muted); margin-top: 5px; }


/* ---------------------------------------------------------------- Tri et filtres */
.barre-filtres {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  margin-bottom: 12px;
}
.barre-filtres input[type=search], .barre-filtres select {
  width: auto; min-width: 150px;
}
.barre-filtres input[type=search] { min-width: 220px; }
.barre-filtres .compte-resultats {
  font-size: 12px; color: var(--text-muted); margin-left: auto;
  font-variant-numeric: tabular-nums;
}

table[data-triable] th.triable {
  cursor: pointer; user-select: none; position: relative;
}
table[data-triable] th.triable:hover { color: var(--text-primary); }
table[data-triable] th.triable::after {
  content: "⇅"; margin-left: 5px; opacity: .3; font-size: 10px;
}
table[data-triable] th.triable[data-sens="asc"]::after { content: "↑"; opacity: 1; color: var(--accent); }
table[data-triable] th.triable[data-sens="desc"]::after { content: "↓"; opacity: 1; color: var(--accent); }

tr.masque { display: none; }
.aucun-resultat td {
  text-align: center; color: var(--text-muted); padding: 22px 10px; font-style: italic;
}

/* ================================================================ Mobile
   Tout ce qui suit est sous media query : le rendu bureau est inchangé. */

/* Conteneur posé automatiquement autour de chaque tableau par tableaux.js.
   Transparent sur grand écran, il ne devient une zone de défilement que
   lorsque la place manque. */
.table-defile { overflow: visible; }

/* Le survol n'existe pas au doigt : sur tactile il laisse des états collés
   après un appui, ce qui donne l'impression d'une sélection fantôme. */
@media (hover: none) {
  a:hover { text-decoration: none; }
  tbody tr:hover { background: transparent; }
  nav.principal a:hover { background: transparent; color: var(--text-secondary); }
  nav.principal a.actif:hover { background: var(--surface-3); color: var(--text-primary); }
  .bouton:hover { background: var(--surface-2); }
  .bouton.primaire:hover { filter: none; }
  .bouton.discret:hover { background: transparent; }
  table[data-triable] th.triable:hover { color: var(--text-muted); }
}

/* Cibles tactiles confortables, et 16 px dans les champs : en dessous,
   iOS zoome automatiquement sur le formulaire au moment de la saisie. */
@media (pointer: coarse) {
  nav.principal a { padding: 9px 13px; }
  .bouton { min-height: 40px; }
  /* 16 px : en dessous, iOS zoome sur le formulaire dès qu'on touche le
     champ. Les listes déroulantes ouvrent un sélecteur natif et n'ont pas
     besoin de la règle — les garder compactes évite qu'elles écrasent la
     ligne où elles se trouvent. */
  input[type=text], input[type=number], input[type=password],
  input[type=search], textarea { font-size: 16px; min-height: 40px; }
  select { min-height: 38px; }
  input[type=checkbox], input[type=radio] { width: 19px; height: 19px; }
  label.case input[type=checkbox] { width: 19px; height: 19px; }
  table[data-triable] th.triable { padding-top: 11px; padding-bottom: 11px; }
}

/* Un tableau de huit colonnes écrasé dans 375 px est illisible : on rend
   aux colonnes leur largeur naturelle et on fait défiler à l'horizontale.
   Seules les tables larges sont concernées ; celles à deux ou trois
   colonnes gardent la pleine largeur. */
@media (max-width: 900px) {
  .table-defile {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .table-defile > table.large,
  .defilement > table.large { min-width: max-content; }
  /* dans un conteneur à défilement horizontal, l'en-tête collant se
     glisserait sous la barre de navigation : il ne sert plus à rien */
  .table-defile > table th { position: static; }
  .defilement { max-height: 70vh; }

  /* Filet de sécurité. Un seul élément trop large élargit toute la page,
     et le symptôme est trompeur : c'est l'en-tête qui a l'air cassé, alors
     qu'il fait bien 100 % de la fenêtre — c'est la page qui est plus large.
     Les tableaux ont déjà leur propre zone de défilement, donc ce qui
     dépasse encore peut être coupé sans rien perdre.
     `clip` plutôt que `hidden` : il ne crée pas de conteneur de défilement
     et laisse l'axe vertical intact. `hidden` reste en repli. */
  main { overflow-x: hidden; overflow-x: clip; }
  .carte, .tuile, .virement { overflow-x: hidden; overflow-x: clip; }
}

@media (max-width: 860px) {
  header.top {
    padding: 7px 12px 0;
    gap: 7px;
    min-height: 0;
  }
  .marque { font-size: 14px; }
  .marque span { display: none; }
  .profils a { padding: 4px 9px; font-size: 12.5px; }
  .profils a span { display: none; }
  /* Ligne du haut compacte : le sélecteur de mois et les deux actions ne
     doivent pas peser autant que le titre. */
  .entete-droite { gap: 2px; }
  .entete-droite select {
    font-size: 13.5px; min-height: 32px; padding: 5px 24px 5px 8px;
  }
  .entete-droite .bouton { min-height: 32px; padding: 5px 9px; font-size: 13px; }

  /* Six onglets ne tiennent pas de front sur un téléphone : la navigation
     prend sa propre ligne et défile latéralement plutôt que de s'empiler
     sur trois rangées. */
  nav.principal {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    gap: 3px;
    margin: 0 -12px;
    padding: 1px 12px 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav.principal::-webkit-scrollbar { display: none; }
  nav.principal a { flex: 0 0 auto; }

  /* Un onglet coupé net au bord ressemble à un défaut d'affichage. On le
     fait disparaître en fondu du côté où il reste des onglets à atteindre :
     la coupure devient une indication. Les classes sont posées par app.js
     en fonction de la position de défilement — sans elles, aucun fondu,
     donc rien n'est masqué quand tout tient à l'écran. */
  nav.principal.defile-fin {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  nav.principal.defile-debut {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  }
  nav.principal.defile-debut.defile-fin {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px,
                                        #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px,
                                #000 calc(100% - 32px), transparent);
  }
}

@media (max-width: 700px) {
  main { padding: 14px 12px 26px; }
  .carte { padding: 14px; }
  .carte + .carte { margin-top: 14px; }
  .carte h3 { margin-top: 16px; }
  .tuile { padding: 13px 14px; }
  .tuile .val { font-size: 22px; }
  .graph { height: 260px; }
  .graph.haut { height: 300px; }
  .graph.bas { height: 200px; }
  .virements { gap: 12px; }
  .barre-actions { gap: 8px; margin-bottom: 14px; }
  /* La recherche prend toute la largeur, les filtres se partagent la ligne
     suivante : sinon chaque contrôle occupe une rangée et la barre est
     plus haute que le tableau qu'elle filtre. */
  .barre-filtres input[type=search] { flex: 1 1 100%; min-width: 0; }
  .barre-filtres select { flex: 1 1 calc(50% - 5px); min-width: 0; }
  input.court { width: 100px; }
}

/* ---------------------------------------------------------------- Relevés */
.depot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 188px;
  padding: 28px 18px;
  border: 1.5px dashed var(--border-fort);
  border-radius: var(--rayon);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  color: var(--text-secondary);
}
.depot strong { color: var(--text-primary); font-size: 15.5px; font-weight: 620; }
.depot span { font-size: 12.5px; color: var(--text-muted); }
.depot:hover, .depot.survol {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}
.depot:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-color: var(--accent);
}
.depot.occupe { opacity: .7; pointer-events: none; }
.depot input[type=file] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.envoi { margin-top: 14px; }
.envoi .jauge > i { width: 0; transition: width .15s linear; }
.lecture-note { margin-top: 4px; font-size: 12px; color: var(--text-secondary); }

/* Budget et flux — lisibles sur un téléphone, le diagramme prend toute la largeur. */
.mois-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 2px 0 12px;
}
.mois-nav button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border-fort); background: var(--surface-1);
  color: var(--text-primary); font-size: 18px; line-height: 1; cursor: pointer;
}
.mois-nav button:disabled { opacity: .35; cursor: default; }
.mois-nav strong {
  flex: 1; min-width: 0; text-align: center; line-height: 1.25;
  font-size: clamp(14px, 3.8vw, 17px); font-weight: 650; letter-spacing: -.02em;
}
.mois-nav button { display: grid; place-items: center; padding: 0; }
.mois-nav button svg { display: block; }
.periode-libre {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: end;
  margin: -4px 0 8px;
}
.periode-libre label {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 9rem; min-width: 0;
  font-size: 12px; font-weight: 650; color: var(--text-muted);
}
.periode-libre input[type=date] {
  width: 100%; min-height: 40px; font-size: 16px;
  background: var(--surface-2); border: 1px solid var(--border-fort);
  color: var(--text-primary); border-radius: 7px; padding: 7px 9px;
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.periode-actions { display: flex; gap: 8px; flex: 1 1 100%; }
.periode-actions .bouton { flex: 1; min-height: 40px; font-size: 16px; }
.mois-notes { margin: -4px 0 10px; }
.mois-notes p { margin: 0 0 6px; text-align: center; }

.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chiffre {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; min-width: 0;
}
.chiffre span {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 650;
}
.chiffre strong {
  display: block; margin-top: 2px; font-size: 18px; font-weight: 650;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.chiffre em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--text-secondary); }

.soldes {
  display: flex; gap: 8px; margin-top: 10px; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.soldes::-webkit-scrollbar { display: none; }
.solde-puce {
  scroll-snap-align: start; flex: 0 0 auto; min-width: 138px; max-width: 200px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 12px;
}
.solde-puce span { display: block; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solde-puce strong { font-variant-numeric: tabular-nums; font-size: 15px; }
.solde-puce i { font-style: normal; color: var(--accent); font-size: 11px; font-weight: 650; }

.segments {
  display: flex; gap: 3px; margin: 14px 0;
  background: var(--surface-2); border-radius: 11px; padding: 3px;
}
.segments button {
  flex: 1; min-height: 42px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text-secondary);
  font: inherit; font-weight: 650; cursor: pointer;
}
.segments button[aria-selected="true"] {
  background: var(--surface-1); color: var(--text-primary); box-shadow: var(--ombre);
}
.segments button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.filtre-internes {
  display: block; width: 100%; min-height: 42px; margin: 0 0 12px;
  border-radius: 999px; border: 1px solid var(--border-fort);
  background: var(--surface-2); color: var(--text-secondary);
  font: inherit; font-weight: 650; cursor: pointer;
}
.filtre-internes[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  border-color: var(--accent); color: var(--text-primary);
}
.filtre-internes:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.budget-corps { display: block; }
.anneau-bloc { position: relative; width: min(260px, 78vw); margin: 4px auto 8px; }
.anneau-centre {
  position: absolute; inset: 18%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.anneau-centre strong {
  font-size: clamp(16px, 4.6vw, 22px); font-weight: 680; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.anneau-centre span { color: var(--text-muted); font-size: 12.5px; }
.anneau-bloc canvas { display: block; max-width: 100%; }

.cat { border-top: 1px solid var(--border); }
.cat-ligne {
  width: 100%; display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 8px 2px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.cat-ligne:hover { background: var(--surface-2); }
.cat-ligne:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cat-ligne[aria-expanded="true"] { background: var(--surface-2); }
.pastille-cat {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
}
.pastille-cat svg { display: block; }
.cat-nom { flex: 1; min-width: 0; font-weight: 620; line-height: 1.25; }
.cat-nom small { display: block; margin-top: 1px; font-size: 12px; font-weight: 450; color: var(--text-muted); }
.cat-montant { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.cat-ops { padding: 0 0 8px 44px; }
.op {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px;
}
.op-meta { color: var(--text-muted); font-size: 12px; }
.op-lib {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.op strong { align-self: start; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reclasser {
  grid-column: 1 / -1; width: 100%; margin-top: 6px;
  font-size: 16px; min-height: 40px;
}
.reclasser-erreur {
  grid-column: 1 / -1; margin: 4px 0 0;
  color: var(--critique); font-size: 13px;
}

#flux-sonde { height: 0; overflow: hidden; }
.note { margin: 0 0 12px; color: var(--text-muted); font-size: 12.5px; }
.carte h3.flux-titre { margin: 18px 0 4px; }
.carte h3.flux-titre:first-child { margin-top: 2px; }
.flux-svg { width: 100%; max-width: 720px; height: auto; display: block; overflow: visible; }
.flux-svg text { fill: var(--text-secondary); font-size: 11px; font-family: inherit; }
.flux-liste { margin-top: 4px; }
.flux-groupe { margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.flux-ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px;
}
.flux-ligne span { min-width: 0; overflow-wrap: anywhere; }
.flux-ligne strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.puce-flux { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
.iban { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.vide { color: var(--text-secondary); margin: 8px 0; }
#panneau-budget[hidden], #panneau-flux[hidden], #panneau-comptes[hidden] { display: none !important; }

.fichier {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.fichier a { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.fichier form { margin-left: auto; }

@media (min-width: 860px) {
  .chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .soldes { flex-wrap: wrap; overflow: visible; }
  .solde-puce { flex: 1 1 150px; max-width: 220px; }
  .budget-corps { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 8px 22px; align-items: start; }
  .anneau-bloc { margin: 8px 0 0; }
  .cat-ops { padding-left: 44px; }
}
.liste-simple { margin: 8px 0 0; padding-left: 18px; }
.liste-simple li + li { margin-top: 4px; }
details.pli { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
details.pli summary {
  display: flex; justify-content: space-between; gap: 12px;
  cursor: pointer; font-size: 13.5px; color: var(--text-primary);
}
details.pli summary::-webkit-details-marker { display: none; }
details.pli .defilement { margin-top: 8px; max-height: 320px; }