/* Ayu Mirage palette — terminal redesign 2026-05
 * Couleurs adoucies (moins fluo) : accent en teal sage, pos/neg/warn/link
 * désaturés pour réduire la fatigue oculaire. La sémantique reste identique.
 */
:root {
  --bg:        #0a0e14;
  --bg-elev:   #0d1219;
  --bg-panel:  #0a0e14;
  --border:    #1f2430;
  --fg:        #b3b1ad;
  /* `--fg-mut` / `--fg-sub` éclaircis 2026-05-17 (demande Cédric) : les anciens
     tons (#7a8494 / #6e7681) rendaient les petites polices 10–11px trop sombres
     sur le bg #0a0e14 (contraste ~4.4–5.4:1, sous le seuil AA pour le texte
     petit). Bump vers #9aa3b2 / #8b94a0 (contraste ~7.3 / ~6.0:1) — lisibilité
     améliorée pour TOUTES les annotations mut/sub à travers le site. */
  --fg-mut:    #9aa3b2;
  --fg-sub:    #8b94a0;

  --accent:    #4cc9a8;  /* teal vif mais non fluo (passe 1.5) */
  --pos:       #9bc760;  /* vert plus saturé */
  --neg:       #e07178;  /* rouge tendre (proche de l'origine) */
  --warn:      #e6a85a;  /* ambre plus présent */
  --link:      #6cb8e0;  /* bleu acier plus saturé */
  --active:    #e8c84a;  /* jaune — état "page active" dans la sidebar */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Filet anti-scroll horizontal global (ajouté 2026-05-19) : un widget de
   la right-sidebar ou un sparkline peut occasionnellement déborder de quelques
   px et créer une barre de scroll horizontale parasite sur tout le viewport.
   On clamp côté html — ne pas mettre sur body (perturbe le scroll vertical
   dans certains navigateurs). */
html { overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.brand { color: var(--accent); letter-spacing: 0.15em; font-weight: 700; }
.nav { display: flex; gap: 18px; }
.nav a { color: var(--fg-mut); padding: 2px 0; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--fg); text-decoration: none; }
.nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.topbar-right { color: var(--fg-mut); display: flex; align-items: center; gap: 16px; }
.live-stamp { color: var(--accent); }
.logout-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--fg-mut); padding: 2px 8px; font: inherit; cursor: pointer;
}
.logout-btn:hover { color: var(--fg); border-color: var(--fg-mut); }
.logout-form { margin: 0; }

/* Ticker strip */
.ticker-strip {
  background: #050810;
  border-bottom: 1px solid var(--border);
  padding: 4px 16px;
  font-size: 11px;
  white-space: nowrap;
  overflow-x: auto;
}
.ticker-strip span.tk-sep { color: var(--fg-mut); margin: 0 10px; }
.ticker-strip span.tk-sym { color: var(--fg-mut); }

/* Content / panels */
.content { max-width: 1100px; margin: 0 auto; padding: 16px; }

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.panel-h {
  background: var(--bg-elev);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}
.panel-body { padding: 10px; }
.panel-body pre { margin: 0; font: inherit; color: inherit; white-space: pre; }
.panel-body p { margin: 0 0 8px 0; }
.panel-body p:last-child { margin-bottom: 0; }

/* Color helpers */
.pos  { color: var(--pos); }
.neg  { color: var(--neg); }
.warn { color: var(--warn); }
.mut  { color: var(--fg-mut); }
.hi   { color: var(--accent); }
.tabular { font-variant-numeric: tabular-nums; }

/* Tables */
table.term { width: 100%; border-collapse: collapse; font-size: 11px; }
table.term th, table.term td { padding: 3px 8px; text-align: left; }
table.term th {
  color: var(--fg-mut); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px;
  border-bottom: 1px solid var(--border);
}
table.term td { border-bottom: 1px solid var(--border); }
table.term tr:last-child td { border-bottom: none; }
table.term td.num { font-variant-numeric: tabular-nums; }
table.term tr:hover td { background: rgba(255,255,255,0.02); }

/* Variante : table aux colonnes étalées (table-layout fixed).
   Utile pour les tables courtes en nb de colonnes (3-5) dans un panel large :
   sans ça les colonnes se collent à gauche et laissent du blanc à droite.
   2026-05-19 — appliqué notamment à NIVEAUX CLÉS sur la home FI. */
