@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");

:root {
    --ink: #0e1c3a;
    --muted: #5b6b88;
    --paper: #eef4fb;
    --card: #ffffff;
    --line: #d5e3f4;
    --rail: #0b1733;
    --rail-2: #12285a;
    --cyan: #2ec8ff;
    --blue: #2f7bff;
    --violet: #6b5bff;
    --ok: #1b9a6a;
    --warn: #d64545;
    --shadow: 0 10px 28px rgba(14, 28, 58, 0.08);
    --font: "Outfit", "Segoe UI", sans-serif;
    font-family: var(--font);
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

h1, h2, h3, button, input, select, textarea, table, th, td, a, p, label, span {
    font-family: var(--font);
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--violet); }

.app {
    display: grid;
    grid-template-columns: 232px 1fr;
    height: 100%;
    overflow: hidden;
}

.rail {
    background: linear-gradient(185deg, #5c4dff 0%, #2f7bff 46%, #1bb8ea 100%);
    color: #fff;
    padding: 1.1rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    height: 100%;
    overflow: hidden;
    flex: none;
    border-right: 0;
}

.brand {
    display: block;
    text-decoration: none;
    background: #fff;
    border-radius: 0.9rem;
    padding: 0.55rem 0.6rem;
}
.brand-logo { display: block; width: 100%; height: auto; }
.brand-logo--dark { display: none; }
html[data-theme="dark"] .brand-logo--light { display: none; }
html[data-theme="dark"] .brand-logo--dark { display: block; }
html[data-theme="dark"] .brand { background: transparent; padding: 0.15rem 0.1rem; }

.rail-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
.rail-sep {
    display: block;
    height: 1px;
    margin: 0.45rem 0.55rem;
    background: rgba(255, 255, 255, 0.38);
    flex: none;
}
.rail-link {
    color: #f4f8ff;
    text-decoration: none;
    padding: 0.62rem 0.75rem;
    border-radius: 0.7rem;
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.rail-ico {
    flex: none;
    opacity: 0.92;
}
.rail-link:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    text-decoration: none;
}
.rail-link.is-on {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
    font-weight: 600;
}
/* Le thème clair Delta recolore tous les liens en bleu : illisible sur le rail. */
html[data-theme="light"] .rail .rail-link,
html[data-theme="light"] .rail .rail-link:hover,
html[data-theme="light"] .rail .rail-link.is-on {
    color: #fff;
}

.shell {
    min-width: 0;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.app-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    align-items: center;
    flex: none;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(14, 28, 58, 0.05);
    position: sticky;
    top: 0;
    z-index: 20;
}
.top-title { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex-wrap: wrap; }
.top-title-ico {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    background: linear-gradient(145deg, rgba(107, 91, 255, 0.14), rgba(47, 123, 255, 0.12));
    border: 1px solid var(--line);
    color: var(--blue);
    flex: none;
}
.top-title-ico .rail-ico {
    width: 1.15rem;
    height: 1.15rem;
    opacity: 1;
}
.title-sync { margin: 0; }
.app-top h1 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.muted { color: var(--muted); }
.top-actions { display: flex; gap: 1rem; align-items: center; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.compte-form { display: flex; align-items: center; margin: 0; }
.compte-form select {
    border: 1px solid var(--line);
    background: var(--card);
    padding: 0.45rem 0.65rem;
    border-radius: 0.55rem;
    min-width: 14rem;
    font: inherit;
    color: var(--ink);
}
.who-block {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #6b5bff, #2f7bff);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    flex: none;
}
.who { text-align: left; }
.who-name { display: block; font-weight: 600; font-size: 0.95rem; }
.who-mail { font-size: 0.78rem; color: var(--muted); }
.logout-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--warn);
    padding: 0.35rem 0.55rem;
    border-radius: 0.5rem;
    white-space: nowrap;
}
.logout-ico { flex: none; color: var(--warn); }
.logout-link:hover { color: #b91c1c; background: #fff1f1; text-decoration: none; }
.logout-link:hover .logout-ico { color: #b91c1c; }

.impersonate-revert { margin: 0; }
.chip-impersonate {
    background: #fff4e5;
    border-color: #f0d39a;
    color: #8a5a00;
    font-weight: 600;
}
.chip-impersonate:hover { filter: brightness(0.98); }
.pill-impersonate {
    background: #fff4e5;
    color: #8a5a00;
    margin-left: 0.35rem;
    vertical-align: middle;
}
.pill-role-admin { background: #ede9fe; color: #5b21b6; }
.pill-role-superviseur { background: #ffedd5; color: #c2410c; }
.pill-role-standard { background: #e7eef8; color: #1e4b8c; }
.admin-user-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0;
}
.admin-user-search input[type="search"] {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    border-radius: 0.5rem;
    padding: 0.4rem 0.65rem;
    font: inherit;
    min-width: 12rem;
}
.inline-form { display: inline; margin: 0; }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.42rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.theme-toggle:hover { filter: none; background: #eef4fb; }
.theme-toggle__ico { font-size: 1.02rem; line-height: 1; }

.page-busy {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    background: rgba(11, 23, 51, 0.28);
    backdrop-filter: blur(4px);
}
.page-busy[hidden] { display: none; }
.page-busy-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 18px 40px rgba(11, 23, 51, 0.18);
    font-weight: 600;
}
.page-busy-spin {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(47, 123, 255, 0.22);
    border-top-color: #2f7bff;
    border-right-color: #2ec8ff;
    animation: tresor-spin 0.7s linear infinite;
    flex: none;
}
.page-busy-txt { font-size: 0.95rem; letter-spacing: -0.02em; }
@keyframes tresor-spin {
    to { transform: rotate(360deg); }
}

.main { padding: 0.85rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 0.95rem; }
.context-line { margin: 0; font-size: 0.92rem; color: var(--muted); }

.kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}
.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 0.95rem 1rem;
    box-shadow: var(--shadow);
}
.kpi-label {
    margin: 0;
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.kpi-value {
    margin: 0.35rem 0 0.12rem;
    font-size: 1.28rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.kpi-hint { margin: 0; font-size: 0.78rem; color: var(--muted); }
.kpi-warn .kpi-value { color: var(--warn); }
.kpi-ok .kpi-value { color: var(--ok); }

.split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.95rem;
}
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 1rem 1.05rem 1.15rem;
    box-shadow: var(--shadow);
}
.card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.card-head h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; }
.card-head p { margin: 0.2rem 0 0; }
.subh { font-size: 0.92rem; margin: 1rem 0 0.4rem; font-weight: 600; }
.row-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 0 0.2rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.48rem 0.35rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--ok); }
.neg { color: var(--warn); }
.table-wrap { overflow: auto; }
table.dense td, table.dense th { padding: 0.38rem 0.3rem; }
tr.is-overdue td { background: #fff1f1; }
.mini { font-size: 0.86rem; }

.type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    vertical-align: middle;
    text-transform: none;
}
.type-badge--facture { background: #fee2e2; color: #b91c1c; }
.type-badge--facture_c { background: #dcfce7; color: #15803d; }
.type-badge--avoir { background: #ffedd5; color: #c2410c; }
.type-badge--avoir_c { background: #fef9c3; color: #854d0e; }
.type-badge--autre { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

.js-grid thead th.is-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.js-grid thead th.is-sortable:hover { color: var(--ink); }
.js-grid thead th .sort-ind {
    display: inline-block;
    margin-left: 0.25rem;
    opacity: 0.35;
    font-size: 0.65rem;
}
.js-grid thead th.is-sorted-asc .sort-ind,
.js-grid thead th.is-sorted-desc .sort-ind { opacity: 1; color: var(--blue, #2f7bff); }
.js-grid thead th.is-sorted-asc .sort-ind::after { content: '▲'; }
.js-grid thead th.is-sorted-desc .sort-ind::after { content: '▼'; }
.js-grid thead th:not(.is-sorted-asc):not(.is-sorted-desc) .sort-ind::after { content: '↕'; }
.js-grid .js-grid-filters th {
    padding-top: 0.15rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--line);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.js-grid .js-grid-filter {
    width: 100%;
    min-width: 3.5rem;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.75rem;
    padding: 0.28rem 0.4rem;
}
.js-grid .js-grid-filter:focus {
    outline: 2px solid rgba(47, 123, 255, 0.35);
    outline-offset: 1px;
}
.js-grid-filters th.num .js-grid-filter { text-align: right; }
.js-grid-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.35rem 0.2rem;
    color: var(--muted);
    font-size: 0.78rem;
}
.js-grid-more[hidden] { display: none; }
.js-grid-sentinel { height: 1px; width: 100%; }

.bank-mini { list-style: none; margin: 0; padding: 0; }
.bank-mini li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.bank-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    background: #fff;
    border-radius: 0.45rem;
    border: 1px solid var(--line);
    padding: 3px;
    flex: none;
    vertical-align: middle;
}
.bank-logo--sm { width: 28px; height: 28px; padding: 2px; }
.bank-logo--lg { width: 48px; height: 48px; padding: 4px; border-radius: 0.65rem; }
.bank-logo--fallback {
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--blue);
    background: #eef4fb;
}
.bank-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
}
.bank-cell:hover { text-decoration: none; color: var(--violet); }
.kpi-bank-head { display: flex; align-items: center; gap: 0.55rem; }
.kpi-bank-head .kpi-label { margin: 0; }

.page-tabs {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    width: fit-content;
    max-width: 100%;
}
.page-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border-radius: 0.65rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--muted);
    text-decoration: none;
}
.page-tab:hover { color: var(--ink); background: rgba(47, 123, 255, 0.08); }
.page-tab.is-on {
    color: #fff;
    background: linear-gradient(90deg, var(--violet), var(--blue));
}

.banner-sync {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.2rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid #f0d39a;
    background: linear-gradient(135deg, #fff8e8 0%, #fff1d0 100%);
    color: #7a4e00;
}
.banner-sync-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: min(100%, 16rem);
    flex: 1;
}
.banner-sync-text strong { font-size: 0.92rem; }
.banner-sync-text span { font-size: 0.84rem; opacity: 0.92; }
.banner-sync-form { margin: 0; flex: none; }

.banner-demo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.2rem;
    margin: 0 0 1rem;
    padding: 0.95rem 1.1rem;
    border-radius: 0.85rem;
    border: 2px solid #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 55%, #fde68a 100%);
    color: #92400e;
    box-shadow: 0 1px 0 rgba(245, 158, 11, 0.25);
}
.banner-demo-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: min(100%, 16rem);
    flex: 1;
}
.banner-demo-text strong {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.banner-demo-text span { font-size: 0.9rem; line-height: 1.35; }

.bank-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: 0.85rem;
}
.bank-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.95rem;
    background:
        linear-gradient(165deg, rgba(47, 123, 255, 0.06) 0%, transparent 42%),
        var(--card);
}
.bank-block.is-stale {
    border-color: #f0d39a;
    box-shadow: inset 0 0 0 1px rgba(240, 211, 154, 0.35);
}
.bank-block.is-demo {
    border-color: #f59e0b;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(245, 158, 11, 0.08),
            rgba(245, 158, 11, 0.08) 8px,
            rgba(254, 243, 199, 0.35) 8px,
            rgba(254, 243, 199, 0.35) 16px
        ),
        var(--card);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
}
.bank-block-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.65rem;
    align-items: start;
}
.bank-block-titles { min-width: 0; }
.bank-block-titles h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.bank-block-titles p {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}
.bank-block-balance {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.bank-block-meta {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}
.bank-block-meta > div {
    display: grid;
    gap: 0.1rem;
}
.bank-block-meta dt {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.bank-block-meta dd {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 500;
}
.bank-block-meta dd.is-stale { color: #b7791f; font-weight: 600; }
.bank-block-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-top: auto;
    padding-top: 0.15rem;
}
.bank-block-acts form { margin: 0; }

.bank-summary-head {
    align-items: flex-end;
    margin-bottom: 1rem;
}
.bank-summary-head > div { min-width: 0; }
.bank-summary-total {
    margin: 0.2rem 0 0.1rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.bank-form--modal {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0.75rem;
}
.bank-account-modal {
    width: min(560px, calc(100vw - 36px));
    height: auto;
    max-height: min(90vh, 720px);
    display: flex;
    flex-direction: column;
}
.bank-account-modal-body {
    padding: 1rem 1.1rem 1.15rem;
    overflow: auto;
}
.bank-account-modal-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}
@media (max-width: 560px) {
    .bank-form--modal { grid-template-columns: 1fr; }
    .bank-summary-head {
        flex-direction: column;
        align-items: stretch;
    }
}

.bank-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.bank-toolbar .title-sync { margin: 0; }
.btn-ghost {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
}
.btn-danger {
    background: #c0392b;
    color: #fff;
}
.bank-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 0.5rem;
}
.bank-form .btn { justify-self: start; }
.row-acts { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.row-acts form { margin: 0; }
button.chip {
    appearance: none;
    cursor: pointer;
    font: inherit;
}
.chip-danger { background: #ffe3e3; color: #9b1c1c; border-color: #f5c2c2; }
.pill-src-powens { background: #dbeafe; color: #1d4ed8; }
.pill-src-manual { background: #ede9fe; color: #5b21b6; }
.pill-src-demo {
    background: #f59e0b;
    color: #78350f;
    border: 1px solid #d97706;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pill-demo-lg {
    font-size: 0.78rem;
    padding: 0.28rem 0.65rem;
    white-space: nowrap;
}
.banner-info, .banner-warn {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.65rem;
    font-size: 0.88rem;
    border: 1px solid var(--line);
}
.banner-info { background: #eef6ff; color: #1e4b8c; }
.banner-warn { background: #fff7e8; color: #8a5a00; }
html[data-theme="dark"] .banner-info { background: #152848; color: #c7dbff; }
html[data-theme="dark"] .banner-warn { background: #3a2c14; color: #f0d39a; }
html[data-theme="dark"] .banner-sync {
    background: linear-gradient(135deg, #3a2c14 0%, #2e2410 100%);
    border-color: #6b5420;
    color: #f0d39a;
}
html[data-theme="dark"] .banner-demo {
    background: linear-gradient(135deg, #3a2c14 0%, #422006 100%);
    border-color: #f59e0b;
    color: #fde68a;
}
html[data-theme="dark"] .pill-src-demo {
    background: #f59e0b;
    color: #422006;
    border-color: #fbbf24;
}
html[data-theme="dark"] .bank-block.is-demo {
    border-color: #f59e0b;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(245, 158, 11, 0.16),
            rgba(245, 158, 11, 0.16) 8px,
            rgba(66, 32, 6, 0.55) 8px,
            rgba(66, 32, 6, 0.55) 16px
        ),
        var(--card);
}
html[data-theme="dark"] .page-tabs { background: rgba(21, 33, 60, 0.7); }
html[data-theme="dark"] .page-tab:hover { background: rgba(47, 123, 255, 0.16); }
html[data-theme="dark"] .bank-block {
    background:
        linear-gradient(165deg, rgba(47, 123, 255, 0.1) 0%, transparent 42%),
        var(--card);
}
html[data-theme="dark"] .bank-block.is-stale {
    border-color: #6b5420;
    box-shadow: inset 0 0 0 1px rgba(107, 84, 32, 0.45);
}
html[data-theme="dark"] .bank-block-meta dd.is-stale { color: #f0d39a; }
html[data-theme="dark"] .btn-ghost { background: #1c2c4e; color: var(--ink); }

.presence-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--muted);
    margin: 0 0 0.55rem;
    padding-left: 11rem;
}
.presence-list { display: flex; flex-direction: column; gap: 0.65rem; }
.presence-row {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.75rem;
    align-items: center;
}
.presence-who { min-width: 0; }
.presence-who strong { display: block; font-size: 0.9rem; }
.presence-who .muted { font-size: 0.72rem; }
.presence-track {
    position: relative;
    height: 1.35rem;
    border-radius: 0.45rem;
    background: repeating-linear-gradient(
        90deg,
        rgba(47, 123, 255, 0.06) 0,
        rgba(47, 123, 255, 0.06) 1px,
        transparent 1px,
        transparent calc(100% / 7)
    ), var(--paper);
    border: 1px solid var(--line);
    overflow: hidden;
}
.presence-bar {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: 0.3rem;
    opacity: 0.9;
    min-width: 3px;
}
.admin-db-list { margin: 0.6rem 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.88rem; }
.admin-db-list code { color: var(--ink); }
.admin-sql {
    margin: 0.5rem 0 0;
    padding: 0.75rem 0.9rem;
    border-radius: 0.55rem;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.78rem;
    overflow: auto;
}
.pill-src-login { background: #dcfce7; color: #15803d; }
.pill-src-logout { background: #ffedd5; color: #c2410c; }
.pill-src-page { background: #dbeafe; color: #1d4ed8; }
.pill-src-action { background: #ede9fe; color: #5b21b6; }
.pill-src-login_fail { background: #fee2e2; color: #b91c1c; }
html[data-theme="dark"] .presence-track { background: #101a31; }

.day-card-head { align-items: center; }
.day-nav { display: flex; align-items: center; gap: 0.4rem; margin: 0; flex-wrap: wrap; }
.day-nav input[type="date"] {
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font: inherit;
    font-size: 0.84rem;
}
.day-nav .btn { padding: 0.32rem 0.75rem; border-radius: 999px; font-size: 0.84rem; }
.day-nav-btn { min-width: 2.1rem; text-align: center; padding-left: 0.55rem; padding-right: 0.55rem; }
.day-nav-btn.is-disabled { opacity: 0.35; }
html[data-theme="light"] .day-nav a.chip,
html[data-theme="light"] .day-nav a.chip:hover { color: var(--ink); }
.day-date {
    margin: 0.15rem 0 0.85rem;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    text-transform: capitalize;
}
.day-empty { margin: 0.4rem 0 0.2rem; color: var(--muted); }
.day-scale,
.day-row {
    display: grid;
    grid-template-columns: minmax(12rem, 16.5rem) minmax(0, 1fr) 4.6rem;
    gap: 0.85rem;
    align-items: center;
}
.day-scale { margin-bottom: 0.15rem; font-size: 0.7rem; color: var(--muted); font-weight: 600; }
.day-scale-track { position: relative; height: 1.15rem; }
.day-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}
.day-tick.is-start { transform: none; }
.day-tick.is-end { transform: translateX(-100%); }
.day-now-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    color: #e11d48;
    font-weight: 700;
    font-size: 0.65rem;
    white-space: nowrap;
    background: var(--card);
    padding: 0 0.25rem;
    z-index: 1;
}
.day-list { display: flex; flex-direction: column; gap: 0.2rem; }
.day-row {
    padding: 0.42rem 0.35rem;
    border-radius: 0.85rem;
}
.day-row:hover { background: rgba(47, 123, 255, 0.06); }
.day-who { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.day-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(145deg, #6b5bff, #2f7bff);
}
.day-who-meta { min-width: 0; }
.day-who-meta strong {
    display: block;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.day-who-meta .muted { font-size: 0.74rem; }
.day-live { color: #0f7a4f; font-weight: 650; }
.day-live::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.28rem;
    border-radius: 50%;
    background: #12b886;
    box-shadow: 0 0 0 3px rgba(18, 184, 134, 0.22);
    vertical-align: -0.05rem;
}
.day-track {
    position: relative;
    height: 1.7rem;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--line);
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent calc(100% / 24 - 1px),
            rgba(47, 123, 255, 0.14) calc(100% / 24 - 1px),
            rgba(47, 123, 255, 0.14) calc(100% / 24)
        ),
        linear-gradient(180deg, #f7faff, #e7eef8);
}
.day-bar {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: 999px;
    min-width: 10px;
    z-index: 1;
    background: linear-gradient(90deg, #6b5bff, #2f7bff 62%, #2ec8ff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.day-row.is-online .day-bar { box-shadow: 0 0 14px rgba(47, 123, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.day-now {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #e11d48;
    z-index: 2;
    pointer-events: none;
}
.day-dur {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    font-size: 0.84rem;
    color: var(--ink);
}
.day-fails { margin-top: 0.9rem; color: var(--muted); font-size: 0.84rem; }
.day-fails summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.day-fails ul { margin: 0.45rem 0 0; padding-left: 1.1rem; }
html[data-theme="dark"] .day-track {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent calc(100% / 24 - 1px),
            rgba(142, 182, 255, 0.16) calc(100% / 24 - 1px),
            rgba(142, 182, 255, 0.16) calc(100% / 24)
        ),
        #101a31;
}
html[data-theme="dark"] .day-row:hover { background: rgba(142, 182, 255, 0.06); }
html[data-theme="dark"] .day-live { color: #5ee9b5; }
html[data-theme="dark"] .day-nav input[type="date"] { background: #101a31; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .day-now-label,
html[data-theme="dark"] .day-now { color: #fb7185; background: #fb7185; }
html[data-theme="dark"] .day-now-label { background: transparent; }
html[data-theme="dark"] .admin-sql { background: #060b16; }

@media (max-width: 800px) {
    .presence-axis { padding-left: 0; }
    .presence-row { grid-template-columns: 1fr; }
    .day-scale, .day-row { grid-template-columns: 1fr; gap: 0.35rem; }
    .day-scale-gutter, .day-scale-dur { display: none; }
    .day-dur { text-align: left; }
}

.pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: #e7eef8;
    color: var(--ink);
}
.pill-out { background: #ffe3e3; color: #9b1c1c; }
.pill-in { background: #d9f6ea; color: #0f7a4f; }
.mono { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 0.8rem; }

.sit-list { display: flex; flex-direction: column; gap: 0.55rem; }
.sit-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1.2fr) minmax(8rem, 1.6fr) minmax(7rem, 0.8fr);
    gap: 0.85rem;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--line);
}
.sit-meta { min-width: 0; }
.sit-title { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.sit-title strong { font-size: 0.92rem; font-weight: 600; }
.sit-sub { display: block; font-size: 0.78rem; margin-top: 0.15rem; }
.sit-bar-wrap { width: 100%; }
.sit-bar {
    height: 12px;
    width: var(--sit-w, 100%);
    max-width: 100%;
    border-radius: 999px;
    background: rgba(47, 123, 255, 0.12);
    overflow: hidden;
    display: flex;
}
.sit-bar-od { height: 100%; background: linear-gradient(90deg, #d64545, #ef7a7a); }
.sit-bar-up { height: 100%; background: linear-gradient(90deg, #2f7bff, #2ec8ff); }
.sit-amt { text-align: right; display: flex; flex-direction: column; gap: 0.1rem; }
.sit-amt strong { font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.sit-od { font-size: 0.74rem; }
@media (max-width: 800px) {
    .sit-row { grid-template-columns: 1fr; gap: 0.35rem; }
    .sit-amt { text-align: left; }
}

.filters { display: flex; flex-wrap: wrap; gap: 1rem; }
.filter-group { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.filter-group > span { font-size: 0.78rem; color: var(--muted); margin-right: 0.3rem; font-weight: 500; }
.chip {
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
}
.chip.is-on {
    background: linear-gradient(90deg, var(--violet), var(--blue));
    color: #fff;
    border-color: transparent;
}

.btn, button {
    appearance: none;
    border: 0;
    background: linear-gradient(90deg, var(--violet), var(--blue) 55%, var(--cyan));
    color: #fff;
    padding: 0.55rem 0.95rem;
    border-radius: 0.65rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.btn:hover, button:hover { filter: brightness(1.05); }
.pass-eye { background: transparent; color: var(--muted); }

.notice-layer {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    width: min(440px, calc(100vw - 28px));
}
.notice-box { width: 100%; max-height: none; }
.notice-body { padding: 1rem 1.1rem 1.15rem; }
.notice-body p { margin: 0; font-size: 0.95rem; line-height: 1.45; }

.doc-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(11, 23, 51, 0.34);
    backdrop-filter: blur(3px);
}
.doc-modal-layer[hidden] { display: none; }
.doc-modal-box {
    width: min(920px, calc(100vw - 36px));
    height: min(86vh, 860px);
    max-height: none;
    display: flex;
    flex-direction: column;
}
.doc-modal-box.is-max {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
}
.doc-modal-box.is-min {
    position: fixed;
    left: 18px;
    bottom: 18px;
    width: auto;
    height: auto;
    border-radius: 999px;
}
.doc-modal-box.is-min .doc-modal-frame,
.doc-modal-box.is-min .km-modal-resize { display: none; }
.doc-modal-box.is-min .km-modal-header {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
}
.doc-modal-frame {
    flex: 1;
    min-height: 0;
    border: 0;
    width: 100%;
    background: #525659;
}
html[data-theme="dark"] .doc-modal-layer { background: rgba(5, 10, 22, 0.55); }
.settings-card { max-width: 36rem; display: flex; flex-direction: column; gap: 0.9rem; }
.settings-card .muted { margin: 0; }
.settings-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.settings-presets .chip { border: 1px solid var(--line); background: var(--paper); }
.chk {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
}
.chk input { margin-top: 0.2rem; accent-color: var(--blue); }

.gate-body {
    min-height: 100%;
    height: 100%;
    overflow: auto;
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(46, 200, 255, 0.28), transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(107, 91, 255, 0.18), transparent 55%),
        #e8f1fb;
}
.gate-stage {
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    padding: 32px 16px;
}
.gate-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.gate-hero[hidden] { display: none; }
.gate-hero img, .gate-hero-logo { display: block; max-width: 280px; height: auto; }
.gate-brand-logo { display: block; width: min(220px, 100%); height: auto; margin: 0 auto; }
.brand-logo--dark.gate-hero-logo, .brand-logo--dark.gate-brand-logo { display: none; }
html[data-theme="dark"] .brand-logo--light.gate-hero-logo,
html[data-theme="dark"] .brand-logo--light.gate-brand-logo { display: none; }
html[data-theme="dark"] .brand-logo--dark.gate-hero-logo,
html[data-theme="dark"] .brand-logo--dark.gate-brand-logo { display: block; }
.gate-box { width: min(440px, calc(100vw - 48px)); z-index: 1; }
.gate-box[hidden] { display: none; }
.gate-box.is-pinned { position: fixed; margin: 0; }
.gate-box .km-modal-header { cursor: grab; }
.gate-box.is-max .km-modal-header,
.gate-box.is-min .km-modal-header { cursor: default; }
.gate-brand { margin: 4px 0 8px; }
.gate-brand img { display: block; width: min(220px, 100%); height: auto; margin: 0 auto; }
.gate-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 28px 26px;
    width: 100%;
    min-width: 0;
}
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; font-weight: 500; color: var(--muted); }
.fld input {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
}
.pass-wrap { position: relative; display: block; }
.pass-wrap input { width: 100%; padding-right: 40px; }
.pass-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    padding: 4px;
    display: flex;
    border-radius: 6px;
}
.pass-eye:hover { color: var(--ink); background: #eef4fb; }
.pass-eye .eye-off { display: none; }
.pass-eye.is-on .eye-on { display: none; }
.pass-eye.is-on .eye-off { display: block; }
.gate-form .btn { align-self: flex-start; margin-top: 6px; padding: 10px 18px; }
.gate-error { color: var(--warn); margin: 0; font-weight: 500; }
.gate-box.is-max {
    width: min(720px, calc(100vw - 32px));
    height: min(640px, calc(100vh - 32px));
    max-height: none;
}
.gate-box.is-min {
    position: fixed;
    left: 18px;
    bottom: 18px;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(11, 23, 51, 0.16);
}
.gate-box.is-min .gate-form,
.gate-box.is-min .km-modal-resize { display: none; }
.gate-box.is-min .km-modal-header { border: 0; border-radius: 999px; padding: 8px 12px; background: #fff; }

.km-modal-box {
    position: relative;
    z-index: 1;
    background: #fff;
    max-height: min(86vh, 860px);
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(11, 23, 51, 0.16), 0 0 0 1px rgba(14, 28, 58, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.km-modal-box.is-pinned {
    position: fixed;
    max-height: none;
    margin: 0;
}
.km-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: #f3f7fd;
    border-bottom: 1px solid var(--line);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}
.km-modal-header h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}
.km-modal-win {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    flex-shrink: 0;
}
.km-win {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    flex: none;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        0 0.5px 0 rgba(255, 255, 255, 0.65) inset,
        0 -1px 1px rgba(0, 0, 0, 0.12) inset;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.km-win:hover { transform: scale(1.12); filter: brightness(1.04); }
.km-win:active { transform: scale(0.96); }
.km-win-min {
    background:
        radial-gradient(120% 100% at 30% 22%, #fff7e8 0%, #f0e2c8 42%, #d9c7a8 78%, #c4b089 100%);
}
.km-win-max {
    background:
        radial-gradient(120% 100% at 30% 22%, #e4f0df 0%, #c5d8c1 42%, #9fb89b 78%, #7f9a7c 100%);
}
.km-win-close {
    background:
        radial-gradient(120% 100% at 30% 22%, #efb8b2 0%, #d9847c 42%, #c45f58 78%, #a84842 100%);
}
.km-win::before {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 10%;
    height: 36%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.km-win::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: center / 10px 10px no-repeat;
    opacity: 1;
    pointer-events: none;
}
.km-win-min::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6h7.2' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.km-win-max::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.8' y='2.8' width='6.4' height='6.4' rx='0.5' fill='none' stroke='%231a1a1a' stroke-width='1.7'/%3E%3C/svg%3E");
}
.km-win-max.is-restore::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.2 2.8h5v5' fill='none' stroke='%231a1a1a' stroke-width='1.5'/%3E%3Crect x='2.4' y='4' width='5.2' height='5.2' rx='0.4' fill='none' stroke='%231a1a1a' stroke-width='1.5'/%3E%3C/svg%3E");
}
.km-win-close::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 3.2l5.6 5.6M8.8 3.2L3.2 8.8' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.km-modal-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 2;
}
.km-modal-resize::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #9bb3d0;
    border-bottom: 2px solid #9bb3d0;
}

.gate-theme {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
}
.gate-body { position: relative; }

html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e8f0ff;
    --muted: #93a4c4;
    --paper: #0b1224;
    --card: #15213c;
    --line: #24355a;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .rail {
    background: linear-gradient(185deg, #141c30 0%, #0e1628 58%, #0b1220 100%);
    border-right: 1px solid #24355a;
}
html[data-theme="dark"] .app-top {
    background: linear-gradient(180deg, #1a2744 0%, #15213c 100%);
    border-bottom-color: var(--line);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
html[data-theme="dark"] .top-title-ico {
    background: linear-gradient(145deg, rgba(107, 91, 255, 0.22), rgba(47, 123, 255, 0.18));
    border-color: var(--line);
    color: #8eb6ff;
}
html[data-theme="dark"] .theme-toggle {
    background: var(--card);
    color: var(--ink);
    border-color: var(--line);
}
html[data-theme="dark"] .theme-toggle:hover { background: #1c2c4e; }
html[data-theme="dark"] .chip-impersonate {
    background: #3a2c14;
    border-color: #6b5420;
    color: #f0d39a;
}
html[data-theme="dark"] .pill-impersonate {
    background: #3a2c14;
    color: #f0d39a;
}
html[data-theme="dark"] .admin-user-search input[type="search"] {
    background: #101a31;
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] .settings-presets .chip { background: #1c2c4e; color: var(--ink); }
html[data-theme="dark"] .page-busy { background: rgba(5, 10, 22, 0.55); }
html[data-theme="dark"] .compte-form select {
    background: var(--card);
    color: var(--ink);
    border-color: var(--line);
}
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .card,
html[data-theme="dark"] .km-modal-box {
    background: var(--card);
    border-color: var(--line);
}
html[data-theme="dark"] .km-modal-header { background: #1a2744; border-color: var(--line); }
html[data-theme="dark"] .chip { background: var(--card); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .chip.is-on {
    background: linear-gradient(90deg, var(--violet), var(--blue));
    color: #fff;
    border-color: transparent;
}
html[data-theme="dark"] .fld input { background: #101a31; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .gate-body {
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(46, 200, 255, 0.12), transparent 60%),
        #0b1224;
}
html[data-theme="dark"] tr.is-overdue td { background: #3a2030; }
html[data-theme="dark"] .js-grid .js-grid-filter { background: #101a31; border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .type-badge--autre { background: #1c2c4e; color: #93a4c4; border-color: var(--line); }

@media (max-width: 1100px) {
    .kpis, .kpis-4, .split { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
    html, body { height: auto; overflow: auto; }
    .app { grid-template-columns: 1fr; height: auto; overflow: visible; }
    .rail {
        height: auto;
        overflow: visible;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .rail-nav { flex-direction: row; flex-wrap: wrap; overflow: visible; }
    .rail-sep { width: 1px; height: 1.4rem; margin: 0 0.35rem; align-self: center; }
    .shell { height: auto; overflow: visible; }
    .brand { max-width: 140px; }
    .app-top, .main { padding-left: 1rem; padding-right: 1rem; }
    .app-top { flex-direction: column; align-items: flex-start; padding-right: 4rem; }
    .who-block { flex-wrap: wrap; }
    .kpis, .kpis-4, .split { grid-template-columns: 1fr; }
}

/* ---- confirmation modale (remplace confirm() natif) ---- */
.ask {
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(11, 23, 51, .48);
    backdrop-filter: blur(3px);
    animation: ask-in .12s ease-out;
}
@keyframes ask-in { from { opacity: 0; } to { opacity: 1; } }
.ask-card {
    width: min(420px, 100%);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(14, 28, 58, .28);
    overflow: hidden;
}
.ask-body { padding: 20px 22px 4px; }
.ask-body strong { display: block; font-size: 17px; color: var(--ink); font-weight: 700; }
.ask-body p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ask-card.is-danger .ask-body strong { color: var(--warn); }
.ask-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 18px 22px 20px;
}
.ask-foot .btn { min-width: 104px; justify-content: center; }
html[data-theme="dark"] .ask { background: rgba(5, 10, 22, .62); }
html[data-theme="dark"] .ask-card { background: #15233f; }