/* ══════════════════════════════════════════════════════════
   Journal de Trading — pupitre de trading
   Fond bleu-noir froid, un seul accent turquoise, chiffres en
   monospace tabulaire, grille de graphique et grain en texture.
   ══════════════════════════════════════════════════════════ */

:root {
  --bg:            #0b0e13;
  --bg-sidebar:    #0d1117;
  --bg-hover:      #ffffff0a;
  --bg-active:     #ffffff12;
  --bg-input:      #ffffff07;
  --bg-card:       #11161d;
  --bg-elev:       #171d26;
  --border:        #ffffff0f;
  --border-strong: #ffffff1e;
  --text:          #c9d1d9;
  --text-strong:   #f3f6f9;
  --text-dim:      #8b96a5;
  --text-faint:    #5b6672;
  --accent:        #3dd6c0;
  --accent-ink:    #06110f;
  --accent-soft:   #3dd6c01f;
  --green:         #3fcf8e;
  --red:           #f0625d;
  --yellow:        #e6b450;
  --shadow:        0 18px 44px #00000099, 0 0 0 1px #ffffff0c;
  --glow:          0 0 0 1px #3dd6c033, 0 0 32px #3dd6c01a;
  --radius:        6px;
  --sb-w:          248px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --grille: linear-gradient(#ffffff05 1px, transparent 1px) 0 0 / 100% 28px,
            linear-gradient(90deg, #ffffff05 1px, transparent 1px) 0 0 / 28px 100%;
}

[data-theme="light"] {
  --bg:            #f3f5f8;
  --bg-sidebar:    #e9edf2;
  --bg-hover:      #0b1a2a08;
  --bg-active:     #0b1a2a12;
  --bg-input:      #0b1a2a06;
  --bg-card:       #ffffff;
  --bg-elev:       #ffffff;
  --border:        #0b1a2a12;
  --border-strong: #0b1a2a22;
  --text:          #2b3644;
  --text-strong:   #0f1720;
  --text-dim:      #62707f;
  --text-faint:    #94a0ad;
  --accent:        #0f9d8c;
  --accent-ink:    #ffffff;
  --accent-soft:   #0f9d8c1a;
  --green:         #1f8f5a;
  --red:           #c8423a;
  --yellow:        #a8781a;
  --shadow:        0 14px 36px #0b1a2a1a, 0 0 0 1px #0b1a2a0f;
  --glow:          0 0 0 1px #0f9d8c33, 0 0 28px #0f9d8c14;
  --grille: linear-gradient(#0b1a2a0a 1px, transparent 1px) 0 0 / 100% 28px,
            linear-gradient(90deg, #0b1a2a0a 1px, transparent 1px) 0 0 / 28px 100%;
}

/* tag colours */
.tag       { --t-bg:#ffffff12; --t-fg:var(--text); }
.tag-gray  { --t-bg:#8080801f; --t-fg:#9b9b9b; }
.tag-green { --t-bg:#4dab6d2b; --t-fg:#6cc48c; }
.tag-red   { --t-bg:#e0574a2b; --t-fg:#f0776a; }
.tag-blue  { --t-bg:#2383e22b; --t-fg:#5aa9ee; }
.tag-yellow{ --t-bg:#d9a4412b; --t-fg:#e0b85f; }
.tag-purple{ --t-bg:#9a6dd72b; --t-fg:#b18cec; }
.tag-orange{ --t-bg:#d9730d2b; --t-fg:#e39346; }
.tag-pink  { --t-bg:#e255a12b; --t-fg:#ec7bb9; }
[data-theme="light"] .tag-gray  { --t-fg:#5f5e5b; }
[data-theme="light"] .tag-green { --t-fg:#2e7d4f; }
[data-theme="light"] .tag-red   { --t-fg:#b0362a; }
[data-theme="light"] .tag-blue  { --t-fg:#1a6bb8; }
[data-theme="light"] .tag-yellow{ --t-fg:#96690f; }
[data-theme="light"] .tag-purple{ --t-fg:#7a4fc0; }
[data-theme="light"] .tag-orange{ --t-fg:#b35c05; }
[data-theme="light"] .tag-pink  { --t-fg:#c23a84; }

* { box-sizing: border-box; }
/* l'attribut hidden doit gagner sur tout display: de classe (.lightbox, .toast…) */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #ffffff1f; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #ffffff33; background-clip: content-box; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #00000024; background-clip: content-box; }

#app { display: flex; height: 100vh; }

/* ─────────── SIDEBAR ─────────── */
#sidebar {
  width: var(--sb-w); flex: 0 0 var(--sb-w); background: var(--bg-sidebar);
  display: flex; flex-direction: column; padding: 8px 0 4px;
  border-right: 1px solid var(--border); overflow: hidden auto; user-select: none;
}
body.sb-collapsed #sidebar, body.sb-collapsed #sb-resizer { display: none; }
#sb-resizer { width: 3px; margin-left: -3px; cursor: col-resize; z-index: 5; }
#sb-resizer:hover { background: var(--accent); }

.sb-workspace { display: flex; align-items: center; gap: 9px; padding: 6px 10px; margin: 0 4px 8px;
  border-radius: var(--radius); width: calc(100% - 8px); text-align: left; }
.sb-workspace:hover { background: var(--bg-hover); }
.sb-ws-icon { width: 24px; height: 24px; border-radius: 6px; background: var(--bg-active);
  display: grid; place-items: center; font-size: 14px; flex: 0 0 auto; }
.sb-ws-name { font-size: 14px; font-weight: 600; color: var(--text-strong); line-height: 1.15;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ws-chev { color: var(--text-faint); font-size: 12px; flex: 0 0 auto; }
.sb-ws-sub { display: block; font-size: 11px; font-weight: 400; color: var(--text-faint); }

.sb-section { padding: 14px 14px 4px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); letter-spacing: .02em; }
.sb-section-row { display: flex; align-items: center; justify-content: space-between; padding-right: 8px; }
.sb-mini { width: 20px; height: 20px; border-radius: 4px; color: var(--text-faint); font-size: 15px; line-height: 1; }
.sb-mini:hover { background: var(--bg-active); color: var(--text); }

.sb-nav, .sb-actions { display: flex; flex-direction: column; padding: 0 4px; }
.sb-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 5px 8px; border-radius: var(--radius); color: var(--text-dim);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
}
.sb-item:hover { background: var(--bg-hover); color: var(--text); }
.sb-item.active { background: var(--bg-active); color: var(--text-strong); }
.sb-item .ic { width: 16px; text-align: center; font-size: 13px; flex: 0 0 auto; opacity: .9; }
.sb-item .lbl { overflow: hidden; text-overflow: ellipsis; }
.sb-item .pnl { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.sb-empty { padding: 4px 12px; font-size: 12px; color: var(--text-faint); }

.sb-footer { margin-top: auto; padding: 8px 4px 0; border-top: 1px solid var(--border); }
.sb-quota { padding: 6px 10px 2px; font-size: 10.5px; color: var(--text-faint); }

/* sauvegarde disque */
#sb-backup { margin-bottom: 2px; }
.bk-cta { background: #2383e21f; color: var(--accent) !important; font-weight: 600; }
.bk-cta:hover { background: #2383e233; }
.bk-warn-btn { background: #d9a4412b; color: var(--yellow) !important; }
.bk-warn-btn:hover { background: #d9a44140; }
.bk-pending { color: var(--yellow) !important; font-size: 12.5px; }
.bk-ok { color: var(--green) !important; font-size: 12.5px; }
.bk-ok:hover { background: var(--bg-hover); }
.bk { padding: 7px 10px; border-radius: var(--radius); background: #d9a44117; font-size: 11px; color: var(--yellow); line-height: 1.35; }
.bk span { color: var(--text-faint); }

/* ─────────── MAIN ─────────── */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar {
  height: 45px; flex: 0 0 45px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; border-bottom: 1px solid transparent; background: var(--bg); z-index: 4;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 6px; }
.tb-icon { width: 28px; height: 28px; border-radius: var(--radius); color: var(--text-dim); }
.tb-icon:hover { background: var(--bg-hover); }
.breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--text-dim); }
.breadcrumb button { padding: 3px 6px; border-radius: 4px; color: var(--text-dim); }
.breadcrumb button:hover { background: var(--bg-hover); color: var(--text); }
.breadcrumb .cb-cur { color: var(--text-strong); font-weight: 500; padding: 3px 6px; }
.breadcrumb .sep { color: var(--text-faint); }
.tb-btn { padding: 5px 11px; border-radius: var(--radius); background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; }
.tb-btn:hover { filter: brightness(1.1); }
.tb-btn.ghost { background: none; color: var(--text-dim); }
.tb-btn.ghost:hover { background: var(--bg-hover); color: var(--text); }

#content { flex: 1; overflow: auto; scroll-behavior: smooth; }

/* ─────────── page shell ─────────── */
.page { max-width: 1180px; margin: 0 auto; padding: 0 60px 220px; }
.page.narrow { max-width: 820px; }
.page-cover {
  height: 124px; margin: 0 0 -30px; border-radius: 0 0 4px 4px; position: relative; overflow: hidden;
  background: radial-gradient(60% 120% at 12% 0%, var(--accent-soft), transparent 60%),
              var(--grille), var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.page-cover::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .55;
}
.page-icon {
  width: 46px; height: 46px; border-radius: 9px; background: var(--bg-elev);
  display: grid; place-items: center; font-size: 22px;
  border: 1px solid var(--border-strong); box-shadow: var(--glow);
}
.page-title {
  font-size: 40px; font-weight: 750; color: var(--text-strong); letter-spacing: -.035em;
  margin: 14px 0 4px; outline: none; line-height: 1.08; text-wrap: balance;
}
.page-title:empty::before { content: attr(data-ph); color: var(--text-faint); }
.page-sub { color: var(--text-faint); font-size: 13px; margin-bottom: 18px; }
.trade-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trade-sub .sub-actions { margin-left: auto; display: flex; gap: 4px; flex: 0 0 auto; }
.tool-btn.danger { color: var(--red); }
.tool-btn.danger:hover { background: #e0574a24; color: var(--red); }

h2.sec {
  font-size: 21px; font-weight: 650; color: var(--text-strong);
  margin: 34px 0 10px; letter-spacing: -.01em;
}
h3.sec { font-size: 15px; font-weight: 650; color: var(--text-strong); margin: 26px 0 8px; }
.hr { height: 1px; background: var(--border); margin: 26px 0; }

/* ─────────── properties (page détail) ─────────── */
.props { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 4px; }
.prop-row { display: grid; grid-template-columns: 190px 1fr; align-items: start; gap: 6px; border-radius: 4px; }
.prop-key {
  display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 4px;
  color: var(--text-dim); font-size: 13.5px; cursor: default; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.prop-key:hover { background: var(--bg-hover); }
.prop-key .ic { width: 15px; text-align: center; opacity: .75; font-size: 12px; }
.prop-val { padding: 5px 7px; border-radius: 4px; min-height: 30px; cursor: pointer; font-size: 13.5px; }
.prop-val:hover { background: var(--bg-hover); }
.prop-val.readonly { cursor: default; color: var(--text-dim); }
.prop-val.readonly:hover { background: none; }
.prop-empty { color: var(--text-faint); }
.prop-val input, .prop-val textarea {
  width: 100%; background: none; border: 0; outline: none; padding: 0; color: var(--text); font-size: 13.5px;
}
.prop-add { color: var(--text-faint); padding: 5px 7px; border-radius: 4px; font-size: 13.5px; }
.prop-add:hover { background: var(--bg-hover); color: var(--text-dim); }

.tag {
  display: inline-flex; align-items: center; gap: 4px; background: var(--t-bg); color: var(--t-fg);
  padding: 1px 8px; border-radius: 4px; font-size: 12.5px; line-height: 19px; max-width: 100%;
}
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag .x { opacity: .5; font-size: 11px; }
.tag .x:hover { opacity: 1; }

.chk { width: 16px; height: 16px; border-radius: 3px; border: 1.4px solid var(--border-strong);
  display: inline-grid; place-items: center; font-size: 11px; color: #fff; vertical-align: -3px; }
.chk.on { background: var(--accent); border-color: var(--accent); }

.num-pos { color: var(--green); font-variant-numeric: tabular-nums; }
.num-neg { color: var(--red); font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; }

/* ─────────── blocs contenu ─────────── */
.callout {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--bg-input); border: 1px solid var(--border); margin: 10px 0 6px;
}
.callout .cal-ic { font-size: 16px; line-height: 1.4; }
.callout .cal-body { flex: 1; min-width: 0; }

.bullets { display: flex; flex-direction: column; gap: 2px; }
.bullet { display: flex; align-items: flex-start; gap: 8px; padding: 2px 4px; border-radius: 4px; }
.bullet:hover { background: var(--bg-hover); }
.bullet .dot { color: var(--text-dim); line-height: 1.6; flex: 0 0 auto; }
.bullet .txt { flex: 1; outline: none; min-height: 21px; }
.bullet .txt:empty::before { content: attr(data-ph); color: var(--text-faint); }
.bullet .del { opacity: 0; color: var(--text-faint); padding: 0 4px; border-radius: 3px; }
.bullet:hover .del { opacity: 1; }
.bullet .del:hover { background: var(--bg-active); color: var(--red); }
.add-line { display: flex; align-items: center; gap: 6px; color: var(--text-faint); padding: 3px 4px; font-size: 13px; border-radius: 4px; }
.add-line:hover { background: var(--bg-hover); color: var(--text-dim); }
.add-hint { color: var(--text-faint); font-size: 12px; }
.pop-opt .opt-del { flex: 0 0 auto; }

.conf-box { margin: 8px 0 4px; }
.conf-box .tags { gap: 6px; margin-bottom: 6px; }
.conf-box .tag { padding: 3px 6px 3px 9px; font-size: 13px; line-height: 20px; }
.conf-box .tag .x { margin-left: 2px; padding: 0 3px; border-radius: 3px; }
.conf-box .tag .x:hover { background: #ffffff26; }
.conf-vide { color: var(--text-faint); font-size: 12.5px; margin-bottom: 6px; max-width: 560px; line-height: 1.45; }

.note-area {
  width: 100%; min-height: 90px; resize: vertical; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; outline: none;
}
.note-area:focus { border-color: var(--border-strong); }

/* toggle sections screenshots */
.shot-block { border-radius: var(--radius); overflow: hidden; margin: 10px 0; border: 1px solid var(--border); }
.shot-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 12px; font-weight: 600; font-size: 13.5px; color: var(--text-strong);
}
.shot-head .arrow { transition: transform .15s; font-size: 10px; opacity: .7; }
.shot-block.open .shot-head .arrow { transform: rotate(90deg); }
.shot-head .count { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-dim); }
.shot-body { padding: 12px; display: none; background: var(--bg-input); }
.shot-block.open .shot-body { display: block; }
.shot-b1 .shot-head { background: #2383e226; } .shot-b1 { border-color: #2383e24d; }
.shot-b2 .shot-head { background: #d9730d26; } .shot-b2 { border-color: #d9730d4d; }
.shot-b3 .shot-head { background: #4dab6d26; } .shot-b3 { border-color: #4dab6d4d; }
.shot-b4 .shot-head { background: #d9a44126; } .shot-b4 { border-color: #d9a4414d; }

.dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 22px 12px;
  text-align: center; color: var(--text-faint); font-size: 12.5px; cursor: pointer; transition: .12s;
}
.dropzone:hover, .dropzone.hot { border-color: var(--accent); color: var(--accent); background: #2383e20f; }
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 10px; margin-bottom: 10px; }
.shot-item { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #000; }
.shot-item img { display: block; width: 100%; height: 130px; object-fit: cover; cursor: zoom-in; }
.shot-item .rm {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 4px;
  background: #000000a6; color: #fff; opacity: 0; font-size: 12px;
}
.shot-item:hover .rm { opacity: 1; }
.shot-item .rm:hover { background: var(--red); }
.shot-cap {
  padding: 6px 8px 7px; font-size: 12px; line-height: 1.4; color: var(--text-dim);
  background: var(--bg-card); border-top: 1px solid var(--border); outline: none; min-height: 30px;
  cursor: text; word-break: break-word;
}
.shot-cap:empty::before { content: attr(data-ph); color: var(--text-faint); }
.shot-cap:hover { background: var(--bg-hover); }
.shot-cap:focus { background: var(--bg-hover); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }

/* ─────────── table (database) ─────────── */
.db-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.view-tabs { display: flex; gap: 2px; margin-right: auto; }
.view-tab { padding: 4px 9px; border-radius: 4px; color: var(--text-dim); font-size: 13.5px; font-weight: 500; }
.view-tab:hover { background: var(--bg-hover); color: var(--text); }
.view-tab.active { color: var(--text-strong); background: var(--bg-active); }
.tool-btn { padding: 4px 9px; border-radius: 4px; color: var(--text-dim); font-size: 13px; display: flex; align-items: center; gap: 5px; }
.tool-btn:hover { background: var(--bg-hover); color: var(--text); }
.tool-btn.on { color: var(--accent); background: #2383e21a; }
.search-box { display: flex; align-items: center; gap: 6px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 9px; }
.search-box input { background: none; border: 0; outline: none; width: 160px; font-size: 13px; }

.table-wrap { overflow-x: auto; margin: 0 -4px; }
table.db { border-collapse: collapse; width: 100%; min-width: 1080px; font-size: 13px; }
table.db th {
  text-align: left; font-weight: 500; color: var(--text-dim); font-size: 12.5px;
  padding: 6px 8px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0; background: var(--bg); z-index: 2; cursor: pointer;
}
table.db th:hover { background: var(--bg-hover); }
table.db th .ic { opacity: .6; margin-right: 5px; }
table.db th .sort { color: var(--accent); margin-left: 4px; }
table.db td {
  padding: 5px 8px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  vertical-align: middle; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.db tr:hover td { background: var(--bg-hover); }
table.db td.editable { cursor: pointer; }
table.db td.cell-title { font-weight: 500; color: var(--text-strong); }
.row-open { display: inline-flex; align-items: center; gap: 6px; }
.row-open .ic { opacity: .8; }
.row-open .open-btn {
  opacity: 0; margin-left: 6px; font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-dim);
}
tr:hover .open-btn { opacity: 1; }
.row-open .open-btn:hover { color: var(--text-strong); }
.tr-add td { color: var(--text-faint); cursor: pointer; }
.tr-add:hover td { background: var(--bg-hover); color: var(--text-dim); }
td .cell-input { width: 100%; background: var(--bg-elev); border: 1px solid var(--accent);
  border-radius: 3px; padding: 2px 5px; outline: none; }
.db-footer { padding: 8px 4px; color: var(--text-faint); font-size: 12.5px; display: flex; gap: 18px; flex-wrap: wrap; }
.db-footer b { color: var(--text); font-weight: 600; }

/* ─────────── gallery ─────────── */
.gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 12px; padding: 12px 0; }
.g-card { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); overflow: hidden; cursor: pointer; transition: .12s; }
.g-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.g-thumb { height: 150px; background: var(--bg-input); display: grid; place-items: center;
  color: var(--text-faint); font-size: 11px; position: relative; overflow: hidden; }
.g-thumb img { width: 100%; height: 100%; object-fit: cover; }
.g-badge {
  position: absolute; left: 7px; bottom: 7px; background: #000000a6; color: #fff;
  font-size: 10px; letter-spacing: .03em; padding: 2px 7px; border-radius: 4px; backdrop-filter: blur(3px);
}
.g-card:hover .g-thumb img { transform: scale(1.03); }
.g-thumb img { transition: transform .18s; }

/* sélecteur d'année */
.an-tabs { display: flex; gap: 2px; background: var(--bg-input); border-radius: 6px; padding: 2px; }
.an-tab { padding: 4px 11px; border-radius: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.an-tab:hover { color: var(--text); }
.an-tab.active { background: var(--accent); color: #fff; }
.g-body { padding: 10px 12px 12px; }
.g-title { font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 6px; }
.g-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.g-pnl { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ─────────── dashboard ─────────── */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
  margin: 6px 0 10px; background: var(--border); border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden;
}
.kpi { background: var(--bg-card); padding: 13px 16px 12px; position: relative; border: 0; border-radius: 0; }
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0;
  transition: opacity .2s;
}
.kpi:hover::before { opacity: 1; }
.kpi .k-lab { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .09em; }
.kpi .k-val {
  font-family: var(--mono); font-size: 25px; font-weight: 600; color: var(--text-strong); margin-top: 5px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.kpi .k-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

.panels { display: grid; grid-template-columns: repeat(auto-fit,minmax(330px,1fr)); gap: 12px; }
.panel { border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px; padding: 14px 16px 16px; min-width: 0; }
.panel h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text-strong); display: flex; justify-content: space-between; }
.panel h4 span { color: var(--text-faint); font-weight: 400; }
.panel.wide { grid-column: 1 / -1; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-size: 11px; fill: var(--text-faint); font-family: var(--font); }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { stroke: var(--border-strong); stroke-width: 1; }

.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 74px; align-items: center; gap: 10px; font-size: 12.5px; }
.bar-row .lab { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 8px; border-radius: 4px; background: var(--bg-input); position: relative; overflow: hidden; }
.bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.bar-row .val { text-align: right; font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: 0; }

/* ─────────── backtest ─────────── */
.bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin: 8px 0 6px; }
.bt-card {
  border: 1px solid var(--border); background: var(--bg-card); border-radius: 10px;
  padding: 14px 16px 12px; cursor: pointer; transition: .12s;
}
.bt-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.bt-card-head { display: flex; align-items: baseline; gap: 8px; }
.bt-nom { font-size: 15.5px; font-weight: 650; color: var(--text-strong); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-chg { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bt-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; }
.spark { width: 100%; height: 46px; display: block; margin-bottom: 10px; }
.spark-vide { height: 46px; display: grid; place-items: center; font-size: 11.5px; color: var(--text-faint); margin-bottom: 10px; }
.bt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
.bt-stats div { display: flex; flex-direction: column; }
.bt-stats span { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; }
.bt-stats b { font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }

table.bt-compare { min-width: 900px; }
table.bt-compare tbody tr { cursor: pointer; }
table.bt-compare tbody tr:hover td { background: var(--bg-active); }

table.bt-table { min-width: 780px; }
table.bt-table td { padding: 3px 6px; }
table.bt-table select, table.bt-table input {
  width: 100%; background: var(--bg-input); border: 1px solid transparent; border-radius: 4px;
  padding: 4px 6px; outline: none; font-size: 12.5px;
}
table.bt-table select:hover, table.bt-table input:hover { border-color: var(--border); }
table.bt-table select:focus, table.bt-table input:focus { border-color: var(--accent); background: var(--bg-elev); }
table.bt-table .bt-r { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
table.bt-table .bt-num { color: var(--text-faint); width: 34px; }
.bt-derive { font-weight: 600; }
.bt-del { color: var(--text-faint); padding: 2px 6px; border-radius: 4px; opacity: 0; }
table.bt-table tr:hover .bt-del { opacity: 1; }
.bt-del:hover { background: #e0574a24; color: var(--red); }

/* checklist « respect du plan » */
.respect-box { margin: 8px 0 4px; }
.respect-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.respect-head b { font-size: 17px; font-variant-numeric: tabular-nums; }
.respect-head span { color: var(--text-faint); font-size: 12.5px; }
.respect-bar { flex: 1; max-width: 260px; height: 8px; border-radius: 4px; background: var(--bg-input); overflow: hidden; }
.respect-bar div { height: 100%; border-radius: 4px; transition: width .18s; }
.respect-list { display: flex; flex-direction: column; gap: 3px; }
.respect-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-card); font-size: 13.5px; color: var(--text-dim);
}
.respect-item:hover { border-color: var(--border-strong); color: var(--text); }
.respect-item.on { color: var(--text-strong); background: #4dab6d14; border-color: #4dab6d40; }
.respect-item .chk { flex: 0 0 auto; }
.respect-item.on .chk { background: var(--green); border-color: var(--green); }
.respect-note { margin-top: 9px; font-size: 12.5px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }

.sess-liste { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 6px; }
.mae-aide { background: #2383e214; border-color: #2383e240; }
.mae-aide .cal-body { font-size: 13px; line-height: 1.6; }
.mae-aide b { color: var(--text-strong); }
.mae-ex { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border-strong);
  color: var(--text-dim); font-size: 12.5px; }

/* ─────────── playbooks, score, constats ─────────── */
.pb-sub { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; margin: -2px 0 8px; }
.score-big { font-size: 46px; font-weight: 700; text-align: center; color: var(--text-strong);
  letter-spacing: -.03em; line-height: 1; margin-bottom: 2px; }

.constats { display: flex; flex-direction: column; gap: 7px; }
.constat { display: flex; gap: 10px; padding: 10px 13px; border-radius: 8px; font-size: 13.5px;
  line-height: 1.5; border: 1px solid var(--border); background: var(--bg-card); }
.constat .c-ic { flex: 0 0 auto; }
.constat b { color: var(--text-strong); }
.constat.c-bon { background: #4dab6d14; border-color: #4dab6d40; }
.constat.c-mauvais { background: #e0574a14; border-color: #e0574a40; }
.constat.c-neutre { background: #2383e214; border-color: #2383e240; }

.al-next.al-stop { color: var(--red); border-top-color: #e0574a59; }
.al-next.al-stop b { color: var(--red); }

/* ─────────── profil & risque ─────────── */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.pf-field { border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px; padding: 10px 12px 11px; }
.pf-field label { display: block; font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.pf-input { display: flex; align-items: baseline; gap: 5px; margin: 4px 0 5px; }
.pf-input input {
  width: 100%; background: none; border: 0; outline: none; padding: 0;
  font-size: 23px; font-weight: 650; color: var(--text-strong); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; -moz-appearance: textfield;
}
.pf-input input::-webkit-outer-spin-button, .pf-input input::-webkit-inner-spin-button { opacity: .25; }
.pf-input span { font-size: 13px; color: var(--text-faint); flex: 0 0 auto; }
.pf-input select {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font-size: 19px; font-weight: 650; color: var(--text-strong); outline: none;
}
.pf-field small { display: block; font-size: 11.5px; color: var(--text-faint); line-height: 1.35; }

table.paliers { min-width: 560px; }      /* 5 colonnes seulement : pas besoin des 1080px du journal */
table.paliers td { white-space: nowrap; }
table.paliers tr.pf-up td:first-child b { color: var(--green); }
table.paliers tr.pf-down td:first-child b { color: var(--red); }
table.paliers tr.pf-now td { background: #2383e224; }
table.paliers tr.pf-now:hover td { background: #2383e233; }
table.paliers tr.pf-stop td { color: var(--red); background: #e0574a14; font-size: 12.5px; }

/* encart d'alerte du dashboard */
.alerte { display: flex; gap: 13px; padding: 14px 16px; border-radius: 9px; margin: 4px 0 14px; border: 1px solid var(--border); }
.alerte .al-ic { font-size: 22px; line-height: 1.1; }
.al-titre { font-weight: 650; color: var(--text-strong); font-size: 14.5px; margin-bottom: 3px; }
.al-txt { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.al-risque { font-size: 15px; }
.al-next { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.alerte-neutre { background: #2383e214; border-color: #2383e240; }
.alerte-up     { background: #4dab6d1a; border-color: #4dab6d4d; }
.alerte-down   { background: #d9a4411a; border-color: #d9a44159; }
.alerte-stop   { background: #e0574a1f; border-color: #e0574a73; }
.alerte-stop .al-titre { color: var(--red); }

/* ─────────── calendrier ─────────── */
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-head .m { font-size: 17px; font-weight: 600; color: var(--text-strong); min-width: 180px; }
.cal-nav { width: 28px; height: 28px; border-radius: 5px; color: var(--text-dim); border: 1px solid var(--border); }
.cal-nav:hover { background: var(--bg-hover); color: var(--text); }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11.5px; color: var(--text-faint); padding-bottom: 2px; text-transform: uppercase; }
.cal-cell { min-height: 84px; border: 1px solid var(--border); border-radius: 6px; padding: 6px; background: var(--bg-card); }
.cal-cell.out { opacity: .35; }
.cal-cell.win { background: #4dab6d1a; border-color: #4dab6d4d; }
.cal-cell.loss { background: #e0574a1a; border-color: #e0574a4d; }
.cal-cell .d { font-size: 11.5px; color: var(--text-faint); }
.cal-cell .p { font-size: 14px; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cal-cell .n { font-size: 11px; color: var(--text-faint); }
.cal-cell.today .d { color: var(--accent); font-weight: 700; }

/* ─────────── popover / overlays ─────────── */
.popover {
  position: fixed; z-index: 60; background: var(--bg-elev); border-radius: 8px; box-shadow: var(--shadow);
  min-width: 220px; max-width: 320px; padding: 6px; max-height: 70vh; overflow: auto;
}
.pop-search { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px;
  padding: 5px 8px; outline: none; margin-bottom: 6px; font-size: 13px; }
.pop-lab { font-size: 11px; color: var(--text-faint); padding: 4px 8px; }
.pop-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 8px; border-radius: 5px; font-size: 13px; }
.pop-opt:hover { background: var(--bg-hover); }
.pop-opt .check { margin-left: auto; color: var(--accent); font-size: 12px; }
.opt-del { margin-left: auto; color: var(--text-faint); font-size: 11px; padding: 2px 5px; border-radius: 4px; }
.pop-opt .check + .opt-del { margin-left: 6px; }
.opt-del:hover { background: var(--bg-active); color: var(--red); }
.pop-opt.danger { color: var(--red); }
.pop-sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* titre + bouton « choisir une paire » */
.title-row { display: flex; align-items: center; gap: 6px; }
.title-row .page-title { flex: 0 1 auto; min-width: 40px; }
.title-row:not(:hover) .title-pick { opacity: .35; }
.title-pick {
  width: 30px; height: 30px; border-radius: 6px; color: var(--text-faint);
  border: 1px solid var(--border); font-size: 15px; line-height: 1; flex: 0 0 auto; margin-top: 10px;
}
.title-pick:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }

/* sélecteur de date */
.dp { width: 244px; padding: 2px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 8px; }
.dp-m { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.dp-nav { width: 24px; height: 24px; border-radius: 5px; color: var(--text-dim); font-size: 15px; }
.dp-nav:hover { background: var(--bg-hover); color: var(--text); }
.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow span { text-align: center; font-size: 10.5px; color: var(--text-faint); padding-bottom: 4px; }
.dp-d { height: 30px; border-radius: 5px; font-size: 12.5px; color: var(--text); }
.dp-d:hover { background: var(--bg-hover); }
.dp-d.now { color: var(--accent); font-weight: 700; }
.dp-d.sel { background: var(--accent); color: #fff; font-weight: 600; }
.dp-foot { display: flex; gap: 4px; }
.dp-foot .pop-opt { justify-content: center; font-size: 12.5px; }

/* sélecteur d'heure — même gabarit que le sélecteur de date */
.tp { width: 244px; padding: 2px; }
.tp-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; }
.tp-cur { font-size: 15px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.tp-saisie {
  margin-left: auto; width: 78px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 7px; color: var(--text); font-size: 12.5px;
  text-align: center; outline: none;
}
.tp-saisie:focus { border-color: var(--accent); }
.tp-saisie.ko { border-color: var(--red); color: var(--red); }
.tp-h, .tp-m { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.tp-c { height: 28px; border-radius: 5px; font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.tp-c:hover { background: var(--bg-hover); }
.tp-c.sel { background: var(--accent); color: #fff; font-weight: 600; }

/* champ calculé : on explique au lieu d'ouvrir une saisie qui ne sert à rien */
.pop-info { font-size: 12px; color: var(--text-dim); padding: 2px 8px 6px; max-width: 236px; line-height: 1.45; }

/* écran de connexion : onglets connexion / inscription */
.login-onglets { display: flex; gap: 4px; margin: 2px 0 10px; }
.login-onglet {
  flex: 1 1 0; padding: 7px 10px; border-radius: 7px; font-size: 13px;
  color: var(--text-dim); border: 1px solid transparent; background: transparent;
}
.login-onglet:hover { background: var(--bg-hover); color: var(--text); }
.login-onglet.actif { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-strong); font-weight: 600; }
.login-sous { margin: 0 0 12px; }

/* mon compte : pseudo, rôle, inscriptions */
.cpt-pseudo { font-size: 17px; font-weight: 650; color: var(--text-strong); margin: 5px 0 6px; display: flex; align-items: baseline; gap: 8px; }
.cpt-role { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.cpt-bascule { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.cpt-bascule .tb-btn.off { background: var(--bg-hover); color: var(--text); border: 1px solid var(--border-strong); }
.cpt-compte { font-size: 12px; color: var(--text-faint); }

/* mon compte : pseudo et changement de mot de passe */
.pf-input input[data-set-pseudo] { width: 100%; text-align: left; }
.cpt-mdp { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cpt-mdp input {
  flex: 1 1 170px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 9px; color: var(--text); font-size: 13px; outline: none;
}
.cpt-mdp input:focus { border-color: var(--accent); }
.cpt-mdp .tb-btn { flex: 0 0 auto; }

/* sélecteur d'unité R / devise */
.u-switch {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 7px; border-radius: 4px; border: 1px solid var(--border-strong);
  color: var(--text-faint); line-height: 16px; flex: 0 0 auto;
}
.u-switch:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.kpi .k-lab { display: flex; align-items: center; gap: 6px; }
.panel h4 { display: flex; align-items: center; gap: 8px; }
.panel h4 span { margin-left: 0; }
.u-master { white-space: nowrap; border: 1px solid var(--border); }
.u-master b { color: var(--accent); }

/* fiche d'une journée */
.sheet { position: fixed; inset: 0; z-index: 80; background: #0009; display: grid; place-items: center; padding: 24px; }
.sheet-box {
  width: min(600px, 100%); max-height: 86vh; overflow: auto; background: var(--bg-elev);
  border-radius: 12px; box-shadow: var(--shadow); padding: 20px 22px 22px;
}
.j-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.j-titre { font-size: 20px; font-weight: 660; color: var(--text-strong); letter-spacing: -.01em; text-transform: capitalize; }
.j-sous { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }
.j-close { margin-left: auto; width: 28px; height: 28px; border-radius: 6px; color: var(--text-dim); }
.j-close:hover { background: var(--bg-hover); color: var(--text); }
.sheet-box.large { width: min(880px, 100%); }
.j-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.j-kpis.six { grid-template-columns: repeat(6, 1fr); }
.j-grille { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
@media (max-width: 700px) { .j-kpis.six { grid-template-columns: repeat(3, 1fr); } .j-grille { grid-template-columns: 1fr; } }

/* tableau mensuel */
table.mensuel { min-width: 720px; }
table.mensuel tr.mois-actif { cursor: pointer; }
table.mensuel tr.mois-vide td { color: var(--text-faint); }
table.mensuel .mois-ouvrir {
  opacity: 0; font-size: 10px; padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--border); color: var(--text-faint); text-transform: uppercase;
}
table.mensuel tr.mois-actif:hover .mois-ouvrir { opacity: 1; }
table.mensuel tr.mois-actif:hover td { background: var(--bg-active); }
.j-kpi { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--bg-card); }
.j-lab { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.j-val { font-size: 17px; font-weight: 650; color: var(--text-strong); margin-top: 2px; font-variant-numeric: tabular-nums; }
.j-err { font-size: 12.5px; color: var(--text-dim); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.j-liste-lab { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.j-liste { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.j-trade {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-card);
}
.j-trade:hover { border-color: var(--accent); background: var(--bg-hover); }
.j-nom { font-weight: 600; color: var(--text-strong); }
.j-r { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.j-pnl { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 66px; text-align: right; }
.j-vide { color: var(--text-faint); font-size: 13px; padding: 10px 0; }
.j-new { width: 100%; }
@media (max-width: 560px) { .j-kpis { grid-template-columns: repeat(2, 1fr); } }

.lightbox { position: fixed; inset: 0; z-index: 90; background: #000000e6; display: grid; place-items: center; padding: 32px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 6px; box-shadow: 0 20px 60px #000; }
.lb-hint { position: absolute; bottom: 16px; color: #ffffff80; font-size: 12px; }
.lightbox { grid-auto-rows: min-content; align-content: center; gap: 12px; }
.lb-cap {
  max-width: min(760px, 92vw); text-align: center; color: #fff; font-size: 13.5px; line-height: 1.5;
  background: #ffffff14; padding: 9px 14px; border-radius: 8px; cursor: auto;
}

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 95;
  background: var(--bg-elev); color: var(--text); padding: 9px 16px; border-radius: 8px;
  box-shadow: var(--shadow); font-size: 13px;
}

.empty-state { text-align: center; padding: 70px 20px; color: var(--text-faint); }
.empty-state .big { font-size: 40px; margin-bottom: 10px; }
.empty-state .tb-btn { margin-top: 14px; display: inline-block; }

@media (max-width: 900px) {
  .page { padding: 0 20px 160px; }
  #sidebar { position: absolute; inset: 0 auto 0 0; z-index: 20; box-shadow: var(--shadow); }
  .prop-row { grid-template-columns: 150px 1fr; }
}
@media print { #sidebar, #topbar, #sb-resizer { display: none; } #content { overflow: visible; } }

/* ─────────────── RAPPORTS MENSUELS ─────────────── */

/* liste : générer un mois */
.rap-gen { display: flex; flex-wrap: wrap; gap: 8px; }
.rap-mois-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-card); color: var(--text-strong); font-size: 13.5px; font-weight: 600;
  text-align: left; transition: border-color .12s, background .12s;
}
.rap-mois-btn:hover { border-color: var(--accent); background: var(--bg-hover); }
.rap-mois-btn span { font-size: 11.5px; font-weight: 400; color: var(--text-faint); }
.rap-mois-btn.deja { opacity: .62; }
.rap-note { font-size: 12.5px; color: var(--text-faint); margin-top: 10px; }

/* liste : les revues archivées */
.rap-grille { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rap-carte {
  display: block; text-align: left; padding: 15px 16px 13px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
  transition: border-color .12s, transform .12s;
}
.rap-carte:hover { border-color: var(--accent); transform: translateY(-1px); }
.rap-mois { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.rap-chiffre { font-size: 26px; font-weight: 680; margin: 4px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rap-sous { font-size: 12.5px; color: var(--text-dim); }
.rap-date { font-size: 11px; color: var(--text-faint); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); }

/* la page d'un rapport */
.rap-barre { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; flex-wrap: wrap; }
.rap-actions { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.tb-btn.ghost.danger:hover { background: #e0574a1f; color: var(--red); }
.rap-entete { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.rap-fil { font-size: 11.5px; color: var(--text-faint); letter-spacing: .03em; margin-bottom: 8px; }
.rap-texte { font-size: 14px; line-height: 1.62; color: var(--text-dim); max-width: 72ch; }
.rap-texte p { margin: 0 0 9px; }
.rap-texte p:last-child { margin-bottom: 0; }
.rap-texte b { color: var(--text-strong); font-weight: 600; }

table.rap-tbl { min-width: 620px; }        /* pas les 1080 px du journal */
table.rap-tbl td { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.rap-tbl td:first-child { white-space: normal; color: var(--text-strong); }
table.rap-tbl tr.rap-fort td { background: #2383e21f; }

/* journées à retenir */
.rap-jours { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rap-jour { border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: 9px; padding: 12px 14px; background: var(--bg-card); }
.rj-date { font-size: 12px; color: var(--text-faint); text-transform: capitalize; }
.rj-r { font-size: 22px; font-weight: 680; font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.rj-n { font-size: 12.5px; color: var(--text-dim); }

/* règles chiffrées */
.rap-regles { list-style: none; padding: 0; margin: 6px 0 0; }
.rap-regles li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.rap-regles li:first-child { border-top: 1px solid var(--border-strong); }
.rr-no { font-size: 11px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.rr-quoi { font-size: 14.5px; font-weight: 620; color: var(--text-strong); }
.rr-gain { font-size: 13.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rr-pq { grid-column: 2 / 4; font-size: 13px; color: var(--text-dim); line-height: 1.55; }

/* trous de saisie */
.rap-trous { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border-top: 1px solid var(--border-strong); }
.rap-trous > div { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--border); }
.rt-q { display: block; font-size: 20px; font-weight: 680; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.rt-l { display: block; font-size: 12px; color: var(--text-faint); margin-top: 3px; line-height: 1.45; }

@media (max-width: 640px) {
  .rap-regles li { grid-template-columns: auto 1fr; }
  .rr-gain { grid-column: 2; }
  .rr-pq { grid-column: 1 / 3; }
}

/* impression / PDF : on garde la substance, on jette le mobilier */
@media print {
  .rap-barre, .u-switch { display: none !important; }
  .page.rapport { padding: 0; }
  .panel, .rap-carte, .rap-jour, .callout { break-inside: avoid; }
  h3.sec { break-after: avoid; }
  .table-wrap { overflow: visible; }
  table.rap-tbl { min-width: 0; }
}

/* ─────────────── MARCHÉ (données live) ─────────────── */

.m-etat { display: flex; align-items: center; gap: 12px; padding: 60px 0; color: var(--text-faint); font-size: 14px; }
.m-spin { width: 18px; height: 18px; border: 2px solid var(--border-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: m-tourne .8s linear infinite; }
@keyframes m-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .m-spin { animation-duration: 2.4s; } }

.m-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.m-barre-droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.m-age { font-size: 11.5px; color: var(--text-faint); }
.m-note { font-size: 11.5px; color: var(--text-faint); line-height: 1.55; margin-top: 10px; }
.m-vide { color: var(--text-faint); font-size: 12.5px; padding: 14px 0; }

/* bandeau de force des devises */
.m-bandeau { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.m-dev { padding: 11px 8px 12px; text-align: center; border-right: 1px solid var(--border); background: var(--bg-card); }
.m-dev:last-child { border-right: 0; }
.m-dev-code { font-size: 12px; font-weight: 650; color: var(--text-strong); letter-spacing: .06em; }
.m-dev-var { font-size: 15px; font-weight: 680; margin-top: 4px; font-variant-numeric: tabular-nums; }
.m-courbes { min-width: 620px; }

/* tuiles d'actifs */
.m-tuiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.m-tuile { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 12px 14px 10px; }
.m-t-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.m-t-nom { font-size: 12.5px; font-weight: 650; color: var(--text-strong); letter-spacing: .04em; }
.m-t-prix { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.m-t-spark { margin: 8px 0 6px; height: 54px; }
.m-t-spark svg { width: 100%; height: 54px; display: block; }
.m-t-spark.up svg path, .m-t-spark.up svg polyline { stroke: var(--green); }
.m-t-spark.dn svg path, .m-t-spark.dn svg polyline { stroke: var(--red); }
.m-t-pied { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.m-t-bps { color: var(--text-dim); font-size: 11.5px; }
.m-t-lib { margin-left: auto; font-size: 10.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; }
.m-t-err { color: var(--text-faint); font-size: 12px; padding: 18px 0; }

/* banques centrales */
.m-banques { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.m-banque { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 13px 15px; }
.m-b-tete { font-size: 12.5px; color: var(--text-dim); display: flex; align-items: baseline; gap: 6px; }
.m-b-tete b { color: var(--text-strong); font-size: 13.5px; }
.m-b-src { margin-left: auto; font-size: 10px; color: var(--text-faint); }
.m-b-taux { font-size: 27px; font-weight: 680; color: var(--text-strong); margin: 5px 0 2px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.m-b-mes { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }
.m-b-date { font-size: 10.5px; color: var(--text-faint); margin-top: 5px; }

.m-fed { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 12px; }
.m-fed-kpi { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: var(--bg-input); }
.m-fed-kpi .k-lab { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.m-fed-kpi .k-val { font-size: 19px; font-weight: 650; color: var(--text-strong); margin: 2px 0; font-variant-numeric: tabular-nums; }
.m-fed-kpi .k-sub { font-size: 11px; color: var(--text-dim); }

/* sources et limites */
.m-sources { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; background: var(--bg-card); }
.m-sources b { font-size: 12px; color: var(--text-strong); text-transform: uppercase; letter-spacing: .05em; }
.m-sources ul { margin: 8px 0 0; padding-left: 18px; }
.m-sources li { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin-bottom: 5px; }
.m-sources code { font-size: 11.5px; background: var(--bg-input); padding: 1px 4px; border-radius: 3px; }
.alerte code { font-size: 12px; background: #0003; padding: 1px 5px; border-radius: 3px; }

@media print { .m-barre, .m-sources { display: none; } }

/* ─── matrices de biais ─── */
.bi-onglets { display: flex; gap: 4px; margin-bottom: 10px; }
table.bi-tbl { min-width: 760px; font-size: 12px; }
table.bi-tbl th { text-align: center; padding: 6px 8px; }
table.bi-tbl th.bi-dev { font-size: 12px; font-weight: 700; color: var(--text-strong); letter-spacing: .06em; }
table.bi-tbl td { text-align: center; padding: 7px 8px; vertical-align: middle; white-space: nowrap; }
table.bi-tbl td.bi-nom { text-align: left; color: var(--text-dim); font-size: 12px; white-space: normal; min-width: 148px; }
table.bi-tbl tr:hover td { background: none; }
table.bi-tbl tr.bi-final td { border-top: 2px solid var(--border-strong); font-weight: 600; }
.bi-lab { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.bi-val { display: block; font-size: 10px; opacity: .72; font-variant-numeric: tabular-nums; margin-top: 1px; }

/* 5 niveaux, du plus haussier au plus baissier */
.bi-p2 { background: #1f7a4d38; color: #6ddb9d; }
.bi-p1 { background: #4dab6d24; color: #7fc99a; }
.bi-0  { background: #7d7d7d1a; color: var(--text-dim); }
.bi-m1 { background: #e0574a24; color: #ef9a90; }
.bi-m2 { background: #c0392b3d; color: #ff9c90; }
.bi-na { color: var(--text-faint); }
.bi-diag { background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--border) 4px, var(--border) 5px); }
[data-theme="light"] .bi-p2 { background: #1f7a4d2e; color: #12603a; }
[data-theme="light"] .bi-p1 { background: #4dab6d24; color: #1c7345; }
[data-theme="light"] .bi-m1 { background: #e0574a1f; color: #a8382c; }
[data-theme="light"] .bi-m2 { background: #c0392b30; color: #8f2418; }

table.bi-grille td { font-variant-numeric: tabular-nums; }
table.bi-grille .bi-lab { font-size: 10.5px; letter-spacing: .02em; }

/* classement des 28 paires */
.bi-liste { display: grid; gap: 3px; }
.bi-item { display: grid; grid-template-columns: 74px 104px 1fr 54px 108px; gap: 10px;
  align-items: center; padding: 7px 11px; border-radius: 6px; font-size: 12.5px; }
.bi-i-paire { font-weight: 700; letter-spacing: .03em; }
.bi-i-lab { font-size: 11.5px; }
.bi-i-jauge { height: 5px; background: #7d7d7d24; border-radius: 3px; overflow: hidden; }
.bi-i-jauge i { display: block; height: 100%; background: currentColor; opacity: .65; border-radius: 3px; }
.bi-i-ecart { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bi-i-carry { font-size: 10.5px; opacity: .7; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .bi-item { grid-template-columns: 66px 1fr 50px; }
  .bi-i-lab, .bi-i-carry { display: none; }
}

/* ─────────── connexion (mode hébergé) ─────────── */
.login {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 110%, var(--accent-soft), transparent 70%), var(--grille), var(--bg);
}
#login-fond { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
#login-fond svg { width: 100%; height: 100%; display: block; }
.login::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 40%, var(--bg) 100%);
}
.login-box {
  position: relative; z-index: 1; width: 100%; max-width: 372px;
  background: color-mix(in srgb, var(--bg-card) 84%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: inset 0 1px 0 #ffffff14, 0 30px 70px #00000080, var(--glow);
  padding: 30px 28px 22px; display: flex; flex-direction: column; gap: 10px; text-align: center;
}
.login-logo { display: flex; justify-content: center; }
.login-logo svg { width: 44px; height: 44px; display: block; }
.login-kicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-top: 2px;
}
.login-box h1 { font-size: 22px; margin: 0; color: var(--text-strong); letter-spacing: -.02em; font-weight: 750; }
.login-box p { margin: 0 0 6px; color: var(--text-dim); font-size: 13px; line-height: 1.45; }
.login-box input { width: 100%; padding: 10px 12px; border-radius: 7px; border: 1px solid var(--border-strong);
  background: var(--bg-input); color: var(--text); font-size: 15px; text-align: center; outline: none; }
.login-box input:focus { border-color: var(--accent); }
.login-box .tb-btn { width: 100%; padding: 10px; font-size: 14px; }
.login-box.busy .tb-btn { opacity: .6; pointer-events: none; }
.login-err { min-height: 18px; color: var(--red); font-size: 12.5px; }

/* serveur (Profil) et historique des versions */
.srv-etat { font-size: 14px; color: var(--text-strong); padding: 4px 0 2px; }
.srv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hist { max-height: 320px; overflow-y: auto; min-width: 250px; }
.hist .pop-opt { justify-content: space-between; }
.hist-v { color: var(--text-faint); font-size: 11.5px; }

/* ─────────── téléphone : menu escamotable ─────────── */
#sb-backdrop { position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .45); }
@media (max-width: 900px) {
  #sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; box-shadow: var(--shadow);
    width: min(var(--sb-w), 84vw); flex-basis: auto;
    transform: translateX(-100%); transition: transform .18s ease; }
  body.sb-open #sidebar { transform: none; }
  body.sb-open #sb-backdrop { display: block !important; }
  #sb-resizer { display: none; }
  body.sb-collapsed #sidebar { display: flex; }   /* le « replié » du bureau n'a pas de sens ici */
  .login-box { padding: 22px 18px 18px; }
}


/* ══════════════════════════════════════════════════════════
   Pupitre de trading — surcharges de refonte
   ══════════════════════════════════════════════════════════ */

/* grain fin sur toute la page : casse la platitude numérique */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
[data-theme="light"] body::before { opacity: .07; mix-blend-mode: multiply; }

/* barre latérale : hairline, item actif marqué par un trait d'accent */
#sidebar { border-right: 1px solid var(--border); }
.sb-section { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.sb-item { transition: background .15s, color .15s; border-radius: 5px; }
.sb-item.active { box-shadow: inset 2px 0 0 var(--accent); }
.sb-item .pnl { font-family: var(--mono); }
.sb-workspace { border: 1px solid var(--border); background: var(--bg-card); }

/* haut de page */
#topbar { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tb-user {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 6px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text); font-size: 12.5px;
  transition: border-color .15s, background .15s;
}
.tb-user:hover { border-color: var(--accent); background: var(--bg-hover); }
.tb-user .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.tb-user .qui { font-family: var(--mono); font-weight: 600; letter-spacing: .01em; }

/* bandeau de cotations */
#bande {
  flex: 0 0 26px; height: 26px; overflow: hidden; position: relative; white-space: nowrap;
  border-bottom: 1px solid var(--border); background: var(--bg-sidebar);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
#bande[hidden] { display: none; }
.bande-piste { display: inline-flex; align-items: center; height: 26px; animation: defile 90s linear infinite; will-change: transform; }
#bande:hover .bande-piste { animation-play-state: paused; }
.bande-item { display: inline-flex; align-items: baseline; gap: 7px; padding: 0 18px; border-right: 1px solid var(--border); }
.bande-item .nom { color: var(--text-dim); font-weight: 600; }
.bande-item .px { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.bande-item .var { font-variant-numeric: tabular-nums; }
.bande-item .var.up { color: var(--green); } .bande-item .var.down { color: var(--red); } .bande-item .var.flat { color: var(--text-faint); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* boutons : transitions, pression, focus clavier */
.tb-btn { background: var(--accent); color: var(--accent-ink); font-weight: 600; letter-spacing: .01em;
  transition: filter .15s, transform .12s, box-shadow .15s; box-shadow: 0 1px 0 #ffffff1a inset; }
.tb-btn:hover { filter: brightness(1.08); box-shadow: var(--glow); }
.tb-btn:active, .sb-item:active, .pop-opt:active, .tp-c:active, .dp-d:active { transform: translateY(1px); }
.tb-btn.ghost { background: none; color: var(--text-dim); box-shadow: none; }
.tb-btn.ghost:hover { background: var(--bg-hover); color: var(--text); box-shadow: none; }
:where(button, input, select, textarea, [contenteditable]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

/* tableau des trades : chiffres tabulaires, en-tête collant, ligne survolée soulignée d'accent */
table.db { font-variant-numeric: tabular-nums; }
table.db th { position: sticky; top: 0; z-index: 1; background: var(--bg);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
table.db td { transition: background .12s; }
table.db tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table.db td.cell-title { letter-spacing: -.01em; }
.db-footer { font-family: var(--mono); font-size: 12px; }
.mono { font-family: var(--mono); }

/* panneaux : plus de bordure lourde, une surface et un hairline */
.panel { border-color: var(--border); box-shadow: inset 0 1px 0 #ffffff08; transition: border-color .2s; }
.panel:hover { border-color: var(--border-strong); }
.panel h4 { font-size: 12.5px; letter-spacing: .02em; }
.panel h4 span { font-family: var(--mono); font-size: 11px; }
.pf-field { box-shadow: inset 0 1px 0 #ffffff08; }
.pf-field label, .kpi .k-lab { font-family: var(--mono); }
.pf-input input, .cpt-mdp input, .cpt-pseudo { font-variant-numeric: tabular-nums; }
.cpt-pseudo { font-family: var(--mono); }
.pf-input input[type=number] { font-family: var(--mono); }

/* titres de section */
h2.sec { letter-spacing: -.025em; font-weight: 750; }
h2.sec::before { content: "// "; color: var(--accent); font-family: var(--mono); font-weight: 600; font-size: .78em; letter-spacing: 0; }

/* connexion : champs et bouton */
.login-box input { font-family: var(--mono); font-size: 14px; letter-spacing: .01em; text-align: center;
  transition: border-color .15s, box-shadow .15s; }
.login-box input:focus { box-shadow: var(--glow); }
.login-box .tb-btn { margin-top: 4px; }
.login-onglet.actif { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); background: transparent; }

/* mouvement réduit : bandeau figé, pas de transitions superflues */
@media (prefers-reduced-motion: reduce) {
  .bande-piste { animation: none; }
  * { transition-duration: 0s !important; }
}

.kpi .k-val.up, .kpi .k-val.pos, .kpi .k-val.gain, .kpi .k-val.green { color: var(--green); }
.kpi .k-val.down, .kpi .k-val.neg, .kpi .k-val.perte, .kpi .k-val.red { color: var(--red); }


/* encart de palier (tableau de bord) : sur la palette, plus de bleu isolé */
.palier-encart { background: var(--accent-soft) !important; border-color: var(--border-strong) !important; box-shadow: inset 0 1px 0 #ffffff0a; }
/* KPI signés : les classes réelles sont num-pos / num-neg */
.kpi .k-val.num-pos { color: var(--green); }
.kpi .k-val.num-neg { color: var(--red); }

/* liens légaux et avis cookies */
a.sb-item.sb-lien { text-decoration: none; }
.login-legal { margin: 6px 0 0; font-size: 11.5px; color: var(--text-faint); }
.login-legal a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.login-legal a:hover { color: var(--accent); border-color: var(--accent); }
.avis-cookies {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 210;
  display: flex; align-items: center; gap: 14px; max-width: min(720px, calc(100% - 32px));
  padding: 10px 12px 10px 16px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: var(--text);
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent); border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow);
}
.avis-cookies[hidden] { display: none; }
.avis-cookies a { color: var(--accent); text-decoration: none; }
.avis-cookies .tb-btn { flex: 0 0 auto; }
.tb-btn.danger { background: var(--red); color: #fff; }
.pf-danger { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.cpt-suppr { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cpt-suppr input { flex: 1 1 200px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; color: var(--text); font-size: 13px; outline: none; }

/* Mon compte : les actions du compte, groupées */
.srv-actions .tb-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.srv-actions a.tb-btn { line-height: 1.5; }
.cpt-pseudo + small + .srv-actions { margin-top: 10px; }
#tb-user { cursor: pointer; }

/* menu des comptes : bloc de session */
#popover .pop-info { font-size: 11.5px; color: var(--text-dim); padding: 2px 8px 8px; max-width: 260px; line-height: 1.45; }

/* bandeau « journal local » : impossible à manquer, impossible à masquer */
#bandeau-local {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 14px; font-size: 12.5px; line-height: 1.4;
  background: color-mix(in srgb, var(--yellow) 16%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
  color: var(--text);
}
#bandeau-local[hidden] { display: none; }
.bl-pastille { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--yellow); border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent);
  border-radius: 999px; padding: 2px 9px; flex: 0 0 auto; }
.bl-txt { flex: 1 1 260px; min-width: 0; }
.bl-txt b { color: var(--text-strong); }
.bl-lien { flex: 0 0 auto; color: var(--accent-ink); background: var(--accent); text-decoration: none;
  font-weight: 600; padding: 4px 11px; border-radius: 6px; transition: filter .15s; }
.bl-lien:hover { filter: brightness(1.08); }