/**
 * dashboard-extra.css — Tableau de bord « Néo Moderne B » (mission C).
 *
 * REFONTE complète : reproduit fidèlement la maquette validée
 * `mockups/RETENU-design-B.html` (couleurs, arrondis, espacements, typo,
 * data-viz) avec les vraies données du vault. Cette couche complète app.css
 * (qui pose déjà le shell, les cartes, les boutons, les dialogs) sans jamais la
 * contredire ; elle style aussi l'APPBAR/nav en pills (le header vit dans
 * vault.js — on style ses classes ici, cohérent avec app.css).
 *
 * Blocs stylés :
 *   0. APPBAR + nav en pills façon « command bar » B (logo, patrimoine central,
 *      bouton coral « Nouveau compte », verrou, pastille compte).
 *   1. HERO SOMBRE (near-black, halo coral) : montant géant, variation, objectif,
 *      évolution (sélecteur + courbe + badge dernier point).
 *   2. MÉTRIQUES (4 cartes claires + mini-sparkline).
 *   3. RÉPARTITION PAR TYPE (barre empilée + légende + donut).
 *   4. TABLE COMPTES PAR CATÉGORIE (groupes 01/02/03, lignes aperçu, total
 *      sombre).
 *
 * Règle ABSOLUE : aucune couleur en dur — tout via var(--av-*). Les couleurs par
 * type (marqueurs, badges, barres, segments) sont posées en JS depuis types.js
 * (exception tolérée par le contrat), donc absentes d'ici. Aucune règle style=
 * dans le HTML injecté (CSP default-src 'self'). Responsive mobile-first.
 */

/* =========================================================================
   0. APPBAR — command bar B + nav en pills
   ========================================================================= */

/* Header blanc « posé » : filet bas + ombre douce (app.css fournit fond+blur). */
.appbar {
  box-shadow: 0 1px 0 var(--av-border), var(--av-shadow-sm);
}

/* #1 + #4 : l'intérieur de l'appbar porte le GUTTER (aligné au contenu de
   .appmain) ET la GRILLE 3 zones « 1fr auto 1fr » → patrimoine parfaitement
   centré à l'écran (zones latérales de largeur égale). L'appbar reste pleine
   largeur en fond ; seul son CONTENU est borné/aligné. */
.appbar__inner {
  width: 100%;
  max-width: var(--av-content-max);
  margin-inline: auto;
  padding-inline: var(--av-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--av-space-3);
}

/* Zone gauche (logo) collée au début, zone droite (actions) collée à la fin. */
.appbar__zone {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  min-width: 0;
}

.appbar__zone--left {
  justify-self: start;
}

.appbar__zone--right {
  justify-self: end;
  gap: var(--av-space-2);
}

/* Logo image cliquable, compact à gauche. */
.appbar__home {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  margin: -4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--av-radius-sm);
  line-height: 0;
  flex: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.appbar__home:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.appbar__home:active {
  transform: scale(0.96);
}

.appbar__brand {
  height: 26px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.appbar__home:hover .appbar__brand {
  opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
  .appbar__home,
  .appbar__home:active {
    transition: none;
    transform: none;
  }
}

/* Patrimoine net compact au centre (desktop). Centré à l'écran par la grille
   .appbar__inner (zone centrale « auto », zones latérales 1fr égales, #4). */
.appbar__networth {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  text-align: center;
  line-height: 1.1;
}

.appbar__networth-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--av-text-tertiary);
  white-space: nowrap;
}

.appbar__networth-value {
  font-family: var(--av-font-display);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--av-text);
}

.appbar__networth-value.is-negative {
  color: var(--av-negative);
}

@media (min-width: 720px) {
  .appbar__networth {
    display: flex;
  }
}

/* Regroupe « Nouveau compte » + verrou + menu dans la zone droite de la grille
   (#3 : plus d'indicateur « Enregistré » ; #4 : alignement géré par la grille). */
.appbar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-2);
  flex: none;
}

.appbar__lock {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-1);
}

.appbar__lock-icon {
  display: inline-flex;
  line-height: 0;
}

@media (max-width: 399px) {
  .appbar__lock-label {
    display: none;
  }
}

/* Bouton coral pill « Nouveau compte » (icône + libellé). Hérite de
   .btn.btn--primary.btn--small (fond coral, pill) ; on ajuste l'alignement. */
.appbar__newacct {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-1);
  flex: none;
  white-space: nowrap;
}

.appbar__newacct-icon {
  display: inline-flex;
  line-height: 0;
}

.appbar__newacct-icon svg {
  width: 16px;
  height: 16px;
}

/* Écrans étroits : le libellé s'efface, la pastille reste un « + » coral rond. */
@media (max-width: 559px) {
  .appbar__newacct-label {
    display: none;
  }

  .appbar__newacct {
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    width: 40px;
    min-width: 40px;
  }
}

/* Pastille « compte » ronde coral (initiale). */
.acctbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--av-accent);
  color: var(--av-on-accent);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 12px rgba(234, 84, 85, 0.26);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.acctbtn:hover {
  background: var(--av-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(234, 84, 85, 0.32);
}

.acctbtn:active {
  background: var(--av-accent-active);
  transform: scale(0.96);
}

.acctbtn:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .acctbtn,
  .acctbtn:active {
    transition: none;
    transform: none;
  }
}

