/* ============================================================
   Les jetons de couleur.

   UNE AMBIANCE = TROIS COULEURS. Le fond de la page, la carte posée
   dessus, et l'encre. Tout le reste — textes secondaires, filets,
   survols, pastilles, bandeau du mois — est CALCULÉ à partir de ces
   trois-là, par dosages successifs de l'encre. C'est pour ça que les
   ambiances se marient : personne n'a choisi les quinze autres teintes
   à la main, donc aucune ne jure avec les trois premières.

   Chaque dose est fixée par le contraste mesuré, pas à l'œil : le texte
   secondaire est la plus petite quantité d'encre encore lisible sur la
   carte ET sur le fond, le filet la plus petite encore visible sur les
   deux. Une ambiance qui échoue à un seul de ces contrôles n'est pas
   publiée. (Le calcul est dans palettes.py, hors du site.)

   Deux règles ne bougent pas d'une ambiance à l'autre :
     - L'ENCRE EST LA MARQUE. Boutons, liens actifs, bouton d'ajout :
       toujours l'encre, jamais une teinte vive. Du coup les seules
       couleurs vives de l'écran veulent dire quelque chose — rouge ça
       monte, vert ça baisse, et les dix teintes de catégories.
     - LE FOND ET LA CARTE SONT DISTINCTS. Une carte doit se voir comme
       un objet posé sur la page, pas comme un morceau de la page.

   Défaut : « Papier » — encre pétrole (la couleur des plaques de rue
   émaillées) sur un papier gris-vert.
   ============================================================ */
:root {
  color-scheme: light;
  --bg:            #f2f2ee;
  --surface:       #ffffff;
  --surface-soft:  #fbfbfb;
  --surface-hover: #f4f5f5;
  --ink:           #0f2e2c;
  --ink-2:         #4f6564;
  --ink-3:         #798a89;
  --line:          #dde1e1;
  --line-strong:   #c5cccc;
  --accent:        #0f2e2c;
  --accent-ink:    #314b4a;
  --accent-soft:   #e5e8e6;
  --on-accent:     #f3f4f2;

  /* Sémantique — jamais modifiée par l'ambiance en lumière du jour */
  --up:            #c4302f;
  --up-soft:       #fbeceb;
  --down:          #0d7a4f;
  --down-soft:     #e6f3ec;
  --warn:          #8a6100;
  --warn-soft:     #fbf2e2;
  --mark:          #d9a318;   /* le repère : où on en est dans le mois */

  /* Une couleur par section. Elles sont volontairement PROFONDES et un peu
     sourdes, alors que les couleurs de catégories sont vives : les deux
     familles ne se disputent jamais l'attention. */
  --sec-accueil:   #0f2e2c;
  --sec-depenses:  #1c6f57;
  --sec-analyse:   #4b3f9e;
  --sec-agenda:    #a35418;
  --sec-travaux:   #3f6076;
  --sec-notes:     #96305c;
  --sec-documents: #1f5f86;
  --sec-annee:     #6b3fa0;
  --sec-chercher:  #3b4a46;

  /* Séries (ordre fixe, jamais recyclé) */
  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;  --s4: #eda100;
  --s5: #e87ba4;  --s6: #008300;  --s7: #4a3aa7;  --s8: #e34948;

  /* Le bandeau du mois est sombre dans TOUTES les ambiances : il a ses
     propres jetons, sinon il s'inverserait en ambiance sombre et
     deviendrait illisible. */
  --etat-bg:   #0f2e2c;
  --etat-fg:   #f3f4f2;
  --etat-fg-2: rgba(243, 244, 242, .70);
  --etat-line: rgba(243, 244, 242, .16);
  --etat-plus: #9fe3bf;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Pas d'ombres : des filets. C'est ce qui fait la différence entre une
     interface qui flotte et une interface qui tient. */
  --shadow: none;
  --shadow-lift: none;

  --gap: 18px;
  --pad: 22px;
  --tabbar: 0px;
}

/* ---- Ambiances claires — une carte franche sur un fond teinté. ---- */

/* « Chaud » */
html[data-theme="chaud"] {
  --bg:            #efece5;
  --surface:       #ffffff;
  --surface-soft:  #fcfbfb;
  --surface-hover: #f6f5f5;
  --ink:           #17150f;
  --ink-2:         #5f5e5a;
  --ink-3:         #858380;
  --line:          #dcdbdb;
  --line-strong:   #c6c5c4;
  --accent:        #17150f;
  --accent-ink:    #373631;
  --accent-soft:   #e5e4e0;
  --on-accent:     #f2f0ee;
  --etat-bg:   #17150f;
  --etat-fg:   #f2f0ee;
  --etat-fg-2: rgba(242, 240, 238, .70);
  --etat-line: rgba(242, 240, 238, .16);
  --etat-plus: #9fe3bf;
}

/* « Ardoise » */
html[data-theme="ardoise"] {
  --bg:            #eaeded;
  --surface:       #ffffff;
  --surface-soft:  #fbfbfb;
  --surface-hover: #f5f5f5;
  --ink:           #12201f;
  --ink-2:         #566060;
  --ink-3:         #7d8585;
  --line:          #d9dcdc;
  --line-strong:   #c3c6c6;
  --accent:        #12201f;
  --accent-ink:    #333f3e;
  --accent-soft:   #e2e5e5;
  --on-accent:     #f0f2f1;
  --etat-bg:   #12201f;
  --etat-fg:   #f0f2f1;
  --etat-fg-2: rgba(240, 242, 241, .70);
  --etat-line: rgba(240, 242, 241, .16);
  --etat-plus: #9fe3bf;
}

/* « Brume » */
html[data-theme="brume"] {
  --bg:            #e9eef5;
  --surface:       #ffffff;
  --surface-soft:  #fbfbfc;
  --surface-hover: #f5f5f7;
  --ink:           #17263f;
  --ink-2:         #545f72;
  --ink-3:         #7c8493;
  --line:          #dadce0;
  --line-strong:   #c4c7ce;
  --accent:        #17263f;
  --accent-ink:    #37445a;
  --accent-soft:   #e2e5eb;
  --on-accent:     #eff2f5;
  --etat-bg:   #17263f;
  --etat-fg:   #eff2f5;
  --etat-fg-2: rgba(239, 242, 245, .70);
  --etat-line: rgba(239, 242, 245, .16);
  --etat-plus: #9fe3bf;
}

/* « Menthe » */
html[data-theme="menthe"] {
  --bg:            #e5efe8;
  --surface:       #fbfffc;
  --surface-soft:  #f7fbf8;
  --surface-hover: #f0f5f2;
  --ink:           #123526;
  --ink-2:         #486458;
  --ink-3:         #72887e;
  --line:          #d4ded9;
  --line-strong:   #bcc9c3;
  --accent:        #123526;
  --accent-ink:    #335144;
  --accent-soft:   #dee7e2;
  --on-accent:     #ebf3ee;
  --etat-bg:   #123526;
  --etat-fg:   #ebf3ee;
  --etat-fg-2: rgba(235, 243, 238, .70);
  --etat-line: rgba(235, 243, 238, .16);
  --etat-plus: #9fe3bf;
}

/* ---- Ambiances douces — la carte est teintée elle aussi. ---- */

/* « Lin » */
html[data-theme="lin"] {
  --bg:            #f1e9e0;
  --surface:       #fffbf6;
  --surface-soft:  #fcf7f2;
  --surface-hover: #f6f1ec;
  --ink:           #33251a;
  --ink-2:         #665a51;
  --ink-3:         #8a8078;
  --line:          #ded8d3;
  --line-strong:   #cac3bc;
  --accent:        #33251a;
  --accent-ink:    #504339;
  --accent-soft:   #e8e2da;
  --on-accent:     #f3eee7;
  --etat-bg:   #33251a;
  --etat-fg:   #f3eee7;
  --etat-fg-2: rgba(243, 238, 231, .70);
  --etat-line: rgba(243, 238, 231, .16);
  --etat-plus: #9fe3bf;
}

/* « Sable » */
html[data-theme="sable"] {
  --bg:            #ebe1cf;
  --surface:       #faf5ea;
  --surface-soft:  #f7f1e6;
  --surface-hover: #f1ebe0;
  --ink:           #3b2c15;
  --ink-2:         #635642;
  --ink-3:         #867b69;
  --line:          #d8d1c4;
  --line-strong:   #c4bcae;
  --accent:        #3b2c15;
  --accent-ink:    #564833;
  --accent-soft:   #e3dccc;
  --on-accent:     #eee7d9;
  --etat-bg:   #3b2c15;
  --etat-fg:   #eee7d9;
  --etat-fg-2: rgba(238, 231, 217, .70);
  --etat-line: rgba(238, 231, 217, .16);
  --etat-plus: #9fe3bf;
}

