/* ------------------------------ 1. TOKENS ------------------------------- */
:root {
    --bg: #0a0f18;
    --sidebar-bg: #0b111c;
    --card: #111a28;
    --card-2: #0f1724;
    --card-3: #16202f;
    --line: #1e2a3d;
    --line-2: #24334a;

    --txt: #e8eef8;
    --txt-2: #b9c6db;
    --muted: #8593ab;
    --muted-2: #6c7c96;

    --blue: #5b8cff;
    --blue-2: #3b82f6;
    --blue-soft: #7ea6ff;
    --green: #22c55e;
    --green-2: #16a34a;
    --green-soft: #4ade80;
    --red: #ef4444;
    --red-2: #dc2626;
    --amber: #f59e0b;

    --r-sm: 4px;
    --r: 6px;
    --r-md: 8px;
    --r-lg: 10px;

    --sidebar-w: 199px;
    --gap: 10px;
}

/* ------------------------------ 2. RESET -------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--txt);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
p,
dl,
dd,
dt,
figure {
    margin: 0;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
button {
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
/* charts (ApexCharts) still render real SVG */
svg {
    display: block;
}
input,
textarea {
    font-family: inherit;
}

/* --------------------- 2b. ICONS (Remix Icon webfont) -------------------
   Icons are <i class="ri-*"> glyphs: they inherit the colour of their
   container and are sized with font-size instead of width/height.
   ---------------------------------------------------------------------- */
[class^="ri-"],
[class*=" ri-"] {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    font-weight: normal;
    font-variant: normal;
    letter-spacing: normal;
    text-transform: none;
}

/* sidebar */
.sidebar_close i {
    font-size: 15px;
}
.brand_crown i {
    font-size: 34px;
    background: linear-gradient(180deg, #ffe27a 0%, #f6c04a 45%, #d9971d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.nav_ico i {
    font-size: 15px;
}

/* KPI tiles */
.kpi_ico i {
    font-size: 17px;
}

/* icon squares in card headers */
.head-ico i {
    font-size: 14px;
    line-height: 0;
}
.head-ico--green i {
    font-size: 15px;
    color: #0b1220;
}
.head-ico--red i {
    color: #fff;
}
.head-ico--indigo i {
    color: #dbe6ff;
}
.head-ico--ghost i {
    font-size: 13px;
    color: #9fb4d8;
}

/* dropzones */
.drop_ico i {
    font-size: 22px;
    color: #7f93b8;
}

/* calendar arrow */
.cal_arrow i {
    font-size: 14px;
}

/* journal toolbar */
.search i,
.tbtn i {
    font-size: 13px;
}

/* journal row actions */
.acts .act i {
    font-size: 11px;
}


/* Scrollbars (dark) */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: #0c1421;
}
*::-webkit-scrollbar-thumb {
    background: #243349;
    border-radius: 20px;
}
*::-webkit-scrollbar-thumb:hover {
    background: #2e4160;
}

/* ------------------------------ 3. SHELL -------------------------------- */
.app {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

.main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px 14px;
}

/* --------------------------- 4. CARD PRIMITIVE -------------------------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 10px 11px;
    margin-bottom: var(--gap);
}

.card_head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}
.card_head--sm {
    margin-bottom: 8px;
}
.card_head--between {
    justify-content: space-between;
}

.card_titles {
    min-width: 0;
}

.card_title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.35px;
    color: var(--txt);
    text-transform: uppercase;
}
.card_title--blue {
    color: var(--blue-soft);
}
.card_title--lg {
    font-size: 13px;
    letter-spacing: 0.3px;
}

.card_sub {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
}

/* icon squares in card headers */
.head-ico {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--r);
    flex: none;
}
.head-ico--green {
    background: linear-gradient(180deg, #3ddc84, #22c55e);
}
.head-ico--red {
    background: linear-gradient(180deg, #f0564b, #d0362c);
}
.head-ico--indigo {
    background: #2c3f6b;
}
.head-ico--ghost {
    background: #1a2534;
    border: 1px solid var(--line-2);
    width: 22px;
    height: 22px;
}

.c-green {
    color: var(--green-soft) !important;
}
.c-red {
    color: #f87171 !important;
}

/* ----------------------------- 5. SIDEBAR ------------------------------- */
.sidebar {
    width: var(--sidebar-w);
    flex: none;
    align-self: stretch;
    min-height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid #16202f;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 12px 12px;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.brand_crown {
    margin-bottom: 1px;
}
.brand_title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.05;
    color: #fff;
}
.brand_sub {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #e9eefb;
    margin-top: 3px;
    margin-bottom: 5px;
}
.brand_ver {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #e9eefb;
    margin-top: 1px;
}

/* Nouveau trade button */
.btn-new {
    width: 100%;
    margin: 13px 0 15px;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--r-md);
    background: linear-gradient(180deg, #5b7cff, #4f6ef2);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 10px rgba(79, 110, 242, 0.35);
    transition:
        filter 0.15s ease,
        transform 0.12s ease;
}
.btn-new:hover {
    filter: brightness(1.07);
}
.btn-new:active {
    transform: translateY(1px);
}
.btn-new_plus {
    font-weight: 700;
    margin-right: 2px;
}
.btn-new i {
    margin-right: 3px;
}

/* nav */
.nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.nav_item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: var(--r-md);
    color: #c4d0e4;
    text-decoration: none;
    font-size: 12px;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}
.nav_ico {
    display: grid;
    place-items: center;
    width: 16px;
    color: #93a5c2;
    flex: none;
}
.nav_item:hover {
    background: #141e2d;
    color: #e6edf9;
}
.nav_item:hover .nav_ico {
    color: #b9c9e6;
}
.nav_item.is-active {
    background: #20304d;
    color: #fff;
    font-weight: 600;
}
.nav_item.is-active .nav_ico {
    color: #7ea6ff;
}

/* sidebar bottom */
.sidebar_bottom {
    padding-top: 14px;
    position: sticky;
    bottom: 12px;
}
.quote {
    background: #111a2b;
    border: 1px solid #1f2b41;
    border-radius: var(--r-md);
    padding: 14px 12px 12px;
    text-align: center;
}
.quote_txt {
    font-size: 12px;
    font-style: italic;
    color: #cfd9ea;
    line-height: 1.5;
}
.quote_author {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 700;
    color: #7ea6ff;
}
.version {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding-left: 2px;
    font-size: 11px;
    color: var(--muted);
}
.version .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

/* ------------------------------ 6. TOPBAR ------------------------------- */
.topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 11px;
}
.topbar_right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.month-pick {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 10px;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    color: var(--txt-2);
    font-size: 11px;
}
.month-pick:hover {
    border-color: #33456180;
    background: #152030;
}
.month-pick_chev {
    opacity: 0.75;
}

.icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #a9b8d1;
}
.icon-btn:hover {
    background: #16202f;
    color: #dbe5f5;
}
.icon-btn_badge {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    border: 1.5px solid var(--bg);
}

.avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg, #5b7cff, #4459d8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* -------------------------------- 7. KPIs ------------------------------- */
.kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) 1.67fr;
    gap: var(--gap);
    margin-bottom: var(--gap);
    margin-top: 3px;
}

.kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 65px;
    padding: 11px 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.kpi_ico {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border-radius: var(--r-md);
    flex: none;
}
.kpi_ico--amber {
    background: #2a2313;
    color: #f0b429;
}
.kpi_ico--green {
    background: #12291d;
    color: #34d399;
}
.kpi_ico--slate {
    background: #1c2637;
    color: #9fb2cd;
}
.kpi_ico--blue {
    background: #152742;
    color: #7aa8ff;
}
.kpi_ico--cyan {
    background: #0f2b33;
    color: #38bdf8;
}

.kpi_body {
    position: relative;
    z-index: 2;
    min-width: 0;
}
.kpi_label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 3px;
    white-space: nowrap;
}
.kpi_value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff;
    white-space: nowrap;
}

.kpi_spark {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 62%;
    height: 34px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.95;
}

/* drawdown KPI */
.drawdown-bg {
    background: #ff241417;
    border: 1px solid #ff241430;
}
.kpi--dd {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 9px 11px 9px 12px;
    background: #170f14;
    border-color: #3a1f26;
}
.kpi_ddleft {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.kpi_ddtitle {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #f0564b;
    text-transform: uppercase;
}
.kpi_ddspark {
    flex: 1 1 auto;
    min-height: 34px;
    margin-top: 2px;
}

.kpi_ddstats {
    flex: none;
    width: 154px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding-left: 4px;
}
.kpi_ddstats .form-select:focus, .kpi_ddstats .dd-input:focus {
    border: 1px solid var(--line-2);
    outline: none;
}
.ddstat {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 6px 8px;
}
.dd-two {
    display: flex;
    gap: 24px;
}
.ddstat_k {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #a5aebf;
    text-transform: uppercase;
    margin-right: 5px;
}
.dd-input {
    text-align: center;
    max-width: 56px;
    border: 1px solid #2c3d59;
    border-radius: var(--r);
    background: #0e1723;
    color: #fff;
    padding: 2.3px;
    font-size: 11px;
}
.ddstat_k--r {
    text-align: right;
}
.ddstat_v {
    font-size: 12px;
    font-weight: 700;
    color: #e9eef8;
    white-space: nowrap;
}
.ddstat_v--red {
    color: #f87171;
}
.ddstat_v--wide {
    grid-column: 2 / -1;
    text-align: right;
}

/* ------------------------- 8. MID SECTION GRID -------------------------- */
.mid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 385px;
    gap: var(--gap);
    margin-bottom: var(--gap);
    align-items: start;
}
.mid_left {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}
.mid_row {
    display: grid;
    gap: var(--gap);
    align-items: start;
}
.mid_row--top {
    grid-template-columns: 1.228fr 1.024fr 1fr;
    align-items: stretch;
}
.mid_row--bottom {
    grid-template-columns: 1fr 1.49fr 1fr;
}

.mid_stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}
.mid_right {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}
.align-middle {
    vertical-align: middle;
}

/* --------------------------- 9. CHECKLIST CARDS ------------------------- */
.card--check {
    display: flex;
    flex-direction: column;
    padding: 10px 11px 11px;
}

.score {
    margin-left: auto;
    align-self: flex-end;
    padding-bottom: 1px;
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
}
.score_val {
    font-weight: 700;
}
.score_val--green {
    color: #4ade80;
}
.score_val--red {
    color: #f87171;
}

.check {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
}

.check_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    min-height: 18px;
    padding: 0 3px 0 4px;
    background: #0e1724;
    border-radius: var(--r-sm);
}
/* Ligne à laquelle vous avez répondu (oui ou non) : un liseré à gauche, pour
   voir d'un coup d'œil ce qu'il reste à cocher sur 34 questions.
   box-shadow et non border : aucun décalage de la mise en page. */
.check_row.is-set {
    box-shadow: inset 2px 0 0 #24406b;
}
.check--wide .check_row {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    min-height: 19px;
    background: transparent;
}

.check_n {
    font-size: 10px;
    color: var(--muted-2);
    text-align: left;
}
.check--wide .check_n {
    color: #8593ab;
}

.check_lbl {
    font-size: 10px;
    color: #c3cfe2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opts {
    display: flex;
    gap: 3px;
    flex: none;
}

