/* =====================================================================
   ALCAPA — feuille de style unique.

   Règles tenues du début à la fin (voir CLAUDE.md) :
     - aucune icône décorative : les seuls éléments graphiques sont des données ;
     - une seule couleur d'accent — l'or Alpaca ;
     - le vert et le rouge sont RÉSERVÉS au P&L — jamais un bouton, un badge
       ou une bordure ;
     - chiffres en tabular-nums, alignés à droite ;
     - densité élevée, mais l'accueil reste un poste de pilotage : quatre
       chiffres, une courbe, les positions. L'analyse vit ailleurs.

   L'or ne peut pas servir de couleur de texte sur fond clair — illisible.
   D'où deux variables distinctes :
     --accent        couleur LISIBLE sur le fond courant (liens, courbes)
     --accent-solid  l'or franc, réservé aux aplats (boutons, barres)
     --accent-ink    la couleur du texte POSÉ sur un aplat d'or
   ===================================================================== */

/* --- Palette claire (par défaut) ----------------------------------- */
:root {
  --bg:            #f4f4f2;
  --surface:       #ffffff;
  --surface-alt:   #faf9f6;
  --surface-sunk:  #eeece7;
  --border:        #ddd9d1;
  --border-strong: #c2bcb0;

  --text:          #16181c;
  --text-dim:      #5b5f66;
  --text-faint:    #888d95;

  --accent:        #8a6200;
  --accent-solid:  #ffc832;
  --accent-ink:    #1a1c20;
  --accent-soft:   #fdf3d8;

  --pnl-pos:       #157347;
  --pnl-neg:       #b02a20;
  --pnl-pos-bg:    rgba(21, 115, 71, 0.10);
  --pnl-neg-bg:    rgba(176, 42, 32, 0.10);

  --grid:          #e9e6df;
  --shadow:        0 1px 2px rgba(16, 20, 28, 0.06);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  --radius: 3px;

  /* Aplat chaud — reserve a la carte de capital. L'or est identique dans
     les deux themes : un aplat se lit pareil sur fond clair et sombre,
     ces jetons ne sont donc definis qu'une fois, volontairement. */
  --warm-from: #ffd964;
  --warm-to:   #f2a900;
  --warm-ink:  #241c00;
  --warm-dim:  rgba(36, 28, 0, 0.62);
  --warm-line: rgba(36, 28, 0, 0.20);
}

/* --- Palette sombre — les couleurs Alpaca ---------------------------- */
:root[data-theme="dark"] {
  --bg:            #0b0d10;
  --surface:       #14171b;
  --surface-alt:   #191d22;
  --surface-sunk:  #0f1216;
  --border:        #252a31;
  --border-strong: #363d46;

  --text:          #e2e4e8;
  --text-dim:      #949aa4;
  --text-faint:    #6b727c;

  --accent:        #ffc832;
  --accent-solid:  #ffc832;
  --accent-ink:    #14171b;
  --accent-soft:   #2a2415;

  --pnl-pos:       #3fa96d;
  --pnl-neg:       #d15a4e;
  --pnl-pos-bg:    rgba(63, 169, 109, 0.12);
  --pnl-neg-bg:    rgba(209, 90, 78, 0.12);

  --grid:          #1e232a;
  --shadow:        none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0b0d10;
    --surface:       #14171b;
    --surface-alt:   #191d22;
    --surface-sunk:  #0f1216;
    --border:        #252a31;
    --border-strong: #363d46;

    --text:          #e2e4e8;
    --text-dim:      #949aa4;
    --text-faint:    #6b727c;

    --accent:        #ffc832;
    --accent-solid:  #ffc832;
    --accent-ink:    #14171b;
    --accent-soft:   #2a2415;

    --pnl-pos:       #3fa96d;
    --pnl-neg:       #d15a4e;
    --pnl-pos-bg:    rgba(63, 169, 109, 0.12);
    --pnl-neg-bg:    rgba(209, 90, 78, 0.12);

    --grid:          #1e232a;
    --shadow:        none;
  }
}

