/* ===================================================================
 * ScaleCity Trading · sct-system.css · v0.7 (doctrine V19)
 * Langage graphique unifié · couches Decision OS · typographies · composants
 * =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Palette de base */
  --ink:        #0a0d12;
  --paper:      #f5f3ed;
  --paper-2:    #fafbfc;
  --line:       #e6e9ee;
  --line-soft:  #ecedef;
  --muted:      #6c757d;
  --text:       #2a3138;

  /* Couches du Decision OS */
  --c-macro:        #1d3557;
  --c-entropy:      #2a8a8c;
  --c-regime:       #c79a4d;
  --c-risk:         #a23b2d;
  --c-memory:       #5b4b8a;
  --c-killswitch:   #0a0d12;

  /* Variantes tintées (fonds doux 8 %) */
  --c-macro-bg:        rgba(29,53,87,0.07);
  --c-entropy-bg:      rgba(42,138,140,0.07);
  --c-regime-bg:       rgba(199,154,77,0.09);
  --c-risk-bg:         rgba(162,59,45,0.07);
  --c-memory-bg:       rgba(91,75,138,0.07);
  --c-killswitch-bg:   rgba(10,13,18,0.06);

  /* Sémantique décision */
  --decision-no-trade: #a23b2d;
  --decision-execute:  #2d6e4f;
  --decision-watch:    #6c757d;

  /* Typographies */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────────────
 * Layout
 * ───────────────────────────────────────────────────────────────────── */
.sct-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 28px 96px;
}

.sct-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 36px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.sct-nav a {
  color: var(--text);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.sct-nav a:hover { border-color: var(--line); background: #fff; }
.sct-nav a.active { background: var(--ink); color: #fff; }

.sct-hat {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-regime);
  font-weight: 600;
  margin-bottom: 10px;
}
.sct-h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 12px;
}
.sct-h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.sct-lede {
  font-size: 16px;
  color: var(--text);
  max-width: 680px;
  margin: 0 0 36px;
}

.sct-h2 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-macro);
  font-weight: 700;
  margin: 48px 0 14px;
}
.sct-h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 24px 0 8px;
}

.sct-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  padding: 18px 24px;
  background: var(--c-regime-bg);
  border-left: 3px solid var(--c-regime);
  margin: 18px 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * Cartes & blocs
 * ───────────────────────────────────────────────────────────────────── */
.sct-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
}

.sct-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sct-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) {
  .sct-grid-2, .sct-grid-3 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Badges couches
 * ───────────────────────────────────────────────────────────────────── */
.layer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  border: 1px solid currentColor;
}
.layer-macro      { color: var(--c-macro);      background: var(--c-macro-bg); }
.layer-entropy    { color: var(--c-entropy);    background: var(--c-entropy-bg); }
.layer-regime     { color: var(--c-regime);     background: var(--c-regime-bg); }
.layer-risk       { color: var(--c-risk);       background: var(--c-risk-bg); }
.layer-memory     { color: var(--c-memory);     background: var(--c-memory-bg); }
.layer-killswitch { color: var(--c-killswitch); background: var(--c-killswitch-bg); }

/* Layer card · bloc explicatif par couche */
.layer-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  border-left: 4px solid var(--accent, var(--ink));
}
.layer-card.macro      { --accent: var(--c-macro); }
.layer-card.entropy    { --accent: var(--c-entropy); }
.layer-card.regime     { --accent: var(--c-regime); }
.layer-card.risk       { --accent: var(--c-risk); }
.layer-card.memory     { --accent: var(--c-memory); }
.layer-card.killswitch { --accent: var(--c-killswitch); }

.layer-card .layer-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
}
.layer-card .layer-role {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.layer-card .layer-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────────────
 * Décisions
 * ───────────────────────────────────────────────────────────────────── */
.decision {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.decision-no-trade { color: #fff; background: var(--decision-no-trade); }
.decision-execute  { color: #fff; background: var(--decision-execute); }
.decision-watch    { color: #fff; background: var(--decision-watch); }

/* ─────────────────────────────────────────────────────────────────────
 * Tableaux synthétiques
 * ───────────────────────────────────────────────────────────────────── */
.sct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.sct-table th, .sct-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.sct-table th {
  background: var(--paper-2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-macro);
}
.sct-table tr:last-child td { border-bottom: none; }
.sct-table td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
 * Icônes
 * ───────────────────────────────────────────────────────────────────── */
.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 32px; height: 32px; }

/* ─────────────────────────────────────────────────────────────────────
 * Footer & misc
 * ───────────────────────────────────────────────────────────────────── */
.sct-footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.06em;
}

.hyp-callout {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
  border-left: 2px solid var(--c-killswitch);
  padding: 8px 16px;
  margin: 18px 0;
  background: var(--c-killswitch-bg);
  border-radius: 0 6px 6px 0;
}

.kbd-note {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--paper-2);
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
}