table.term-stretched { table-layout: fixed; width: 100%; }
table.term-stretched td, table.term-stretched th { overflow: hidden; text-overflow: ellipsis; }

/* Wrapper standard de page applicatif. Aligné sur le pattern `.fx-page` / `.cm-page`
   pour uniformiser la largeur visuelle entre toutes les pages du shell.
   2026-05-19 — extrait de fx-page pour application à la home.
   Padding latéral 16px : crée la marge interne "flottante" demandée. Les blocs
   à fond opaque (panels, conviction-card) ne touchent plus les bords du shell-main,
   reproduisant l'effet aéré perçu sur /forex (où les éléments transparents
   laissaient déjà voir cet air). */
.home-page,
.fx-page,
.cm-page {
  max-width: 1400px;
  padding-left: 16px;
  padding-right: 16px;
}

/* Force tous les enfants direct du wrapper à utiliser 100% de la largeur,
   sans quoi un panel ou un block flex peut shrinker à son contenu. */
.home-page > .panel,
.home-page > .conviction-card,
.home-page > .radar-grid { width: 100%; box-sizing: border-box; }

/* Status pills */
.pill {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid currentColor;
}
.pill-active   { color: var(--pos); }
.pill-watch    { color: var(--warn); }
.pill-review   { color: var(--accent); }
.pill-daily    { color: var(--accent); }
.pill-weekly   { color: var(--pos); }
.pill-monthly  { color: var(--warn); }

.regime-pill {
  display: inline-block; font-size: 10px; letter-spacing: 0.12em;
  padding: 2px 10px; border: 1px solid currentColor; text-transform: uppercase;
}
.regime-offensif { color: var(--pos); }
.regime-neutre   { color: var(--warn); }
.regime-defensif { color: var(--neg); }

/* Sparkline */
.sparkline {
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}
.sparkline-large { font-size: 22px; }

/* Hero metric */
.hero-metric { font-size: 28px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.hero-delta  { font-size: 12px; color: var(--fg-mut); margin-left: 8px; }

/* Login */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-panel { background: var(--bg-panel); border: 1px solid var(--accent); padding: 28px 32px; min-width: 320px; }
.login-panel h1 { color: var(--accent); letter-spacing: 0.2em; font-size: 16px; margin: 0 0 18px 0; font-weight: 700; }
.login-panel input[type="password"] {
  background: var(--bg); border: 1px solid var(--border); color: var(--fg);
  padding: 6px 8px; font: inherit; width: 100%;
}
.login-panel input[type="password"]:focus { outline: none; border-color: var(--accent); }
.login-panel .login-prompt { color: var(--fg-mut); font-size: 11px; margin-bottom: 4px; }
.login-panel button {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  padding: 4px 14px; font: inherit; cursor: pointer; margin-top: 12px;
  letter-spacing: 0.1em;
}
.login-panel button:hover { background: var(--accent); color: var(--bg); }
.login-panel .form-error { color: var(--neg); font-size: 11px; margin-top: 10px; }

/* Refresh button (HTMX) */
.refresh-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--fg-mut); padding: 0 6px; font: inherit; cursor: pointer; font-size: 10px;
}
.refresh-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Theses sidebar */
.theses-layout { display: grid; grid-template-columns: 240px 1fr; gap: 12px; }
@media (max-width: 768px) { .theses-layout { grid-template-columns: 1fr; } }
.theses-sidebar ul { list-style: none; padding: 0; margin: 0; }
.theses-sidebar li { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.theses-sidebar li:hover { background: rgba(255,255,255,0.02); }
.theses-sidebar a { color: var(--fg); display: block; }
.theses-sidebar a.active { color: var(--accent); }
.theses-sidebar h3 { font-size: 10px; color: var(--fg-mut); letter-spacing: 0.12em; margin: 0 0 8px 0; text-transform: uppercase; }

/* Briefings filter bar */
.filter-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.filter-bar select, .filter-bar input {
  background: var(--bg); border: 1px solid var(--border); color: var(--fg);
  padding: 4px 8px; font: inherit;
}
.filter-bar input { flex: 1; }
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--accent); }

/* Error page */
.error-page { padding: 60px 16px; text-align: center; }
.error-code { color: var(--neg); font-size: 48px; }
.error-msg { color: var(--fg-mut); margin-top: 12px; }