.opt {
    min-width: 32px;
    padding: 2px 5px 3px;
    border: 0;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
    transition:
        filter 0.12s ease,
        background 0.12s ease,
        color 0.12s ease;
}
.opt--yes {
    background: #1f8f4d57;
    color: #eafff1;
}
.opt--no {
    background: #182231;
    color: #8b9ab1;
    box-shadow: inset 0 0 0 1px #26334a;
}
.opt--yes:hover {
    filter: brightness(1.12);
}
.opt--no:hover {
    background: #1e2a3c;
    color: #aebbd0;
}

.opt.is-on.opt--yes {
    background: #22c55e;
    color: #fff;
    box-shadow:
        0 0 0 1px #38d97a inset,
        0 0 8px rgba(34, 197, 94, 0.35);
}
.opt.is-on.opt--no {
    background: #e0483c;
    color: #fff;
    box-shadow:
        0 0 0 1px #f0665a inset,
        0 0 8px rgba(224, 72, 60, 0.3);
}

/* ------------------------ 10. INTERPRÉTATION FINALE --------------------- */
.card--interp {
    padding: 10px 11px 11px;
}

.interp_txt {
    font-size: 10px;
    line-height: 1.62;
    color: #aab8cd;
    margin-bottom: 9px;
}

.itable {
    font-size: 10px;
    table-layout: fixed;
}
.itable th {
    padding: 5px 6px;
    background: #16202f;
    border: 1px solid #202c3f;
    color: #93a3ba;
    font-weight: 600;
    font-size: 10px;
    text-align: left;
    white-space: nowrap;
}
.itable td {
    padding: 5px 6px;
    border: 1px solid #202c3f;
    color: #c0cbdd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.itable tbody tr:nth-child(odd) td {
    background: #0f1826;
}
.itable tbody tr:nth-child(even) td {
    background: #121c2b;
}
.itable th:nth-child(1),
.itable td:nth-child(1) {
    width: 20%;
}
.itable th:nth-child(2),
.itable td:nth-child(2) {
    width: 22%;
}
.itable th:nth-child(3),
.itable td:nth-child(3) {
    width: 29%;
}

.tag {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.tag--green {
    background: #13301f;
    color: #5ee08e;
    box-shadow: inset 0 0 0 1px #1d5233;
}
.tag--amber {
    background: #2e2412;
    color: #f0b429;
    box-shadow: inset 0 0 0 1px #4c3a16;
}
.tag--red {
    background: #33161a;
    color: #f87171;
    box-shadow: inset 0 0 0 1px #57222a;
}

/* -------------------------- 11. NOTES PERSONNELLES ---------------------- */
.card--notes {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 10px 11px 11px;
}
.card--notes .card_title {
    margin-bottom: 7px;
}
.notes {
    flex: 1 1 auto;
    width: 100%;
    min-height: 64px;
    resize: none;
    background: transparent;
    border: 0;
    outline: none;
    color: #c7d3e5;
    font-size: 10px;
    line-height: 1.65;
    font-style: italic;
}
.notes::placeholder {
    color: #7c8ba3;
    font-style: italic;
}

/* ------------------------ 12. DÉTAILS DU TRADE -------------------------- */
.card--details {
    padding: 10px 11px 11px;
}

.details {
    display: grid;
    grid-template-columns: 1.06fr 1fr;
    gap: 6px 16px;
}
.dl {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dl_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 17px;
}
.dl dt {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
}
.dl dd {
    font-size: 10px;
    color: #dbe4f2;
    text-align: right;
    white-space: nowrap;
}
.dd--strong {
    font-weight: 600;
    color: #e9eff9;
}
.dd--num {
    font-weight: 600;
    color: #e9eff9;
    letter-spacing: 0.2px;
}

.badge {
    display: inline-block;
    padding: 2px 8px 3px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
}
.badge--buy {
    background: #1a6b3d;
    color: #d8ffe8;
}
.badge--sell {
    background: #a32e26;
    color: #ffe3e0;
}

.chip {
    display: inline-block;
    padding: 2px 7px 3px;
    border-radius: 3px;
    background: #1b2434;
    box-shadow: inset 0 0 0 1px #27334a;
    color: #aebbd0;
    font-size: 10px;
    letter-spacing: 0.1px;
}

/* --------------------------- 13. DROPZONES ------------------------------ */
.card--shot {
    display: flex;
    flex-direction: column;
    padding: 10px 11px 11px;
}

.drop {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 128px;
    padding: 14px 10px;
    border: 1px dashed #2c3d59;
    border-radius: var(--r);
    background: #0e1723;
    text-align: center;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}
.drop.drop--coach {
    gap: 0px !important;
    padding: 13px 10px;
}
.drop:hover {
    border-color: #3d5580;
    background: #101c2b;
}
.drop_ico {
    margin-bottom: 2px;
}
.drop_t {
    font-size: 10px;
    color: #93a3bb;
}
.drop_s {
    font-size: 10px;
    color: #6e7f99;
    margin-top: 3px;
}

.drop--coach {
    min-height: 104px;
}
.btn-blue {
    margin-top: 5px;
    padding: 4px 12px 5px;
    border: 0;
    border-radius: var(--r-sm);
    background: #2f5fd0;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.btn-blue:hover {
    background: #376ce4;
}

/* ---------------------------- 14. CALENDRIER ---------------------------- */
.card--cal {
    padding: 9px 10px 10px;
}
.card--cal .card_head {
    margin-bottom: 7px;
}

.cal_nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cal_month {
    padding: 4px 7px;
    background: #182335;
    border-radius: var(--r-sm);
    color: #c0cbdd;
    text-align: center;
    font-size: 10px;
}
.cal_arrow {
    border: 0;
    background: transparent;
    color: #93a3ba;
    border-radius: 3px;
}
.cal_arrow:hover {
    background: #1b2739;
    color: #cfd9ea;
}

.cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}
.cal_dow {
    padding: 2px 0 4px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: #8593ab;
}
.cal_cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 32px;
    padding: 2px 1px;
    border-radius: var(--r-sm);
    background: #0f1826;
    box-shadow: inset 0 0 0 1px #1a2536;
}
.cal_d {
    font-size: 10px;
    color: #a7b4c8;
    line-height: 1.1;
}
.cal_v {
    font-size: 8px;
    font-weight: 700;
    line-height: 1.1;
}

.cal_cell.is-out {
    background: #0c1420;
    box-shadow: inset 0 0 0 1px #16202e;
}
.cal_cell.is-out .cal_d {
    color: #5a6a80;
}

.cal_cell.is-win {
    background: #0f2418;
    box-shadow: inset 0 0 0 1px #1c4029;
}
.cal_cell.is-win .cal_v {
    color: #4ade80;
}

.cal_cell.is-loss {
    background: #2a1216;
    box-shadow: inset 0 0 0 1px #4a1e24;
}
.cal_cell.is-loss .cal_v {
    color: #f87171;
}

.cal_cell.is-be {
    background: #161f2d;
    box-shadow: inset 0 0 0 1px #23304a;
}
.cal_cell.is-be .cal_v {
    color: #a8b6cb;
}

/* ------------------------ 15. FRÉQUENCE DES TRADES ---------------------- */
.card--freq {
    padding: 9px 10px 10px;
}
.card--freq .card_title {
    margin-bottom: 8px;
}

.freq {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.freq_box {
    padding: 7px 8px 6px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r);
}
.freq_t {
    font-size: 10px;
    font-weight: 600;
    color: #7ea6ff;
}
.freq_s {
    font-size: 10px;
    color: #7f8ea6;
    margin-top: 2px;
}
.freq_v {
    font-size: 11px;
    font-weight: 700;
    color: #e6ecf7;
    margin-top: 1px;
}
.freq_chart {
    height: 26px;
    margin: 4px -3px -4px;
}

/* ------------------------ 16. JOURNAL DES TRADES ------------------------ */
.card--journal {
    padding: 10px 11px 11px;
    margin-bottom: var(--gap);
}

.jhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}
.jhead_title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #eaf0fa;
    text-transform: uppercase;
}
.jhead_tools {
    display: flex;
    align-items: center;
    gap: 7px;
}

.search {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 23px;
    padding: 0 8px;
    background: #0f1826;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: #7f8ea6;
}
.search:focus-within {
    border-color: #33507e;
}
.search input {
    width: 112px;
    background: transparent;
    border: 0;
    outline: none;
    color: #dbe4f2;
    font-size: 10px;
}
.search input::placeholder {
    color: #75849c;
}
.d-flex {
    display: flex;
}
.align-center {
    align-items: center;
}
.no-wrap {
    white-space: nowrap;
}
.form-select {
    border: 1px solid #2c3d59;
    border-radius: var(--r);
    background: #0e1723;
    color: #fff;
    padding: 3px;
    font-size: 11px;
}
.tbtn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 23px;
    padding: 0 9px;
    background: #16202f;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: #b3c1d6;
    font-size: 10px;
    white-space: nowrap;
}
.tbtn:hover {
    background: #1c283a;
    color: #dbe4f2;
}
.tbtn--icon {
    padding: 0 7px;
}
.tbtn--danger {
    color: #ea6a63;
}
.tbtn--danger:hover {
    background: #2b1418;
    color: #f98b84;
    border-color: #4a2027;
}

.jtable-wrap {
    overflow-x: auto;
}
.jtable {
    font-size: 10px;
    min-width: 1050px;
}
.jtable th {
    padding: 6px 5px;
    background: #16202f;
    border: 1px solid #202c3f;
    color: #95a4bb;
    font-weight: 600;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
}
.jtable td {
    padding: 5px 5px;
    border: 1px solid #1c2739;
    color: #c6d1e2;
    text-align: center;
    white-space: nowrap;
}
.jtable tbody tr:nth-child(odd) td {
    background: #0f1826;
}
.jtable tbody tr:nth-child(even) td {
    background: #121c2b;
}
.jtable tbody tr:hover td {
    background: #16233a;
}
.jtable .w-num {
    width: 30px;
}
.acts {
    display: flex;
    justify-content: center;
}
.acts .act {
    display: flex;
    align-items: center;
    width: 17px;
    height: 17px;
    margin: 0 2px;
    border: 0;
    border-radius: 3px;
    color: #fff;
    vertical-align: middle;
    justify-content: center;
}
.act--edit {
    background: #2f5fd0;
    border: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 5px;
}
.act--edit:hover {
    background: #3a6ee6;
}
.act--del {
    background: #c0392f;
    border: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 5px;
}
.act--del:hover {
    background: #d84539;
}

/* --------------------------- 17. BOTTOM ROW ----------------------------- */
.bottom {
    display: grid;
    grid-template-columns: 1.32fr 1.17fr 1fr 2.27fr;
    gap: var(--gap);
    align-items: stretch;
}
.card--chart,
.card--perf {
    display: flex;
    flex-direction: column;
    padding: 10px 11px 9px;
}
.card--chart .card_title,
.card--perf .card_title {
    margin-bottom: 6px;
}

.chart {
    width: 100%;
}
/*.chart--equity {
    height: 118px;
    margin: 0 -4px;
}*/
/*.chart--dd {
    height: 118px;
    margin: 0 -4px;
}
*/
.legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #9aa8bf;
}
.legend--center {
    justify-content: center;
    margin-top: 1px;
}
.legend_line {
    display: inline-block;
    width: 15px;
    height: 2px;
    border-radius: 2px;
    position: relative;
}
.legend_line--green {
    background: #22c55e;
}
.legend_line--red {
    background: #ef4444;
}
.legend_line::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: inherit;
}