/* --- Base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 { margin: 0; font-weight: 600; }

img, svg { max-width: 100%; }

/* Une colonne de chiffres se dimensionne sur son contenu, jamais sur la
   place disponible. Sans cette règle, un tableau de six colonnes étale ses
   nombres sur toute la largeur de l'écran : l'œil doit alors parcourir
   quinze centimètres pour relier une ligne à sa valeur. `width: 1%` force
   le navigateur à réduire la colonne au minimum, et la colonne de texte
   absorbe le reste. */
table.data th.num, table.data td.num {
  width: 1%;   /* colonne chiffree : au plus juste */
}

/* Tous les chiffres du système : chasse fixe, alignement à la virgule.
   Les cartes font exception : un chiffre seul sous son libellé se lit
   mieux aligné avec lui qu'accroché au bord droit. */
.num, td.num, th.num, .metric-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}

/* --- Coloration P&L — usage exclusif du vert et du rouge ------------ */
.pnl-pos  { color: var(--pnl-pos); }
.pnl-neg  { color: var(--pnl-neg); }
.pnl-flat { color: var(--text-dim); }

/* =====================================================================
   En-tête
   ===================================================================== */
/* =====================================================================
   Coquille : barre laterale fixe + zone de travail
   ===================================================================== */
.shell {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.page-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le tiroir n'existe que sur petit ecran. */
.side-toggle { display: none; }
.side-veil { display: none; }

.brand {
  display: block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--text);
  white-space: nowrap;
  padding: 14px 16px 12px;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

/* Le seul aplat d'or permanent : la marque. */
.brand::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 13px;
  background: var(--accent-solid);
  margin-right: 8px;
  vertical-align: -1px;
  border-radius: 1px;
}


.topbar-spacer { flex: 1; }

/* Marqueur d'état : un point et du texte, pas d'icône. */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-dim);
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  white-space: nowrap;
}

.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: none;
}
.status-dot.is-live    { background: var(--accent-solid); }
.status-dot.is-idle    { background: var(--text-faint); }
.status-dot.is-critical{ background: var(--pnl-neg); }

.mode-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
}
.mode-tag.is-live {
  border-color: var(--pnl-neg);
  color: var(--pnl-neg);
}

/* --- Navigation laterale -------------------------------------------- */
.side-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--border);
}
.side-mode .status-chip { font-size: 11px; padding: 2px 7px; }

.side-nav { padding: 8px 0; flex: 1; }

.side-group {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 12px 16px 5px;
}
.side-group:first-child { padding-top: 4px; }