/* « Argile » */
html[data-theme="argile"] {
  --bg:            #f0e2da;
  --surface:       #fffaf7;
  --surface-soft:  #fcf6f3;
  --surface-hover: #f6f0ed;
  --ink:           #46271e;
  --ink-2:         #6d534c;
  --ink-3:         #8e7a73;
  --line:          #dcd2ce;
  --line-strong:   #c9bcb8;
  --accent:        #46271e;
  --accent-ink:    #60453c;
  --accent-soft:   #eaded8;
  --on-accent:     #f4eae5;
  --etat-bg:   #46271e;
  --etat-fg:   #f4eae5;
  --etat-fg-2: rgba(244, 234, 229, .70);
  --etat-line: rgba(244, 234, 229, .16);
  --etat-plus: #9fe3bf;
}

/* « Lavande » */
html[data-theme="lavande"] {
  --bg:            #ebe8f4;
  --surface:       #fcfbff;
  --surface-soft:  #f9f7fc;
  --surface-hover: #f2f1f7;
  --ink:           #291f45;
  --ink-2:         #605876;
  --ink-3:         #857e96;
  --line:          #dad7e1;
  --line-strong:   #c5c2ce;
  --accent:        #291f45;
  --accent-ink:    #473e5f;
  --accent-soft:   #e4e1ec;
  --on-accent:     #efedf6;
  --etat-bg:   #291f45;
  --etat-fg:   #efedf6;
  --etat-fg-2: rgba(239, 237, 246, .70);
  --etat-line: rgba(239, 237, 246, .16);
  --etat-plus: #9fe3bf;
}

/* « Océan » */
html[data-theme="ocean"] {
  --bg:            #e0ecf1;
  --surface:       #f8fcfd;
  --surface-soft:  #f4f8fa;
  --surface-hover: #edf2f4;
  --ink:           #0e3341;
  --ink-2:         #43616c;
  --ink-3:         #6e858e;
  --line:          #d1dbde;
  --line-strong:   #b9c6cb;
  --accent:        #0e3341;
  --accent-ink:    #2f4f5b;
  --accent-soft:   #dae5e8;
  --on-accent:     #e7f0f3;
  --etat-bg:   #0e3341;
  --etat-fg:   #e7f0f3;
  --etat-fg-2: rgba(231, 240, 243, .70);
  --etat-line: rgba(231, 240, 243, .16);
  --etat-plus: #9fe3bf;
}

/* ---- Ambiances sombres — l'encre passe en clair. ---- */

/* « Nuit » */
html[data-theme="nuit"] {
  color-scheme: dark;
  --bg:            #0b1614;
  --surface:       #10201e;
  --surface-soft:  #132320;
  --surface-hover: #182825;
  --ink:           #e8f0ed;
  --ink-2:         #8a9693;
  --ink-3:         #626f6c;
  --line:          #1d2d2a;
  --line-strong:   #2d3c39;
  --accent:        #e8f0ed;
  --accent-ink:    #cad3d0;
  --accent-soft:   #1f2c2a;
  --on-accent:     #152220;

  /* En ambiance sombre les couleurs qui portent un sens
     passent en version claire, sinon elles disparaissent. */
  --up:            #ff7b72;
  --up-soft:       #2f1d1c;
  --down:          #52c48f;
  --down-soft:     #14291f;
  --warn:          #e8b44a;
  --warn-soft:     #2c2312;
  --mark:          #f0bf3f;
  --sec-accueil:   #7fd8c4;
  --sec-depenses:  #5fd3ae;
  --sec-analyse:   #a99bf5;
  --sec-agenda:    #f0a266;
  --sec-travaux:   #92b4cc;
  --sec-notes:     #f090b6;
  --sec-documents: #79bce8;
  --sec-annee:     #c39bf0;
  --sec-chercher:  #a9bcb7;
  --s1: #5a9ce8; --s2: #f0865b; --s3: #3fc796; --s4: #e6b23c;
  --s5: #ef9cbd; --s6: #3fa83f; --s7: #8b7fe0; --s8: #f0736f;
  --etat-bg:   #2f3e3c;
  --etat-fg:   #e8f0ed;
  --etat-fg-2: rgba(232, 240, 237, .70);
  --etat-line: rgba(232, 240, 237, .16);
  --etat-plus: #7fdcae;
}

/* « Encre » */
html[data-theme="encre"] {
  color-scheme: dark;
  --bg:            #0c1220;
  --surface:       #151d2e;
  --surface-soft:  #182030;
  --surface-hover: #1d2535;
  --ink:           #e4eaf5;
  --ink-2:         #8d94a1;
  --ink-3:         #656d7b;
  --line:          #222a3a;
  --line-strong:   #313949;
  --accent:        #e4eaf5;
  --accent-ink:    #c7cdd9;
  --accent-soft:   #212937;
  --on-accent:     #171f2e;

  /* En ambiance sombre les couleurs qui portent un sens
     passent en version claire, sinon elles disparaissent. */
  --up:            #ff7b72;
  --up-soft:       #2f1d1c;
  --down:          #52c48f;
  --down-soft:     #14291f;
  --warn:          #e8b44a;
  --warn-soft:     #2c2312;
  --mark:          #f0bf3f;
  --sec-accueil:   #7fd8c4;
  --sec-depenses:  #5fd3ae;
  --sec-analyse:   #a99bf5;
  --sec-agenda:    #f0a266;
  --sec-travaux:   #92b4cc;
  --sec-notes:     #f090b6;
  --sec-documents: #79bce8;
  --sec-annee:     #c39bf0;
  --sec-chercher:  #a9bcb7;
  --s1: #5a9ce8; --s2: #f0865b; --s3: #3fc796; --s4: #e6b23c;
  --s5: #ef9cbd; --s6: #3fa83f; --s7: #8b7fe0; --s8: #f0736f;
  --etat-bg:   #333b4b;
  --etat-fg:   #e4eaf5;
  --etat-fg-2: rgba(228, 234, 245, .70);
  --etat-line: rgba(228, 234, 245, .16);
  --etat-plus: #7fdcae;
}

/* « Charbon » */
html[data-theme="charbon"] {
  color-scheme: dark;
  --bg:            #131313;
  --surface:       #1d1d1d;
  --surface-soft:  #202020;
  --surface-hover: #252525;
  --ink:           #ececec;
  --ink-2:         #949494;
  --ink-3:         #6c6c6c;
  --line:          #2a2a2a;
  --line-strong:   #393939;
  --accent:        #ececec;
  --accent-ink:    #cfcfcf;
  --accent-soft:   #292929;
  --on-accent:     #1f1f1f;

  /* En ambiance sombre les couleurs qui portent un sens
     passent en version claire, sinon elles disparaissent. */
  --up:            #ff7b72;
  --up-soft:       #2f1d1c;
  --down:          #52c48f;
  --down-soft:     #14291f;
  --warn:          #e8b44a;
  --warn-soft:     #2c2312;
  --mark:          #f0bf3f;
  --sec-accueil:   #7fd8c4;
  --sec-depenses:  #5fd3ae;
  --sec-analyse:   #a99bf5;
  --sec-agenda:    #f0a266;
  --sec-travaux:   #92b4cc;
  --sec-notes:     #f090b6;
  --sec-documents: #79bce8;
  --sec-annee:     #c39bf0;
  --sec-chercher:  #a9bcb7;
  --s1: #5a9ce8; --s2: #f0865b; --s3: #3fc796; --s4: #e6b23c;
  --s5: #ef9cbd; --s6: #3fa83f; --s7: #8b7fe0; --s8: #f0736f;
  --etat-bg:   #3b3b3b;
  --etat-fg:   #ececec;
  --etat-fg-2: rgba(236, 236, 236, .70);
  --etat-line: rgba(236, 236, 236, .16);
  --etat-plus: #7fdcae;
}