/* Distribution donut */
.dist {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding-top: 2px;
}
.dist_donut {
    position: relative;
    width: 115px;
    height: 115px;
    flex: none;
}
.dist_chart {
    width: 115px;
    height: 115px;
}
.dist_center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    pointer-events: none;
    z-index: 3;
    text-align: center;
}
.dist_center b {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
}
.dist_center span {
    font-size: 10px;
    color: #b3c0d4;
}

.dist_legend {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.dist_legend li {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    color: #b8c4d8;
}
.dist_legend i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}
.dist_legend b {
    font-weight: 600;
    color: #cdd8e8;
}

/* Performance en R */
.perf {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
    padding-top: 2px;
}
.perf_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 9px 10px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r);
}
.perf_k {
    font-size: 10px;
    color: #8b99b0;
}
.perf_v {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* Drawdown block */
.dd2 {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 196px;
    gap: 12px;
    align-items: center;
}
.dd2_chart {
    min-width: 0;
}
.dd2_stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ddrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ddrow_k {
    font-size: 10px;
    color: #93a1b8;
    white-space: nowrap;
}
.ddrow_v {
    min-width: 72px;
    padding: 5px 8px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r-sm);
    color: #eaf0fa;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.ddrow_v--red {
    color: #f87171;
}
/* La règle du compte (statique / trailing) tient sur deux valeurs — libellé et
 * seuil — plus longues que « -2,10 R » : on les laisse revenir à la ligne au
 * lieu de déborder de la colonne. */
.ddrow--sep {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid #1d283a;
}
.ddrow--sep .ddrow_k {
    color: #b9c6dd;
}
.dd2_stats .ddrow_v {
    white-space: normal;
    line-height: 1.35;
}

/* --------------------------- 18. APEX OVERRIDES ------------------------- */
.apexcharts-canvas {
    background: transparent !important;
}
.apexcharts-tooltip {
    background: #131d2c !important;
    border: 1px solid #26334a !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
    color: #dbe4f2 !important;
    font-size: 10px !important;
}
.apexcharts-tooltip-title {
    background: #182335 !important;
    border-bottom: 1px solid #26334a !important;
    font-size: 10px !important;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    background: #131d2c !important;
    border-color: #26334a !important;
    color: #dbe4f2 !important;
}
.apexcharts-gridline {
    stroke: #1b2536;
}
.apexcharts-text tspan {
    font-family: inherit !important;
}

/* --------------------- 19. MOBILE CHROME (hidden ≥900px) ---------------- */
.hamburger,
.topbar_brand,
.sidebar_close {
    display: none;
}

.backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(4, 8, 14, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.backdrop.is-shown {
    opacity: 1;
}
body.is-locked {
    overflow: hidden;
}

/* ---------------------------- 20. GENERAL ---------------------------- */
.mb-0 {
    margin-bottom: 0px !important
}

/* ---------------------------- 21. RESPONSIVE ---------------------------- */
/* keep the reference single-row layout intact on ~1580px screens */
@media (max-width: 1560px) {
    .kpi_value {
        font-size: 17px;
    }
    .kpi_spark {
        width: 56%;
    }
    .kpi_ddstats {
        width: 146px;
    }
    .dd2 {
        grid-template-columns: minmax(0, 1fr) 176px;
    }
}

@media (max-width: 1400px) {
    .kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 1.55fr;
    }
    .kpi--dd {
        grid-column: span 1;
    }
    .bottom {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1280px) {
    .mid {
        grid-template-columns: minmax(0, 1fr);
    }
    .mid_right {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .mid_row--top,
    .mid_row--bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .kpi--dd {
        grid-column: span 2;
    }
    .mid_stack {
        grid-column: span 2;
    }
    .mid_row--top {
        align-items: start;
    }
}

/* ============================ TABLET / MOBILE =========================== */
@media (max-width: 900px) {
    :root {
        --gap: 9px;
    }

    .main {
        padding: 8px 10px 16px;
        width: 100%;
    }

    /* ---- off-canvas drawer ---- */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 70;
        width: 258px;
        max-width: 86vw;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px 14px 18px;
        border-right: 1px solid #1d2941;
        box-shadow: 14px 0 34px rgba(0, 0, 0, 0.5);
        transform: translateX(-100%);
        transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar_close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        background: #16202f;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        color: #c2cee2;
    }
    .sidebar_close:active {
        background: #1d2939;
    }

    /* ---- topbar becomes the mobile app bar ---- */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 40;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin: -8px -10px 10px;
        padding: 8px 10px;
        background: rgba(10, 15, 24, 0.94);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid #16202f;
    }
    .topbar_right {
        gap: 7px;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 34px;
        height: 34px;
        padding: 0 7px;
        background: #111a28;
        border: 1px solid var(--line-2);
        border-radius: var(--r);
        flex: none;
    }
    .hamburger span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: #c8d5ea;
    }
    .hamburger span:nth-child(2) {
        width: 74%;
    }
    .hamburger:active {
        background: #17222f;
    }

    .topbar_brand {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-right: auto;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.4px;
        color: #eef3fb;
    }
    .topbar_brand b {
        color: #7ea6ff;
    }

    .month-pick {
        height: 30px;
        font-size: 11px;
        padding: 0 8px;
    }
    .icon-btn,
    .avatar {
        width: 30px;
        height: 30px;
    }

    /* ---- single column stacks ---- */
    .kpis,
    .mid_right,
    .mid_row--top,
    .mid_row--bottom,
    .bottom {
        grid-template-columns: minmax(0, 1fr);
    }
    .mid_stack {
        grid-column: auto;
    }
    .kpi--dd {
        grid-column: auto;
    }

    /* two-up KPIs read better than one-up on phones */
    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .kpi--dd {
        grid-column: span 2;
    }
    .kpi {
        min-height: 60px;
        padding: 10px;
        gap: 9px;
    }
    .kpi_ico {
        width: 30px;
        height: 30px;
    }
    .kpi_value {
        font-size: 16px;
    }
    .kpi_spark {
        width: 52%;
        height: 30px;
    }
    .kpi_ddstats {
        width: auto;
        flex: 1 1 auto;
    }
    .kpi_ddspark {
        min-height: 40px;
    }

    /* checklists: comfortable tap targets */
    .check_row {
        min-height: 30px;
        padding: 3px 5px;
    }
    .check--wide .check_row {
        min-height: 30px;
    }
    .check_lbl {
        font-size: 11px;
        white-space: normal;
    }
    .opt {
        min-width: 40px;
        padding: 6px 8px;
        font-size: 10px;
    }
    .check_row--free {
        flex-wrap: wrap;
    }
    .check_row--free .check_lbl {
        max-width: 100%;
    }
    .check_row--free .check_free {
        flex: 1 1 100%;
    }

    .freq {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .details {
        grid-template-columns: minmax(0, 1fr);
        gap: 0 16px;
    }
    .dl {
        gap: 7px;
    }

    .dist {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 14px;
    }
    .dd2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .dd2_stats {
        gap: 8px;
    }
    .chart--equity,
    .chart--dd {
        height: 150px;
    }

    /* interpretation table scrolls instead of squishing */
    .card--interp .itable {
        min-width: 340px;
    }
    .itable-wrap {
        overflow-x: auto;
    }

    /* journal toolbar wraps */
    .jhead {
        flex-wrap: wrap;
        gap: 8px;
    }
    .jhead_tools {
        width: 100%;
        flex-wrap: wrap;
    }
    .search {
        flex: 1 1 150px;
        height: 30px;
    }
    .search input {
        width: 100%;
    }
    .tbtn {
        height: 30px;
    }

    /* ---- journal table -> stacked cards ---- */
    .jtable-wrap {
        overflow: visible;
    }
    .jtable {
        min-width: 0;
        display: block;
    }
    .jtable thead {
        display: none;
    }
    .jtable tbody,
    .jtable tr,
    .jtable td {
        display: block;
        width: auto;
    }

    .jtable tbody tr {
        margin-bottom: 8px;
        padding: 8px 10px 9px;
        background: #0f1826;
        border: 1px solid #1e2a3d;
        border-radius: var(--r);
    }
    .jtable tbody tr:last-child {
        margin-bottom: 0;
    }
    .jtable tbody tr:nth-child(odd) td,
    .jtable tbody tr:nth-child(even) td,
    .jtable tbody tr:hover td {
        background: transparent;
    }

    .jtable td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 5px 0;
        border: 0;
        border-bottom: 1px dashed #1c2739;
        text-align: right;
        font-size: 10px;
        white-space: normal;
    }
    .jtable td:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .jtable td::before {
        content: attr(data-label);
        flex: none;
        color: #8b99b0;
        font-size: 10px;
        font-weight: 600;
        text-align: left;
    }
    /* row number becomes the card header */
    .jtable td:first-child {
        padding: 0 0 6px;
        margin-bottom: 3px;
        border-bottom: 1px solid #22304a;
        color: #eaf0fa;
        font-size: 11px;
        font-weight: 700;
    }
    .jtable td:first-child::before {
        content: attr(data-label) " ";
        color: #7ea6ff;
    }
    .acts {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        padding-top: 7px !important;
    }
    .acts .act {
        width: 26px;
        height: 26px;
    }
    .acts .act i {
        font-size: 13px;
    }
}

/* --------------------------- PHONES (≤600px) ---------------------------- */
@media (max-width: 600px) {
    .main {
        padding: 8px 9px 18px;
    }

    .kpis {
        grid-template-columns: minmax(0, 1fr);
    }
    .kpi--dd {
        grid-column: auto;
    }
    .kpi_spark {
        width: 46%;
    }

    /* drawdown KPI stacks its chart above the stats */
    .kpi--dd {
        flex-direction: column;
        gap: 6px;
        padding: 10px;
    }
    .kpi_ddstats {
        width: 100%;
        padding-left: 0;
        gap: 6px;
    }
    .kpi_ddspark {
        min-height: 46px;
    }

    .freq {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }
    .perf {
        grid-template-columns: minmax(0, 1fr);
    }

    /* calendar: keep 7 columns but shrink to fit narrow screens */
    .cal {
        gap: 1.5px;
    }
    .cal_cell {
        height: 31px;
    }
    .cal_d {
        font-size: 8px;
    }
    .cal_v {
        font-size: 7px;
    }
    .cal_dow {
        font-size: 8px;
    }

    .card_head {
        flex-wrap: wrap;
        gap: 7px;
    }
    .score {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .jhead_title {
        font-size: 12px;
    }
    .chart--equity,
    .chart--dd {
        height: 140px;
    }
    .dist_legend {
        width: 100%;
    }
    .interp_txt br {
        display: none;
    }
    .quote_txt br {
        display: none;
    }
}

/* ------------------------- SMALL PHONES (≤400px) ------------------------ */
@media (max-width: 400px) {
    .topbar_brand {
        font-size: 12px;
    }
    .month-pick span {
        display: none;
    }
    .month-pick {
        padding: 0 7px;
    }
    .kpi_value {
        font-size: 15px;
    }
    .cal_cell {
        height: 28px;
    }
    .cal_v {
        font-size: 7px;
    }
    .opt {
        min-width: 36px;
    }
}

/* ----------------------------- ACCESSIBILITY ---------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .backdrop {
        transition: none;
    }
}


/* ------------------------------- PAGES -------------------------------- */
.page {
    display: block;
    animation: fade .18s ease;
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
    align-items: start;
}

.calgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--gap);
    align-items: start;
}

.mb-8 {
    margin-bottom: 8px;
}

.btnrow {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* ------------------------------ TOPBAR -------------------------------- */
@media (min-width: 901px) {
    .topbar {
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 9px;
    }
}

.topbar_title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #eef3fb;
    margin-right: auto;
}

.tchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.tchip b {
    color: #e8eef8;
    font-weight: 700;
}

.tchip--amber b {
    color: #f0b429;
}

.tbtn--primary {
    background: #2f5fd0;
    border-color: #3b6fe0;
    color: #fff;
}

.tbtn--primary:hover {
    background: #376ce4;
    color: #fff;
}

.nav_badge {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: #22304d;
    color: #b9cdf5;
    font-size: 10px;
    font-weight: 700;
}

/* ------------------------------- KPIs --------------------------------- */
.kpis--b {
    margin-top: 0;
}

.kpi_value--edit {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.kpi_input {
    width: 100%;
    max-width: 108px;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px dashed #2c3d59;
    color: #fff;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    outline: none;
}

.kpi_input--sm {
    max-width: 54px;
}

.kpi_input:focus {
    border-bottom-color: var(--blue);
}

.kpi_input::-webkit-outer-spin-button,
.kpi_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.kpi_input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.kpi_unit {
    font-size: 13px;
    font-weight: 700;
    color: #9fb2cd;
}

.kpi_hint {
    margin-top: 3px;
    font-size: 10px;
    color: var(--muted-2);
    white-space: nowrap;
}

.kpi_hint b {
    color: #b9c6db;
}

.kpi--dd2,
.kpi--wide {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
}

.ddstat {
    display: grid;
    grid-template-columns: 45px 1fr auto;
    align-items: center;
    gap: 10px;
}

.kpi_ddtitle--blue {
    color: var(--blue-soft);
}

.mini3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.mini {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 7px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r-sm);
}

.mini_k {
    font-size: 10px;
    color: var(--muted);
}

.mini b {
    font-size: 15px;
    color: #fff;
}

/* ------------------------------ CHECKLIST ----------------------------- */
.check--lg .check_row {
    min-height: 26px;
    padding: 3px 6px;
    margin-bottom: 3px;
}

.check--lg .check_lbl {
    font-size: 11px;
    white-space: normal;
}

.check--lg .opt {
    min-width: 40px;
    padding: 4px 8px;
    font-size: 9px;
}

/* Ligne "erreur libre" : un champ texte remplace les boutons OUI / NON.
 * Champ rempli = erreur commise (la ligne se marque comme répondue),
 * champ vide = rien à signaler. */
.check_row--free {
    gap: 6px;
}
.check_row--free .check_lbl {
    flex: none;
    max-width: 44%;
}
.check_free {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 24px;
    font-size: 11px;
}
.check_free::placeholder {
    color: #5d6f89;
    font-style: italic;
}
/* Texte libre relu sur la fiche trade et le dashboard. */
.check_txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-style: italic;
    color: #7ee2a8;
}

.verdict {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    padding: 7px 9px;
    border-radius: var(--r);
    background: #0f1826;
    box-shadow: inset 0 0 0 1px #1f2b41;
}

.verdict_badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    white-space: nowrap;
}

.verdict_txt {
    font-size: 10px;
    color: #a9b7cc;
}

.verdict--ok {
    background: #0f2418;
    box-shadow: inset 0 0 0 1px #1c4029;
}

.verdict--ok .verdict_badge {
    color: #4ade80;
}

.verdict--warn {
    background: #2a2412;
    box-shadow: inset 0 0 0 1px #4c3a16;
}

.verdict--warn .verdict_badge {
    color: #f0b429;
}

.verdict--no {
    background: #2a1216;
    box-shadow: inset 0 0 0 1px #4a1e24;
}

.verdict--no .verdict_badge {
    color: #f87171;
}

.verdict--lg {
    margin: 0;
    padding: 12px 14px;
}

.verdict--lg .verdict_badge {
    font-size: 14px;
}

.verdict--lg .verdict_txt {
    font-size: 12px;
}

/* ------------------------------ SCREENSHOTS --------------------------- */
.shotbox {
    flex: 1 1 auto;
    display: flex;
}

.shotbox .drop {
    width: 100%;
}

.shot {
    position: relative;
    width: 100%;
    min-height: 128px;
    border-radius: var(--r);
    overflow: hidden;
    background: #0e1723;
    border: 1px solid var(--line-2);
}

.shot img {
    width: 100%;
    height: 100%;
    max-height: 190px;
    object-fit: cover;
    cursor: zoom-in;
}

.shot_bar {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 5px;
}

.shot_btn {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 4px;
    background: rgba(10, 16, 26, .82);
    color: #dbe4f2;
    font-size: 12px;
}

.shot_btn:hover {
    background: #2f5fd0;
    color: #fff;
}

.shot_btn--del:hover {
    background: #c0392f;
}

.shot_cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 7px;
    background: linear-gradient(180deg, transparent, rgba(6, 10, 17, .9));
    font-size: 10px;
    color: #cfd9ea;
}

/* -------------------------------- COACH ------------------------------- */
.card--coach {
    display: flex;
    flex-direction: column;
}

.notes--coach {
    min-height: 49px;
    font-style: normal;
}

.coach_foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.coach_saved {
    font-size: 10px;
    color: #4ade80;
}

.card--coach .form-select {
    max-width: 168px;
}

/* ------------------------------- CALENDAR ----------------------------- */
.cal_cell {
    cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease;
}

.cal_cell.is-out {
    cursor: default;
}

.cal_cell:not(.is-out):hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px #3b5580;
}

.cal_cell.is-sel {
    box-shadow: inset 0 0 0 2px var(--blue) !important;
}

.cal_cell.is-today .cal_d {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.cal--lg .cal_cell {
    height: 66px;
    gap: 2px;
}

.cal--lg .cal_d {
    font-size: 11px;
}

.cal--lg .cal_v {
    font-size: 11px;
}

.cal_foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 7px;
    font-size: 10px;
    color: var(--muted);
}

.cal_lg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cal_sw {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.cal_sw--win {
    background: #1c4029;
    box-shadow: inset 0 0 0 1px #22c55e;
}

.cal_sw--loss {
    background: #4a1e24;
    box-shadow: inset 0 0 0 1px #ef4444;
}

.cal_sw--be {
    background: #23304a;
    box-shadow: inset 0 0 0 1px #8a97ab;
}

.cal_hint {
    margin-left: auto;
    color: var(--muted-2);
}

.daylist {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 460px;
    overflow-y: auto;
}

.dayrow {
    padding: 8px 9px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r);
}

.dayrow_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.dayrow_t {
    font-size: 11px;
    font-weight: 700;
    color: #e6ecf7;
}

.dayrow_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 10px;
    color: var(--muted);
    align-items: center;
}

.dayrow_meta b {
    color: #c3cfe2;
}

.dayrow_acts {
    display: flex;
    gap: 5px;
}

/* ------------------------------- FILTERS ------------------------------ */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 9px;
    padding: 9px 10px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.field_k {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--muted);
    text-transform: uppercase;
}

.field .form-select {
    min-width: 104px;
    height: 25px;
}

.filters_count {
    margin-left: auto;
    font-size: 10px;
    color: var(--muted);
}

.jfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
}

.jfoot_stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 10px;
    color: var(--muted);
}

.jfoot_stats b {
    color: #e8eef8;
}

.jtable--full {
    min-width: 1560px;
}

.jtable th[data-sort] {
    cursor: pointer;
}

.jtable th[data-sort]:hover {
    color: #dbe4f2;
}

.jtable .r-cell {
    font-weight: 700;
}

.tempty {
    padding: 22px 10px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
}

/* ------------------------- CAPITAL & RISQUE ---------------------------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.form-grid .field {
    gap: 4px;
}

.riskcalc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.rc {
    padding: 9px 10px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r);
}

.rc_k {
    font-size: 10px;
    color: var(--muted);
}

.rc_v {
    margin-top: 3px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.rc_s {
    margin-top: 2px;
    font-size: 10px;
    color: var(--muted-2);
}

.bar {
    height: 5px;
    margin-top: 6px;
    border-radius: 999px;
    background: #1b2536;
    overflow: hidden;
}

.bar_in {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.bar_in--warn {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.bar_in--over {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.assets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 9px;
}

.apill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 9px;
    background: #16202f;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 10px;
    color: #c8d5ea;
}

.apill button {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border: 0;
    border-radius: 50%;
    background: #24334a;
    color: #cbd6e8;
    font-size: 10px;
}

.apill button:hover {
    background: #c0392f;
    color: #fff;
}

.assets_add {
    display: flex;
    gap: 7px;
}

.assets_add input {
    flex: 1 1 auto;
}

.storage_note {
    margin-bottom: 9px;
    font-size: 10px;
    line-height: 1.6;
    color: #a9b7cc;
}

.storage_note b {
    color: #e8eef8;
}

/* -------------------------------- MODALS ------------------------------ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 22px 14px;
    overflow-y: auto;
    background: rgba(4, 8, 14, .68);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.modal[hidden] {
    display: none;
}

.modal_card {
    width: 100%;
    max-width: 460px;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    animation: pop .16s ease;
}

.modal_card--lg {
    max-width: 1040px;
}

.modal_card--img {
    max-width: 1180px;
}

@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.99);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.modal_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line);
}

.modal_title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #eef3fb;
    text-transform: uppercase;
}

.modal_x {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    background: #16202f;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    color: #c2cee2;
    font-size: 14px;
}

.modal_x:hover {
    background: #1d2939;
    color: #fff;
}

.modal_body {
    padding: 12px 13px;
}

.modal_body--img {
    padding: 10px;
}

.modal_body--img img {
    width: 100%;
    border-radius: var(--r);
}

.modal_foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 13px;
    border-top: 1px solid var(--line);
}

.modal_err {
    margin-right: auto;
    font-size: 10px;
    color: #f87171;
}

.confirm_txt {
    font-size: 11px;
    line-height: 1.6;
    color: #c7d3e5;
}

#tradeModal {
    z-index: 111;
}

/* --------------------------- FORM CONTROLS ---------------------------- */
.fgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.fgrid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fspan2 {
    grid-column: span 2;
}

.fspan4 {
    grid-column: span 4;
}

.fsec {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.fsec_t {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--blue-soft);
    text-transform: uppercase;
}

.inp {
    width: 100%;
    height: 27px;
    padding: 0 8px;
    background: #0e1723;
    border: 1px solid #2c3d59;
    border-radius: var(--r);
    color: #e8eef8;
    font: inherit;
    font-size: 11px;
    outline: none;
}

.inp:focus {
    border-color: var(--blue);
}

.inp[readonly] {
    color: #9fb2cd;
    background: #0c1420;
}

textarea.inp {
    height: auto;
    min-height: 66px;
    padding: 7px 8px;
    line-height: 1.55;
    resize: vertical;
}

.hint {
    margin-top: 3px;
    font-size: 10px;
    color: var(--muted-2);
}

.seg {
    display: flex;
    gap: 4px;
}

.seg button {
    flex: 1 1 0;
    height: 27px;
    border: 1px solid #26334a;
    border-radius: var(--r);
    background: #182231;
    color: #8b9ab1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
}

.seg button:hover {
    color: #cbd6e8;
}

.seg button.is-on {
    background: #2b3d5e;
    color: #fff;
    border-color: transparent;
}

.seg button.is-on[data-val="Achat"],
.seg button.is-on[data-val="Gain"] {
    background: #1f8f4d;
}

.seg button.is-on[data-val="Vente"],
.seg button.is-on[data-val="Perte"] {
    background: #c0392f;
}