.acctbtn__initial {
  font-family: var(--av-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.menu--account {
  position: relative;
}

.menu__sep {
  height: 1px;
  margin: var(--av-space-1) 0;
  background: var(--av-border);
}

.menu__item--danger {
  color: var(--av-negative);
}

.menu__item--danger:hover {
  background: var(--av-negative-soft);
}

/* Nav en PILLS façon command bar : onglet actif = pill sombre near-black
   (spotlight cohérent avec le hero). app.css garde le fallback ; ici on cale
   l'esthétique B sur desktop (mobile = barre inférieure gérée par app.css). */
@media (min-width: 640px) {
  .tabs {
    justify-content: flex-start;
    gap: var(--av-space-1);
    /* (#1 lot5) Espace HAUT plus généreux entre l'appbar sticky et les onglets :
       padding-top var(--av-space-3), cohérent avec .tabs d'app.css (cette règle,
       chargée après app.css, gagnait la cascade et rabaissait le top à space-2).
       Le padding-inline reste neutralisé par `.app .tabs { padding-inline: 0 }`
       (gouttière portée par .tabs__inner) → alignement gauche #lot4 préservé. */
    padding: var(--av-space-3) var(--av-space-3) var(--av-space-2);
  }

  .tabs__tab {
    color: var(--av-text-secondary);
    background: transparent;
  }

  .tabs__tab:hover {
    color: var(--av-text);
    background: var(--av-surface-3);
  }

  .tabs__tab[aria-selected="true"] {
    color: var(--av-text-on-dark);
    background: var(--av-dark);
    box-shadow: var(--av-shadow-sm);
  }
}

/* =========================================================================
   Dashboard : agencement d'ensemble
   ========================================================================= */

.dash {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-4);
}

/* =========================================================================
   1. HERO SOMBRE (spotlight near-black)
   ========================================================================= */

.herob {
  position: relative;
  border-radius: var(--av-radius-lg);
  overflow: hidden;
  color: var(--av-text-on-dark);
  box-shadow: var(--av-shadow-dark);
  border: 1px solid var(--av-border-on-dark);
  background:
    radial-gradient(680px 340px at 88% -12%, var(--av-dark-glow) 0%, transparent 62%),
    linear-gradient(180deg, var(--av-dark-2) 0%, var(--av-dark) 100%);
  display: grid;
  grid-template-columns: 1fr;
}

/* Liseré interne clair (relief « verre »). */
.herob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--av-radius-lg);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.herob__left {
  padding: var(--av-space-4);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.herob__toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-2);
}

.herob__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--av-text-on-dark-secondary);
}

.herob__asof {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-1);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--av-text-on-dark-secondary);
  padding: 5px 11px;
  border-radius: var(--av-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--av-border-on-dark);
  white-space: nowrap;
}

.herob__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--av-accent);
  box-shadow: 0 0 8px 1px rgba(234, 84, 85, 0.7);
  flex: none;
}

/* Montant GÉANT : Space Grotesk, tabular-nums, texte clair. */
.herob__big {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: clamp(2.9rem, 11vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-top: var(--av-space-3);
  display: flex;
  align-items: baseline;
  gap: 0.14em;
  color: var(--av-text-on-dark);
  overflow-wrap: normal;
}

.herob__chf {
  font-size: 0.26em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--av-text-on-dark-secondary);
  align-self: flex-start;
  margin-top: 0.6em;
}

.herob__cents {
  font-size: 0.3em;
  font-weight: 600;
  color: var(--av-text-on-dark-secondary);
  align-self: flex-end;
  margin-bottom: 0.16em;
  letter-spacing: 0;
}

/* Rangée variation + montant du mois. */
.herob__under {
  display: flex;
  align-items: stretch;
  gap: var(--av-space-2);
  margin-top: var(--av-space-4);
  flex-wrap: wrap;
}

.herob__delta {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  padding: 12px 16px;
  border-radius: var(--av-radius);
  border: 1px solid transparent;
}

.herob__delta.is-up {
  background: color-mix(in srgb, var(--av-positive) 16%, transparent);
  border-color: color-mix(in srgb, var(--av-positive) 32%, transparent);
}

.herob__delta.is-down {
  background: color-mix(in srgb, var(--av-negative) 16%, transparent);
  border-color: color-mix(in srgb, var(--av-negative) 32%, transparent);
}

.herob__delta-ic {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--av-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.herob__delta.is-up .herob__delta-ic {
  background: var(--av-positive);
}

.herob__delta.is-down .herob__delta-ic {
  background: var(--av-negative);
}

.herob__delta-ic svg {
  width: 17px;
  height: 17px;
}

.herob__delta-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.herob__delta-v {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.herob__delta.is-up .herob__delta-v {
  color: var(--av-positive-on-dark);
}

.herob__delta.is-down .herob__delta-v {
  color: var(--av-negative);
}

.herob__delta-t {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--av-text-on-dark-secondary);
}

.herob__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 18px;
  border-radius: var(--av-radius);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--av-border-on-dark);
}

.herob__side-lab {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--av-text-on-dark-secondary);
}

.herob__side-m {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--av-text-on-dark);
}

.herob__side-m.is-up {
  color: var(--av-positive-on-dark);
}

.herob__side-m.is-down {
  color: var(--av-negative);
}

/* Évolution « depuis le dernier relevé » (réf. = dernier relevé avant aujourd'hui). */
.herob__releve {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px var(--av-space-3);
  margin-top: var(--av-space-3);
  padding-top: var(--av-space-3);
  border-top: 1px solid var(--av-border-on-dark);
}