/* « Automatique » — Papier le jour, Nuit dès que le téléphone
   passe en sombre. */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --bg:            #0b1614;
    --surface:       #10201e;
    --surface-soft:  #132320;
    --surface-hover: #182825;
    --ink:           #e8f0ed;
    --ink-2:         #8a9693;
    --ink-3:         #626f6c;
    --line:          #1d2d2a;
    --line-strong:   #2d3c39;
    --accent:        #e8f0ed;
    --accent-ink:    #cad3d0;
    --accent-soft:   #1f2c2a;
    --on-accent:     #152220;

    /* En ambiance sombre les couleurs qui portent un sens
       passent en version claire, sinon elles disparaissent. */
    --up:            #ff7b72;
    --up-soft:       #2f1d1c;
    --down:          #52c48f;
    --down-soft:     #14291f;
    --warn:          #e8b44a;
    --warn-soft:     #2c2312;
    --mark:          #f0bf3f;
    --sec-accueil:   #7fd8c4;
    --sec-depenses:  #5fd3ae;
    --sec-analyse:   #a99bf5;
    --sec-agenda:    #f0a266;
    --sec-travaux:   #92b4cc;
    --sec-notes:     #f090b6;
    --sec-documents: #79bce8;
    --sec-annee:     #c39bf0;
    --sec-chercher:  #a9bcb7;
    --s1: #5a9ce8; --s2: #f0865b; --s3: #3fc796; --s4: #e6b23c;
    --s5: #ef9cbd; --s6: #3fa83f; --s7: #8b7fe0; --s8: #f0736f;
    --etat-bg:   #2f3e3c;
    --etat-fg:   #e8f0ed;
    --etat-fg-2: rgba(232, 240, 237, .70);
    --etat-line: rgba(232, 240, 237, .16);
    --etat-plus: #7fdcae;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

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

/* L'accent étant l'encre, un lien perdu au milieu d'un paragraphe ne se
   distinguerait plus : dans le texte courant, il est souligné. Les liens
   qui ont déjà une forme (boutons, pastilles, onglets, cartes) non. */
p a, .dim a, .hint a, .alerte a, .empty a, td a, .note a, .sous a, .muted a {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
p a:hover, .dim a:hover, .hint a:hover, .alerte a:hover, .empty a:hover,
td a:hover, .note a:hover, .sous a:hover, .muted a:hover { text-decoration-color: currentColor; }
a.btn, .nav a, .tabbar a, .subnav a { text-decoration: none !important; }

h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

/* ============ En-tête ============ */

.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.top-in {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  height: 62px; display: flex; align-items: center; gap: 28px;
}
.brand {
  font-weight: 700; font-size: 1rem; color: var(--ink);
  letter-spacing: -0.02em; white-space: nowrap;
}
.brand:hover { color: var(--ink); }

.nav { display: flex; gap: 2px; flex: 1; }
.nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 0.88rem; font-weight: 550;
  transition: background .12s, color .12s;
}
.nav a .ic { color: var(--sec, var(--ink-3)); opacity: .85; }
.nav a:hover .ic, .nav a.on .ic { opacity: 1; }
.nav a.on { color: var(--sec, var(--accent)); background: color-mix(in srgb, var(--sec, var(--accent)) 11%, transparent); }
.tabs a.on, .tabs button.on { color: var(--sec, var(--accent)); background: color-mix(in srgb, var(--sec, var(--accent)) 12%, transparent); }
.tabs a.on .ic, .tabs button.on .ic { color: var(--sec, var(--accent)); }
@media (max-width: 1120px) {
  /* Quand la place manque, l'icône suffit à repérer la section. */
  .nav a { padding: 8px 10px; gap: 0; }
  .nav a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav a.on span { position: static; width: auto; height: auto; clip: auto; margin-left: 7px; }
}
.nav a:hover { background: var(--surface-hover); color: var(--ink); }
.nav a.on { font-weight: 650; }

.who {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink-2);
  font-size: 0.86rem; font-weight: 600; white-space: nowrap;
}
.who:hover { background: var(--surface-hover); color: var(--ink); }
.who i { width: 7px; height: 7px; border-radius: 50%; background: var(--u); flex-shrink: 0; }

/* Barre d'onglets mobile */
.tabs { display: none; }

/* ============ Page ============ */

.wrap { max-width: 1120px; margin: 0 auto; padding: 34px 24px calc(72px + var(--tabbar)); }

/* ------------------------------------------------------------------
   L'espacement de la page, une fois pour toutes.

   Chaque bloc de premier niveau est séparé du précédent. Avant, seules
   deux cartes qui se suivaient l'étaient (.box + .box) : une grille
   suivie d'une carte, ou deux grilles de suite, se touchaient — on
   croyait lire un seul bloc. Les marges verticales voisines fusionnent,
   donc rien ne se cumule avec les marges déjà posées ailleurs.
   ------------------------------------------------------------------ */
.wrap > * + * { margin-top: var(--gap); }
.wrap > .subnav + * { margin-top: 0; }

/* Un filet de couleur sous le titre : on sait dans quelle section on est,
   sans avoir à lire le fil d'Ariane. */
.head h1::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  margin-top: 9px; background: var(--sec, var(--accent));
}
.head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 26px;
}
.head .sub { color: var(--ink-3); font-size: 0.9rem; margin-top: 3px; }

/* Sous-navigation discrète (réglages d'une section) */
.subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: -12px 0 22px;
}
.subnav a {
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 0.84rem; font-weight: 600; color: var(--ink-3);
  border: 1px solid transparent;
}
.subnav a:hover { background: var(--surface-hover); color: var(--ink); }
.subnav a.on { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.subnav a.on { box-shadow: inset 0 0 0 1px var(--line); }

/* Filtres de contenu (Historique). Volontairement différents de .subnav :
   deux rangées de pastilles identiques l'une sous l'autre, on ne sait plus
   laquelle change de page et laquelle filtre la liste. */
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres a {
  padding: 4px 10px; border-radius: 7px;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-3);
  background: var(--surface-hover); border: 1px solid transparent;
}
.filtres a:hover { color: var(--ink); border-color: var(--line); }
.filtres a.on { background: var(--accent); color: var(--on-accent); }

/* ============ Blocs ============ */

.box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
}
.box + .box { margin-top: var(--gap); }
/* Dans une grille ou une pile, l'espacement vient de gap : pas de marge en plus,
   sinon les tuiles voisines se décalent vers le bas. */
.grid > .box, .stack > .box { margin-top: 0; }
.box-tight { padding: 18px 20px; }
.box-flush { padding: 0; overflow: hidden; }

.box-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.box-head:last-child { margin-bottom: 0; }
.box-flush .box-head { padding: 20px 22px 0; margin-bottom: 14px; }

.grid { display: grid; gap: var(--gap); align-items: stretch; }
.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)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.stack { display: flex; flex-direction: column; gap: var(--gap); align-content: start; }

@media (max-width: 980px) {
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-2-1, .g-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .g2, .g3 { grid-template-columns: 1fr; }
}

/* ============ Chiffres ============ */