.side-nav a {
  display: block;
  padding: 6px 16px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.side-nav a:hover {
  color: var(--text);
  background: var(--surface-alt);
  text-decoration: none;
}
.side-nav a.active {
  color: var(--text);
  font-weight: 500;
  border-left-color: var(--accent-solid);
  background: var(--surface-alt);
}

.side-foot {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
}
.side-actions {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}
.side-actions .btn { flex: 1; }

/* --- Contenu -------------------------------------------------------- */
.wrap {
  max-width: 1720px;
  padding: 16px 18px 32px;
  flex: 1;
}

.section { margin-bottom: 16px; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}

.section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.section-note {
  font-size: 11.5px;
  color: var(--text-faint);
  max-width: 76ch;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel-pad { padding: 12px 14px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* =====================================================================
   Bandeau de métriques
   ===================================================================== */
.metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.metrics.cols-4 { grid-template-columns: repeat(4, 1fr); }
.metrics.cols-6 { grid-template-columns: repeat(6, 1fr); }

.metric {
  padding: 10px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.metric-label {
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-value {
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px;
  text-align: left;
  letter-spacing: -0.01em;
}

.metric-sub {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Accueil : quatre chiffres qui doivent se lire à deux mètres. */

/* Jauge de drawdown : la seule barre de progression du système. */
.gauge {
  height: 4px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.gauge-fill {
  height: 100%;
  min-width: 2px;
  background: var(--pnl-neg);
  transition: width 0.2s ease;
}

/* =====================================================================
   Tableaux
   ===================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

table.data th {
  text-align: left;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  white-space: nowrap;
}

table.data td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--grid);
  vertical-align: top;
}

table.data tbody tr:hover { background: var(--surface-alt); }
table.data tbody tr:last-child td { border-bottom: none; }

.sym {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.muted     { color: var(--text-dim); }
.faint     { color: var(--text-faint); }
.small     { font-size: 11.5px; }
.mono      { font-family: var(--font-mono); }
.nowrap    { white-space: nowrap; }
.right     { text-align: right; }

.empty {
  padding: 28px 14px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12.5px;
}

/* Étiquettes neutres — jamais colorées en vert ou rouge. */
.tag {
  display: inline-block;
  font-size: 10.5px;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-dim);
  white-space: nowrap;
}
.tag-strong { color: var(--text); border-color: var(--text-faint); }

/* Sévérité : seule exception au monopole du P&L sur le rouge — une règle
   de risque déclenchée est, elle aussi, une perte d'argent. */
.sev-critical { color: var(--pnl-neg); border-color: var(--pnl-neg); }
.sev-warning  { color: var(--text); border-color: var(--border-strong); }
.sev-info     { color: var(--text-dim); }

/* Un tableau à peu de colonnes ne doit pas s'étirer sur toute la largeur. */
.table-fit table.data { width: auto; min-width: min(100%, 900px); }

/* =====================================================================
   Graphiques
   ===================================================================== */
.chart-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.chart-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  flex-wrap: wrap;
}

.chart-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.chart-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-faint);
  margin-left: auto;
  font-family: var(--font-mono);
  flex-wrap: wrap;
}
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { width: 10px; height: 2px; display: inline-block; }

.chart-canvas { width: 100%; }

/* Histogramme des R-multiples — SVG maison */
.hist { width: 100%; display: block; }
.hist-bar-loss { fill: var(--pnl-neg); }
.hist-bar-win  { fill: var(--pnl-pos); }
.hist-axis     { stroke: var(--border-strong); stroke-width: 1; }
.hist-grid     { stroke: var(--grid); stroke-width: 1; }
.hist-label    { fill: var(--text-faint); font-size: 9.5px; font-family: var(--font-mono); }
.hist-zero     { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 2 2; }

/* Heatmap calendaire */
.heatmap { display: block; width: 100%; min-width: 640px; }
.hm-cell { stroke: var(--surface); stroke-width: 1.5; }
.hm-label { fill: var(--text-faint); font-size: 9px; font-family: var(--font-mono); }

/* =====================================================================
   Formulaires et boutons
   ===================================================================== */
.btn {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 13px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-alt); border-color: var(--text-faint); }
.btn:active { transform: translateY(0.5px); }

/* L'or en aplat, avec un texte sombre par-dessus. */
.btn-primary {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  filter: brightness(1.06);
}

.btn-sm { padding: 3px 9px; font-size: 11px; }

input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 6px 9px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  width: 100%;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

label.field-label {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
/* Une liste deroulante se dimensionne sur son contenu, jamais sur la place
   disponible : quatre menus etires sur 1 300 px pour y lire « tous »
   occupent une bande entiere sans rien apprendre. */
.filters .field { min-width: 120px; flex: 0 1 168px; }
.filters .field select,
.filters .field input { width: 100%; }

/* Les boutons ferment la barre a droite, groupes. `:first-of-type`
   n'aurait pas suffi : « Filtrer » est un <button> et « Reinitialiser »
   un <a>, chacun premier de SON type — les deux recevaient la marge et
   se retrouvaient aux deux bouts de la barre. */
.filters button.btn { margin-left: auto; }
.filters button.btn ~ .btn { margin-left: 0; }

/* --- Page de configuration ------------------------------------------ */
.settings { display: flex; flex-direction: column; }

.setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--grid);
  align-items: start;
}
.setting:last-child { border-bottom: none; padding-bottom: 0; }
.setting:first-child { padding-top: 0; }

.setting-label label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-right: 6px;
}

.setting-help {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 3px;
  line-height: 1.5;
}

