/* ============================================================
   APP LIGHT — calque de l'espace connecté (« Design 3 enrichi »)
   Devenu le calque des DEUX thèmes : il ne porte plus de couleurs, seulement
   les jetons de css/theme.css. Les mêmes règles, des valeurs qui suivent le
   thème choisi. C'est lui qui trahissait les hausses et les baisses du tableau
   de bord en marine — « .app-body .txt-up » gagnait sur les règles de page
   déjà migrées.
   Chargé APRÈS style.css / app.css / theme-v4.css sur les pages app :
   il remappe les variables du thème sombre vers la palette claire
   (bleu var(--bz-blue-vif)) et corrige les couleurs codées en dur des composants
   partagés (graphique fchart, onglets portefeuilles, boutons…).
   ============================================================ */

body.app-body{
  --bg:var(--bz-bg-soft);
  --bg-alt:var(--bz-surface);
  --surface:var(--bz-surface);
  --surface-2:var(--bz-bg-soft3);
  --border:rgba(var(--bz-ink-rgb),.10);
  --border-strong:rgba(var(--bz-ink-rgb),.20);
  --text:var(--bz-text);
  --text-dim:var(--bz-text-2);
  --text-mute:var(--bz-text-3);
  --accent:var(--bz-blue);
  --accent-2:var(--bz-violet-vif);
  --accent-gold:var(--bz-amber-vif);
  --danger:var(--bz-red);
  --lime:var(--bz-blue);          /* l'ancien accent lime devient le bleu du design */
  --noir:var(--bz-sur-accent);   /* texte posé sur l'accent : blanc en clair, marine en bleu */
  --hl:var(--bz-blue);
  --gradient:linear-gradient(135deg,var(--bz-blue-vif),var(--bz-violet-vif));
  --shadow:0 14px 40px rgba(var(--bz-ink-rgb),.08);
  background:var(--bz-bg-soft);
  color:var(--bz-text-2);
}
body.app-body h1, body.app-body h2, body.app-body h3, body.app-body h4{ color:var(--bz-text); }
.app-body .logo-dot{ background:url(../assets/baziloo-mark.svg?v=1) center/contain no-repeat; }

/* Boutons : conserver un contraste correct en clair */
.app-body .btn-primary{ background:var(--accent); color:var(--bz-sur-accent); }
.app-body .btn-primary:hover{ box-shadow:0 10px 30px rgba(var(--bz-blue-vif-rgb),.25); }
.app-body .btn-outline{ color:var(--bz-text); border-color:rgba(var(--bz-ink-rgb),.25); background:var(--bz-surface); }
.app-body .btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.app-body .btn-ghost{ color:var(--bz-text-2); }
.app-body .btn-ghost:hover{ color:var(--accent); }
.app-body .alert-success{ background:rgba(var(--bz-green-vif-rgb),.08); border-color:rgba(var(--bz-green-vif-rgb),.35); color:var(--bz-green-2); }
.app-body .alert-error{ background:rgba(var(--bz-red-rgb),.07); border-color:rgba(var(--bz-red-rgb),.35); color:var(--bz-red-2); }

/* Hausses / baisses : vert marché plutôt que bleu accent */
.app-body .is-up{ color:var(--bz-green-vif); }
.app-body .is-down{ color:var(--bz-red); }
.app-body .eyebrow{ color:var(--accent); }

/* Graphique fchart (theme-v4) : détails codés en dur passés en clair */
.app-body .fchart-grid{ stroke:rgba(var(--bz-ink-rgb),.08); }
.app-body .fchart-cross{ stroke:rgba(var(--bz-ink-rgb),.35); }
.app-body .fchart-tip{ box-shadow:0 10px 26px rgba(var(--bz-ink-rgb),.16); }
.app-body .fchart-periods button.on{ color:var(--bz-sur-accent); }
.app-body .fchart-stats .is-up, .app-body .fchart-tip .is-up{ color:var(--bz-green-vif); }
.app-body .fchart-stats .is-down, .app-body .fchart-tip .is-down{ color:var(--bz-red); }

/* Onglets portefeuilles (theme-v4) */
.app-body .pfolio-tab.on{ color:var(--bz-sur-accent); }
.app-body .pfolio-pop{ box-shadow:0 14px 34px rgba(var(--bz-ink-rgb),.16); }

