/* Feuille de style de Northlog (calculateur), reprise du brouillon validé.
   Thème clair par défaut, thème sombre via :root[data-theme="dark"] (voir js/prefs-init.js). */
:root {
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface2: #f6f7fa;
  --surface3: #eceff4;
  --border: #e4e7ec;
  --border2: #d5d9e1;
  --text: #111217;
  --text2: #4a5060;
  --text3: #8a90a0;
  --accent: #2a5bf6;
  --accent2: #9b51e0;
  --green: #0e9f6e;
  --red: #e02f4f;
  --orange: #e07b2a;
  --yellow: #b7791f;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; font-size: 14px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.app { display: flex; height: 100vh; overflow: hidden; }

/* MAIN */
.main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.topbar { padding: 14px 28px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--surface); position: sticky; top: 0; z-index: 10; }
.page-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; }
.page { display: none; padding: 24px 28px; }
.page.active { display: block; }

/* CARDS */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }

/* FORMS */
input, textarea, select { background: var(--surface2); border: 1px solid var(--border2); border-radius: 7px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; padding: 9px 12px; width: 100%; outline: none; transition: border-color 0.15s; resize: none; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
.mnq-stop-control label, .mnq-stop-control input { color:var(--red); }
.mnq-stop-control input { border-color:var(--red); }
.mnq-stop-control input:focus { border-color:var(--red); }
.mnq-tp-control label, .mnq-tp-control input { color:var(--green); }
.mnq-tp-control input { border-color:var(--green); }
.mnq-tp-control input:focus { border-color:var(--green); }
textarea { min-height: 80px; line-height: 1.5; }
label { font-size: 11px; color: var(--text2); letter-spacing: 0.05em; text-transform: uppercase; display: block; margin-bottom: 5px; }
.form-group { margin-bottom: 14px; }

/* BUTTONS */
.btn { padding: 8px 16px; border-radius: 7px; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }

/* TOAST */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface3); border: 1px solid var(--border2); color: var(--text); padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 999; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.toast.show { opacity: 1; }

/* TOGGLE BUTTON GROUPS */
.toggle-btn { flex:1; padding:7px 10px; border-radius:7px; border:1.5px solid var(--border2); background:var(--surface2); color:var(--text3); font-size:12px; font-weight:700; cursor:pointer; transition:all .15s; font-family:'Inter',sans-serif; text-align:center; }
.toggle-btn:hover { border-color:var(--border); color:var(--text); }
.toggle-btn.active-accent { background:rgba(79,142,247,.18); border-color:var(--accent);  color:var(--accent); }