.setting-state {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
}
.switch input { width: auto; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--grid);
  flex-wrap: wrap;
}
.check-row:last-of-type { border-bottom: none; }

.secret-clear { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Messages ------------------------------------------------------- */
.notice {
  padding: 9px 13px;
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 12.5px;
  margin-bottom: 14px;
}
.notice-error { border-left-color: var(--pnl-neg); }
.notice-ok    { border-left-color: var(--accent-solid); }

/* Bandeau d'alerte : quelque chose demande une décision. */
.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--pnl-neg);
  border-radius: var(--radius);
  background: var(--pnl-neg-bg);
  font-size: 12.5px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.banner-title { font-weight: 600; color: var(--pnl-neg); }

/* =====================================================================
   Page de connexion
   ===================================================================== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-box { width: 100%; max-width: 330px; }
.login-brand {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.20em;
  margin-bottom: 3px;
}
.login-sub {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 22px;
}
.login-field { margin-bottom: 12px; }

/* --- Pagination ----------------------------------------------------- */
.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.pager a {
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
}
.pager a:hover { background: var(--surface-alt); text-decoration: none; }
.pager .pager-spacer { flex: 1; }

/* --- Détail clé/valeur ---------------------------------------------- */
.kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 16px;
  font-size: 12px;
}
.kv dt { color: var(--text-faint); }
.kv dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

details.audit summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--accent);
  list-style: none;
}
details.audit summary::-webkit-details-marker { display: none; }
details.audit summary::before { content: "▸ "; }
details.audit[open] summary::before { content: "▾ "; }
details.audit > div { padding: 8px 0 4px 14px; }


/* --- Pied de page ---------------------------------------------------- */
.footnote {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.7;
}

/* =====================================================================
   Adaptation aux petits écrans

   Le dashboard sert à décider vite, y compris depuis un téléphone en
   déplacement. Rien n'est masqué : tout se réorganise.
   ===================================================================== */


/* Sous cette largeur, la barre laterale coute plus qu'elle ne rapporte :
   elle devient un tiroir, et la page recupere toute la largeur. */







/* --- Accueil : la carte de capital ----------------------------------
   Le seul aplat chaud de l'application, et il ne sert qu'a une chose :
   dire combien il y a, et combien a ete gagne ou perdu depuis le depart.
   Le vert et le rouge sont illisibles sur l'or — le signe est donc porte
   par le mot (« gagne » / « perdu »), pas par la couleur.
   -------------------------------------------------------------------- */
.home-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.capital-card {
  background: linear-gradient(135deg, var(--warm-from) 0%, var(--warm-to) 100%);
  min-height: 0;
  border: 1px solid var(--warm-line);
  border-radius: var(--radius);
  color: var(--warm-ink);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
}

.capital-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warm-dim);
}

.capital-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.capital-delta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.capital-delta-word {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--warm-dim);
}
.capital-delta-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
}
.capital-delta-pct {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--warm-dim);
}

/* La regle : origine au centre, capital courant de part et d'autre. */
.capital-rail {
  position: relative;
  height: 14px;
  margin: 14px 0 12px;
}
.capital-rail-track {
  position: absolute;
  top: 6px;
  left: 0; right: 0;
  height: 2px;
  background: var(--warm-line);
}
.capital-rail-origin {
  position: absolute;
  top: 1px;
  left: 50%;
  width: 1px;
  height: 12px;
  background: var(--warm-ink);
  opacity: 0.45;
}
.capital-rail-mark {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--warm-ink);
  border: 2px solid var(--warm-from);
}

.capital-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--warm-line);
}
.capital-facts div { min-width: 0; }
.capital-facts dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warm-dim);
}
.capital-facts dd {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
}

/* --- Accueil : les trois cartes de contexte -------------------------- */
/* Les trois cartes de contexte vivent maintenant dans la grille de tete,
   chacune dans sa colonne : plus de conteneur intermediaire. */
.home-side { display: contents; }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 15px 12px;
  display: flex;
  flex-direction: column;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: left;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2px;
}
.stat-of {
  color: var(--text-faint);
  font-size: 14px;
  font-weight: 400;
  margin-left: 2px;
}
.stat-sub {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 3px;
}
.stat-card .gauge { margin-top: 7px; }