.seg button.is-on[data-val="BE"] {
    background: #3d4c66;
}

.mchecks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mchecks .check_row {
    background: #0e1724;
}

.mscore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 10px;
    color: var(--muted);
}

.mscore b {
    color: #e8eef8;
}

.mshots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mshot_t {
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* « OR, ATTACH VIA LINK » : coller un lien (TradingView…) au lieu d'uploader. */
.shotlink {
    display: block;
    margin-top: 7px;
}
.shotlink_t {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #8b9ab1;
}
/* Lien enregistré, relu sur la fiche trade et le dashboard. */
.shot_link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 8px;
    background: #0e1724;
    border-radius: var(--r-sm);
    font-size: 10px;
    color: #7db4ff;
    text-decoration: none;
}
.shot_link:hover {
    text-decoration: underline;
}
.shot_link span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Lien dans la colonne Screenshots du journal : le lien lui-même, cliquable. */
.shoturl {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 180px;
    margin-right: 4px;
    vertical-align: middle;
    font-size: 9px;
    color: #7db4ff;
    text-decoration: none;
}
.shoturl:hover {
    text-decoration: underline;
}
.shoturl span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------- TOASTS ------------------------------ */
.toasts {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 210px;
    max-width: 340px;
    padding: 9px 11px;
    background: #131d2c;
    border: 1px solid #26334a;
    border-left: 3px solid var(--blue);
    border-radius: var(--r);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
    color: #dbe4f2;
    font-size: 11px;
    animation: slide .18s ease;
}

@keyframes slide {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.toast--ok {
    border-left-color: #22c55e;
}

.toast--err {
    border-left-color: #ef4444;
}

.toast--warn {
    border-left-color: #f59e0b;
}

/* ------------------------------ RESPONSIVE ---------------------------- */
@media (max-width: 1280px) {
    .calgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fspan4 {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .topbar_title,
    .tchip {
        display: none;
    }

    .grid2,
    .riskcalc,
    .form-grid,
    .mchecks,
    .mshots {
        grid-template-columns: minmax(0, 1fr);
    }

    .fgrid,
    .fgrid--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .fspan2,
    .fspan4 {
        grid-column: auto;
    }

    .filters {
        gap: 7px;
    }

    .field {
        flex: 1 1 132px;
    }

    .field .form-select {
        width: 100%;
    }

    .jtable--full {
        min-width: 0;
    }

    .cal--lg .cal_cell {
        height: 46px;
    }

    .modal {
        padding: 10px;
    }

    .mini b {
        font-size: 13px;
    }

    .kpi_input {
        font-size: 16px;
    }
}

/* ------------------------------- 1. PAGES ---------------------------- */
.page {
    display: block;
    animation: vfade 0.22s ease;
}
@keyframes vfade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.nav_badge--red {
    background: #3b1a1f !important;
    border-color: #5b2630 !important;
    color: #fca5a5 !important;
}

/* ------------------------- 2. VIEW PAGE HEADER ----------------------- */
.vhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: var(--gap);
}
.vhead_t {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #eef3fb;
}
.vhead_s {
    margin-top: 3px;
    font-size: 11px;
    color: #93a1b8;
}
.vhead_s b {
    color: #cdd8e8;
}

/* --------------------------- 3. SAVE CHIP --------------------------- */
.savechip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    background: #10241a;
    border: 1px solid #1f4430;
    border-radius: 999px;
    color: #86efac;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.savechip i {
    font-size: 12px;
}
.savechip b {
    color: #d1fae5;
    font-weight: 700;
}
.savechip.is-saving {
    background: #143224;
    border-color: #2b5d40;
}
.savechip.is-saving i {
    animation: spin 0.9s linear;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------------- 4. TOAST ICON TINTS (base in SECTION 2) ----------- */
.toast--ok i {
    color: #22c55e;
}
.toast--warn i {
    color: #fbbf24;
}
.toast--err i {
    color: #f87171;
}

/* --------------------------- 5. GRID SYSTEM ------------------------- */
.grid2,
.grid3 {
    display: grid;
    gap: var(--gap);
    margin-bottom: var(--gap);
}
.grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}
.calgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--gap);
}
.calside {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.align-items-stretch {
    align-items: stretch !important;
}

/* --------------------------- 6. CARD EXTRAS ------------------------- */
.card_title--lg {
    font-size: 12px;
}
.card--danger {
    border-color: #43222b;
}
.hintbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 11px;
    background: #0f1826;
    border: 1px solid #1f2b3f;
    border-left: 3px solid #4f7fff;
    border-radius: var(--r);
    font-size: 10px;
    line-height: 1.5;
    color: #b8c4d8;
}
.hintbox i {
    flex: none;
    margin-top: 1px;
    font-size: 13px;
    color: #7ea6ff;
}
.hintbox b {
    color: #eaf0fa;
}
.hintbox--red {
    border-left-color: #ef4444;
}
.hintbox--red i {
    color: #f87171;
}
.best {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px dashed #22304a;
    font-size: 10px;
    line-height: 1.5;
    color: #a9b6ca;
}
.best i {
    flex: none;
    margin-top: 1px;
    font-size: 13px;
    color: #fbbf24;
}
.best b {
    color: #eaf0fa;
}
/* Stacked interpretation lines (le plus rentable / le plus efficace / celui qui
   coûte) : only the first one carries the dashed separator. */
.best + .best {
    margin-top: 5px;
    padding-top: 0;
    border-top: 0;
}
.best--eff i {
    color: #60a5fa;
}
.best--warn i {
    color: #f87171;
}

/* interpretation-style table used for score impact */
.itable--stat th,
.itable--stat td {
    padding: 7px 9px;
    font-size: 10px;
    white-space: nowrap;
}
.itable--stat td b {
    color: #eaf0fa;
}
.itable--stat tbody tr:hover td {
    background: #131f30;
}

/* taller textarea for coach notes */
.inp--tall {
    min-height: 92px;
    resize: vertical;
}

/* -------------------------- 7. JOURNAL FILTERS ---------------------- */
.filters {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 0 12px;
    border-bottom: 1px solid #1c2739;
    margin-bottom: 10px;
}
.fltr {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.fltr_k {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #8b99b0;
    text-transform: uppercase;
}
.fltr .form-select {
    width: 100%;
    height: 28px;
}

/* --------------------------- 8. FULL TABLE -------------------------- */
.jtable--full {
    min-width: 1180px;
}
.jtable--full th,
.jtable--full td {
    padding: 7px 8px;
    font-size: 10px;
    white-space: nowrap;
}
.tno {
    color: #7ea6ff;
}
.chip {
    display: inline-block;
    padding: 2px 7px;
    background: #16233a;
    border: 1px solid #24344f;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: #cdd8e8;
}
.xtag {
    display: inline-block;
    padding: 2px 7px;
    background: #131d2c;
    border: 1px solid #22304a;
    border-radius: var(--r-sm);
    font-size: 10px;
    color: #b3c0d4;
}

/* grade pills */
.gr {
    display: inline-block;
    min-width: 34px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.3px;
}
.gr--ap {
    background: #0f3021;
    border: 1px solid #1f6b45;
    color: #6ee7a8;
}
.gr--a {
    background: #10281f;
    border: 1px solid #1f5a3c;
    color: #86efac;
}
.gr--b {
    background: #1a2540;
    border: 1px solid #2b3d63;
    color: #a5b8ff;
}
.gr--c {
    background: #33221a;
    border: 1px solid #6b4423;
    color: #fbbf24;
}
.gr--no {
    background: #331a1f;
    border: 1px solid #6b2630;
    color: #fca5a5;
}

/* checklist score pill in table */
.cscore {
    display: inline-block;
    padding: 2px 6px;
    background: #131d2c;
    border: 1px solid #22304a;
    border-radius: var(--r-sm);
    font-size: 10px;
    font-weight: 700;
    color: #b3c0d4;
}
.cscore.is-good {
    border-color: #1f5a3c;
    color: #86efac;
}
.cscore.is-bad {
    border-color: #6b2630;
    color: #fca5a5;
}
.shotdot {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    background: #131d2c;
    border: 1px solid #22304a;
    border-radius: var(--r-sm);
    color: #8fb3ff;
    font-size: 11px;
}
.act--view {
    background: #14253d;
    border-color: #24406b;
    color: #8fb3ff;
}

/* table footer + pager */
.jfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 11px;
    margin-top: 10px;
    border-top: 1px solid #1c2739;
}
.jfoot_i {
    font-size: 10px;
    color: #8b99b0;
}
.jfoot_i b {
    color: #cdd8e8;
}
.pager {
    display: flex;
    gap: 5px;
}
.pbtn {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    background: #111a28;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: #b3c0d4;
    font-size: 10px;
    font-weight: 700;
}
.pbtn:hover {
    background: #16202f;
}
.pbtn.is-on {
    background: #1b3a6b;
    border-color: #2f5da8;
    color: #dbeafe;
}

/* ---------------------- 9. STAT BARS (statistiques) ----------------- */
.sbars {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 3px;
}
.sbar_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}
.sbar_k {
    font-size: 11px;
    font-weight: 700;
    color: #dbe4f2;
}
.sbar_v {
    font-size: 11px;
    font-weight: 800;
}
.sbar_track {
    display: block;
    height: 7px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: 999px;
    overflow: hidden;
}
.sbar_fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}
.sbar_fill--green {
    background: linear-gradient(90deg, #16a34a, #4ade80);
}
.sbar_fill--blue {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.sbar_fill--red {
    background: linear-gradient(90deg, #b91c1c, #f87171);
}
.sbar_meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 5px;
    font-size: 10px;
    color: #8b99b0;
}
/* Drill-down row: a real link to the filtered Journal (statistics page). */
.sbar--link {
    display: block;
    color: inherit;
    text-decoration: none;
    margin: -4px -6px;
    padding: 4px 6px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sbar--link:hover,
.sbar--link:focus-visible {
    background: #101b2c;
    border-color: #24406b;
}
.sbar--link:hover .sbar_k {
    color: #fff;
}
/* Same drill-down inside the cross table's "Valeur" cell. */
.xlink {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #35507d;
}
.xlink:hover,
.xlink:focus-visible {
    color: #fff;
    border-bottom-color: #60a5fa;
}

/* ------------------------- 10. VS COMPARISON ----------------------- */
.vs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}
.vs_side {
    padding: 12px 11px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r);
    text-align: center;
}
.vs_side.is-win {
    border-color: #1f5a3c;
    background: #0f1f19;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.08);
}
.vs_k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #cdd8e8;
    text-transform: uppercase;
}
.vs_r {
    margin: 6px 0 7px;
    font-size: 19px;
    font-weight: 800;
}
.vs_meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
    color: #8b99b0;
}
.vs_x {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: #131d2c;
    border: 1px solid #26334a;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    color: #8b99b0;
}

/* --------------------------- 11. ALERT CARDS ----------------------- */
.alerts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}
.alerts--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.alert {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid #4f7fff;
    border-radius: var(--r-lg);
}
.alert_ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--r);
    font-size: 16px;
}
.alert_k {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #8b99b0;
    text-transform: uppercase;
}
.alert_v {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #eaf0fa;
}
.alert--red {
    border-left-color: #ef4444;
}
.alert--red .alert_ico {
    background: #2a1418;
    color: #f87171;
}
.alert--amber {
    border-left-color: #f59e0b;
}
.alert--amber .alert_ico {
    background: #2a1f10;
    color: #fbbf24;
}
.alert--blue {
    border-left-color: #4f7fff;
}
.alert--blue .alert_ico {
    background: #131f38;
    color: #8fb3ff;
}
.alert--green {
    border-left-color: #22c55e;
}
.alert--green .alert_ico {
    background: #10241a;
    color: #86efac;
}