.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi .lbl {
  font-size: 0.72rem; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.kpi .val {
  font-size: 1.7rem; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.2; margin-top: 2px;
}
.kpi .val.sm { font-size: 1.15rem; }
.kpi .note { font-size: 0.83rem; color: var(--ink-3); font-weight: 500; }

.hero { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }

.delta { font-size: 0.83rem; font-weight: 650; display: inline-flex; align-items: center; gap: 4px; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta.flat { color: var(--ink-3); }

.tag-up   { background: var(--up-soft);   color: var(--up);   }
.tag-down { background: var(--down-soft); color: var(--down); }
.tag-up, .tag-down {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}

/* ============ Boutons ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: none;
  font: inherit; font-size: 0.89rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { text-decoration: none; }
.btn-1 { background: var(--accent); color: var(--on-accent); }
.btn-1:hover { background: var(--accent-ink); color: var(--on-accent); }
.btn-2 { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.btn-2:hover { background: var(--surface-hover); color: var(--ink); }
.btn-3 { color: var(--ink-2); }
.btn-3:hover { background: var(--surface-hover); color: var(--ink); }
.btn-x { color: var(--ink-3); }
.btn-x:hover { background: var(--up-soft); color: var(--up); }
.btn-s { padding: 5px 10px; font-size: 0.82rem; }
.btn-full { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============ Formulaires ============ */

label { display: block; font-size: 0.83rem; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=date], input[type=time], input[type=file],
select, textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.92rem;
  transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 70px; line-height: 1.55; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.hint { font-size: 0.78rem; color: var(--ink-3); margin: 5px 0 0; }

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; min-width: 0; }
.row > .wide { flex: 2 1 240px; }
.acts { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 18px; }

/* Ligne de saisie rapide */
.quick {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 16px 18px; background: var(--surface-soft);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.quick > * { flex: 1 1 130px; min-width: 0; }
.quick > .wide { flex: 2 1 200px; }
.quick > .fit { flex: 0 0 auto; }
.quick label { font-size: 0.75rem; margin-bottom: 4px; }

/* Panneau repliable */
details.fold { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 4px; }
details.fold > summary {
  list-style: none; cursor: pointer; padding: 12px 0;
  font-size: 0.88rem; font-weight: 650; color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: '›'; display: inline-block; font-size: 1.1rem; line-height: 1;
  transition: transform .15s; color: var(--ink-3);
}
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary:hover { color: var(--ink); }
details.fold .fold-body { padding: 4px 0 18px; }

/* ============ Barre d'outils ============ */

.tools {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 18px;
}
.tools .f { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 120px; }
.tools .f.grow { flex: 1 1 220px; }
.tools label { font-size: 0.74rem; margin-bottom: 4px; }
.tools input, .tools select { padding: 7px 11px; font-size: 0.88rem; }

.monthnav { display: inline-flex; align-items: center; gap: 2px; }
.monthnav .m {
  font-weight: 650; padding: 0 12px; white-space: nowrap; font-size: 0.98rem;
  min-width: 130px; text-align: center;
}
.monthnav .btn { padding: 7px 12px; }

/* ============ Tableaux ============ */

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 12px 14px; }
th {
  font-size: 0.71rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--ink-3); white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
th a { color: inherit; display: inline-flex; gap: 4px; align-items: center; }
th a:hover { color: var(--ink); }
th a.s { color: var(--accent); }
td { border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-soft); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.act { text-align: right; white-space: nowrap; }
.act form { display: inline; }
tfoot td { font-weight: 700; border-top: 1px solid var(--line-strong); border-bottom: none; }
.box-flush table th:first-child, .box-flush table td:first-child { padding-left: 22px; }
.box-flush table th:last-child,  .box-flush table td:last-child  { padding-right: 22px; }

/* ============ Pastilles ============ */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 650; white-space: nowrap;
  background: color-mix(in srgb, var(--c, var(--accent)) 13%, transparent);
  color: var(--c, var(--accent));
}
.dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; background: var(--c, var(--accent)); }

.state {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: var(--r-pill); font-size: 0.76rem; font-weight: 700; white-space: nowrap;
}
.st-a_prevoir, .st-en_attente { background: var(--surface-hover); color: var(--ink-2); }
.st-en_cours { background: var(--warn-soft); color: var(--warn); }
.st-termine, .st-accepte { background: var(--down-soft); color: var(--down); }
.st-annule, .st-refuse { background: var(--up-soft); color: var(--up); }
.pr-haute { color: var(--up); font-weight: 650; }
.pr-moyenne, .pr-normale { color: var(--warn); font-weight: 650; }
.pr-basse { color: var(--ink-3); font-weight: 650; }

/* ============ Jauges ============ */

.bar { background: var(--line); border-radius: var(--r-pill); height: 6px; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); transition: width .3s; }
.bar > i.w { background: var(--s4); }
.bar > i.o { background: var(--up); }