/* Les lignes de detail poussent vers le bas de la carte : les quatre
   cartes de tete se terminent alors sur la meme ligne, sans qu'aucune
   n'ait besoin d'etre etiree sur du vide. */
.stat-facts {
  display: grid;
  gap: 3px 10px;
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
}
.stat-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.stat-facts dt { color: var(--text-faint); white-space: nowrap; }
.stat-facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Accueil : les positions, graduees en R -------------------------- */
.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 12px;
}

.pos-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px 10px;
}

.pos-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pos-head .sym { font-size: 15px; }
.pos-pl {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.pos-pl-pct {
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.75;
  margin-left: 4px;
}

/* La regle des R : bord gauche le stop, centre l'entree, bord droit +1 R.
   Toutes les cartes partagent cette echelle — c'est ce qui les rend
   comparables entre elles malgre des prix sans rapport. */
.pos-rail {
  position: relative;
  height: 12px;
  margin: 12px 0 4px;
}
.pos-rail-track {
  position: absolute;
  top: 5px;
  left: 0; right: 0;
  height: 2px;
  background: var(--surface-sunk);
  border-left: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
}
.pos-rail-fill {
  position: absolute;
  top: 5px;
  height: 2px;
}
.pos-rail-fill.is-pos { background: var(--pnl-pos); }
.pos-rail-fill.is-neg { background: var(--pnl-neg); }
.pos-rail-entry {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 12px;
  background: var(--border-strong);
}
.pos-rail-mark {
  position: absolute;
  top: 1px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}
.pos-rail-mark.is-pos { background: var(--pnl-pos); }
.pos-rail-mark.is-neg { background: var(--pnl-neg); }

.pos-rail-axis {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pos-r {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.pos-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.pos-facts div { min-width: 0; }
.pos-facts dt {
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
}
.pos-facts dd {
  margin: 1px 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

.pos-foot {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-faint);
}

/* --- Plan de seance --------------------------------------------------- */
.plan-card.is-vetoed { opacity: 0.68; }

.plan-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.plan-kv { gap: 6px 16px; }
.plan-kv dt { white-space: nowrap; }
.plan-prose {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

.plan-veto {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--surface-sunk);
  border-left: 2px solid var(--border-strong);
  font-size: 12px;
}

.veto-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.veto-form select,
.veto-form input[type="text"] { width: 100%; }
.veto-form > div { min-width: 180px; }

.plan-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.plan-col-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}
.plan-cols .plan-prose { margin: 0; }

@media (max-width: 900px) {
  .plan-cols { grid-template-columns: 1fr; gap: 10px; }
}

/* --- Documentation ---------------------------------------------------- */
/* Les explications ne tiennent plus sous les champs : elles vivent sur la
   page de documentation, ou elles ont la place de respirer. Le lien qui y
   mene reste discret — il ne doit pas peser plus que le reglage. */
.setting-doc {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-faint);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong);
}
.setting-doc:hover { color: var(--accent); border-bottom-color: var(--accent); }

.doc-intro p { margin: 0 0 8px; max-width: 68ch; line-height: 1.6; }
.doc-intro p:last-child { margin-bottom: 0; }

.doc-block { line-height: 1.65; }
.doc-block h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
}
.doc-block h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 20px 0 8px;
}
.doc-block p { margin: 0 0 10px; max-width: 74ch; }
.doc-block ol, .doc-block ul { margin: 0 0 10px; padding-left: 20px; max-width: 74ch; }
.doc-block li { margin-bottom: 6px; }

.doc-table { margin: 4px 0 12px; }
.doc-prose {
  font-family: var(--font-sans);
  line-height: 1.55;
  max-width: 62ch;
}

.doc-warning {
  border-left: 2px solid var(--accent-solid);
  background: var(--accent-soft);
  padding: 8px 12px;
  margin: 12px 0;
}