.herob__releve-lab {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--av-text-on-dark-secondary);
}

.herob__releve-v {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--av-text-on-dark);
}

.herob__releve.is-up .herob__releve-v {
  color: var(--av-positive-on-dark);
}

.herob__releve.is-down .herob__releve-v {
  color: var(--av-negative);
}

/* (L'ancienne barre d'objectif unique du hero est remplacée par les deux
   cartes d'objectifs éditables, section « 1bis. OBJECTIFS ». #6) */

/* Colonne évolution. */
.herob__right {
  padding: var(--av-space-4);
  border-top: 1px solid var(--av-border-on-dark);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0));
}

.herob__evo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-2);
  margin-bottom: var(--av-space-2);
  flex-wrap: wrap;
}

.herob__evo-l {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--av-text-on-dark-secondary);
}

/* Sélecteur de plage (pills). */
.herob__range {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--av-radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--av-border-on-dark);
}

.herob__range-btn {
  font-family: var(--av-font);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border: none;
  border-radius: var(--av-radius-sm);
  background: transparent;
  color: var(--av-text-on-dark-secondary);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.herob__range-btn:hover {
  color: var(--av-text-on-dark);
}

.herob__range-btn.is-on {
  background: var(--av-accent);
  color: var(--av-on-accent);
  box-shadow: 0 4px 12px rgba(234, 84, 85, 0.4);
}

.herob__range-btn:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.herob__chart {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  margin-top: var(--av-space-2);
}

.herob__chart canvas {
  max-width: 100%;
}

/* Le fallback discret de la courbe (sur fond sombre) reste lisible. */
.herob__chart .chart__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--av-text-on-dark-secondary);
}

/* Badge dernier point (sous la courbe). */
.herob__lastpt {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-2);
  align-self: flex-start;
  margin-top: var(--av-space-2);
  padding: 7px 12px;
  border-radius: var(--av-radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--av-border-on-dark);
}

.herob__lastpt:empty {
  display: none;
}

.herob__lastpt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--av-accent);
  box-shadow: 0 0 8px rgba(234, 84, 85, 0.6);
}

.herob__lastpt-v {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--av-text-on-dark);
}

.herob__lastpt-d {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--av-text-on-dark-secondary);
}

/* Hero desktop : 2 colonnes (montant | courbe). */
@media (min-width: 900px) {
  .herob {
    grid-template-columns: 1fr 1.02fr;
  }

  .herob__left {
    padding: var(--av-space-5) var(--av-space-4);
  }

  .herob__right {
    padding: var(--av-space-4);
    border-top: none;
    border-left: 1px solid var(--av-border-on-dark);
  }
}

/* =========================================================================
   1bis. OBJECTIFS (patrimoine + liquidités) — cartes premium éditables (#6)
   ========================================================================= */

.goalsb {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--av-space-3);
}

@media (min-width: 720px) {
  .goalsb {
    grid-template-columns: repeat(2, 1fr);
  }
}

.goalb {
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  box-shadow: var(--av-shadow);
  padding: var(--av-space-3) var(--av-space-4);
}

.goalb__cell {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-2);
}

.goalb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-2);
}

.goalb__label {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--av-text-secondary);
}

.goalb__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.goalb__dot--total {
  background: var(--av-accent);
  box-shadow: 0 0 8px rgba(234, 84, 85, 0.5);
}

.goalb__dot--liquidity {
  background: var(--av-type-cash);
  box-shadow: 0 0 8px color-mix(in srgb, var(--av-type-cash) 50%, transparent);
}

.goalb__pct {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
}

/* Objectif dépassé : le pourcentage réel (> 100 %) passe au vert. */
.goalb__pct.is-reached {
  color: var(--av-positive);
}

.goalb__amounts {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--av-space-2);
  flex-wrap: wrap;
}

.goalb__cur {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
}

/* Bouton « Cible » éditable : discret, révèle son crayon au survol/focus. */
.goalb__target {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-1);
  padding: 4px 8px;
  margin: -4px -8px -4px 0;
  border: none;
  border-radius: var(--av-radius-sm);
  background: transparent;
  color: var(--av-text-tertiary);
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.goalb__target:hover {
  background: var(--av-surface-3);
  color: var(--av-text-secondary);
}

.goalb__target:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.goalb__target-lab {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.goalb__target-v {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  color: var(--av-text-secondary);
  font-variant-numeric: tabular-nums;
}

.goalb__target-ic {
  display: inline-flex;
  line-height: 0;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.goalb__target-ic svg {
  width: 13px;
  height: 13px;
}

.goalb__target:hover .goalb__target-ic,
.goalb__target:focus-visible .goalb__target-ic {
  opacity: 1;
}

@media (hover: none) {
  .goalb__target-ic {
    opacity: 1;
  }
}

/* Barre de progression premium (piste douce + remplissage coral dégradé). */
.goalb__track {
  height: 10px;
  border-radius: var(--av-radius-pill);
  background: var(--av-surface-2);
  overflow: hidden;
  position: relative;
}

.goalb__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: var(--av-radius-pill);
  background: linear-gradient(90deg, var(--av-accent-active), var(--av-accent));
  transition: width 0.5s ease;
}

.goalb__fill.is-reached {
  background: linear-gradient(90deg, var(--av-positive), var(--av-positive-on-dark));
}

@media (prefers-reduced-motion: reduce) {
  .goalb__fill {
    transition: none;
  }
}

.goalb__foot {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* État « définir un objectif » (cible null) : bouton pleine largeur discret. */
.goalb__set {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-space-2);
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px dashed var(--av-border-strong);
  border-radius: var(--av-radius-pill);
  background: transparent;
  color: var(--av-text-secondary);
  font-family: var(--av-font);
  font-weight: 700;
  font-size: 0.76rem;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.goalb__set-ic {
  display: inline-flex;
  line-height: 0;
}

.goalb__set-ic svg {
  width: 15px;
  height: 15px;
}

.goalb__set:hover {
  background: var(--av-accent-soft);
  border-color: var(--av-accent);
  color: var(--av-accent);
}

.goalb__set:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .goalb__target,
  .goalb__target-ic,
  .goalb__set {
    transition: none;
  }
}

/* Éditeur inline de la cible (input number + ✓/✗). */
.goalb__edit {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-2);
}

.goalb__edit-lab {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
}

.goalb__edit-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.goalb__edit-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--av-text);
  background: var(--av-surface);
  border: 1px solid var(--av-accent);
  border-radius: var(--av-radius-sm);
}

.goalb__edit-input:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.goalb__edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  background: var(--av-surface);
  color: var(--av-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.goalb__edit-btn svg {
  width: 16px;
  height: 16px;
}

.goalb__edit-btn:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.goalb__edit-btn--ok {
  border-color: var(--av-positive);
  color: var(--av-positive);
}

.goalb__edit-btn--ok:hover {
  background: var(--av-positive-soft);
}

.goalb__edit-btn--cancel {
  color: var(--av-text-secondary);
}

.goalb__edit-btn--cancel:hover {
  background: var(--av-surface-3);
}

.goalb__edit-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.goalb__edit-msg {
  margin: 0;
  min-height: 1em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-negative);
}

.goalb__edit-msg:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .goalb__edit-btn {
    transition: none;
  }
}

/* =========================================================================
   2. MÉTRIQUES (4 cartes claires)
   ========================================================================= */

.metricsb {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--av-space-3);
}

.metricb {
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  box-shadow: var(--av-shadow);
  padding: var(--av-space-3) var(--av-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--av-space-2);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.metricb:hover {
  transform: translateY(-2px);
  box-shadow: var(--av-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .metricb,
  .metricb:hover {
    transition: none;
    transform: none;
  }
}

.metricb__k {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
}

.metricb__ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.metricb__ico svg {
  width: 16px;
  height: 16px;
}

.metricb__ico--pos {
  background: var(--av-positive-soft);
  color: var(--av-positive);
}

.metricb__ico--neg {
  background: var(--av-negative-soft);
  color: var(--av-negative);
}

.metricb__ico--cash {
  background: color-mix(in srgb, var(--av-type-cash) 12%, transparent);
  color: var(--av-type-cash);
}

.metricb__ico--accent {
  background: var(--av-accent-soft);
  color: var(--av-accent);
}

.metricb__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--av-text-secondary);
}

.metricb__v {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--av-text);
  overflow-wrap: normal;
}

.metricb__v--neg {
  color: var(--av-negative);
}

.metricb__v--pos {
  color: var(--av-positive);
}

.metricb__sub {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-text-tertiary);
}

.metricb__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-1);
  padding: 3px 8px;
  border-radius: var(--av-radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
}

.metricb__pill--neg {
  background: var(--av-negative-soft);
  color: var(--av-negative);
}

.metricb__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.metricb__dot--cash {
  background: var(--av-type-cash);
}

/* Mini-sparkline (barres), hauteurs posées en JS. */
.metricb__spark {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 26px;
}

.metricb__spark i {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: var(--av-surface-3);
}

.metricb__spark i.is-hot {
  background: var(--av-accent);
}