/* -------------------------- 12. ERROR PODIUM ----------------------- */
.podiums {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 3px;
}
.podium {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 34px 62px;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r);
}
.podium.is-first {
    border-color: #6b2630;
    background: #17141a;
}
.podium_n {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    background: #131d2c;
    border: 1px solid #26334a;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    color: #b3c0d4;
}
.podium.is-first .podium_n {
    background: #331a1f;
    border-color: #6b2630;
    color: #fca5a5;
}
.podium_k {
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #dbe4f2;
}
.podium_bar {
    height: 6px;
    background: #131d2c;
    border-radius: 999px;
    overflow: hidden;
}
.podium_bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #b91c1c, #f87171);
}
.podium_c {
    font-size: 12px;
    font-weight: 800;
    color: #eaf0fa;
    text-align: center;
}
.podium_r {
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}
.cnt {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    background: #2a1418;
    border: 1px solid #5b2630;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: #fca5a5;
}
.trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
}
.trend--up {
    color: #f87171;
}
.trend--down {
    color: #86efac;
}

/* --------------------------- 13. IMPACT LIST ----------------------- */
.impacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 3px;
}
.impact_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}
.impact_k {
    font-size: 10px;
    font-weight: 600;
    color: #b8c4d8;
}
.impact_v {
    font-size: 13px;
    font-weight: 800;
}
.impact_s {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: #8b99b0;
}

/* -------------------------- 14. ACTION PLAN ------------------------ */
.actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 3px 0 12px;
}
.action {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-left: 3px solid #4f7fff;
    border-radius: var(--r);
}
.action--red {
    border-left-color: #ef4444;
}
.action--amber {
    border-left-color: #f59e0b;
}
.action--blue {
    border-left-color: #4f7fff;
}
.action_n {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    flex: none;
    background: #131d2c;
    border: 1px solid #26334a;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    color: #b3c0d4;
}
.action_t {
    font-size: 11px;
    font-weight: 700;
    color: #eaf0fa;
}
.action_p {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.5;
    color: #93a1b8;
}

/* ------------------------ 15. CALENDAR (large) --------------------- */
.cal--lg .cal_cell {
    height: 62px;
    padding: 5px;
    align-content: flex-start;
}
.cal--lg .cal_d {
    font-size: 10px;
}
.cal--lg .cal_v {
    margin-top: auto;
    font-size: 10px;
    font-weight: 800;
}
.card_head--between {
    justify-content: space-between;
}
.mstats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 3px;
}
.mstat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 10px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r);
}
.mstat_k {
    font-size: 10px;
    color: #8b99b0;
}
.mstat_v {
    font-size: 13px;
    font-weight: 700;
    color: #eaf0fa;
}

/* ------------------- 16. DATA / BACKUP COMPONENTS ------------------ */
.dset {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
}
.dset_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed #1c2739;
}
.dset_row:last-child {
    border-bottom: 0;
}
.dset_t {
    font-size: 11px;
    font-weight: 600;
    color: #dbe4f2;
}
.dset_s {
    margin-top: 3px;
    font-size: 10px;
    color: #8b99b0;
}
.switch {
    position: relative;
    flex: none;
    width: 38px;
    height: 21px;
    background: #16202f;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.switch i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    background: #64748b;
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
}
.switch.is-on {
    background: #10281f;
    border-color: #1f5a3c;
}
.switch.is-on i {
    background: #22c55e;
    transform: translateX(17px);
}

.dgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding-top: 3px;
}
.dbtn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px;
    background: #0f1826;
    border: 1px solid #1d283a;
    border-radius: var(--r);
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.dbtn:hover {
    background: #131f30;
    border-color: #2b3a55;
}
.dbtn_ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--r);
    font-size: 15px;
}
.dbtn--green .dbtn_ico {
    background: #10241a;
    color: #86efac;
}
.dbtn--blue .dbtn_ico {
    background: #131f38;
    color: #8fb3ff;
}
.dbtn--amber .dbtn_ico {
    background: #2a1f10;
    color: #fbbf24;
}
.dbtn_b {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}
.dbtn_t {
    font-size: 11px;
    font-weight: 700;
    color: #eaf0fa;
}
.dbtn_s {
    font-size: 10px;
    color: #8b99b0;
}
.dbtn_x {
    flex: none;
    font-size: 15px;
    color: #64748b;
}

.csvtags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.csvtag {
    padding: 3px 7px;
    background: #131d2c;
    border: 1px solid #22304a;
    border-radius: 999px;
    font-size: 10px;
    color: #b3c0d4;
}

.dangers {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 3px;
}
.danger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px;
    background: #150f13;
    border: 1px solid #33222b;
    border-radius: var(--r);
}
.danger_t {
    font-size: 11px;
    font-weight: 700;
    color: #eaf0fa;
}
.danger_p {
    margin-top: 3px;
    font-size: 10px;
    color: #93a1b8;
}

/* ---------------- 17. TRADE MODAL ADDITIONS ------------------------ */
.tradeno {
    margin-left: auto;
    margin-right: 10px;
    padding: 3px 9px;
    background: #14253d;
    border: 1px solid #24406b;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: #8fb3ff;
    white-space: nowrap;
}
.modal_note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    font-size: 10px;
    color: #8b99b0;
}
.modal_note i {
    font-size: 12px;
    color: #86efac;
}
.modal_note b {
    color: #cdd8e8;
}

.seg--wrap {
    flex-wrap: wrap;
    height: auto;
    padding: 3px;
}
.seg--wrap button {
    flex: 0 1 auto;
    padding: 5px 9px;
    font-size: 10px;
}
.seg--grade button.is-on {
    background: #1f6b45;
    color: #eafff3;
}

.errpicks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.errpick {
    padding: 5px 10px;
    background: #111a28;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: #b3c0d4;
    font-size: 10px;
    font-weight: 600;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.errpick:hover {
    background: #16202f;
}
.errpick.is-on {
    background: #2a1418;
    border-color: #6b2630;
    color: #fca5a5;
}
.errpick[data-val="Aucune erreur"].is-on {
    background: #10241a;
    border-color: #1f5a3c;
    color: #86efac;
}

.mscore--conf {
    margin-bottom: 8px;
}
.check--conf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 14px;
}
.field.fspan2 .hint {
    margin-top: 5px;
}

/* -------------------------- 18. RESPONSIVE ------------------------- */
@media (max-width: 1400px) {
    .filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .alerts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) {
    .grid2,
    .calgrid {
        grid-template-columns: minmax(0, 1fr);
    }
    .actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .savechip {
        display: none;
    }
    .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid3,
    .alerts,
    .alerts--3,
    .dgrid,
    .mstats {
        grid-template-columns: minmax(0, 1fr);
    }
    .vhead_t {
        font-size: 14px;
    }
    .vs {
        grid-template-columns: minmax(0, 1fr);
    }
    .vs_x {
        margin: 0 auto;
    }
    .check--conf {
        grid-template-columns: minmax(0, 1fr);
    }
    .cal--lg .cal_cell {
        height: 44px;
    }

    /* stacked-card table mode inherits from SECTION 1 */
    .jtable--full {
        min-width: 0;
    }
    .jtable--full th,
    .jtable--full td {
        white-space: normal;
    }
    .jfoot {
        justify-content: center;
    }
    .podium {
        grid-template-columns: 22px minmax(0, 1fr) 30px 56px;
        gap: 7px;
    }
    .danger {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .toasts {
        right: 9px;
        left: 9px;
        bottom: 9px;
    }
    .toast {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .filters {
        grid-template-columns: minmax(0, 1fr);
    }
    .cal--lg .cal_cell {
        height: 38px;
    }
    .cal--lg .cal_v {
        font-size: 8px;
    }
    .vs_r {
        font-size: 17px;
    }
}

/* ==================================================================== *
 |  19. BACKEND ADDITIONS
 |
 |  Everything below exists only because the prototype became a real
 |  application: links that must look like buttons, server-rendered flash
 |  messages, real <input type="file"> pickers, saved-screenshot thumbnails
 |  and read-only checklist chips. Nothing above this line was modified.
 * ==================================================================== */

/* --- links that must look exactly like the design's buttons --------- */
a.btn-new,
a.tbtn,
a.pbtn,
a.act,
.nav_item,
.tbtn--link {
    text-decoration: none;
}
a.btn-new {
    display: block;
    text-align: center;
    line-height: 1.1;
}
.topbar_form {
    display: flex;
    align-items: center;
    margin: 0;
}

/* --- segmented controls keyed on the stored value, not the label ---- */
.seg button.is-on[data-val="buy"],
.seg button.is-on[data-val="win"] {
    background: #1f8f4d;
}
.seg button.is-on[data-val="sell"],
.seg button.is-on[data-val="loss"] {
    background: #c0392f;
}
.seg button.is-on[data-val="be"] {
    background: #3d4c66;
}
.seg--grade button.is-on[data-val="no_trade"] {
    background: #4a5568;
    color: #e2e8f0;
}

/* --- derived error chips ------------------------------------------- */
.errpick {
    display: inline-flex;
    align-items: center;
}
.errpick[data-val="none"].is-on {
    background: #10241a;
    border-color: #1f5a3c;
    color: #86efac;
}

/* --- read-only checklist answer --------------------------------------*/
.opt--none {
    background: #141d2b;
    color: #5d6b83;
    box-shadow: inset 0 0 0 1px #212d40;
}

/* --- flash messages (server-rendered, visible without JS) ----------- */
.flashes {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 11px;
}
.flash {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    background: #131d2c;
    border: 1px solid #26334a;
    border-left: 3px solid var(--blue);
    border-radius: var(--r);
    color: #dbe4f2;
    font-size: 11px;
}
.flash_t {
    flex: 1 1 auto;
}
.flash_x {
    flex: none;
    padding: 2px 4px;
    background: transparent;
    border: 0;
    color: #6c7c96;
    font-size: 13px;
    line-height: 1;
}
.flash_x:hover {
    color: #cbd6e8;
}
.flash--ok {
    border-left-color: #22c55e;
}
.flash--ok i {
    color: #4ade80;
}
.flash--err {
    border-left-color: #ef4444;
}
.flash--err i {
    color: #f87171;
}
.flash--warn {
    border-left-color: #f59e0b;
}
.flash--warn i {
    color: #fbbf24;
}

/* --- real file pickers + saved screenshots -------------------------- */
.drop {
    position: relative;
}
.drop_input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.shot_has {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
    padding: 7px;
    background: #0e1723;
    border: 1px solid #1f2b3f;
    border-radius: var(--r);
}
.shot_thumb {
    flex: none;
    display: block;
    width: 92px;
    height: 58px;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: #0a0f18;
}
.shot_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shot_del {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #93a3bb;
    cursor: pointer;
}
.shot_del input {
    accent-color: #ef4444;
}

/* --- empty states, paging, neutral bars ----------------------------- */
.empty {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 12px;
    background: #0e1723;
    border: 1px dashed #26334a;
    border-radius: var(--r);
    color: #8593ab;
    font-size: 11px;
}
.empty i {
    font-size: 14px;
    color: #6c7c96;
}
.pbtn.is-off {
    opacity: 0.4;
    cursor: default;
}
.sbar_fill--grey {
    background: linear-gradient(90deg, #3d4c66, #64748b);
}
.confirm_form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* --- grade pills keyed on the stored value -------------------------- *
 * Taxonomy::qualityClass() returns q-aplus / q-a / q-b / q-c / q-nt so
 * the views never have to map French labels to CSS classes themselves.
 * These aliases mirror .gr--ap / --a / --b / --c / --no exactly.        */
.q-aplus {
    background: #0f3021;
    border: 1px solid #1f6b45;
    color: #6ee7a8;
}
.q-a {
    background: #10281f;
    border: 1px solid #1f5a3c;
    color: #86efac;
}
.q-b {
    background: #1a2540;
    border: 1px solid #2b3d63;
    color: #a5b8ff;
}
.q-c {
    background: #33221a;
    border: 1px solid #6b4423;
    color: #fbbf24;
}
.q-nt {
    background: #331a1f;
    border: 1px solid #6b2630;
    color: #fca5a5;
}

/* --- trade detail page --------------------------------------------- */
.dl_row--full {
    grid-column: 1 / -1;
}
.shot_view {
    display: block;
}
.notebox {
    padding: 10px 11px;
    background: #0e1723;
    border: 1px solid #1f2b3f;
    border-left: 3px solid var(--blue);
    border-radius: var(--r);
    color: #cbd6e8;
    font-size: 11px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}
.notebox--coach {
    border-left-color: #f59e0b;
}
.notebox--free {
    border-left-color: #3d4c66;
}
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.nbnav {
    display: flex;
    align-items: center;
    gap: 8px;
}
a.tag,
a.tag:hover {
    text-decoration: none;
}
a.tag:hover {
    filter: brightness(1.25);
}
.tbtn.is-off {
    opacity: 0.35;
    cursor: default;
}

/* --- server-rendered links that reuse button styling ---------------- *
 * Navigation is real <a> markup so every page works without JS; these
 * rules stop the browser from underlining or mis-aligning them.        */
a.cal_arrow,
a.cal_cell,
a.act,
a.drop,
a.tbtn,
a.pbtn,
a.shot_view {
    text-decoration: none;
}
a.cal_arrow {
    display: grid;
    place-items: center;
}
a.act {
    display: inline-grid;
    place-items: center;
}
a.drop {
    color: inherit;
}
a.cal_cell {
    color: inherit;
    cursor: pointer;
}

/* --- capital + risque save button ----------------------------------- */
.kpi_save {
    margin-left: 6px;
    padding: 2px 7px;
    background: #1c2a41;
    border: 1px solid #2b3d63;
    border-radius: var(--r-sm);
    color: #a5b8ff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
}
.kpi_save:hover {
    background: #2f5fd0;
    border-color: #2f5fd0;
    color: #fff;
}

/* --- interpretation matrix: highlight the row that applies now ------ */
.itable tr.is-now td {
    background: #17233a;
    color: #e7eefc;
    font-weight: 700;
}

/* --- derived error chips under a journal row ------------------------ */
.jrow_err td {
    padding-top: 0;
    border-top: 0;
}
.jrow_err .tag {
    margin-right: 4px;
}

/* --- shared filter form (partials/filters.php) ----------------------- *
 * .filters keeps its 8-column design grid; the extra controls the client
 * asked for (recherche, « checklist stratégique >= 12/14 », plage de dates)
 * live in a second flowing row so nothing in the design shifts.          */
.jform {
    display: block;
}
.jform .filters {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 8px;
}
.fbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 0 0 12px;
    border-bottom: 1px solid #1c2739;
    margin-bottom: 10px;
}
.fbar .fltr {
    min-width: 104px;
}
.fltr--grow {
    flex: 1 1 220px;
    min-width: 180px;
}
.fltr--grow .search {
    width: 100%;
}
.fltr--grow .search input {
    width: 100%;
}
.fbar .form-select[type="date"] {
    min-width: 122px;
}
.fbar_go {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding-bottom: 1px;
}
@media (max-width: 1180px) {
    .filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .fbar_go {
        margin-left: 0;
        width: 100%;
    }
}

/* --- active-filter recap chips --------------------------------------- */
.fchips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
}
.fchips .hint {
    margin-right: 2px;
}
.fchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: #17233a;
    border: 1px solid #2b3d63;
    border-radius: 999px;
    color: #cbd6e8;
    font-size: 10px;
    font-weight: 600;
}
.fchip b {
    color: #a5b8ff;
}
a.fchip_x {
    color: #8b99b0;
    text-decoration: none;
    font-size: 11px;
    line-height: 1;
}
a.fchip_x:hover {
    color: #fca5a5;
}