/* --- Note de conformite ---------------------------------------------- */
.score-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.score-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.score-summary-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  margin-top: 2px;
}
.score-summary-value .faint { font-size: 14px; font-weight: 400; }
.score-summary-sub {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 52ch;
}
.score-summary .gauge { margin-top: 6px; }

tr.score-group td {
  background: var(--surface-sunk);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  padding-top: 8px;
  padding-bottom: 8px;
}
.score-detail {
  line-height: 1.5;
  max-width: 62ch;
  margin-top: 3px;
}


/* --- Radar de marche --------------------------------------------------
   Trois graphiques miniatures, et tous les trois sont des DONNEES : la
   courbe des trente dernieres seances, la position du RSI sur son echelle,
   le seuil de declenchement. Rien d'ornemental n'entre dans ce tableau.
   ---------------------------------------------------------------------- */
.radar th.sortable { cursor: pointer; user-select: none; }
.radar th.sortable:hover { color: var(--text); }
.radar th.is-sorted { color: var(--text); }
.radar th.is-sorted::after {
  content: "\2007\2193";           /* fleche : un etat de tri, pas une decoration */
  font-size: 10px;
  opacity: 0.7;
}
.radar th[data-dir="asc"]::after { content: "\2007\2191"; }

.radar td { vertical-align: middle; }
.radar .sym a { color: var(--text); font-weight: 500; }
.radar .sym a:hover { color: var(--accent); }

.spark-cell { width: 72px; padding-right: 4px; }
.spark {
  display: block;
  width: 64px;
  height: 20px;
  overflow: visible;
}
.spark polyline {
  fill: none;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.spark.is-pos polyline { stroke: var(--pnl-pos); }
.spark.is-neg polyline { stroke: var(--pnl-neg); }

/* Jauge de RSI : l'echelle 0-100, le seuil, et ou l'on se trouve. Lire
   « 27,0 » ne dit rien ; voir le point a deux millimetres du seuil, si. */
.rsi-col { width: 132px; white-space: nowrap; }
.rsi-val {
  display: inline-block;
  width: 34px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  text-align: right;
}
.rsi-bar {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 12px;
  margin-left: 8px;
  vertical-align: -2px;
}
.rsi-bar::before {
  content: "";
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
}
.rsi-seuil {
  position: absolute;
  top: 1px;
  width: 1px;
  height: 10px;
  background: var(--border-strong);
}
.rsi-mark {
  position: absolute;
  top: 3px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--text-faint);
}
.rsi-mark.is-under { background: var(--accent); }

/* Canal des vingt seances : ou se situe le cours entre son plus bas et son
   plus haut recents. Le RSI dit la vitesse de la baisse, celui-ci dit
   jusqu'ou elle est allee — les deux ensemble se lisent d'un coup d'oeil. */
.canal-col { width: 104px; white-space: nowrap; }
.canal-bar {
  position: relative;
  display: inline-block;
  width: 62px;
  height: 12px;
  vertical-align: -2px;
}
.canal-bar::before {
  content: "";
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
}
.canal-mark {
  position: absolute;
  top: 3px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--text-faint);
}
.canal-val {
  display: inline-block;
  width: 28px;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: right;
}

/* Des largeurs fixes sur les colonnes chiffrees : sans elles, le navigateur
   repartit la place disponible a parts egales et six nombres se retrouvent
   etales sur toute la page, illisibles a force d'etre espaces. */
.radar th.num, .radar td.num { width: 84px; }
.radar .sym { width: 110px; }

/* L'état tient sur son étiquette ; c'est la courbe qui profite de la place
   restante. Une place libre dans un tableau doit revenir à une donnée, pas
   au vide. */
.radar .etat-col { width: 1%; white-space: nowrap; }
.radar .spark-cell { width: auto; min-width: 90px; padding-right: 12px; }
.radar .spark { width: 100%; min-width: 64px; }

.tag.etat-indisponible  { color: var(--text-faint); }
.tag.etat-signal        { color: var(--text); border-color: var(--accent); }
.tag.etat-approche      { color: var(--text-dim); border-color: var(--border-strong); }
.tag.etat-hors_tendance { color: var(--text-faint); }