/* Legend / methodology block */
.legend dt { color: var(--accent); margin-top: 10px; font-size: 11px; letter-spacing: 0.05em; }
.legend dd { color: var(--fg); margin-left: 0; margin-bottom: 6px; font-size: 11px; }
.legend code { color: var(--warn); background: var(--bg-elev); padding: 1px 4px; }

/* Banner warn (preserved for partial errors) */
.banner-warn {
  border: 1px solid var(--warn); color: var(--warn);
  padding: 4px 8px; font-size: 11px; margin-bottom: 8px;
}

/* Tooltips — CSS-only, hover-triggered */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]:not(.pill):not(.regime-pill):not(th) {
  border-bottom: 1px dotted var(--fg-mut);
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--accent);
  padding: 6px 10px;
  font-size: 11px;
  font-family: inherit;
  white-space: pre-wrap;
  max-width: 360px;
  width: max-content;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  line-height: 1.5;
}
/* Tooltip on right-anchored elements should flip to the left edge */
[data-tooltip].tt-right:hover::after { left: auto; right: 0; }
/* Tooltip for elements near the top of the viewport — display below the trigger */
[data-tooltip].tt-down:hover::after {
  bottom: auto;
  top: calc(100% + 4px);
}

/* ============================================================
   Layout shell : sidebar gauche + contenu central + sidebar droite
   ============================================================ */
.shell {
  display: grid;
  /* Sidebars resserrées 2026-05-19 (220→190 / 260→220) pour gagner ~70px
     au centre sur viewport 1755px (passe main de ~1275px à ~1345px). */
  grid-template-columns: 190px minmax(0, 1fr) 220px;
  min-height: 100vh;
  /* Garde-fou : empêche tout enfant de pousser la grille au-delà du viewport. */
  max-width: 100vw;
  overflow-x: hidden;
}
/* En dessous de 1280px on masque la sidebar droite (poids relatif faible
   sur petit écran ; tout est déjà accessible via les apps). */
@media (max-width: 1280px) {
  .shell { grid-template-columns: 190px minmax(0, 1fr); }
  .right-sidebar { display: none; }
}
@media (max-width: 768px) {
  .shell { grid-template-columns: 1fr; }
}

.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border);
  font-size: 11px;
  /* Flex column pour pousser .sidebar-footer en bas via margin-top:auto
     sans casser le scroll naturel du contenu (groupes accordeon). */
  display: flex;
  flex-direction: column;
}

/* Signature en bas de sidebar : "With <coeur> by <fantome>". Petit, mute,
   pousse en bas via margin-top:auto (le parent .sidebar est flex column). */