@media (min-width: 560px) {
  .metricsb {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .metricsb {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================================================
   3. RÉPARTITION PAR TYPE (barre empilée + légende + donut)
   ========================================================================= */

.allocb {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.allocb__bars {
  padding: var(--av-space-4);
  border-bottom: 1px solid var(--av-border);
  display: flex;
  flex-direction: column;
}

.allocb__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--av-space-2);
  flex-wrap: wrap;
}

.allocb__title {
  font-family: var(--av-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--av-text);
}

.allocb__note {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Barre empilée horizontale arrondie (largeurs + couleurs posées en JS). */
.stackb {
  display: flex;
  height: 44px;
  border-radius: var(--av-radius-sm);
  overflow: hidden;
  gap: 3px;
  margin-top: var(--av-space-3);
}

.stackb__seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  min-width: 8px;
  overflow: hidden;
  transition: filter 0.16s ease;
}

.stackb__seg:first-child {
  border-radius: var(--av-radius-sm) 7px 7px var(--av-radius-sm);
}

.stackb__seg:last-child {
  border-radius: 7px var(--av-radius-sm) var(--av-radius-sm) 7px;
}

.stackb__seg:hover {
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .stackb__seg {
    transition: none;
  }
}

.stackb__pct {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Légende chiffrée. */
.legb {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px var(--av-space-4);
  margin-top: var(--av-space-4);
}

.legb__row {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
}

.legb__sw {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  flex: none;
}

.legb__sw--net {
  background: var(--av-text);
}

.legb__nm {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--av-text-secondary);
}

.legb__amt {
  margin-left: auto;
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: -0.01em;
  color: var(--av-text);
  white-space: nowrap;
}

.legb__amt--neg {
  color: var(--av-negative);
}

@media (min-width: 480px) {
  .legb {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Donut « poids relatif » (#6). Colonne : label, anneau carré centré, légende. */
.allocb__donut {
  padding: var(--av-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--av-space-3);
}

.allocb__dlabel {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
}

/* Conteneur PARFAITEMENT CARRÉ du donut : largeur = hauteur (aspect-ratio 1/1).
   Le canvas ne contient QUE l'anneau (légende sortie en HTML, cf. charts.js) →
   Chart.js dessine un cercle centré H ET V dans ce carré. `place-items:center`
   superpose canvas + centre HTML au même centre géométrique. #6 */
.allocb__donut-wrap {
  position: relative;
  width: 232px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  /* Référence pour les unités cqw/cqmin du montant central (taille adaptative). */
  container-type: size;
}

/* Le canvas remplit exactement le carré (aspect-ratio 1 côté Chart.js aussi). */
.allocb__donut-wrap canvas {
  grid-area: 1 / 1;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  display: block;
}

/* Montant COMPLET (2 décimales, money()) centré dans le TROU (cutout 70 % ×
   radius 94 % → diamètre intérieur ≈ 0.66 × côté). La boîte est bornée bien en
   deçà de ce diamètre (≈ 46 % du côté) pour rester INSCRITE dans le disque
   central et NE JAMAIS toucher l'anneau ; la police se réduit via clamp plutôt
   que de tronquer. Superposée au canvas via la même cellule de grille. #6 */
.allocb__donut-center {
  grid-area: 1 / 1;
  z-index: 1;
  place-self: center;
  /* Bornée bien en deçà du diamètre intérieur (≈ 0.66 × côté) pour rester
     INSCRITE dans le disque central → jamais touchée par l'anneau. #6 */
  width: 54%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  pointer-events: none;
}

.allocb__donut-v {
  font-family: var(--av-font-display);
  font-weight: 700;
  /* cqmin = fraction du plus petit côté du conteneur CARRÉ → taille stable en
     desktop comme en mobile ; borne haute/basse pour la lisibilité. */
  font-size: clamp(0.72rem, 7.6cqmin, 1.06rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  /* Un montant long peut se replier ENTRE groupes de milliers (l'espace fin
     inséré par money() est un point de coupe), jamais au milieu d'un nombre. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.allocb__donut-k {
  font-size: clamp(0.46rem, 3.6cqmin, 0.55rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Légende HTML du donut : points + libellé + part. Lisible, échappée, sous
   l'anneau (ou à côté selon la place via le grid parent). #6 */
.dleg {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 260px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px var(--av-space-3);
}

.dleg__row {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  min-width: 0;
}

.dleg__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.dleg__nm {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--av-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.dleg__pct {
  margin-left: auto;
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* Deux colonnes de légende quand le donut est en pleine largeur (mobile large). */
@media (min-width: 420px) and (max-width: 759px) {
  .dleg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 420px;
  }
}

@media (min-width: 760px) {
  .allocb {
    grid-template-columns: 1fr 300px;
  }

  .allocb__bars {
    border-bottom: none;
    border-right: 1px solid var(--av-border);
  }
}

/* =========================================================================
   4. TABLE COMPTES PAR CATÉGORIE
   ========================================================================= */

.tableb {
  padding: var(--av-space-4) 0 var(--av-space-3);
  gap: 0;
}

.tableb__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--av-space-2);
  padding: 0 var(--av-space-4);
  flex-wrap: wrap;
}

.tableb__title {
  font-family: var(--av-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--av-text);
}

.tableb__note {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-text-tertiary);
}

/* En-têtes de colonnes (desktop ; masqués sur mobile où les lignes s'empilent). */
.tableb__cols {
  display: none;
  grid-template-columns: 1fr 148px 168px 150px;
  gap: var(--av-space-3);
  padding: var(--av-space-3) var(--av-space-4) var(--av-space-1);
}

.tableb__col {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
}

.tableb__col--r {
  text-align: right;
}

/* Groupe (catégorie). */
.catb {
  margin: var(--av-space-2) var(--av-space-3) 0;
  border-radius: var(--av-radius);
  overflow: hidden;
  border: 1px solid var(--av-border);
}

.catb__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-2);
  padding: 11px var(--av-space-3);
  background: var(--av-surface-2);
  border-bottom: 1px solid var(--av-border);
}

.catb__name {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.005em;
  color: var(--av-text);
  min-width: 0;
}

.catb__idx {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--av-accent);
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--av-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Goutte de liquidité sur l'en-tête d'une catégorie liquide. */
.catb__liq {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex: none;
  color: var(--av-type-cash);
}

.catb__meta {
  font-family: var(--av-font);
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--av-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.catb__total {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  color: var(--av-text);
  white-space: nowrap;
  flex: none;
}

.catb__total.is-neg {
  color: var(--av-negative);
}

/* Ligne de compte (aperçu, cliquable → onglet Comptes).
   Mobile : nom + montant sur la 1re ligne, puis poids, puis badge type
   (le nom garde sa ligne, cf. fix layout mobile du contrat). */
.acctb {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name amount"
    "share share"
    "type type";
  align-items: center;
  gap: var(--av-space-2) var(--av-space-3);
  width: 100%;
  padding: 13px var(--av-space-3);
  border: none;
  background: var(--av-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.14s ease;
}

.acctb:not(:last-child) {
  border-bottom: 1px solid var(--av-border);
}

.acctb:hover {
  background: var(--av-surface-2);
}

.acctb:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--av-accent);
}

@media (prefers-reduced-motion: reduce) {
  .acctb {
    transition: none;
  }
}

.acctb__name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  min-width: 0;
}

.acctb__marker {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 3px rgba(20, 22, 27, 0.03);
}

.acctb__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
  min-width: 0;
}

.acctb__nmrow {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  min-width: 0;
}

.acctb__nm {
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: -0.008em;
  color: var(--av-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acctb__sub {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--av-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acctb__type {
  grid-area: type;
}

/* #7 : pastille de type parfaitement centrée (texte + point) — inline-flex,
   centrage sur les deux axes, line-height 1 et padding symétrique. */
.acctb__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-space-1);
  font-family: var(--av-font);
  font-weight: 700;
  font-size: 0.66rem;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 5px 10px;
  border-radius: var(--av-radius-pill);
}

.acctb__badge-sw {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  align-self: center;
}

.acctb__share {
  grid-area: share;
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
}

.acctb__track {
  flex: 1 1 auto;
  height: 7px;
  border-radius: var(--av-radius-pill);
  background: var(--av-surface-3);
  position: relative;
  overflow: hidden;
}

.acctb__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: var(--av-radius-pill);
}

.acctb__pct {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--av-text-secondary);
  width: 58px;
  text-align: right;
  flex: none;
}