/* ATMOSPHERE */
html, body { background:var(--bg); color:var(--text); }
body { background-image:radial-gradient(ellipse at 78% 0%, rgb(var(--accent-rgb) / .12), transparent 42%); }
::selection { background:rgb(var(--accent-rgb) / .3); color:var(--text); }
::-webkit-scrollbar-thumb { background:#c9ced8; }

/* SHARED COMPONENTS */
.topbar {
  background:rgba(255,255,255,.84); border-bottom-color:rgb(var(--accent-rgb) / .09);
  backdrop-filter:blur(14px); padding:18px 30px;
}
.page-title {
  color:var(--text); font-family:'Inter',sans-serif; font-size:clamp(24px,2.6vw,34px);
  font-weight:500; letter-spacing:-.055em;
}
.page { padding:24px 30px; }
.page > .topbar { margin:-24px -30px 0; }
.card {
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.96));
  border-color:rgb(var(--accent-rgb) / .11); border-radius:16px; padding:22px;
  box-shadow:0 12px 36px rgba(16,24,40,.12);
}
input, textarea, select {
  background:rgba(255,255,255,.7); border-color:rgb(var(--accent-rgb) / .18);
  border-radius:9px; color:var(--text);
}
input:focus, textarea:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .1); }
input::placeholder, textarea::placeholder { color:#9aa0ad; }
.btn { border-radius:9px; font-weight:600; }
.toggle-btn.active-accent {
  background:rgb(var(--accent-rgb) / .14); border-color:var(--accent); color:var(--accent);
}

/* Bouton « Journal : bientôt » (désactivé) */
.mode-btn-soon { opacity:.65; cursor:not-allowed; }
.mode-btn-soon:hover { border-color:var(--border2); color:var(--text2); }

/* L'attribut hidden l'emporte toujours sur les display des classes */
[hidden] { display: none !important; }

/* Petits écrans */
@media (max-width:768px) {
  .topbar { padding:16px 18px; }
  .page { padding:18px; }
  .page > .topbar { margin:-18px -18px 0; }
  .page-title { font-size:24px; }
}

/* APP HEADER + MODE SWITCH */
:root { --header-h: 76px; --env: #f59e0b; }
.app { height: calc(100vh - var(--header-h)) !important; }
.app-header { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); border-top: 3px solid var(--env); position: relative; z-index: 60; }
.app-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.app-brand-name { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .02em; color: var(--text); }
.env-badge { font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .12em; color: #111; background: var(--env); border-radius: 5px; padding: 3px 7px; }
.mode-switch { display: flex; gap: 12px; }
.mode-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 230px; padding: 13px 26px; border-radius: 12px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text2); font: 600 15px 'Inter', sans-serif; cursor: pointer; transition: all .15s; text-decoration: none; }
.mode-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.mode-btn:hover { color: var(--text); border-color: var(--accent); }
.mode-btn.active { background: rgb(var(--accent-rgb) / .14); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
body.mode-calculator .topbar { padding-left: 30px !important; }
@media (max-width: 768px) {
  :root { --header-h: 112px; }
  .app-header { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 8px; padding: 8px 12px; }
  .mode-switch { width: 100%; gap: 8px; }
  .mode-btn { flex: 1; min-width: 0; padding: 11px 10px; font-size: 14px; }
}

/* THEME CLAIR — inspiré de grafana.com */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, transparent 0, var(--bg) 360px),
    var(--hero-grad);
  background-repeat: no-repeat; background-size: 100% 360px, 100% 360px;
}
.app-header { background: transparent; border-bottom: 1px solid rgba(17,18,23,.06); }
.app-brand-name { font-family: 'Poppins', sans-serif; font-weight: 700; color: #000; }
.topbar { background: transparent; backdrop-filter: none; border-bottom: 0; }
.page-title { font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: -.02em; color: #000; }
.main { background: transparent; }
.mode-btn { background: #fff; border-color: var(--border); color: var(--text); box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.mode-btn:hover { border-color: var(--border2); color: #000; }
.mode-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px rgb(var(--accent-rgb) / .28); }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 30px rgba(16,24,40,.06);
}
input, textarea, select { background: #fff; border-color: var(--border2); color: var(--text); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14); }
::-webkit-scrollbar-thumb { background: #c9ced8; }
::selection { background: rgb(var(--accent-rgb) / .18); }
.env-badge { color: #fff; background: #f59e0b; }

/* Calculateur : en-tête centré façon hero */
#page-calculator > .topbar { flex-direction: column; align-items: center; text-align: center; padding: 34px 20px 6px !important; }
#page-calculator .page-title { font-size: clamp(28px, 4vw, 46px); font-weight: 600; line-height: 1.1; }
.page-subtitle { margin-top: 10px; color: var(--text2); font-size: 16px; }

/* ===== Calculateur multi-instruments ===== */
#page-calculator > .topbar { position: static; }
.tgc-wrap { padding: 24px 20px; max-width: 760px; width: 100%; margin: 0 auto; }
.tgc-card { padding: 20px; }
.tgc-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
.tgc-tab { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; border: 0; background: transparent; border-radius: 7px; padding: 8px 6px; font: 600 13px 'Inter', sans-serif; color: var(--text2); cursor: pointer; transition: background .15s, color .15s; }
.tgc-tab svg { width: 16px; height: 16px; flex: none; }
.tgc-tab:hover { color: var(--text); }
.tgc-tab.active { background: var(--tab-active); color: var(--accent); box-shadow: 0 1px 3px rgba(17,18,23,.08); }
.tgc-instruments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.tgc-chip { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--text); transition: border-color .15s, background .15s; }
.tgc-chip:hover { border-color: var(--border2); background: var(--surface2); }
.tgc-chip.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.tgc-chip-text { display: flex; flex-direction: column; min-width: 0; }
.tgc-chip-text b { font: 700 13px 'JetBrains Mono', monospace; white-space: nowrap; }
.tgc-chip-text small { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgc-dd { position: relative; margin-bottom: 14px; }
.tgc-dd-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; color: var(--text2); font: 500 13px 'Inter', sans-serif; cursor: pointer; text-align: left; }
.tgc-dd-btn:hover { border-color: var(--text3); }
.tgc-dd-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); color: var(--text); }
.tgc-dd-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.tgc-dd-label b, .tgc-dd-item b { font: 700 13px 'JetBrains Mono', monospace; color: var(--text); white-space: nowrap; }
.tgc-dd-name { color: var(--text3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tgc-dd-label .tg-ico, .tgc-dd-item .tg-ico { transform: scale(.8); margin: -3px -2px; }
.tgc-dd-chevron { width: 16px; height: 16px; flex: none; color: var(--text3); transition: transform .15s; }
.tgc-dd-btn[aria-expanded="true"] .tgc-dd-chevron { transform: rotate(180deg); }
.tgc-dd-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 320px; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.16); }
.tgc-dd-group { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; padding: 8px 8px 4px; }
.tgc-dd-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
.tgc-dd-item:hover, .tgc-dd-item:focus-visible { background: var(--surface2); outline: none; }
.tgc-dd-item.active { background: var(--accent-soft); }
.tg-ico { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.tg-ico > svg { width: 32px; height: 32px; display: block; }
.tg-ico-fx { width: 40px; }
.tg-ico-fx .fi { position: absolute; width: 24px !important; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(0,0,0,.06); }
.tg-ico-fx .fi:first-child { left: 0; top: 0; z-index: 1; }
.tg-ico-fx .fi:last-child { right: 0; bottom: 0; }
.tgc-selected { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
.tgc-selected .tg-ico-fx .fi { box-shadow: 0 0 0 2px var(--surface2), 0 0 0 3px rgba(0,0,0,.06); }
.tgc-sel-title { font: 700 15px 'JetBrains Mono', monospace; }
.tgc-sel-title span { font: 500 12px 'Inter', sans-serif; color: var(--text2); }
.tgc-sel-spec { font-size: 12px; color: var(--text2); margin-top: 2px; }
.tgc-rate-row { display: flex; gap: 6px; }
.tgc-rate-row input { flex: 1; min-width: 0; }
.tgc-rate-row .btn { flex: none; white-space: nowrap; }
.tgc-hint { font-size: 11px; color: var(--text3); margin-top: 5px; }
.tgc-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tgc-presets .toggle-btn { flex: none; padding: 6px 12px; }
.tgc-presets-sm .toggle-btn { flex: 1; padding: 3px 5px; font-size: 10px; }
.tgc-unit-row { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12px; color: var(--text2); }
.tgc-unit-row .toggle-btn { flex: none; padding: 4px 12px; }
.tgc-unit-row[hidden], .tgc-unit-row .toggle-btn[hidden], .tgc-entry[hidden] { display: none; }
.tgc-entry input { font-family: 'JetBrains Mono', monospace; }
.tgc-dir { font: 700 10px 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
.tgc-dir[hidden] { display: none; }
.tgc-dir-long { color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); }
.tgc-dir-short { color: var(--red); background: var(--red-soft); border: 1px solid var(--red-line); }
.tgc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tgc-risk { text-align: center; margin: 4px 0 18px; }
.tgc-risk label { display: block; font: 600 13px 'Inter', sans-serif; color: var(--text); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.tgc-risk-input { position: relative; max-width: 300px; margin: 0 auto 10px; }
.tgc-risk-input span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font: 700 22px 'JetBrains Mono', monospace; color: var(--text3); pointer-events: none; }
.tgc-risk-input input { width: 100%; height: 58px; padding: 0 16px 0 40px; text-align: center; font: 700 26px 'JetBrains Mono', monospace; border-width: 2px; border-radius: 12px; }
.tgc-risk-input input:focus { border-color: var(--accent); }
.tgc-risk-input input::-webkit-outer-spin-button, .tgc-risk-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tgc-risk-input input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.tgc-presets-center { justify-content: center; }
.tgc-results { background: var(--surface2); border-radius: 12px; padding: 16px; margin-top: 4px; }
.tgc-hero { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.tgc-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 120px; padding: 4px 6px; }
.tgc-big { font: 700 40px 'JetBrains Mono', monospace; line-height: 1.1; color: var(--accent); min-width: 1.5ch; }
.tgc-big.is-manual { color: var(--orange); }
.tgc-size-row { display: flex; align-items: center; gap: 8px; }
.tgc-step { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--border2); background: var(--surface); color: var(--text2); font: 600 18px/1 'Inter', sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: border-color .15s, color .15s, background .15s; }
.tgc-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tgc-step:active:not(:disabled) { background: var(--surface2); }
.tgc-step:disabled { opacity: .35; cursor: default; }
.tgc-auto { margin-top: 4px; border: 0; background: none; padding: 2px 4px; font-size: 11px; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tgc-auto[hidden] { display: none; }
.tgc-rr { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 14px 0 0; }
.tgc-rr-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); }
.tgc-rr-v { font: 700 26px 'JetBrains Mono', monospace; color: var(--text3); }
.tgc-rr-v.is-good { color: var(--green); }
.tgc-rr-v.is-low { color: var(--orange); }
.tgc-sub { font-size: 11px; color: var(--text3); min-height: 14px; }
.tgc-side { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid; min-width: 0; }
.tgc-side-risk { background: var(--red-soft); border-color: var(--red-line); text-align: left; }
.tgc-side-gain { background: var(--green-soft); border-color: var(--green-line); text-align: right; align-items: flex-end; }
.tgc-side-head { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tgc-side-head svg { width: 15px; height: 15px; flex: none; }
.tgc-side-risk .tgc-side-head, .tgc-side-risk .tgc-side-value { color: var(--red); }
.tgc-side-gain .tgc-side-head, .tgc-side-gain .tgc-side-value { color: var(--green); }
.tgc-side-value { font: 700 22px 'JetBrains Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tgc-side-sub { font-size: 11px; color: var(--text2); }
.tgc-side-sub b { font-family: 'JetBrains Mono', monospace; color: var(--text); }
.tgc-rrbar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin: 12px 0 2px; gap: 2px; }
.tgc-rrbar[hidden] { display: none; }
.tgc-rrbar-risk { background: var(--red); border-radius: 99px 0 0 99px; transition: width .2s; }
.tgc-rrbar-gain { background: var(--green); border-radius: 0 99px 99px 0; transition: width .2s; }
.tgc-distance { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin: 12px 0; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.tgc-distance b { font: 700 13px 'JetBrains Mono', monospace; color: var(--text); text-transform: none; letter-spacing: 0; }
.tgc-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: center; margin: 12px 0; }
.tgc-k { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.tgc-v { font: 700 13px 'JetBrains Mono', monospace; }
.tgc-green { color: var(--green); }
.tgc-partial { padding-top: 12px; border-top: 1px solid var(--border); }
.tgc-message { text-align: center; margin-top: 4px; font-size: 12px; color: var(--text3); }
.tgc-disclaimer { font-size: 11px; color: var(--text3); margin-top: 12px; line-height: 1.5; }
@media (max-width: 560px) {
  .tgc-hero { grid-template-columns: 1fr 1fr; }
  .tgc-center { grid-column: 1 / -1; grid-row: 1; }
  .tgc-side { padding: 10px; }
  .tgc-side-value { font-size: 16px; overflow: visible; }
  .tgc-side-head { font-size: 9px; }
  .tgc-distance { flex-direction: column; align-items: center; gap: 2px; }
  .tgc-big { font-size: 36px; }
  .tgc-dd-name { display: none; }
  .tgc-wrap { padding: 16px 12px; }
  .tgc-card { padding: 14px; }
  .tgc-tab { flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 11.5px; line-height: 1.2; white-space: normal; }
  .tgc-chip { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
  .tgc-chip-text { align-items: center; max-width: 100%; }
  .tgc-chip-text small { max-width: 100%; }
  .tgc-grid2 { grid-template-columns: 1fr; gap: 0; }
}
.tg-ico-img { width: 32px; height: 32px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px var(--border); }
.tgc-size { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tgc-size[hidden], .tgc-dd[hidden] { display: none; }
.tgc-size-label { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; }
.tgc-seg { display: flex; gap: 4px; padding: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; flex: 1; max-width: 460px; }
.tgc-seg-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text2); cursor: pointer; transition: background .15s, color .15s; }
.tgc-seg-btn b { font: 700 12px 'Inter', sans-serif; white-space: nowrap; }
.tgc-seg-btn small { font: 500 10.5px 'JetBrains Mono', monospace; color: var(--text3); white-space: nowrap; }
.tgc-seg-btn:hover { color: var(--text); }
.tgc-seg-btn.active { background: var(--tab-active); color: var(--accent); box-shadow: 0 1px 3px rgba(17,18,23,.08); }
.tgc-side-partial { font: 600 11px 'JetBrains Mono', monospace; color: var(--green); opacity: .85; margin-top: -2px; }
.tgc-side-partial[hidden] { display: none; }
@media (max-width: 560px) {
  .tgc-size { flex-direction: column; align-items: stretch; gap: 6px; }
  .tgc-seg { max-width: none; }
  .tgc-seg-btn { padding: 6px 4px; }
  .tgc-seg-btn b { font-size: 11px; }
}

/* Recherche globale */
.tgc-search { position: relative; margin-bottom: 12px; }
.tgc-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text3); pointer-events: none; }
.tgc-search input { width: 100%; height: 42px; padding: 0 12px 0 36px; border-radius: 10px; font-size: 13px; }
.tgc-search-list { top: calc(100% + 4px); }
.tgc-tag { margin-left: auto; flex: none; font: 600 10px 'Inter', sans-serif; font-style: normal; color: var(--text3); background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
.tgc-empty { padding: 10px; font-size: 12px; color: var(--text3); }

/* Risque : montant ou % du compte */
.tgc-risk-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.tgc-risk-head label { margin: 0 !important; }
.tgc-mini-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; }
.tgc-mini-seg button { min-width: 28px; border: 0; background: transparent; border-radius: 5px; padding: 3px 7px; font: 700 12px 'JetBrains Mono', monospace; color: var(--text3); cursor: pointer; }
.tgc-mini-seg button.active { background: var(--tab-active); color: var(--accent); box-shadow: 0 1px 2px rgba(17,18,23,.08); }
.tgc-risk-input.is-pct span { left: auto; right: 16px; }
.tgc-risk-input.is-pct input { padding: 0 40px 0 16px; }
.tgc-account { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--text2); }
.tgc-account[hidden] { display: none; }
.tgc-account label { margin: 0 !important; font: 500 12px 'Inter', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text2) !important; }
.tgc-account-input { position: relative; }
.tgc-account-input input { width: 140px; height: 34px; padding: 0 26px 0 10px; font: 600 13px 'JetBrains Mono', monospace; text-align: right; }
.tgc-account-input span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 12px; pointer-events: none; }
.tgc-account-eq { font: 600 12px 'JetBrains Mono', monospace; color: var(--accent); }