.sidebar-footer {
  margin-top: auto;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--fg-mut, #9aa3b2);
  text-align: center;
  letter-spacing: 0.04em;
}
.sb-foot-emoji {
  /* Garde les emojis alignes optiquement avec le texte (le coeur a
     traditionnellement un baseline bas, le fantome un haut bandeau).
     `font-style: normal` au cas ou une regle parente italicize. */
  font-style: normal;
  display: inline-block;
  vertical-align: -1px;
}
.sidebar-brand {
  /* Refonte 2026-05-19 — "Ghostfellah" (mixed case, dégradé blanc→teal) +
     "Corp." en petit dessous. Le fantôme reste à gauche, aligné sur la baseline
     du nom. Flex row pour aligner le fantôme avec le stack vertical. */
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.sidebar-brand .brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.sidebar-brand .brand-name,
.brand-h1 .brand-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  /* Dégradé blanc (haut-gauche) → teal accent (bas-droite). Le -webkit-text-fill-color
     est nécessaire pour Safari/Chrome ; color: transparent est le fallback Firefox. */
  background: linear-gradient(135deg, #ffffff 0%, #e8f5f0 35%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sidebar-brand .brand-tagline,
.brand-h1 .brand-tagline {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-mut);
  margin-top: 4px;
}
/* Variante login : titre plus grand (h1 dédié, panel centré). */
.brand-h1 {
  display: flex;
  align-items: center;
  margin: 0 0 18px;
}
.brand-h1 .brand-name { font-size: 26px; }
.brand-h1 .brand-tagline { font-size: 11px; margin-top: 5px; }

/* Curseur fantôme après le brand (sidebar + login). Le SVG hérite de
   currentColor (donc --accent dans le contexte du brand). Le fantôme
   flotte doucement de gauche à droite (~6px de course, 2.6s aller-retour)
   pour un effet "esprit qui plane" plutôt qu'un blink dur. */
.brand-cursor {
  display: inline-block;
  /* middle = centré sur la x-height du brand : la silhouette du fantôme se
     pose visuellement sur la même ligne que les capitales du texte. */
  vertical-align: middle;
  /* Mis à l'échelle pour matcher le brand 14px (ratio ~×1.27 vs ancien 11px).
     Le fantôme est désormais à gauche du texte → margin-right pour l'espacer. */
  width: 23px;
  height: 26px;
  margin-right: 14px;
  /* Le brand est passé en blanc ; on isole la couleur du fantôme pour qu'il
     conserve son identité teal (currentColor à l'intérieur du SVG). */
  color: var(--accent);
  /* Flottement large (±8px) avec une oscillation verticale légère (±3px)
     déphasée → trajectoire elliptique, effet "esprit qui plane". Le
     margin-left est volontairement augmenté pour que la silhouette ne
     vienne pas mordre le texte sur son swing gauche. */
  animation: brand-float 3s ease-in-out infinite;
  will-change: transform;
}
@keyframes brand-float {
  0%   { transform: translate(-8px,  0px); }
  25%  { transform: translate( 0px, -3px); }
  50%  { transform: translate( 8px,  0px); }
  75%  { transform: translate( 0px,  3px); }
  100% { transform: translate(-8px,  0px); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-cursor { animation: none; }
}
.sidebar-status {
  padding: 4px 14px;
  color: var(--fg-mut);
  font-size: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
}
.sidebar-status .live-stamp { color: var(--accent); }

/* Section headers sidebar gauche — fond teal semi-transparent + liseré
   plein teal, texte blanc. Cohérent avec `.rsb-h` dans la sidebar droite
   (refonte 2026-05-13). */
.sb-section-h {
  display: flex; align-items: center;
  background: rgba(76, 201, 168, 0.22);
  border-left: 2px solid var(--accent);
  color: #ffffff; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 10px;
  padding: 5px 12px;
  margin: 12px 0 4px;
}
.sb-section-h:first-of-type { margin-top: 10px; }

.sb-group {
  border-bottom: 1px solid var(--border);
}
.sb-group-h {
  padding: 6px 14px;
  color: var(--fg-mut);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.sb-group-h:hover { color: var(--fg); }
.sb-group.open > .sb-group-h { color: var(--accent); }
a.sb-group-h, a.sb-group-h:hover { text-decoration: none; }
.sb-group.active > .sb-group-h {
  /* État "page active" → jaune (var(--active)), pour différencier du hover
     qui reste sur l'accent teal. RGB de #e8c84a = 232,200,74. */
  color: var(--active);
  background: rgba(232,200,74,0.10);
  border-left: 2px solid var(--active);
  padding-left: 12px;
}
.sb-group.disabled > .sb-group-h {
  color: var(--fg-mut);
  cursor: default;
  opacity: 0.55;
}
.sb-group.disabled .sb-soon {
  color: var(--warn);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 0 4px;
}
.sb-group-items {
  display: none;
  padding: 2px 0 6px 0;
}
.sb-group.open > .sb-group-items { display: block; }

.sb-item {
  display: block;
  padding: 3px 14px 3px 26px;
  color: var(--fg);
  border-left: 2px solid transparent;
}
.sb-item:hover {
  color: var(--accent);
  text-decoration: none;
  background: rgba(255,255,255,0.02);
}
.sb-item.active {
  color: var(--active);
  border-left-color: var(--active);
  padding-left: 24px;
  background: rgba(232,200,74,0.08);
}

.shell-main {
  padding: 14px 18px;
  max-width: 1400px;
  /* `margin: 0 auto` centre horizontalement le contenu dans la colonne
     centrale de la grille (1fr) — sans ça le contenu collait à gauche
     dès que la colonne était plus large que max-width (typique en >1500px
     de viewport avec right-sidebar masquée).
     Historique de max-width :
     - 2026-05-12 : 1100px (demande Cédric "autant d'espace à gauche qu'à droite").
     - 2026-05-19 : 1400px (panel central élargi — trop de marge gaspillée sur
       grand écran après suppression des sections home Catalyseurs / Signaux). */
  margin-left: auto;
  margin-right: auto;
  /* `width: 100%` n'est PAS nécessaire ici car .shell-main est en grid item
     dans une cellule 1fr — il prend déjà toute la largeur jusqu'à max-width. */
}

.logout-bar {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 10px;
}
.logout-bar form { margin: 0; }
.logout-bar button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-mut);
  padding: 2px 8px;
  font: inherit;
  cursor: pointer;
  width: 100%;
}
.logout-bar button:hover { color: var(--fg); border-color: var(--fg-mut); }

/* ============================================================
   Right sidebar (3 panels : Watchlist / Next 72h / Regime Pulse)
   ============================================================ */
.right-sidebar {
  background: var(--bg);
  border-left: 1px solid var(--border);
  font-size: 11px;
  padding: 10px 0;
  /* 2026-05-19 — après resserrement de la sidebar (260→220px), un widget
     interne (sparkline ou pre) débordait de ~9px et créait un scroll horizontal
     global. Clamp défensif : tout enfant qui voudrait dépasser est tronqué. */
  min-width: 0;
  overflow-x: hidden;
}
.rsb-panel { padding: 0 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 10px; min-width: 0; overflow-x: hidden; }
.rsb-panel > * { max-width: 100%; }
.rsb-panel pre,
.rsb-panel .sparkline,
.rsb-panel table { max-width: 100%; overflow-x: hidden; }
.rsb-panel:last-child { border-bottom: none; margin-bottom: 0; }
.rsb-h {
  display: flex; justify-content: space-between; align-items: center;
  /* Fond teal semi-transparent — laisse passer la couleur de la sidebar
     en dessous pour rester dans l'ambiance "terminal". rgba(--accent, 0.22)
     donne une teinte subtile sur le bg sombre ; le bord gauche en plein teal
     marque clairement le titre sans couper visuellement le panel. */
  background: rgba(76, 201, 168, 0.22);
  border-left: 2px solid var(--accent);
  color: #ffffff; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 10px;
  padding: 4px 10px;
  margin: 0 -12px 8px;
}
.rsb-link { color: var(--fg-mut); font-size: 10px; }
.rsb-link:hover { color: var(--accent); text-decoration: none; }
.rsb-empty { color: var(--fg-mut); font-style: italic; font-size: 11px; padding: 4px 0; }
.rsb-foot {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dotted var(--border);
  color: var(--fg-mut); font-size: 10px;
}

.rsb-table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.rsb-table td { padding: 2px 4px; border-bottom: 1px solid var(--border); }
.rsb-table tr:last-child td { border-bottom: none; }
.rsb-table tr:hover td { background: rgba(255,255,255,0.02); }
.rsb-ticker { color: var(--fg); font-weight: 600; }
.rsb-ticker:hover { color: var(--accent); text-decoration: none; }
.rsb-num { text-align: right; white-space: nowrap; }
.rsb-status { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
.rsb-status-open { color: var(--accent); }
.rsb-status-exited { color: var(--fg-mut); }
.rsb-cat { color: var(--fg-mut); font-size: 10px; }
.rsb-pos { color: var(--pos); }
.rsb-neg { color: var(--neg); }
.rsb-zero { color: var(--fg-mut); }
.rsb-mut { color: var(--fg-mut); }

.rsb-pulse { list-style: none; padding: 0; margin: 0; }
.rsb-pulse li {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 0; border-bottom: 1px dotted var(--border);
}
.rsb-pulse li:last-child { border-bottom: none; }
.rsb-pulse-k {
  display: inline-block; min-width: 36px;
  color: var(--fg-mut); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
}
/* Mapping verdict crypto → couleur de pill. Capitulation/bottom = zone
   d'achat (offensif côté UI), top/euphorie = à éviter, neutre = jaune.
   Conservé pour rétro-compat (ailleurs dans l'app). */
.rsb-crypto-capitulation { color: var(--pos); }
.rsb-crypto-bottom       { color: var(--pos); }
.rsb-crypto-neutre       { color: var(--warn); }
.rsb-crypto-top          { color: var(--neg); }
.rsb-crypto-euphorie     { color: var(--neg); }

/* Sidebar droite — pill BTC condensée (3 états, rework /onchain 2026-05-12).
   Mêmes couleurs que rsb-crypto-* mais avec sémantique simplifiée. */
.rsb-btc-buy  { color: var(--pos); }
.rsb-btc-sell { color: var(--neg); }
.rsb-btc-wait { color: var(--fg-mut); }

/* Sous-titre inline dans un panel (refonte 2026-05-13).
   Utilisé pour les sections internes — "Catalysts 72h" dans WATCHLIST,
   "Bottom/Top" dans ONCHAIN, "Alerts/COT" dans COMMODITIES. Plus discret
   qu'un titre de panel pour ne pas alourdir visuellement. */
.rsb-subhead {
  margin: 8px 0 3px;
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-mut); font-weight: 600;
  border-top: 1px dotted var(--border); padding-top: 6px;
}
.rsb-subhead:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* Table crypto sidebar (BOTTOM ACCUM / TOP DISTRI) — 4 cols compactes
   alignées sur la table /onchain. Les valeurs Pos52w + Mcap sont en
   font plus petite pour rentrer dans la largeur sidebar. */
.rsb-crypto-tbl th {
  font-size: 8px; color: var(--fg-mut); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 4px; border-bottom: 1px solid var(--border);
}
.rsb-crypto-tbl td { font-size: 10px; }
.rsb-crypto-tbl td.rsb-mut { font-size: 9px; }

/* ============================================================
   Morning brief (2026-06-03) : header conviction en tête de sidebar,
   toggle Focus/Complet, fraîcheur as-of.
   ============================================================ */

/* Barre d'outils en tête de sidebar — bouton Focus/Complet. */
.rsb-toolbar { padding: 0 12px 8px; }
.rsb-focus-btn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-mut);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; cursor: pointer;
}
.rsb-focus-btn:hover { color: var(--fg); border-color: var(--fg-mut); }
/* Le label affiché dépend du mode : par défaut "Complet" (off), en mode Focus
   on montre "Focus" (on). */