/* Ancien en-tête public (.site-header), encore utilisé par discover.php / construire.php */
.app-body .site-header{ background:rgba(var(--bz-white-rgb),.92); border-bottom:1px solid rgba(var(--bz-ink-rgb),.10); box-shadow:0 6px 24px rgba(var(--bz-ink-rgb),.06); }
.app-body .site-header .logo{ color:var(--bz-text); }
.app-body .main-nav a{ color:var(--bz-text-2); }
.app-body .main-nav a:hover{ color:var(--bz-blue-vif); }
.app-body .site-header .btn-ghost{ color:var(--bz-text-2); }
.app-body .site-header .btn-ghost:hover{ color:var(--bz-blue-vif); }
.app-body .nav-toggle span{ background:var(--bz-text); }
@media (max-width:960px){ .app-body .main-nav{ background:rgba(var(--bz-white-rgb),.98); } }

/* En-tête de l'espace admin / Académie (app.css) */
.app-body .app-header{ background:rgba(var(--bz-white-rgb),.92); border-bottom:1px solid rgba(var(--bz-ink-rgb),.10); }

/* ============================================================
   PASTILLES & ÉTIQUETTES — contraste renforcé (lisibilité seniors)
   Les fonds « vert menthe » de l'ancien thème sombre (rgba(0,224,161,…))
   restaient quasi invisibles sur fond clair, et leur texte bleu créait
   un couple mal assorti (effet clignotant). Traitement unique :
   fond bleu franc + texte bleu foncé + bordure qui détache la pastille.
   ============================================================ */
.app-body .cp-badge,
.app-body .discover-tag,
.app-body .idee-tag,
.app-body .badge-live,
.app-body .sig-high,
.app-body .sig-solid,
.app-body .idee-score.sig-high,
.app-body .idee-score.sig-solid{
  background:rgba(var(--bz-blue-vif-rgb),.12);
  color:var(--bz-blue-2);
  border:1px solid rgba(var(--bz-blue-vif-rgb),.38);
}
.app-body .idee-tag:hover{ background:rgba(var(--bz-blue-vif-rgb),.20); color:var(--bz-blue-dark); border-color:rgba(var(--bz-blue-vif-rgb),.55); }

/* Niveaux neutres : les fonds blancs translucides disparaissaient sur clair. */
.app-body .sig-mid,
.app-body .idee-score.sig-mid{ background:rgba(var(--bz-ink-rgb),.06); color:var(--bz-text-1b); border:1px solid rgba(var(--bz-ink-rgb),.16); }
.app-body .sig-low{ background:rgba(var(--bz-ink-rgb),.04); color:var(--bz-text-2b); border:1px solid rgba(var(--bz-ink-rgb),.14); }

/* Chevron de repli des panneaux : même logique. */
.app-body .cp-chevron{ background:rgba(var(--bz-blue-vif-rgb),.10); color:var(--bz-blue-2); border:1px solid rgba(var(--bz-blue-vif-rgb),.30); }
.app-body .cp-head:hover .cp-chevron{ background:rgba(var(--bz-blue-vif-rgb),.22); border-color:rgba(var(--bz-blue-vif-rgb),.5); }

/* Cartes et encarts teintés : bordure visible plutôt qu'un lavis vert pâle. */
.app-body .plan-card-highlight{ border-color:rgba(var(--bz-blue-vif-rgb),.45); background:linear-gradient(160deg, rgba(var(--bz-blue-vif-rgb),.06), var(--surface)); }
.app-body .market-pick:has(input:checked){ border-color:var(--accent); background:rgba(var(--bz-blue-vif-rgb),.10); color:var(--bz-blue-2); }
.app-body .copilot{ background:linear-gradient(180deg, rgba(var(--bz-blue-vif-rgb),.05), var(--bg-alt)); border-color:rgba(var(--bz-blue-vif-rgb),.22); }
.app-body .pf-journey-card{ background:linear-gradient(180deg, rgba(var(--bz-blue-vif-rgb),.05), var(--bg-alt)); }

/* Barres de progression : dégradé bleu lisible (l'ancien partait du vert menthe). */
.app-body .fiche-bar span,
.app-body .radar-sector-bar span{ background:linear-gradient(90deg, rgba(var(--bz-blue-vif-rgb),.45), var(--accent)); }
.app-body .radar-band-bar span.sig-solid{ background:rgba(var(--bz-blue-vif-rgb),.55); border:none; }