.acctb__pct.is-neg {
  color: var(--av-negative);
}

/* Zone valeur : valeur cliquable + crayon (#5) sur une ligne, rendement (#6) en
   dessous. Colonne alignée à droite pour empiler valeur puis rendement sans
   déborder sur la colonne « Poids ». En édition inline, .acctb__inline reste
   l'unique enfant → aligné à droite comme avant. */
.acctb__amount {
  grid-area: amount;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  min-width: 0;
}

/* Valeur éditable : rendu identique au texte précédent, en bouton discret. */
.acctb__val {
  border: none;
  background: transparent;
  padding: 3px 5px;
  margin: -3px 0;
  border-radius: var(--av-radius-sm);
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.015em;
  color: var(--av-text);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.14s ease;
}

.acctb__val.is-neg {
  color: var(--av-negative);
}

.acctb__val:hover {
  background: var(--av-surface-3);
}

.acctb__val:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

/* Crayon : discret, se révèle au survol/focus de la ligne (toujours visible au
   focus clavier pour l'accessibilité). */
.acctb__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: none;
  border-radius: var(--av-radius-sm);
  background: transparent;
  color: var(--av-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}

.acctb__edit svg {
  width: 14px;
  height: 14px;
}

.acctb:hover .acctb__edit,
.acctb:focus-within .acctb__edit {
  opacity: 1;
}

.acctb__edit:hover {
  background: var(--av-surface-3);
  color: var(--av-text-secondary);
}

.acctb__edit:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: var(--av-focus-ring);
}

/* Écrans tactiles / sans survol : le crayon reste visible en permanence. */
@media (hover: none) {
  .acctb__edit {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acctb__val,
  .acctb__edit {
    transition: none;
  }
}

/* Éditeur inline de la valeur (input number + ✓/✗), aligné à droite (#5). */
.acctb__inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.acctb__inline-input {
  width: 8.5em;
  max-width: 44vw;
  padding: 6px 8px;
  font-size: 0.9rem;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--av-text);
  background: var(--av-surface);
  border: 1px solid var(--av-accent);
  border-radius: var(--av-radius-sm);
}

.acctb__inline-input:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.acctb__inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  background: var(--av-surface);
  color: var(--av-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.acctb__inline-btn svg {
  width: 15px;
  height: 15px;
}

.acctb__inline-btn:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.acctb__inline-btn--ok {
  border-color: var(--av-positive);
  color: var(--av-positive);
}

.acctb__inline-btn--ok:hover {
  background: var(--av-positive-soft);
}

.acctb__inline-btn--cancel {
  color: var(--av-text-secondary);
}

.acctb__inline-btn--cancel:hover {
  background: var(--av-surface-3);
}

.acctb__inline-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Total final : petite carte SOMBRE « Patrimoine net total ». */
.tableb__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-3);
  margin: var(--av-space-3) var(--av-space-3) var(--av-space-1);
  padding: var(--av-space-3) var(--av-space-4);
  border-radius: var(--av-radius);
  background:
    radial-gradient(420px 200px at 92% -30%, var(--av-dark-glow) 0%, transparent 60%),
    linear-gradient(160deg, var(--av-dark-2), var(--av-dark));
  color: var(--av-text-on-dark);
  box-shadow: var(--av-shadow-lg);
}

.tableb__total-lab {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  flex-wrap: wrap;
}

.tableb__total-k {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  flex: none;
  background: var(--av-accent);
  box-shadow: 0 0 10px rgba(234, 84, 85, 0.6);
}

.tableb__total-s {
  font-family: var(--av-font);
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--av-text-on-dark-secondary);
}

/* Montant COMPLET via money() (2 décimales, #9), tabular-nums. */
.tableb__total-val {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--av-text-on-dark);
}

.tableb__total-val.is-neg {
  color: var(--av-negative);
}

