/* ============================================================
   CHEST — Design tokens
   Repris de la DA de l'outil de backtest existant (voir
   ../../swyper-dashboard-v2/reference/DA-notes.md)
   ============================================================ */
:root{
  --bg:#050505; --panel:#0c0c0e; --panel-2:#111114;
  --ink:#f6f6f7; --muted:#9b9ba1; --faint:#5c5c63;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --navbg:rgba(5,5,5,.72);

  --acc:#fc1283; --acc2:#f9a45e;
  --model-a:#e35728; --model-b:#5470c2;
  --green:#33e6a6; --red:#ff4d5e; --blue:#4d8dff; --amber:#f5a623;

  --font: 'Instrument Sans', system-ui, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --container: 1180px;
  --radius: 20px; --radius-sm: 12px; --radius-pill: 999px;
}

/* Thème clair : voir css/patch-chest-da.css (inversion de la page ; les variables ne changent pas). */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .4s ease, color .4s ease;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
button,input{ font-family:inherit; }
::selection{ background:var(--acc); color:#fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.container{ max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,56px); }

/* eyebrow numbered section label, e.g. "01 — Modèles" - the trailing line
   is drawn automatically by ::after below, never type dashes in the text. */
.eyebrow{
  display:flex; align-items:center; gap:16px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
  margin-bottom:16px;
}
.eyebrow::after{ content:''; flex:1; height:1px; background:var(--line); }

.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  text-decoration:none; cursor:pointer; border:none; font:inherit;
  font-size:14px; font-weight:600; padding:13px 26px; border-radius:var(--radius-pill);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2)); box-shadow:0 14px 40px rgba(252,18,131,.35); }
.btn-secondary{ color:var(--ink); background:var(--panel); border:1px solid var(--line2); }
.btn-ghost{ color:var(--muted); background:transparent; border:1px solid var(--line2); }

.pill-group{ display:inline-flex; gap:3px; padding:3px; border:1px solid var(--line2); border-radius:var(--radius-pill); background:var(--panel); }
.pill-group button{
  border:none; cursor:pointer; font:inherit; font-size:12px; font-weight:700;
  padding:8px 16px; border-radius:var(--radius-pill); background:transparent; color:var(--muted);
  transition:.25s;
}
.pill-group button.is-active{ background:var(--ink); color:var(--bg); }

.card{ border:1px solid var(--line2); border-radius:var(--radius); background:var(--panel); transition:background .4s ease; }

.field{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line2); border-radius:var(--radius-sm);
  padding:13px 16px; transition:border-color .2s;
}
.field:focus{ outline:none; border-color:var(--acc); }
label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:8px; font-weight:600; }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--bg); font-size:13.5px; font-weight:600;
  padding:12px 22px; border-radius:var(--radius-pill); box-shadow:0 20px 50px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  z-index:200;
}
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }