/* ==========================================================================
   MonCentre 6 — « Papier » (octobre 2026)
   Chargé EN DERNIER (après style.css et theme3.css).
   Principe : un papier chaud, de l'encre, des filets fins, UNE seule couleur d'accent (au choix : Mon compte → Apparence).
   Pas de dégradés, de verre, d'ombres portées ni de pastilles colorées : la typographie fait le travail.
     - titres : empattement (serif système) ; interface : Inter ; repères et données : monospace
     - accent : html[data-palette] = soleil (Vermillon, défaut) | bonbon | menthe | citron | encre
   ========================================================================== */

/* ---------- Palettes d'accent ---------- */
:root {
    --pal: #ff4a1c; --pal-ink: #c23508; --on-pal: #14130f;
    --pal-d: #ff6a3d; --pal-ink-d: #ff8a63; --on-pal-d: #14130f;
}
html[data-palette="bonbon"] { --pal: #ff3d8b; --pal-ink: #c0125f; --on-pal: #14130f; --pal-d: #ff6aa8; --pal-ink-d: #ff8fbd; --on-pal-d: #14130f; }
html[data-palette="menthe"] { --pal: #12b886; --pal-ink: #087a58; --on-pal: #04130d; --pal-d: #3ddba5; --pal-ink-d: #5be3b7; --on-pal-d: #04130d; }
html[data-palette="citron"] { --pal: #f4d000; --pal-ink: #7a6500; --on-pal: #14130f; --pal-d: #ffdc1f; --pal-ink-d: #ffe35a; --on-pal-d: #14130f; }
html[data-palette="encre"]  { --pal: #14130f; --pal-ink: #14130f; --on-pal: #fffefb; --pal-d: #f3f1ea; --pal-ink-d: #f3f1ea; --on-pal-d: #14130f; }

/* ---------- Jetons : clair ---------- */
:root {
    color-scheme: light;
    --bg: #f6f4ee;
    --surface: #fffefb;
    --surface-2: #efece4;
    --ink: #14130f;
    --ink-2: #3b3932;
    --muted: #77736a;
    --line: #e4e0d5;
    --line-strong: #cdc8ba;

    --brand: var(--pal);
    --brand-2: var(--pal);
    --brand-3: var(--pal);
    --brand-ink: var(--pal-ink);
    --on-brand: var(--on-pal);
    --brand-soft: color-mix(in srgb, var(--pal) 16%, transparent);
    --brand-gradient: var(--pal);
    --brand-gradient-vivid: var(--pal);

    --ok: #1f8a4c; --warn: #c76a00; --bad: #d92d20; --info: #1f6f8b;
    --m-dashboard: var(--brand); --m-tasks: var(--brand); --m-appointments: var(--brand); --m-projects: var(--brand); --m-notes: var(--brand);
    --m-shopping: var(--brand); --m-inventory: var(--brand); --m-budget: var(--brand); --m-mail: var(--brand); --m-files: var(--brand);
    --m-stats: var(--brand); --m-account: var(--brand); --m-admin: var(--brand); --m-lorenzo: var(--brand); --m-help: var(--brand); --m-work: var(--brand);
    --work: var(--brand);
    --on-mod: var(--on-brand);

    --surface-tint: rgba(20, 19, 15, .04);
    --surface-tint-strong: rgba(20, 19, 15, .07);
    --glass: var(--surface); --glass-strong: var(--surface); --card-bg: var(--surface);
    --bevel: transparent; --sheen: transparent; --glow: transparent;
    --radius: 8px; --radius-sm: 6px; --radius-lg: 12px;
    --shadow-1: none;
    --shadow-2: 0 10px 28px -14px rgba(20, 19, 15, .28);
    --shadow-3: 0 28px 64px -26px rgba(20, 19, 15, .42);
    --grain-opacity: 0;
    --aurora-1: transparent; --aurora-2: transparent; --aurora-3: transparent; --aurora-4: transparent;

    --font-display: "Iowan Old Style", "Sitka Text", Cambria, Charter, "Noto Serif", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, Menlo, monospace;
    --sidebar-w: 248px;

    --island-bg: #14130f; --island-solid: #14130f; --island-line: #14130f;
    --island-ink: #f6f4ee; --island-muted: rgba(246, 244, 238, .6);
    --island-shadow: 0 16px 34px -16px rgba(20, 19, 15, .6);
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e0e0c;
    --surface: #161614;
    --surface-2: #1e1e1b;
    --ink: #f3f1ea;
    --ink-2: #cfcbc0;
    --muted: #98938a;
    --line: rgba(243, 241, 234, .1);
    --line-strong: rgba(243, 241, 234, .2);
    --brand: var(--pal-d);
    --brand-2: var(--pal-d);
    --brand-3: var(--pal-d);
    --brand-ink: var(--pal-ink-d);
    --on-brand: var(--on-pal-d);
    --brand-soft: color-mix(in srgb, var(--pal-d) 20%, transparent);
    --brand-gradient: var(--pal-d);
    --brand-gradient-vivid: var(--pal-d);
    --ok: #4cc17f; --warn: #f0a43a; --bad: #ff6b5e; --info: #5fb7d6;
    --surface-tint: rgba(243, 241, 234, .05);
    --surface-tint-strong: rgba(243, 241, 234, .09);
    --glass: var(--surface); --glass-strong: var(--surface); --card-bg: var(--surface);
    --shadow-2: 0 12px 30px -14px rgba(0, 0, 0, .8);
    --shadow-3: 0 30px 70px -26px rgba(0, 0, 0, .9);
    --island-bg: #2a2924; --island-solid: #2a2924; --island-line: rgba(243, 241, 234, .14);
    --island-ink: #f3f1ea; --island-muted: rgba(243, 241, 234, .6);
    --island-shadow: 0 16px 34px -14px rgba(0, 0, 0, .85);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        --bg: #0e0e0c;
        --surface: #161614;
        --surface-2: #1e1e1b;
        --ink: #f3f1ea;
        --ink-2: #cfcbc0;
        --muted: #98938a;
        --line: rgba(243, 241, 234, .1);
        --line-strong: rgba(243, 241, 234, .2);
        --brand: var(--pal-d);
        --brand-2: var(--pal-d);
        --brand-3: var(--pal-d);
        --brand-ink: var(--pal-ink-d);
        --on-brand: var(--on-pal-d);
        --brand-soft: color-mix(in srgb, var(--pal-d) 20%, transparent);
        --brand-gradient: var(--pal-d);
        --brand-gradient-vivid: var(--pal-d);
        --ok: #4cc17f; --warn: #f0a43a; --bad: #ff6b5e; --info: #5fb7d6;
        --surface-tint: rgba(243, 241, 234, .05);
        --surface-tint-strong: rgba(243, 241, 234, .09);
        --glass: var(--surface); --glass-strong: var(--surface); --card-bg: var(--surface);
        --shadow-2: 0 12px 30px -14px rgba(0, 0, 0, .8);
        --shadow-3: 0 30px 70px -26px rgba(0, 0, 0, .9);
        --island-bg: #2a2924; --island-solid: #2a2924; --island-line: rgba(243, 241, 234, .14);
        --island-ink: #f3f1ea; --island-muted: rgba(243, 241, 234, .6);
        --island-shadow: 0 16px 34px -14px rgba(0, 0, 0, .85);
    }
}

/* ==========================================================================
   Base : fond uni, typographie
   ========================================================================== */
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; letter-spacing: 0; }
body::before, body::after { display: none !important; }
.sidebar, .topbar, .notif-panel, .modal-overlay, .toast, .tabbar, .palette, .palette-box { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
::selection { background: var(--brand); color: var(--on-brand); }
p { color: var(--muted); }
h1, h2, h3, .brand, .crumb-title, .day-label, .big-number, .budget-amount { font-family: var(--font-body); }

.page-header { margin: 10px 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.page-header h1 {
    font-family: var(--font-display); font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.04;
    background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--ink);
    padding: 0; margin: 0; gap: 0;
}
.page-icon { display: none; }
@media (max-width: 960px) { .page-header h1 { font-size: 2rem; } .page-header { margin: 4px 0 20px; padding-bottom: 14px; } }

/* Repères en petites capitales monospace */
.card h3, .kpi-card h3, .sb-label, .work-k, .mini-title, .hours-sub, .palette-group, .stat-hint, .kpi-flag, th {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.card h3 .inline-icon, .card h3 svg { color: var(--muted); }

/* ==========================================================================
   Logo, marque
   ========================================================================== */
.logo-mark { background: transparent !important; box-shadow: none !important; border-radius: 0; backdrop-filter: none; color: var(--ink); }
.logo-mark::after, .logo-mark::before { display: none !important; }
.logo-mark svg { color: var(--ink); }
.logo-mark svg [stroke] { stroke: currentColor; }
.logo-mark svg circle[fill]:not(:last-of-type) { fill: currentColor; stroke: none; }
.logo-mark svg circle:last-of-type { fill: var(--brand); stroke: none; }
.brand { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.brand b {
    background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor;
    color: inherit; font-style: italic; font-weight: 400;
}
.sb-brand .brand { font-size: 1.6rem; }
.sb-brand:hover .logo-mark, .tb-logo:hover .logo-mark { transform: none; box-shadow: none !important; }
.nav-progress { background: var(--brand); box-shadow: none; }

/* ==========================================================================
   Barre latérale : du texte, des filets, un repère d'accent
   ========================================================================== */
.sidebar { background: var(--bg); color: var(--ink); border-right: 1px solid var(--line); box-shadow: none; padding: 24px 16px 14px; }
.sidebar::before, .sidebar::after { display: none; }
.sb-search {
    background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; box-shadow: none;
    padding: 10px 2px; height: auto; color: var(--muted);
}
.sb-search:hover { background: transparent; box-shadow: none; border-color: var(--ink); color: var(--ink); }
.sb-search svg { color: var(--muted); }
.sb-search kbd { font-family: var(--font-mono); background: transparent; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: none; }
.sb-label { opacity: 1; padding: 22px 10px 6px; }
.sb-label::after { display: none; }
.sb-link { color: var(--ink-2); border-radius: 6px; min-height: 36px; padding: 5px 10px; font-weight: 500; background: transparent; box-shadow: none; transition: background .15s, color .15s; }
.sb-link .nav-icon { display: none; }
.sb-link:hover { background: var(--surface-tint); color: var(--ink); }
.sb-link:active { transform: none; }
.sb-link.active { background: transparent; box-shadow: none; color: var(--ink); font-weight: 700; }
.sb-link.active::before {
    display: block; content: ""; position: absolute; left: -11px; right: auto; top: 50%; bottom: auto; width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 0; background: var(--brand); box-shadow: none;
}
.sb-pill { box-shadow: none; background: var(--ink); color: var(--bg); border-radius: 4px; font-family: var(--font-mono); font-size: .66rem; font-weight: 600; }
.sb-pill.bad { background: var(--bad); color: #fff; }
.sb-pill.warn { background: var(--warn); color: #fff; }
.sb-pill.muted { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); }
.sb-foot { border-top: 1px solid var(--line); }
.sb-user { color: var(--ink); }
.sb-user small { color: var(--muted); }
.sb-user:hover { background: var(--surface-tint); }
.avatar, .sb-user .avatar { background: var(--ink); color: var(--bg); border-radius: 6px; box-shadow: none; font-family: var(--font-display); font-weight: 400; }
.sidebar .icon-btn { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); box-shadow: none; border-radius: 6px; }
.sidebar .icon-btn:hover { background: var(--surface-tint); }
.theme-seg { background: transparent; border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: none; }
.theme-seg button { color: var(--muted); border-radius: 4px; }
.theme-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }

/* ==========================================================================
   Barre du haut
   ========================================================================== */
.topbar { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--line); box-shadow: none; }
.topbar.scrolled { box-shadow: none; border-bottom-color: var(--line-strong); }
.topbar::after { display: none; }
.crumb-chip { display: none; }
.crumb-title { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; letter-spacing: -.01em; }
.quick-field { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: none; }
.quick-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--brand-soft); }
.quick-field svg { color: var(--muted); }
.icon-btn, .theme-toggle, .notif-bell { background: transparent; border: 1px solid var(--line-strong); box-shadow: none; border-radius: 6px; color: var(--ink); }
.icon-btn:hover, .notif-bell:hover { background: var(--surface-tint); }
.notif-badge { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.notif-panel { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-3); }

/* ==========================================================================
   Cartes, listes, champs : papier et filets
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: 20px 22px; }
.card:hover { border-color: var(--line-strong); }
a.card:hover, .card.kpi-card-link:hover { box-shadow: none; transform: none; border-color: var(--ink); }
.card-head { margin-bottom: 12px; }
.item-row { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.item-row:hover { background: var(--surface-tint); box-shadow: none; border-color: var(--line); }
input, select, textarea { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
.modal-overlay { background: rgba(20, 19, 15, .5); }
.modal-box { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-3); }
@media (max-width: 960px) { .modal-box { border-radius: 14px; } .card { padding: 18px; border-radius: 8px; } }
.empty-state { color: var(--muted); }
.progress-bar { height: 4px; border-radius: 0; background: var(--surface-tint-strong); }
.progress-fill { border-radius: 0; }
.skeleton, .sk { background: var(--surface-tint-strong); }
.badge { box-shadow: none; border-radius: 4px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; }
.card h3 a, .card-footer-link a, a.card-link { color: var(--ink); }
.content p a, .form-hint a, .empty-state a, .help-card a, .hours-note a, .pay-meta a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Boutons : l'encre porte l'action, l'accent la souligne
   ========================================================================== */
.btn { height: 40px; border-radius: 6px; font-weight: 600; letter-spacing: 0; box-shadow: none; }
.btn-small { height: 32px; border-radius: 6px; }
.btn-primary { background: var(--ink); background-image: none; color: var(--bg); border: 1px solid var(--ink); text-shadow: none; box-shadow: none; }
@media (hover: hover) {
    .btn-primary:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); background-image: none; transform: none; filter: none; box-shadow: none; }
}
.btn-primary:active:not(:disabled) { box-shadow: none; transform: translateY(1px); }
.btn-outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); box-shadow: none; }
.btn-outline:hover { background: var(--surface-tint); border-color: var(--ink); color: var(--ink); }
.fab { background: var(--ink); color: var(--bg); border-radius: 14px; box-shadow: 0 14px 28px -14px rgba(20, 19, 15, .6); }
.fab::before { display: none; }

/* Filtres, vues : actif = encre */
.prefilters button, .filter-btn, .view-toggle-btn { border-radius: 6px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2); box-shadow: none; }
.prefilters button[aria-pressed="true"], .filter-btn.active, .view-toggle-btn.active { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: none; }
.prefilters button[aria-pressed="true"] b { color: color-mix(in srgb, var(--bg) 70%, transparent); }
body[data-mod="inventory"] .inv-kpi[aria-pressed="true"],
body[data-mod="inventory"] .inv-chip[data-cat=""][aria-pressed="true"],
body[data-mod="inventory"] .inv-opts-btn[aria-expanded="true"],
body[data-mod="account"] .acc-nav a.active { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: none; }

/* ==========================================================================
   Compteurs et accueil
   ========================================================================== */
.kpi-card { border-top: 1px solid var(--line); }
.kpi-card::after { display: none; }
.kpi-icon { display: none; }
.big-number, .kpi-card .big-number { font-weight: 300; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-meter { height: 3px; border-radius: 0; background: var(--surface-tint-strong); }
.kpi-meter i { background: var(--ink); border-radius: 0; }
.kpi-meter.bad i { background: var(--bad); }
.t-bad { color: var(--bad) !important; } .t-warn { color: var(--warn) !important; }

body[data-mod="dashboard"] .dash-date { font-family: var(--font-mono); color: var(--muted); letter-spacing: .12em; font-size: .72rem; text-transform: uppercase; }
body[data-mod="dashboard"] .dash-greeting {
    font-family: var(--font-display); font-weight: 400; letter-spacing: -.03em; color: var(--ink); line-height: 1.02;
    font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.8rem);
}
body[data-mod="dashboard"] .dash-greeting em { font-style: italic; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--brand-ink); }
body[data-mod="dashboard"] .focus { border-radius: var(--radius); box-shadow: none; padding: 18px 20px; }
body[data-mod="dashboard"] .focus::after { display: none; }
body[data-mod="dashboard"] .focus.level-danger,
:root[data-theme="dark"] body[data-mod="dashboard"] .focus.level-danger { background: #d92d20; }
body[data-mod="dashboard"] .focus.level-warning,
:root[data-theme="dark"] body[data-mod="dashboard"] .focus.level-warning { background: #d9570b; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body[data-mod="dashboard"] .focus.level-danger { background: #d92d20; }
    :root:not([data-theme="light"]) body[data-mod="dashboard"] .focus.level-warning { background: #d9570b; }
}
body[data-mod="dashboard"] .focus.has-link:hover { translate: 0 0; box-shadow: none; filter: brightness(1.06); }
body[data-mod="dashboard"] .focus-icon-badge { border-radius: 6px; background: rgba(255, 255, 255, .16); backdrop-filter: none; }
body[data-mod="dashboard"] .focus.level-calm { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); }
body[data-mod="dashboard"] .dash-ai, .smart-card, body[data-mod="dashboard"] .smart-card {
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius); box-shadow: none;
}
body[data-mod="dashboard"] .dash-ai .ai-ico { background: transparent; color: var(--ink); box-shadow: none; border-radius: 6px; }
body[data-mod="dashboard"] .dash-ai .ai-title { color: var(--muted); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; }
body[data-mod="dashboard"] .smart-card:hover { translate: 0 0; }
.smart-ico { border-radius: 6px; background: transparent; color: var(--ink); }
.ai-ask-btn, .btn-primary.ai-ask-btn { --mod: var(--brand); }

/* ==========================================================================
   Navigation mobile : barre d'encre
   ========================================================================== */
@media (max-width: 960px) {
    .tabbar { border-radius: 16px; border: 1px solid var(--island-line); box-shadow: var(--island-shadow); }
    .tabbar::before { display: none; }
    .tab-ico { border-radius: 8px; }
    .tabbar .on .tab-ico { background: var(--brand); color: var(--on-brand); box-shadow: none; }
    .tabbar.has-ind .on .tab-ico { background: transparent; color: var(--on-brand); }
    .tab-ind { background: var(--brand); box-shadow: none; border-radius: 8px; }
    .tab-dot { border-color: var(--island-solid); }
    .fab { border-radius: 14px; background: var(--brand); color: var(--on-brand); box-shadow: 0 14px 28px -14px rgba(20, 19, 15, .6); }
    .sidebar { background: var(--bg); }
}
@media (max-width: 760px) { body[data-mod="mail"].mbx-reading :is(.topbar, .tabbar, .fab) { display: none !important; } }

/* Palette de commandes (Ctrl K) */
.palette-box { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-3); }
.palette-item .pi-ico { background: transparent !important; color: var(--ink) !important; box-shadow: none !important; border-radius: 6px; }
.palette-item.sel { background: var(--surface-2); }
.palette-input kbd, .palette-foot kbd, kbd { font-family: var(--font-mono); background: transparent; border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: none; color: var(--muted); }