/* Colonnes alignées façon tableau à partir de 720px. */
@media (min-width: 720px) {
  .tableb__cols {
    display: grid;
  }

  .catb {
    margin-left: var(--av-space-4);
    margin-right: var(--av-space-4);
  }

  .acctb {
    grid-template-columns: 1fr 148px 168px 150px;
    grid-template-areas: "name type share amount";
    gap: var(--av-space-3);
  }

  .acctb__share {
    padding-right: var(--av-space-1);
  }

  .tableb__total {
    margin-left: var(--av-space-4);
    margin-right: var(--av-space-4);
  }
}

/* Zone valeur : valeur+crayon sur une ligne, rendement (#6) en dessous. */
.acctb__amount-main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

/* Ligne méta sous le nom : sous-titre + indicateur liquidité + rendement (#7). */
.acctb__submeta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Régularisation EXCLUE des totaux : ligne atténuée + petit tag « exclu ». */
.acctb--excluded .acctb__nm,
.acctb--excluded .acctb__val {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.acctb__excl {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
  background: var(--av-surface-3);
  border-radius: 5px;
  padding: 1px 5px;
}

/* Petit rendement coloré « +12,34 % », désormais dans la ligne méta (#7). */
.acctb__ret {
  display: inline-block;
  flex: none;
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.acctb__ret.is-up {
  color: var(--av-positive);
}

.acctb__ret.is-down {
  color: var(--av-negative);
}

.acctb__ret.is-flat {
  color: var(--av-text-tertiary);
}

/* =========================================================================
   1ter. CARTE PERFORMANCE PAR PÉRIODE (#6)
   ========================================================================= */

.perfb {
  padding: var(--av-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--av-space-3);
}

.perfb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-2);
  flex-wrap: wrap;
}

.perfb__title {
  font-family: var(--av-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--av-text);
}

/* Sélecteur de période (pills), même grammaire que le range du hero mais clair. */
.perfb__pills {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--av-radius-sm);
  background: var(--av-surface-2);
  border: 1px solid var(--av-border);
}

.perfb__pill {
  font-family: var(--av-font);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border: none;
  border-radius: var(--av-radius-sm);
  background: transparent;
  color: var(--av-text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.perfb__pill:hover {
  color: var(--av-text);
}

.perfb__pill.is-on {
  background: var(--av-dark);
  color: var(--av-text-on-dark);
  box-shadow: var(--av-shadow-sm);
}

.perfb__pill:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .perfb__pill {
    transition: none;
  }
}

.perfb__body {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-3);
}

.perfb__empty {
  margin: 0;
  padding: var(--av-space-3) 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--av-text-tertiary);
}

/* Ligne principale : gros montant signé + pourcentage + période couverte. */
.perfb__lead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--av-space-3);
  flex-wrap: wrap;
}

.perfb__abs {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
}

.perfb__abs.is-up {
  color: var(--av-positive);
}

.perfb__abs.is-down {
  color: var(--av-negative);
}

.perfb__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.perfb__pct {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--av-text-secondary);
}

.perfb__pct.is-up {
  color: var(--av-positive);
}

.perfb__pct.is-down {
  color: var(--av-negative);
}

.perfb__range {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--av-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Ventilation par catégorie. */
/* =========================================================================
   1quater. CARTE PERFORMANCE PAR CATÉGORIE — barres divergentes par catégorie
   ========================================================================= */

.catperf {
  padding: var(--av-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--av-space-3);
}

.catperf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--av-space-2);
  flex-wrap: wrap;
}

.catperf__title {
  font-family: var(--av-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--av-text);
}

.catperf__note {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-text-tertiary);
}

.catperf__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.catperf__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 1.3fr) auto;
  align-items: center;
  gap: var(--av-space-3);
  padding: var(--av-space-3) 0;
  border-top: 1px solid var(--av-border);
}

.catperf__row:first-child {
  border-top: none;
}

.catperf__nm {
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--av-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catperf__track {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  border-radius: var(--av-radius-pill);
  background: var(--av-surface-2);
}

.catperf__track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--av-border-strong);
}

.catperf__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: var(--av-radius-pill);
  background: var(--av-text-tertiary);
}

.catperf__fill.is-up {
  background: var(--av-positive);
}

.catperf__fill.is-down {
  background: var(--av-negative);
}

.catperf__fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  min-width: 84px;
}

.catperf__abs {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--av-text);
}

.catperf__pct {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--av-text-tertiary);
}

.catperf__abs.is-up,
.catperf__pct.is-up {
  color: var(--av-positive);
}

.catperf__abs.is-down,
.catperf__pct.is-down {
  color: var(--av-negative);
}

/* =========================================================================
   3bis. CARTE PERFORMANCE DES PLACEMENTS (#6)
   ========================================================================= */

.investb {
  padding: var(--av-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--av-space-4);
}

.investb__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--av-space-2);
  flex-wrap: wrap;
}

.investb__title {
  font-family: var(--av-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--av-text);
}

.investb__note {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Rangée de statistiques (investi / valeur / gain / rendement). */
.investb__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--av-space-3);
}

.investb__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--av-space-3);
  border-radius: var(--av-radius);
  background: var(--av-surface-2);
  border: 1px solid var(--av-border);
}

.investb__stat-k {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
}

.investb__stat-v {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}

.investb__stat-v.is-up {
  color: var(--av-positive);
}

.investb__stat-v.is-down {
  color: var(--av-negative);
}

/* Répartition par placement : une ligne par compte = libellé | barre divergente
   (centrée à zéro) | chiffres (rendement % + gain/perte). Remplace l'ancien graphe
   à barres investi/valeur. */
.investb__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.investb__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 1.4fr) auto;
  align-items: center;
  gap: var(--av-space-3);
  padding: var(--av-space-3) 0;
  border-top: 1px solid var(--av-border);
}

.investb__row:first-child {
  border-top: none;
}

.investb__row-lab {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  min-width: 0;
}

.investb__row-nm {
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--av-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Piste avec ligne de zéro au centre ; la barre part du centre (gauche/droite). */
.investb__row-track {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  border-radius: var(--av-radius-pill);
  background: var(--av-surface-2);
}

.investb__row-track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--av-border-strong);
}

.investb__row-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: var(--av-radius-pill);
  background: var(--av-text-tertiary);
}

.investb__row-fill.is-up {
  background: var(--av-positive);
}

.investb__row-fill.is-down {
  background: var(--av-negative);
}

.investb__row-fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  min-width: 84px;
}

.investb__row-pct {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--av-text);
}

.investb__row-gain {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--av-text-tertiary);
}

.investb__row-pct.is-up,
.investb__row-gain.is-up {
  color: var(--av-positive);
}

.investb__row-pct.is-down,
.investb__row-gain.is-down {
  color: var(--av-negative);
}

@media (min-width: 640px) {
  .investb__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Historique d'un compte (#6) — modale account-history.js
   ========================================================================== */

/* La modale réutilise .dialog / .dialog--wide (app.css §18). Le corps gère son
   propre scroll interne — la modale reste centrée même sur un long historique. */
.acch__body {
  padding: var(--av-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--av-space-3);
  max-height: min(90vh, 720px);
  overflow: auto;
}

.acch__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--av-space-3);
}

.acch__titlewrap {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-2);
  min-width: 0;
}

.acch__title {
  overflow-wrap: anywhere;
}

.acch__meta {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  flex-wrap: wrap;
}

.acch__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.acch__badge-sw {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.acch__cur {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
}

/* Mini-courbe : hauteur fixe, canvas responsive (lineChart). */
.acch__chart {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: var(--av-radius);
  background: var(--av-dark);
  padding: var(--av-space-2);
}

.acch__chart canvas {
  max-width: 100%;
}

.acch__chart--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 96px;
  background: var(--av-surface-2);
  border: 1px solid var(--av-border);
}

.acch__chart--empty .chart__fallback {
  color: var(--av-text-tertiary);
  margin: 0;
}

/* Bloc rendement (visible si invested défini). */
.acch__return {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--av-space-2);
}

/* Détail des apports mensuels sous le bloc rendement (hors apports). */
.acch__apports {
  margin: var(--av-space-2) 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--av-text-secondary);
}

.acch__apports strong {
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
}

.acch__ret-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--av-space-3);
  border-radius: var(--av-radius);
  background: var(--av-surface-2);
  border: 1px solid var(--av-border);
}

.acch__ret-k {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
}

.acch__ret-v {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
}

.acch__ret-v.is-up {
  color: var(--av-positive);
}

.acch__ret-v.is-down {
  color: var(--av-negative);
}

/* Section relevés. */
.acch__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--av-space-2);
  margin-bottom: var(--av-space-2);
}

.acch__section-title {
  font-family: var(--av-font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--av-text);
}

.acch__section-note {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-text-tertiary);
}

.acch__stlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  overflow: hidden;
}

.acch__st {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-3);
  padding: 10px var(--av-space-3);
  background: var(--av-surface);
}

.acch__st:nth-child(even) {
  background: var(--av-surface-2);
}

.acch__st-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.acch__st-date {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
}

.acch__st-note {
  font-size: 0.72rem;
  color: var(--av-text-secondary);
  overflow-wrap: anywhere;
}

.acch__st-vals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
}

.acch__st-val {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
}

.acch__st-delta {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.acch__st-delta.is-up {
  color: var(--av-positive);
}

.acch__st-delta.is-down {
  color: var(--av-negative);
}

.acch__st-delta.is-flat {
  color: var(--av-text-tertiary);
}

.acch__empty {
  color: var(--av-text-tertiary);
  font-size: 0.86rem;
}

.acch__foot {
  display: flex;
  justify-content: flex-end;
}

.acch__manage {
  width: auto;
}

@media (max-width: 420px) {
  .acch__return {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   CARTE RÉGULARISATIONS (#lot) — produits à recevoir / charges à payer
   ========================================================================= */

.regb {
  padding: var(--av-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--av-space-4);
}

.regb__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--av-space-2);
  flex-wrap: wrap;
}

.regb__title {
  font-family: var(--av-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--av-text);
}

.regb__note {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-text-tertiary);
}

.regb__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--av-space-3);
}

.regb__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--av-space-3);
  border-radius: var(--av-radius);
  background: var(--av-surface-2);
  border: 1px solid var(--av-border);
}

.regb__stat-k {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
}

.regb__stat-v {
  font-family: var(--av-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
}

.regb__stat-v.is-up {
  color: var(--av-positive);
}

.regb__stat-v.is-down {
  color: var(--av-negative);
}

.regb__group + .regb__group {
  margin-top: var(--av-space-2);
}

.regb__grouptitle {
  font-family: var(--av-font);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
  margin-bottom: var(--av-space-1);
}

/* Barre noire « Total régularisations » : réutilise .tableb__total mais sans les
   marges latérales (la carte .regb a déjà son padding ; l'espacement vertical est
   assuré par le gap de la carte). */
.regb__total {
  margin: 0;
}

@media (max-width: 560px) {
  .regb__stats {
    grid-template-columns: 1fr;
  }
}