.rsb-focus-btn .rsb-focus-on { display: none; }
.rsb-focus-btn .rsb-focus-off { display: inline; }
.rsb-focus-mode .rsb-focus-btn { color: var(--accent); border-color: var(--accent); }
.rsb-focus-mode .rsb-focus-btn .rsb-focus-on { display: inline; }
.rsb-focus-mode .rsb-focus-btn .rsb-focus-off { display: none; }

/* Mode Focus : on masque les panels secondaires et on révèle le panel FOCUS.
   Hors mode Focus : panel FOCUS masqué, secondaires visibles. */
.rsb-focus-only { display: none; }
.rsb-focus-mode .rsb-secondary { display: none; }
.rsb-focus-mode .rsb-focus-only { display: block; }

/* Header conviction — miroir compact de la .conviction-card de la home. */
.rsb-conviction { border-left: 3px solid var(--accent); }
.rsb-cv-main {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 2px;
}
.rsb-cv-score {
  font-size: 22px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rsb-cv-regime {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.rsb-cv-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 4px;
  font-size: 9px; color: var(--fg-mut);
}
/* Jauge bidirectionnelle autour de 0 (50% = neutre). */
.rsb-cv-gauge {
  position: relative; height: 5px; margin: 6px 0 2px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
}
.rsb-cv-gauge .rsb-cv-zero {
  position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
  background: var(--fg-mut);
}
.rsb-cv-fill { position: absolute; top: 0; bottom: 0; }
.rsb-cv-fill.rsb-cv-right { left: 50%; }
.rsb-cv-fill.rsb-cv-left  { right: 50%; }
/* Couleurs régime — réutilise les hints de conviction_index.regime_class. */
.conviction-strong-pos .rsb-cv-score, .conviction-strong-pos .rsb-cv-regime { color: var(--pos); }
.conviction-strong-pos .rsb-cv-fill { background: var(--pos); }
.conviction-mid-pos .rsb-cv-score, .conviction-mid-pos .rsb-cv-regime { color: var(--pos); opacity: 0.85; }
.conviction-mid-pos .rsb-cv-fill { background: var(--pos); opacity: 0.7; }
.conviction-strong-neg .rsb-cv-score, .conviction-strong-neg .rsb-cv-regime { color: var(--neg); }
.conviction-strong-neg .rsb-cv-fill { background: var(--neg); }
.conviction-mid-neg .rsb-cv-score, .conviction-mid-neg .rsb-cv-regime { color: var(--neg); opacity: 0.85; }
.conviction-mid-neg .rsb-cv-fill { background: var(--neg); opacity: 0.7; }
.conviction-neutral .rsb-cv-score, .conviction-neutral .rsb-cv-regime { color: var(--warn); }
.conviction-neutral .rsb-cv-fill { background: var(--warn); opacity: 0.6; }

/* Pied de sidebar — indicateur de fraîcheur "as-of HH:MM". */
.rsb-asof {
  padding: 6px 12px 2px;
  font-size: 9px; color: var(--fg-mut); letter-spacing: 0.06em;
  text-align: right; font-family: 'JetBrains Mono', monospace;
}

/* ────────────────────────────────────────────────────────────────────────────
   Mode Focus (/focus) — morning brief 2026-06-10. Page épurée : brief du jour,
   score conviction en gros + sparkline 14j, signaux forts. Lisibilité : les
   petites polices restent en --fg-mut / --fg-sub (≥ 6:1 sur --bg), jamais de
   gris sombre en dur (exigence Cédric 2026-05-17).
   ──────────────────────────────────────────────────────────────────────────── */
.focus-page { max-width: 860px; margin: 0 auto; padding: 18px 16px 32px; }
.focus-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.focus-title { color: var(--accent); font-size: 18px; letter-spacing: 0.2em; margin: 0; }
.focus-date { color: var(--fg-mut); font-size: 11px; letter-spacing: 0.08em; }
.focus-back { margin-left: auto; color: var(--fg-mut); font-size: 11px; }
.focus-back:hover { color: var(--accent); }

.focus-page .panel { margin-bottom: 14px; }
.focus-empty { color: var(--fg-mut); font-size: 12px; }

/* Conviction : score en très gros, regime + alignement à côté, sparkline 14j. */
.focus-cv-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 8px 0 4px; }
.focus-cv-score { font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg); }
.focus-cv-meta { display: flex; flex-direction: column; gap: 4px; }
.focus-cv-regime { font-size: 14px; letter-spacing: 0.1em; font-weight: 700; }
.focus-cv-sub { font-size: 11px; color: var(--fg-mut); }
.focus-cv-spark { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.focus-cv-spark .spark { font-size: 16px; letter-spacing: 1px; color: var(--accent); }
/* Couleur du score/régime — réutilise les hints conviction-* de la home. */
.conviction-strong-pos .focus-cv-score, .conviction-strong-pos .focus-cv-regime { color: var(--pos); }
.conviction-mid-pos .focus-cv-score,    .conviction-mid-pos .focus-cv-regime    { color: var(--pos); opacity: 0.9; }
.conviction-strong-neg .focus-cv-score, .conviction-strong-neg .focus-cv-regime { color: var(--neg); }
.conviction-mid-neg .focus-cv-score,    .conviction-mid-neg .focus-cv-regime    { color: var(--neg); opacity: 0.9; }
.conviction-neutral .focus-cv-score,    .conviction-neutral .focus-cv-regime    { color: var(--warn); }

/* Brief markdown rendu (brief_html — h2/h3/ul/p/strong/code uniquement). */
.focus-brief-body { font-size: 13px; line-height: 1.6; color: var(--fg); }
.focus-brief-body h2 { font-size: 14px; color: var(--accent); letter-spacing: 0.1em; margin: 4px 0 10px; }
.focus-brief-body h3 { font-size: 12px; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin: 14px 0 4px; }
.focus-brief-body ul { margin: 4px 0; padding-left: 18px; }
.focus-brief-body li { margin: 2px 0; }
.focus-brief-body code { color: var(--warn); font-size: 12px; }
.focus-brief-body strong { color: var(--fg); }

/* Signaux forts — liste compacte, badge kind coloré par famille. */
.focus-signal-list { list-style: none; margin: 6px 0 0; padding: 0; }
.focus-signal-list li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.focus-signal-list li:last-child { border-bottom: none; }
.focus-sig-kind { font-size: 10px; letter-spacing: 0.1em; min-width: 86px; color: var(--fg-mut); }
.focus-sig-kind.kind-iw { color: var(--pos); }
.focus-sig-kind.kind-forex { color: var(--accent); }
.focus-sig-kind.kind-commodity { color: var(--warn); }
.focus-sig-kind.kind-onchain { color: var(--neg); }
.focus-sig-label { font-size: 13px; font-weight: 700; color: var(--fg); }
.focus-sig-detail { font-size: 11px; color: var(--fg-mut); margin-left: auto; }