.filters .btn.is-on {
  color: var(--text);
  border-color: var(--accent);
}

.chart-box.is-empty .empty { padding: 14px; }

/* =====================================================================
   Adaptations aux petits écrans

   CES BLOCS RESTENT LES DERNIERS DU FICHIER, avant l'impression.

   À spécificité égale, c'est la dernière règle qui gagne : un composant
   déclaré après eux annulerait silencieusement sa propre version mobile.
   C'est exactement ce qui s'était produit — la page débordait sur
   téléphone alors que la règle qui l'en empêchait existait, vingt lignes
   trop haut.

   Tout nouveau composant se déclare AU-DESSUS de cette section.
   ===================================================================== */

@media (max-width: 1400px) {
  .metrics { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1400px) {
  .metrics.cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1080px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .home-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capital-card { grid-column: 1 / -1; }
  .setting { grid-template-columns: 1fr; gap: 8px; }
  .setting-input { max-width: 420px; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .side {
    position: fixed;
    z-index: 60;
    top: 0; bottom: 0; left: 0;
    width: 232px;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
    box-shadow: 0 0 0 1px var(--border);
  }
  .side.is-open { transform: translateX(0); }

  .side-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.45);
  }
  .side-veil[hidden] { display: none; }

  .side-toggle { display: inline-flex; }
}

@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .metrics.cols-6 { grid-template-columns: repeat(2, 1fr); }
  .pos-grid { grid-template-columns: 1fr; }
  .metrics.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 13px; }

  .wrap { padding: 12px 12px 32px; }

  .topbar { padding: 6px 12px; gap: 10px; }
  .topbar .status-chip { font-size: 11px; padding: 2px 7px; }

  .metrics { grid-template-columns: repeat(2, 1fr); }

  /* Une seule colonne : à cette largeur, trois cartes de contexte côte à
     côte débordent de l'écran au lieu de le remplir. */
  .home-top { grid-template-columns: 1fr; }
  .score-summary { grid-template-columns: 1fr; }

  /* La barre du haut garde le strict nécessaire : le titre de la page et
     le bouton du tiroir. L'heure du dernier cycle est répétée en pied de
     page, elle n'a pas à disputer la place au titre. */
  .topbar .status-chip { display: none; }
  .page-title { font-size: 12.5px; }

  /* Un libellé long ne doit pas élargir la carte : il passe au-dessus de
     sa valeur plutôt que de pousser la grille. */
  .stat-facts > div { flex-wrap: wrap; }
  .capital-card { padding: 14px 16px 12px; }
  .capital-value { font-size: 30px; }
  .capital-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .veto-form { flex-direction: column; align-items: stretch; }
  .veto-form > div { min-width: 0; }

  table.data th, table.data td { padding: 7px 9px; }

  .chart-canvas { height: 220px !important; }
  #price-chart { height: 320px !important; }

  .filters { padding: 10px 12px; }
  .filters .field { min-width: 100%; flex: 1 1 100%; }
  .filters .btn { flex: 1 1 auto; }
  .filters button.btn { margin-left: 0; }

  .footnote { margin-top: 16px; }
}

@media (max-width: 480px) {
  .metrics, .metrics.cols-4, .metrics.cols-6 { grid-template-columns: 1fr; }
  .metric { border-right: none; }

  .topbar { gap: 8px; }
  .brand { font-size: 13px; }

  .check-row { flex-direction: column; align-items: stretch; }
  .check-row form { width: 100%; }
  .check-row .btn { width: 100%; }

  .capital-value { font-size: 26px; }
  .pos-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .banner { flex-direction: column; align-items: flex-start; gap: 6px; }
  .banner form { margin: 0 !important; }
}

/* --- Impression ------------------------------------------------------ */
@media print {
  .topbar, .side, .side-veil, .filters, .pager, .btn { display: none !important; }
  .shell { display: block; }
  .panel, .chart-box, .metrics { box-shadow: none; border-color: #ccc; }
  .wrap { max-width: none; padding: 0; }
}