/* CFD : taille du contrat */
.tgc-cfd { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 1; }
.tgc-cfd small { font-size: 10.5px; color: var(--text3); }
.tgc-cfd-input { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
.tgc-cfd-input input { width: 90px; height: 34px; text-align: center; font: 600 13px 'JetBrains Mono', monospace; }

/* Cours manuels (si la BCE ne répond pas) */
.tgc-rates .tgc-rate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 12px; color: var(--text2); text-transform: none; letter-spacing: 0; }
.tgc-rates .tgc-rate-row input { width: 140px; flex: none; }
.tgc-link-btn { border: 0; background: none; color: var(--accent); font: 600 11px 'Inter', sans-serif; cursor: pointer; padding: 0 0 0 4px; text-decoration: underline; }
.tgc-sel-fx { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* Actions : lien partageable, réinitialisation */
.tgc-actions { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.tgc-action { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border2); background: var(--surface); color: var(--text2); border-radius: 8px; padding: 6px 11px; font: 600 12px 'Inter', sans-serif; cursor: pointer; }
.tgc-action:hover { color: var(--text); border-color: var(--text3); }
.tgc-action svg { width: 14px; height: 14px; }

/* Mention légale */
.tg-footer { display: flex; justify-content: center; gap: 8px; padding: 24px 16px 32px; font-size: 12px; color: var(--text3); }
.tg-footer a { color: var(--text3); text-decoration: underline; text-underline-offset: 2px; }
.tg-footer a:hover { color: var(--text2); }
.tgc-legal { max-width: 640px; margin: 14px auto 8px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--text3); }
.tg-ccy b { font: 700 13px 'JetBrains Mono', monospace; }
@media (max-width: 768px) {
  .tg-hide-sm { display: none; }
  .tg-lang-btn { padding: 5px 8px; }
}
@media (max-width: 560px) {
  .tgc-cfd { align-items: stretch; }
  .tgc-tab { font-size: 11px; }
  .tgc-search-list .tgc-dd-name { display: inline; }
}