/* --- import backup form inside .jhead_tools ------------------------- */
.imp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.imp_file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
label.tbtn {
    cursor: pointer;
}
.imp_name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8b99b0;
    font-size: 10px;
}

/* --- .itable with a real number of columns --------------------------- *
 * The base .itable is table-layout:fixed with hard nth-child widths sized
 * for the 4-column interpretation matrix. The statistics tables have 5 to 7
 * columns, so they opt back into automatic sizing: the first column takes the
 * label, the numeric ones shrink to their content instead of being clipped.  */
.itable--stat,
.itable--auto {
    table-layout: auto;
}
.itable--stat th,
.itable--stat td,
.itable--auto th,
.itable--auto td {
    width: auto;
}
.itable--stat th:first-child,
.itable--stat td:first-child,
.itable--auto th:first-child,
.itable--auto td:first-child {
    width: 34%;
}
.itable tr.is-muted td {
    opacity: 0.55;
}
a.cal_arrow.is-off {
    opacity: 0.3;
    pointer-events: none;
}

/* --- per-item checklist statistics (Checklists page) ----------------- */
.check_st {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    white-space: nowrap;
}
.check_st .hint {
    font-size: 9px;
}
.hint--foot {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #1c2739;
    font-size: 9px;
    line-height: 1.5;
}

/* --- Error Analysis page: everything drillable is a real link --------- *
 * The podium label, the error name in the table and the trade number all
 * link into the Journal / the trade, so the coach can go from "FOMO — 8
 * fois" to the eight trades concerned without any JavaScript.            */
a.podium_k {
    display: block;
    text-decoration: none;
}
a.podium_k:hover {
    color: #fff;
    text-decoration: underline;
}
a.tno,
a.elink {
    color: #7ea6ff;
    text-decoration: none;
}
a.tno:hover,
a.elink:hover {
    text-decoration: underline;
}
.hintbox .trend {
    vertical-align: middle;
}
@media (max-width: 900px) {
    .actions {
        grid-template-columns: 1fr;
    }
}

/* --- screenshot drop zones: drag-over, picked file, live preview ------ *
 * The <input type="file"> inside .drop does the real upload; these three
 * states are what app.js adds on top so the trader can see that the file
 * was accepted BEFORE saving the trade.                                   */
.drop.is-over {
    border-color: #3b82f6;
    background: #101f33;
}
.drop.is-picked {
    border-style: solid;
    border-color: #2f6b45;
    background: #0f1d1a;
}
.drop.is-picked .drop_t {
    color: #d3dcea;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drop.is-picked .drop_s {
    color: #4ade80;
}
.drop_prev {
    display: block;
    width: 100%;
    max-width: 190px;
    height: 62px;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: #0a0f18;
    pointer-events: none;
}

/* --- a submitting form must look like it is working ------------------ *
 * app.js disables the submit buttons one tick after the submit fires, so a
 * double click can never create the same trade twice.                     */
.btn[disabled],
.tbtn[disabled],
button[disabled],
.btn.is-busy,
.tbtn.is-busy {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

/* --- a chart with nothing to draw says so, instead of leaving a hole -- */
.chart_empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 26px;
    margin: 0;
    padding: 4px 8px;
    color: #6e7f99;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}

/* ==================================================================== *
 |  22. MULTI-COMPTES — the second brief, « gérer plusieurs comptes de
 |      trading complètement séparés ». Everything below dresses markup
 |      the account feature added; not one rule restyles the original
 |      board. Only the tokens declared in :root are used, so the new
 |      screens cannot drift away from the old ones.
 * ==================================================================== */

/* --- the « Compte sélectionné » picker, in the topbar ----------------- *
 * A real GET form, so it still works with JavaScript off (the <noscript>
 * OK button submits it). Shaped like .tchip on purpose: it sits in that
 * chip row and should read as part of the bar, not as a form.           */
.accpick {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.accpick_l {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.accpick_l:hover {
    background: #152030;
    border-color: #33456180;
}
.accpick_l:focus-within {
    border-color: var(--blue-2);
}
.accpick_l > i {
    color: var(--blue-soft);
    font-size: 12px;
}
.accpick_k {
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}
.accpick_s {
    max-width: 168px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #e8eef8;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
}
/* The open list is drawn by the OS: force the dark palette, or Windows
 * and Safari hand back black-on-white options inside a dark bar.        */
.accpick_s option {
    background: #0e1723;
    color: #e8eef8;
}

/* --- account chip: the COMPTE column and the dashboard rollup --------- *
 * Blue for a personal compte, amber for a prop firm, so a mixed table is
 * readable without going back to the Type column.                       */
.acctag {
    display: inline-block;
    max-width: 150px;
    padding: 2px 7px;
    overflow: hidden;
    background: #16233a;
    border: 1px solid #2b3d63;
    border-radius: 999px;
    color: #a5b8ff;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
.acctag:hover,
.acctag:focus-visible {
    background: #1b2b47;
    border-color: #3b558a;
    color: #c3d0ff;
}
.acctag--prop {
    background: #2b2312;
    border-color: #5a4620;
    color: #f0b429;
}
.acctag--prop:hover,
.acctag--prop:focus-visible {
    background: #352b16;
    border-color: #6d5527;
    color: #f7c95a;
}
/* --- the selected compte, restated in the sidebar --------------------- *
 * The trader can be three clicks deep in the journal and still see which
 * compte every figure belongs to. The whole line links to /comptes.     */
.sideacc {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    margin-top: 9px;
    padding: 0 8px;
    background: #101a2a;
    border: 1px solid #1d2a3e;
    border-radius: var(--r);
    color: var(--muted);
    font-size: 10px;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.sideacc:hover,
.sideacc:focus-visible {
    background: #132135;
    border-color: #2d436b;
}
.sideacc > i {
    flex: none;
    color: var(--blue-soft);
    font-size: 12px;
}
.sideacc_t {
    overflow: hidden;
    color: #dbe4f2;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- « MES COMPTES » cards -------------------------------------------- *
 * One card per compte so its rules and its numbers are read together —
 * the brief asks for Compte → Trades → Statistiques, « et non pas tous
 * les trades mélangés ». auto-fill gives 1, 2 or 3 columns on its own.  */
.accts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}
.acct {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 11px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
/* The compte the whole board is currently showing. */
.acct.is-active {
    border-color: #2f5fd0;
    box-shadow: inset 0 0 0 1px #2f5fd033;
}
/* Archived: still readable — its trades are kept — but visibly retired. */
.acct.is-archived {
    background: var(--card-2);
    border-style: dashed;
    opacity: .78;
}
.acct.is-archived .acct_name {
    color: var(--txt-2);
}
.acct_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.acct_id {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.acct_ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    background: #152136;
    border: 1px solid #22314a;
    border-radius: var(--r);
    color: var(--blue-soft);
    font-size: 13px;
}
.acct_ico--prop {
    background: #2b2312;
    border-color: #453519;
    color: #f0b429;
}
.acct_name {
    margin: 0;
    overflow: hidden;
    color: #eef3fb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acct_sub {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}
.acct_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: none;
}
/* The compte's own rules: capital, risque, objectif, drawdown max. Each
 * dt/dd pair is wrapped in a <div> so a label and its value stay on one
 * line whatever the column width.                                       */
.acct_rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 12px;
    margin: 0;
    padding-top: 8px;
    border-top: 1px dashed #1e2a3d;
}
.acct_rules > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-height: 15px;
}
.acct_rules dt {
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}
.acct_rules dd {
    margin: 0;
    color: #dbe4f2;
    font-size: 10px;
    font-weight: 600;
    text-align: right;
}
.acct_rules dd .hint {
    display: inline;
    margin: 0 0 0 3px;
    font-weight: 400;
}
/* Six figures per compte — trades, R, €, win rate, PF, drawdown max.
 * .ddstat is a row-grid elsewhere on the board; inside a card it becomes
 * a small tile so the label sits above its number.                      */
.acct_stats {
    row-gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed #1e2a3d;
}
.acct_stats .ddstat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 6px;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.acct_stats .ddstat_k {
    margin: 0;
    font-size: 9px;
    letter-spacing: .3px;
}
.acct_stats .ddstat_v {
    font-size: 12px;
    font-weight: 800;
}
.acct_stats .ddstat_v .hint {
    margin: 0 0 0 3px;
    font-size: 9px;
}
/* Sélectionner · Statistiques · Modifier · N trades · Archiver ·
 * Supprimer — the six actions the brief asks for, on every card.        */
.acct_foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--line);
}
.acct_foot form {
    display: flex;
}
/* --- prop-firm tracking strip ----------------------------------------- *
 * « Pour les comptes Prop Firm » : capital initial, profit target, max
 * drawdown, daily loss limit — shown as three progress bars built from
 * the very same .sbar_* pieces the statistics page uses.                */
.props {
    display: grid;
    /* auto-fit et non auto-fill : avec un seul compte Prop Firm, la piste
     * vide se replie et la carte occupe toute la largeur au lieu de laisser
     * un trou à sa droite. À partir de deux comptes, les deux se comportent
     * de la même façon et les cartes se rangent côte à côte.              */
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}
.prop {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 11px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
/* A rule has been broken: the card says so before the numbers do. */
.prop.is-breached {
    border-color: #5b2320;
    box-shadow: inset 0 0 0 1px #ef444426;
}
.prop.is-reached {
    border-color: #245c39;
    box-shadow: inset 0 0 0 1px #22c55e26;
}
.prop_head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.prop_name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #eef3fb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    text-decoration: none;
}
.prop_name > i {
    color: #f0b429;
    font-size: 13px;
}
.prop_name:hover,
.prop_name:focus-visible {
    color: var(--blue-soft);
}
.prop_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.prop_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.prop_cell {
    min-width: 0;
}
/* Les trois cellules n'ont pas la même hauteur — le drawdown a plus à dire.
 * Alignées par le haut, elles se lisent comme trois colonnes ; étirées, la
 * dernière ligne de chacune flottait à une hauteur différente.            */
.prop_grid > .prop_cell {
    align-self: start;
}
/* Dans une colonne d'environ 160 px, un .sbar_meta en ligne s'enroule au
 * milieu des phrases et on ne sait plus à quelle colonne appartient quoi :
 * ici chaque information prend sa propre ligne. La page Statistiques, elle,
 * garde ses métas en ligne — elle a toute la largeur de la carte.         */
.prop_cell .sbar_meta {
    display: grid;
    gap: 2px;
    line-height: 1.45;
}
.prop_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
}
.prop_meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.prop_meta b {
    color: #dbe4f2;
}
.prop_meta i {
    color: var(--muted-2);
}
.prop_link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--blue-soft);
    font-weight: 700;
    text-decoration: none;
}
.prop_link:hover,
.prop_link:focus-visible {
    text-decoration: underline;
}
/* The amber step the prop bars use from 70 % of a limit — green below it,
 * red at 100 %. --green / --blue / --red / --grey already exist above.  */
