/* VUE-ENSEMBLE — indicateurs, graphiques, legendes, tableaux de synthese
 *
 * Tranche 03 de public/styles.css, decoupe le 2026-08-24. Les fichiers sont
 * NUMEROTES parce que l'ordre de chargement compte : une regle plus bas l'emporte sur une
 * regle de meme portee plus haut. Ne pas reordonner les <link> de index.html.
 */
.kpi-row:empty { display: none; }
.kpi {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 1.1rem 0.55rem 1.65rem;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.12s ease;
}
.kpi:hover { background: var(--bg-inset); }
.kpi::before {
  content: ''; position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong);
}
.kpi .label {
  font-size: 0.76rem; color: var(--muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi .value {
  font-size: 0.92rem; font-weight: 700; line-height: 1.2; text-align: right;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap;
}
.kpi.positive::before { background: var(--accent); }
.kpi.negative::before { background: var(--red); }
.kpi.positive .value { color: var(--accent); }
.kpi.negative .value { color: var(--red); }
.kpi-icon-row .kpi {
  align-items: center; gap: 0.7rem; padding-left: 1.1rem;
}
.kpi-icon-row .kpi::before { display: none; }
.kpi-ic {
  width: 2rem; height: 2rem; border-radius: 999px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-inset); color: var(--muted);
}
.kpi-ic svg { width: 17px; height: 17px; }
.kpi.positive .kpi-ic { color: var(--accent); }
.kpi.negative .kpi-ic { color: var(--red); }
.kpi-txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
#flux-table .positive { color: var(--accent); }
#flux-table .negative { color: var(--red); }
.chart-headline {
  display: block; font-size: 1.15rem; font-weight: 700; color: var(--text-strong);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap;
  margin-bottom: 0.5rem;
}
.section-head-row .chart-headline { display: inline; margin-bottom: 0; }
/* Titre de page (2026-08-26) : c'est la TAILLE qui donne l'autorité, pas le gras ni un
   ornement. Le petit trait doré posé sous le titre a été retiré — il n'était aligné sur rien
   et fixait une couleur d'accent dans une règle de mise en page, ce qui l'aurait mis en
   travers de la future identité de marque. */
.page-head {
  display: flex; align-items: center; gap: 0.4rem;
  padding-bottom: 0.75rem; margin-bottom: 0.9rem;
  /* Soulignage dore epais (retour Nicolas 2026-08-30, option B : le texte du titre reste dans
     --text-strong, seul le trait porte la marque — contraste du texte garanti quel que soit
     le theme). */
  border-bottom: 3px solid var(--gold);
  position: relative;
}
/* Bouton d'action dans un en-tête de page : poussé à droite sans toucher la règle générale
   de `.page-head`, partagée par tous les onglets. */
.page-head > .btn-add-event, .page-head > .btn-crypto-sync { margin-left: auto; }
.page-head h1 {
  margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.15; color: var(--text-strong);
}
.budget-hero {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3);
}
.budget-hero .kpi-row { margin: 0; }
.budget-hero .btn { align-self: flex-start; }
.hero-metric {
  display: block; font-size: 2rem; font-weight: 600; color: var(--text-strong);
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em; line-height: 1.15;
  margin-bottom: var(--space-2);
}
/* « Net aujourd'hui : … » et le bouton Comparer sur la MEME ligne, le bouton cale a droite.
   Le bouton vivait auparavant dans une colonne a lui, en dehors de la carte
   (`.hero-compare-col`, supprimee) : il flottait a cote du bloc au lieu d'y appartenir. */
.hero-metric-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.hero-metric-row .hero-metric { margin-bottom: 0; }
.hero-card h2 { font-size: 1.3rem; }
p.hint#remuneration-headline {
  font-size: 0.92rem; font-weight: 500; color: var(--text); margin-bottom: 0.35rem;
}
p.hint#remuneration-headline strong { color: var(--text-strong); font-weight: 700; }
.chart-footnote {
  margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border);
  font-size: 0.78rem; color: var(--muted);
}
.patrimoine-legend-hint { margin: 0.6rem 0 0.3rem; }
/* .remuneration-legend-item partage exactement le style de .patrimoine-legend-item (même
   légende drag & drop + pastille couleur, cf. renderRemunerationLegend) — mêmes règles,
   sélecteur ajouté plutôt que dupliqué. */
.patrimoine-legend, .remuneration-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.patrimoine-legend-item, .remuneration-legend-item {
  display: flex; align-items: center; gap: 0.35rem;
  background: var(--bg-inset); border-radius: 999px; padding: 0.28rem 0.6rem 0.28rem 0.5rem;
  font-size: 0.76rem; cursor: grab; user-select: none;
  transition: box-shadow 0.12s ease, opacity 0.12s ease;
}
.patrimoine-legend-item:active, .remuneration-legend-item:active { cursor: grabbing; }
.patrimoine-legend-item.dragging, .remuneration-legend-item.dragging { opacity: 0.4; box-shadow: var(--shadow-btn-hover); }
.patrimoine-legend-item .drag-handle, .remuneration-legend-item .drag-handle { display: inline-flex; color: var(--muted); line-height: 1; }
.patrimoine-legend-item i, .remuneration-legend-item i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
/* Le point de couleur cliquable (socle/pastille-couleur.js). Un peu plus grand que le point
   inerte voisin : il faut pouvoir le viser. Les neuf règles qui habillaient le champ natif
   (`::-webkit-color-swatch`, `::-moz-color-swatch`) sont parties avec lui. */
.pastille-couleur {
  width: 12px; height: 12px; padding: 0; border: none; border-radius: 50%;
  cursor: pointer; flex: none;
}
.pastille-couleur:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
td .pastille-couleur { margin-right: 0.35rem; vertical-align: middle; }
.table-color-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.35rem; vertical-align: middle; }
.chart-footnote strong { color: var(--text-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-footnote strong.negative { color: var(--red); }
.endettement-mini {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px solid var(--border);
}
.endettement-mini-item { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.78rem; }
.endettement-mini-item .label { color: var(--muted); }
.endettement-mini-item .value { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.chart-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem;
}
/* Deux vraies moitiés d'écran : minmax(0, 1fr) force le partage 50/50 même quand le
   contenu de gauche (lignes dépenses à colonnes fixes) a un min-content plus large que
   sa part — sans ça, "1fr" seul laisse ce min-content déborder sur la colonne de droite. */
.budget-flux-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.budget-flux-grid .flux-dated-list { overflow-x: auto; }
@media (max-width: 900px) { .budget-flux-grid { grid-template-columns: 1fr; } }
/* Grille 2×2 (pas 2 colonnes indépendantes) : chart-total/chart-flux forment la 1ʳᵉ rangée,
   table-total/table-flux la 2ᵉ — align-items:stretch (défaut) aligne chaque rangée sur sa
   propre carte la plus haute, donc chart contre chart et tableau contre tableau, même si
   les colonnes ont un total de hauteur différent (legende qui wrap, nombre de lignes...). */
@media (max-width: 900px) { .env-macro-grid { grid-template-columns: 1fr; } }
.chart-card canvas { max-height: 260px; }
#chart-patrimoine { max-height: 480px !important; }
.env-charts canvas { max-height: 260px; max-width: 260px; margin: 0 auto; display: block; }
.env-charts .chart-grid { gap: 0.5rem; }
/* Le bilan est COLLÉ sous les Revenus : il partage une colonne en flex avec eux
   (.budget-flux-col) au lieu d'être un 3ᵉ enfant de la grille — il reste une carte à
   part entière (cf. retour Nicolas), simplement empilée. En 3ᵉ enfant, il démarrait à la
   2ᵉ rangée, dont le haut est fixé par la PLUS HAUTE des deux sections : dès que Dépenses
   dépassait Revenus, un trou s'ouvrait entre les Revenus et le Bilan. */
.budget-flux-col { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
/* min-height fixe : évite qu'un canvas créé pendant que son onglet est masqué (Chart.js
   mesure alors 0×0) ne fige la carte à une hauteur nulle en boucle (cf. resizeEnvCharts
   dans app.js — le resize() seul ne suffit pas si le conteneur lui-même s'est effondré). */
.env-charts .card.inner { padding: 0.65rem; min-height: 290px; }
#env-panel-macro canvas { max-height: 360px; max-width: 360px; }
/* Camemberts enveloppes : canvas + légende détaillée (couleur/label/valeur/%) à droite,
   plus lisible que la légende empilée en bas de Chart.js (retour utilisateur 2026-07-20). */
.env-chart-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.env-chart-row canvas { flex: 1 1 auto; margin: 0 !important; }
.env-chart-legend {
  flex: 1 1 170px; min-width: 150px; max-width: 260px; max-height: 400px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 0.32rem;
}
.env-chart-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; }
.env-chart-legend-item i { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.env-chart-legend-item span:first-of-type { flex: 1 1 auto; }
.env-chart-legend-item .val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .env-chart-row { flex-direction: column; } .env-chart-row canvas { max-width: 260px !important; } }
.computed-net {
  margin-top: 0.5rem; padding: 0.5rem 0.65rem; border-radius: var(--radius-input);
  background: var(--bg-hover); font-size: 0.9rem; font-weight: 600; color: var(--accent);
}
.chart-tooltip-title { font-weight: 600; }
.span-2 { grid-column: span 2; }
@media (max-width: 900px) {
  .chart-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
}
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
th, td { text-align: right; padding: 0.4rem 0.45rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-hover); }
/* « Où est mon argent » : sept colonnes dont une seule porte du texte long. Sans largeurs,
   l'auto-layout coupe le nom de l'enveloppe pour donner de la place à des nombres courts.
   (Les largeurs des deux tableaux fusionnés dans celui-ci ont disparu avec eux.) */
#table-macro { table-layout: fixed; }
#table-macro th:nth-child(1), #table-macro td:nth-child(1) { width: 24%; }
#table-macro th:nth-child(2), #table-macro td:nth-child(2) { width: 13%; }
#table-macro th:nth-child(3), #table-macro td:nth-child(3) { width: 16%; }
#table-macro th:nth-child(4), #table-macro td:nth-child(4) { width: 11%; }
#table-macro th:nth-child(5), #table-macro td:nth-child(5) { width: 13%; }
#table-macro th:nth-child(6), #table-macro td:nth-child(6) { width: 11%; }
#table-macro th:nth-child(7), #table-macro td:nth-child(7) { width: 12%; }
th:first-child, td:first-child { text-align: left; }
tr.highlight { background: var(--bg-hover); }
.events-tag { font-size: 0.7rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.sliders { display: grid; gap: 0.5rem; }
.slider-row { display: grid; grid-template-columns: 110px 1fr 56px; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.slider-row input[type=range] { width: 100%; accent-color: var(--gold); }