/* ===== Badge « Bientôt » ===== */
.nav-soon { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b45309; background: #fff4e0; border-radius: 4px; padding: 2px 5px; }
@media (max-width: 640px) {
  .mode-btn .nav-soon { display: none; }
}

/* ===== En-tête : thème et langue ===== */
.app-header-tools { justify-self: end; display: flex; align-items: center; gap: 8px; }
.tg-icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s; }
.tg-icon-btn:hover { border-color: var(--border2); }
.tg-icon-btn svg { width: 18px; height: 18px; }
.tg-theme-sun { display: none; }
:root[data-theme="dark"] .tg-theme-sun { display: block; }
:root[data-theme="dark"] .tg-theme-moon { display: none; }
.tg-lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; }
.tg-lang-btn { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; border-radius: 7px; padding: 6px 9px; font: 600 12px 'Inter', sans-serif; color: var(--text2); cursor: pointer; }
.tg-lang-btn .fi { width: 16px !important; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.tg-lang-btn:hover { color: var(--text); }
.tg-lang-btn.active { background: var(--surface3); color: var(--text); }
@media (max-width: 768px) {
  .app-header { grid-template-columns: 1fr auto; }
  .app-brand { grid-row: 1; grid-column: 1; }
  .app-header-tools { grid-row: 1; grid-column: 2; }
  .mode-switch { grid-row: 2; grid-column: 1 / -1; }
  .tg-icon-btn { width: 34px; height: 34px; }
  .tg-lang-btn { padding: 5px 7px; }
}

/* ===== Thème : variables communes ===== */
:root { --strong: #000; --tab-active: #fff; --accent-soft: rgb(var(--accent-rgb) / .07); --red-soft: rgba(224,47,79,.06); --red-line: rgba(224,47,79,.22); --green-soft: rgba(14,159,110,.07); --green-line: rgba(14,159,110,.25); color-scheme: light; }

/* ===== Thème sombre ===== */
:root[data-theme="dark"] {
  --bg: #0e1015;
  --surface: #161920;
  --surface2: #1c2029;
  --surface3: #262b36;
  --border: #272c37;
  --border2: #363c49;
  --text: #e9ebf1;
  --text2: #a7aebd;
  --text3: #737b8c;
  --accent: #5b84ff;
  --accent2: #b07cf0;
  --green: #2ec990;
  --red: #ff5d78;
  --orange: #f5a04a;
  --yellow: #e0b04a;
  --strong: #fff;
  --tab-active: #2a303d;
  --accent-soft: rgb(var(--accent-rgb) / .12);
  --red-soft: rgba(255,93,120,.09);
  --red-line: rgba(255,93,120,.28);
  --green-soft: rgba(46,201,144,.09);
  --green-line: rgba(46,201,144,.28);
  color-scheme: dark;
}
:root[data-theme="dark"] body {
  background-image:
    linear-gradient(180deg, transparent 0, var(--bg) 360px),
    var(--hero-grad);
}
:root[data-theme="dark"] .app-header { border-bottom-color: rgba(255,255,255,.06); }
:root[data-theme="dark"] .app-brand-name, :root[data-theme="dark"] .page-title { color: var(--strong); }
:root[data-theme="dark"] .mode-btn { background: var(--surface); color: var(--text); box-shadow: none; }
:root[data-theme="dark"] .mode-btn:hover { color: var(--strong); border-color: var(--border2); }
:root[data-theme="dark"] .mode-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px rgb(var(--accent-rgb) / .28); }
:root[data-theme="dark"] .card { background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.25); }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--surface2); }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus { box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .2); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a404d; }
:root[data-theme="dark"] ::selection { background: rgb(var(--accent-rgb) / .3); }
:root[data-theme="dark"] .tgc-tab.active { box-shadow: none; }
:root[data-theme="dark"] .tgc-dd-list { box-shadow: 0 12px 32px rgba(0,0,0,.45); }
:root[data-theme="dark"] .nav-soon { color: #fbbf5b; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.3); }

/* ===== Couleurs (bleu), en clair et en sombre ===== */
:root {
  --bg: #f4f5f8; --surface: #ffffff; --surface2: #f6f7fa; --surface3: #eceff4;
  --border: #e4e7ec; --border2: #d5d9e1; --text: #111217; --text2: #4a5060; --text3: #8a90a0;
  --accent: #2a5bf6; --accent-rgb: 42 91 246; --accent-hover: #1f4fe0; --on-accent: #ffffff; --accent2: #9b51e0;
  --accent-soft: rgb(42 91 246 / .1); --green: #0e9f6e; --red: #e02f4f; --tab-active: #ffffff;
  --hero-grad: linear-gradient(90deg, #f8c5a8 0%, #f0bfd6 28%, #dcbdf0 50%, #b8ccf5 72%, #9fe1f0 100%);
  --c3d-bull: #0e9f6e; --c3d-bear: #e02f4f; --c3d-glow: #2a5bf6; --c3d-dust: #24304d;
}
:root[data-theme="dark"] {
  --bg: #0e1015; --surface: #161920; --surface2: #1c2029; --surface3: #262b36;
  --border: #272c37; --border2: #363c49; --text: #e9ebf1; --text2: #a7aebd; --text3: #737b8c;
  --accent: #5b84ff; --accent-rgb: 91 132 255; --accent-hover: #4a74f5; --on-accent: #ffffff; --accent2: #b07cf0;
  --accent-soft: rgb(91 132 255 / .1); --green: #2ec990; --red: #ff5d78; --tab-active: #2a303d;
  --hero-grad: linear-gradient(90deg, #3a2230 0%, #36223f 28%, #2b2552 50%, #1f2d52 72%, #163b49 100%);
  --c3d-bull: #2ec990; --c3d-bear: #ff5d78; --c3d-glow: #5b84ff; --c3d-dust: #dfe7ff;
}
:root[data-theme="dark"] .page-title { text-shadow: 0 2px 30px var(--bg); }

/* Fond étoilé sur toute la page : au-dessus du fond de <body>, sous tout le contenu */
body { position: relative; z-index: 0; }
#tgStars { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }

/* Visuel 3D : bougies japonaises en particules, derrière le titre du calculateur */
#page-calculator > .topbar { position: relative; padding: 40px 20px 0 !important; }
.tg-hero3d { position: relative; align-self: stretch; height: 250px; margin: 6px -20px -26px; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 76%, transparent 100%); }
.tg-hero3d canvas { display: block; width: 100% !important; height: 100% !important; }
.tgc-wrap { position: relative; z-index: 1; }
@media (max-width: 560px) {
  #page-calculator > .topbar { padding: 28px 16px 0 !important; }
  .tg-hero3d { height: 190px; margin: 4px -16px -18px; }
}
:root {
  --lift-hi: rgba(255,255,255,.95);
  --lift-shadow: 0 1px 2px rgba(16,24,40,.06), 0 3px 8px rgba(16,24,40,.07);
  --lift-shadow-hover: 0 2px 4px rgba(16,24,40,.07), 0 8px 18px rgba(16,24,40,.11);
  --press-shadow: inset 0 2px 5px rgba(16,24,40,.14);
  --glass-bg: rgba(255,255,255,.5);
  --glass-border: rgba(255,255,255,.75);
  --glass-shadow: 0 10px 30px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.85);
  --glass-active: rgba(255,255,255,.9);
  --glass-active-shadow: 0 2px 10px rgba(16,24,40,.13), inset 0 1px 0 #fff;
  --thead-bg: linear-gradient(180deg, var(--surface2), var(--surface));
}
:root[data-theme="dark"] {
  --lift-hi: rgba(255,255,255,.07);
  --lift-shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.3);
  --lift-shadow-hover: 0 2px 4px rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.38);
  --press-shadow: inset 0 2px 6px rgba(0,0,0,.5);
  --glass-bg: rgba(28,31,41,.48);
  --glass-border: rgba(255,255,255,.1);
  --glass-shadow: 0 12px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  --glass-active: rgba(255,255,255,.13);
  --glass-active-shadow: 0 2px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16);
}

/* --- Boutons en relief : légère élévation au survol, enfoncés au clic --- */
:root[data-theme] .btn { transition: transform .12s ease, box-shadow .15s ease, background .15s, color .15s, border-color .15s; }
:root[data-theme] .btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--press-shadow); transition-duration: .05s; }
:root[data-theme] .btn:disabled { transform: none; box-shadow: none; }
:root[data-theme] .toggle-btn, :root[data-theme] .tgc-step, :root[data-theme] .tgc-action {
  box-shadow: inset 0 1px 0 var(--lift-hi), 0 1px 2px rgba(16,24,40,.06);
  transition: transform .12s ease, box-shadow .15s ease, background .15s, color .15s, border-color .15s;
}
:root[data-theme] .toggle-btn:hover, :root[data-theme] .tgc-step:hover:not(:disabled), :root[data-theme] .tgc-action:hover { box-shadow: inset 0 1px 0 var(--lift-hi), var(--lift-shadow); transform: translateY(-1px); }
:root[data-theme] .toggle-btn:active, :root[data-theme] .tgc-step:active:not(:disabled), :root[data-theme] .tgc-action:active { transform: translateY(1px); box-shadow: var(--press-shadow); transition-duration: .05s; }
:root[data-theme] .tgc-step:disabled { box-shadow: none; }

/* --- Onglets du haut : barre en verre dépoli, onglet actif en relief --- */
:root[data-theme] .mode-switch {
  gap: 4px; padding: 5px; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
}
:root[data-theme] .mode-btn {
  min-width: 0; padding: 10px 24px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--text2); box-shadow: none; font-size: 14px;
  transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
}
:root[data-theme] .mode-btn:hover { background: rgb(var(--accent-rgb) / .08); color: var(--text); border-color: transparent; }
:root[data-theme] .mode-btn.active { background: var(--glass-active); border-color: var(--glass-border); color: var(--text); box-shadow: var(--glass-active-shadow); }
:root[data-theme] .mode-btn.active svg { color: var(--accent); }
:root[data-theme] .mode-btn-soon:hover { background: transparent; color: var(--text2); }
@media (max-width: 768px) {
  :root[data-theme] .mode-switch { width: 100%; }
  :root[data-theme] .mode-btn { flex: 1; padding: 9px 8px; font-size: 13px; gap: 6px; }
}