.sbar_fill--amber {
    background: linear-gradient(90deg, #b45309, #f59e0b);
}
/* --- risque journalier / hebdomadaire: the input lives in the bar ----- *
 * First brief, requirement #3. The limit is edited exactly where it is
 * read, so setting it and seeing what the day has consumed is one look.
 * Only .sbar_head's direct child is touched: the statistics bars, whose
 * .sbar_k holds nothing but text, are unaffected by a flex box.         */
.sbar_head > .sbar_k {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.sbar_head > .sbar_k label {
    cursor: pointer;
}
.sbar_head > .sbar_k b {
    color: #eef3fb;
}
.inp--pct {
    width: 62px;
    height: 22px;
    flex: none;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

/* --- instrument manager ----------------------------------------------- *
 * « XAUUSD, BTCUSD, NAS100, US30 et idéalement pouvoir en ajouter
 * d'autres » — so the four are seeded and the trader adds the rest.     */
.assetadd {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 10px;
    background: var(--card-2);
    border: 1px dashed #26334a;
    border-radius: var(--r);
}
.assetadd .field {
    flex: 1 1 150px;
    min-width: 130px;
}
.assetadd .tbtn {
    flex: none;
}
.req {
    color: #f87171;
    font-weight: 700;
}
/* Renaming happens in place: the cell IS the form. */
.assetren {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.assetren .inp--sm {
    flex: 1 1 auto;
    min-width: 88px;
    max-width: 180px;
}
/* Nom affiché + type + tick/point dans une seule cellule : les enregistrer
 * séparément effacerait la valeur du point, donc le R des Futures. */
.assetspec {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
}
.assetspec .field--sm {
    flex: 0 1 92px;
    min-width: 74px;
    gap: 2px;
    text-align: left;
}
.assetspec .field--sm:first-of-type {
    flex: 1 1 130px;
}
.assetspec .field_k {
    font-size: 9px;
    letter-spacing: 0.02em;
}
.assetspec .tbtn {
    flex: none;
    margin-bottom: 1px;
}
.assetspec + .hint {
    display: block;
    margin-top: 5px;
    text-align: left;
}
.inp--sm {
    height: 22px;
    padding: 0 6px;
    font-size: 10px;
}
.tbtn--sm {
    height: 20px;
    gap: 4px;
    padding: 0 6px;
}
.tbtn--sm i {
    font-size: 11px;
}
/* .acts carries icon buttons on the journal and small labelled buttons
 * on the comptes / instruments tables. Only the second kind needs the
 * spacing: .acts .act already brings its own margin.                    */
.acts form {
    display: flex;
    align-items: center;
}
.acts .tbtn + .tbtn,
.acts form + form,
.acts form + .tbtn,
.acts .tbtn + form {
    margin-left: 4px;
}

/* --- a checkbox that reads like a sentence (account form) -------------- */
.field--check {
    flex-direction: row;
    align-items: flex-start;
    gap: 7px;
    padding: 7px 9px;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
}
.field--check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 1px 0 0;
    flex: none;
    accent-color: var(--blue-2);
}
.field--check span {
    color: var(--txt-2);
    font-size: 10px;
    line-height: 1.5;
}
.field--check b {
    color: #dbe4f2;
}

/* --- a table row that is the selected compte, or an archived one ------- */
.jtable tbody tr.is-active td {
    background: #14243c;
}
.jtable tbody tr.is-active:hover td {
    background: #1a2b48;
}
.jtable tbody tr.is-archived td {
    color: var(--muted);
}
.jtable tbody tr.is-archived td b {
    color: var(--txt-2);
}

/* --- layout variants the statistics / errors / dashboard pages use ----- */
.card--stat,
.card--vs {
    display: flex;
    flex-direction: column;
}
.card--vs {
    justify-content: center;
}
.grid2--err {
    align-items: start;
}
/* Two "performance par X" cards side by side: the bar block takes the
 * slack, so the .best footnotes of both cards land on the same line.    */
.grid2--stat {
    align-items: stretch;
}
.card--stat .sbars {
    flex: 1 1 auto;
}
.dl--right dd {
    text-align: right;
}
/* The screenshot viewer: a lighter veil, the image carries the contrast. */
.modal--light {
    align-items: center;
    background: rgba(6, 10, 18, .55);
}
/* --- responsive: requirement #24, Mac / Windows / Chrome / Safari / Edge *
 * The picker is the one control that must never disappear on a small
 * screen — it decides what every figure on the page means.               */
@media (max-width: 1100px) {
    .prop_grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}
@media (max-width: 900px) {
    .accpick_k {
        display: none;
    }
    .accpick_l {
        height: 30px;
    }
    .accpick_s {
        max-width: 118px;
    }
    .accts,
    .props,
    .acct_rules {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Below 900px a .jtable row is already a card: tint the row itself,
     * because the cells' own background is forced transparent up there. */
    .jtable tbody tr.is-active td,
    .jtable tbody tr.is-active:hover td {
        background: transparent;
    }
    .jtable tbody tr.is-active {
        background: #14243c;
        border-color: #2f5fd0;
    }
    .jtable tbody tr.is-archived {
        border-style: dashed;
    }
    /* 168px of stats beside a chart is too narrow to read on a phone. */
    .card--dd2 .dd2 {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 600px) {
    .acct_stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .prop_grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .assetren {
        flex-wrap: wrap;
    }
    .assetspec .field--sm,
    .assetspec .field--sm:first-of-type {
        flex: 1 1 100px;
    }
}

/* --- « Objectifs & limites » on a non-prop account -------------------- *
 |  The second brief makes the objective and the drawdown limit optional for
 |  every compte (« éventuellement un objectif de profit »), so this block is
 |  never hidden — it is only dimmed, and comes back to full contrast the
 |  moment the trader hovers or focuses it. Hiding it would take a field away
 |  from a personal account that the brief says it may have.
 * --------------------------------------------------------------------- */
[data-acc-prop-off] {
    opacity: .62;
    transition: opacity .14s ease;
}
[data-acc-prop-off]:hover,
[data-acc-prop-off]:focus-within {
    opacity: 1;
}

/* --- Sorties partielles (Futures) ------------------------------------- *
 |  « Le journal doit permettre d'enregistrer les 3 sorties séparément. »
 |  Une grille de six colonnes qui reprend exactement la trame des .fgrid :
 |  numéro, contrats, prix, date/heure, raison, note. Sous 900 px les lignes
 |  se replient en deux colonnes plutôt que de rétrécir les champs jusqu'à
 |  l'illisible — un prix de sortie se relit, il ne se devine pas.
 * --------------------------------------------------------------------- */
.exits {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.exits_h,
.exits_r {
    display: grid;
    grid-template-columns: 18px minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .95fr) minmax(0, 1.2fr);
    gap: 6px;
    align-items: center;
}

.exits_h {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--muted-2);
    text-transform: uppercase;
}

.exits_n {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted-2);
    text-align: center;
}

.exits_f {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    font-size: 10px;
    color: var(--muted-2);
}

.exits_f b {
    color: #e8eef8;
    font-variant-numeric: tabular-nums;
}
.text-start {
    text-align: left !important;
}

/* Le petit drapeau « calculé » / « saisi » à côté du champ Performance. */
.rmode {
    margin-left: 5px;
    padding: 1px 5px;
    border: 1px solid #2c3d59;
    border-radius: 999px;
    background: #101b29;
    color: var(--blue-soft);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .exits_h {
        display: none;
    }
    .exits_r {
        grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr);
        padding-bottom: 6px;
        border-bottom: 1px solid var(--line);
    }
}