/* =========================================================
   Trading Evolution — calculateur de taille de position (pages outils). Le sombre reste celui du site,
   le clair est ajouté ici. Extrait de l'ancien blog.css (blog supprimé le 25/10/2026).
   ========================================================= */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.calc-form { display: grid; gap: var(--s-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-5); }
.calc-form label { display: grid; gap: .35rem; color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; }
.calc-form input, .calc-form select { padding: .65rem var(--s-3); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-3); color: #fff; font: 600 var(--t-base) var(--f-body); direction: ltr; }
.calc-form input:focus, .calc-form select:focus { outline: 2px solid var(--blue-200); outline-offset: 2px; }
.calc-form select option { background: var(--pop); }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.calc-unit { display: flex; gap: .5rem; }
.calc-unit label { flex: 1; flex-direction: row; align-items: center; gap: .4rem; }
.calc-out { display: grid; gap: var(--s-3); }
.calc-big { background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(255,255,255,.02)); border: 1px solid var(--blue-100); border-radius: var(--r-xl); padding: var(--s-5); }
.calc-big small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-300); }
.calc-big strong { display: block; font-family: var(--f-mono); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); color: #fff; line-height: 1.1; margin: .25rem 0; direction: ltr; }
.calc-big span { color: var(--ink-2); font-size: var(--t-sm); }
.calc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin: 0; }
.calc-facts div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); }
.calc-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.calc-facts dd { margin: .3rem 0 0; color: #fff; font-weight: 700; font-family: var(--f-mono); direction: ltr; text-align: start; }
.calc-warn { color: var(--amber); font-size: var(--t-sm); min-height: 1.4em; }
.calc-spec td a { color: var(--blue-300); }
html:not([data-theme="dark"]) .calc-form { background: #fff; box-shadow: var(--sh-md); }
html:not([data-theme="dark"]) .calc-form input, html:not([data-theme="dark"]) .calc-form select { background: #fff; border-color: rgba(10, 22, 40, .14); color: var(--ink); }
html:not([data-theme="dark"]) .calc-form select option { background: #fff; color: var(--ink); }
html:not([data-theme="dark"]) .calc-big { background: linear-gradient(135deg, #eaf1ff, #fff 70%); border-color: rgba(37, 99, 235, .22); box-shadow: var(--sh-md); }
html:not([data-theme="dark"]) .calc-big strong, html:not([data-theme="dark"]) .calc-facts dd { color: var(--ink); }
html:not([data-theme="dark"]) .calc-facts div { background: #fff; box-shadow: var(--sh-sm); }
html:not([data-theme="dark"]) .calc-warn { color: #a35a00; }
@media (max-width: 860px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
}