/* ANALYSE > Budget (Warren) — classes prefixees wb-* (page-specifique), + reprise (premiere
   utilisation sur claude-business) du systeme visuel .insight-* porte depuis claude-health
   (sante.css, .insight-card/.insight-head/...) : si une 2e page Warren utilise le systeme Insight,
   promouvoir ce bloc .insight-* vers warren.css (ou css/portal.css commun) plutot que dupliquer. */

/* ---- Toolbar (barre de filtration) : base structurelle manquante sur .agent-toolbar (nouveau
   composant, cf warren.css pour la regle .agent-toolbar elle-meme -- ici seulement le contenu). ---- */
.wb-tb-title {
  color: var(--p-base); font-family: 'Menlo', 'Consolas', monospace;
  font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.wb-tb-spacer { flex: 1; }
.wb-tb-meta { color: #71717a; font-size: .74rem; }
.wb-tb-sep { color: #52525b; font-size: .78rem; }
.wb-select { background: rgba(39,39,42,.45); color: #e2e8f0; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: .3rem .5rem; font-size: .8rem; }
.wb-date { background: rgba(39,39,42,.45); color: #e2e8f0; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: .28rem .4rem; font-size: .78rem; }
.wb-custom-range { display: flex; align-items: center; gap: .3rem; }

/* ============================================================================
   PHASE 7 — PALETTE UNIFIÉE (revue : 3 verts, 4 oranges et 2 rouges concurrents cohabitaient dans ce
   fichier, sans aucun usage des variables canoniques du portail).
   Deux familles de couleurs, volontairement DISTINCTES et non interchangeables :
     · ÉTAT (jugement : bien / à surveiller / problème) -> --wb-ok/--wb-warn/--wb-bad, alias des
       --c-state-* de css/portal.css. Toute nouvelle couleur d'état DOIT passer par ces variables.
     · SÉRIE (familles budgétaires, pôles, types de récurrence) -> aucun jugement, définies en JS
       (FAMILY_META / POLE_COLORS / RECURRENCE_META) car elles indexent des données, pas des états.
   ============================================================================ */
.wb-page {
  --wb-ok:   var(--c-state-notif);      /* vert   — conforme / gardé / haute confiance */
  --wb-warn: var(--c-state-alert);      /* orange — à surveiller / réductible / à renégocier */
  --wb-bad:  var(--c-state-alarm);      /* rouge  — dépassé / superflu / à résilier */
  --wb-ok-rgb: var(--c-state-notif-rgb);
  --wb-warn-rgb: var(--c-state-alert-rgb);
  --wb-bad-rgb: var(--c-state-alarm-rgb);
  /* bleu — donnee ESTIMEE, pas encore constatee (ni bonne ni mauvaise nouvelle : en attente).
     Ajoute 2026-07-28 : la palette n'avait pas d'etat "neutre informatif", le bleu etait code en
     dur a 3 endroits (insight-cnt-info, trend-stable, icv-assistant). */
  --wb-info: #60a5fa;
  --wb-info-rgb: 96, 165, 250;
  --wb-mute: #71717a;
}
/* La modale de drill-down vit hors de .wb-page (document.body) : elle hérite des mêmes variables. */
.wb-drill {
  --wb-ok: var(--c-state-notif); --wb-warn: var(--c-state-alert); --wb-bad: var(--c-state-alarm);
  --wb-ok-rgb: var(--c-state-notif-rgb); --wb-warn-rgb: var(--c-state-alert-rgb); --wb-bad-rgb: var(--c-state-alarm-rgb);
  --wb-info: #60a5fa; --wb-info-rgb: 96, 165, 250;
  --wb-mute: #71717a;
}

/* ---- Page layout ---- */
.wb-page { display: flex; flex-direction: column; gap: .85rem; }
.wb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 900px) { .wb-grid2 { grid-template-columns: 1fr; } }
.wb-card h3 { margin: 0 0 .5rem; font-size: .92rem; }
.wb-note { color: #71717a; font-size: .74rem; margin: 0 0 .5rem; }

/* ---- Cartes repliables (mécanique UNIQUE : <details> + persistance uiState) ---- */
.wb-cardfold { padding-top: .55rem; }
.wb-card-sum {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .1rem; position: relative;
}
.wb-card-sum::-webkit-details-marker { display: none; }
.wb-card-sum > .ico { color: var(--p-base); transition: transform .15s; flex-shrink: 0; }
.wb-cardfold[open] > .wb-card-sum > .ico:first-child { transform: rotate(90deg); }
/* Epingle des cartes : TOUJOURS au coin haut-droit de la carte principale, quelle que soit la
   composition de l'en-tete. En flux normal (margin-left:auto) elle tombait sous les chiffres des
   cartes Recurrents et Cockpit, dont l'en-tete passe a la ligne -- cf en-tete du correctif.
   Meme bord droit que l'epingle de la carte Analyse Warren (.insight-head-right) : les quatre
   cartes la portent au meme pixel. */
/* Padding horizontal de `.card-pri` (portal.css). Repris ici parce qu'il faut le COMPENSER : les
   cartes `.bs-collapse` l'annulent (ligne "annule le padding de .card-pri" plus bas), les cartes
   generiques le gardent. Sans compensation, la meme valeur de `right` place l'epingle a deux
   distances differentes du bord de la carte selon son type. A garder synchronise avec portal.css. */
:root { --wb-card-pad-x: .9rem; }

/* Carte generique : en-tete d'une seule ligne, sans hauteur standard -- centrage sur toute sa
   hauteur, comme .insight-head-right le fait sur la carte d'analyse. Le `right` NEGATIF fait sortir
   l'epingle du contenu pour la poser dans le padding du cadre : elle se retrouve alors au meme
   endroit que sur les cartes repliables, qui n'ont pas ce padding. */
.wb-card-sum > .bsc-pin {
  position: absolute; top: 0; bottom: 0; margin-left: 0;
  right: calc(var(--ic01-right-edge) - var(--wb-card-pad-x));
  display: flex; align-items: center;
}
/* En-tetes qui passent a la ligne (Recurrents, Cockpit) : l'epingle se centre sur la PREMIERE
   bande de hauteur standard, pas sur l'en-tete entier. Avec `bottom: 0` elle descendrait au milieu
   des chiffres ; avec `top: 0` seul elle flotte au-dessus du titre, car .bsc-summary decale sa
   premiere ligne de .35rem de padding. La bande comme boite regle les deux. */
.wb-rc-sum > .bsc-pin, .wb-ck-sum > .bsc-pin {
  position: absolute; top: 0; height: var(--ic01-height); right: var(--ic01-right-edge);
  margin-left: 0; display: flex; align-items: center;
}
/* Reserve le placeholder : sans cela le selecteur de periode et la tendance, tous deux pousses a
   droite par margin-left:auto, passent SOUS l'epingle. Largeur derivee du standard Info_Carte_01
   (bord droit nomme + gabarit du bouton). Specificite portee a (0,3,0) : `.bs-collapse >
   .bsc-summary` pose un `padding` raccourci qui, a (0,2,0), ecrasait la version courte. */
.wb-card-sum { padding-right: calc(var(--ic01-right-edge) + 1.5rem); }
.bs-collapse > .bsc-summary.wb-rc-sum,
.bs-collapse > .bsc-summary.wb-ck-sum { padding-right: calc(var(--ic01-right-edge) + 1.5rem); }
/* Couleur du domaine, comme les titres des cartes repliables (.insight-title) : deux familles de
   cartes sur la meme page ne doivent pas avoir deux couleurs de titre. */
.wb-card-sum h3 {
  margin: 0; display: flex; align-items: center; gap: .35rem;
  font-size: .92rem; color: var(--p-base);
  /* Meme casse et meme espacement que .insight-title. La police courante est conservee : le
     monospace des en-tetes Info_Carte_01 sert a caler des colonnes a positions fixes, ce qu'un
     titre de carte generique n'a pas a faire. */
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.wb-card-sum h3 .ico { color: var(--p-base); opacity: .75; }
.wb-card-sum:hover h3 { color: var(--p-light); }
.wb-card-body { padding-top: .45rem; }

/* Sous-blocs repliables (tableaux, listes, répartitions du drill-down) — même mécanique */
.wb-det { border: 1px solid rgba(255,255,255,.06); border-radius: 6px; background: rgba(24,24,27,.28); margin-top: .5rem; }
.wb-det-sum {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .35rem;
  padding: .35rem .6rem; font-size: .76rem; color: #a1a1aa;
}
.wb-det-sum::-webkit-details-marker { display: none; }
.wb-det-sum .ico:first-child { transition: transform .15s; color: var(--p-base); flex-shrink: 0; }
.wb-det[open] > .wb-det-sum .ico:first-child { transform: rotate(90deg); }
.wb-det-sum:hover { color: #e5e5e5; }
.wb-det-sum b { color: var(--p-light); font-weight: 700; }
.wb-det-sum em { color: #71717a; font-style: italic; }
.wb-det[open] > .wb-det-sum { border-bottom: 1px solid rgba(255,255,255,.06); }
.wb-det-body { padding: .5rem .6rem .6rem; }
.wb-det-lbl { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

/* ---- État de chargement / erreur d'une carte (fiabilité d'affichage) ---- */
.wb-card.is-loading .wb-card-body, .wb-card.is-loading > div { opacity: .35; filter: grayscale(.6); transition: opacity .15s; }
.wb-card.is-loading .wb-card-spin, .wb-drill-body.is-loading::after {
  content: ''; display: inline-block; width: 13px; height: 13px; margin-left: .4rem;
  border: 2px solid rgba(var(--p-base-rgb),.25); border-top-color: var(--p-base);
  border-radius: 50%; animation: insight-spin .8s linear infinite; vertical-align: middle;
}
.wb-card-spin { display: none; }
.wb-drill-body.is-loading { opacity: .4; }
.wb-cardfail {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .8rem; color: #fecaca; background: rgba(var(--wb-bad-rgb), .09);
  border-left: 3px solid var(--wb-bad); border-radius: 0 6px 6px 0; padding: .5rem .7rem;
}
.wb-cardfail b { color: #fca5a5; }
.wb-cardfail-page { margin: 1rem 0; }
.wb-retry {
  background: rgba(39,39,42,.6); color: #e4e4e7; border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px; padding: .2rem .55rem; font-size: .74rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .25rem;
}
.wb-retry:hover { background: rgba(63,63,70,.75); }

/* ---- Éléments cliquables (drill-down) : l'affordance doit être évidente ---- */
.wb-clickable { cursor: pointer; }
.wb-hrow.wb-clickable:hover, tr.wb-clickable:hover, .wb-split-block.wb-clickable:hover,
.wb-highlight.wb-clickable:hover, .wb-anom-li.wb-clickable:hover {
  background: rgba(var(--p-base-rgb), .08);
  box-shadow: inset 2px 0 0 var(--p-base);
}
.wb-hrow.wb-clickable, tr.wb-clickable, .wb-anom-li.wb-clickable { border-radius: 4px; }
.wb-clickable:focus-visible { outline: 2px solid var(--p-base); outline-offset: 1px; }
.wb-stack-seg.wb-clickable:hover { filter: brightness(1.25); }
.wb-hit { cursor: pointer; }
.wb-hit-dot { fill: transparent; stroke: transparent; stroke-width: 2; }
.wb-hit:hover .wb-hit-dot { fill: var(--p-base); stroke: rgba(0,0,0,.5); }
.wb-hit-rect { fill: transparent; cursor: pointer; }
.wb-hit-rect:hover { fill: rgba(255,255,255,.10); }
.wb-lg-hint { color: #52525b; font-size: .68rem; display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; }

/* ---- Bandeau "en attente de categorisation" ---- */
.wb-banner {
  display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: #d4d4d8;
  background: rgba(56,189,248,.08); border-left: 3px solid #38bdf8; border-radius: 0 6px 6px 0;
  padding: .5rem .75rem;
}
.wb-banner:empty { display: none; }

/* ---- KPI ----
   REVUE : grille figée à 6 colonnes alors que la config par défaut n'expose que 4 KPI -> 2 colonnes
   fantômes et des cartes étirées. Grille ADAPTATIVE : autant de colonnes que la largeur le permet,
   quel que soit le nombre de KPI sélectionnés dans Warren_cfg. */
/* 2026-07-27 (demande Vincent) : grille FIXE a 6 emplacements (standard fleet, cf claude-health
   .blood-kpi-grid) -- les slots non selectionnes restent visibles en placeholder (kpiEmptySlot()),
   au lieu d'un auto-fit qui reduisait le nombre de colonnes selon la selection. */
.wb-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.wb-kpi {
  background: rgba(24,24,27,.35); border: 1px solid rgba(255,255,255,.07); border-left: 3px solid #52525b;
  border-radius: 6px; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .15rem;
}
/* Hiérarchie : la VALEUR domine, le libellé s'efface (revue : tout au même poids typographique).
   ENCORE UTILISE par kpiBox() / renderLoans() (mini-KPI "Endettement / Mensualités / Poids /
   Désendettement" dans la carte Emprunts) -- HORS PERIMETRE de la refonte 2026-07-27 (Vincent a
   nomme explicitement kpiCard()/#wb-kpis, pas kpiBox()) : ces regles restent donc actives. */
.wb-kpi-l { font-size: .66rem; color: #8a8a93; text-transform: uppercase; letter-spacing: .05em; }
.wb-kpi-v { font-size: 1.45rem; font-weight: 700; color: #f4f4f5; line-height: 1.15; font-variant-numeric: tabular-nums; }
.wb-kpi-normal { border-left-color: var(--wb-ok); }
.wb-kpi-normal .wb-kpi-v { color: var(--wb-ok); }
.wb-kpi-warn { border-left-color: var(--wb-warn); }
.wb-kpi-warn .wb-kpi-v { color: var(--wb-warn); }
.wb-kpi-critical { border-left-color: var(--wb-bad); }
.wb-kpi-critical .wb-kpi-v { color: var(--wb-bad); }
.wb-kpi-none { border-left-color: #52525b; }
/* 2026-07-27 (demande Vincent, responsive) : la regle #wb-kpis (auto-fit, 210px) a ete RETIREE --
   specificite ID (100) battait toujours .wb-kpis (classe, specificite 10) et rendait muette la
   grille fixe a 6 colonnes + les paliers degressifs plus bas (jamais actifs en pratique depuis
   leur ajout, meme element id="wb-kpis" class="wb-kpis", cf renderKpis()). Une seule regle de
   grille doit rester : .wb-kpis ci-dessus. */

/* ============================================================================
   REFONTE 2026-07-27 — composant KPI STANDARD du portail (.kpi-card/.kpi-score-card), porte
   depuis claude-health (sante.css .kpi-card/.kpi-score-card lignes 1019-1130 + .blood-kpi-card
   jauge/tendance lignes ~900-1045 ; sante-biometrie.js bioKpiCard()/kpiZonesHtml()) -- remplace
   dans #wb-kpis (grille "Etat des lieux") l'ancien markup .wb-kpi/.wb-kpi-l/.wb-kpi-v/.wb-kpi-*
   ci-dessus, qui reste par ailleurs actif pour kpiBox() (cf note plus haut).

   NE VIT PAS dans css/portal.css (interdit de toucher au CSS global partage pour ce chantier) --
   scope ici, dans le fichier Warren, exactement comme claude-health porte ses propres extensions
   (.blood-kpi-card) dans sante.css plutot que dans son portal.css commun.

   ATTENTION COLLISION DECOUVERTE EN COURS DE CHANTIER : contrairement au constat initial (0
   occurrence de .kpi-card dans css/portal.css, exact), tabs/dashboard/dashboard.css definit DEJA,
   independamment, des regles .kpi-card/.kpi-score-card/.kpi-head/.kpi-icon/.kpi-title/.lvl-*/
   .score-* EN GLOBAL (classes nues, non scopees) -- et index.html charge TOUS les CSS d'onglets
   sans lazy-load, donc dashboard.css est deja actif sur l'onglet Warren (et vice-versa). Pour ne
   PAS corrompre les cartes KPI de Dashboard (ni en dependre implicitement -- couplage invisible
   inter-onglets), TOUTES les regles ci-dessous sont qualifiees par .wb-kpi-card, ajoutee sur la
   carte EN PLUS des classes standard kpi-card/kpi-score-card/lvl-*/score-* (presentes telles
   quelles sur le markup, cf demande Vincent + verification kpiCard()). A noter pour Vincent : 3
   implementations quasi identiques du meme composant coexistent maintenant (health, business/
   dashboard, business/warren) -- candidat naturel a une promotion future vers portal.css, non
   fait ici (hors perimetre + interdiction explicite de toucher au CSS global sur ce chantier).
   ============================================================================ */
/* Shell/lvl-*/head/icon/title/score/score-card generiques : css/portal.css (base partagee
   Dashboard+Warren, 2026-07-28 -- ex-collision documentee ci-dessus resolue par promotion plutot
   que par scoping seul). Ci-dessous : uniquement les deltas propres a Warren (troncature valeurs
   longues, min-height pour la jauge, pied 2-parties, bk-meta) + jauge/tendance plus bas. */
.wb-kpi-card .kpi-score .ks-value {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 6em; display: inline-block; vertical-align: bottom;
}
.wb-kpi-card .kpi-score .ks-unit {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 3em; display: inline-block; vertical-align: bottom;
}
.wb-kpi-card.kpi-card.kpi-score-card {
  min-height: 7rem; /* homogeneite visuelle entre cartes avec jauge et cartes kpi-gauge--empty */
}
.wb-kpi-card .kpi-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: .15rem .5rem;
}
.wb-kpi-card .kpi-foot .bk-meta { color: rgba(255,255,255,.5); }

/* ---- Jauge a seuils (porte depuis sante.css .blood-kpi-card .kpi-gauge/.kg-* -- scope ici sous
   .wb-kpi-card). Range [gmin,gmax] calcule cote JS a partir des 4 seuils + valeur courante (Warren
   n'a pas d'historique 3 mois observe pour ancrer le range independamment, cf kpiCard()). ---- */
.wb-kpi-card .kpi-gauge {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .35rem;
  font-family: 'Menlo','Consolas',monospace; font-size: .62rem; line-height: 1.2;
}
.wb-kpi-card .kg-lbl { white-space: nowrap; color: rgba(var(--gauge-rgb),.7); overflow: hidden; text-overflow: ellipsis; max-width: 3.6rem; }
.wb-kpi-card .kg-lbl--min { text-align: left; }
.wb-kpi-card .kg-lbl--max { text-align: right; }
.wb-kpi-card .kg-bar {
  position: relative; height: 4px;
  background: linear-gradient(to right,
    rgba(var(--gauge-rgb),.12) 0%, rgba(var(--gauge-rgb),.30) 8%,
    rgba(var(--gauge-rgb),.30) 92%, rgba(var(--gauge-rgb),.12) 100%);
  border-radius: 2px; overflow: visible;
}
.wb-kpi-card.score-ok   { --gauge-rgb: var(--wb-ok-rgb); }
.wb-kpi-card.score-warn { --gauge-rgb: var(--wb-warn-rgb); }
.wb-kpi-card.score-crit { --gauge-rgb: var(--wb-bad-rgb); }
.wb-kpi-card .kg-marker {
  position: absolute; top: -4px; transform: translateX(-50%); z-index: 2; height: 12px; width: 2px;
}
.wb-kpi-card .kg-marker-line {
  width: 2px; height: 12px; background: rgb(var(--marker-rgb)); border-radius: 1px;
  box-shadow: 0 0 4px rgba(var(--marker-rgb),.5);
}
.wb-kpi-card .kg-marker-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--marker-rgb));
  border: 2px solid rgba(0,0,0,.5); position: absolute; top: 2px; left: -3px;
  box-shadow: 0 0 8px rgba(var(--marker-rgb),.8), 0 0 16px rgba(var(--marker-rgb),.3);
}
.wb-kpi-card .kg-marker--ok   { --marker-rgb: var(--wb-ok-rgb); }
.wb-kpi-card .kg-marker--warn { --marker-rgb: var(--wb-warn-rgb); }
.wb-kpi-card .kg-marker--crit { --marker-rgb: var(--wb-bad-rgb); }
.wb-kpi-card .kg-bar--zoned { background: rgba(255,255,255,.08); }
.wb-kpi-card .kg-zone       { position: absolute; top: 0; height: 100%; }
.wb-kpi-card .kg-zone--ok   { background: rgba(var(--wb-ok-rgb),.55); }
.wb-kpi-card .kg-zone--warn { background: rgba(var(--wb-warn-rgb),.55); }
.wb-kpi-card .kg-zone--crit { background: rgba(var(--wb-bad-rgb),.55); }
.wb-kpi-card .kg-zone-tick  { position: absolute; top: -2px; width: 1px; height: 8px; background: rgba(255,255,255,.6); }
/* Pas de seuil (KPI purement informatif) ou pas de valeur : tiret neutre, jamais de barre inventee. */
.wb-kpi-card .kpi-gauge--empty {
  display: flex; justify-content: center; align-items: center;
  font-family: 'Menlo','Consolas',monospace; font-size: .6rem; color: rgba(255,255,255,.35); font-style: italic;
}

/* ---- Tendance (coin bas-droit du pied de carte, cf sante.css .bk-trend-*) -- mecanique prete,
   inactive aujourd'hui faute de valeur "periode precedente" disponible par KPI, cf kpiCard(). ---- */
.wb-kpi-card .bk-trend-corner { font-size: 1.05rem; line-height: 1; font-weight: 700; flex-shrink: 0; margin: 0; }
.wb-kpi-card .bk-trend-ok   { color: var(--wb-ok); }
.wb-kpi-card .bk-trend-warn { color: var(--wb-warn); }
.wb-kpi-card .bk-trend-crit { color: var(--wb-bad); }
.wb-kpi-card .bk-trend-none { color: var(--wb-mute); }

@media (max-width: 680px) {
  .wb-kpi-card.kpi-card.kpi-score-card { min-height: 6.5rem; }
  .wb-kpi-card .bk-trend-corner { font-size: 1rem; }
}

/* ---- Barre EMPILÉE (lecture d'une répartition en un coup d'œil) ---- */
.wb-stack { display: flex; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.05); margin: .1rem 0 .35rem; }
.wb-stack-big { height: 26px; border-radius: 8px; }
.wb-stack-empty { background: rgba(255,255,255,.04); }
.wb-stack-seg { display: flex; align-items: center; justify-content: center; min-width: 2px; transition: filter .12s; }
.wb-stack-seg i { font-style: normal; font-size: .62rem; font-weight: 700; color: rgba(0,0,0,.62); letter-spacing: .02em; }
.wb-stack-lg { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .74rem; color: #a1a1aa; margin-bottom: .45rem; }
.wb-slg { display: inline-flex; align-items: center; gap: .3rem; }
.wb-slg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.wb-slg b { color: #e5e5e5; font-variant-numeric: tabular-nums; }
.wb-slg em { color: #71717a; font-style: normal; font-size: .92em; }

/* ---- Donut (répartition + total dominant au centre) ---- */
.wb-dn-flex { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.wb-dn-bars { flex: 1 1 260px; min-width: 0; }
.wb-donut { width: 132px; height: 132px; flex-shrink: 0; }
.wb-dn-seg { transition: opacity .12s, stroke-width .12s; }
.wb-dn-seg:hover { stroke-width: 25; }
.wb-dn-v { fill: #f4f4f5; font-size: 17px; font-weight: 700; }
.wb-dn-l { fill: #71717a; font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; }

/* ---- Barre proportionnelle DANS une cellule de tableau (le poids se voit, pas se calcule) ---- */
.wb-cellbar { min-width: 130px; }
.wb-cellbar-t { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; margin-bottom: .12rem; }
.wb-cellbar-t i { display: block; height: 100%; background: var(--p-base); border-radius: 3px; }
.wb-cellbar b { font-variant-numeric: tabular-nums; font-size: .78rem; }

/* ---- Mini histogramme mensuel (panneau de détail) ---- */
.wb-mbars { display: flex; align-items: flex-end; gap: 2px; height: 62px; overflow-x: auto; padding-bottom: 1.1rem; position: relative; }
.wb-mbar { flex: 1 0 14px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.wb-mbar i { display: block; width: 100%; background: linear-gradient(180deg, var(--p-base), rgba(var(--p-base-rgb),.45)); border-radius: 2px 2px 0 0; min-height: 2px; }
.wb-mbar em { position: absolute; bottom: -1.05rem; font-size: .55rem; color: #71717a; font-style: normal; white-space: nowrap; }
.wb-mbar:hover i { filter: brightness(1.3); }

/* ---- Distribution (barres horizontales) ---- */
.wb-hrow { display: flex; align-items: center; gap: .5rem; padding: .22rem .3rem; font-size: .8rem; }
.wb-hlbl { width: 170px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wb-hbar { flex: 1; height: 9px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; }
.wb-hbar span { display: block; height: 100%; border-radius: 5px; }
.wb-hval { width: 150px; flex-shrink: 0; text-align: right; color: #d4d4d8; font-variant-numeric: tabular-nums; }
.wb-hval i { color: #71717a; font-style: normal; }

/* ---- Courbe SVG ---- */
.wb-svg { width: 100%; height: auto; }
.wb-ax { font-size: 9px; fill: #71717a; }
.wb-zero { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.wb-line-revenu { stroke: #38bdf8; stroke-width: 1.8; }
/* Un seul rouge sur la page : la courbe "dépenses" reprend --wb-bad (ex-#f87171, 2e rouge concurrent).
   La distinction revenus/dépenses/net reste portée par la légende, pas par une nuance de rouge. */
.wb-line-depense { stroke: var(--wb-bad); stroke-width: 1.8; }
.wb-line-net { stroke: var(--p-base); stroke-width: 1.8; }
.wb-legend { display: flex; gap: 1rem; margin-top: .3rem; font-size: .74rem; }
.wb-lg { display: flex; align-items: center; gap: .3rem; }
.wb-lg::before { content: ''; display: inline-block; width: 12px; height: 2px; }
.wb-lg-revenu::before { background: #38bdf8; }
.wb-lg-depense::before { background: var(--wb-bad); }
.wb-lg-net::before { background: var(--p-base); }

/* ---- Table abonnements ---- */
.wb-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.wb-table th { text-align: left; color: #a1a1aa; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; padding: .3rem .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.wb-table td { padding: .35rem .5rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.wb-table tbody tr:hover { background: rgba(var(--p-base-rgb),.05); }

/* ============================================================================
   Systeme "Insight" (port depuis claude-health sante.css, 1re utilisation sur claude-business).
   Simplifie : SANS conversation/accept-reject/todo (backend budget.js ne les expose pas).
   ============================================================================ */
.insight-card { margin-bottom: .6rem; border-left: 3px solid var(--p-base); position: relative; }
/* 2026-07-28 (demande Vincent) : entete "hauteur fixe, decompose en placeholders" -- standard porte
   depuis claude-health (sante.css, bloc "Analyse Hippocrate v2/v3", "3 premieres cartes" de
   SPORT > Plan d'Entrainement). Chaque information occupe une position ABSOLUE fixe dans
   .insight-head (position:relative), au lieu d'un flex qui grandit/retasse selon le contenu --
   .bs-collapse > .bsc-summary (portal.css) fixe la hauteur (min-height:40px). Valeurs de decalage
   (300/350/385/460/730/753px) reprises telles quelles du standard de reference (police-titre
   monospace majuscule a chasse fixe, meme raisonnement de calibrage) ; repli en flux normal sous
   768px, cf media query plus bas. */
.insight-head { display: flex; align-items: center; gap: .5rem; position: relative; }
.insight-title { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: .3rem; color: var(--p-base); font-family: 'Menlo','Consolas',monospace; letter-spacing: .06em; text-transform: uppercase; }
.insight-score { position: absolute; left: var(--ic01-score-left); top: 50%; transform: translateY(-50%); font-weight: 700; font-size: .9rem; padding: .05rem .4rem; border-radius: 5px; }
/* Palette d'état unifiée (--wb-*, cf en-tête de ce fichier) — remplace les 3 verts / 4 oranges /
   2 rouges concurrents qui cohabitaient ici. */
.insight-score-ok { background: rgba(var(--wb-ok-rgb),.18); color: var(--wb-ok); }
.insight-score-warn { background: rgba(var(--wb-warn-rgb),.18); color: var(--wb-warn); }
.insight-score-crit { background: rgba(var(--wb-bad-rgb),.18); color: var(--wb-bad); }
.insight-trend { position: absolute; left: var(--ic01-trend-left); top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 1rem; line-height: 1; }
.insight-trend-up { color: var(--wb-ok); } .insight-trend-down { color: var(--wb-bad); } .insight-trend-stable { color: #3b82f6; }
.insight-spark { position: absolute; left: var(--ic01-slot5-left); top: 50%; transform: translateY(-50%); color: var(--p-light); margin: 0; }
/* left:460px reste en dur : position INTERNE au slot #5 (place laissee a la sparkline avant les
   pastilles), le standard ne nomme que les bornes du slot -- right en revanche EST une borne
   nommee (fin de slot5 = --ic01-slot5-left + --ic01-slot5-width). */
.insight-cnts { position: absolute; left: 460px; right: calc(100% - var(--ic01-slot5-left) - var(--ic01-slot5-width)); top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: .3rem; }
.bsc-trigger-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 500; padding: .12rem .45rem; border-radius: 999px;
  border: 1px solid rgba(var(--p-base-rgb),.35); background: rgba(var(--p-base-rgb),.08);
  color: var(--p-base); white-space: nowrap; letter-spacing: 0; margin-left: .4rem;
}
.insight-head .bsc-trigger-badge { position: absolute; left: var(--ic01-trigger-left); top: 50%; transform: translateY(-50%); margin-left: 0; }
.insight-cnt { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; padding: .08rem .4rem; border-radius: 9px; font-weight: 600; }
.insight-cnt-alarme { background: rgba(var(--wb-bad-rgb),.18); color: var(--wb-bad); }
.insight-cnt-alerte { background: rgba(var(--wb-warn-rgb),.18); color: var(--wb-warn); }
.insight-cnt-info { background: rgba(59,130,246,.18); color: #60a5fa; }
.insight-cnt-reco { background: rgba(var(--p-base-rgb),.18); color: var(--p-base); }
.insight-cnt.is-zero { background: rgba(148,163,184,.12); color: rgba(148,163,184,.65); }
.insight-head-right { position: absolute; right: var(--ic01-right-edge); top: 0; bottom: 0; display: flex; align-items: center; gap: .6rem; }
.insight-runs-today { color: var(--p-base); font-size: .72rem; font-weight: 600; font-family: 'Menlo','Consolas',monospace; margin-right: .3rem; }
/* margin-left:auto retabli (manquait depuis le tout premier portage, avant meme le chantier
   Info_Carte_01) -- reprise exacte de claude-health sante.css .insight-head .insight-meta. */
.insight-meta { margin: 0 .3rem 0 auto; font-size: .72rem; color: #71717a; white-space: nowrap; }
.insight-actions { display: flex; align-items: center; gap: 2px; }
.bs-collapse > .bsc-summary {
  display: flex !important; align-items: center; gap: .55rem;
  min-height: var(--ic01-height); padding: .35rem .5rem;
  cursor: pointer; list-style: none; transition: background .15s; user-select: none;
}
@media (max-width: 768px) {
  .insight-head { flex-wrap: wrap; }
  .insight-score, .insight-trend, .insight-spark, .insight-cnts {
    position: static; left: auto; right: auto; transform: none;
  }
  .insight-head .bsc-trigger-badge { position: static; left: auto; transform: none; margin-left: 0; }
  .insight-head-right {
    position: static; top: auto; bottom: auto; right: auto;
    margin-left: auto; flex-wrap: wrap;
  }
}
.insight-refresh.is-running {
  opacity: 1 !important; animation: insight-spin 1s linear infinite;
  color: var(--p-base) !important; filter: drop-shadow(0 0 6px rgba(var(--p-base-rgb), .5));
}
@keyframes insight-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.insight-running { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--p-base); padding: .3rem 0; }
.insight-spinner { width: 16px; height: 16px; border: 2px solid rgba(var(--p-base-rgb),.25); border-top-color: var(--p-base); border-radius: 50%; animation: insight-spin .8s linear infinite; }
.insight-body { font-size: .85rem; line-height: 1.5; color: #e5e5e5; }
.insight-synth { font-size: .85rem; line-height: 1.55; color: #e5e5e5; }
.insight-detail { margin-top: .5rem; }
.insight-synth { padding: .55rem .75rem; background: rgba(0,0,0,.15); border-left: 2px solid rgba(var(--p-base-rgb),.35); border-radius: 0 4px 4px 0; margin-top: .5rem; }
.insight-synth[data-collapsed="1"] { max-height: 8.84em; overflow-y: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; -ms-overflow-style: none; }
.insight-synth[data-collapsed="1"]::-webkit-scrollbar { width: 0; height: 0; display: none; }
.insight-synth strong { color: var(--p-light); font-weight: 600; }
/* Libelle de puce ( "- **Libelle** : ..." ) = couleur agent pleine, distinct du gras "secondaire"
   (accroche/emphase) qui reste en --p-light -- le libelle est le 1er enfant du <li>, :first-child
   cible donc fiablement lui seul (reprise exacte claude-health sante.css). */
.insight-synth .wb-md-ul li strong:first-child { color: var(--p-base); }
.insight-synth code { color: #7dd3fc; background: rgba(56,189,248,.10); border-radius: 3px; padding: 0 .25rem; font-size: .92em; }
.insight-synth u { text-decoration-color: var(--p-base); text-underline-offset: 2px; }
.insight-synth .wb-md-ul { margin: .4rem 0; padding-left: 1.1rem; list-style: disc; }
.insight-synth .wb-md-ul li { margin: .28rem 0; line-height: 1.5; }
.insight-synth .wb-md-ul li::marker { color: var(--p-base); }
.insight-synth br { display: block; content: ""; margin-top: .3rem; }
.insight-toggle { margin-top: .35rem; background: none; border: none; color: var(--p-base); opacity: .85; cursor: pointer; font-size: .78rem; padding: 0; display: flex; align-items: center; gap: .4rem; }
.insight-toggle:hover .it-label { text-decoration: underline; }
.sante-empty, .agent-empty { color: #64748b; font-style: italic; }
/* Socle .bs-collapse porte depuis claude-health (sante.css) 2026-07-28 -- etait ABSENT : le
   padding de .card-pri s'appliquait au <details> et decalait tout l'en-tete vers la droite. */
.bs-collapse { border: none; margin: 0; padding: 0; }
/* Cf en-tete : .bs-collapse annule le padding de .card-pri, le corps doit porter le sien. */
.bs-collapse > .wb-card-body { padding: .5rem .5rem .15rem; }
.bs-collapse > .bsc-summary:hover { background: rgba(var(--p-base-rgb), .05); }
.bs-collapse[open] > .bsc-summary { border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: .5rem; padding-bottom: .45rem; }
.bs-collapse:not([open]) > .bsc-body { display: none; }
.bsc-summary { cursor: pointer; list-style: none; }
.bsc-summary::-webkit-details-marker { display: none; }
.bsc-chev { color: var(--p-light); opacity: .55; font-size: .85rem; transition: transform .15s; flex-shrink: 0; width: 12px; align-self: center; }
.bs-collapse[open] > .bsc-summary .bsc-chev { transform: rotate(90deg); color: var(--p-base); opacity: 1; }
details[open] > .bsc-summary .bsc-chev { transform: rotate(90deg); }
.bsc-body { padding: 0; }

/* Points d'attention (alarmes/info/reco) — version simplifiee (pas d'accept/reject/todo) */
/* 2026-07-28 (demande Vincent) : "Points d'attention" -- classes bs-findings-block/bs-finding/
   bsf-*, reprises telles quelles du standard Hippocrate (claude-health sante.css ~L1222-1332,
   cf principe #123 "Analyse d'un sujet/mesure"). Remplace .wb-poi-* (retirees) -- 3 sections
   empilees Alarmes/Info/Recommandations avant, un seul bloc trie par severite desormais (cf JS
   insightHtml()). Regles interactives (bsf-interactive-btns, formulaires accepter/annoter/ask/todo)
   NON portees : pas d'equivalent backend cote budget.js. */
.bs-findings-block { margin-top: .35rem; border: 1px solid rgba(var(--p-base-rgb), .2); border-radius: 5px; background: rgba(0,0,0,.15); }
.bs-findings-summary { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; cursor: pointer; list-style: none; font-size: .8rem; }
.bs-findings-summary::-webkit-details-marker { display: none; }
.bs-fb-chev { display: inline-block; color: var(--p-base); transition: transform .12s; font-size: .8rem; }
.bs-findings-block[open] .bs-fb-chev { transform: rotate(90deg); }
.bs-fb-title { font-weight: 600; color: var(--p-base); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.bs-fb-counts { display: inline-flex; gap: .35rem; margin-left: auto; align-items: center; }
.bs-fb-c { font-size: .65rem; padding: .08rem .4rem; border-radius: 3px; border: 1px solid; font-family: 'Menlo','Consolas',monospace; font-weight: 600; }
.bs-fb-c.open  { color: #fb923c; border-color: rgba(251,146,60,.4); background: rgba(251,146,60,.1); }
.bs-fb-c.acc   { color: #4ade80; border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.08); }
.bs-fb-c.total { color: #94a3b8; border-color: rgba(148,163,184,.3); background: rgba(100,116,139,.08); }
.bs-findings-block[open] .bs-findings-list { display: block; padding: .25rem .55rem .55rem; border-top: 1px solid rgba(var(--p-base-rgb), .12); }
.bs-finding { background: rgba(0,0,0,.15); border-radius: 4px; border-left: 2px solid transparent; margin-bottom: .35rem; font-size: .82rem; transition: background .12s; }
.bs-finding[open] { background: rgba(var(--p-base-rgb), .04); padding-bottom: .55rem; }
.bs-finding.lvl-critical { border-left-color: #ef4444; }
.bs-finding.lvl-high     { border-left-color: #fb923c; }
.bs-finding.lvl-medium   { border-left-color: #eab308; }
.bs-finding.lvl-low      { border-left-color: #38bdf8; }
.bs-finding.lvl-reco     { border-left-color: var(--p-base); }
.bs-finding summary { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; padding: .35rem .55rem; cursor: pointer; user-select: none; list-style: none; }
.bs-finding summary::-webkit-details-marker { display: none; }
.bsf-axe { flex-shrink: 0; width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; font-family: 'Menlo','Consolas',monospace; text-transform: uppercase; letter-spacing: .05em; color: var(--p-light); font-weight: 600; }
.bsf-level { flex-shrink: 0; min-width: 60px; text-align: center; font-size: .62rem; font-weight: 700; padding: .1rem .35rem; border-radius: 3px; border: 1px solid; font-family: 'Menlo','Consolas',monospace; }
.bsf-level-critical { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,.12); }
.bsf-level-high     { color: #fb923c; border-color: #fb923c; background: rgba(251,146,60,.12); }
.bsf-level-medium   { color: #eab308; border-color: #eab308; background: rgba(234,179,8,.10); }
.bsf-level-low      { color: #38bdf8; border-color: #38bdf8; background: rgba(56,189,248,.10); }
.bsf-level-reco     { color: var(--p-base); border-color: var(--p-base); background: rgba(var(--p-base-rgb),.14); }
.bsf-title { flex: 1; min-width: 0; color: #e4e4e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsf-body { padding: .25rem .85rem .25rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; font-size: .82rem; color: #d4d4d8; }
.bsf-row { display: grid; grid-template-columns: 110px 1fr; gap: .65rem; align-items: baseline; }
.bsf-lbl { font-family: 'Menlo','Consolas',monospace; font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--p-base-rgb), .9); font-weight: 600; }
.bsf-val { line-height: 1.45; }
.bsf-recos { margin: 0; padding-left: 1rem; display: flex; flex-direction: column; gap: .2rem; line-height: 1.4; }
.bsf-markers code { background: rgba(0,0,0,.4); border: 1px solid rgba(var(--p-base-rgb), .25); padding: .05rem .35rem; border-radius: 3px; font-size: .72rem; color: var(--p-light); margin-right: .25rem; }

/* 2026-07-28 (demande Vincent) : parite fonctionnelle carte Insight -- boutons/formulaires par
   point d'attention (accepter/rejeter/annoter/demander/todo) + conversation. Reprise directe de
   claude-health sante.css (regles .bsf-interactive-btns/.bsf-note-form/.bsf-ask-form/.bsf-todo-form/
   .bsf-annot-*/.t-btn/.insight-convo-*), adaptee a la palette Warren (var(--p-base) deja partagee,
   pas de couleurs specifiques a re-mapper). */
/* Tags "classe"/"rejete" retires 2026-07-28 (Vincent : redondants avec les boutons du corps
   deplie). L'etat accepte/rejete reste visible via .bs-finding--accepted/--rejected (opacite) et
   le libelle du bouton, qui bascule en "Re-ouvrir". */
.bs-finding--accepted, .bs-finding--rejected { opacity: .55; }

.bsf-user-note {
  width: 100%; min-height: 2.2rem; max-height: 6rem; resize: vertical;
  background: rgba(0,0,0,.3); color: #d4d4d8; border: 1px solid rgba(var(--p-base-rgb), .2);
  border-radius: 6px; padding: .4rem .6rem; font-size: .78rem; line-height: 1.5;
  font-family: inherit; box-sizing: border-box; margin-bottom: .35rem;
}
.bsf-user-note:focus { border-color: rgba(var(--p-base-rgb), .5); outline: none; }
.bsf-interactive-btns {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  padding-top: .4rem; margin-bottom: .35rem;
  border-top: 1px solid rgba(var(--p-base-rgb), .12);
}
.insight-card .t-btn {
  background: rgba(39,39,42,.5); border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
  color: #e4e4e7; cursor: pointer; font-size: .82rem; padding: .35rem .75rem;
}
.insight-card .t-btn:hover:not(:disabled) { background: rgba(63,63,70,.65); border-color: rgba(var(--p-base-rgb), .3); }
.insight-card .t-btn:disabled { cursor: not-allowed; opacity: .4; }
.insight-card .t-btn.primary {
  background: linear-gradient(135deg, rgba(var(--p-base-rgb), .85), rgba(var(--p-glow-rgb), .75));
  border-color: rgba(var(--p-base-rgb), .8); color: #1a1408; font-weight: 600;
}
.bsf-interactive-btns .t-btn {
  font-size: .75rem; padding: .25rem .65rem;
  border: 1px solid rgba(var(--p-base-rgb), .35);
  border-radius: 5px; color: var(--p-base);
  background: rgba(var(--p-base-rgb), .06);
  transition: border-color .15s, background .15s, color .15s;
  cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
}
.bsf-interactive-btns .t-btn:hover { border-color: rgba(var(--p-base-rgb), .7); background: rgba(var(--p-base-rgb), .14); color: var(--p-light); }
.bsf-interactive-btns .t-btn:disabled { opacity: .5; cursor: default; }
.bsf-note-form, .bsf-ask-form, .bsf-todo-form {
  margin: .5rem 0; padding: .65rem .8rem;
  background: rgba(0,0,0,.25); border: 1px solid rgba(var(--p-base-rgb), .15);
  border-radius: 8px;
}
.bsf-ask-question, .bsf-todo-comment {
  width: 100%; background: rgba(0,0,0,.3); color: #d4d4d8;
  border: 1px solid rgba(var(--p-base-rgb), .2); border-radius: 6px;
  padding: .4rem .6rem; font-size: .78rem; line-height: 1.5;
  font-family: inherit; resize: vertical; box-sizing: border-box;
}
.bsf-todo-title {
  width: 100%; background: rgba(0,0,0,.3); color: #e4e4e7;
  border: 1px solid rgba(var(--p-base-rgb), .2); border-radius: 6px;
  padding: .4rem .6rem; font-size: .85rem; font-weight: 500;
  font-family: inherit; margin-bottom: .4rem; box-sizing: border-box;
}
.bsf-todo-title:focus, .bsf-ask-question:focus, .bsf-todo-comment:focus { border-color: rgba(var(--p-base-rgb), .5); outline: none; }
.bsf-inline-actions { display: flex; gap: .4rem; margin-top: .4rem; justify-content: flex-end; }
.bsf-inline-actions .t-btn { font-size: .75rem; padding: .25rem .6rem; }
.bsf-ask-response { margin-top: .5rem; }
.bsf-claude-response {
  font-size: .82rem; line-height: 1.65; color: #d4d4d8;
  padding: .5rem .7rem; background: rgba(var(--p-base-rgb), .06);
  border-left: 2px solid rgba(var(--p-base-rgb), .4);
  border-radius: 0 6px 6px 0;
}
.bsf-claude-response strong { color: var(--p-base); font-weight: 600; }

.bsf-annot-toggle { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--p-light); }
.bsf-annot-toggle:hover { color: var(--p-base); }
.bsf-annot-count { font-weight: 600; font-size: .72rem; background: rgba(var(--p-base-rgb), .15); border: 1px solid rgba(var(--p-base-rgb), .25); padding: 1px 6px; border-radius: 9px; color: var(--p-base); }
.bsf-annot-history { margin-top: .5rem; padding: .5rem .65rem; background: rgba(0,0,0,.25); border-left: 2px solid rgba(var(--p-base-rgb), .35); border-radius: 4px; }
.bsf-annot-item { padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.bsf-annot-item:last-child { border-bottom: none; }
.bsf-annot-meta { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: #94a3b8; margin-bottom: .2rem; }
.bsf-annot-meta .bsf-annot-author { color: var(--p-light); }
.bsf-annot-delete { margin-left: auto; background: none; border: none; cursor: pointer; color: #94a3b8; font-size: .85rem; padding: 0 .25rem; opacity: .5; transition: opacity .15s, color .15s; }
.bsf-annot-delete:hover { opacity: 1; color: #ef4444; }
.bsf-annot-text { font-size: .82rem; color: #d4d4d8; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

/* Conversation (point 4 du standard Hippocrate) */
.insight-convo { margin-top: .7rem; margin-bottom: .5rem; border-top: 1px solid #2a2a2a; padding-top: .5rem; }
.insight-convo-thread { display: flex; flex-direction: column; gap: .35rem; max-height: 220px; overflow-y: auto; margin-bottom: .4rem; }
.insight-convo-thread:empty { display: none; }
.icv-msg { display: flex; gap: .4rem; align-items: baseline; font-size: .82rem; line-height: 1.4; }
.icv-who { flex-shrink: 0; font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; padding-top: .1rem; }
.icv-user .icv-who { color: var(--p-base); }
.icv-assistant .icv-who { color: #60a5fa; }
.icv-txt { color: #e5e5e5; }
.icv-del { margin-left: auto; background: none; border: none; color: #52525b; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .2rem; }
.icv-del:hover { color: #f87171; }
.icv-assistant .icv-txt { color: #cbd5e1; }
.insight-convo-input { display: flex; align-items: flex-end; gap: .4rem; }
.insight-convo-text { flex: 1; background: #1a1a1a; border: 1px solid #333; border-radius: 6px; padding: .4rem .55rem; color: #e5e5e5; font-size: .83rem; resize: none; font-family: inherit; line-height: 1.4; }
.insight-convo-send { background: var(--p-base); color: #1a1408; border: none; border-radius: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.insight-convo-send:hover { filter: brightness(1.08); }
.insight-convo-send:disabled { opacity: .5; cursor: default; }
.ia-angle { color: #71717a; font-style: italic; font-size: .76rem; }

/* ============================================================================
   PHASE 4 — cartes d'analyse supplementaires (Essentiel/Superflu, Recurrent/Non-recurrent, Evolution
   par famille, Synthese du mois + projection, Anomalies, Repartition par pole, Heatmap de couverture).
   ============================================================================ */

/* ---- Carte "Essentiel vs Superflu" : callout "part compressible" ---- */
.wb-highlight {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .5rem;
  padding: .5rem .7rem; background: rgba(var(--p-base-rgb),.1); border-left: 3px solid var(--p-base);
  border-radius: 0 6px 6px 0; font-size: .82rem; color: #e5e5e5;
}
.wb-highlight b { font-size: .95rem; color: var(--p-light); }
.wb-highlight i { color: #a1a1aa; font-style: italic; }

/* ---- Carte "Récurrent vs Non-récurrent" ---- */
.wb-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; }
.wb-split-block { background: rgba(24,24,27,.35); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; padding: .55rem .7rem; }
.wb-split-l { font-size: .68rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: .03em; }
.wb-split-v { font-size: 1.15rem; font-weight: 700; color: #e5e5e5; }
.wb-split-pct { font-size: .74rem; color: var(--p-light); }
.wb-sub-breakdown { margin: .3rem 0 .6rem; }
.wb-hrow-sub { padding-left: .8rem; opacity: .92; }
.wb-hrow-sub .wb-hlbl { width: 150px; font-weight: 500; }

/* ---- Carte "Évolution par famille" : legende (aires SVG stylees inline) ---- */
.wb-lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }

/* ---- Carte "Synthèse du mois en cours + projection" ---- */
/* Selecteur d'axe du camembert : rouge pour les depenses, vert pour les revenus. L'etat actif est
   en INVERSION (fond plein, texte sombre) -- sur fond sombre, un simple changement de teinte de
   texte ne dit pas assez clairement lequel des deux axes on regarde. */
/* Selecteur des CATEGORIES : meme hauteur de controle que les autres elements d'en-tete, couleurs
   d'axe, fond translucide meme actif -- sur une carte pleine largeur la teinte suffit, l'inversion
   opaque du camembert y pesait trop. */
#wb-cat-toggle { margin: 0 0 0 auto; flex-shrink: 0; display: flex; align-items: center; }
#wb-cat-toggle button {
  font-size: .7rem; padding: 0 .55rem; height: var(--wb-headctl-h); line-height: 1;
  display: inline-flex; align-items: center; transition: background .15s, color .15s, border-color .15s;
}
#wb-cat-toggle button[data-flow="depense"] { color: var(--wb-bad); border-color: rgba(var(--wb-bad-rgb), .3); }
#wb-cat-toggle button[data-flow="revenu"]  { color: var(--wb-ok);  border-color: rgba(var(--wb-ok-rgb), .3); }
#wb-cat-toggle button[data-flow="depense"]:hover { background: rgba(var(--wb-bad-rgb), .12); }
#wb-cat-toggle button[data-flow="revenu"]:hover  { background: rgba(var(--wb-ok-rgb), .12); }
#wb-cat-toggle button[data-flow="depense"].active {
  background: rgba(var(--wb-bad-rgb), .22); border-color: rgba(var(--wb-bad-rgb), .6);
  color: var(--wb-bad); font-weight: 700;
}
#wb-cat-toggle button[data-flow="revenu"].active {
  background: rgba(var(--wb-ok-rgb), .22); border-color: rgba(var(--wb-ok-rgb), .6);
  color: var(--wb-ok); font-weight: 700;
}

#wb-catpie-toggle { margin: 0 0 0 auto; flex-shrink: 0; }
#wb-catpie-toggle button {
  font-size: .7rem; padding: 0 .5rem; height: var(--wb-headctl-h); line-height: 1;
  display: inline-flex; align-items: center;
}
/* Eclatement d'une categorie au survol de sa ligne de legende. Ancre sur l'entree, decale vers la
   gauche : la legende touche le bord droit de la carte, un popup aligne a droite y deborderait. */
.wb-catpie-lg .wb-slg { position: relative; }
/* Une carte qui abrite un panneau flottant doit passer DEVANT ses voisines pendant le survol.
   `.card-pri` porte un `backdrop-filter`, qui cree un contexte d'empilement : le z-index du panneau
   ne le compare qu'aux elements de sa propre carte, jamais aux autres. Monter son z-index a lui ne
   pouvait donc rien changer -- un enfant ne depasse jamais son contexte parent. Elevation sur
   `:hover` seulement : une carte durablement au-dessus finirait par masquer autre chose. */
.wb-overpop { position: relative; z-index: 1; }
.wb-overpop:hover { z-index: 60; }

/* Ancre sur le HAUT de l'entree survolee : l'en-tete du panneau est donc toujours a la hauteur du
   pointeur, et le detail se deroule vers le bas. Ouvrir vers le haut faisait sortir l'en-tete de
   l'ecran pour les premieres entrees -- or c'est lui qui dit de quoi le panneau parle. */
.wb-catpop {
  display: none; position: absolute; right: 0; top: -.2rem; bottom: auto; z-index: 30;
  min-width: 210px; max-width: 300px; padding: .35rem .45rem;
  background: #18181b; border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0,0,0,.55); font-style: normal;
}
.wb-catpie-lg .wb-slg:hover .wb-catpop { display: block; }
/* Plus de bascule haut/bas selon le rang : l'ancrage sur le haut de l'entree vaut pour toutes. */
/* En-tete du panneau : la categorie, sa pastille et son montant. Separee du detail par un filet,
   parce qu'elle n'est pas une ligne de detail mais ce a quoi le detail se rattache. */
.wb-catpop-h {
  display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600;
  color: #e5e5e5; padding-bottom: .28rem; margin-bottom: .28rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.wb-catpop-h .wb-catpop-l { color: #e5e5e5; }
.wb-catpop-h b { margin-left: auto; color: #fafafa; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-catpop-r { display: flex; align-items: baseline; gap: .5rem; font-size: .72rem; line-height: 1.5; }
/* Le libelle occupe la place restante et cede en premier ; le montant ne se coupe jamais. */
.wb-catpop-l {
  color: #a1a1aa; font-style: normal; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-catpop-r b { margin-left: auto; color: #e5e5e5; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Etage marchand : en retrait et attenue, pour qu'on lise d'abord les sous-categories. */
.wb-catpop-m { padding-left: .7rem; font-size: .68rem; }
.wb-catpop-m .wb-catpop-l { color: #71717a; }
.wb-catpop-m b { color: #a1a1aa; font-weight: 500; }
.wb-catpop-m u { text-decoration: none; color: #52525b; }
.wb-catpop { max-width: 340px; }
.wb-catpop-more { color: #71717a; font-style: italic; }
#wb-catpie-toggle button { transition: background .15s, color .15s, border-color .15s; }
#wb-catpie-toggle button[data-flow="depense"] { color: var(--wb-bad); border-color: rgba(var(--wb-bad-rgb), .35); }
#wb-catpie-toggle button[data-flow="revenu"]  { color: var(--wb-ok);  border-color: rgba(var(--wb-ok-rgb), .35); }
#wb-catpie-toggle button[data-flow="depense"]:hover { background: rgba(var(--wb-bad-rgb), .12); }
#wb-catpie-toggle button[data-flow="revenu"]:hover  { background: rgba(var(--wb-ok-rgb), .12); }
#wb-catpie-toggle button[data-flow="depense"].active {
  background: var(--wb-bad); border-color: var(--wb-bad); color: #18181b; font-weight: 700;
}
#wb-catpie-toggle button[data-flow="revenu"].active {
  background: var(--wb-ok); border-color: var(--wb-ok); color: #18181b; font-weight: 700;
}
/* Camembert des categories : disque + legende cote a cote, empiles sur petit ecran. */
/* Le disque prend la hauteur que la carte ouverte lui laisse : c'est lui qu'on lit, pas la legende.
   La legende se resserre a cote -- interlignage court, libelle tronque plutot que renvoye a la ligne,
   montants et parts alignes en colonnes a chasse fixe pour se comparer d'un coup d'oeil. */
.wb-catpie { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
/* Le disque suit la hauteur commune : les deux demi-cartes se terminent au meme niveau. La legende,
   elle, reste LIBRE de deborder -- lui poser un `overflow` decouperait le panneau de detail, defaut
   deja rencontre et corrige sur cette meme carte. */
/* La carte Contraint occupe desormais la demi-place : meme demi-interligne que le tableau voisin,
   pour que le haut de sa barre s'aligne sur l'en-tete de colonne des abonnements, et meme
   espacement avant sa note de bas de carte. */
#wb-compressibility { margin-top: var(--wb-subs-demi); }
#wb-compressibility .wb-note:last-child { margin-top: var(--wb-note-gap); }

/* Meme demi-interligne que le tableau voisin : le disque commence alors a la hauteur de l'en-tete
   de colonne des abonnements, et les deux cartes se terminent ensemble. */
.wb-catpie { min-height: var(--wb-halfcard-h); margin-top: var(--wb-subs-demi); }
.wb-catpie + .wb-note { margin-top: var(--wb-note-gap); }
.wb-catpie .wb-donut {
  flex: 0 0 var(--wb-halfcard-h); width: var(--wb-halfcard-h); height: var(--wb-halfcard-h);
}
.wb-catpie-lg { flex: 1 1 220px; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.wb-catpie-lg .wb-slg {
  display: flex; align-items: center; gap: .35rem; font-size: .75rem; line-height: 1.5;
  color: #d4d4d8; padding: .04rem 0; min-width: 0;
}
.wb-catpie-lg .wb-slg > i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.wb-catpie-lg .wb-slg b {
  margin-left: auto; padding-left: .4rem; color: #e5e5e5;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wb-catpie-lg .wb-slg em {
  color: #71717a; font-style: normal; width: 36px; text-align: right;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
/* Entree de legende estimee : le libelle s'attenue comme la part qu'il designe. */
.wb-catpie-lg .wb-slg-est { color: #a1a1aa; font-style: italic; }
.wb-catpie-lg .wb-slg-est b { color: #a1a1aa; font-weight: 600; }
/* Le libelle cede avant les chiffres : une categorie tronquee reste identifiable, un montant coupe
   non. La troncature porte sur le LIBELLE seul -- la poser sur l'entree decouperait le popup, qui
   est un enfant en position absolue. */
.wb-catpie-lg .wb-slg-l {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto;
}
@media (max-width: 560px) {
  .wb-catpie { justify-content: center; }
  .wb-catpie .wb-donut { flex-basis: 11rem; width: 11rem; height: 11rem; }
}
/* Resume des abonnements dans la ligne de titre. Ordre de lecture : total de la periode (le fait),
   economies potentielles (l'hypothese, donc attenuee), badges d'arbitrage. */
.wb-subs-head { display: flex; align-items: center; gap: .5rem; margin-left: auto; min-width: 0; }
.wb-subs-tot { font-size: .95rem; font-weight: 700; color: #fafafa; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-subs-tot em { font-style: normal; font-size: .72rem; font-weight: 500; color: #a1a1aa; }
.wb-subs-eco {
  display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; font-weight: 600;
  color: var(--wb-ok); white-space: nowrap;
}
/* Les badges cedent en premier : un total tronque serait inutilisable, un badge manquant se
   retrouve dans le tableau juste en dessous. */
.wb-subs-badges { display: flex; align-items: center; gap: .25rem; overflow: hidden; min-width: 0; }
/* `line-height: 1` explicite : herite du corps (1,5), la pastille gonflait de 4 px et fixait a
   elle seule la hauteur de l'en-tete replie. */
.wb-subs-badges .wb-actbadge {
  white-space: nowrap; height: var(--wb-headctl-h); line-height: 1; padding: 0 .5rem;
}
.wb-subs-head .wb-subs-tot, .wb-subs-head .wb-subs-eco { line-height: var(--wb-headctl-h); }
/* Cumul annuel EN LIGNE derriere le montant : en `display: block` il repassait dessous et doublait
   la hauteur de chaque ligne -- reliquat de la version ou il vivait sur sa propre ligne. */
.wb-sub-an { display: inline; font-style: normal; font-size: .66rem; color: #71717a; margin-left: .3rem; }
/* Valeur estimee : meme convention que partout ailleurs sur la page -- attenuee et en italique. */
.wb-sub-cout.is-estime b { color: #a1a1aa; font-style: italic; font-weight: 600; }
.wb-subs-tot.is-estime { color: #a1a1aa; font-style: italic; }
.wb-subs-tot em { margin-left: .2rem; }

/* Hauteur commune aux deux demi-cartes, DERIVEE du nombre de lignes visibles plutot que posee a la
   main : changer `--wb-subs-rows` suffit, le camembert suit. */
:root {
  /* Hauteur des controles poses dans une ligne de titre (pastilles, boutons d'axe). Commune aux
     cartes, pour qu'elles se referment a la meme hauteur : sans repere partage, chacune deduit sa
     hauteur de son contenu et deux cartes cote a cote finissent decalees. */
  --wb-headctl-h: 1.32rem;
  /* Espacement avant les notes de bas de carte, PARTAGE par les deux demi-cartes : c'est lui qui
     decalait leurs legendes l'une par rapport a l'autre. */
  --wb-note-gap: .72rem;
  --wb-subs-rows: 6;
  --wb-subs-row-h: 1.78rem;   /* ligne + paddings + filet */
  --wb-subs-demi: calc(var(--wb-subs-row-h) / 2);
  /* +1/2 ligne : la 6e ne doit pas affleurer le bord, sinon elle se lit comme tronquee. */
  --wb-halfcard-h: calc(1.65rem + (var(--wb-subs-rows) + .5) * var(--wb-subs-row-h));
}

/* Bloc des echeances attendues, sous le detail constate : meme convention attenuee/italique que
   partout ailleurs pour ce qui n'est pas encore constate. */
.wb-cats-est { margin-top: .7rem; border-top: 1px dashed rgba(255,255,255,.12); padding-top: .5rem; }
.wb-cats-est-h {
  display: flex; align-items: center; gap: .35rem; font-size: .74rem; font-style: italic;
  color: #a1a1aa; margin-bottom: .3rem;
}
.wb-cats-est-h b { margin-left: auto; font-style: normal; color: #d4d4d8; font-variant-numeric: tabular-nums; }
.wb-cats-est-r {
  display: flex; align-items: baseline; gap: .5rem; font-size: .78rem; font-style: italic;
  color: #a1a1aa; padding: .1rem 0;
}
/* Deux segments dans une barre horizontale : le constate puis l'attendu, dans la continuite.
   `display: flex` sur le conteneur, sinon les deux spans se superposent au lieu de se suivre. */
.wb-hbar { display: flex; align-items: stretch; }
.wb-hbar > span { display: block; height: 100%; }
.wb-cats-est-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
/* Ligne d'une categorie seulement attendue : meme gabarit que les lignes du detail, en italique. */
.wb-cat-estrow {
  display: flex; align-items: center; gap: .5rem; padding: .25rem .1rem; font-style: italic;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.wb-cat-estrow .wb-cat-val { font-style: normal; color: #d4d4d8; }
.wb-cat-estrow .wb-cat-meta { color: #71717a; font-size: .7rem; }
.wb-cats-est-r b { margin-left: auto; font-style: normal; font-weight: 600; color: #d4d4d8; font-variant-numeric: tabular-nums; }
.wb-cats-est-r em { font-style: normal; color: #71717a; width: 2.6rem; text-align: right; }

/* Sous-categorie A COTE du nom, pas dessous : un abonnement doit tenir sur UNE ligne, sinon six
   d'entre eux en occupent douze. */
/* La cellule ne se renvoie JAMAIS a la ligne : c'est ce retour qui faisait des lignes doubles et
   coupait le 5e abonnement. Elle se tronque plutot -- un nom raccourci reste identifiable. */
.wb-subs-table td:first-child {
  max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* LARGEURS. Les trois colonnes de droite affichent des grandeurs bornees -- un montant tient en
   huit caracteres, une part en six, une decision en une pastille et un crayon. On les borne, et la
   premiere absorbe tout le reste : c'est elle qui porte l'information la moins previsible, elle
   doit donc encaisser la variation plutot que la subir. */
.wb-subs-table th:first-child, .wb-subs-table td:first-child { width: 100%; }
.wb-subs-table th:nth-child(2), .wb-subs-table td:nth-child(2) { width: 8.6rem; white-space: nowrap; }
.wb-subs-table th:nth-child(3), .wb-subs-table td:nth-child(3) { width: 3.4rem; white-space: nowrap; }
.wb-subs-table th:nth-child(4), .wb-subs-table td:nth-child(4) { width: 6.4rem; }
/* Paddings resserres sur CE tableau seulement : quatre colonnes dans une demi-carte ne peuvent pas
   s'offrir le confort d'un tableau pleine largeur. */
.wb-subs-table th, .wb-subs-table td { padding-left: .55rem; padding-right: .55rem; }
.wb-subs-table th:first-child, .wb-subs-table td:first-child { padding-left: .5rem; }
.wb-subs-table th:last-child, .wb-subs-table td:last-child { padding-right: .4rem; }
.wb-sub-cat { font-style: normal; font-size: .68rem; color: #71717a; }
.wb-sub-cout { white-space: nowrap; }
.wb-sub-cout b { font-variant-numeric: tabular-nums; }

/* Six lignes visibles, defilement sans barre apparente. L'en-tete du tableau reste colle en haut :
   sans lui, on fait defiler des chiffres dont on ne sait plus ce qu'ils mesurent. */
.wb-subs-scroll {
  max-height: var(--wb-halfcard-h); overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.wb-subs-scroll::-webkit-scrollbar { width: 0; height: 0; }
/* En-tete colle, dans la teinte du domaine et semi-transparent : il doit laisser deviner ce qui
   passe dessous sans que les chiffres le traversent -- d'ou le flou en complement de l'alpha. */
.wb-subs-table thead th {
  position: sticky; top: 0; z-index: 2;
  /* OPAQUE : a 7 % d'alpha les valeurs defilaient VISIBLEMENT derriere l'en-tete. Un en-tete colle
     a travers lequel on lit deux chiffres superposes ne remplit plus sa fonction. La teinte du
     domaine est conservee, posee sur un fond plein. */
  background: linear-gradient(rgba(var(--p-base-rgb), .13), rgba(var(--p-base-rgb), .13)), #17171a;
  color: var(--p-light); box-shadow: inset 0 -1px 0 rgba(var(--p-base-rgb), .28);
}
/* Colonne des couts CENTREE, titre compris : le titre est plus large que ses valeurs, les aligner
   a droite les faisait flotter sous sa fin plutot que sous lui.
   (`.wb-table th { text-align: left }` a une specificite de 0,1,1 et battait `.wb-num` a 0,1,0 --
   d'ou le selecteur qualifie ci-dessous.) */
.wb-subs-table th.wb-num { text-align: right; }
.wb-subs-table th:nth-child(2), .wb-subs-table td.wb-sub-cout { text-align: center; }
.wb-subs-table td { padding-top: .18rem; padding-bottom: .18rem; }
/* Decision : le badge reste au plus pres du contenu, le crayon file a l'extreme droite -- une
   colonne d'actions se cherche au bord, pas au milieu. */
.wb-subs-table .wb-sub-act { display: flex; align-items: center; gap: .35rem; }
.wb-subs-table .wb-sub-act .wb-act-btn { margin-left: auto; }
/* L'ensemble descend d'une demi-ligne a partir de l'en-tete de colonne. Exprime en fraction de la
   hauteur de ligne : une demi-ligne doit le rester si cette hauteur change. */
.wb-subs-scroll { margin-top: var(--wb-subs-demi); }
.wb-subs-scroll + .wb-note { margin-top: var(--wb-note-gap); }
/* Part de chaque abonnement dans le total des courants. */
.wb-sub-part { color: var(--p-light); font-weight: 600; font-variant-numeric: tabular-nums; }
.wb-mp-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem 0; font-size: .84rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.wb-mp-row:last-of-type { border-bottom: none; }
.wb-mp-l { color: #d4d4d8; display: flex; align-items: center; gap: .3rem; }
.wb-mp-l i { color: #71717a; font-style: italic; }
.wb-mp-v { font-weight: 700; color: #e5e5e5; font-variant-numeric: tabular-nums; }
/* Bandeau de couverture : il conditionne la lecture des chiffres, il doit donc se voir avant eux. */
/* BLOC, pas flex : en flex, chaque fragment de texte separe par un element devenait un element de
   flex distinct et la phrase se coupait en trois. Une phrase doit couler comme une phrase. */
.wb-mp-warn {
  display: block; font-size: .78rem; line-height: 1.4;
  color: var(--wb-warn); background: rgba(var(--wb-warn-rgb),.10);
  border: 1px solid rgba(var(--wb-warn-rgb),.28); border-radius: 6px;
  padding: .4rem .55rem; margin: var(--wb-note-gap) 0 .1rem;
}
.wb-mp-warn i { color: inherit; opacity: .85; font-style: italic; }
.wb-mp-warn svg { vertical-align: -2px; margin-right: .25rem; }
/* Estime non encore constate : meme bleu que les segments estimes du cockpit et des recurrents. */
.wb-mp-est .wb-mp-l, .wb-mp-est .wb-mp-v { color: var(--wb-info); }
.wb-mp-est .wb-mp-l i { color: rgba(var(--wb-info-rgb),.7); }
.wb-mp-proj { background: rgba(var(--p-base-rgb),.08); border-radius: 6px; padding: .4rem .5rem; margin: .2rem 0; border-bottom: none; }
.wb-mp-proj .wb-mp-v { color: var(--p-light); font-size: 1.05rem; }

/* ---- Carte "Répartition par pôle" : toggle personne/projet ---- */
.wb-pole-toggle { display: flex; gap: .35rem; margin-bottom: .6rem; }
.wb-pole-toggle button {
  background: rgba(39,39,42,.45); color: #a1a1aa; border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
  padding: .3rem .7rem; font-size: .78rem; cursor: pointer;
}
.wb-pole-toggle button.active { background: rgba(var(--p-base-rgb),.18); color: var(--p-light); border-color: rgba(var(--p-base-rgb),.4); font-weight: 600; }
.wb-pole-toggle button:hover:not(.active) { color: #e5e5e5; }

/* ---- Carte "Détection d'anomalies" ---- */
.wb-anom-section { margin-bottom: .7rem; }
.wb-anom-section:last-child { margin-bottom: 0; }
.wb-anom-section h4 { margin: 0 0 .35rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: #a1a1aa; }
.wb-anom-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.wb-anom-list i { color: #a1a1aa; font-style: italic; }
/* Anomalie : ligne visuelle (intensité en jauge + sévérité en couleur d'état), plus une puce de texte. */
.wb-anom-li {
  display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(60px, 1fr) auto; gap: .2rem .6rem;
  align-items: center; font-size: .8rem; color: #d4d4d8; padding: .35rem .6rem;
  background: rgba(24,24,27,.3); border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid var(--wb-warn); border-radius: 0 6px 6px 0;
}
.wb-anom-ok  { border-left-color: var(--wb-ok); }
.wb-anom-warn { border-left-color: var(--wb-warn); }
.wb-anom-bad { border-left-color: var(--wb-bad); }
.wb-anom-main { font-variant-numeric: tabular-nums; }
.wb-anom-main b { color: #f4f4f5; }
.wb-anom-gauge { height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.wb-anom-gauge i { display: block; height: 100%; border-radius: 3px; }
.wb-anom-fill-ok { background: var(--wb-ok); } .wb-anom-fill-warn { background: var(--wb-warn); } .wb-anom-fill-bad { background: var(--wb-bad); }
.wb-anom-badge { font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 4px; white-space: nowrap; justify-self: end; }
.wb-anom-badge-ok { background: rgba(var(--wb-ok-rgb),.18); color: var(--wb-ok); }
.wb-anom-badge-warn { background: rgba(var(--wb-warn-rgb),.18); color: var(--wb-warn); }
.wb-anom-badge-bad { background: rgba(var(--wb-bad-rgb),.18); color: var(--wb-bad); }
.wb-anom-sub { grid-column: 1 / -1; font-size: .68rem; color: #71717a; }

/* ---- Heatmap "Relevés bancaires disponibles" (mirroir standard fleet, cf steve-salaires.js/steve.css
   sur claude-professionnel — memes classes cal-c/cal-l0..4/dh-crow/hm-*, 1re utilisation sur ce portail). ---- */
.hm-wrap { overflow-x: auto; padding-bottom: .25rem; }
.hm-flex { display: flex; gap: 1.6rem; align-items: flex-start; }
.hm-flex .hm-wrap { flex: 0 1 auto; min-width: 0; }
.hm-legend { flex: 1; min-width: 210px; font-size: .76rem; color: #a1a1aa; padding-top: 2.2rem; }
.hm-lg-t { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #71717a; margin-bottom: .35rem; }
.hm2-lab { width: 1.15rem; flex-shrink: 0; font-size: .6rem; color: #71717a; text-align: center; }
.hm-head { height: 2.2rem; align-items: flex-end; margin-bottom: 4px; }
.hm-y { width: 12px; flex-shrink: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .58rem; color: #71717a; display: flex; align-items: center; justify-content: flex-start; height: 2.2rem; box-sizing: border-box; }
.dh-crow { display: flex; align-items: center; gap: 3px; height: 14px; box-sizing: border-box; margin-bottom: 3px; }
.dh-crow .cal-c { flex-shrink: 0; }
.cal-c { width: 12px; height: 12px; border-radius: 2px; display: block; background: rgba(255,255,255,.05); box-sizing: border-box; }
.cal-l0 { background: rgba(255,255,255,.05); }
.cal-l1 { background: rgba(var(--p-base-rgb),.30); }
.cal-l2 { background: rgba(var(--p-base-rgb),.52); }
.cal-l3 { background: rgba(var(--p-base-rgb),.74); }
.cal-l4 { background: var(--p-base); }
.cal-legend { display: flex; align-items: center; gap: 3px; font-size: .58rem; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.cal-legend .cal-c { width: 12px; height: 12px; }
.hm-future { background: transparent; border: 1px dashed rgba(255,255,255,.13); }

/* ============================================================================
   PHASE 5 — Carte "Plan mensuel" (cibles vs reel/projete) + "Mois prochain : engagements connus",
   regroupees dans la carte "Synthese du mois". Palette ok/attention/depasse = les variables d'ETAT
   unifiees --wb-ok/--wb-warn/--wb-bad (cf en-tete de ce fichier ; PHASE 7 : les couleurs en dur
   #4ade80/#fbbf24/#f87171 qui trainaient ici ont ete remplacees, elles faisaient 3 echelles paralleles).
   ============================================================================ */
.wb-plan-block { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.07); }
.wb-plan-title { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: #a1a1aa; display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.wb-plan-row { margin-bottom: .6rem; }
.wb-plan-row:last-child { margin-bottom: 0; }
.wb-plan-row-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; margin-bottom: .25rem; }
.wb-plan-row-l { color: #d4d4d8; font-weight: 600; }
.wb-plan-badge { font-size: .64rem; font-weight: 700; padding: .05rem .4rem; border-radius: 4px; letter-spacing: .03em; flex-shrink: 0; }
.wb-plan-badge-ok { background: rgba(var(--wb-ok-rgb),.18); color: var(--wb-ok); }
.wb-plan-badge-attention { background: rgba(var(--wb-warn-rgb),.18); color: var(--wb-warn); }
.wb-plan-badge-depasse { background: rgba(var(--wb-bad-rgb),.18); color: var(--wb-bad); }
.wb-plan-bar { height: 11px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.wb-plan-bar-fill { display: block; height: 100%; border-radius: 6px; }
.wb-plan-bar-ok { background: var(--wb-ok); }
.wb-plan-bar-attention { background: var(--wb-warn); }
/* Un dépassement doit sauter aux yeux sans lecture attentive : hachures animées, pas juste un rouge. */
.wb-plan-bar-depasse {
  background: repeating-linear-gradient(45deg, var(--wb-bad) 0 6px, rgba(var(--wb-bad-rgb),.62) 6px 12px);
}
.wb-plan-row-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .74rem; color: #a1a1aa; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.wb-plan-row-foot i { font-style: italic; }
.wb-uncertain { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: rgba(var(--wb-warn-rgb),.22); color: var(--wb-warn); font-size: .62rem; font-style: normal; font-weight: 700; cursor: help; vertical-align: middle; }

/* ---- Repere "Objectif" (plan mensuel) sur "Évolution par famille" / "Courbe des dépenses" ---- */
.wb-plan-line { stroke: #e5e5e5; stroke-width: 1.3; stroke-dasharray: 5,4; opacity: .8; }
.wb-plan-label { fill: #e5e5e5; opacity: .85; }
.wb-lg-plan::before { content: ''; display: inline-block; width: 12px; height: 0; border-top: 2px dashed #e5e5e5; background: transparent; }

/* ============================================================================
   PHASE 6 — Carte "Mois prochain : engagements probables" (confiance temporelle). Reprend la palette
   d'ETAT unifiee (--wb-ok/--wb-warn/--wb-bad), aucune echelle de couleurs propre a cette carte.
   Objectif : une ligne = un engagement, lisible d'un coup d'oeil, les details (fourchette,
   reference de groupement, calcul de la confiance) en texte secondaire ou en title.
   ============================================================================ */
.wb-fc-table td { vertical-align: top; }
.wb-fc-table .wb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-fc-table th.wb-num { text-align: right; }
.wb-amt-range { display: block; font-size: .68rem; font-style: normal; color: #71717a; white-space: nowrap; }
.wb-ref { font-size: .66rem; font-style: normal; color: #71717a; letter-spacing: .01em; cursor: help; }

/* Badge de frequence detectee */
/* Badges de FRÉQUENCE = palette de série (un rythme n'est ni bon ni mauvais) — volontairement
   distincte des couleurs d'état, pour ne pas laisser croire qu'"annuel" serait un avertissement. */
.wb-freq { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .03em; padding: .05rem .4rem; border-radius: 4px; white-space: nowrap; background: rgba(148,163,184,.14); color: #a1a1aa; cursor: help; }
.wb-freq-mensuel { background: rgba(56,189,248,.16); color: #7dd3fc; }
.wb-freq-hebdomadaire, .wb-freq-bihebdomadaire { background: rgba(167,139,250,.16); color: #c4b5fd; }
.wb-freq-bimestriel, .wb-freq-trimestriel, .wb-freq-semestriel { background: rgba(34,211,238,.14); color: #67e8f9; }
.wb-freq-annuel { background: rgba(244,114,182,.16); color: #f9a8d4; }
.wb-freq-irregulier { background: rgba(148,163,184,.14); color: #a1a1aa; }
.wb-freq-x { font-style: normal; font-size: .64rem; font-weight: 700; color: var(--wb-warn); margin-left: .25rem; cursor: help; }

/* Indicateur de confiance : petite barre + pourcentage (sobre, meme largeur partout) */
.wb-conf { display: inline-flex; align-items: center; gap: .35rem; cursor: help; }
.wb-conf-bar { display: inline-block; width: 34px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; flex-shrink: 0; }
.wb-conf-bar i { display: block; height: 100%; border-radius: 3px; }
.wb-conf-ok { background: var(--wb-ok); }
.wb-conf-attention { background: var(--wb-warn); }
.wb-conf-depasse { background: var(--wb-bad); }
.wb-conf b { font-size: .7rem; font-weight: 600; color: #a1a1aa; font-variant-numeric: tabular-nums; }

/* PHASE 7 : les blocs repliables de cette carte (incertains / hors mois / retenus) utilisent
   desormais la mecanique UNIQUE .wb-det (cf haut de fichier) -- les regles .wb-fc-details/.wb-details
   qui existaient ici ont ete supprimees, elles constituaient 2 des 3 mecaniques concurrentes. */
.wb-fc-list { list-style: none; margin: 0; padding: 0; }
.wb-fc-list li { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .28rem 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: .76rem; }
.wb-fc-list li:last-child { border-bottom: none; }
.wb-fc-amt { font-variant-numeric: tabular-nums; color: #d4d4d8; }
.wb-fc-sub { flex: 1 1 auto; font-size: .68rem; color: #71717a; }
.wb-fc-methode { margin-top: .5rem; font-style: italic; }


/* Abonnements presumes resilies (revue 2026-07-26) : visibles mais visuellement en retrait,
   pour ne pas les confondre avec les abonnements reellement en cours. */
.wb-sub-inactif { opacity: .55; }
.wb-sub-age { color: #94a3b8; font-size: .78em; }

/* ============================================================================
   PHASE 7 — Panneau de détail (drill-down), correction inline, décisions d'arbitrage.
   Modale = composant standard du portail (.modal-backdrop/.modal, css/portal.css) ; seul le contenu
   est spécifique à cette page.
   ============================================================================ */
.wb-drill .modal { max-width: 1080px !important; width: 95vw !important; max-height: 88vh; display: flex; flex-direction: column; padding: 0 !important; }
.wb-drill-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem .7rem; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.wb-drill-head h2 { margin: 0; flex: 1; font-size: 1rem; }
.wb-drill-x { background: none; border: none; color: #a1a1aa; cursor: pointer; padding: .2rem; display: flex; }
.wb-drill-x:hover { color: #e5e5e5; }
.wb-drill-body { padding: .8rem 1.1rem 1rem; overflow-y: auto; flex: 1; min-height: 0; }

/* En-tête : le montant DOMINE (c'est le chiffre à vérifier), le reste s'efface. */
.wb-drill-kpi { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.wb-drill-total { display: flex; flex-direction: column; }
.wb-drill-total-v { font-size: 2rem; font-weight: 700; color: var(--p-light); line-height: 1.05; font-variant-numeric: tabular-nums; }
.wb-drill-total-l { font-size: .74rem; color: #8a8a93; text-transform: uppercase; letter-spacing: .05em; }
.wb-drill-meta { display: flex; flex-direction: column; gap: .15rem; font-size: .74rem; color: #a1a1aa; text-align: right; }
.wb-drill-meta span { display: inline-flex; align-items: center; gap: .3rem; justify-content: flex-end; }
.wb-drill-meta i { color: #71717a; font-style: italic; }
.wb-drill-repart { margin-bottom: .5rem; }
.wb-drill-foot { margin-top: .6rem; }
.wb-tablewrap { overflow-x: auto; }
.wb-drill-table td { vertical-align: middle; }
.wb-lbl-cell { max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a1a1aa; font-size: .76rem; }
.wb-nowrap { white-space: nowrap; }
.wb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.wb-num { text-align: right; }
.wb-neg { color: #e5e5e5; }
.wb-pos { color: var(--wb-ok); }
.wb-mtable td, .wb-subs-table td { vertical-align: middle; }

/* Pastilles de classement (famille / sous-catégorie / récurrence / origine manuelle) */
/* G63 : la famille budgetaire est une categorie assignee et invariante -> pilule. */
.wb-chip { display: inline-block; font-size: .66rem; font-weight: 600; padding: .04rem .45rem; border-radius: 999px; background: rgba(255,255,255,.06); white-space: nowrap; }
.wb-chip-mute { color: #a1a1aa; }
.wb-chip-manuel { background: rgba(var(--p-base-rgb),.16); color: var(--p-base); }

.wb-pager { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .5rem; font-size: .76rem; color: #a1a1aa; }
.wb-pg { background: rgba(39,39,42,.6); color: #e4e4e7; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; padding: .18rem .45rem; cursor: pointer; display: inline-flex; }
.wb-pg:disabled { opacity: .35; cursor: not-allowed; }

/* ---- Correction inline (formulaire injecté sous la ligne) ---- */
tr.wb-editing > td { background: rgba(var(--p-base-rgb), .08); }
.wb-edit-row > td { padding: 0 !important; }
.wb-editor { padding: .6rem .7rem; background: rgba(0,0,0,.22); border-left: 2px solid var(--p-base); }
.wb-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: .5rem .7rem; }
.wb-editor-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .76rem; }
.wb-editor-grid label > span { color: #8a8a93; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.wb-editor-grid select {
  background: rgba(39,39,42,.6); color: #e4e4e7; border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px; padding: .3rem .45rem; font-size: .78rem; font-family: inherit;
}
.wb-editor-grid select:focus { outline: none; border-color: var(--p-base); box-shadow: 0 0 0 2px rgba(var(--p-base-rgb),.18); }
.wb-editor-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.07); }
.wb-editor-all { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: #d4d4d8; cursor: pointer; }
.wb-editor-all b { color: var(--p-light); }
.wb-editor-msg { flex: 1; font-size: .74rem; color: #a1a1aa; text-align: right; }
.wb-editor-msg.is-ok { color: var(--wb-ok); }
.wb-editor-msg.is-err { color: var(--wb-bad); }
.wb-btn, .wb-btn-sec {
  border-radius: 5px; padding: .3rem .7rem; font-size: .78rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem; font-family: inherit;
}
.wb-btn { background: linear-gradient(135deg, rgba(var(--p-base-rgb),.85), rgba(var(--p-glow-rgb),.75)); color: var(--p-text-on); border: 1px solid rgba(var(--p-soft-rgb),.8); font-weight: 600; }
.wb-btn-sec { background: rgba(39,39,42,.6); color: #e4e4e7; border: 1px solid rgba(255,255,255,.1); }
.wb-btn:hover { box-shadow: 0 0 10px rgba(var(--p-glow-rgb),.35); }

/* ---- Décisions d'arbitrage sur les abonnements (« limiter les dépenses inutiles ») ---- */
.wb-eco {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .6rem .85rem; margin-bottom: .6rem; border-radius: 8px;
  background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.12);
}
.wb-eco.is-active { background: rgba(var(--wb-ok-rgb),.09); border: 1px solid rgba(var(--wb-ok-rgb),.35); }
.wb-eco-main { display: flex; flex-direction: column; }
.wb-eco-l { font-size: .68rem; color: #8a8a93; text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: .3rem; }
.wb-eco-v { font-size: 1.6rem; font-weight: 700; color: #52525b; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wb-eco.is-active .wb-eco-v { color: var(--wb-ok); }
.wb-eco-v em { font-size: .72rem; font-style: normal; color: #71717a; margin-left: .15rem; }
.wb-eco-sub { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.wb-eco-note { flex-basis: 100%; text-align: right; margin: 0; }
.wb-actbadge { display: inline-flex; align-items: center; gap: .22rem; font-size: .68rem; font-weight: 700; padding: .08rem .42rem; border-radius: 10px; white-space: nowrap; }
.wb-actbadge-bad { background: rgba(var(--wb-bad-rgb),.18); color: var(--wb-bad); }
.wb-actbadge-warn { background: rgba(var(--wb-warn-rgb),.18); color: var(--wb-warn); }
.wb-actbadge-ok { background: rgba(var(--wb-ok-rgb),.18); color: var(--wb-ok); }
.wb-actbadge-done { background: rgba(148,163,184,.16); color: #94a3b8; }
.wb-actbadge-none { background: rgba(148,163,184,.1); color: #71717a; }
.wb-sub-act { white-space: nowrap; display: flex; align-items: center; gap: .3rem; }

.wb-actpop {
  position: absolute; z-index: 1200; width: 320px;
  background: rgba(24,24,27,.97); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6); padding: .7rem .8rem;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.wb-actpop-h { font-size: .82rem; font-weight: 600; color: var(--p-light); margin-bottom: .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-actpop-choices { display: flex; flex-direction: column; gap: .22rem; margin-bottom: .5rem; }
.wb-actpop-c { display: flex; align-items: center; gap: .4rem; font-size: .78rem; cursor: pointer; }
.wb-actpop-f { display: flex; align-items: center; gap: .45rem; font-size: .74rem; color: #a1a1aa; margin-bottom: .35rem; }
.wb-actpop-f > span { width: 40px; flex-shrink: 0; }
.wb-actpop-f input {
  flex: 1; background: rgba(39,39,42,.6); color: #e4e4e7; border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px; padding: .25rem .45rem; font-size: .78rem; font-family: inherit; min-width: 0;
}
.wb-actpop-foot { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; }


/* ══════════════════════════════════════════════════════════════════════════
   EMPRUNTS & PROJECTION (2026-07-27)
   Aucune couleur nouvelle : on reutilise --wb-ok / --wb-warn / --wb-bad (etat) et --p-base
   (accent Warren), conformement au standard "palette unifiee, pas de 2e echelle concurrente".
   ══════════════════════════════════════════════════════════════════════════ */
.wb-kpis-sub { margin-bottom: .6rem; }
.wb-kpi-sub { font-size: .64rem; color: #71717a; margin-top: .15rem; line-height: 1.3; }

/* --- Carte Emprunts --- */
.wb-loan-table td { vertical-align: top; }
.wb-loan-row.is-estime td:first-child { border-left: 2px solid var(--wb-warn); }
.wb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-unknown { color: #71717a; font-style: italic; cursor: help; }
.wb-mute { color: #71717a; }
.wb-pos { color: var(--wb-ok); }
.wb-neg { color: var(--wb-bad); }

.wb-lp { display: inline-flex; align-items: center; gap: .3rem; cursor: help; }
.wb-lp-bar { display: inline-block; width: 52px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; flex-shrink: 0; }
.wb-lp-bar i { display: block; height: 100%; border-radius: 3px; }
.wb-lp-ok { background: var(--wb-ok); }
.wb-lp-warn { background: var(--wb-warn); }
.wb-lp-bad { background: var(--wb-bad); }
.wb-lp-unknown { color: #71717a; font-size: .7rem; display: inline-flex; align-items: center; gap: .2rem; }

.wb-sched { display: inline-flex; align-items: center; gap: .22rem; font-size: .66rem; font-weight: 600;
  padding: .06rem .34rem; border-radius: 4px; cursor: help; white-space: nowrap; }
.wb-sched-ok { background: rgba(var(--wb-ok-rgb),.14); color: var(--wb-ok); }
.wb-sched-warn { background: rgba(var(--wb-warn-rgb),.14); color: var(--wb-warn); }
.wb-sched-bad { background: rgba(var(--wb-bad-rgb),.14); color: var(--wb-bad); }

.wb-doclink { display: inline-flex; align-items: center; gap: .22rem; font-size: .68rem; color: var(--p-base);
  text-decoration: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-doclink:hover { text-decoration: underline; }
.wb-nodoc { display: inline-flex; align-items: center; gap: .22rem; font-size: .68rem; color: #71717a; cursor: help; }

.wb-ecart { display: inline-block; font-size: .68rem; font-weight: 600; padding: .04rem .3rem; border-radius: 4px; cursor: help; white-space: nowrap; }
.wb-ecart i { font-style: normal; font-weight: 400; opacity: .8; }
.wb-ecart-ok { background: rgba(var(--wb-ok-rgb),.12); color: var(--wb-ok); }
.wb-ecart-warn { background: rgba(var(--wb-warn-rgb),.12); color: var(--wb-warn); }
.wb-ecart-bad { background: rgba(var(--wb-bad-rgb),.12); color: var(--wb-bad); }

.wb-sub { margin-top: .7rem; }
.wb-sub > summary { cursor: pointer; font-size: .72rem; color: #a1a1aa; display: flex; align-items: center; gap: .3rem; padding: .25rem 0; }
.wb-sub > summary:hover { color: #e4e4e7; }

/* --- Carte Projection --- */
.wb-pj-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: .6rem; }
.wb-pj-lab { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .04em; color: #a1a1aa; margin-right: .2rem; }
.wb-pj-toolbar button { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: #d4d4d8;
  font-size: .7rem; padding: .18rem .5rem; border-radius: 5px; cursor: pointer; }
.wb-pj-toolbar button:hover { background: rgba(255,255,255,.09); }
.wb-pj-toolbar button.active { background: rgba(var(--p-base-rgb),.18); border-color: rgba(var(--p-base-rgb),.5); color: var(--p-base); }
.wb-pj-toolbar input { width: 62px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  color: #e4e4e7; font-size: .7rem; padding: .16rem .3rem; border-radius: 5px; }
.wb-pj-anchor { font-size: .66rem; color: #71717a; margin-left: auto; font-variant-numeric: tabular-nums; }

.wb-pj-alert { display: flex; align-items: flex-start; gap: .4rem; font-size: .76rem; padding: .4rem .55rem;
  border-radius: 6px; margin-bottom: .6rem; line-height: 1.35; }
.wb-pj-alert-bad { background: rgba(var(--wb-bad-rgb),.10); color: var(--wb-bad); }
.wb-pj-alert-warn { background: rgba(var(--wb-warn-rgb),.10); color: var(--wb-warn); }
.wb-pj-alert-ok { background: rgba(var(--wb-ok-rgb),.10); color: var(--wb-ok); }

.wb-pj-svg { margin: .2rem 0 .3rem; }
.wb-pj-panel { fill: #a1a1aa; font-size: 9px; }
.wb-pj-pretc { fill: var(--p-base); fill-opacity: .85; }
.wb-pj-pretd { fill: var(--p-base); fill-opacity: .35; stroke: var(--p-base); stroke-opacity: .55; stroke-width: .6; stroke-dasharray: 2 1.5; }
.wb-pj-rec { fill: #8b8b95; fill-opacity: .75; }
.wb-pj-var { fill: #4b4b55; fill-opacity: .85; }
.wb-pj-rev { fill: none; stroke: #38bdf8; stroke-width: 1.8; }
.wb-pj-band { fill: rgba(var(--p-base-rgb),.14); stroke: none; }
.wb-pj-cum { fill: none; stroke: var(--p-base); stroke-width: 1.8; }
.wb-pj-zero { stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 3 3; }
.wb-pj-dot { fill: var(--p-base); }
.wb-pj-dot-risque { fill: var(--wb-warn); }
.wb-pj-dot-solde_cumule_negatif { fill: var(--wb-bad); }
.wb-pj-lib { stroke: var(--wb-ok); stroke-width: 1; stroke-dasharray: 2 3; stroke-opacity: .8; }
.wb-pj-row-risque td { background: rgba(var(--wb-warn-rgb),.06); }
.wb-pj-row-solde_cumule_negatif td { background: rgba(var(--wb-bad-rgb),.08); }
.wb-pj-table { font-size: .74rem; }

/* Pastilles de legende (reprennent exactement les remplissages du graphe). */
.wb-lg-dot.wb-pj-dot-pretc { background: var(--p-base); }
.wb-lg-dot.wb-pj-dot-pretd { background: var(--p-base); opacity: .4; }
.wb-lg-dot.wb-pj-dot-rec { background: #8b8b95; }
.wb-lg-dot.wb-pj-dot-var { background: #4b4b55; }
.wb-lg-dot.wb-pj-dot-rev { background: #38bdf8; }
.wb-lg-dot.wb-pj-dot-band { background: rgba(var(--p-base-rgb),.3); }

@media (max-width: 760px) {
  .wb-pj-anchor { margin-left: 0; width: 100%; }
  .wb-doclink { max-width: 110px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   REFONTE 2026-07-27 — la page raconte une histoire : bandeaux de section,
   cockpit d'etat des lieux, carte "ou part l'argent", escalier de liberation.
   Palette : couleurs d'ETAT (--wb-ok/warn/bad) pour tout ce qui porte un jugement,
   couleurs de SERIE pour ce qui indexe des donnees. Aucune lib externe.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- Bandeau de section : sans lui, une pile de cartes ne dit jamais qu'on change de question ---- */
.wb-sect {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 1.1rem 0 -.1rem; padding: .3rem 0 .38rem;
  border-bottom: 1px solid rgba(var(--p-base-rgb), .28);
}
.wb-page > .wb-sect:first-of-type { margin-top: .2rem; }
.wb-sect > .ico { color: var(--p-base); align-self: center; }
.wb-sect h2 {
  margin: 0; font-size: .84rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--p-light);
}
.wb-sect-sub { font-size: .73rem; color: #71717a; flex: 1 1 220px; }

/* ---- Segment de bascule generique (depenses/revenus, flux/famille, personne/projet) ---- */
.wb-seg { display: flex; gap: .35rem; margin-bottom: .6rem; flex-wrap: wrap; }
.wb-seg button {
  background: rgba(39,39,42,.45); color: #a1a1aa; border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; padding: .3rem .7rem; font-size: .78rem; cursor: pointer;
}
.wb-seg button.active { background: rgba(var(--p-base-rgb),.18); color: var(--p-light); border-color: rgba(var(--p-base-rgb),.4); font-weight: 600; }
.wb-seg button:hover:not(.active) { color: #e5e5e5; }
.wb-card-hint { color: #71717a; font-style: normal; font-weight: 400; font-size: .78rem; }

/* ============================================================================
   MOUVEMENTS RECURRENTS DU MOIS (2026-07-28) — une ligne = une echeance, dans l'ordre du releve.
   Grille fixe : la colonne montant reste alignee quelle que soit la longueur du libelle, sinon
   la lecture verticale des montants (le vrai usage de cette carte) devient impossible.
   ============================================================================ */
/* En-tete de la carte : le selecteur de periode est pousse a DROITE, les blocs chiffres passent
   sur leur propre ligne et restent donc lisibles carte repliee. Seule la liste se replie. */
.wb-rc-sum { flex-wrap: wrap; }
.wb-rc-sum > .insight-title { flex-shrink: 0; }
.wb-rc-sum > .wb-rc-blocs { flex-basis: 100%; margin-top: .15rem; }
/* Le curseur reste "pointer" sur tout l'en-tete : il declenche le repli, partout. */
.wb-rc-sum .wb-rc-blocs * { cursor: pointer; }
.wb-rc-blocs { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.wb-rc-bloc { display: flex; align-items: center; gap: .9rem; padding-left: .7rem; border-left: 2px solid #3f3f46; }
.wb-rc-bloc.is-dep { border-left-color: rgba(var(--wb-bad-rgb),.55); }
.wb-rc-bloc.is-rev { border-left-color: rgba(var(--wb-ok-rgb),.55); }
.wb-rc-bloc-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #a1a1aa; }
.wb-rc-figs { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.wb-rc-fig { display: flex; flex-direction: column; align-items: flex-end; }
.wb-rc-fig b { font-size: 1rem; font-variant-numeric: tabular-nums; color: #e5e5e5; }
.wb-rc-fig i { font-style: normal; font-size: .68rem; color: #71717a; text-transform: uppercase; letter-spacing: .04em; }
/* Memes conventions que les lignes : vert = constate, bleu = estime, rouge = en defaut.
   Le realise et la projection sont des SOMMES : couleur du domaine, soulignees pour marquer
   qu'elles totalisent les colonnes qui precedent. */
/* Bloc et lignes INTERNES : gris neutre. Ce n'est ni une depense ni une recette -- la teinte doit
   dire "hors budget" et non participer au code couleur depense/recette. */
.wb-rc-bloc.is-itn { border-left-color: var(--wb-mute); }
.wb-rc-bloc.is-itn .wb-rc-bloc-lbl { color: var(--wb-mute); cursor: help; }
.wb-rc-row.is-itn { --card-rgb: 113, 113, 122; opacity: .88; }
.wb-rc-tag {
  /* G63 : « interne » qualifie la NATURE du mouvement (categorie invariante) -> pilule. */
  display: inline-block; margin-left: .35rem; padding: 0 .42rem; border-radius: 999px;
  font-size: .62rem; font-style: normal; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wb-mute); border: 1px solid rgba(113, 113, 122, .45); background: rgba(113, 113, 122, .12);
  cursor: help;
}
/* Retard d'import : ambre, comme "hors import" -- meme nature (donnee absente, pas mauvaise). */
.wb-rc-stale {
  flex-basis: 100%; margin-top: .3rem; display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--wb-warn); cursor: help;
}
/* "hors import" : ambre. Ni succes ni echec -- une donnee qu'on ne peut pas encore juger. */
.wb-rc-etat-wait { color: var(--wb-warn); background: rgba(var(--wb-warn-rgb), .12); border-color: rgba(var(--wb-warn-rgb), .35); }
.wb-rc-fig-ok b { color: var(--wb-ok); }
.wb-rc-fig-info b { color: var(--wb-info); }
.wb-rc-fig-bad b { color: var(--wb-bad); }
.wb-rc-fig-wait b { color: var(--wb-warn); }
.wb-rc-fig-sum b, .wb-rc-fig-proj b { color: var(--p-base); border-top: 1px solid rgba(var(--p-base-rgb),.4); padding-top: 1px; }
.wb-rc-fig-ecart b { color: var(--p-base); }

.wb-rc-list { display: flex; flex-direction: column; gap: .22rem; }
/* Chaque ligne porte le glassmorphisme standard du portail (recette .card-pri), teinte par son
   ETAT via --card-rgb : vert = constate, rouge = en defaut, bleu = estime/a venir. La couleur
   n'est pas decorative -- c'est l'information la plus utile a la lecture en diagonale. */
.wb-rc-row {
  display: grid; align-items: center; gap: .55rem;
  grid-template-columns: 22px 26px minmax(140px, 1.5fr) 84px minmax(60px, 1fr) 150px 96px 24px 24px;
  padding: .38rem .55rem; font-size: .82rem;
  --card-rgb: var(--wb-info-rgb);
  border-radius: 8px;
  border-top: 1px solid rgba(var(--card-rgb), .35);
  border-right: 1px solid rgba(var(--card-rgb), .35);
  border-bottom: 1px solid rgba(var(--card-rgb), .35);
  border-left: 2px solid rgba(var(--card-rgb), .9);
  background:
    radial-gradient(circle at top right, rgba(var(--card-rgb), .12), transparent 60%),
    linear-gradient(135deg, rgba(var(--card-rgb), .09) 0%, rgba(var(--card-rgb), .03) 50%, rgba(24, 24, 27, .55) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    inset 6px 0 12px -8px rgba(var(--card-rgb), .5),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 3px 12px rgba(0, 0, 0, .22);
  transition: border-color .2s, box-shadow .2s;
}
.wb-rc-row:hover { box-shadow: inset 6px 0 14px -8px rgba(var(--card-rgb), .65), inset 0 1px 0 rgba(255,255,255,.09), 0 0 18px rgba(var(--card-rgb), .18), 0 3px 12px rgba(0,0,0,.24); }
/* Colonne supplementaire pour le bouton d'enquete : reservee sur TOUTES les lignes (placeholder
   vide quand la ligne n'est pas en defaut), sinon la grille se decalerait d'une ligne a l'autre. */
.wb-rc-row { grid-template-columns: 22px 26px minmax(140px, 1.5fr) 84px minmax(60px, 1fr) 150px 96px 24px 24px 24px; }
.wb-rc-nowhy { display: block; }
/* Panneau d'enquete : sobre, comme le panneau de statistiques -- c'est un contenu inclus dans la
   ligne, pas une carte a part entiere. */
.wb-rc-defaut {
  grid-column: 1 / -1; margin-top: .5rem; padding: .65rem .8rem; cursor: default;
  border-radius: 6px; background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(255, 255, 255, .07); box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3);
}
.wb-rcd-head { font-size: .8rem; color: #d4d4d8; margin-bottom: .5rem; }
.wb-rcd-piste { border-left: 2px solid #52525b; padding: .25rem 0 .25rem .6rem; margin-bottom: .5rem; }
.wb-rcd-piste.wb-rcd-ok   { border-left-color: var(--wb-ok); }
.wb-rcd-piste.wb-rcd-warn { border-left-color: var(--wb-warn); }
.wb-rcd-t { font-size: .82rem; font-weight: 600; color: #e4e4e7; }
.wb-rcd-badge {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; padding: 0 .3rem;
  border-radius: 3px; background: rgba(255,255,255,.09); color: #a1a1aa; margin-right: .25rem;
}
.wb-rcd-piste p { margin: .2rem 0 .3rem; font-size: .78rem; color: #a1a1aa; line-height: 1.45; }
.wb-rcd-tbl { width: 100%; border-collapse: collapse; font-size: .74rem; color: #a1a1aa; }
.wb-rcd-tbl td { padding: .1rem .4rem .1rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.wb-rcd-pick { text-align: right; white-space: nowrap; }
.wb-rcd-btn {
  font-size: .68rem; padding: .1rem .4rem; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(39,39,42,.6); color: #a1a1aa;
}
.wb-rcd-btn:hover { border-color: rgba(var(--p-base-rgb),.5); color: var(--p-base); }
/* Candidat retenu : l'etat doit se voir sans survol, sinon on ne sait pas ce qu'on a deja fait. */
.wb-rcd-btn.is-on { border-color: rgba(var(--wb-ok-rgb),.55); color: var(--wb-ok); background: rgba(var(--wb-ok-rgb),.12); }
.wb-rcd-tbl tr.wb-rcd-pris td { color: var(--wb-ok); }
.wb-rcd-act { margin-top: .5rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wb-rcd-ia-txt { font-size: .78rem; color: #d4d4d8; line-height: 1.45; }
.wb-rcd-ia-err { font-size: .76rem; color: var(--wb-warn); }
.wb-rc-row.wb-rc-ok   { --card-rgb: var(--wb-ok-rgb); }    /* pointe  */
.wb-rc-row.wb-rc-bad  { --card-rgb: var(--wb-bad-rgb); }   /* defaut  */
.wb-rc-row.wb-rc-none { --card-rgb: var(--wb-info-rgb); }  /* estime  */
/* Ligne decochee : visiblement hors du total, sans disparaitre (elle reste consultable). */
.wb-rc-row.is-off { opacity: .45; }
.wb-rc-chk { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wb-rc-chk input { accent-color: var(--p-base); cursor: pointer; }
.wb-rc-date { font-variant-numeric: tabular-nums; color: #a1a1aa; font-size: .8rem; text-align: right; }
.wb-rc-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.wb-rc-name b { color: #e5e5e5; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-rc-name i { font-style: normal; font-size: .7rem; color: #71717a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-rc-freq {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: #a1a1aa;
  background: rgba(255,255,255,.05); border-radius: 4px; padding: .1rem .3rem; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-rc-bar { height: 9px; background: rgba(255,255,255,.05); border-radius: 5px; overflow: hidden; }
/* Teinte des barres = SENS du flux (rouge depense / vert revenu), pas etat de la ligne : une
   depense pointee en barres vertes se lirait comme une recette. L'etat reste porte par le verre
   de la ligne, sa bordure et la pastille d'etat. */
.wb-rc-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--wb-bad), rgba(var(--wb-bad-rgb),.45)); }
.wb-rc-row.is-rev .wb-rc-bar i { background: linear-gradient(90deg, var(--wb-ok), rgba(var(--wb-ok-rgb),.45)); }
.wb-rc-row.is-rev .wb-rc-amt b { color: var(--wb-ok); }
.wb-rc-amt { text-align: right; display: flex; flex-direction: column; line-height: 1.2; }
.wb-rc-amt b { font-variant-numeric: tabular-nums; color: #e5e5e5; font-weight: 600; }
.wb-rc-amt i { font-style: normal; font-size: .66rem; color: #71717a; }
.wb-rc-ecart { font-size: .66rem; font-variant-numeric: tabular-nums; }
.wb-rc-ecart.up { color: var(--wb-bad); }
.wb-rc-ecart.down { color: var(--wb-ok); }
.wb-rc-etat { font-size: .66rem; display: inline-flex; align-items: center; gap: .2rem; justify-content: flex-start; }
.wb-rc-etat-ok { color: var(--wb-ok); }
.wb-rc-etat-bad { color: var(--wb-bad); }
.wb-rc-etat-none { color: #a1a1aa; }
.wb-rc-del, .wb-rc-cut, .wb-rc-why { background: none; border: none; color: #52525b; cursor: pointer; padding: 0 .15rem; display: inline-flex; }
/* Seule la couleur de survol distingue l'action -- la forme reste identique. */
.wb-rc-why:hover { color: var(--p-base); }
.wb-rc-del:hover { color: var(--wb-bad); }
.wb-rc-cut:hover { color: var(--wb-warn); }
/* Mise a l'ecart active : l'etat doit se voir sans survol, sinon on la cherche. */
.wb-rc-cut.is-on { color: var(--wb-warn); }
.wb-rc-row.is-off .wb-rc-cut.is-on { color: var(--p-base); }
/* Formulaire de suppression : occupe toute la largeur de la ligne (grid-column: 1/-1). */
.wb-rc-delform { grid-column: 1 / -1; margin-top: .35rem; padding: .5rem .6rem; background: rgba(0,0,0,.3); border: 1px solid rgba(var(--wb-bad-rgb),.3); border-radius: 6px; }
.wb-rc-delform[hidden] { display: none; }
.wb-rc-delnote { width: 100%; box-sizing: border-box; background: #1a1a1a; border: 1px solid #333; border-radius: 5px; padding: .35rem .5rem; color: #e5e5e5; font-size: .8rem; font-family: inherit; resize: vertical; }
.wb-rc-delact { display: flex; gap: .4rem; justify-content: flex-end; margin-top: .4rem; }
.wb-rc-delact .t-btn { font-size: .75rem; padding: .25rem .6rem; border-radius: 5px; cursor: pointer; border: 1px solid rgba(255,255,255,.1); background: rgba(39,39,42,.5); color: #e4e4e7; }
.wb-rc-delok { border-color: rgba(var(--wb-bad-rgb),.5) !important; color: var(--wb-bad) !important; }
.wb-rc-delok:hover { background: rgba(var(--wb-bad-rgb),.15) !important; }

/* Detail statistique d'un mouvement (ouvert au clic sur la ligne). */
.wb-rc-row { cursor: pointer; }
/* Ligne ouverte : on renforce la tranche de verre au lieu de repeindre le fond, qui ecraserait
   la teinte d'etat. */
.wb-rc-row.is-open { border-color: rgba(var(--card-rgb), .65); box-shadow: inset 6px 0 16px -8px rgba(var(--card-rgb), .75), inset 0 1px 0 rgba(255,255,255,.09), 0 4px 16px rgba(0,0,0,.26); }
/* Panneau de detail volontairement SOBRE : le glassmorphisme est desormais porte par la ligne
   elle-meme (cf plus haut). Deux niveaux de verre imbriques se neutralisent -- le panneau se lit
   mieux en creux, comme un contenu inclus dans la ligne. */
.wb-rc-stats {
  grid-column: 1 / -1; margin-top: .5rem; padding: .65rem .8rem; cursor: default;
  border-radius: 6px; background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3);
}
.wb-rc-stats[hidden] { display: none; }
.wb-rcs-figs { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: .5rem; }
.wb-rcs-stat { display: flex; flex-direction: column; }
.wb-rcs-stat i { font-style: normal; font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: #71717a; }
.wb-rcs-stat b { font-size: .86rem; font-variant-numeric: tabular-nums; color: #e5e5e5; }
.wb-rcs-chart { display: flex; align-items: flex-end; gap: 3px; height: 56px; padding: 0 .1rem; }
/* Gabarit des barres ; la COULEUR est posee plus bas, par sens du flux. */
.wb-rcs-bar { flex: 1; min-width: 6px; border-radius: 2px 2px 0 0; }
.wb-rcs-axis { display: flex; justify-content: space-between; font-size: .64rem; color: #71717a; margin-top: .2rem; }
/* Historique : meme convention que la barre de montant -- rouge depense, vert revenu. La derniere
   occurrence reste mise en avant par une teinte plus dense, pas par une couleur differente. */
.wb-rc-row .wb-rcs-bar { background: linear-gradient(180deg, rgba(var(--wb-bad-rgb), .9), rgba(var(--wb-bad-rgb), .3)); }
.wb-rc-row .wb-rcs-bar.is-last { background: linear-gradient(180deg, rgba(var(--wb-bad-rgb), 1), rgba(var(--wb-bad-rgb), .55)); }
.wb-rc-row.is-rev .wb-rcs-bar { background: linear-gradient(180deg, rgba(var(--wb-ok-rgb), .9), rgba(var(--wb-ok-rgb), .3)); }
.wb-rc-row.is-rev .wb-rcs-bar.is-last { background: linear-gradient(180deg, rgba(var(--wb-ok-rgb), 1), rgba(var(--wb-ok-rgb), .55)); }

/* Correction manuelle du montant attendu. */
.wb-rcs-fix { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.08); }
.wb-rcs-fix label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #a1a1aa; }
.wb-rcs-amt { width: 110px; background: rgba(0,0,0,.35); border: 1px solid rgba(var(--p-base-rgb),.25); border-radius: 5px; padding: .28rem .45rem; color: #e5e5e5; font-size: .84rem; text-align: right; font-variant-numeric: tabular-nums; }
.wb-rcs-amt:focus { outline: none; border-color: rgba(var(--p-base-rgb),.6); }
.wb-rcs-est { font-size: .7rem; color: #71717a; }
.wb-rcs-fix .t-btn { font-size: .74rem; padding: .25rem .6rem; border-radius: 5px; cursor: pointer; border: 1px solid rgba(var(--p-base-rgb),.35); background: rgba(var(--p-base-rgb),.08); color: var(--p-base); }
.wb-rcs-fix .t-btn:hover { background: rgba(var(--p-base-rgb),.16); }
/* Montant corrige manuellement : signale sur la ligne, sinon la correction devient invisible. */
.wb-rc-amt.is-fixed b { border-bottom: 1px dashed rgba(var(--p-base-rgb),.7); }

.wb-rc-exclus { display: flex; flex-direction: column; gap: .3rem; }
.wb-rc-exrow { display: grid; grid-template-columns: minmax(120px,1fr) 2fr 90px auto; gap: .5rem; align-items: center; font-size: .78rem; padding: .25rem .4rem; background: rgba(9,9,11,.35); border-radius: 5px; }
.wb-rc-exrow b { color: #e5e5e5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-rc-exrow i { font-style: normal; color: #a1a1aa; }
.wb-rc-exrow span { color: #71717a; font-variant-numeric: tabular-nums; }
.wb-rc-exrow .t-btn { font-size: .72rem; padding: .2rem .5rem; border-radius: 5px; cursor: pointer; border: 1px solid rgba(255,255,255,.1); background: rgba(39,39,42,.5); color: #e4e4e7; }

@media (max-width: 1100px) {
  .wb-rc-row { grid-template-columns: 22px 26px minmax(110px,1.4fr) 70px 130px 84px 24px 24px; }
  .wb-rc-bar { display: none; }   /* la barre est le premier element sacrifiable : le chiffre reste */
}

/* ---- COCKPIT : le verdict domine, les barres le prouvent, les tuiles portent les faits ---- */
/* 2026-07-28 (demande Vincent) : le chrome de la carte est desormais celui du portail (.card-pri,
   couleur du domaine via --card-rgb: --p-base-rgb). Le fond/bordure maison de .wb-ck est retire --
   il aurait ecrase .card-pri (chargee avant, meme specificite). Le statut ok/warn/bad ne colore
   plus la CARTE : il reste porte par la pastille et le montant de marge, dans l'en-tete replie. */
.wb-ck { }
.wb-ck-ok, .wb-ck-warn, .wb-ck-bad { }
/* En-tete replie : titre a gauche, verdict au centre, tendance poussee a droite.
   .wb-ck-sum n'ajoute QUE le retour a la ligne (le bloc des barres passe en dessous) -- tout le
   reste (gap, alignement, hauteur, padding) vient de .insight-head/.bsc-summary, partagees avec la
   carte Analyse Warren : aucune valeur dupliquee, donc aucune derive possible entre les deux. */
.wb-ck-sum { flex-wrap: wrap; }
.wb-ck-sum > .insight-title { flex-shrink: 0; }
/* .bs-collapse met le padding du CONTENEUR a 0 (c'est ce qui aligne l'en-tete sur celui de la carte
   Analyse Warren) : le corps doit donc porter ses propres marges, sinon les tuiles collent au bord.
   Meme retrait horizontal que le summary (.5rem) pour que tout s'aligne verticalement. */
.wb-ck > .wb-card-body { padding: .5rem .5rem .15rem; }
.wb-ck-sum .wb-ck-verdict { align-items: center; }
.wb-ck-sum .wb-ck-trend { margin-left: auto; }
/* Barres + sparkline dans l'en-tete : occupent toute la largeur sous la ligne de verdict. */
.wb-ck-sum .wb-ck-flows { flex-basis: 100%; margin-top: .15rem; }
/* Le curseur reste "pointer" sur tout l'en-tete (il declenche le repli), y compris sur les barres. */
.wb-ck-sum .wb-ck-flows * { cursor: pointer; }
.wb-ck-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.wb-ck-verdict { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.wb-ck-verdict b { font-size: 1.18rem; color: #f4f4f5; letter-spacing: .01em; }
.wb-ck-dot { width: 9px; height: 9px; border-radius: 50%; background: #52525b; align-self: center; flex-shrink: 0; }
.wb-ck-ok   .wb-ck-dot { background: var(--wb-ok);   box-shadow: 0 0 0 3px rgba(var(--wb-ok-rgb),.18); }
.wb-ck-warn .wb-ck-dot { background: var(--wb-warn); box-shadow: 0 0 0 3px rgba(var(--wb-warn-rgb),.18); }
.wb-ck-bad  .wb-ck-dot { background: var(--wb-bad);  box-shadow: 0 0 0 3px rgba(var(--wb-bad-rgb),.18); }
.wb-ck-marge { font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #e5e5e5; }
.wb-ck-ok .wb-ck-marge { color: var(--wb-ok); }
.wb-ck-warn .wb-ck-marge { color: var(--wb-warn); }
.wb-ck-bad .wb-ck-marge { color: var(--wb-bad); }
.wb-ck-marge i { font-style: normal; font-weight: 400; font-size: .8rem; color: #a1a1aa; }
.wb-ck-trend { font-size: .75rem; color: #a1a1aa; display: inline-flex; align-items: center; gap: .3rem; }
.wb-ck-trend-ok  { color: var(--wb-ok); }
.wb-ck-trend-bad { color: var(--wb-bad); }

.wb-ck-flows { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1.1rem; align-items: center; }
.wb-ck-flow { display: flex; align-items: center; gap: .6rem; }
.wb-ck-fl { width: 138px; flex-shrink: 0; font-size: .74rem; color: #a1a1aa; }
.wb-ck-fb { flex: 1; height: 13px; background: rgba(255,255,255,.05); border-radius: 7px; overflow: hidden; min-width: 60px; display: flex; }
.wb-ck-fb i { display: block; height: 100%; border-radius: 7px; }
/* Part ESTIMEE restante, accolee a la part constatee : bleu, comme dans la carte des mouvements
   recurrents ou le bleu signale deja une donnee estimee non constatee. Le rayon est coupe entre
   les deux segments pour qu'ils se lisent comme une seule barre. */
.wb-ck-fb.has-est > i:first-child { border-radius: 7px 0 0 7px; }
/* Rien de constate : le segment estime part de l'origine, son bord gauche se rarrondit. */
.wb-ck-fb i.wb-ck-fb-est.is-alone { border-radius: 7px; }
/* Selecteur qualifie (i.wb-ck-fb-est) : sans lui, `.wb-ck-fb i` est plus specifique et rearrondit
   les quatre coins. Le bord GAUCHE doit rester carre -- ce segment ne part pas de l'origine. */
.wb-ck-fb i.wb-ck-fb-est { background: linear-gradient(90deg, rgba(var(--wb-info-rgb),.75), rgba(var(--wb-info-rgb),.38)); border-radius: 0 7px 7px 0; }
.wb-ck-fb-rev { background: linear-gradient(90deg, var(--wb-ok), rgba(var(--wb-ok-rgb),.62)); }
.wb-ck-fb-dep { background: linear-gradient(90deg, var(--wb-bad), rgba(var(--wb-bad-rgb),.62)); }
.wb-ck-fv { width: 210px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; font-size: .88rem; font-weight: 600; color: #e5e5e5; }
.wb-ck-fv i { font-style: normal; font-weight: 400; font-size: .74rem; color: #71717a; margin-left: .35rem; }
.wb-ck-sparkwrap { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.wb-ck-sparkl { display: block; font-size: .64rem; color: #71717a; text-transform: uppercase; letter-spacing: .05em; }
.wb-ck-spark { width: 132px; height: 30px; }
.wb-ck-spl { fill: none; stroke: var(--p-base); stroke-width: 1.6; }
.wb-ck-sp0 { stroke: rgba(255,255,255,.16); stroke-width: 1; stroke-dasharray: 2 2; }
.wb-ck-spd { fill: var(--p-base); }
.wb-ck-spd.neg { fill: var(--wb-bad); }

.wb-ck-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: .55rem; margin-top: .75rem; }
/* 2026-07-28 : chrome standard (.card-pri) -- fond/bordure/padding maison retires, ils
   l'auraient ecrase. Le survol est celui de .card-pri. Padding resserre : ces tuiles sont
   nettement plus petites qu'une carte de page. */
.wb-ck-tile { padding: .5rem .65rem; }
.wb-ck-ok-t { }
/* Etat porte par .card-pri.is-ok/.is-alert/.is-alarm (portal.css) : plus de liseré maison. */
.wb-ck-tl { font-size: .66rem; color: #8a8a93; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: .25rem; }
.wb-ck-tv { font-size: 1.16rem; font-weight: 700; color: #f4f4f5; font-variant-numeric: tabular-nums; line-height: 1.2; }
.wb-ck-tv i { font-style: normal; font-size: .68rem; font-weight: 400; color: #71717a; }
.wb-ck-tile.wb-ck-ok   .wb-ck-tv { color: var(--wb-ok); }
.wb-ck-tile.wb-ck-warn .wb-ck-tv { color: var(--wb-warn); }
.wb-ck-tile.wb-ck-bad  .wb-ck-tv { color: var(--wb-bad); }
.wb-ck-ts { font-size: .68rem; color: #a1a1aa; line-height: 1.35; }
.wb-ck-ts b { color: #e5e5e5; }

/* ---- OU PART L'ARGENT : categorie repliable, sous-categories a l'interieur ---- */
.wb-catlist { margin-top: .55rem; }
.wb-det-cat { margin-top: .3rem; }
.wb-det-cat > .wb-det-sum { padding: .32rem .5rem; }
.wb-det-cat .wb-det-lbl { display: flex; align-items: center; gap: .6rem; width: 100%; flex-wrap: nowrap; }
.wb-cat-name { width: 200px; flex-shrink: 0; font-weight: 600; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-cat-bar { flex: 1 1 90px; height: 9px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; min-width: 50px; }
.wb-cat-bar i { display: block; height: 100%; border-radius: 5px; }
.wb-cat-val { width: 150px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; font-size: .82rem; color: #e5e5e5; }
.wb-cat-val i { color: #71717a; font-style: normal; }
.wb-cat-meta { width: 128px; flex-shrink: 0; font-size: .68rem; color: #71717a; text-align: right; }
.wb-cat-rec { width: 132px; flex-shrink: 0; display: flex; align-items: center; gap: .3rem; justify-content: flex-end; }
.wb-rsplit { display: inline-block; width: 44px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; flex-shrink: 0; }
.wb-rsplit-r { display: block; height: 100%; background: var(--p-base); border-radius: 3px; }
.wb-rsplit-l { font-size: .62rem; color: #71717a; white-space: nowrap; }
.wb-subcats { display: flex; flex-direction: column; gap: .12rem; }
.wb-subrow { display: flex; align-items: center; gap: .6rem; padding: .2rem .3rem; border-radius: 4px; font-size: .78rem; }
.wb-subrow:hover { background: rgba(var(--p-base-rgb),.08); box-shadow: inset 2px 0 0 var(--p-base); }
.wb-sub-name { width: 260px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d4d4d8; }
.wb-sub-bar { flex: 1 1 60px; height: 7px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; min-width: 40px; }
.wb-sub-bar i { display: block; height: 100%; border-radius: 4px; opacity: .8; }
.wb-sub-val { width: 140px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; color: #e5e5e5; }
.wb-sub-val i { color: #71717a; font-style: normal; }
.wb-sub-meta { width: 190px; flex-shrink: 0; font-size: .68rem; color: #71717a; text-align: right; }
/* G63 : categorie de mouvement -> pilule. */
.wb-cchip { font-size: .6rem; padding: .04rem .42rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }
.wb-cchip-ok   { background: rgba(var(--wb-ok-rgb),.14);   color: var(--wb-ok); }
.wb-cchip-warn { background: rgba(var(--wb-warn-rgb),.16); color: var(--wb-warn); }
.wb-cchip-bad  { background: rgba(var(--wb-bad-rgb),.16);  color: var(--wb-bad); }
.wb-cchip-mute { background: rgba(255,255,255,.06); color: #a1a1aa; }

/* ---- CAPACITE QUI SE LIBERE : escalier ---- */
.wb-lib-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.wb-lib-big { font-size: 1.9rem; font-weight: 700; color: var(--wb-ok); font-variant-numeric: tabular-nums; line-height: 1.05; }
.wb-lib-big span { font-size: .82rem; font-weight: 400; color: #71717a; margin-left: .15rem; }
.wb-lib-sub { flex: 1 1 320px; font-size: .8rem; color: #a1a1aa; line-height: 1.45; }
.wb-lib-sub b { color: #e5e5e5; }
.wb-lib-svg { max-height: 240px; }
.wb-lib-area { fill: rgba(var(--wb-ok-rgb), .14); stroke: none; }
.wb-lib-line { fill: none; stroke: var(--wb-ok); stroke-width: 2; }
.wb-lib-mk line { stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 2 3; }
.wb-lib-mk circle { fill: var(--wb-ok); stroke: rgba(0,0,0,.45); stroke-width: 1; }
.wb-lib-mk:hover circle { r: 5; }
.wb-lib-endl { fill: var(--wb-ok); font-size: 12px; font-weight: 700; }

@media (max-width: 1100px) {
  .wb-cat-meta, .wb-sub-meta { display: none; }
  .wb-cat-name { width: 150px; }
  .wb-sub-name { width: 180px; }
}
/* 2026-07-27 (demande Vincent) : paliers recalcules sur la largeur de CONTENU dispo, pas la
   largeur d'ecran brute -- .agent-layout reserve 260px fixes a la barre laterale quand elle est
   ouverte (warren.css), donc largeur contenu = largeur ecran - 260px dans le cas demande ("volet
   de navigation ouvert"). Cibles en largeur de CONTENU 1100/760/520px, traduites ici en largeur
   d'ECRAN (+260px chacune). Volet ferme -> encore plus de marge, jamais moins. */
@media (max-width: 1360px) { .wb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1020px) { .wb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .wb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Emplacement vide (slot non selectionne) : meme gabarit que .kpi-card mais sans contenu, discret. */
.kpi-card.kpi-card--empty {
  align-items: center; justify-content: center;
  border-style: dashed; border-left-style: dashed; opacity: .45;
  background: rgba(39, 39, 42, .18);
  backdrop-filter: blur(10px);
  min-height: 6.4rem;
}
.kpi-card--empty .kpi-empty-lbl { font-size: .72rem; font-family: 'Menlo','Consolas',monospace; letter-spacing: .04em; color: #71717a; }

@media (max-width: 860px) {
  .wb-ck-flows { grid-template-columns: 1fr; }
  .wb-ck-sparkwrap { grid-row: auto; grid-column: auto; text-align: left; }
  .wb-cat-rec { display: none; }
}


/* Barre de filtration v2 — navigation par decalage de periode civile (2026-07-27). */
.wb-offset { display: inline-flex; align-items: center; gap: .25rem; }
.wb-navbtn {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: inherit; border-radius: 6px; padding: .18rem .5rem; cursor: pointer;
  font-size: .85rem; line-height: 1.4; transition: background .15s, border-color .15s;
}
.wb-navbtn:hover:not(:disabled) { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.26); }
.wb-navbtn:disabled { opacity: .35; cursor: default; }
/* Le bouton central porte le libelle de la fenetre : plus large, non tronque. */
.wb-navbtn-now { min-width: 8.5rem; font-variant-numeric: tabular-nums; }
/* Mis en evidence des qu'on s'est eloigne de la periode courante (retour possible). */
.wb-navbtn-off { border-color: rgba(251,191,36,.55); color: #fbbf24; }