/* ============================================================
   HAUSSES / BAISSES — teintes assez foncées pour du petit texte
   Les rouges et verts pâles du thème sombre (#ff6b6b, #4bd07f…)
   tombaient à ~2,7:1 sur fond clair. Cibles : toutes les variantes
   de classes utilisées dans l'app (up/down, is-up/is-down, txt-*, g/r).
   ============================================================ */
.app-body .is-up, .app-body .up, .app-body .txt-up, .app-body .g,
.app-body .dpf-ytd.is-up, .app-body .dagg-ytd.is-up, .app-body .pf-kpi-num.is-up,
.app-body .dmkt-tbl td.txt-up, .app-body .market-baro-perf.up, .app-body .market-sector-perf.up,
.app-body .radar-stat-num.up, .app-body .dradar-ico.up, .app-body .tr.up,
.app-body .fchart-stats .is-up, .app-body .fchart-tip .is-up{ color:var(--bz-green-2); }

.app-body .is-down, .app-body .down, .app-body .txt-down, .app-body .r,
.app-body .dpf-ytd.is-down, .app-body .dagg-ytd.is-down, .app-body .pf-kpi-num.is-down,
.app-body .dmkt-tbl td.txt-down, .app-body .market-baro-perf.down, .app-body .market-sector-perf.down,
.app-body .radar-stat-num.down, .app-body .dradar-ico.down, .app-body .tr.down,
.app-body .fchart-stats .is-down, .app-body .fchart-tip .is-down{ color:var(--bz-red-2); }

/* Petit texte bleu : var(--bz-blue-vif) frôle le seuil, on fonce d'un cran. */
.app-body .dsec-link, .app-body .dalert-cta, .app-body .dbs-score,
.app-body .idees-chip, .app-body .pf-kpi-lab a, .app-body small a{ color:var(--bz-blue-2); }

/* Cas plus spécifiques laissés par l'ancien thème (rouge pâle #ff6b6b). */
.app-body .pf-toppos-tbl td.down{ color:var(--bz-red-2); }
.app-body .pf-toppos-tbl td.up{ color:var(--bz-green-2); }

/* Derniers écarts sous le seuil (petit texte) : rouge et ambre d'un cran plus foncés. */
.app-body .ic-kcell b.down, .app-body .ic-chart-perf b.down, .app-body .str-card-foot .down{ color:var(--bz-red-2); }
.app-body .pf-pending-badge{ color:var(--bz-amber); }
.app-body .cd{ color:var(--bz-text-1c); }   /* compteur de durée : neutre foncé, pas une alerte */

/* Étiquettes d'état des ordres/stratégies (theme-v4) : « Active » / « En attente ». */
.app-body .pf-mkt-open{ color:var(--bz-green-2); }
.app-body .pf-mkt-closed{ color:var(--bz-amber); }
.app-body .mkt-sub .cd{ color:var(--bz-text-1c); }

/* ============================================================
   TEXTES BLANCS RÉSIDUELS DU THÈME SOMBRE
   Sur une carte blanche ils devenaient invisibles (ex. les montants
   du récapitulatif de portefeuille : capital déposé, investi, disponible).
   ============================================================ */
.app-body .pf-funds dd{ color:var(--bz-text); }
.app-body .pf-funds dt{ color:var(--bz-text-2); }
.app-body .pf-funds dd.txt-up, .app-body .pf-funds dd.up, .app-body .pf-funds dd.is-up{ color:var(--bz-green-2); }
.app-body .pf-funds dd.txt-down, .app-body .pf-funds dd.down, .app-body .pf-funds dd.is-down{ color:var(--bz-red-2); }
.app-body .pf-funds .pf-funds-strong{ color:var(--bz-text); font-weight:800; }
.app-body #pfAddCalc{ color:var(--bz-blue-2); }

/* Logo de l'en-tête applicatif : il restait blanc (invisible sur l'en-tête clair). */
.app-body .app-header .logo, .app-body .app-header .logo a,
.app-body .site-header .logo{ color:var(--bz-text); }
/* NB : ne PAS viser .logo tout court — le pied de page sombre de discover/construire
   garde un logo blanc, qui deviendrait invisible. */