/* Barres divergentes (hausse / baisse par catégorie) */
.div-row { display: grid; grid-template-columns: minmax(0,1fr) 2fr auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.div-row > .pill { justify-self: start; }
.div-row:last-child { border-bottom: none; }
.div-track { position: relative; height: 22px; }
.div-track::before {
  content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px; background: var(--line-strong);
}
.div-bar { position: absolute; top: 4px; height: 14px; border-radius: 3px; }
.div-bar.up   { left: 50%; background: var(--up); }
.div-bar.down { right: 50%; background: var(--down); }

/* ============ Agenda ============ */

.cal { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cal th {
  padding: 0 0 10px; text-align: center; border: none;
  font-size: 0.7rem; color: var(--ink-3);
}
.cal td {
  border: none; padding: 2px; vertical-align: top;
  height: 92px; width: 14.28%;
}
.day {
  height: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 7px; background: var(--surface);
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.day.out { background: var(--surface-soft); border-color: transparent; }
.day.out .dnum { color: var(--ink-3); opacity: .55; }
.day.now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dnum { font-size: 0.78rem; font-weight: 650; color: var(--ink-2); }
.day.now .dnum { color: var(--accent); }
.ev {
  font-size: 0.72rem; line-height: 1.3; padding: 2px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--c, var(--accent)) 15%, transparent);
  color: var(--c, var(--accent)); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 2px solid var(--c, var(--accent));
}
.ev:hover { filter: brightness(.94); }
.more { font-size: 0.68rem; color: var(--ink-3); font-weight: 600; padding-left: 3px; }

.ev-line { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ev-line:last-child { border-bottom: none; }
.ev-when { flex: 0 0 104px; font-size: 0.82rem; color: var(--ink-3); font-weight: 600; }
.ev-body { flex: 1; min-width: 0; }
.ev-meta { font-size: 0.8rem; color: var(--ink-3); }

/* ============ Tâches ============ */

.todo { display: flex; flex-direction: column; }
.todo-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.todo-item:last-child { border-bottom: none; }
.todo-item.done .todo-title { color: var(--ink-3); text-decoration: line-through; }
.check {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; color: var(--on-accent); line-height: 1;
  transition: background .12s, border-color .12s;
}
.check:hover { border-color: var(--accent); }
.check.on { background: var(--accent); border-color: var(--accent); }
.todo-body { flex: 1; min-width: 0; }
.todo-title { font-weight: 550; }
.todo-meta { font-size: 0.79rem; color: var(--ink-3); display: flex; gap: 9px; flex-wrap: wrap; margin-top: 2px; }
.todo-meta .late { color: var(--up); font-weight: 650; }

/* ============ Documents ============ */

.docs { display: flex; flex-direction: column; }
.doc {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.doc:last-child { border-bottom: none; }
.doc-ic { font-size: 1.25rem; flex-shrink: 0; line-height: 1; }
.doc-b { flex: 1; min-width: 0; }
.doc-n { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-m { font-size: 0.79rem; color: var(--ink-3); }
.drop {
  display: block; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 24px; text-align: center; color: var(--ink-3); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.drop input[type=file] { display: none; }
.drop .fname { color: var(--ink); font-weight: 600; margin-top: 6px; font-size: 0.88rem; }

/* ============ Fil d'activité ============ */

.feed { display: flex; flex-direction: column; }
.fi { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.fi:last-child { border-bottom: none; }
.av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: var(--on-accent); background: var(--c, var(--accent));
}
.fi-b { flex: 1; min-width: 0; font-size: 0.88rem; line-height: 1.5; }
.fi-t { font-size: 0.78rem; color: var(--ink-3); white-space: nowrap; }
.fi-v { color: var(--ink-2); }

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

.msgs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.msg {
  padding: 12px 16px; border-radius: var(--r-md); font-size: 0.9rem;
  border: 1px solid; animation: in .2s ease;
}
@keyframes in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.msg-ok  { background: var(--down-soft); color: var(--down); border-color: color-mix(in srgb, var(--down) 30%, transparent); }
.msg-err { background: var(--up-soft);   color: var(--up);   border-color: color-mix(in srgb, var(--up) 30%, transparent); }
.msg-info{ background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ============ Vide ============ */

.empty { text-align: center; padding: 34px 20px; color: var(--ink-3); font-size: 0.9rem; }
.empty b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 3px; }

/* ============ Graphiques ============ */

.chart { position: relative; height: 260px; }
.chart.sm { height: 200px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 16px; font-size: 0.82rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

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

.auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg);
}
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 1.35rem; margin-bottom: 4px; }
.auth-card .sub { color: var(--ink-3); font-size: 0.9rem; margin-bottom: 22px; }
.auth-card label { margin-top: 16px; }
.auth-foot { text-align: center; margin-top: 20px; font-size: 0.86rem; color: var(--ink-3); }

/* ============ Utilitaires ============ */

.muted { color: var(--ink-3); }
.dim   { color: var(--ink-2); }
.up-c  { color: var(--up); }
.down-c{ color: var(--down); }
.right { text-align: right; }
.nowrap{ white-space: nowrap; }
.small { font-size: 0.83rem; }
.tiny  { font-size: 0.76rem; }
.strong{ font-weight: 650; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt1 { margin-top: 10px; } .mt2 { margin-top: 20px; } .mt3 { margin-top: 30px; }
.flex { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.wrap-f { flex-wrap: wrap; }
.sep { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ Mobile ============ */

@media (max-width: 860px) {
  :root { --tabbar: 60px; --pad: 20px; --gap: 16px; }

  .top { position: static; }
  .top-in { height: 56px; padding: 0 16px; gap: 12px; }
  .top-in .nav { display: none; }
  .wrap { padding: 22px 16px calc(30px + var(--tabbar)); }
  h1 { font-size: 1.35rem; }
  .hero { font-size: 2.1rem; }

  .tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 5px 2px calc(5px + env(safe-area-inset-bottom));
  }
  .tabs a, .tabs button {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; gap: 2px; padding: 5px 2px;
    border: none; background: transparent; font-family: inherit; cursor: pointer;
    border-radius: var(--r-sm); color: var(--ink-3);
    font-size: 0.66rem; font-weight: 650;
  }
  .tabs a.on, .tabs button.on { color: var(--accent); background: var(--accent-soft); }
  .tabs a:active, .tabs button:active { background: var(--surface-hover); }
  .tabs .ti { display: flex; line-height: 0; }
  .tabs .tl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .cal td { height: auto; min-height: 56px; padding: 1px; }
  .day { min-height: 56px; padding: 4px; }
  .ev { font-size: 0.62rem; padding: 1px 3px; }
  .div-row { grid-template-columns: 1fr; gap: 6px; }
  th, td { padding: 10px 10px; }
  .box-flush table th:first-child, .box-flush table td:first-child { padding-left: 16px; }
  .box-flush table th:last-child,  .box-flush table td:last-child  { padding-right: 16px; }
}

@media print {
  .top, .tabs, .tools, .acts, .btn { display: none !important; }
  body { background: #fff; }
  .box { break-inside: avoid; border-color: #ddd; }
}

/* ----------------------------------------------------------------
   Sélecteur d'ambiance (profil)

   La vignette n'est pas une rangée de pastilles : c'est une page en
   miniature. On y voit le fond, la carte POSÉE dessus, et l'encre —
   les trois couleurs qui font l'ambiance, dans le rapport où on les
   verra vraiment. Une pastille ronde ne dit rien de tout ça.
   ---------------------------------------------------------------- */
.fam + .fam { margin-top: 22px; }
.fam-t {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); margin: 0 0 10px;
}
.fam-t span {
  display: block; text-transform: none; letter-spacing: 0;
  font-size: 0.86rem; font-weight: 400; color: var(--ink-3); margin-top: 2px;
}
.themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 12px;
}
.th {
  display: flex; flex-direction: column; gap: 9px; align-items: stretch;
  padding: 9px; cursor: pointer; text-align: left;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.th:hover { border-color: var(--accent); }
.th.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent);
}
.th-v {
  display: flex; overflow: hidden;
  height: 58px; border-radius: var(--r-sm);
  border: 1px solid rgba(0, 0, 0, .13);
}
/* Une moitié = un trio complet. « Automatique » en a deux, les autres une. */
.th-p {
  flex: 1 1 0; min-width: 0; display: flex;
  padding: 7px; background: var(--f);
}
.th-carte {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding: 0 8px; min-width: 0;
  background: var(--c); border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--a) 14%, var(--c));
}
.th-carte > i { display: block; height: 3px; border-radius: 2px; background: var(--a); }
.th-carte > i:first-child { width: 78%; }
.th-carte > i:nth-child(2) { width: 48%; opacity: .42; }
.th-carte > b { display: block; width: 30px; height: 9px; border-radius: 3px; background: var(--a); margin-top: 3px; }
.th-n { font-size: .84rem; font-weight: 600; }

/* ---------- « Où part l'argent » (accueil) ---------- */
.repart { display: grid; grid-template-columns: 172px 1fr; gap: 20px; align-items: center; }
.repart-c { position: relative; width: 172px; height: 172px; }
.repart-c canvas { position: absolute; inset: 0; }
/* Le total au centre du cercle : l'information la plus utile au premier regard. */
.repart-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; text-align: center;
}
.repart-t { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.repart-l { font-size: .74rem; color: var(--ink-3); }

.repart-l8 { list-style: none; margin: 0; padding: 0; }
.repart-l8 li {
  display: grid; grid-template-columns: 9px 1fr auto auto;
  align-items: center; column-gap: 9px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
  font-size: .87rem;
}
.repart-l8 li:last-child { border-bottom: 0; }
.repart-l8 .rn { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repart-l8 .rp { color: var(--ink-3); font-size: .78rem; min-width: 34px; text-align: right; }
.repart-l8 .rv { font-weight: 650; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }

@media (max-width: 620px) {
  .repart { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .repart-l8 { width: 100%; }
}

/* ---------- Repères pour choisir un budget ---------- */
.repere { display: grid; gap: 12px; }
.repere > div {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 14px;
  padding-bottom: 11px; border-bottom: 1px solid var(--line);
}
.repere > div:last-child { border-bottom: 0; padding-bottom: 0; }
.repere .r-l { font-weight: 600; font-size: .9rem; }
.repere .r-v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.repere .r-n { grid-column: 1 / -1; color: var(--ink-3); font-size: .8rem; margin-top: 1px; }

/* ============================================================
   Composants ajoutés — v4
   ============================================================ */

/* ---------- Recherche dans l'en-tête ---------- */
.rech { flex: 0 1 230px; min-width: 0; }
.rech input {
  width: 100%; height: 36px; margin: 0; padding: 0 12px 0 32px;
  font-size: .87rem; border-radius: var(--r-pill);
  background: var(--surface-soft) no-repeat 11px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2386867d' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E");
  background-size: 14px;
}
.rech input:focus { background-color: var(--surface); }

/* Page de recherche */
.rech-form { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.rech-form input { margin: 0; flex: 1 1 auto; height: 44px; font-size: 1rem; }
.rech-form button { flex: 0 0 auto; }

.res { display: flex; flex-direction: column; }
.res-l {
  display: grid; grid-template-columns: 9px 1fr auto;
  align-items: center; gap: 12px;
  padding: 13px var(--pad); color: var(--ink);
  border-top: 1px solid var(--line);
  transition: background .12s;
}
.res-l:hover { background: var(--surface-hover); color: var(--ink); }
.res-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.res-t strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-v { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dot-n { background: var(--line-strong); }

/* ---------- Cases à cocher explicatives ---------- */
.coche {
  display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-soft); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.coche:hover { border-color: var(--line-strong); }
.coche:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.coche input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.coche strong { display: block; font-size: .9rem; font-weight: 650; }
.coche em { display: block; font-style: normal; color: var(--ink-3); font-size: .81rem; line-height: 1.45; margin-top: 2px; }

/* ---------- Étiquette « exceptionnelle » / « hors budget » ---------- */
.tag-exc {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: var(--r-pill); font-size: .7rem; font-weight: 650;
  background: var(--warn-soft); color: var(--warn);
  vertical-align: middle;
}

/* ---------- Bandeau d'alerte ---------- */
.alerte {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  padding: 15px 18px; border-radius: var(--r-md); margin-bottom: 22px;
  border: 1px solid; font-size: .91rem; line-height: 1.55;
}
.alerte a { font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.al-i {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem; color: var(--on-accent);
}
.al-rouge  { background: var(--up-soft); border-color: color-mix(in srgb, var(--up) 32%, transparent); color: var(--up); }
.al-rouge .al-i { background: var(--up); }
.al-rouge a { color: var(--up); }
.al-orange { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); color: var(--warn); }
.al-orange .al-i { background: var(--warn); }
.al-orange a { color: var(--warn); }

/* ---------- Tâches dans le calendrier ---------- */
/* Un rendez-vous est plein, une tâche est creuse avec sa case à cocher :
   la différence se lit sans avoir à réfléchir. */
.tk {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.68rem; line-height: 1.3; padding: 1px 5px 1px 3px;
  border-radius: 5px; border: 1px dashed var(--line-strong);
  color: var(--ink-2); background: transparent;
  overflow: hidden;
}
/* Les points de suspension ne s'appliquent qu'à un élément, pas à un simple
   texte dans un conteneur flex : d'où ce span. */
.tk-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk:hover { background: var(--surface-hover); color: var(--ink); }
.tk-c {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px;
  border: 1.5px solid var(--ink-3); font-size: 7px; line-height: 7px;
  display: flex; align-items: center; justify-content: center; color: var(--on-accent);
}
.tk.retard { border-color: color-mix(in srgb, var(--up) 55%, transparent); color: var(--up); }
.tk.retard .tk-c { border-color: var(--up); }
.tk.fait { opacity: .5; text-decoration: line-through; }
.tk.fait .tk-c { background: var(--down); border-color: var(--down); }

.cal-leg {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 12px; font-size: .76rem; color: var(--ink-3);
}
.cal-leg span { display: inline-flex; align-items: center; gap: 6px; }
.cal-leg i { width: 15px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-ev { background: var(--accent); }
.lg-tk { border: 1px dashed var(--line-strong); }
.lg-rt { border: 1px dashed color-mix(in srgb, var(--up) 55%, transparent); background: var(--up-soft); }

/* ---------- Échéances à venir ---------- */
.avenir { display: flex; flex-direction: column; }
.av-l {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.av-l:last-child { border-bottom: 0; }
.av-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.av-m { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-m.proche { color: var(--warn); }

/* ---------- Vue annuelle ---------- */
.chart-h { height: 320px; }

/* La grille de l'année est large par nature : on la laisse déborder dans son
   conteneur défilant plutôt que de laisser les montants se casser en trois
   lignes, ce qui la rendait illisible. */
table.annee { font-size: .82rem; min-width: 940px; }
table.annee th, table.annee td { padding: 7px 8px; white-space: nowrap; }
table.annee .col-cat { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 168px; }
table.annee thead .col-cat { background: var(--surface-soft); }
table.annee tfoot .col-cat { background: var(--surface-soft); }
table.annee .cell {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: color-mix(in srgb, var(--c) calc(var(--i) * 26%), transparent);
  border-radius: 4px;
}
table.annee th.futur { color: var(--ink-3); opacity: .5; }


/* ---------- Photo depuis l'appareil ---------- */
.vh-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-b { margin-top: 8px; }

/* ---------- Respiration générale ---------- */
/* Un titre de page n'a pas besoin d'être collé à son contenu : quelques
   pixels de plus rendent la lecture beaucoup plus calme. */
/* Un filet de couleur sous le titre : on sait dans quelle section on est,
   sans avoir à lire le fil d'Ariane. */
.head h1::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  margin-top: 9px; background: var(--sec, var(--accent));
}
.head { margin-bottom: 26px; }
.subnav { margin-bottom: 24px; }
.dim { line-height: 1.65; max-width: 72ch; }
.box-head { margin-bottom: 16px; }
.box-head h2 { letter-spacing: -0.01em; }
.empty { padding: 42px 24px; }
.empty .vh {
  position: static; width: auto; height: auto; clip: auto;
  display: block; font-size: 1.7rem; margin-bottom: 10px; opacity: .55;
}
.kpi .val { letter-spacing: -0.025em; }

/* Au-delà d'un certain resserrement, les mois se réduisent à leur initiale. */
@media (max-width: 1100px) {
  table.annee .vh-m { display: none; }
  table.annee { min-width: 760px; }
}

@media (max-width: 860px) {
  .rech { display: none; }   /* remplacée par l'onglet Chercher en bas */
  .rech-form { flex-direction: column; align-items: stretch; }
  .rech-form button { width: 100%; }
  .alerte { padding: 13px 14px; gap: 10px; font-size: .87rem; }
  .res-l { padding-left: 16px; padding-right: 16px; }
  .tabs a { font-size: 0.56rem; }
  table.annee .col-cat { min-width: 140px; }
}

/* Un rythme ou un montant qui se casse sur trois lignes rend un tableau
   illisible : ces colonnes restent d'un seul tenant, le tableau défile. */
.scroll table td.num, .scroll table th.num { white-space: nowrap; }

/* Sur téléphone, les tuiles font environ 165 px de large : un montant à quatre
   chiffres doit tenir sur une ligne, quitte à réduire un peu la taille.
   clamp() fait le travail sans casser l'affichage sur les grands écrans. */
@media (max-width: 640px) {
  .kpi .val {
    font-size: clamp(1.05rem, 6.6vw, 1.5rem);
    white-space: nowrap;
  }
  .kpi .val.sm { font-size: 1rem; }
  .kpi .lbl { font-size: .66rem; letter-spacing: .05em; }
  .kpi .note, .kpi .delta { font-size: .76rem; }
}

/* Sept onglets sur un écran de 360 px : on serre juste ce qu'il faut. */
/* Cinq onglets tiennent sans se serrer, même à 360 px : c'était tout l'intérêt
   de descendre de sept à cinq. */
@media (max-width: 400px) {
  .tabs a, .tabs button { font-size: 0.62rem; }
}

/* ============================================================
   v6 — la saisie d'abord
   ============================================================ */

/* ---------- Bouton flottant ---------- */
/* Présent sur toutes les pages : noter une dépense ne doit jamais demander
   de changer d'écran d'abord. */
.fab {
  position: fixed; z-index: 45;
  right: 22px; bottom: calc(22px + var(--tabbar) + env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font-size: 1.9rem; font-weight: 300; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.14);
  transition: transform .12s, background .12s;
}
.fab:hover { background: var(--accent-ink); }
.fab:active { transform: scale(.94); }
body.sheet-open .fab { display: none; }

/* ---------- Feuilles ---------- */
.sheet {
  border: none; padding: 0; background: transparent;
  width: min(560px, 100%); max-width: 100%;
  max-height: 100dvh;
  margin: auto;
}
.sheet::backdrop { background: rgba(16,15,12,.45); backdrop-filter: blur(2px); }
.sheet-in {
  display: flex; flex-direction: column;
  max-height: 88dvh;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.sheet-head h2 { font-size: 1.05rem; }
.sheet-x {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: .9rem; cursor: pointer;
}
.sheet-x:hover { background: var(--surface-hover); color: var(--ink); }
.sheet-body { padding: 18px 20px; overflow-y: auto; flex: 1 1 auto; }
.sheet-pied {
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface-soft);
  flex: 0 0 auto;
}

.sr-l {
  display: block; font-size: .78rem; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px;
}
.sr-l:first-child { margin-top: 0; }

/* Le montant : gros, aligné à gauche, clavier numérique. C'est le premier
   geste et il doit être impossible à rater. */
.sr-montant { position: relative; }
.sr-montant input {
  margin: 0; height: 62px; padding: 0 46px 0 16px;
  font-size: 2rem; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.sr-montant span {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 600; color: var(--ink-3); pointer-events: none;
}
.sheet-body > input[type="text"] { margin: 0; height: 46px; }

/* ---------- Pastilles de catégorie ---------- */
/* Une frappe au lieu de trois. La couleur de la catégorie sert de repère :
   on finit par viser la bonne pastille sans lire. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; padding: 8px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: .87rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
}
.chip:hover span { border-color: var(--c); }
.chip input:checked + span {
  background: color-mix(in srgb, var(--c) 15%, transparent);
  border-color: var(--c); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--c);
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Un éclat bref quand la catégorie a été devinée : on voit que ça a bougé,
   sans que ça bloque quoi que ce soit. */
.chip.devine span { animation: devine .9s ease; }
@keyframes devine {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--c); }
  30%      { box-shadow: inset 0 0 0 1px var(--c), 0 0 0 5px color-mix(in srgb, var(--c) 28%, transparent); }
}

/* ---------- Quand ---------- */
.sr-quand { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.jour {
  padding: 9px 15px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); font-size: .87rem; font-weight: 600;
}
.jour:hover { border-color: var(--accent); }
.jour.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.sr-quand input[type="date"] { margin: 0; width: auto; flex: 1 1 150px; height: 40px; }
.sr-plus { margin-top: 18px; }

.btn-lg { height: 50px; font-size: 1rem; }

/* ---------- Menu « Plus » ---------- */
.mp-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.mp-l {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-radius: var(--r-md);
  color: var(--ink); font-weight: 600; font-size: .92rem;
}
.mp-l:hover { background: var(--surface-hover); color: var(--ink); }
.mp-l .ic { flex: 0 0 auto; color: var(--ink-3); }
.mp-l:hover .ic { color: var(--ink-2); }
.mp-out { color: var(--up); }
.mp-out .ic { color: var(--up); }

/* Un intertitre par groupe : on sait pourquoi on ouvre cette feuille. */
.mp-t {
  display: block; margin: 18px 4px 7px;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.mp-t:first-child { margin-top: 4px; }
.mp-fin { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }

/* La recherche, en haut : sur téléphone, c'est d'ici qu'on cherche. */
.mp-rech {
  display: flex; align-items: center; gap: 9px;
  padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface-soft);
}
.mp-rech .ic { color: var(--ink-3); flex: 0 0 auto; }
.mp-rech input {
  margin: 0; border: 0; background: transparent; height: 46px; padding: 0;
  font-size: 1rem; flex: 1 1 auto; min-width: 0;
}
.mp-rech input:focus { outline: none; }
.mp-rech:focus-within { border-color: var(--accent); }

/* ---------- Bandeau « annuler » ---------- */
/* On laisse faire, et on propose de revenir en arrière : c'est moins coûteux
   qu'une demande de confirmation avant chaque geste. */
.undo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 18px; margin-bottom: 18px;
  border-radius: var(--r-md);
  background: var(--ink); color: var(--surface);
  font-size: .9rem; font-weight: 600;
  animation: undo-in .22s ease;
}
@keyframes undo-in { from { opacity: 0; transform: translateY(-6px); } }
.undo-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.undo-b {
  flex: 0 0 auto; padding: 7px 15px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.3); background: transparent;
  color: var(--surface); font: inherit; cursor: pointer;
}
.undo-b:hover { background: rgba(255,255,255,.14); }

/* ---------- Alerte d'information ---------- */
.al-info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent-ink); }
.al-info .al-i { background: var(--accent); }
.al-info a { color: var(--accent-ink); }

/* ---------- Revenus / reste à vivre sous le camembert ---------- */
.ligne-rv {
  display: grid; grid-template-columns: 1fr auto 1fr auto;
  gap: 6px 14px; align-items: baseline;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .87rem; color: var(--ink-3);
}
.ligne-rv > :nth-child(2), .ligne-rv > :nth-child(4) {
  font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- Agenda : bascule Mois / Liste ---------- */
.vues { display: flex; gap: 4px; margin-bottom: 16px; }
.v-b {
  padding: 7px 15px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-3); font: inherit; font-size: .86rem; font-weight: 650;
}
.v-b:hover { color: var(--ink); background: var(--surface-hover); }

/* Trois états : « auto » laisse la largeur d'écran décider — grille sur
   ordinateur, liste sur téléphone, parce qu'une grille de sept colonnes de
   45 px n'apprend rien. Les deux boutons forcent l'un ou l'autre. */
.v-b.on { color: var(--ink); background: var(--surface-hover); border-color: var(--line); }

[data-vues="auto"]  .v-mois  { display: block; }
[data-vues="auto"]  .v-liste { display: none; }
[data-vues="mois"]  .v-mois  { display: block; }
[data-vues="mois"]  .v-liste { display: none; }
[data-vues="liste"] .v-mois  { display: none; }
[data-vues="liste"] .v-liste { display: block; }

/* L'état visuel du bouton suit le même raisonnement, sans JavaScript. */
[data-vues="auto"] .v-mois-b,
[data-vues="mois"] .v-mois-b,
[data-vues="liste"] .v-liste-b { color: var(--ink); background: var(--surface-hover); border-color: var(--line); }

@media (max-width: 860px) {
  [data-vues="auto"] .v-mois  { display: none; }
  [data-vues="auto"] .v-liste { display: block; }
  [data-vues="auto"] .v-mois-b { color: var(--ink-3); background: transparent; border-color: transparent; }
  [data-vues="auto"] .v-liste-b { color: var(--ink); background: var(--surface-hover); border-color: var(--line); }
}

.jr { display: grid; grid-template-columns: 108px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.jr:last-child { border-bottom: 0; }
.jr-d { font-size: .82rem; font-weight: 700; color: var(--ink-2); padding-top: 8px; }
.jr-retard .jr-d { color: var(--up); }
.jr-i { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-l {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink); min-width: 0;
}
a.jr-l:hover { background: var(--surface-hover); color: var(--ink); }
.jr-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jr-t strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-tache { background: var(--surface-soft); }

/* ---------- Retour tactile ---------- */
/* Un bouton qui ne réagit pas au doigt donne l'impression que rien ne s'est
   passé, et on appuie deux fois. */
.btn:active, .jour:active, .v-b:active, .chip:active span, .undo-b:active, .sheet-x:active {
  transform: translateY(1px);
}
.btn { transition: background .12s, border-color .12s, color .12s, transform .06s; }

@media (max-width: 860px) {
  .sheet { width: 100%; margin: 0; align-self: flex-end; max-width: 100%; }
  .sheet-in {
    max-height: 92dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: none;
  }
  /* La feuille arrive du bas : c'est le geste attendu sur téléphone. */
  .sheet[open] { animation: sheet-up .2s ease; }
  @keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } }
  .mp-g { grid-template-columns: 1fr; }
  .chip span { padding: 10px 13px; font-size: .87rem; }
  .jr { grid-template-columns: 1fr; gap: 4px; }
  .jr-d { padding-top: 0; }
  .undo { position: sticky; top: 8px; z-index: 30; }
}

/* Sur téléphone, trois tuiles pleine largeur poussaient tout le reste sous la
   ligne de flottaison. On les resserre : les chiffres du mois tiennent alors
   dans le premier écran, ce qui est bien leur seul intérêt. */
@media (max-width: 640px) {
  .grid.g3 > .box-tight.kpi { padding: 13px 15px; }
  .grid.g3 { gap: 10px; }
  .kpi .note, .kpi .delta { line-height: 1.4; }
}

/* Les flèches d'un champ nombre n'ont aucun sens pour un montant : on saisit
   au clavier, on ne fait pas défiler les euros un par un. */
.sr-montant input::-webkit-outer-spin-button,
.sr-montant input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sr-montant input { -moz-appearance: textfield; appearance: textfield; }

/* ============================================================
   La projection de fin de mois, sous le budget.
   La barre dit où on en est ; cette ligne dit où l'on va.
   ============================================================ */
.kpi .proj {
  display: block; margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed var(--line);
  font-size: .82rem; color: var(--ink-3); font-weight: 500; line-height: 1.45;
}
.kpi .proj strong { color: var(--ink); font-weight: 700; }

/* Doublon probable : le bandeau d'annulation porte la remarque, il n'y a
   pas de fenêtre de confirmation en plus. */
.undo-a {
  display: block; margin-top: 3px;
  font-size: .82rem; font-weight: 500; opacity: .82;
}
.undo-att { box-shadow: inset 4px 0 0 var(--s4); }

/* Une charge dont le montant change chaque mois : elle attend un chiffre. */
.var-l {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 14px;
  align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.var-l:last-of-type { border-bottom: 0; }
.var-l .var-m { width: 130px; }
.var-l .var-m input { margin: 0; text-align: right; }
.var-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.var-t strong { font-size: .96rem; }

/* Témoin de sauvegarde : discret tant que tout va bien. */
.sauv-l {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  margin: 24px 0 6px; font-size: .8rem; color: var(--ink-3);
}
.sauv-l.vieille { color: var(--warn); font-weight: 600; }
.sauv-l .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--down); }
.sauv-l.vieille .pt { background: var(--warn); }

/* Le second bouton de la feuille de saisie : présent, mais visiblement
   secondaire — on ne le lit que si on a d'autres tickets en main. */
.btn-suite { margin-top: 8px; font-size: .88rem; }

/* ============================================================
   Notes — des fiches, pas des lignes de tableau : on les lit,
   on ne les compare pas.
   ============================================================ */
.notes {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Les fiches d'une même rangée font la même hauteur : le trait du bas
     et les deux actions s'alignent, au lieu de danser d'une carte à
     l'autre selon la longueur du texte (.note-p pousse déjà le pied
     en bas de la carte). */
  align-items: stretch;
}
.note-c {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
/* Épinglée : un filet d'encre sur la tranche, rien de plus bruyant. */
.note-c.epingle { box-shadow: inset 3px 0 0 var(--accent); }
.note-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.note-h h2 { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.note-pin {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.note-pin:hover { color: var(--ink); border-color: var(--line-strong); }
.note-pin.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.note-t {
  margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.note-p {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.note-a { display: flex; align-items: center; gap: 6px; }
.note-a form { display: inline; }

/* ============================================================
   L'ACCUEIL — un point de départ, pas une page à lire.

   Le bandeau du mois est le seul objet sombre de l'écran : c'est
   lui qu'on regarde en premier, et il porte le chiffre qui décide.
   ============================================================ */
.etat {
  background: var(--etat-bg); color: var(--etat-fg);
  border-radius: var(--r-lg); padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: var(--gap);
}
.etat-g { display: flex; flex-direction: column; gap: 15px; }

/* Le mois, posé comme un numéro de rue sur une plaque émaillée. */
.plaque {
  align-self: flex-start;
  border: 1.5px solid var(--etat-line); border-radius: 8px;
  padding: 4px 11px; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--etat-fg);
}
.somme { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.somme b {
  font-size: clamp(2.4rem, 11vw, 3.4rem); font-weight: 700;
  line-height: .95; letter-spacing: -0.03em; white-space: nowrap;
}
.somme span { font-size: .9rem; color: var(--etat-fg-2); }

.jauge { display: flex; flex-direction: column; gap: 7px; }
.jauge .piste {
  height: 8px; border-radius: var(--r-pill); background: var(--etat-line);
  position: relative;
}
.jauge .piste i {
  position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill);
  background: var(--etat-fg);
}
.jauge .piste i.trop { background: var(--up); }
.jauge .piste u {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--mark); border-radius: 2px;
}
.sous-jauge {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .8rem; color: var(--etat-fg-2);
}
.sous-jauge em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
.sous-jauge em::before { content: ""; width: 9px; height: 2px; background: var(--mark); }

.etat-proj { margin: 0; font-size: .84rem; color: var(--etat-fg-2); line-height: 1.5; }
.etat-proj strong { color: var(--etat-fg); }
.etat-proj a { color: var(--etat-fg); text-decoration: underline; text-underline-offset: 3px; }
.etat-proj .haut { color: #ffb3ac; font-weight: 650; }
.etat-proj .bas  { color: var(--etat-plus); font-weight: 650; }

.etat .ajout {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px; border-radius: 12px; border: 0;
  background: var(--etat-fg); color: var(--etat-bg);
  font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: opacity .15s ease, transform .12s ease;
}
.etat .ajout:hover { opacity: .88; color: var(--etat-bg); }
.etat .ajout:active { transform: scale(.985); }

.etat-d { margin: 0; display: flex; flex-direction: column; }
.etat-d > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--etat-line);
}
.etat-d dt { font-size: .82rem; color: var(--etat-fg-2); }
.etat-d dd { margin: 0; font-size: 1.05rem; font-weight: 700; }
.etat-d dd.plus { color: var(--etat-plus); }

/* ---------- Les destinations ---------- */
.grille {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-bottom: var(--gap);
}
.case {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 124px;
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, transform .12s ease;
}
.case { --sec: var(--accent); }
.case[data-sec="depenses"]  { --sec: var(--sec-depenses); }
.case[data-sec="analyse"]   { --sec: var(--sec-analyse); }
.case[data-sec="agenda"]    { --sec: var(--sec-agenda); }
.case[data-sec="travaux"]   { --sec: var(--sec-travaux); }
.case[data-sec="notes"]     { --sec: var(--sec-notes); }
.case[data-sec="documents"] { --sec: var(--sec-documents); }
.case[data-sec="annee"]     { --sec: var(--sec-annee); }
.case[data-sec="chercher"]  { --sec: var(--sec-chercher); }

/* L'icône vit dans une pastille teintée : c'est elle qui porte la couleur,
   le texte reste en encre — lisible avant d'être joli. */
.case .rond {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; color: var(--sec);
  background: color-mix(in srgb, var(--sec) 15%, transparent);
}
.case .haut > .ic:last-child { color: color-mix(in srgb, var(--sec) 55%, var(--ink-3)); }
.case:hover { border-color: var(--sec); color: var(--ink); transform: translateY(-2px); }
.case:hover .haut > .ic:last-child { color: var(--sec); }
.case:hover .rond { background: color-mix(in srgb, var(--sec) 20%, transparent); }
.case:active { transform: none; }
.case .haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.case .titre { display: flex; align-items: center; gap: 10px; }
.case .haut > .ic:last-child { color: var(--ink-3); transition: transform .15s ease, color .15s ease; }
.case:hover .haut > .ic:last-child { color: var(--accent); transform: translateX(2px); }
.case .pied { margin-top: auto; }
.case .nom { display: block; font-size: .92rem; font-weight: 700; letter-spacing: -0.01em; }
.case .val {
  display: block; font-size: 1.7rem; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
}
.case .det { display: block; margin-top: 3px; font-size: .8rem; color: var(--ink-3); line-height: 1.5; }
.case .det .mte { color: var(--up); font-weight: 650; }
.case .det .bse { color: var(--down); font-weight: 650; }
.case.large { grid-column: 1 / -1; }
.case.large .nom { font-size: 1rem; }

/* La composition du mois : on sait où va l'argent avant d'ouvrir la page. */
.mini { display: none; }
.mini-b { display: flex; gap: 2px; height: 9px; border-radius: var(--r-pill); overflow: hidden; }
.mini-b i { display: block; height: 100%; }
.mini-l { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.mini-l em {
  font-style: normal; font-size: .8rem; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.mini-l em::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

/* ---------- Notes épinglées ---------- */
.note-mini {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.note-mini:last-child { border-bottom: 0; padding-bottom: 0; }
.note-mini strong { display: block; font-size: .92rem; }
.note-mini span { display: block; margin-top: 2px; font-size: .82rem; color: var(--ink-3); }
.note-mini:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Entrer par une catégorie, et les réglages ---------- */
.g-start { align-items: start; }

/* Deux rangées de cartes qui se suivent ont besoin d'air entre elles :
   sans ça, elles se touchent et on croit lire un seul bloc. */
.grid + .grid, .grille + .grid, .grid + .bloc-cats { margin-top: var(--gap); }

/* Les cartes d'une rangée de graphiques font la même hauteur, et le
   graphique occupe la place qui reste : deux blocs identiques, pas un
   grand et un petit. */
.g-graphes > .box { display: flex; flex-direction: column; }
.g-graphes .repart { flex: 1 1 auto; }
.g-graphes .chart-s { flex: 1 1 auto; min-height: 190px; }
.g-graphes .empty { flex: 1 1 auto; display: flex; flex-direction: column;
                    align-items: center; justify-content: center; }
.bloc-cats { margin-bottom: var(--gap); }
.bloc-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 11px;
}
.bloc-h .lbl {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.cats, .reglages { display: flex; flex-wrap: wrap; gap: 8px; }
.cat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px 9px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: .84rem; font-weight: 650; color: var(--ink-2); text-decoration: none;
  transition: border-color .14s, color .14s;
}
.cat .pt { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.cat .mt { color: var(--ink-3); font-weight: 500; }
.cat:hover { border-color: var(--accent); color: var(--ink); }
.reg {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-soft);
  font-size: .84rem; font-weight: 550; color: var(--ink-2); text-decoration: none;
  transition: border-color .14s, color .14s;
}
.reg .ic { color: var(--ink-3); }
.reg:hover { border-color: var(--accent); color: var(--ink); }
.reg:hover .ic { color: var(--ink-2); }

@media (min-width: 860px) {
  .etat {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 34px; padding: 26px 28px; align-items: center;
  }
  .etat-d { border-left: 1px solid var(--etat-line); padding-left: 26px; }
  .etat-d > div:first-child { border-top: 0; }
  .etat .ajout { align-self: flex-start; }

  .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .case.large {
    grid-column: span 4;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "haut mini" "pied mini";
    column-gap: 40px; row-gap: 6px; align-items: center; position: relative;
  }
  .case.large .haut { grid-area: haut; }
  .case.large .pied { grid-area: pied; margin-top: 0; }
  .case.large .mini { grid-area: mini; display: block; }
  .case.large .val { font-size: 2.2rem; }
  .case.large .haut > .ic:last-child { position: absolute; top: 2px; right: 0; }
}

/* ============================================================
   Pictogrammes de catégorie — ils prennent la couleur de la
   catégorie, puisqu'ils héritent de la couleur du texte.
   ============================================================ */
.ic-cat { flex: 0 0 auto; margin-right: 1px; }
.ic-emoji { font-size: .95em; line-height: 1; }
.pill .ic-cat { margin-right: 2px; }
.chip .ic-cat { margin-right: 3px; }

/* Le choix du pictogramme, dans les réglages de catégorie. */
.lbl-champ {
  display: block; margin-top: 4px; font-size: .85rem; font-weight: 650; color: var(--ink-2);
}
.pictos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.picto-c { cursor: pointer; }
.picto-c input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.picto-c span {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-3);
  transition: border-color .14s, color .14s, background .14s;
}
.picto-c:hover span { color: var(--ink); border-color: var(--ink-3); }
.picto-c input:checked + span {
  color: var(--c); border-color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--c);
}
.picto-c input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Dans la feuille « Plus », l'icône garde la couleur de sa section. */
.mp-l[style*="--sec"] .ic { color: var(--sec); }

/* Un graphique court, pour l'accueil : il informe sans prendre la page. */
.chart-s { height: 190px; }

@media (max-width: 480px) {
  /* Sur un petit écran, la légende du repère prend deux lignes pour rien :
     le trait jaune se comprend seul, et l'explication reste sur ordinateur. */
  .sous-jauge em { display: none; }
}