/* ==========================================================================
   Travail
   ========================================================================== */
.work-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.work-top .card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.work-k { display: block; }
.work-next-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.work-next-main b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -.025em; line-height: 1.05; color: var(--ink); }
.work-next-main span { font-family: var(--font-mono); font-size: 1rem; color: var(--ink-2); }
.work-big { font-weight: 300; font-size: clamp(2.1rem, 1.5rem + 1.8vw, 2.9rem); letter-spacing: -.04em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.work-next-sub { color: var(--muted); font-size: .88rem; }
.work-stat .kpi-meter { margin: 2px 0; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.work-plan { display: block; color: var(--muted); font-size: .72rem; font-family: var(--font-body); letter-spacing: 0; }
.work-row b small { font-family: var(--font-body); font-size: .74rem; font-weight: 600; margin-left: 4px; }
.work-row b small.plus { color: var(--ok); } .work-row b small.minus { color: var(--warn); }
.work-row.suspect b { color: var(--warn); }
.work-row { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.work-row:last-of-type { border-bottom: 0; }
.work-row.now { border-left: 3px solid var(--brand); padding-left: 10px; }
.work-day { font-weight: 600; }
.work-time { font-family: var(--font-mono); color: var(--ink-2); font-size: .9rem; }
.work-row b { font-family: var(--font-mono); font-weight: 500; font-size: .86rem; color: var(--muted); }
.work-more { display: inline-block; margin-top: 12px; font-size: .88rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.work-sync-state { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.work-sync-state b { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: -.02em; }
.work-sync-state span { color: var(--muted); font-size: .88rem; }
.work-sync-state.bad b { color: var(--bad); }
.work-sync-note { font-size: .9rem; line-height: 1.5; }
.hours-card { margin-bottom: 14px; }
@media (max-width: 960px) { .work-top { grid-template-columns: 1fr; } .work-row { grid-template-columns: 6rem 1fr auto; } }

/* ==========================================================================
   Connexion / inscription
   ========================================================================== */
.auth-body { background: var(--bg); }
.auth-aside { background: #14130f; color: #f6f4ee; }
.auth-aside, .auth-aside .brand, .auth-aside .brand b, .auth-aside p, .auth-aside small, .auth-aside h2 { color: #f6f4ee; }
.auth-aside .logo-mark svg, .auth-split .auth-mobile-brand .logo-mark svg { color: #f6f4ee; }
.auth-aside p, .auth-aside small { opacity: .72; }
.auth-aside::before { display: none; }
.auth-orb { display: none; }
.auth-aside::after { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--brand); border-radius: 0; z-index: 1; }
.auth-pitch h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.03em; line-height: 1.04; }
.auth-split .demo-card { border-radius: 8px; box-shadow: none; backdrop-filter: none; }
.auth-split .demo-focus { background: #f6f4ee; color: #14130f; }
.auth-split .demo-focus * { color: inherit; }
.auth-split .demo-focus .demo-ico { background: transparent; color: #14130f; }
.auth-split .auth-main { background: var(--bg); }
.auth-split .auth-card { border-radius: 12px; box-shadow: none; border: 1px solid var(--line-strong); background: var(--surface); }
.auth-split .auth-card h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.025em; }
.auth-split .auth-card .logo-mark { display: none; }
.auth-split .auth-form .btn-primary, .auth-split .auth-cta {
    height: 48px; border-radius: 6px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); box-shadow: none;
}
.auth-split .auth-form .btn-primary:hover, .auth-split .auth-cta:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); filter: none; transform: none; }
.auth-split .google-btn { border-radius: 6px; }
@media (max-width: 960px) {
    .auth-body.auth-split .auth-main::before { background: #14130f; }
    .auth-split .auth-mobile-brand .brand, .auth-split .auth-mobile-brand .brand b, .auth-split .auth-mobile-brand small { color: #f6f4ee; -webkit-text-fill-color: #f6f4ee; }
}

/* ==========================================================================
   Aide
   ========================================================================== */
body[data-mod="help"] .help-hero { border-radius: var(--radius-lg); box-shadow: none; background: #14130f; color: #f6f4ee; }
body[data-mod="help"] .help-hero h1, body[data-mod="help"] .help-hero h2 { font-family: var(--font-display); font-weight: 400; color: #f6f4ee; }
body[data-mod="help"] .help-orb { display: none; }
body[data-mod="help"] .help-hero::after { display: block; content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 6px; border-radius: 0; background: var(--brand); }
body[data-mod="help"] .help-ico { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid var(--line-strong); border-radius: 6px; }
body[data-mod="help"] .help-card:hover { transform: none; }
.step-num { color: var(--brand-ink); }

/* ==========================================================================
   Mon compte : aperçus de thème, choix de la couleur d'accent
   ========================================================================== */
body[data-mod="account"] .acc-prev i:nth-child(1) { background: var(--brand); }
body[data-mod="account"] .acc-pal-title { margin: 18px 0 10px; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
body[data-mod="account"] .acc-palettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
body[data-mod="account"] .acc-pal {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: 8px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 .82rem var(--font-body); cursor: pointer;
    transition: border-color .15s;
}
body[data-mod="account"] .acc-pal:hover { border-color: var(--ink); }
body[data-mod="account"] .acc-pal i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(20, 19, 15, .12); }
body[data-mod="account"] .acc-pal i svg { opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s; mix-blend-mode: difference; }
body[data-mod="account"] .acc-pal[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
body[data-mod="account"] .acc-pal[aria-pressed="true"] i svg { opacity: 1; transform: none; }
@media (max-width: 560px) {
    body[data-mod="account"] .acc-palettes { gap: 6px; }
    body[data-mod="account"] .acc-pal { padding: 10px 2px 8px; font-size: .68rem; }
    body[data-mod="account"] .acc-pal i { width: 30px; height: 30px; }
}

/* ==========================================================================
   Simplicité : options d'ajout repliées jusqu'à la saisie (aussi sur ordinateur)
   ========================================================================== */
@media (min-width: 641px) {
    body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add-opts {
        max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden; overflow: hidden;
        transition: max-height .25s ease, padding .25s ease, opacity .18s ease, visibility 0s linear .25s;
    }
    body:is([data-mod="tasks"], [data-mod="projects"]) .plan-add:is(.is-open, :focus-within, :has(input[type="text"]:not(:placeholder-shown))) .plan-add-opts {
        max-height: 340px; padding-top: 10px; padding-bottom: 4px; opacity: 1; visibility: visible;
        transition: max-height .32s ease, padding .25s ease, opacity .22s ease, visibility 0s;
    }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
